/* Classic layout: CRT terminal page. Tokens, shared components and the desk live in their own files. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  background-image: radial-gradient(ellipse 90% 60% at 50% 0%, var(--bg-raise), var(--bg) 70%);
  background-attachment: fixed;
  color: var(--fg);
  font: 21px/1.3 var(--display);
  text-shadow: 0 0 5px var(--glow);
  padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}
/* scanlines + tube vignette */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }
body::before {
  z-index: 60;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, .18) 2px 3px);
}
body::after {
  z-index: 61;
  background: radial-gradient(ellipse at center, transparent 60%, var(--shade) 100%);
  animation: flicker 7s steps(1) infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1; } 41% { opacity: .88; } 42% { opacity: 1; } 77% { opacity: .93; } 78% { opacity: 1; } }
:root[data-crt="off"] body { text-shadow: none; background-image: none; }
:root[data-crt="off"] body::before, :root[data-crt="off"] body::after { display: none; }
:root[data-crt="off"] .menubar, :root[data-crt="off"] .statusbar, :root[data-crt="off"] .cursor { box-shadow: none; }

::selection { background: var(--fg); color: var(--bg); text-shadow: none; }
a { color: var(--hot); text-underline-offset: 3px; }
a:hover { background: var(--fg); color: var(--bg); text-shadow: none; text-decoration: none; }
:focus-visible { outline: 1px dashed var(--hot); outline-offset: 2px; }
h1:focus { outline: none; }
b, strong { color: var(--hot); font-weight: inherit; }
p { margin: 0; }
kbd { font: inherit; }
code { font-family: var(--body); font-size: .86em; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 90; background: var(--fg); color: var(--bg); padding: 4px 10px; }
.skip:focus { top: 8px; }
.cursor {
  display: inline-block; width: .55em; height: .95em; margin-left: .15em;
  vertical-align: -.12em; background: var(--fg); box-shadow: 0 0 8px var(--glow);
  animation: blink 1.05s steps(1) infinite;
}
.loading { color: var(--dim); }

/* ---------- Logo (inline SVG, coloured by the phosphor tokens) ---------- */
.logo { display: block; width: auto; overflow: visible; }
.logo .lg-r, .logo .lg-rubix, .logo .lg-hot { fill: currentColor; }
.logo .lg-dim { fill: currentColor; opacity: .28; }
.logo .lg-labs { fill: currentColor; opacity: .7; }
.ascii { font-family: var(--block); line-height: 1; white-space: pre; display: inline-block; }
.ascii .a-r { color: var(--fg); }
.ascii .a-dim { color: var(--faint); }
.ascii .a-hot { color: var(--hot); }
#boot-mark { font-size: 15px; margin: 0 0 22px; }

/* ---------- Boot screen ---------- */
.boot {
  display: none; position: fixed; inset: 0; z-index: 80; background: var(--bg);
  padding: calc(24px + env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) 24px; overflow: hidden;
}
.booting .boot { display: block; }
.booting body { overflow: hidden; }
.boot pre { margin: 0; font: inherit; white-space: pre-wrap; }
#boot-log::after { content: ""; display: inline-block; width: .55em; height: 1em; margin-left: .1em; vertical-align: -.15em; background: var(--fg); box-shadow: 0 0 8px var(--glow); animation: blink 1.05s steps(1) infinite; }
.boot-skip { position: absolute; right: clamp(16px, 4vw, 40px); bottom: 24px; color: var(--dim); }
.boot.off { animation: power-on .35s ease-out forwards; }
@keyframes power-on {
  0% { opacity: 1; transform: scaleY(1); }
  60% { opacity: 1; transform: scaleY(.004); filter: brightness(3); }
  100% { opacity: 0; transform: scaleY(.004); }
}

/* ---------- Menu bar (inverse video) ---------- */
.menubar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--fg); color: var(--bg); text-shadow: none; box-shadow: 0 0 18px var(--glow);
}
.menubar-in {
  max-width: var(--wide); margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px);
  display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; min-height: 42px;
}
.menubar a, .menubar button { color: var(--bg); text-decoration: none; }
.menubar a:hover { background: var(--bg); color: var(--fg); }
.brand { display: flex; align-items: center; height: 42px; padding: 0 6px; margin-left: -6px; color: var(--bg); }
.brand .logo { height: 21px; }
.menu { display: inline-flex; flex-wrap: nowrap; align-items: stretch; }
.menu a { padding: 0 4px; }
.menu kbd { margin-right: .35em; opacity: .7; }
.menu kbd::before { content: "["; }
.menu kbd::after { content: "]"; }
.menubar-tools { display: flex; align-items: center; gap: 14px; }
.console-btn, .phosphor button {
  font: inherit; font-size: 19px; cursor: pointer; border: 0; padding: 0 6px; background: transparent;
}
.console-btn { outline: 1px solid var(--bg); outline-offset: -1px; }
.console-btn:hover, .console-open .console-btn { background: var(--bg); color: var(--fg) !important; }
.phosphor { display: flex; gap: 2px; }
.phosphor button[aria-pressed="true"] { background: var(--bg); color: var(--fg); }
.phosphor button:hover { outline: 1px solid var(--bg); }

/* ---------- Console (drops down under the menu bar) ---------- */
.console {
  position: fixed; z-index: 45; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 42px);
  padding: 0 clamp(16px, 4vw, 40px);
  animation: drop .16s ease-out;
}
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } }
.console .term { max-width: var(--wide); margin: 0 auto; box-shadow: 0 18px 40px var(--shade), 0 0 24px var(--glow); }
.term { border: 3px double var(--fg); background: var(--bg-raise); min-width: 0; }
.term-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 2ch;
  background: var(--fg); color: var(--bg); text-shadow: none; padding: 0 10px; font-size: 19px;
}
.term-close { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; padding: 0 0 0 1ch; }
.term-close:hover { background: var(--bg); color: var(--fg); }
.term-log {
  padding: 10px 12px 0; height: min(42vh, 22em); overflow-y: auto; overflow-wrap: anywhere;
  white-space: pre-wrap; scrollbar-color: var(--faint) transparent;
}
.term-log .ln { min-height: 1.3em; }
.term-log .echo { color: var(--hot); }
.term-log .echo .ps1, .term-log .mut, .term-log .mut * { color: var(--dim); }
.term-log .err { color: var(--hot); }
.term-line { display: flex; gap: 1ch; padding: 4px 12px 12px; align-items: baseline; }
.term-line .ps1 { white-space: nowrap; color: var(--dim); }
.term-line input {
  flex: 1; min-width: 0; font: inherit; color: var(--hot); text-shadow: inherit;
  background: transparent; border: 0; padding: 0; outline: none; caret-color: var(--fg);
}
.term-line input::placeholder { color: var(--faint); }

