/* ------------------------------------------------------------------
   Outworld design system tokens, ported from the Claude Design project
   (_ds/outworld-design-system-c271f9b5.../tokens/*.css) plus the
   component styles that the DS bundle applied inline.
   ------------------------------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300..800&family=Instrument+Sans:wght@400..700&family=Martian+Mono:wght@300..600&display=swap");

:root {
  --void-900:#0B0A14; --void-800:#14121F; --void-700:#211D33; --void-600:#332C4D;
  --bone-100:#F4F0E6; --bone-200:#E6DFCD; --bone-300:#CFC6AE;
  --acid-500:#C8FF3D; --acid-600:#A7E01B; --acid-700:#7FAE10; --acid-900:#41590A;
  --flare-500:#FF5B2E; --flare-600:#E43F14;
  --lagoon-500:#00C2A8; --lagoon-600:#009A87;
  --plum-500:#6B1F5C; --plum-400:#8E2C7B;
  --mustard-500:#E0A32E; --sky-300:#9CC7FF;

  --surface-page:var(--void-900); --surface-panel:var(--void-800); --surface-raised:var(--void-700);
  --surface-paper:var(--bone-100); --surface-inverse:var(--bone-100);
  --text-body:var(--bone-100); --text-muted:#A79FB8; --text-quiet:#6E6684;
  --text-on-acid:var(--void-900); --text-on-paper:var(--void-900);
  --text-link:var(--acid-500); --text-link-hover:var(--acid-600); --text-accent:var(--acid-500);
  --accent-primary:var(--acid-500); --accent-primary-press:var(--acid-600);
  --accent-secondary:var(--flare-500); --accent-tertiary:var(--lagoon-500);
  --border-hairline:var(--void-600); --border-control:var(--text-quiet);
  --border-strong:var(--bone-100); --border-paper:var(--bone-300);
  --status-ok:var(--lagoon-500); --status-warn:var(--mustard-500);
  --status-danger:var(--flare-500); --status-info:var(--sky-300);
  --focus-ring:var(--sky-300); --shadow-ink:var(--void-600); --ink-line:var(--void-900);
  --overlay-scrim:rgba(11,10,20,.78);

  --font-display:"Bricolage Grotesque","Trebuchet MS",sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",sans-serif;
  --font-mono:"Martian Mono",ui-monospace,monospace;

  --step--1:0.833rem; --step-0:1rem; --step-1:1.25rem; --step-2:1.6rem;
  --step-3:2.1rem; --step-4:2.9rem; --step-5:4rem;
  --lh-tight:0.92; --lh-snug:1.08; --lh-body:1.5; --lh-loose:1.65;
  --tracking-display:-0.035em; --tracking-label:0.14em;
  --weight-medium:500; --weight-display:600;
  --type-title:var(--weight-display) var(--step-3)/var(--lh-snug) var(--font-display);
  --type-body:400 var(--step-0)/var(--lh-body) var(--font-body);
  --type-small:400 var(--step--1)/var(--lh-loose) var(--font-body);
  --type-label:var(--weight-medium) var(--step--1)/1.2 var(--font-mono);

  --space-1:5px; --space-2:10px; --space-3:15px; --space-4:25px;
  --space-5:40px; --space-6:65px; --space-7:105px;
  --pad-card:var(--space-4);

  --radius-tight:3px; --radius-soft:14px; --radius-blob:28px; --radius-pill:999px;
  --radius-lopsided:var(--radius-blob) var(--radius-tight) var(--radius-blob) var(--radius-tight);
  --radius-lopsided-alt:var(--radius-tight) var(--radius-blob) var(--radius-tight) var(--radius-blob);
  --clip-cut-corner:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  --clip-shard:polygon(0 6%,100% 0,97% 100%,3% 94%);
  --clip-lens:polygon(50% 0,100% 50%,50% 100%,0 50%);
  --slab-sm:4px 4px 0 0 var(--shadow-ink);
  --slab-md:8px 8px 0 0 var(--shadow-ink);
  --glow-acid:0 0 0 6px rgba(200,255,61,.18);

  --dur-fast:120ms; --dur-base:220ms;
  --ease-snap:cubic-bezier(.2,.9,.1,1); --ease-overshoot:cubic-bezier(.34,1.56,.64,1);
  --transition-control:transform var(--dur-fast) var(--ease-snap),box-shadow var(--dur-fast) var(--ease-snap),background-color var(--dur-fast) linear;
  --press-shift:2px;
}

/* The light theme from the design system, applied when settings.theme = paper. */
.ow-paper {
  --surface-page:var(--bone-100); --surface-panel:var(--bone-100); --surface-raised:var(--bone-200);
  --surface-inverse:var(--void-900);
  --text-body:var(--void-900); --text-muted:#4C4560; --text-quiet:#7C748F;
  --text-link:var(--plum-500); --text-link-hover:var(--flare-600); --text-accent:var(--acid-900);
  --border-hairline:var(--bone-300); --border-control:var(--void-600); --border-strong:var(--void-900);
  --border-paper:var(--void-600); --text-on-paper:var(--void-900); --surface-paper:var(--bone-200);
  --focus-ring:var(--plum-500); --shadow-ink:var(--void-900);
  --overlay-scrim:rgba(244,240,230,.78); --status-info:#2E6BC4;
}

