:root{--name-size:clamp(3.2rem, 1.2rem + 12vw, 6.5rem);--period:calc(1000px / .927184)}html{scrollbar-width:none;overscroll-behavior-y:none}html::-webkit-scrollbar{display:none}body{font-synthesis-weight:none;text-rendering:optimizelegibility}.runway{height:320svh}.stage{--pad:clamp(1.5rem, 6vw, 5rem);isolation:isolate;padding:var(--pad);padding-bottom:calc(var(--pad) + 6rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:clamp(.85rem,2vh,1.2rem);display:flex;position:fixed;inset:0}.stage:before{content:"";z-index:-1;filter:blur(20px);opacity:.8;pointer-events:none;background:radial-gradient(oklch(80% .09 220/.06),#0000 68%);border-radius:50%;width:min(82vw,66rem);height:min(32vw,23rem);position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 2rem))}.name{isolation:isolate;color:var(--ink);font-size:var(--name-size);letter-spacing:calc(1.55px - .052em);text-wrap:balance;word-spacing:-.035em;margin:0 -.12em;padding-inline:.12em;font-weight:540;line-height:.95;position:relative}@supports ((-webkit-background-clip:text) or (background-clip:text)){.name{background-image:repeating-linear-gradient(112deg in oklch, var(--ink) 0px, oklch(96% .012 215) 120px, var(--ice-pale) 260px, var(--ice-soft) 380px, var(--ice-strong) 470px, var(--ice-soft) 570px, var(--ice-pale) 625px, var(--ice-white) 647px, var(--ice-pale) 670px, var(--ice-soft) 760px, var(--ice-pale) 880px, var(--ink) 1000px);background-position-x:0;background-repeat:repeat;background-size:var(--period) 100%;color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.name:before{content:attr(data-text);inset:0;z-index:-1;background-image:repeating-linear-gradient(112deg in oklch, transparent 0px, transparent 190px, oklch(93% .025 215/.14) 260px, oklch(82% .075 220/.42) 360px, oklch(80% .09 220/.78) 470px, oklch(86% .055 218/.5) 570px, oklch(93% .025 215/.24) 610px, oklch(99% .006 215/.82) 647px, oklch(93% .025 215/.26) 685px, oklch(86% .055 218/.14) 760px, oklch(93% .025 215/.08) 880px, transparent 960px, transparent 1000px);background-position-x:0;background-repeat:repeat;background-size:var(--period) 100%;color:#0000;filter:blur(30px);opacity:.24;pointer-events:none;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;padding-block:60px;padding-inline:.12em;position:absolute;inset-block:-60px}.name:after{content:attr(data-text);z-index:1;color:#0000;filter:contrast(1.18);mix-blend-mode:multiply;opacity:.09;pointer-events:none;-webkit-text-fill-color:transparent;background:url(/ice-grain.svg) 0 0/12rem 12rem;-webkit-background-clip:text;background-clip:text;padding-inline:.12em;position:absolute;inset:0}.name::selection{-webkit-text-fill-color:var(--paper)}}.role{color:var(--muted-strong);font-family:var(--font-mono);letter-spacing:-.005em;margin:0;font-size:clamp(.86rem,.78rem + .42vw,1.08rem);font-weight:440}.role .tail{white-space:nowrap}.strip{background:linear-gradient(to top in oklch, oklch(86% .055 218/.05), transparent);flex-wrap:wrap;justify-content:center;gap:.5rem clamp(2rem,6vw,4rem);margin:0;padding:clamp(1.2rem,3.2vh,1.8rem) clamp(1.5rem,6vw,5rem);list-style:none;display:flex;position:fixed;inset:auto 0 0}.strip:before{content:"";background:linear-gradient(90deg,#0000,oklch(96.7% .004 230/.14) 20%,oklch(86% .055 218/.3) 50%,oklch(96.7% .004 230/.14) 80%,#0000);height:1px;position:absolute;inset:0 0 auto}.strip a{min-height:1.5rem;color:var(--fog);font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;align-items:center;gap:.62em;padding-block:3px;font-size:.72rem;font-weight:500;text-decoration:none;transition:color .2s;display:inline-flex}.strip .icon{--stroke-width:1.5;opacity:.82;width:14px;height:14px;stroke-width:var(--stroke-width);flex:none;transition:opacity .2s,stroke-width .2s}.strip .icon--github{--stroke-width:2.25}.strip a:hover,.strip a:focus-visible{color:var(--ice)}.strip a:hover .icon,.strip a:focus-visible .icon{opacity:1;stroke-width:calc(var(--stroke-width) * 1.1)}.strip .label{position:relative}.strip .label:after{content:"";clip-path:inset(0 100% 0 0);background:currentColor;height:1px;transition:clip-path .26s cubic-bezier(.2,.7,.2,1);position:absolute;bottom:-3px;left:0;right:.12em}.strip a:hover .label:after,.strip a:focus-visible .label:after{clip-path:inset(0)}.hint{opacity:.45;pointer-events:none;background:linear-gradient(#f3f5f721,#0000);width:1px;height:clamp(26px,4.5vh,40px);transition:opacity .6s;position:fixed;bottom:clamp(5rem,12vh,6.5rem);left:50%;overflow:hidden;translate:-50%}.scrolled .hint{opacity:0;animation:none}.hint:after{content:"";inset-inline:0;background:linear-gradient(transparent, var(--ice), transparent);height:45%;position:absolute;top:0}@media (prefers-reduced-motion:no-preference){.stage:before{animation:1.4s cubic-bezier(.16,1,.3,1) both glow-enter}.role{animation:.6s ease-out .55s both detail-enter}.strip{animation:.7s ease-out .85s both detail-enter}.hint:after{animation:2.8s cubic-bezier(.4,0,.5,1) 1.15s infinite both trickle}.name,.name:before{animation:14s linear infinite drift;animation-timing-function:linear(0, .059, .1168, .1723, .2246, .2729, .3168, .3562, .3912, .4223, .4501, .4756, .5, .5244, .5499, .5777, .6088, .6438, .6832, .7271, .7754, .8277, .8832, .941, 1)}}@media (width>=1800px) and (height>=800px){:root{--name-size:clamp(6.75rem, 6.1vw, 7.75rem)}.strip a{font-size:.75rem}}@media (width<=560px){.stage{padding-bottom:var(--pad)}.name{translate:0 -4svh}.name:after{opacity:.065}.role{padding-inline:var(--pad);color:var(--muted-strong);text-align:center;font-size:.82rem;position:fixed;bottom:6.6rem;left:0;right:0}.hint{bottom:26%}}@media (height<=520px) and (width>=561px){.stage{gap:.75rem;padding:1rem 2rem 4.5rem}.name{font-size:clamp(3rem,18vh,5rem)}.role{font-size:.82rem}.strip{padding:.7rem 2rem}.hint{display:none}}@media (width<=320px){.role{bottom:10rem}.hint{display:none}}@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){.name,.name:before{animation-name:drift,none,scrub;animation-duration:14s, 1.8s, auto;animation-composition:replace,add,add;animation-iteration-count:infinite,1,1;animation-fill-mode:none,forwards,both;animation-timeline:auto,auto,scroll(root);animation-range:normal,normal,2px calc(100% - 2px);animation-timing-function:linear(0, .059, .1168, .1723, .2246, .2729, .3168, .3562, .3912, .4223, .4501, .4756, .5, .5244, .5499, .5777, .6088, .6438, .6832, .7271, .7754, .8277, .8832, .941, 1), cubic-bezier(.16, 1, .3, 1), linear}.fonts-ready .name,.fonts-ready .name:before{animation-name:drift,entrance,scrub}.hint{animation-name:fade,hint-enter;animation-duration:auto, .6s;animation-timing-function:linear,ease-out;animation-delay:0s,1.15s;animation-fill-mode:both,both;animation-timeline:scroll(root),auto;animation-range:0% 12%,normal}}}html.mobile-virtual-scroll{overscroll-behavior:none;overflow:hidden}.mobile-virtual-scroll body{touch-action:pan-x;height:100svh;overflow:hidden}.mobile-virtual-scroll .runway{height:0}.mobile-virtual-scroll .stage{height:100svh;inset:0 0 auto}@media (prefers-reduced-motion:no-preference){.mobile-virtual-scroll .name,.mobile-virtual-scroll .name:before{animation-composition:replace;animation-name:drift;animation-duration:14s;animation-iteration-count:infinite;animation-delay:0s;animation-fill-mode:none;animation-timeline:auto;animation-range:normal}.mobile-virtual-scroll .hint{animation:.6s ease-out 1.15s both hint-enter}.mobile-virtual-scroll.scrolled .hint{opacity:0;animation:none}}@keyframes drift{0%{background-position-x:var(--gesture-x,0px)}to{background-position-x:calc(var(--gesture-x,0px) + var(--period))}}@keyframes scrub{0%{background-position-x:0}to{background-position-x:var(--period)}}@keyframes entrance{0%{background-position-x:calc(var(--period) * -1)}to{background-position-x:0}}@keyframes fade{0%{opacity:.45}to{opacity:0}}@keyframes trickle{0%{opacity:0;translate:0 -110%}25%,75%{opacity:1}to{opacity:0;translate:0 240%}}@keyframes detail-enter{0%{opacity:0}}@keyframes glow-enter{0%{opacity:0;scale:.92}}@keyframes hint-enter{0%{filter:opacity(0)}}@media (prefers-reduced-motion:reduce){.runway{height:0}.hint{display:none}}@supports not (animation-timeline:scroll()){.runway{height:0}.hint{display:none}}@media (forced-colors:active){.name{color:canvastext;-webkit-text-fill-color:CanvasText;background-image:none}.role,.strip a{color:canvastext}.strip{background:0 0;border-top:1px solid canvastext}.strip:before,.name:before,.name:after,.stage:before,.hint{display:none}.strip .label:after{background:canvastext}}
