/* Paper Mono (SIL OFL 1.1, fonts/OFL.txt): one variable file, weights 100–800. */
@font-face { font-family: "Paper Mono"; src: url("fonts/PaperMono.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --font-mono: "Paper Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Contour palette. The default theme is Ink: neutral graphite chrome around a deep, desaturated sea, so the map reads
     as water and the chrome as tools (OKLCH, after Stamen's dark maps; every text and mark at least 4.4:1). */
  --sea: #0E293A; --line-1: #F0F6F9; --line-07: rgba(240, 246, 249, .72); --line-03: rgba(240, 246, 249, .48);
  --lamp: #FDC44F; --reef: #FD7466; --sand-fill: #EAD297; --grass: #79C77C; --snow: #F8F7F2; --explore: #65D8E4;
  /* the chrome's names, aliased onto the palette */
  --water: var(--sea); --text: rgba(255, 255, 255, .93); --muted: rgba(255, 255, 255, .68);
  --sand: var(--lamp); --land: var(--grass); --ridge: var(--snow);
  --panel: #121519; --panel-2: #282F36; --line: rgba(255, 255, 255, .14); --open: rgba(255, 255, 255, .48);
  --text-2: rgba(255, 255, 255, .8); --on-land: #121519;
  --shadow: rgba(0, 0, 0, .5); --shadow-soft: rgba(0, 0, 0, .38); --shadow-deep: rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .34);
  --lamp-tint: rgba(253, 196, 79, .13); --lamp-ring: rgba(253, 196, 79, .6); --lamp-pulse: rgba(253, 196, 79, .85); --reef-tint: rgba(253, 116, 102, .38);
  /* code slots; a theme switch changes these six and nothing in the highlighter */
  --code-fg: var(--text); --code-keyword: var(--lamp); --code-string: var(--sand-fill);
  --code-comment: var(--muted); --code-type: var(--snow); --code-number: var(--grass);
  --outline-w: 232px;
  --pane-w: 480px;
}
/* Paper chart: cream ground, ink lines. Every literal colour token of :root, redefined (tests/web/theme-tokens.test.js). */
:root[data-theme="chart"] {
  --sea: #EFE5D0; --line-1: #233F5B; --line-07: rgba(35, 63, 91, .7); --line-03: rgba(35, 63, 91, .5);
  --lamp: #A36E09; --reef: #B33830; --sand-fill: #CEAC64; --grass: #3B793F; --snow: #FFFFFF; --explore: #176F7C;
  --text: rgba(16, 28, 40, .94); --muted: rgba(16, 28, 40, .7); --text-2: rgba(16, 28, 40, .82);
  --panel: #F9F3E6; --panel-2: #E2D6BE; --line: rgba(35, 63, 91, .2); --open: rgba(35, 63, 91, .5);
  --on-land: #FFFFFF;
  --shadow: rgba(60, 45, 20, .22); --shadow-soft: rgba(60, 45, 20, .16); --shadow-deep: rgba(60, 45, 20, .28);
  --scrim: rgba(60, 45, 20, .18);
  --lamp-tint: rgba(163, 110, 9, .14); --lamp-ring: rgba(163, 110, 9, .55); --lamp-pulse: rgba(163, 110, 9, .7);
  --reef-tint: rgba(179, 56, 48, .3);
  --code-keyword: #7A5208; --code-string: #6E5A1C; --code-type: #233F5B;
}
:root[data-theme="tide"] {
  /* Tide: Night's blues, darker and calmer, with the chrome a step below the sea and brighter accents (OKLCH, every text and mark ≥ 4:1). */
  --sea: #143446; --line-1: #F0F6F9; --line-07: rgba(240, 246, 249, .72); --line-03: rgba(240, 246, 249, .48);
  --lamp: #FFC753; --reef: #FF7E70; --sand-fill: #EED59B; --grass: #80CD82; --snow: #F8F7F2; --explore: #73DEE9;
  --text: rgba(255, 255, 255, 0.94); --muted: rgba(255, 255, 255, 0.72); --text-2: rgba(255, 255, 255, 0.82);
  --panel: #0B1E2A; --panel-2: #254152; --line: rgba(255, 255, 255, 0.16); --open: rgba(255, 255, 255, 0.5);
  --on-land: #0B1E2A;
  --shadow: rgba(0, 0, 0, .5); --shadow-soft: rgba(0, 0, 0, .38); --shadow-deep: rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .34);
  --lamp-tint: rgba(255, 199, 83, .13); --lamp-ring: rgba(255, 199, 83, .6); --lamp-pulse: rgba(255, 199, 83, .85); --reef-tint: rgba(255, 126, 112, .38);
  --code-keyword: #FFC753; --code-string: #EED59B; --code-type: #F8F7F2;
}
:root[data-theme="moonlight"] {
  /* Moonlight: low contrast for long night sessions, dimmer whites and softer accents; text still at least 4.5:1. */
  --sea: #162330; --line-1: #C9D3DA; --line-07: rgba(201, 211, 218, .72); --line-03: rgba(201, 211, 218, .48);
  --lamp: #D5B36A; --reef: #D2736C; --sand-fill: #CDBC9A; --grass: #7AAD84; --snow: #DBDEE1; --explore: #77BAC6;
  --text: rgba(224, 229, 235, 0.86); --muted: rgba(224, 229, 235, 0.6); --text-2: rgba(224, 229, 235, 0.72);
  --panel: #10171F; --panel-2: #232C38; --line: rgba(224, 229, 235, 0.12); --open: rgba(224, 229, 235, 0.42);
  --on-land: #10171F;
  --shadow: rgba(0, 0, 0, .5); --shadow-soft: rgba(0, 0, 0, .38); --shadow-deep: rgba(0, 0, 0, .55); --scrim: rgba(0, 0, 0, .34);
  --lamp-tint: rgba(213, 179, 106, .12); --lamp-ring: rgba(213, 179, 106, .55); --lamp-pulse: rgba(213, 179, 106, .75); --reef-tint: rgba(210, 115, 108, .34);
  --code-keyword: #D5B36A; --code-string: #CDBC9A; --code-type: #DBDEE1;
}
:root[data-theme="vellum"] {
  /* Vellum: a NOAA paper chart. White paper, pale-blue water, buff land, and chart magenta, the colour of lights on a chart, for lit landmarks. */
  --sea: #DAF0F7; --line-1: #132E50; --line-07: rgba(19, 46, 80, .7); --line-03: rgba(19, 46, 80, .5);
  --lamp: #AA167D; --reef: #B6322B; --sand-fill: #E6C58F; --grass: #5A8143; --snow: #FFFFFF; --explore: #097689;
  --text: rgba(12, 23, 35, 0.94); --muted: rgba(12, 23, 35, 0.68); --text-2: rgba(12, 23, 35, 0.8);
  --panel: #FBFAF7; --panel-2: #E7E4DD; --line: rgba(19, 46, 80, 0.18); --open: rgba(19, 46, 80, 0.5);
  --on-land: #FFFFFF;
  --shadow: rgba(19, 46, 80, .16); --shadow-soft: rgba(19, 46, 80, .12); --shadow-deep: rgba(19, 46, 80, .22);
  --scrim: rgba(19, 46, 80, .14);
  --lamp-tint: rgba(170, 22, 125, .1); --lamp-ring: rgba(170, 22, 125, .5); --lamp-pulse: rgba(170, 22, 125, .65);
  --reef-tint: rgba(182, 50, 43, .28);
  --code-keyword: #AA167D; --code-string: #7A5A1E; --code-type: #132E50;
}
html, body { margin: 0; height: 100%; background: var(--water); color: var(--text);
  font: 14px/1.5 system-ui, -apple-system, sans-serif; overflow: hidden; }
