/* The Xiphion register, the Measured Atom: void ground, ice ink, one signal (the kernel's fire)
   for the active state and the primary action only, monospaced notation, 1 px hairlines.
   No gold, no serif display, no glow, no blur, no blinking. Loaded last in every room
   (Studio, Apex, Marks, Mark). It changes the chrome only: the works keep their own colours
   (--night, --black, --lilac, --rule-gold, --g*), which the exports read from the root. */
:root {
  --void: #05070a; --void-2: #080b0f; --ice: #e6eef2; --fire: #ff8a2e;
  --ice-2: #9fb3bf; --ice-3: #5d7280; --ice-72: rgba(230, 238, 242, 0.72); --ice-50: rgba(230, 238, 242, 0.5); --ice-32: rgba(230, 238, 242, 0.32);
  --ice-12: rgba(230, 238, 242, 0.12); --ice-06: rgba(230, 238, 242, 0.06); --ice-03: rgba(230, 238, 242, 0.03);
  --shade: rgba(5, 7, 10, 0.86);
  --bg: var(--void); --tx: var(--ice); --tx2: var(--ice-2); --mute: var(--ice-3); --dim: var(--ice-32);
  --glass: transparent; --glass-hi: var(--ice-03); --glass-edge: var(--ice-12);
  --n1: var(--ice); --n2: var(--ice-72); --n3: var(--ice-50); --n4: var(--ice-32);
  --neon: var(--fire); --neon-soft: transparent; --glow: none; --signal: var(--fire); --focus: var(--ice);
  --display: var(--mono); --serif: var(--sans);
  --r: 2px; --track: 0.14em;
  --sphere-xiphiah: #ff2418; --sphere-xiphion: var(--fire); --sphere-xiphirium: #ff1f92;
}
html, body, body { background: var(--bg); color: var(--tx); }
.aura { display: none; }

/* Notation: every label monospaced, upper case, 0.14em. */
.k, .sect, .status, button, .rooms a, .inst b, .kbtn, .gifrow .glab, .field > span, .field > label,
.neg span, .pset dt, .command .cg, .pc .fam, .pc .src, .opt small, .read, .menu > summary { letter-spacing: var(--track); }
.sect b, summary .gn, .fam .cap b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--dim); }

/* Panels: hairline-ruled fields on the void. */
.glass { background: transparent; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--ice-12); -webkit-backdrop-filter: none; backdrop-filter: none; }
.glass::before, .glass::after { display: none; }
.stage, .card .win { background-image: none; }

/* The house shell, as xiosophy draws it around every room: the bar (sphere, XIPHION wordmark,
   role, the engine's rooms) and the foot (the three doors). Static here because these pages are
   proxied and cannot take the React layout. */
