/* Inter for the app itself (one file holds every weight); Kalam for the handwriting on the board. */
@font-face{font-family:"Inter";src:url("fonts/Inter.ttf");font-weight:100 900;font-display:swap}
@font-face{font-family:"Kalam";src:url("fonts/Kalam-Regular.ttf");font-weight:400}
@font-face{font-family:"Kalam";src:url("fonts/Kalam-Bold.ttf");font-weight:700}

/* The look of the console: a quiet tool. White, black and greys, hairline borders, no colour. */
:root{
  --bg:#f4f4f6; --side:#fafafb; --panel:#ffffff;
  --line:#ebebeb; --line-strong:#d9d9d9; --text:#0a0a0a; --muted:#6b6b6b; --soft:#eeeef1;
  --ink:#0a0a0a; --on-ink:#ffffff;                       /* what is pressed to go on: the filled button */
  --accent:#0a0a0a; --accent-soft:#ffffff; --on-accent:#ffffff;   /* what is chosen */
  --error:#c02626; --good:#0a7c4a;
  /* everything that can be picked up stands off the page: a close, sharp shadow under a wide, soft one */
  --shadow:0 1px 1px rgba(0,0,0,.04),0 3px 8px rgba(0,0,0,.04),0 16px 28px -12px rgba(0,0,0,.12);
  --shadow-up:0 2px 4px rgba(0,0,0,.05),0 12px 22px rgba(0,0,0,.07),0 30px 48px -14px rgba(0,0,0,.2);
  --shadow-key:0 1px 2px rgba(0,0,0,.08),0 2px 6px -1px rgba(0,0,0,.08);
  /* two corner sizes: --r for anything that holds other things, --r-s for the fields inside them; buttons are pills */
  --r:16px; --r-s:10px;
  /* the classroom and the board keep their own colours */
  --danger:#d92d20; --paper:#fdfcf7; --stage:#111318; --stage-panel:#1d2027; --stage-line:#30343d; --stage-text:#e7e9ee;
  --stage-accent:#2563eb; --listen:#f59e0b;
  --stage-ui:"Segoe UI Variable Text","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  --hand:"Kalam","Segoe Print","Nirmala UI",cursive;
  --ui:"Inter","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
/* type: 12 for labels, 14 for text, 15 for what is typed and for headings in a panel, 24 for a page's heading */
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
h1,h2,p{margin:0}
h1{font-size:24px;line-height:1.25;font-weight:600;letter-spacing:-.02em}
h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.muted{color:var(--muted)}
.error{color:var(--error);font-size:13px}
.error:empty{display:none}
.trouble{color:var(--error);font-size:13px}
.trouble a{color:inherit;font-weight:600;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- shared controls ---------- */
.panel,.sheet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.panel{padding:28px}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.row.end{justify-content:flex-end}
.spacer{flex:1}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:500;color:var(--muted)}
input[type=text],input[type=url],input[type=password],input[type=number],input[type=email],textarea,select{
  font:inherit;font-size:14px;font-weight:400;color:var(--text);background:var(--panel);border:1px solid var(--line-strong);
  border-radius:var(--r-s);padding:9px 12px;min-width:0;transition:border-color .15s,box-shadow .15s}
input:hover,textarea:hover,select:hover{border-color:var(--muted)}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--text);box-shadow:0 0 0 3px var(--soft)}
/* a field that only shows something */
input[readonly],input[readonly]:is(:hover,:focus){background:var(--soft);border-color:transparent;
  box-shadow:none;color:var(--muted);cursor:default}
::placeholder{color:var(--muted);opacity:.8}
textarea{resize:vertical;line-height:1.55}
/* a button is a pill: outlined by default, filled when it is the thing to do next */
button{font:inherit;font-size:13px;font-weight:500;color:var(--text);background:transparent;border:1px solid var(--line-strong);
       border-radius:99px;padding:7px 14px;cursor:pointer;transition:background .15s,opacity .15s,transform .05s}
button:hover{background:var(--soft)}
button:active{transform:translateY(1px)}
button.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
button.primary:hover{background:var(--ink);opacity:.84}
button.big{padding:10px 20px;font-size:14px}
button.danger{background:var(--danger);border-color:var(--danger);color:#fff}
button.link{background:none;border:0;padding:0;border-radius:4px;color:var(--text);font-weight:500;text-decoration:underline;
            text-decoration-color:var(--line-strong);text-underline-offset:3px}
button.link:hover{background:none;text-decoration-color:currentColor}
button:disabled{opacity:.5;cursor:default}
.tag{font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--soft);color:var(--muted);align-self:flex-start}
.options{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end}
.options .grow{flex:1;min-width:180px}
/* a named control that is not a single input, laid out like a label */
.field{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:12px;font-weight:500;color:var(--muted)}
/* side-by-side choices on a track, the chosen one raised: used in place of drop-downs */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:99px;background:var(--soft)}
.seg button{border:0;background:none;padding:5px 14px;font-size:13px;font-weight:500;color:var(--muted);min-width:40px;transition:none}
.seg button:hover{color:var(--text)}
.seg button[aria-checked="true"]{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.08)}

.logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:650;letter-spacing:-.02em}
.logo .mark{width:26px;height:26px;flex:none}
.logo .mark rect{fill:var(--ink)}
.logo .mark path{fill:none;stroke:var(--on-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* who makes it, beside the name in the About box */
.logo small{font-size:12px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:2px}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--ink) center/cover;color:var(--on-ink);display:flex;align-items:center;
        justify-content:center;font-size:13px;font-weight:600;text-transform:uppercase;flex:none}
.avatar.big{width:80px;height:80px;font-size:28px}
/* a name over a line of detail, beside a face: the student in the side bar */
.who{flex:1;min-width:0;text-align:left}
.who b{display:block;font-size:14px;font-weight:600;line-height:1.3;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who small{color:var(--muted);font-size:12px;font-weight:400}

/* ---------- sign in, profile, getting ready: panels in the middle of the window ---------- */
.connect{min-height:100vh;display:flex;flex-direction:column;gap:20px;align-items:center;justify-content:center;padding:24px}
.connect>form{width:min(440px,100%)}
.profile-cards>*{width:440px;max-width:100%}
.connect h1{margin:8px 0 4px}
.picture-row{display:flex;align-items:center;gap:16px}
.danger-link{color:var(--error) !important}
/* the profile page: the way back above the profile */
.profile-page{display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:100%}
.profile-cards{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
/* the Terms of Use, agreed to as the profile is first set up: the box beside the sentence, both read as text */
label.agree{flex-direction:row;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-s);background:var(--soft);
            font-size:13px;font-weight:400;line-height:1.45;color:var(--text);cursor:pointer}
label.agree input{flex:none;width:17px;height:17px;margin:1px 0 0}
label.agree a{font-weight:600;text-underline-offset:3px}
/* The profile's questions. On the profile page they stand one under another, each asked like a label; the first
   time ("steps"), one at a time, big, sliding in from the side it is gone to, with dots above that count them. */
.wizard .step{display:flex;flex-direction:column;gap:10px}
.wizard .step>label,.wizard .step>.field{align-self:stretch}
.step-q small{font-weight:400;color:var(--muted)}
.step-why{font-size:12px;color:var(--muted)}
.wizard:not(.steps) [data-step="picture"]>.step-q{display:none}
.wizard.steps .step{min-height:150px}
.wizard.steps .step-q{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.015em;color:var(--text);margin-bottom:6px}
.wizard.steps .step-q small{font-size:14px}
.wizard.steps .step-why{font-size:13px}
.wizard.steps .step.now{animation:step-in .3s cubic-bezier(.2,.8,.2,1)}
.wizard.steps.back .step.now{animation-name:step-back}
@keyframes step-in{from{opacity:0;transform:translateX(28px)}}
@keyframes step-back{from{opacity:0;transform:translateX(-28px)}}
@media (prefers-reduced-motion: reduce){.wizard.steps .step.now{animation:none}}
/* One at a time, the groups the questions are in are not seen. On the profile page each group is a box of its own
   with its name above it, the questions in it side by side where there is room (a long one across the whole box),
   the choices smaller, and the buttons that save it staying at the bottom of the window while it is scrolled. */
.wizard.steps .group{display:contents}
.wizard.steps .group-head{display:none}
.profile-cards>.wizard:not(.steps){width:780px}
.wizard:not(.steps) .group{display:grid;gap:16px 22px;padding:18px 20px 20px;border:1px solid var(--line);border-radius:var(--r-s)}
.wizard:not(.steps) .group-head{grid-column:1/-1;margin-bottom:-4px;font-size:12px;font-weight:600;letter-spacing:.06em;
                                text-transform:uppercase;color:var(--muted)}
.wizard:not(.steps) .group .step{gap:8px;min-width:0}
.wizard:not(.steps) .step-why{display:none}
.wizard:not(.steps) .picks{gap:6px}
.wizard:not(.steps) .picks button{padding:6px 12px;font-size:13px}
.wizard:not(.steps) .group.halves{grid-template-columns:repeat(2,minmax(0,1fr))}
.wizard:not(.steps) .group .wide{grid-column:1/-1}
/* about the student: the picture across the top, then the name, the age and the gender in one row */
.wizard:not(.steps) .group.you{grid-template-columns:minmax(0,1fr) 150px auto;align-items:end}
.wizard:not(.steps) .group.you [data-step="picture"]{grid-column:1/-1}
/* what they study: the four kinds two by two */
.wizard:not(.steps) .kinds .step-q{display:none}      /* (the group's name asks it) */
.wizard:not(.steps) .kinds .picks.listed{grid-template-columns:repeat(2,minmax(0,1fr))}
.wizard:not(.steps) .kinds .picks.listed button{padding:9px 40px 9px 14px}
.wizard:not(.steps) .wizard-foot{position:sticky;bottom:0;z-index:2;margin:0 -28px -28px;padding:14px 28px;
                                 border-top:1px solid var(--line);border-radius:0 0 var(--r) var(--r);background:var(--panel)}
@media (max-width:760px){
  .wizard:not(.steps) .group.halves,.wizard:not(.steps) .kinds .picks.listed{grid-template-columns:minmax(0,1fr)}
  .wizard:not(.steps) .group.you{grid-template-columns:minmax(0,1fr) 140px}
  .wizard:not(.steps) .group.you [data-step="gender"]{grid-column:1/-1}
  .wizard:not(.steps) .group{padding:16px}
  .wizard:not(.steps) .wizard-foot{margin:0 -18px -20px;padding:12px 18px}
}
.wizard-dots{display:flex;gap:6px;margin-bottom:14px}
.wizard-dots:empty{display:none}
.wizard-dots i{width:18px;height:4px;border-radius:99px;background:var(--line-strong);transition:width .25s,background .25s}
.wizard-dots i.done{background:var(--muted)}
.wizard-dots i.on{width:32px;background:var(--ink)}
/* choices that are buttons of their own, for one or for several; "listed" for those with a line under them, one under another */
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks button{border-radius:var(--r-s);padding:8px 14px;font-size:14px}
.picks button[aria-checked="true"],.picks button[aria-checked="true"]:hover{border-color:var(--ink);background:var(--soft);box-shadow:inset 0 0 0 1px var(--ink)}
.picks.listed{display:grid;gap:8px;width:100%}
.picks.listed button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:11px 46px 11px 16px;text-align:left}
.picks.listed b{font-weight:600}
.picks.listed small{font-size:12px;color:var(--muted)}
/* each card is ticked in its corner once it is picked */
.picks.listed button::after{content:"";position:absolute;top:50%;right:16px;width:18px;height:18px;margin-top:-9px;border-radius:5px;
  border:1.5px solid var(--line-strong);background:var(--panel)}