#map { position: fixed; inset: 0; display: block; cursor: grab; }
#map.dragging { cursor: grabbing; }
#map.hover { cursor: pointer; }

.chrome { position: fixed; left: var(--outline-w); display: flex; padding: 16px 20px; pointer-events: none; transition: left .18s ease; }
.chrome > * { pointer-events: auto; }
.top { top: 0; }
.chrome-stack { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-family: Georgia, serif; font-size: 18px; }
.crumb { background: none; border: 0; color: var(--muted); font: inherit; cursor: pointer; padding: 0; }
.crumb:hover { color: var(--text); }
.crumb:disabled { color: var(--text); cursor: default; }
.sep { color: var(--line); }
.status { font-size: 12px; color: var(--muted); }
.status.off { color: var(--reef); }

.strip { display: flex; gap: 24px; font-size: 12px; }
.strip-item { display: flex; flex-direction: column; gap: 2px; position: relative; cursor: help; }
.strip-item .hint { display: none; position: absolute; top: calc(100% + 8px); left: 0; width: 260px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; box-shadow: 0 8px 24px var(--shadow); font-size: 12px; line-height: 1.45; color: var(--text); text-transform: none; letter-spacing: 0; z-index: 4; }
.strip-item:last-child .hint { left: auto; right: 0; }
.strip-item:hover .hint, .strip-item.open .hint { display: block; }
.strip-label { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
/* the lens switch: Keeper (what you have demonstrated) or Mentor (where you have explored) */
.mode-cell { cursor: default; gap: 4px; }
.mode-switch { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.mode-switch .seg { background: transparent; border: 0; color: var(--muted); font: 12px system-ui, sans-serif; padding: 4px 10px 5px; cursor: pointer;
  display: grid; justify-items: start; gap: 0; text-align: left; }
.mode-switch .seg + .seg { border-left: 1px solid var(--line); }
.mode-switch .seg .name { font-weight: 600; letter-spacing: .02em; }
.mode-switch .seg .role { font-size: 10px; opacity: .85; white-space: nowrap; }
.mode-switch .seg .name { white-space: nowrap; }
.mode-switch .seg:hover { color: var(--text); }
.mode-switch .seg.on { background: var(--panel-2); color: var(--text); }
.mode-switch .seg.judge.on .name { color: var(--lamp); }
.mode-switch .seg.mentor.on .name { color: var(--explore); }
.mode-switch .seg:focus-visible { outline: 2px solid var(--lamp); outline-offset: -2px; }

/* ---- the pane: head, log, foot ---- */
.pane { position: fixed; top: 0; right: 0; bottom: 0; width: var(--pane-w); background: var(--panel);
  border-left: 1px solid var(--line); display: flex; flex-direction: column; box-shadow: -12px 0 32px var(--shadow-soft); z-index: 2; }
.pane[hidden] { display: none; }
@media (max-width: 720px) { .pane { width: 100%; } }

.head { padding: 18px 20px 12px; border-bottom: 1px solid var(--line); display: grid; gap: 8px; }
.head .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.head h2 { margin: 0; font: 22px Georgia, serif; }
.pill { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; padding: 4px 8px; border-radius: 4px;
  background: var(--grass); color: var(--on-land); white-space: nowrap; }
.pill.open { background: transparent; border: 1px dashed var(--open); color: var(--muted); }
.pill.reef { background: var(--reef); color: var(--text); }
.pills { display: flex; gap: 6px; }
.pill.harbour { background: transparent; border: 1px dashed var(--sand); color: var(--sand); }
.head .summary { margin: 0; color: var(--muted); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--muted); color: var(--muted); }
.chip.lit { background: var(--sand); border: 1px solid var(--sand); color: var(--water); }
.chip.just-lit { animation: lit-pulse .8s ease-out 1; }
.chip.explored { background: var(--explore); border: 1px solid var(--explore); color: var(--water); }
.pill.explore { background: transparent; border: 1px solid var(--explore); color: var(--explore); }
.pill.mode { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.pill.mode.mentor { border-color: var(--explore); color: var(--explore); }
@keyframes lit-pulse { 0% { box-shadow: 0 0 0 0 var(--lamp-pulse); } 100% { box-shadow: 0 0 0 10px transparent; } }
.sub { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.sub .links { display: flex; gap: 10px; }
.sub .phone-only { display: none; }
.link { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-size: 12px; text-decoration: underline;
  text-underline-offset: 2px; cursor: pointer; }
.link:hover { color: var(--sand); }
.note { display: flex; gap: 6px; margin: 0; }
.note input { flex: 1; background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 6px 8px;
  font: inherit; font-size: 12px; }
.sent { color: var(--sand); font-size: 12px; }
.note-help { margin: 0; font-size: 12px; color: var(--muted); }
.earlier { font-size: 12px; color: var(--muted); }
.muted { color: var(--muted); font-size: 12px; }
.error { color: var(--reef); font-size: 12px; }
.stopped { color: var(--muted); font-size: 12px; font-style: italic; margin: 4px 0; }

.log { flex: 1; overflow: auto; padding: 14px 20px; display: flex; flex-direction: column; gap: 12px; }
.msg p { margin: 0 0 6px; }
.msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 0 0 6px; padding-left: 20px; }
.msg h1, .msg h2, .msg h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
pre, code, kbd { font-family: var(--font-mono); }
.msg pre { margin: 0 0 6px; padding: 8px 10px; background: var(--water); border-radius: 6px; overflow-x: auto; font-size: 12px; }
.msg .ask { text-decoration: underline dotted var(--line-03); text-underline-offset: 3px; cursor: pointer; border-radius: 3px; }
.msg .ask:hover, .msg .ask:focus-visible { text-decoration-color: var(--lamp); color: var(--lamp); outline: none; }
.msg blockquote { margin: 0 0 6px; padding: 2px 0 2px 10px; border-left: 2px solid var(--line-03); color: var(--muted); }
.msg blockquote p { margin: 0; }
.msg code { font-family: var(--font-mono); font-size: 12px; background: var(--water); padding: 1px 4px; border-radius: 3px; }
.msg pre code { background: none; padding: 0; }
.msg.judge, .msg.mentor { font-family: Georgia, serif; font-size: 14.5px; }
.msg.you { align-self: flex-end; max-width: 88%; background: var(--panel-2); border-radius: 10px 10px 2px 10px; padding: 8px 12px; }
.msg.system { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); text-align: center; }
.lit-line { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--sand); }
.lit-line::before, .lit-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.explored-line { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--explore); }
.explored-line::before, .explored-line::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.verdict-card { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--panel-2); display: grid; gap: 6px; }
.verdict-card .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.verdict-card .conf { font-size: 11px; color: var(--muted); }
.verdict-card q { font-family: Georgia, serif; font-style: italic; quotes: "“" "”"; }
.verdict-card .why { font-size: 12px; color: var(--muted); }
.reef-block { border: 1px solid var(--reef); border-radius: 8px; padding: 8px 10px; }
.reef-block p { margin: 0 0 4px; }
.reef-title { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--reef); margin-bottom: 4px; }
.progress { font-size: 11px; color: var(--muted); font-style: italic; }
.thinking { color: var(--muted); font-style: italic; }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--sand); vertical-align: -2px; margin-left: 2px;
  animation: blink 1s steps(2) infinite; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .caret, .chip.just-lit { animation: none; } }