.room-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; padding: 22px clamp(16px, 2.4vw, 28px) 18px; border-bottom: 1px solid var(--ice-12); }
.room-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ice); text-decoration: none; min-width: 0; }
.room-sphere { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sphere, var(--fire)); }
.room-wordmark { display: block; flex: none; height: 12px; width: auto; aspect-ratio: 1644.76 / 139.19; color: var(--ice); }
.room-role, .room-nav a, .room-doors span { font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; }
.room-role { color: var(--ice-3); white-space: nowrap; }
.room-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; margin-left: auto; }
.room-nav a { padding: 4px 0; color: var(--ice-2); text-decoration: none; border-bottom: 1px solid transparent; }
.room-nav a:hover { color: var(--ice); }
.room-nav a[aria-current="page"] { color: var(--ice); border-bottom-color: var(--fire); }
.room-foot { border-top: 1px solid var(--ice-12); margin-top: 8px; }
.room-doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.room-doors a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 10px; padding: 18px clamp(16px, 2.4vw, 28px); color: var(--ice); text-decoration: none; }
.room-doors a + a { border-left: 1px solid var(--ice-12); }
.room-doors a:hover { background: var(--ice-03); }
.room-doors b { font: 500 11px/1 var(--mono); letter-spacing: 0.24em; }
.room-doors span { grid-column: 2; color: var(--ice-3); }
.room-doors a[aria-current="page"] span { color: var(--ice-2); }
.door-xiphiah { --sphere: var(--sphere-xiphiah); } .door-xiphion { --sphere: var(--sphere-xiphion); } .door-xiphirium { --sphere: var(--sphere-xiphirium); }
@media (max-width: 760px) {
  .room-role { display: none; }
  .room-nav { width: 100%; justify-content: flex-start; margin-left: 0; gap: 6px 16px; }
  .room-doors { grid-template-columns: minmax(0, 1fr); }
  .room-doors a + a { border-left: 0; border-top: 1px solid var(--ice-12); }
}
/* The locked bench keeps one screen: the shell takes its rows, the bench the rest. */
@media (min-width: 1181px) and (min-height: 640px) {
  .room-bar, .room-foot { flex: none; }
  .room-bar { padding-block: 16px 14px; }
  .room-foot { margin-top: 0; }
  .room-doors a { padding-block: 12px; }
}
.focus .room-bar, .focus .room-foot { display: none; }
.bar { margin-top: clamp(12px, 1.8vw, 22px); }
.where .v { font: 400 11px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--tx2); }
.instruments, .rooms, .gtabs, .families { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.inst, .rooms a, .gtab, .fambtn { border-radius: 1px; }
.inst:hover, .rooms a:hover, .gtab:hover { background: var(--ice-03); }
.inst[aria-selected="true"], .rooms a[aria-current="page"], .gtab[aria-selected="true"], .fambtn[aria-pressed="true"] { color: var(--fire); background: transparent; box-shadow: inset 0 -1px 0 var(--fire); }
.inst[aria-selected="true"] small, .fambtn[aria-pressed="true"] small { color: var(--mute); }
.gtab .gt { font: 500 10px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; }
.status.ok::before { width: 5px; height: 5px; border-radius: 50%; background: var(--ice-50); box-shadow: none; }

/* Buttons: hairline by default, ice for the strong, fire for the one primary action. */
button { border-radius: var(--r); background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1px var(--ice-12); }
button:hover { background: var(--ice-06); }
button.signal, button.neon, button.gold { background: transparent; color: var(--tx); box-shadow: inset 0 0 0 1px var(--ice-32); filter: none; letter-spacing: var(--track); }
button.signal:hover, button.neon:hover { background: var(--ice-06); }
#keep, #refine { background: var(--fire); color: var(--void); box-shadow: none; }
#keep:hover, #refine:hover { background: var(--fire); opacity: 0.9; }
.refining #refine { animation: none; opacity: 0.6; }
@keyframes kept { 30% { transform: scale(1.04); } }
#compare[aria-pressed="true"] { background: var(--ice); color: var(--void); }
#play[aria-pressed="true"], #focus[aria-pressed="true"], .btn[aria-pressed="true"], .pc button.done { background: transparent; color: var(--fire); box-shadow: inset 0 0 0 1px var(--fire); }
.pc .copy { background: var(--ice); color: var(--void); }
kbd { border-radius: 1px; background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.kbtn .count:not(:empty) { border-radius: 1px; color: var(--tx); background: var(--ice-12); }
:is(button, input, a, .chip, select, textarea):focus-visible { outline: 1px solid var(--ice); outline-offset: 2px; }

/* Controls: hairline tracks, a still thumb, fire only where something is chosen. */
.group, .pgroup { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.group[open] { background: transparent; }
summary .gt, .pghead span { font: 500 11px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; }
.ctl { border-top-color: var(--ice-06); }
.ctl.range.moved .name::after { width: 4px; height: 4px; background: var(--fire); box-shadow: none; }
.val, .valbox, .seed input { border-radius: 1px; background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.valbox { box-shadow: inset 0 0 0 1px var(--ice-50); }
.track::before { top: 10px; height: 1px; border-radius: 0; box-shadow: none; background: linear-gradient(var(--ice-72), var(--ice-72)) 0 0 / var(--p) 100% no-repeat, var(--ice-12); }
.track .tick { top: 6px; width: 1px; height: 10px; margin-left: 0; background: var(--ice-50); }
.track input::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: 5.5px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 3px var(--void); }
.track input::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 0 3px var(--void); }
.track input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--void), 0 0 0 4px var(--ice); }
.chip, .sg { border-radius: 1px; background: transparent; }
.chip[aria-checked="true"], .pgroup .chip[aria-pressed="true"], .files .gifrow .chip[aria-checked="true"] { background: transparent; color: var(--fire); box-shadow: inset 0 0 0 1px var(--fire); }
.switch { background: transparent; box-shadow: inset 0 0 0 1px var(--ice-32); }
.switch i { background: var(--ice-50); }
.switch[aria-checked="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--fire); }
.switch[aria-checked="true"] i { background: var(--fire); }
.hint, .keys, .ask .note, .brief .note, .stagebar #motionLine { font-family: var(--sans); }

/* Inputs: hairline fields, sans text. */
.askrow input, .field textarea, .field input, .lrename, .prompt { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.askrow input { font: 400 15px/1.3 var(--sans); }
.field textarea { font: 400 18px/1.45 var(--sans); }
.askrow input:focus, .field textarea:focus, .field input:focus { box-shadow: inset 0 0 0 1px var(--ice-50); }
.fmtrow select { border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--ice-12);
  background: linear-gradient(45deg, transparent 50%, var(--mute) 50%) calc(100% - 13px) 52% / 4px 4px no-repeat, linear-gradient(-45deg, transparent 50%, var(--mute) 50%) calc(100% - 9px) 52% / 4px 4px no-repeat, transparent; }
.fmtrow option, .fmtrow optgroup { background: var(--void); }
.rail, .panel, #panel, .lnav, .lworks, .command ol, .list { scrollbar-color: var(--ice-12) transparent; }
.rail::-webkit-scrollbar-thumb, #panel::-webkit-scrollbar-thumb { background: var(--ice-12); }

/* Studio: the deck and the easel. The card itself is the work, so it keeps its own face. */
.thumb { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.thumb:hover { background: var(--ice-03); }
.thumb b { font: 500 10px/1 var(--mono); letter-spacing: var(--track); color: var(--mute); }
.thumb span span { font-family: var(--mono); color: var(--tx2); }
.thumb[aria-current="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--fire); }
.thumb[aria-current="true"] span span { color: var(--tx); }
.rail > .sect { background: var(--void); box-shadow: 0 1px 0 var(--ice-06); }
.card .num, .card .plate b { font-family: "Newsreader", Georgia, serif; }
.card { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.7)); }
.well, .focus .well { background: none; }
.menu > summary { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); letter-spacing: var(--track); }
.menu[open] > summary { background: var(--ice-06); }
.menu-pop { border-radius: var(--r); background: var(--void-2); box-shadow: inset 0 0 0 1px var(--ice-12); }
.gifrow, .panel .seed { border-top-color: var(--ice-06); }
.files .gifrow .chips { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }

