:root {
  --ink: #1c1917;
  --ink-2: #44403c;
  --ink-3: #78716c;
  --line: #e7e0d6;
  --paper: #fffdf8;
  --bg: #f4efe6;
  --teal: #1f6f64;
  --teal-2: #174f48;
  --chip: #e7f3f0;
  --bad: #9f1239;
  --warn: #92400e;
  --ok: #166534;
  --paper-serif: "STIX Two Text", "Iowan Old Style", Palatino, serif;
  --paper-sans: "IBM Plex Sans", sans-serif;
  --paper-mono: "JetBrains Mono", ui-monospace, monospace;
  --pt: 1.05px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { background: var(--bg); color: var(--ink); font-family: var(--paper-sans); font-size: 16px; line-height: 1.5; }
a { color: var(--teal); }
button, textarea { font: inherit; }
#app { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.top { display: flex; align-items: center; gap: 18px; padding: 14px 22px; background: #fffdf8; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.brand { font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand-sub { color: var(--ink-3); font-size: 14px; }
.top nav { display: flex; gap: 16px; margin-left: 8px; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 500; }
.top nav a[aria-current="page"] { color: var(--teal); }
.stepchip { margin-left: auto; background: var(--chip); color: var(--teal-2); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }

.home { flex: 1; min-height: 0; overflow: hidden; width: 100%; margin: 0; padding: 18px 22px 14px; display: grid; grid-template-rows: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; }
.hero { display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: 28px; align-items: stretch; min-height: 0; }
.hero > div { min-height: 0; min-width: 0; }
.hero h1 { font-family: var(--paper-serif); font-size: 52px; line-height: 1.02; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.03em; }
.lede { font-size: 18px; color: var(--ink-2); max-width: 36ch; margin: 0; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero-live { min-width: 0; flex: 1; min-height: 0; display: flex; }
.hero > div:last-child { display: flex; flex-direction: column; }
.hero-live .sbx { flex: 1; height: 100%; min-height: 0 !important; }
.hero-live .sbx-ed,
.hero-live .editor,
.hero-live .editor textarea { height: 100%; min-height: 0; }
.hero-live .sbx-side { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.hero-live .sbx-paper { flex: 1; max-height: none; min-height: 0; }
.hero-cap { color: var(--ink-3); font-size: 13px; margin: 8px 0 0; }
.syl { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px 28px; margin: 0; min-height: 0; overflow: hidden; }
.syl-side { min-height: 0; overflow: auto; }
.syl ol { grid-column: 2; grid-row: 1; min-height: 0; overflow: auto; }
.syl h2 { font-family: var(--paper-serif); font-weight: 600; margin-top: 0; }
.syl ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.syl li a { display: grid; grid-template-columns: 36px 1fr 120px; gap: 12px; align-items: start; text-decoration: none; color: inherit; background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.syl li a:hover { border-color: #c9bfb2; }
.syl-n { font-family: var(--paper-serif); font-size: 20px; color: var(--teal); }
.syl-t { font-weight: 600; }
.syl-d, .syl-lab { color: var(--ink-3); font-size: 13px; }
.syl-p { font-size: 12px; color: var(--ink-3); text-align: right; }
.syl-bar { display: block; height: 4px; background: #efe8dc; border-radius: 99px; margin-top: 6px; overflow: hidden; }
.syl-bar i { display: block; height: 100%; background: var(--teal); }
.foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; margin: 0; color: var(--ink-3); font-size: 13px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 8px 14px; text-decoration: none; cursor: pointer; font-weight: 550; }
.btn.pri { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 10px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.lesson { display: grid; grid-template-columns: 280px 1fr; flex: 1; min-height: 0; overflow: hidden; }
.rail { background: #fffdf8; border-right: 1px solid var(--line); padding: 18px 16px 28px; min-height: 0; overflow: auto; }
.rail.collapsed .steps, .rail.collapsed .rail-next { display: none; }
.rail h2 { font-family: var(--paper-serif); font-size: 22px; margin: 6px 0 12px; }
.rail-n, .back { font-size: 13px; color: var(--ink-3); }
.back { display: inline-block; margin-bottom: 8px; text-decoration: none; }
.steps { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.steps a { display: block; text-decoration: none; color: inherit; padding: 8px 8px; border-radius: 8px; }
.steps a[aria-current="step"] { background: var(--chip); }
.steps .k { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.steps .done::before { content: "✓ "; color: var(--ok); }
.rail-next { margin-top: 16px; font-size: 13px; color: var(--ink-3); }
.stage { padding: 28px 32px 80px; max-width: 980px; min-height: 0; overflow: auto; }
.stage h1 { font-family: var(--paper-serif); font-weight: 600; font-size: 34px; margin: 0 0 16px; letter-spacing: -0.02em; }
.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; }
.step-nav .btn { min-width: 180px; align-items: flex-start; text-align: left; border-radius: 14px; padding: 10px 14px; }
.step-nav small { display: block; font-size: 11px; font-weight: 500; opacity: 0.7; }

.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 1.2em; }
.note, .notice { background: #fff8e8; border: 1px solid #ead9a8; border-radius: 10px; padding: 10px 12px; margin: 12px 0; }
table.ref { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 14px; background: #fffdf8; }
table.ref th, table.ref td { border-bottom: 1px solid var(--line); text-align: left; padding: 8px 10px; vertical-align: top; }
table.ref th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
code, .code, pre.verb { font-family: var(--paper-mono); font-size: 13px; }
.prose code { background: #efe8dc; padding: 0 4px; border-radius: 4px; }
pre.code, pre.verb { background: #1c1917; color: #f5f0e8; padding: 12px 14px; border-radius: 10px; overflow: auto; }
.cap { color: var(--ink-3); font-size: 13px; }

.sbx, .studio-main { display: grid; grid-template-columns: 1fr 1fr; min-height: 320px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.sbx-ed, .studio-col, .st-ed, .st-bib { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.editor { flex: 1; min-height: 0; display: flex; }
.editor textarea { width: 100%; height: 100%; min-height: 240px; flex: 1; }
.editor textarea, .copyfall { width: 100%; border: 0; resize: vertical; padding: 12px; background: #1c1917; color: #f6f1e8; font-family: var(--paper-mono); font-size: 13px; line-height: 1.55; }
.sbx-side, .studio-col { border-left: 1px solid var(--line); background: #f7f3ec; }
.pane-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.pane-t { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.logsum { border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 600; }
.logsum.ok { color: var(--ok); }
.logsum.warn { color: var(--warn); }
.logsum.bad { color: var(--bad); }
.sbx-log, .studio-log { max-height: 140px; overflow: auto; border-top: 1px solid var(--line); background: #fff; }
.logrow { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: #fff; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.logrow.ok { color: var(--ok); cursor: default; }
.sbx-paper, .paper { background: var(--paper); }
.sbx-paper { padding: 16px; overflow: auto; max-height: 520px; }
.sbx-reset { margin: 8px; }

.studio { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.studio-bar { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: #fffdf8; }
.studio-bar .grow { flex: 1; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: 5px 12px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--teal); color: #fff; }
.studio-main { flex: 1; grid-template-columns: 200px 1fr 1fr; min-height: 0; border: 0; border-radius: 0; }
.studio-side { padding: 12px; overflow: auto; border-right: 1px solid var(--line); background: #fffdf8; }
.filelist { display: flex; flex-direction: column; gap: 4px; }
.filelist button { text-align: left; border: 0; background: transparent; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.filelist button[aria-current="true"] { background: var(--chip); }
.outline button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 0; cursor: pointer; font-size: 13px; }
.outline .l2 { padding-left: 12px; }
.muted { color: var(--ink-3); font-size: 13px; }
.lab-note { font-size: 12px; color: var(--ink-3); }

.lab { background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-top: 8px; }
.lab-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.lab label { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.lab canvas { width: 100%; height: 280px; display: block; background: #1c1917; border-radius: 10px; }
.page-sim { display: flex; gap: 12px; }
.page-sim .pg { width: 140px; height: 190px; background: #fff; border: 1px solid var(--line); position: relative; }
.page-sim .fig { position: absolute; left: 16px; right: 16px; height: 36px; background: #d7efe9; border: 1px solid var(--teal); font-size: 11px; display: flex; align-items: center; justify-content: center; }

.criteria { margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.crit { font-size: 14px; padding: 6px 8px; border-radius: 8px; }
.crit.ok { background: #ecfdf3; color: var(--ok); }
.crit.bad { background: #fff1f2; color: var(--bad); }
.ex-actions { display: flex; gap: 8px; margin-top: 10px; }
.hint { margin-top: 10px; }

.doc { font-family: var(--paper-serif); color: #111; font-size: calc(var(--basept, 10) * var(--pt)); line-height: 1.35; }
.doc .par { margin: 0 0 0.7em; text-align: justify; }
.doc .par:not(.noind) { text-indent: 1.5em; }
.doc .titleblock { text-align: center; margin: 0 0 1.4em; }
.doc .t-title { font-size: 1.6em; font-weight: 600; line-height: 1.2; }
.doc .t-au, .doc .t-date { margin-top: 0.35em; }
.doc .abstract { margin: 0 8% 1.2em; font-size: 0.95em; }
.doc .abs-h { text-align: center; font-weight: 700; font-size: 0.85em; letter-spacing: 0.08em; margin-bottom: 0.4em; }
.doc .sec { font-weight: 600; margin: 1.1em 0 0.4em; }
.doc h2.sec { font-size: 1.25em; }
.doc .secnum, .doc .chapnum { margin-right: 0.45em; }
.doc .chap { text-align: center; margin: 1.4em 0 0.8em; }
.doc .disp { display: block; text-align: center; margin: 0.7em 0; }
.doc .float { margin: 0.8em 0; text-align: center; }
.doc .caption { font-size: 0.92em; margin-top: 0.35em; text-align: center; }
.doc .capl { font-weight: 600; }
.doc table.tabular { border-collapse: collapse; margin: 0.4em auto; font-size: 0.95em; }
.doc table.tabular td, .doc table.tabular th { padding: 3px 8px; }
.doc table.tabular:not(.bt) td { border: 1px solid #222; }
.doc table.bt { border-top: 2px solid #111; border-bottom: 2px solid #111; }
.doc .bibitem { display: flex; gap: 0.6em; margin: 0.35em 0; font-size: 0.95em; }
.doc .biblbl { min-width: 2em; }
.doc .list { margin: 0.4em 0 0.6em 1.2em; }
.doc .li { display: flex; gap: 0.45em; margin: 0.15em 0; }
.doc .lbl { min-width: 1.4em; }
.doc .q { margin: 0.6em 1.5em; }
.doc .verb { text-align: left; }
.doc .fns { border-top: 1px solid #111; margin-top: 1em; padding-top: 0.4em; font-size: 0.85em; }
.doc .fn { font-size: 0.7em; }
.doc .fbox { border: 1px solid #111; padding: 0 0.2em; }
.doc .undef { color: var(--bad); text-decoration: underline wavy; }
.doc .unres { color: var(--bad); }
.doc .figph { display: inline-block; max-width: 100%; }
.doc .figph svg { width: 100%; height: auto; display: block; }
.doc .tocrow { display: flex; gap: 0.4em; }
.doc .tocdots { flex: 1; border-bottom: 1px dotted #999; margin-bottom: 0.3em; }
.doc.twocol { column-count: 2; column-gap: 1.2em; }
.texlogo { font-family: var(--paper-serif); letter-spacing: -0.04em; }
.texlogo .a, .texlogo .e { font-size: 0.7em; position: relative; top: -0.3em; }
.hfill { display: inline-block; width: 2em; }
.sp { display: inline-block; }

@media (max-width: 900px) {
  html, body, #app { height: auto; min-height: 100%; overflow: auto; }
  .top { flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; }
  .top nav { order: 3; flex: 1 0 100%; margin-left: 0; gap: 14px; flex-wrap: wrap; }
  .stepchip { margin-left: auto; }
  .home { display: block; height: auto; overflow: visible; padding: 20px 16px 32px; }
  .hero { display: flex; flex-direction: column; gap: 18px; align-items: stretch; }
  .hero h1 { font-size: 34px; }
  .lede { max-width: none; font-size: 16px; }
  .cta .btn { min-height: 44px; }
  .hero > div:last-child { display: block; }
  .hero-live { display: block; flex: none; height: auto; min-height: 0; }
  .hero-live .sbx { display: grid; height: auto !important; min-height: 0 !important; grid-template-columns: 1fr; }
  .hero-live .sbx-ed,
  .hero-live .editor,
  .hero-live .editor textarea { height: auto; min-height: 168px; }
  .hero-live .sbx-side { display: block; height: auto; min-height: 140px; border-left: 0; border-top: 1px solid var(--line); }
  .hero-live .sbx-paper { max-height: 240px; }
  .syl { display: block; overflow: visible; margin-top: 28px; }
  .syl ol { margin-top: 12px; }
  .syl li a { grid-template-columns: 32px minmax(0, 1fr); }
  .syl-p { grid-column: 2; text-align: left; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 20px; }
  .lesson { display: flex; flex-direction: column; height: auto; overflow: visible; }
  .rail { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .stage { padding: 20px 16px 48px; }
  .step-nav { flex-direction: column; }
  .step-nav .btn { min-width: 0; width: 100%; }
  .sbx, .studio-main { grid-template-columns: 1fr; }
  .sbx-side, .studio-col { border-left: 0; border-top: 1px solid var(--line); }
  .studio { overflow: visible; }
  .studio-bar { flex-wrap: wrap; }
  .studio-main { min-height: 0; }
  .studio-side { border-right: 0; border-bottom: 1px solid var(--line); }
}