:root{color-scheme:dark;--ink:#e8f1ff;--muted:#9fb0c0;--gold:#ffd479;--edge:rgba(159,176,192,.22)}
*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0;overflow:hidden}body{background:#0c1219;color:var(--ink);font:15px/1.4 'Segoe UI',system-ui,sans-serif}button,input{font:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid var(--gold);outline-offset:4px}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}canvas:focus-visible{outline-offset:-5px}
#place{position:fixed;left:22px;top:21px;font-size:10px;letter-spacing:.18em;color:#a5b4c5;pointer-events:none}#place span{display:block;margin-top:5px;font-size:12px;letter-spacing:.03em;color:#d2dcea}#topbar{position:fixed;right:18px;top:16px;display:flex;align-items:center;gap:12px;z-index:10}.circle{width:40px;height:40px;flex:none;border:1px solid var(--edge);border-radius:50%;padding:0;background:#080e1ec9;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);font-size:23px}.pill{border:1px solid var(--edge);border-radius:40px;background:#090e18b8;backdrop-filter:blur(9px);padding:11px 19px;color:#dde8f5;font-size:13px}.pill:hover,.circle:hover{border-color:#ffd4798c;color:#fff}.act{background:linear-gradient(135deg,#ffd479,#ffb36b);color:#140d04;border-color:transparent;box-shadow:0 0 27px #ffba6230}.act:hover{color:#140d04;background:#ffdf9f}.onward{font-size:13px}
#voice{position:fixed;bottom:113px;left:50%;transform:translateX(-50%);width:min(600px,90vw);text-align:center;pointer-events:none;text-shadow:0 2px 5px #000,0 0 16px #000}.kick{font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#ffd99a;margin:0 0 8px}#instruction{font-size:clamp(17px,2.2vw,24px);line-height:1.3;margin:0;font-weight:400}#hint{font-size:12px;color:#b5c3d4;margin:10px 0 0}#trail-progress{display:flex;justify-content:center;gap:12px;margin-top:14px}#trail-progress:empty{display:none}.pip{width:7px;height:7px;border-radius:50%;border:1px solid #b9cce666}.pip.lit{background:#ffdda2;border-color:#fff0cf;box-shadow:0 0 12px #ffcc6f}.pip.current{border-color:#ffdda2}
#controls{position:fixed;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:10px;max-width:96vw;width:max-content;z-index:10}#assist{font-size:11px;color:#aabbd0;padding:10px 14px}#palette{position:fixed;left:50%;transform:translateX(-50%);bottom:83px;display:flex;gap:13px}.swatch{width:32px;height:32px;border:7px solid #09131d;border-radius:50%;background:var(--swatch);outline:1px solid #b7d4e642;padding:0}.swatch[aria-pressed=true]{outline:2px solid #ffdb98}.planting #voice{bottom:133px}.flower-hit{position:fixed;background:transparent;border:0;border-radius:50%;width:46px;height:46px;margin:-23px 0 0 -23px;padding:0;touch-action:none;cursor:grab}.flower-hit:hover,.flower-hit:focus-visible{outline:1px solid #ffda9d9c;outline-offset:3px}.flying .flower-hit{pointer-events:none}
.overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:#070b13a8;backdrop-filter:blur(10px);padding:20px}.panel{position:relative;width:min(460px,100%);max-height:90dvh;overflow:auto;border:1px solid var(--edge);border-radius:22px;padding:35px;background:#090e18e8;box-shadow:0 18px 50px #02081080}.panel h1{font-size:24px;font-weight:400;margin:8px 0 26px}.panel label{font-size:12px;color:var(--muted);display:block;margin:18px 0 9px}.panel input{width:100%;background:#0c1622;color:#e8f1ff;border:1px solid var(--edge);border-radius:8px;padding:12px}.close{position:absolute;right:12px;top:12px}.themes,.options{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.themes .pill{font-size:12px;padding:9px 14px}.themes [aria-pressed=true]{border-color:#ffd479;color:#ffd479}.panel p:not(.kick){font-size:12px;color:var(--muted)}.text-button{border:0;background:none;color:#cfdfed;font-size:12px;text-decoration:underline;text-underline-offset:4px;padding:10px 0}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:600px){#place{left:16px;top:21px;font-size:9px}#place span{font-size:11px}#topbar{right:12px;gap:8px}.onward{padding:9px 13px}#voice{bottom:139px}#hint{max-width:280px;margin:10px auto 0}#controls{flex-wrap:wrap;bottom:25px;max-width:94vw;width:340px;gap:8px}#assist{flex-basis:75%;padding:6px;background:transparent;border-color:transparent}#controls .pill{padding:10px 14px}.planting #voice{bottom:159px}#palette{bottom:100px}.panel{padding:30px 24px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
@media(max-width:600px){.drawing #assist{flex-basis:auto;padding:10px 14px;border:1px solid var(--edge);background:#090e18b8}.drawing #controls{width:max-content;max-width:94vw;flex-wrap:nowrap}}
@media(max-height:500px){#voice,.planting #voice{bottom:22px;left:18px;transform:none;width:40vw;text-align:left}#instruction{font-size:16px}#hint{display:none}#trail-progress{justify-content:flex-start;margin-top:8px}#controls{left:auto;right:16px;bottom:20px;transform:none;max-width:53vw;flex-wrap:wrap}#palette{bottom:78px;left:75%}.kick{font-size:9px}}