/* Sheets: collections, history, the index. Solid void, no blur behind. */
dialog.sheet, .command { border-radius: var(--r); background: var(--void-2); box-shadow: inset 0 0 0 1px var(--ice-12); }
dialog.sheet::backdrop, .command::backdrop { background: var(--shade); -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog.sheet h2 { font: 400 clamp(20px, 2.4vw, 26px)/1.15 var(--sans); letter-spacing: -0.005em; }
dialog.sheet h3 { font: 400 18px/1.2 var(--sans); }
dialog.sheet .armed, .library .del:hover { color: var(--tx); background: transparent; box-shadow: inset 0 0 0 1px var(--ice); }
.lcol, .lwork, .hrow, .lmain { border-radius: var(--r); }
.lcol i, .lwork img, .hrow canvas { border-radius: 1px; }
.lcol[aria-current="true"], .library .entry[aria-current="true"] { background: transparent; box-shadow: inset 0 0 0 1px var(--fire); }
.lmain, .hrow { background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.lwork b { font: 500 10.5px/1.25 var(--mono); letter-spacing: 0.08em; color: var(--tx); }
.lx { background: var(--void); }
.library .empty p:first-child { font: 400 22px/1.2 var(--sans); }
.command input { font: 400 18px/1.2 var(--sans); border-bottom-color: var(--ice-12); }
.command .ci { border-radius: 1px; }
.command .ci[aria-selected="true"] { background: var(--ice-06); box-shadow: inset 1px 0 0 var(--fire); }

/* Apex. */
.library .entry, .pc, .emptybrief { border-radius: var(--r); background: transparent; box-shadow: inset 0 0 0 1px var(--ice-12); }
.pc::before, .pc[data-family="design"]::before, .pc[data-family="video"]::before { display: none; }
.pc header b { font: 500 11px/1 var(--mono); letter-spacing: var(--track); text-transform: uppercase; }
.pc .fam, .pc .src { border-radius: 1px; }
.pc .src.master { color: var(--fire); background: transparent; box-shadow: inset 0 0 0 1px var(--fire); }
.ptext { border-radius: 1px; background: var(--ice-03); }
.pnote { font: 400 13px/1.45 var(--sans); color: var(--tx2); }
.emptybrief b { font: 400 20px/1.2 var(--sans); }

/* Marks and the Mark: the plates and the 108 are the works; only their frames change. */
.btn { border-radius: var(--r); background: transparent; border-color: var(--ice-12); }
.btn:hover { border-color: var(--ice-32); }
.prompt { border: 0; }
.prompt::before { color: var(--mute); }
.opt { border-radius: 1px; }
.opt:hover, .opt.hot { background: var(--ice-03); }
.opt[aria-selected="true"]::before { background: var(--fire); box-shadow: none; }
.plate { border-radius: 1px; }
.fam .cap span { font-family: var(--mono); font-size: 11px; }
.bench button, .bar button, dialog button, .files .gifrow .chip, .files .menu > summary, .headbtn, .askrow button, .files button { border-radius: var(--r); }

/* ── Easier (2026-10-20): the essentials in view, the rest in one drawer ── */
.sect > b { display: none; }
.panel .hint, .panel .keys { display: none; }
.bar .where[hidden] { display: none; }
.stagebar #motionLine { display: none; }
.edit-steps { display: inline-flex; gap: 4px; }
.edit-steps #undo, .edit-steps #redo { min-width: 34px; padding-inline: 8px; font-size: 15px; line-height: 1; letter-spacing: 0; }
.files .more { margin-top: 10px; border-top: 1px solid var(--ice-06); }
.files .more > summary { list-style: none; cursor: pointer; padding: 10px 2px 0; font: 400 10px/1.4 var(--mono); letter-spacing: var(--track); text-transform: uppercase; color: var(--tx2); }
.files .more > summary::-webkit-details-marker { display: none; }
.files .more > summary:hover { color: var(--ice); }
.more-body { display: grid; gap: 10px; padding-top: 10px; }
.more-body .fmtrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
.more-body .gifrow { margin: 0; padding: 0; border: 0; }
.more-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
@media (min-width: 1181px) and (min-height: 640px) {
  .files .actions { grid-template-columns: 1fr 1fr; }
  .files .more[open] .more-body { max-height: 38vh; overflow-y: auto; }
}
.bar .where[hidden] + .instruments { margin-left: 0; }
@media (min-width: 761px) { .bar #cmdOpen { margin-left: auto; } }
@media (max-width: 760px) { .instruments .inst small, .instruments .inst span { display: none; } }