/* TaoSpeakup design system: one look for every page.
   Blue palette, rounded "chunky" controls, Inter Tight, Central Highlands scenery, Arie My Tao the monkey.
   Loaded after each page's own <style>; uses :where() so page-specific component classes still win. */
/* @import must stay first in the file */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800;900&family=Lexend:wght@400;500;600&display=swap");

:root{
  --b50:#eef7ff;--b100:#d6ecff;--b200:#b0dbff;--b300:#6cc0ff;--b400:#3aa6ff;--b500:#1a8cff;--b600:#0f6fd6;--b700:#0b56a8;
  --navy:#0b2545;--sun:#ffc93c;--sun-d:#e0a400;--grey:#e5e7eb;--grey-d:#c4c8cf;
  /* page tokens remapped onto the system */
  --acc:var(--b500);--acc-soft:var(--b50);--ink:var(--navy);--bg:#f6faff;--card:#fff;--line:#e3e9f2;--field:#eef4fb;
  --mute:#6b7a90;--ok:#169c64;--warn:#c98100;--bad:#ff5a5f;
  --navw:232px;
}
@media(max-width:1280px){:root{--navw:84px}}
@media(max-width:760px){:root{--navw:0px}}

/* One rounded UI font everywhere (Duolingo-style). `html body.ss` outranks each page's own `body{font:…}`. */
html body.ss{font-family:"Inter Tight","Segoe UI Rounded",system-ui,-apple-system,sans-serif;font-size:15.5px;line-height:1.5;
  background:var(--bg);color:var(--navy);-webkit-font-smoothing:antialiased}
html body.ss :is(button,input,select,textarea,option){font-family:inherit}
html body.ss :is(h1,h2,h3,h4,b,strong){font-weight:900}
html body.ss :is(input,select,textarea){font-weight:700}
/* placeholders stay in normal case so long hints fit (code boxes are uppercase + spaced only once typed) */
html body.ss input::placeholder{text-transform:none;letter-spacing:normal;font-weight:700}
/* labels on buttons, tabs and menus: uppercase, heavy, a little letter-spacing */
html body.ss button:not(:is(.chip,.vcard,.lesson,.pp,.round,.ib,.bigrec,.spk,.pv,.arrow,.voicebtn,.lk,.x,[data-c],[data-z],.ann *,.sl,.it)),
html body.ss :is(.btn,.tabs button,.seg button,.toggle,.stg,.tag,.pt,.ss-item,.ss-bottom a){
  text-transform:uppercase;letter-spacing:.045em;font-weight:900}
html body.ss button:not(:is(.chip,.vcard,.lesson,.pp,.round,.ib,.bigrec,.spk,.pv,.arrow,.voicebtn,.lk,.x,[data-c],[data-z])){font-size:13.5px}
html body.ss :is(.tabs button){font-size:14px}
html body.ss :is(label,h4,.lbl,.small.mute.up){letter-spacing:.04em}

/* ---------- shell ---------- */
.ss-side{position:fixed;left:0;top:0;bottom:0;width:var(--navw);background:#fff;border-right:2px solid var(--line);padding:18px 12px;z-index:40;
  display:flex;flex-direction:column;gap:4px;overflow:hidden}
.ss-brand{display:flex;align-items:center;gap:8px;font-weight:900;font-size:22px;color:var(--b500);padding:0 8px 16px;white-space:nowrap;text-decoration:none}
.ss-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;font-weight:800;color:var(--mute);text-decoration:none;
  text-transform:uppercase;font-size:13.5px;letter-spacing:.03em;border:2px solid transparent;white-space:nowrap}