.picks.listed button[aria-checked="true"]::after{border-color:var(--ink);background:var(--ink) center/11px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
/* the syllabus Explore shows: the student's own, or all of it */
.explore-scope{font-size:13px}
.explore-scope .link{margin-left:6px}
/* the usage meter: a bar inked as far as the credits are used up, in the side bar and on the Usage page */
.credit-meter{display:block;height:6px;border-radius:99px;background:var(--soft);overflow:hidden}
.credit-meter i{display:block;height:100%;width:0;border-radius:99px;background:var(--ink);transition:width .3s}
.low .credit-meter i{background:var(--error)}
.usage-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.usage{display:flex;flex-direction:column;gap:6px;padding:0 8px;font-size:12px;color:var(--muted)}
.usage b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.usage-card b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.usage-card .credit-meter{height:8px}

/* ---------- the console: a side bar that stays put, and the home or outline page beside it ---------- */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);height:100vh}
.side{display:flex;flex-direction:column;gap:20px;padding:20px 12px 12px;background:var(--side);border-right:1px solid var(--line)}
.side .logo{padding:0 8px}
.side nav{display:flex;flex-direction:column;gap:2px}
.nav{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:var(--r-s);padding:8px 10px;color:var(--muted);text-align:left}
.nav:hover,.nav.on{background:var(--soft);color:var(--text)}
.nav svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.school{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:var(--r-s);padding:8px;margin-top:-8px}
.pages{min-height:0;overflow-y:auto}
/* a page is as wide as the window allows, less a margin that grows with it */
.pages .view{display:flex;flex-direction:column;gap:24px;padding:32px clamp(24px,4vw,72px) 64px}
.page-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between}
.page-head h1{margin:8px 0 4px}
.eyebrow{color:var(--muted);font-size:13px}

/* ---------- home ---------- */
.hello{display:flex;flex-direction:column;gap:2px}
/* where a class is asked for and, beside it, the language and voice it is given in */
.studio{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,26%,400px);gap:20px;align-items:start}
@media (max-width:980px){.studio{grid-template-columns:minmax(0,1fr)}}
.composer{display:flex;flex-direction:column;transition:box-shadow .2s,border-color .2s}
.composer:focus-within{border-color:var(--line-strong);box-shadow:var(--shadow-up)}
.composer-head{padding:14px 14px 0}
/* what is typed here sits straight on the sheet, with no box of its own */
.composer .write,.composer .write:hover,.composer .write:focus{border:0;border-radius:0;background:none;box-shadow:none;outline:0}
.composer .write{display:block;width:100%;padding:0 20px;font-size:15px;line-height:1.6}
.composer textarea.write{min-height:clamp(150px,22vh,300px);resize:none;padding-top:16px;padding-bottom:20px}
#doubt-fields{padding:20px 0}
#doubt-fields p{padding:8px 20px 0}
/* the image a doubt session begins with (Add an image, beside Explore): under the topic, small, with a cross to take it off */
.photo-thumb{position:relative;display:inline-block;margin:12px 20px 0}
.photo-thumb img{display:block;max-width:160px;max-height:110px;border-radius:var(--r-s);border:1px solid var(--line-strong);object-fit:cover}
.photo-remove{position:absolute;top:-8px;right:-8px;width:24px;height:24px;padding:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.photo-remove:hover{background:var(--ink);opacity:.84}
@media (max-width:620px){.photo-thumb{margin-left:16px;margin-right:16px}}
.composer-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px;padding:14px 20px;border-top:1px solid var(--line)}
/* the sheet is as tall as the panel beside it: the plan takes the room, the button stays at the foot */
.studio{align-items:stretch}
.voice-panel{align-self:stretch}
#lecture-fields{flex:1;display:flex}
@media (min-width:981px){.composer textarea.write{min-height:96px}}
#lecture-fields textarea{flex:1}
.composer-foot{margin-top:auto}
#explore-open,#doubt-photo-add{display:inline-flex;align-items:center;gap:8px}
:is(#explore-open,#doubt-photo-add) svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Explore: the board, class and subject are switched at the top, and that subject's topics are listed under them */
.explore{display:flex;flex-direction:column;gap:16px;padding:0 22px 22px}
.explore-picks{display:flex;flex-wrap:wrap;gap:16px 28px}
.topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;max-height:min(52vh,520px);overflow-y:auto;padding:4px}
.topics button{display:flex;align-items:baseline;gap:10px;text-align:left;padding:12px 14px;border-radius:var(--r-s);font-weight:500}
.topics button small{flex:none;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.composer-foot .go{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 16px}

/* how the class is given: its language and its voice */
.voice-panel{padding:20px;display:flex;flex-direction:column;gap:20px}
.voice-panel .field{align-items:stretch}
/* what is chosen, shown as a field that opens a pop-up to change it */
.pick{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:10px 14px;border-radius:var(--r-s);text-align:left}
.pick b{font-size:14px;font-weight:600}
.pick svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* a number stepped down and up: the value between a minus and a plus */
.stepper{display:flex;align-items:center;gap:8px;padding:4px;border-radius:99px;background:var(--soft)}
.stepper button{width:34px;height:34px;padding:0;flex:none;font-size:18px;font-weight:400;line-height:1}
.stepper output{flex:1;text-align:center;font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
/* The same pill as a slider. The pill is the track; a white knob that says the minutes stands in it, as the chosen one
   of a row of choices does, and the track is shaded as far as the knob. The range input itself is laid over all of it,
   unseen, with a thumb as wide as the knob, so that the knob is under the finger wherever it is dragged. */
.stepper.slide{position:relative;display:block;height:42px;padding:0;--knob:72px;--at:calc(4px + var(--along,0) * (100% - var(--knob) - 8px))}
.stepper.slide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--at) + var(--knob) + 4px);border-radius:99px;
                       background:rgba(10,10,10,.07)}
.stepper output.knob{position:absolute;top:4px;left:var(--at);width:var(--knob);height:34px;display:flex;align-items:center;justify-content:center;
                     border-radius:99px;background:var(--panel);box-shadow:var(--shadow-key);pointer-events:none;white-space:nowrap}
.stepper input[type=range]{position:absolute;left:4px;top:0;width:calc(100% - 8px);height:100%;margin:0;padding:0;border:0;background:none;box-shadow:none;
                           opacity:0;cursor:grab;-webkit-appearance:none;appearance:none}
.stepper input[type=range]:active{cursor:grabbing}
.stepper input[type=range]::-webkit-slider-runnable-track{height:100%}
.stepper input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--knob);height:42px}
.stepper input[type=range]::-moz-range-thumb{width:var(--knob);height:42px;border:0}
.stepper.slide:has(input:active) .knob{box-shadow:var(--shadow-key),0 0 0 3px rgba(10,10,10,.06)}
.stepper.slide:has(input:focus-visible) .knob{outline:2px solid var(--accent);outline-offset:2px}
/* a lecture's length and the credits it uses: up to 10 minutes green, to 20 amber, beyond that red (console.js) */
.stepper.slide::before{transition:background-color .2s}
.stepper.slide[data-level=light]::before{background:rgba(10,124,74,.2)}
.stepper.slide[data-level=more]::before{background:rgba(245,158,11,.3)}
.stepper.slide[data-level=heavy]::before{background:rgba(217,45,32,.24)}
.minutes-note{margin:0;padding-left:4px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}
.minutes-note::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.minutes-note[data-level=light]{color:var(--good)}
.minutes-note[data-level=more]{color:#b45309}
.minutes-note[data-level=heavy]{color:var(--danger)}
.minutes-note[data-level=best]{color:#1d4ed8}
.stepper input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--accent);outline-offset:2px}
.seg.wide{display:flex}
/* a field's name, with a way to change how it is set beside it ("Set my own time"), each kept in line with the edges
   of the choices under it, not the pill around them */
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 4px}
.field-head button.link{font-size:12px;color:var(--muted);text-decoration-color:var(--line-strong)}
.field-head button.link:hover{color:var(--text)}
.named{display:inline-flex;align-items:center;gap:6px}
/* the chosen level of detail, in the colour of the credits it uses, as the minutes slider's track is (console.js) */
.seg[data-level=light] button[aria-checked="true"]{background:#e3f5ec;color:#0a7c4a;box-shadow:inset 0 0 0 1px rgba(10,124,74,.35)}
.seg[data-level=more] button[aria-checked="true"]{background:#fdf0d5;color:#b45309;box-shadow:inset 0 0 0 1px rgba(245,158,11,.45)}
.seg[data-level=heavy] button[aria-checked="true"]{background:#fde4e2;color:#b42318;box-shadow:inset 0 0 0 1px rgba(217,45,32,.35)}
.seg[data-level=best] button[aria-checked="true"]{background:#e8f0ff;color:#1d4ed8;box-shadow:inset 0 0 0 1px rgba(37,99,235,.35)}
/* while the outline is written again: a notice that cannot be missed, and the sections faded and still under it */
.replanning{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-s);
            color:#1e3a8a;background:#eef4ff;border:1px solid #c7d7fe}
.replanning b{display:block;font-size:15px}
.replanning b+span{font-size:13px;color:#3b4f8f}
.replanning-spin{flex:none;width:22px;height:22px;border-radius:50%;border:3px solid rgba(30,58,138,.18);border-top-color:#1e3a8a;
                 animation:turn .8s linear infinite}
#sections.busy{opacity:.35;pointer-events:none;transition:opacity .2s}
@media (prefers-reduced-motion: reduce){.replanning-spin{animation:none}}
.seg.wide button{flex:1}
/* the choices in a pop-up, one to a line, the chosen one ticked */
.choice-list{display:flex;flex-direction:column;gap:4px;padding:0 12px 14px}
.choice-list button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px;border:0;
                    border-radius:var(--r-s);text-align:left;font-size:14px}
.choice-list button::after{content:"✓";font-size:13px;color:transparent}
.choice-list button[aria-checked="true"]{font-weight:600}
.choice-list button[aria-checked="true"]::after{color:var(--text)}
/* a language the teacher's voice cannot speak just now: shown, greyed, with a lock in place of the tick */
.choice-list button.locked{opacity:.45;cursor:not-allowed}
.choice-list button.locked::after{content:none}
.choice-list button.locked:hover{background:none}
.choice-list .lock{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* the student's classes */
.shelves{display:flex;flex-direction:column;gap:14px;padding-top:12px}
/* a set number of cards to a row, so that they grow with the window like everything else */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1250px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:940px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}
.empty-state{padding:32px 16px;color:var(--muted);text-align:center;border-top:1px solid var(--line)}
.card-lecture{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--panel);border:1px solid var(--line);
              border-radius:var(--r);transition:box-shadow .2s,transform .2s}
.card-lecture:hover{box-shadow:var(--shadow-up);transform:translateY(-2px)}
.thumb{position:relative;display:flex;align-items:center;background:var(--paper);aspect-ratio:16/9;border-bottom:1px solid var(--line)}
/* the sign of a class not yet seen to its end: a small ring at the bottom right of its card */
.card-lecture .sign{margin-left:auto;display:flex;color:var(--muted)}
.card-lecture .sign svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.card-lecture .sign .half{fill:currentColor;stroke:none}
.card-lecture .body{padding:14px;display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.card-lecture b{font-size:14px;font-weight:600;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card-lecture .meta{font-size:12px;color:var(--muted)}
.card-lecture .actions{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px}
.card-lecture .actions button{font-size:12px;padding:6px 12px;white-space:nowrap}
/* a small round button in the corner of the picture, seen when the card is pointed at */
.card-lecture .remove{position:absolute;top:8px;right:8px;width:26px;height:26px;padding:0;border-radius:50%;background:#fff;
                      border-color:rgba(0,0,0,.12);color:#555;font-size:16px;font-weight:400;line-height:1;opacity:0}
.card-lecture:hover .remove,.card-lecture .remove:focus-visible{opacity:1}
.card-lecture .remove:hover{color:#c02626;border-color:#c02626;background:#fff}

/* ---------- outline ---------- */
.section{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;
         padding:14px 0;border-top:1px solid var(--line)}
.section .n{padding-top:9px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.section .text{display:flex;flex-direction:column;gap:8px}
.section .s-remove{margin-top:3px;border:0;color:var(--muted)}
@media (max-width:700px){.section{grid-template-columns:24px minmax(0,1fr)}.section>*:nth-child(n+3){grid-column:2}}
.check{flex-direction:row;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-s);background:var(--soft);font-weight:400}
.check b{display:block;color:var(--text);font-size:14px;font-weight:600}
.check input{margin-top:3px}
input[type=checkbox]{accent-color:var(--ink)}

/* ---------- getting ready ---------- */
.starting{width:min(460px,100%);padding:44px 28px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.starting .row{justify-content:center}
/* a pie that fills as the class gets nearer; --p is how full it is, 0 to 100 */
.pie{--p:0;width:120px;height:120px;border-radius:50%;position:relative;margin-bottom:12px;
     background:conic-gradient(var(--ink) calc(var(--p) * 1%),var(--soft) 0)}
.pie::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid transparent;border-top-color:var(--ink);
            animation:turn 1.1s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.pie::after{animation:none}}
.starting-status{font-size:15px;font-weight:600;min-height:1.5em}

/* ---------- dialogs ---------- */
.modal{width:min(500px,92vw);padding:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--text);
       box-shadow:0 24px 60px rgba(0,0,0,.3)}
.modal.wide{width:min(980px,94vw)}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal header,.modal footer{display:flex;align-items:center;gap:12px;padding:18px 22px}
.modal header{justify-content:space-between}
.modal header h2{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal form{padding:0 22px 22px}
.modal.small{width:min(420px,92vw)}
.modal .sent{padding:0 22px 22px}
.modal .sent b{font-size:15px}
/* the About box: a few lines about the app, then its particulars as names and values */
.about{display:flex;flex-direction:column;gap:14px;padding:0 22px 22px}
.about dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 20px;margin:0;padding:14px 0;border-block:1px solid var(--line)}
.about dt{color:var(--muted)}
.about dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.about a{color:var(--text);text-decoration-color:var(--line-strong);text-underline-offset:3px}
.about a:hover{text-decoration-color:currentColor}
.about .muted{font-size:12px}
.about .muted:empty{display:none}
/* a rating: five stars in a row, filled up to the one chosen */
.stars{display:flex;justify-content:center;gap:4px}
/* --fill is how much of a star is inked, from its left: 0%, 50% or 100% */
.stars button,.stars button:is(:hover,:active){border:0;border-radius:6px;box-shadow:none;padding:2px 4px;font-size:36px;line-height:1;
  color:transparent;background:linear-gradient(90deg,var(--text) var(--fill,0%),var(--line-strong) var(--fill,0%));
  -webkit-background-clip:text;background-clip:text}
.stars button:hover{transform:scale(1.12)}
.stars-value{text-align:center;font-size:12px;margin-top:-8px}
.modal>p{padding:0 22px}
.check-row{display:flex;align-items:center;gap:16px;padding:14px 22px;border-top:1px solid var(--line)}
.check-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.check-row [data-ok="yes"]{color:var(--good)}
.check-row [data-ok="no"]{color:var(--error)}
.meter{height:6px;border-radius:99px;background:var(--soft);overflow:hidden;margin-top:8px}
.meter div{height:100%;width:0;background:var(--good)}
#check-video{width:100%;max-width:320px;border-radius:var(--r-s);margin-top:8px;transform:scaleX(-1);border:3px solid transparent}
#check-video.raised{border-color:var(--listen)}

/* ---------- depth: what can be pressed or picked up stands off the page ---------- */
.panel,.sheet,.card-lecture{border-color:rgba(0,0,0,.05)}
.card-lecture{box-shadow:var(--shadow)}
/* a button is a key: it rises a little when pointed at and goes down when pressed */
button{background:var(--panel);border-color:rgba(0,0,0,.1);box-shadow:var(--shadow-key)}
button:hover{background:var(--panel);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.06),0 8px 16px -4px rgba(0,0,0,.14)}
button:active{transform:translateY(1px);box-shadow:0 1px 1px rgba(0,0,0,.08)}
button.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(0,0,0,.3),0 8px 16px -6px rgba(0,0,0,.45)}
button.primary:hover{opacity:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 2px 4px rgba(0,0,0,.3),0 14px 22px -8px rgba(0,0,0,.5)}
button.primary:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.3)}
button.danger{background:var(--danger)}
button:disabled{transform:none}
/* ... but not the ones that are text or rows: a link, a choice on a track or in a list, a line of the side bar */
button:is(.link,.nav,.school,.s-remove),:is(.seg,.choice-list) button,
button:is(.link,.nav,.school,.s-remove):is(:hover,:active),:is(.seg,.choice-list) button:is(:hover,:active){background:none;box-shadow:none;transform:none}
button:is(.nav,.school,.s-remove):hover,.nav.on,.choice-list button:hover,.choice-list button[aria-checked="true"]{background:var(--soft)}
/* the chosen one of a set is the one that is raised */
.seg,.stepper{box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
.seg button[aria-checked="true"],.seg button[aria-checked="true"]:is(:hover,:active){background:var(--panel);box-shadow:var(--shadow-key)}
.avatar{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 5px rgba(0,0,0,.18)}
.composer,.composer:focus-within{box-shadow:0 1px 1px rgba(0,0,0,.04),var(--shadow-up)}      /* the same crisp edge as the panel beside it */
/* a panel arrives with a small pop, and so does a pop-up */
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.985)}}
.panel,.sheet,.modal[open]{animation:pop .26s cubic-bezier(.2,.9,.3,1.15) backwards}
.voice-panel{animation-delay:.06s}
@media (prefers-reduced-motion: reduce){.panel,.sheet,.modal[open]{animation:none}button:hover,button:active{transform:none}}

