/* Joy Chinese Class — même cahier que les fiches de français (moulin-web), version chinoise :
   encre bleu nuit, papier crème, marge vermillon, grille 田字格 pour les caractères. */
:root{
  --ground:#ECEEF2;
  --ground-ink:#3A4358;
  --paper:#FBFAF3;
  --ink:#26324B;
  --ink-soft:#5A6780;
  --rule:#D7DEEA;
  --rule-strong:#9DB2CF;
  --margin:#C8372D;          /* vermillon (朱红) */
  --pen:#2D4FA8;
  --red:#B42318;
  --jade:#2E7D5B;
  --gold:#B7852F;
  --shadow:0 10px 30px rgba(38,50,75,.14);
  --zh:"Noto Serif SC","Songti SC","SimSun",serif;
  --zh-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ground:#20242C; --ground-ink:#C6CDDB; --shadow:0 12px 34px rgba(0,0,0,.5); }
}
:root[data-theme="dark"]{ --ground:#20242C; --ground-ink:#C6CDDB; --shadow:0 12px 34px rgba(0,0,0,.5); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; padding:0 16px 4rem;
  background:var(--ground); color:var(--ground-ink);
  font-family:"Atkinson Hyperlegible",Verdana,var(--zh-sans),sans-serif;
  line-height:1.55;
}
a{color:var(--pen)}
.desk{max-width:860px; margin:0 auto; display:flex; flex-direction:column; gap:1.6rem}
.desk.narrow{max-width:520px}
[hidden]{display:none !important}

/* ---------- barre du haut ---------- */
.topbar{max-width:860px; margin:0 auto 1.6rem; display:flex; align-items:center; gap:1rem; padding:1rem 0; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ground-ink)}
.seal{width:38px; height:38px; flex:none; border-radius:6px; background:var(--margin); color:#fff; display:grid; place-items:center;
  font-family:var(--zh); font-weight:700; font-size:1.35rem; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.brand b{font-family:"Baloo 2",sans-serif; font-size:1.15rem; font-weight:800; line-height:1}
.brand small{display:block; font-family:var(--zh); font-size:.8rem; opacity:.75}
.topbar nav{margin-left:auto; display:flex; gap:.4rem .9rem; align-items:center; flex-wrap:wrap; font-size:.95rem}
.topbar nav a{color:var(--ground-ink); text-decoration:none; font-weight:700}
.topbar nav a:hover{color:var(--pen)}
.topbar .who{font-size:.85rem; opacity:.8}

/* ---------- la feuille ---------- */
.sheet{
  background:var(--paper); color:var(--ink);
  border-radius:4px; box-shadow:var(--shadow);
  padding:2rem 2.2rem 2.3rem 3.3rem; position:relative; overflow:hidden;
}
.sheet::before{content:""; position:absolute; top:0; bottom:0; left:2.3rem; width:2px; background:var(--margin); opacity:.5}
h1,h2,h3{font-family:"Baloo 2","Atkinson Hyperlegible",var(--zh-sans),sans-serif; text-wrap:balance; margin:0}
h1{font-size:2rem; font-weight:800; color:var(--pen); line-height:1.15}
h2{font-size:1.25rem; font-weight:700; color:var(--pen); margin-bottom:.35rem}
h3{font-size:1.05rem; font-weight:700; color:var(--pen); margin:1.2rem 0 .3rem}
.eyebrow{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--margin); margin-bottom:.3rem}
.hand{font-family:"Caveat",cursive; font-size:1.25rem; color:var(--ink-soft); margin:.2rem 0 0}
.legende{font-size:.9rem; color:var(--ink-soft)}
.zh{display:block; margin-top:.35rem; font-size:.92rem; color:var(--ink-soft); font-family:var(--zh-sans)}
.consigne{margin:.9rem 0 1.3rem; padding:.75rem 1rem; background:color-mix(in srgb, var(--rule) 45%, var(--paper));
  border-left:3px solid var(--pen); border-radius:0 4px 4px 0; font-size:.95rem}