.ss-item:hover{background:var(--b50)}
.ss-item.on{background:var(--b50);border-color:var(--b200);color:var(--b500)}
.ss-item .i{width:30px;display:grid;place-items:center;flex:none}
.ss-sep{height:2px;background:var(--line);margin:8px 6px}
.ss-foot{font-size:12.5px;color:var(--mute);padding:8px;white-space:nowrap}
@media(max-width:1280px){
  .ss-item .t,.ss-brand .t,.ss-foot{display:none}.ss-item{justify-content:center;padding:10px 0}.ss-brand{justify-content:center;padding:0 0 14px}
  /* collapsed rail opens over the page on hover and shows the labels */
  .ss-side{transition:width .18s ease,box-shadow .18s ease}
  .ss-side:hover{width:232px;box-shadow:8px 0 30px rgba(11,37,69,.14)}
  .ss-side:hover .ss-item .t,.ss-side:hover .ss-brand .t,.ss-side:hover .ss-foot{display:inline}
  .ss-side:hover .ss-foot{display:block}
  .ss-side:hover .ss-item{justify-content:flex-start;padding:10px 12px}
  .ss-side:hover .ss-brand{justify-content:flex-start;padding:0 8px 16px}
}
/* app-wide text size (A− A A+ in the menu) */
.ss-main{zoom:var(--z,1)}
.ss-size{display:flex;gap:4px;padding:6px 6px 2px}
.ss-size button{flex:1;padding:4px 0!important;border-width:2px!important;border-bottom-width:3px!important;font-weight:900;color:var(--mute)}
.ss-size button.on{color:var(--b600);background:var(--b50);border-color:var(--b200)}
.ss-size button:nth-child(1){font-size:12px}.ss-size button:nth-child(2){font-size:14px}.ss-size button:nth-child(3){font-size:17px}
@media(max-width:1280px){.ss-size{flex-direction:column}.ss-side:hover .ss-size{flex-direction:row}}
.ss-main{margin-left:var(--navw);min-height:100vh}
.ss-bottom{display:none}
@media(max-width:760px){.ss-side{display:none}
  .ss-bottom{display:flex;position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:2px solid var(--line);justify-content:space-around;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:40}
  .ss-bottom a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#97a3b6;padding:4px 0;border-radius:12px;
    font-size:11px;font-weight:800;letter-spacing:.02em}
  .ss-bottom a.on{color:var(--b500)}
  .ss-bottom a.on svg{background:var(--b50);border-radius:10px;padding:3px;box-sizing:content-box;margin:-3px}
  .ss-main{padding-bottom:64px}}

