/* 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 usage meter: a bar inked as far as the credits are used up, in the side bar and under the profile */
.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}
.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:start}
#lecture-fields{flex:1;display:flex}
#lecture-fields textarea{flex:1}
.composer-foot{margin-top:auto}
#explore-open{display:inline-flex;align-items:center;gap:8px}
#explore-open 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}
.seg.wide{display:flex}
.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)}

/* 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) 88px auto 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 input[type=number]{width:100%}
.section label{flex-direction:row;align-items:center;gap:8px;padding-top:10px;white-space:nowrap}
.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{box-shadow:var(--shadow-up)}
/* 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}
.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{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;background:var(--stage-accent);border-color:var(--stage-accent);color:#fff}
.classroom .icon.hand svg{width:28px;height:28px}
/* a hand that is up and waiting for the teacher to finish the sentence */
.classroom .icon.hand[aria-pressed="true"]{background:var(--listen);border-color:var(--listen);color:#111}
.classroom .icon.end{width:64px;border-radius:24px;background:var(--danger);border-color:var(--danger);color:#fff}
/* 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}
  .section input[type=number]{width:88px}

  /* 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}
}