:root{--sky:#cdeaf4;--ink:#2f3a2f;--leaf:#3f8f46;--paper:#fffaf0}*{box-sizing:border-box}html,body{background:var(--sky);height:100%;color:var(--ink);margin:0;font-family:Segoe UI,system-ui,sans-serif}.screen[hidden],[hidden]{display:none!important}#setup,#mic-help{flex-direction:column;gap:20px;max-width:640px;margin:0 auto;padding:32px 16px;display:flex}h1{margin:0;font-size:40px}h2{margin:0 0 8px;font-size:18px}.choices{flex-wrap:wrap;gap:8px;display:flex}.choices button{font:inherit;background:var(--paper);color:inherit;cursor:pointer;border:2px solid #a8c9a0;border-radius:12px;padding:10px 16px;font-size:18px}.choices button[aria-pressed=true]{background:var(--leaf);border-color:var(--leaf);color:#fff}.slider{align-items:center;gap:12px;font-size:16px;display:flex}.slider input{flex:1}.primary{font:inherit;background:var(--leaf);color:#fff;cursor:pointer;border:none;border-radius:14px;align-self:flex-start;padding:14px 28px;font-size:22px;font-weight:700}.link{font:inherit;color:#5a6b8a;cursor:pointer;background:0 0;border:none;align-self:flex-start;padding:0;text-decoration:underline}.privacy{color:#4a5a4a;margin:0;font-size:14px}#mic-help ol{margin:0;padding-left:24px;font-size:18px;line-height:1.6}#stage{background:var(--sky);position:fixed;inset:0}#stage.idle{cursor:none}#scene,#scene svg{width:100%;height:100%;display:block}.controls{opacity:0;pointer-events:none;background:#fffaf0f0;border-radius:14px;align-items:center;gap:8px;padding:8px 12px;transition:opacity .3s;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #00000026}.controls.show,.controls.done{opacity:1;pointer-events:auto}.controls button{font:inherit;color:inherit;cursor:pointer;background:#fff;border:1px solid #c9bfae;border-radius:10px;padding:8px 14px;font-size:16px}.controls .primary{background:var(--leaf);color:#fff;border:none;font-size:20px}#clock{font-variant-numeric:tabular-nums;text-align:center;min-width:64px;font-size:18px;font-weight:700}#debug{color:#cfe;white-space:pre-wrap;overflow-wrap:anywhere;background:#000000b8;border-radius:6px;max-width:min(420px,100vw - 200px);margin:0;padding:8px 10px;font:12px/1.4 Consolas,monospace;position:absolute;top:8px;left:72px}#sunflower-head,.bud,#best-flag{transform-box:view-box;transform-origin:0 0}#sunflower-head{transition:transform 1s ease-out}#best-flag{transition:transform 1.2s cubic-bezier(.2,.8,.2,1.1)}.bud{opacity:0;transition:opacity .6s}.bud[data-shown=true]{opacity:1}.flower{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.9,.3,1.3);transform:scale(0)}.flower[data-sprouted=true]{transform:scale(1)}.flower .head{transform-box:view-box;transition:transform 1s}svg[data-droop=true] .flower .head{transform:rotate(var(--droop)) scale(.92, .6)}svg[data-bloom=true] .flower[data-sprouted=true] .head{transform:scale(1.18)}.sun-face{transform-box:view-box;transform-origin:0 0;transition:transform 1s}svg[data-droop=true] .sun-face{transform:translate(20px,44px)rotate(26deg)scale(.96,.66)}#storm-clouds{transition:transform 1.2s;transform:translate(420px)}svg[data-droop=true] #storm-clouds{transform:translate(0)}#sky-dim{transition:opacity 1.2s}svg[data-droop=true] #sky-dim{opacity:.28}#pause-dim{pointer-events:none;transition:opacity .3s}svg[data-paused=true] #pause-dim{opacity:.25}#bunny{transition:transform .4s ease-in}svg[data-bunny=hidden] #bunny{transform:translateY(80px)}svg[data-bunny=returning] #bunny{animation:1.6s ease-out bunny-return}@keyframes bunny-return{0%{transform:translateY(80px)}30%{transform:translateY(20px)}50%{transform:translateY(20px)}75%{transform:translateY(-5px)}to{transform:translateY(0)}}.eye-open,.yawn{opacity:0}.yawn{transform-box:fill-box;transform-origin:50% 0}svg[data-bunny=returning] .eye-open{animation:1.6s eye-peek}svg[data-bunny=returning] .eye-closed{animation:1.6s eye-hide}svg[data-bunny=returning] .yawn{animation:1.6s yawn}@keyframes eye-peek{0%,70%{opacity:1}to{opacity:0}}@keyframes eye-hide{0%,70%{opacity:0}to{opacity:1}}@keyframes yawn{0%,48%{opacity:0;transform:scaleY(.2)}58%{opacity:1;transform:scaleY(1)}70%{opacity:1;transform:scaleY(.8)}80%,to{opacity:0;transform:scaleY(.2)}}#zzz{transition:opacity .4s;animation:3s ease-in-out infinite zzz-float}svg[data-bunny=hidden] #zzz,svg[data-bunny=returning] #zzz{opacity:0}@keyframes zzz-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.petal{animation:2s ease-out forwards petal-fly}@keyframes petal-fly{0%{opacity:1;transform:translate(0)}to{transform:translate(var(--dx), var(--dy));opacity:0}}
