*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0f1117; --panel:#171a23; --panel2:#1e222d; --line:#2a2f3d;
  --ink:#e8eaf0; --dim:#98a0b3; --accent:#e0533d; --accent2:#4a9eff;
  --good:#3ecf8e; --warn:#f5a623; --bad:#ff6b6b;
  --jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo","Noto Sans JP",sans-serif;
}
@media (prefers-color-scheme: light){
  :root{--bg:#f6f7f9;--panel:#fff;--panel2:#f0f2f6;--line:#e0e4ec;--ink:#1a1d26;--dim:#666e80}
}
html,body{margin:0;height:100%}
body{
  background:var(--bg); color:var(--ink); display:flex; flex-direction:column;
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

/* ---- top bar ---- */
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 20px 0;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.logo{
  width:40px;height:40px;border-radius:10px;background:var(--accent);color:#fff;
  display:grid;place-items:center;font:600 22px/1 var(--jp);flex:none;
  text-decoration:none;transition:filter .15s;
}
a.logo:hover{filter:brightness(1.12)}
.brand h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.2px}
.sub{font-size:12.5px;color:var(--dim)}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--dim);
  padding:9px 13px;font-size:13.5px;font-weight:550;cursor:pointer;white-space:nowrap;
}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--ink);border-bottom-color:var(--accent)}

/* ---- layout ---- */
main{flex:1;max-width:1000px;width:100%;margin:0 auto;padding:22px 20px 40px}
.foot{
  border-top:1px solid var(--line);background:var(--panel);padding:8px 20px;
  display:flex;align-items:center;gap:14px;font-size:12px;color:var(--dim)
}
.spacer{flex:1}
.linkbtn{background:none;border:0;color:var(--accent2);cursor:pointer;font-size:12px;padding:2px 4px}
.linkbtn.danger{color:var(--bad)}

h2{font-size:19px;margin:0 0 4px;letter-spacing:-.2px}
h3{font-size:14px;margin:26px 0 10px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px}
p.lede{color:var(--dim);margin:0 0 18px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* Works on both <button class="btn"> and <a class="btn"> (the intro page uses links). */
.btn{
  background:var(--accent);color:#fff;border:0;border-radius:9px;padding:10px 18px;
  font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.3
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--panel2);color:var(--ink);border:1px solid var(--line)}
.btn.sm{padding:7px 13px;font-size:13px}
.btn:disabled{opacity:.4;cursor:default}

.pill{display:inline-block;background:var(--panel2);border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:11.5px;color:var(--dim)}
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pill.good{color:var(--good);border-color:var(--good)}
.pill.warn{color:var(--warn);border-color:var(--warn)}

/* ---- stat tiles ---- */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.tile .n{font-size:26px;font-weight:680;letter-spacing:-.5px;line-height:1.1}
.tile .l{font-size:12px;color:var(--dim);margin-top:3px}

.bar{height:7px;background:var(--panel2);border-radius:99px;overflow:hidden;margin-top:8px}
.bar>i{display:block;height:100%;background:var(--good);border-radius:99px}

/* ---- kana grid ---- */
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}
.kcell{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:9px 4px;text-align:center;cursor:pointer
}
.kcell:hover{border-color:var(--accent)}
.kcell .c{font:400 25px/1.1 var(--jp)}
.kcell .r{font-size:11px;color:var(--dim);margin-top:3px}
.kcell.known{border-color:var(--good)}
.kcell.empty{visibility:hidden}

/* ---- flashcard ---- */
.fc{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:38px 24px;text-align:center;min-height:230px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px
}
.fc .big{font:400 62px/1.15 var(--jp);letter-spacing:2px}
.fc .mid{font:400 30px/1.2 var(--jp);color:var(--ink)}
.fc .read{font:400 20px/1.3 var(--jp);color:var(--accent2)}
.fc .mean{font-size:17px;color:var(--dim)}
.fc .hint{font-size:12px;color:var(--dim)}
.fc input{
  font:400 22px var(--jp);text-align:center;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:9px 14px;width:220px;outline:none
}
.fc input:focus{border-color:var(--accent)}
.fc.right{border-color:var(--good)}
.fc.wrong{border-color:var(--bad)}

