/* 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;
  /* The conversation's face, both sides of it: Noto Sans TC (fonts/noto-sans-tc.css) carries Latin and Chinese alike. */
  --font-text: "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Segoe UI", sans-serif;
  /* 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: clamp(340px, 50vw, 960px); /* half the window until the reader drags the grip (card.js keeps the width) */
}
/* 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; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
#map.dragging { cursor: grabbing; }
#map.hover { cursor: pointer; }

.chrome { position: fixed; left: var(--outline-w); right: 0; display: flex; padding: 16px 20px; pointer-events: none; transition: left .18s ease, right .18s ease; }
body.pane-open .chrome { right: var(--pane-w); }
.chrome > * { pointer-events: auto; }
.top { top: 0; }
.chrome-stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; min-width: 0; max-width: 100%; }
/* the title row: the domain (and scale) on the left, the mode switch beside it */
.title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }

.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; flex-wrap: wrap; gap: 8px 28px; font-size: 12px; max-width: 100%; }
.strip-value { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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) */

/* ---- 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); }
.chip.loose { display: inline-flex; align-items: center; gap: 4px; padding-right: 3px; }
.loose-mark { font: 600 10px/1 var(--font-mono); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; border: 1px solid var(--lamp);
  background: var(--panel); color: var(--lamp); cursor: pointer; }
.loose-mark:hover, .loose-mark.on { background: var(--lamp); color: var(--panel); }
.chips > .loose-mark { align-self: center; }
.loose-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--lamp); background: var(--panel-2); border-radius: 0 6px 6px 0; }
.sail { margin-top: 10px; padding: 8px 10px; border: 1px solid var(--lamp); border-radius: 8px; max-width: 64ch; }
.sail-go { background: none; border: 0; padding: 0; color: var(--lamp); font: 600 13px/1.4 var(--font-text); cursor: pointer; }
.sail-go::before { content: "→ "; }
.sail-go:hover { text-decoration: underline; }
.sail-why { color: var(--text); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.sail-carry { color: var(--muted); font-size: 11px; margin-top: 2px; }
.briefing .carried { margin: 4px 0 12px; padding: 8px 12px; border-left: 2px solid var(--lamp); background: var(--panel-2); border-radius: 0 6px 6px 0; text-align: left; max-width: 46ch; }
.briefing .carried .lbl { color: var(--muted); font-size: 11px; }
.briefing .carried p { margin: 2px 0 0; color: var(--text); font-size: 13px; line-height: 1.5; }
.briefing .carry-drop { display: block; margin: 8px auto 0; }
.msg.system.loose-line { text-transform: none; letter-spacing: normal; }
.loose-item { display: flex; align-items: flex-start; gap: 10px; }
.loose-text { flex: 1; min-width: 0; font-size: 12px; line-height: 1.45; color: var(--text); }
.loose-kind { color: var(--lamp); margin-right: 6px; font-size: 11px; }
.loose-meta { color: var(--muted); font-size: 11px; margin-top: 2px; }
.loose-dismiss { background: none; border: 1px solid var(--line-03); border-radius: 999px; color: var(--muted); font-size: 11px; padding: 1px 8px; cursor: pointer; white-space: nowrap; }
.loose-dismiss:hover { color: var(--text); border-color: var(--muted); }
/* Landmark words in the persona's replies (`renderMarkdown(…, { terms })`): a dotted underline in the lens's colour;
   hovering a word or its chip lights both (`lightLandmark` in card.js). */
