:root{--ink:#17202b;--ink-soft:#4a5562;--paper:#ffffffed;--paper-solid:#fff;--line:#17202b1a;--ember:#ff4d2e;--amber:#f2a900;--blue:#2e6bff;--violet:#8b5cf6;--green:#00a36c;--pink:#f0368f;--ai:#0fb5cf;--display:"Inter Tight", system-ui, sans-serif;--mono:"JetBrains Mono", ui-monospace, monospace;--ease-out:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body,#root{height:100%;color:var(--ink);font-family:var(--display);background:#e9eef4;margin:0;overflow:hidden}canvas{touch-action:none;display:block}button{font:inherit;color:inherit}button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.hud{pointer-events:none;z-index:2;position:fixed;inset:0}.hud>*{pointer-events:auto}.route{pointer-events:none;gap:6px;width:min(560px,70vw);transition:opacity .6s;display:flex;position:absolute;top:22px;left:50%;transform:translate(-50%)}.route span{background:#17202b24;border-radius:3px;flex:1;height:5px;position:relative;overflow:hidden}.route span i{transform-origin:0;transition:transform .9s var(--ease-out);position:absolute;inset:0;transform:scaleX(0)}.route span.done i,.route span.now i{transform:scaleX(1)}.route span.now{box-shadow:0 0 0 2px var(--paper-solid)}.sound{background:var(--paper);border:1px solid var(--line);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:8px 14px;font-size:14px;position:absolute;top:14px;right:18px}.strip{background:var(--paper);clip-path:polygon(0 0,100% 0,calc(100% - 36px) 100%,0 100%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:min(640px,92vw);transition:transform .7s var(--ease-out);pointer-events:none;padding:22px 64px 24px 40px;position:absolute;bottom:64px;left:0;transform:translate(-104%)}.strip.on{transform:translate(0)}.strip:before{content:"";background:var(--accent);width:8px;position:absolute;top:0;bottom:0;left:0}.strip h2{letter-spacing:-.035em;color:var(--accent);margin:0;font-size:clamp(40px,6.2vw,76px);font-weight:800;line-height:.92}.strip .line{letter-spacing:-.01em;margin:10px 0 0;font-size:clamp(17px,1.6vw,21px);font-weight:600}.strip .para{max-width:46ch;color:var(--ink-soft);opacity:0;max-height:0;transition:max-height .9s var(--ease-out), opacity .6s, margin .6s;margin:0;font-size:15.5px;line-height:1.55;overflow:hidden}.strip .para.on{opacity:1;max-height:320px;margin-top:14px}.prompt{opacity:0;transition:opacity .4s, transform .4s var(--ease-out);background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:999px;align-items:center;gap:10px;padding:10px 18px;font-size:14px;font-weight:600;display:flex;position:absolute;bottom:22px;left:50%;transform:translate(-50%,12px)}.prompt.on{opacity:1;transform:translate(-50%)}.prompt{overflow:hidden}.prompt .label{position:relative}.prompt .fill{transform-origin:0;background:#ffffff38;position:absolute;inset:0;transform:scaleX(0)}.prompt.on .fill{animation:auto-fill var(--auto,3s) linear forwards}@keyframes auto-fill{to{transform:scaleX(1)}}.choices{flex-direction:column;align-items:center;gap:12px;display:flex;position:absolute;bottom:26px;left:50%;transform:translate(-50%)}.choices p{background:var(--paper);border-radius:999px;margin:0;padding:8px 16px;font-size:16px;font-weight:600}.choices p b{color:var(--ai);font-weight:800}.choices .row{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.choices button{background:var(--paper-solid);border:1.5px solid var(--ai);cursor:pointer;border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;transition:background .15s,color .15s}.choices button:hover{background:var(--ai);color:#fff}.choices button kbd{font-family:var(--mono);opacity:.7;margin-right:6px;font-size:12px}.flash{opacity:0;pointer-events:none;background:#fff;transition:opacity .25s;position:absolute;inset:0}.flash.on{opacity:1;transition:opacity .12s}.subtitle{letter-spacing:-.03em;text-align:center;color:var(--ink);pointer-events:none;margin:0;font-size:clamp(30px,4.6vw,60px);font-weight:800;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%)}.promise{text-align:center;letter-spacing:-.015em;width:min(760px,88vw);color:var(--ink);opacity:0;pointer-events:none;text-shadow:0 1px 18px #ffffffe6;margin:0;font-size:clamp(20px,2.3vw,30px);font-weight:600;line-height:1.4;transition:opacity 1.4s;position:absolute;top:13%;left:50%;transform:translate(-50%)}.promise.on{opacity:1}.screen{text-align:center;pointer-events:auto;place-items:center;transition:opacity .9s;display:grid;position:absolute;inset:0}.screen.off{opacity:0;pointer-events:none}.screen:not(.end){background:radial-gradient(60% 45% at 50% 48%,#ffffffc7,#fff0 70%)}.screen h1{letter-spacing:-.05em;color:var(--ink);text-shadow:0 2px 60px #ffffffe6;animation:title-in .9s var(--ease-out) both;margin:0;font-size:clamp(54px,9.5vw,150px);font-weight:800;line-height:.88;transition:transform .7s cubic-bezier(.5,0,.75,0),filter .7s,opacity .7s;transform:skew(-7deg)}.screen .sub{color:var(--ink);margin:18px 0 30px;font-size:clamp(17px,1.7vw,22px);font-weight:600}@keyframes title-in{0%{opacity:0;filter:blur(6px);transform:translate(-6%)skew(-16deg)}}.screen.off h1{filter:blur(10px);opacity:0;transform:scale(2.8)skew(-7deg)}.screen .by{color:var(--ink-soft);margin:0 0 14px;font-size:clamp(14px,1.2vw,17px);font-weight:600}.start{background:var(--ink);color:#fff;cursor:pointer;transition:transform .2s var(--ease-out);border:0;border-radius:999px;padding:16px 30px;font-size:18px;font-weight:700}.start:hover:not(:disabled){transform:scale(1.04)}.start:disabled{opacity:.6;cursor:progress}.screen .hint{color:var(--ink-soft);margin:14px 0 0;font-size:14px}.end{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff8c}.end h1{color:var(--ink);text-shadow:none;font-size:clamp(54px,9vw,130px)}.end .links{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px;display:flex}.end .links a,.end .links button{background:var(--paper-solid);border:1px solid var(--line);color:var(--ink);cursor:pointer;border-radius:999px;padding:12px 20px;font-size:15px;font-weight:600;text-decoration:none}.end .links a.primary{background:var(--ink);color:#fff;border-color:var(--ink)}@media (width<=640px){.strip{padding:16px 44px 18px 26px;bottom:70px}.strip .para{font-size:14px}}@media (prefers-reduced-motion:reduce){.strip,.prompt,.route span i,.promise,.screen{transition:none}}.unlock{pointer-events:none;width:0;height:0;position:absolute;top:42%;left:50%}.unlock .stamp{white-space:nowrap;text-align:center;animation:1.7s cubic-bezier(.2,1.3,.4,1) forwards stamp;position:absolute;top:0;left:0}.unlock .stamp b{letter-spacing:-.045em;color:var(--accent);text-shadow:0 0 46px color-mix(in srgb, var(--accent) 55%, transparent), 0 3px 0 #17202b1f;font-size:clamp(56px,9vw,132px);font-weight:800;line-height:.9;display:block;transform:skew(-8deg)}.unlock .stamp span{background:var(--paper);color:var(--ink);border-radius:999px;margin-top:10px;padding:7px 14px;font-size:17px;font-weight:700;display:inline-block}.unlock .burst i{width:var(--s);height:var(--s);background:var(--accent);opacity:0;border-radius:2px;animation:.95s cubic-bezier(.1,.8,.3,1) forwards spark;position:absolute;top:0;left:0}.unlock .ring{border:6px solid var(--accent);opacity:0;border-radius:50%;width:40px;height:40px;margin:-20px;animation:.8s ease-out forwards ring;position:absolute;top:0;left:0}@keyframes stamp{0%{opacity:0;transform:translate(-50%,-50%)scale(2.4)rotate(-6deg)}16%{opacity:1;transform:translate(-50%,-50%)scale(.92)rotate(-2deg)}26%{transform:translate(-50%,-50%)scale(1.05)rotate(-3deg)}78%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-3deg)}to{opacity:0;transform:translate(-50%,-62%)scale(1)rotate(-3deg)}}@keyframes spark{0%{opacity:1;transform:rotate(var(--a)) translateX(10px) scale(1)}to{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.3)}}@keyframes ring{0%{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(14)}}@media (prefers-reduced-motion:reduce){.screen h1{animation:none}.unlock .burst,.unlock .ring{display:none}.unlock .stamp{animation:1.7s linear forwards stamp-fade;transform:translate(-50%,-50%)}@keyframes stamp-fade{0%,to{opacity:0}15%,80%{opacity:1}}}