/* ---------- Screen ---------- */
.screen {
  flex: 1 0 auto; width: 100%; max-width: var(--wide); margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 40px); padding-block: 36px 72px; outline: none;
}
.page { display: grid; gap: 56px; min-width: 0; }
.page > * { min-width: 0; }

.page-head { display: grid; gap: 10px; max-width: 78ch; }
.crumbs { color: var(--dim); font-size: 19px; overflow-wrap: anywhere; }
.crumbs a { color: var(--dim); }
.crumbs a:hover { color: var(--bg); }
.page-head h1 {
  margin: 0; font-weight: normal; font-size: clamp(44px, 7vw, 68px); line-height: .95;
  color: var(--hot); text-wrap: balance; overflow-wrap: anywhere;
  text-shadow: 0 0 8px var(--glow), 0 0 26px var(--glow);
}
:root[data-crt="off"] .page-head h1 { text-shadow: none; }
.lead {
  font-family: var(--body); font-size: 16.5px; line-height: 1.65; color: var(--text);
  max-width: 64ch; text-shadow: none;
}
.eyebrow { display: flex; align-items: center; gap: 1ch; color: var(--dim); flex-wrap: wrap; }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 2.2ch; color: var(--dim); }
.hash { color: var(--dim); }

.cmd { margin: 0 0 16px; font-size: 23px; font-weight: normal; color: var(--hot); overflow-wrap: anywhere; }
.ps1 { color: var(--dim); }
.out { padding-left: 2ch; display: grid; gap: 14px; min-width: 0; align-content: start; }
.prose-line { font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--text); text-shadow: none; max-width: 66ch; }
.more { justify-self: start; font-size: 20px; }

/* ---------- Home ---------- */
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--fg); box-shadow: 0 0 10px var(--glow); animation: pulse 1.8s ease-in-out infinite; flex: none; }
.hero { position: relative; isolation: isolate; padding-block: clamp(36px, 7vw, 96px) clamp(56px, 7vw, 88px); }
.hero-field {
  position: absolute; z-index: -1; top: -36px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}
.hero-field canvas { display: block; width: 100%; height: 100%; }
.hero-copy { position: relative; display: grid; gap: 22px; max-width: 780px; pointer-events: none; }
.hero-copy a, .hero-copy button { pointer-events: auto; }
.hero .lead { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px clamp(28px, 4vw, 56px); align-items: center; }
/* neofetch sits beside the intro, on a dark card so the field behind it stays quiet */
.hero-fetch { grid-template-columns: auto minmax(190px, 1fr); border: 1px solid var(--faint); background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 18px 20px; gap: 16px 22px; }
.hero-fetch .cube { font-size: clamp(8px, .66vw, 9.5px); }
.hero-fetch .dim { color: var(--dim); }
.hero-fetch .fetch-title { font-size: 20px; }
.hero-fetch .kv div { grid-template-columns: 8.5ch minmax(0, 1fr); }
.hero-fetch .kv dt { font-size: 17px; }
.hero-fetch .fetch-rule { white-space: nowrap; overflow: hidden; }
.hero-fetch .kv dd { font-family: var(--body); font-size: 12.5px; text-shadow: none; align-self: center; white-space: nowrap; }
.hero-fetch .swatches { margin-top: 10px; }
.hero-logo { margin: 0; line-height: 0; color: var(--fg); }
.logo-hero { height: clamp(62px, 12vw, 150px); max-width: 100%; filter: drop-shadow(0 0 16px var(--glow)); }
.logo-hero .lg-dim { fill: var(--faint); opacity: 1; }
.logo-hero .lg-labs { fill: var(--dim); opacity: 1; }
.logo-hero .lg-hot { fill: var(--hot); animation: blink 1.05s steps(1) infinite; }
:root[data-crt="off"] .logo-hero { filter: none; }
.tagline { font-size: 25px; text-wrap: balance; }
.tagline .sep { color: var(--dim); }

/* featured work */
.work { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--faint); }
.work a {
  display: grid; grid-template-columns: minmax(14ch, 1fr) minmax(0, 2.4fr) auto 2ch; gap: 6px 28px; align-items: baseline;
  padding: 16px 4px; border-bottom: 1px dashed var(--faint); text-decoration: none; color: var(--text);
}
.work a:hover { background: var(--bg-raise); color: var(--text); }
.w-name { font-size: 26px; color: var(--hot); }
.w-sum { font-family: var(--body); font-size: 14px; line-height: 1.55; text-shadow: none; opacity: .85; }
.w-meta { color: var(--dim); display: inline-flex; gap: 1ch; align-items: center; white-space: nowrap; }
.w-go { color: var(--dim); transition: transform .2s, color .2s; text-align: right; }
.work a:hover .w-go { transform: translateX(4px); color: var(--fg); }