.msg .term { text-decoration: underline dotted var(--lamp); text-decoration-thickness: 1.5px; text-underline-offset: 4px; border-radius: 2px; transition: background .15s; }
body[data-mode="mentor"] .msg .term { text-decoration-color: var(--explore); }
.msg .term.hot { background: var(--lamp-tint); }
body[data-mode="mentor"] .msg .term.hot { background: var(--panel-2); }
.chip { transition: border-color .15s, color .15s; }
.chip.hot:not(.lit):not(.explored) { border-style: solid; border-color: var(--lamp); color: var(--text); }
body[data-mode="mentor"] .chip.hot:not(.lit):not(.explored) { border-color: var(--explore); }
.chip.hot:is(.lit, .explored) { box-shadow: 0 0 0 2px var(--lamp-ring); }
.pill.explore { background: transparent; border: 1px solid var(--explore); color: var(--explore); }
/* Who answers here, beside the island's name (`lensSwitchEl`): the lens of the pane and the map. */
.titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.titlebar h2 { min-width: 0; }
.lens-switch { display: inline-flex; flex: none; gap: 2px; padding: 2px; margin-top: 2px; border: 1px solid var(--line); border-radius: 999px; }
.lens-switch .seg { background: transparent; border: 0; border-radius: 999px; padding: 4px 12px; font: 12.5px system-ui, sans-serif; color: var(--muted); cursor: pointer; white-space: nowrap; }
.lens-switch .seg:hover { color: var(--text); }
.lens-switch .seg.on { color: var(--on-land); font-weight: 600; }
.lens-switch .seg.judge.on { background: var(--lamp); }
.lens-switch .seg.mentor.on { background: var(--explore); }
.lens-switch .seg:focus-visible { outline: 2px solid var(--lamp); outline-offset: 1px; }
/* Before the first turn (`briefingEl`): the persona's mark, what happens, and the one button that starts it. */
.briefing { margin: auto; max-width: 400px; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px 0; text-align: center; font-family: var(--font-text); --accent: var(--lamp); }
.briefing.mentor { --accent: var(--explore); }
.briefing .glyph { width: 56px; height: 56px; }
.briefing .glyph .ring { fill: none; stroke: var(--accent); stroke-opacity: .25; }
.briefing .glyph .beam { fill: none; stroke: var(--accent); stroke-opacity: .5; stroke-dasharray: 2 4; }
.briefing .glyph .needle { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.briefing .glyph .fill { fill: var(--accent); }
.briefing h3 { margin: 0; font-size: 18px; font-weight: 500; line-height: 1.45; text-wrap: balance; }
.briefing .steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; width: 100%; text-align: left; }
.briefing .steps li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.briefing .steps .n { width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: 11.5px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.briefing .btn.primary { padding: 10px 22px; font-size: 15px; }
.briefing .btn.primary.mentor { background: var(--explore); border-color: var(--explore); color: var(--on-land); }
.briefing .sub { margin: 0; font-size: 12px; color: var(--muted); }
.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; }
.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: 1em; 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: .85em; background: var(--water); padding: 1px 4px; border-radius: 3px; }
.msg pre code { background: none; padding: 0; }
/* Reading: the conversation in one face at a reading size, persona lines capped at a comfortable measure, and each
   paragraph's first sentence bright while the rest steps back (`renderMarkdown(…, { lead: true })`). */