/* ---------------------------------- base ---------------------------------- */
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body {
  margin:0; background:var(--surface-page); color:var(--text-body); font:var(--type-body);
  -webkit-font-smoothing:antialiased; text-wrap:pretty;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4 { margin:0; font-family:var(--font-display); font-weight:var(--weight-display);
  letter-spacing:var(--tracking-display); line-height:var(--lh-snug) }
a { color:var(--text-link); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:2px; text-decoration-color:color-mix(in oklab,var(--text-link) 45%,transparent) }
a:hover { color:var(--text-link-hover); text-decoration-color:currentColor }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:3px }
[hidden] { display:none !important }

.label {
  font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted);
}
.title { font:var(--weight-display) clamp(2rem,1.3rem + 3vw,2.9rem)/0.98 var(--font-display);
  letter-spacing:-.035em; margin:10px 0 0 }
.lede { margin:15px 0 0; color:var(--text-muted); max-width:60ch }
.muted { color:var(--text-muted) }
.stack { display:grid; gap:var(--space-3) }
.row { display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap }
.spacer { margin-left:auto }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }

/* --------------------------------- badge ---------------------------------- */
.badge {
  display:inline-flex; align-items:center; padding:7px 14px 8px;
  border:2px solid var(--ink-line); border-radius:0; clip-path:var(--clip-shard);
  font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase;
  background:var(--acid-500); color:var(--ink-line); white-space:nowrap;
}
.badge--flare { background:var(--flare-500); color:var(--bone-100) }
.badge--lagoon { background:var(--lagoon-500); color:var(--ink-line) }
.badge--mustard { background:var(--mustard-500); color:var(--ink-line) }
.badge--plum { background:var(--plum-500); color:var(--bone-100) }
.badge--quiet {
  background:transparent; color:var(--text-muted);
  border:1px solid var(--border-hairline); clip-path:none; padding:5px 12px;
}

/* ---------------------------------- card ---------------------------------- */
.card {
  display:flex; flex-direction:column; gap:var(--space-3); padding:var(--pad-card);
  border:2px solid var(--border-strong); border-radius:var(--radius-lopsided);
  box-shadow:var(--slab-md); background:var(--surface-panel); color:var(--text-body);
  min-width:0;
}
.card--flat { box-shadow:none }
.card--raised { background:var(--surface-raised) }
.card--acid { background:var(--acid-500); color:var(--text-on-acid) }
.card--plum { background:var(--plum-500); color:var(--bone-100) }
.card--cut { border-radius:0; clip-path:var(--clip-cut-corner) }
.card__eyebrow { font:var(--type-label); letter-spacing:var(--tracking-label); text-transform:uppercase; opacity:.7 }
.card__title { font:var(--type-title); letter-spacing:var(--tracking-display) }
.card__footer { margin-top:auto; padding-top:var(--space-2);
  border-top:1px solid color-mix(in oklab,currentColor 22%,transparent) }

