/* Terra is the default. All themes share layout, glass, and motion settings. */
:root {
  color-scheme: dark;
  --frame-max: 1120px;
  --frame-gutter: clamp(24px, 6vw, 80px);
  --bg: #141310; --panel: #1b1b16; --raised: #2a3022;
  --ink: #e4e2d4; --soft: #c0c4ad; --quiet: #aaa995;
  --edge: #414734; --edge-strong: #7b8561;
  --amber: #d6b17a; --teal: #88b6ab;
  --grid: #76765a; --lane: #a69a70; --shadow: #0004;
  --explorer-width: 184px; --traffic: #88b6ab; --traffic-warm: #d6a16d;
  --mono: ui-monospace, "Cascadia Code", "Liberation Mono", monospace;
}
/* Echoes 01 / Animals, from the Omarchy theme: orange sky, cold blue, brick towers, tan. */
:root[data-theme="animals"] {
  --bg: #120d0b; --panel: #1c1512; --raised: #33241e;
  --ink: #f5efe4; --soft: #d2b48c; --quiet: #ad967f;
  --edge: #5a3c32; --edge-strong: #a0522d;
  --amber: #ff8c69; --teal: #6fa3cc;
  --grid: #8a7360; --lane: #a0522d;
}
/* deadmau5 / Hypnocurrency (with REZZ): night navy, neon blue, violet, one green goggle. */
:root[data-theme="hypnocurrency"] {
  --bg: #070b16; --panel: #0b1122; --raised: #16235a;
  --ink: #eef0fc; --soft: #c9cef8; --quiet: #9aa3d6;
  --edge: #22306a; --edge-strong: #314fb1;
  --amber: #40b6f2; --teal: #d88afb;
  --grid: #314fb1; --lane: #314fb1;
  --traffic: #40b6f2; --traffic-warm: #0cc135;
}
/* deadmau5 / W:/2016ALBUM: black, white, hot pink-red. */
:root[data-theme="w2016"] {
  --bg: #000; --panel: #0a0a0a; --raised: #1a1a1a;
  --ink: #fefefe; --soft: #d6d6d6; --quiet: #a5a0a2;
  --edge: #333; --edge-strong: #fefefe;
  --amber: #ff2f62; --teal: #f46d90;
  --grid: #5f5f5f; --lane: #fefefe;
  --traffic: #fefefe; --traffic-warm: #fe0346;
}
/* Tron: cool black, cyan programs, amber counterpoint. */
:root[data-theme="tron"] {
  --bg: #05090e; --panel: #09141c; --raised: #112b36;
  --ink: #e0f6fa; --soft: #a9d5df; --quiet: #87adb9;
  --edge: #285363; --edge-strong: #4f8f9f;
  --amber: #73dfef; --teal: #ffb266;
  --grid: #377c93; --lane: #5ec6df;
}
/* Original concept's banner-derived amber/teal, with a neutral dark ground. */
:root[data-theme="signal"] {
  --bg: #12171b; --panel: #1a2228; --raised: #25333b;
  --ink: #eeeade; --soft: #c3d0cf; --quiet: #a3b6b9;
  --edge: #40535b; --edge-strong: #69848e;
  --amber: #d79b50; --teal: #58bfcb;
  --grid: #597982; --lane: #8d9b90;
}
/* Echoes 03 / Wish You Were Here: paper, charcoal, sky, fire. */
:root[data-theme="wish"] {
  color-scheme: light;
  --bg: #f6f4ef; --panel: #faf9f4; --raised: #e4e9ed;
  --ink: #2b2e33; --soft: #454e5a; --quiet: #555b63;
  --edge: #c0c7ce; --edge-strong: #8597aa;
  --amber: #a94313; --teal: #3f6a9a;
  --grid: #a6bada; --lane: #3f6a9a; --shadow: #252d381c;
}
/* Original Paper concept: cream, sienna, muted blue. */
:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #eee5d6; --panel: #f5efe4; --raised: #e5d9c6;
  --ink: #1c1512; --soft: #534538; --quiet: #655648;
  --edge: #c2af91; --edge-strong: #9b8166;
  --amber: #984725; --teal: #335a76;
  --grid: #b39c7c; --lane: #8a6b49; --shadow: #4937231c;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { padding-top: 28px; position: relative; isolation: isolate; margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.6 Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