.log .msg:not(.system) { font-family: var(--font-text); font-size: 15px; line-height: 1.7; }
.msg:is(.judge, .mentor, .cartographer) { font-size: 16px; }
.msg:is(.judge, .mentor, .cartographer) :is(p, li, blockquote) { max-width: 64ch; }
.msg:is(.judge, .mentor, .cartographer) p:not(:last-child) { margin-bottom: 10px; }
.msg p.led .rest { color: var(--muted); }
:lang(zh) .log .msg:not(.system) { line-height: 1.9; letter-spacing: .02em; }
:lang(zh) .msg:is(.judge, .mentor, .cartographer) :is(p, li, blockquote) { max-width: 34em; }
.msg.you { align-self: flex-end; max-width: 88%; background: var(--panel-2); border-radius: 10px 10px 2px 10px; padding: 8px 12px; }
button.msg.system.board-line { display: block; width: 100%; background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
button.msg.system.board-line:hover { color: var(--text); }
.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; display: inline-flex; align-items: baseline; gap: 6px; }
/* a band of light sweeps across the words, left to right, while the turn is under way */
.thinking .words { background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 35%, var(--text) 50%, var(--muted) 65%, var(--muted) 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 2.2s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0% 0; } }
.thinking .dots { display: inline-flex; gap: 3px; }
.thinking .dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--lamp); opacity: .25; animation: dot 1.2s ease-in-out infinite; }
.thinking .dots i:nth-child(2) { animation-delay: .15s; }
.thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .thinking .words { animation: none; color: var(--muted); background: none; } .thinking .dots i { animation: none; opacity: .6; } }
.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; } }
.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: 15px/1.5 var(--font-text); 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; gap: 12px; font-size: 11px; color: var(--muted); }
.foot .meta .model.buy { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.foot .meta .model.buy:hover, .foot .meta .model.buy:focus-visible { color: var(--text); }
.foot .meta .model { font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.foot .meta .meta-r { display: flex; align-items: center; gap: 12px; min-width: 0; }
.read-aloud { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; }
.read-aloud:hover, .read-aloud[aria-pressed="true"] { color: var(--text-2); }
/* Listen: a pill above each voiced reply naming the voice; it fills with the persona's accent while it reads, and its
   bars move by transform in a box of fixed height, so nothing around it shifts (still under reduced motion). */
/* It sticks to the top of the log while its reply is in view, so a long reply scrolled to its end still shows it whole. */
.speak { position: sticky; top: -6px; z-index: 1; box-shadow: 0 2px 8px var(--shadow-soft); display: flex; width: fit-content; align-items: center; gap: 7px; margin: 0 0 8px; padding: 4px 12px 4px 10px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--panel-2); color: var(--text-2); font: 500 12px/1.3 var(--font-text); cursor: pointer; --accent: var(--lamp); }
.msg.mentor .speak, .now-playing[data-role="mentor"] { --accent: var(--explore); }
.speak:hover, .speak:focus-visible { color: var(--text); border-color: var(--accent); outline: none; }
.speak .ic, .now-playing .ic { flex: none; display: flex; align-items: center; justify-content: center; gap: 2px; width: 12px; height: 12px; }
.speak .ic i, .now-playing .ic i { width: 2px; height: 12px; border-radius: 1px; background: currentColor; transform: scaleY(.4); }
.speak[data-state="idle"] .ic i { display: none; }
.speak[data-state="idle"] .ic::before { content: ""; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }
.speak:not([data-state="idle"]) { background: var(--accent); border-color: var(--accent); color: var(--on-land); }
.speak[data-state="reading"] .ic i, .now-playing[data-state="reading"] .ic i { animation: speak-bar .9s ease-in-out infinite; }
.speak .ic i:nth-child(2), .now-playing .ic i:nth-child(2) { animation-delay: -.3s; }
.speak .ic i:nth-child(3), .now-playing .ic i:nth-child(3) { animation-delay: -.6s; }
@keyframes speak-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .speak .ic i, .now-playing .ic i { animation: none !important; transform: scaleY(.8); } }
/* Now reading: one bar at the map's bottom left, whatever is open: who, on which island (a click goes back to the
   reply), pause, stop. */
.now-playing { position: fixed; left: calc(var(--outline-w) + 16px); bottom: 16px; z-index: 3; display: grid; gap: 2px; width: min(440px, calc(100vw - 32px));
  padding: 4px 6px 6px; background: var(--panel); border: 1px solid var(--accent, var(--lamp)); border-radius: 16px; box-shadow: 0 8px 24px var(--shadow-soft); --accent: var(--lamp); }
