:root{--ink:#1D1B3A;--panel:#FFFFFF;--panel-2:#F2EEFF;--muted:#5C5878;--zone:#6C3CE1;--zone-deep:#3D1F8F;--sun:#FFC93C;--sun-deep:#D99A00;--scrim:rgba(29,27,58,.38);color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--ink:#F3F1FF;--panel:#231F40;--panel-2:#2F2957;--muted:#B6B0DA;--zone:#9C7BFF;--zone-deep:#4A2BA8;--scrim:rgba(10,8,24,.55);color-scheme:dark}}:root[data-theme=dark]{--ink:#F3F1FF;--panel:#231F40;--panel-2:#2F2957;--muted:#B6B0DA;--zone:#9C7BFF;--zone-deep:#4A2BA8;--scrim:rgba(10,8,24,.55);color-scheme:dark}*,*:before,*:after{box-sizing:inherit}html,body{height:100%;margin:0;overflow:hidden}body{background:#7fcb6e;color:var(--ink);font-family:"Baloo 2",ui-rounded,Arial Rounded MT Bold,system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}canvas{position:fixed;inset:0;display:block;touch-action:none;outline:none}#safe{position:fixed;left:0;top:0;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}.screen{position:fixed;inset:0;z-index:5;display:grid;place-items:center;overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:var(--scrim)}.screen[hidden]{display:none}.card{position:relative;width:100%;max-width:400px;background:var(--panel);border-radius:32px;padding:26px 24px 22px;text-align:center;box-shadow:0 10px 0 var(--zone-deep)}.mark{position:relative;display:grid;place-items:center;height:140px;margin:-4px 0 0}.mark.small{height:76px;margin:0 0 6px}.ring{position:absolute;width:140px;height:140px;border-radius:50%;border:6px dashed var(--zone);opacity:.35;animation:close 2.4s cubic-bezier(.5,0,.2,1) .15s both}.mark.small .ring{width:64px;height:64px;opacity:.6}.ring.spin{animation:spin 6s linear infinite}@keyframes close{0%{transform:scale(2);opacity:0}to{transform:scale(1);opacity:.35}}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.ring,.ring.spin{animation:none}}h1{position:relative;margin:0;font-size:clamp(60px,17vw,86px);font-weight:800;line-height:1;color:var(--zone);letter-spacing:-.03em;text-shadow:0 5px 0 var(--zone-deep)}.lede{margin:4px auto 16px;max-width:30ch;font-size:18px;line-height:1.35;color:var(--muted);font-weight:500}.field{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:4px 6px 4px 16px;background:var(--panel-2);border-radius:18px;text-align:left}.field span{font-weight:800;font-size:15px}.field input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:700 18px/1 "Baloo 2",ui-rounded,system-ui,sans-serif;padding:10px 4px;outline:none;-webkit-user-select:text;user-select:text}.field:focus-within{outline:3px solid var(--zone);outline-offset:2px}.play,.ghost{display:block;width:100%;border:0;border-radius:20px;cursor:pointer;font-family:"Baloo 2",ui-rounded,system-ui,sans-serif;transition:transform .08s,box-shadow .08s}.play{padding:12px 20px 9px;font-weight:800;font-size:28px;line-height:1;color:#1d1b3a;background:var(--sun);box-shadow:0 6px 0 var(--sun-deep)}.play:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sun-deep)}.ghost{margin-top:12px;padding:10px 20px 8px;font-weight:800;font-size:18px;color:var(--ink);background:var(--panel-2)}.ghost:active{transform:translateY(2px)}.play:focus-visible,.ghost:focus-visible{outline:4px solid var(--zone);outline-offset:4px}.keys{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;margin:18px 0 0;text-align:left;font-size:15px;line-height:1.3;background:var(--panel-2);border-radius:18px;padding:12px 16px}.keys dt{font-weight:800}.keys dd{margin:0;color:var(--muted);font-weight:500}.touch-keys{display:none}@media(pointer:coarse){.touch-keys{display:grid}.mouse-keys{display:none}}.best{margin:12px 0 0;color:var(--muted);font-weight:700;font-size:15px}h2{margin:0;font-size:30px;font-weight:800;line-height:1.1}.by{margin:4px 0 0;color:var(--muted);font-weight:600;font-size:17px;line-height:1.35}.place{font-size:100px;font-weight:800;line-height:.95;color:var(--zone);text-shadow:0 5px 0 var(--zone-deep);margin:10px 0 0}.of{color:var(--muted);font-weight:700;font-size:18px;margin:2px 0 16px}.stats{display:flex;justify-content:center;gap:10px;margin:0 0 20px}.stat{background:var(--panel-2);border-radius:16px;padding:8px 16px 6px;min-width:100px}.stat b{display:block;font-size:28px;line-height:1}.stat span{font-size:14px;color:var(--muted);font-weight:600}
