/* VocaMimi: Mimi's voice lab. Light and friendly by default (violet and lemon, round type, sticker-like cards), a dark mode,
   and the Studio (monitor, sing along) in the old graphite pro look. Colours live in tokens only; the screens that draw on a
   canvas stay dark in every theme, like a lab instrument.
   Desktop: navigation on the left, the view in the middle, the AI coach on the right. Tablet: the coach slides over from the
   right. Phone: bottom tabs, the coach as a full-screen sheet. */
:root{--bg:#faf8ff;--side-bg:#f3effd;--panel:#fff;--panel2:#f7f4ff;--raised:#efe9ff;--line:#e7e0f7;--line2:#d7ccf2;--line3:#b8a7ea;--well:#f1ecfc;
  --fg:#231c3d;--fg2:#5a5276;--muted:#8a82a6;--off:#cfc6e8;--acc:#7c5cff;--acc2:#a993ff;--acc-ink:#fff;--acc-dim:color-mix(in srgb,var(--acc) 12%,transparent);
  --acc-mid:color-mix(in srgb,var(--acc) 55%,var(--panel));--acc-deep:color-mix(in srgb,var(--acc) 70%,#000);--acc-pale:color-mix(in srgb,var(--acc) 12%,#fff);
  --lemon:#ffd84d;--lemon-ink:#3d3000;--ok:#12a86b;--warn:#d98a00;--no:#ec4a6a;--info:#3b7cf0;--shine:#fff;--shadow:rgba(60,40,140,.12);--press:color-mix(in srgb,var(--acc) 62%,#2a1a7a);
  --font:"Nunito","IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--head:"Fredoka","Nunito","IBM Plex Sans Thai",system-ui,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Sans Thai",ui-monospace,Menlo,monospace;--ease:cubic-bezier(.2,.8,.2,1);
  --r:16px;--rs:12px;--side:248px;--chatw:372px;--barh:58px;--tabh:64px;color-scheme:light}
/* dark: the system's choice unless the person picked one in Settings */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#16132a;--side-bg:#130f25;--panel:#1f1a38;--panel2:#251f43;--raised:#2e2752;--line:#2f2852;--line2:#3f3569;--line3:#5a4d93;--well:#191430;
  --fg:#f2eeff;--fg2:#b9b0da;--muted:#857da8;--off:#3c3461;--acc:#9d85ff;--acc2:#c3b3ff;--acc-ink:#16132a;--ok:#3fd68b;--warn:#f2c744;--no:#ff6b84;--info:#7aa7ff;--shine:#fff;--shadow:rgba(0,0,0,.35);--press:#5b43c9;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#16132a;--side-bg:#130f25;--panel:#1f1a38;--panel2:#251f43;--raised:#2e2752;--line:#2f2852;--line2:#3f3569;--line3:#5a4d93;--well:#191430;
  --fg:#f2eeff;--fg2:#b9b0da;--muted:#857da8;--off:#3c3461;--acc:#9d85ff;--acc2:#c3b3ff;--acc-ink:#16132a;--ok:#3fd68b;--warn:#f2c744;--no:#ff6b84;--info:#7aa7ff;--shine:#fff;--shadow:rgba(0,0,0,.35);--press:#5b43c9;color-scheme:dark}
/* the Studio: the monitor and sing along keep the graphite pro look, one orange signal colour, square-ish corners, Plex type */
body.studio{--bg:#0f1012;--side-bg:#121315;--panel:#16171a;--panel2:#1c1d21;--raised:#25262b;--line:#26272c;--line2:#35363d;--line3:#4a4b53;--well:#111214;
  --fg:#ececee;--fg2:#a8a9b0;--muted:#74757d;--off:#35363d;--acc:#ff9940;--acc2:#ffc58f;--acc-ink:#1d0f02;--ok:#3fd68b;--warn:#e8c547;--no:#ff5a68;--info:#7aa7ff;--shadow:rgba(0,0,0,.35);--press:#b8641c;
  --font:"IBM Plex Sans","IBM Plex Sans Thai",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--head:var(--font);--r:12px;--rs:9px;color-scheme:dark}
/* the canvas screens: dark in every theme */
.cvbox,.fn-r,.al-tlbox,.keys{--fg:#f2eeff;--fg2:#b9b0da;--muted:#857da8;--off:#3c3461;--well:#1a1531;--panel2:#251f43;--line:#2f2852;background:var(--well);color:var(--fg)}
body.studio .cvbox,body.studio .fn-r,body.studio .al-tlbox,body.studio .keys{--well:#111214;--fg:#ececee;--muted:#74757d}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:400 15px/1.5 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.4}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.f{fill:currentColor;stroke:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:500}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
p{text-wrap:pretty}
.muted{color:var(--muted)}.fg2{color:var(--fg2)}.okc{color:var(--ok)}.warnc{color:var(--warn)}.noc{color:var(--no)}.accc{color:var(--acc)}

/* ---------- the shell ---------- */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr) var(--chatw);min-height:100vh;min-height:100dvh}
.side{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:12px;padding:16px 12px;border-right:1px solid var(--line);background:var(--side-bg);overflow-y:auto}
.brand{display:flex;align-items:baseline;gap:7px;padding:4px 10px 10px;text-decoration:none}
.brand b{font-size:24px;font-weight:700;letter-spacing:-.04em;color:var(--fg)}
.brand b::after{content:"";display:inline-block;width:7px;height:7px;margin-left:2px;border-radius:2px;background:var(--acc)}
.brand span{color:var(--muted);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.brand.sm{display:none;padding:0}
.brand.sm b{font-size:21px}
.nav{display:grid;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;height:40px;padding:0 10px;border-radius:8px;color:var(--fg2);text-decoration:none;font-weight:500;font-size:14.5px}
.nav a:hover{background:var(--panel);color:var(--fg)}
.nav a.on{background:var(--raised);color:var(--fg)}
.nav a.on svg{color:var(--acc)}
.sc{padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.sc .k{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}
.sc .big{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.sc .big b{font:600 26px var(--mono);letter-spacing:-.03em}
.sc .big span{color:var(--fg2);font-size:13px}
.wk{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.wk i{display:grid;place-items:center;height:22px;border-radius:5px;background:var(--well);color:var(--muted);font:500 10.5px var(--mono);font-style:normal}
.wk i.on{background:var(--acc);color:var(--acc-ink)}
.wk i.frz{background:color-mix(in srgb,var(--info) 25%,transparent);color:var(--info)}
.wk i.today{outline:1px solid var(--line2)}
.xpbar{height:6px;margin-top:8px;border-radius:3px;background:var(--well);overflow:hidden}
.xpbar i{display:block;height:100%;background:var(--acc);border-radius:3px}
.acct{margin-top:auto;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13px}
.acct .who{display:flex;align-items:center;gap:10px;min-width:0}
.acct img,.av{width:30px;height:30px;border-radius:50%;flex:none;background:var(--raised);display:grid;place-items:center;font-weight:600;font-size:13px}
.acct .who div{min-width:0}
.acct .who b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .who small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct p{margin:0 0 8px;color:var(--fg2)}
.gbtn{min-height:40px}

.mainw{min-width:0;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;height:var(--barh);padding:0 20px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.vt{margin-right:auto;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ib{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line2);border-radius:8px;background:var(--raised);color:var(--fg);text-decoration:none;flex:none}
.ib:hover{border-color:var(--line3)}
.chatb,.setb,.streakchip{display:none}
.streakchip{align-items:center;gap:5px;height:30px;padding:0 9px;border:1px solid var(--line2);border-radius:999px;color:var(--fg2);font:500 13px var(--mono)}
.streakchip svg{width:15px;height:15px;color:var(--acc)}
.micb{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:8px;background:var(--raised);font-size:13.5px;font-weight:500;white-space:nowrap}
.micb i{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.micb[aria-pressed="true"]{border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
.micb[aria-pressed="true"] i{background:var(--ok);box-shadow:0 0 0 calc(var(--lv,0) * 6px) color-mix(in srgb,var(--ok) 18%,transparent)}
.view{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:22px 20px 60px;outline:none}

/* the coach on the right */
.chat{position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--side-bg);min-width:0}
.ch-hd{display:flex;align-items:center;gap:8px;height:var(--barh);padding:0 12px 0 16px;border-bottom:1px solid var(--line)}
.ch-hd > div{margin-right:auto;display:flex;flex-direction:column;line-height:1.2}
.ch-hd b{font-size:15px}
.ch-st{color:var(--muted);font-size:12px}
.ch-st.ai{color:var(--ok)}
.ch-x{display:none}
.ch-log{flex:1;overflow-y:auto;padding:14px 14px 6px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:92%;padding:10px 12px;border-radius:12px;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--raised);border:1px solid var(--line2);border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.bot p{margin:0 0 6px}.msg.bot p:last-child{margin-bottom:0}
.msg.bot ul,.msg.bot ol{margin:4px 0 6px;padding-left:18px}
.msg.bot li{margin:2px 0}
.msg.bot b{color:var(--fg);font-weight:600}
.msg .src{display:block;margin-top:6px;color:var(--muted);font-size:11.5px}
.msg .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.msg .acts button{height:30px;padding:0 10px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:999px;background:var(--acc-dim);color:var(--acc);font-size:12.5px;font-weight:600}
.typing{display:inline-flex;gap:4px;padding:12px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.ch-chips{display:flex;gap:6px;padding:6px 12px;overflow-x:auto;scrollbar-width:none}
.ch-chips::-webkit-scrollbar{display:none}
.ch-chips button{flex:none;height:30px;padding:0 11px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);color:var(--fg2);font-size:12.5px;white-space:nowrap}
.ch-chips button:hover{color:var(--fg);border-color:var(--line3)}
.ch-in{display:flex;align-items:flex-end;gap:6px;margin:6px 12px 0;padding:6px 6px 6px 4px;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.ch-in:focus-within{border-color:var(--line3)}
.ch-in textarea{flex:1;min-height:24px;max-height:140px;padding:6px 0;border:0;background:none;resize:none;outline:none;font-size:14.5px;line-height:1.45}
.sendb{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:9px;background:var(--acc);color:var(--acc-ink);flex:none}
.sendb svg{stroke-width:2.2}
.ch-note{margin:6px 14px 12px;color:var(--muted);font-size:11.5px;min-height:1em}

.tabs{display:none}
.scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.5)}

/* tablet: the coach slides over */
@media (max-width:1180px){
  .shell{grid-template-columns:var(--side) minmax(0,1fr)}
  .chat{position:fixed;top:0;right:0;bottom:0;z-index:50;width:min(420px,100vw);transform:translateX(100%);transition:transform .28s var(--ease);box-shadow:-20px 0 40px rgba(0,0,0,.35)}
  body.chat-open .chat{transform:none}
  .chatb,.ch-x{display:inline-grid}
}
/* phone: bottom tabs, the coach as a sheet */
@media (max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .brand.sm{display:flex}
  .vt{display:none}
  .bar{padding:0 12px;gap:8px;padding-top:env(safe-area-inset-top);height:calc(var(--barh) + env(safe-area-inset-top))}
  .bar .brand.sm{margin-right:auto}
  .streakchip,.setb{display:inline-flex}
  .chatb{display:none}
  .micb span{display:none}.micb{width:38px;padding:0;justify-content:center}
  .view{padding:16px 16px calc(var(--tabh) + 40px + env(safe-area-inset-bottom))}
  .chat{width:100vw;border-left:0}
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--tabh) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);border-top:1px solid var(--line);background:color-mix(in srgb,var(--side-bg) 96%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
  .tabs a,.tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:0;background:none;color:var(--muted);text-decoration:none;font-size:11px;font-weight:500}
  .tabs svg{width:21px;height:21px}
  .tabs a.on{color:var(--fg)}.tabs a.on svg{color:var(--acc)}
}

/* ---------- building blocks ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border:1px solid transparent;border-radius:9px;background:var(--acc);color:var(--acc-ink);font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn.sec{background:var(--raised);border-color:var(--line2);color:var(--fg);font-weight:500}
.btn.ghost{background:none;border-color:transparent;color:var(--fg2);font-weight:500}
.btn.sm{height:34px;padding:0 12px;font-size:13.5px;border-radius:8px}
.btn.wide{width:100%}
.btn svg{width:17px;height:17px}
.row2{display:flex;gap:8px;flex-wrap:wrap}
.row2 .btn{flex:1}
.pn{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;min-width:0}
.pn-hd{display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 12px 6px 16px;border-bottom:1px solid var(--line)}
.pn-hd > b,.pn-hd > h2{margin-right:auto;font-weight:600;font-size:14.5px;letter-spacing:0}
.pn-bd{padding:14px 16px 16px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border:1px solid var(--line);border-radius:6px;background:var(--well);color:var(--fg2);font:500 11.5px var(--mono);white-space:nowrap}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}.chip.no{color:var(--no);border-color:color-mix(in srgb,var(--no) 35%,transparent)}.chip.acc{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 40%,transparent)}
.tbtn{height:30px;min-width:30px;padding:0 10px;white-space:nowrap;border:1px solid var(--line2);border-radius:7px;background:var(--raised);color:var(--fg);font-size:12.5px;font-weight:500}
.tbtn[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}
.seg{display:inline-flex;padding:2px;border:1px solid var(--line2);border-radius:8px;background:var(--well)}
.seg button{height:28px;padding:0 10px;border:0;border-radius:6px;background:none;color:var(--fg2);font-size:12.5px;font-weight:500}
.seg button.on{background:var(--raised);color:var(--fg)}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.g2{grid-template-columns:minmax(0,1fr)}}
.sec-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:26px 0 10px}
.sec-t h2{font-size:17px}
.sec-t a,.sec-t button{border:0;background:none;color:var(--fg2);font-size:13.5px;text-decoration:none}
.kpi{margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.kpi dt{color:var(--muted);font-size:12px;font-weight:500}
.kpi dd{margin:4px 0 0;font:600 22px var(--mono);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi dd small{margin-left:3px;color:var(--muted);font-size:13px;font-weight:500}
.kpi .d{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
.hint{margin:10px 0 0;color:var(--muted);font-size:12.5px}
.empty{padding:28px 18px;border:1px dashed var(--line2);border-radius:12px;color:var(--fg2);text-align:center}
.empty b{display:block;color:var(--fg);font-size:16px;margin-bottom:4px}
.empty .btn{margin-top:12px}
.hero{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.hero h1{font-size:clamp(24px,4.6vw,32px);line-height:1.15}
.hero p{margin:4px 0 0;color:var(--fg2)}
.cvbox{position:relative;background:var(--well)}
.cvbox canvas{display:block;width:100%;height:100%;touch-action:none}
.st{min-height:1.5em;margin:10px 0 0;color:var(--fg2);font-size:14px;font-weight:500;text-align:center;text-wrap:balance}
.st.ok{color:var(--ok)}.st.warn{color:var(--warn)}.st.no{color:var(--no)}
.toast{position:fixed;left:50%;bottom:calc(var(--tabh) + 24px);z-index:80;max-width:min(92vw,460px);padding:10px 14px;border:1px solid var(--line2);border-radius:9px;background:var(--raised);color:var(--fg);font-weight:500;font-size:14px;text-align:center;opacity:0;transform:translate(-50%,10px);transition:opacity .2s,transform .28s var(--ease);pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.micgate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:12px;background:var(--acc-dim);margin-bottom:14px}
.micgate p{margin:0;color:var(--fg);font-size:14px}
.micgate small{display:block;color:var(--fg2);font-size:12.5px}

/* ---------- Today ---------- */
.today-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
@media (max-width:900px){.today-top{grid-template-columns:minmax(0,1fr)}}
.goal{display:flex;align-items:center;gap:18px;padding:18px}
.ring{position:relative;width:104px;height:104px;flex:none}
.ring svg{width:104px;height:104px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:9}
.ring .bg{stroke:var(--well)}.ring .fgc{stroke:var(--acc);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 22px var(--mono)}
.ring b small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:-26px}
.goal h2{font-size:18px}
.goal p{margin:4px 0 10px;color:var(--fg2);font-size:14px}
.plan{display:grid;gap:1px;background:var(--line)}
.plan a,.plan button{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:0;background:var(--panel);text-align:left;text-decoration:none;color:var(--fg)}
.plan a:hover,.plan button:hover{background:var(--panel2)}
.plan i{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--raised);color:var(--acc);font-style:normal}
.plan b{display:block;font-weight:600;font-size:14.5px}
.plan small{display:block;color:var(--fg2);font-size:13px}
.plan .done i{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.plan .done b{color:var(--fg2);text-decoration:line-through;text-decoration-color:var(--muted)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal i{aspect-ratio:1;border-radius:4px;background:var(--well)}
.cal i.l1{background:color-mix(in srgb,var(--acc) 30%,transparent)}.cal i.l2{background:color-mix(in srgb,var(--acc) 60%,transparent)}.cal i.l3{background:var(--acc)}.cal i.frz{background:color-mix(in srgb,var(--info) 30%,transparent)}.cal i.fut{background:none;border:1px dashed var(--line)}
.cal-k{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;color:var(--muted);font:500 10.5px var(--mono);text-align:center}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.bdg{padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);text-align:center;min-width:0}
.bdg i{display:grid;place-items:center;width:38px;height:38px;margin:0 auto 6px;border-radius:50%;background:var(--raised);color:var(--muted);font-style:normal}
.bdg b{display:block;font-size:12.5px;font-weight:600}
.bdg small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35}
.bdg.got i{background:var(--acc-dim);color:var(--acc)}
.bdg:not(.got){opacity:.6}
.tip{display:flex;gap:12px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:10px;background:var(--panel)}
.tip b{display:block;font-size:13px;color:var(--acc);letter-spacing:.03em;text-transform:uppercase}
.tip p{margin:2px 0 0;color:var(--fg2);font-size:14px}

/* ---------- Lessons ---------- */
.unit{margin-top:18px}
.unit-hd{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.unit-hd .n{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--raised);font:600 14px var(--mono);color:var(--acc);flex:none}
.unit-hd h2{font-size:17px}
.unit-hd p{margin:0;color:var(--fg2);font-size:13.5px}
.unit-hd .pr{margin-left:auto;color:var(--muted);font:500 12px var(--mono);white-space:nowrap}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.lc{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);text-decoration:none;color:var(--fg);min-height:118px}
.lc:hover{border-color:var(--line3);background:var(--panel2)}
.lc b{font-size:15px;font-weight:600}
.lc p{margin:0;color:var(--fg2);font-size:13px;line-height:1.45}
.lc .meta{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:6px;color:var(--muted);font:500 11.5px var(--mono)}
.lc.next{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.lc.next::before{content:"Next up";position:absolute;top:-9px;left:12px;padding:0 6px;border-radius:4px;background:var(--acc);color:var(--acc-ink);font-size:11px;font-weight:600}
.stars{display:inline-flex;gap:2px;margin-left:auto}
.stars svg{width:14px;height:14px;fill:var(--line2);stroke:none}
.stars svg.on{fill:var(--acc)}

/* the exercise player */
.lesson{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
@media (max-width:1000px){.lesson{grid-template-columns:minmax(0,1fr)}}
.lesson-info .pn-bd p{margin:0 0 10px;color:var(--fg2);font-size:14px}
.lesson-info ol{margin:0;padding-left:18px;font-size:14px;color:var(--fg)}
.lesson-info li{margin:5px 0}
.player .pn-bd{padding:0}
.pl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.pl-top .rep{margin-left:auto;color:var(--muted);font:500 12.5px var(--mono)}
.pl-read{display:flex;align-items:baseline;justify-content:center;gap:12px;padding:14px 10px 4px}
.pl-read b{font:600 44px var(--mono);letter-spacing:-.04em;line-height:1}
.pl-read b.off{color:var(--off)}
.pl-read span{color:var(--muted);font:500 14px var(--mono)}
.pl-read span.ok{color:var(--ok)}.pl-read span.warn{color:var(--warn)}
.pl-cv{height:260px;margin:8px 14px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media (max-width:560px){.pl-cv{height:220px}}
.pl-ctl{padding:4px 14px 16px}
.pl-ctl .row2{margin-top:12px}
.res{display:grid;gap:14px;padding:16px 14px}
.res-top{display:flex;align-items:center;gap:16px}
.score{font:700 54px var(--mono);letter-spacing:-.04em;line-height:1}
.res-top .stars svg{width:24px;height:24px}
.res-top p{margin:0;color:var(--fg2);font-size:14px}
.notes-row{display:flex;flex-wrap:wrap;gap:5px}
.notes-row span{padding:3px 7px;border-radius:6px;background:var(--well);font:500 12px var(--mono);color:var(--fg2)}
.notes-row span.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}.notes-row span.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}.notes-row span.no{background:color-mix(in srgb,var(--no) 14%,transparent);color:var(--no)}
.lvl{height:4px;margin:8px 14px 0;border-radius:2px;background:var(--well);overflow:hidden}
.lvl i{display:block;width:0;height:100%;background:var(--fg2);transition:width .08s linear}
.lvl i.on{background:var(--ok)}

/* ---------- Monitor ---------- */
/* the monitor's tools: four groups in one strip (on a phone it scrolls sideways rather than wrapping into a heap) */
.mon-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:12px}
.mon-ctl .sp{flex:1}
.mon-ctl .tg{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:10px;background:var(--panel);flex:none}
.mon-ctl .tg .tbtn{border-color:transparent;background:none;height:30px}
.mon-ctl .tg .tbtn:hover{background:var(--raised)}
.mon-ctl .tg .tbtn[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-dim)}
.mon-ctl .tg .seg{border:0;padding:0;background:none}
.mon-ctl .tg select.tbtn{padding-right:4px}
.pn-hd .seg.sm{padding:1px;flex:none}.pn-hd .seg.sm button{height:24px;padding:0 7px;font-size:11.5px}
@media (max-width:420px){.pn-hd .seg.sm button{padding:0 5px}#m-rng{display:none}}
.tbtn.ic{display:inline-flex;align-items:center;gap:6px}
.tbtn.ic svg{width:15px;height:15px;color:var(--fg2)}
@media (max-width:760px){.mon-ctl .tg.cfgg{order:-1}.mon-ctl{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px 12px;padding:0 16px 2px;scrollbar-width:none}.mon-ctl::-webkit-scrollbar{display:none}.mon-ctl .sp{display:none}.tbtn.ic span{display:none}}
.m-hello{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-bottom:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:10px;background:var(--panel)}
.m-hello > div{flex:1 1 300px;min-width:0}
.m-hello b{display:block;font-size:14.5px}
.m-hello span{color:var(--fg2);font-size:13px}
.m-hello .row2{flex:none}

/* the panels: rows of one full-width panel or two equal halves. A row's height is set (and dragged) as one, so the two sides
   always match; the bar under each row is the handle */
.mon{display:block}
.mon-row{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-height:0}
.mon-row.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mp{display:flex;flex-direction:column;min-height:0;height:100%}
.mp > .pn-hd{flex:none}
.mb{position:relative;flex:1 1 auto;min-height:0}
.mp .cvbox{height:auto}
.mgrip{position:relative;display:grid;place-items:center;height:14px;cursor:row-resize;touch-action:none;outline-offset:-2px}
.mgrip::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:transparent;transition:background .15s}
.mgrip::after{content:"";width:44px;height:4px;border-radius:2px;background:var(--line2);transition:background .15s,width .15s}
.mgrip:hover::after,.mgrip.on::after,.mgrip:focus-visible::after{width:64px;background:var(--acc)}
.mgrip:hover::before,.mgrip.on::before{background:color-mix(in srgb,var(--acc) 25%,transparent)}
.mon .mgrip:last-child{margin-bottom:-6px}
body.resizing-y,body.resizing-y *{cursor:row-resize!important;user-select:none}
.mon .empty{padding:40px 16px;text-align:center;border:1px dashed var(--line2);border-radius:12px;color:var(--fg2)}