.fetch {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 20px clamp(20px, 5vw, 56px); align-items: center;
  border-block: 1px dashed var(--faint); padding-block: 18px;
}
.cube-wrap { display: grid; justify-items: center; gap: 4px; min-width: 0; }
.cube {
  margin: 0; font-family: var(--display); font-size: clamp(11px, 3.2vw, 17px); line-height: 1;
  cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-y;
  max-width: 100%; overflow: hidden;
}
.cube:active { cursor: grabbing; }
.hint { color: var(--dim); font-size: 18px; }
.fetch-title { font-size: 23px; }
.fetch-rule { color: var(--dim); }
.kv { margin: 4px 0 0; display: grid; gap: 1px; }
.kv div { display: grid; grid-template-columns: 10ch minmax(0, 1fr); gap: 1ch; }
.kv dt { color: var(--hot); }
.kv dt::after { content: ":"; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.swatches { display: flex; margin-top: 14px; }
.swatches span { width: 3ch; height: 1em; background: var(--fg); box-shadow: 0 0 8px var(--glow); }
.swatches span:nth-child(1) { opacity: .12; }
.swatches span:nth-child(2) { opacity: .25; }
.swatches span:nth-child(3) { opacity: .42; }
.swatches span:nth-child(4) { opacity: .6; }
.swatches span:nth-child(5) { opacity: .8; }
.swatches span:nth-child(6) { background: var(--hot); }

.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--faint); }
.stages li { padding: 14px 16px 16px; display: grid; gap: 4px; align-content: start; position: relative; }
.stages li + li { border-left: 1px solid var(--faint); }
.stages li + li::before { content: ">"; position: absolute; left: -.42em; top: 14px; background: var(--bg); color: var(--dim); }
.stage-n { color: var(--dim); }
.stages b { font-size: 24px; }
.stages p { font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--text); text-shadow: none; }

.contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.contact li { display: grid; grid-template-columns: 10ch minmax(0, 1fr) auto; gap: 1ch; align-items: baseline; }
.contact .k { color: var(--dim); }
.contact .v { overflow-wrap: anywhere; }

/* ---------- Windows (double-line DOS frames) ---------- */
.win { position: relative; border: 3px double var(--dim); padding: 18px 14px 14px; min-width: 0; }
.win-title { position: absolute; top: -.72em; left: 10px; padding: 0 6px; background: var(--bg); color: var(--hot); }
.win-title::before { content: "[ "; color: var(--dim); }
.win-title::after { content: " ]"; color: var(--dim); }
.win ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.win ul li::before { content: "* "; color: var(--dim); }
.win-body { font-family: var(--body); font-size: 14.5px; line-height: 1.6; color: var(--text); text-shadow: none; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px 18px; }

/* ---------- Filters, search, tables ---------- */
.filter-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters button {
  font: inherit; font-size: 19px; cursor: pointer; padding: 0 10px; background: transparent;
  border: 1px solid var(--faint); color: var(--fg); text-shadow: inherit;
}
.filters button:hover { border-color: var(--fg); }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); }
.select { display: inline-flex; gap: 1ch; align-items: center; color: var(--dim); }
.select select {
  font: inherit; font-size: 19px; color: var(--fg); background: var(--bg-raise);
  border: 1px solid var(--faint); padding: 0 6px; max-width: 16em;
}
.search { display: flex; align-items: baseline; gap: 1ch; border: 1px solid var(--faint); padding: 4px 12px; max-width: 640px; background: var(--bg-raise); }
.search:focus-within { border-color: var(--fg); }
.search input {
  flex: 1; min-width: 0; font: inherit; font-size: 22px; color: var(--hot); background: transparent;
  border: 0; outline: none; caret-color: var(--fg); text-shadow: inherit;
}
.search input::placeholder { color: var(--faint); }
.total { color: var(--dim); }
.table-scroll { overflow-x: auto; }