p, dd { text-wrap: pretty; }
h1, h2 { text-wrap: balance; }
button, input { font: inherit; }
button { cursor: pointer; }
button, input, summary, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 5px; }
[hidden] { display: none !important; }
::selection { color: var(--bg); background: var(--amber); }
.skip { position: fixed; top: -100px; left: 20px; z-index: 10; background: var(--amber); color: var(--bg); padding: 12px; }
.skip:focus-visible { top: 12px; }
.field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.field svg { width: 100%; height: 100%; }
.draft-grid { color: var(--grid); opacity: .055; }
.lanes { fill: none; stroke: var(--lane); stroke-width: 1; opacity: .24; }
.junctions { fill: var(--bg); stroke: var(--traffic); stroke-width: 1; opacity: .5; }
.hub-core { fill: var(--traffic); stroke: none; opacity: .65; }
.packets { opacity: .68; }
.amber { fill: var(--amber); }
.teal { fill: var(--teal); }
.site-header, .site-footer { width: min(var(--frame-max), calc(100% - 2 * var(--frame-gutter))); margin-inline: auto; display: flex; justify-content: space-between; align-items: center; }
.site-header { padding: 25px 0 19px; flex-wrap: wrap; gap: 12px 20px; }
.brand { display: flex; align-items: baseline; gap: 0; font: 20px var(--mono); }
.brand-mark { font: italic 38px Georgia, serif; color: var(--amber); letter-spacing: -2px; }
.header-right { display: flex; align-items: center; margin-left: auto; gap: 25px; font: 10px var(--mono); }
.header-right a { color: var(--ink); }
.header-right a span { color: var(--amber); margin-left: 8px; }
.header-right button { background: var(--panel); color: var(--quiet); border: 1px solid var(--edge); padding: 7px 10px; font: 10px var(--mono); }
.workspace { width: min(var(--frame-max), calc(100% - 2 * var(--frame-gutter))); margin: 0 auto; border: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 75%, transparent); box-shadow: 0 25px 90px var(--shadow), inset 0 1px 0 #e4e2d409; }
.window-bar { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--edge); background: color-mix(in srgb, var(--raised) 80%, transparent); padding: 12px 18px; font: 10px var(--mono); color: var(--soft); }
.window-mark { font-size: 11px; color: var(--amber); }
.window-caption { margin-left: auto; color: var(--quiet); font-size: 10px; }
.workspace-body { display: grid; grid-template-columns: var(--explorer-width) minmax(0, 1fr); }
.sidebar { display: flex; flex-direction: column; padding: 29px 12px 22px; border-right: 1px solid var(--edge); background: color-mix(in srgb, var(--bg) 54%, transparent); font: 11px/1.5 var(--mono); }
.side-label { color: var(--quiet); font: 10px/1.5 var(--mono); letter-spacing: .14em; margin: 0 12px 16px; }
.sidebar nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: var(--soft); border: 1px solid transparent; }
.sidebar nav a:hover { background: var(--raised); }
.sidebar nav a[aria-current] { background: var(--raised); color: var(--amber); border-color: var(--edge); }
.nav-icon { color: var(--quiet); font-size: 16px; line-height: 14px; width: 12px; }
.nav-end { margin-left: auto; font-size: 10px; color: var(--quiet); }
.directories { margin-top: 31px; margin-bottom: 10px; }
.folder { color: var(--teal); }
.sidebar-foot { margin-top: auto; padding: 80px 9px 0; font: 10px/1.9 var(--mono); color: var(--quiet); }
.sidebar-foot a { display: inline-block; margin-top: 13px; color: var(--quiet); }
.tiny-node { display: inline-block; width: 4px; height: 4px; background: var(--teal); border-radius: 50%; vertical-align: middle; margin-right: 7px; flex-shrink: 0; }
.content { padding: 26px 42px 32px; min-width: 0; }
.content:focus { outline: none; }
.page { min-height: 556px; }
.page-meta { display: flex; justify-content: space-between; align-items: center; font: 10px var(--mono); color: var(--quiet); margin-bottom: 37px; gap: 12px; }
.file-type { font-size: 10px; letter-spacing: .1em; color: var(--quiet); }
.eyebrow { font: 10px/1.6 var(--mono); color: var(--quiet); margin: 0 0 14px; }
.prompt-symbol { color: var(--amber); margin-right: 7px; }
h1 { font: 400 clamp(38px, 4.6vw, 60px)/1.08 Arial, sans-serif; letter-spacing: -.06em; margin: 0 0 15px; }
.name-dot { color: var(--amber); }
.role { font: 16px/1.5 var(--mono); color: var(--soft); margin: 0 0 18px; letter-spacing: -.03em; }
.lede { color: var(--soft); font: 14px/1.85 Arial, sans-serif; margin: 0; }
.intro-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin: 23px 0 39px; }
.intro-links>a { font: 10px var(--mono); color: var(--ink); border-bottom: 1px solid var(--edge-strong); padding-bottom: 5px; }
.intro-links>a span { margin-left: 15px; }
.opportunity { font: 11px/1.6 var(--mono); color: var(--soft); }
.opportunity i { display: inline-block; width: 4px; height: 4px; background: var(--teal); margin: 0 7px 1px 0; border-radius: 50%; }
.section-label { display: flex; justify-content: space-between; gap: 15px; font: 10px/1.5 var(--mono); color: var(--quiet); letter-spacing: .07em; border-top: 1px solid var(--edge); padding-top: 18px; margin-bottom: 17px; }
.section-label>span:last-child:not(:first-child) { color: var(--quiet); font-size: 10px; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.door { padding: 19px 20px 13px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 60%, transparent); transition: border-color .2s, background .2s; }
.door:hover { border-color: var(--edge-strong); background: var(--raised); }
.door-code { color: var(--quiet); font: 10px var(--mono); letter-spacing: .09em; }
.door-heading { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; color: var(--amber); }
.door h2 { margin: 0; color: var(--ink); font: 21px var(--mono); letter-spacing: -.07em; }
.door h2 span { color: var(--teal); padding-left: 2px; }
.door p { font: 12px/1.6 Arial, sans-serif; color: var(--soft); margin: 11px 0 22px; }
.door-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--edge); padding-top: 11px; font: 10px var(--mono); color: var(--quiet); }
.line-motif { color: var(--amber); font-size: 13px; }
.teal-text { color: var(--teal); }
.home-note { display: flex; gap: 12px; margin-top: 26px; color: var(--quiet); font: 10px/1.9 var(--mono); }
.home-note p { margin: 0; }
.note-marker { color: var(--amber); }
.command-area { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 16px; padding: 12px 18px; border-top: 1px solid var(--edge); background: color-mix(in srgb, var(--bg) 70%, transparent); }
#terminal { display: flex; align-items: center; gap: 10px; min-width: 240px; flex: 1; font: 11px var(--mono); }
#terminal label { color: var(--teal); white-space: nowrap; }
#terminal label b { color: var(--amber); font-weight: 400; padding-left: 6px; }
.muted { color: var(--quiet); }
#command { width: 100%; min-width: 40px; max-width: 350px; border: 0; background: none; color: var(--ink); outline-offset: 3px; padding: 4px; border-radius: 0; font: 11px var(--mono); }
#command::placeholder { color: var(--quiet); opacity: 1; }
#terminal button { background: transparent; border: 1px solid var(--edge); color: var(--quiet); padding: 1px 7px; }
#command-hint { color: var(--quiet); font: 10px var(--mono); }
.command-response { width: 100%; color: var(--soft); padding: 2px 0 12px; font: 10px/1.8 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.statusbar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 7px 17px; background: color-mix(in srgb, var(--raised) 80%, transparent); color: var(--quiet); font: 10px var(--mono); }
.statusbar .tiny-node { width: 3px; height: 3px; }
.site-footer { padding: 24px 0 42px; color: var(--quiet); font: 10px var(--mono); gap: 20px; }
.footer-slash { margin: 0 9px; color: var(--amber); }
.footer-note { color: var(--quiet); }
.site-footer a { color: var(--quiet); }
.inner-title { font-size: clamp(34px, 3.7vw, 47px); line-height: 1.15; letter-spacing: -.05em; margin-bottom: 21px; }
.about-lede { font-size: 17px; line-height: 1.75; color: var(--soft); max-width: 670px; }
.about-availability { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; padding: 19px 20px; background: var(--raised); border: 1px solid var(--edge); }
.about-availability strong { font: 12px/1.6 var(--mono); color: var(--ink); }
.about-availability p { font: 12px/1.7 Arial, sans-serif; color: var(--soft); margin: 8px 0 0; }
.about-availability>a { font: 10px var(--mono); margin-left: auto; white-space: nowrap; color: var(--ink); }
.about-index { display: flex; gap: 24px; flex-wrap: wrap; margin: 26px 0 34px; font: 10px var(--mono); color: var(--amber); }
.about-section { margin: 0 0 32px; scroll-margin-top: 20px; }
.about-section h2, .web-description h2 { font: 400 25px/1.3 Arial, sans-serif; letter-spacing: -.04em; margin: 18px 0 15px; }
.about-section>p { color: var(--soft); font: 14px/1.9 Arial, sans-serif; max-width: 660px; }
.career { list-style: none; display: flex; flex-wrap: wrap; gap: 9px 0; margin: 22px 0; padding: 0; font: 10px/1.5 var(--mono); color: var(--amber); }
.career li:not(:last-child)::after { content: '→'; margin: 0 13px; color: var(--quiet); }
.facts { display: flex; gap: 40px; padding: 20px 0 4px; color: var(--soft); font: 10px var(--mono); }
.facts b { font: 27px Arial, sans-serif; color: var(--ink); margin-right: 8px; }
.hats { display: grid; grid-template-columns: max-content 1fr; gap: 7px 24px; margin: 22px 0; font: 11px/1.6 var(--mono); }
.hats>div { display: contents; }
.hats dt { color: var(--amber); }
.hats dd { margin: 0; color: var(--soft); }
.certs { margin: 26px 0 4px; font: 10px/1.9 var(--mono); color: var(--soft); }
.certs b { display: block; font: 12px var(--mono); color: var(--ink); margin-bottom: 4px; }
.inline-link { display: inline-block; color: var(--amber); border-bottom: 1px solid var(--edge-strong); padding-bottom: 5px; font: 10px var(--mono); }
.about-contact { border-top: 1px solid var(--edge); padding: 9px 0 0; font: 12px/1.8 Arial, sans-serif; color: var(--soft); }
.about-contact a { display: inline-block; color: var(--amber); font: 14px var(--mono); padding: 8px 0; }
.about-contact a span { margin-left: 40px; }
.web-project { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; border-block: 1px solid var(--edge); margin-top: 33px; padding: 28px 0; align-items: center; }
.mini-browser { background: var(--bg); border: 1px solid var(--edge); font: 8px var(--mono); transform: rotate(-2deg); }
.mini-browser>div { padding: 10px 12px; background: var(--raised); border-bottom: 1px solid var(--edge); color: var(--soft); display: flex; justify-content: space-between; }
.mini-browser section { padding: 28px 19px; color: var(--teal); }
.mini-browser b { display: block; font: 40px var(--mono); color: var(--ink); margin: 20px 0; letter-spacing: -.08em; }
.mini-browser b span { color: var(--amber); }
.mini-browser i { font: 7px var(--mono); color: var(--quiet); }
.web-description .eyebrow { font-size: 10px; color: var(--amber); margin: 0; }
.web-description h2 { margin-top: 10px; }
.web-description>p:not(.eyebrow) { color: var(--soft); font: 13px/1.9 Arial, sans-serif; }
.orbit-project { scroll-margin-top: 20px; }
.orbit-preview { min-width: 0; border: 1px solid var(--edge-strong); background: var(--bg); font: 10px var(--mono); }
.orbit-preview-head, .orbit-preview-foot { display: flex; justify-content: space-between; gap: 12px; padding: 12px; color: var(--teal); }
.orbit-preview-head { border-bottom: 1px solid var(--edge); }
.orbit-preview-head span:last-child { color: var(--amber); }
.orbit-preview svg { display: block; width: 100%; height: auto; font: 10px var(--mono); }
.orbit-preview-foot { flex-wrap: wrap; border-top: 1px solid var(--edge); color: var(--quiet); }
.build-notes { margin-top: 24px; border-top: 1px solid var(--edge); padding-top: 14px; }
.build-notes summary { cursor: pointer; color: var(--amber); font: 11px/1.8 var(--mono); }
.build-notes summary span { display: block; color: var(--quiet); font-size: 10px; }
.build-notes summary:focus-visible { outline: 1px solid var(--amber); outline-offset: 4px; }
.build-notes .build-note-date { margin: 18px 0 6px; color: var(--quiet); font: 10px/1.6 var(--mono); }
.build-notes h3 { margin: 0 0 8px; color: var(--ink); font-size: 16px; font-weight: 400; }
.build-notes article>p:last-child { color: var(--soft); font: 13px/1.9 Arial, sans-serif; margin: 0; }
.future-row { display: flex; gap: 20px; align-items: center; margin-top: 28px; }
.future-icon { color: var(--teal); font: 27px var(--mono); }
.future-row h2 { font: 14px var(--mono); color: var(--ink); margin: 0 0 9px; }
.future-row p { color: var(--quiet); font-size: 12px; margin: 0; }
.quiet-tag { font: 10px/1.7 var(--mono); color: var(--quiet); margin-left: auto; }
.directory-note { margin: 32px 0 0; font: 10px var(--mono); color: var(--quiet); }
.force-lede { font: 14px/1.9 Arial, sans-serif; color: var(--soft); }
.schema-title { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 30px; font: 10px var(--mono); color: var(--quiet); }
.schema-title>span:last-child { color: var(--amber); }
.schema { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 12%; position: relative; margin-top: 15px; padding: 30px 22px 22px; background: radial-gradient(color-mix(in srgb, var(--grid) 35%, transparent) .8px, transparent .8px); background-size: 18px 18px; border: 1px solid var(--edge); }
.schema-wires { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--bg); stroke: var(--edge-strong); stroke-width: 1; }
.object { display: flex; flex-direction: column; position: relative; padding: 0; color: var(--ink); background: var(--raised); border: 1px solid var(--edge-strong); text-align: left; }
.object:hover, .object[aria-pressed="true"] { border-color: var(--amber); }
.object[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--amber); }
.object-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; background: var(--raised); font: 10px var(--mono); color: var(--amber); }
.object-title b { font-weight: 400; }
.object-title>span { color: var(--quiet); font-size: 10px; }
.agent-object .object-title { background: var(--raised); color: var(--soft); }
.object-row { padding: 9px 12px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--edge); font: 10px/1.6 var(--mono); color: var(--quiet); }
.object-row>span:last-child { color: var(--ink); text-align: right; }
.object-foot { padding: 10px 12px; border-top: 1px solid var(--edge); font: 10px var(--mono); color: var(--amber); }
.schema-caption { grid-column: 1 / -1; position: relative; justify-self: center; margin-top: 38px; padding: 7px 12px; background: var(--bg); font: 10px/1.6 var(--mono); color: var(--soft); border: 1px solid var(--edge-strong); }
.schema-caption>span { color: var(--amber); margin-right: 7px; }
.schema-note { font: 11px/1.8 var(--mono); color: var(--quiet); margin: 14px 0 25px; }
.console { border: 1px solid var(--edge); background: var(--bg); font: 11px/1.7 var(--mono); }
.console summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 10px 13px; color: var(--soft); background: var(--raised); list-style: none; }
.console summary::-webkit-details-marker { display: none; }
.log-count { color: var(--quiet); margin-left: 12px; font-size: 10px; }
.console-hint { font-size: 10px; color: var(--quiet); }
.console-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 7px 13px; border-top: 1px solid var(--edge); color: var(--quiet); font-size: 10px; }
.console-toolbar button { background: none; border: 1px solid var(--edge); color: var(--soft); padding: 1px 8px; font: 10px var(--mono); }
#log { padding: 10px 13px; max-height: 180px; overflow-y: auto; overflow-wrap: anywhere; }
#log p { margin: 0 0 5px; color: var(--soft); }
#log .event-kind { color: var(--amber); }
#log .log-empty { color: var(--quiet); }
@media (min-width: 1600px) { .site-header { padding-top: 30px; } }
@media (max-width: 1000px) {
  :root { --explorer-width: 158px; }
  .sidebar { padding-inline: 8px; }
  .sidebar nav a { padding-inline: 9px; gap: 8px; font-size: 10px; }
  .content { padding: 25px 27px 30px; }
  .role { font-size: 13px; }
  .doors { gap: 12px; }
  .door { padding: 17px 15px 12px; }
  .schema { padding-inline: 15px; gap: 20px 6%; }
  .object-row { font-size: 10px; padding-inline: 9px; gap: 5px; }
  .about-availability { flex-wrap: wrap; }
  .about-availability>a { margin-left: 21px; }
  #command-hint { display: none; }
}
@media (max-width: 720px) {
  .site-header { padding-block: 22px; }
  .workspace { margin-top: 0; }
  .workspace-body { grid-template-columns: 1fr; }
  .sidebar { border-right: 0; border-bottom: 1px solid var(--edge); padding: 7px 10px; }
  .sidebar>.side-label, .sidebar .directories, .sidebar-foot { display: none; }
  .sidebar nav { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 4px; }
  .sidebar nav a { padding: 9px 6px; font-size: 10px; gap: 5px; }
  .nav-end { display: none; }
  .nav-icon { font-size: 13px; width: 10px; }
  .content { padding: 24px; }
  .page-meta { margin-bottom: 30px; }
  .page { min-height: 0; }
  h1 { font-size: 46px; }
  .role { max-width: 300px; font-size: 13px; line-height: 1.8; }
  .lede { font-size: 14px; }
  .intro-links { align-items: start; flex-direction: column; gap: 17px; margin-bottom: 30px; }
  .desktop-break { display: none; }
  .doors { grid-template-columns: 1fr; }
  .door { padding: 18px; }
  .door-heading { margin-top: 12px; }
  .door p { margin-bottom: 15px; }
  .home-note { font-size: 10px; }
  .site-footer { font-size: 10px; flex-wrap: wrap; padding-top: 21px; gap: 14px; }
  .footer-note { display: none; }
  .header-right { gap: 15px; font-size: 10px; }
  .header-right button { font-size: 10px; padding: 7px; }
  .window-caption { font-size: 10px; }
  .statusbar { font-size: 10px; gap: 6px; }
  .statusbar>span:last-child { display: none; }
  .inner-title { font-size: 38px; }
  .about-lede { font-size: 15px; }
  .about-availability { padding: 16px; gap: 8px; }
  .about-availability>.tiny-node { display: none; }
  .about-availability>a { margin-left: 0; margin-top: 5px; }
  .about-index { gap: 15px; font-size: 10px; }
  .about-section h2 { font-size: 24px; }
  .facts { gap: 23px; flex-wrap: wrap; font-size: 10px; }
  .facts b { font-size: 23px; }
  .career { font-size: 10px; }
  .hats { gap: 9px 16px; font-size: 10px; }
  .career li:not(:last-child)::after { margin-inline: 8px; }
  .web-project { grid-template-columns: 1fr; gap: 27px; }
  .mini-browser { max-width: 340px; width: 100%; }
  .future-row { flex-wrap: wrap; gap: 10px; }
  .future-row h2 { font-size: 12px; }
  .quiet-tag { margin-left: 28px; }
  .schema { grid-template-columns: 1fr; gap: 25px; padding: 20px; }
  .object-row { font-size: 10px; }
  .object-title { font-size: 12px; }
  .schema-wires { display: none; }
  .schema-caption { margin-top: 0; text-align: center; }
  .log-count { margin-left: 6px; }
  .console-hint { font-size: 10px; }
  .field { opacity: .6; }
}
@media (max-width: 380px) {
  .brand { font-size: 16px; }
  .brand-mark { font-size: 32px; }
  
  .header-right { gap: 10px; }
  .header-right button { font-size: 10px; }
  .content { padding: 21px 18px; }
  .sidebar { padding-inline: 5px; }
  .sidebar nav a { font-size: 10px; padding-inline: 5px; }
  h1 { font-size: 40px; }
  .opportunity { font-size: 10px; }
  .window-bar { padding-inline: 12px; }
  .window-caption { font-size: 10px; }
  .section-label { font-size: 10px; }
  .section-label>span:last-child:not(:first-child) { font-size: 10px; }
  .command-area { padding-inline: 12px; }
  #terminal { font-size: 10px; gap: 6px; min-width: 0; }
  .schema { padding: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

.schema-wires path { fill: none; }

/* Appearance belongs to the viewport edge, separate from the site header. */
.theme-drawer { position: relative; z-index: 5; }
.theme-drawer summary { cursor: pointer; list-style: none; color: var(--soft); padding: 9px 10px; border: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 75%, transparent); }
.theme-drawer summary::-webkit-details-marker { display: none; }
.theme-chevron { color: var(--amber); margin-left: 8px; }
.theme-picker { position: absolute; right: 0; top: calc(100% + 10px); width: 220px; padding: 8px; display: grid; gap: 3px; background: var(--panel);  border: 1px solid var(--edge-strong); box-shadow: 0 12px 40px var(--shadow); }
.appearance .theme-button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 38px; text-align: left; padding: 8px; background: transparent; border: 1px solid transparent; color: var(--soft); }
.theme-button::before { content: ''; flex-shrink: 0; width: 16px; height: 16px; background: var(--swatch); box-shadow: inset 0 0 0 1px #8885; }
.theme-button::after { content: attr(data-label); font: 10px var(--mono); }
.appearance .theme-button[aria-pressed="true"] { border-color: var(--edge); background: var(--raised); color: var(--ink); }
.appearance .theme-button:hover { background: var(--raised); }
.motion-control { display: flex; align-items: center; gap: 9px; font: 10px var(--mono); }
#motion { font: 10px var(--mono); padding: 7px 24px 7px 9px; color: var(--soft); background: var(--panel); border: 1px solid var(--edge); cursor: pointer; }
#motion:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.track { fill: none; stroke: var(--traffic); stroke-width: .8; opacity: .17; }
.active-track { opacity: .3; }

.theme-terra { --swatch: linear-gradient(135deg, #2a3022 50%, #d6b17a 50%); }
.theme-animals { --swatch: linear-gradient(135deg, #5a3c32 40%, #ff8c69 40% 72%, #4d88b3 72%); }
.theme-tron { --swatch: linear-gradient(135deg, #05090e 50%, #73dfef 50%); }
.theme-signal { --swatch: linear-gradient(135deg, #d79b50 50%, #3aaebd 50%); }
.theme-wish { --swatch: linear-gradient(135deg, #f6f4ef 45%, #a6bada 45% 80%, #d9621e 80%); }
.theme-paper { --swatch: linear-gradient(135deg, #f5efe4 50%, #a0522d 50%); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 720px) {
  .header-right { gap: 12px; }
  .theme-picker { gap: 3px; }
}

/* One location row, aligned with Explorer and the content column. */
:root[data-theme="tron"] { --traffic: #73bfd0; --traffic-warm: #e4a66d; }
:root[data-theme="animals"] { --traffic: #6fa3cc; --traffic-warm: #dc6e82; }
:root[data-theme="signal"] { --traffic: #7fadb7; }
:root[data-theme="wish"], :root[data-theme="paper"] { --traffic: #557a96; --traffic-warm: #a95b32; }
.packet-cool { fill: var(--traffic); }
.packet-warm { fill: var(--traffic-warm); }
.appearance { position: fixed; top: 0; right: 0; z-index: 8; font: 10px var(--mono); }
.appearance summary { background: var(--panel); padding: 8px 13px; border-top: 0; border-right: 0; }
.appearance .theme-picker { top: 100%; max-height: calc(100dvh - 40px); overflow-y: auto; }
.site-header { padding-top: 16px; }
.window-bar { display: grid; grid-template-columns: var(--explorer-width) minmax(0, 1fr); padding: 0; gap: 0; }
.explorer-title { padding: 13px 24px; font: 10px var(--mono); letter-spacing: .12em; border-right: 1px solid var(--edge); }
.breadcrumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; padding: 12px 42px; font: 11px/1.6 var(--mono); }
.host { color: var(--teal); }
button.host { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
button.host:hover { text-decoration: underline; text-underline-offset: 3px; }
.command-response a { color: var(--amber); }
.workspace > .command-response { position: relative; }
.response-close { position: absolute; top: 8px; right: 12px; padding: 0 7px; border: 1px solid var(--edge); background: none; color: var(--quiet); font: 12px var(--mono); cursor: pointer; }
.response-close:hover { color: var(--ink); border-color: var(--edge-strong); }
#window-path { color: var(--quiet); overflow-wrap: anywhere; }
#window-path a:hover { color: var(--ink); text-decoration: underline; }
#window-path [aria-current] { color: var(--soft); }
.sidebar { padding-top: 16px; }
.content { padding-top: 34px; }
@media (max-width: 1000px) { .breadcrumb { padding-inline: 27px; } }
@media (max-width: 720px) {
  .window-bar { grid-template-columns: 83px minmax(0, 1fr); }
  .explorer-title { padding-inline: 12px; font-size: 10px; border-right: 0; }
  .breadcrumb { padding: 10px 12px; font-size: 10px; gap: 4px; }
  .sidebar { padding-top: 7px; }
  .content { padding-top: 28px; }
}

/* Matching header strips and navigation rows for both sidebar levels. */
.window-bar > .explorer-title { align-self: stretch; display: flex; align-items: center; }
.sidebar { padding: 0; }
.sidebar #directory-links, .sidebar #explorer-links { display: flex; flex-direction: column; padding: 16px 12px 20px; gap: 0; }
.sidebar .sidebar-heading { margin: 0; padding: 13px 24px; border-right: 0; border-block: 1px solid var(--edge); background: color-mix(in srgb, var(--raised) 80%, transparent); color: var(--soft); }
.study-links { display: flex; flex-wrap: wrap; gap: 16px; }
#web-hub, #web-projects, #force-schema, #console { scroll-margin-top: 42px; }
@media (max-width: 1000px) {
  .sidebar #directory-links, .sidebar #explorer-links { padding-inline: 8px; }
}
@media (max-width: 720px) {
  .window-bar { grid-template-columns: 83px minmax(0, 1fr); }
  .sidebar #directory-links, .sidebar #explorer-links { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 7px 10px; gap: 4px 12px; }
  .sidebar .sidebar-heading { padding: 10px 12px; font-size: 10px; }
}

/* Quick swatches share the body's right edge, above the contact link. */
.appearance { right: max(var(--frame-gutter), calc((100% - var(--frame-max))/2)); display: flex; align-items: center; background: var(--panel); border: 1px solid var(--edge); border-top: 0; }
.quick-palette { display: flex; gap: 1px; padding-inline: 3px; }
.appearance .quick-palette .theme-button { width: 27px; min-height: 28px; padding: 4px; justify-content: center; }
.quick-palette .theme-button::after { display: none; }
.quick-palette .theme-button::before { width: 13px; height: 13px; }
.appearance summary { border: 0; border-left: 1px solid var(--edge); padding: 3px 11px 7px; font: 17px/18px var(--mono); }

/* Album palettes: deck-derived through Relics; later albums are site interpretations. */
:root[data-theme="momentary"] {
  color-scheme: dark; --bg: #2a2138; --panel: #30273e; --raised: #4b3d55; --ink: #f6f1ea; --soft: #e6dcf0; --quiet: #c2b2d2; --edge: #6e5a85; --edge-strong: #9984b0; --amber: #e2be55; --teal: #93ace3; --traffic: #938bad; --grid: #938bad; --lane: #938bad;
}
.theme-momentary { --swatch: linear-gradient(135deg, #4b3d55 50%, #e2be55 50%); }
:root[data-theme="atom"] {
  color-scheme: dark; --bg: #192819; --panel: #22351f; --raised: #2e4429; --ink: #f5f3ec; --soft: #c8d3cb; --quiet: #b0c0b2; --edge: #4b6344; --edge-strong: #7e9a73; --amber: #9cc26a; --teal: #afc2d3; --traffic: #91aca0; --grid: #91aca0; --lane: #91aca0;
}
.theme-atom { --swatch: linear-gradient(135deg, #2e4429 50%, #9cc26a 50%); }
:root[data-theme="meddle"] {
  color-scheme: dark; --bg: #0b252a; --panel: #0e3338; --raised: #17454b; --ink: #f4f1ea; --soft: #c4dadb; --quiet: #a4c0c3; --edge: #2e6168; --edge-strong: #628d91; --amber: #e3a283; --teal: #5cc6cf; --traffic: #82b8bc; --grid: #82b8bc; --lane: #82b8bc;
}
.theme-meddle { --swatch: linear-gradient(135deg, #17454b 50%, #e3a283 50%); }
:root[data-theme="darkside"] {
  color-scheme: dark; --bg: #0b0c0e; --panel: #101215; --raised: #17191d; --ink: #f2f2f0; --soft: #c9cdd3; --quiet: #a8aeb8; --edge: #33373d; --edge-strong: #70777f; --amber: #f4d03f; --teal: #8abbe0; --traffic: #9eaab6; --grid: #9eaab6; --lane: #9eaab6;
}
.theme-darkside { --swatch: linear-gradient(135deg, #17191d 50%, #f4d03f 50%); }
:root[data-theme="relics"] {
  color-scheme: dark; --bg: #15173e; --panel: #1e2160; --raised: #2a2e78; --ink: #f4eee2; --soft: #c5c8e6; --quiet: #b1b5d7; --edge: #44499a; --edge-strong: #8086bf; --amber: #d4a24c; --teal: #a9cdb5; --traffic: #9fa9c7; --grid: #9fa9c7; --lane: #9fa9c7;
}
.theme-relics { --swatch: linear-gradient(135deg, #2a2e78 50%, #d4a24c 50%); }
:root[data-theme="obscured"] {
  color-scheme: dark; --bg: #22251d; --panel: #2c3024; --raised: #3a4030; --ink: #eee8d7; --soft: #cec9b4; --quiet: #b4b19a; --edge: #555b43; --edge-strong: #858b6d; --amber: #d7ba6d; --teal: #a5b8a0; --traffic: #9ca88d; --grid: #9ca88d; --lane: #9ca88d;
}
.theme-obscured { --swatch: linear-gradient(135deg, #3a4030 50%, #d7ba6d 50%); }
:root[data-theme="ummagumma"] {
  color-scheme: dark; --bg: #17251f; --panel: #203127; --raised: #304437; --ink: #ede8d8; --soft: #c6d0bd; --quiet: #a9bba8; --edge: #4a6650; --edge-strong: #7c9b7b; --amber: #d5be81; --teal: #9cbfb3; --traffic: #91ab9f; --grid: #91ab9f; --lane: #91ab9f;
}
.theme-ummagumma { --swatch: linear-gradient(135deg, #304437 50%, #d5be81 50%); }
:root[data-theme="river"] {
  color-scheme: dark; --bg: #222334; --panel: #2c2d41; --raised: #41425a; --ink: #f6ede4; --soft: #d4cbdf; --quiet: #b9b3ce; --edge: #5d5c7b; --edge-strong: #9891b3; --amber: #e6b495; --teal: #b6c8df; --traffic: #a2afc6; --grid: #a2afc6; --lane: #a2afc6;
}
.theme-river { --swatch: linear-gradient(135deg, #41425a 50%, #e6b495 50%); }
:root[data-theme="saucerful"] {
  color-scheme: dark; --bg: #201a31; --panel: #2b2340; --raised: #3e3157; --ink: #f1e8ef; --soft: #d7c5df; --quiet: #bfa8cc; --edge: #604977; --edge-strong: #9679ad; --amber: #e5b477; --teal: #b1c8a1; --traffic: #b5a4c3; --grid: #b5a4c3; --lane: #b5a4c3;
}
.theme-saucerful { --swatch: linear-gradient(135deg, #3e3157 50%, #e5b477 50%); }
:root[data-theme="division"] {
  color-scheme: dark; --bg: #101f36; --panel: #192d46; --raised: #29415a; --ink: #eef0e7; --soft: #c3d1dd; --quiet: #a3bacb; --edge: #45617b; --edge-strong: #7e98ad; --amber: #d4b78a; --teal: #94c4d9; --traffic: #8eafc5; --grid: #8eafc5; --lane: #8eafc5;
}
.theme-division { --swatch: linear-gradient(135deg, #29415a 50%, #d4b78a 50%); }
:root[data-theme="wall"] {
  color-scheme: light; --bg: #e5e2dc; --panel: #f1eee8; --raised: #d5d2cb; --ink: #242321; --soft: #45433f; --quiet: #605d58; --edge: #b6b0a8; --edge-strong: #898177; --amber: #934532; --teal: #435e70; --traffic: #71818b; --grid: #71818b; --lane: #71818b; --shadow: #252d381c; --traffic-warm: #a95b32;
}
.theme-wall { --swatch: linear-gradient(135deg, #d5d2cb 50%, #934532 50%); }
:root[data-theme="finalcut"] {
  color-scheme: dark; --bg: #171c1b; --panel: #222a27; --raised: #303e36; --ink: #eae6da; --soft: #c6d0c3; --quiet: #a8b9a9; --edge: #4c6152; --edge-strong: #7c9682; --amber: #dbbc66; --teal: #a8c3b9; --traffic: #9baea2; --grid: #9baea2; --lane: #9baea2;
}
.theme-finalcut { --swatch: linear-gradient(135deg, #303e36 50%, #dbbc66 50%); }
.theme-darkside { --swatch: linear-gradient(135deg, #0b0c0e 40%, #e03c31 40% 50%, #f08a24 50% 60%, #f4d03f 60% 70%, #3fa34d 70% 80%, #2f7fc1 80% 90%, #6e4c9e 90%); }
.appearance .theme-picker { width: 268px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100dvh - 40px)); }
.palette-label { margin: 8px 8px 4px; font: 10px/1.5 var(--mono); letter-spacing: .12em; color: var(--quiet); }
.appearance .theme-button::after { line-height: 1.5; }

/* Contact shares the top controls; the brand has its own breathing room below. */
.top-contact { padding: 7px 12px; border-right: 1px solid var(--edge); color: var(--soft); white-space: nowrap; }
.top-contact span { color: var(--amber); margin-left: 5px; }
.top-contact:hover { color: var(--ink); }
.site-header { padding-block: 12px 16px; }

/* Top-of-page controls scroll away; contact stays outside the palette chrome. */
.appearance { position: absolute; background: none; border: 0; }
.appearance .quick-palette { background: var(--panel); border: 1px solid var(--edge); border-top: 0; border-right: 0; }
.appearance .theme-drawer { background: var(--panel); border: 1px solid var(--edge); border-top: 0; border-left: 0; }
.appearance .top-contact { border: 0; padding: 7px 0; margin-right: 16px; }

/* One current-palette swatch opens the consolidated appearance menu. */
.appearance .theme-drawer { border-left: 1px solid var(--edge); }
.appearance summary { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; }
.current-theme-swatch { width: 14px; height: 14px; background: var(--swatch); box-shadow: inset 0 0 0 1px #8885; }
.appearance-controls { display: grid; gap: 9px; padding: 9px 8px 13px; border-bottom: 1px solid var(--edge); margin-bottom: 5px; }
.appearance-controls label { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 10px var(--mono); }
.appearance-controls select { width: 132px; font: 10px var(--mono); padding: 7px; color: var(--soft); background: var(--panel); border: 1px solid var(--edge); }
.appearance-controls select:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
/* Record shelf: album, then artist context or year. Other themes stay defined for later. */
.theme-hypnocurrency { --swatch: linear-gradient(135deg, #16235a 40%, #40b6f2 40% 65%, #c960f9 65% 88%, #0cc135 88%); }
.theme-w2016 { --swatch: linear-gradient(135deg, #000 45%, #fefefe 45% 78%, #fe0346 78%); }
.shelf .theme-button::before { width: 26px; height: 14px; }
.shelf .theme-button::after { display: none; }
.shelf .album { font: 10px/1.5 var(--mono); }
.shelf .meta { margin-left: auto; font: 10px var(--mono); color: var(--quiet); white-space: nowrap; }

/* The prompt follows the path: n8@terra:~/n8force ❯ _ */
/* The path grows left to right; the prompt stays anchored at the bar's right edge. */
.prompt-line { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
:root .window-bar .prompt-line .breadcrumb { padding-right: 10px; }
.prompt-line #terminal { flex: 0 1 260px; min-width: 150px; margin-left: auto; padding-right: 18px; }
.prompt-line #command { max-width: none; flex: 1; }
.workspace > .command-response { width: auto; margin: 0; padding: 10px var(--content-x, 42px); border-bottom: 1px solid var(--edge); background: color-mix(in srgb, var(--panel) 92%, transparent); font-size: 11px; }
@media (min-width: 721px) {
  .workspace > .command-response { padding-left: calc(var(--explorer-width) + var(--content-x, 42px)); }
}
@media (max-width: 720px) {
  .prompt-line #terminal { flex-basis: 100%; margin-left: 0; padding: 0 12px 10px; }
}