/* GENERATED by scripts/build-design.mjs from @zako/design — do not edit. */
/* Design tokens — the single source of truth for the square/yellow language.
   Every app in the ecosystem imports this package. Override ONLY the semantic layer
   (--primary, --primary-ink) per app if it needs its own action colour; never the neutrals.
   tokens.json and theme.css are GENERATED from this file (npm run build) — never edit them by hand. */
:root {
  /* neutrals */
  --bg: #efefef; --panel: #ffffff; --ink: #1a1a1a; --muted: #6a6a6a; --line: #c9c9c9; --line2: #e2e2e2;
  --chrome: #1b1b1b; --chrome-ink: #f4f4f4; --hover: #e4e4e4;
  --scrim: #7777; /* neutral backdrop behind pages / dialogs */
  --chrome-hover: #ffffff22; --chrome-line: #ffffff44; /* hover fill / hairline ON the dark chrome */
  /* highlighter */
  --accent: #ffd400; --accent-ink: #111; /* highlighter + the text colour that sits ON it. Apps may change both (see accent.css) */
  --accent-soft: color-mix(in srgb, var(--accent) 25%, var(--panel)); /* derived: selected row / banner / current sentence */
  --accent-mark: var(--accent); /* the highlighter-pen underline on headings */
  /* semantic layer: what an app may override */
  --primary: var(--accent); --primary-ink: var(--accent-ink);
  /* feedback */
  --danger: #c42b1c; --good: #107c10; --mid: #b88600; --info: #2b7de9;
  /* typography */
  --font: "Segoe UI", "Selawik", "Noto Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-read: "Cambria", "Georgia", "Noto Serif", serif; /* long-form reading surfaces */
  --mono: "Cascadia Mono", "JetBrains Mono", Consolas, "DejaVu Sans Mono", monospace;
  --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 18px; --fs-xl: 28px;
  /* reading + writing surfaces (long text, notebooks). Content first: never tint behind equations. */
  --paper: #ffffff; --paper-ink: #1a1a1a; --paper-sepia: #f4ecd8; --paper-sepia-ink: #3b2f1e;
  --read-active: var(--accent-soft); --read-active-sepia: color-mix(in srgb, var(--accent) 28%, var(--paper-sepia)); /* the sentence being read */
  --nb-paper: #fffdf5; --nb-rule: #b7cdf0; --nb-grid: #cfe0f7; --nb-dot: #9aa7b8; --nb-margin: #f08a8a; --nb-tutor: #1d4ed8; /* tutor handwriting colour */
  /* spacing + sizing: use these, never ad-hoc px */
  --sp-1: 4px;      /* hairline gaps: icon↔label, stacked small text */
  --sp-2: 8px;      /* default gap inside a row of controls */
  --gutter: 20px;   /* edge of any content area */
  --gap: 16px;      /* between sibling blocks (panels, tiles, sections) */
  --pad: 12px;      /* inside compact blocks (rows, bars) */
  --ctl-h: 32px;    /* EVERY button, input and select */
  --ctl-h-sm: 26px; /* dense rows (tables, lists) */
  --titlebar-h: 40px; /* app title bar */
  --nav-w: 250px;     /* left navigation pane */
  /* structure */
  --bar: 6px;              /* accent stripe on tiles, flashcards, active nav */
  --shadow-hard: 4px 4px 0 #0003; /* offset, never blurred */
  --focus: 2px dotted var(--ink);
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #161616; --panel: #232323; --ink: #ececec; --muted: #9b9b9b; --line: #444; --line2: #333;
  --chrome: #0b0b0b; --hover: #303030; --accent-soft: color-mix(in srgb, var(--accent) 24%, #000); --accent-mark: color-mix(in srgb, var(--accent) 48%, var(--panel)); --danger: #ff6b5c; --good: #5fd35f; --mid: #e0b400; --info: #5b9bf0;
  --paper: #232323; --paper-ink: #ececec;
  color-scheme: dark;
}

/* Highlighter presets. Pick one per app with <html data-accent="teal">; yellow is the default (no attribute).
   Each preset sets ONLY the highlighter and the ink that sits on it — soft tints, the sentence highlight,
   heading underlines, selection and the primary button all derive from these two (see tokens.css).
   A custom colour works too:  :root { --accent: #c0392b; --accent-ink: #fff; }
   Pick --accent-ink for contrast (aim for 4.5:1): dark ink on light/bright accents, white on deep ones. */
