:root{--play-ground: #1d3b2a;--play-card: #f4e7c5;--play-card-deep: #e6d3a3;--play-ink: #3b2a1a;--play-rust: #c0532a;--play-muted: #9c8f72;--play-ui-top: 0px;--play-ui-band: 0px;--play-type: 22px;--play-button-type: 18px;--play-button-height: 56px;--play-frame: inset 0 0 0 2px var(--play-card), inset 0 0 0 3px var(--play-ink), 0 4px 0 var(--play-ink);--play-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}@media(min-width:720px){:root{--play-type: 28px;--play-button-type: 20px}}@media(max-height:480px){:root{--play-type: 18px;--play-button-type: 18px;--play-button-height: 52px}}html,body{margin:0;height:100dvh;background:var(--play-ground);overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.play-ui{position:fixed;inset:0;height:100dvh;pointer-events:none;font-family:var(--play-font);color:var(--play-ink);touch-action:manipulation}.play-ui [hidden]{display:none!important}.play-top{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}.play-frame{position:relative;width:100%;max-width:900px;pointer-events:auto}.play-box{box-sizing:border-box;padding:14px 16px 12px;background:var(--play-card);border:3px solid var(--play-ink);box-shadow:var(--play-frame);font-size:var(--play-type);line-height:1.3}.play-tag{padding:2px 8px;background:var(--play-ink);color:var(--play-card);font-size:14px;line-height:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.play-who{position:absolute;top:-11px;left:10px}.play-said,.play-lead,.play-cheer,.play-headline,.play-body{margin:0}.play-lead{margin-top:8px;font-size:calc(var(--play-type) - 4px);font-weight:700}.play-lead .play-tag{display:inline-block;margin-right:8px;vertical-align:2px}.play-skip{position:absolute;top:-11px;right:10px;padding:2px 10px;font:inherit;font-size:14px;line-height:18px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--play-card);background:var(--play-ink);border:0;border-radius:0;cursor:pointer;touch-action:manipulation}.play-skip:after{content:"";position:absolute;inset:-12px -6px}.play-skip:focus-visible{outline:3px solid var(--play-rust);outline-offset:2px}.play-announce{margin:0;padding:4px 0;text-align:center;font-size:calc(var(--play-type) + 6px);line-height:1.2;font-weight:800;color:var(--play-rust)}.play-lesson{display:flex;gap:14px;align-items:flex-start}.play-panda{flex:none;width:64px;height:64px;image-rendering:pixelated}.play-lesson-text{display:flex;flex-direction:column;gap:6px;min-width:0}.play-cheer{font-size:calc(var(--play-type) - 4px);font-weight:700;color:var(--play-rust)}.play-headline{font-size:var(--play-type);line-height:1.3;font-weight:700}.play-body{font-size:calc(var(--play-type) - 4px)}.play-headlines{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:calc(var(--play-type) - 4px);font-weight:700}.play-headlines li{padding-left:22px;position:relative}.play-headlines li:before{content:"";position:absolute;left:0;top:.4em;width:10px;height:10px;background:var(--play-rust)}.play-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;box-sizing:border-box;padding:8px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}.play-buttons{width:100%;max-width:1100px;display:flex;gap:8px;pointer-events:auto}.play-buttons>*{flex:1 1 0;min-width:0}@media(orientation:portrait){.play-buttons{flex-direction:column}}.play-btn{font:inherit;font-size:var(--play-button-type);line-height:1.25;min-height:var(--play-button-height);color:var(--play-ink);background:var(--play-card);border:3px solid var(--play-ink);border-radius:0;box-shadow:0 4px 0 var(--play-ink);cursor:pointer;touch-action:manipulation;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:0 14px;box-sizing:border-box}.play-btn:hover:not(:disabled){background:var(--play-card-deep)}.play-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--play-ink)}.play-btn:focus-visible{outline:3px solid var(--play-rust);outline-offset:2px}.play-btn:disabled{color:var(--play-muted);background:var(--play-card-deep);border-color:var(--play-muted);box-shadow:0 4px 0 var(--play-muted);cursor:default}.play-btn-main,.play-btn-main:hover:not(:disabled){background:var(--play-rust);color:var(--play-card)}.play-option{justify-content:flex-start;text-align:left}.play-letter{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;font-weight:700;font-size:17px;color:var(--play-card);background:var(--play-ink)}.play-option:disabled .play-letter{background:var(--play-muted)}.play-fallback{min-height:100dvh;box-sizing:border-box;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));font-family:var(--play-font);color:var(--play-ink)}.play-fallback-card{width:min(480px,100%);display:flex;flex-direction:column;gap:12px;background:var(--play-card);border:3px solid var(--play-ink);box-shadow:0 6px 0 var(--play-ink);padding:16px;box-sizing:border-box}.play-still{display:block;width:100%;aspect-ratio:1;image-rendering:pixelated;background:var(--play-ground)}.play-fallback-card p{margin:0;font-size:16px;line-height:1.4}.play-track{display:flex;align-items:center;gap:12px;margin-bottom:19px;padding:6px 12px;background:var(--play-card);border:3px solid var(--play-ink);box-shadow:var(--play-frame)}.play-track-dots{display:flex;align-items:center}.play-dot{flex:none;box-sizing:border-box;width:18px;height:18px;display:grid;place-items:center;border:3px solid var(--play-muted);background:var(--play-card)}.play-dot[data-state=current]{border-color:var(--play-ink);animation:play-pulse 1.6s ease-in-out infinite}.play-dot[data-state=cleared]{border-color:var(--play-ink);background:var(--play-rust)}.play-check{width:10px;height:9px;fill:var(--play-card);visibility:hidden}.play-dot[data-state=cleared] .play-check{visibility:visible}.play-pop,.play-pop .play-check{animation:play-pop .42s ease-out}.play-link{flex:none;width:16px;height:4px;background:var(--play-ink)}.play-link[data-state=faint]{background:var(--play-muted);opacity:.45}.play-track-label{font-size:16px;line-height:18px;font-weight:700;white-space:nowrap}@keyframes play-pulse{0%,to{box-shadow:0 0 0 2px var(--play-rust)}50%{box-shadow:0 0 0 4px #c0532a59}}@keyframes play-pop{0%{transform:scale(.3)}60%{transform:scale(1.35)}to{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.play-dot[data-state=current]{animation:none;box-shadow:0 0 0 2px var(--play-rust)}.play-pop,.play-pop .play-check{animation:none}}