.ls { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.ls th { text-align: left; font-weight: normal; color: var(--dim); border-bottom: 1px solid var(--faint); padding: 0 1.6ch 4px 0; }
.ls td { padding: 6px 1.6ch 6px 0; vertical-align: baseline; border-bottom: 1px dashed var(--faint); }
.ls td:last-child, .ls th:last-child { padding-right: 0; }
.ls .perm, .ls .date { color: var(--dim); white-space: nowrap; }
.ls .st, .ls .name { white-space: nowrap; }
.ls .name a { text-decoration: none; color: var(--dim); }
.ls .name a b { color: var(--hot); text-decoration: underline dotted; text-underline-offset: 3px; }
.ls .name a:hover, .ls .name a:hover b { color: var(--bg); }
.ls .desc { font-family: var(--body); font-size: 14.5px; line-height: 1.5; color: var(--text); text-shadow: none; }
.ls tbody tr:hover td { background: var(--bg-raise); }
.chip { display: inline-block; min-width: 6ch; text-align: center; padding: 0 4px; line-height: 1.15; }
.chip.live { background: var(--fg); color: var(--bg); text-shadow: none; }
.chip.build { outline: 1px solid var(--fg); outline-offset: -1px; }
.chip.idea, .chip.archived { color: var(--dim); outline: 1px dashed var(--faint); outline-offset: -1px; }
.legend { color: var(--dim); font-size: 19px; }
.legend .chip { min-width: 0; }

.tag { display: inline-block; padding: 0 6px; border: 1px solid var(--faint); color: var(--fg); line-height: 1.15; }
.tag.t-guide { background: var(--fg); color: var(--bg); text-shadow: none; border-color: var(--fg); }
.tag.t-spec { border-color: var(--fg); }
.tag.t-log { border-style: dashed; border-color: var(--dim); }
.tag.t-note { color: var(--dim); }
.pill { display: inline-block; border: 1px solid var(--faint); padding: 0 6px; margin: 0 2px 4px 0; line-height: 1.15; }

.doclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--faint); }
.doclist li {
  display: grid; grid-template-columns: 11ch 7ch minmax(0, 1fr) auto; gap: 4px 2ch; align-items: baseline;
  padding: 12px 0; border-bottom: 1px dashed var(--faint);
}
.doclist time, .doc-meta { color: var(--dim); white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc-main { display: grid; gap: 2px; min-width: 0; }
.doc-title { font-size: 24px; justify-self: start; text-decoration: none; }
.doc-sum { font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: var(--text); text-shadow: none; }

/* ---------- Project and doc pages ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px clamp(28px, 4vw, 56px); align-items: start; }
.split .side { grid-column: 2; grid-row: 1; display: grid; gap: 30px; }
.split .main-col { grid-column: 1; grid-row: 1; min-width: 0; display: grid; gap: 28px; }
.doc-split { grid-template-columns: 230px minmax(0, 1fr); }
.doc-split .side { grid-column: 1; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 64px); }
.doc-split .main-col { grid-column: 2; }
.side-label { color: var(--dim); margin-bottom: 6px; }
.side-project a { text-decoration: none; }
.linklist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.win .linklist li::before { content: none; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timeline li { display: grid; gap: 0; padding-left: 1.6ch; border-left: 1px solid var(--faint); }
.timeline time { color: var(--dim); font-size: 18px; }
.timeline span { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--text); text-shadow: none; }
.toc-inline { display: flex; flex-wrap: wrap; gap: 4px 2ch; color: var(--dim); border-bottom: 1px dashed var(--faint); padding-bottom: 10px; }
.toc-inline a { text-decoration: none; }
.toc-inline a::before { content: "#"; color: var(--dim); margin-right: .3ch; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--faint); padding-top: 18px; }
.pager a { display: grid; gap: 2px; text-decoration: none; border: 1px solid var(--faint); padding: 10px 14px; }
.pager a.next { text-align: right; }
.pager a span { color: var(--dim); font-size: 18px; }
.pager a:hover span { color: var(--bg); }
.source { color: var(--dim); font-size: 18px; }

/* ---------- Long-form markdown ---------- */
.prose { font-family: var(--body); font-size: 15.5px; line-height: 1.75; color: var(--text); text-shadow: none; max-width: 72ch; }
.prose > * + * { margin-top: 1.05em; }
.prose h2, .prose h3 {
  font-family: var(--display); font-weight: normal; color: var(--hot); line-height: 1.1;
  text-shadow: 0 0 5px var(--glow); scroll-margin-top: 80px;
}
:root[data-crt="off"] .prose h2, :root[data-crt="off"] .prose h3 { text-shadow: none; }
.prose h2 { font-size: 32px; margin-top: 1.9em; }
.prose h3 { font-size: 25px; margin-top: 1.5em; }
.prose h2::before { content: "## "; color: var(--dim); }
.prose h3::before { content: "### "; color: var(--dim); }
.prose > :first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + * { margin-top: .55em; }
.prose strong { color: var(--hot); font-weight: 600; }
.prose em { color: var(--hot); }
.prose a { color: var(--hot); }
.prose ul, .prose ol { padding-left: 3ch; }
.prose ul { list-style: none; }
.prose ul > li { position: relative; }
.prose ul > li::before { content: "-"; position: absolute; left: -2ch; color: var(--dim); }
.prose ol > li::marker { color: var(--dim); }
.prose li + li { margin-top: .35em; }
.prose code { background: var(--bg-raise); border: 1px solid var(--faint); padding: .05em .35em; color: var(--hot); }
.prose pre, .codeblock {
  position: relative; background: var(--bg-raise); border: 1px solid var(--faint);
  padding: 14px 16px; overflow-x: auto; font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--hot);
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose pre[data-lang]::before {
  content: attr(data-lang); position: absolute; top: 0; right: 0; padding: 0 8px;
  font-family: var(--display); font-size: 17px; color: var(--bg); background: var(--dim);
}
.prose blockquote { margin-left: 0; margin-right: 0; border: 1px solid var(--dim); border-left-width: 6px; padding: 10px 16px; background: var(--bg-raise); }
.prose blockquote > * + * { margin-top: .6em; }
.prose hr { border: 0; border-top: 1px dashed var(--faint); margin-block: 2em; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px dashed var(--faint); vertical-align: top; }
.prose th { font-family: var(--display); font-weight: normal; font-size: 19px; color: var(--dim); border-bottom: 1px solid var(--faint); }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--faint); }
.prose kbd { border: 1px solid var(--dim); padding: 0 .4em; font-family: var(--body); font-size: .85em; }

/* ---------- Workspace ---------- */
.workspace { gap: 22px; }
.ws-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; border-block: 1px dashed var(--faint); padding-block: 10px; }
.ws-saved { margin-left: auto; color: var(--dim); font-size: 18px; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.ws-pane { border: 3px double var(--dim); background: var(--bg-raise); display: flex; flex-direction: column; min-width: 0; height: min(78vh, 920px); }
.ws-pane:focus-within { border-color: var(--fg); }
.ws-pane-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 14px;
  padding: 4px 10px; border-bottom: 1px solid var(--faint); color: var(--dim);
}
.ws-pane-bar .select select { font-size: 18px; }
.ws-file { display: inline-flex; align-items: baseline; color: var(--dim); min-width: 0; }
.ws-file input {
  font: inherit; color: var(--hot); background: transparent; border: 0; border-bottom: 1px dashed var(--faint);
  width: 14ch; min-width: 6ch; padding: 0 2px; text-shadow: inherit; outline: none;
}
.ws-file input:focus { border-bottom-color: var(--fg); }
.ws-file input::placeholder { color: var(--dim); opacity: .8; }
.ws-snips { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 10px; border-bottom: 1px dashed var(--faint); }
.ws-snips button {
  font: inherit; font-size: 17px; cursor: pointer; padding: 0 6px; background: transparent;
  color: var(--fg); border: 1px solid var(--faint); text-shadow: inherit;
}
.ws-snips button:hover { background: var(--fg); color: var(--bg); text-shadow: none; }
#ws-text {
  flex: 1; width: 100%; resize: none; border: 0; outline: none; padding: 14px 16px;
  background: transparent; color: var(--text); caret-color: var(--fg);
  font-family: var(--body); font-size: 14px; line-height: 1.7; tab-size: 2; text-shadow: none;
}
.ws-count { padding: 2px 10px; border-top: 1px dashed var(--faint); color: var(--dim); font-size: 17px; }
.ws-preview { flex: 1; overflow-y: auto; padding: 22px 22px 40px; background: var(--bg); scrollbar-color: var(--faint) transparent; }
.ws-preview .page { gap: 28px; }
.ws-preview .page-head h1 { font-size: 46px; }
.ws-preview .split, .ws-preview .doc-split { grid-template-columns: minmax(0, 1fr); }
.ws-preview .split .side, .ws-preview .split .main-col { grid-column: 1; grid-row: auto; position: static; }
.ws-preview .doc-split .side { display: none; }
.ws-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 18px; }
.checks { display: grid; gap: 4px; }
.win .checks li::before { content: none; }
.checks li { display: grid; grid-template-columns: 5ch minmax(0, 1fr); font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--text); text-shadow: none; }
.c-mark { font-family: var(--display); font-size: 19px; }
.c-err .c-mark { color: var(--danger); }
.c-warn .c-mark { color: var(--hot); }
.c-ok .c-mark, .c-info .c-mark { color: var(--dim); }
.publish-steps { margin: 0; padding-left: 3ch; display: grid; gap: 10px; }
.publish-steps li::marker { color: var(--dim); }
.publish-steps code { color: var(--hot); background: var(--bg-raise); border: 1px solid var(--faint); padding: 0 .35em; overflow-wrap: anywhere; }