.consigne strong,.consigne b{color:var(--pen)}
.consigne.intro{border-left-color:var(--margin); background:color-mix(in srgb, var(--margin) 8%, var(--paper))}
.regle{font-size:1.02rem; line-height:1.75; padding:.8rem 1rem; border-left:3px solid var(--margin);
  background:color-mix(in srgb, var(--margin) 7%, var(--paper)); border-radius:0 4px 4px 0}
.regle b{color:var(--pen)} .regle i{font-family:var(--zh); font-style:normal}

/* ---------- boutons, formulaires ---------- */
.btn{font:inherit; font-family:"Baloo 2",sans-serif; font-weight:700; font-size:1rem; color:#fff; background:var(--pen); border:0;
  border-radius:999px; padding:.55rem 1.2rem; cursor:pointer; box-shadow:0 2px 0 rgba(0,0,0,.15); text-decoration:none; display:inline-block}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.55; cursor:default}
.btn.small{font-size:.85rem; padding:.35rem .85rem} .btn.red{background:var(--margin)}
.btn.ghost{background:transparent; color:var(--ink-soft); border:2px solid var(--rule-strong); box-shadow:none}
.center{text-align:center; margin-top:1.3rem}
.form{display:flex; flex-direction:column; gap:1rem; margin-top:1.2rem}
.form label{display:flex; flex-direction:column; gap:.3rem; font-weight:700; font-size:.92rem}
.form input{font:inherit; font-weight:400; font-size:1.02rem; padding:.6rem .75rem; border:1.5px solid var(--rule-strong);
  border-radius:6px; background:#fff; color:var(--ink); width:100%}
.form input:focus{outline:2px solid color-mix(in srgb, var(--pen) 40%, transparent); border-color:var(--pen)}
.form .hint{font-weight:400; font-size:.82rem; color:var(--ink-soft)}
.form .links{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.9rem}
.msg{padding:.7rem .9rem; border-radius:6px; font-size:.95rem}
.msg.ok{background:color-mix(in srgb, var(--jade) 12%, var(--paper)); color:var(--jade); border:1.5px solid color-mix(in srgb, var(--jade) 40%, transparent)}
.msg.ko{background:color-mix(in srgb, var(--red) 9%, var(--paper)); color:var(--red); border:1.5px solid color-mix(in srgb, var(--red) 35%, transparent)}

/* ---------- catalogue ---------- */
.hero h1 .zhh{font-family:var(--zh); color:var(--margin); font-weight:700; margin-left:.4rem}
.levelnav{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem}
.levelnav a{font-family:"Baloo 2",sans-serif; font-weight:800; text-decoration:none; color:var(--pen); border:2px solid var(--pen);
  border-radius:999px; padding:.15rem .9rem}
.level-head{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap}
.badge{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.05rem; color:#fff; background:var(--margin); border-radius:6px; padding:.05rem .6rem}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin-top:1rem}
.card{display:flex; flex-direction:column; gap:.35rem; padding:1rem 1.1rem; border:1.5px solid var(--rule-strong); border-radius:8px;
  background:#fff; color:var(--ink); text-decoration:none; transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--pen); transform:translateY(-2px)}
.card b{font-family:"Baloo 2",sans-serif; font-size:1.08rem; color:var(--pen); line-height:1.25}
.card .sous{font-family:var(--zh-sans); font-size:.88rem; color:var(--ink-soft)}
.card .meta{margin-top:auto; padding-top:.4rem; display:flex; justify-content:space-between; gap:.5rem; font-size:.82rem; color:var(--ink-soft)}
.card .done{color:var(--jade); font-weight:700}
.card.draft{border-style:dashed; opacity:.75}
.empty{font-style:italic; color:var(--ink-soft)}

/* ---------- moteur de test ---------- */
.idline{display:flex; flex-direction:column; gap:.5rem; align-items:flex-end; font-size:.92rem}
header.sheet{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap}
.timer{display:flex; align-items:center; gap:.6rem; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--pen); font-size:1.15rem; font-variant-numeric:tabular-nums}
.timer.fini .t{color:var(--red)}
.items{display:flex; flex-direction:column; gap:.6rem; margin-top:.4rem}
.item{display:flex; align-items:baseline; gap:.5rem; font-size:1.05rem}
.item .lettre{font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--margin); flex:none; min-width:1.4em}
.item .txt{flex:1; line-height:2.2; min-width:0}
.item .txt .zhtxt, .zhtxt{font-family:var(--zh); font-size:1.12em}
.verdict{font-family:"Baloo 2",sans-serif; font-weight:700; flex:none} .verdict.ok{color:var(--jade)} .verdict.ko{color:var(--red)}
.expl{display:block; font-size:.88rem; color:var(--ink-soft); line-height:1.45; margin:.1rem 0 .3rem; font-style:italic}
.ans{font-family:var(--zh),"Caveat",cursive; font-size:1.2rem; color:var(--pen); background:transparent; border:0;
  border-bottom:1.5px dotted var(--rule-strong); outline:0; padding:.05em .3em; min-width:0; vertical-align:baseline}
.ans:focus{border-bottom-color:var(--pen); background:color-mix(in srgb, var(--rule) 40%, transparent)}
.ans.pinyin{font-family:"Atkinson Hyperlegible",sans-serif; font-size:1.08rem}
.ans.long{width:min(24em,100%)}
.ans.ok{border-bottom-color:var(--jade); color:var(--jade)} .ans.ko{border-bottom-color:var(--red); color:var(--red); text-decoration:line-through}
.ans.zone{width:100%; resize:vertical; line-height:2rem; border:1.5px dashed var(--rule-strong); border-radius:4px; padding:.4rem .7rem; font-size:1.2rem;
  background:repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem); background-attachment:local; background-color:var(--paper)}