.gradebar{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.gradebar button{flex:1;min-width:92px;max-width:150px}
.gr0{background:var(--bad)!important}
.gr1{background:var(--warn)!important}
.gr2{background:var(--accent2)!important}
.gr3{background:var(--good)!important}

/* ---- lists ---- */
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
table.tbl th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);
  padding:8px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg)
}
table.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.tbl tr:hover td{background:var(--panel)}
.jp{font-family:var(--jp)}
.jpbig{font:400 22px var(--jp)}
.tbl .rd{color:var(--accent2);font-family:var(--jp);font-size:13px}

.srchrow{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.srchrow input,.srchrow select{
  background:var(--panel);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:8px 11px;font-size:13.5px;outline:none
}
.srchrow input{flex:1;min-width:170px}
.srchrow input:focus{border-color:var(--accent)}

/* ---- grammar ---- */
.gitem{background:var(--panel);border:1px solid var(--line);border-radius:11px;margin-bottom:9px;overflow:hidden}
.gitem>summary{padding:12px 15px;cursor:pointer;list-style:none;display:flex;gap:10px;align-items:baseline}
.gitem>summary::-webkit-details-marker{display:none}
.gitem summary .pat{font:600 16px var(--jp)}
.gitem summary .en{color:var(--dim);font-size:13px;flex:1}
.gitem .body{padding:0 15px 14px;border-top:1px solid var(--line);padding-top:12px}
.ex{background:var(--panel2);border-radius:8px;padding:9px 12px;margin-top:8px}
.ex .j{font:400 17px var(--jp)}
.ex .r{font:400 12.5px var(--jp);color:var(--accent2);margin-top:2px}
.ex .e{font-size:13px;color:var(--dim);margin-top:2px}

/* ---- plan ---- */
.wk{display:flex;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:9px}
.wk.now{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.wk.past{opacity:.55}
.wk .num{font-size:11px;color:var(--dim);width:78px;flex:none;padding-top:2px}
.wk .num b{display:block;font-size:16px;color:var(--ink)}
.wk .ttl{font-weight:600;margin-bottom:3px}
.wk .det{font-size:13px;color:var(--dim)}
.wk .goals{font-size:12.5px;color:var(--dim);margin-top:6px}
.wk .goals code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-family:var(--jp)}

.note{border-left:3px solid var(--warn);background:var(--panel);padding:11px 14px;border-radius:0 9px 9px 0;margin-bottom:14px;font-size:13.5px}
.note b{color:var(--warn)}

.empty{text-align:center;color:var(--dim);padding:46px 20px}
.empty .big{font-size:40px;margin-bottom:10px}

kbd{background:var(--panel2);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-size:11px;font-family:inherit;color:var(--dim)}

@media (max-width:640px){
  main{padding:16px 13px 30px}
  .fc .big{font-size:48px}
  .wk{flex-direction:column;gap:6px}
  .wk .num{width:auto}
}

/* ============================================================ */
/* Today — day header, trackers, stages, lesson cards, zoom      */
/* ============================================================ */

.dayhead{
  display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:0 12px 12px 0;padding:16px 18px;margin-bottom:6px;
}
.dh-kicker{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:650}
.dayhead h2{margin:6px 0 4px}
.dh-sub{font-size:13.5px;color:var(--dim);max-width:62ch}
.dh-date{text-align:right;flex:none}
.dh-date b{display:block;font-size:17px}
.dh-date span{font-size:11.5px;color:var(--dim)}

.tile.trk .n small{font-size:15px;font-weight:500;color:var(--dim);letter-spacing:0}
.tile.trk .bar{position:relative}
.tile.trk .bar>u{
  position:absolute;left:0;top:0;height:100%;background:var(--accent2);
  border-radius:99px;text-decoration:none;
}
.trk-note{font-size:11.5px;color:var(--dim);margin-top:6px}

/* ---- stage cards on the overview ---- */
.stagegrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.scard2{
  text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;cursor:pointer;color:var(--ink);font:inherit;display:flex;
  flex-direction:column;gap:3px;transition:border-color .15s,transform .12s;
}
.scard2:hover{border-color:var(--accent);transform:translateY(-1px)}
.sc2-top{display:flex;justify-content:space-between;align-items:center;min-height:30px}
.sc2-n{font-size:26px;font-weight:680;letter-spacing:-.5px;line-height:1}
.sc2-tick{color:var(--good);font-size:17px}
.scard2 b{font-size:14.5px}
.sc2-v{font-size:12px;color:var(--dim);line-height:1.45}
.scard2.done{opacity:.72}
.scard2.done .sc2-n{color:var(--good)}

/* ---- stage navigation bar ---- */
.stagebar{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);padding-bottom:12px;
}
.sb-back{
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:8px;
  padding:6px 12px;font-size:12.5px;cursor:pointer;font-family:inherit;flex:none;
}
.sb-back:hover{border-color:var(--accent)}
.sb-steps{display:flex;gap:3px;flex-wrap:wrap;flex:1}
.sb-step{
  background:none;border:0;border-radius:8px;color:var(--dim);padding:6px 12px;
  font-size:12.5px;font-weight:550;cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:6px;
}
.sb-step:hover{color:var(--ink);background:var(--panel2)}
.sb-step.on{background:var(--accent);color:#fff}
.sb-step i{
  font-style:normal;font-size:10.5px;background:rgba(255,255,255,.18);
  border-radius:99px;padding:1px 6px;
}
.sb-step:not(.on) i{background:var(--panel2);color:var(--dim);border:1px solid var(--line)}

.stagecard h2{margin-bottom:6px}

/* ---- goals ---- */
.goal{
  display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);padding:11px 2px;cursor:pointer;
  color:var(--ink);font:inherit;font-size:14px;
}
.goal:last-child{border-bottom:0}
.goal:hover span{color:var(--accent)}
.goal i{
  flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);
  display:grid;place-items:center;font-style:normal;font-size:11px;color:#fff;margin-top:1px;
}
.goal.done i{background:var(--good);border-color:var(--good)}
.goal.done span{color:var(--dim);text-decoration:line-through}
.wgoal{display:flex;align-items:flex-start;gap:11px;padding:7px 2px;font-size:13.5px;color:var(--dim)}
.wgoal i{flex:none;width:5px;height:5px;border-radius:99px;background:var(--accent);margin-top:8px}
.wgoal-note{
  font-size:12.5px;color:var(--dim);border-top:1px solid var(--line);
  margin-top:9px;padding-top:9px;font-style:italic;
}

