/* Night sky (2026-10-27): a calm night — deep blue to violet at the horizon, stars that twinkle,
   now and then a shooting star — and panels of frosted glass. Always this theme. In the colony
   (.embed) the page is see-through: the colony's frame blurs the planet behind it. */
:root {
  --bg: #060a1a;
  --sky-top: #050816;
  --sky-mid: #0d1433;
  --sky-low: #24195a;
  --panel: rgba(28, 36, 78, 0.42);
  --panel-strong: rgba(18, 24, 56, 0.72);
  --line: rgba(190, 205, 255, 0.14);
  --text: #eef1ff;
  --dim: #a4accf;
  --blue: #9cc0ff;
  --violet: #b9a2ff;
  --green: #7fe3b5;
  --amber: #f7d27a;
  --red: #ff8fa3;
  --hl: rgba(156, 192, 255, 0.14);
  --code: rgba(4, 7, 20, 0.55);
  --glass: blur(16px) saturate(150%);
  --glow: 0 8px 32px rgba(3, 6, 22, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
* { box-sizing: border-box; }
html { min-height: 100%; background: radial-gradient(120% 80% at 50% 115%, var(--sky-low) 0%, var(--sky-mid) 45%, var(--sky-top) 80%) fixed, var(--bg); color-scheme: dark; }
body { margin: 0; background: transparent; color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html, body { color: var(--text); }
::selection { background: rgba(185, 162, 255, 0.35); }
.embed, .embed body { background: transparent; }
.embed .top { display: none; }

/* The stars: two layers of tiles at sizes that don't line up, each twinkling at its own pace. */
html:not(.embed)::before, html:not(.embed)::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: repeat; }
html:not(.embed)::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff, transparent 70%), radial-gradient(1px 1px at 87px 132px, rgba(255, 255, 255, 0.8), transparent 70%),
    radial-gradient(1.4px 1.4px at 151px 19px, #fff, transparent 70%), radial-gradient(1px 1px at 199px 177px, rgba(205, 220, 255, 0.85), transparent 70%),
    radial-gradient(1px 1px at 44px 203px, rgba(255, 255, 255, 0.7), transparent 70%), radial-gradient(1.2px 1.2px at 118px 74px, rgba(255, 240, 220, 0.9), transparent 70%),
    radial-gradient(1px 1px at 173px 118px, #fff, transparent 70%), radial-gradient(1.3px 1.3px at 9px 157px, rgba(220, 230, 255, 0.9), transparent 70%);
  background-size: 229px 233px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
html:not(.embed)::after {
  background-image:
    radial-gradient(1.8px 1.8px at 61px 97px, #fff, transparent 70%), radial-gradient(1.2px 1.2px at 263px 33px, rgba(200, 215, 255, 0.9), transparent 70%),
    radial-gradient(1px 1px at 331px 211px, rgba(255, 255, 255, 0.75), transparent 70%), radial-gradient(1.5px 1.5px at 173px 301px, rgba(255, 236, 214, 0.85), transparent 70%),
    radial-gradient(1px 1px at 397px 149px, #fff, transparent 70%);
  background-size: 419px 367px;
  animation: twinkle 11s ease-in-out 2s infinite alternate-reverse;
}
@keyframes twinkle { from { opacity: 0.55; } to { opacity: 1; } }

/* Shooting stars: a bright head and a fading tail, across the sky now and then. */
html:not(.embed) body::before, html:not(.embed) body::after {
  content: ''; position: fixed; z-index: -1; pointer-events: none; width: 160px; height: 2px; border-radius: 99px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(156, 192, 255, 0.35) 55%, #fff);
  filter: drop-shadow(0 0 6px rgba(190, 210, 255, 0.9));
}
html:not(.embed) body::before { top: 9%; left: 78%; animation: shoot 11s ease-in 3s infinite; }
html:not(.embed) body::after { top: 26%; left: 46%; width: 110px; animation: shoot 17s ease-in 9s infinite; }
@keyframes shoot {
  0% { transform: rotate(150deg) translateX(0); opacity: 0; }
  1% { opacity: 1; }
  7% { transform: rotate(150deg) translateX(520px); opacity: 0; }
  100% { transform: rotate(150deg) translateX(520px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.embed)::before, html:not(.embed)::after { animation: none; opacity: 0.7; }
  html:not(.embed) body::before, html:not(.embed) body::after { animation: none; display: none; }
}

.top { display: none; }
.top { position: sticky; top: 0; z-index: 6; display: flex; gap: 12px; align-items: baseline; padding: 14px 16px; border-bottom: 1px solid var(--line); background: rgba(6, 10, 26, 0.45); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
.brand { font-weight: 650; text-decoration: none; letter-spacing: 0.01em; background: linear-gradient(90deg, #fff, var(--blue) 60%, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.where { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main { max-width: 860px; margin: 0 auto; padding: 14px 16px 40px; }
.embed main { padding: 10px 12px 24px; }
.msg { padding: 40px 16px; color: var(--dim); }
.dim { color: var(--dim); }
h1 { font-size: 18px; margin: 4px 0 2px; font-weight: 650; letter-spacing: 0.01em; }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin: 18px 0 6px; font-weight: 600; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 10px 0; box-shadow: var(--glow); }
/* Frosted glass: whatever is behind shows through, blurred. */
.card, .summary, .chat .msg, .lg-you, .talk, .approve { backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
.card .head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.card .file { color: var(--dim); font-size: 12px; word-break: break-all; }
button, .btn { font: inherit; color: var(--text); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease; }
button:hover { border-color: rgba(156, 192, 255, 0.6); background: rgba(156, 192, 255, 0.08); box-shadow: 0 0 18px rgba(156, 192, 255, 0.18); }
button.primary { background: linear-gradient(135deg, var(--blue), var(--violet)); color: #0a0f2a; border-color: transparent; font-weight: 650; box-shadow: 0 4px 18px rgba(156, 160, 255, 0.3); }
button.primary:hover { box-shadow: 0 4px 26px rgba(170, 170, 255, 0.5); }
button.back { border: none; padding: 2px 0; color: var(--blue); }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 9px; padding: 7px 8px; }
.row:hover { background: var(--hl); border-color: var(--line); }
.row { transition: background 150ms ease, border-color 150ms ease; }
.row .note { color: var(--dim); font-size: 12px; }
.pip { width: 9px; height: 9px; border-radius: 50%; background: var(--dim); }
.pip.done { background: var(--green); }
.pip.in-progress { background: var(--amber); }
.pip.ready { background: var(--blue); }
.pip.blocked { background: var(--red); }
.pill { font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.pill.ready { color: var(--blue); border-color: var(--blue); }
.pill.done { color: var(--green); border-color: var(--green); }
.pill.blocked { color: var(--red); border-color: var(--red); }
.counts { color: var(--dim); font-size: 12px; }
ul.plain { margin: 4px 0; padding-left: 18px; }
pre { background: var(--code); border: 1px solid var(--line); border-radius: 9px; padding: 10px; overflow-x: auto; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; }
code { background: var(--code); padding: 0 4px; border-radius: 4px; font-size: 12.5px; }
pre code { background: none; padding: 0; }
.approve { border: 1px solid var(--blue); background: var(--hl); border-radius: 12px; padding: 12px; margin: 12px 0; }
.approve p { margin: 0 0 8px; }
.commands { border-color: var(--green); }
.err { color: var(--red); }
.md { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 4px; }
.md h1, .md h2, .md h3, .md h4 { text-transform: none; letter-spacing: 0; color: var(--text); }
.md h1 { font-size: 17px; } .md h2 { font-size: 15px; } .md h3 { font-size: 14px; }
.md table { border-collapse: collapse; width: 100%; font-size: 13px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.md blockquote { margin: 8px 0; padding: 4px 10px; border-left: 3px solid var(--line); color: var(--dim); }
.md .hl { background: var(--hl); outline: 1px solid var(--blue); border-radius: 6px; }
details summary { cursor: pointer; color: var(--blue); }
@media (max-width: 520px) { main { padding: 10px 12px 32px; } }
.head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
input.wide, textarea.wide { flex: 1; min-width: min(220px, 100%); width: 100%; }
input, select, textarea { font: inherit; color: var(--text); background: var(--code); border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; }
label { display: block; margin: 10px 0; color: var(--dim); font-size: 12px; }
label > input, label > select { display: block; margin-top: 4px; color: var(--text); font-size: 14px; }
.chat { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.chat .msg { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: var(--panel); }
.chat .msg.user { border-color: var(--blue); }
.chat .who { color: var(--dim); font-size: 11px; margin-bottom: 2px; }
.chat .said { white-space: pre-wrap; word-break: break-word; }
.chat .tool { color: var(--dim); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 10px; word-break: break-all; }
/* Reply / Logs on a conversation or a task: a bar along the bottom of the window — of the colony's panel when framed there */
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; display: flex; justify-content: center; gap: 4px; margin: 0; padding: 0 16px; background: rgba(6, 10, 26, 0.55); border-top: 1px solid var(--line); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
.embed .tabs { background: rgba(10, 14, 36, 0.72); }
.tabs button { border: none; border-top: 2px solid transparent; border-radius: 0; padding: 9px 16px 10px; color: var(--dim); }
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--text); border-top-color: var(--blue); font-weight: 600; }
main:has(.tabs), .embed main:has(.tabs) { padding-bottom: 64px; }
pre.log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; }
.live { border: 1px solid var(--amber); border-radius: 12px; padding: 10px 12px; margin: 12px 0; }
.steps { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; }
.step { font-size: 11px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
.step.past { color: var(--green); border-color: var(--green); }
.step.now { color: var(--amber); border-color: var(--amber); font-weight: 600; }
a { color: var(--blue); }
.reply textarea { margin: 4px 0; }
label.check { display: inline-flex; gap: 6px; align-items: center; margin: 0; font-size: 12px; }
.hosted-bar { display: flex; gap: 10px; align-items: center; margin-left: auto; color: var(--dim); font-size: 12px; }
.hosted-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); display: inline-block; }
.hosted-bar .dot.on { background: var(--green); }
.signin { max-width: 460px; margin: 60px auto; padding: 0 16px; }
.summary { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 12px 0; background: var(--panel); }
.summary.busy { border-color: var(--amber); }
.summary.needs { border-color: var(--blue); }
.summary .doing { font-size: 15px; margin: 6px 0; }
.summary .ask { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.summary .ask p { margin: 4px 0 8px; }
.summary .suggest { text-align: left; white-space: normal; }
/* "Expand full message": Claude's whole latest turn, under what it's asking */
.full-turn { margin-top: 10px; }
.full-turn > summary { display: inline-block; list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 9px; padding: 5px 10px; color: var(--blue); }
.full-turn > summary::-webkit-details-marker { display: none; }
.full-turn > summary:hover { border-color: var(--blue); }
.full-turn > summary .opened, .full-turn[open] > summary .closed { display: none; }
.full-turn[open] > summary .opened { display: inline; }
.full-turn .chat { max-height: 60vh; overflow-y: auto; }
.summary .suggest:hover { background: var(--hl); }
.live .summary { margin: 8px 0; }
/* Nothing in a box grows past it: a select is as wide as its longest option, a path doesn't break by itself. */
select { max-width: 100%; text-overflow: ellipsis; }
.inline > * { min-width: 0; max-width: 100%; }
.reply, .summary { max-width: 100%; overflow-wrap: anywhere; }
.reply textarea { display: block; width: 100%; resize: vertical; }
.reply select { flex: 1 1 160px; }
.reply .perm-note { margin: 2px 0 6px; font-size: 12px; }
label.check { display: flex; align-items: flex-start; gap: 6px; }
label.check input { flex: none; margin-top: 2px; }
.summary .todo li { margin: 2px 0; }
.summary .ask > .dim { font-size: 12px; margin-top: 6px; }
.reply .busy-note { margin: 0 0 6px; color: var(--amber); font-size: 13px; }
.reply .busy-note strong { color: var(--amber); }

/* The Logs tab: a session's steps, the way the Claude Code app shows them (src/web/steps.mjs). */
.lg-src { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }
.lg-src button { padding: 3px 10px; font-size: 12px; border-radius: 999px; color: var(--dim); }
.lg-src button.on { color: var(--text); border-color: var(--blue); }
.lg-state.working, .lg-state.permission { color: var(--amber); }
.lg { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; min-width: 0; }
.lg-said { min-width: 0; word-break: break-word; line-height: 1.55; }
.lg-said > :first-child { margin-top: 0; }
.lg-said > :last-child { margin-bottom: 0; }
.lg-said h1, .lg-said h2, .lg-said h3, .lg-said h4 { font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text); margin: 10px 0 4px; }
.lg-said table { border-collapse: collapse; font-size: 13px; display: block; overflow-x: auto; }
.lg-said th, .lg-said td { border: 1px solid var(--line); padding: 3px 6px; text-align: left; vertical-align: top; }
.lg-said .at { color: var(--dim); font-size: 11px; margin-top: 2px; }
.lg-you { border: 1px solid var(--line); background: var(--panel); border-radius: 9px; padding: 6px 10px; white-space: pre-wrap; word-break: break-word; }
.lg-you .who { color: var(--dim); font-size: 11px; margin-bottom: 2px; }
.lg-note { color: var(--dim); font-size: 12px; font-style: italic; }
.lg-step { min-width: 0; }
.lg-step > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 0; color: var(--text); }
.lg-step > summary::-webkit-details-marker { display: none; }
.lg-step > summary::after { content: '▸'; color: var(--dim); font-size: 11px; margin-left: auto; flex: none; transition: transform 0.12s; }
.lg-step[open] > summary::after { transform: rotate(90deg); }
.lg-step .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); flex: none; }
.lg-step.error .dot { background: var(--red); }
.lg-step.running .dot, .lg-step.asking .dot { background: var(--amber); animation: lg-pulse 1.2s ease-in-out infinite; }
.lg-step.stopped .dot { background: var(--dim); }
.lg-step .tool { font-weight: 600; flex: none; }
.lg-step .what { color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-step .note { color: var(--dim); font-size: 12px; flex: none; }
/* In black whatever the theme, like a terminal. */
.lg-io { margin: 4px 0 6px 15px; background: #0b0b0d; color: #e4e4e7; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 9px; overflow: hidden; min-width: 0; }
.lg-io-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
.lg-io-row + .lg-io-row { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.lg-io-label { padding: 9px 0 0 10px; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.05em; color: #8b8b93; }
.lg-io pre { margin: 0; padding: 7px 10px 7px 0; background: none; border: none; border-radius: 0; color: inherit; max-height: 320px; overflow: auto; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.lg-io .file { color: #8b8b93; }
.lg-io .add { color: #7ee2a8; }
.lg-io .del { color: #ff9090; }
.lg-io-row.err pre { color: #ff9c9c; }
.lg-io-row.pending pre { color: #8b8b93; font-style: italic; }
pre.log { background: #0b0b0d; color: #e4e4e7; border-color: rgba(255, 255, 255, 0.1); }
@keyframes lg-pulse { 50% { opacity: 0.35; } }

/* On Firebase: a project's terminals (app.js renderTerminals) — read-only, like a terminal window. */
details.terminal { margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
details.terminal > summary { display: flex; gap: 8px; align-items: center; padding: 9px 12px; color: var(--text); list-style: none; }
details.terminal > summary::-webkit-details-marker { display: none; }
details.terminal > summary .note { color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
pre.term { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: #05070d; color: #c9d1e3; max-height: 420px; overflow: auto; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
pre.term .cmd { color: #7fd39a; }
pre.term .out { color: #c9d1e3; }
pre.term .err { color: #ff7b7b; }
pre.term .said { color: #8b93a8; }
pre.term .you { color: #7fb0ff; }
pre.term .wait { color: #f0c060; }
.colony-link { color: var(--blue); font-size: 13px; text-decoration: none; }
.embed .colony-link { display: none; }
/* A project's own bot (PLAN.md §17.4): what it found, site by site; the file it keeps. */
.sources { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; }
.row.source > .note { text-align: right; white-space: nowrap; }
.find p { margin: 6px 0; }
.find .head strong { overflow-wrap: anywhere; }
.badge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.badge.strong { color: var(--green); border-color: var(--green); }
.badge.new { color: var(--blue); border-color: var(--blue); margin-right: 6px; }
.md.doc { border-top: none; margin-top: 8px; }
.busy { color: var(--amber); }

/* A bot's file beside its chat (PLAN.md §17.4): the PDF or the live preview on the left. */
.side-pane { position: fixed; top: 0; bottom: 0; left: 0; width: 50%; z-index: 4; border-right: 1px solid var(--line); background: var(--panel-strong); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); }
.side-pane > iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.side-pane > .card, .side-pane > .side-note { margin: 16px; }
.side-note { color: var(--dim); }
/* Mora (PLAN.md D17): your ideas on the left, scrolling on their own. */
.side-pane > .side-scroll { height: 100%; overflow: auto; padding: 16px; box-sizing: border-box; }
.group { margin: 14px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.row.card.open { outline: 2px solid var(--blue); }
/* Talk (PLAN.md D19): the colony's 🎤 window — the chooser, then a bar while you talk. */
.talk { display: flex; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: var(--glow); }
/* In the colony it fills its frame exactly — nothing see-through under it — and the frame blurs the planet behind. */
.embed main:has(.talk) { padding: 0; max-width: none; height: 100vh; }
.embed .talk { height: 100vh; overflow: hidden; background: linear-gradient(160deg, rgba(40, 48, 110, 0.38), rgba(14, 18, 48, 0.5)); }
.talk > .inline:last-child { margin-top: auto; padding-top: 10px; }
.talk .head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.talk .head h1 { margin: 0; }
.talk-choice { width: 100%; margin: 6px 0; }
.talk-projects { flex: 1 1 auto; min-height: 0; max-height: 50vh; overflow: auto; }
.embed .talk-projects { max-height: none; }
.talk select { max-width: 240px; }
.talk-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.talk-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.talk-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); flex: none; }
.talk-dot.listening { background: var(--red); box-shadow: 0 0 12px var(--red); animation: talk-pulse 1.2s infinite; }
.talk-dot.speaking { background: var(--green); box-shadow: 0 0 12px var(--green); }
.talk-dot.thinking, .talk-dot.sending { background: var(--amber); }
@keyframes talk-pulse { 50% { opacity: 0.3; } }
.talk-heard, .talk-reply { margin: 6px 0 0; font-size: 13px; }
.talk-reply { color: var(--dim); }
html.side main { margin-left: 50%; max-width: none; }
html.side .top { margin-left: 50%; }
/* A bot's Word file, as Word shows it: an A4 page on a grey desk (bot-word.mjs). */
.word-desk { height: 100%; overflow: auto; box-sizing: border-box; padding: 24px 16px; background: #e6e7eb; }
.word-page { box-sizing: border-box; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 16mm; background: #fff; color: #000; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18), 0 8px 28px rgba(0, 0, 0, 0.14); font: 10.5pt/1.35 Arial, Helvetica, sans-serif; text-align: left; letter-spacing: normal; }
.word-page h1, .word-page h2, .word-page h3, .word-page p { color: #000; font-family: inherit; letter-spacing: normal; }
.word-page h1 { font-size: 18pt; font-weight: 700; margin: 0 0 4pt; }
.word-page h2 { font-size: 12pt; font-weight: 700; margin: 12pt 0 4pt; padding: 0; border-bottom: 1px solid #000; text-transform: uppercase; }
.word-page h3 { font-size: 10.5pt; font-weight: 700; margin: 8pt 0 2pt; }
.word-page p { margin: 2pt 0; }
.word-page p.li { position: relative; margin: 1pt 0 1pt 16pt; }
.word-page p.li.lvl1 { margin-left: 32pt; }
.word-page p.li.lvl2 { margin-left: 48pt; }
.word-page p.li::before { content: '•'; position: absolute; left: -11pt; }
.word-page p.li.ol::before { content: attr(data-n); left: -16pt; }
.word-page a { color: inherit; text-decoration: none; }
/* In your Word template's styling: every paragraph starts plain; its own formatting comes from the template (set by app.js). */
.word-page.styled { max-width: 100%; font: 11pt Arial, Helvetica, sans-serif; }
.word-page.styled h1, .word-page.styled h2, .word-page.styled h3, .word-page.styled p { margin: 0; padding: 0; border: 0; font-size: 11pt; font-weight: 400; text-transform: none; }
.word-page.styled p.li { margin-left: 0; padding-left: 14pt; }
.word-page .row { display: flex; justify-content: space-between; align-items: baseline; gap: 12pt; }
.word-page .row > p { flex: none; }
.word-page.styled p.li::before { content: attr(data-n); left: 0; }
.word-page.styled p.li.lvl1 { margin-left: 18pt !important; }
.word-page.styled p.li.lvl2 { margin-left: 36pt !important; }
.word-page a:hover { text-decoration: underline; }
.preview-frame { display: block; width: 100%; height: 70vh; margin: 10px 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
@media (max-width: 700px) { .side-pane { position: static; width: auto; height: 60vh; } html.side main, html.side .top { margin-left: 0; } }
button.ghost-btn { border-color: transparent; color: var(--dim); }
button.ghost-btn:hover { color: var(--text); border-color: var(--line); }

/* Thin, quiet scrollbars. */
* { scrollbar-width: thin; scrollbar-color: rgba(190, 205, 255, 0.25) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(190, 205, 255, 0.22); border-radius: 99px; }
::-webkit-scrollbar-track { background: transparent; }