.empty, .actions { display: grid; gap: 10px; justify-items: start; }
.btn { background: var(--lamp); color: var(--sea); border: 0; border-radius: 6px; padding: 7px 12px; font: inherit; font-size: 12px;
  font-weight: 500; cursor: pointer; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: default; }
button:focus-visible, textarea:focus-visible, input:focus-visible { outline: 2px solid var(--sand); outline-offset: 1px; }

.foot { padding: 12px 20px 14px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.foot form { display: flex; gap: 6px; align-items: flex-end; margin: 0; }
.foot textarea { flex: 1; resize: none; background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.4; min-height: 36px; max-height: 118px; box-sizing: border-box; }
.foot textarea:disabled { color: var(--muted); }
.foot textarea::placeholder { color: var(--muted); opacity: 1; }
.btn.send.judge { background: var(--panel-2); color: var(--text); }
.btn.send.mentor { background: var(--explore); color: var(--on-land); }
.foot .meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }

/* ---- the outline: Linear rows, Shuttle rail ---- */
.outline { position: fixed; top: 0; left: 0; bottom: 0; width: var(--outline-w); background: var(--panel); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; z-index: 2; font-size: 13px; line-height: 1.35; transition: width .18s ease; }
.outline .oh { position: relative; height: 44px; padding: 0 10px 0 12px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; flex: none; }
.outline .ws { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; font: inherit; font-weight: 500;
  color: var(--text); cursor: pointer; min-width: 0; }