/* ---------- page header ---------- */
:where(.ss) header{background:#fff;color:var(--navy);border-bottom:2px solid var(--line);padding:10px 18px;min-height:58px;display:flex;align-items:center;gap:10px}
:where(.ss) header b{font-size:18px;font-weight:900}
:where(.ss) header .logo{display:none}

/* hero banner (unit-banner style) */
.ss-hero{position:relative;overflow:hidden;background:var(--b500);color:#fff;border-radius:18px;border-bottom:5px solid var(--b600);
  padding:18px 22px;display:flex;align-items:center;gap:16px;margin:0 0 16px}
.ss-hero h1{margin:0;font-size:24px;font-weight:900}.ss-hero p{margin:4px 0 0;opacity:.95;font-weight:700}
.ss-hero .hills{position:absolute;left:0;right:0;bottom:-2px;line-height:0;pointer-events:none}.ss-hero .hills svg{width:100%}
.ss-hero > *{position:relative}
@media(max-width:760px){.ss-hero{margin:12px 12px 0!important;padding:14px 16px}.ss-hero h1{font-size:20px}.ss-hero svg[aria-label]{width:56px}}

/* ---------- components ---------- */
:where(.ss) button{border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;background:#fff;color:var(--navy);
  font-weight:800;padding:8px 14px;cursor:pointer;transition:transform .05s}
:where(.ss) button:active{border-bottom-width:2px;transform:translateY(2px)}
:where(.ss) button:disabled{background:var(--grey);border-color:var(--grey-d);color:#9aa3af}
:where(.ss) button.pri,:where(.ss) .btn.blue{background:var(--b500);border-color:var(--b600);color:#fff}
:where(.ss) button.pri:hover{background:var(--b400)}
:where(.ss) :is(input:not([type=checkbox]):not([type=range]):not([type=file]),select,textarea){border:2px solid var(--line);border-radius:12px;background:var(--field);color:var(--navy)}
:where(.ss) :is(input,select,textarea):focus{outline:0;border-color:var(--b300)}
:where(.ss) :is(.card,.page){border-radius:18px;border:2px solid var(--line);box-shadow:none}
:where(.ss) h2,:where(.ss) h3{font-weight:900}
:where(.ss) a{color:var(--b600)}
:where(.ss) .hint,:where(.ss) .why,:where(.ss) .ins{border-radius:12px}

/* reader (studio) specifics */
body.ss.studio .ss-main{display:flex;flex-direction:column;height:100vh;min-height:0}
body.ss .player{left:var(--navw)}
body.ss .pp{background:var(--b500);box-shadow:0 4px 0 var(--b600)}
body.ss .bigrec{box-shadow:0 4px 0 #d63c42}
body.ss .tabs button{border:0;border-bottom:3px solid transparent;border-radius:0;transform:none}
body.ss .seg button{border:0;border-radius:10px}
body.ss .page .s.cur{background:#fff1bf}
.mobile-only{display:none!important}
@media(max-width:760px){
  .mobile-only{display:revert!important}
  body.ss{overflow-x:hidden}

  /* header: name + voice + ⚙; the rest opens as a second row */
  body.ss.studio header{flex-wrap:wrap;gap:6px;padding:8px 10px;min-height:52px}
  body.ss.studio header > *{order:5}
  body.ss.studio header #docName{order:0}body.ss.studio header #voiceBtn{order:1}body.ss.studio header #toolsBtn{order:2}
  body.ss.studio header.tools::after{content:"";order:3;flex-basis:100%}
  body.ss.studio header .docname{flex:1;min-width:0;width:auto;font-size:16px}
  body.ss.studio header .grow{display:none}
  body.ss.studio header #vName{display:none}
  body.ss.studio header .voicebtn{padding:6px 8px}
  body.ss.studio header :is(#editBtn,#style,.speed,#dl){display:none}
  body.ss.studio header.tools :is(#editBtn,#style,#dl){display:inline-flex}
  body.ss.studio header.tools .speed{display:flex;flex:1 1 100%;order:9}
  body.ss.studio header.tools .speed input{flex:1}
  body.ss.studio header .speed > span:first-child{display:inline}

  /* document: room for the sheet + player + nav underneath */
  /* the text always keeps room for the sheet (its real height, measured in JS) + player + nav */
  body.ss.studio main{padding:14px 12px 470px;scroll-padding-top:12px}
  body.ss.studio:has(.coach.full) main{padding-bottom:calc(min(56vh,520px) + 140px)}
  body.ss.studio .page{padding:20px 18px;font-size:18px;line-height:1.75}
  body.ss.studio .page .s{scroll-margin-top:12px}

  /* coach = bottom sheet */
  body.ss .coach{position:fixed;left:0;right:0;width:auto!important;inset:auto 0 124px 0!important;border:0;border-top:2px solid var(--line);
    border-radius:22px 22px 0 0;box-shadow:0 -8px 24px rgba(11,37,69,.12);transition:height .22s ease;z-index:30;overflow:hidden}
  /* sheet is as tall as its content: compact by default, up to ~half the screen when opened */
  body.ss .coach{height:auto!important;overflow:auto;overscroll-behavior:contain}
  body.ss .coach.peek{max-height:330px}
  body.ss .coach.full{max-height:min(56vh,520px)}
  body.ss .coach .pane{padding:10px 14px 16px}
  body.ss .coach.peek .pane{overflow:hidden;padding-top:8px}
  body.ss .coach.peek .pane > :not(.row):not(:has(.ann)):not(.ann){display:none}
  body.ss .coach.peek :is(.legend,.hint,.hist){display:none}
  body.ss .coach .bigrec{width:58px;height:58px;font-size:22px}
  body.ss .coach .ann{padding:10px 4px 4px}
  body.ss .coach .tabs{position:sticky;top:0;background:#fff}
  body.ss .coach .tabs button{padding:8px 12px}
  body.ss #coachX{display:none}
  .grab{display:flex!important;justify-content:center;align-items:center;gap:6px;padding:8px 0 4px;cursor:pointer;background:#fff;position:sticky;top:0;z-index:3;
    font-size:11px;font-weight:900;color:#97a3b6;letter-spacing:.05em}
  .grab i{width:44px;height:5px;border-radius:3px;background:var(--grey-d)}
  .grab::after{content:"MORE"}
  .coach.full .grab::after{content:"LESS"}

  /* player: icons only */
  body.ss .player{bottom:58px;padding:6px 12px;gap:8px;border-top:2px solid var(--line)}
  body.ss .player .pp{width:46px;height:46px}
  body.ss .player .round{width:38px;height:38px}
  body.ss .player .toggle .lbl{display:none}
  body.ss #loopBtn{padding:0;width:40px;height:40px;border-radius:50%;justify-content:center}
  body.ss #coachBtn{display:none}
  body.ss .player #pos{font-size:14px}
}

/* player + icon buttons */
body.ss .player{background:#fff;border-top:2px solid var(--line)}
body.ss .player .round,body.ss .ib{display:inline-grid;place-items:center;padding:0;width:40px;height:40px;border-radius:50%;color:var(--b600)}
body.ss .player .pp{display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;color:#fff;background:var(--b500);box-shadow:0 4px 0 var(--b600)}
body.ss .player .pp:active{transform:translateY(3px);box-shadow:0 1px 0 var(--b600)}
body.ss .player .pp svg{margin-left:2px}
body.ss .player .toggle{display:inline-flex;align-items:center;gap:6px;color:var(--mute)}
body.ss .player .toggle.on{color:var(--b600);background:var(--b50);border-color:var(--b200)}
body.ss .ib{width:38px;height:38px;border-radius:12px}

/* one mascot per screen: the shell brand + hero carry it */
.ss header #logo,.ss header .hills{display:none}
@media(max-width:760px){
  /* Band 9: video card stacks */
  body[data-page=bench] .card > .row:first-child{flex-direction:column;align-items:stretch}
  body[data-page=bench] .card > .row:first-child img{width:100%;height:auto}
  body[data-page=bench] .turn .row{gap:6px}
  body[data-page=bench] .turn .row .q{flex:1 1 100%}
  /* Teacher: no second mascot inside cards */
  body[data-page=teacher] .card > .row > svg[aria-label]{display:none}
  /* Plan: item rows wrap instead of squeezing the title */
  body[data-page=plan] .item{flex-wrap:wrap;gap:8px 10px}
  body[data-page=plan] .item .stg{order:-1}
  body[data-page=plan] .item .grow{flex:1 1 100%}
  body[data-page=plan] .item > button{margin-left:0}
  body[data-page=plan] .item > button:first-of-type{margin-left:auto}
  /* Voices: the three answer buttons share one row */
  body[data-page=bench] .turn .row button{flex:1;padding:8px 6px!important;font-size:12px!important}
  body[data-page=plan] .stats{grid-template-columns:repeat(2,1fr)}
  body[data-page=plan] .week{grid-template-columns:repeat(3,1fr)}
  /* tables scroll sideways instead of stretching the page */
  .scroll{-webkit-overflow-scrolling:touch}
}

/* ---------- Read page layout: hideable document list, draggable divider ---------- */
body.ss.docs-hidden aside{display:none}
body.ss .coach{width:var(--coachw,min(470px,42vw))}
body.ss .split{width:12px;flex:none;cursor:col-resize;position:relative;touch-action:none;margin:0 -6px;z-index:2}
body.ss .split::after{content:"";position:absolute;top:0;bottom:0;left:5px;width:2px;background:var(--line);transition:background .15s,width .15s}
body.ss .split::before{content:"";position:absolute;top:50%;left:2px;width:8px;height:44px;margin-top:-22px;border-radius:6px;
  background:#fff;border:2px solid var(--line);z-index:1}
body.ss .split:hover::after,body.ss .split.drag::after{background:var(--b400);width:3px}
body.ss .split:hover::before,body.ss .split.drag::before{border-color:var(--b400)}
body.ss .split.drag{cursor:col-resize}
body.ss.studio main .page{max-width:min(1000px,100%)}
body.ss #docsBtn.on{color:var(--b600);background:var(--b50);border-color:var(--b200)}
.desktop-only{}
@media(max-width:760px){.desktop-only{display:none!important}}

/* ---------- typography ---------- */
:where(.ss) h1,:where(.ss) h2{letter-spacing:-.01em}
:where(.ss) .card h2{font-size:22px}
:where(.ss) .card h3{font-size:17px;letter-spacing:-.005em}
:where(.ss) .mute{color:#64748b}

/* reading page: Lexend (built for easy reading), adjustable size, clearer current sentence/word */
body.ss .page{font-family:"Lexend","Inter Tight",system-ui,sans-serif;font-size:var(--docfs,20px);line-height:1.9;color:#14213d;
  padding:34px 46px 40px;max-width:760px;background:#fff;border:2px solid var(--line);border-bottom-width:5px}
body.ss .page p{margin:0 0 .9em}
.doc-head{border-bottom:2px dashed var(--line);margin:-4px 0 22px;padding-bottom:16px;font-family:"Inter Tight",system-ui,sans-serif}
.doc-kicker{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--b500)}
.doc-head h1{margin:2px 0 6px;font-size:28px;line-height:1.2;font-weight:900;color:var(--navy)}
.doc-meta{display:flex;gap:8px;flex-wrap:wrap}
.doc-meta span{font-size:12.5px;font-weight:800;color:var(--b700);background:var(--b50);border-radius:20px;padding:2px 10px}
body.ss .page .s{padding:2px 3px;border-radius:8px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background .15s}
body.ss .page .s:hover{background:#f1f6ff}
body.ss .page .s.cur{background:#fff2c2;box-shadow:inset 0 -2px 0 #ffd75e}
body.ss .page .w.on{background:var(--b500);color:#fff;border-radius:6px;box-shadow:0 0 0 3px var(--b500)}
body.ss .page .s.done-good{text-decoration:underline 3px rgba(22,156,100,.35);text-underline-offset:6px}
.fsz{display:inline-flex;border:2px solid var(--line);border-bottom-width:4px;border-radius:14px;overflow:hidden}
.fsz button{border:0!important;border-radius:0!important;padding:7px 11px!important;font-weight:900;color:var(--b600);background:#fff;transform:none!important}
.fsz button+button{border-left:2px solid var(--line)!important;font-size:17px}
.fsz button:hover{background:var(--b50)}
@media(max-width:760px){
  body.ss.studio header .fsz{display:none}
  body.ss.studio header.tools .fsz{display:inline-flex}
  body.ss .page{padding:18px 16px 24px}
  .doc-head h1{font-size:22px}
}

/* phone reading-settings sheet */
.setsheet{position:fixed;inset:0;background:rgba(11,37,69,.4);z-index:80;display:flex;align-items:flex-end}
.setsheet .in{background:#fff;width:100%;border-radius:22px 22px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));animation:ssup .2s ease-out}
@keyframes ssup{from{transform:translateY(30px);opacity:.6}}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:2px solid var(--line);font-weight:800}
.setrow.col{flex-direction:column;align-items:stretch}
.setsheet .speed{display:flex!important;width:100%}.setsheet .speed input{flex:1;width:auto!important}
.setsheet .speed > span:first-child{display:none!important}
.setsheet :is(.fsz,#style,#editBtn,#dl){display:inline-flex!important}
.setsheet #editBtn{flex:1;justify-content:center}

/* Mock test focus mode: only the exam room while the test runs */
body.exam-focus :is(.ss-side,.ss-bottom,header,.ss-hero){display:none!important}
body.exam-focus .ss-main{margin-left:0!important;padding-bottom:0!important}
body.exam-focus .wrap{padding-top:12px}
body.exam-focus .room{min-height:calc(100vh - 60px)}
@media(max-width:760px){body.exam-focus .room{padding:22px 16px;border-radius:14px}}

/* phone document list sheet */
.docsheet aside.insheet{display:block!important;width:auto;border:0;padding:0;max-height:60vh;overflow:auto;background:none}
.docsheet aside.insheet .doc{padding:12px 10px;font-size:16px;border-bottom:2px solid var(--line);border-radius:0}
.docsheet aside.insheet .doc .x{opacity:.5}
.docsheet aside.insheet > .row:first-child > b{display:none}   /* the sheet already has the title */
.docsheet aside.insheet > .row:first-child{justify-content:flex-end}
@media(max-width:760px){
  body.ss.studio #docName{cursor:pointer;caret-color:transparent;padding-right:28px;
    background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230f6fd6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center}
}

/* mascot corner tip */
.ss-tip{display:flex;gap:10px;align-items:flex-end;margin:0 0 14px}
.ss-tip .speech{position:relative;border:2px solid var(--line);background:#fff;border-radius:16px;padding:10px 14px;font-weight:700;flex:1}
.ss-tip .speech::before{content:"";position:absolute;left:-10px;bottom:16px;border:9px solid transparent;border-right-color:var(--line);border-left:0}

/* ownership line, last thing on every page */
.ss-foot{max-width:900px;margin:40px auto 0;padding:18px 16px 24px;border-top:2px solid var(--line);text-align:center;font:800 13px/1.5 "Inter Tight",system-ui,sans-serif;color:#8a96a8}
.ss-foot span{display:block;font-weight:600;font-size:12px;margin-top:2px}
@media(max-width:760px){.ss-foot{margin-bottom:70px}}