/* ==========================================================================
   AML portfolio
   Layout and section styling come from the original design and still live
   inline in index.html. This sheet holds the design tokens, the hover/focus
   states, the motion system, and the UI for the interactive extras
   (terminal, command palette, arcade, achievements and easter eggs).
   ========================================================================== */

/* ---- Fonts (self-hosted variable fonts, latin + latin-ext) ---------------- */
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(../fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/syne-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Syne';font-style:normal;font-weight:700 800;font-display:swap;src:url(../fonts/syne-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens --------------------------------------------------------------- */
:root{
  --acc:#00f0ff;--acc-rgb:0 240 255;--cytxt:#67e8f9;
  --pu:#8b5cf6;--pl:#a78bfa;--am:#f59e0b;--gr:#34d399;--grn:#22c55e;--red:#ff4d6d;
  --bg:#0a0a0f;--p2:#101018;--panel:#12121a;--ink:#e4e4e7;--mut:#8b8b98;--ln:#2a2a35;
  --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.77,0,.18,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
html{scroll-behavior:smooth;scroll-padding-top:80px;scrollbar-color:var(--ln) #0b0b11;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'JetBrains Mono',monospace;overflow-x:hidden}
a{color:var(--cytxt);text-decoration:none}a:hover{color:var(--pl)}
::selection{background:rgb(var(--acc-rgb) / .3)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
kbd{font:600 .62rem 'JetBrains Mono',monospace;padding:1px 6px;border:1.5px solid var(--ln);border-bottom-width:2.5px;background:#0d0d14;color:var(--ink);border-radius:2px;white-space:nowrap}
html.locked{overflow:hidden}

@keyframes blink{0%,100%{opacity:1}50%{opacity:.15}}
@keyframes caret{0%,100%{opacity:1}50%{opacity:0}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes scrollPulse{0%,100%{transform:scaleY(1);opacity:1}50%{transform:scaleY(.55);opacity:.35}}
@keyframes fadeIn{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes shakeX{0%,100%{translate:0 0}20%{translate:-8px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:3px 0}}
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-14deg) scale(1.16)}50%{transform:rotate(10deg) scale(1.1)}75%{transform:rotate(-5deg)}}

@media (max-width:860px){.nav-desk{display:none !important}.hero-pad{padding:7rem 1.4rem 3rem !important}.sec-pad{padding:4.5rem 1.4rem !important}#navbar{padding:14px 18px !important}}

.skip{position:fixed;left:16px;top:-60px;z-index:10060;background:var(--acc);color:#0a0a0f;padding:10px 16px;font-weight:700;font-size:.75rem;transition:top .2s}
.skip:focus{top:12px;color:#0a0a0f}

/* film grain: a static noise tile nudged around, barely there */
body::after{content:'';position:fixed;inset:0;z-index:9300;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.4s steps(5) infinite}
@keyframes grain{0%,100%{background-position:0 0}20%{background-position:-54px 36px}40%{background-position:36px -54px}60%{background-position:-36px -36px}80%{background-position:54px 18px}}

/* ---- Reveal system -------------------------------------------------------- */
.js .rv:not(.on){opacity:0}
.js .rv.on{animation:rvIn .85s var(--ease) backwards}
@keyframes rvIn{from{opacity:0;translate:0 32px}}

/* section headings: a skewed accent bar wipes across, revealing the text */
.h2-wipe{position:relative;width:fit-content}
.js .h2-wipe:not(.on),.js .h2-wipe.on{opacity:1;animation:none}
.js .h2-wipe .h2-in{opacity:0}
.js .h2-wipe.on .h2-in{animation:h2In .01s .42s forwards}
@keyframes h2In{to{opacity:1}}
.h2-wipe::after{content:'';position:absolute;left:-.2em;right:-.3em;top:.06em;bottom:0;background:var(--acc);transform:scaleX(0) skewX(-12deg);transform-origin:0 50%;pointer-events:none}
.h2-wipe.on::after{animation:wipe .95s var(--ease-io) forwards}
@keyframes wipe{0%{transform:scaleX(0) skewX(-12deg);transform-origin:0 50%}46%{transform:scaleX(1) skewX(-12deg);transform-origin:0 50%}54%{transform:scaleX(1) skewX(-12deg);transform-origin:100% 50%}100%{transform:scaleX(0) skewX(-12deg);transform-origin:100% 50%}}

/* ---- Hover / focus states (ported from the design; inline bases need !important) */
.hv-tint:hover{background:rgb(var(--acc-rgb) / .12) !important}
.hv-lift:hover{box-shadow:6px 6px 0 var(--ink) !important;translate:-1px -1px !important}
.hv-glow:hover{border-color:var(--acc) !important;box-shadow:5px 5px 0 rgb(var(--acc-rgb) / .35) !important}
.hv-card:hover{translate:-3px -3px !important;box-shadow:12px 12px 0 var(--sh) !important}
.hv-nudge:hover{translate:-3px -3px !important}
.hv-repo:hover{color:var(--hc) !important;border-color:var(--hb) !important}
.hv-cta:hover{box-shadow:8px 8px 0 var(--pu) !important;translate:calc(var(--mx,0px) - 2px) calc(var(--my,0px) - 2px) !important}
.hv-outline:hover{border-color:var(--acc) !important;color:var(--cytxt) !important;box-shadow:4px 4px 0 rgb(var(--acc-rgb) / .4) !important}
.hv-icon:hover{border-color:var(--acc) !important;box-shadow:4px 4px 0 rgb(var(--acc-rgb) / .4) !important}
.hv-icon-pu:hover{border-color:var(--pu) !important;box-shadow:4px 4px 0 rgba(139,92,246,.5) !important}
.in-field:focus{border-color:var(--acc) !important;box-shadow:4px 4px 0 rgb(var(--acc-rgb) / .3) !important}
.in-field::placeholder{color:#565668}
[data-magnetic]{translate:var(--mx,0px) var(--my,0px)}

/* ---- Boot sequence -------------------------------------------------------- */
#boot{display:none}
.js:not(.booted) #boot{display:flex;position:fixed;inset:0;z-index:10000;background:#07070b;align-items:center;justify-content:center;padding:24px;animation:bootFailsafe .01s 6s forwards}
@keyframes bootFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
#boot::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}
.boot-inner{position:relative;width:min(640px,100%);font-size:clamp(.6rem,1.7vw,.78rem);color:var(--mut)}
.boot-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.boot-logo{background:var(--acc);color:#0a0a0f;font:800 1.15rem 'Syne',sans-serif;letter-spacing:.1em;padding:5px 16px;transform:skewX(-12deg);box-shadow:4px 4px 0 var(--ink)}
.boot-logo>span{display:inline-block;transform:skewX(12deg)}
.boot-ver{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase}
.boot-log{margin:0 0 18px;min-height:12.5em;font:inherit;line-height:1.8;white-space:pre-wrap;color:var(--ink)}
.boot-log .ok{color:var(--gr)}.boot-log .k{color:var(--cytxt)}.boot-log .d{color:#4a4a5a}
.boot-bar{height:10px;border:1.5px solid var(--ln);transform:skewX(-12deg);overflow:hidden}
#bootFill{display:block;height:100%;width:0;background:var(--acc);background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.28) 0 6px,transparent 6px 12px);transition:width .45s var(--ease)}
.boot-skip{margin-top:16px;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;opacity:.45}
#boot.boot-out{animation:bootOut .85s var(--ease-io) forwards}
#boot.boot-out .boot-inner{animation:fadeOut .3s forwards}
.boot-wipe{position:fixed;inset:0;z-index:9999;background:var(--acc);pointer-events:none;animation:bootOut .85s .09s var(--ease-io) both}
@keyframes bootOut{from{clip-path:polygon(0 0,100% 0,100% 116%,0 100%)}to{clip-path:polygon(0 0,100% 0,100% 0,0 -16%)}}

/* ---- Navigation ----------------------------------------------------------- */
#scrollProg{transition:width .08s linear}
#navbar{transition:translate .5s var(--ease),box-shadow .3s}
#navbar.nav-hide{translate:0 -110%}
#navbar.scrolled{box-shadow:0 12px 32px rgba(0,0,0,.35)}
.logo:hover{color:#0a0a0f}
.logo.glitch{animation:glitch .45s steps(2,end) 2}
@keyframes glitch{0%{clip-path:inset(0 0 58% 0);translate:-3px 0}25%{clip-path:inset(42% 0 18% 0);translate:3px 0}50%{clip-path:inset(72% 0 0 0);translate:-2px 0}75%{clip-path:inset(8% 0 70% 0);translate:2px 0}100%{clip-path:inset(0);translate:0 0}}
.nav-desk{position:relative}
.nav-link{position:relative;display:inline-block;font-size:.7rem;font-weight:600;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;padding-bottom:5px;transition:color .25s}
.nav-link:hover,.nav-link.is-active{color:var(--cytxt)}
.roll{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:bottom}
.roll>span{display:block;transition:transform .45s var(--ease)}
.roll>span::after{content:attr(data-t);display:block;color:var(--acc)}
.nav-link:hover .roll>span,.nav-link:focus-visible .roll>span{transform:translateY(-50%)}
.nav-ind{position:absolute;left:0;top:0;height:2px;width:0;background:var(--acc);opacity:0;pointer-events:none;box-shadow:0 0 10px rgb(var(--acc-rgb) / .6);transition:left .55s var(--ease),width .55s var(--ease),opacity .3s}
.nav-k{font:600 .6rem 'JetBrains Mono',monospace;color:var(--mut);background:var(--panel);border:1.5px solid var(--ln);padding:5px 11px;transform:skewX(-12deg);cursor:pointer;letter-spacing:.06em;transition:color .25s,border-color .25s,box-shadow .25s}
.nav-k>span{display:inline-block;transform:skewX(12deg)}
.nav-k kbd{font-size:.56rem;padding:0 4px}
.nav-k:hover{color:var(--cytxt);border-color:var(--acc);box-shadow:3px 3px 0 rgb(var(--acc-rgb) / .4)}
.mob-toggle{display:none;width:34px;height:34px;padding:0;border:none;background:transparent;cursor:pointer}
.mob-toggle span{display:block;width:22px;height:2px;margin:5px auto;background:var(--acc);transition:transform .3s var(--ease),opacity .2s}
.mob-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mob-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.mob-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mob-panel{position:fixed;top:var(--nav-h,64px);left:0;right:0;z-index:8400;display:flex;flex-direction:column;background:rgba(10,10,15,.97);backdrop-filter:blur(14px);border-bottom:3px solid var(--acc);padding:10px 24px 20px;clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .45s var(--ease),visibility 0s .45s}
.mob-panel[data-open="true"]{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .45s var(--ease)}
.mob-panel a,.mob-panel button{font:600 .8rem 'JetBrains Mono',monospace;color:var(--mut);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:12px 2px;border:0;border-bottom:1px solid rgba(255,255,255,.08);background:none;text-align:left;cursor:pointer;opacity:0;translate:-14px 0;transition:opacity .3s,translate .45s var(--ease),color .2s}
.mob-panel button{color:var(--cytxt);border-bottom:0}
.mob-panel[data-open="true"] a,.mob-panel[data-open="true"] button{opacity:1;translate:0 0}
.mob-panel[data-open="true"] :nth-child(2){transition-delay:.04s}.mob-panel[data-open="true"] :nth-child(3){transition-delay:.08s}
.mob-panel[data-open="true"] :nth-child(4){transition-delay:.12s}.mob-panel[data-open="true"] :nth-child(5){transition-delay:.16s}
.mob-panel[data-open="true"] :nth-child(6){transition-delay:.2s}.mob-panel[data-open="true"] :nth-child(7){transition-delay:.24s}
@media (max-width:860px){.mob-toggle{display:block}}

/* section rail (wide screens) */
.rail{position:fixed;right:20px;top:50%;translate:0 -50%;z-index:7000;display:flex;flex-direction:column;gap:13px;opacity:0;pointer-events:none;transition:opacity .4s}
.rail.show{opacity:1;pointer-events:auto}
.rail a{display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--mut);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase}
.rail .r-l{opacity:0;translate:8px 0;transition:opacity .3s,translate .35s var(--ease);background:rgba(10,10,15,.85);padding:2px 6px}
.rail .r-n{font-weight:700;opacity:.55;transition:opacity .3s,color .3s}
.rail .r-t{width:14px;height:2px;background:var(--ln);transform:skewX(-30deg);transition:width .4s var(--ease),background .3s}
.rail a:hover .r-l,.rail a.is-active .r-l{opacity:1;translate:0 0}
.rail a.is-active{color:var(--cytxt)}
.rail a.is-active .r-n{opacity:1;color:var(--acc)}
.rail a.is-active .r-t,.rail a:hover .r-t{width:30px;background:var(--acc)}
@media (max-width:1319px){.rail{display:none}}

/* ---- Hero ----------------------------------------------------------------- */
#heroFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;-webkit-mask-image:radial-gradient(120% 95% at 70% 42%,#000 30%,rgba(0,0,0,.4) 78%,transparent 100%);mask-image:radial-gradient(120% 95% at 70% 42%,#000 30%,rgba(0,0,0,.4) 78%,transparent 100%)}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--hx,72%) var(--hy,38%),rgb(var(--acc-rgb) / .075),transparent 62%)}
.js .hi{animation:hiIn .95s var(--ease) backwards;animation-delay:var(--hd,0ms)}
.js .hero-name .ch{animation:chIn 1.05s var(--ease) backwards;animation-delay:calc(var(--i) * 60ms + 380ms)}
html.js:not(.hero-go) .hi,html.js:not(.hero-go) .hero-name .ch{animation-play-state:paused}
@keyframes hiIn{from{opacity:0;translate:0 26px;filter:blur(6px)}}
@keyframes chIn{from{opacity:0;transform:translateY(.55em) rotate(10deg) scale(.86);filter:blur(8px)}}
.hero-name{user-select:none;cursor:pointer}
.hero-name .ch{display:inline-block;transition:transform .8s var(--ease),color .8s}
.hero-name .ch.pop{transform:translateY(-.09em) skewX(-10deg) scale(1.06);color:var(--acc);transition-duration:.12s}
.hero-name .hn-outline .ch.pop{color:rgb(var(--acc-rgb) / .85)}
.hero-name.glitching .ch{color:var(--acc)}
.hero-tip{position:absolute;right:30px;bottom:28px;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);opacity:.75;pointer-events:none}
.js .hero-tip{animation:hiIn .9s 1.6s var(--ease) backwards}
html.js:not(.hero-go) .hero-tip{animation-play-state:paused}
.stat{transition:translate .35s var(--ease),box-shadow .35s var(--ease),border-color .35s,background .35s}
.stat:hover{translate:0 -5px;border-color:var(--acc) !important;box-shadow:6px 6px 0 rgb(var(--acc-rgb) / .45) !important}
.stat-inf{cursor:pointer}
.stat-inf:hover{background:rgb(var(--acc-rgb) / .13) !important}
.cnt.done{animation:cntPop .55s var(--spring)}
@keyframes cntPop{40%{transform:scale(1.2)}}
@media (hover:none),(max-width:860px){.hero-tip{display:none}}

/* ---- About ---------------------------------------------------------------- */
.photo-wrap{transform-style:preserve-3d;transition:transform .9s var(--ease)}
.photo-wrap.tilting{transition:transform .15s linear}
.photo{position:relative;cursor:pointer;outline-offset:8px;-webkit-tap-highlight-color:transparent}
.photo img{transition:filter .6s}
.photo:hover img,.photo.scanning img{filter:saturate(1) contrast(1.05) !important}
.chip{animation:chipFloat 5.6s ease-in-out infinite}
.chip-2{animation-duration:6.6s;animation-delay:-2.2s}
.chip-3{animation-duration:4.8s;animation-delay:-1.1s}
.chip-loc{animation:none;translate:0 0 24px}
@keyframes chipFloat{0%,100%{translate:0 0 40px}50%{translate:0 -9px 40px}}
.cv{position:absolute;inset:0;transform:rotate(-2deg);pointer-events:none;opacity:0;transition:opacity .3s;overflow:hidden}
.photo.scanning .cv{opacity:1}
.cv-scan{position:absolute;left:0;right:0;top:0;height:24%;background:linear-gradient(180deg,transparent,rgb(var(--acc-rgb) / .3) 82%,var(--acc));opacity:0}
.photo.scanning .cv-scan{animation:cvScan 1.1s var(--ease-io) forwards}
@keyframes cvScan{0%{opacity:1;translate:0 -100%}85%{opacity:1}100%{opacity:0;translate:0 420%}}
.cv-hud{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:6px;font-size:.5rem;letter-spacing:.08em;background:rgba(10,10,15,.88);color:var(--acc);padding:3px 7px;border:1px solid rgb(var(--acc-rgb) / .5);opacity:0;z-index:2}
.cv-hud i{width:6px;height:6px;background:var(--red);border-radius:50%;animation:blink 1s infinite}
.photo.scanning .cv-hud{animation:hudIn .3s .9s forwards}
@keyframes hudIn{to{opacity:1}}
.cv-box{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);border:1.5px solid var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.35);opacity:0;box-sizing:border-box}
.photo.scanning .cv-box{animation:cvBox .5s var(--spring) forwards;animation-delay:calc(var(--d) + 700ms)}
.cv-box::after{content:attr(data-l) ' ' attr(data-c);position:absolute;left:-1.5px;bottom:100%;font-size:.47rem;font-weight:700;line-height:1;padding:3px 5px;background:var(--c);color:#0a0a0f;white-space:nowrap}
.cv-box.lb-in::after{bottom:0;left:0}
.cv-box.lb-right::after{left:100%;bottom:auto;top:-1.5px}
@keyframes cvBox{from{opacity:0;scale:.82}to{opacity:1;scale:1}}

/* ---- Philosophy window buttons -------------------------------------------- */
.win-btn{border:0;padding:0;cursor:pointer;position:relative;transition:filter .2s,scale .2s}
.win-btn::before{content:'';position:absolute;inset:-7px}
.win-btn:hover{filter:brightness(1.35);scale:1.25}
.philo-body{transition:transform .65s var(--ease),opacity .45s;transform-origin:50% 0}
.philo-body.minimized{transform:scaleY(.03);opacity:.15}
.philo-body.maximized{transform:scale(1.04)}
#philosophy.shake{animation:shakeX .5s}

/* ---- Skills --------------------------------------------------------------- */
.sbar{position:relative;overflow:hidden}
.sbar::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);translate:-120% 0}
.sbar.filled::after{animation:glint 4.2s 1.4s ease-in-out infinite}
@keyframes glint{0%{translate:-120% 0}35%,100%{translate:120% 0}}
.strack{cursor:pointer;transition:border-color .2s}
.strack:hover{border-color:#3d3d4c !important}
.strack.overclock{border-color:var(--red) !important;animation:shakeX .35s 3}
.strack.overclock .sbar{background-color:var(--red) !important;width:100% !important}
.spct.hot{color:var(--red) !important}
.marquee-track{will-change:transform}

/* ---- Projects & games ----------------------------------------------------- */
.fbtn[aria-pressed="false"]:hover{border-color:var(--acc) !important;color:var(--cytxt) !important}
.fbtn:active{scale:.95}
.fcount{display:inline-block;margin-left:7px;font-size:.55rem;opacity:.6;font-weight:700}
[data-tilt]{position:relative;isolation:isolate;transition:translate .3s var(--ease),box-shadow .3s var(--ease),transform .75s var(--ease),border-color .3s}
[data-tilt].tilting{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:translate .3s var(--ease),box-shadow .3s var(--ease),transform .12s linear,border-color .3s}
[data-tilt]::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgb(var(--acc-rgb) / .11),transparent 52%);opacity:0;transition:opacity .4s}
[data-tilt]:hover::before{opacity:1}
.pnum{transition:-webkit-text-stroke-color .4s,translate .6s var(--ease)}
[data-tilt]:hover .pnum{-webkit-text-stroke-color:var(--sh,var(--acc)) !important;translate:-6px 4px}
.pemoji{width:fit-content;transform-origin:50% 80%}
[data-tilt]:hover .pemoji{animation:wiggle .7s var(--ease)}
.pemoji[data-egg]{cursor:pointer;transition:filter .3s}
.pemoji[data-egg]:hover{filter:drop-shadow(0 0 12px rgb(var(--acc-rgb) / .65))}
.play-cta{font:700 .68rem 'JetBrains Mono',monospace;letter-spacing:.08em;text-transform:uppercase;padding:12px 20px;background:transparent;color:var(--am);border:2px solid var(--am);transform:skewX(-12deg);cursor:pointer;transition:translate .25s var(--ease),box-shadow .25s,background .25s,color .25s}
.play-cta>span{display:inline-block;transform:skewX(12deg)}
.play-cta:hover{background:var(--am);color:#0a0a0f;box-shadow:5px 5px 0 var(--ink)}

/* ---- Education timeline --------------------------------------------------- */
.js .tl-track{opacity:.35}
.tl-fill{position:absolute;left:8px;top:6px;width:3px;height:calc((100% - 12px) * var(--p,0));background:var(--acc);transform:skewX(-8deg);box-shadow:0 0 12px rgb(var(--acc-rgb) / .7);pointer-events:none}
.tl-dot{transition:scale .5s var(--spring)}
.tl-dot.lit{scale:1.15;animation:dotPing 2.4s ease-out infinite}
@keyframes dotPing{0%{box-shadow:3px 3px 0 var(--ink),0 0 0 0 rgb(var(--acc-rgb) / .55)}70%,100%{box-shadow:3px 3px 0 var(--ink),0 0 0 13px rgb(var(--acc-rgb) / 0)}}

/* ---- Contact -------------------------------------------------------------- */
.field label{transition:background .3s,translate .35s var(--ease),box-shadow .3s}
.field:focus-within label{background:var(--acc) !important;translate:6px 0;box-shadow:3px 3px 0 var(--ink)}
.form-card.shake{animation:shakeX .45s}
.send-plane.fly{animation:planeFly 1.1s var(--ease-io) forwards}
@keyframes planeFly{0%{transform:none}25%{transform:translate(-6px,4px) rotate(-10deg)}100%{transform:translate(170px,-130px) rotate(-22deg) scale(.5);opacity:0}}
.ist-status{font-size:.55rem;color:var(--mut);letter-spacing:.06em;margin-top:5px}

/* ---- Footer --------------------------------------------------------------- */
.heart{background:none;border:0;padding:0 2px;color:var(--am);font:inherit;cursor:pointer;display:inline-block;transition:transform .3s var(--spring)}
.heart:hover{transform:scale(1.4)}
.foot-meta{max-width:1120px;margin:0 auto;padding:14px 0 26px;display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font-size:.58rem;color:var(--mut);letter-spacing:.05em;border-top:1px dashed var(--ln)}
.foot-meta b{color:var(--cytxt);font-weight:600}
.ach-count{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;transition:color .2s}
.ach-count:hover{color:var(--am)}
.ach-count:hover b{color:var(--am)}
.kbd-hint{margin-left:auto}
.kbd-hint kbd{font-size:.52rem;padding:0 5px}
@media (hover:none),(max-width:860px){.kbd-hint{display:none}}

/* ---- Custom cursor -------------------------------------------------------- */
.has-cursor,.has-cursor *{cursor:none !important}
.has-cursor input,.has-cursor textarea{cursor:text !important}
#cur-dot,#cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:10050;opacity:0;transition:opacity .25s}
.cur-on #cur-dot,.cur-on #cur-ring{opacity:1}
#cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--acc)}
#cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgb(var(--acc-rgb) / .6);display:grid;place-items:center;box-sizing:border-box;transition:opacity .25s,width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s}
#cur-ring.is-hover{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgb(var(--acc-rgb) / .12);border-color:var(--acc)}
#cur-ring.is-down{width:24px;height:24px;margin:-12px 0 0 -12px}
.cur-on #cur-ring.is-text,.cur-on #cur-ring.is-text+#cur-dot{opacity:0}
.cur-label{font:700 .5rem 'JetBrains Mono',monospace;letter-spacing:.12em;color:var(--acc);transform:skewX(12deg);opacity:0;transition:opacity .2s;white-space:nowrap}
#cur-ring.is-hover .cur-label{opacity:1}

/* ---- Dock ----------------------------------------------------------------- */
.dock{position:fixed;right:18px;bottom:18px;z-index:8600;display:flex;gap:10px}
.dock button{width:42px;height:42px;display:grid;place-items:center;padding:0;background:rgba(18,18,26,.92);backdrop-filter:blur(8px);border:2px solid var(--ln);color:var(--ink);transform:skewX(-12deg);cursor:pointer;font:700 .72rem 'JetBrains Mono',monospace;transition:border-color .25s,color .25s,box-shadow .25s,translate .25s var(--ease)}
.dock button>span{display:inline-block;transform:skewX(12deg)}
.dock button:hover{border-color:var(--acc);color:var(--cytxt);box-shadow:4px 4px 0 rgb(var(--acc-rgb) / .4)}
.dock button[aria-pressed="true"]{border-color:var(--acc);color:var(--acc)}
.dock .d-swatch{width:12px;height:12px;background:var(--acc);display:block;box-shadow:0 0 10px rgb(var(--acc-rgb) / .7)}
.js .dock{animation:hiIn .8s 1.5s var(--ease) backwards}
html.js:not(.hero-go) .dock{animation-play-state:paused}
@media (max-width:860px){.dock{right:12px;bottom:12px;gap:8px}.dock button{width:38px;height:38px}.dock .d-pal{display:none}}

/* ---- Toasts --------------------------------------------------------------- */
.toasts{position:fixed;left:18px;bottom:18px;z-index:9800;display:flex;flex-direction:column;gap:10px;pointer-events:none;width:min(380px,calc(100vw - 36px))}
.toast{pointer-events:auto;display:flex;gap:12px;align-items:flex-start;background:rgba(16,16,24,.97);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--tc,var(--acc));padding:11px 14px;font-size:.68rem;line-height:1.6;color:var(--ink);cursor:pointer;animation:toastIn .5s var(--ease) both}
.toast .t-ic{font-size:1rem;line-height:1.3}
.toast b{color:var(--tc,var(--acc))}
.toast .t-dim{color:var(--mut)}
.toast.t-ach{--tc:var(--am)}
.toast.t-err{--tc:var(--red)}
.toast.t-pu{--tc:var(--pu)}
.toast.t-gr{--tc:var(--gr)}
.toast.out{animation:toastOut .35s var(--ease) forwards}
@keyframes toastIn{from{opacity:0;translate:-36px 0;skew:-8deg 0}}
@keyframes toastOut{to{opacity:0;translate:-36px 0}}
@media (max-width:640px){.toasts{top:calc(var(--nav-h,64px) + 10px);bottom:auto;left:12px;width:calc(100vw - 24px)}}

/* ---- Overlays (shared) ---------------------------------------------------- */
.ov{position:fixed;inset:0;z-index:9900;display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.ov-bg{position:absolute;inset:0;background:rgba(5,5,9,.68);backdrop-filter:blur(4px);animation:fadeIn .3s ease}
.ov-panel{position:relative;width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;background:#0d0d14;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--acc);animation:panelIn .45s var(--ease) both}
.ov.closing .ov-bg{animation:fadeOut .25s forwards}
.ov.closing .ov-panel{animation:panelOut .25s var(--ease) forwards}
@keyframes panelIn{from{opacity:0;translate:0 -18px;scale:.97}}
@keyframes panelOut{to{opacity:0;translate:0 -12px;scale:.98}}
.ov-head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:2px solid var(--ln);background:var(--panel);font-size:.6rem;color:var(--mut);letter-spacing:.14em;flex-shrink:0}
.ov-dots{display:flex;gap:6px}
.ov-dots i{width:9px;height:9px;transform:skewX(-12deg);display:block}
.ov-dots i:nth-child(1){background:var(--am)}.ov-dots i:nth-child(2){background:var(--pu)}.ov-dots i:nth-child(3){background:var(--acc)}
.ov-x{margin-left:auto;font:600 .58rem 'JetBrains Mono',monospace;color:var(--mut);background:none;border:1.5px solid var(--ln);padding:3px 8px;cursor:pointer;letter-spacing:.1em}
.ov-x:hover{color:var(--cytxt);border-color:var(--acc)}
.ov-body{overflow-y:auto;overscroll-behavior:contain}
.btn-sk{font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border:2px solid var(--acc);background:transparent;color:var(--cytxt);transform:skewX(-12deg);cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.btn-sk>span{display:inline-block;transform:skewX(12deg)}
.btn-sk:hover{background:rgb(var(--acc-rgb) / .12)}
.btn-sk.solid{background:var(--acc);color:#0a0a0f;box-shadow:4px 4px 0 var(--ink)}
.btn-sk.solid:hover{box-shadow:6px 6px 0 var(--pu)}

/* terminal */
.ov.term{padding:0 16px}
.term .ov-panel{width:min(980px,100%);height:min(600px,74vh);border-top:0;animation:termIn .5s var(--ease) both}
.term.closing .ov-panel{animation:termOut .35s var(--ease-io) forwards}
@keyframes termIn{from{translate:0 -105%}}
@keyframes termOut{to{translate:0 -105%}}
.term-out{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 6px;font-size:.74rem;line-height:1.65;white-space:pre-wrap;word-break:break-word}
.term-out a{color:var(--cytxt);text-decoration:underline;text-underline-offset:3px}
.term-out .art{line-height:1.08;font-size:.66rem;white-space:pre;overflow-x:auto;color:var(--acc);margin:2px 0 8px}
.term-out .cmd{color:var(--mut)}
.term-out .cmd b{color:var(--gr);font-weight:500}
.c-acc{color:var(--acc)}.c-cy{color:var(--cytxt)}.c-pu{color:var(--pl)}.c-am{color:var(--am)}.c-gr{color:var(--gr)}.c-mut{color:var(--mut)}.c-err{color:var(--red)}.c-b{font-weight:700}
.term-line{display:flex;align-items:center;gap:10px;padding:9px 16px 14px;font-size:.74rem;border-top:1px dashed var(--ln);flex-shrink:0}
.term-ps{color:var(--gr);white-space:nowrap}
.term-ps b{color:var(--cytxt);font-weight:500}
.term-in{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font:inherit;caret-color:var(--acc);padding:0}
@media (max-width:640px){.term .ov-panel{height:80vh}.term-out,.term-line{font-size:.66rem}.term-out .art{font-size:.5rem}}

/* command palette */
.pal-search{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:2px solid var(--ln);flex-shrink:0}
.pal-search>span{color:var(--acc);font-weight:700}
.pal-in{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:500 .88rem 'JetBrains Mono',monospace;caret-color:var(--acc)}
.pal-in::placeholder{color:#565668}
.pal-list{max-height:min(430px,54vh);padding:6px}
.pal-group{font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--am);padding:10px 10px 6px}
.pal-item{display:flex;align-items:center;gap:12px;width:100%;padding:9px 12px;background:none;border:0;border-left:3px solid transparent;color:var(--ink);font:500 .74rem 'JetBrains Mono',monospace;text-align:left;cursor:pointer}
.pal-item .pi-ic{width:22px;text-align:center;flex-shrink:0}
.pal-item .pi-hint{margin-left:auto;font-size:.58rem;color:var(--mut);white-space:nowrap;padding-left:12px}
.pal-item.sel{background:rgb(var(--acc-rgb) / .1);border-left-color:var(--acc);color:var(--cytxt)}
.pal-item mark{background:none;color:var(--acc);font-weight:700}
.pal-empty{padding:28px;text-align:center;color:var(--mut);font-size:.72rem}
.pal-foot{display:flex;gap:16px;flex-wrap:wrap;padding:9px 14px;border-top:2px solid var(--ln);font-size:.55rem;color:var(--mut);flex-shrink:0}

/* keyboard shortcuts */
.keys-list{padding:6px 18px 16px}
.keys-row{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:.7rem;padding:9px 0;border-bottom:1px dashed var(--ln)}
.keys-row:last-child{border-bottom:0}
.keys-row>span:last-child{display:flex;gap:6px;flex-shrink:0}

/* achievements */
.achv-top{padding:16px 18px;border-bottom:2px solid var(--ln);font-size:.7rem;flex-shrink:0}
.achv-top b{font-family:'Syne',sans-serif;font-style:italic;font-size:1.3rem;color:var(--am)}
.achv-prog{height:10px;border:1.5px solid var(--ln);transform:skewX(-12deg);overflow:hidden;margin-top:10px}
.achv-prog i{display:block;height:100%;background:var(--am);background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.28) 0 6px,transparent 6px 12px);transition:width 1s var(--ease)}
.achv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;padding:16px 18px}
.achv{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border:1.5px solid var(--ln);background:var(--panel)}
.achv.got{border-color:var(--am);box-shadow:3px 3px 0 rgba(245,158,11,.35)}
.achv .a-ic{font-size:1.15rem;filter:grayscale(1);opacity:.4;line-height:1.2}
.achv.got .a-ic{filter:none;opacity:1}
.achv b{display:block;font-size:.68rem;margin-bottom:3px}
.achv span{font-size:.58rem;color:var(--mut);line-height:1.55}
.achv-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 18px 16px;font-size:.58rem;color:var(--mut)}
.achv-foot button{font:inherit;color:var(--mut);background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}

/* arcade */
.arc-tabs{display:flex;gap:10px;padding:14px 16px 0;flex-shrink:0}
.arc-tab{font:700 .62rem 'JetBrains Mono',monospace;letter-spacing:.1em;padding:7px 14px;border:2px solid var(--ln);background:var(--panel);color:var(--mut);transform:skewX(-12deg);cursor:pointer}
.arc-tab>span{display:inline-block;transform:skewX(12deg)}
.arc-tab[aria-selected="true"]{background:var(--acc);border-color:var(--acc);color:#0a0a0f}
.arc-stage{position:relative;padding:12px 16px 6px;display:grid;place-items:center}
.arc-stage canvas{width:min(400px,100%,52vh);aspect-ratio:1;display:block;touch-action:none;cursor:pointer}
.arc-info{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:6px 16px 14px;font-size:.58rem;color:var(--mut);letter-spacing:.06em;flex-shrink:0}
.arc-info b{color:var(--cytxt)}
.arc-pad{display:none;grid-template-columns:repeat(3,44px);gap:6px;justify-content:center;padding:0 0 14px}
.arc-pad button{height:40px;font:700 .9rem 'JetBrains Mono',monospace;background:var(--panel);border:2px solid var(--ln);color:var(--ink);cursor:pointer}
.arc-pad button:active{border-color:var(--acc);color:var(--acc)}
.arc-pad .pu{grid-column:2}.arc-pad .pl{grid-column:1;grid-row:2}.arc-pad .pd{grid-column:2;grid-row:2}.arc-pad .pr{grid-column:3;grid-row:2}
.arc.snake-on .arc-pad{display:grid}
@media (hover:hover) and (pointer:fine){.arc.snake-on .arc-pad{display:none}}
.arc-stage.shake{animation:shakeX .4s}

/* LED cube */
.cube-stage{padding:8px 16px 0;display:grid;place-items:center}
.cube-stage canvas{width:min(440px,100%,56vh);aspect-ratio:1;display:block;cursor:grab;touch-action:none}
.cube-stage canvas:active{cursor:grabbing}
.cube-bar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:8px 16px 16px;font-size:.6rem;color:var(--mut)}
.cube-bar b{color:var(--cytxt)}

/* firmware flasher */
.flash-log{margin:0;padding:14px 16px;font:inherit;font-size:.66rem;line-height:1.75;white-space:pre-wrap;min-height:14em;color:var(--ink)}
.flash-bar{margin:0 16px 18px;height:12px;border:1.5px solid var(--ln);transform:skewX(-12deg);overflow:hidden;flex-shrink:0}
.flash-bar i{display:block;height:100%;width:0;background:var(--acc);background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.28) 0 6px,transparent 6px 12px)}
html.rebooting .page{animation:reboot .65s steps(3)}
@keyframes reboot{0%{opacity:1}25%{opacity:0}50%{opacity:1;filter:invert(1) hue-rotate(180deg)}75%{opacity:.2}100%{opacity:1}}

/* full-screen eggs */
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:9850;pointer-events:none}
.matrix{position:fixed;inset:0;width:100%;height:100%;z-index:9950;cursor:pointer;animation:fadeIn .6s}
.matrix.out{animation:fadeOut .7s forwards}
.ss{position:fixed;inset:0;z-index:9950;background:#030305;animation:fadeIn 1s}
.ss.out{animation:fadeOut .4s forwards}
.ss-logo{position:absolute;left:0;top:0;font:800 clamp(1.4rem,4vw,2.4rem) 'Syne',sans-serif;letter-spacing:.1em;padding:8px 26px;color:#0a0a0f;background:var(--c,var(--acc));transform:skewX(-12deg);box-shadow:6px 6px 0 var(--ink);transition:background .3s}
.ss-logo>span{display:inline-block;transform:skewX(12deg)}
.ss-hint{position:absolute;bottom:26px;left:0;right:0;text-align:center;font-size:.58rem;letter-spacing:.3em;color:#3c3c4a;text-transform:uppercase}
.fall{position:fixed;top:-70px;z-index:9850;pointer-events:none;font-size:var(--s,28px);animation:fall var(--t,3s) cubic-bezier(.45,.05,.75,.55) var(--dl,0s) forwards}
@keyframes fall{to{translate:var(--dx,0px) calc(100vh + 140px);rotate:var(--r,360deg)}}
.float-up{position:fixed;z-index:9850;pointer-events:none;font-size:var(--s,18px);animation:floatUp var(--t,1.6s) var(--ease) forwards}
@keyframes floatUp{0%{opacity:0;scale:.4}15%{opacity:1;scale:1}100%{opacity:0;translate:var(--dx,0px) -170px;rotate:var(--r,0deg)}}
html.crt body::before{content:'';position:fixed;inset:0;z-index:9400;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.6) 100%);animation:crtFlicker .12s infinite}
html.crt .page{text-shadow:1.5px 0 rgba(255,0,90,.45),-1.5px 0 rgba(0,240,255,.45)}
@keyframes crtFlicker{50%{opacity:.82}}

/* ---- Motion preferences --------------------------------------------------- */
.fx-off body::after,.rm body::after{display:none}
.fx-off .chip{animation:none}
.fx-off .sbar.filled::after{animation:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;animation-delay:0s !important;transition-duration:.01ms !important}
}

/* intrinsic size attributes on the photo must not override its 4/5 box */
.photo img{height:auto}

/* ---- Settings popover ------------------------------------------------------ */
.settings{position:fixed;right:18px;bottom:72px;z-index:8700;width:min(350px,calc(100vw - 24px));max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;background:#0d0d14;border:2px solid var(--ink);box-shadow:8px 8px 0 var(--acc);animation:setIn .4s var(--ease) both;transform-origin:100% 100%}
@keyframes setIn{from{opacity:0;translate:0 14px;scale:.96}}
.set-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:2px solid var(--ln);background:var(--panel);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.set-note{margin:0;padding:12px 14px;font-size:.62rem;line-height:1.7;color:var(--mut);border-bottom:1px dashed var(--ln)}
.set-note b{color:var(--cytxt);font-weight:600}
.set-rows{padding:6px}
.sw{display:flex;align-items:center;gap:12px;width:100%;padding:10px;background:none;border:0;border-left:3px solid transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.sw:hover{background:rgb(var(--acc-rgb) / .07)}
.sw[aria-checked="true"]{border-left-color:var(--acc)}
.sw-ic{font-size:1.1rem;width:24px;text-align:center;flex-shrink:0}
.sw-tx{flex:1;min-width:0}
.sw-tx b{display:block;font-size:.7rem;font-weight:600}
.sw-tx i{display:block;font-style:normal;font-size:.56rem;color:var(--mut);line-height:1.5;margin-top:2px}
.sw-knob{position:relative;flex-shrink:0;width:38px;height:18px;border:1.5px solid var(--ln);background:#0a0a0f;transform:skewX(-12deg);transition:border-color .25s,background .25s}
.sw-knob::after{content:'';position:absolute;top:2px;left:2px;width:11px;height:11px;background:var(--mut);transition:translate .3s var(--spring),background .25s}
.sw[aria-checked="true"] .sw-knob{border-color:var(--acc);background:rgb(var(--acc-rgb) / .14)}
.sw[aria-checked="true"] .sw-knob::after{translate:20px 0;background:var(--acc)}
.set-accent{display:flex;align-items:center;gap:12px;padding:10px 16px;border-top:1px dashed var(--ln);font-size:.6rem;color:var(--mut);letter-spacing:.14em;text-transform:uppercase}
.set-accent>span{flex:1}
.sw-sw{width:22px;height:22px;padding:0;background:var(--c);border:2px solid transparent;transform:skewX(-12deg);cursor:pointer;transition:scale .2s var(--spring),border-color .2s}
.sw-sw:hover{scale:1.15}
.sw-sw[aria-pressed="true"]{border-color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.set-foot{display:flex;gap:12px;flex-wrap:wrap;padding:12px 14px 14px;border-top:2px solid var(--ln)}
.set-foot b{color:var(--am)}
.dock .d-set{position:relative}
.dock .d-set[data-on]::after{content:'';position:absolute;top:-4px;right:-4px;width:9px;height:9px;background:var(--am);box-shadow:0 0 8px var(--am)}
.dock .d-set.nudge{animation:nudge 2.2s ease-in-out infinite;border-color:var(--am);color:var(--am)}
@keyframes nudge{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.55)}60%{box-shadow:0 0 0 12px rgba(245,158,11,0)}}
.foot-link{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;transition:color .2s}
.foot-link:hover{color:var(--cytxt)}
@media (max-width:640px){.settings{right:12px;bottom:60px}}

/* ---- Moon gravity ---------------------------------------------------------- */
@keyframes moonBob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -13px;rotate:-.7deg}}
@keyframes moonHop{
  0%{translate:0 0;rotate:0deg;animation-timing-function:cubic-bezier(.2,.65,.35,1)}
  50%{translate:0 -96px;rotate:-4deg;animation-timing-function:cubic-bezier(.65,0,.8,.35)}
  100%{translate:0 0;rotate:0deg}
}
@keyframes moonDrift{to{background-position:0 -700px,0 -540px,0 -380px}}
html.moon.js :is(.stat,.fbtn,.h2-wipe,.photo-wrap,.hero-name,.tl .rv){animation:moonBob var(--mt,7s) ease-in-out var(--md,0s) infinite}
html.moon.js [data-tilt].on{animation:rvIn .85s var(--ease) backwards,moonBob var(--mt,7s) ease-in-out var(--md,0s) infinite}
html.moon.js :is(.stat,.fbtn,.h2-wipe,.photo-wrap,.hero-name,.tl .rv).moon-hop{animation:moonHop 1.9s linear}
html.moon.js [data-tilt].on.moon-hop{animation:rvIn .85s var(--ease) backwards,moonHop 1.9s linear}
html.moon :is(.stat,.fbtn,[data-tilt],.tl .rv):nth-child(2n){--mt:8.4s;--md:-2.1s}
html.moon :is(.stat,.fbtn,[data-tilt],.tl .rv):nth-child(3n){--mt:6.2s;--md:-4.3s}
html.moon :is(.stat,.fbtn,[data-tilt],.tl .rv):nth-child(5n){--mt:9.6s;--md:-1.2s}
.moon-stars{position:fixed;inset:0;z-index:6000;pointer-events:none;opacity:.5;mix-blend-mode:screen;animation:fadeIn 1.2s;
  background-image:radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 110px 120px,#cbd5e1,transparent),radial-gradient(2px 2px at 190px 60px,rgb(var(--acc-rgb) / .9),transparent);
  background-size:230px 230px,170px 170px,310px 310px;animation:fadeIn 1.2s,moonDrift 70s linear infinite}
html.fx-off .moon-stars,html.rm .moon-stars{display:none}

/* ---- Small-screen fixes: nothing may be wider than the viewport -------------- */
.form-card{box-sizing:border-box;min-width:0 !important}
.hv-nudge>div,.hv-nudge>span+div{min-width:0}
.hv-nudge h3,.hv-nudge p{overflow-wrap:anywhere}

/* ---- Phones: hero call-to-actions line up as full-width buttons ---- */
@media (max-width:600px){#hero .hv-cta,.enter-3d .hv-outline{flex:1 1 100%;text-align:center}.enter-3d{gap:14px !important;padding-left:6px}.enter-3d>span{flex:1 1 100%;margin-top:2px}}