@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url("a9cb1cd82332b23a.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url("c503cc5ec5f8b2c7.woff2") format("woff2")}
:root{color-scheme:dark;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;font-synthesis:none;color:#eaf3f3;background:#07151d;--mint:#91e4cd;--muted:#a4b6bd}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 14% 80%,#0c3139 0%,transparent 50%),radial-gradient(ellipse at 84% 16%,#142c43 0%,transparent 48%),#07151d;-webkit-font-smoothing:antialiased;isolation:isolate}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
main{position:relative;z-index:1;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding:4rem 1rem 8rem}
.identity{text-align:center;max-width:100%;transform:translateY(1rem)}
.profiles{display:flex;justify-content:center;flex-wrap:wrap;max-width:100%;gap:.8rem;position:relative}
.profile{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:48px;min-height:64px;padding:.65rem .55rem;color:#b8c9cf;text-decoration:none;border-radius:10px;outline-offset:4px;-webkit-tap-highlight-color:transparent;transition:color 180ms ease,background-color 180ms ease}
.profile:focus-visible{outline:2px solid var(--mint);color:#ecfff9;background:#91e4cd08}
.profile svg{width:23px;height:23px;fill:currentColor;transition:transform 180ms ease}
.service-name{font-size:.55rem;letter-spacing:.065em;margin-top:12px}
.indicator{position:absolute;bottom:0;height:2px;width:4px;border-radius:3px;background:transparent;transition:width 180ms ease,background-color 180ms ease}
.account{position:absolute;top:calc(100% + 1.25rem);left:50%;transform:translateX(-50%);font-size:.65rem;line-height:1.6;color:var(--mint);white-space:nowrap;visibility:hidden;opacity:0;transition:opacity 180ms ease}
.profile:focus-visible .indicator{width:18px;background:var(--mint)}
.profile:focus-visible .account{visibility:visible;opacity:1}
footer{position:absolute;z-index:1;bottom:1.8rem;left:4.5rem;right:4.5rem;text-align:center;color:var(--muted);font-size:.65rem;line-height:1.8}
footer p{margin:0;display:flex;justify-content:center;align-items:center;gap:.9rem;flex-wrap:wrap}
footer strong{font-weight:400;color:#c6d5d9}
.separator{color:#76b8ac;font-size:.36rem}
.roles{display:inline-block;width:13ch;flex-shrink:0;animation:roles-width 115s infinite}
.role-window{display:block;height:1.8em;overflow:hidden}
.role-track{display:block;animation:roles-slide 115s infinite;will-change:transform}
.role-track>span{display:block;height:1.8em;line-height:1.8;white-space:nowrap}
.motion-toggle:checked ~ footer .role-track,.motion-toggle:checked ~ footer .roles{animation-play-state:paused}
@keyframes roles-slide{0.000000%,3.478261%{transform:translateY(-0em)}4.347826%,7.826087%{transform:translateY(-1.8em)}8.695652%,12.173913%{transform:translateY(-3.6em)}13.043478%,16.521739%{transform:translateY(-5.4em)}17.391304%,20.869565%{transform:translateY(-7.2em)}21.739130%,25.217391%{transform:translateY(-9em)}26.086957%,29.565217%{transform:translateY(-10.8em)}30.434783%,33.913043%{transform:translateY(-12.6em)}34.782609%,38.260870%{transform:translateY(-14.4em)}39.130435%,42.608696%{transform:translateY(-16.2em)}43.478261%,46.956522%{transform:translateY(-18em)}47.826087%,51.304348%{transform:translateY(-19.8em)}52.173913%,55.652174%{transform:translateY(-21.6em)}56.521739%,60.000000%{transform:translateY(-23.4em)}60.869565%,64.347826%{transform:translateY(-25.2em)}65.217391%,68.695652%{transform:translateY(-27em)}69.565217%,73.043478%{transform:translateY(-28.8em)}73.913043%,77.391304%{transform:translateY(-30.6em)}78.260870%,81.739130%{transform:translateY(-32.4em)}82.608696%,86.086957%{transform:translateY(-34.2em)}86.956522%,90.434783%{transform:translateY(-36em)}91.304348%,94.782609%{transform:translateY(-37.8em)}95.652174%,99.130435%{transform:translateY(-39.6em)}100%{transform:translateY(-41.4em)}}
/* JetBrains Mono: match the visible role's character width while it slides. */
@keyframes roles-width{0.000000%,3.478261%{width:13ch}4.347826%,7.826087%{width:21ch}8.695652%,12.173913%{width:23ch}13.043478%,16.521739%{width:22ch}17.391304%,20.869565%{width:15ch}21.739130%,25.217391%{width:17ch}26.086957%,29.565217%{width:17ch}30.434783%,33.913043%{width:26ch}34.782609%,38.260870%{width:13ch}39.130435%,42.608696%{width:11ch}43.478261%,46.956522%{width:16ch}47.826087%,51.304348%{width:26ch}52.173913%,55.652174%{width:18ch}56.521739%,60.000000%{width:12ch}60.869565%,64.347826%{width:22ch}65.217391%,68.695652%{width:16ch}69.565217%,73.043478%{width:24ch}73.913043%,77.391304%{width:25ch}78.260870%,81.739130%{width:17ch}82.608696%,86.086957%{width:23ch}86.956522%,90.434783%{width:17ch}91.304348%,94.782609%{width:25ch}95.652174%,99.130435%{width:23ch}100%{width:13ch}}
.motion-control{position:fixed;z-index:2;bottom:1rem;right:1rem;width:44px;height:44px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;cursor:pointer;color:#89aaa8;opacity:.22;transition:opacity 180ms ease,color 180ms ease,border-color 180ms ease}
.motion-control svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.motion-control .play-mark{display:none}
.motion-toggle:focus-visible ~ .motion-control{outline:2px solid var(--mint);outline-offset:4px;opacity:.9}
.motion-toggle:checked ~ .motion-control .pause-mark{display:none}
.motion-toggle:checked ~ .motion-control .play-mark{display:block}
.motion-toggle:checked ~ .atmosphere .drifter,.motion-toggle:checked ~ .atmosphere .glyph{animation-play-state:paused}

/* Foreground stays above a freely moving decorative stage. */
.atmosphere{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.atmosphere::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,#14424a35,transparent 48%)}
.depth-field{position:absolute;inset:0}
.webgl-field{position:absolute;inset:0;pointer-events:none}
.webgl-ready .depth-field{opacity:0}
.drifter{--display-size:min(var(--size,100px),14vw,12vh);position:absolute;display:none;left:var(--lane-x,18%);top:var(--lane-y,19%);width:var(--display-size);height:var(--display-size);margin:calc(var(--display-size) / -2);color:#a8d6d4;opacity:.045;animation:drift var(--duration,80s) var(--delay,0s) ease-in-out infinite}
.drifter:nth-child(-n+6){display:block}
.drifter:nth-child(6n+1){--lane-x:18%;--lane-y:26%}
.drifter:nth-child(6n+2){--lane-x:67%;--lane-y:18%}
.drifter:nth-child(6n+3){--lane-x:82%;--lane-y:61%}
.drifter:nth-child(6n+4){--lane-x:24%;--lane-y:78%}
.drifter:nth-child(6n+5){--lane-x:48%;--lane-y:54%}
.drifter:nth-child(6n+6){--lane-x:78%;--lane-y:85%}
.glyph{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;animation-duration:var(--duration,80s);animation-delay:var(--delay,0s);animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.glyph-sharp{animation-name:focus-sharp;opacity:1}
.glyph-soft{filter:blur(4px);animation-name:focus-soft;opacity:0}
.motion-ready .depth-field .drifter{--display-size:var(--size,100px);display:block;left:50%;top:48%;opacity:0;visibility:hidden;animation:none}
.motion-ready .glyph{animation:none}
@keyframes drift{0%,100%{transform:translate3d(-2vw,-1.3vh,0) perspective(1000px) translateZ(-280px) rotate(-10deg)}33%{transform:translate3d(2vw,.6vh,0) perspective(1000px) translateZ(-50px) rotate(8deg)}66%{transform:translate3d(-.5vw,1.3vh,0) perspective(1000px) translateZ(-220px) rotate(-3deg)}}
@keyframes focus-sharp{0%,100%{opacity:.2}33%{opacity:1}66%{opacity:.1}}
@keyframes focus-soft{0%,100%{opacity:.8}33%{opacity:0}66%{opacity:.9}}
.drifter--typo3{--size:clamp(70px,10vw,140px);--duration:94s;--delay:-14s;color:#90d5c3}
.drifter--git{--size:clamp(64px,8vw,116px);--duration:82s;--delay:-44s}
.drifter--php{--size:clamp(90px,11vw,165px);--duration:108s;--delay:-71s;color:#acc2e4}
.drifter--slack{--size:clamp(60px,7vw,104px);--duration:91s;--delay:-35s}
.drifter--terminal{--size:clamp(70px,8vw,120px);--duration:102s;--delay:-67s}
.drifter--docker{--size:clamp(80px,10vw,155px);--duration:118s;--delay:-23s;color:#9ebdd9}
.drifter--html5{--size:clamp(65px,7vw,102px);--duration:87s;--delay:-63s}
.drifter--code{--size:clamp(80px,9vw,132px);--duration:112s;--delay:-49s}
.drifter--gitlab{--size:clamp(66px,8vw,112px);--duration:123s;--delay:-84s;color:#98c9c0}
.drifter--pipeline{--size:clamp(72px,9vw,130px);--duration:136s;--delay:-41s}
.drifter--smarthome{--size:clamp(64px,7vw,104px);--duration:116s;--delay:-91s}
.drifter--kubernetes{--size:clamp(76px,9vw,136px);--duration:141s;--delay:-112s;color:#9dbedb}
.drifter--devops{--size:clamp(80px,10vw,146px);--duration:129s;--delay:-62s}
.drifter--loxone{--size:clamp(140px,16vw,230px);--duration:147s;--delay:-31s}
.drifter--symfony{--size:clamp(66px,7vw,108px);--duration:132s;--delay:-98s;color:#b0c3d6}
.drifter--crowdin{--size:clamp(70px,8vw,120px);--duration:153s;--delay:-77s}
.drifter--intellijidea{--size:clamp(64px,7vw,106px);--duration:138s;--delay:-119s;color:#a9bed8}
.drifter--server{--size:clamp(72px,8vw,122px);--duration:144s;--delay:-103s;color:#9ebfcf}
.drifter--nginx{--size:clamp(70px,8vw,118px);--duration:157s;--delay:-57s;color:#99cbb7}
.drifter--traefik{--size:clamp(76px,9vw,132px);--duration:149s;--delay:-126s;color:#a6c5dc}
.drifter--network{--size:clamp(72px,9vw,130px);--duration:163s;--delay:-73s;color:#9acacb}
.drifter--unifi{--size:clamp(68px,8vw,116px);--duration:171s;--delay:-139s;color:#9dbfdb}
.drifter--sketchup{--size:clamp(74px,9vw,128px);--duration:159s;--delay:-107s}
.drifter--blender{--size:clamp(80px,10vw,142px);--duration:177s;--delay:-47s;color:#aacac3}
.drifter--proxmox{--size:clamp(72px,8vw,124px);--duration:167s;--delay:-121s}
.drifter--xliff{--size:clamp(70px,9vw,122px);--duration:152s;--delay:-82s}
.drifter--sentry{--size:clamp(70px,9vw,116px);--duration:169s;--delay:-112s}
.drifter--python{--size:clamp(70px,9vw,126px);--duration:181s;--delay:-59s}
.drifter--security{--size:clamp(70px,9vw,118px);--duration:174s;--delay:-143s}
.drifter--mqtt{--size:clamp(70px,9vw,136px);--duration:158s;--delay:-94s}
.drifter--homeassistant{--size:clamp(70px,9vw,120px);--duration:183s;--delay:-128s}
.drifter--zigbee{--size:clamp(70px,9vw,112px);--duration:165s;--delay:-71s}
.drifter--lorawan{--size:clamp(70px,9vw,148px);--duration:187s;--delay:-153s}
.drifter--go{--size:clamp(90px,11vw,165px);--duration:173s;--delay:-109s;color:#9dcbd4}
.drifter--dslr{--size:clamp(80px,10vw,140px);--duration:179s;--delay:-117s;color:#a9c5d2}
.drifter--espresso{--size:clamp(76px,9vw,132px);--duration:185s;--delay:-137s;color:#b1c8bd}

@media(hover:hover){.profile:hover{color:var(--mint);background:#91e4cd08}.profile:hover svg{transform:translate3d(0,-2px,0)}.profile:hover .indicator{width:18px;background:var(--mint)}.profile:hover .account{visibility:visible;opacity:1}.motion-control:hover{color:var(--mint);border-color:#91e4cd16;opacity:.6}}
@media(hover:none){.account{display:none}}
@media(max-width:600px){.drifter{--display-size:min(var(--size,100px),20vw,12vh)}.drifter:nth-child(n+5){display:none}.drifter:nth-child(4n+1){--lane-x:25%;--lane-y:20%}.drifter:nth-child(4n+2){--lane-x:75%;--lane-y:20%}.drifter:nth-child(4n+3){--lane-x:25%;--lane-y:75%}.drifter:nth-child(4n+4){--lane-x:75%;--lane-y:75%}.profiles{gap:.3rem}.profile{min-width:48px;padding:.65rem .4rem}footer{left:1rem;right:1rem;bottom:4.6rem}footer p{gap:.65rem}}
@media(max-width:360px){footer p{gap:.1rem;flex-direction:column}.separator{display:none}.profiles{gap:.2rem}}
@media(max-height:460px){main{padding:2rem 1rem 7rem;min-height:460px}body{position:relative;min-height:460px}}
@media(prefers-reduced-motion:reduce){.drifter,.glyph,.role-track,.roles{animation:none;will-change:auto}.drifter{display:none;visibility:visible;transform:perspective(1000px) translateZ(-180px) rotate(-8deg);opacity:.045}.drifter:nth-child(-n+6){display:block}.glyph-sharp{opacity:1}.glyph-soft{display:none}.profile,.profile svg,.indicator,.account,.motion-control{transition:none}.profile:hover svg{transform:none}.motion-toggle,.motion-control{display:none}}

@media(prefers-reduced-motion:reduce) and (max-width:600px){.drifter:nth-child(n+5){display:none}}