/* ---------- Footer + status bar ---------- */
.foot { margin-top: clamp(24px, 4vw, 56px); border-top: 1px solid var(--faint); text-shadow: none; }
.foot-in {
  max-width: var(--wide); margin: 0 auto; padding: clamp(56px, 7vw, 88px) clamp(16px, 4vw, 40px) 72px;
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 48px 40px;
}
.foot-brand { display: grid; gap: 22px; align-content: start; max-width: 340px; }
.foot-logo { display: block; justify-self: start; color: var(--hot); }
.foot-logo:hover { background: none; color: var(--fg); }
.logo-foot { height: 26px; }
.foot-brand p { margin: 0; font-family: var(--sans); font-size: 15px; line-height: 1.6; color: var(--text); opacity: .72; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; }
.socials a { display: block; width: 21px; height: 21px; color: var(--dim); }
.socials a:hover { background: none; color: var(--hot); }
.socials svg { display: block; width: 100%; height: 100%; }
.foot-col { display: grid; gap: 14px; align-content: start; }
.foot-h { margin: 0 0 8px; font-family: var(--body); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.foot-col a { justify-self: start; font-family: var(--sans); font-size: 15.5px; color: var(--text); text-decoration: none; opacity: .9; }
.foot-col a:hover { background: none; color: var(--hot); opacity: 1; }
.foot-ground { position: relative; height: clamp(220px, 26vw, 360px); }
.foot-art { position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); }
.foot-art canvas { display: block; width: 100%; height: 100%; }
.foot-bar {
  position: relative; z-index: 1; max-width: var(--wide); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px;
  font-family: var(--body); font-size: 12.5px; color: var(--dim);
}
.foot-bar p { margin: 0; }
.foot-bar a { color: var(--dim); text-underline-offset: 3px; }
.foot-bar a:hover { background: none; color: var(--hot); }
.foot-status { display: inline-flex; align-items: center; gap: 8px; }

.statusbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; gap: 0 2.2ch; align-items: center;
  background: var(--fg); color: var(--bg); text-shadow: none; font-size: 19px;
  padding: 3px clamp(16px, 4vw, 40px) calc(3px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 0 18px var(--glow); white-space: nowrap; overflow: hidden;
}
.statusbar > span + span::before { content: "| "; opacity: .55; }
.sb-path { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0 4px; cursor: pointer; text-decoration: none; }
.sb-btn:hover { background: var(--bg); color: var(--fg); }
.sb-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.statusbar > .sb-clock::before { content: none; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .split, .doc-split { grid-template-columns: minmax(0, 1fr); }
  .split .side, .split .main-col, .doc-split .side, .doc-split .main-col { grid-column: 1; grid-row: auto; position: static; }
  .project .split .side { order: 0; }
  .doc-split .side { order: 0; }
  .ws-grid, .ws-foot { grid-template-columns: minmax(0, 1fr); }
  .ws-pane { height: auto; }
  #ws-text { min-height: 55vh; }
  .ws-preview { max-height: 75vh; }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages li:nth-child(3) { border-left: 0; }
  .stages li:nth-child(n+3) { border-top: 1px solid var(--faint); }
  .stages li:nth-child(3)::before { content: none; }
}
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-fetch { justify-self: start; }
}
@media (max-width: 760px) {
  body { font-size: 20px; }
  .fetch { grid-template-columns: minmax(0, 1fr); }
  .brand .logo { height: 19px; }
  .menu-wrap { order: 3; flex-basis: 100%; padding-bottom: 4px; }
  .menubar-tools { margin-left: auto; }
  .console { top: calc(env(safe-area-inset-top, 0px) + 72px); }
  .ls .perm, .ls .date, .ls thead { display: none; }
  .ls tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.4ch; padding-block: 8px; border-bottom: 1px dashed var(--faint); }
  .ls td { padding: 0; border: 0; }
  .ls .desc { grid-column: 1 / -1; padding-top: 4px; }
  .doclist li { grid-template-columns: auto minmax(0, 1fr); }
  .doclist .doc-main { grid-column: 1 / -1; }
  .doclist .doc-meta { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .sb-hide { display: none; }
  .out { padding-left: 0; }
  .stages { grid-template-columns: minmax(0, 1fr); }
  .stages li + li { border-left: 0; border-top: 1px solid var(--faint); }
  .stages li + li::before { content: none; }
  .contact li { grid-template-columns: minmax(0, 1fr) auto; }
  .contact .k { grid-column: 1 / -1; }
  .term-keys { display: none; }
  .pager { grid-template-columns: minmax(0, 1fr); }
  .pager a.next { text-align: left; }
  .phosphor button { padding: 0 4px; }
  .console-btn { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after, .cursor, .console, .live-dot { animation: none; }
}

/* ---------- Studio ---------- */
.studio-tag { padding: 0 8px; border: 1px solid var(--bg); text-transform: lowercase; }
.who { font-size: 18px; opacity: .8; overflow: hidden; text-overflow: ellipsis; max-width: 28ch; white-space: nowrap; }
.studio-page .ws-foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pub { display: grid; gap: 12px; }
.pub-target { overflow-wrap: anywhere; }
.pub-msg { min-height: 1.3em; font-family: var(--body); font-size: 14px; line-height: 1.5; text-shadow: none; }
.pub-msg.good { color: var(--hot); }
.pub-msg.bad { color: var(--danger); }
.pub-backup { color: var(--dim); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.pub-path code { color: var(--dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.revs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 15em; overflow-y: auto; }
.win .revs li::before { content: none; }
.revs li { display: grid; grid-template-columns: 5ch 9ch minmax(0, 1fr) auto; gap: 1ch; align-items: baseline; padding: 2px 0; border-bottom: 1px dashed var(--faint); }
.revs li.muted { display: block; border: 0; font-family: var(--body); font-size: 14px; text-shadow: none; }
.rev-id, .revs time { color: var(--dim); font-variant-numeric: tabular-nums; }
.rev-act.a-unpublish { color: var(--danger); }
@media (max-width: 980px) { .studio-page .ws-foot { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .who { display: none; } }

@media (max-width: 900px) {
  .work a { grid-template-columns: minmax(0, 1fr) auto; }
  .w-sum { grid-column: 1 / -1; grid-row: 2; }
  .w-go { display: none; }
  .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-bar { justify-content: flex-start; }
  .foot-ground { height: 280px; }
}

/* ---------- Motion: lift nav, hook rail, page transitions ---------- */

/* Lift nav: a segmented group whose selected item springs apart from the rest. */

/* In the amber menu bar the group is dark and the current page lifts out bright. */
.menu.lift { --lift-bg: var(--bg); --lift-fg: var(--fg); --lift-on-bg: var(--bg); --lift-on-fg: var(--hot); --sep: 12px; gap: 0; flex: 0 1 auto; }
.menu.lift > a { padding: 1px 12px; font-size: 19px; color: var(--lift-fg); background: var(--lift-bg); }
.menu.lift > a:hover { background: var(--bg); color: var(--hot); }
.menu.lift > a[aria-current="page"] { background: var(--lift-on-bg); color: var(--lift-on-fg); box-shadow: inset 0 -2px var(--hot); }
.menu.lift kbd { opacity: .55; }
.menubar-in { gap: 4px 18px; }
.menubar-in > .menu-wrap { flex: 1 1 auto; min-width: 0; }

/* Hook rail: a dashed rail that springs to the active item and hooks into it. */
.hook { position: relative; }
.hook-label { margin: 0 0 6px; color: var(--dim); font-size: 17px; }
.hook-list { list-style: none; margin: 0; padding: 0 0 0 22px; display: grid; gap: 2px; }
.hook-list a { display: block; padding: 2px 6px; color: var(--dim); text-decoration: none; border-radius: 4px; transition: color .2s; }
.hook-list a:hover { background: none; color: var(--hot); }
.hook-list a.on { color: var(--hot); }
.hook-list .l3 a { padding-left: 18px; font-size: .92em; }
.hook-rail { position: absolute; left: 0; top: 0; width: 24px; overflow: visible; pointer-events: none; }
.hook-rail path { fill: none; stroke-linecap: round; stroke-dasharray: 3 4; }
.hook-rail .r-track { stroke: var(--faint); stroke-width: 1; }
.hook-rail .r-hover { stroke: var(--dim); stroke-width: 1.5; opacity: 0; transition: opacity .2s; }
.hook-rail .r-hover.show { opacity: .8; }
.hook-rail .r-on { stroke: var(--hot); stroke-width: 2; filter: drop-shadow(0 0 4px var(--glow)); }
:root[data-crt="off"] .hook-rail .r-on { filter: none; }
.doc-split .toc .hook { padding-top: 2px; }

/* Home: a section rail in the left margin on wide screens */
.page-rail { position: fixed; z-index: 30; top: 120px; left: max(16px, calc((100vw - var(--wide)) / 2 - 150px)); width: 132px; display: none; }
@media (min-width: 1520px) { .page-rail { display: block; } }

/* Page transitions (View Transitions API; a plain fade elsewhere) */
.menubar { view-transition-name: menubar; }
.statusbar { view-transition-name: statusbar; }
::view-transition-group(menubar), ::view-transition-group(statusbar) { animation: none; }
::view-transition-old(root) { animation: vt-out .26s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in .46s cubic-bezier(.1, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: scaleY(.985); filter: brightness(1.8); } }
@keyframes vt-in { from { opacity: .2; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.view-enter { animation: view-fade .32s var(--ease-out) both; }
@keyframes view-fade { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .lift > *, .hook-list a, .hook-rail .r-hover { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root), .view-enter { animation: none; }
}
@media (max-width: 520px) {
  .menu.lift kbd { display: none; }
  .menu.lift > a { padding: 1px 10px; }
  .menu.lift { --sep: 8px; }
}

/* ---------- Follow ---------- */
.follow { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--faint); max-width: 860px; }
.follow a {
  display: grid; grid-template-columns: 10ch minmax(14ch, auto) minmax(0, 1fr) 2ch; gap: 4px 2ch; align-items: baseline;
  padding: 14px 4px; border-bottom: 1px dashed var(--faint); text-decoration: none; color: var(--text);
}
.follow a:hover { background: var(--bg-raise); color: var(--text); }
.f-k { color: var(--dim); }
.f-v { color: var(--hot); font-size: 23px; }
.f-n { font-family: var(--body); font-size: 13.5px; color: var(--text); opacity: .8; text-shadow: none; }
.f-go { color: var(--dim); text-align: right; transition: transform .2s; }
.follow a:hover .f-go { transform: translateX(4px); color: var(--fg); }
.follow-line { margin: 0; font-family: var(--body); font-size: 13.5px; color: var(--text); text-shadow: none; border-top: 1px dashed var(--faint); padding-top: 16px; }
.foot-legal { flex-basis: 100%; order: 3; font-size: 11.5px; opacity: .85; }
@media (max-width: 680px) {
  .follow a { grid-template-columns: minmax(0, 1fr) auto; }
  .f-k { display: none; }
  .f-n { grid-column: 1 / -1; grid-row: 2; }
}

/* menu counts */
.menu .cnt { margin-left: .6ch; font-size: .78em; opacity: .55; }


/* ---------- Non-phosphor themes: ink on a surface instead of light on glass ---------- */
/* no scanlines, flicker or glow; the CRT switch only affects phosphor themes */
:root:not([data-skin="crt"]) { --bar: color-mix(in srgb, var(--bg-raise) 60%, var(--bg)); }
:root[data-phosphor="blueprint"] { --bar: rgba(0, 38, 92, .94); }
:root:not([data-skin="crt"]) body,
:root:not([data-skin="crt"])[data-crt="off"] body { text-shadow: none; background-image: none; background-color: var(--bg); }
:root:not([data-skin="crt"]) body::before { display: none; }
:root:not([data-skin="crt"]) body::after { display: none; }
/* blueprint: a drafting grid and a soft darkening toward the edges */
:root[data-skin="paper"] body,
:root[data-skin="paper"][data-crt="off"] body {
  text-shadow: none;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  background-position: -1px -1px;
}
:root[data-skin="paper"] body::after { display: block; animation: none; background: radial-gradient(ellipse at center, transparent 55%, var(--shade) 100%); }
:root:not([data-skin="crt"]) ::selection { background: var(--faint); color: var(--hot); }
:root:not([data-skin="crt"]) .menubar,
:root:not([data-skin="crt"]) .statusbar { box-shadow: none; }

/* frames: one thin line with brighter corner ticks, like a sheet border */
:root:not([data-skin="crt"]) :is(.win, .inst, .term, .ws-pane, .pal-win) {
  border: 1px solid var(--dim);
  --tk: var(--hot);
  background-image:
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk)),
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk)),
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk)),
    linear-gradient(var(--tk), var(--tk)), linear-gradient(var(--tk), var(--tk));
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}
:root:not([data-skin="crt"]) .win { padding-top: 20px; }
:root:not([data-skin="crt"]) .inst:is(:hover, :focus-within) { border-color: var(--fg); box-shadow: none; }
:root:not([data-skin="crt"]) .win-title { color: var(--hot); letter-spacing: .02em; }
:root:not([data-skin="crt"]) .win-title::before { content: "\251C\2500  "; }
:root:not([data-skin="crt"]) .win-title::after { content: " \2500\2524"; }