.now-playing[hidden] { display: none; }
.now-playing button { background: none; border: 0; color: var(--text-2); cursor: pointer; font: inherit; }
.now-playing .np-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.now-playing .np-go { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 8px; border-radius: 10px; text-align: left; color: var(--accent); }
.now-playing .np-go:hover { background: var(--panel-2); }
.now-playing .np-text { display: grid; min-width: 0; }
.now-playing .np-who { font: 600 12px/1.3 var(--font-text); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-playing .np-where { font: 12px/1.3 var(--font-text); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-playing .np-controls { flex: none; display: flex; align-items: center; }
.now-playing .np-controls button { min-width: 30px; height: 30px; padding: 0 5px; border-radius: 8px; font: 12px var(--font-text); font-variant-numeric: tabular-nums; }
.now-playing .np-rate { font-weight: 600 !important; }
.now-playing .np-back, .now-playing .np-fwd { display: inline-flex; align-items: center; justify-content: center; }
.now-playing svg text { font-family: var(--font-text); }
.now-playing .np-stop { font-size: 18px !important; line-height: 1; }
.now-playing .np-controls button:hover { background: var(--panel-2); color: var(--text); }
.now-playing .np-progress { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.now-playing .np-track { flex: 1; height: 14px; display: flex; align-items: center; cursor: pointer; }
.now-playing .np-track { background: linear-gradient(var(--line), var(--line)) center / 100% 3px no-repeat; border-radius: 2px; }
.now-playing .np-fill { height: 3px; width: 0; background: var(--accent); border-radius: 2px; }
.now-playing .np-time { flex: none; font: 11px var(--font-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .now-playing { left: 50%; transform: translateX(-50%); top: 8px; bottom: auto; } }
.model-line { display: flex; align-items: center; gap: 8px; font-size: 11px; font-family: var(--font-mono); color: var(--muted); }
.model-line::before, .model-line::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }

/* ---- 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 { display: flex; justify-content: space-between; align-items: center; 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; }
.demo { margin: 6px 0 8px; padding: 8px; background: var(--water); border: 1px solid var(--line); border-radius: 8px; }
.demo .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }
.demo .bar .btn, .demo .bar .pin { white-space: nowrap; }
.demo > .bar > .cap { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-right: auto; padding: 0; background: none; border: 0; font-family: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.demo > .bar > .cap::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
.demo > .bar > .cap:hover { color: var(--text); }
.demo > .bar > .cap:disabled { cursor: default; color: var(--muted); }
.demo > .bar > .cap:disabled::before { display: none; }
.demo.folded > .bar > .cap::before { transform: rotate(-45deg); }
.demo.folded > :not(.bar) { display: none; }
.demo.folded .bar { margin-bottom: 0; }
.demo .bar .btn { padding: 3px 10px; font-size: 11px; }
.demo iframe { display: block; width: 100%; border: 0; border-radius: 6px; background: transparent; }
.demo .error { margin-bottom: 6px; }
/* Full screen: the box fills the window from the top layer (a popover), in place, so the frame never reloads. */
.demo.full { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 12px 16px; border: 0; border-radius: 0; background: var(--panel); color: var(--text); display: flex; flex-direction: column; overflow: hidden; }
.demo.full > iframe { flex: 1 1 auto; min-height: 0; height: auto !important; }
.demo.full > .codeblock { flex: 0 1 auto; overflow: auto; }
.demo.full > .out { flex: 0 0 auto; }
.demo .out { margin-top: 6px; max-height: 120px; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-2); border-top: 1px solid var(--line); padding-top: 6px; }
.demo .out .line[data-level="warn"], .demo .out .line[data-level="error"] { color: var(--reef); }
.demo .codeblock { margin: 0 0 6px; }
.demo .codeblock pre { max-height: 320px; overflow: auto; }
.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 .cap .acts { display: inline-flex; gap: 14px; }
.pin { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); background: none; border: 0; padding: 0; cursor: pointer; }
.pin:hover:not(:disabled) { color: var(--lamp); }
.pin:disabled { cursor: default; opacity: .8; }
.pin:focus-visible { outline: 1px solid var(--lamp); outline-offset: 2px; }
.demo .bar .pin { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-right: 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 { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 56px 12px 20px; border-bottom: 1px solid var(--line); }
.board .head .name { font-family: Georgia, serif; font-size: 16px; line-height: 26px; min-width: 0; }
.board .head .count { color: var(--muted); font-size: 12px; line-height: 26px; white-space: nowrap; flex-grow: 1; }
.board .head .adds { display: flex; gap: 10px; }
.board .head button { height: 26px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; flex: none; }
.board .head .close { position: absolute; top: 12px; right: 20px; 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 > .cap .acts button.move { padding: 2px 6px; min-width: 24px; }
.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 { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 0; display: flex; flex-direction: column; overflow: hidden; outline: none; }
/* the lamp ring is drawn over the editor's parts, so a part with its own background never breaks it */
.board .editor::after { content: ""; position: absolute; inset: 0; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--lamp-ring); pointer-events: none; }
.board .editor.full::after { content: 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[hidden], .board .editor .confirm[hidden], .board .editor .restored[hidden] { display: none; }
.board .editor .confirm { display: flex; gap: 8px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--reef-tint); font-size: 12px; color: var(--text); }
.board .editor .confirm > span { margin-right: auto; }
.board .editor .restored { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text-2); }
.board .editor .restored button { padding: 2px 8px; font-size: 11px; }
.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; background: var(--panel); }
.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 pre { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.board .live code { color: var(--code-fg); }
/* the demo editor: code and the running demo, stacked in a narrow board and side by side in a wide one */
.board .editor.demo { container-type: inline-size; }
.board .editor.demo .split { display: flex; flex-direction: column; }
.board .editor.demo .split > .live { border-bottom: 1px solid var(--line); }
.board .editor.demo .split > .preview { min-height: 120px; padding: 8px; }
.board .editor.demo .split > .preview .demo { margin: 0; }
@container (min-width: 820px) {
  .board .editor.demo .split { flex-direction: row; align-items: stretch; }
  .board .editor.demo .split > .live { flex: 1 1 50%; min-width: 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .board .editor.demo .split > .preview { flex: 1 1 50%; min-width: 0; }
}
.board .editor.full { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; color: var(--text); }
.board .editor.full .ebody { flex: 1 1 auto; min-height: 0; display: flex; }
.board .editor.full .split { flex: 1 1 auto; min-height: 0; }
.board .editor.full .split > .live { overflow: hidden; }
.board .editor.full .split > .live textarea { height: 100% !important; overflow: auto !important; }
.board .editor.full .split > .preview { overflow: auto; }
@container (max-width: 819px) { .board .editor.full .split > .live { flex: 0 0 45%; } .board .editor.full .split > .preview { flex: 1 1 auto; } }
/* a removed card's undo, until it runs out */
.board .undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--panel); border: 1px dashed var(--line); border-radius: 10px; color: var(--text-2); font-size: 12px; }
/* a card is one surface with one caption: the fence inside it drops its own box and its own name */
.board .card .demo, .board .card .diagram { background: none; border: 0; padding: 0; }
.board .card .demo > .bar > .cap, .board .card .diagram > .cap { display: none; }
.board .card .demo > .bar { justify-content: flex-end; }
.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, .board-hint 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; }
/* the first-card hint: a callout over the toggle, pointing down at it, until the reader opens a board once */
.board-toggle.beckon { border-color: var(--lamp); color: var(--lamp); animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--lamp) 22%, transparent), 0 8px 24px var(--shadow-soft); } }
.board-hint { position: fixed; right: 16px; bottom: 60px; z-index: 2; display: flex; align-items: flex-start; gap: 4px; max-width: 260px;
  background: var(--panel); border: 1px solid var(--lamp); border-radius: 10px; padding: 8px 6px 8px 12px; box-shadow: 0 8px 24px var(--shadow-soft); transition: right .18s ease; }
