*{box-sizing:border-box}html{color-scheme:dark}body{margin:0}img{max-width:100%}[hidden]{display:none!important}:root{color-scheme:light;--paper:#FDF6EE;--card:#FFFFFF;--veil:rgba(255,255,255,.72);--ink:#4A3F46;--ink-2:#8A7C82;--ink-3:#B4A7AC;--terra:#E0805F;--terra-deep:#C96A4B;--blush:#F4AFA0;--sun:#F6C97A;--leaf:#7FA87A;--leaf-soft:#A8C89F;--bloom:#EE9BB4;--edge:rgba(74,63,70,.09);--edge-2:rgba(74,63,70,.16);--lift:0 10px 28px rgba(160,116,96,.14);--lift-2:0 18px 44px rgba(160,116,96,.2);--display:"Quicksand", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;--sans:"Nunito", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden;user-select:none;-webkit-user-select:none}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;display:block;width:100%;height:100%}.flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:5;background:var(--terra);opacity:0;pointer-events:none}.flash.jolt{animation:jolt .7s cubic-bezier(.2,.7,.3,1)}@keyframes jolt{0%{opacity:.13}to{opacity:0}}.stage{position:relative;z-index:6;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;gap:clamp(10px,2vh,22px);padding-block:clamp(16px,3.5vh,40px);padding-inline:20px;text-align:center}.hint{display:inline-flex;align-items:center;gap:.55rem;margin:0;padding:.45rem 1rem .45rem .7rem;border-radius:999px;background:var(--veil);box-shadow:var(--lift);font-size:.78rem;font-weight:600;color:var(--ink-2);opacity:0;transform:translateY(-6px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}.hint.show{opacity:1;transform:none}kbd{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--ink);background:#fff;border:1px solid var(--edge-2);border-bottom-width:2px;border-radius:7px;padding:.12rem .45rem}.dialrow{display:flex;align-items:flex-end;justify-content:center;gap:clamp(0px,1.4vw,18px);width:100%}.plate{display:grid;justify-items:center;gap:clamp(12px,2.2vh,24px);max-width:31rem}.dial{position:relative;width:clamp(200px,36vmin,300px);aspect-ratio:1;display:grid;place-items:center}.dialring{grid-area:1 / 1;width:100%;height:100%;overflow:visible}.dialtrack{fill:var(--card);stroke:#e0805f24;stroke-width:10}.dialarc{fill:none;stroke:var(--terra);stroke-width:10;stroke-linecap:round}.dialface{grid-area:1 / 1;display:grid;justify-items:center;gap:.15rem}.running .dial{animation:breathe 10s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(.985)}45%{transform:scale(1.02)}}.clock{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums;font-size:clamp(2.7rem,9.5vw,4.1rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}.clocknote{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}.mascot{width:clamp(130px,19vw,215px);height:auto;flex:none;overflow:visible}.guy{transform-box:fill-box;transform-origin:50% 100%;animation:bob 4.6s ease-in-out infinite}.mascot.still .guy{animation:none}@keyframes bob{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.1deg)}}.eyes{transform-box:fill-box;transform-origin:center;animation:blink 6.2s infinite}.mascot.still .eyes{animation:none}@keyframes blink{0%,95%,to{transform:scaleY(1)}97%{transform:scaleY(.12)}}.sprout{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5.4s ease-in-out infinite}.mascot.still .sprout{animation:none}@keyframes sway{0%,to{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}.peers{display:flex;align-items:center;justify-content:center;gap:7px;min-height:12px}.pdot{width:9px;height:9px;border-radius:50%;background:var(--leaf-soft);transition:opacity .6s ease,transform .5s ease,background .4s ease}.pdot.you{background:var(--terra);box-shadow:0 0 0 3px #e0805f29}.say{display:grid;min-height:8.4rem;align-content:center}.slot{grid-area:1 / 1;display:grid;gap:.7rem;justify-items:center;animation:rise .7s cubic-bezier(.2,.7,.3,1) both}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}h1{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,5.2vw,2.6rem);line-height:1.1;letter-spacing:-.015em;text-wrap:balance}.lede{margin:0;max-width:27rem;color:var(--ink-2);font-size:.95rem;line-height:1.6;text-wrap:pretty}.quote{margin:0;max-width:25rem;font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,3.4vw,1.6rem);line-height:1.38;color:var(--ink);text-wrap:pretty}.quote .w{opacity:0;transition:opacity 1.1s ease,color .8s ease}.quote .w.on{opacity:1}.quote .w.last.on{color:var(--terra-deep)}.attrib{margin:0;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);opacity:0;transition:opacity 1.4s ease}.attrib.on{opacity:1}.msg{min-height:1.4rem;margin:0;font-size:.88rem;font-weight:600;color:var(--terra-deep);opacity:0;transition:opacity .55s ease}.msg.show{opacity:1;transition:opacity .1s ease}.controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px}button{font-family:var(--sans);font-size:.92rem;color:inherit;background:none;border:none;cursor:pointer}button:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:999px}.begin{font-family:var(--display);padding:.95rem 2.6rem;border-radius:999px;background:var(--terra);color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.02em;box-shadow:var(--lift);transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s ease,background .22s ease}.begin:hover{background:var(--terra-deep);transform:translateY(-2px);box-shadow:var(--lift-2)}.begin:active{transform:translateY(0)}.quiet{font-size:.8rem;font-weight:700;color:var(--ink-2);padding:.5rem .9rem;border-radius:999px;transition:color .25s ease,background .25s ease}.quiet:hover{color:var(--ink);background:#4a3f460d}.sound{display:inline-flex;align-items:center;gap:.5rem}.wave{display:inline-flex;align-items:flex-end;gap:2px;height:13px}.wave i{width:3px;border-radius:2px;background:var(--terra);transition:height .3s ease,background .3s ease}.wave i:nth-child(1){height:6px}.wave i:nth-child(2){height:12px}.wave i:nth-child(3){height:8px}.sound[aria-pressed=true] .wave i{animation:pulse 1.7s ease-in-out infinite}.sound[aria-pressed=true] .wave i:nth-child(2){animation-delay:.25s}.sound[aria-pressed=true] .wave i:nth-child(3){animation-delay:.5s}.sound[aria-pressed=false] .wave i{height:4px;background:var(--ink-3)}@keyframes pulse{0%,to{transform:scaleY(.6)}50%{transform:scaleY(1.25)}}.base{display:grid;justify-items:center;gap:.55rem;min-height:2.4rem}.dim{opacity:0;pointer-events:none}@media(max-width:720px){.dial{width:clamp(168px,32vmin,240px)}.mascot{width:clamp(96px,29vw,160px)}}@media(max-width:420px){.say{min-height:9.5rem}.begin{padding:.85rem 2.1rem}.dial{width:clamp(160px,44vw,200px)}.mascot{width:clamp(92px,28vw,120px)}}@media(prefers-reduced-motion:reduce){.running .dial{animation:none}.flash.jolt{animation:none;opacity:0}.slot{animation:none}.guy,.eyes,.sprout,.wave i{animation:none!important}}.exitrow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}.topbar{display:grid;place-items:center}.topbar>*{grid-area:1 / 1}.topshare{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.05rem .5rem .8rem;border-radius:999px;background:var(--veil);box-shadow:var(--lift);font-size:.8rem;font-weight:700;color:var(--ink-2);transition:color .25s ease,transform .2s ease,box-shadow .2s ease}.topshare:hover{color:var(--ink);transform:translateY(-1px);box-shadow:var(--lift-2)}.topshare svg{width:15px;height:15px;flex:none;fill:none;stroke:var(--terra);stroke-width:2;stroke-linecap:round}.topshare svg circle{fill:var(--terra);stroke:none}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:8;background:#4a2d2866;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s ease}.scrim.open{opacity:1}.sheet{position:fixed;z-index:9;left:50%;top:50%;width:min(392px,calc(100vw - 28px));max-height:min(92svh,780px);overflow-y:auto;transform:translate(-50%,-46%) scale(.97);opacity:0;background:var(--card);border-radius:22px;padding:26px 22px 24px;text-align:center;box-shadow:0 26px 70px #7850404d;transition:transform .4s cubic-bezier(.2,.8,.3,1),opacity .3s ease}.sheet.open{transform:translate(-50%,-50%) scale(1);opacity:1}.sheet h2{margin:0 0 3px;font-family:var(--display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em}.sheetsub{margin:0;font-size:.82rem;color:var(--ink-2)}.preview{margin:15px 0 18px;border-radius:16px;overflow:hidden;background:#fcefe2;aspect-ratio:1080 / 1350;max-height:52svh;display:grid;place-items:center}.preview img{width:100%;height:100%;object-fit:contain;display:block}.previewnote{font-size:.82rem;color:var(--ink-3)}.sheetactions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.sheetactions .begin{text-decoration:none;display:inline-block}.begin.off{opacity:.45;pointer-events:none}.close{position:absolute;top:10px;right:12px;font-size:1.3rem;line-height:1;color:var(--ink-3);padding:5px 9px;border-radius:50%}.close:hover{color:var(--ink);background:#4a3f460f}@media(prefers-reduced-motion:reduce){.sheet{transition:opacity .2s ease}}@media(max-width:560px){.stage{gap:6px;padding-block:12px 14px;padding-inline:16px}.plate{gap:10px}.dial{width:clamp(172px,47vw,216px)}.mascot{width:clamp(112px,34vw,150px)}.dialrow{gap:2px}.controls.dim{display:none}.clock{font-size:clamp(2.3rem,12vw,3rem)}.clocknote{font-size:.63rem;letter-spacing:.12em}.say{min-height:7rem}.quote{font-size:1.12rem;line-height:1.42;max-width:21rem}h1{font-size:1.72rem}.lede{font-size:.9rem;max-width:21rem}.msg{min-height:1.2rem;font-size:.84rem}.controls{gap:8px}.begin{padding:.85rem 2.2rem;font-size:.92rem}.quiet{font-size:.78rem;padding:.45rem .7rem}.base{min-height:0;gap:.35rem}.hint{font-size:.73rem;padding:.4rem .85rem .4rem .6rem}.topshare{font-size:.76rem;padding:.45rem .9rem .45rem .7rem}.sheet{padding:22px 16px 20px;border-radius:20px}.sheet h2{font-size:1.35rem}.preview{max-height:44svh;margin:12px 0 15px}}@media(max-width:340px){.dial{width:150px}.mascot{width:92px}.clock{font-size:2.1rem}.quote{font-size:1.04rem}}@media(max-height:560px)and (max-width:940px){.stage{gap:2px;padding-block:6px}.plate{gap:6px}.dial{width:clamp(104px,21vh,138px)}.mascot{width:clamp(70px,14vh,96px)}.clock{font-size:clamp(1.5rem,5vh,2rem)}.clocknote{font-size:.55rem;letter-spacing:.1em}.peers{display:none}.say{min-height:3.6rem}.quote{font-size:.95rem;line-height:1.32;max-width:32rem}h1{font-size:1.35rem}.lede{font-size:.78rem;line-height:1.4;max-width:30rem}.msg{min-height:.9rem;font-size:.76rem}.controls{gap:7px}.begin{padding:.5rem 1.5rem;font-size:.85rem}.quiet{font-size:.72rem;padding:.35rem .6rem;min-height:0}.base{min-height:0;gap:.2rem}.controls.dim{display:none}.hint,.topshare{font-size:.68rem;padding:.3rem .75rem}.preview{max-height:38svh}}@media(hover:none){.begin:hover,.topshare:hover{transform:none;box-shadow:var(--lift)}.quiet,.topshare,.close{min-height:40px}.quiet{display:inline-flex;align-items:center}}