/* bars: dark title-block strips with a thin rule, instead of inverse video */
:root:not([data-skin="crt"]) :is(.menubar, .statusbar) { background: var(--bar); color: var(--fg); }
:root:not([data-skin="crt"]) .menubar { border-bottom: 1px solid var(--dim); }
:root:not([data-skin="crt"]) .statusbar { border-top: 1px solid var(--dim); color: var(--dim); }
:root:not([data-skin="crt"]) :is(.menubar a, .menubar button) { color: var(--fg); }
:root:not([data-skin="crt"]) .brand { color: var(--hot); }
:root:not([data-skin="crt"]) :is(.menubar a:hover, .sb-btn:hover) { background: var(--fg); color: var(--bg); }
:root:not([data-skin="crt"]) .brand:hover { background: none; color: var(--hot); }
:root:not([data-skin="crt"]) .console-btn { outline-color: var(--dim); }
:root:not([data-skin="crt"]) :is(.console-btn:hover, .console-open .console-btn) { background: var(--fg); color: var(--bg) !important; }
:root:not([data-skin="crt"]) .menu.lift { --lift-bg: var(--bg-raise); --lift-fg: var(--dim); --lift-on-bg: var(--fg); --lift-on-fg: var(--bg); }
:root:not([data-skin="crt"]) .menu.lift > a:hover { background: var(--bg-raise); color: var(--hot); }
:root:not([data-skin="crt"]) .menu.lift > a[aria-current="page"] { box-shadow: none; color: var(--bg); background: var(--fg); }

/* ---------- Plates: a surface behind text on textured themes ---------- */
:root:not([data-skin="crt"]) {
  --plate: color-mix(in srgb, var(--bg) 88%, transparent);
  --plate-line: color-mix(in srgb, var(--faint) 75%, transparent);
}
:root:not([data-skin="crt"]) :is(.page > section:not(.hero), .page > .page-head, .page .split > .main-col, .page .split > .side, .foot-in, .foot-bar) {
  background: var(--plate); border: 1px solid var(--plate-line); border-radius: 6px;
  padding: clamp(16px, 2.4vw, 26px);
}
:root:not([data-skin="crt"]) .page > .page-head { max-width: none; }
:root:not([data-skin="crt"]) .page > .page-head > * { max-width: 78ch; }
:root:not([data-skin="crt"]) .page > section > .cmd { margin-top: 0; }
:root:not([data-skin="crt"]) .foot-in { margin-inline: auto; }
:root:not([data-skin="crt"]) .foot-bar { border-radius: 6px 6px 0 0; }

/* ---------- Index: drop-down panels under the menu bar ---------- */
.nav-tool { font: inherit; font-size: 18px; cursor: pointer; background: transparent; border: 0; padding: 0 6px; text-shadow: none; white-space: nowrap; }
.nav-tool kbd { font-size: .78em; opacity: .6; margin-left: 2px; }
.nav-tool:hover, .nav-tool[aria-expanded="true"] { background: color-mix(in srgb, var(--bg) 35%, transparent); }
:root:not([data-skin="crt"]) :is(.nav-tool:hover, .nav-tool[aria-expanded="true"]) { background: color-mix(in srgb, var(--fg) 16%, transparent); color: var(--hot); }
.menubar-tools { gap: 8px; }
.nav-ico { display: inline-flex; align-items: center; justify-content: center; height: 28px; padding: 0 7px; }
.nav-ico .ico { width: 17px; height: 17px; display: block; }
.nav-menu { border: 1px solid currentColor; padding: 0 9px; }
@media (max-width: 640px) {
  .nav-tool[data-nav-search] { display: none; }
  .console-btn { display: none; }
}