.outline .ws:hover { background: var(--panel-2); }
.outline .ws .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.outline .ws .chev { color: var(--muted); font-size: 10px; }
.outline .sp { flex: 1; }
.outline .ib { width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted); border-radius: 6px; cursor: pointer; font: 14px system-ui, sans-serif; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  display: grid; place-items: center; }
.outline .ib:hover { background: var(--panel-2); color: var(--text); }
.outline .menu { position: absolute; top: 40px; left: 8px; min-width: 200px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 16px 40px var(--shadow-deep); padding: 6px; z-index: 6; display: grid; gap: 2px; }
.outline .mi { text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.outline .mi:hover { background: var(--panel-2); }
.outline .mi.on { background: var(--lamp-tint); }
.outline .menu .sep { border-top: 1px solid var(--line); margin: 4px 0; }
.outline .menu .ml { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 8px 2px; }
.outline .sum { padding: 10px 14px 6px; font-size: 11px; color: var(--muted); }
.outline .sec { padding: 12px 14px 6px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
:is(.outline, .peek) .list { list-style: none; margin: 0; padding: 0 8px 8px; overflow: auto; flex: 1; }
:is(.outline, .peek) .list li + li { margin-top: 2px; }
:is(.outline, .peek) .row { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px 0 8px; border-radius: 6px; cursor: pointer; color: var(--text);
  user-select: none; }
:is(.outline, .peek) .row:hover { background: var(--panel-2); }
:is(.outline, .peek) .row.on { background: var(--lamp-tint); }
:is(.outline, .peek) .row.islet { height: 28px; font-size: 12.5px; }
:is(.outline, .peek) .row .tw { width: 14px; height: 14px; border: 0; background: transparent; color: var(--muted); font-size: 9px; border-radius: 4px; flex: none;
  display: grid; place-items: center; cursor: pointer; padding: 0; }
:is(.outline, .peek) .row .tw:hover { background: var(--line); color: var(--text); }
:is(.outline, .peek) .row .tw.none { visibility: hidden; }
:is(.outline, .peek) .row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1px dashed var(--open); box-sizing: border-box; }
:is(.outline, .peek) .row.islet .dot { width: 6px; height: 6px; }
:is(.outline, .peek) .row .dot.lit { border-style: solid; border-color: var(--lamp); }
:is(.outline, .peek) .row .dot.explored { border-style: solid; border-color: var(--explore); }
:is(.outline, .peek) .row .dot.explored.all { background: var(--explore); border: 0; }
:is(.outline, .peek) .row .dot.sandbar { background: var(--sand-fill); border: 0; }
:is(.outline, .peek) .row .dot.settled { background: var(--grass); border: 0; }
:is(.outline, .peek) .row .dot.mountainous { background: var(--ridge); border: 1px solid var(--line-07); } /* a summit: snow ringed by the coast line, so it reads on paper too */
:is(.outline, .peek) .row .dot.reef { background: var(--sand-fill); border: 0; box-shadow: inset 0 -2px 0 var(--reef); }
:is(.outline, .peek) .row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.outline, .peek) .row .name.open { color: var(--text-2); }
:is(.outline, .peek) .row .anchor { color: var(--lamp); font-size: 11px; }
:is(.outline, .peek) .row .n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.outline .ft { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; flex: none; }
.outline kbd { font: 10px var(--font-mono); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; color: var(--muted); }
.outline.rail { width: 44px; }
.outline.rail .oh { padding: 0; justify-content: center; }
.outline.rail .ws, .outline.rail .sp, .outline.rail .sum, .outline.rail .sec, .outline.rail .list, .outline.rail .ft { display: none; }
.outline .dashes { display: none; flex: 1; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; padding-left: 14px; }
.outline.rail .dashes { display: flex; }
.outline .dash { height: 3px; border-radius: 2px; background: var(--muted); opacity: .35; width: 14px; cursor: pointer; transition: width .15s, opacity .15s; }
.outline .dash.lit { opacity: .6; width: 18px; background: var(--lamp); }
.outline .dash.explored { opacity: .7; width: 18px; background: var(--explore); }
.outline .dash.done { opacity: .9; width: 22px; background: var(--grass); }
.outline .dash.on { opacity: 1; width: 26px; background: var(--lamp); }
.outline .dash.reef { opacity: .9; width: 22px; background: var(--reef); }
.outline .dash:hover { opacity: 1; }
.peek { position: fixed; left: 44px; top: 52px; width: 240px; max-height: calc(100vh - 104px); background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  border-left: 8px solid transparent; background-clip: padding-box;
  box-shadow: 0 16px 40px var(--shadow-deep); z-index: 5; display: flex; flex-direction: column; font-size: 13px; overflow: hidden; }
