:root {
  --ink: #1a2332; --muted: #5a6675; --accent: #0e6e6e; --accent-soft: #e6f2f2;
  --line: #d8dee6; --card: #f7f9fb; --warn: #8a5a00; --bad: #8c2f2f; --ok: #1f6f3f; --bg: #fff;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: var(--bg); color: var(--ink); line-height: 1.6; font-family: Georgia, 'Times New Roman', serif; }
a { color: var(--accent); }
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 100vh; }
.controls { border-right: 1px solid var(--line); background: var(--card); padding: 1.2rem 1rem 3rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; font-size: .9rem; }
.controls h1.brand { font-size: 1.1rem; margin: 0 0 .8rem; letter-spacing: .04em; font-family: ui-monospace, Menlo, monospace; }
.controls h1.brand a { text-decoration: none; }
fieldset { border: 1px solid var(--line); background: var(--bg); margin: 0 0 .9rem; padding: .6rem .8rem .8rem; border-radius: 6px; }
legend { font: 600 11px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); padding: 0 6px; }
label { display: block; font-size: 13px; color: var(--muted); margin-top: .55rem; }
label .name { display: inline; }
label .value { font-family: ui-monospace, Menlo, monospace; color: var(--ink); float: right; }
input[type=range] { width: 100%; margin: .15rem 0 0; accent-color: var(--accent); }
select { width: 100%; font: inherit; font-size: 13px; padding: 3px; margin-top: .15rem; }
button { font: inherit; font-size: 13px; padding: .35rem .6rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 4px; cursor: pointer; }
button:hover { filter: brightness(1.1); }
.actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; align-items: center; }
.actions select { width: auto; margin: 0; }
.note { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }
.priors details { margin: .4rem 0; }
.priors summary { cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent); }
.prior { border-top: 1px dashed var(--line); padding: .45rem 0; }
.prior.edited { background: var(--accent-soft); margin: 0 -.4rem; padding: .45rem .4rem; border-radius: 4px; }
.prior-head { font-size: 12px; }
.prior-head .unit { color: var(--muted); }
.prior-head .conf { float: right; font: 600 10px/1.4 ui-monospace, Menlo, monospace; text-transform: uppercase; letter-spacing: .06em; padding: 0 .3rem; border-radius: 3px; background: var(--card); color: var(--muted); }
.prior-head .conf.placeholder { color: var(--warn); }
.prior-text { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.prior-edit { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.prior-edit label { margin-top: .2rem; font-size: 11px; }
.prior-edit output { font-family: ui-monospace, Menlo, monospace; color: var(--ink); }
code { font-family: ui-monospace, Menlo, monospace; font-size: .95em; background: var(--card); padding: .05rem .3rem; border-radius: 3px; }
.wrap { max-width: 980px; margin: 0 auto; padding: 2.5rem 1.5rem 6rem; min-width: 0; }
header.doc { border-bottom: 3px solid var(--accent); padding-bottom: 1.2rem; margin-bottom: 1.5rem; }
header.doc h1 { font-size: 2rem; margin: 0 0 .4rem; line-height: 1.2; }
header.doc h1.scenario { text-transform: capitalize; }
header.doc .sub { font-size: 1.1rem; color: var(--muted); font-style: italic; }
header.doc .meta { margin-top: .8rem; font-size: .82rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.progress { height: 4px; background: var(--line); margin-top: .5rem; border-radius: 2px; overflow: hidden; }
.progress .bar { height: 100%; width: 0; background: var(--accent); transition: width .2s; }
section.slide { margin: 2rem 0; padding: 1.4rem 1.6rem 1.6rem; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; background: var(--bg); }
section.slide h2 { margin: 0 0 .7rem; font-size: 1.3rem; }
span.step { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: .3rem; }
p.claim { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; border-left: 4px solid var(--accent-soft); padding-left: .9rem; }
figure { margin: 1.2rem 0; }
figcaption { font-size: .85rem; color: var(--muted); margin-top: .4rem; line-height: 1.45; }
svg { max-width: 100%; height: auto; display: block; }
svg .ghost { fill: #eef1f4; }
svg .guide { stroke: #e8edf2; }
svg .ink { stroke: #1a2332; }
svg .ribbon:hover, svg .stop rect:hover { fill-opacity: 1; stroke: #1a2332; stroke-width: 1; }
ul.plain { margin: .8rem 0; padding-left: 1.4rem; }
ul.plain li { margin: .3rem 0; }
ul.plain li.ok { color: var(--ok); }
ul.plain li.bad { color: var(--bad); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .9rem; }
th, td { border: 1px solid var(--line); padding: .45rem .7rem; text-align: left; vertical-align: top; }
th { background: var(--card); font-family: ui-monospace, Menlo, monospace; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
td.num, th.num { text-align: right; font-family: ui-monospace, Menlo, monospace; }
td.cell .p { font-weight: 700; }
td.cell .small { font-size: .75rem; color: var(--muted); }
td.cell.viable { border-left: 4px solid var(--ok); }
td.cell.weak { border-left: 4px solid var(--warn); }
td.cell.infeasible { border-left: 4px solid var(--bad); }
td.cell.current { outline: 2px solid var(--accent); outline-offset: -2px; }
footer.doc { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.card { display: block; text-decoration: none; color: inherit; border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: 8px; padding: 1rem 1.2rem; background: var(--bg); }
.card:hover { background: var(--card); }
.card h2 { font-size: 1.15rem; margin: 0 0 .3rem; text-transform: capitalize; }
.card .q { margin: 0 0 .4rem; }
.card .meta { margin: 0; font-size: .8rem; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
body[data-state=stale] #results, body[data-state=solving] #results { opacity: .55; transition: opacity .2s; }
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .controls { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .wrap { padding: 1.5rem 1rem 4rem; }
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e8edf3; --muted: #aab5c3; --accent: #4fb3ad; --accent-soft: #163636; --line: #2d3745; --card: #1a212c; --bg: #111720; --ok: #6fcf97; --warn: #e0b45a; --bad: #e07a7a; }
  html { color-scheme: dark; }
  svg text { fill: #e8edf3; }
  svg .ghost { fill: #1f2934; }
  svg .guide { stroke: #2d3745; }
  svg .ink { stroke: #e8edf3; }
  svg .len-0 { fill: #d3efed; } svg .len-1 { fill: #93cfcc; } svg .len-2 { fill: #4faba8; } svg .len-3 { fill: #1f8280; } svg .len-4 { fill: #0f5a59; }
}