/* ---------- classroom: dark surround, paper board, in every theme ---------- */
/* The classroom is not part of the console's look. These put back what the console's own rules for
   type, buttons and fields would otherwise change here; :where keeps them weaker than the rules below. */
.classroom{font-family:var(--stage-ui);-webkit-font-smoothing:auto}
:where(.classroom) button{font-size:13px;border-radius:8px;padding:8px 14px}
.classroom button,.classroom button:is(:hover,:active){transform:none;box-shadow:none}
.classroom button.primary:hover{opacity:1;filter:brightness(1.08)}
:where(.classroom) input[type=text]{font-size:14px;border-radius:8px;padding:8px 10px}
.classroom input:focus{box-shadow:none}
.classroom :focus-visible,.classroom input:focus-visible{outline:2px solid var(--stage-accent);outline-offset:2px}
.classroom ::placeholder{color:#757575;opacity:1}
.classroom h2{font-size:15px;letter-spacing:0}
.classroom[data-mode="doubt"] .lecture-only{display:none}
.classroom[data-live="yes"] .recording-only{display:none}
/* a class watched from the admin portal is only looked at */
.classroom[data-watch="yes"] :is(#c-hand,#c-mic,#c-camera,#ask-form){display:none}
/* the tag on a class that is happening now, not being watched again */
.live{display:flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;background:var(--danger);color:#fff;
      font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;flex:none}
.live .dot{background:#fff;animation:pulse 1.4s infinite}
/* ... and, smaller, on the two kinds of class on the home page, which are both live */
.seg .live.small{display:inline-flex;gap:4px;margin-left:7px;padding:1px 7px;font-size:9px;letter-spacing:.06em;vertical-align:1px}
.seg .live.small .dot{width:5px;height:5px}
.classroom #c-mic[aria-pressed="true"]{background:var(--danger);border-color:var(--danger)}
.classroom{max-width:none;margin:0;padding:0;height:100vh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
           background:var(--stage);color:var(--stage-text)}
.class-top{display:flex;align-items:center;gap:14px;padding:8px 16px;font-size:14px}
.class-top #class-section{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#class-time{font-variant-numeric:tabular-nums;color:#9aa1ad}
.pill{display:flex;align-items:center;gap:6px;padding:2px 10px;border-radius:99px;background:var(--stage-panel);font-size:12px;color:#9aa1ad}
.dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.pill[data-state="teaching"] .dot{background:var(--stage-accent)}
.pill[data-state="listening"]{color:var(--listen)}
.pill[data-state="listening"] .dot,.pill[data-state="thinking"] .dot,.pill[data-state="buffering"] .dot{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
@media (prefers-reduced-motion: reduce){.dot{animation:none !important}}

.board-wrap{position:relative;display:flex;gap:12px;min-height:0;padding:0 12px}
.board{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
/* the sheet of paper fills the space; the 16:9 drawing area is centred on it */
.board svg{flex:1;min-height:0;width:100%;background:var(--paper);border-radius:10px}
/* .paper is any drawing of the board: the classroom's, a thumbnail, the preview */
.board svg text,svg.paper text{font-family:var(--hand);dominant-baseline:central}
/* a pointer bobs towards what it points at until its sentence ends */
.board svg .pointer{animation:point .55s ease-in-out infinite alternate}
@keyframes point{to{transform:translate(var(--bx),var(--by))}}
@media (prefers-reduced-motion: reduce){.board svg .pointer{animation:none}}
/* the Professional board style: a standard font (its strokes arrive ruler-straight from the server) */
.board svg[data-style="clean"] text,svg.paper[data-style="clean"] text{
  font-family:"Segoe UI","Nirmala UI","Noto Sans Devanagari","Noto Sans Kannada",system-ui,sans-serif}
.board svg text.label,svg.paper text.label{text-anchor:middle}
svg.paper{display:block;width:100%;aspect-ratio:16/9;background:var(--paper)}
/* subtitles sit under the board, never over the writing */
.subs{min-height:3em;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px;
      color:#fff;font-size:clamp(16px,1.7vw,26px);line-height:1.4}
.banner{position:absolute;top:18px;left:50%;transform:translateX(-50%);padding:10px 22px;border-radius:99px;
        background:var(--listen);color:#111;font-weight:700;font-size:clamp(16px,1.6vw,24px);box-shadow:0 4px 20px rgba(0,0,0,.35)}
.banner[data-kind="think"]{background:var(--stage-panel);color:var(--stage-text)}
#cam{position:absolute;right:14px;top:14px;width:180px;border-radius:8px;border:2px solid var(--stage-line);transform:scaleX(-1)}
#cam.raised{border-color:var(--listen)}

.ask{width:300px;flex:none;display:flex;flex-direction:column;min-height:0;background:var(--stage-panel);border-radius:10px;padding:14px;gap:10px}
.ask-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;font-size:14px}
.ask-log .q{background:#2a2e37;border-radius:10px;padding:6px 10px}
.ask .muted{color:#9aa1ad}
.ask input{flex:1;min-width:0;background:var(--stage);border-color:var(--stage-line);color:var(--stage-text)}

.class-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;padding:10px 16px}
.classroom button{background:var(--stage-panel);border-color:var(--stage-line);color:var(--stage-text)}
.classroom button.primary{background:var(--stage-accent);border-color:var(--stage-accent);color:#fff}
.classroom button.danger{background:var(--danger);border-color:var(--danger)}
.classroom button[aria-pressed="true"]{background:#274a85;border-color:#274a85}
.gap{width:18px}

/* call-style round icon buttons; the label appears on hover */
.icon{position:relative;width:48px;height:48px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icon svg text{fill:currentColor;stroke:none;font:700 7.5px var(--stage-ui);text-anchor:middle}
.icon:hover{filter:brightness(1.25)}
.icon .when-on,.icon[aria-pressed="true"] .when-off{display:none}
.icon[aria-pressed="true"] .when-on{display:block}
.icon[data-tip]:hover::after,.icon[data-tip]:focus-visible::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
  white-space:nowrap;padding:4px 10px;border-radius:6px;background:#000;color:#fff;font-size:12px;pointer-events:none;z-index:5}
.classroom .icon.hand{width:60px;height:60px}
.classroom .icon.hand svg{width:28px;height:28px}
/* a hand that is up, until the teacher takes the question */
.classroom .icon.hand[aria-pressed="true"]{background:var(--stage-accent);border-color:var(--stage-accent);color:#fff}
/* ... and one that is off while the lecture opens: still pressable, to say why (classroom.js, handLater) */
.classroom .icon.hand[aria-disabled="true"]{opacity:.45;cursor:default}
.classroom .icon.hand[aria-disabled="true"]:hover{filter:none}
.classroom .icon.end{width:64px;border-radius:24px;background:var(--danger);border-color:var(--danger);color:#fff}
/* More: a small menu that opens above its button */
.more-wrap{position:relative;display:inline-flex}
.more-wrap .icon svg circle{fill:currentColor;stroke:none}
.class-menu{position:absolute;bottom:calc(100% + 10px);right:0;z-index:45;width:250px;display:flex;flex-direction:column;gap:8px;
  padding:8px;border-radius:12px;background:var(--stage-panel);border:1px solid var(--stage-line);box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
.class-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:8px;text-align:left;
  font-size:14px;font-weight:500;background:none}
.class-menu button:hover{background:var(--stage)}
.class-menu svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.class-menu small{padding:0 12px 4px;font-size:12px;line-height:1.45;color:#9aa1ad}
.class-menu small.done{color:#86efac}
/* subtitles and questions are plain toggles: lit when on. Pause is lit while paused. */
/* in full screen the controls get out of the way until the mouse moves */
.classroom.quiet .class-bar,.classroom.quiet .class-top{opacity:0;transition:opacity .4s}
.classroom.quiet{cursor:none}

/* ---------- phones and narrow windows ---------- */
/* a phone's browser bars come and go: "dvh" is the height that is really there */
@supports (height:100dvh){.shell,.classroom{height:100dvh}.connect{min-height:100dvh}}
/* a finger cannot point at a card to bring out its remove button, so there it is always shown */
@media (hover:none){.card-lecture .remove{opacity:1}}

@media (max-width:760px){
  /* text that is typed is 16px, below which a phone zooms the page in on the field */
  input[type=text],input[type=url],input[type=password],input[type=number],input[type=email],textarea,select,
  .composer .write{font-size:16px}
  h1{font-size:21px}
  .panel{padding:20px 18px}
  .connect{padding:16px;justify-content:flex-start;padding-top:max(16px,8vh)}
  .connect>form,.profile-page,.profile-cards,.profile-cards>*,.starting{width:100%}

  /* the side bar becomes a strip along the top: the logo, the credits used, the student's face ... */
  .shell{display:flex;flex-direction:column}
  .side{flex:none;flex-direction:row;align-items:center;gap:12px;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line);
        padding-top:max(10px,env(safe-area-inset-top))}
  .side .logo{padding:0}
  .side .tag{align-self:center}
  .usage{flex:none;width:92px;padding:0;gap:4px;font-size:11px}
  .usage .usage-line{justify-content:flex-end}
  .usage .usage-line>span{display:none}
  .school{width:auto;margin:0;padding:2px;border-radius:50%}
  .school .who{display:none}
  /* ... and its pages become a bar along the bottom, where a thumb reaches */
  .side nav{position:fixed;left:0;right:0;bottom:0;z-index:5;flex-direction:row;gap:0;background:var(--side);
            border-top:1px solid var(--line);padding:6px 6px max(6px,env(safe-area-inset-bottom))}
  .nav{flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 2px;font-size:11px;text-align:center}
  .nav svg{width:20px;height:20px}
  .pages{flex:1}
  .pages .view{gap:20px;padding:20px 16px 96px}

  .composer textarea.write{min-height:120px}
  .composer .write{padding-left:16px;padding-right:16px}
  .composer-foot{padding:12px 16px;gap:10px}
  .voice-panel{padding:16px;gap:16px}
  .shelves{padding-top:4px}
  .options{align-items:stretch}
  /* a row of choices too long for the screen goes on to a second line, and is then a box, not a pill */
  .explore .seg{border-radius:20px}

  /* pop-ups keep inside the screen, and scroll when they are taller than it */
  .modal{max-height:calc(100dvh - 24px);overflow-y:auto}
  .modal header,.modal footer{padding:16px 18px;flex-wrap:wrap}
  .modal form,.about,.explore,.modal .sent{padding:0 18px 18px}
  .modal>p{padding:0 18px}
  .check-row{padding:12px 18px;gap:12px}
  .explore-picks{gap:12px 20px}
  .topics{max-height:none;overflow:visible;padding:0}
  .stars button{font-size:32px}

  /* the classroom, held upright: the board keeps its shape at the top, the words under it, the questions below */
  .class-top{gap:8px;padding:8px 12px;font-size:13px;padding-top:max(8px,env(safe-area-inset-top))}
  .board-wrap{flex-direction:column;gap:8px;padding:0 8px;overflow-y:auto}
  .board{flex:none}
  .board svg{flex:none;aspect-ratio:16/9}
  .subs{min-height:4.2em;padding:0 8px;font-size:15px}
  .banner{top:10px;padding:6px 14px;font-size:14px;max-width:92%;text-align:center}
  #cam{width:84px;right:8px;top:8px}
  .ask{width:auto;flex:1;min-height:160px}
  .class-bar{gap:6px;padding:8px 8px max(8px,env(safe-area-inset-bottom))}
  .gap{width:2px}
  .icon{width:42px;height:42px}
  .icon svg{width:20px;height:20px}
  .classroom .icon.hand{width:52px;height:52px}
  .classroom .icon.hand svg{width:24px;height:24px}
  .classroom .icon.end{width:54px}
  /* watching for raised hands is for a classroom's camera, not for a phone in the hand */
  #c-camera{display:none}
}

/* a phone turned on its side, the best way to watch a class: nearly all of the screen is board */
@media (max-height:520px) and (orientation:landscape){
  .class-top{padding:4px 12px;font-size:12px}
  .board-wrap{gap:8px;padding:0 8px}
  .board{gap:2px}
  .subs{min-height:2.6em;font-size:14px;line-height:1.3;padding:0 8px}
  .banner{top:8px;padding:5px 14px;font-size:14px}
  #cam{width:84px;right:8px;top:8px}
  .ask{width:220px;padding:10px}
  .class-bar{gap:6px;padding:4px 8px}
  .gap{width:4px}
  .icon{width:36px;height:36px}
  .icon svg{width:18px;height:18px}
  .classroom .icon.hand{width:42px;height:42px}
  .classroom .icon.hand svg{width:20px;height:20px}
  .classroom .icon.end{width:50px}
  #c-camera{display:none}
}

/* the hint to turn a phone on its side: seen only on a touch screen held upright, in the classroom */
.turn{display:none}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  .classroom .turn{display:flex;align-items:center;justify-content:center;gap:8px;align-self:center;margin:4px 0 8px;
                   padding:8px 14px;border-radius:99px;font-size:13px;color:#c9ced8}
  .turn svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
}

/* ---------- the sign-in page: what ChalkPilot is, white on charcoal, and beside it the card that opens it ---------- */
.welcome{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);background:var(--bg)}
.pitch{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
       padding:clamp(24px,3.6vw,48px) clamp(28px,5vw,76px);color:var(--p-text);background:var(--p-bg);
       /* Its colours, as one set: the ground (a charcoal, a little lighter towards the top corner so that it is not
          flat), the words and the smaller words, the dots of the grid, what a chip or the board's frame is filled and
          edged with, and the logo. */
       --p-bg:radial-gradient(900px 560px at 92% -12%,rgba(255,255,255,.12),transparent 62%),#17181c;
       --p-text:#fff; --p-soft:rgba(255,255,255,.8); --p-dots:rgba(255,255,255,.1); --p-fill:rgba(255,255,255,.08); --p-edge:rgba(255,255,255,.15);
       --p-mark:#fff; --p-mark-in:#111; --p-shadow:0 30px 60px -26px rgba(0,0,0,.8)}
/* a faint grid of dots, as on squared paper, fading out towards the bottom */
.pitch::before{content:"";position:absolute;inset:0;background:radial-gradient(var(--p-dots) 1px,transparent 1.4px) 0 0/22px 22px;
               -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);mask-image:linear-gradient(180deg,#000,transparent 78%);pointer-events:none}
.pitch>*{position:relative;z-index:1}
.pitch .logo{font-size:18px}
.pitch .logo .mark{width:30px;height:30px}
.pitch .logo .mark rect{fill:var(--p-mark)}
.pitch .logo .mark path{stroke:var(--p-mark-in)}
.pitch-body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-block:auto}
.pitch h1{font-size:clamp(30px,3.5vw,50px);line-height:1.06;font-weight:600;letter-spacing:-.035em;max-width:16ch}
.pitch h1 em{font-style:normal}
.pitch-body>p{font-size:clamp(14px,1.15vw,17px);line-height:1.55;color:var(--p-soft);max-width:48ch}
/* the class in miniature: a sheet of the board's own paper, drawn on in the board's hand */
.demo{position:relative;width:min(100%,520px);margin:8px 0 4px;padding:8px;border-radius:18px;background:var(--p-fill);
      border:1px solid var(--p-edge);box-shadow:var(--p-shadow)}
.demo-board{border-radius:11px;background:var(--paper);overflow:hidden}
.demo-board svg{display:block;width:100%;height:auto;fill:none;stroke-linecap:round;stroke-linejoin:round}
.demo text{font-family:var(--hand);stroke:none}
.demo .d-title{font-size:26px;font-weight:700;fill:#2f6fde}
.demo .d-rule{stroke:#2f6fde;stroke-width:2.2;opacity:.55}
.demo .d-note{font-size:23px;fill:#22262e}
.demo .d-label{font-size:19px;fill:#22262e}
.demo .d-label.red{fill:#d1453b}
.demo .d-line{stroke:#22262e;stroke-width:3}
.demo .d-line.l3{stroke:#d1453b}
.demo .d-corner{stroke:#22262e;stroke-width:2}
.demo .d-tick{stroke:#2e9e5b;stroke-width:3.4}
/* it is drawn as a class draws: the lines one after another, then what is written beside them */
.demo .d-line,.demo .d-rule,.demo .d-corner,.demo .d-tick{stroke-dasharray:260;stroke-dashoffset:260;animation:d-draw .8s ease-out forwards}
.demo .d-rule{animation-delay:.3s}.demo .l1{animation-delay:.7s}.demo .l2{animation-delay:1.3s}.demo .l3{animation-delay:1.9s}
.demo .d-corner{animation-delay:2.5s}.demo .d-tick{animation-delay:4.3s}
.demo .d-note,.demo .d-label{opacity:0;animation:d-write .5s ease-out forwards}
.demo .d-label{animation-delay:2.7s}.demo .n1{animation-delay:3.1s}.demo .n2{animation-delay:3.5s}.demo .n3{animation-delay:3.9s}
@keyframes d-draw{to{stroke-dashoffset:0}}
@keyframes d-write{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
/* the classroom's own bar over the board: Live, what the class is on, and its clock */
.demo-top{display:flex;align-items:center;gap:10px;padding:2px 6px 9px;font-size:12.5px;color:var(--p-text)}
.demo-top .live{font-size:11px}
.demo-title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-time{color:var(--p-soft);font-variant-numeric:tabular-nums}
/* the teacher is heard: bars that rise and fall as a voice does, beside what is being said */
.demo-said{display:flex;align-items:center;gap:10px;margin:0;padding:11px 8px 4px;font-size:13px;line-height:1.4;color:var(--p-soft)}
.demo .wave{flex:none;display:flex;align-items:center;gap:2.5px;height:18px}
.demo .wave i{width:3px;height:100%;border-radius:2px;background:var(--p-text);transform-origin:center;animation:d-voice 1s ease-in-out infinite}
.demo .wave i:nth-child(1){animation-delay:-.9s}.demo .wave i:nth-child(2){animation-delay:-.6s}.demo .wave i:nth-child(3){animation-delay:-.3s}
.demo .wave i:nth-child(4){animation-delay:-.75s}.demo .wave i:nth-child(5){animation-delay:-.15s}
@keyframes d-voice{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
/* ... and the student is too: a hand goes up, and the doubt is asked aloud */
.demo-talk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 8px 4px;animation:d-hand .5s ease-out 4.8s backwards}
.demo-hand,.demo-you{display:flex;align-items:center;gap:6px;padding:5px 11px 5px 9px;border-radius:99px;font-size:12px}
.demo-hand{font-weight:600;color:#3b2a05;background:#fbbf24}
.demo-you{min-width:0;color:var(--p-text);background:var(--p-fill);border:1px solid var(--p-edge)}
.demo-talk svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.demo-you svg{animation:d-speak 1.3s ease-in-out 5.3s infinite}
@keyframes d-speak{50%{transform:scale(1.25);opacity:.55}}
@keyframes d-hand{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){
  .demo .d-line,.demo .d-rule,.demo .d-corner,.demo .d-tick{animation:none;stroke-dashoffset:0}
  .demo .d-note,.demo .d-label{animation:none;opacity:1}
  .demo .wave i,.demo-talk,.demo-you svg{animation:none}
}
/* the other half is the grey of the app's pages, and the way in a white card standing off it, as a panel does there */
.welcome-form{position:relative;display:flex;align-items:center;justify-content:center;padding:32px 24px;background:var(--bg);
              border-left:1px solid var(--line-strong)}
.welcome-form .signin{width:min(420px,100%);gap:18px;padding:36px 34px 28px;border-radius:22px;background:var(--panel);
                      border:1px solid rgba(0,0,0,.05);box-shadow:var(--shadow-up);animation:pop .3s cubic-bezier(.2,.9,.3,1.1) backwards}
.signin-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.signin-head .mark{width:46px;height:46px;margin-bottom:8px;filter:drop-shadow(0 10px 16px rgba(10,10,10,.22))}
.signin-head .mark rect{fill:var(--ink)}
.signin-head .mark path{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.welcome-form h2{font-size:23px;letter-spacing:-.025em}
.signin-head p{max-width:32ch;font-size:14px}
/* that it is free: one slim green line under the button, a green that says "yours, at no cost" */
.offer{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:-6px;padding:8px 12px;border-radius:10px;
       font-size:12.5px;line-height:1.4;color:#0a5c38;background:#ecf9f2;border:1px solid #c9eedb}
.offer svg{flex:none;width:16px;height:16px;padding:2px;border-radius:50%;background:#0a7c4a;fill:none;stroke:#fff;stroke-width:3;
           stroke-linecap:round;stroke-linejoin:round}
.offer b{font-weight:700;font-variant-numeric:tabular-nums}
/* the demo, under the sign-in: one slim row to tap, quieter than Google's button above it */
.welcome-form a.demo-try{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:10px;border:1px solid var(--line-strong);
                         color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}
.welcome-form a.demo-try:hover{border-color:var(--text);background:var(--soft)}
.demo-try svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.demo-try svg path{fill:currentColor;stroke:none}
.demo-try svg.go{width:16px;height:16px;margin-left:auto;color:var(--muted);transition:transform .15s}
.demo-try svg.go path{fill:none;stroke:currentColor}
.demo-try:hover svg.go{transform:translateX(3px);color:var(--text)}
.demo-try span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;line-height:1.3}
.demo-try b{font-size:13.5px;font-weight:600}
.demo-try small{font-size:12px;color:var(--muted)}
/* beside the board: that it is free every day */
.pitch-body>p.pitch-free{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 12px;border-radius:99px;font-size:13.5px;
                         font-weight:500;color:var(--p-text);background:var(--p-fill);border:1px solid var(--p-edge)}
.pitch-free b{font-weight:700}
.pitch-free .dot{flex:none;width:8px;height:8px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
/* the board in miniature with the ad reel beside it: a phone, tilted a little, its still behind a play button that
   pulses; straightened and lifted under the pointer. Opened in a pop-up the reel's own shape. */
.showcase{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);width:100%}
.showcase .demo{flex:1 1 0;min-width:0;max-width:520px}
.reel-open{position:relative;flex:none;width:clamp(112px,9vw,138px);aspect-ratio:9/16;padding:0;font:inherit;color:#fff;
           border-radius:20px;border:4px solid #2a2c33;background:#000;overflow:hidden;cursor:pointer;
           box-shadow:0 0 0 1px rgba(255,255,255,.14),var(--p-shadow);transform:rotate(4deg);
           transition:transform .25s cubic-bezier(.2,.9,.3,1.2),box-shadow .25s}
.reel-open:hover,.reel-open:focus-visible{transform:rotate(0) translateY(-4px) scale(1.04);background:#000;
                                          box-shadow:0 0 0 1px rgba(255,255,255,.3),0 34px 60px -20px rgba(0,0,0,.9)}
.reel-open:active{transform:rotate(0) scale(1.01)}
.reel-thumb{position:absolute;inset:0}
.reel-thumb img{display:block;width:100%;height:100%;object-fit:cover}
/* darker towards the bottom, where the words are */
.reel-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 40%,rgba(0,0,0,.78))}
.reel-play{position:absolute;z-index:1;left:50%;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;
           border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.4);animation:reel-pulse 2s ease-out infinite}
.reel-play svg{width:20px;height:20px;margin-left:2px;fill:#111}
@keyframes reel-pulse{0%{box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 0 rgba(255,255,255,.55)}
                      70%,100%{box-shadow:0 6px 18px rgba(0,0,0,.4),0 0 0 16px rgba(255,255,255,0)}}
.reel-words{position:absolute;z-index:1;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding:0 10px 11px;
            text-align:left;line-height:1.25}
.reel-words b{font-size:13px;font-weight:700;letter-spacing:-.01em}
.reel-words small{font-size:11px;color:rgba(255,255,255,.75)}
@media (prefers-reduced-motion: reduce){.reel-play{animation:none}.reel-open,.reel-open:hover{transform:none}}
.reel-more{display:none}
/* too narrow for both side by side: the reel is a banner under the board, as wide as it. Its still fills it (the
   notebook page of its opening), darkened from the left, where the words are; the play button on the right. */
@media (max-width:1100px){
  .showcase{flex-direction:column;align-items:stretch;gap:12px;width:min(100%,520px)}
  .showcase .demo{flex:none;width:100%;max-width:none}
  .reel-open{width:100%;height:clamp(92px,24vw,112px);aspect-ratio:auto;border-radius:16px;border:1px solid var(--p-edge);
             transform:none;box-shadow:var(--p-shadow)}
  .reel-open:hover,.reel-open:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,255,255,.25),var(--p-shadow)}
  .reel-open:active{transform:scale(.99)}
  .reel-thumb img{object-position:center 28%}
  .reel-thumb::after{background:linear-gradient(90deg,rgba(10,10,12,.92) 0%,rgba(10,10,12,.78) 45%,rgba(10,10,12,.25) 100%)}
  .reel-words{top:50%;bottom:auto;right:84px;padding:0 0 0 18px;transform:translateY(-50%);line-height:1.3}
  .reel-words b{font-size:17px;letter-spacing:-.02em}
  .reel-words small{font-size:12.5px;color:rgba(255,255,255,.8)}
  .reel-more{display:inline}
  .reel-play{left:auto;right:18px;width:50px;height:50px;margin:-25px 0 0}
  .reel-play svg{width:22px;height:22px}
}
@media (max-width:760px){.showcase{width:100%}}
.reel{padding:0;border:0;border-radius:18px;background:#000;overflow:visible;max-width:none;max-height:none}
.reel::backdrop{background:rgba(0,0,0,.75)}
.reel video{display:block;height:min(86vh,calc(92vw * 16 / 9));aspect-ratio:9/16;border-radius:18px;background:#000}
.reel-close{position:absolute;top:-14px;right:-14px;z-index:1;display:grid;place-items:center;width:36px;height:36px;padding:0;
            border-radius:50%;border:0;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.reel-close svg{width:18px;height:18px;fill:none;stroke:#111;stroke-width:2.2;stroke-linecap:round}
@supports (height:100dvh){.reel video{height:min(86dvh,calc(92vw * 16 / 9))}}
@media (max-width:760px){.reel-close{top:8px;right:8px}}
.signin-legal{margin-top:-6px;text-align:center;font-size:12px;line-height:1.5;color:var(--muted)}
.welcome-form .signin-legal a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-strong)}
.welcome-form .signin-legal a:hover{color:var(--text)}
.signin-or{display:flex;align-items:center;gap:12px;margin:2px 0 -6px;font-size:12px;color:var(--muted)}
.signin-or::before,.signin-or::after{content:"";flex:1;height:1px;background:var(--line)}
.signin-key{text-align:center}
.welcome-form form{width:100%;gap:14px}
.welcome-form input{padding:12px 14px;font-size:15px}
.welcome-form .small{font-size:13px}
.welcome-form a{color:var(--text);font-weight:500;text-decoration-color:var(--line-strong);text-underline-offset:3px}
@supports (height:100dvh){.welcome{min-height:100dvh}}
/* on a phone the dark half is a band across the top: the board is still drawn in it */
@media (max-width:760px){
  .welcome{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .pitch{gap:18px;padding:20px 20px 24px;padding-top:max(20px,env(safe-area-inset-top))}
  .pitch h1{font-size:29px;max-width:none}
  .pitch-body{gap:12px}
  .demo{width:100%;margin:6px 0 0;padding:6px;border-radius:14px}
  .demo-board{border-radius:9px}
  .demo-said{font-size:12px;padding:9px 6px 3px}
  .demo-top{padding:1px 4px 7px;font-size:12px}
  .demo-talk{padding:7px 6px 3px}
  .demo-hand,.demo-you{font-size:11px}
  .welcome-form{align-items:flex-start;padding:22px 16px 32px;border-left:0;border-top:1px solid var(--line-strong)}
  .welcome-form .signin{padding:26px 20px 22px;border-radius:18px}
  .welcome-form input{font-size:16px}
}

/* ---------- the connection is lost: the class is stopped, and says so over the board and the questions ---------- */
.lost{position:absolute;inset:0 12px;z-index:4;display:flex;align-items:center;justify-content:center;padding:16px;
      border-radius:10px;background:rgba(0,0,0,.6)}
.lost-card{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(380px,100%);padding:26px 24px;border-radius:16px;
           background:var(--panel);color:var(--text);text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.4)}
.lost-card svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lost-card h2{font-size:19px}
.lost-card p{color:var(--muted);line-height:1.5}
.lost-card button{margin-top:6px;min-width:150px}
.lost-card .error:empty{display:none}
.lost-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lost-actions button{min-width:130px}
@media (max-height:520px) and (orientation:landscape){
  .lost-card{gap:6px;padding:14px 18px}
  .lost-card svg{width:24px;height:24px}
}

/* ---------- the Classes page, and the way to it from the home page ---------- */
.shelf-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}

/* ---------- analytics: the streak and what is finished, a row of numbers, then a bar for each day ---------- */
:root{--c-lecture:#4f46e5; --c-doubt:#f59e0b; --c-good:#10b981; --c-flame:#f97316; --c-sky:#0ea5e9}
.an-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:20px}
/* the streak: the one dark, coloured thing on the page */
.streak{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:26px 28px;
        border-radius:var(--r);color:#fff;background:linear-gradient(125deg,#0b0b12 0%,#1e1b4b 55%,#4338ca 120%);box-shadow:var(--shadow)}
.streak::after{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;
               background:radial-gradient(circle,rgba(249,115,22,.35),transparent 65%);pointer-events:none}
.streak-main{position:relative;z-index:1;display:flex;align-items:center;gap:16px}
.flame{flex:none;display:flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:16px;
       background:linear-gradient(160deg,#fb923c,#ef4444);box-shadow:0 8px 20px -6px rgba(249,115,22,.7)}
.flame svg{width:28px;height:28px;fill:#fff;stroke:none}
.streak b{display:block;font-size:28px;font-weight:600;letter-spacing:-.025em;line-height:1.15}
.streak p{color:rgba(255,255,255,.72);font-size:14px;margin-top:2px}
.week{position:relative;z-index:1;display:flex;justify-content:space-between;gap:6px}
.week span{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:rgba(255,255,255,.6)}
.week i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);
        border:1.5px solid transparent}
.week i svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.week .on i{background:linear-gradient(160deg,#fb923c,#ef4444)}
.week .on i svg{opacity:1}
.week .today{color:#fff;font-weight:600}
.week .today:not(.on) i{border-color:rgba(255,255,255,.55);border-style:dashed}
/* a ring filled as far as a share of something, with the share in its middle */
.ring-card{display:flex;flex-direction:column;gap:14px;padding:22px 24px}
.ring-row{display:flex;align-items:center;gap:20px;flex:1}
.ring{position:relative;flex:none;width:104px;height:104px;--part:var(--c-lecture);--rest:var(--c-doubt)}
.ring.good{--part:var(--c-good);--rest:var(--soft)}
.ring.empty{--rest:var(--soft)}
.ring svg{width:100%;height:100%;fill:none;stroke-width:11}
.ring .rest{stroke:var(--rest)}
.ring .part{stroke:var(--part);stroke-linecap:round;transition:stroke-dasharray .7s cubic-bezier(.2,.8,.2,1)}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-mid b{font-size:21px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ring-mid small{font-size:10px;color:var(--muted)}
.ring-legend{display:flex;flex-direction:column;gap:10px;min-width:0;font-size:13px;color:var(--muted)}
.ring-legend span{display:flex;flex-direction:column}
.ring-legend b{color:var(--text);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.ring-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:var(--dot)}
/* the numbers: each with its own colour, in a small square beside it */
.stat-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{display:flex;align-items:center;gap:14px;min-width:0;padding:18px 20px;background:var(--panel);border:1px solid rgba(0,0,0,.05);
      border-radius:var(--r);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.stat .chip{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;
            color:var(--tint);background:color-mix(in srgb,var(--tint) 13%,transparent)}
.stat .chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat div{display:flex;flex-direction:column;min-width:0}
.stat span,.stat small{font-size:12px;color:var(--muted)}
.stat b{font-size:23px;font-weight:600;letter-spacing:-.02em;line-height:1.3;font-variant-numeric:tabular-nums}
.chart-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:-8px}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.chart-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;background:var(--c-lecture)}
.legend i.two{background:var(--c-doubt)}
.note{font-size:12px}
/* A column for each day: its number, its bar (lectures below, doubt sessions above), the day of the month.
   Pointing at a day says what is in it. */
.bars{display:flex;align-items:stretch;gap:6px;height:200px}
.bars .bar{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.bars .value,.bars .day{font-size:10px;line-height:12px;height:12px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.bars .col{flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--line)}
.bars .pile{width:100%;max-width:26px;min-height:5px;display:flex;flex-direction:column;overflow:hidden;border-radius:7px 7px 2px 2px;
            transform-origin:bottom;animation:rise .6s cubic-bezier(.2,.8,.2,1) both;transition:filter .15s}
.bars .pile i{display:block;min-height:0;background:linear-gradient(180deg,#6366f1,var(--c-lecture))}
.bars .pile i.two{background:linear-gradient(180deg,#fbbf24,var(--c-doubt))}
.bars .none .pile{height:5px;background:var(--soft);animation:none}
.bars .bar:hover .pile{filter:brightness(1.12)}
.bars .bar:hover .col{background:linear-gradient(180deg,transparent,var(--soft))}
.bars .bar.today .day{color:var(--text);font-weight:700}
@keyframes rise{from{transform:scaleY(0)}}
.bars .bar::after{content:attr(data-tip);position:absolute;z-index:3;left:50%;bottom:calc(100% - 4px);transform:translateX(-50%) translateY(4px);
                  padding:8px 11px;border-radius:9px;background:var(--ink);color:#fff;font-size:11px;line-height:1.5;white-space:pre;
                  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.bars .bar:hover::after{opacity:1;transform:translateX(-50%)}
.bars .bar.first::after{left:0;transform:translateY(4px)}
.bars .bar.first:hover::after{transform:none}
.bars .bar.last::after{left:auto;right:0;transform:translateY(4px)}
.bars .bar.last:hover::after{transform:none}
/* thirty days are too many for a number on each: every other day is named, and the numbers are said when pointed at */
.bars[data-days="30"]{gap:3px}
.bars[data-days="30"] .value,.bars[data-days="30"] .bar:nth-child(odd) .day{visibility:hidden}
@media (prefers-reduced-motion: reduce){.bars .pile{animation:none}.ring .part{transition:none}}
@media (max-width:1180px){
  .an-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .streak{grid-column:1 / -1}
  .stat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:940px){.stat-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .an-top,.stat-tiles{gap:10px}
  .streak{padding:20px 18px;gap:18px}
  .streak b{font-size:23px}
  .flame{width:46px;height:46px;border-radius:14px}
  .week i{width:28px;height:28px}
  .ring-card{padding:16px 14px;gap:10px}
  .ring-card h2{font-size:14px}
  .ring-row{flex-direction:column;align-items:flex-start;gap:12px}
  .ring{width:84px;height:84px;align-self:center}
  .ring-mid b{font-size:17px}
  .ring-legend{gap:6px;font-size:12px}
  .ring-legend b{font-size:14px}
  .stat{padding:12px;gap:10px}
  .stat .chip{width:36px;height:36px;border-radius:11px}
  .stat .chip svg{width:18px;height:18px}
  .stat b{font-size:18px}
  .stat small{display:none}
  .bars{height:160px;gap:3px}
  .bars[data-days="30"]{gap:2px}
  .bars .value,.bars .day{font-size:9px}
  .lost{inset:0 8px}
  /* six pages share the bar along the bottom: their names are a little smaller, and never run into each other */
  .nav{font-size:10px;min-width:0;white-space:nowrap}
}

/* ---------- the way to all the classes, and the archive ---------- */
.see-all{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 14px;font-size:13px}
.see-all svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.see-all:hover svg{transform:translateX(3px)}
.shelf-head{align-items:center}
.archive-note{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-s);background:#fff7e6;color:#8a5a00;font-size:13px}
.archive-note svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-lecture.archived .thumb{opacity:.6;filter:grayscale(1)}

/* ---------- quiz: the finished lectures in a list, and the quiz on one of them, a question at a time ---------- */
.quiz-home,.quiz-run{display:flex;flex-direction:column;gap:24px}
.quiz-run{width:100%;max-width:760px;align-items:flex-start}
.quiz-list{display:flex;flex-direction:column;gap:12px}
.quiz-row{display:flex;align-items:center;gap:16px;padding:16px 20px;background:var(--panel);border:1px solid rgba(0,0,0,.05);
          border-radius:var(--r);box-shadow:var(--shadow)}
.quiz-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.quiz-row b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quiz-row .meta{font-size:12px;color:var(--muted)}
.quiz-row button{flex:none;white-space:nowrap}
/* the latest score: green when most of it was right, amber otherwise */
.quiz-score{flex:none;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
            color:#8a5a00;background:#fff3d6}
.quiz-score.good{color:#04663c;background:#dcf7ea}
.quiz-card{width:100%;padding:28px}
.quiz-wait{display:flex;flex-direction:column;align-items:center;gap:10px;padding:36px 0;text-align:center}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--soft);border-top-color:var(--c-lecture);animation:turn .8s linear infinite}
.quiz-question{display:flex;flex-direction:column;gap:18px}
.quiz-top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font-size:13px}
.quiz-top span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quiz-question .credit-meter i{background:var(--c-lecture)}
.quiz-question h2{font-size:20px;line-height:1.4;letter-spacing:-.01em}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;border-radius:var(--r-s);text-align:left;font-size:15px;
             font-weight:500;line-height:1.4}
.quiz-option small{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
                   background:var(--soft);color:var(--muted);font-size:12px;font-weight:600}
.quiz-option:disabled{opacity:1}
.quiz-option:disabled:not(.right):not(.wrong){color:var(--muted)}
.quiz-option.right{border-color:var(--c-good);background:#e8faf2}
.quiz-option.right small{background:var(--c-good);color:#fff}
.quiz-option.wrong{border-color:#ef4444;background:#fdecec}
.quiz-option.wrong small{background:#ef4444;color:#fff}
.quiz-why{padding:14px 16px;border-radius:var(--r-s);background:#fdecec;border-left:4px solid #ef4444}
.quiz-why[data-right="yes"]{background:#e8faf2;border-left-color:var(--c-good)}
.quiz-why b{display:block;margin-bottom:4px}
.quiz-why p{line-height:1.55}
.quiz-result{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 0;text-align:center}
.quiz-result>b{font-size:56px;font-weight:600;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.quiz-result .credit-meter{width:min(320px,100%);height:8px}
.quiz-result .credit-meter i{background:var(--c-good)}
.quiz-result p{max-width:44ch;color:var(--muted);line-height:1.5}
.quiz-result .row{justify-content:center;margin-top:10px}
/* six numbers on the Analytics page: three to a row */
.stat-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1180px){.stat-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .quiz-row{flex-wrap:wrap;padding:14px 16px;gap:10px 12px}
  .quiz-row>div{flex-basis:100%}
  .quiz-row b{white-space:normal}
  .quiz-row button{margin-left:auto}
  .quiz-card{padding:18px 16px}
  .quiz-question h2{font-size:18px}
  .quiz-result>b{font-size:46px}
  /* seven pages share the bar along the bottom */
  .nav{padding:6px 0}
  .wide-only{display:none}
  .cap{text-transform:capitalize}
}

/* ---------- the quizzes as short cards, two or three to a row: a small picture, the name, the latest score ---------- */
.quiz-list{display:block}
.quiz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:14px}
.quiz-mini{display:flex;align-items:center;gap:14px;min-width:0;padding:10px 14px 10px 10px;background:var(--panel);border:1px solid rgba(0,0,0,.05);
           border-radius:var(--r);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.quiz-mini:hover{transform:translateY(-2px);box-shadow:var(--shadow-up)}
.quiz-mini .thumb{flex:none;width:104px;aspect-ratio:16/9;border-radius:9px;overflow:hidden;background:var(--paper);border:1px solid var(--line)}
.quiz-mini .words{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.quiz-mini .words b{font-size:14px;font-weight:600;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.quiz-mini .meta{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quiz-mini>button{flex:none;font-size:12px;padding:7px 14px;white-space:nowrap}
.quiz-badge{flex:none;position:relative;display:flex;align-items:center;justify-content:center;width:42px;height:42px;--part:var(--c-doubt)}
.quiz-badge.good{--part:var(--c-good)}
.quiz-badge svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-width:3.6}
.quiz-badge .rest{stroke:var(--soft)}
.quiz-badge .part{stroke:var(--part);stroke-linecap:round}
.quiz-badge b{position:relative;font-size:11px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.quiz-badge.new{width:auto;height:auto;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,var(--c-lecture) 12%,transparent);
                color:var(--c-lecture);font-size:11px;font-weight:600}
@media (max-width:760px){
  .quiz-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .quiz-mini{gap:10px;padding:8px 10px 8px 8px}
  .quiz-mini .thumb{width:72px}
  .quiz-mini .meta{white-space:normal}
  .quiz-mini .quiz-badge.new{display:none}
  .quiz-mini .quiz-badge{width:36px;height:36px}
  .quiz-mini>button{padding:6px 11px}
}

/* the quiz being written or taken stands in the middle of the page, across and down */
#view-quiz{min-height:100%}
.quiz-run{margin:auto}

/* ---------- notes: a ruled page, written by hand ---------- */
.notes-run{display:flex;flex-direction:column;align-items:flex-start;gap:20px;width:100%;max-width:860px;margin:0 auto}
.notes-run>.panel{width:100%}
/* The page: blue rules every --rule, a red margin, ink the blue of a fountain pen. Everything written on it keeps
   to the rules: each line is one rule high, and the gaps between things are whole rules. */
.notebook{--rule:34px;--ink:#1c2f6b;--margin:76px;position:relative;width:100%;padding:calc(var(--rule) * 2) 44px calc(var(--rule) * 2) calc(var(--margin) + 22px);
          font-family:var(--hand);font-size:20px;line-height:var(--rule);color:var(--ink);border-radius:4px 10px 10px 4px;
          background:linear-gradient(90deg,transparent var(--margin),#f2a3a3 var(--margin),#f2a3a3 calc(var(--margin) + 2px),transparent calc(var(--margin) + 2px)),
                     repeating-linear-gradient(#fffdf6 0,#fffdf6 calc(var(--rule) - 1px),#c9d8ee calc(var(--rule) - 1px),#c9d8ee var(--rule));
          box-shadow:0 1px 1px rgba(0,0,0,.06),0 10px 30px -10px rgba(0,0,0,.25);animation:pop .3s cubic-bezier(.2,.9,.3,1.15) backwards}
/* the holes punched down its side */
.notebook::before{content:"";position:absolute;left:26px;top:0;bottom:0;width:18px;
                  background:radial-gradient(circle at 9px 9px,var(--bg) 8px,rgba(0,0,0,.12) 9px,transparent 10px) 0 60px / 18px 33.33% repeat-y}
.notebook>*{margin:0}
.notebook h2{font-family:var(--hand);font-size:32px;font-weight:700;line-height:calc(var(--rule) * 2);letter-spacing:0;color:#101c47;
             text-decoration:underline;text-decoration-color:#e05252;text-decoration-thickness:2px;text-underline-offset:6px}
.notebook .from{font-size:16px;color:#6b7aa8;margin-bottom:var(--rule)}
/* a heading, run over with a highlighter */
.notebook h3{font-family:var(--hand);font-size:23px;font-weight:700;line-height:var(--rule);margin-top:var(--rule);color:#101c47}
.notebook h3 span{padding:0 6px;margin-left:-6px;background:linear-gradient(transparent 46%,#ffe57a 46%,#ffe57a 92%,transparent 92%)}
.notebook ul{list-style:none;padding:0}
.notebook li{position:relative;padding-left:26px}
.notebook li::before{content:"";position:absolute;left:4px;top:calc(var(--rule) / 2 - 2px);width:11px;height:3px;border-radius:3px;background:#e05252;transform:rotate(-8deg)}
/* a formula: boxed in red, with a line that is not quite straight */
.notebook .formula{display:flex;flex-direction:column;align-items:flex-start;margin:var(--rule) 0 0}
.notebook .formula b{padding:0 20px;font-size:24px;font-weight:700;line-height:calc(var(--rule) * 2 - 4px);color:#b3261e;background:rgba(255,253,246,.9);
                     border:2px solid #d04a43;border-radius:255px 14px 225px 14px / 14px 225px 14px 255px;transform:rotate(-.6deg)}
.notebook .formula small{font-size:17px;line-height:var(--rule);color:#4a5a8f}
/* a worked example, down a green line */
.notebook .example{margin-top:var(--rule);padding-left:18px;border-left:3px solid #2e9e6b;border-radius:2px}
.notebook .example b{display:block;font-weight:700;color:#1d7a50}
.notebook .example p{margin:0}
/* what not to forget: a note stuck on the page */
.notebook .remember{position:relative;max-width:520px;margin:var(--rule) 0 0 8px;padding:calc(var(--rule) / 2) 20px calc(var(--rule) / 2);line-height:var(--rule);color:#5a4500;
                    background:#fff2a8;box-shadow:2px 6px 12px -4px rgba(0,0,0,.3);transform:rotate(-1.1deg)}
.notebook .remember::before{content:"";position:absolute;left:50%;top:-9px;width:86px;height:20px;margin-left:-43px;background:rgba(190,205,230,.75);transform:rotate(2deg)}
.notebook .remember b{font-weight:700;color:#b3261e;margin-right:8px}
.quiz-mini .tag-ready{flex:none;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;color:#04663c;background:#dcf7ea}
@media (max-width:760px){
  .notebook{--rule:30px;--margin:34px;padding:calc(var(--rule) * 2) 16px calc(var(--rule) * 2) calc(var(--margin) + 12px);font-size:17px}
  .notebook::before{display:none}
  .notebook h2{font-size:25px}
  .notebook h3{font-size:20px}
  .notebook .formula b{font-size:20px;padding:0 12px}
  .notebook li{padding-left:20px}
  .quiz-mini .tag-ready{display:none}
  /* eight pages share the bar along the bottom */
  .nav{font-size:9.5px;gap:2px}
  .side nav{padding-left:2px;padding-right:2px}
}
@media print{
  .side,.notes-run>.link,.page-head{display:none !important}
  .shell{display:block;height:auto}
  .pages{overflow:visible}
  .notebook{box-shadow:none;max-width:none}
}

/* ---------- the notes on sheets the size of a page (A4), one shown at a time ---------- */
.notes-run{max-width:794px}
.notes-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:34px}
.notes-bar .pager button{padding:5px 12px}
.sheets{width:100%}
.notebook{aspect-ratio:210 / 297;overflow:hidden}
.notebook .point{position:relative;padding-left:26px}
.notebook .point::before{content:"";position:absolute;left:4px;top:calc(var(--rule) / 2 - 2px);width:11px;height:3px;border-radius:3px;background:#e05252;transform:rotate(-8deg)}
.notebook .folio{position:absolute;right:28px;bottom:calc(var(--rule) / 2 - 2px);font-size:15px;line-height:var(--rule);color:#6b7aa8}
/* the sheet starts with a heading: no empty rule above it */
.notebook>h3:first-child,.notebook>.formula:first-child,.notebook>.example:first-child,.notebook>.remember:first-child{margin-top:0}

/* ---------- the notes of each lecture, as small sheets of ruled paper ---------- */
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px}
.note-tile{--rule:28px;position:relative;display:flex;flex-direction:column;min-height:196px;padding:var(--rule) 16px 16px 40px;border-radius:3px 10px 10px 3px;
           background:linear-gradient(90deg,transparent 26px,#f2a3a3 26px,#f2a3a3 27.5px,transparent 27.5px),
                      repeating-linear-gradient(#fffdf6 0,#fffdf6 calc(var(--rule) - 1px),#d3dff0 calc(var(--rule) - 1px),#d3dff0 var(--rule));
           box-shadow:0 1px 1px rgba(0,0,0,.06),0 8px 20px -10px rgba(0,0,0,.3);transition:transform .2s,box-shadow .2s}
.note-tile:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:0 2px 2px rgba(0,0,0,.06),0 16px 28px -12px rgba(0,0,0,.35)}
/* the corner of the sheet, turned down */
.note-tile::after{content:"";position:absolute;right:0;top:0;width:26px;height:26px;border-radius:0 10px 0 6px;
                  background:linear-gradient(225deg,var(--bg) 50%,#e9e4d2 50%);box-shadow:-2px 2px 3px rgba(0,0,0,.08)}
.note-tile b{font-family:var(--hand);font-size:19px;font-weight:700;line-height:var(--rule);color:#16255c;overflow:hidden;display:-webkit-box;
             -webkit-line-clamp:3;-webkit-box-orient:vertical}
.note-tile .meta{font-family:var(--hand);font-size:15px;line-height:var(--rule);color:#6b7aa8}
.note-tile button{align-self:flex-start;margin-top:auto;font-size:12px;padding:6px 14px}
/* not written yet: a sheet still to be filled */
.note-tile.blank{background:none;border:1.5px dashed var(--line-strong);box-shadow:none}
.note-tile.blank::after{display:none}
.note-tile.blank b{color:var(--text)}
.note-tile.blank .meta{color:var(--muted)}
@media (max-width:760px){
  .notes-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .note-tile{min-height:170px;padding-left:34px;padding-right:10px}
  .note-tile b{font-size:17px}
  .notebook .point{padding-left:20px}
  .notebook .folio{right:14px}
}
@media print{.notes-bar{display:none !important}.notebook{aspect-ratio:auto}}

/* ---------- a figure from the lecture's board, pasted into the notes like a cutting ---------- */
.notebook .sketch{position:relative;display:inline-flex;flex-direction:column;max-width:100%;margin:var(--rule) 0 0 4px;padding:8px 8px 0;
                  background:#fff;box-shadow:1px 5px 12px -4px rgba(0,0,0,.3);transform:rotate(.5deg)}
.notebook .sketch::before{content:"";position:absolute;left:50%;top:-10px;width:92px;height:20px;margin-left:-46px;background:rgba(190,205,230,.75);transform:rotate(-2deg)}
.notebook .sketch svg.paper{display:block;width:auto;max-width:100%;height:calc(var(--rule) * 9 - 16px);aspect-ratio:760 / 576;background:var(--paper);border-radius:2px}
.notebook .sketch figcaption{font-size:17px;line-height:var(--rule);color:#4a5a8f;text-align:center}
.notebook>.sketch:first-child{margin-top:8px}
@media (max-width:760px){
  .notebook .sketch svg.paper{height:calc(var(--rule) * 7 - 16px)}
  .notebook .sketch figcaption{font-size:15px}
  /* on a phone a sheet is as tall as the screen has room for: an A4 sheet that narrow holds too little for a figure */
  .notebook{aspect-ratio:auto;height:max(480px,calc(100dvh - 240px))}
}

/* ---------- on a phone the pages are in a menu that slides in from the left (it replaces the bar along the bottom) ---------- */
.menu-button,.menu-shade{display:none}
@media (max-width:760px){
  .menu-button{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:10px;
               background:none;box-shadow:none;margin-left:-6px}
  .menu-button:hover,.menu-button:active{background:var(--soft);box-shadow:none;transform:none}
  .menu-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
  .side{gap:8px}
  .side nav{position:fixed;left:0;top:0;bottom:0;right:auto;z-index:20;width:min(280px,82vw);flex-direction:column;gap:4px;
            padding:max(18px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom));border-top:0;border-right:1px solid var(--line);
            background:var(--side);box-shadow:none;overflow-y:auto;transform:translateX(-102%);visibility:hidden;
            transition:transform .22s cubic-bezier(.2,.8,.2,1),visibility 0s .22s}
  .side nav::before{content:"Menu";padding:6px 12px 10px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .menu-open .side nav{transform:none;visibility:visible;box-shadow:0 0 40px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
  .menu-shade{display:block;position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .22s}
  .menu-open .menu-shade{opacity:1;pointer-events:auto}
  /* in the menu a page is a row again: its sign and its name in full */
  .nav{flex:none;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px;font-size:15px;text-align:left}
  .nav svg{width:20px;height:20px}
  .wide-only{display:inline}
  .cap{text-transform:none}
  .pages .view{padding-bottom:40px}
}

/* on a phone the credits left are one line: the number, never broken in two, and the bar beside it */
@media (max-width:760px){
  .usage{flex-direction:row;align-items:center;width:auto;min-width:0;gap:8px}
  .usage .usage-line{flex:none}
  .usage b{white-space:nowrap}
  .usage .credit-meter{flex:1 1 40px;min-width:20px;max-width:40px}
}

/* on a phone the bar beside the credits left is as long as it was when it lay under them */
@media (max-width:760px){
  .usage .credit-meter{flex:none;width:64px;min-width:0;max-width:none}
}

/* today's free credits: a green bar that empties through the day, in the side bar and on the Usage page */
.free .credit-meter i{background:var(--c-good)}
/* a bar of what is left, by how much is: green, then amber, then red when little is (console.js, meter) */
.credit-meter i[data-level="full"]{background:var(--c-good)}
.credit-meter i[data-level="half"]{background:#f59e0b}
.credit-meter i[data-level="low"]{background:var(--error)}
/* on a phone the strip has room for one: today's free credits while some are left, then the student's own */
@media (max-width:760px){
  #side-free.spent{display:none}
  #side-free:not([hidden]):not(.spent)~#side-usage{display:none}
}

/* ---------- "full screen" where the browser has none to give (an iPhone): the board has the whole page ---------- */
.classroom.full{position:fixed;inset:0;z-index:40;grid-template-rows:minmax(0,1fr)}
.classroom.full .class-top,.classroom.full .turn{display:none}
.classroom.full .board-wrap{padding:0}
.classroom.full .board svg{border-radius:0}
.classroom.full .class-bar{position:fixed;left:0;right:0;bottom:0;z-index:41;padding-bottom:max(8px,env(safe-area-inset-bottom));
                           background:linear-gradient(transparent,rgba(0,0,0,.55))}
.classroom.full.quiet .class-bar{pointer-events:none}

/* a phone held upright: the board stands in the middle of the screen, not at its top (with the questions open,
   they take the room under it and the board is at the top again) */
@media (max-width:760px) and (orientation:portrait){
  .board-wrap{justify-content:safe center}
}

/* the turn button is for a phone: a computer's screen is not turned */
@media not ((hover:none) and (pointer:coarse)){#c-rotate{display:none}}

/* on a phone the board runs from edge to edge of the screen, with square corners, as a video does:
   upright, and turned on its side */
@media (max-width:760px), (max-height:520px) and (orientation:landscape){
  .board-wrap{padding:0}
  .board svg{border-radius:0}
  .lost{inset:0;border-radius:0}
  /* what is under or beside the board keeps a little off the edge */
  .subs{padding-left:12px;padding-right:12px}
  .ask{margin:0 8px}
}


/* ---------- explore: the chapters of a subject, each opening to its topics, any of which can be ticked ---------- */
.chapters{display:flex;flex-direction:column;gap:8px;max-height:min(50vh,500px);overflow-y:auto;padding:4px}
.chapter{border:1px solid var(--line);border-radius:var(--r-s);background:var(--panel, transparent);transition:border-color .15s}
.chapter.some{border-color:var(--accent)}
.chapter-head{display:flex;align-items:center;gap:4px;padding-left:14px}
.chapter-head input,.chapter-topics input{flex:none;width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer}
.chapter-open{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;padding:12px 14px 12px 10px;border:0;background:none;box-shadow:none;border-radius:var(--r-s);text-align:left;font-weight:500}
.chapter-open small{flex:none;color:var(--muted);font-weight:400;font-variant-numeric:tabular-nums}
.chapter-open b{flex:1;min-width:0;font-weight:600}
.chapter-open .count{flex:none;color:var(--muted);font-size:12px;font-weight:400}
.chapter.some .chapter-open .count{color:var(--accent);font-weight:600}
.chapter-open::after{content:"";flex:none;align-self:center;width:7px;height:7px;margin-left:2px;border-right:1.7px solid var(--muted);border-bottom:1.7px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);transition:transform .15s}
.chapter.open .chapter-open::after{transform:rotate(225deg) translate(-2px,-2px)}
.chapter-topics{display:none;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 14px;padding:2px 14px 12px 41px}
.chapter.open .chapter-topics{display:grid}
.chapter-topics .topic{display:flex;flex-direction:row;align-items:flex-start;gap:9px;padding:6px 8px;border-radius:8px;font-size:13.5px;font-weight:400;line-height:1.35;color:var(--text);cursor:pointer}
.chapter-topics .topic:hover{background:var(--soft)}
.chapter-topics .topic input{margin-top:1px}
.explore-foot{display:flex;align-items:center;gap:14px;padding-top:4px}
.explore-foot span{flex:1;min-width:0}
@media (max-width:760px){
  .chapters{max-height:none;overflow:visible;padding:0}
  .chapter-open{flex-wrap:wrap;padding-right:10px}
  .chapter-open .count{order:3;flex-basis:100%;padding-left:26px}
  .chapter-topics{grid-template-columns:1fr;padding-left:14px}
  /* the pop-up scrolls as a whole on a phone: what is chosen, and its button, stay in sight at its foot */
  .explore-foot{position:sticky;bottom:0;margin:0 -18px -18px;padding:12px 18px;background:var(--bg);border-top:1px solid var(--line)}
}

/* ---------- signing in: Google's button, and under it the way in with an API key ---------- */
/* Google draws its button 44 pixels high at most: it is shown a little bigger than that (console.js asks for it that
   much narrower, so that it still fits the card) */
#google-button{--g-scale:1.18;min-height:54px;display:flex;align-items:center;justify-content:center}
#google-button>div{transform:scale(var(--g-scale));transform-origin:center}
#google-button:empty{border-radius:99px;background:var(--soft)}
/* inside another app's browser, in place of Google's button: the way out to the phone's own browser */
.outside{gap:10px;text-align:center}
.outside>p:first-child{font-size:14px}
.outside-steps{margin:0;padding:12px 14px 12px 34px;border-radius:var(--r-s);background:var(--soft);text-align:left;font-size:14px;line-height:1.7}
.menu-dots{display:inline-block;min-width:22px;padding:0 4px;border-radius:6px;background:var(--panel);text-align:center;font-size:16px;line-height:1.3}
/* the arrow at the top right, under the app's own menu, nodding up at it */
.outside-point{position:fixed;z-index:50;top:8px;right:10px;display:flex;align-items:center;gap:6px;padding:7px 12px 7px 9px;
               border-radius:99px;background:var(--ink);color:var(--on-ink);font-size:13px;font-weight:600;
               box-shadow:var(--shadow-up);animation:nod 1.2s ease-in-out infinite}
.outside-point svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.outside-point b{font-size:16px;line-height:1}
@keyframes nod{50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion: reduce){.outside-point{animation:none}}

/* ---------- a field's name with a note beside it, and an "i" that says why the field is asked ---------- */
.label-line{display:flex;align-items:center;gap:6px}
.label-line>span{font-weight:400}
button.info{position:relative;flex:none;width:16px;height:16px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:none;box-shadow:none;
            color:var(--muted);font:italic 600 11px/1 Georgia,"Times New Roman",serif;cursor:help}
button.info:hover,button.info:focus-visible,button.info.open{color:var(--text);border-color:var(--text)}
button.info:hover::after,button.info:focus-visible::after,button.info.open::after{
  content:attr(data-tip);position:absolute;z-index:6;left:-8px;bottom:calc(100% + 8px);width:max-content;max-width:230px;padding:8px 10px;border-radius:8px;
  background:#000;color:#fff;font:400 12px/1.4 Inter,"Segoe UI",system-ui,sans-serif;text-align:left;white-space:normal;pointer-events:none}

/* ---------- a new account is congratulated: its credits in a medal, and confetti over the whole window ---------- */
.modal.celebrate{overflow:visible;text-align:center;padding:30px 26px 24px}
.modal.celebrate::backdrop{background:rgba(0,0,0,.55)}
.celebrate canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}
.celebrate .prize{position:relative;width:118px;height:118px;margin:0 auto 18px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
                  color:#fff;background:linear-gradient(140deg,#6366f1,#4f46e5 55%,#7c3aed);box-shadow:0 14px 30px -10px rgba(79,70,229,.7),inset 0 0 0 5px rgba(255,255,255,.18);
                  animation:prize .7s cubic-bezier(.2,1.5,.4,1) both}
.celebrate .prize[hidden]{display:none}
.celebrate .prize b{font-size:36px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.celebrate .prize span{margin-top:4px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.9}
.celebrate h2{position:relative;font-size:22px;letter-spacing:-.02em;margin-bottom:6px}
.modal.celebrate>p{position:relative;padding:0;font-size:14px}
.modal.celebrate footer{position:relative;justify-content:center;padding:22px 0 0}
.modal.celebrate[open]{animation:arrive .35s ease-out both}
@keyframes prize{from{transform:scale(.2) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}
/* (the card itself only fades in: were it moved, the confetti inside it would be measured from the card, not the window) */
@keyframes arrive{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.celebrate .prize,.modal.celebrate[open]{animation:none}}

/* ---------- usage: a line through what was used on each day ---------- */
/* The line is drawn in a box that is stretched to the chart, so it keeps its thickness by itself (non-scaling-stroke).
   The scale's numbers are in the margin on the left; a column for each day lies over the line, with that day's dot. */
.line-chart{padding:14px 0 0 46px}
.line-chart .plot{position:relative;height:200px}
.line-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.line-chart path{vector-effect:non-scaling-stroke}
.line-chart .stroke{fill:none;stroke:var(--c-lecture);stroke-width:2.5px;stroke-linejoin:round;stroke-linecap:round}
.line-chart .area{fill:color-mix(in srgb,var(--c-lecture) 10%,transparent);stroke:none}
.line-chart .mark{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.line-chart .mark:last-of-type{border-top-style:solid;border-top-color:var(--line-strong)}
.line-chart .mark small{position:absolute;right:calc(100% + 8px);top:-7px;font-size:10px;line-height:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.line-chart .points,.line-chart .names{display:flex}
.line-chart .points{position:absolute;inset:0}
.line-chart .point{position:relative;flex:1;min-width:0}
.line-chart .point i{position:absolute;left:50%;bottom:var(--y);width:9px;height:9px;margin:0 0 -4.5px -4.5px;border-radius:50%;
                     background:var(--panel);border:2.5px solid var(--c-lecture);transition:transform .12s}
.line-chart .point.none i{width:5px;height:5px;margin:0 0 -2.5px -2.5px;border-width:0;background:var(--line-strong)}
.line-chart .point:hover{background:linear-gradient(180deg,transparent,var(--soft))}
.line-chart .point:hover i{transform:scale(1.35)}
.line-chart .point::after{content:attr(data-tip);position:absolute;z-index:3;left:50%;bottom:calc(var(--y) + 12px);transform:translateX(-50%) translateY(4px);
                          padding:8px 11px;border-radius:9px;background:var(--ink);color:#fff;font-size:11px;line-height:1.5;white-space:pre;
                          box-shadow:0 8px 20px -6px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .12s,transform .12s}
.line-chart .point:hover::after{opacity:1;transform:translateX(-50%)}
.line-chart .point.first::after{left:0;transform:translateY(4px)}
.line-chart .point.first:hover::after{transform:none}
.line-chart .point.last::after{left:auto;right:0;transform:translateY(4px)}
.line-chart .point.last:hover::after{transform:none}
.line-chart .names{margin-top:8px}
.line-chart .names small{flex:1;min-width:0;height:12px;display:flex;justify-content:center;font-size:10px;line-height:12px;color:var(--muted);white-space:nowrap}
.line-chart .names .today{color:var(--text);font-weight:700}
#view-usage .usage-card b{font-size:15px}

/* ---------- buying credits: the recharges side by side, one of them chosen; and what was bought before ---------- */
/* Each card has a colour of its own (--tint): its icon, its wash at the top, and its outline once it is chosen. */
.topup{display:flex;flex-direction:column;gap:16px;padding:0 22px 6px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:12px}
.plans[data-plans="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
button.plan{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:18px 16px 18px;text-align:left;
            border:1.5px solid var(--line-strong);border-radius:var(--r);
            background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 9%,var(--panel)),var(--panel) 46%);
            transition:border-color .15s,box-shadow .15s,transform .15s}
button.plan:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 14%,var(--panel)),var(--panel) 46%);transform:translateY(-3px);box-shadow:var(--shadow)}
button.plan[aria-checked="true"],button.plan[aria-checked="true"]:hover{border-color:var(--tint);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tint) 18%,transparent),0 14px 26px -14px color-mix(in srgb,var(--tint) 70%,transparent)}
/* the one chosen is ticked in its corner */
button.plan::after{content:"";position:absolute;top:16px;right:14px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--panel)}
button.plan[aria-checked="true"]::after{border-color:var(--tint);background:var(--tint) center/11px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
/* the most popular one stands a little taller, under a ribbon */
button.plan.popular{border-color:color-mix(in srgb,var(--tint) 55%,var(--line-strong));box-shadow:var(--shadow)}
.plan .ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 12px;border-radius:99px;white-space:nowrap;
              font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;background:var(--tint);box-shadow:0 6px 14px -6px var(--tint)}
.plan .chip{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-bottom:10px;border-radius:12px;
            color:var(--tint);background:color-mix(in srgb,var(--tint) 15%,transparent)}
.plan .chip svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.plan b{font-size:15px;font-weight:600}
.plan .for{font-size:12px;color:var(--muted)}
.plan strong{margin-top:10px;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.plan .gives{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:2px 0 10px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.plan .gives em{padding:2px 8px;border-radius:99px;font-style:normal;font-size:11px;font-weight:600;color:#04663c;background:#dcf7ea;white-space:nowrap}
.plan small{font-size:12px;line-height:1.45;font-weight:400;color:var(--muted)}
/* what is true of every one of them, in a row under the cards */
.assure{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;padding:0;list-style:none;font-size:12px;color:var(--muted)}
.assure li{display:flex;align-items:center;gap:6px}
.assure li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:var(--c-good) center/9px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (max-width:1000px){.plans[data-plans="4"]{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}}
.topup-list{display:flex;flex-direction:column;padding:0 22px 22px;max-height:min(60vh,460px);overflow-y:auto}
.topup-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.topup-row:first-child{border-top:0;padding-top:0}
.topup-row div{display:flex;flex-direction:column;min-width:0}
.topup-row b{font-weight:600;font-variant-numeric:tabular-nums}
.topup-row small{font-size:12px;color:var(--muted)}
.topup-row strong{flex:none;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  /* on a phone a card is one short row: its icon, then what it is and gives, and the price at the end */
  .plans,.plans[data-plans="4"]{grid-template-columns:minmax(0,1fr);gap:12px;row-gap:12px}
  button.plan{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;padding:14px 40px 14px 14px}
  .plan .chip{grid-row:1 / span 5;margin:0}
  .plan b,.plan .for,.plan .gives,.plan small{grid-column:2}
  .plan strong{grid-column:3;grid-row:1 / span 5;margin:0;font-size:22px}
  .plan .gives{margin:2px 0}
  .plan .ribbon{left:auto;right:14px;transform:none}
  .topup,.topup-list{padding-left:18px;padding-right:18px}
  .line-chart{padding-left:38px}
  .line-chart .plot{height:170px}
}

/* ---------- a walk through a page (tour.js): the page dimmed, one thing lit, and a card beside it ---------- */
/* The dimming is the lit thing's own shadow, thrown wide: what is under the hole is seen as it is. Nothing behind
   can be pressed meanwhile. */
.tour{position:fixed;inset:0;z-index:60}
.tour-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 200vmax rgba(0,0,0,.58),0 0 0 2px rgba(255,255,255,.9);pointer-events:none;
           transition:left .22s,top .22s,width .22s,height .22s}
.tour-card{position:fixed;width:min(320px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:18px 18px 14px;border-radius:16px;
           background:#fff;color:#0a0a0a;box-shadow:0 24px 48px -16px rgba(0,0,0,.55);font:14px/1.5 var(--ui);
           transition:left .22s,top .22s;animation:pop .25s cubic-bezier(.2,.9,.3,1.15) backwards}
.tour-title{font-size:15px;font-weight:600;letter-spacing:-.01em;padding-right:64px}
.tour-text{margin:0;color:#4a4a4f}
.tour-foot{display:flex;align-items:center;gap:8px;margin-top:8px}
.tour-count{font-size:12px;color:#6b6b6b;font-variant-numeric:tabular-nums}
.tour-card button{color:#0a0a0a;border-color:#d9d9d9}
.tour-card button.primary{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.tour-card .tour-skip{position:absolute;top:16px;right:18px;font-size:12px;color:#6b6b6b}
@media (prefers-reduced-motion: reduce){.tour-hole,.tour-card{transition:none;animation:none}}