.peek[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { .outline, .chrome { transition: none; } }

/* ---- pane grip ---- */
.pane .grip { position: absolute; top: 0; bottom: 0; left: -5px; width: 10px; cursor: col-resize; z-index: 3; }
.pane .grip::after { content: ""; position: absolute; top: 50%; left: 4px; width: 2px; height: 36px; margin-top: -18px; border-radius: 2px; background: var(--line); }
.pane .grip:hover::after, .pane.resizing .grip::after { background: var(--lamp); }
.pane.resizing { transition: none; user-select: none; }
.pane-width { position: fixed; top: 8px; right: calc(var(--pane-w) - 12px); transform: translateX(100%); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); z-index: 4; pointer-events: none; }

/* ---- diagrams ---- */
.diagram { margin: 6px 0 8px; padding: 10px 8px; background: var(--water); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.diagram svg { max-width: none; height: auto; display: block; margin: 0 auto; }
.diagram .cap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }

.plot { margin: 6px 0 8px; padding: 10px 8px; background: var(--water); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; }
.plot svg { display: block; margin: 0 auto; }
.plot .cap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.plot .error { margin-bottom: 6px; }
.plot .legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.plot .legend .item { display: inline-flex; align-items: center; gap: 6px; }
.plot .legend .swatch { width: 14px; height: 2px; border-radius: 1px; flex: none; }

/* ---- code blocks ---- */
.codeblock { margin: 6px 0 8px; padding: 8px 10px 10px; background: var(--water); border: 1px solid var(--line); border-radius: 8px; }
.codeblock .cap { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.codeblock .copy { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.codeblock .copy:hover { color: var(--lamp); }
.codeblock .copy:focus-visible { outline: 1px solid var(--lamp); outline-offset: 2px; }
.msg .codeblock pre { margin: 0; padding: 0; background: none; overflow-x: auto; white-space: pre; font-size: 12px; line-height: 1.5; }
.msg .codeblock code { color: var(--code-fg); }
.tok-keyword { color: var(--code-keyword); }
.tok-string { color: var(--code-string); }
.tok-comment { color: var(--code-comment); }
.tok-type { color: var(--code-type); }
.tok-number { color: var(--code-number); }
.tok-i { font-style: italic; }

/* ---- choices under a judge message ---- */
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.choices .q { width: 100%; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.choice { background: transparent; border: 1px solid var(--lamp); color: var(--lamp); border-radius: 999px; padding: 5px 12px; font: 12px system-ui, sans-serif; cursor: pointer; }
.choice:hover { background: var(--lamp); color: var(--sea); }
.choice:disabled { opacity: .4; cursor: default; }
.choice.picked { background: var(--lamp); color: var(--sea); opacity: 1; }

/* ---- the call to action over the map ---- */
.cta { position: fixed; bottom: 56px; left: var(--outline-w); right: 0; display: flex; justify-content: center; pointer-events: none; z-index: 1; }
body.pane-open .cta { right: var(--pane-w); }
.cta[hidden] { display: none; }
.cta-card { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px var(--shadow); max-width: min(560px, 90%); display: grid; gap: 8px; }
.cta-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--lamp); }
.cta-card .q { font-family: Georgia, serif; font-size: 14px; }
.cta-card .row { display: flex; flex-wrap: wrap; gap: 6px; }
.cta-card .row button { background: transparent; border: 1px solid var(--lamp); color: var(--lamp); border-radius: 999px; padding: 6px 12px; font: 12px system-ui, sans-serif; cursor: pointer; }
.cta-card .row button:hover { background: var(--lamp); color: var(--sea); }
.cta-card .row button.primary { background: var(--lamp); color: var(--sea); }
.cta-card .row button.reefy { border-color: var(--reef); color: var(--reef); }
.cta-card .row button.reefy:hover { background: var(--reef); color: var(--text); }
.cta-card .row button:disabled { opacity: .5; cursor: default; }

/* ---- keyboard focus ---- */
#map:focus, #pane:focus, #outline:focus { outline: none; }
body[data-focus="outline"] #outline { box-shadow: inset -1px 0 var(--lamp); }
body[data-focus="pane"] #pane { box-shadow: inset 1px 0 var(--lamp), -12px 0 32px var(--shadow-soft); }
.map-focus { position: fixed; top: 0; left: var(--outline-w); right: 0; height: 1px; background: var(--lamp); pointer-events: none; z-index: 3; transition: left .18s ease; }
body[data-focus="map"] .map-focus { display: block; }
body:not([data-focus="map"]) .map-focus { display: none; }
body[data-focus="map"].pane-open .map-focus { right: var(--pane-w); }
body[data-focus="outline"] :is(.outline, .peek) .row.cur { box-shadow: inset 0 0 0 1px var(--lamp); }
body[data-focus="outline"] .outline .dash.cur { outline: 1px solid var(--lamp); outline-offset: 2px; }

/* ---- cheat sheet ---- */
.keys { position: fixed; top: 0; bottom: 0; left: var(--outline-w); right: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6; }
body.pane-open .keys { right: var(--pane-w); }
.keys[hidden] { display: none; }
.keys-card { pointer-events: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; box-shadow: 0 12px 32px var(--shadow); min-width: 360px; }
.keys-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--lamp); margin-bottom: 8px; }
.keys-card .cols { display: flex; gap: 28px; }
.keys-card .sec { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.keys-card .krow { display: flex; gap: 10px; align-items: baseline; font-size: 12px; line-height: 22px; }
.keys-card kbd { font: 10px var(--font-mono); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--text); min-width: 28px; text-align: center; }