/* inside the panels: everything fills the height the row gives it */
.tuner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px 12px;container-type:size}
.tuner .nt{font:600 64px var(--mono);font-size:clamp(40px,24cqh,120px);letter-spacing:-.05em;line-height:1}
.tuner .nt.off{color:var(--off)}
.tuner .hz{min-height:1.4em;margin-top:4px;color:var(--muted);font:500 13px var(--mono)}
.tuner canvas{flex:1 1 auto;width:100%;max-width:340px;min-height:56px;max-height:190px;margin-top:6px}
.lvb{display:flex;flex-direction:column;justify-content:space-between;gap:10px;padding:14px 16px 14px;overflow:auto}
.lvb .hint{margin:0}
.meters{display:grid;gap:12px;align-content:center;flex:1}
.mtr{display:grid;grid-template-columns:76px minmax(0,1fr) 58px;align-items:center;gap:10px;font-size:12.5px;color:var(--fg2)}
.bar2{position:relative;display:block;height:10px;border-radius:3px;background:var(--well);overflow:hidden}
.bar2 i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--ok) 78%,var(--warn) 90%,var(--no) 99%);border-radius:3px}
#m-pk,#m-rm{width:100%;clip-path:inset(0 100% 0 0)}
.bar2 u{position:absolute;top:0;bottom:0;width:2px;background:var(--fg)}
.mtr b{text-align:right;font:500 12.5px var(--mono);color:var(--fg)}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.mp .stats{position:absolute;inset:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(74px,1fr);overflow:auto}
.stats div > *{flex:none}
@media (min-width:1300px){.mon-row:not(.two) .mp .stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stats div{display:flex;flex-direction:column;justify-content:center;padding:8px 12px;background:var(--panel);min-width:0}
.stats dt{display:flex;justify-content:space-between;gap:4px;color:var(--muted);font-size:11.5px}
.stats dd{margin:2px 0 0;font:500 16px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats dd small{color:var(--muted);font-size:11.5px;margin-left:2px}
.stats .q{display:block;font-size:11.5px;color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb > .kb{position:absolute;inset:12px 16px 14px;height:auto;max-height:240px;margin:0}
.frozen .pn-hd .chip.fz{display:inline-flex}
.chip.fz{display:none;color:var(--info);border-color:color-mix(in srgb,var(--info) 35%,transparent)}

/* ---------- Check-up and report ---------- */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 14px;padding:0;list-style:none}
.steps li{position:relative;padding-top:10px;color:var(--muted);font-size:12px;font-weight:500;text-align:center}
.steps li::before{content:"";position:absolute;inset:0 0 auto;height:3px;border-radius:2px;background:var(--line2)}
.steps li.ok{color:var(--fg2)}.steps li.ok::before{background:var(--fg2)}
.steps li.on{color:var(--fg)}.steps li.on::before{background:var(--acc)}
.card{max-width:640px;padding:22px 18px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.card .n{margin:0 0 6px;color:var(--muted);font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.card h1{margin:0 0 6px;font-size:clamp(22px,5vw,28px)}
.card .p{margin:0 0 14px;color:var(--fg2);font-size:15px}
.read{display:flex;align-items:baseline;justify-content:center;gap:12px;min-height:56px}
.read b{font:600 50px var(--mono);line-height:1;letter-spacing:-.04em}
.read b.off{color:var(--off)}
.read span{color:var(--muted);font:500 14px var(--mono)}
.read span.ok{color:var(--ok)}.read span.warn{color:var(--warn)}
.card .cvbox{height:150px;margin-top:10px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.mt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:12px;border:1px solid var(--line);border-radius:8px;background:var(--line);overflow:hidden}
.mt div{padding:8px 10px;background:var(--panel2);min-width:0}
.mt dt{color:var(--muted);font-size:11.5px}
.mt dd{margin:0;font:500 14px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:460px){.mt{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card .row2{margin-top:14px}
.skip{display:block;margin:10px auto 0;padding:6px 10px;border:0;background:none;color:var(--muted);font-size:13px}
.focus{padding:16px;border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:12px;background:var(--panel)}
.focus .k{margin:0;color:var(--acc);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.focus h2{margin:4px 0;font-size:20px}
.focus p{margin:0;color:var(--fg2);font-size:14.5px}
.focus ol{margin:10px 0 0;padding-left:20px;font-size:14.5px}
.focus li{margin:5px 0}
.focus .good{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);color:var(--fg2);font-size:13.5px}
.focus .good b{color:var(--ok);font-weight:600}
.focus .row2{margin-top:12px}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 16px;border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow .nm{font-weight:500;font-size:14.5px}
.mrow .val{font:500 15px var(--mono);text-align:right;white-space:nowrap}
.mrow .val small{color:var(--muted);font-size:12px;margin-left:2px}
.mrow .bar{grid-column:1 / -1;position:relative;height:6px;margin:6px 0 2px;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--no) 35%,transparent),color-mix(in srgb,var(--warn) 35%,transparent) 45%,color-mix(in srgb,var(--ok) 40%,transparent))}
.mrow .bar i{position:absolute;top:-3px;width:3px;height:12px;margin-left:-1.5px;border-radius:1px;background:var(--fg)}
.mrow .sub{grid-column:1 / -1;display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:12.5px}
.mrow .g{font-weight:600}
.g.good{color:var(--ok)}.g.ok{color:var(--warn)}.g.work{color:var(--no)}
.mrow .d.up{color:var(--ok)}.mrow .d.down{color:var(--no)}
.mrow details{grid-column:1 / -1;color:var(--muted);font-size:12.5px}
.mrow summary{cursor:pointer;width:max-content}
.notes{margin:0;padding-left:18px;color:var(--fg2);font-size:14px}
.notes li{margin:4px 0}
.spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin:10px 0 0;border:1px solid var(--line);border-radius:8px;background:var(--line);overflow:hidden}
.spec div{min-width:0;padding:8px 10px;background:var(--panel2)}
.spec dt{color:var(--muted);font-size:11.5px}
.spec dd{margin:0;font:500 13.5px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:460px){.spec{grid-template-columns:repeat(2,minmax(0,1fr))}}
details.tech summary{cursor:pointer;color:var(--fg2);font-size:13.5px;font-weight:500;margin-top:12px}

/* ---------- Progress ---------- */
.chart{height:180px}
.chart svg{display:block;width:100%;height:100%}
.spark{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}
@media (max-width:900px){.spark{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.spark{grid-template-columns:minmax(0,1fr)}}
.spark div{padding:12px 14px;background:var(--panel);min-width:0}
.spark dt{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.spark dt b{color:var(--fg);font:500 12.5px var(--mono)}
.spark svg{display:block;width:100%;height:40px;margin-top:6px;stroke:var(--acc);stroke-width:1.6}
.spark svg circle{fill:var(--acc);stroke:none}
.hist{width:100%;border-collapse:collapse;font-size:13.5px}
.hist th{padding:8px 12px;color:var(--muted);font-size:12px;font-weight:500;text-align:left;border-bottom:1px solid var(--line)}
.hist td{padding:9px 12px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.hist tr:last-child td{border-bottom:0}
.hist button{border:0;background:none;color:var(--acc);font-size:12.5px;font-weight:600;padding:0}
.tblw{overflow-x:auto}

/* ---------- Settings ---------- */
.set{display:grid;gap:1px;background:var(--line)}
.set > div{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:14px 16px;background:var(--panel)}
.set > div > span{min-width:0}
.set b{display:block;font-weight:500;font-size:14.5px}
.set small{display:block;color:var(--muted);font-size:12.5px}
.set select,.set input[type=number]{height:34px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--raised);color:var(--fg)}
.danger{color:var(--no)!important}
.prose{max-width:680px;color:var(--fg2);font-size:15px}
.prose h2{margin:22px 0 6px;color:var(--fg);font-size:17px}
.prose p,.prose li{margin:6px 0}

/* the reduced-motion choice */
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- first visit ---------- */
.onb{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(8,8,10,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.onb-c{width:min(520px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:24px 22px 18px;border:1px solid var(--line2);border-radius:16px;background:var(--panel)}
.onb .n{margin:0 0 6px;color:var(--acc);font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.onb h2{font-size:24px;line-height:1.2;margin-bottom:14px}
.onb-l{display:grid;gap:12px;margin:0 0 14px;padding:0;list-style:none}
.onb-l li{display:flex;gap:12px;align-items:flex-start;color:var(--fg2);font-size:14.5px}
.onb-l svg{width:22px;height:22px;color:var(--acc);margin-top:1px}
.onb-l b{color:var(--fg)}
.onb-o{display:grid;gap:8px}
.onb-o button{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);text-align:left}
.onb-o button b{font-size:15px;font-weight:600}
.onb-o button span{color:var(--fg2);font-size:13px}
.onb-o button.on{border-color:var(--acc);background:var(--acc-dim)}
.onb .skip{display:block;margin:10px auto 0;padding:6px 10px;border:0;background:none;color:var(--muted);font-size:13px}
.ear-o{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:14px}
.ear-o button{height:46px;border:1px solid var(--line2);border-radius:9px;background:var(--panel2);font-weight:500;font-size:14px}
.ear-o button:hover:not(:disabled){border-color:var(--line3);background:var(--raised)}
.ear-o button.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok);opacity:1}
.ear-o button.wrong{border-color:var(--no);background:color-mix(in srgb,var(--no) 12%,transparent);color:var(--no);opacity:1}
.tmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;padding:14px 16px}
.tk{display:grid;gap:1px;padding:7px 6px;border-radius:8px;background:var(--well);text-align:center;border:1px solid var(--line)}
.tk b{font:500 12px var(--mono)}.tk span{font:500 11.5px var(--mono);color:var(--muted)}
.tk.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}.tk.ok span{color:var(--ok)}
.tk.warn{background:color-mix(in srgb,var(--warn) 10%,transparent);border-color:color-mix(in srgb,var(--warn) 28%,transparent)}.tk.warn span{color:var(--warn)}
.tk.no{background:color-mix(in srgb,var(--no) 10%,transparent);border-color:color-mix(in srgb,var(--no) 28%,transparent)}.tk.no span{color:var(--no)}
.tk.none{opacity:.45}
.keys{position:relative;height:56px;border-radius:6px;overflow:hidden;background:var(--well)}
.keys i{position:absolute;top:0;font-style:normal}
.keys i.w{height:100%;background:#2a2b30;border-right:1px solid #16171a}
.keys i.b{height:58%;background:#0c0d0f;z-index:1}
.keys i.w.in{background:var(--acc-mid)}.keys i.b.in{background:var(--acc-deep)}
.klab{position:relative;height:18px;margin-top:4px}
.klab span{position:absolute;transform:translateX(-2px);color:var(--muted);font:500 11px var(--mono)}
.vtypes{display:grid;gap:5px;margin-top:10px}
.vtypes div{position:relative;height:18px}
.vtypes i{position:absolute;top:0;height:18px;padding:0 8px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);font:500 11px/16px var(--font);font-style:normal;white-space:nowrap;overflow:hidden}
.vtypes i.on{background:var(--acc-dim);border-color:color-mix(in srgb,var(--acc) 50%,transparent);color:var(--acc)}
.hint b{color:var(--fg2)}
.cal{max-width:300px;margin:0 auto}.cal-k{max-width:300px;margin:0 auto 4px}
.goal{padding-bottom:6px}
.wkb{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:6px 18px 16px}
.wkb div{display:grid;justify-items:center;gap:3px}
.wkb span{position:relative;display:block;width:100%;max-width:28px;height:54px;border-radius:5px;background:var(--well);overflow:hidden}
.wkb i{position:absolute;left:0;right:0;bottom:0;background:var(--acc-mid);border-radius:5px}
.wkb i.full{background:var(--acc)}
.wkb b{color:var(--muted);font:500 11px var(--mono)}
.wkb .today b{color:var(--fg)}
.wkb small{min-height:14px;color:var(--fg2);font:500 10.5px var(--mono)}
.cue{display:flex;align-items:center;gap:10px;min-height:44px;margin-bottom:12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--fg2);font-size:14px;font-weight:500}
.cue i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--muted)}
.cue.ok{border-color:color-mix(in srgb,var(--ok) 35%,transparent)}.cue.ok i{background:var(--ok)}.cue.ok span{color:var(--fg)}
.cue.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent)}.cue.warn i{background:var(--warn)}.cue.warn span{color:var(--fg)}
.cue.no{border-color:color-mix(in srgb,var(--no) 45%,transparent)}.cue.no i{background:var(--no)}.cue.no span{color:var(--fg)}
.pl-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 14px 0}
.keyc{display:inline-flex;align-items:center;gap:8px;color:var(--fg2);font:500 12.5px var(--mono)}
.keyc .tbtn{width:30px;padding:0;font-size:15px}
.sfoot{margin:0;padding:2px 10px 0;color:var(--muted);font-size:12px}.sfoot a{color:var(--muted);text-decoration:none}.sfoot a:hover{color:var(--fg2)}
.acct{margin-top:auto}
.faq{display:grid;gap:8px;margin-top:18px}
.faq details{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.faq summary{cursor:pointer;color:var(--fg);font-weight:500}
.faq p{margin:8px 0 0}
.bpm{width:64px;text-align:center;font-family:var(--mono)}
.kb{position:relative;height:120px;margin:12px 16px 16px;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.kb button{position:absolute;top:0;padding:0;border:0;cursor:pointer}
.kw{height:100%;background:#d9dadf;border-right:1px solid #9a9ba3!important;border-radius:0 0 5px 5px;display:flex;align-items:flex-end;justify-content:center}
.kw span{margin-bottom:6px;color:#45464d;font:500 10px var(--mono)}
.kbk{z-index:2;height:62%;background:#1a1b1f;border-radius:0 0 4px 4px;box-shadow:inset 0 -3px 0 #2c2d33}
.kw.sung{background:var(--acc)}.kbk.sung{background:var(--acc)}
.kw.hit{background:var(--acc-pale)}.kbk.hit{background:var(--acc-deep)}
.feel{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--fg2);font-size:14px}
@media (max-width:560px){.kb{height:100px;margin:10px}}
.panmenu{display:flex;flex-wrap:wrap;gap:6px 14px;margin:-4px 0 12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:13.5px;color:var(--fg2)}
.panmenu label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.panmenu input{accent-color:var(--acc)}
.view:fullscreen{max-width:none;padding:16px;background:var(--bg);overflow-y:auto}
.cue span{flex:1}.cue .tbtn{flex:none}
.micgate.bad{border-color:color-mix(in srgb,var(--no) 45%,transparent);background:color-mix(in srgb,var(--no) 8%,transparent)}
.v-ear .hero > .row2{width:100%}
@media (max-width:560px){.v-ear .hero > .row2{flex-direction:column;align-items:stretch}.v-ear .seg{display:flex}.v-ear .seg button{flex:1;padding:0 6px}}
.seg{max-width:100%}
.pn-hd .chip{min-width:0;overflow:hidden;text-overflow:ellipsis}
.start3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media (max-width:760px){.start3{grid-template-columns:minmax(0,1fr)}}
.s3{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:2px 10px;padding:14px;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:12px;background:var(--acc-dim);color:var(--fg);text-decoration:none;text-align:left;font:inherit}
.s3:hover{border-color:var(--acc)}
.s3 .n{position:absolute;top:10px;right:12px;color:var(--acc);font:600 12px var(--mono)}
.s3 svg{grid-row:span 2;width:22px;height:22px;color:var(--acc)}
.s3 b{font-size:15px;font-weight:600}.s3 small{color:var(--fg2);font-size:13px;line-height:1.4}
.chart svg{stroke:none}
input[type=range]{accent-color:var(--acc)}
input[type=checkbox]{accent-color:var(--acc)}

/* ---------- sing along ---------- */
.ch-att{width:36px;height:36px;border:0;background:none;color:var(--fg2)}
.ch-att:hover{color:var(--fg)}
.ch-clip{display:flex;align-items:center;gap:10px;margin:6px 12px 0;padding:8px 8px 8px 12px;border:1px solid color-mix(in srgb,var(--acc) 35%,transparent);border-radius:10px;background:var(--acc-dim);font-size:13px}
.ch-clip > svg{color:var(--acc)}
.ch-clip span{flex:1;min-width:0}
.ch-clip b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-clip small{display:block;color:var(--fg2);font:500 11.5px var(--mono)}
.ch-clip a{color:var(--acc);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.ch-clip .ib{width:28px;height:28px;border:0;background:none;color:var(--fg2)}
.ch-clip .ib svg{width:15px;height:15px}
.msg .clipref{display:flex;align-items:center;gap:5px;margin-top:5px;color:var(--fg2);font-size:11.5px}
.msg .clipref svg{width:13px;height:13px;color:var(--acc)}
.al-kind{margin:0 0 2px;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
.al-title{overflow-wrap:anywhere}
.al-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:14px;margin-bottom:14px;align-items:start}
.al-top > .al-part:only-child{grid-column:1 / -1}
.al-yt{position:relative;aspect-ratio:16 / 9;background:#000}
.al-yt iframe,.al-yt > div{position:absolute;inset:0;width:100%;height:100%;border:0}
.al-tlbox{height:56px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.al-tlbox canvas{cursor:grab}
.al-opts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.al-g{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;color:var(--fg2);font-size:13px;line-height:1.45}
.al-g .chip{flex:none;margin-top:1px}
.al-ai{display:flex;gap:9px;align-items:flex-start;margin-top:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--well);color:var(--fg2);font-size:12.5px;line-height:1.45;cursor:pointer}
.al-ai input{margin:2px 0 0;flex:none;width:16px;height:16px}
.al-ai b{color:var(--fg);font-weight:600}
.al-read{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px;padding:14px 16px 4px}
.al-read > div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.al-read .k{color:var(--muted);font-size:11.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.al-read b{font:600 34px var(--mono);letter-spacing:-.04em;line-height:1.1;white-space:nowrap}
.al-read b.off{color:var(--off)}
.al-read b.g{color:var(--fg2)}
.al-read b.t{font-size:18px;line-height:1.9;color:var(--fg2)}
.al-read > div > span:last-child:not(.k){min-height:1.3em;color:var(--muted);font:500 13px var(--mono)}
.al-read span.ok{color:var(--ok)!important}.al-read span.warn{color:var(--warn)!important}
.al-cv{height:280px}
.al-hp{text-align:center}
.al-take{margin-top:14px}
.al-take .kpi dd{font-size:20px}
.al-secs{display:flex;gap:4px;align-items:flex-end;height:74px;margin-top:14px;padding:8px 8px 0;border:1px solid var(--line);border-radius:10px;background:var(--well);overflow-x:auto}
.al-secs button{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;flex:1;min-width:28px;height:100%;padding:0 0 4px;border:0;background:none;color:var(--muted)}
.al-secs i{display:block;width:100%;max-width:34px;border-radius:3px 3px 0 0;background:var(--ok)}
.al-secs .mid i{background:var(--warn)}.al-secs .no i{background:var(--no)}
.al-secs span{font:500 9.5px var(--mono)}
.al-secs button:hover i{opacity:.8}
.al-kbar{display:flex;gap:2px;height:8px;margin-top:14px;border-radius:4px;overflow:hidden}
.al-kbar i,.al-kleg i{display:block;background:var(--ok)}
.al-kbar .ok2,.al-kleg .ok2{background:color-mix(in srgb,var(--ok) 45%,transparent)}.al-kbar .mid,.al-kleg .mid{background:var(--warn)}.al-kbar .no,.al-kleg .no{background:var(--no)}
.al-kleg{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;color:var(--fg2);font-size:12.5px}
.al-kleg span{display:inline-flex;align-items:center;gap:6px}
.al-kleg i{width:8px;height:8px;border-radius:2px}
.al-sub{margin:14px 0 6px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:uppercase}
.al-worst{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.al-worst li{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--well);font-size:13.5px}
.al-worst li span:nth-child(2){font:600 14px var(--mono);min-width:44px}
.al-lines{margin:12px 0 0;padding-left:18px;color:var(--fg2);font-size:13.5px}
.al-lines li{margin:4px 0}
.al-lines b{color:var(--fg)}
.al-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.al-src .pn-bd p.muted{margin:0 0 12px;font-size:13.5px;color:var(--fg2)}
.al-in{display:flex;gap:8px}
.al-in input{flex:1;min-width:0;height:42px;padding:0 12px;border:1px solid var(--line2);border-radius:9px;background:var(--well);outline:none;font-size:14.5px}
.al-in input:focus{border-color:var(--line3)}
.al-file{position:relative;cursor:pointer}
.al-file input{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer}
.al-drop.over{border-color:var(--acc);background:var(--panel2)}
.al-rc{font:inherit;text-align:left;cursor:pointer}
@media (max-width:900px){.al-top,.al-pick{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.al-cv{height:230px;margin:8px 10px 0}.al-read{padding:12px 10px 2px}.al-read b{font-size:28px}.tabs a span,.tabs button span{font-size:10.5px;white-space:nowrap}}

/* ---------- sheets: a dialog over the page; on a phone it rises from the bottom ---------- */
.sheetw{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px}
.sheet-s{position:absolute;inset:0;background:rgba(8,8,10,.8);opacity:0;transition:opacity .2s}
.sheet{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:calc(100dvh - 32px);border:1px solid var(--line2);border-radius:16px;background:var(--panel);outline:none;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .25s var(--ease)}
.sheet.wide{width:min(680px,100%)}
.sheetw.on .sheet-s{opacity:1}.sheetw.on .sheet{opacity:1;transform:none}
.sheet-hd{display:flex;align-items:center;gap:10px;padding:14px 14px 12px 20px;border-bottom:1px solid var(--line)}
.sheet-hd h2{margin-right:auto;font-size:18px}
.sheet-bd{padding:16px 20px 20px;overflow-y:auto;overscroll-behavior:contain}
.sheet .sh-h{margin:20px 0 8px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.sheet .sh-h:first-child{margin-top:0}
.sheet .set{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sheet .set > div{padding:11px 14px}
.sheet .seg button{padding:0 9px}
body.sheet-open{overflow:hidden}
@media (max-width:760px){.sheetw{place-items:end stretch;padding:0}.sheet,.sheet.wide{width:100%;max-height:92dvh;border-radius:16px 16px 0 0;border-bottom:0;transform:translateY(24px)}
  .sheet-bd{padding:14px 16px calc(20px + env(safe-area-inset-bottom))}}
.ib.sm{width:30px;height:30px;border-radius:7px}
.ib.sm svg{width:15px;height:15px}
.lnk{padding:0;border:0;background:none;color:var(--acc);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.lnk:hover{text-decoration:underline}
.ck{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--fg2);cursor:pointer}

/* Customize: presets and the panel list */
.presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:560px){.presets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.presets button{display:grid;gap:2px;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2);text-align:left}
.presets button:hover{border-color:var(--acc)}
.presets b{font-size:14px;font-weight:600}
.presets span{color:var(--muted);font-size:12px;line-height:1.35}
.plist{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.plist li{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 4px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.plist li.off label{color:var(--muted)}
.plist li.drag{border-color:var(--acc);background:var(--raised);box-shadow:0 8px 24px rgba(0,0,0,.35);position:relative;z-index:2}
.plist label{display:flex;align-items:center;gap:8px;margin-right:auto;font-size:14px;font-weight:500;cursor:pointer;min-width:0}
.plist .seg button{height:26px;padding:0 8px;font-size:12px}
.pl-g{display:grid;place-items:center;width:26px;height:30px;padding:0;border:0;background:none;color:var(--muted);cursor:grab;touch-action:none}
.pl-g:active{cursor:grabbing}
.pl-g svg{width:16px;height:16px}
@media (max-width:420px){.plist .ib.sm{display:none}}

/* Mic setup */
.ms-lead{margin:0 0 12px;color:var(--fg2);font-size:14px}
.ms-st{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.ms-st .chip svg{width:13px;height:13px;margin-right:3px}
.ms-sec{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--line)}
.ms-n{display:grid;place-items:center;width:26px;height:26px;border:1px solid var(--line2);border-radius:50%;color:var(--fg2);font:600 12.5px var(--mono)}
.ms-sec h3{margin:2px 0 6px;font-size:15px}
.ms-p{margin:0 0 10px;color:var(--fg2);font-size:13.5px}
.ms-sec .hint{margin-top:8px}
.ms-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.ms-row select{flex:1;min-width:0;height:34px;padding:0 10px;border:1px solid var(--line2);border-radius:8px;background:var(--raised);color:var(--fg)}
.ms-row label{width:84px;color:var(--fg2);font-size:13px}
.ms-row input[type=range]{flex:1;min-width:120px}
.ms-row b{min-width:56px;text-align:right;font-size:13px}
.ms-meter{position:relative;height:16px;border-radius:4px;background:var(--well);overflow:hidden}
.ms-meter .band{position:absolute;top:0;bottom:0;left:56.67%;width:33.33%;background:color-mix(in srgb,var(--ok) 14%,transparent);border-left:1px solid color-mix(in srgb,var(--ok) 45%,transparent);border-right:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.ms-meter .rms{position:absolute;left:0;top:5px;bottom:5px;width:0;background:color-mix(in srgb,var(--fg) 35%,transparent);border-radius:2px}
.ms-meter .pk{position:absolute;inset:0;background:linear-gradient(90deg,var(--ok) 80%,var(--warn) 92%,var(--no));opacity:.85;clip-path:inset(0 100% 0 0)}
.ms-meter u{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--fg)}
.ms-scale{display:flex;justify-content:space-between;margin-top:4px;color:var(--muted);font:500 10.5px var(--mono)}
.ms-read{margin:8px 0 0;font-size:13.5px;font-weight:500;color:var(--fg2)}
.ms-read.ok{color:var(--ok)}.ms-read.warn{color:var(--warn)}.ms-read.no{color:var(--no)}
.ms-room{display:grid;grid-template-columns:84px minmax(0,1fr) 40px;align-items:center;gap:6px 10px;margin-top:12px;font-size:12.5px;color:var(--fg2)}
.ms-room b{text-align:right;font-size:12.5px}
.ms-room .bar2 i{background:var(--muted)}
.ms-room #ms-rv{background:var(--info)}
.ms-gate{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--fg2);font-size:13px}
.ms-gate i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.ms-gate.ok{color:var(--fg)}.ms-gate.ok i{background:var(--ok)}
.ms-tg{display:flex;gap:10px;align-items:flex-start;margin-top:10px;cursor:pointer}
.ms-tg input{margin:3px 0 0;width:16px;height:16px;flex:none}
.ms-tg b{display:block;font-size:14px;font-weight:500}
.ms-tg small{display:block;color:var(--muted);font-size:12.5px}
.ms-ft{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.ms-ft .btn{min-width:120px}

/* ---------- the side columns: one width, dragged from the inner edge of either ---------- */
:root{--sidew:300px;--side:var(--sidew);--chatw:var(--sidew)}
.edge{position:absolute;top:0;bottom:0;z-index:5;width:7px;cursor:col-resize;touch-action:none;outline-offset:-2px}
.edge.r{right:-1px}.edge.l{left:-1px}
.edge::after{content:"";position:absolute;top:0;bottom:0;left:3px;width:1px;background:transparent;transition:background .15s}
.edge:hover::after,.edge:focus-visible::after,body.resizing .edge::after{background:var(--acc)}
body.resizing,body.resizing *{cursor:col-resize!important;user-select:none}
@media (max-width:1180px){:root{--side:248px}.edge{display:none}}

/* ---------- Today for a beginner: the first note, and the first week's four steps ---------- */
.fn{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:14px;padding:20px;border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
@media (max-width:760px){.fn{grid-template-columns:minmax(0,1fr);padding:16px}}
.fn .k{margin:0 0 4px;color:var(--acc);font:600 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.fn h2{font-size:22px;line-height:1.25;margin-bottom:8px}
.fn p{margin:0 0 12px;color:var(--fg2);font-size:14.5px}
.fn-steps{margin:0 0 14px;padding-left:20px;color:var(--fg2);font-size:14.5px}
.fn-steps li{margin:3px 0}
.fn-st{min-height:1.4em;margin:10px 0 0!important;color:var(--fg)!important;font-weight:500}
.fn .hint{margin:6px 0 0}
.fn-r{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:200px;padding:14px;border-radius:12px;background:var(--well)}
@media (max-width:760px){.fn-r{min-height:0;padding:12px}.fn-note{font-size:52px}.fn-cv{height:64px}.fn.won .fn-r{flex-direction:row;justify-content:center;gap:14px}.fn.won .fn-note{font-size:40px}}
.fn-note{font:600 64px var(--mono);letter-spacing:-.05em;line-height:1}
.fn-note.off{color:var(--off)}
.fn-c{min-height:1.2em;color:var(--muted);font:500 13px var(--mono)}
.fn-cv{width:100%;height:84px}.fn-cv canvas{display:block;width:100%;height:100%}
.fn-hold{width:100%;height:8px;border-radius:4px;background:var(--panel2);overflow:hidden}
.fn-hold i{display:block;width:0;height:100%;border-radius:4px;background:var(--acc);transition:width .1s linear}
.fn.won .fn-r{gap:10px}
.fn.won .fn-note{color:var(--acc)}
.path{margin-bottom:14px}
.wk1{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line)}
.wk1 a{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px 16px;background:var(--panel);color:inherit;text-decoration:none}
.wk1 a:hover{background:var(--panel2)}
.wk1 i{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line2);border-radius:50%;color:var(--fg2);font:600 12.5px var(--mono);font-style:normal}
.wk1 i svg{width:15px;height:15px}
.wk1 b{display:block;font-size:15px;font-weight:600}
.wk1 small{display:block;color:var(--muted);font-size:13px}
.wk1 .done b{color:var(--fg2);font-weight:500}
.wk1 .done i{border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.wk1 .next a{background:var(--acc-dim)}
.wk1 .next i{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}
.wk1 .go{padding:6px 12px;border-radius:8px;background:var(--acc);color:var(--acc-ink);font-size:13px;font-weight:600}
.wk1 .st{color:var(--ok);font-size:12.5px;font-weight:500}
.wk1 > li > a > svg{color:var(--muted)}
.today-top.one{grid-template-columns:minmax(0,1fr)}

/* ---------- reward moments ---------- */
@keyframes land{0%{transform:scale(0) rotate(-40deg);opacity:0}65%{transform:scale(1.3) rotate(8deg);opacity:1}100%{transform:none;opacity:1}}
.stars svg.land{animation:land .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.rise{animation:rise .4s var(--ease) both}
@keyframes popin{0%{transform:scale(.97);opacity:0}100%{transform:none;opacity:1}}
.pop{animation:popin .45s var(--ease) both}
.pop .fn-note{animation:land .6s cubic-bezier(.3,1.4,.5,1) .15s both}
.xpfly{position:fixed;left:0;top:0;z-index:120;pointer-events:none;padding:5px 11px;border-radius:999px;background:var(--acc);color:var(--acc-ink);font:600 13px var(--mono);white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.moment{position:fixed;inset:0;z-index:110;display:grid;place-items:center;padding:16px;background:rgba(8,8,10,0);transition:background .25s}
.moment.on{background:rgba(8,8,10,.62)}
.mo-c{display:grid;justify-items:center;gap:6px;width:min(320px,100%);padding:26px 22px 20px;border:1px solid var(--line2);border-radius:18px;background:var(--panel);text-align:center;transform:scale(.88) translateY(10px);opacity:0;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .25s}
.moment.on .mo-c{transform:none;opacity:1}
.mo-c i{display:grid;place-items:center;width:60px;height:60px;margin-bottom:4px;border-radius:50%;background:var(--acc-dim);color:var(--acc)}
.mo-c i svg{width:30px;height:30px}
.moment.on .mo-c i{animation:land .6s cubic-bezier(.3,1.4,.5,1) .12s both}
.mo-c b{font-size:22px;letter-spacing:-.01em}
.mo-c span{color:var(--fg2);font-size:14px;line-height:1.45}
.mo-c .btn{margin-top:12px;min-width:130px}

/* ---------- chat: the buttons under messages, stop, talk to type, past chats ---------- */
.mact{display:flex;gap:2px;margin:8px -6px -6px}
.mact.me{justify-content:flex-end;margin:6px -6px -6px}
.mact button{display:inline-grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:6px;background:none;color:var(--muted)}
.mact button:hover{background:var(--raised);color:var(--fg)}
.mact button svg{width:15px;height:15px}
.mact button[aria-pressed="true"]{color:var(--acc)}
.mact button[aria-pressed="true"] svg{fill:var(--acc-dim)}
.sendb.stop{background:var(--raised);border:1px solid var(--line2);color:var(--fg)}
.sendb.stop svg{width:14px;height:14px}
.ch-talk{width:36px;height:36px;border:0;background:none;color:var(--fg2)}
.ch-talk:hover{color:var(--fg)}
.ch-talk.on{color:var(--no);animation:talk 1.2s ease-in-out infinite}
@keyframes talk{50%{opacity:.45}}
.chat{position:sticky}
@media (max-width:1180px){.chat{position:fixed}}
.ch-hl{position:absolute;left:0;right:0;top:var(--barh);bottom:0;z-index:6;display:flex;flex-direction:column;background:var(--side-bg);animation:rise .2s var(--ease) both}
.hl-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 12px 8px 16px}
.hl-l{flex:1;overflow-y:auto;padding:0 8px 12px}
.hl-i{display:flex;align-items:center;gap:4px;border-radius:10px}
.hl-i:hover{background:var(--panel)}
.hl-i > button:first-child{flex:1;min-width:0;padding:10px 8px;border:0;background:none;text-align:left}
.hl-i b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-i small{display:block;color:var(--muted);font-size:12px}
.hl-i .ib{border:0;background:none;color:var(--muted)}
.hl-e{margin:8px 16px;color:var(--fg2);font-size:14px}

/* ---------- motion: a view comes in softly, lists arrive one by one, things you press give a little. All of it switches off for
   people who ask their device for less motion (the rule near the top) ---------- */
@keyframes viewin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view.enter > *{animation:viewin .34s var(--ease) both}
.view.enter > :nth-child(2){animation-delay:.05s}.view.enter > :nth-child(3){animation-delay:.1s}.view.enter > :nth-child(4){animation-delay:.15s}
.view.enter > :nth-child(5){animation-delay:.2s}.view.enter > :nth-child(n+6){animation-delay:.24s}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats,.presets,.start3) > *{animation:viewin .32s var(--ease) both}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats) > :nth-child(1){animation-delay:.12s}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats) > :nth-child(2){animation-delay:.16s}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats) > :nth-child(3){animation-delay:.2s}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats) > :nth-child(4){animation-delay:.24s}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats) > :nth-child(5){animation-delay:.28s}
.view.enter :is(.lgrid,.plan,.wk1,.badges,.grid,.stats) > :nth-child(n+6){animation-delay:.32s}
.btn,.tbtn,.ib,.seg button,.lc,.plan a,.wk1 a,.s3,.ch-chips button,.mact button,.msg .acts button,.presets button,.nav a,.tabs a,.sendb{transition:transform .14s var(--ease),background-color .18s,border-color .18s,color .18s,opacity .18s}
.btn:active,.tbtn:active,.ib:active,.seg button:active,.ch-chips button:active,.msg .acts button:active,.presets button:active,.sendb:active,.mact button:active{transform:scale(.96)}
.lc:hover,.presets button:hover{transform:translateY(-2px)}
.lc:active,.plan a:active,.wk1 a:active{transform:scale(.985)}
.tabs a:active svg{transform:scale(.9)}
.tabs a svg{transition:transform .14s var(--ease),color .18s}
.msg:last-child{animation:viewin .3s var(--ease) both}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.wkb i{transform-origin:bottom;animation:grow .7s var(--ease) .2s both}
@keyframes shimmer{from{background-position:-200px 0}to{background-position:200px 0}}
.skel{background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--shine) 6%,transparent),transparent) 0 0/200px 100% no-repeat,var(--panel2);animation:shimmer 1.2s linear infinite}
.chip.busy{position:relative;overflow:hidden}
.chip.busy::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--shine) 12%,transparent),transparent);animation:shimmer 1.1s linear infinite;background-size:200px 100%;background-repeat:no-repeat}
.ch-log.quiet .msg{animation:none}
.goal > div{min-width:0}
.goal .btn{max-width:100%;height:auto;min-height:42px;padding:9px 16px;white-space:normal;text-align:left;line-height:1.25}

