:root{color-scheme:light;--paper:#f5e7c7;--ink:#34291d;--gold:#efba59;--mint:#c1dbb1;--red:#ad4934}*{box-sizing:border-box}body{margin:0;background:#e9d6b0;color:var(--ink);font-family:'Trebuchet MS',Verdana,sans-serif;background-image:radial-gradient(ellipse at 40% 0,#fff8e4 0,transparent 70%)}.shell{width:min(100%,470px);margin:auto;padding:16px 15px 14px}.masthead{display:flex;justify-content:space-between;align-items:center;margin:0 3px 12px}.masthead a{font-family:Georgia,serif;font-weight:bold;font-style:italic;font-size:34px;letter-spacing:-2.2px;text-decoration:none;color:var(--ink);line-height:1}.masthead a span{color:#a84830}.masthead i{font-style:normal;font-size:23px;margin-left:5px;color:#a84830}.masthead p{font-size:9px;letter-spacing:1.7px;font-weight:900;line-height:1.7;text-align:right;margin:0}.masthead p span{font-size:8px;letter-spacing:0;font-weight:normal}.game{position:relative;border:1px solid #59452b;background:#fff5dc;box-shadow:0 12px 30px #4d321e30,0 2px 3px #4d321e40;border-radius:15px;overflow:hidden}.topline{padding:9px 10px 5px;display:flex;align-items:center;justify-content:space-between;gap:6px}.level{font-family:Georgia,serif;font-size:21px;font-weight:bold;color:#8f6233;display:flex;gap:9px;align-items:center}.level i{font-family:'Trebuchet MS',sans-serif;font-style:normal;font-size:9px;font-weight:900;letter-spacing:1.3px;color:var(--ink)}.tools{display:flex;gap:4px}button{font:700 10px 'Trebuchet MS',sans-serif;border:1px solid #745c3d44;border-radius:6px;padding:7px 9px;background:#e8d8b44d;color:var(--ink);cursor:pointer;min-height:32px}button:hover{background:#ead3a3}button:disabled{cursor:default;opacity:.6}button:focus-visible,a:focus-visible{outline:3px solid #ac5c35;outline-offset:3px}canvas:focus-visible{outline:none}.route{display:flex;gap:7px;align-items:center;padding:3px 11px 10px;font-size:8px;font-weight:bold;letter-spacing:1px;color:#766046}.route>div{height:5px;flex:1;border-radius:9px;overflow:hidden;background:#d9c69f}.route i,.noise i{display:block;height:100%;width:0;background:#7d8b56;border-radius:inherit}.scene{position:relative;aspect-ratio:2/3;overflow:hidden;background:#382d22}canvas{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-user-select:none}.teacher-status{position:absolute;top:10px;left:10px;right:10px;pointer-events:none;display:flex;align-items:center;gap:9px;min-height:43px;padding:8px 11px;border:1px solid #fff5d557;background:#fff3d8eb;box-shadow:0 3px 12px #1b100c38;border-radius:9px;backdrop-filter:blur(8px)}.teacher-status>div{display:flex;flex-direction:column;gap:3px;flex:1}.teacher-status b{font-size:11px;letter-spacing:1px}.teacher-status div span{font-size:9px;line-height:1.2;color:#5c523e}.teacher-dot{height:9px;width:9px;background:#78955a;border:2px solid #f3f9e6;border-radius:50%;box-shadow:0 0 0 2px #82956750}.teacher-status[data-phase=turning]{background:#ffe8aaf5}.teacher-status[data-phase=turning] .teacher-dot{background:#ac6c23}.teacher-status[data-phase=watching]{background:#853c2fef;color:#fff3da;border-color:#ffcda84d}.teacher-status[data-phase=watching] div span{color:#ffe0c3}.teacher-status[data-phase=watching] .teacher-dot{background:#ffb082;box-shadow:0 0 0 2px #ffb08240}#teacher-time{font-size:10px;font-weight:bold;font-variant-numeric:tabular-nums;opacity:.8}.scene-bottom{position:absolute;bottom:9px;left:9px;right:9px;display:flex;justify-content:space-between;pointer-events:none;font-size:8px;font-weight:900;letter-spacing:1px}.scene-bottom span{background:#322517bd;color:#fff1d3;padding:5px 7px;border:1px solid #ffefc02b;border-radius:4px}.noise{display:flex;align-items:center;gap:9px;padding:8px 11px;border-bottom:1px solid #b08b5630}.noise>span{font-size:8px;font-weight:900;white-space:nowrap;letter-spacing:.7px}.noise small{font-size:8px;font-weight:normal;opacity:.6}.noise>div{height:6px;flex:1;border-radius:5px;overflow:hidden;background:#e6d8b8}.noise i{background:#be6545}.noise-warning{font-family:Georgia,serif;font-style:italic;font-size:14px!important;letter-spacing:0!important;color:#875a36}.cat-cue{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:72px;padding:11px 13px;background:#fff5dc}.cue-copy{flex:1;min-width:0}.cue-eyebrow{display:block;font-size:7px;font-weight:900;letter-spacing:1.6px;color:#99723e;margin-bottom:5px}.cat-cue b{font-family:Georgia,serif;font-size:18px;letter-spacing:-.5px;display:block;line-height:1.05}.cue-copy>span:last-child{font-size:9px;display:block;margin-top:5px;line-height:1.4;color:#756249}.cat-cue[data-phase=demand]{background:#ffedbf}.cat-cue[data-phase=tell],.cat-cue[data-phase=clapping]{background:#f5dac1}.cat-cue[data-phase=tell] b,.cat-cue[data-phase=clapping] b{color:#923d2f}.cat-cue[data-phase=happy]{background:#e0e9ce}.rhythm{width:87px;flex:none;text-align:center}.pinch-demo{display:flex;align-items:center;justify-content:center;gap:2px;height:20px}.pinch-demo i{height:13px;width:9px;background:#745733;border:1px solid #fff4d5;border-radius:8px 8px 4px 4px;animation:pinch-left .9s ease-in-out infinite}.pinch-demo i:last-child{animation-name:pinch-right}.pinch-demo span{font-size:12px;font-weight:bold;color:#94713c;letter-spacing:2px}#beats{display:flex;gap:4px;align-items:center;justify-content:center;margin-top:4px}#beats i{display:flex;align-items:center;justify-content:center;width:21px;height:21px;border:1.5px solid #a48145;border-radius:50%;background:#fff4d5;font-size:9px;font-weight:bold;font-style:normal;color:#98713c}#beats i.done{background:#5d713d;color:#fff7df;border-color:#5d713d;box-shadow:0 0 0 3px #81914d20}#beats>span{color:#bfa66d}#input-feedback{position:absolute;bottom:2px;left:13px;margin:0;font-size:8px;color:#8b3c2c;font-weight:bold;background:inherit;padding-right:7px}.cat-cue:has(#input-feedback:not([hidden])){padding-bottom:19px;min-height:79px}.instructions{text-align:center;padding:9px 6px 10px;border-top:1px solid #b08b5630;background:#f7ecd1}.instructions p{font-size:9px;margin:0;line-height:1.6}.instructions p>span{margin:0 4px;color:#b2966b}.keyboard{display:block;font-size:8px;color:#8f7a5b;margin-top:5px}.live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}footer{font-size:7px;letter-spacing:1.2px;display:flex;justify-content:space-between;margin:12px 4px 0;color:#7b6346}footer span{font-weight:bold}.overlay,.asset-loading{position:absolute;inset:0;background:#fff1dce8;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center;backdrop-filter:blur(6px)}[hidden]{display:none!important}.eyebrow{font-size:8px;font-weight:900;letter-spacing:1.4px;color:#8b6436}.overlay h1,.asset-loading h1{font-family:Georgia,serif;font-size:40px;line-height:1;letter-spacing:-1.8px;margin:12px 0}.overlay p,.asset-loading p{font-size:11px;line-height:1.5;max-width:270px;margin:6px 0}.overlay #result-stats{font-size:9px;letter-spacing:1px;color:#866947}.primary{background:#efc26d;border:1px solid #9b6d34;color:#4c351d;font-size:14px;padding:12px 27px;box-shadow:0 3px 0 #9b6d34,0 5px 12px #69451c25;margin-top:13px;min-height:43px}.game[data-result=lost] .overlay,.game[data-result=won] .overlay{top:54%;background:#fff2dcee;backdrop-filter:blur(6px);border-top:1px solid #fff9e8aa;border-radius:20px 20px 0 0;padding:16px 23px}.game[data-result=lost] .overlay h1,.game[data-result=won] .overlay h1{font-size:29px;letter-spacing:-1.2px;margin:8px 0}.game[data-result=lost] .teacher-status,.game[data-result=won] .teacher-status{visibility:hidden}.game[data-result=lost] .scene-bottom,.game[data-result=won] .scene-bottom{visibility:hidden}.asset-loading{background:#382d22;color:#fff1d3;z-index:10}.asset-loading h1{font-size:27px;letter-spacing:-1px}.asset-loading p{color:#cfb58e}.loading-mark{font-size:45px;color:#e7ba70;animation:loading-spin 3s linear infinite}.asset-loading[data-error=true] .loading-mark{animation:none;color:#f1ab91}.asset-loading .primary{color:#4c351d}.game[data-loading=true] .teacher-status,.game[data-loading=true] .scene-bottom{visibility:hidden}@keyframes pinch-left{0%,70%,100%{transform:translateX(-5px)}35%{transform:translateX(5px)}}@keyframes pinch-right{0%,70%,100%{transform:translateX(5px)}35%{transform:translateX(-5px)}}@keyframes loading-spin{to{transform:rotate(360deg)}}@media(max-width:380px){.shell{padding:11px 10px}.masthead{margin-bottom:10px}.masthead a{font-size:30px}.masthead p{font-size:8px}.masthead p span{font-size:7px}.cat-cue b{font-size:16px}.level i{font-size:8px}.tools button{font-size:9px;padding:6px}.instructions p{font-size:8px}.keyboard{font-size:7px}}@media(min-width:700px){.shell{width:425px;padding-top:20px}.masthead{margin-bottom:15px}body:before{content:'Quiet,\A please.';white-space:pre;position:fixed;left:calc(50% - 490px);top:30%;font-family:Georgia,serif;font-style:italic;font-size:88px;font-weight:bold;line-height:.87;letter-spacing:-6px;transform:rotate(-7deg);z-index:-1;color:#8f69402b}}@media(max-height:780px) and (min-width:381px) and (max-width:699px){.shell{max-width:390px;padding-top:10px}.masthead{margin-bottom:8px}.masthead a{font-size:30px}.scene{aspect-ratio:2/2.85}.cat-cue{min-height:65px;padding:9px 11px}.instructions{padding:7px 5px}.keyboard{margin-top:3px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* Teacher warnings occupy the existing chrome, leaving the entire pose visible. */
.topline{align-items:center;padding:8px 10px 6px;min-height:48px}
.teacher-status{position:static;flex:1;min-width:0;min-height:32px;padding:0;gap:7px;background:none;border:0;box-shadow:none;border-radius:0;backdrop-filter:none}
.teacher-status b{font-size:9px;letter-spacing:.5px;line-height:1.1}
.teacher-status div span{font-size:8px;line-height:1.25;max-width:175px}
.teacher-dot{width:7px;height:7px;flex:none;border-width:1px}
#teacher-time{font-size:8px;align-self:flex-start;margin-top:2px}
.teacher-status[data-phase=turning]{background:none;color:#8e5d1b}
.teacher-status[data-phase=watching]{background:none;color:#fff3da}
.topline:has(.teacher-status[data-phase=watching]){background:#853c2f}
.topline:has(.teacher-status[data-phase=watching]) button{color:#fff0d5;border-color:#fff0d54d;background:#fff0d510}
.topline:has(.teacher-status[data-phase=turning]){background:#ffe8aa}
.game[data-result=lost] .teacher-status,.game[data-result=won] .teacher-status{visibility:visible}
@media(max-width:380px){.teacher-status div span{font-size:7px;max-width:145px}.teacher-status b{font-size:8px}.teacher-status{gap:5px}#teacher-time{display:none}}
/* Keep decisive cues readable at phone scale; auxiliary metadata stays compact. */
.teacher-status b{font-size:11px}.teacher-status div span{font-size:10px;max-width:185px}#teacher-time{font-size:10px}
.route,.noise>span{font-size:10px;letter-spacing:.5px}.route{padding-bottom:7px}.noise small{font-size:9px}
.scene-bottom{font-size:10px;letter-spacing:.5px}.cue-eyebrow{font-size:9px}.cue-copy>span:last-child{font-size:11px;line-height:1.35}
.instructions p{font-size:10px}.keyboard{font-size:9px}.instructions{padding:6px}.cat-cue{padding:9px 12px;min-height:70px}
#input-feedback{font-size:10px}.tools button{font-size:11px}.masthead p span{font-size:9px}
@media(max-width:699px){.shell{padding:8px 12px 6px}.masthead{margin:0 2px 8px}.masthead a{font-size:32px}footer{font-size:8px;margin-top:8px;letter-spacing:.7px}.topline{padding-top:6px;padding-bottom:4px;min-height:44px}.route{font-size:9px}.noise{padding-top:6px;padding-bottom:6px}}
@media(max-width:380px){.teacher-status b{font-size:10px}.teacher-status div span{font-size:9px;max-width:150px}.tools button{font-size:10px}.scene-bottom{font-size:9px}.cue-copy>span:last-child{font-size:10px}.cue-eyebrow{font-size:8px}.instructions p{font-size:9px}.keyboard{font-size:8px}}
/* Let result content set its own height; the reaction keeps its usual 46% panel
   unless wrapping needs more room. Never shrink text or clip the retry action. */
.game[data-result=lost] .overlay,.game[data-result=won] .overlay{
  top:auto;bottom:0;height:auto;min-height:46%;max-height:100%;
  overflow-y:auto;overscroll-behavior:contain;justify-content:safe center;
}
.overlay>*,.asset-loading>*{flex-shrink:0;min-width:0;max-width:100%}
.overlay .eyebrow{white-space:normal;overflow-wrap:anywhere;line-height:1.4}
.overlay h1,.asset-loading h1{overflow-wrap:break-word}
.overlay .primary,.asset-loading .primary{white-space:normal}