/* ---- board ---- */
.board-scrim { position: fixed; top: 0; bottom: 0; left: var(--outline-w); right: 0; background: var(--scrim); z-index: 2; opacity: 0; transition: opacity .18s ease, left .18s ease; }
.board-scrim.in { opacity: 1; }
body.pane-open .board-scrim { right: var(--pane-w); }
.board-scrim[hidden] { display: none; }
/* a sheet: the breadcrumb and the strip stay in view above it, so the map is visibly still there */
.board { position: fixed; top: 100px; bottom: 0; left: var(--outline-w); right: 0; background: var(--water); z-index: 2;
  border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px var(--shadow); clip-path: inset(-60px 0 0 0); /* the shadow shows above the sheet only, never down its sides */
  display: flex; flex-direction: column; overflow: hidden; container-type: inline-size;
  transform: translateY(24px); opacity: 0; transition: transform .18s ease, opacity .18s ease, left .18s ease; }
.board.in { transform: none; opacity: 1; }
body.pane-open .board { right: var(--pane-w); }
.board[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .board, .board-scrim { transition: none; } }
.board:focus { outline: none; }
.board .head { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.board .head .name { font-family: Georgia, serif; font-size: 16px; }
.board .head .count { color: var(--muted); font-size: 12px; }
.board .head .spacer { flex: 1; }
.board .head button { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.board .head .close { width: 26px; padding: 0; }
.board .head .close svg { display: block; }
.board button { background: transparent; border: 1px solid var(--line-03); color: var(--text); border-radius: 999px; padding: 4px 10px; font: 12px system-ui, sans-serif; cursor: pointer; }
.board button:hover { border-color: var(--lamp); color: var(--lamp); }
.board button.primary { background: var(--lamp); color: var(--sea); border-color: var(--lamp); }
.board button.primary:hover { color: var(--sea); }
.board button.danger { border-color: var(--reef); color: var(--reef); }
.board button.danger:hover { background: var(--reef); color: var(--text); }
.board button:disabled { opacity: .5; cursor: default; }
.board .column { flex: 1; overflow-y: auto; padding: 16px 20px 80px; }
.board .column > * { max-width: 760px; margin: 0 auto 12px; }
.board .empty { display: block; color: var(--muted); text-align: center; padding: 48px 0; font-family: Georgia, serif; }
.board .err-line { color: var(--reef); text-align: center; font-size: 12px; }
.board .card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.board .card.cur { box-shadow: inset 0 0 0 1px var(--lamp); }
.board .card > .cap { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 11px; }
.board .card > .cap .kind { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.board .card > .cap .title { font-family: Georgia, serif; font-size: 14px; color: var(--text); }
.board .card > .cap .who { color: var(--lamp); }
.board .card > .cap .who.mentor { color: var(--explore); }
.board .card > .cap .acts { margin-left: auto; display: flex; gap: 6px; }
.board .card > .cap .acts button { padding: 2px 8px; font-size: 11px; }
.board .card .diagram, .board .card .codeblock, .board .card .plot { margin: 0; }
.board .note-body { display: block; }
.board .note-body > :first-child { margin-top: 0; }
/* the editor: a card being written. Head (kind, language, Write | Preview), body, foot (actions, hint, status). */
.board .editor { background: var(--panel); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px var(--lamp-ring); border-radius: 10px; padding: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; }
.board .editor .ehead { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 11px; }
.board .editor .ehead .kind { text-transform: uppercase; letter-spacing: .08em; color: var(--lamp); }
.board .editor .ehead .spacer { flex: 1; }
.board .editor .ehead select { background: var(--water); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font: 11px system-ui, sans-serif; }
.board .editor .ehead select:focus { outline: none; border-color: var(--lamp); }
.board .editor .tabs { display: inline-flex; border: 1px solid var(--line-03); border-radius: 999px; padding: 2px; gap: 2px; }
.board .editor .tabs .tab { height: 20px; padding: 0 10px; border: 0; border-radius: 999px; font-size: 11px; color: var(--muted); }
.board .editor .tabs .tab:hover { color: var(--text); }
.board .editor .tabs .tab[aria-selected="true"] { background: var(--lamp); color: var(--sea); }
.board .editor .ebody { background: var(--water); }
.board .editor .write { display: block; width: 100%; box-sizing: border-box; min-height: 160px; margin: 0; padding: 12px 14px; border: 0; background: transparent; color: var(--text); resize: none; outline: none; overflow-y: hidden;
  font: 14px/1.6 system-ui, -apple-system, sans-serif; }
.board .editor.diagram .write { font: 12px/1.5 var(--font-mono); white-space: pre; overflow-x: auto; }
.board .editor .write::placeholder { color: var(--muted); }
.board .editor .write[hidden], .board .editor .preview[hidden] { display: none; }
.board .editor .preview { padding: 12px 14px; min-height: 160px; box-sizing: border-box; }
.board .editor .preview .empty { padding: 48px 0; }
.board .editor .preview .note-body > :first-child { margin-top: 0; }
.board .editor .preview .diagram { margin: 0; }
.board .editor .err { color: var(--reef); font-size: 12px; white-space: pre-wrap; padding: 6px 14px 10px; border-top: 1px solid var(--reef-tint); }
.board .editor .efoot { display: flex; gap: 6px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.board .editor .efoot .hint { margin-left: auto; color: var(--muted); font-size: 11px; }
.board .editor .efoot .hint kbd { font: 10px var(--font-mono); border: 1px solid var(--line-03); border-radius: 4px; padding: 0 4px; margin: 0 2px; }
.board .editor .efoot .status { color: var(--muted); font-size: 12px; margin-left: 8px; }
.board .editor .efoot .status.bad { color: var(--reef); }
.board .editor .efoot .status:empty { display: none; }
/* the live code block: a transparent textarea over the highlighted mirror, same metrics */
.board .live { position: relative; }
.board .live pre, .board .live textarea { margin: 0; padding: 12px 14px; font: 12px/1.5 var(--font-mono); white-space: pre; tab-size: 2; box-sizing: border-box; }
.board .live textarea { position: relative; display: block; width: 100%; min-height: 160px; border: 0; background: transparent; color: transparent; caret-color: var(--text); resize: none; overflow: auto; outline: none; }
.board .live code { color: var(--code-fg); }
.board-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 2; display: flex; gap: 8px; align-items: center; background: var(--panel); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 6px 12px; font: 12px system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 24px var(--shadow-soft); transition: right .18s ease; }
body.pane-open .board-toggle { right: calc(var(--pane-w) + 16px); }
.board-toggle:hover { border-color: var(--lamp); color: var(--lamp); }
.board-toggle kbd { font: 10px var(--font-mono); border: 1px solid var(--line-03); border-radius: 4px; padding: 0 4px; color: var(--muted); }
.board-toggle[hidden] { display: none; }

/* ---- About you: the learner note ---- */
.about { position: fixed; top: 72px; left: calc(var(--outline-w) + 16px); z-index: 5; }
.about[hidden] { display: none; }
.about-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 32px var(--shadow);
  width: min(420px, calc(100vw - var(--outline-w) - 32px)); display: grid; gap: 8px; }
.about-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--explore); }
.about-card .help { margin: 0; font-size: 12px; color: var(--muted); }
.about-card textarea { resize: vertical; background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.4; }
.about-card .count { font-size: 11px; color: var(--muted); text-align: right; }
.about-card .count.at-limit { color: var(--reef); }
.about-card .row { display: flex; gap: 6px; }