/* --------------------------------- button --------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  text-transform:uppercase; cursor:pointer; border-radius:var(--radius-lopsided);
  transition:var(--transition-control);
  font:var(--weight-medium) var(--step-0)/1 var(--font-mono); letter-spacing:.06em;
  padding:13px 25px; background:var(--accent-primary); color:var(--text-on-acid);
  border:2px solid var(--ink-line); box-shadow:var(--slab-sm);
}
.btn--sm { font:var(--weight-medium) var(--step--1)/1 var(--font-mono); padding:9px 15px; letter-spacing:.08em }
.btn--lg { font:var(--weight-medium) var(--step-1)/1 var(--font-mono); padding:18px 40px; letter-spacing:.04em }
.btn--secondary { background:var(--accent-secondary); color:var(--bone-100) }
.btn--outline { background:transparent; color:var(--text-body); border:2px solid var(--border-strong); box-shadow:none }
.btn--ghost { background:transparent; color:var(--text-body); border:2px solid transparent; box-shadow:none }
.btn--block { display:flex; width:100% }
.btn:hover:not(:disabled) { filter:brightness(1.08) }
.btn--outline:hover:not(:disabled),.btn--ghost:hover:not(:disabled) {
  filter:none; background:color-mix(in oklab,var(--text-body) 12%,transparent) }
.btn:active:not(:disabled) { transform:translate(var(--press-shift),var(--press-shift)) }
.btn:active:not(:disabled):not(.btn--outline):not(.btn--ghost) { box-shadow:2px 2px 0 0 var(--shadow-ink) }
.btn:disabled { opacity:.4; cursor:not-allowed }

/* ----------------------------------- tag ---------------------------------- */
.tag {
  display:inline-flex; align-items:center; gap:var(--space-1); padding:6px 12px;
  background:transparent; color:var(--text-body);
  border:1px solid var(--border-hairline); border-radius:var(--radius-lopsided-alt);
  font:var(--type-small); cursor:pointer; transition:var(--transition-control);
}
.tag[aria-pressed="true"],.tag.is-selected {
  background:var(--accent-tertiary); color:var(--void-900); border-color:var(--void-900);
}

/* -------------------------------- controls -------------------------------- */
.field { display:flex; flex-direction:column; gap:var(--space-1) }
.field__label { font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted) }
.field__hint { font:var(--type-small); color:var(--text-quiet) }
.field__error { font:var(--type-small); color:var(--status-danger) }

.input,.select {
  width:100%; font:var(--type-body); color:var(--text-body);
  background:color-mix(in oklab,var(--text-body) 6%,transparent);
  border:2px solid var(--border-hairline); border-radius:var(--radius-lopsided);
  padding:13px 15px; outline:none;
  transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear;
}
textarea.input { min-height:110px; resize:vertical; line-height:var(--lh-body) }
.input:focus,.select:focus { border-color:var(--accent-primary); box-shadow:var(--glow-acid) }
.input[aria-invalid="true"] { border-color:var(--status-danger) }
.input::placeholder { color:var(--text-quiet) }
.select { appearance:none; padding-right:44px; cursor:pointer }
.select-wrap { position:relative; display:block }
/* lucide "chevrons-up-down", masked so it takes the accent colour from a token */
.select-wrap::after {
  content:""; position:absolute; right:15px; top:50%; width:16px; height:16px;
  transform:translateY(-50%); pointer-events:none; background:var(--accent-primary);
  --chevrons:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>');
  -webkit-mask:var(--chevrons) center/contain no-repeat;
  mask:var(--chevrons) center/contain no-repeat;
}

.range { -webkit-appearance:none; appearance:none; width:100%; height:12px;
  background:var(--void-600); outline:none; cursor:pointer }
.ow-paper .range { background:var(--bone-300) }
.range::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px;
  background:var(--lagoon-500); border:2px solid var(--ink-line); border-radius:2px 8px 2px 8px; cursor:pointer }
.range::-moz-range-thumb { width:18px; height:18px; background:var(--lagoon-500);
  border:2px solid var(--ink-line); border-radius:2px 8px 2px 8px; cursor:pointer }

.meter { height:12px; background:var(--void-600) }
.ow-paper .meter { background:var(--bone-300) }
.meter > span { display:block; height:100%; background:var(--lagoon-500) }

/* ---------------------------------- logo ---------------------------------- */
.logo { display:flex; align-items:center; gap:10px }
.logo__mark { flex:none; display:block }
.logo__word { font:var(--weight-display) 19px/1 var(--font-display); letter-spacing:-.04em }

/* --------------------------------- layout --------------------------------- */
.shell { min-height:100dvh; display:grid; grid-template-columns:232px 1fr }
.sidebar {
  border-right:2px solid var(--border-hairline); padding:18px 15px;
  display:flex; flex-direction:column; gap:var(--space-5);
  position:sticky; top:0; height:100dvh;
}
.sidebar__nav { display:flex; flex-direction:column; gap:var(--space-1) }
.navbtn {
  all:unset; cursor:pointer; padding:10px 12px; text-align:left;
  font:var(--weight-medium) 12px/1.2 var(--font-mono); letter-spacing:var(--tracking-label);
  text-transform:uppercase; border:2px solid var(--border-hairline);
  border-radius:var(--radius-lopsided); background:transparent; color:var(--text-muted);
  transition:var(--transition-control);
}
.sidebar__nav .navbtn:nth-child(even) { border-radius:var(--radius-lopsided-alt) }
.navbtn:hover { color:var(--text-body) }
.navbtn[aria-current="page"] { background:var(--acid-500); color:var(--void-900); border-color:var(--acid-500) }
.sidebar__foot { margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2) }
.main { min-width:0 }
.page { padding:var(--space-5) var(--space-5) var(--space-6); max-width:1000px }
.tabbar { display:none }

