/* VOICE children's classroom game on a big touch screen (PID), bright, friendly, safe to try
   IDEA a detective's case file: missions, mystery friends, survey notebook, detective cards, gold star
   PICTURE original flat illustrations of six hobby kids and a detective mascot; each scene is one big board
   COLOUR deep detective purple, white paper cards, sun yellow, coral, teal, violet
   TYPE Baloo 2 display + Nunito text
   LAYOUT top bar, one scene filling the screen, big bottom controls; phones stack to one column */
@font-face{font-family:"Baloo 2";font-weight:600;font-display:swap;src:url(../fonts/baloo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:700;font-display:swap;src:url(../fonts/baloo-2-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(../fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:500;font-display:swap;src:url(../fonts/nunito-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(../fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(../fonts/nunito-latin-800-normal.woff2) format("woff2")}
:root{color-scheme:light;--bg:#f3f1ff;--paper:#fff;--ink:#22184d;--soft:#4d4380;--pur:#2d1e5f;--pur2:#3c2a7a;--y:#ffc83d;--co:#c8402b;--te:#0b7368;--vi:#6a4fe0;--line:#dcd6f7;--good:#dff5f1;--bad:#ffe6e1;--r:22px}
*{box-sizing:border-box;min-width:0}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font:clamp(16px,1.25cqw + 5px,30px)/1.45 "Nunito",system-ui,sans-serif;overflow-x:clip;-webkit-tap-highlight-color:transparent}
h1,h2,h3{font-family:"Baloo 2","Nunito",sans-serif;line-height:1.05;margin:0;letter-spacing:-.01em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:4px solid var(--y);outline-offset:2px}
img,svg{max-width:100%}
[hidden]{display:none!important}
.app{display:flex;flex-direction:column;min-height:100%;container-type:inline-size;background:var(--bg)}
.bar{background:var(--pur);color:#fff;display:flex;align-items:center;gap:14px;padding:10px max(2cqw,14px);flex-wrap:wrap}
.bar .logo{width:2.4em;height:2.4em;border-radius:50%;background:var(--y);display:grid;place-items:center;flex:none;border:0;padding:0}
.bar .logo svg{width:60%}
.bar h1{font-size:1.5em}
.bar small{display:block;color:#d9d2ff;font-size:.62em;font-family:Nunito,sans-serif;letter-spacing:0}
.bar .sp{flex:1}
.pill{background:#ffffff1f;border:0;color:#fff;border-radius:999px;padding:.35em .9em;font-weight:800;min-height:44px;white-space:nowrap}
main{flex:1;padding:clamp(14px,2.2cqw,40px) max(2.5cqw,16px);width:100%;max-width:1680px;margin:0 auto}
.view{display:none}
.view.on{display:block}
.card{background:var(--paper);border:2px solid var(--line);border-radius:var(--r);padding:clamp(14px,1.4cqw,26px)}
.btn{border:0;border-radius:16px;padding:.55em 1.1em;min-height:52px;font-weight:800;background:var(--pur);color:#fff;display:inline-flex;align-items:center;gap:.4em;justify-content:center;text-decoration:none}
.btn.y{background:var(--y);color:var(--ink)}
.btn.co{background:var(--co)}
.btn.te{background:var(--te)}
.btn.ghost{background:transparent;color:var(--pur);border:2.5px solid var(--pur)}
.btn.sm{min-height:44px;padding:.3em .8em;font-size:.85em}
.btn:active{transform:translateY(2px)}
.btn[disabled]{opacity:.4;pointer-events:none}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:clamp(12px,1.4cqw,24px)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g6{grid-template-columns:repeat(6,minmax(0,1fr))}
.tag{display:inline-block;background:var(--pur);color:#fff;border-radius:999px;padding:.1em .8em;font-weight:800;font-size:.7em}
.help{color:var(--soft);margin:.3em 0 0}
.help i{display:block;font-size:.85em}
.note{color:var(--soft);font-size:.8em}
.big{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:clamp(28px,3.2cqw,64px);line-height:1.05}
.huge{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:clamp(36px,5cqw,96px);line-height:1}
.art svg{display:block;width:100%;height:auto;border-radius:var(--r)}
.scene .one>.art,.scene .one>div>.art,.scene .one>#gpic>.art,.scene .one .g2>.art{max-width:min(100%,50cqh);margin-inline:auto}
.scene .g6 .art{max-width:min(100%,28cqh);margin:0 auto}
.songpics .art{max-width:min(100%,22cqh)}
.row>[style*="flex:1"]{flex:1 1 260px!important}
.one{align-items:center}
.songpics{grid-template-columns:repeat(4,minmax(0,1fr))}
.blur svg{filter:blur(16px) saturate(1.2);transition:filter .6s}
.bubble{display:inline-block;background:var(--te);color:#fff;border-radius:22px;padding:.4em .9em;font-weight:800}
.bubble.q{background:var(--pur)}
.bubble.co{background:var(--co)}
.bubble.vi{background:var(--vi)}
/* hidden step = dashed empty slot, so the board never looks blank before the teacher reveals it */
.reveal{border-radius:22px;width:fit-content;max-width:100%}
.reveal:not(.shown){outline:3px dashed var(--line);outline-offset:-3px}
.reveal:not(.shown)>*{visibility:hidden}
.reveal.shown{animation:pop .3s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}
/* home */
.home{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(16px,3cqw,48px);align-items:center}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tile{border:0;border-radius:var(--r);padding:16px;text-align:left;background:var(--paper);box-shadow:0 4px 0 var(--line);display:flex;gap:14px;align-items:center;min-height:96px}
.tile b{display:block;font-family:"Baloo 2","Nunito",sans-serif;font-size:1.25em;line-height:1.1}
.tile span{color:var(--soft);font-size:.8em}
.tile i{width:2.6em;height:2.6em;border-radius:16px;display:grid;place-items:center;flex:none;color:#fff;font-style:normal;font-weight:800;font-size:1.1em}
.tile.main{grid-column:1/-1;background:var(--y);box-shadow:0 4px 0 #d9a21d}
.id-card{display:flex;gap:10px;align-items:center;margin-top:14px;color:var(--soft);font-size:.8em}
/* lesson */
.lesson{display:flex;flex-direction:column;gap:0}
.scene{flex:1}
body.is-lesson:not(.stage) .app{height:100vh;height:100dvh}
body.is-lesson main{display:flex;flex-direction:column;min-height:0;padding-bottom:0;max-width:none}
body.is-lesson #v-lesson{flex:1;min-height:0;display:flex;flex-direction:column}
body.is-lesson .lesson{flex:1;min-height:0}
body.is-lesson .scene{min-height:0;overflow:auto;padding:2px 4px 14px;overscroll-behavior:contain}
.scene>*{max-width:1600px;margin-left:auto;margin-right:auto}
.shead{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:clamp(10px,1.4cqw,22px)}
.shead h2{font-size:clamp(28px,3cqw,58px)}
.nav{background:var(--bg);display:flex;gap:10px;align-items:center;padding:10px 0 max(10px,env(safe-area-inset-bottom));flex-wrap:nowrap;border-top:2px solid var(--line);flex:none}
.nav .pos{white-space:nowrap}
.dots{display:flex;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}
.dots button{width:18px;height:18px;border-radius:50%;border:0;background:var(--line);padding:0;min-height:0}
.dots button[aria-current=true]{background:var(--pur);transform:scale(1.25)}
.notes{background:#fff8e1;border:2px dashed var(--y);border-radius:16px;padding:10px 14px;font-size:.75em;margin:8px 0 0;flex:none;max-height:28cqh;overflow:auto}
.notes[hidden]{display:none}
.mood{border:0;background:var(--paper);border-radius:var(--r);padding:14px;text-align:center;box-shadow:0 4px 0 var(--line);font-weight:800}
.mood svg{width:min(70%,16cqh);margin:0 auto 6px;display:block}
.word-card{border:0;background:var(--paper);border-radius:var(--r);padding:12px;text-align:center;box-shadow:0 4px 0 var(--line);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
.word-card>.art{width:100%}
.word-card b{min-height:2.25em;display:flex!important;align-items:center;justify-content:center}
.word-card small{min-height:1.4em}
.spk{border:2px solid var(--line);background:#fff;border-radius:999px;min-width:44px;min-height:44px;font-size:.9em;margin-top:auto}
.mood.picked{outline:5px solid var(--y);transform:translateY(-3px)}
.word-card b{display:block;font-family:"Baloo 2","Nunito",sans-serif;font-size:clamp(17px,1.35em,40px);margin-top:8px;line-height:1.1;overflow-wrap:anywhere}
.word-card small{color:var(--soft);display:block}
.opt{border:2.5px solid var(--line);background:#fff;border-radius:18px;padding:.5em .9em;text-align:left;font-weight:800;min-height:60px;font-size:1.05em}
.opt.right{background:var(--good);border-color:var(--te)}
.opt.wrong{background:var(--bad);border-color:var(--co)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.mis{display:flex;gap:14px;align-items:center;background:var(--paper);border-radius:18px;padding:14px 18px;border:2px solid var(--line)}
.num{width:2.2em;height:2.2em;border-radius:50%;display:grid;place-items:center;font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;color:#fff;flex:none;font-size:1.1em}
.mis b{display:block;font-size:1.15em}
.mis span{color:var(--soft);font-size:.85em}
.timer{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:clamp(40px,min(5.5cqw,11cqh),120px);line-height:1;font-variant-numeric:tabular-nums}
.tbar{height:18px;background:var(--line);border-radius:999px;overflow:hidden}
.tbar i{display:block;height:100%;background:var(--y);transition:width .9s linear}
.nbtable{width:100%;border-collapse:collapse;font-size:1.1em}
.nbtable th,.nbtable td{border:3px solid var(--ink);padding:.4em .6em;text-align:left}
.nbtable th{background:var(--y)}
.hunt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.hunt .word-card b{font-size:clamp(16px,1.3em,38px)}
.hunt .art{max-width:min(100%,14cqh);margin:0 auto}
.hunt .word-card{padding:8px}
.one{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;align-items:center}
.seg{display:inline-flex;gap:6px;flex-wrap:wrap;background:#fff;border:2px solid var(--line);border-radius:999px;padding:4px}
.seg button{border:0;background:transparent;border-radius:999px;padding:.35em 1em;font-weight:800;min-height:44px}
.seg button[aria-pressed=true]{background:var(--pur);color:#fff}
.sentence{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-height:80px;background:#fff8e1;border:2.5px dashed var(--y);border-radius:18px;padding:14px;font-size:1.3em;font-weight:800}
.chip{border:0;border-radius:14px;padding:.35em .8em;min-height:52px;font-weight:800;font-size:1.15em;background:var(--vi);color:#fff}
.chip.used{opacity:.25;pointer-events:none}
.slot{background:#fff;border-radius:12px;padding:.1em .6em}
.lyrics{white-space:pre-line;font-family:"Baloo 2","Nunito",sans-serif;font-weight:700;font-size:clamp(24px,2.4cqw,46px);line-height:1.25}
.star{font-size:1.2em;color:#c98a00}
.picker{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:clamp(32px,4cqw,72px);text-align:center;padding:10px;border-radius:var(--r);background:var(--pur);color:var(--y);min-height:1.6em}
/* practice */
.friend{border:0;background:var(--paper);border-radius:var(--r);padding:10px;text-align:center;box-shadow:0 4px 0 var(--line);position:relative}
.mystery{aspect-ratio:1;border-radius:18px;background:repeating-linear-gradient(45deg,#e7e2ff 0 14px,#f2efff 14px 28px);display:grid;place-items:center;font-family:"Baloo 2","Nunito",sans-serif;font-size:3em;color:var(--vi);font-weight:800}
.friend b{display:block;font-size:1.1em;margin-top:6px}
.done{position:absolute;top:8px;right:8px;background:var(--te);color:#fff;border-radius:999px;padding:0 .6em;font-weight:800;font-size:.7em}
.srow{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1.5px dashed var(--line)}
.srow .art{width:2.4em;flex:none}
.srow span{flex:1}
.srow b{color:var(--co)}
.modal{position:fixed;inset:0;background:#1a1240b8;display:none;place-items:center;padding:16px;z-index:20}
.modal.on{display:grid}
.box{background:var(--paper);border-radius:26px;padding:22px;width:min(760px,100%);max-height:calc(100% - 20px);overflow:auto;text-align:center}
.msg{min-height:1.6em;font-weight:800;margin-top:8px}
.msg.good{color:var(--te)}
.msg.try{color:var(--co)}
/* settings / forms */
label{font-weight:800;display:block;margin:12px 0 6px}
input,select,textarea{font-size:17px;padding:10px 12px;border-radius:12px;border:2px solid var(--line);width:100%;background:#fff}
textarea{min-height:140px;resize:vertical}
.qedit{border:2px solid var(--line);border-radius:16px;padding:12px;margin-bottom:12px;background:#fff}
.qedit .opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
/* quiz (detective cards) */
.qlive{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(14px,2cqw,32px);align-items:start}
.qq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:20px;align-items:center}
.qtext{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;font-size:clamp(26px,2.6cqw,52px);line-height:1.12}
.qopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.qopt{overflow-wrap:anywhere;border-radius:18px;padding:.5em .8em;font-weight:800;font-size:1.15em;background:#fff;border:2.5px solid var(--line);display:flex;gap:.5em;align-items:center}
.qopt .L{width:1.8em;height:1.8em;border-radius:10px;display:grid;place-items:center;color:#fff;flex:none}
.qopt.key{border-color:var(--te);background:var(--good)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(3.1em,1fr));gap:6px}
.cnum{border:0;border-radius:10px;min-height:44px;font-weight:800;background:#ebe8fb;color:var(--soft);font-size:.85em;padding:2px}
.cnum.in{background:var(--te);color:#fff}
.cnum.ok{background:var(--te);color:#fff}
.cnum.no{background:var(--co);color:#fff}
.cam{position:relative;background:#000;border-radius:18px;overflow:hidden;aspect-ratio:16/9}
.cam video,.cam canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.dist{display:grid;gap:8px}
.drow{display:grid;grid-template-columns:2.2em minmax(0,1fr) 3.5em;gap:8px;align-items:center;font-weight:800}
.drow .b{height:1.4em;background:var(--line);border-radius:8px;overflow:hidden}
.drow .b i{display:block;height:100%}
.tbl-wrap{overflow-x:auto}
table.res{border-collapse:collapse;width:100%;font-size:.8em}
table.res th,table.res td{border-bottom:1.5px solid var(--line);padding:6px 8px;text-align:center;white-space:nowrap}
table.res td:nth-child(2),table.res th:nth-child(2){text-align:left}
.qr{background:#fff;padding:10px;border-radius:16px;display:inline-block}
.qr svg,.qr img{width:min(260px,60cqw);height:auto;display:block}
/* scanner (phone) */
.scanner{position:fixed;inset:0;background:#000;color:#fff;display:flex;flex-direction:column}
.scanner .cam{flex:1;border-radius:0;aspect-ratio:auto}
.scanner .sbar{padding:10px 14px;display:flex;gap:10px;align-items:center;background:var(--pur);flex-wrap:wrap}
/* print */
.print-only{display:none}
@media print{
  body{background:#fff;font-size:12pt}
  .bar,.nav,.noprint,.view:not(.on){display:none!important}
  main{padding:0;max-width:none}
  .print-only{display:block}
  .page{break-after:page;page-break-after:always}
  .card{border:1.5px solid #999}
}
@media(max-width:1100px){.dots{display:none}.nav .pos{flex:1;text-align:center}}
@media(max-width:600px){.nav .btn{min-height:46px;padding:.3em .7em;font-size:.85em}.nav .nlabel{display:none}.bar{padding:6px 12px}.bar .pill{padding:.2em .7em;font-size:.8em}.bar small{display:none}}
@media(max-width:1000px){.home,.qlive,.one{grid-template-columns:minmax(0,1fr)}.g6{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.g3,.hunt{grid-template-columns:repeat(2,minmax(0,1fr))}.g2,.tiles,.qq,.qopts{grid-template-columns:minmax(0,1fr)}.g6{grid-template-columns:repeat(2,minmax(0,1fr))}.bar h1{font-size:1.2em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* fit-to-screen tuning per scene */
.scene[data-s="3"] .bubble,.scene[data-s="9"] .bubble{font-size:clamp(20px,min(2.2cqw,4.4cqh),46px);padding:.3em .8em}
.scene[data-s="3"] .grid,.scene[data-s="9"] .grid{gap:10px!important}
.scene[data-s="9"] .one>.art{max-width:min(100%,40cqh)}
.scene[data-s="11"] .word-card small{font-size:.75em}
.scene[data-s="11"] .card .big{font-size:clamp(22px,min(2.4cqw,4.6cqh),48px)}
.scene[data-s="16"] .grid{gap:10px!important}
.scene[data-s="16"] .card{padding:8px 14px}
.scene[data-s="16"] .mood{padding:6px 12px;display:flex;flex-direction:row;align-items:center;gap:8px;min-height:52px}
.scene[data-s="16"] .mood svg{width:min(7cqh,52px);margin:0}
.scene[data-s="16"] .mood span{font-size:.8em;white-space:nowrap}
.scene[data-s="16"] .cnt{background:var(--bg);border-radius:999px;padding:0 .5em;min-width:1.8em}
.scene[data-s="13"] .card svg{max-width:min(360px,40cqh)!important}
.scene .shead{margin-bottom:clamp(8px,1.6cqh,22px)}
.shead h2{font-size:clamp(26px,min(3cqw,6cqh),58px)}
.hunt6{grid-template-columns:repeat(6,minmax(0,1fr))}
.hunt6 .art{max-width:min(100%,17cqh)}
.fswcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
@media(max-width:900px){.hunt6{grid-template-columns:repeat(3,minmax(0,1fr))}.fswcard{grid-template-columns:minmax(0,1fr)}}
.hunt6 .word-card b{font-size:clamp(16px,min(1.6cqw,3.2cqh),34px)}
.fswcard .timer{font-size:clamp(36px,min(4.5cqw,8cqh),96px)}
.fswcard .tbar{margin:6px 0!important}
.fswcard{padding:12px 18px}

/* ===== slideshow stage: fixed 1920x1080 canvas scaled to the screen like a PPT slide ===== */
body.stage{overflow:hidden;background:#120b2e}
body.stage .app{position:fixed;left:0;top:0;width:1920px;height:var(--sh,1080px);min-height:0;transform-origin:0 0;transform:translate(var(--tx,0px),var(--ty,0px)) scale(var(--s,1));container-type:size;overflow:hidden}
body.stage main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;max-width:none;padding:28px 48px 0}
body.stage main>.view.on{flex:1;min-height:0;display:flex;flex-direction:column}
body.stage #v-home{justify-content:center;padding-bottom:28px}
body.stage #v-practice,body.stage #v-quiz{padding-bottom:24px}
body.stage .tbl-wrap{max-height:520px;overflow:auto}
@media print{body.stage .app{position:static;transform:none;width:auto;height:auto}body.stage{overflow:visible;background:#fff}}

/* slide body sits in the middle of the free space under the title, like a PPT layout */
body.is-lesson .scene{display:flex;flex-direction:column}
body.is-lesson .scene>*{flex:none;width:100%}
body.is-lesson .scene>.shead+*,body.is-lesson .scene>.row:first-child+*{margin-top:auto}
body.is-lesson .scene>*:last-child{margin-bottom:auto}
body.is-lesson .scene>.one:only-child{margin-top:auto}
.friend .mystery,.friend>.art{max-width:min(100%,19cqh);margin:0 auto}
body.stage #v-practice .srow{padding:3px 0}
body.stage #v-practice .srow .art{width:2em}
body.stage #v-quiz .tile{min-height:76px;padding:10px 14px}
body.stage #v-quiz .tile i{width:2.1em;height:2.1em}
body.stage #v-quiz .card svg{max-width:300px}
body.stage #v-home .tile{min-height:84px;padding:12px 16px}

/* larger slide content on the 1920x1080 stage */
body.stage.is-lesson .app{font-size:33px}
body.stage .app{font-size:28px}
body.stage .bar{font-size:26px}
body.stage .nav{font-size:24px}
body.stage .shead h2{font-size:64px}
body.stage .big{font-size:58px}
body.stage .huge{font-size:96px}
.scene[data-s="2"] .songpics .art{max-width:min(100%,34cqh)}
.scene[data-s="2"] .lyrics{font-size:52px}
.scene[data-s="3"] .bubble,.scene[data-s="9"] .bubble{font-size:clamp(20px,min(2.9cqw,5.6cqh),60px)}
.scene[data-s="6"] .mis{font-size:1.25em;padding:28px}
.scene[data-s="6"] .mis span{font-size:.85em}
.scene[data-s="8"] .g2 .art{max-width:min(100%,46cqh)}
.scene[data-s="9"] .one>.art{max-width:min(100%,52cqh)}
.scene[data-s="12"] .grid .btn{font-size:1.15em;min-height:80px}
.scene[data-s="16"] .card{font-size:1.25em;padding:14px 22px}
.scene[data-s="16"] .mood svg{width:min(9cqh,80px)}
.scene[data-s="17"] .card p{font-size:1.15em}
body.stage .scene[data-s="11"] .hunt6 .art{max-width:min(100%,20cqh)}

/* ===== audit fixes (Nov 2026) ===== */
body[data-view="home"] #homeBtn{display:none}
.lyrics p{margin:0 0 .4em}
.lyrics p:last-child{margin-bottom:0}
.tsel{width:auto;font-size:.8em;font-weight:800;min-height:44px}
.mis span,.scene[data-s="16"] b{text-wrap:balance}
/* slide 9: four steps + button must fit beside the picture on one screen */
.scene[data-s="9"] .bubble{font-size:clamp(18px,min(2.3cqw,4.4cqh),46px)}
.scene[data-s="9"] .one>.art{max-width:min(100%,42cqh)}
.scene[data-s="9"] .card{padding:10px 18px}
/* practice header: title row, then tools row */
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.phead .ptools{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* settings: save bar stays on screen */
.savebar{position:sticky;bottom:0;z-index:5;display:flex;gap:12px;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin-top:16px;padding:12px max(14px,1.4cqw);background:var(--paper);border:2px solid var(--line);border-radius:var(--r);box-shadow:0 -6px 18px #2d1e5f1f}
.savebar .msg{margin:0;flex:1 1 220px}
.savebar .msg.dirty{color:var(--co)}
@media print{.savebar{display:none}}
@media(max-width:1000px){.home>div:first-child{order:2}}
/* small speaker button next to each revealed sentence */
.say{display:inline-grid;place-items:center;vertical-align:middle;width:40px;height:40px;min-height:0;margin-left:8px;padding:0;border:2px solid var(--line);border-radius:50%;background:var(--paper);font:18px/1 system-ui,sans-serif;flex:none}
.say:hover{border-color:var(--pur)}
body.stage .say{width:46px;height:46px;font-size:21px}

/* slide 8: He or she? */
.hs{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(16px,3cqw,56px);align-items:center}
.hs-pic .art{max-width:min(100%,50cqh);margin-inline:auto}
.hs-count{text-align:center;margin:8px 0 0}
.hs-panel{display:grid;gap:clamp(10px,2cqh,22px);padding:clamp(16px,2cqw,36px)}
.hs-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.4cqw,24px)}
.hsbtn{border:0;border-radius:20px;min-height:clamp(64px,11cqh,130px);font:800 clamp(30px,3.6cqw,68px)/1 "Baloo 2","Nunito",sans-serif;color:#fff;box-shadow:0 5px 0 #0000002e}
.hsbtn.he{background:#2563c4}
.hsbtn.she{background:var(--co)}
.hsbtn:active{transform:translateY(3px);box-shadow:0 2px 0 #0000002e}
.hsbtn.right{outline:6px solid var(--y);outline-offset:4px}
.hs-msg{min-height:2.7em;display:flex;align-items:center;gap:12px;border-radius:16px;padding:.35em .7em;font:800 clamp(20px,2.3cqw,44px)/1.15 "Baloo 2","Nunito",sans-serif;outline:3px dashed var(--line);outline-offset:-3px}
.hs-msg.good,.hs-msg.try{outline:0}
.hs-msg.good{background:var(--good);color:var(--ink)}
.hs-msg.try{background:var(--bad);color:var(--co)}
.hs-msg .he{color:#2563c4}
.hs-msg .she{color:var(--co)}
@media(max-width:1000px){.hs{grid-template-columns:minmax(0,1fr)}.hs-pic .art{max-width:min(100%,260px)}}
.reveal:has(> .say){display:flex;align-items:center;gap:10px}
.reveal:has(> .say)>.say{margin-left:0}
.scene[data-s="3"] .one{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media(max-width:1000px){.scene[data-s="3"] .one{grid-template-columns:minmax(0,1fr)}}
.scene[data-s="3"] .picker{font-size:clamp(28px,3cqw,60px)}
@media(max-width:600px){.bar .lbl{display:none}.bar .pill{min-width:44px;padding:.2em .6em;font-size:1em}.bar{flex-wrap:nowrap}}

/* slide 11: Find someone who (LKPD / buku catatan) */
#tmr .tbar{margin:10px 0}
.fsw-head{justify-content:space-between;align-items:flex-end;gap:8px 20px}
.fsw-head .shead{margin-bottom:0}
.fsw-step1{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(14px,2cqw,32px);align-items:stretch}
.fsw-h{font:800 1.35em/1.1 "Baloo 2","Nunito",sans-serif}
.nbtable.compact{font-size:1em}
.nbtable.compact th,.nbtable.compact td{padding:.18em .6em}
.nbtable.compact th:first-child{width:3em}
.nbtable.compact th:last-child{width:42%}
.fsw-guide{display:flex;flex-direction:column;justify-content:center;gap:clamp(12px,2.6cqh,30px)}
.fsw-steps{margin:0;padding-left:1.3em;display:grid;gap:.7em;font-size:1.05em;line-height:1.25}
.fsw-steps li::marker{font-family:"Baloo 2","Nunito",sans-serif;font-weight:800;color:var(--pur)}
.fsw-steps i{display:block;color:var(--soft);font-size:.8em;margin-top:.15em}
.fsw-go{font-size:1.1em;align-self:flex-start}
.fswcard .timer{font-size:clamp(34px,min(4cqw,7cqh),80px)}
@media(max-width:1000px){.fsw-step1{grid-template-columns:minmax(0,1fr)}}

.fsw-modes{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* slide 11 · Mission 2: write sentences */
.fsw-cta{margin-top:12px}
.fsw-m2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(14px,2cqw,32px);align-items:stretch}
.m2-frame,.m2-side{display:flex;flex-direction:column;gap:clamp(10px,1.8cqh,20px)}
.m2-side{justify-content:center}
.m2-sent{display:block;font:800 clamp(24px,2.6cqw,52px)/1.4 "Baloo 2","Nunito",sans-serif}
.m2-ex{display:grid;gap:8px;justify-items:start}
.m2-exrow{display:flex;align-items:center;gap:14px}
.m2-exrow .art{width:clamp(56px,9cqh,110px);flex:none}
.m2-exrow b{font-size:1.1em;line-height:1.2}
.m2-exrow .he{color:#2563c4}
.m2-exrow .she{color:var(--co)}
.m2-side .timer{font-size:clamp(34px,min(4cqw,7cqh),80px)}
@media(max-width:1000px){.fsw-m2{grid-template-columns:minmax(0,1fr)}}
.m2-side #tmr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(12px,1.4cqw,24px);row-gap:8px;align-items:center}
.m2-side #tmr .timer{grid-row:1/3}
.m2-side #tmr .tbar{margin:0}
.m2-side .fsw-steps{gap:.5em}

/* ===== settings (Pengaturan guru): form-sized type, tabs, one section at a time ===== */
#v-settings{font-size:clamp(16px,.45cqw + 10px,19px)}
#v-settings .big{font-size:clamp(28px,2.4cqw,44px)}
#v-settings h3{font-size:1.35em;margin-bottom:.2em}
#v-settings label{margin:14px 0 6px;font-size:.95em}
#v-settings input,#v-settings select,#v-settings textarea{font-size:1em;min-height:46px}
#v-settings input:focus,#v-settings select:focus,#v-settings textarea:focus{border-color:var(--vi);outline:3px solid #6a4fe033;outline-offset:0}
.set{max-width:1100px;margin:0 auto;display:grid;gap:16px}
.set-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.set-tabs{display:flex;gap:6px;flex-wrap:wrap;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:6px}
.set-tabs button{border:0;background:transparent;border-radius:12px;padding:.45em .9em;min-height:46px;font-weight:800;color:var(--soft);display:inline-flex;align-items:center;gap:.4em}
.set-tabs button[aria-selected="true"]{background:var(--pur);color:#fff}
.set-tabs .tcount:empty{display:none}
.set-tabs .tcount{font-size:.75em;background:var(--bg);color:var(--pur);border-radius:999px;padding:.05em .55em;min-width:1.6em}
.set-sec{display:grid;gap:4px;padding:clamp(16px,2cqw,28px)}
.set-sec>.note{margin:0 0 4px}
.set-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px}
.set-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:start}
.roster{min-height:360px;line-height:1.6;font-variant-numeric:tabular-nums}
.set-tips{background:var(--bg);border-radius:16px;padding:14px 18px;margin-top:40px}
.set-tips ul{margin:.4em 0 0;padding-left:1.2em;display:grid;gap:.35em;color:var(--soft)}
.set-stat{margin:0;font-size:1.1em}
.set-stat .warn{color:var(--co)}
.set-chars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:6px}
.set-char{display:flex;gap:12px;align-items:center;border:2px solid var(--line);border-radius:16px;padding:10px 12px}
.set-char>.art{width:64px;flex:none}
.set-char>div{flex:1;min-width:0}
.set-char label{margin:0 0 6px!important;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.gchip{font-size:.75em;border-radius:999px;padding:.05em .6em;color:#fff}
.gchip.he{background:#2563c4}
.gchip.she{background:var(--co)}
.set-banner{margin:4px 0;padding:10px 14px;border-radius:14px;background:var(--bad);color:var(--ink)}
.set-banner.ok{background:var(--good)}
.lyr{min-height:300px;line-height:1.5}
/* question editor */
#v-settings .qedit{border:2px solid var(--line);border-radius:18px;padding:14px 16px;margin-bottom:14px;background:#fff}
#v-settings .qedit.incomplete{border-color:var(--co);background:var(--bad)}
.qe-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qe-num{font:800 1.2em/1 "Baloo 2","Nunito",sans-serif;color:var(--pur)}
.qe-thumb{width:40px;flex:none}
.qe-thumb:empty{display:none}
.qe-thumb .art svg{border-radius:8px}
#v-settings .qe-head select{width:auto;min-width:12em}
.qe-del{color:var(--co)!important;border-color:var(--co)!important}
.qe-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.qe-opt{display:flex;align-items:center;gap:8px;border:2px solid var(--line);border-radius:14px;padding:6px 8px}
.qe-opt.is-key{border-color:var(--te);background:var(--good)}
.qe-L{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:#fff;font-weight:800;flex:none}
.qe-opt input[data-o]{flex:1;min-width:0;border-color:transparent;background:transparent;min-height:40px!important}
.qe-opt input[data-o]:focus{background:#fff}
.qe-key{display:inline-flex!important;align-items:center;gap:6px;margin:0!important;padding:.3em .7em;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:.85em!important;cursor:pointer;white-space:nowrap}
.qe-key input{width:20px!important;height:20px;min-height:0!important;margin:0;accent-color:var(--te)}
.qe-opt.is-key .qe-key{border-color:var(--te);color:var(--te)}
.q-add{width:100%;border-style:dashed!important}
@media(max-width:760px){.set-fields,.set-split,.qe-opts{grid-template-columns:minmax(0,1fr)}.set-chars{grid-template-columns:minmax(0,1fr)}.set-tips{margin-top:0}.set-tabs button{flex:1 1 auto;justify-content:center;padding:.4em .6em}.savebar .msg{flex:1 1 0;font-size:.9em}.savebar{flex-wrap:nowrap}}
@media(min-width:761px) and (max-width:1100px){.set-chars{grid-template-columns:repeat(2,minmax(0,1fr))}}
#v-settings .roster{min-height:380px}
#v-settings .lyr{min-height:300px}
.set-char label{flex-direction:column;align-items:flex-start;gap:4px!important}
#v-settings .qe-head select{flex:0 1 14em}

/* ===== print page (Cetak): pick a sheet, preview as A4 paper ===== */
.pr{max-width:1100px;margin:0 auto 18px;display:grid;gap:16px;font-size:clamp(16px,.45cqw + 10px,19px)}
#v-print .big{font-size:clamp(28px,2.4cqw,44px)}
.pr-docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pr-doc{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:14px 16px}
.pr-doc b{display:block;font:800 1.2em/1.1 "Baloo 2","Nunito",sans-serif;color:var(--ink)}
.pr-doc small{display:block;color:var(--soft);margin-top:4px;font-size:.85em;line-height:1.35}
.pr-doc[aria-pressed="true"]{background:#ece8ff;border-color:var(--pur);box-shadow:inset 0 0 0 1px var(--pur)}
.pr-ico{font-size:1.6em;line-height:1}
.pr-bar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--paper);border:2px solid var(--line);border-radius:18px;padding:12px 16px}
.pr-tips{flex:1 1 320px}
.pr-tips p{margin:0;color:var(--soft);font-size:.9em}
.pr-tips p+p{margin-top:4px}
.pr-preview{background:#dcd8ec;border-radius:20px;padding:24px;display:grid;justify-items:center;gap:24px;overflow-x:auto}
.sheet{width:210mm;height:297mm;padding:11mm 12mm;background:#fff;color:#22184d;box-shadow:0 6px 24px #2d1e5f33;box-sizing:border-box;overflow:hidden;font:10.5pt/1.35 "Nunito",sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
/* LKPD */
.lkpd{display:flex;flex-direction:column;gap:3.2mm}
.lk-head{display:flex;justify-content:space-between;align-items:flex-start;gap:6mm}
.lk-head h1{font:800 27pt/1 "Baloo 2","Nunito",sans-serif;color:#2d1e5f;margin:0}
.lk-head p{margin:1.5mm 0 0;font-weight:800;color:#4d4380;font-size:10pt}
.lk-badge{width:19mm;height:19mm;border-radius:50%;background:#ffc83d;display:grid;place-items:center;flex:none}
.lk-badge svg{width:58%}
.lk-id{display:flex;gap:6mm;background:#f0eefb;border-radius:4mm;padding:3.2mm 5mm;font-weight:800;font-size:11pt}
.lk-id span{display:flex;align-items:flex-end;gap:2mm;flex:2 1 0}
.lk-id span.sm{flex:1 1 0}
.ln{display:inline-block;flex:1;min-width:10mm;height:1.05em;border-bottom:1.3px solid #22184d}
.lk-m{display:flex;align-items:center;gap:3mm;margin:1.5mm 0 0;font:800 17pt/1 "Baloo 2","Nunito",sans-serif;color:#2d1e5f}
.lk-pill{background:#2d1e5f;color:#fff;border-radius:999px;padding:1.5mm 4mm;font:800 9pt/1 "Nunito",sans-serif;letter-spacing:.04em}
.lk-ins{margin:0;font-size:10.5pt}
.lk-ins i{color:#4d4380}
.lk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.5mm}
.lk-card{border:1.3px solid #dcd6f7;border-radius:4mm;padding:3mm 3.5mm 3.5mm;display:flex;flex-direction:column;align-items:center;gap:1.8mm}
.lk-pic{width:28mm}
.lk-pic .art svg{border-radius:3.5mm}
.lk-card b{font:800 12.5pt/1.1 "Baloo 2","Nunito",sans-serif;text-align:center}
.lk-name{align-self:stretch;display:flex;align-items:flex-end;gap:2mm;font-weight:800;font-size:10pt;margin-top:1.5mm}
.lk-tbl{width:100%;border-collapse:collapse;font-size:10.5pt}
.lk-tbl th,.lk-tbl td{border:1.2px solid #2d1e5f;padding:2.2mm 3mm;text-align:left;height:9.5mm}
.lk-tbl th{background:#ffc83d;font-weight:800}
.lk-tbl th:first-child,.lk-tbl td:first-child{width:14mm;text-align:center;font-weight:800}
.lk-tbl th:nth-child(2){width:38%}
.lk-tbl tr.ex td{background:#f0eefb;font-style:italic;color:#4d4380;font-weight:500}
.lk-tbl .ln{flex:none;width:30mm;margin:0 1.2mm;vertical-align:baseline}
.lk-tbl td:last-child .ln{width:42mm}
.lk-reflect{margin-top:auto;border:1.5px dashed #b9b0e6;border-radius:5mm;padding:4mm 5mm;display:flex;gap:5mm;align-items:center}
.lk-think{flex:1}
.lk-think h3{font:800 12pt/1 "Baloo 2","Nunito",sans-serif;margin:0 0 2.5mm;color:#2d1e5f}
.lk-row{display:flex;justify-content:space-between;align-items:center;gap:3mm;font-size:10.5pt;padding:1mm 0}
.lk-boxes{display:flex;gap:4mm;align-items:center;flex:none}
.lk-cb{width:4.2mm;height:4.2mm;border:1.3px solid #2d1e5f;border-radius:1.2mm;display:inline-block;margin-right:1.4mm;vertical-align:-.9mm}
.lk-star{width:30mm;height:25mm;border:1.3px solid #2d1e5f;border-radius:4mm;display:grid;place-items:center;align-content:center;gap:1.2mm;text-align:center;font-weight:800;font-size:9.5pt;line-height:1.1;flex:none}
.lk-star svg{width:10mm}
/* word cards: 2 per sheet with a cut line */
.wordsheet{display:flex;flex-direction:column}
.wcard{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3mm;border:1.5px solid #dcd6f7;border-radius:6mm}
.wpic{width:92mm}
.wpic .art svg{border-radius:6mm}
.wword{font:800 40pt/1 "Baloo 2","Nunito",sans-serif;margin-top:2mm}
.wid{font-size:16pt;color:#4d4380}
.cut{height:0;border-top:1.5px dashed #999;margin:6mm 0;text-align:center;line-height:0;color:#999;font-size:13pt}
/* answer cards */
.cardsheet{display:grid;grid-template-rows:1fr 1fr;justify-items:center;align-items:center}
.acard{width:12.5cm;max-width:100%;border:1px dashed #bbb;padding:.3cm}
@media(max-width:860px){.pr-docs{grid-template-columns:minmax(0,1fr)}.pr-preview{padding:12px;justify-items:start}.sheet{zoom:.8}}
@media(max-width:620px){.sheet{zoom:.41}}
@page{size:A4;margin:0}
@media print{
  html,body{background:#fff!important}
  #v-print{padding:0}
  .pr-preview{background:none;padding:0;display:block;border-radius:0;overflow:visible}
  .sheet{box-shadow:none;margin:0;zoom:1;break-after:page;page-break-after:always}
  .sheet:last-child{break-after:auto;page-break-after:auto}
}
/* answer-card count */
.pr-count label{display:block;margin:0 0 6px;font-weight:800}
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper .btn{min-width:46px;font-size:1.2em;padding:0}
.stepper input{width:5em;text-align:center;font-size:1.15em;font-weight:800;min-height:46px;font-variant-numeric:tabular-nums}
.stepper input{-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}