/* The cartographer: its pane reuses the island pane's head, log, and foot; its colour is the lamp's. */
.pill.mode.cartographer { border-color: var(--lamp); color: var(--lamp); }
.msg.cartographer { font-family: Georgia, serif; font-size: 14.5px; }
.btn.send.cartographer { background: var(--lamp); color: var(--on-land); }
.strip-item.action { cursor: pointer; }
.strip-item.action:hover > span:nth-child(2) { color: var(--lamp); }
.sketch-card { border: 1px dashed var(--lamp); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; }
.sketch-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--lamp); }
.sketch-card .sum { font-size: 12px; color: var(--muted); }
.sketch-card .isles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sketch-card .isles .name { font-family: Georgia, serif; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.sketch-card .isles .blurb { font-size: 12.5px; color: var(--text-2); }
.sketch-card .isles .marks { font-size: 11px; color: var(--muted); }
.sketch-card .sec { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 4px; }
.sketch-card .straits, .sketch-card .update { font-size: 12px; color: var(--text-2); }
.sketch-card .actions { display: flex; gap: 6px; margin-top: 4px; }
.crumb.start { color: var(--lamp); text-decoration: underline; }
.menu .mi.new { color: var(--lamp); }

/* New domain: one field, over a scrim on the map; with no domains yet (.first) it is the whole page. */
.new-domain { position: fixed; inset: 0; z-index: 6; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: var(--scrim); overflow-y: auto; }
.new-domain[hidden] { display: none; }
.new-domain-card textarea:focus, .new-domain-card input:focus { outline: none; border-color: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-tint); }
.new-domain-card .examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.new-domain-card .ex-lbl { font-size: 11px; color: var(--muted); margin-right: 2px; }
.new-domain-card .ex { background: transparent; border: 1px solid var(--line); color: var(--text-2); border-radius: 999px; padding: 4px 10px; font: 12px system-ui, sans-serif; cursor: pointer; }
.new-domain-card .ex:hover { border-color: var(--lamp); color: var(--text); }
.new-domain-card .row { align-items: center; }
.new-domain-card .hint { margin-left: auto; font: 11px var(--font-mono); color: var(--muted); }
body.empty .outline, body.empty .chrome, body.empty #map-focus, body.empty #board-toggle { display: none; }
.new-domain.first { background: transparent; align-items: center; padding: 24px 16px; }
.new-domain.first .new-domain-card { background: transparent; border: 0; box-shadow: none; width: min(600px, 100%); gap: 14px; padding: 0; }
.new-domain.first .lbl { font-size: 11px; }
.new-domain.first .title { margin: -6px 0 0; font: 400 34px/1.15 Georgia, serif; letter-spacing: -.01em; color: var(--text); }
.new-domain.first .help { font-size: 14px; line-height: 1.55; color: var(--text-2); max-width: 54ch; }
.new-domain.first textarea { font-size: 15px; padding: 12px 14px; background: var(--panel); }
.new-domain.first .btn { padding: 9px 16px; font-size: 14px; }
.new-domain-card .art { width: min(360px, 80%); height: auto; margin-bottom: 6px; overflow: visible; }
.art .coast { fill: none; stroke: var(--line-07); stroke-width: 2.5; }
.art .open .coast { stroke: var(--open); stroke-dasharray: 2 6; stroke-linecap: round; }
.art .sandbar .coast { fill: var(--sand-fill); fill-opacity: .9; }
.art .settled .coast { fill: var(--grass); }
.art .ring { fill: none; stroke: var(--line-07); stroke-width: 1.6; }
.art .settled .ring { stroke: var(--on-land); stroke-opacity: .55; }
.art .sandbar .ring { stroke: var(--on-land); stroke-opacity: .45; }
.art text { fill: var(--muted); font: italic 15px Georgia, serif; text-anchor: middle; }
.new-domain-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 32px var(--shadow);
  width: min(480px, 100%); box-sizing: border-box; display: grid; gap: 10px; }