@media (max-width:860px) {
  .shell { grid-template-columns:1fr; grid-template-rows:auto 1fr auto }
  .sidebar {
    position:sticky; top:0; z-index:20; height:auto; flex-direction:row; align-items:center;
    gap:var(--space-2); padding:14px 18px calc(14px);
    border-right:0; border-bottom:1px solid var(--border-hairline);
    background:var(--surface-page); padding-top:calc(14px + env(safe-area-inset-top));
  }
  .sidebar__nav,.sidebar__foot { display:none }
  .page { padding:var(--space-4) 18px var(--space-4) }
  .tabbar {
    display:flex; position:sticky; bottom:0; z-index:20;
    border-top:2px solid var(--border-hairline); background:var(--surface-page);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .tabbar__btn {
    all:unset; flex:1; height:64px; display:grid; place-items:center; cursor:pointer;
    font:var(--weight-medium) 10px/1.2 var(--font-mono); letter-spacing:.1em;
    text-transform:uppercase; color:var(--text-muted); text-align:center;
  }
  .tabbar__btn[aria-current="page"] { color:var(--acid-500); border-top:2px solid var(--acid-500); margin-top:-2px }
}

/* --------------------------------- practice -------------------------------- */
.practice-head { display:flex; align-items:flex-start; gap:var(--space-4); flex-wrap:wrap }
.speak-strip {
  display:flex; align-items:center; gap:var(--space-3);
  border-bottom:1px solid var(--border-hairline); padding-bottom:var(--space-3); flex-wrap:wrap;
}
.lens { width:34px; height:34px; background:var(--lagoon-500); clip-path:var(--clip-lens); flex:none }
.lens.is-idle { background:var(--void-600) }
.ow-paper .lens.is-idle { background:var(--bone-300) }
.bars { display:flex; align-items:flex-end; gap:3px; height:26px }
.bars span { width:4px; background:var(--void-600); transition:height var(--dur-base) var(--ease-snap) }
.ow-paper .bars span { background:var(--bone-300) }
.bars.is-live span { background:var(--lagoon-500); animation:bar 900ms var(--ease-snap) infinite alternate }
.bars.is-live span:nth-child(2n) { animation-delay:150ms }
.bars.is-live span:nth-child(3n) { animation-delay:300ms }
@keyframes bar { from { height:20% } to { height:100% } }

.diff {
  padding:var(--space-5) var(--space-1) var(--space-4);
  font:var(--weight-display) clamp(1.9rem,1.1rem + 3.2vw,2.75rem)/1.15 var(--font-display);
  letter-spacing:-.03em; min-height:60px; word-break:break-word;
}
.diff .ok { color:var(--text-body) }
.diff .bad { color:var(--flare-500); border-bottom:3px solid var(--flare-500) }
.diff .revealed { color:var(--mustard-500) }
.diff .rest { color:var(--void-600) }
.ow-paper .diff .rest { color:var(--bone-300) }
.diff .caret {
  display:inline-block; width:3px; height:1em; background:var(--acid-500);
  vertical-align:-.15em; animation:blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity:0 } }

.chunkbar { display:flex; gap:4px }
.chunkbar span { flex:1; height:14px; background:var(--void-600) }
.ow-paper .chunkbar span { background:var(--bone-300) }
.chunkbar span.done { background:var(--acid-500) }
.chunkbar span.errored { background:var(--flare-500) }
.chunkbar span.current { background:var(--lagoon-500) }

.assistbar { display:flex; gap:var(--space-2); flex-wrap:wrap; align-items:center;
  margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px solid var(--border-hairline) }
.mobile-assist { display:none }
@media (max-width:860px) {
  .assistbar .desktop-only { display:none }
  .mobile-assist { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:var(--space-3) }
  /* Keep the diff line high in the viewport: the software keyboard eats the bottom half. */
  .practice-title { display:none }
  .practice-head { gap:var(--space-2) }
  .speak-strip .label:last-child { display:none }
  .diff { padding:var(--space-3) var(--space-1) var(--space-2) }
}