/* ---- teaching card ---- */
.teach{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:30px 24px;text-align:center;
}
.t-big{font:400 92px/1.05 var(--jp);cursor:zoom-in;display:inline-block;padding:0 10px}
.t-big:hover{color:var(--accent)}
.t-mid{font:400 40px/1.2 var(--jp);margin-bottom:4px}
.t-read{font:400 21px/1.3 var(--jp);color:var(--accent2);margin-top:6px}
.t-mean{font-size:18px;margin-top:6px}
.t-meta{font-size:12px;color:var(--dim);margin-top:6px;text-transform:uppercase;letter-spacing:.6px}
.t-say{font-size:13.5px;color:var(--dim);margin:16px auto 0;max-width:46ch}
.t-say b{color:var(--accent2)}
.t-forms{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px;
  border-top:1px solid var(--line);padding-top:14px;
}
.t-forms span{
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 13px;
  font:400 17px var(--jp);
}
.t-forms i{
  display:block;font:400 10.5px -apple-system,sans-serif;color:var(--dim);
  font-style:normal;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;
}
.t-ex{margin-top:16px;text-align:left}
.t-note{
  background:var(--panel2);border-radius:10px;padding:12px 15px;margin-top:16px;
  font-size:13px;color:var(--dim);line-height:1.6;text-align:left;
}
/* Only the note's own heading is a block; bold inside the body stays inline. */
.t-note>b{display:block;color:var(--ink);margin-bottom:4px}
.t-note div b{color:var(--ink)}
.t-warn{
  border:1px solid var(--warn);border-radius:10px;padding:11px 15px;margin-top:16px;
  font-size:12.5px;color:var(--dim);
}
.t-warn b{display:block;color:var(--warn);text-transform:uppercase;letter-spacing:.6px;
  font-size:11px;margin-bottom:6px}
