:root{--ink:#f2efe8;--dim:#a9a49a;--amber:#ffb02e;--red:#ff4a2a;--green:#5be38a;--panel:#0c0c0ed1;--font:"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);background:#000;margin:0;overflow:hidden}#app canvas{display:block}#badge{z-index:30;letter-spacing:.05em;color:var(--amber);pointer-events:none;background:#0000008c;border:1px solid #ffb02e99;border-radius:4px;padding:6px 10px;font-size:12px;position:fixed;top:12px;left:12px}#crosshair{z-index:10;pointer-events:none;background:#ffffffb3;border-radius:50%;width:6px;height:6px;margin:-3px 0 0 -3px;transition:transform .12s,background .12s;display:none;position:fixed;top:50%;left:50%;box-shadow:0 0 4px #000}#crosshair.on{background:var(--amber);transform:scale(2.4)}body.playing #crosshair{display:block}#hint{z-index:10;pointer-events:none;white-space:nowrap;opacity:0;background:#000000b8;border-radius:4px;padding:8px 16px;font-size:15px;transition:opacity .4s;position:fixed;bottom:8vh;left:50%;transform:translate(-50%)}#hint.on{opacity:1}#caption{z-index:20;text-align:center;pointer-events:none;opacity:0;place-content:center;transition:opacity .6s;display:grid;position:fixed;inset:0}#caption.on{opacity:1}#caption .text{letter-spacing:.1em;text-shadow:0 4px 30px #000;font-size:clamp(48px,9vw,120px);font-weight:900}#caption .sub{color:var(--dim);text-shadow:0 2px 10px #000;margin-top:8px;font-size:clamp(18px,2.4vw,28px)}.screen{z-index:25;display:none;position:fixed;inset:0}.screen.on{display:grid}#title{background:radial-gradient(#00000059,#000000d9);place-items:center}.panel{background:var(--panel);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid #2a2a2e;border-radius:6px;width:min(600px,100vw - 32px);padding:32px}.kicker{color:var(--amber);letter-spacing:.3em;margin:0;font-size:13px}h1{letter-spacing:.06em;margin:6px 0 4px;font-size:clamp(36px,6vw,56px);font-weight:900}.lede{color:var(--dim);margin:0 0 20px}.warn{background:linear-gradient(#141210,#141210) padding-box padding-box,repeating-linear-gradient(45deg,#ffb02e 0 10px,#111 10px 20px) border-box;border:2px solid #0000;border-radius:4px;margin-bottom:18px;padding:14px 16px;font-size:14px;line-height:1.6}.warn strong{color:var(--amber)}.warn.flash{background:linear-gradient(#170f0f,#170f0f) padding-box padding-box,repeating-linear-gradient(45deg,#ff4a2a 0 10px,#111 10px 20px) border-box}.warn.flash strong{color:var(--red)}#title{padding:16px 0;overflow-y:auto}.warn p{margin:6px 0 0}.howto{color:var(--dim);gap:6px;margin:0 0 22px;padding:0;font-size:14px;list-style:none;display:grid}kbd{text-align:center;min-width:56px;color:var(--ink);font-family:var(--font);border:1px solid #444;border-bottom-width:3px;border-radius:4px;margin-right:10px;padding:2px 8px;display:inline-block}button{width:100%;font:700 17px var(--font);letter-spacing:.08em;color:#111;background:var(--amber);cursor:pointer;border:0;border-radius:4px;padding:14px}button:hover{filter:brightness(1.1)}button:focus-visible{outline-offset:2px;outline:3px solid #fff}#loader{z-index:40;background:#000;place-items:center}.loading{text-align:center;width:min(360px,100vw - 32px)}.loading h1{margin-bottom:28px;font-size:clamp(32px,6vw,48px)}.loading .bar{background:#222;border-radius:2px;height:4px;overflow:hidden}.loading .fill{background:var(--amber);width:0;height:100%;transition:width .25s ease-out}.loading .bar:not([aria-valuenow]) .fill{width:30%;animation:1.1s ease-in-out infinite shimmer}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(340%)}}.loading .status{color:var(--dim);font-variant-numeric:tabular-nums;margin:12px 0 0;font-size:13px}#lockhint{z-index:15;pointer-events:none;background:#000000b8;border:1px solid #ffffff40;border-radius:4px;padding:8px 16px;font-size:15px;display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,40px)}body.playing.unlocked #lockhint{display:block}#result{background:#000000e0;place-items:center;padding:24px 0;overflow-y:auto}.card{max-height:calc(100vh - 48px);overflow-y:auto}.card .kind{letter-spacing:.25em;color:var(--red);font-size:14px}.card .kind.perfect,.card .kind.escaped{color:var(--green)}.card .offset{margin:6px 0 2px;font-size:clamp(28px,5vw,44px);font-weight:900}.card .offset b{font-variant-numeric:tabular-nums;color:var(--amber)}.card .title{color:var(--ink);font-size:20px}.card .newbest{background:var(--amber);color:#111;border-radius:3px;margin-top:8px;padding:2px 10px;font-weight:700;display:inline-block}.card .grid{grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0;display:grid}.card .grid div{background:#18181b;border-radius:4px;padding:10px}.card .grid small{color:var(--dim);font-size:12px;display:block}.card .grid b{font-variant-numeric:tabular-nums;font-size:18px}.card .physics{border-left:3px solid var(--amber);background:#141210;padding:12px 14px;font-size:14px;line-height:1.7}.card .physics p{margin:0 0 6px}.card .unlocked{gap:6px;margin-top:14px;display:grid}.card .unlocked div{background:#5be38a1a;border:1px solid #5be38a66;border-radius:4px;padding:8px 12px;font-size:14px}.card .stats{color:var(--dim);margin:14px 0 4px;font-size:13px}.card .bias{color:var(--amber);margin:0 0 18px;font-size:14px}.card .foot{color:var(--dim);text-align:center;margin:12px 0 0;font-size:12px}@media (width<=560px){.card .grid{grid-template-columns:repeat(2,1fr)}.panel{padding:20px}}