.new-domain-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--lamp); }
.new-domain-card .help { margin: 0; font-size: 12px; color: var(--muted); }
.new-domain-card input { background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 14px; }
.new-domain-card .row { display: flex; gap: 6px; }
.new-domain-card .error { margin: 0; font-size: 12px; color: var(--reef); }

/* ---- the hosted build: welcome, Your key, import, another tab (src/web/hosted.js) ---- */
.hosted { position: fixed; inset: 0; z-index: 7; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: var(--scrim); overflow-y: auto; }
.hosted[hidden] { display: none; }
.hosted.welcome { background: var(--water); }
.hosted-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 32px var(--shadow);
  width: min(460px, 100%); box-sizing: border-box; display: grid; gap: 10px; accent-color: var(--lamp); }
.hosted-card a { color: var(--lamp); }
.hosted-card .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--lamp); }
.hosted-card .lede { margin: 0; font-family: Georgia, serif; font-size: 16px; line-height: 1.45; }
.hosted-card .help { margin: 0; font-size: 12px; color: var(--muted); }
.hosted-card .help code { font: 11px var(--font-mono); }
.hosted-card .error { margin: 0; font-size: 12px; color: var(--reef); }
.hosted-card .fields { display: grid; gap: 10px; }
.hosted-card input[type="password"] { background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 8px 10px; font: 14px var(--font-mono); min-width: 0; }
.hosted-card .models { display: grid; gap: 4px; }
.hosted-card .model { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: baseline; font-size: 13px; cursor: pointer; }
.hosted-card .model .note { color: var(--muted); font-size: 12px; }
.hosted-card .remember { font-size: 12px; color: var(--text-2); cursor: pointer; }
.hosted-card .row { display: flex; gap: 6px; flex-wrap: wrap; }
.hosted-card .btn.link { background: none; border: 0; padding: 0; color: var(--lamp); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }

/* ---- phones: the outline starts as a rail (outline.js), the chrome wraps, the pane and the board take the screen ---- */
@media (max-width: 720px) {
  :root { --pane-w: 100vw !important; }
  .chrome { right: 0; padding: 10px 12px; }
  .chrome-stack { min-width: 0; max-width: 100%; }
  .breadcrumb { flex-wrap: wrap; font-size: 16px; row-gap: 2px; }
  .strip { flex-wrap: wrap; gap: 6px 14px; }
  .strip-item .hint { position: fixed; top: auto; left: 12px; right: 12px; width: auto; margin-top: 8px; }
  .strip-item:last-child .hint { left: 12px; right: 12px; }
  .pane { height: 100dvh; bottom: auto; border-left: 0; z-index: 4; }
  .pane .grip, .pane-width { display: none; }
  .head { padding: 14px 16px 10px; }
  .head .row, .pills, .sub, .sub .links { flex-wrap: wrap; }
  .head .row { justify-content: flex-start; row-gap: 6px; }
  .sub .phone-only { display: inline; }
  .board, body.pane-open .board { top: 0; left: 0; right: 0; border-radius: 0; z-index: 4; }
  .board-scrim, body.pane-open .board-scrim { left: 0; right: 0; }
  .keys, body.pane-open .keys { left: 0; right: 0; }
  .map-focus { left: 0; }
  .board-toggle { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  body.pane-open .board-toggle, body.pane-open .cta { display: none; }
  .cta { left: 0; bottom: max(64px, calc(env(safe-area-inset-bottom) + 52px)); padding: 0 12px; }
  .about { left: 12px; right: 12px; top: 64px; }
  .about-card { width: auto; }
  .peek { display: none; }
  .new-domain-card .hint { display: none; }
  .new-domain.first .title { font-size: 28px; }
}
.new-domain-card .sub-lbl { font-size: 11px; color: var(--muted); margin-top: 2px; }
.new-domain-card textarea { resize: vertical; background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.45; }
.outline .mi.theme-row { display: flex; align-items: center; gap: 8px; }
.outline .mi.theme-row .cur { margin-left: auto; color: var(--muted); }
.outline .mi.theme-row .chev { color: var(--muted); font-size: 10px; width: 10px; text-align: center; }
.outline .mi.sub { padding-left: 20px; }