/* ---------------------------------- stats ---------------------------------- */
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3) }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3) }
.grid-21 { display:grid; grid-template-columns:2fr 1fr; gap:var(--space-3) }
@media (max-width:860px) {
  .grid-4 { grid-template-columns:1fr 1fr }
  .grid-2,.grid-21 { grid-template-columns:1fr }
}
.stat-value { margin:0; font:var(--weight-display) 40px/1 var(--font-display); letter-spacing:-.04em }
.stat-value--acid { color:var(--acid-500) }
.ow-paper .stat-value--acid { color:var(--acid-900) }
.chart { display:flex; align-items:flex-end; gap:6px; height:180px;
  border-bottom:2px solid var(--border-hairline); padding-bottom:2px }
/* max-width keeps a two-session chart from rendering as one huge slab */
.chart span { flex:1 1 0; max-width:56px; background:var(--void-600); min-height:2px }
.ow-paper .chart span { background:var(--bone-300) }
.chart span.mid { background:var(--lagoon-500) }
.chart span.high { background:var(--acid-500) }
.chart-axis { display:flex; justify-content:space-between;
  font:var(--weight-medium) 11px var(--font-mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--text-quiet) }
.missrow { display:flex; align-items:center; gap:var(--space-2) }
.missrow__key { width:34px; height:34px; display:grid; place-items:center;
  font:var(--weight-display) 18px var(--font-display); color:var(--void-900); background:var(--void-600) }
.missrow__bar { flex:1; height:10px; background:var(--void-600) }
.ow-paper .missrow__bar { background:var(--bone-300) }
.missrow__bar > span { display:block; height:100% }
.missrow__n { font:var(--weight-medium) 11px var(--font-mono); color:var(--text-muted); min-width:2ch; text-align:right }
.keyrow { display:flex; gap:4px }
.keyrow + .keyrow { margin-top:4px }
.keyrow span { flex:1; aspect-ratio:1; display:grid; place-items:center;
  font:var(--weight-medium) 11px var(--font-mono); background:var(--void-600); color:var(--text-muted) }
.ow-paper .keyrow span { background:var(--bone-300); color:var(--text-muted) }
.keyrow span.hot { color:var(--void-900) }
.statstable { width:100%; border-collapse:collapse; font-size:15px }
.statstable td { padding:9px 0; border-bottom:1px solid var(--border-hairline) }
.statstable tr:last-child td { border-bottom:0 }
.statstable td + td { text-align:right; font:var(--weight-medium) 12px var(--font-mono) }
.ctxrow { display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap }
.ctxrow__name { width:230px; font-size:15px; flex:1 1 160px }
.ctxrow__bar { flex:2 1 120px; height:18px; background:var(--void-600) }
.ow-paper .ctxrow__bar { background:var(--bone-300) }
.ctxrow__bar > span { display:block; height:100%; background:var(--acid-500) }
.ctxrow__n { font:var(--weight-medium) 12px var(--font-mono); color:var(--text-muted);
  width:110px; text-align:right }

/* ---------------------------------- login ---------------------------------- */
.auth {
  min-height:100dvh; display:grid; place-items:center; padding:var(--space-4);
  padding-top:calc(var(--space-4) + env(safe-area-inset-top));
}
.auth__card { width:100%; max-width:440px }
.auth__code {
  font:var(--weight-display) var(--step-2)/1.2 var(--font-mono);
  letter-spacing:.32em; text-align:center; text-transform:uppercase;
}

/* --------------------------------- toasts ---------------------------------- */
.toasts { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:100; display:grid; gap:var(--space-2); width:min(440px,calc(100vw - 30px)) }
.toast {
  display:flex; gap:var(--space-2); align-items:flex-start; padding:13px 15px;
  background:var(--surface-raised); color:var(--text-body);
  border:2px solid var(--status-info); border-radius:var(--radius-lopsided);
  box-shadow:var(--slab-sm); font:var(--type-small);
  animation:rise var(--dur-base) var(--ease-overshoot);
}
.toast--danger { border-color:var(--status-danger) }
.toast--ok { border-color:var(--status-ok) }
@keyframes rise { from { transform:translateY(12px); opacity:0 } to { transform:none; opacity:1 } }

.skeleton { color:var(--text-quiet); font:var(--type-label); letter-spacing:var(--tracking-label);
  text-transform:uppercase; padding:var(--space-5) 0 }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important }
}