.t-warn .jp{font-size:26px;color:var(--ink)}

/* ---- zoom modal ---- */
.zoom{
  position:fixed;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;z-index:100;
}
/* An author `display` beats the hidden attribute's UA rule, so a persistent
   dialog toggled with `hidden` would stay on screen. This is what makes
   element.hidden actually work. */
.zoom[hidden]{display:none}
.zoom-panel{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:28px 26px 22px;max-width:440px;width:100%;text-align:center;position:relative;
  max-height:88vh;overflow-y:auto;
}
.zoom-x{
  position:absolute;top:10px;right:12px;background:none;border:0;color:var(--dim);
  font-size:26px;line-height:1;cursor:pointer;padding:4px 8px;
}
.zoom-x:hover{color:var(--ink)}
.z-char{font:400 132px/1 var(--jp);margin:4px 0 10px}
.z-read{font:400 24px var(--jp);color:var(--accent2)}
.z-mean{font-size:19px;font-weight:600;margin-bottom:8px}
.z-meta{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.7px;margin-top:8px}
.z-pair,.z-readings{
  display:flex;gap:10px;justify-content:center;margin-top:16px;
  border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap;
}
.z-pair>div,.z-readings>div{
  background:var(--panel2);border-radius:9px;padding:8px 16px;min-width:88px;
}
.z-pair span,.z-readings span{
  display:block;font-size:10.5px;color:var(--dim);text-transform:uppercase;letter-spacing:.6px;
}
.z-pair b{font:400 30px var(--jp)}
.z-readings b{font:400 15px var(--jp)}
.z-conf{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.z-conf>span{
  display:block;font-size:10.5px;color:var(--warn);text-transform:uppercase;
  letter-spacing:.7px;margin-bottom:9px;
}
.z-conf>div{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.z-chip{
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 14px;
  cursor:pointer;color:var(--ink);font:inherit;
}
.z-chip:hover{border-color:var(--warn)}
.z-chip b{display:block;font:400 28px var(--jp)}
.z-chip i{font-style:normal;font-size:11px;color:var(--dim)}
.z-ex{margin-top:16px;text-align:left}
.z-actions{
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;
  margin-top:18px;border-top:1px solid var(--line);padding-top:14px;
}

@media (max-width:640px){
  .dayhead{flex-direction:column;gap:10px}
  .dh-date{text-align:left}
  .t-big{font-size:70px}
  .t-mid{font-size:32px}
  .z-char{font-size:96px}
  /* Stack the bar and let the steps scroll sideways rather than wrap. */
  .stagebar{flex-direction:column;align-items:stretch;gap:10px}
  .sb-back{align-self:flex-start}
  .sb-steps{width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .sb-steps::-webkit-scrollbar{display:none}
  .sb-step{white-space:nowrap}
}

/* ---- speech buttons ---- */
.say{
  background:var(--panel2);border:1px solid var(--line);border-radius:99px;
  padding:4px 10px;font-size:13px;cursor:pointer;color:var(--accent2);line-height:1;
  vertical-align:middle;margin-left:6px;display:inline-flex;align-items:center;gap:5px;
}
.say:hover{border-color:var(--accent2);background:var(--accent2);color:#fff}
.say:hover span{color:#fff}
.say svg{display:block}
.say[data-novoice]{opacity:.4;cursor:not-allowed}
.say span{font-size:11px;margin-left:4px;color:var(--dim)}
.ex .j .say{font-size:11px;padding:2px 7px}

/* ---- teaching card extras ---- */
.t-sound{
  font-size:13.5px;color:var(--dim);margin:12px auto 0;max-width:48ch;
  background:var(--panel2);border-radius:9px;padding:9px 14px;
}
.t-sound b{color:var(--accent2)}
.t-conf{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.t-chip{
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:6px 13px;
  cursor:pointer;color:var(--ink);font:inherit;
}
.t-chip:hover{border-color:var(--warn)}
.t-chip b{display:block;font:400 26px var(--jp)}
.t-chip i{font-style:normal;font-size:11px;color:var(--dim)}
.t-conf-hint{display:block;font-size:11px;color:var(--dim);margin-top:9px;text-transform:none;letter-spacing:0}

.keyhint{text-align:center;font-size:11.5px;color:var(--dim);margin-top:12px}
.keyhint kbd{margin:0 2px}

/* ---- resume bar on the Learn intro ---- */
.resumebar{display:flex;align-items:center;gap:12px;margin-top:12px}
.resumebar .bar{flex:1;margin-top:0}
.resumebar span{font-size:12px;color:var(--dim);white-space:nowrap}

/* ---- home button in the stage bar ---- */
.sb-home{
  flex:none;width:30px;height:30px;border-radius:8px;background:var(--panel2);
  border:1px solid var(--line);color:var(--ink);display:grid;place-items:center;
  text-decoration:none;font-size:16px;line-height:1;
}
.sb-home:hover{border-color:var(--accent);color:var(--accent)}

/* ---- look-something-up banner ---- */
.retbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--accent2);border-radius:11px;
  padding:10px 14px;margin-bottom:16px;
}
.retbar span{font-size:12.5px;color:var(--dim)}

/* ---- confirm dialog ---- */
.zoom-panel.confirm{max-width:400px;text-align:center}
.zoom-panel.confirm b{color:var(--ink)}

/* ---- language picker ---- */
.langpick{
  background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:4px 8px;font-size:12px;font-family:inherit;cursor:pointer;
}
.langpick:hover{border-color:var(--accent)}
/* Script-aware typography. I18N sets these on <html> from the active locale;
   Devanagari needs more leading than Latin. */
body{line-height:var(--lh-body,1.55)}
:root[lang="hi"] .lede,:root[lang="hi"] p,:root[lang="hi"] .l,:root[lang="hi"] .sc2-v{
  line-height:var(--lh-body,1.85);
}

/* ---- header controls: language and account ---- */
.headctl{margin-left:auto;display:flex;align-items:center;gap:9px;flex:none}
#acctBtn{white-space:nowrap}
#acctBtn.in{border-color:var(--good);color:var(--good)}

/* ---- account panel ---- */
.acct{max-width:380px;text-align:left}
.acct h3{margin:0 0 4px;color:var(--ink);text-transform:none;letter-spacing:0;font-size:18px}
.acct p{font-size:13px;color:var(--dim);margin:0 0 16px;line-height:1.6}
.acct label{display:block;font-size:12px;color:var(--dim);margin:0 0 4px}
.acct input{
  width:100%;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
  border-radius:8px;padding:9px 11px;font-size:14px;margin-bottom:12px;font-family:inherit;
}
.acct input:focus{outline:none;border-color:var(--accent)}
.acct .err{color:var(--bad);font-size:12.5px;margin:0 0 12px;min-height:16px}
.acct .switch{background:none;border:0;color:var(--accent2);font-size:12.5px;cursor:pointer;padding:6px 0}
.acct .who{font:600 14px var(--jp);color:var(--ink);word-break:break-all}
.syncrow{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim);
  border-top:1px solid var(--line);margin-top:14px;padding-top:12px;flex-wrap:wrap;
}
.syncdot{width:7px;height:7px;border-radius:99px;background:var(--dim);flex:none}
.syncdot.ok{background:var(--good)} .syncdot.off{background:var(--warn)}
@media(max-width:640px){
  .headctl{width:100%;margin:8px 0 0;order:3}
  .brand{flex-wrap:wrap}
}

/* The verdict on a typed answer. Border colour used to be the only signal,
   which is invisible at a glance and unavailable to anyone who cannot
   distinguish the two hues — so the wording carries the meaning and the
   colour only reinforces it. */
.verdict{margin-top:12px;font-size:15px;line-height:1.4}
.verdict.ok{color:var(--good);font-weight:600}
.verdict.no{color:var(--bad)}

/* The interval preview on grade buttons: the consequence of the choice,
   visible at the moment of choosing. */
.gradebar .ivl{display:block;font-size:11px;font-weight:400;opacity:.85;margin-top:1px}

/* Keyboard hints assume a keyboard. On touch devices the digits read as part
   of the label — "Again 1" looks like a difficulty score — so they only render
   where hovering (i.e. a pointer) exists. */
@media (hover: none) and (pointer: coarse){ kbd{display:none} }