/* draggable console: the title bar is the handle */
.console { pointer-events: none; }
.console .term { pointer-events: auto; transform: translate(var(--dx, 0px), var(--dy, 0px)); }
.console .term-bar { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.console .term-bar button { cursor: pointer; }
.console .term.dragging, .console .term.dragging .term-bar { cursor: grabbing; }
.console .term.dragging { box-shadow: 0 28px 60px var(--shade), 0 0 30px var(--glow); }
.console .term { position: relative; }
/* once resized the window keeps its own width, still centred even when wider than the column */
.console .term.sized { width: var(--tw); max-width: none; margin-left: calc(50% - var(--tw) / 2); }
.console .term-log { height: var(--th, min(42vh, 22em)); }
.term-grip { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 0 46%, var(--dim) 46% 52%, transparent 52% 66%, var(--dim) 66% 72%, transparent 72% 86%, var(--dim) 86% 92%, transparent 92%); }
.term-grip:hover, .term.resizing .term-grip { background-color: color-mix(in srgb, var(--fg) 14%, transparent); }
.term.resizing { user-select: none; -webkit-user-select: none; }

/* chalk headings and stuck-on labels */
:root[data-phosphor="chalkboard"] :is(.page-head h1, h2.cmd, .hero .tagline, .win-title) { text-shadow: 0 0 1px rgba(253, 252, 249, .55), 0 0 6px rgba(253, 252, 249, .12); }
:root[data-phosphor="cardboard"] :is(.inst, .win, .term, .ws-pane) { box-shadow: 0 1px 0 rgba(60, 35, 10, .15), 0 10px 22px -14px rgba(60, 35, 10, .55); }
:root[data-phosphor="cardboard"] .win-title { background: var(--bg-raise); }

/* ---------- cardboard: the main boxes are cut from kraft board and taped down ---------- */
:root[data-phosphor="cardboard"] {
  --kraft: #c89e68;
  --fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85 .22' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .2 0 0 0 0 .07 0 0 0 .6 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --flutes: repeating-linear-gradient(90deg, rgba(105, 66, 28, .1) 0 1px, transparent 1px 5px, rgba(255, 236, 200, .1) 5px 6px, transparent 6px 8px);
}
:root[data-phosphor="cardboard"] :is(.page > section:not(.hero), .page > .page-head, .foot-in, .inst, .nx-grid .pane, .hero-fetch, .console .term) {
  background-color: var(--kraft);
  background-image:
    linear-gradient(to bottom, transparent 0 12px, rgba(92, 56, 22, .3) 12px 13px, rgba(255, 238, 205, .28) 13px 14px, transparent 14px),
    var(--fibres), var(--flutes);
  border: 1px solid #8d6232; border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .2), inset 0 -14px 22px -16px rgba(80, 45, 15, .45), 0 2px 0 #9a6f3e, 0 14px 24px -16px rgba(60, 35, 10, .65);
}
:root[data-phosphor="cardboard"] :is(.page > section:not(.hero), .page > .page-head, .foot-in, .inst, .hero-fetch) { position: relative; }
/* a strip of packing tape on each box, never in quite the same place */
:root[data-phosphor="cardboard"] :is(.page > section:not(.hero), .page > .page-head, .foot-in, .inst, .nx-grid .pane, .hero-fetch)::after {
  content: ""; position: absolute; z-index: 3; pointer-events: none; top: -10px; left: 50%; width: 96px; height: 22px;
  transform: translateX(-50%) rotate(-1.5deg);
  background: linear-gradient(180deg, rgba(246, 230, 192, .78), rgba(231, 208, 160, .7)), repeating-linear-gradient(90deg, transparent 0 9px, rgba(255, 255, 255, .25) 9px 10px);
  box-shadow: 0 1px 2px rgba(80, 50, 20, .3);
  clip-path: polygon(0 0, 4% 15%, 0 30%, 4% 45%, 0 60%, 4% 75%, 0 90%, 3% 100%, 97% 100%, 100% 88%, 96% 74%, 100% 58%, 96% 44%, 100% 28%, 96% 14%, 100% 0);
}
:root[data-phosphor="cardboard"] :is(.page > section, .nx-grid .pane, .nx-col > .pane):nth-child(3n + 1)::after { left: 16%; transform: translateX(-50%) rotate(-5deg); }
:root[data-phosphor="cardboard"] :is(.page > section, .nx-grid .pane, .nx-col > .pane):nth-child(3n + 2)::after { left: 82%; transform: translateX(-50%) rotate(4deg); width: 74px; }
/* inside a box, panels become paper shipping labels so the numbers stay easy to read */
:root[data-phosphor="cardboard"] .inst { --bg: #f1e7d3; }
:root[data-phosphor="cardboard"] .inst .panel { border-color: #b48c5c; box-shadow: 1px 1px 0 rgba(80, 50, 20, .25); }
:root[data-phosphor="cardboard"] .inst-bar { background: #6b4a26; color: #f1e7d3; }
:root[data-phosphor="cardboard"] .nx-grid .pane-t, :root[data-phosphor="cardboard"] .nx-grid .pane-tools { background: #f1e7d3; box-shadow: 0 0 0 1px #b48c5c; }
:root[data-phosphor="cardboard"] .nx-grid .pane:is(:focus-within, .is-active) .pane-t { background: #6b4a26; color: #f1e7d3; }
:root[data-phosphor="cardboard"] .nx-grid :is(.field-in, .tbl tr.is-sel td) { background-color: rgba(241, 231, 211, .55); }
/* pane titles and fold buttons sit on the top edge, so panes are taped along the bottom */
:root[data-phosphor="cardboard"] .nx-grid .pane::after { top: auto !important; bottom: -11px; }