/* the coach's tip on a result screen */
.ctip{display:grid;gap:4px;margin-top:2px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--info) 30%,transparent);border-radius:12px;background:color-mix(in srgb,var(--info) 6%,transparent);animation:viewin .35s var(--ease) both}
.ctip-k{display:inline-flex;align-items:center;gap:6px;color:var(--info);font:600 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.ctip-k svg{width:14px;height:14px}
.ctip-t{color:var(--fg);font-size:14.5px;line-height:1.5}
.ctip-t p{margin:0}
.ctip .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ctip .acts button{height:30px;padding:0 10px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:999px;background:var(--acc-dim);color:var(--acc);font-size:13px;font-weight:600}
.ctip .ctip-more{justify-self:start;margin-top:4px;font-size:13px}
.ctip.wait .ctip-k::after{content:"";width:6px;height:6px;margin-left:4px;border-radius:50%;background:var(--info);animation:blink 1.2s infinite}
#al-tip:empty{display:none}
#al-tip .ctip{margin:12px 0 0}

/* lesson cards: an icon for what you'll do, one short line */
.lc.lci{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;row-gap:2px;min-height:96px}
.lc .lic{grid-row:span 3;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--raised);color:var(--acc)}
.lc .lic svg{width:19px;height:19px}
.lc.done .lic{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.lc.lci .meta{grid-column:2}
.lc.lci p{font-size:13px;color:var(--muted)}
.lesson-info details.why{margin-top:12px;color:var(--fg2);font-size:14px}
.lesson-info details.why summary{cursor:pointer;color:var(--fg2);font-weight:500;width:max-content}
.lesson-info details.why p{margin:6px 0 0}

/* the menu's groups, and Learn's switcher (phone: one tab for lessons, songs, ear training and the check-up) */
.nav-g{display:block;margin:12px 10px 2px;color:var(--muted);font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.subnav{display:none}
@media (max-width:760px){.subnav{display:flex;gap:6px;margin:0 -16px 14px;padding:0 16px 2px;overflow-x:auto;scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}
  .subnav a{flex:none;display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;color:var(--fg2);font-size:14px;font-weight:500;text-decoration:none}
  .subnav a.on{border-color:var(--acc);background:var(--acc-dim);color:var(--acc)}}
a.streakchip{text-decoration:none}
.acct[hidden] + .sfoot{margin-top:auto}
.srcs{margin:6px 0 0;padding-left:18px;font-size:13px;color:var(--fg2)}.srcs li{margin:4px 0}.srcs a{color:var(--acc)}

/* ---------- the VocaMimi look: round type, chunky buttons that press down, cards like stickers, a faint lab-grid paper.
   Everything here is scoped away from the Studio, which keeps the plain pro look above ---------- */
body:not(.studio){--mono:"Nunito","IBM Plex Sans Thai",system-ui,sans-serif;font-feature-settings:"tnum";font-weight:500;
  background-image:radial-gradient(color-mix(in srgb,var(--acc) 13%,transparent) 1.2px,transparent 1.3px);background-size:22px 22px;background-attachment:fixed}
body.studio{--mono:"IBM Plex Mono","IBM Plex Sans Thai",ui-monospace,Menlo,monospace}
body:not(.studio) :is(h1,h2,h3,.vt,.brand b,.score,.mo-c b){font-family:var(--head);font-weight:600;letter-spacing:-.01em}
body:not(.studio) .hero h1{font-size:clamp(26px,5vw,34px)}
.brand b em{font-style:normal;color:var(--acc)}
.brand b::after{background:var(--lemon);border-radius:50%;width:8px;height:8px}
body.studio .brand b::after{background:var(--acc);border-radius:2px}
body.studio .brand b em{color:inherit}

/* buttons: a solid colour with a darker lip under it; pressing pushes it down */
body:not(.studio) .btn{height:46px;padding:0 20px;border-radius:14px;font-weight:800;font-size:15px;letter-spacing:.01em;box-shadow:0 4px 0 var(--press)}
body:not(.studio) .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--press)}
body:not(.studio) .btn.sec{background:var(--panel);border:2px solid var(--line2);color:var(--fg);font-weight:700;box-shadow:0 4px 0 var(--line2)}
body:not(.studio) .btn.sec:active{box-shadow:0 1px 0 var(--line2)}
body:not(.studio) .btn.ghost{box-shadow:none;font-weight:700}
body:not(.studio) .btn.sm{height:38px;padding:0 14px;border-radius:12px;font-size:14px;box-shadow:0 3px 0 var(--press)}
body:not(.studio) .btn.sec.sm{box-shadow:0 3px 0 var(--line2)}
body:not(.studio) .btn.lemon{background:var(--lemon);color:var(--lemon-ink);box-shadow:0 4px 0 #d9ad00}

/* cards: thicker outline, rounder, a soft drop under them */
body:not(.studio) :is(.pn,.kpi,.lc,.card,.tip,.focus,.sc,.acct,.empty,.bdg,.faq details,.cue,.feel,.m-hello,.micgate,.s3,.ctip,.al-worst li,.presets button,.plist li){border-width:2px;border-radius:var(--r);box-shadow:0 3px 0 var(--line)}
body:not(.studio) :is(.tip,.focus){border-left-width:5px}
body:not(.studio) .lc:hover{border-color:var(--acc2);background:var(--panel)}
body:not(.studio) .lc.next{border-color:var(--acc);box-shadow:0 4px 0 color-mix(in srgb,var(--acc) 35%,transparent)}
body:not(.studio) .lc.next::before{top:-11px;padding:1px 9px;border-radius:999px;background:var(--lemon);color:var(--lemon-ink);font-weight:800}
body:not(.studio) :is(.lc .lic,.plan i,.unit-hd .n,.bdg i){border-radius:12px}
body:not(.studio) .chip{border-radius:999px;font-weight:700}
body:not(.studio) :is(.tbtn,.seg){border-radius:10px}
body:not(.studio) .seg button{border-radius:8px;font-weight:700}
body:not(.studio) .seg button.on{background:var(--acc);color:var(--acc-ink)}
body:not(.studio) .ib{border-radius:12px;border-width:2px;background:var(--panel)}
body:not(.studio) .micb{border-radius:12px;border-width:2px;background:var(--panel);font-weight:700}

/* the menu and tabs: the current page is a violet pill */
body:not(.studio) .side{border-right:2px solid var(--line)}
body:not(.studio) .nav a{border-radius:12px;font-weight:700}
body:not(.studio) .nav a.on{background:var(--acc-dim);color:var(--acc)}
body:not(.studio) .tabs{border-top-width:2px}
body:not(.studio) .tabs a,body:not(.studio) .tabs button{font-weight:700}
body:not(.studio) .tabs a.on{color:var(--acc)}
body:not(.studio) .tabs a.on svg{color:var(--acc);transform:translateY(-1px)}
body:not(.studio) .bar{border-bottom-width:2px}
body:not(.studio) .streakchip{border-color:color-mix(in srgb,var(--lemon) 60%,var(--line2));background:color-mix(in srgb,var(--lemon) 22%,var(--panel));color:var(--fg);font-weight:800}
body:not(.studio) .streakchip svg{color:#f59e0b}
body:not(.studio) .xpbar{height:10px;border-radius:5px}
body:not(.studio) .xpbar i{border-radius:5px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
body:not(.studio) .wk i{border-radius:7px}
body:not(.studio) .wk i.on{background:var(--lemon);color:var(--lemon-ink)}

/* chat: rounder bubbles, yours in violet */
body:not(.studio) .chat{border-left:2px solid var(--line)}
body:not(.studio) .msg{border-radius:18px;font-size:14.5px}
body:not(.studio) .msg.me{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);border-bottom-right-radius:6px}
body:not(.studio) .msg.bot{border-width:2px;border-bottom-left-radius:6px}
body:not(.studio) .ch-in{border-width:2px;border-radius:18px}
body:not(.studio) .sendb{border-radius:12px}

/* sheets, the welcome and reward cards */
body:not(.studio) :is(.sheet,.onb-c,.mo-c){border-width:2px;border-radius:24px;box-shadow:0 18px 50px var(--shadow)}
body:not(.studio) .sheet-s,body:not(.studio) .onb{background:color-mix(in srgb,#1b1438 45%,transparent)}
body:not(.studio) .moment.on{background:color-mix(in srgb,#1b1438 45%,transparent)}
body:not(.studio) .mo-c i{background:color-mix(in srgb,var(--lemon) 35%,var(--panel));color:var(--lemon-ink)}
body:not(.studio) .xpfly{background:var(--lemon);color:var(--lemon-ink);font-weight:800}
body:not(.studio) .toast{border-radius:14px;border-width:2px;background:var(--fg);color:var(--bg);border-color:var(--fg);font-weight:700}
body:not(.studio) .stars svg.on{fill:#ffc61a}
@media (max-width:760px){body:not(.studio) .sheet,body:not(.studio) .sheet.wide{border-radius:24px 24px 0 0}}
body:not(.chat-open) .chat{box-shadow:none}