.board-hint::after { content: ""; position: absolute; right: 28px; bottom: -6px; width: 10px; height: 10px; background: var(--panel);
  border-right: 1px solid var(--lamp); border-bottom: 1px solid var(--lamp); transform: rotate(45deg); }
body.pane-open .board-hint { right: calc(var(--pane-w) + 16px); }
.board-hint .say { background: none; border: 0; padding: 0; color: var(--text); font: 13px/1.4 system-ui, sans-serif; text-align: left; cursor: pointer; }
.board-hint .say:hover { color: var(--lamp); }
.board-hint .dismiss { background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 4px; cursor: pointer; }
.board-hint .dismiss:hover { color: var(--text); }
body.empty .board-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .board-toggle.beckon { animation: 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); }
.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 .btn.push { margin-left: auto; }
.new-domain-card .btn.danger { border: 1px solid var(--reef); color: var(--reef); background: transparent; }
.new-domain-card .btn.danger:hover:not(:disabled) { background: var(--reef); color: var(--text); }
.new-domain-card .btn.danger:not(.ghost) { background: var(--reef); color: var(--text); }
.new-domain-card .btn.danger:not(.ghost):hover:not(:disabled) { filter: brightness(1.1); }
.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 .providers { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.hosted-card .provider { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 6px 8px; font-size: 13px; cursor: pointer; color: var(--text-2); }
.hosted-card .provider + .provider { border-left: 1px solid var(--line); }
.hosted-card .provider input { position: absolute; opacity: 0; pointer-events: none; }
.hosted-card .provider:has(input:checked) { background: var(--panel-2); color: var(--text); }
.hosted-card .provider:has(input:focus-visible) { outline: 1px solid var(--lamp); outline-offset: -1px; }
.hosted-card .provider .has-key { color: var(--lamp); }
.hosted-card .models { display: grid; gap: 4px; }
.hosted-card input.model-id { background: var(--water); border: 1px solid var(--line); border-radius: 6px; color: var(--text); padding: 6px 10px; font: 13px var(--font-mono); min-width: 0; margin-top: 2px; }
.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 .credit { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.hosted-card .credit p { margin: 0; }
.hosted-card .credit .left { font-family: Georgia, serif; font-size: 20px; line-height: 1.3; color: var(--text); }
.hosted-card .more { font-size: 12px; color: var(--muted); }
.hosted-card .more summary { cursor: pointer; width: fit-content; }
.hosted-card .more summary:hover { color: var(--text-2); }
.hosted-card .more[open] { display: grid; gap: 8px; }
.hosted-card .credit .thanks { font-size: 13px; color: var(--lamp); }
.hosted-card .btn.link { background: none; border: 0; padding: 0; color: var(--lamp); text-decoration: underline; cursor: pointer; font: inherit; font-size: 12px; }

/* ---- phones: one place at a time (places.js stamps body[data-place]) and a bar at the bottom to move between
   them: the islands' list (the outline, full screen), the map, the island's pane, its board ---- */
.places { display: none; }
@media (max-width: 720px) {
  :root { --pane-w: 100vw !important; --outline-w: 0px !important; --places-h: calc(56px + env(safe-area-inset-bottom)); }
  .places { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: var(--places-h); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; background: var(--panel); border-top: 1px solid var(--line); z-index: 6; }
  .places button { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; padding: 0 4px; background: none; border: 0; color: var(--muted); font: 11px system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .places button .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .places button[aria-current="true"] { color: var(--lamp); }
  .places button:disabled { opacity: .35; cursor: default; }
  /* Islands: the outline is the whole screen or not there. */
  .outline { display: none; width: 100vw; bottom: var(--places-h); border-right: 0; z-index: 5; font-size: 15px; transition: none; }
  body[data-place="islands"] .outline { display: flex; }
  .outline .oh { height: 52px; }
  .outline .ib, .outline .ft > :first-child { display: none; }
  .outline .list .row { height: 46px; gap: 12px; }
  .outline .list .row.islet { height: 40px; font-size: 14px; }
  .outline .list .row .tw { width: 32px; height: 32px; font-size: 12px; }
  .outline .list .row .n { font-size: 13px; }
  .outline .menu { left: 8px; right: 8px; }
  /* Map: the header is the breadcrumb and one line of cells that scrolls sideways. */
  .chrome { right: 0; padding: 10px 12px; }
  .chrome-stack { width: 100%; min-width: 0; pointer-events: none; }
  .chrome-stack > * { pointer-events: auto; max-width: 100%; }
  .breadcrumb { flex-wrap: wrap; font-size: 16px; row-gap: 2px; }
  .strip { width: 100%; flex-wrap: nowrap; gap: 14px; max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none; }
  .strip::-webkit-scrollbar { display: none; }
  .strip-item { flex: none; }
  .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; }
  .cta { left: 0; bottom: calc(var(--places-h) + 12px); padding: 0 12px; }
  body:not([data-place="map"]) .cta { display: none; }
  /* Island: the pane, above the bar. */
  .pane { height: calc(100dvh - var(--places-h)); bottom: auto; border-left: 0; z-index: 4; }
  body:not([data-place="island"]) .pane { display: none; }
  .pane .grip, .pane-width { display: none; }
  /* The head stays short so the conversation has the screen: no summary, and the landmarks are one line that scrolls. */
  .head { padding: 12px 16px 8px; gap: 6px; }
  .head .row, .pills, .sub, .sub .links { flex-wrap: wrap; }
  .head .row { justify-content: space-between; row-gap: 6px; }
  .head h2 { font-size: 19px; }
  .head .summary { display: none; }
  .head .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .head .chips::-webkit-scrollbar { display: none; }
  .head .chips .chip { flex: none; }
  /* The lamp lines that show which region the keyboard is in mean nothing under a thumb. */
  body[data-focus] #outline, body[data-focus] #pane { box-shadow: none; }
  .map-focus { display: none !important; }
  /* Board: the sheet takes the screen above the bar; the bar's tab stands in for the toggle and its hint. */
  .board, body.pane-open .board { top: 0; left: 0; right: 0; bottom: var(--places-h); border-radius: 0; z-index: 4; }
  .board-scrim, body.pane-open .board-scrim { left: 0; right: 0; }
  .board-toggle, .board-hint { display: none; }
  .board .column { padding: 12px 12px 40px; }
  .board .card > .cap { flex-wrap: wrap; row-gap: 4px; }
  .board .card > .cap .title { flex-basis: 100%; order: 3; }
  .keys, body.pane-open .keys { left: 0; right: 0; }
  .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; }
.outline .mi-row { position: relative; display: grid; }
.outline .mi-row .mi { padding-right: 36px; }
.outline .mi-row .edit { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity .12s ease; }
.outline .mi-row:hover .edit, .outline .mi-row:focus-within .edit { opacity: 1; }
.outline .mi-row .edit:hover { color: var(--lamp); }
@media (hover: none) { .outline .mi-row .edit { opacity: 1; } }

/* the pane head: the name has the whole width; the pills wrap under it */
.head .row { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
.head .row h2 { flex: 1 1 100%; text-wrap: balance; }
.head .pills { flex-wrap: wrap; }
.outline .menu .themes { display: grid; gap: 2px; }

/* ---- seas: the field that names one on the water, and the button under a selected name (seas.js) ---- */
.sea-edit { position: fixed; transform: translate(-50%, -50%); z-index: 3; width: min(300px, 80vw); box-sizing: border-box; background: var(--panel); color: var(--text);
  border: 1px solid var(--lamp); box-shadow: 0 0 0 3px var(--lamp-tint), 0 12px 32px var(--shadow); border-radius: 6px; padding: 6px 10px;
  font: 17px Georgia, 'Times New Roman', serif; letter-spacing: .14em; text-transform: uppercase; text-align: center; outline: none; }
.sea-edit::placeholder { text-transform: none; letter-spacing: 0; color: var(--muted); }
.sea-remove { position: fixed; transform: translateX(-50%); z-index: 1; background: var(--panel); border: 1px solid var(--line); color: var(--text-2);
  border-radius: 999px; font: 12px system-ui, sans-serif; padding: 3px 10px; cursor: pointer; }
.sea-remove:hover { border-color: var(--reef); color: var(--reef); }
.sea-remove[hidden] { display: none; }

/* Chinese: tracked small capitals scatter Han characters, a 10px glyph blurs, and synthetic italic slants them.
   Labels that track Latin are set close and a size up, and italic lines stand upright. */
:lang(zh) :is(.strip-label, .pill, .msg.system, .reef-title, .outline .menu .ml, .outline .sec, .pane-width, .diagram .cap, .plot .cap, .codeblock .cap, .choices .q, .cta-card .lbl, .keys-card .lbl, .keys-card .sec, .board .card > .cap .kind, .board .editor .ehead .kind, .about-card .lbl, .sketch-card .lbl, .sketch-card .sec, .new-domain-card .lbl, .hosted-card .lbl) { letter-spacing: .02em; }
:lang(zh) :is(.strip-label, .pill, .outline .sec, .pane-width, .cta-card .lbl, .keys-card .lbl, .keys-card .sec, .about-card .lbl, .sketch-card .lbl, .sketch-card .sec, .new-domain-card .lbl, .hosted-card .lbl) { font-size: 11px; }
:lang(zh) :is(.stopped, .progress, .thinking) { font-style: normal; }