:root{
  --paper:#fdfcf8;
  --surface:#fff;
  --surface-thin:#ffffffd9;
  --paper2:#f6f4ee;
  --ink:#33333d;
  --ink-soft:#6a6a78;
  --line:#e6e2d8;
  --dot:#d8d3c6;
  --blue:#6ba7de;
  --blue-bg:#dcecfa;
  --green-bg:#dbf0e4;
  --red-bg:#fadedd;
  --accent:#2ea7e0;
  --hand:'Caveat', cursive;
  --hand2:'Kalam', cursive;
  --ui:'Inter', system-ui, sans-serif;
}

/* ------------------------------------------------------------------ board
   A green-black board written on in chalk, for reading at night. Asked for
   2026-09-22.

   Only the SURFACES move: every colour below is a variable the light theme
   already used, so nothing here duplicates a rule. What CANNOT live here is
   the chalk itself -- rough.js bakes each stroke's colour into an SVG
   attribute as it draws, so the stroke colours are switched in
   js/render/palette.js and the two must be changed together.

   The watercolour illustrations are painted on transparent PNG and are left
   exactly as they are: they are objects on the board, not ink, and a filter
   that "fixed" them for the dark surface would wash the paint out. */
:root[data-board="dark"]{
  --paper:#1e2a24;
  --paper2:#243029;
  --surface:#26332c;
  --surface-thin:#26332ce6;
  --ink:#eef1e9;
  --ink-soft:#a9b6ac;
  --line:#3a4a40;
  --dot:#3f5246;
  --blue:#8fd0ff;
  --blue-bg:#1f3a4d;
  --green-bg:#1f4033;
  --red-bg:#4a2b2b;
  --accent:#4cc2f0;
}
/* The page glow is two light-paper washes; on a board they read as smears. */
:root[data-board="dark"] body{
  background:
    radial-gradient(1200px 600px at 15% -10%, #24382f 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #2a3340 0%, transparent 55%),
    var(--paper);
}
/* KaTeX is NOT given a colour here. It inherits one, and a blanket
   `.katex{color:var(--ink)}` overrode the working's blue inside a `steps`
   item -- every line of a worked solution came out the same chalk white and
   the colour that says "this is the working, that is the answer" was gone. */
:root[data-board="dark"] .mk-box{background:#1f3a4d}
:root[data-board="dark"] .step-row.step-pulse{animation-name:step-pulse-dark}
:root[data-board="dark"] .mk-ring,:root[data-board="dark"] .mk-strike{border-color:#ff9f9f;text-decoration-color:#ff9f9f}
@keyframes step-pulse-dark{0%{background:transparent}30%{background:#3d3524}100%{background:transparent}}
:root[data-board="dark"] .mk-note{background:#3d3524;box-shadow:0 0 0 1px #5a4a22}
:root[data-board="dark"] ::-webkit-scrollbar-thumb{background:#3f5246}
/* Light washes used as backgrounds behind dark text: on a board they are the
   text that disappears. Found by screenshotting the lesson, not by reading the
   file -- the tray's hover colour is only on screen while a finger is on it. */
:root[data-board="dark"] .tray-opts button:hover,
:root[data-board="dark"] .ready-list button:hover{background:#2e4a5c}
:root[data-board="dark"] .state-pill{background:#1f3a4d}
:root[data-board="dark"] .state-pill[data-s="listening"]{color:#ff9f9f;background:#4a2b2b}
:root[data-board="dark"] .state-pill[data-s="interrupted"]{color:#f0dca6;background:#3d3524}
:root[data-board="dark"] .state-pill[data-s="answering"]{color:#c9b6ff;background:#332a4a}
:root[data-board="dark"] .board-scroll::-webkit-scrollbar-thumb{background:#3f5246}
/* Worked maths. The answer sits in a box a teacher would draw round it; on
   paper that box is cream with dark ink, and unchanged it made the answer --
   the one line that matters most -- invisible chalk on cream. The working's
   blue is a darker blue than the chalk one, for the same reason. */
:root[data-board="dark"] .step-row[data-role="work"] .step-tex{color:#8fd0ff}
:root[data-board="dark"] .step-row[data-role="answer"] .step-tex{
  background:#3d3524;box-shadow:0 0 0 1px #6b5a2e;
}

*{box-sizing:border-box}
/* Announced to a screen reader, invisible to everyone else. */
.sr-only{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;border:0!important;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
/* Author display rules below beat the UA sheet, so hidden needs teeth. */
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 15% -10%, #eef6fd 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #fdeef6 0%, transparent 55%),
    var(--paper);
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}

/* =============================== START =============================== */
/* .start scrolls itself (overflow-y below), and the sticky .sn header sits
   inside it -- scrollIntoView() (a topic card centring the composer,
   js/app.js) has no idea the header eats real estate at the top, so a
   paragraph could land half-hidden under it (user, 2026-09-26: cut-off text
   right under the header after tapping a topic on mobile). scroll-padding-top
   is exactly what a sticky-header layout needs this for; 130px clears the
   heading too, not just the paragraph below it (73px header + margin). */
.start{height:100%;display:flex;flex-direction:column;overflow-y:auto;scroll-padding-top:130px}
.brand{display:inline-flex;align-items:center;gap:0;font-weight:700;font-size:20px;letter-spacing:-.02em;color:#7a5cf0;text-decoration:none}
.brand .logo{width:32px;height:32px;border-radius:9px;display:block;margin-right:9px;box-shadow:0 4px 12px rgba(15,23,42,.25)}
.brand span{color:var(--accent)}
.stage-tag{font-size:12px;color:var(--ink-soft);border:1px solid var(--line);padding:4px 10px;border-radius:20px;background:var(--surface)}

.start-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 24px;gap:20px}
.start-mid h1{font-size:30px;font-weight:500;margin:0;letter-spacing:-.02em}
.start-mid h1 b{font-weight:700}

.tabs{display:flex;gap:10px}
.tab{
  border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  padding:9px 20px;border-radius:12px;font-size:14px;
}
.tab.is-on{color:#7a5cf0;border-color:#d9cffb;box-shadow:0 1px 4px rgba(122,92,240,.12)}

.composer{
  width:min(560px,92vw);background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:16px;box-shadow:0 8px 30px rgba(60,60,90,.07);
}
#topicInput{width:100%;border:0;outline:0;font-size:16px;padding:6px 4px 14px;color:var(--ink);background:transparent}
.name{
  width:100%;border:0;outline:0;font-size:13px;padding:2px 4px 10px;
  color:var(--ink-soft);background:transparent;border-bottom:1px solid var(--line);margin-bottom:8px;
}
.icon.zoomval{width:auto;min-width:46px;padding:0 8px;font-size:11px;font-variant-numeric:tabular-nums;color:var(--ink-soft)}
.composer-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.chips{display:flex;gap:8px;margin-right:auto}
.langs{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:none}
.langs button{border:0;background:var(--surface);padding:8px 12px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.langs button + button{border-left:1px solid var(--line)}
.langs button.on{background:var(--accent);color:#fff}
.ready-list button.nolang{opacity:.45}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 14px;font-size:13px;color:var(--ink-soft)}

.primary{
  border:0;background:var(--accent);color:#fff;font-weight:600;
  padding:11px 26px;border-radius:12px;font-size:14px;
  box-shadow:0 4px 14px rgba(46,167,224,.32);
}
.primary:hover{filter:brightness(1.05)}
.primary.sm{padding:9px 18px}

.note{max-width:560px;text-align:center;color:var(--ink-soft);font-size:13px;line-height:1.6;margin:0}
.ready{max-width:640px;width:100%;margin:4px auto 0;text-align:center}
.ready-head{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.ready-list{display:grid;gap:14px}
.ready-group{display:grid;gap:8px}
.ready-sub{font-size:12px;font-weight:600;color:var(--ink-soft);letter-spacing:.02em}
.ready-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ready-list button{
  border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:7px 14px;font-size:13px;color:var(--ink);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.ready-list button:hover{border-color:var(--accent);background:#eaf6fd}
.ready-list button.on{border-color:var(--accent);background:var(--accent);color:#fff}
.ready-list button .cls{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:600;
  color:var(--ink-soft);background:var(--paper2);border-radius:999px;padding:1px 7px;vertical-align:1px}
.ready-list button.on .cls{background:#ffffff33;color:#fff}

.note.warn{
  color:#8a6524;background:#fdf3e2;border:1px solid #f0dcb4;
  border-radius:12px;padding:11px 16px;
}

.start-foot{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  padding:28px 8vw 40px;border-top:1px solid var(--line);
}
.start-foot div{text-align:center}
.start-foot b{display:block;font-size:15px;margin-bottom:6px}
.start-foot span{font-size:13px;color:var(--ink-soft);line-height:1.55}

/* =============================== LESSON =============================== */
.lesson{height:100%;display:flex;flex-direction:column;position:relative}

.hud{
  position:absolute;inset:0 0 auto 0;z-index:6;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 16px;pointer-events:none;
  background:#ffffffec;backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.hud-left,.hud-right{display:flex;align-items:center;gap:10px;pointer-events:auto}
.icon{
  width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface-thin);backdrop-filter:blur(6px);color:var(--ink);font-size:15px;
  display:grid;place-items:center;
}
.hud-brand{display:flex;align-items:center;gap:7px;font-weight:900;font-size:15px;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.hud-brand img{display:block;border-radius:6px}
.hud-brand b{color:var(--accent);font-weight:900}
.hud-div{width:1px;height:22px;background:var(--line);flex:none}
/* Class › Subject › Lesson (user, 2026-09-26). The segments before the last
   are landmarks (which class, which subject), so they stay quieter than the
   lesson's own name. */
.hud-title{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-soft);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw}
.hud-title:empty{display:none}
.hud-title span{overflow:hidden;text-overflow:ellipsis}
.hud-crumb-sep{color:var(--ink-faint);flex:none}
.hud-crumb-last{color:var(--ink);font-weight:700;font-size:14px}
.hud-end{
  display:flex;align-items:center;gap:7px;border:0;border-radius:11px;
  background:linear-gradient(135deg,var(--accent),#4fc2ff);color:#fff;font-weight:600;font-size:13.5px;
  padding:9px 15px;box-shadow:0 6px 16px rgba(46,167,224,.35);white-space:nowrap;
}
.hud-end:hover{filter:brightness(1.05)}
.timer{
  font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-soft);
  background:var(--surface-thin);border:1px solid var(--line);border-radius:20px;padding:6px 12px;
}
.state-pill{
  font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);background:#eaf6fd;border-radius:20px;padding:5px 11px;
}
.state-pill[data-s="listening"]{color:#d9534f;background:#fdeceb}
.state-pill[data-s="interrupted"]{color:#c07d1a;background:#fdf3e2}
/* The doubt is off being answered -- a real network wait, not a frozen UI. */
.state-pill[data-s="answering"]{color:#7a5cf0;background:#efe9fd;animation:pill-think 1.3s ease-in-out infinite}
@keyframes pill-think{0%,100%{opacity:.65}50%{opacity:1}}
.progress{
  font-size:12.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums;
  background:var(--paper2);border:1px solid var(--line);border-radius:999px;padding:6px 13px;
}
.progress:empty{display:none}

.board-scroll{
  flex:1;overflow:auto;scroll-behavior:smooth;cursor:grab;
  background-image:radial-gradient(var(--dot) 1.15px, transparent 1.15px);
  background-size:22px 22px;
  background-position:-1px -1px;
}
.board-scroll.grabbing{cursor:grabbing;scroll-behavior:auto;user-select:none}
.board-scroll::-webkit-scrollbar{width:9px;height:9px}
.board-scroll::-webkit-scrollbar-thumb{background:#dcd8ce;border-radius:9px}
.board-scroll::-webkit-scrollbar-track{background:transparent}
/* Two independent columns; board.js nudges each new item down so it never
   starts above the item written before it. Keeps reading order without
   forcing both columns into shared rows. */
.board{
  display:grid;grid-template-columns:1fr 1fr;gap:0 46px;
  /* Fixed width, no max-width: zooming must overflow so the canvas can pan. */
  width:1180px;margin:0 auto;padding:78px 40px 280px;
  align-items:start;
  /* `zoom` (not transform) so the scroll area grows with it and panning works */
  zoom:var(--zoom,1);
}
.col{display:flex;flex-direction:column;min-width:0}

/* ------- board items ------- */
/* html2canvas drops the fi/fl ligatures when rasterising for the PDF, turning
   "fine" into "fne". Nothing here needs them. */
.bi{max-width:100%;min-width:0;margin-bottom:20px;font-variant-ligatures:none}
.bi .ch{opacity:0;transition:opacity .12s}
.bi .ch.on{opacity:1}
/* The tutor's pencil. Fixed-position so nib coords map straight to client px. */
.pen{
  position:fixed;top:0;left:0;z-index:20;pointer-events:none;
  opacity:0;transition:opacity .18s;
  filter:drop-shadow(0 2px 3px rgba(60,60,90,.22));
  will-change:transform;
}
.pen.on{opacity:1}
.pen svg{display:block;transform:rotate(4deg)}

/* "Working on it" shimmer, shown just before a diagram is drawn. */
.bi.prep{position:relative;min-height:120px}
.bi.prep .dgm{opacity:0}
.bi.prep::after{
  content:'';position:absolute;inset:8% 18%;border-radius:16px;
  background:
    radial-gradient(circle at 20% 30%, #9fd1f5 0 2px, transparent 3px),
    radial-gradient(circle at 62% 18%, #f7b6c9 0 2px, transparent 3px),
    radial-gradient(circle at 44% 62%, #b7e3c6 0 2px, transparent 3px),
    radial-gradient(circle at 78% 70%, #cdbdf2 0 2px, transparent 3px),
    radial-gradient(circle at 32% 84%, #f8d9a0 0 2px, transparent 3px),
    radial-gradient(circle at 88% 40%, #9fd1f5 0 2px, transparent 3px);
  background-size:56px 56px;
  animation:shimmer 1.1s ease-in-out infinite;
}
@keyframes shimmer{
  0%,100%{opacity:.35;transform:scale(.97)}
  50%{opacity:.9;transform:scale(1.03)}
}

.bi-heading{font-family:var(--hand);font-size:34px;font-weight:700;line-height:1.15;letter-spacing:.01em}
.bi-note{font-family:var(--hand2);font-size:17px;line-height:1.75;white-space:pre-wrap}
.bi-note b{font-weight:700}

.bi-highlight{
  font-family:var(--hand2);font-size:17px;line-height:1.7;
  background:var(--blue-bg);border-radius:14px;padding:12px 16px;
  align-self:flex-start;white-space:pre-wrap;
}
.bi-highlight[data-color="green"]{background:var(--green-bg)}
.bi-highlight[data-color="red"]{background:var(--red-bg)}

.bi-katex{padding:4px 0;font-size:15px}
.bi-katex .katex-display{margin:0;text-align:left}

.bi-side{
  border-left:3px solid #e6c98a;padding-left:14px;
  background:linear-gradient(90deg,#fdf7e8,transparent 70%);
  border-radius:0 12px 12px 0;
}
.bi-side::before{
  content:'you asked';display:block;font-family:var(--ui);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:#b58b3a;margin-bottom:5px;
}

.bi.reveal{animation:pop .5s ease both}
/* "Look at this one again": the board points back at a diagram it already drew. */
.bi.flash{animation:flash 1.4s ease both;border-radius:14px}
@keyframes flash{0%{box-shadow:0 0 0 0 rgba(107,167,222,0)}25%{box-shadow:0 0 0 6px rgba(107,167,222,.35)}100%{box-shadow:0 0 0 0 rgba(107,167,222,0)}}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
/* Same entrance for anything centred with translateX(-50%). Plain `pop` ends on
   `transform:none`, which with fill-mode both wipes that centring out and leaves
   the element sitting half a width to the right. */
@keyframes pop-centred{
  from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.985)}
  to{opacity:1;transform:translateX(-50%)}
}

.dgm{margin:0}
/* Clipped to its own box: a model that places an arrow off the canvas should
   lose the tail of that arrow, not draw it across the student's notes. */
.dgm svg{display:block;width:100%;height:auto;overflow:hidden}
.dgm figcaption{
  font-family:var(--ui);font-size:11px;color:var(--ink-soft);
  text-align:center;margin-top:6px;letter-spacing:.02em;
}
.dgm svg path,.dgm svg line,.dgm svg polyline{stroke-linecap:round}

/* ------- pen marks ------- */
/* A highlighter swipe: uneven ends, sitting behind the words like real ink. */
mark.swipe{
  background:linear-gradient(101deg,
    rgba(250,222,120,0) 0%, rgba(250,222,120,.85) 2.5%,
    rgba(250,222,120,.85) 97%, rgba(250,222,120,0) 100%);
  color:inherit;padding:1px 3px;border-radius:3px 8px 6px 4px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.bi-highlight mark.swipe{background:none;padding:0}

.circled{position:relative;white-space:nowrap}
svg.ring{position:absolute;pointer-events:none;overflow:visible;animation:pop .45s ease both}

/* ------- comparison table ------- */
.bi-table{
  border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--surface);
  box-shadow:0 5px 18px rgba(60,60,90,.06);align-self:flex-start;max-width:100%;
}
table.bt{border-collapse:collapse;width:100%;font-family:var(--hand2);font-size:15px}
table.bt th{
  text-align:left;font-weight:700;padding:6px 12px 8px 2px;
  border-bottom:1.5px solid var(--ink);white-space:nowrap;
}
table.bt td{padding:8px 12px 8px 2px;border-bottom:1px solid var(--line);vertical-align:top}
table.bt tr:last-child td{border-bottom:0}
table.bt td.filled{font-weight:700;animation:pop .4s ease both}
table.bt td.filled[data-color="green"]{color:#3f9e6d}
table.bt td.filled[data-color="red"]{color:#d9534f}
table.bt td.filled[data-color="blue"]{color:var(--accent)}

/* ------- end-of-chapter cards ------- */
.bi-scorecard,.bi-homework{
  border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:var(--surface);
  box-shadow:0 6px 22px rgba(60,60,90,.07);align-self:flex-start;max-width:460px;
}
.card-head{font-family:var(--hand2);font-size:18px;font-weight:700;margin-bottom:8px}
.card-foot{font-size:11px;color:var(--ink-soft);margin-top:10px}
.score{font-size:15px;color:var(--ink-soft);margin-bottom:10px}
.score b{font-size:30px;color:var(--accent);font-family:var(--hand);line-height:1}
.score span{font-size:12px}
.score-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.score-rows li{font-family:var(--hand2);font-size:14.5px;line-height:1.45;display:flex;gap:9px}
.score-rows .mk{font-weight:700;flex:0 0 auto}
.score-rows .ok .mk{color:#3f9e6d}
.score-rows .no .mk{color:#d9534f}
.hw-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.hw-list li{font-family:var(--hand2);font-size:15px;line-height:1.55}

/* An answer key: blurred until the student has tried the question themselves.
   The PDF export removes .hw-hidden just for the photograph (export-pdf.js). */
.hw-hidden .hw-list{filter:blur(7px);user-select:none;pointer-events:none}
.hw-reveal{display:none}
.hw-hidden .hw-reveal{
  display:block;margin:2px 0 10px;padding:7px 14px;font-size:13px;
  border:1px solid var(--accent);border-radius:8px;background:transparent;color:var(--accent);
}
.hw-hidden .hw-reveal:hover{background:var(--accent);color:#fff}

.bi-image img{width:100%;height:auto;border-radius:12px;display:block}
.bi-image .cap{font-size:11px;color:var(--ink-soft);text-align:center;margin-top:6px}

/* ------- worked steps (maths) ------- */
.bi-steps .steps{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.step-row{
  /* Equation, then its reason a fixed gap away -- the reason belongs to the
     line beside it, so it must not drift to the far edge of a wide column. */
  display:grid;grid-template-columns:minmax(0,max-content) 1fr;
  align-items:baseline;gap:20px;
  transition:opacity .28s ease, transform .28s ease;
}
.step-row.step-hidden{opacity:0;transform:translateY(6px)}
.step-tex{font-size:18px;min-width:0}
/* The problem as it was given, the working, and the answer read differently --
   the same three-colour habit a teacher has on a real board. */
.step-row[data-role="given"] .step-tex{color:var(--ink)}
.step-row[data-role="work"]  .step-tex{color:#2f6fa8}
.step-row[data-role="answer"] .step-tex{
  color:var(--ink);background:#fdf3e2;border-radius:8px;
  padding:2px 10px;box-shadow:0 0 0 1px #f0dcb4;
}
.step-why{font-family:var(--hand2);font-size:13px;color:var(--ink-soft);line-height:1.45}
.bi-steps .card-head{margin-bottom:8px}

/* Marks drawn ON something already written, like a teacher circling a term. */
.mk-ring{
  display:inline-block;padding:1px 7px;margin:0 -3px;
  border:2px solid #e8464a;border-radius:50%;
}
.mk-box{background:#dcecfa;border-radius:6px;padding:1px 5px;margin:0 -2px}
.mk-note{background:#fdf3e2;border-radius:6px;padding:1px 5px;margin:0 -2px;box-shadow:0 0 0 1px #f0dcb4}
.mk-strike{text-decoration:line-through;text-decoration-color:#e8464a;text-decoration-thickness:2px}
@keyframes step-pulse{0%{background:transparent}30%{background:#fff6d6}100%{background:transparent}}
.step-row.step-pulse{animation:step-pulse 1.2s ease both;border-radius:8px}

/* ------- follow me ------- */
.follow{
  position:absolute;left:50%;transform:translateX(-50%);bottom:190px;z-index:7;
  border:1px solid #e5d9fb;background:var(--surface);color:#7a5cf0;
  padding:8px 18px;border-radius:22px;font-size:13px;font-weight:500;
  box-shadow:0 6px 20px rgba(70,60,120,.14);animation:pop-centred .3s ease both;
}

/* ------- answer tray ------- */
.tray{
  position:absolute;left:50%;transform:translateX(-50%);bottom:132px;z-index:7;
  width:min(680px,92vw);background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:16px 18px;box-shadow:0 12px 40px rgba(60,60,90,.14);
  animation:pop-centred .35s ease both;
}
.tray-q{font-family:var(--hand2);font-size:16px;line-height:1.5;margin-bottom:12px}
.tray-opts{display:flex;flex-wrap:wrap;gap:9px}
.tray-opts button{
  border:1px solid var(--line);background:var(--paper2);border-radius:12px;
  padding:10px 16px;font-size:14px;color:var(--ink);
}
.tray-opts button:hover{border-color:var(--accent);background:#eaf6fd}
.tray-opts button.skip{background:transparent;border-style:dashed;color:var(--ink-soft)}
.tray-opts button.skip:hover{background:var(--paper2);border-color:var(--line);color:var(--ink)}
.tray-hint{font-size:12px;color:var(--ink-soft);margin-top:10px;min-height:16px}

/* ------- dock ------- */
.dock{
  position:absolute;inset:auto 0 0 0;z-index:8;min-height:130px;
  padding:20px 24px 26px;
  background:linear-gradient(to top,var(--paper) 55%,transparent);
  pointer-events:none;
}
/* A speech bubble beside Tara, after the user's mockup (2026-09-26) --
   #caption itself is still exactly the element js/app.js fills word by word
   (tts:start/tts:end); only the frame around it changed. Positioned in its
   own right (not flexed against .tutor/.dock-controls, which were already
   absolute and never really shared this row's layout). */
.caption-bubble{
  position:absolute;left:92px;bottom:32px;z-index:2;max-width:min(420px,58vw);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:11px 16px;box-shadow:0 10px 28px rgba(60,60,90,.14);pointer-events:none;
}
.caption-bubble b{display:block;font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px}
.caption-bubble::after{
  content:"";position:absolute;left:-7px;bottom:16px;width:13px;height:13px;
  background:var(--surface);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.caption-bubble:has(#caption:empty){display:none}
.caption{
  font-size:13.5px;line-height:1.55;color:var(--ink-soft);min-height:0;pointer-events:none;
}
.dock-controls{display:flex;gap:10px;pointer-events:auto;position:absolute;right:26px;bottom:26px}
.round{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);font-size:16px;display:grid;place-items:center;
  box-shadow:0 4px 14px rgba(60,60,90,.10);
}
/* Play/pause reads as the primary transport control in the mockup -- solid,
   not another outlined circle among several. */
.round#pauseBtn{background:#181a1f;color:#fff;border-color:#181a1f}
.round.mic{background:#e8464a;color:#fff;border-color:#e8464a}
.round.mic.off{background:var(--surface);color:var(--ink);border-color:var(--line)}
.round.mic.live{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(232,70,74,.45)}50%{box-shadow:0 0 0 12px rgba(232,70,74,0)}}

/* ------- HUD group, ... menu (Studdy 1:48) ------- */
.hud-group{display:flex;gap:2px;background:var(--surface-thin);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:12px;padding:2px}
.icon.flat{border:0;background:transparent;backdrop-filter:none}
.icon.flat:hover{background:var(--paper2)}
.more-menu{
  position:absolute;top:62px;right:16px;z-index:12;width:246px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:8px;
  box-shadow:0 18px 46px rgba(30,30,60,.18);
}
.more-menu button{
  display:flex;align-items:center;gap:11px;width:100%;border:0;background:transparent;
  padding:10px;border-radius:10px;font-size:14px;color:var(--ink);text-align:left;
}
.more-menu button:hover{background:var(--paper2)}
.more-menu .ic{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:7px;
  background:var(--paper2);color:var(--ink-soft);font-size:13px}
.more-menu hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.mm-speed{display:block;padding:8px 10px 10px}
.mm-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink);margin-bottom:8px}
.mm-row b{font-weight:500;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mm-speed input{width:100%;accent-color:#b88cf0}

/* ------- the tutor, bottom left (Studdy 1:36) ------- */
.tutor{
  position:absolute;left:24px;bottom:24px;pointer-events:none;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 4px 14px rgba(60,60,90,.10);
  transition:box-shadow .3s;
}
.tutor img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.tutor.speaking{box-shadow:0 0 0 4px #e9dcfb,0 0 22px 6px rgba(184,140,240,.55),0 0 34px 10px rgba(46,167,224,.25);animation:tutorGlow 1.6s ease-in-out infinite}
.tutor.speaking .mouth{animation:talk .32s ease-in-out infinite alternate;transform-origin:32px 45px}
@keyframes tutorGlow{50%{box-shadow:0 0 0 4px #dcecfa,0 0 26px 8px rgba(46,167,224,.45),0 0 38px 12px rgba(184,140,240,.3)}}
@keyframes talk{to{transform:scaleY(1.9)}}

/* Words appear as she says them (Studdy 1:38-1:46). */
.caption .w{opacity:0;transition:opacity .18s}
.caption .w.on{opacity:1}
.caption.subs-off{visibility:hidden}

/* ------- dialogs ------- */
.sheet{border:1px solid var(--line);border-radius:16px;padding:18px 20px;width:min(460px,92vw);color:var(--ink);box-shadow:0 24px 60px rgba(40,40,70,.25)}
.sheet::backdrop{background:rgba(30,30,50,.35)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px}
.sheet-head h2{font-size:18px;margin:0}
.sheet .x{border:0;background:transparent;font-size:16px;color:var(--ink-soft)}
.sheet-sub{font-size:13px;color:var(--ink-soft);line-height:1.55;margin:0 0 12px}
.sheet textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;font-size:14px;resize:vertical}
.sheet-msg{font-size:13px;margin-top:8px;color:#2d7a4b}
.sheet-msg.err{color:#b23b35}
.sheet-foot{text-align:right;margin-top:12px;display:flex;gap:8px;justify-content:flex-end;align-items:center}
.sheet-foot .ghost{background:transparent;border:0;color:var(--ink-soft);font-size:13px;padding:8px 10px;border-radius:10px}
.sheet-foot .ghost:hover{background:var(--paper2);color:var(--ink)}

/* The end-of-lesson survey: three questions, each a row of taps. Big enough
   to hit on a phone, and the chosen one stays filled so a student can see
   what they have already answered before sending. */
.q{margin:0 0 14px}
.q-ask{font-size:14px;color:var(--ink);margin-bottom:7px}
/* Always 3 equal columns, never flex-wrap's "2 then 1 stretched to full
   width" -- a lone item left over on its own row grows to fill it, so it
   reads as a different, bigger button (even a CTA, since .on shares Send's
   blue) instead of just the third equal choice (user's screenshot,
   2026-09-26: "question aur option confuse kar raha hai"). */
.q-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.q-opts button{
  border:1px solid var(--line);background:var(--surface);
  color:var(--ink);border-radius:12px;padding:10px 6px;font-size:13px;line-height:1.25;
}
.q-opts button:hover{border-color:var(--accent)}
.q-opts button.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
#svText{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;font:inherit;font-size:14px;background:var(--surface);color:var(--ink);resize:vertical}
:root[data-board="dark"] .q-opts button{background:var(--surface);color:var(--ink)}
.help-list{margin:6px 0 0;padding-left:18px;display:grid;gap:9px;font-size:14px;line-height:1.5}

.typebar{
  position:absolute;left:50%;transform:translateX(-50%);bottom:96px;z-index:9;
  width:min(620px,92vw);display:flex;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:9px;
  box-shadow:0 10px 34px rgba(60,60,90,.15);
}
#typeInput{flex:1;border:0;outline:0;font-size:14px;padding:8px 10px;background:transparent;color:var(--ink)}

@media (max-width:820px){
  .board{grid-template-columns:1fr;width:auto;padding:74px 22px 260px}
  /* One reading column, not "the left column's items then the right's" --
     .col disappears as a box so every .bi becomes a direct grid child of
     .board, placed by the `order` js/render/board.js gives it (source
     order alone would still read left-column-first). */
  .col{display:contents}
  .bi{margin-top:0!important;margin-bottom:16px}
  .start-foot{grid-template-columns:1fr;gap:18px}
  .bi-heading{font-size:28px}
  .bi-note{font-size:18px}
  .bi-katex{font-size:16px}
}

/* ------- phone ------- */
@media (max-width:560px){
  /* Pinch-zoom already does this, and the row was wrapping into the progress. */
  #zoomIn,#zoomOut,#zoomReset{display:none}
  .hud{padding:8px 10px}
  .hud-left,.hud-right{gap:6px}
  .state-pill{font-size:10px;padding:3px 8px}
  .progress{font-size:10.5px;padding:5px 9px}
  .hud-group{gap:0}

  /* The bubble no longer fits beside a full-size Tara at this width -- she
     moves up and out of the controls' way, the bubble narrows to what is left. */
  .dock{padding:14px 12px 16px;min-height:110px}
  .tutor{width:42px;height:42px;left:12px;bottom:60px}
  .caption-bubble{left:60px;bottom:56px;max-width:calc(100vw - 130px);padding:9px 13px}
  .caption{font-size:14px}
  .dock-controls{right:12px;bottom:16px;gap:8px}
  .round{width:40px;height:40px}
  .more-menu{right:10px;top:52px}
  .hud-brand,.hud-div{display:none}
  .hud-title{max-width:26vw;font-size:12.5px}
  .hud-crumb-sep,.hud-title span:not(.hud-crumb-last){display:none}
  .hud-end span{display:none}
  .hud-end{padding:8px;gap:0}
  .icon{width:30px;height:30px}

  .tray{width:calc(100vw - 24px);bottom:150px;padding:14px}
  .tray-q{font-size:16px}
  .tray-opts button{padding:9px 13px;font-size:14.5px}
  .typebar{width:calc(100vw - 24px);bottom:132px}
  .follow{bottom:210px}

  .board{padding:64px 14px 240px}
  .bi-heading{font-size:24px}
}

/* The free allowance has run out. Shown on the START screen, above the topic
   box -- the same place the maintenance notice goes, because a message below
   the fold is a greyed-out button with no reason in sight. */
.lock-notice{
  max-width:560px;margin:0 auto 16px;padding:18px 20px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:14px;box-shadow:0 10px 30px rgba(50,50,80,.08);
}
.lock-notice b{display:block;font-size:15.5px;margin-bottom:6px}
.lock-notice p{margin:0 0 14px;font-size:14px;color:var(--ink-soft);line-height:1.5}
.lock-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lock-actions a{
  display:inline-flex;align-items:center;text-decoration:none;font-size:14px;font-weight:500;
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);color:var(--ink);
}
.lock-actions a.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.lock-actions a:hover{border-color:var(--accent)}

/* ================================ THE START SCREEN, 2026-09-25
   Laid out after the user's mockup (tutor_eduforge_learning_page/
   learning-mockup.png): Tara beside the question, a sticky note on the other
   side, and the ready lessons below in three columns -- classes, topic cards,
   and "can't find your topic?". Same blue design system as the public pages.

   Scoped to .start and the chrome it owns. The BOARD keeps its warm paper
   (--paper, --line in :root are the lesson's, not this screen's): a cool blue
   sheet is not what a teacher writes on. */
.start{
  --s-ink:#10244b;--s-soft:#61718c;--s-faint:#8a97ad;--s-line:#e2eaf6;--s-blue:#1677ff;
  background:
    radial-gradient(900px 520px at 8% -8%, #e6f0ff 0%, transparent 60%),
    radial-gradient(760px 460px at 96% 2%, #fdeef6 0%, transparent 58%),
    #f7faff;
  color:var(--s-ink);
}
/* The top menu is css/nav.css, shared with the public pages. */

/* ---- hero: Tara | the question | the sticky note ---- */
.start-hero{
  display:grid;grid-template-columns:minmax(200px,290px) minmax(0,720px) minmax(160px,230px);
  justify-content:center;align-items:end;gap:12px 28px;
  padding:26px 28px 0;max-width:1280px;margin:0 auto;width:100%;
}
.hero-tara{position:relative;align-self:end;margin-bottom:-2px}
.hero-tara img{
  display:block;width:100%;height:auto;max-height:420px;object-fit:contain;object-position:bottom;
  /* the cutout stops in a straight line at her shoulder and waist: let it fade
     into the page instead of ending like a pasted photo */
  -webkit-mask-image:linear-gradient(to right,#000 72%,transparent 99%),linear-gradient(to top,transparent 0,#000 16%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 72%,transparent 99%),linear-gradient(to top,transparent 0,#000 16%);
  mask-composite:intersect;
}
.hero-bubble{
  position:absolute;z-index:2;top:6px;right:-6px;transform:rotate(-6deg);
  background:#fff;border-radius:20px;padding:12px 16px;box-shadow:0 10px 28px rgba(23,75,131,.14);
  font-family:'Caveat',cursive;font-size:26px;font-weight:700;line-height:1.05;color:var(--s-ink);
}
.hero-bubble b{color:var(--s-blue)}
.hero-bubble small{display:block;font-size:19px;font-weight:600;margin-top:2px}
.hero-bubble::after{
  content:"";position:absolute;left:18px;bottom:-9px;width:18px;height:18px;background:#fff;
  transform:rotate(45deg);border-radius:3px;
}

.start-mid{padding:10px 0 34px;gap:16px;justify-content:flex-start}
.start-mid h1{font-size:clamp(28px,2.9vw,40px);font-weight:800;letter-spacing:-1.4px;color:var(--s-ink);text-align:center;line-height:1.12}
.start-mid h1 b{
  font-weight:900;color:var(--s-blue);
  /* the hand-drawn underline in the mockup */
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C30 2 70 2 118 6' fill='none' stroke='%23ffb020' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") bottom/100% 9px no-repeat;
  padding-bottom:6px;
}
.start-lead{margin:-4px 0 4px;color:var(--s-soft);font-size:15.5px;text-align:center}

.start .tabs{gap:12px}
.start .tabs .tab{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1px solid var(--s-line);background:#fff;color:var(--s-ink);border-radius:14px;
  padding:11px 24px;font-size:15px;font-weight:600;box-shadow:0 4px 14px rgba(23,75,131,.06);
}
.start .tabs .tab svg{color:#ef4f5f}
.start .tabs .tab:first-child svg{color:inherit}
.start .tabs .tab.is-on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#7b6cf6,#6a5cf0);box-shadow:0 10px 22px #6a5cf03d}
.start .tabs a.tab:hover{border-color:#c3d6ef}
.start .tabs .tab:disabled svg{color:inherit}

.start .composer{
  border:1px solid var(--s-line);border-radius:22px;padding:18px 20px;background:#fff;
  box-shadow:0 22px 55px rgba(23,75,131,.12);width:100%;
}
.start .name{border-bottom-color:#e8eef7;color:var(--s-soft);font-size:13.5px}
.start #topicInput{font-size:17px;color:var(--s-ink);font-weight:600;padding:12px 4px 16px}
.start #topicInput::placeholder{color:#9fb0c9;font-weight:400}

.start .langs{border-color:var(--s-line);border-radius:12px}
.start .langs button{color:var(--s-soft);font-weight:700;padding:10px 16px;background:#fff}
.start .langs button.on{background:var(--s-blue);color:#fff}
.start .chips .chip{
  display:inline-flex;align-items:center;gap:6px;
  border-color:var(--s-line);color:var(--s-soft);background:#fff;border-radius:12px;font-weight:600;padding:10px 15px;
}
.start .primary{
  border-radius:14px;padding:13px 28px;font-weight:800;font-size:15px;
  background:linear-gradient(135deg,var(--s-blue),#19a9f5);box-shadow:0 10px 25px #1677ff38;
}
.start .note{color:var(--s-soft)}
.start .note a{color:var(--s-blue);font-weight:700}

.hero-note{align-self:start;padding-top:8px;display:flex;flex-direction:column;align-items:center;gap:18px}
.sticky{
  background:#fff4a8;color:#3b3413;padding:22px 18px 18px;width:170px;transform:rotate(5deg);
  font-family:'Caveat',cursive;font-size:24px;font-weight:700;line-height:1.1;text-align:center;
  box-shadow:0 14px 26px rgba(80,70,20,.16);position:relative;
}
.sticky::before{
  content:"";position:absolute;top:-10px;left:50%;width:62px;height:20px;margin-left:-31px;
  background:#ffffff99;transform:rotate(-4deg);box-shadow:0 1px 3px #0001;
}
.scribble{
  margin:0;font-family:'Caveat',cursive;font-size:26px;line-height:1.02;color:#2f67d8;
  transform:rotate(-8deg);text-align:left;
}

/* ---- the topic browser: classes | topics | can't find it ---- */
.start .ready{
  display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:22px;align-items:start;
  max-width:1280px;width:100%;margin:0 auto;padding:26px 28px 34px;text-align:left;
  border-top:1px solid var(--s-line);background:linear-gradient(#ffffffa0,#ffffff00 240px);
}
.start .ready[hidden]{display:none}
.rt-panel{
  background:#fff;border:1px solid var(--s-line);border-radius:20px;padding:18px;
  box-shadow:0 10px 30px rgba(23,75,131,.07);
}
.rt-panel h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:16px;font-weight:800;color:var(--s-ink)}
.rt-classes{position:sticky;top:90px}
.class-pick{display:flex;flex-direction:column}
.class-pick button{
  display:flex;align-items:center;gap:10px;text-align:left;background:none;border:0;
  border-bottom:1px solid #eef2f8;padding:12px 12px;font-size:14.5px;color:var(--s-ink);border-radius:0;
}
.class-pick button::before{content:"›";color:var(--s-faint);font-size:17px;line-height:1}
.class-pick button:last-child{border-bottom:0}
.class-pick button:hover{color:var(--s-blue)}
.class-pick button.on{background:#efedff;color:#5949e8;font-weight:800;border-radius:12px;border-bottom-color:transparent}
.class-pick button.on::before{color:#5949e8}

.rt-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 16px;margin-bottom:14px}
.rt-top > div:first-child{flex:1 1 340px}
.rt-top h2{margin:2px 0 4px;font-size:22px;font-weight:800;letter-spacing:-.4px;color:var(--s-ink)}
.rt-top h2::before{content:"\26A1";margin-right:8px;color:#ffb020}
.rt-top p{margin:0;color:var(--s-soft);font-size:14px}
.subj-pick{display:flex;gap:4px;background:#fff;border:1px solid var(--s-line);border-radius:999px;padding:4px;flex:none}
.subj-pick button{border:0;background:none;border-radius:999px;padding:9px 18px;font-size:14px;font-weight:700;color:var(--s-ink)}
.subj-pick button.on{background:var(--s-blue);color:#fff;box-shadow:0 6px 16px #1677ff33}

.start .ready-list{display:grid;gap:12px}
.start .ready-group{
  background:#f5f8fdcc;border:1px solid #e8eef8;border-radius:18px;padding:12px 14px 14px;gap:10px;
}
.start .ready-sub{font-size:14px;font-weight:400;color:var(--s-soft);letter-spacing:0}
.start .ready-sub b{color:var(--s-ink);font-weight:700}
.start .ready-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;justify-content:stretch}
.start .ready-list button{
  display:flex;align-items:center;gap:14px;text-align:left;width:100%;
  border:1px solid #e3eaf5;background:#fff;color:var(--s-ink);border-radius:16px;
  padding:12px 14px;font-size:14px;box-shadow:0 3px 10px rgba(23,75,131,.04);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.start .ready-list button:hover{border-color:#bcd0f5;box-shadow:0 8px 20px rgba(23,75,131,.09);background:#fff;color:var(--s-ink)}
.start .ready-list button.on{border-color:#a99cf6;background:#f7f5ff;color:var(--s-ink);box-shadow:0 0 0 3px #7b6cf62a}
.rt-ico{
  flex:none;width:52px;height:52px;border-radius:50%;background:#eef5ff;
  display:grid;place-items:center;overflow:hidden;
}
.rt-ico img{width:44px;height:44px;object-fit:contain}
.rt-ico.glyph{font-size:24px;color:var(--s-blue)}
.rt-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rt-txt b{font-weight:700;font-size:14.5px;line-height:1.25}
.rt-txt small{color:var(--s-soft);font-size:12.5px}
.rt-go{flex:none;color:var(--s-faint);font-size:22px;line-height:1}
.start .ready-list button.nolang{opacity:.5}
.start .more-note{
  margin:14px auto 0;background:#fff;border:1px solid var(--s-line);border-radius:999px;
  padding:10px 22px;width:max-content;max-width:100%;
}

.rt-side{position:sticky;top:90px}
.rt-muted{margin:-4px 0 12px;color:var(--s-soft);font-size:14px;line-height:1.5}
.rt-search{display:flex;align-items:center;border:1px solid var(--s-line);border-radius:999px;padding:4px 4px 4px 14px;background:#fff}
.rt-search:focus-within{border-color:#9fc2fb;box-shadow:0 0 0 3px #1677ff1f}
.rt-search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:13.5px;color:var(--s-ink);background:transparent;padding:6px 0}
.rt-search button{
  flex:none;width:30px;height:30px;border-radius:50%;border:0;background:var(--s-blue);color:#fff;font-size:15px;
}
.rt-benefits{list-style:none;margin:16px 0 0;padding:0}
.rt-benefits li{display:flex;align-items:center;gap:12px;padding:9px 0;font-size:14px;color:var(--s-ink)}
.rt-benefits i{
  flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:14px;
}

/* ---- footer strip ---- */
.start-foot{
  border-top:1px solid var(--s-line);background:#fff;
  max-width:none;padding:24px max(28px,calc((100% - 1224px)/2)) 30px;gap:28px;
}
.start-foot div{display:flex;align-items:flex-start;gap:14px;text-align:left}
.start-foot i{
  flex:none;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  font-style:normal;font-size:22px;background:#eef5ff;
}
.start-foot div:nth-child(2) i{background:#fff4dc}
.start-foot div:nth-child(3) i{background:#e9f8ef}
.start-foot b{display:block;color:var(--s-ink);font-size:15px;margin-bottom:3px}
.start-foot span{color:var(--s-soft)}

/* grid items default to min-width:auto, and the class row below scrolls
   sideways on a phone -- without this it pushed the whole page wider */
.start .ready > *{min-width:0}
@media (min-width:1181px){ .start-mid h1{white-space:nowrap} }

/* ---- narrower screens ---- */
@media (max-width:1180px){
  .start-hero{grid-template-columns:minmax(170px,240px) minmax(0,620px)}
  .hero-note{display:none}
  .start .ready{grid-template-columns:200px minmax(0,1fr)}
  .rt-side{grid-column:1 / -1;position:static}
  .rt-side .rt-panel{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px}
  .rt-side .rt-panel h3,.rt-side .rt-muted,.rt-side .rt-search{grid-column:1}
  .rt-side .rt-benefits{grid-column:2;grid-row:1 / span 3;margin:0}
}
@media (max-width:860px){
  .start-hero{grid-template-columns:1fr;padding-top:18px}
  .hero-tara{display:none}
  .start .ready{grid-template-columns:1fr;padding:20px 16px 28px}
  .rt-classes{position:static;padding:12px}
  .rt-classes h3{display:none}
  .class-pick{flex-direction:row;overflow-x:auto;gap:6px;scrollbar-width:none}
  .class-pick button{flex:none;border:1px solid var(--s-line);border-radius:999px;padding:8px 14px;white-space:nowrap}
  .class-pick button::before{content:none}
  .class-pick button.on{border-color:transparent;border-radius:999px}
  .rt-side .rt-panel{display:block}
  .rt-side .rt-benefits{margin-top:14px}
}
@media (max-width:640px){
  .start-hero{padding:14px 16px 0}
  .start .ready-row{grid-template-columns:1fr}
  .rt-top{flex-direction:column;align-items:stretch}
  .rt-top > div:first-child{flex:none}
  .subj-pick{overflow-x:auto;scrollbar-width:none;align-self:flex-start;max-width:100%}
  .subj-pick button{flex:none;padding:8px 14px}
  .start .more-note{width:auto;border-radius:16px}
}
/* On a phone the composer row -- language, Add File, Add URL, Start lesson --
   does not fit on one line, and Start was being cut off at the card edge. It
   wraps, and the button that matters takes the width. */
@media (max-width:560px){
  .start .composer-row{flex-wrap:wrap;gap:8px}
  .start .chips{margin-right:0}
  .start .primary{width:100%;order:9}
  .start .tabs{flex-wrap:wrap;justify-content:center;gap:8px}
  .start .tabs .tab{padding:9px 16px;font-size:14px}
}