@layer reset,base,components,a11y;@media(pointer:fine){html,*,*:before,*:after{cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="3" fill="white" opacity="0.6"/></svg>') 4 4,none!important}canvas{cursor:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="3" fill="white" opacity="0.01"/></svg>') 4 4,none!important}}@layer reset{*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--line-height: 1.618;--text-heading: 1rem;--text-body: .68rem;--text-link: .7rem;--text-small: .65rem;--tracking-wide: .14em;--tracking-mid: .12em;--tracking-base: .08em}}@layer base{html,body{overflow:hidden;background:#080c16}canvas{position:fixed;inset:0;width:100vw;height:100dvh;display:block}}@keyframes title-drift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@layer components{.glass{background:#fff0;backdrop-filter:blur(50px) saturate(1.3);-webkit-backdrop-filter:blur(50px) saturate(1.3);border:1px solid oklch(100% 0 0 / .06);border-top-color:#ffffff1f;border-left-color:#ffffff14;box-shadow:inset 0 1px #ffffff0d;border-radius:8px;font-family:Space Grotesk,sans-serif}#card{position:fixed;top:50%;left:50%;translate:-50% -50%;z-index:15;padding:36px 48px;text-align:center;opacity:0;transition:opacity 1.5s ease;&.alive{opacity:1}display:flex;flex-direction:column;align-items:center;gap:20px;& h2{font-size:var(--text-heading);font-weight:300;letter-spacing:var(--tracking-mid);line-height:var(--line-height);color:transparent;background:linear-gradient(90deg,#d0d5f9,#d7ebfa,#f6d0f1,#d7ebfa,#d0d5f9);background-size:300% 100%;background-clip:text;animation:title-drift 16s ease-in-out infinite}& p{margin-top:-8px;color:#ffffff73;font-size:var(--text-body);font-weight:300;line-height:var(--line-height);letter-spacing:var(--tracking-base)}& nav{display:flex;flex-wrap:wrap;justify-content:center;gap:20px;& a{text-decoration:none;font-size:var(--text-small);font-weight:300;letter-spacing:var(--tracking-wide);color:transparent;background:radial-gradient(circle 40px at var(--mx, -200px) var(--my, -200px),oklch(100% 0 0 / .9) 0%,oklch(100% 0 0 / .45) 60%,oklch(100% 0 0 / .4) 100%);background-clip:text}}}@media(max-width:600px){#card{padding:24px 28px}}#intro{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;background:#080c16;font-family:Space Grotesk,sans-serif;& p{color:#fff0;font-size:.9rem;font-weight:300;letter-spacing:var(--tracking-mid);animation:intro-text 3.5s ease forwards}#intro-sound{background:none;border:1px solid oklch(100% 0 0 / .2);border-radius:6px;color:#fff0;font-family:inherit;font-size:var(--text-link);font-weight:400;letter-spacing:var(--tracking-wide);padding:8px 18px;cursor:inherit;animation:intro-btn 3.5s ease forwards;transition:border-color .3s,color .3s;&:hover{border-color:#fff6;color:#fffc}&.active{border-color:#a8bfe566;color:#fff9}}#intro-hint{margin-top:16px;font-size:.75rem;letter-spacing:var(--tracking-mid);animation:intro-hint 3.5s ease forwards}&.done{display:none}}@keyframes intro-text{0%{color:#fff0}10%{color:#ffffffb3}30%{color:#fff9}to{color:#fff0}}@keyframes intro-hint{0%,20%{color:#fff0}35%{color:#ffffff40}50%{color:#fff3}to{color:#fff0}}@keyframes intro-btn{0%{color:#fff0;border-color:#fff0}10%{color:#ffffff80;border-color:#fff3}30%{color:#fff6;border-color:#ffffff26}to{color:#fff0;border-color:#fff0}}#about-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:48px 24px;background:#fff0;backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);border:none;opacity:0;pointer-events:none;transition:opacity .5s ease;&.visible{opacity:1;pointer-events:auto}}.about-content{width:480px;max-width:100%;display:flex;flex-direction:column;gap:0;max-height:80dvh;overflow-y:auto;scrollbar-width:none;&::-webkit-scrollbar{display:none}font-family:Space Grotesk,sans-serif;& details{border-top:1px solid oklch(100% 0 0 / .06);& summary{font-size:1.05rem;font-weight:400;letter-spacing:.1em;color:#ffffffb3;cursor:inherit;list-style:none;display:block;width:100%;padding:32px 0;transition:color .3s;&::-webkit-details-marker{display:none}&::marker{display:none;content:""}&:hover{color:#ffffffe6}}&[open] summary{color:#ffffffd9;padding-bottom:8px}}.details-body{display:flex;flex-direction:column;gap:12px;padding:20px 0 4px;& p{font-size:.82rem;font-weight:300;line-height:1.9;letter-spacing:.04em;color:#ffffff8c;text-align:justify}& strong{font-weight:400;color:#ffffffb3}}#about-close{margin-bottom:8px}#about-close{background:none;border:none;color:#ffffff8c;font-family:inherit;font-size:.7rem;font-weight:400;letter-spacing:.1em;cursor:inherit;padding:0;align-self:flex-start;transition:color .3s;&:hover{color:#fffc}&:focus-visible{outline:1px solid oklch(100% 0 0 / .5);outline-offset:4px;border-radius:2px}}}#mute{position:fixed;bottom:32px;right:32px;z-index:10;color:#ffffff73;font-size:var(--text-small);font-weight:400;letter-spacing:var(--tracking-mid);padding:8px 14px;cursor:inherit;transition:color .3s,border-color .3s;&:hover{color:#ffffffbf;border-color:#fff3}}}@layer a11y{:is(#card nav a,#mute):focus-visible{outline:1px solid oklch(100% 0 0 / .5);outline-offset:4px;border-radius:2px}.skip-link{position:fixed;top:-100%;left:50%;translate:-50% 0;background:#ffffffe6;color:#0a0e1a;padding:8px 16px;font-family:Space Grotesk,sans-serif;font-size:.75rem;z-index:100;border-radius:4px;text-decoration:none;&:focus{top:12px}}@media(prefers-reduced-motion:reduce){canvas{display:none}#card h2{animation:none;background:none;color:#fffc}#reduced-alt{position:fixed;inset:0;background:#080c16;display:flex;align-items:center;justify-content:center;color:#fff3;font-family:Space Grotesk,sans-serif;font-size:.8rem;letter-spacing:.1em}}@media not (prefers-reduced-motion:reduce){#reduced-alt{display:none}}}