.chips{display:inline-flex; flex-wrap:wrap; gap:.35rem; margin:0 .3rem; vertical-align:middle}
.chip{font:inherit; font-size:.98rem; background:#fff; color:var(--ink); border:1.5px solid var(--rule-strong); border-radius:999px; padding:.12rem .75rem; cursor:pointer; line-height:1.6}
.chip.zhc{font-family:var(--zh); font-size:1.1rem}
.chip:hover{background:color-mix(in srgb, var(--rule) 60%, #fff)}
.chip.on{background:var(--pen); color:#fff; border-color:var(--pen)}
.chip:disabled{cursor:default; opacity:.75}
.chip.bonne{border-color:var(--jade); box-shadow:0 0 0 2px color-mix(in srgb, var(--jade) 35%, transparent); opacity:1}
.chip.on.bonne{background:var(--jade); border-color:var(--jade)} .chip.on.faux{background:var(--red); border-color:var(--red); opacity:1}
/* 连词成句 : la phrase se construit dans une bande 田字格 */
.ordre{display:flex; flex-direction:column; gap:.4rem; flex:1}
.ordre .bande{min-height:2.6rem; display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; padding:.3rem .5rem; border-radius:4px;
  border:1.5px dashed var(--rule-strong);
  background:linear-gradient(90deg, transparent calc(50% - .5px), var(--rule) calc(50% - .5px) calc(50% + .5px), transparent 0) 0 0/2.6rem 100%,
             linear-gradient(transparent calc(50% - .5px), var(--rule) calc(50% - .5px) calc(50% + .5px), transparent 0), #fff}
.ordre .bande:empty::before{content:"↓ cliquez sur les mots dans l’ordre"; font-size:.82rem; color:var(--ink-soft)}
.ordre .bande.ok{border-color:var(--jade); border-style:solid} .ordre .bande.ko{border-color:var(--red); border-style:solid}
.lecture{background:#fff; border:1.5px solid var(--rule-strong); border-radius:4px; padding:.9rem 1.1rem; line-height:2; font-size:1.18rem; font-family:var(--zh); margin:.6rem 0 1rem}
.phrases-dictee{display:flex; flex-direction:column; gap:.8rem; margin-top:.8rem}
.phrase-bloc{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start}
.phrase-ctl{display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width:6em}
.num{font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--margin); font-variant-numeric:tabular-nums}
.compteur{text-align:right; font-size:.85rem; color:var(--ink-soft); margin-top:.2rem}
.voix-ko{color:var(--red); font-size:.88rem}

/* ---------- correction ---------- */
.corrige{border:2px dashed var(--red)} .corrige::before{display:none} .corrige h2,.corrige .eyebrow,.corrige h3{color:var(--red)}
.scores{display:flex; gap:.8rem; flex-wrap:wrap; margin:.8rem 0 1rem}
.score-tile{background:#fff; border:2px solid var(--red); border-radius:6px; padding:.45rem .9rem; min-width:8.5em; text-align:center}
.score-tile.total{border-color:var(--pen)} .score-tile.total .st-val{color:var(--pen)}
.st-lab{font-size:.78rem; color:var(--ink-soft)} .st-val{font-family:"Baloo 2",sans-serif; font-weight:800; font-size:1.5rem; color:var(--red)}
.grille-wrap{overflow-x:auto}
table.grille{width:100%; border-collapse:collapse; margin-top:.6rem; font-size:.92rem}
table.grille th, table.grille td{border:1.5px solid color-mix(in srgb, var(--red) 55%, transparent); padding:.35rem .55rem; text-align:left}
table.grille thead th{font-family:"Baloo 2",sans-serif; color:var(--red); background:color-mix(in srgb, var(--red) 7%, var(--paper))}
table.grille td.n{text-align:center; font-weight:700; color:var(--red); width:6em}
.err{display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; padding:.35rem 0; border-bottom:1px solid var(--rule)}
.err .att{font-weight:700; color:var(--jade); font-family:var(--zh)} .err .got{font-weight:700; color:var(--red); font-family:var(--zh)}
.dv{margin:.5rem 0} .dv-ref{font-family:var(--zh); color:var(--ink-soft)}
.dv-got{font-family:var(--zh); font-size:1.25rem; color:var(--pen); padding-left:1.6rem; letter-spacing:.05em}
.dv-got mark{background:color-mix(in srgb, var(--red) 18%, transparent); color:var(--red); border-radius:3px; padding:0 .1em}
.dv-got s{color:var(--red); opacity:.7}
.ecrit-vue{white-space:pre-wrap; font-family:var(--zh); font-size:1.15rem; color:var(--pen); background:#fff; border:1.5px dashed var(--rule-strong); border-radius:4px; padding:.6rem .9rem; line-height:1.9}
.mots-carnet{display:flex; flex-wrap:wrap; gap:.4rem .6rem; margin:.5rem 0}
.mot-c{font-family:var(--zh); font-size:1.1rem; color:var(--pen); background:#fff; border:1.5px dashed var(--rule-strong); border-radius:4px; padding:.05em .5em}
.transcript{font-family:var(--zh); font-size:1.05rem; line-height:1.9; color:var(--ink-soft); background:#fff; border-left:3px solid var(--rule-strong); padding:.5rem .8rem; margin:.4rem 0}
.comment{padding:.8rem 1rem; border-left:3px solid var(--gold); background:color-mix(in srgb, var(--gold) 10%, var(--paper)); white-space:pre-wrap}

/* ---------- tableaux (compte, enseignante) ---------- */
.table-wrap{overflow-x:auto; margin-top:.6rem}
table.list{width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px}
table.list th, table.list td{border-bottom:1px solid var(--rule); padding:.45rem .5rem; text-align:left; vertical-align:top}
table.list thead th{font-family:"Baloo 2",sans-serif; color:var(--pen); border-bottom:2px solid var(--rule-strong)}
table.list tr.click{cursor:pointer} table.list tr.click:hover td{background:color-mix(in srgb, var(--rule) 35%, transparent)}
.tabs{display:flex; gap:.4rem; flex-wrap:wrap}
.tabs button{font:inherit; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--ink-soft); background:transparent; border:2px solid transparent; border-radius:999px; padding:.3rem .9rem; cursor:pointer}
.tabs button.on{color:var(--pen); border-color:var(--pen); background:#fff}
textarea.plain{width:100%; font:inherit; font-size:.95rem; border:1.5px solid var(--rule-strong); border-radius:6px; padding:.6rem; background:#fff; color:var(--ink)}
code,pre{font-family:ui-monospace,Menlo,monospace; font-size:.85rem}

footer{text-align:center; font-size:.85rem; opacity:.8}

@media (max-width:640px){
  .sheet{padding:1.5rem 1.1rem 1.8rem 2.1rem}
  .sheet::before{left:1.3rem}
  h1{font-size:1.6rem}
  .idline{align-items:flex-start}
  .phrase-bloc{grid-template-columns:1fr} .phrase-ctl{flex-direction:row; justify-content:flex-start}
  .item{flex-wrap:wrap}
}
@media print{
  body{background:#fff; padding:0} .topbar,.no-print{display:none} .sheet{box-shadow:none}
}

/* ---------- flashcards ---------- */
.decks{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1rem; margin-top:1rem}
.deck .apercu{font-family:var(--zh); font-size:1.15rem; color:var(--ink); letter-spacing:.08em}
.bar{height:8px; border-radius:99px; background:var(--rule); overflow:hidden; display:flex}
.bar span{display:block; height:100%} .bar .acq{background:var(--jade)} .bar .vu{background:var(--rule-strong)}
.due{color:var(--margin); font-weight:700}
.study{display:flex; flex-direction:column; align-items:center; gap:1.1rem}
.setup{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; align-items:center; justify-content:center; font-size:.95rem}
.setup select{font:inherit; padding:.3rem .5rem; border:1.5px solid var(--rule-strong); border-radius:6px; background:#fff; color:var(--ink)}
.progress{width:100%; max-width:440px; display:flex; align-items:center; gap:.7rem; font-size:.85rem; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.progress .bar{flex:1}
.flash{width:min(440px,100%); aspect-ratio:4/3.2; perspective:1200px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.flash .inner{position:relative; width:100%; height:100%; transition:transform .45s cubic-bezier(.3,.7,.3,1); transform-style:preserve-3d}
.flash.flipped .inner{transform:rotateY(180deg)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:10px; background:#fff;
  border:2px solid var(--rule-strong); box-shadow:0 6px 18px rgba(38,50,75,.12); display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:.5rem; padding:1.2rem; text-align:center; color:var(--ink)}
.face.back{transform:rotateY(180deg); border-color:var(--pen)}
.face .tag{position:absolute; top:.6rem; left:.8rem; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--margin)}
.face .hint{position:absolute; bottom:.6rem; font-size:.78rem; color:var(--ink-soft)}
/* 田字格 behind the characters */
.tzg{font-family:var(--zh); font-weight:700; color:var(--ink); line-height:1.15; padding:.1em .25em; font-size:clamp(2.6rem, 12vw, 4.6rem);
  background:linear-gradient(90deg, transparent calc(50% - .5px), #EBC8C4 calc(50% - .5px) calc(50% + .5px), transparent 0),
             linear-gradient(transparent calc(50% - .5px), #EBC8C4 calc(50% - .5px) calc(50% + .5px), transparent 0);
  border:1.5px solid #E2A9A3}
.tzg.small{font-size:clamp(2rem, 9vw, 3rem)}
.face .py{font-size:1.45rem; color:var(--pen); font-weight:700}
.face .fr{font-size:1.25rem; font-family:"Baloo 2",sans-serif; font-weight:700; color:var(--ink)}
.face .fr.big{font-size:1.7rem}
.face .ex{font-family:var(--zh); font-size:1.05rem; color:var(--ink-soft); line-height:1.6; max-width:30ch}
.face .ex small{display:block; font-family:"Atkinson Hyperlegible",sans-serif; font-size:.85rem; font-style:italic}
.answer{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center}
.btn.know{background:var(--jade)} .btn.miss{background:var(--margin)}
.kbd-hint{font-size:.78rem; color:var(--ink-soft)}
.boxes{display:inline-flex; gap:3px; vertical-align:middle} .boxes i{width:7px; height:7px; border-radius:2px; background:var(--rule)} .boxes i.on{background:var(--jade)}
table.vocab td.hz{font-family:var(--zh); font-size:1.3rem; white-space:nowrap} table.vocab td.py{color:var(--pen); white-space:nowrap}
table.vocab td.ex{font-family:var(--zh); font-size:.95rem; color:var(--ink-soft)} table.vocab td.ex small{display:block; font-family:"Atkinson Hyperlegible",sans-serif; font-style:italic}
.say{background:none; border:0; cursor:pointer; font-size:1rem; padding:.1rem .3rem}
@media (prefers-reduced-motion: reduce){ .flash .inner{transition:none} }
.flash.instant .inner{transition:none}
header.sheet.hero{display:block}
.face{overflow-y:auto}
@media (max-width:640px){
  .flash{aspect-ratio:auto; height:430px}
  .face{padding:2rem .9rem 1.6rem; gap:.4rem}
  .face .fr{font-size:1.1rem} .face .py{font-size:1.25rem}
}

/* ---------- flashcards : choix A B C D ---------- */
.choices{width:min(560px,100%); display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.choice{font:inherit; display:flex; align-items:center; gap:.7rem; text-align:left; padding:.7rem .9rem; border-radius:10px; cursor:pointer;
  background:#fff; color:var(--ink); border:2px solid var(--rule-strong); min-height:3.4rem; transition:border-color .12s, background .12s}
.choice:hover:not(:disabled){border-color:var(--pen); background:color-mix(in srgb, var(--rule) 30%, #fff)}
.choice .lettre{flex:none; width:1.9rem; height:1.9rem; border-radius:50%; display:grid; place-items:center; font-family:"Baloo 2",sans-serif;
  font-weight:800; color:#fff; background:var(--pen)}
.choice .opt{font-size:1.02rem; line-height:1.3}
.choice.zhc .opt{font-family:var(--zh); font-size:1.4rem}
.choice:disabled{cursor:default; opacity:.6}
.choice.bonne{opacity:1; border-color:var(--jade); background:color-mix(in srgb, var(--jade) 12%, #fff)} .choice.bonne .lettre{background:var(--jade)}
.choice.faux{opacity:1; border-color:var(--red); background:color-mix(in srgb, var(--red) 9%, #fff)} .choice.faux .lettre{background:var(--red)}
.voice-line{font-size:.92rem; color:var(--ink-soft)} .voice-line.on{color:var(--pen); font-weight:700} .voice-line.ko{color:var(--red)}
.voice-line.on::before{content:""; display:inline-block; width:.55rem; height:.55rem; border-radius:50%; background:var(--margin); margin-right:.4rem; animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.setup label.off{opacity:.5}
@media (max-width:480px){ .choices{grid-template-columns:1fr} }
@media (max-width:640px){ .flash{height:300px} .tzg{font-size:clamp(2.4rem, 11vw, 3.6rem)} }
@media (max-width:480px){ .choices.hz{grid-template-columns:1fr 1fr} }
@media (hover:none){ .kbd-hint{display:none} }