/* Quiet shared polish; scene geometry and individual palettes stay local. */
.studio-ready { -webkit-font-smoothing: antialiased; }
.studio-ready :where(button, input, select, textarea, summary, a):focus-visible {
  outline: 2px solid var(--accent, #9de5ce);
  outline-offset: 3px;
}
.studio-ready :where(button, summary) { -webkit-tap-highlight-color: transparent; }
.studio-ready [data-studio-panel] {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #909a9c55 transparent;
  overscroll-behavior: contain;
  border-radius: 16px;
  box-shadow: 0 12px 42px #0002, inset 0 1px 0 #ffffff0a;
}
.studio-ready [data-studio-panel] :where(button, select, input:not([type=checkbox]):not([type=radio]):not([type=range])) { min-height: 32px; }
.studio-ready [data-studio-panel] :where(input[type=range]) { min-height: 24px; cursor: ew-resize; }
.studio-ready [data-studio-panel] :where(button) { touch-action: manipulation; }
/* Preserve layout, canvas dimensions and scroll position while concealing controls. */
.studio-ready [data-studio-panel].studio-concealed,
.studio-ready [data-studio-panel].studio-concealed * { visibility: hidden !important; pointer-events: none !important; }
.studio-ready [data-studio-panel][data-studio-layout="flow"].studio-concealed { display: none !important; }
.studio-switch {
  position: fixed !important;
  z-index: 2147483000 !important;
  inset: auto max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) auto !important;
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
}
.studio-switch .studio-toggle {
  all: initial;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #11191ef2;
  box-shadow: 0 4px 20px #0003, inset 0 1px 0 #ffffff0a;
  color: #f2f4f2;
  font: 500 12px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 160ms ease, border-color 160ms ease;
}
.studio-switch .studio-toggle:hover { background: #263239; border-color: #ffffff70; }
.studio-switch .studio-toggle:focus-visible { outline: 2px solid #a3efd4; outline-offset: 4px; }
@media (max-width: 640px) {
  :where(.studio-ready [data-studio-panel]) { max-width: calc(100vw - 24px); max-height: calc(100svh - 90px); overflow: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-ready *, .studio-ready *::before, .studio-ready *::after { scroll-behavior: auto !important; }
  .studio-switch .studio-toggle { transition: none; }
}
@media (forced-colors: active) {
  .studio-switch .studio-toggle { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .studio-switch .studio-toggle:focus-visible { outline-color: Highlight; }
  :root.studio-ready :focus-visible { outline: 3px solid Highlight; outline-offset: 3px; }
  :root.studio-ready :is(button, input, select, textarea, summary, [data-studio-panel]) { border-color: ButtonText; }
  :root.studio-ready [aria-pressed="true"] { outline: 2px solid Highlight; }
  :root.studio-ready a { text-decoration: underline; }
}
.studio-ready [data-studio-panel] :where(button, select) { border-radius: 8px; font-size: max(12px, .75rem); }
.studio-ready [data-studio-panel] :where(label, .control-label) { font-size: max(12px, .75rem); line-height: 1.5; }
.studio-ready [data-studio-panel] :where(button:disabled) { cursor: not-allowed; opacity: .5; }
.studio-ready [data-studio-panel] :where(button:not(:disabled):active) { filter: brightness(1.15); }
.studio-ready [data-studio-panel] :where(h1, h2, h3) { text-wrap: balance; }

/* ---- Families. Each prototype opts in with one body attribute; nothing below applies without it. ---- */

/* body[data-field]: the evolution and ecology studies (evo-nn/, evolution/). */
body[data-field] {
  --field-ink: #edf2ec;
  --field-muted: #9caeaa;
  --field-accent: #a8dcc7;
  --field-line: #adc7bf24;
  --field-panel: #101c20ed;
  color: var(--field-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color-scheme: dark;
}
body[data-field="mechanics"] { --field-accent: #e8c99a; --field-muted: #b9ada0; --field-panel: #201c18ef; --field-line: #dbc29c2b; }
body[data-field="runner"], body[data-field="comparison"], body[data-field="underworld"] { --field-accent: #a8c8ee; --field-muted: #9baec5; --field-panel: #111b2beb; --field-line: #9ebcdd29; }
body[data-field="signal"] { --field-accent: #c3b6f0; --field-muted: #b5acc3; --field-panel: #1b1825eb; --field-line: #d0bbee26; }
body[data-field] :is(button,input,select,textarea) { font: inherit; }
body[data-field] button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid var(--field-line);
  border-radius: 9px;
  background: #ffffff07;
  color: var(--field-ink);
  font-size: 12px;
  font-weight: 550;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease;
}
body[data-field] button:hover { background: #ffffff11; border-color: var(--field-accent); color: #fff; box-shadow: none; }
body[data-field] button:active { background: #ffffff1c; }
body[data-field] :is(button,input,select,summary):focus-visible { outline: 2px solid var(--field-accent); outline-offset: 3px; }
body[data-field] input[type="range"] { accent-color: var(--field-accent); min-height: 28px; max-width: 100%; cursor: pointer; }
body[data-field] input[type="range"]::-webkit-slider-thumb { background: var(--field-accent); }
body[data-field] input[type="range"]::-webkit-slider-runnable-track { background: #d7e5df25; }
body[data-field] :is(.hud,.panel[data-studio-panel],#ui,.stats[data-field-panel]) {
  box-sizing: border-box;
  width: min(278px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid var(--field-line);
  border-radius: 16px;
  color: var(--field-muted);
  background: linear-gradient(140deg,#ffffff05,transparent 70%), var(--field-panel);
  box-shadow: 0 16px 48px #00000032, inset 0 1px #ffffff04;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 12px;
}
body[data-field] .hud { top: 20px; left: 20px; max-height: calc(100svh - 88px); overflow-y: auto; }
body[data-field] :is(.hud .row,.panel .stat-row) { gap: 12px; margin-bottom: 7px; align-items: baseline; font-size: 12px; }
body[data-field] :is(.val,.row>span[id],.stat-row>span[id],.stat-row b,#ui span[id]) {
  color: var(--field-ink);
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 500;
  text-shadow: none;
}
body[data-field] :is(.highlight,.c-king) { color: var(--field-accent); text-shadow: none; }
body[data-field] :is(.hud>.header,.hud>.title,.panel>h1,#ui>h3,.field-title) {
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--field-line);
  color: var(--field-ink);
  font: 500 16px/1.25 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.025em;
  text-transform: none;
}
body[data-field] .field-kicker { display: block; margin-bottom: 7px; color: var(--field-muted); font: 10px/1.4 ui-monospace,monospace; letter-spacing: .12em; text-transform: uppercase; }
body[data-field] :is(.control-group,.legend,.field-notes) { border-color: var(--field-line); }
body[data-field] :is(.control-label,label,.legend,.field-notes) { color: var(--field-muted); font-size: 12px; }
body[data-field] .control-label { margin-top: 10px; }
body[data-field] :is(.btn-group,.btn-grp,.btn-row) { gap: 6px; }
body[data-field] .field-notes { margin: 14px 0 0; border-top: 1px solid var(--field-line); padding-top: 8px; pointer-events: auto; }
body[data-field] .field-notes>summary { width: fit-content; min-height: 28px; cursor: pointer; font-size: 11px; color: var(--field-muted); }
body[data-field] .field-notes .legend { padding: 8px 0 0; margin: 0; border: 0; line-height: 1.7; }
body[data-field] :is(.good,.herb-color,.c-herb) { color: #a6d4bd; }
body[data-field] :is(.bad,.carn-color,.c-carn) { color: #e9a4a0; }
body[data-field] .c-nutri { color: #d3b0e5; }
body[data-field] .phase-box { border-radius: 8px; font-size: 10px; letter-spacing: .06em; box-shadow: none; }
body[data-field] .p-survive { color: #b6dec4; background: #284b384a; border-color: #a3d3b633; }
body[data-field] .p-mate { color: #e2c1ef; background: #6042693a; border-color: #d6b1e333; }
body[data-field] .progress-container { height: 3px; background: #ffffff10; }
body[data-field] .progress-bar { background: var(--field-accent); }
body[data-field="ecology"] { touch-action: auto; }
body[data-field="ecology"] #ui-layer { left: 20px; top: 20px; gap: 10px; max-height: calc(100svh - 88px); overflow-y: auto; }
body[data-field="ecology"] #ui-layer .panel { min-width: 0; }
body[data-field="ecology"] #controls { display: flex; gap: 6px; flex-wrap: wrap; left: 20px; bottom: 20px; max-width: calc(100vw - 125px); }
body[data-field="ecology"] #controls button { margin: 0; background: var(--field-panel); }
body[data-field="mechanics"] #ui { top: 20px; left: 20px; width: auto; min-width: 185px; line-height: 1.8; }
body[data-field="mechanics"] #controls { top: 20px; right: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--field-panel); border: 1px solid var(--field-line); border-radius: 13px; font-size: 12px; color: var(--field-muted); }
body[data-field="runner"],body[data-field="comparison"] { background: radial-gradient(ellipse at 50% 0,#202c40 0, #0b111d 65%); padding: clamp(18px,4vw,48px) clamp(14px,3vw,40px) 80px; gap: 20px; }
body[data-field="runner"] { flex-direction: column; }
body[data-field="runner"] .field-heading { text-align: center; margin: 0; }
body[data-field="runner"] :is(h1,.field-heading h1) { color: var(--field-ink); font: 450 clamp(24px,4vw,40px)/1.15 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing: -.045em; margin: 0; }
body[data-field="runner"] .field-heading p { margin: 9px 0 0; color: var(--field-muted); font-size: 12px; }
body[data-field="runner"] .container { display: flex; gap: 14px; padding: 0; background: none; border: 0; box-shadow: none; width: min(1240px,100%); justify-content: center; align-items: stretch; }
body[data-field="runner"] .container canvas { min-width: 0; border: 1px solid var(--field-line); border-radius: 17px; box-shadow: 0 16px 44px #00000024; }
body[data-field="runner"] .container #gameCanvas { flex: 2; width: 0; object-fit: contain; background: #121925; }
body[data-field="runner"] .container #networkCanvas { flex: 1; width: 0; object-fit: contain; background: #0d1420; }
body[data-field="runner"] :is(.controls,.ui-overlay,.stat-row) { width: min(900px,100%); margin: 0; color: var(--field-muted); }
body[data-field="runner"] .controls { padding: 16px 20px; border: 1px solid var(--field-line); background: var(--field-panel); border-radius: 15px; justify-content: space-between; }
body[data-field="runner"] .stat-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; font-size: 11px; }
body[data-field="runner"] .stat-row b { margin-left: 5px; }
body[data-field="runner"] .stat-box { background: #ffffff04; border: 1px solid var(--field-line); border-radius: 10px; padding: 10px 14px; text-align: center; }
body[data-field="runner"] .expert-vis { color: var(--field-muted); gap: 20px; letter-spacing: .06em; font-size: 10px; }
body[data-field="runner"] .gate-bar { border-radius: 6px; overflow: hidden; background: #ffffff0a; }
body[data-field="runner"] .gate-fill { background: var(--field-accent); }
body[data-field="runner"] .stats[data-field-panel] { position: static; width: min(800px,100%); display: grid; grid-template-columns: minmax(0,1fr) 180px; align-items: center; gap: 15px; order: 1; }
body[data-field="runner"] .field-metrics { display: flex; flex-wrap: wrap; gap: 8px 18px; min-width: 0; }
body[data-field="runner"] .field-metrics>span { white-space: nowrap; }
body[data-field="runner"] .stats[data-field-panel] #netViz { width: 180px; max-width: 100%; height: auto; border: 0; border-radius: 9px; margin: 0; }
body[data-field="runner"] .stats[data-field-panel]+canvas { order: 0; }
body[data-field="runner"] .stats[data-field-panel]~.controls { order: 2; }
body[data-field="comparison"] :is(h1,h2) { background: none; color: var(--field-ink); letter-spacing: -.035em; text-shadow: none; }
body[data-field="comparison"] h1 { font-size: clamp(23px,3.4vw,36px); font-weight: 500; line-height: 1.2; }
body[data-field="comparison"] h2 { font-size: 15px; font-weight: 500; padding-bottom: 12px; border-color: var(--field-line); }
body[data-field="comparison"] .glass-panel { border-radius: 17px; background: var(--field-panel); border-color: var(--field-line); box-shadow: 0 16px 40px #00000020; padding: 20px; }
body[data-field="comparison"] :is(.canvas-container,#gameCanvas) { border-radius: 19px; border-color: var(--field-line); box-shadow: 0 22px 60px #00000025; }
body[data-field="comparison"] :is(#epigenetics-log,#event-log) { font-size: 12px; line-height: 1.6; }
body[data-field="comparison"] :is(#epigenetics-log,#event-log)>div { border-radius: 8px; }
body[data-field="comparison"] .canvas-container>div { font-size: 10px; letter-spacing: .045em; border-radius: 7px; backdrop-filter: blur(8px); }
body[data-field="comparison"] .slider-row { gap: 12px; font-size: 12px; }
body[data-field="underworld"] { background: #0a1019; }
body[data-field="underworld"] header { background: #111b29; border-bottom: 1px solid var(--field-line); padding: 14px 20px; gap: 12px; }
body[data-field="underworld"] h1 { font-size: 18px; font-weight: 500; letter-spacing: -.03em; }
body[data-field="underworld"] #workspace { gap: 12px; padding: 14px; grid-template-rows: minmax(300px,3fr) minmax(180px,2fr); overflow: auto; }
body[data-field="underworld"] .panel { border: 1px solid var(--field-line); border-radius: 14px; overflow: hidden; background: #111925; }
body[data-field="underworld"] .panel-title { padding: 8px 12px; background: #111b29e8; border-bottom: 1px solid var(--field-line); color: var(--field-muted); font: 11px/1.4 ui-monospace,monospace; letter-spacing: .025em; border-radius: 0 0 8px 0; }
body[data-field="underworld"] #editor-container { display: grid; grid-template-rows: minmax(0,1fr) auto; }
body[data-field="underworld"] #config-fallback { height: 100%; min-height: 0; background: #101722; color: #c5d7ef; padding: 40px 18px 16px; line-height: 1.65; font: 12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
body[data-field="underworld"] #config-status { font: 11px/1.4 ui-monospace,monospace; padding-inline: 16px; }
@media(max-width:680px) {
  body[data-field] .hud,body[data-field="ecology"] #ui-layer { left: 12px; top: 12px; }
  body[data-field="mechanics"] #ui { top: 12px; left: 12px; min-width: 0; padding: 12px; }
  body[data-field="mechanics"] #controls { top: auto; bottom: 20px; left: 12px; right: auto; max-width: calc(100vw - 125px); flex-wrap: wrap; gap: 6px; }
  body[data-field="mechanics"] #controls input { width: 110px; }
  body[data-field="runner"] .container { flex-direction: column; }
  body[data-field="runner"] .container :is(#gameCanvas,#networkCanvas) { width: 100%; flex: none; }
  body[data-field="runner"] .container #networkCanvas { max-height: 160px; }
  body[data-field="runner"] .controls { gap: 12px; padding: 12px; }
  body[data-field="runner"] .stat-row { gap: 8px 15px; }
  body[data-field="underworld"] #workspace { padding: 10px; gap: 10px; }
  body[data-field="underworld"] header>div:first-child { flex-wrap: wrap; gap: 5px!important; }
}
@media(max-width:700px) {
  body[data-field="underworld"] #workspace { grid-template-rows: minmax(300px,4fr) minmax(180px,2fr) minmax(180px,3fr); }
}
@media(max-width:480px) {
  body[data-field="runner"] .stats[data-field-panel] { grid-template-columns: minmax(0,1fr); }
  body[data-field="runner"] .stats[data-field-panel] #netViz { justify-self: center; }
}
@media(prefers-reduced-motion:reduce) { body[data-field] * { transition: none!important; } }

/* body[data-instrument] (+ data-studio-tone): the audio instruments (audio/). */
body[data-instrument] * {box-sizing:border-box }
body[data-instrument] {color:#e6e8e3;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif }
body[data-instrument] h1, body[data-instrument] h2 {letter-spacing:-.045em;font-weight:500;line-height:1.2 }
body[data-instrument] h3, body[data-instrument] h4 {font-weight:500 }
body[data-instrument] button, body[data-instrument] input, body[data-instrument] select, body[data-instrument] textarea {font:inherit }
body[data-instrument] button {min-height:36px;border-radius:7px }
body[data-instrument] button:focus-visible, body[data-instrument] input:focus-visible, body[data-instrument] select:focus-visible, body[data-instrument] textarea:focus-visible, body[data-instrument] summary:focus-visible {outline:2px solid #b9dccd;outline-offset:3px }
body[data-instrument] input[type=range] {accent-color:#b9dccd;min-height:22px }
body[data-instrument] textarea, body[data-instrument] select, body[data-instrument] input[type=number] {max-width:100% }
body[data-instrument] .controls, body[data-instrument] #controls, body[data-instrument] .controls-panel, body[data-instrument] .control-panel, body[data-instrument] .controls-row {min-width:0 }
body[data-instrument] .container, body[data-instrument] .main-container, body[data-instrument] .rack-container, body[data-instrument] #ui-wrapper, body[data-instrument] #canvas-container, body[data-instrument] .canvas-wrapper, body[data-instrument] .scope-container, body[data-instrument] .log-container, body[data-instrument] .velocity-indicator {max-width:100%;min-width:0 }
body[data-instrument] canvas {max-width:100%;touch-action:none }
body[data-instrument] .studio-about {font-size:12px;color:#a3aaa8;max-width:70ch;margin:8px 0 14px }
body[data-instrument] .studio-about summary {cursor:pointer;color:#b5bcb7 }
body[data-instrument] .studio-about .subtitle {margin:10px 0 }
body[data-instrument] .control-group, body[data-instrument] .module {min-width:0 }
body[data-instrument] header {flex-wrap:wrap;gap:12px }
@media(max-width:720px) { body[data-instrument] {height:auto!important;min-height:100dvh;overflow:auto!important;padding:16px!important;justify-content:flex-start!important }
body[data-instrument]>h1, body[data-instrument]>h2 {font-size:24px;margin:10px 0 16px }
body[data-instrument] .container, body[data-instrument] .main-container {height:auto!important;flex-direction:column!important }
body[data-instrument] .scope-container, body[data-instrument] #viz-container {min-height:280px;flex:none!important }
body[data-instrument] .scope-container canvas, body[data-instrument] #viz-container canvas {height:280px }
body[data-instrument] .controls, body[data-instrument] #controls, body[data-instrument] .controls-row {height:auto!important;flex-wrap:wrap;grid-template-columns:1fr 1fr!important;gap:12px!important }
body[data-instrument] .controls-panel, body[data-instrument] .control-panel, body[data-instrument] .rack-panel {width:100%!important;flex:none!important }
body[data-instrument] .rack-panel .patch-list {max-height:180px }
body[data-instrument] .editor-panel {padding:14px 0 }
body[data-instrument] .io-panel {height:auto;min-height:160px;padding:12px 0 }
body[data-instrument] .io-column textarea {min-height:100px }
body[data-instrument] #ui-wrapper {padding:12px }
body[data-instrument] .log-container, body[data-instrument] .velocity-indicator {width:100%!important }
body[data-instrument] .controls, body[data-instrument] .canvas-wrapper, body[data-instrument] #canvas-container {width:100%!important }
body[data-instrument] #controls {margin-inline:0;padding:12px }
body[data-instrument] .controls-row>.module {flex:1 1 150px }
body[data-instrument] .controls>.control-group {min-width:0 }
body[data-instrument] canvas[width] {height:auto }
body[data-instrument] .canvas-wrapper canvas[width], body[data-instrument] .scope-container canvas[width] {height:100% }
body[data-instrument] .btn-group {flex-wrap:wrap }
body[data-instrument] .controls .panel-section {min-width:0 }
body[data-instrument] .play-btn {position:static;margin:12px 0 }
 }
@media(max-width:420px) { body[data-instrument] .controls, body[data-instrument] #controls {grid-template-columns:1fr!important }
body[data-instrument] .controls-row {flex-direction:column }
body[data-instrument] .controls-row>.module {flex:auto }
 }
body[data-instrument] {--studio-accent: #9ddbd3; --studio-wash: #23403e; --studio-line: #344445; --studio-ink: #e8ede7; --studio-muted: #a1b0ac; --bg-color: #0c1216; --panel-color: #151f24; --text-color: var(--studio-ink); --bg: #0c1216; --panel: #151f24; --text: var(--studio-ink); --accent: var(--studio-accent); --accent-color: var(--studio-accent); }
body[data-instrument][data-studio-tone="amber"] {--studio-accent: #e6c99a; --studio-wash: #493c2b; --studio-line: #4b463b; }
body[data-instrument][data-studio-tone="violet"] {--studio-accent: #c8b9eb; --studio-wash: #37334d; --studio-line: #414253; }
body[data-instrument][data-studio-tone="blue"] {--studio-accent: #a4cbe9; --studio-wash: #293e50; --studio-line: #354957; }
body[data-instrument] {--accent: var(--studio-accent); --accent-color: var(--studio-accent); color: var(--studio-ink); background: radial-gradient(ellipse at 50% -35%, var(--studio-wash), transparent 68%), #0c1216; -webkit-font-smoothing: antialiased; }
body[data-instrument] h1, body[data-instrument] h2 {text-transform: none; }
body[data-instrument] > h1, body[data-instrument] > h2 {color: var(--studio-ink); font-size: clamp(24px, 3vw, 36px); margin-block: 8px 16px; }
body[data-instrument] button {min-height: 38px; border-radius: 9px; border-color: var(--studio-line); letter-spacing: .01em; font-weight: 500; text-transform: none; box-shadow: inset 0 1px 0 #ffffff09; transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
body[data-instrument] button:not(:disabled):hover {border-color: var(--studio-accent); box-shadow: inset 0 1px 0 #ffffff12, 0 3px 16px #0003; }
body[data-instrument] button:disabled {opacity: .45; cursor: not-allowed; }
body[data-instrument] button:focus-visible, body[data-instrument] input:focus-visible, body[data-instrument] select:focus-visible, body[data-instrument] textarea:focus-visible, body[data-instrument] summary:focus-visible {outline-color: var(--studio-accent); }
body[data-instrument] button.primary, body[data-instrument] .btn-primary, body[data-instrument] #toggleBtn, body[data-instrument] #start-btn, body[data-instrument] #startBtn, body[data-instrument] #btnStart, body[data-instrument] #activate-btn, body[data-instrument] #renderBtn {background: var(--studio-accent); color: #101b1d; border-color: transparent; text-shadow: none; }
body[data-instrument] input[type="range"] {accent-color: var(--studio-accent); min-height: 24px; cursor: ew-resize; }
body[data-instrument] input[type="checkbox"], body[data-instrument] input[type="radio"] {accent-color: var(--studio-accent); }
body[data-instrument] select, body[data-instrument] textarea, body[data-instrument] input[type="number"], body[data-instrument] input[type="text"] {background: #0d151b; color: #dbe5df; border: 1px solid var(--studio-line); border-radius: 7px; padding: 8px 10px; font-variant-numeric: tabular-nums; }
body[data-instrument] textarea {font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; scrollbar-width: thin; }
body[data-instrument] label {color: #bfcac5; letter-spacing: .01em; }
body[data-instrument] label :is(span, body[data-instrument] output), body[data-instrument] .val-display, body[data-instrument] .value-display {font-variant-numeric: tabular-nums; }
body[data-instrument] .container:not(.main-container) {border-radius: 18px; }
body[data-instrument] .controls, body[data-instrument] #controls, body[data-instrument] .controls-panel, body[data-instrument] .control-panel, body[data-instrument] .controls-row, body[data-instrument] .rack-panel {background-color: #151e23; border-color: var(--studio-line); }
body[data-instrument] .control-group, body[data-instrument] .module {border-color: #334144; }
body[data-instrument] .control-group h3, body[data-instrument] .control-group h4, body[data-instrument] .module h3 {font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--studio-accent); }
body[data-instrument] .control-group:last-child {border-bottom-color: transparent; }
body[data-instrument] .canvas-wrapper, body[data-instrument] .scope-container, body[data-instrument] #canvas-container, body[data-instrument] .zoom-panel {border: 1px solid var(--studio-line); border-radius: 14px; box-shadow: 0 16px 48px #0003, inset 0 1px 0 #ffffff08; }
body[data-instrument] canvas {border-radius: 11px; }
body[data-instrument] .scope-container canvas, body[data-instrument] .canvas-wrapper canvas {border-radius: inherit; }
body[data-instrument] .legend, body[data-instrument] .canvas-label, body[data-instrument] .zoom-label {font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; color: #b5c5bd; }
body[data-instrument] .legend {border-radius: 7px; }
body[data-instrument] .status, body[data-instrument] .status-bar, body[data-instrument] .log-container {color: var(--studio-muted); font-variant-numeric: tabular-nums; }
body[data-instrument] .status-bar {border-top-color: var(--studio-line); padding-top: 12px; }
body[data-instrument] header {border-color: var(--studio-line); }
body[data-instrument] .studio-about, body[data-instrument] .studio-patch-io {border: 1px solid #354449; border-radius: 10px; background: #10191e; color: var(--studio-muted); font-size: 12px; line-height: 1.7; margin: 10px 0 14px; padding: 10px 13px; }
body[data-instrument] .studio-about {max-width: 76ch; }
body[data-instrument] .studio-about summary, body[data-instrument] .studio-patch-io summary {color: #c4d1ca; cursor: pointer; font-size: 11px; letter-spacing: .04em; }
body[data-instrument] .studio-patch-io[open] summary {margin-bottom: 12px; }
body[data-instrument] .studio-patch-io textarea {display: block; width: 100%; min-height: 120px; margin-block: 10px; }
body[data-instrument] #overlay {background: #070d12b8; backdrop-filter: blur(2px); }
body[data-instrument] #overlay #start-btn, body[data-instrument] #start-overlay #init-btn {padding: 14px 26px; font-size: 14px; box-shadow: 0 12px 60px #0007, 0 0 0 8px #ffffff04; }
body[data-instrument] #start-overlay {background: #070d12d9; backdrop-filter: blur(5px); }
body[data-instrument] #start-overlay h1 {font-size: clamp(30px, 5vw, 52px); margin: 0 0 12px; }
body[data-instrument] #start-overlay p {color: var(--studio-muted); max-width: 35ch; text-align: center; }
body[data-instrument] .rack-header {padding: 16px; background: #10191e; font-size: 11px; letter-spacing: .08em; }
body[data-instrument] .patch-item {margin: 5px 8px; border: 1px solid transparent; border-radius: 9px; }
body[data-instrument] .patch-item.active {border: 1px solid var(--studio-line); background: #23343a; }
body[data-instrument] .patch-item button:not(.btn-mini) {text-align: left; background: transparent; border: 0; box-shadow: none; }
body[data-instrument] .patch-algo {letter-spacing: .12em; }
body[data-instrument] .io-panel.studio-patch-io {display: block; height: auto; min-height: 0; flex: none; margin: 0; border-radius: 0; padding: 12px 20px; }
body[data-instrument] .io-panel.studio-patch-io textarea {min-height: 110px; max-height: 22vh; resize: vertical; }
body[data-instrument] .touch-keys {gap: 5px; padding-block: 10px; }
body[data-instrument] .touch-keys button {border-color: #485950; background: #dfe6d9; color: #152623; box-shadow: inset 0 -3px 0 #0002; }
body[data-instrument][data-instrument="offline-render"] .canvas-label {background: transparent; color: #b4c5c0; padding: 4px 0; }
body[data-instrument][data-instrument="expression-mapper"] .control-group {background: #19242b; border-radius: 10px; }
body[data-instrument][data-instrument="midi-keyboard"] #pianoCanvas {box-shadow: 0 18px 45px #0005; }
body[data-instrument][data-instrument="waveform-looping"] .zoom-label {background: #121e23d9; padding: 4px 8px; border-radius: 0 0 6px 0; }
@media (prefers-reduced-motion: reduce) { body[data-instrument] *, body[data-instrument] *::before, body[data-instrument] *::after {transition: none !important; animation: none !important; }
 }

/* body[data-colony]: the ant colonies (ants/). */
body[data-colony] {
  --text-main: #e8edf3;
  --text-muted: #a1adbd;
  --panel-border: #b5c5d521;
  --panel-bg: #18202d;
  --muted: #a6afc0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body[data-colony] :is(button,select,input) { font: inherit; }
body[data-colony] button { min-height: 36px; font-size: 12px; font-weight: 500; border-radius: 9px; }
body[data-colony] :is(button,select,summary,input):focus-visible { outline: 2px solid #c5d7f0; outline-offset: 3px; }
body[data-colony] :is(.card,.panel) { border-color: #b5c5d521; }
body[data-colony] :is(.stat-value,.stat,.score,.team-score,.summary-chip strong,.kv strong) { font-variant-numeric: tabular-nums; }
body[data-colony] :is(.section-title,.card h2) { font-size: 10px; letter-spacing: .12em; font-weight: 500; color: var(--text-muted); }
body[data-colony] .field-guide>summary { cursor: pointer; color: #dbe3ee; font-size: 12px; min-height: 28px; padding: 4px 0; }
body[data-colony] .field-guide[open]>summary { margin-bottom: 10px; }
body[data-colony="duel"] #left-panel { width: 282px; min-width: 282px; padding: 20px 16px; gap: 22px; }
body[data-colony="duel"] #top-bar { height: auto; min-height: 94px; flex-shrink: 0; margin: 16px; padding: 16px 20px; border: 1px solid var(--panel-border); border-radius: 16px; background: linear-gradient(110deg,#29232b,#192338); }
body[data-colony="duel"] .race-header { align-items: center; gap: 12px; font-size: 12px; }
body[data-colony="duel"] .progress-container { height: 5px; margin: 13px 0; }
body[data-colony="duel"] .nodes-status { font-size: 11px; }
body[data-colony="duel"] .card { padding: 12px; font-size: 11px; }
body[data-colony="duel"] .victory-text,body[data-colony="expansion"] .victory-text { font: 500 clamp(22px,5vw,40px)/1.2 system-ui,sans-serif; letter-spacing: -.035em; border: 1px solid #c5d7f02a; border-radius: 16px; background: #141c2ce8; box-shadow: 0 24px 80px #0005; text-shadow: none; max-width: calc(100vw - 32px); }
body[data-colony="expansion"] #left-panel { width: 304px; min-width: 304px; padding: 24px 16px; gap: 26px; box-shadow: none; }
body[data-colony="expansion"] :is(.civ-row,.grid-header) { grid-template-columns: 14px 1fr 33px 33px 43px; column-gap: 4px; }
body[data-colony="expansion"] .civ-row { padding: 11px 9px; border-left-width: 2px; border-radius: 9px; background: #ffffff03; }
body[data-colony="expansion"] .civ-row:hover { background: #ffffff0b; }
body[data-colony="expansion"] #hud-overlay { left: 20px; bottom: 20px; padding: 12px 15px; border-color: var(--panel-border); border-radius: 13px; color: var(--text-muted); background: #131d29dd; font: 11px/1.7 ui-monospace,monospace; }
body[data-colony="ascended"] .topbar { padding: 18px 24px; gap: 14px 24px; background: #111923; box-shadow: none; }
body[data-colony="ascended"] .title-wrap { display: block; }
body[data-colony="ascended"] h1 { font-size: 19px; font-weight: 550; letter-spacing: -.025em; }
body[data-colony="ascended"] .subtitle { margin-top: 5px; color: #a6b3c4; font-size: 11px; }
body[data-colony="ascended"] .controls { gap: 6px; }
body[data-colony="ascended"] .controls button { background: #ffffff04; border-color: #bfd0e326; }
body[data-colony="ascended"] .controls button.primary { background: #b0c7e6; color: #172339; border-color: transparent; }
body[data-colony="ascended"] .main { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 14px 24px 20px; }
body[data-colony="ascended"] .stage-wrap { min-width: 0; }
body[data-colony="ascended"] .main canvas { min-height: 0; height: auto; flex-shrink: 0; aspect-ratio: 1280/760; }
body[data-colony="ascended"] :is(.hud,.score-card) { background: #131d29; border-color: #bfd0e321; box-shadow: none; }
body[data-colony="ascended"] .hud { padding: 10px 14px; }
body[data-colony="ascended"] .pill { font-size: 10px; font-weight: 500; background: transparent; border-color: transparent; padding: 3px 6px; }
body[data-colony="ascended"] .score-track { height: 5px; margin-block: 12px; }
body[data-colony="ascended"] .score-title { letter-spacing: .08em; font-size: 9px; }
body[data-colony="ascended"] .team-score { font-size: 12px; }
body[data-colony="ascended"] .node-strip { padding-top: 8px; }
body[data-colony="ascended"] .footer-note { text-align: center; font-size: 11px; padding-top: 2px; }
body[data-colony="broadcast"] { --panel: #171624d9; --radius: 19px; --radius-sm: 12px; }
body[data-colony="broadcast"] .shell { width: min(1440px,calc(100vw - 40px)); margin: 24px auto 32px; gap: 14px; }
body[data-colony="broadcast"] .topbar { grid-template-columns: 1fr 1.1fr auto; padding: 20px 24px; gap: 20px; }
body[data-colony="broadcast"] .brand h1 { font-size: clamp(22px,2.4vw,32px); font-weight: 500; letter-spacing: -.045em; margin: 4px 0 7px; }
body[data-colony="broadcast"] .brand p { font-size: 12px; margin: 0; }
body[data-colony="broadcast"] .eyebrow { font-size: 9px; font-weight: 500; letter-spacing: .15em; }
body[data-colony="broadcast"] .topbar-center { gap: 8px; }
body[data-colony="broadcast"] .match-status { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 12px; padding: 0; background: none; }
body[data-colony="broadcast"] .match-status strong { font: 24px/1.2 ui-monospace,monospace; letter-spacing: -.05em; }
body[data-colony="broadcast"] .match-status :is(span) { font-size: 11px; }
body[data-colony="broadcast"] .controls { gap: 7px; font-size: 11px; }
body[data-colony="broadcast"] :is(.speed-select,.toggle) { font-size: 11px; }
body[data-colony="broadcast"] .speed-select select { padding: 6px 8px; border-radius: 9px; }
body[data-colony="broadcast"] .control { padding: 7px 11px; }
body[data-colony="broadcast"] .summary-stack { gap: 8px; max-width: 206px; }
body[data-colony="broadcast"] .summary-chip { min-width: 84px; padding: 8px 11px; border-radius: 10px; gap: 4px; }
body[data-colony="broadcast"] .summary-chip span { font-size: 10px; }
body[data-colony="broadcast"] .summary-chip strong { font-size: 13px; }
body[data-colony="broadcast"] .hud-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
body[data-colony="broadcast"] .stage { grid-column: 1/-1; grid-row: 1; height: clamp(360px,55dvh,560px); min-height: 0; padding: 8px; overflow: hidden; }
body[data-colony="broadcast"] #battlefield { min-height: 0; border-radius: 13px; }
body[data-colony="broadcast"] .colony-disclosure { min-width: 0; background: #171624a8; border: 1px solid #ffffff12; border-radius: 13px; }
body[data-colony="broadcast"] .colony-disclosure>summary { cursor: pointer; padding: 12px 18px; font-size: 12px; color: var(--left); }
body[data-colony="broadcast"] .colony-disclosure:last-child>summary { color: var(--right); }
body[data-colony="broadcast"] .colony-card { background: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 8px 18px 20px; }
body[data-colony="broadcast"] .section-header p { font-size: 12px; }
body[data-colony="broadcast"] .section-header h2 { font-size: 17px; font-weight: 500; }
body[data-colony="broadcast"] .feed-entry p { font-size: 12px; }
@media(max-width:1050px) {
  body[data-colony="broadcast"] .topbar { grid-template-columns: 1fr 1fr; }
  body[data-colony="broadcast"] .summary-stack { grid-column: 1/-1; max-width: none; justify-content: center; }
  body[data-colony="broadcast"] .summary-chip { display: flex; align-items: baseline; gap: 8px; }
}
@media(max-width:700px) {
  body[data-colony="duel"] #left-panel,body[data-colony="expansion"] #left-panel { width: min(304px,calc(100vw - 24px)); min-width: 0; padding: 18px; }
  body[data-colony="duel"] #top-bar { margin: 12px; padding: 13px; min-height: 90px; }
  body[data-colony="duel"] .race-header { flex-wrap: wrap; gap: 6px; }
  body[data-colony="duel"] .race-header>span:nth-child(2) { order: 2; flex-basis: 100%; text-align: center; font-size: 9px!important; }
  body[data-colony="duel"] .race-header>span:last-child { margin-left: auto; }
  body[data-colony="duel"] .nodes-status { gap: 8px; font-size: 9px; }
  body[data-colony="ascended"] .topbar { padding: 15px; }
  body[data-colony="ascended"] .main { padding: 10px; }
  body[data-colony="ascended"] .score-title { max-width: 95px; text-align: center; line-height: 1.5; }
  body[data-colony="ascended"] .team-score { font-size: 10px; }
  body[data-colony="ascended"] .node-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body[data-colony="ascended"] .node-chip { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 10px; }
  body[data-colony="broadcast"] .shell { width: calc(100vw - 24px); margin: 12px auto 76px; }
  body[data-colony="broadcast"] .topbar { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  body[data-colony="broadcast"] .brand { text-align: center; }
  body[data-colony="broadcast"] .controls { justify-content: center; }
  body[data-colony="broadcast"] .summary-stack { grid-column: auto; }
  body[data-colony="broadcast"] .hud-grid { gap: 8px; }
  body[data-colony="broadcast"] .colony-disclosure>summary { padding: 12px; }
  body[data-colony="broadcast"] .colony-disclosure[open] { grid-column: 1/-1; }
}
@media(prefers-reduced-motion:reduce) { body[data-colony] * { transition: none!important; } }

/* body[data-compression]: the compression notebooks (compressions/). */
body[data-compression] {color-scheme: dark; --study-ink: #e4ebe3; --study-muted: #a0afa7; --study-line: #33463f; --study-accent: #b8d6ad; }
body[data-compression] {font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--study-ink); background: radial-gradient(ellipse at 40% -35%, #233f34, transparent 70%), #0d1518; }
body[data-compression] h1 {font-family: Georgia, "Times New Roman", serif; font-size: clamp(24px, 3vw, 38px); font-weight: 400; letter-spacing: -.045em; color: #e6eadc; line-height: 1.15; }
body[data-compression] h2, body[data-compression] h3 {font-weight: 500; letter-spacing: -.015em; }
body[data-compression] header {background: #101b1c; border-color: var(--study-line); gap: 16px; }
body[data-compression] button, body[data-compression] input, body[data-compression] select {font: inherit; }
body[data-compression] button {border: 1px solid var(--study-line); border-radius: 8px; min-height: 38px; padding: 9px 14px; font-size: 12px; font-weight: 500; text-transform: none; box-shadow: inset 0 1px 0 #ffffff08; }
body[data-compression] button:not(:disabled):hover {border-color: var(--study-accent); }
body[data-compression] button.primary, body[data-compression] .btn-green, body[data-compression] #btnStart {background: var(--study-accent); color: #17271c; border-color: transparent; }
body[data-compression] button:disabled {cursor: not-allowed; opacity: .4; }
body[data-compression] button:focus-visible, body[data-compression] input:focus-visible, body[data-compression] select:focus-visible, body[data-compression] summary:focus-visible {outline: 2px solid var(--study-accent); outline-offset: 3px; }
body[data-compression] input, body[data-compression] select {accent-color: var(--study-accent); }
body[data-compression] .panel, body[data-compression] .stat-box, body[data-compression] .stats-panel {background: linear-gradient(155deg, #1c2a2b, #141f22); border: 1px solid var(--study-line); border-radius: 14px; box-shadow: inset 0 1px 0 #ffffff05; }
body[data-compression] .stat-box {padding: 16px; }
body[data-compression] .sidebar {background: #101b1e; border-color: var(--study-line); }
body[data-compression] .stat-label, body[data-compression] .stat-sub, body[data-compression] .subtitle {color: var(--study-muted); }
body[data-compression] .stat-label {font-size: 10px; letter-spacing: .09em; }
body[data-compression] .stat-val {font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
body[data-compression] .stat-box .stat-val {font-size: 28px; }
body[data-compression] .row, body[data-compression] .stat-row {gap: 16px; padding-block: 8px; border-color: #ffffff0a; color: #aabdb2; }
body[data-compression] .row .val, body[data-compression] .stat-row .val {color: #e2eadd; font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
body[data-compression] .green, body[data-compression] .good, body[data-compression] .row .val.green, body[data-compression] .stat-row .val.good {color: #b5dca3; }
body[data-compression] .blue, body[data-compression] .neutral, body[data-compression] .row .val.blue, body[data-compression] .stat-row .val.neutral {color: #a3c6df; }
body[data-compression] canvas {border-radius: 12px; border-color: #324239; }
body[data-compression] .canvas-container {margin: 14px; border: 1px solid #263a34; border-radius: 12px; overflow: hidden; }
body[data-compression] .viz-area {background: #0a1215; }
body[data-compression] .pipeline-wrapper, body[data-compression] .pipeline-vis, body[data-compression] .recipe-box {background: #0c1619; border-color: var(--study-line); border-radius: 10px; }
body[data-compression] .pipeline-wrapper {border-radius: 0; gap: 8px; }
body[data-compression] .gene, body[data-compression] .pipe-step {background: #24352f; border-color: #47634f; border-radius: 7px; color: #d5e4cd; }
body[data-compression] .gene span {color: #a1b29c; }
body[data-compression] .gen-counter {font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c5daba; }
body[data-compression] .tag {color: #a8c2ae; background: #24362c; border: 1px solid #3c5543; border-radius: 5px; letter-spacing: .08em; }
body[data-compression] .study-detail {margin: 10px 0 0; color: #a5b4ad; font-size: 11px; line-height: 1.65; }
body[data-compression] .study-detail summary {cursor: pointer; padding-block: 8px; color: #c1d0c6; font-size: 11px; letter-spacing: .05em; }
body[data-compression] .study-detail p {margin: 6px 0 10px; }
body[data-compression] .study-history {flex: none; margin: 0; padding: 0 16px; border-top: 1px solid #2a3c34; background: #10191b; }
body[data-compression] .console, body[data-compression] #log, body[data-compression] .log-console {color: #a1b1a8; background: #0c1619; border-color: #2c3f35; font: 11px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; }
body[data-compression] .console {border: 0; }
body[data-compression][data-compression="hybrid"] .system-col {gap: 14px; }
body[data-compression][data-compression="hybrid"] h2 {border: 0; font-size: 13px; color: #bfd2c3; padding: 0; margin: 0; }
body[data-compression][data-compression="hybrid"] .panel {padding: 18px 20px; }
body[data-compression][data-compression="hybrid"] .system-col:last-child .panel {border-color: #374e5c; }
body[data-compression][data-compression="procedural"] .dashboard {margin-top: 16px; }
body[data-compression][data-compression="lz77"] .stats-panel {padding: 16px 20px; color: #aebfb4; font-size: 10px; letter-spacing: .08em; }
body[data-compression][data-compression="lz77"] .stats-panel .stat-val {font-size: 20px; letter-spacing: -.03em; }
@media(max-width:720px) { body[data-compression] header {flex-wrap: wrap; padding: 16px; }
body[data-compression] .sidebar .stat-box {padding: 12px; }
body[data-compression] .canvas-container {margin: 10px; }
body[data-compression] h1 {font-size: 27px; }
body[data-compression] .system-col h2 {margin-top: 12px; }
 }
@media(prefers-reduced-motion:reduce) { body[data-compression] *, body[data-compression] *::before, body[data-compression] *::after {transition: none !important; }
 }

/* body[data-ecs]: the ECS telemetry instruments (ecs/). */
body[data-ecs] {font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
body[data-ecs] #ui {background: linear-gradient(145deg, #19292bea, #111c20ed); border-color: #52645b80; box-shadow: 0 16px 44px #0004, inset 0 1px 0 #ffffff0b; min-width: 224px; }
body[data-ecs] #ui h1 {font-size: 18px; line-height: 1.2; margin: 0 0 14px; padding: 0 0 12px; border-color: #52645b50; letter-spacing: -.04em; text-transform: none; font-weight: 500; }
body[data-ecs] #ui .stat {display: flex; align-items: baseline; gap: 18px; justify-content: space-between; padding-block: 3px; color: #aebfb5; }
body[data-ecs] #ui .stat > span {font: 12px ui-monospace, SFMono-Regular, Menlo, monospace; color: #daead7; font-variant-numeric: tabular-nums; }
body[data-ecs] #ui .timing {display: grid; grid-template-columns: 1fr auto auto; gap: 7px; color: #9aafa4; font-size: 11px; padding-block: 2px; }
body[data-ecs] #ui .timing span {color: #d7cba2; font-size: 11px; font-variant-numeric: tabular-nums; }
body[data-ecs] #ui .hud-line {padding-block: 3px; color: #bdcec2; letter-spacing: .015em; }
body[data-ecs] #ui .hud-line:first-child {color: #e4ede2; font-size: 14px; padding-bottom: 8px; }
body[data-ecs] #ui .stats {border-top: 1px solid #42564a; padding-top: 12px; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; color: #c6d7c8; font-variant-numeric: tabular-nums; }
body[data-ecs] #ui .sys-timing {color: #a1b4aa; font-size: 10px; line-height: 1.8; }
body[data-ecs] #ui .control-group {margin-bottom: 16px; }
body[data-ecs] #ui label {font-size: 11px; color: #c4d1c8; }
body[data-ecs] #ui input[type=range] {accent-color: #c2d7ad; }
body[data-ecs] #ui input[type=text] {background: #0d181c; border-color: #42584a; color: #d9e5cf; padding: 7px 9px; border-radius: 7px; }
body[data-ecs] #ui button, body[data-ecs] #controls button {background: #253630; border: 1px solid #465d4b; color: #dbe7d1; min-height: 36px; border-radius: 8px; font: 500 11px system-ui, sans-serif; text-transform: none; box-shadow: inset 0 1px 0 #ffffff08; }
body[data-ecs] #ui button:hover, body[data-ecs] #controls button:hover {background: #334d3c; border-color: #9bb88e; }
body[data-ecs] #ui button.active {background: #c2d7ad; color: #17241b; }
body[data-ecs] #controls {gap: 8px; padding: 7px; border-radius: 14px; background: #142127d9; border: 1px solid #53685b70; backdrop-filter: blur(12px); box-shadow: 0 8px 30px #0004; }
body[data-ecs] #controls .blue {border-color: #4e7182; border-bottom: 2px solid #85bcdb; background: #223b48; }
body[data-ecs] #controls .red {border-color: #795454; border-bottom: 2px solid #d9a0a0; background: #432e34; }
body[data-ecs] #seed-controls, body[data-ecs] #ts-controls, body[data-ecs] #bench-controls {padding-top: 5px; }
body[data-ecs] #bench-result, body[data-ecs] .bench-status {border-radius: 8px; color: #c2d7ad; font: 10px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; }
body[data-ecs] .telemetry-details {margin-top: 12px; padding-top: 8px; border-top: 1px solid #52645b50; color: #99ada1; font-size: 11px; }
body[data-ecs] .telemetry-details summary {padding: 4px 0 8px; cursor: pointer; color: #c2d0c3; }
body[data-ecs] .telemetry-details p {margin: 0 0 6px; }
@media(max-width:640px) { body[data-ecs] #ui {min-width: 210px; }
body[data-ecs] #controls {bottom: 68px; }
 }
@media(prefers-reduced-motion:reduce) { body[data-ecs] button {transition: none !important; }
 }