:root[data-accent='amber']  { --accent: #ffc83d; --accent-ink: #1a1a1a; }
:root[data-accent='orange'] { --accent: #ff8a1f; --accent-ink: #1a1a1a; }
:root[data-accent='pink']   { --accent: #ff6ec7; --accent-ink: #1a1a1a; }
:root[data-accent='green']  { --accent: #35c759; --accent-ink: #0d2a14; }
:root[data-accent='teal']   { --accent: #00808a; --accent-ink: #ffffff; }
:root[data-accent='blue']   { --accent: #2f6fe0; --accent-ink: #ffffff; }
:root[data-accent='purple'] { --accent: #7c4ddb; --accent-ink: #ffffff; }

/* Reset, typography, selection — no rounded corners anywhere. */
* { box-sizing: border-box; border-radius: 0 !important; }
html, body, #app { height: 100%; margin: 0; }
body { font: var(--fs-base)/1.5 var(--font); background: var(--bg); color: var(--ink); overflow: hidden; }
::selection { background: var(--accent); color: var(--accent-ink); }
a { color: inherit; }
h1 { font-size: var(--fs-xl); font-weight: 300; margin: 0 0 4px; letter-spacing: -.3px; }
h2 { font-size: var(--fs-lg); font-weight: 600; margin: 0; }
h3 { font-size: var(--fs-base); font-weight: 700; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .6px; }
.muted { color: var(--muted); } .small { font-size: var(--fs-sm); } .mono { font-family: var(--mono); }
.grow { flex: 1; min-width: 0; } .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warn, .err { color: var(--danger); }


/* Buttons, inputs, segmented control, tags, pills, kbd */
button, input, select, textarea { font: inherit; color: inherit; }
button { background: var(--panel); border: 1px solid var(--line); padding: 0 12px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--ctl-h); line-height: 1; white-space: nowrap; }
button:hover:not(:disabled) { background: var(--hover); border-color: var(--muted); }
button:active:not(:disabled) { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--primary); color: var(--primary-ink); border: 1px solid #000; font-weight: 600; }
:root[data-theme='dark'] button.primary { border-color: var(--primary); }
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.big { padding: 0 20px; height: 40px; font-size: 15px; }
button.sm, .sm > button { height: var(--ctl-h-sm); padding: 0 8px; font-size: 12px; }
button.icon, .icon-btn { width: var(--ctl-h); padding: 0; flex: none; }
button.danger { color: var(--danger); border-color: var(--danger); }
:focus-visible { outline: 2px dotted var(--ink); outline-offset: 2px; }
input, select, textarea { background: var(--panel); border: 1px solid var(--line); padding: 0 8px; }
input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']), select { height: var(--ctl-h); }
textarea { padding: 6px 8px; min-height: var(--ctl-h); line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: none; border-color: #000; box-shadow: 0 0 0 2px var(--accent); }
:root[data-theme='dark'] input:focus, :root[data-theme='dark'] textarea:focus, :root[data-theme='dark'] select:focus { border-color: var(--accent); }
textarea { width: 100%; resize: vertical; }
input[type='number'] { width: 70px; }
input[type='range'] { padding: 0; height: auto; accent-color: var(--accent); border: 0; box-shadow: none; }
input[type='checkbox'], input[type='radio'] { accent-color: #000; height: auto; }
.row { display: flex; align-items: center; gap: 8px; margin: 8px 0; } .row.wrap { flex-wrap: wrap; } .row.center { justify-content: center; }
.inline { display: inline-flex; align-items: center; gap: 6px; } .check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--panel); }
.seg button { border: 0; border-right: 1px solid var(--line); background: transparent; height: calc(var(--ctl-h) - 2px); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.tag { display: inline-block; background: var(--ink); color: var(--bg); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; padding: 1px 6px; }
.pill { height: 20px; padding: 0 8px; font-size: 12px; background: var(--accent-soft); border-color: var(--accent); }
kbd { font: 11px var(--mono); border: 1px solid var(--line); padding: 0 4px; background: var(--bg); }


/* App chrome: title bar, stage, drop zone, toast, banner */
.app { display: grid; grid-template-rows: var(--titlebar-h) 1fr; height: 100%; }
.titlebar { display: flex; align-items: center; gap: 10px; background: var(--chrome); color: var(--chrome-ink); padding: 0 0 0 var(--pad); border-bottom: 3px solid var(--accent); }
.titlebar a, .titlebar button { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; letter-spacing: .3px; }
.logo { width: 16px; height: 16px; background: var(--accent); box-shadow: 4px 4px 0 var(--chrome-hover); }
.crumb { display: flex; align-items: center; gap: 4px; padding: 0 10px; height: 100%; font-size: 13px; opacity: .85; }
.crumb:hover { background: var(--chrome-hover); }
.chip { font-size: 12px; padding: 2px 8px; border: 1px solid var(--chrome-line); }
.chip.busy { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); animation: pulse 1.4s infinite; }
.tb { background: transparent; border: 0; height: 100%; width: 42px; justify-content: center; border-radius: 0; padding: 0; display: inline-flex; align-items: center; }
.tb:hover:not(:disabled), .tb.on { background: var(--chrome-hover) !important; color: #fff; border: 0 !important; }
.stage { overflow: hidden; min-height: 0; position: relative; }
.icon { flex: none; }
.dropzone { position: fixed; inset: var(--titlebar-h) 0 0 0; background: color-mix(in srgb, var(--accent) 90%, transparent); color: var(--accent-ink); display: grid; place-items: center; font-size: 28px; font-weight: 300; border: 6px dashed var(--accent-ink); z-index: 50; pointer-events: none; }
.toast { position: fixed; right: 16px; bottom: 16px; max-width: 480px; padding: 10px 14px; background: var(--chrome); color: #fff; border-left: 6px solid var(--accent); z-index: 60; box-shadow: var(--shadow-hard); }
.toast.error { border-left-color: var(--danger); }
.banner { border: 1px solid var(--accent); background: var(--accent-soft); padding: 8px 12px; margin: 8px 0; }
.banner.err { border-color: var(--danger); background: transparent; color: var(--danger); }
/* Mode bar under the title bar (e.g. the red "assessment in progress" bar): full-width, one row of small controls. */
.lockbar { display: flex; align-items: center; gap: var(--pad); background: var(--danger); color: #fff; padding: 6px var(--gutter); font-size: 13px; }
.lockbar button { height: var(--ctl-h-sm); background: #fff; color: #000; border-color: #fff; }
@keyframes pulse { 50% { opacity: .6; } }


/* Launcher tiles (Metro) */
.library { padding: 28px 40px; height: 100%; overflow: auto; }
.lib-head { margin-bottom: 18px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tile { position: relative; height: auto; min-height: 170px; text-decoration: none; overflow: hidden; display: flex; flex-direction: column; color: #fff; background: var(--tile, #2b2b2b); border: 0; padding: 0; text-align: left; }
.tile.book { border-bottom: 6px solid var(--accent); transition: transform .08s; }
.tile.book:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--accent); }
.tile.book img { position: absolute; right: 0; top: 0; height: 100%; width: 45%; object-fit: cover; object-position: top; opacity: .55; filter: grayscale(.4); }
.tile-body { position: relative; flex: 1; padding: var(--gap); display: flex; flex-direction: column; gap: 2px; }
.tile-title { font-size: 18px; font-weight: 600; line-height: 1.2; max-width: 54%; overflow-wrap: anywhere; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px #0008; }
.tile-meta { font-size: 12px; opacity: .85; max-width: 54%; overflow-wrap: anywhere; line-height: 1.4; }
.tile-title + .tile-meta { margin-top: auto; }
.tile-meta.dim { opacity: .65; }
.tile-badges { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.tile { white-space: normal; }
.tile-badges em { font-style: normal; background: var(--accent); color: var(--accent-ink); font-size: 11px; padding: 1px 6px; margin-right: 4px; font-weight: 600; }
.tile-badges em.dim { background: #fff3; color: #fff; font-weight: 400; }
.tile-prog { position: absolute; left: 0; right: 0; bottom: 0; background: #000c; font-size: 11px; padding: 4px 8px; }
.tile-prog i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--accent); }
.tile-prog.err { background: var(--danger); }
.tile.add { background: transparent; color: var(--ink); border: 2px dashed var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 18px; text-align: center; padding: var(--gap); }
.tile.add small { font-size: 12px; color: var(--muted); max-width: 190px; line-height: 1.4; }
.tile.add:hover:not(:disabled) { background: var(--accent); border: 2px solid var(--accent-ink); color: var(--accent-ink); }
.tile.add:hover small { color: var(--accent-ink); }


/* Nav pane + content pane, toolbar, panels, fields */
.workspace { display: grid; grid-template-columns: var(--nav-w) 1fr; height: 100%; }
.navpane { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: auto; padding: 12px 0; }
.nav-section { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); padding: 4px 14px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 7px 14px; text-decoration: none; position: relative; }
.nav-item:hover { background: var(--hover); }
.nav-item.on { background: var(--accent-soft); font-weight: 600; }
.nav-item.on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--accent); }
.nav-item.sub { padding: 4px 14px 4px 18px; font-size: 13px; } .dim { opacity: .65; }
.nav-folder { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; background: var(--chrome); color: #fff; font-weight: 600; border-left: 5px solid var(--accent); }
.tree { margin-left: 14px; border-left: 1px solid var(--line); }
.tree .nav-item { padding-left: 16px; }
.count { background: var(--accent); color: var(--accent-ink); font-size: 11px; padding: 0 6px; margin-left: auto; }
.nav-foot { margin-top: auto; padding: 12px 14px; font-size: 11px; color: var(--muted); border-top: 1px solid var(--line2); line-height: 1.6; }
.pane { overflow: auto; min-width: 0; height: 100%; display: flex; flex-direction: column; }
.pane > div { min-height: 0; }
/* A scrolling tab keeps its full height (so its bottom gutter is real space at the end of the scroll), instead of being squeezed to the pane with its content spilling past the padding. */
.pane > .tab { flex-shrink: 0; }
.pane-pad, .pad { padding: var(--gutter); } .page { padding: var(--gutter); max-width: 900px; }
.toolbar { display: flex; flex-wrap: wrap; row-gap: 6px; align-items: center; gap: 8px; min-height: 52px; padding: 6px var(--gutter); background: var(--panel); border-bottom: 1px solid var(--line); flex: none; position: sticky; top: 0; z-index: 5; }
.toolbar h2::after { content: ''; display: block; height: 4px; width: 100%; background: var(--accent); margin-top: 1px; }
.panel { background: var(--panel); border: 1px solid var(--line); padding: var(--gap); margin: 0; }
.panel > :first-child { margin-top: 0; } .panel > :last-child { margin-bottom: 0; }
/* A tab's content column: one gutter at the sides, one gap between blocks — blocks never add their own margins. */
.tab { padding-bottom: var(--gutter); }
.tab > :not(.toolbar) { margin: var(--gap) var(--gutter) 0; }
.stack { display: flex; flex-direction: column; gap: var(--gap); padding: var(--gap) var(--gutter) var(--gutter); }
fieldset { border: 1px solid var(--line); background: var(--panel); margin: 0 0 var(--gap); padding: var(--pad) var(--gap) var(--gap); display: flex; flex-direction: column; gap: var(--pad); min-width: 0; }
fieldset .row { margin: 0; } fieldset > small { margin-top: calc(-1 * var(--pad) / 2); }
legend { font-weight: 700; text-transform: uppercase; letter-spacing: .6px; font-size: 12px; padding: 0 6px; background: var(--accent); color: var(--accent-ink); }
.field { display: flex; flex-direction: column; gap: 4px; margin: 0; } .field > span { font-weight: 600; font-size: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad); }
.empty { padding: 40px; color: var(--muted); }
.center-box { text-align: center; padding: 60px 20px; }


/* Markdown + KaTeX prose, spinner */
.md { line-height: 1.6; overflow-wrap: anywhere; }
.md > :first-child { margin-top: 0; } .md > :last-child { margin-bottom: 0; }
.md p { margin: .6em 0; } .md ul, .md ol { padding-left: 1.4em; }
.md h1, .md h2, .md h3, .md h4 { margin: 1em 0 .4em; line-height: 1.25; }
.md h2, .md h3 { display: inline-block; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); color: inherit; text-transform: none; letter-spacing: 0; font-size: 1.05em; }
:root[data-theme='dark'] .md h2, :root[data-theme='dark'] .md h3 { background: linear-gradient(transparent 58%, var(--accent-mark) 58%, var(--accent-mark) 92%, transparent 92%); }
.md h2 + *, .md h3 + * { margin-top: .3em; }
.md code { font-family: var(--mono); background: var(--bg); padding: 0 4px; font-size: .9em; }
.md pre { background: var(--bg); border-left: 4px solid var(--accent); padding: 8px 12px; overflow: auto; }
.md table { border-collapse: collapse; } .md th, .md td { border: 1px solid var(--line); padding: 4px 10px; } .md th { background: var(--bg); }
.md blockquote { margin: .6em 0; padding: 2px 12px; border-left: 4px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
.md-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.md .katex-display { margin: 0; } .katex { font-size: 1.08em; }
.cite { background: var(--accent); color: var(--accent-ink); padding: 0 5px; font-size: .8em; font-weight: 700; cursor: pointer; text-decoration: none; white-space: nowrap; }
.cite:hover { background: var(--accent-ink); color: var(--accent); }
.spin { display: inline-flex; align-items: center; gap: 4px; } .spin i { width: 8px; height: 8px; background: var(--accent); border: 1px solid #000; animation: bounce 1s infinite; } .spin i:nth-child(2) { animation-delay: .15s; } .spin i:nth-child(3) { animation-delay: .3s; }
.spin-label { margin-left: 8px; color: var(--muted); } @keyframes bounce { 50% { transform: translateY(-5px); } }