:root {
  color-scheme: dark;
  --ink: #f1eee7;
  --muted: #87929c;
  --dim: #56616b;
  --line: rgba(185, 202, 216, .17);
  --line-strong: rgba(206, 220, 230, .36);
  --glass: rgba(5, 9, 14, .78);
  --gold: #efc47f;
  --blue: #83c7ff;
  --rail-side: 30px;
  --rail-bottom: 38px;
  --rail-height: 78px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #020407; color: var(--ink); }
body { position: fixed; inset: 0; font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button, select { color: inherit; }

.laboratory { position: relative; width: 100%; height: 100%; min-height: 620px; background: radial-gradient(circle at 45% 48%, #071019 0, #03070b 42%, #010204 100%); }
#space-canvas, #lab-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#space-canvas { background: radial-gradient(circle at 45% 48%, #071019 0, #03070b 42%, #010204 100%); }
#lab-canvas { touch-action: none; cursor: crosshair; }
#lab-canvas:focus-visible { outline: 1px solid rgba(239,196,127,.7); outline-offset: -2px; }
.laboratory::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.34), transparent 23%, transparent 75%, rgba(0,0,0,.25)), radial-gradient(circle, transparent 58%, rgba(0,0,0,.3)); }

.lab-header { position: absolute; z-index: 3; top: 26px; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.wordmark { display: flex; flex-direction: column; gap: 5px; color: var(--ink); text-decoration: none; pointer-events: auto; }
.wordmark span, .truth-mark span, .scale-readout span, .diagnostics span, .selection-status span, .warp-control span, .selected-type, .workbench-note, .content-drawer header span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.wordmark span { color: var(--muted); }
.wordmark strong { font-family: Iowan Old Style, Baskerville, Georgia, serif; font-size: 22px; font-weight: 400; }
.truth-mark { margin-right: 96px; display: grid; grid-template-columns: 8px auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); background: rgba(3,7,10,.45); backdrop-filter: blur(12px); }
.truth-mark i { grid-row: 1 / 3; width: 7px; height: 7px; border-radius: 50%; background: #73d7a6; box-shadow: 0 0 16px #56d89a; }
.truth-mark span { color: #73d7a6; }
.truth-mark strong { color: var(--muted); font: 500 9px/1.2 ui-monospace, monospace; letter-spacing: .08em; }
.lesson-path { position: absolute; z-index: 3; top: 225px; right: 30px; width: 270px; padding: 12px 14px; border: 1px solid var(--line); background: rgba(3,7,10,.58); backdrop-filter: blur(12px); }
.lesson-path > span { color: var(--gold); font: 8px/1 ui-monospace, monospace; letter-spacing: .12em; }
.lesson-path strong { display: block; margin-top: 6px; font: 400 17px/1.1 Iowan Old Style, Baskerville, Georgia, serif; }
.lesson-path p { margin: 6px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }
.lesson-path-return, .lesson-path-restart { display: inline-block; margin-top: 8px; color: var(--gold); font: 600 9px/1 ui-monospace, monospace; letter-spacing: .06em; text-decoration: none; }
.lesson-path-restart { padding: 0; border: 0; background: transparent; cursor: pointer; }
.lesson-path-return:hover, .lesson-path-return:focus-visible, .lesson-path-restart:hover, .lesson-path-restart:focus-visible { color: #fff1c8; text-decoration: underline; }
.lesson-path[data-complete="true"] { border-color: rgba(239,196,127,.7); }

.scale-readout { position: absolute; z-index: 3; top: 108px; left: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.scale-readout span { color: var(--gold); }
.scale-readout strong { font: 400 13px/1.2 ui-monospace, monospace; letter-spacing: .06em; }
.scale-readout button { margin-top: 6px; padding: 7px 9px; border: 1px solid var(--line); background: rgba(3,7,10,.42); font: 500 9px/1 ui-monospace, monospace; letter-spacing: .06em; cursor: pointer; }
.scale-readout button:hover { border-color: var(--line-strong); background: rgba(120,170,205,.1); }
.scale-actions { display: flex; gap: 6px; }
.frame-picker { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 0 8px; border: 1px solid var(--line); background: rgba(3,7,10,.42); }
.frame-picker span { color: var(--dim); font-size: 7px; }
.frame-picker select { min-height: 29px; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 9px/1 ui-monospace, monospace; cursor: pointer; }
.frame-picker select:disabled { opacity: .55; cursor: default; }
.camera-picker select { max-width: 152px; }
.return-system-view { color: var(--gold); }
.view-settings { position: relative; margin-top: 6px; }
.view-settings summary { min-height: 31px; display: flex; align-items: center; padding: 0 9px; border: 1px solid var(--line); background: rgba(3,7,10,.42); color: var(--muted); font: 500 8px/1 ui-monospace, monospace; cursor: pointer; list-style: none; }
.view-settings summary::-webkit-details-marker { display: none; }
.view-settings[open] summary { color: var(--ink); background: rgba(132,177,208,.12); }
.view-settings > label { position: absolute; top: 36px; right: 0; width: 190px; display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); background: rgba(3,7,10,.96); }
.view-settings > label + label { top: 73px; }
.view-settings > label span { color: var(--muted); font: 7px/1 ui-monospace, monospace; }
.view-settings input { width: 100%; }
.scale-readout small { margin-top: 3px; color: var(--dim); font: 7px/1.2 ui-monospace, monospace; letter-spacing: .11em; }
@media (min-width: 1350px) {
  .laboratory:has(.experiment-card.is-open) .scale-readout,
  .laboratory:has(.guide-card.is-open) .scale-readout { left: 360px; }
}

#orientation-gizmo { position: absolute; z-index: 5; top: 23px; right: 29px; width: 84px; height: 84px; border: 1px solid rgba(185,202,216,.24); border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(58,79,96,.32), rgba(2,6,9,.78) 68%); box-shadow: inset 0 0 20px rgba(116,214,255,.06), 0 8px 24px rgba(0,0,0,.28); cursor: grab; touch-action: none; }
#orientation-gizmo:active { cursor: grabbing; }
#orientation-gizmo:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

.diagnostics { position: absolute; z-index: 3; top: 98px; right: 30px; width: 190px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: rgba(2,6,9,.35); backdrop-filter: blur(10px); }
.diagnostics div { display: flex; flex-direction: column; gap: 5px; min-height: 52px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.diagnostics span { color: var(--dim); font-size: 7px; }
.diagnostics strong { font: 400 10px/1 ui-monospace, monospace; }

.experiment-dock { position: absolute; z-index: 4; left: 50%; top: 26px; width: auto; transform: translateX(-50%); display: flex; border: 1px solid var(--line); background: rgba(3,7,11,.52); backdrop-filter: blur(12px); }
.experiment-dock > span { display: flex; align-items: center; padding: 0 11px; border-right: 1px solid var(--line); color: var(--dim); font: 7px/1 ui-monospace, monospace; letter-spacing: .13em; }
.experiment-dock button { display: flex; align-items: center; gap: 8px; min-height: 43px; padding: 0 11px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 8px/1 ui-monospace, monospace; text-align: left; cursor: pointer; }
.experiment-dock button:last-child { border-right: 0; }
.experiment-dock button:hover, .experiment-dock button.is-active { color: var(--ink); background: rgba(128,176,207,.1); }
.experiment-dock button:disabled { opacity: .28; cursor: not-allowed; background: transparent; }
.experiment-dock button.requires-context { opacity: .48; }
.experiment-dock button.requires-context:hover, .experiment-dock button.requires-context:focus-visible { opacity: 1; color: var(--gold); }
.experiment-swatch { width: 7px; height: 7px; flex: none; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 9px currentColor; }
.season-swatch { color: #efc47f; }
.magnetic-swatch { color: #74d6ff; }
.dark-swatch { color: #a691ef; }
.light-swatch { color: #fff4b2; }
.scientist-swatch { color: #73d7a6; }
.relativity-swatch { color: #f6a0ff; }

.scientist-lesson { position: absolute; z-index: 7; top: 212px; right: 30px; width: 350px; padding: 15px; border: 1px solid rgba(115,215,166,.42); background: linear-gradient(145deg, rgba(6,14,17,.97), rgba(3,7,11,.94)); backdrop-filter: blur(18px); transform: translateX(18px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; }
.scientist-lesson.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }
.scientist-lesson [hidden] { display: none !important; }
.laboratory:has(.scientist-lesson.is-open) .lesson-path { opacity: 0; pointer-events: none; }
.scientist-lesson header { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.scientist-lesson header div { display: grid; gap: 6px; }
.scientist-lesson header span, .scientist-lesson footer { color: #73d7a6; font: 600 7px/1 ui-monospace, monospace; letter-spacing: .11em; text-transform: uppercase; }
.scientist-lesson header strong { font: 400 20px/1.08 Iowan Old Style, Baskerville, Georgia, serif; }
.scientist-lesson header button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.scientist-lesson > p { margin: 11px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.scientist-catalog { display: grid; gap: 7px; margin-top: 13px; }
.scientist-catalog > button { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; width: 100%; padding: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .18s, background .18s; }
.scientist-catalog > button:hover, .scientist-catalog > button:focus-visible { border-color: rgba(115,215,166,.62); background: rgba(115,215,166,.07); }
.scientist-catalog > button.is-complete { border-color: rgba(115,215,166,.32); background: rgba(115,215,166,.045); }
.scientist-catalog .lesson-number { color: #73d7a6; font: 600 9px/1 ui-monospace, monospace; }
.scientist-catalog button > span:nth-child(2) { display: grid; gap: 4px; }
.scientist-catalog strong { font: 500 10px/1.2 ui-monospace, monospace; }
.scientist-catalog small { color: var(--muted); font: 8px/1.35 ui-monospace, monospace; }
.scientist-catalog em { color: var(--dim); font: 600 6px/1 ui-monospace, monospace; letter-spacing: .08em; white-space: nowrap; }
.scientist-catalog .is-complete em { color: #73d7a6; }
.scientist-active { margin-top: 13px; }
.scientist-progress { height: 2px; margin-bottom: 11px; background: rgba(115,215,166,.12); overflow: hidden; }
.scientist-progress i { display: block; width: 0; height: 100%; background: #73d7a6; box-shadow: 0 0 12px rgba(115,215,166,.6); transition: width .28s; }
#scientist-action { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid rgba(115,215,166,.5); background: rgba(115,215,166,.11); color: var(--ink); font: 600 8px/1 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.scientist-waiting { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 11px; border: 1px solid rgba(115,215,166,.28); color: var(--muted); font: 600 8px/1 ui-monospace, monospace; text-transform: uppercase; }
.scientist-waiting i { width: 8px; height: 8px; border: 1px solid #73d7a6; border-radius: 50%; box-shadow: 0 0 10px #73d7a6; animation: scientist-pulse 1.1s ease-in-out infinite; }
@keyframes scientist-pulse { 50% { opacity: .35; transform: scale(.72); } }
.scientist-success { display: flex; gap: 11px; align-items: center; margin-top: 13px; padding: 12px; border: 1px solid rgba(115,215,166,.48); background: rgba(115,215,166,.08); }
.scientist-success > span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #73d7a6; color: #03100a; font: 700 15px/1 ui-monospace, monospace; }
.scientist-success div { display: grid; gap: 4px; }
.scientist-success strong { font: 600 9px/1.2 ui-monospace, monospace; text-transform: uppercase; }
.scientist-success small { color: var(--muted); font: 8px/1.35 ui-monospace, monospace; }
.scientist-collision-evidence { margin-top: 10px; padding: 11px; border: 1px solid rgba(239,196,127,.42); background: linear-gradient(135deg, rgba(239,196,127,.08), rgba(239,116,71,.035)); }
.scientist-collision-evidence > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.scientist-collision-evidence > header span { color: var(--gold); font: 600 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.scientist-collision-evidence > header strong { color: #fff0d2; font: 500 15px/1 ui-monospace, monospace; }
.scientist-collision-evidence dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 10px 0 0; border: 1px solid var(--line); }
.scientist-collision-evidence dl div { display: grid; gap: 4px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.scientist-collision-evidence dl div:nth-child(2n) { border-right: 0; }
.scientist-collision-evidence dl div:nth-last-child(-n+2) { border-bottom: 0; }
.scientist-collision-evidence dt { color: var(--dim); font: 600 6px/1 ui-monospace, monospace; letter-spacing: .08em; }
.scientist-collision-evidence dd { margin: 0; color: var(--ink); font: 500 8px/1.25 ui-monospace, monospace; }
.scientist-collision-evidence p { margin: 9px 0 0; color: var(--muted); font: 8px/1.45 ui-monospace, monospace; }
.scientist-collision-evidence p b { color: var(--ink); font-weight: 600; }
.scientist-actions { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; margin-top: 13px; }
.scientist-actions button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(115,215,166,.4); background: rgba(115,215,166,.09); color: var(--ink); font: 600 8px/1 ui-monospace, monospace; text-transform: uppercase; cursor: pointer; }
.scientist-actions small { justify-self: end; color: var(--dim); font: 7px/1 ui-monospace, monospace; white-space: nowrap; }
.scientist-notebook { margin-top: 10px; border: 1px solid var(--line); }
.scientist-notebook summary { padding: 9px; color: var(--muted); font: 600 7px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.scientist-notebook pre { margin: 0; padding: 9px; overflow: auto; border-top: 1px solid var(--line); color: var(--muted); font: 7px/1.5 ui-monospace, monospace; white-space: pre-wrap; }
.scientist-lesson footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--dim); line-height: 1.35; }
.scientist-focus { position: relative; z-index: 9 !important; outline: 2px solid #73d7a6 !important; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(115,215,166,.12), 0 0 30px rgba(115,215,166,.28) !important; }

.center-reticle { position: absolute; z-index: 2; left: 50%; top: 50%; width: 42px; height: 42px; transform: translate(-50%, -50%); border: 1px solid rgba(175,203,221,.17); border-radius: 50%; pointer-events: none; }
.center-reticle::before, .center-reticle::after { content: ""; position: absolute; background: rgba(175,203,221,.28); }
.center-reticle::before { left: 50%; top: -7px; width: 1px; height: 14px; }
.center-reticle::after { left: -7px; top: 50%; width: 14px; height: 1px; }
.center-reticle span { position: absolute; inset: 17px; border: 1px solid rgba(239,196,127,.5); border-radius: 50%; }
.placement-hud { position: absolute; z-index: 7; left: 50%; bottom: calc(var(--rail-bottom) + var(--rail-height) + 52px); min-width: 390px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 10px 11px 10px 13px; border: 1px solid rgba(239,196,127,.5); background: rgba(4,9,14,.9); backdrop-filter: blur(14px); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .22s; }
.placement-hud.is-active { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.placement-hud > span { color: var(--gold); font: 500 7px/1 ui-monospace, monospace; letter-spacing: .13em; writing-mode: vertical-rl; }
.placement-copy { display: grid; gap: 4px; }
.placement-hud strong { font: 500 10px/1.2 ui-monospace, monospace; }
.placement-hud small { color: var(--muted); font-size: 8px; }
.placement-hud #placement-host { color: var(--gold); }
.placement-hud button { align-self: stretch; min-width: 68px; border: 1px solid var(--line); background: rgba(239,196,127,.08); color: var(--ink); font: 500 8px/1 ui-monospace, monospace; cursor: pointer; }
.placement-hud button:hover, .placement-hud button:focus-visible { border-color: var(--gold); background: rgba(239,196,127,.15); outline: none; }
.laboratory.is-placing .center-reticle { border-color: rgba(239,196,127,.58); box-shadow: 0 0 30px rgba(239,196,127,.12); }
.laboratory.is-placing #lab-canvas { cursor: copy; }

.inspector { position: absolute; z-index: 6; top: auto; bottom: calc(var(--rail-bottom) + var(--rail-height) + 36px); left: var(--rail-side); width: min(330px, calc(100vw - (var(--rail-side) * 2))); max-height: calc(100vh - 260px); padding: 15px; overflow-y: auto; border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(7,13,19,.96), rgba(3,7,11,.9)); backdrop-filter: blur(18px); transform: translateY(calc(100% + 42px)); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; scrollbar-width: thin; }
.inspector.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.inspector-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.inspector-heading span { color: var(--gold); }
.inspector-heading h1 { margin: 4px 0 0; font: 400 31px/1 Iowan Old Style, Baskerville, Georgia, serif; }
.inspector-heading button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.body-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 13px 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.body-facts div { padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.body-facts dt { color: var(--dim); font: 7px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.body-facts dd { margin: 6px 0 0; font: 10px/1.2 ui-monospace, monospace; }
.body-facts div:last-child { grid-column: 1 / -1; }
.orbit-details { margin-top: 11px; border: 1px solid rgba(116,214,255,.24); background: rgba(116,214,255,.035); }
.orbit-details summary { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px; cursor: pointer; list-style: none; }
.orbit-details summary::-webkit-details-marker { display: none; }
.orbit-details summary span { color: var(--blue); font: 600 8px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.orbit-details summary small { color: var(--muted); font: 7px/1 ui-monospace, monospace; }
.orbit-details dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; border-top: 1px solid var(--line); }
.orbit-details dl div { padding: 8px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.orbit-details dt { color: var(--dim); font: 7px/1 ui-monospace, monospace; text-transform: uppercase; }
.orbit-details dd { margin: 5px 0 0; color: var(--ink); font: 8px/1.25 ui-monospace, monospace; }
.orbit-details > p { margin: 0; padding: 9px 10px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.approach-selected { width: 100%; min-height: 42px; margin-top: 12px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid rgba(239,196,127,.38); background: linear-gradient(90deg, rgba(239,196,127,.13), rgba(239,196,127,.03)); color: var(--ink); font: 500 9px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.approach-selected:hover { border-color: var(--gold); background: rgba(239,196,127,.16); }
.approach-selected small { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); color: var(--gold); font: 8px/1 ui-monospace, monospace; }
.body-camera-actions { display: grid; gap: 7px; margin-top: 12px; }
.body-camera-actions .approach-selected { margin-top: 0; }
.secondary-camera-action { min-height: 34px; border: 1px solid var(--line); background: rgba(116,214,255,.05); color: var(--muted); font: 500 8px/1 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.secondary-camera-action:hover { color: var(--ink); border-color: rgba(116,214,255,.5); }
.experiment-control { display: block; margin-top: 18px; }
.experiment-control > span { display: flex; justify-content: space-between; font: 500 10px/1 ui-monospace, monospace; letter-spacing: .05em; }
.experiment-control output { color: var(--gold); }
.experiment-control input { width: 100%; margin: 13px 0 7px; accent-color: var(--gold); }
.experiment-control small, .model-caveat { display: block; color: var(--muted); font-size: 10px; line-height: 1.45; }
.model-caveat { margin: 18px 0 0; padding-left: 10px; border-left: 1px solid var(--gold); }
.physics-editor { margin-top: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.physics-editor summary { min-height: 42px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 9px 11px; cursor: pointer; list-style: none; }
.physics-editor summary::-webkit-details-marker { display: none; }
.physics-editor summary::after { content: "+"; grid-column: 2; grid-row: 1 / 3; color: var(--gold); font: 16px/1 ui-monospace, monospace; }
.physics-editor[open] summary::after { content: "−"; }
.physics-editor summary span { font: 500 9px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.physics-editor summary small { color: var(--muted); font: 7px/1.2 ui-monospace, monospace; }
.physics-editor-content { padding: 0 11px 12px; border-top: 1px solid var(--line); }
.physics-editor-content .experiment-control { margin-top: 13px; }
.physics-editor-content .experiment-control small { font-size: 9px; }
.range-stepper { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; align-items: center; gap: 7px; margin: 8px 0 7px; }
.range-stepper input { width: 100%; margin: 0; }
.range-stepper button { width: 26px; height: 26px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--text); font: 13px/1 ui-monospace, monospace; }
.range-stepper button:hover, .range-stepper button:focus-visible { border-color: var(--gold); color: var(--gold); }

.experiment-card { position: absolute; z-index: 5; top: 92px; left: 30px; width: min(360px, calc(100vw - 60px)); max-height: calc(100vh - 215px); padding: 18px; overflow-y: auto; border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(7,13,19,.96), rgba(3,7,11,.88)); backdrop-filter: blur(18px); transform: translateX(calc(-100% - 45px)); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; scrollbar-width: thin; }
.experiment-card.is-open { transform: translateX(0); opacity: 1; }
.guide-card { position: absolute; z-index: 6; top: 92px; left: 30px; width: min(390px, calc(100vw - 60px)); max-height: calc(100vh - 215px); padding: 18px; overflow-y: auto; border: 1px solid var(--line-strong); background: linear-gradient(145deg, rgba(7,13,19,.97), rgba(3,7,11,.91)); backdrop-filter: blur(20px); transform: translateX(calc(-100% - 45px)); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s; }
.guide-card.is-open { transform: translateX(0); opacity: 1; }
.guide-toggle { position: absolute; z-index: 5; right: 30px; bottom: 134px; display: flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line-strong); background: rgba(4,9,14,.78); color: var(--ink); font: 500 8px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(12px); }
.guide-toggle i, .voice-control button i { width: 7px; height: 7px; border-radius: 50%; background: #73d7a6; box-shadow: 0 0 12px #56d89a; }
.guide-toggle[aria-expanded="true"] { color: #0b1114; background: #73d7a6; }
.guide-context { margin: 16px 0 0; color: var(--gold); font: 8px/1.45 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.guide-log { display: flex; flex-direction: column; gap: 9px; max-height: 180px; margin-top: 14px; padding: 12px; overflow-y: auto; border: 1px solid var(--line); background: rgba(0,0,0,.18); }
.guide-message { margin: 0; font-size: 11px; line-height: 1.5; }
.guide-message.system { color: var(--muted); }
.guide-message.learner { padding-left: 10px; border-left: 1px solid var(--gold); color: var(--ink); }
.guide-message.guide { padding-left: 10px; border-left: 1px solid #73d7a6; color: #d9e3e6; }
.guide-form { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.guide-form label { color: var(--dim); font: 7px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.guide-form textarea { width: 100%; resize: vertical; padding: 10px; border: 1px solid var(--line); background: rgba(2,5,8,.65); color: var(--ink); font: 11px/1.45 ui-monospace, monospace; }
.guide-form button, .voice-control button { min-height: 38px; border: 1px solid var(--line); background: rgba(116,214,255,.08); color: var(--ink); font: 500 9px/1 ui-monospace, monospace; cursor: pointer; }
.guide-form button:disabled { opacity: .5; cursor: wait; }
.voice-control { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-top: 11px; }
.voice-control button { display: flex; align-items: center; justify-content: center; gap: 9px; }
.voice-control button.is-live { border-color: rgba(115,215,166,.55); background: rgba(115,215,166,.12); }
.voice-control button:disabled { opacity: .38; cursor: not-allowed; }
.voice-control small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.35; }
.voice-receipt { margin-top: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.15); }
.voice-receipt summary { display: flex; justify-content: space-between; gap: 10px; padding: 10px; color: var(--muted); font: 500 8px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.voice-receipt summary strong { color: var(--dim); font-weight: 600; }
.voice-receipt[data-state="live"] summary strong { color: #73d7a6; }
.voice-receipt[data-state="error"] summary strong { color: #ff9b83; }
.voice-receipt dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0 10px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.voice-receipt dl div { display: flex; flex-direction: column; gap: 5px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.voice-receipt dt { color: var(--dim); font: 7px/1 ui-monospace, monospace; letter-spacing: .09em; text-transform: uppercase; }
.voice-receipt dd { margin: 0; color: var(--ink); font: 9px/1.2 ui-monospace, monospace; }
.voice-receipt p { margin: 10px; color: var(--muted); font-size: 8px; line-height: 1.45; }
.voice-receipt button { min-height: 31px; margin: 0 10px 10px; padding: 0 10px; border: 1px solid var(--line); background: rgba(116,214,255,.07); color: var(--ink); font: 500 8px/1 ui-monospace, monospace; cursor: pointer; }
.voice-receipt button:disabled { opacity: .35; cursor: not-allowed; }
.experiment-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.experiment-heading span { color: #73d7a6; font: 500 8px/1 ui-monospace, monospace; letter-spacing: .13em; }
.experiment-heading h2 { margin: 6px 0 0; font: 400 34px/1 Iowan Old Style, Baskerville, Georgia, serif; }
.experiment-heading button { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.experiment-content > p:first-child { margin: 18px 0 0; color: #c8d0d5; font: 400 12px/1.55 Iowan Old Style, Baskerville, Georgia, serif; }
.experiment-action { width: 100%; min-height: 40px; margin-top: 14px; border: 1px solid rgba(255,189,112,.5); background: linear-gradient(90deg, rgba(255,145,71,.16), rgba(111,214,255,.07)); color: var(--ink); font: 600 9px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.experiment-action:hover { border-color: #ffbd70; background: linear-gradient(90deg, rgba(255,145,71,.25), rgba(111,214,255,.12)); }
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border: 1px solid var(--line); }
.preset-row button { min-height: 34px; border: 0; border-right: 1px solid var(--line); background: transparent; font: 500 9px/1 ui-monospace, monospace; cursor: pointer; }
.preset-row button:last-child { border-right: 0; }
.preset-row button:hover { background: rgba(239,196,127,.12); }
.phase-preset-row { grid-template-columns: repeat(2, 1fr); }
.phase-preset-row button { padding: 8px 5px; border-bottom: 1px solid var(--line); font-size: 7px; }
.phase-preset-row button:nth-child(2) { border-right: 0; }
.phase-preset-row button:nth-child(n+3) { border-bottom: 0; }
.derived-note { display: block; margin-top: 8px; color: var(--muted); font-size: 9px; line-height: 1.4; }
.season-globe { width: 100%; min-height: 40px; margin-top: 15px; border: 1px solid rgba(239,196,127,.4); background: linear-gradient(90deg, rgba(239,196,127,.15), rgba(116,214,255,.06)); color: var(--ink); font: 500 9px/1 ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.season-globe:hover { border-color: var(--gold); background: rgba(239,196,127,.16); }
.season-globe-note { padding-left: 10px; border-left: 1px solid var(--gold); }
.season-state { display: grid; grid-template-columns: 1fr 1fr; margin-top: 16px; border: 1px solid var(--line); }
.season-state div { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-right: 1px solid var(--line); }
.season-state div:last-child { border-right: 0; }
.season-state span, .experiment-metric span, .choice-control > span { color: var(--dim); font: 7px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.season-state strong, .experiment-metric strong { font: 500 11px/1.2 ui-monospace, monospace; }
.insolation-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 17px; }
.insolation-row { display: grid; grid-template-columns: 34px 1fr 104px; align-items: center; gap: 8px; font: 8px/1 ui-monospace, monospace; }
.insolation-row > i { height: 5px; overflow: hidden; background: rgba(255,255,255,.06); }
.insolation-row > i b { display: block; height: 100%; background: linear-gradient(90deg, #8ba4bd, var(--gold)); box-shadow: 0 0 10px rgba(239,196,127,.3); }
.insolation-row strong { color: var(--muted); font-weight: 400; text-align: right; white-space: nowrap; }
.choice-control { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.choice-control select { width: 100%; padding: 10px; border: 1px solid var(--line); background: rgba(2,5,8,.65); color: var(--ink); font: 500 10px/1 ui-monospace, monospace; }
.experiment-metric { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.experiment-caveat { margin: 18px 0 0; padding-left: 10px; border-left: 1px solid #73d7a6; color: var(--muted); font-size: 10px; line-height: 1.5; }
.equation-strip { display: grid; gap: 7px; margin-top: 13px; padding: 11px; border: 1px solid rgba(115,215,166,.28); background: rgba(115,215,166,.045); }
.equation-strip span { color: #73d7a6; font: 500 7px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.equation-strip code { overflow-wrap: anywhere; color: #dce8e1; font: 9px/1.45 ui-monospace, monospace; }
.relativity-brief { margin: 8px 0 12px; color: var(--muted); font: 600 10px/1.45 Iowan Old Style, Baskerville, Georgia, serif; }
.relativity-frame-controls { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 8px; margin: 0 0 12px; padding: 11px; border: 1px solid rgba(115,215,166,.28); background: rgba(115,215,166,.045); }
.relativity-frame-controls button { min-height: 36px; padding: 10px 12px; border: 1px solid rgba(115,215,166,.45); background: rgba(2,8,12,.3); color: #dff7f1; font: 700 10px/1 ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.relativity-frame-controls button.is-active { border-color: #73d7a6; color: #7dffd6; }
.relativity-detail-toggle { margin-left: auto; color: var(--muted); font: 600 10px/1 ui-monospace, monospace; display: inline-flex; gap: 7px; align-items: center; justify-self: end; }
.relativity-detail-toggle input { width: 16px; height: 16px; }
.relativity-step-title { margin: 0; color: #f9f6f0; font: 700 28px/1.05 Iowan Old Style, Baskerville, Georgia, serif; }
.relativity-step-index { margin: 2px 0 8px; color: var(--gold); font: 600 10px/1 ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.relativity-step-copy { margin: 0 0 12px; color: var(--muted); font: 600 12px/1.45 Iowan Old Style, Baskerville, Georgia, serif; }
.relativity-placement-status { min-height: 28px; margin: 0 0 10px; padding-left: 9px; border-left: 1px solid rgba(246,160,255,.58); color: var(--muted); font: 8px/1.45 ui-monospace, monospace; }
.relativity-event-summary { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 8px 0 10px; }
.relativity-event-summary p { margin: 0; padding: 7px 10px; border: 1px solid rgba(115,215,166,.3); background: rgba(115,215,166,.06); color: var(--ink); font: 600 11px/1 ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; }
.relativity-event-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.relativity-event-controls button,
.relativity-step-next { min-height: 38px; padding: 9px 11px; border: 1px solid rgba(246,160,255,.24); background: rgba(246,160,255,.04); color: var(--ink); font: 700 9px/1 ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.relativity-event-controls button:hover, .relativity-step-next:hover,
.relativity-event-controls button:focus-visible, .relativity-step-next:focus-visible,
.relativity-event-controls button.is-armed { border-color: #f6a0ff; color: #f6a0ff; outline: none; }
.relativity-step-next:disabled { cursor: not-allowed; opacity: .35; }
.relativity-step-summary { margin: 8px 0; color: var(--muted); font: 600 11px/1.45 Iowan Old Style, Baskerville, Georgia, serif; }
.gravity-contributors { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.gravity-contributors > span { color: #73d7a6; font: 600 7px/1 ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.gravity-contributors ol { display: grid; gap: 7px; margin: 9px 0 0; padding: 0; list-style: none; }
.gravity-contributors li { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--muted); font: 8px/1.25 ui-monospace, monospace; }
.gravity-contributors li strong { color: var(--ink); font-weight: 500; }

.content-drawer { position: absolute; z-index: 5; left: var(--rail-side); right: var(--rail-side); bottom: calc(var(--rail-bottom) + var(--rail-height) + 32px); height: 132px; display: grid; grid-template-columns: 225px minmax(0, 1fr); padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-bottom-color: var(--line); background: linear-gradient(150deg, rgba(6,12,18,.97), rgba(2,6,9,.94)); backdrop-filter: blur(22px); transform: translateY(calc(100% + var(--rail-height) + 34px)); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.content-drawer.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.content-drawer header { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 12px; border-right: 1px solid var(--line); }
.content-drawer header div { display: grid; gap: 5px; }
.content-drawer header span { color: var(--gold); }
.content-drawer header strong { font: 400 15px/1.15 Iowan Old Style, Baskerville, Georgia, serif; }
.content-drawer header small { max-width: 170px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.content-drawer header .drawer-close { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.content-drawer header .drawer-tabs { display: flex; gap: 3px; }
.drawer-tabs button { min-height: 22px; padding: 0 7px; border: 1px solid var(--line); background: transparent; color: var(--dim); font: 500 7px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.drawer-tabs button[aria-selected="true"] { border-color: rgba(239,196,127,.55); background: rgba(239,196,127,.11); color: var(--gold); }
.content-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); overflow-x: auto; scrollbar-width: thin; }
.content-grid[hidden] { display: none; }
.content-grid button { min-height: 100%; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto auto; column-gap: 8px; align-content: center; padding: 8px 10px; border: 0; border-right: 1px solid var(--line); background: rgba(255,255,255,.01); color: var(--ink); text-align: left; cursor: grab; }
.content-grid button::before { content: attr(data-category); grid-column: 2; color: var(--gold); font: 600 6px/1 ui-monospace, monospace; letter-spacing: .1em; }
.content-grid button:hover, .content-grid button:focus-visible { background: rgba(132,177,208,.1); outline: 0; }
.content-grid button.is-armed { background: rgba(239,196,127,.14); box-shadow: inset 0 0 0 1px rgba(239,196,127,.55); }
.content-grid button:active { cursor: grabbing; }
.content-grid i { grid-row: 1 / -1; align-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 15px color-mix(in srgb, var(--swatch), transparent 35%); }
.content-grid strong { align-self: end; font: 500 9px/1.1 ui-monospace, monospace; }
.content-grid small { align-self: start; margin-top: 4px; color: var(--dim); font: 7px/1 ui-monospace, monospace; }
.systems-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 190px); overflow-x: auto; scrollbar-width: thin; }
.systems-grid[hidden] { display: none; }
.systems-grid button { min-height: 100%; display: grid; align-content: center; gap: 7px; padding: 12px; border: 0; border-right: 1px solid var(--line); background: rgba(255,255,255,.01); color: var(--ink); text-align: left; cursor: pointer; }
.systems-grid button:hover, .systems-grid button:focus-visible { background: rgba(132,177,208,.1); outline: 0; }
.systems-grid button.is-active { background: rgba(239,196,127,.11); box-shadow: inset 0 0 0 1px rgba(239,196,127,.45); }
.systems-grid button.is-danger { background: rgba(190,62,62,.14); box-shadow: inset 0 0 0 1px rgba(230,104,104,.62); }
.systems-grid button.is-danger span { color: #f08d86; }
.systems-grid button span { color: var(--gold); font: 500 7px/1 ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.systems-grid button strong { font: 400 15px/1.1 Iowan Old Style, Baskerville, Georgia, serif; }
.systems-grid button small { color: var(--muted); font: 7px/1.35 ui-monospace, monospace; }
.system-build-form { min-height: 100%; display: grid; align-content: center; gap: 5px; padding: 9px 11px; border-right: 1px solid rgba(239,196,127,.38); background: rgba(239,196,127,.045); }
.system-build-form span { color: var(--gold); font: 500 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.system-build-form label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.system-build-form input { width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 7px; border: 1px solid var(--line); background: rgba(0,0,0,.35); color: var(--ink); font: 8px/1 ui-monospace, monospace; }
.system-build-form button { min-height: 24px; padding: 0 7px; border: 1px solid rgba(239,196,127,.4); background: rgba(239,196,127,.1); color: var(--ink); font: 500 7px/1 ui-monospace, monospace; text-align: center; }
.system-build-form small { color: var(--dim); font: 6.5px/1.25 ui-monospace, monospace; }
.systems-grid .system-build-job.is-ready { box-shadow: inset 0 0 0 1px rgba(115,215,166,.55); }
.systems-grid .system-build-job:disabled { opacity: .72; cursor: wait; }
#lab-canvas.is-drop-target { cursor: copy; }

.workspace-strip { position: absolute; z-index: 6; left: var(--rail-side); right: var(--rail-side); bottom: calc(var(--rail-bottom) + var(--rail-height) - 1px); height: 34px; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line-strong); border-bottom-color: var(--line); background: rgba(4,8,13,.9); backdrop-filter: blur(18px); scrollbar-width: thin; }
.workspace-strip button { flex: 0 0 auto; min-width: 128px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 11px; border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--muted); font: 500 8px/1 ui-monospace, monospace; cursor: pointer; }
.workspace-strip button:hover, .workspace-strip button:focus-visible { background: rgba(132,177,208,.1); color: var(--ink); outline: 0; }
.workspace-strip button.is-active { color: var(--ink); background: rgba(239,196,127,.1); box-shadow: inset 0 2px 0 rgba(239,196,127,.62); }
.workspace-strip button small { color: var(--dim); font: 7px/1 ui-monospace, monospace; }
.workspace-strip .workspace-add, .workspace-strip .workspace-manage { min-width: 42px; justify-content: center; color: var(--gold); }
.workspace-strip .workspace-manage { min-width: 76px; margin-left: auto; color: var(--muted); }

.lab-rail { position: absolute; z-index: 6; left: var(--rail-side); right: var(--rail-side); bottom: var(--rail-bottom); height: var(--rail-height); display: grid; grid-template-columns: minmax(205px, 1.2fr) auto auto minmax(230px, .9fr); align-items: stretch; border: 1px solid var(--line-strong); background: var(--glass); backdrop-filter: blur(20px); }
.laboratory.drawer-open .lab-rail { border-top-color: rgba(239,196,127,.55); background: rgba(5,9,14,.9); }
.lab-rail > * { border-right: 1px solid var(--line); }
.lab-rail > *:last-child { border-right: 0; }
.selection-status { display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 5px 10px; padding: 10px 14px; }
.selection-status span, .warp-control span { color: var(--dim); }
.selection-status > span, .selection-status > strong { grid-column: 1; }
.selection-status strong { font: 400 14px/1.1 Iowan Old Style, Baskerville, Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.radius-mode-toggle { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 112px; display: grid; gap: 4px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(116,214,255,.04); text-align: left; cursor: pointer; }
.radius-mode-toggle:hover { border-color: rgba(116,214,255,.45); background: rgba(116,214,255,.09); }
.radius-mode-toggle span { color: var(--gold); font: 500 7px/1 ui-monospace, monospace; letter-spacing: .08em; }
.radius-mode-toggle small { color: var(--muted); font: 7px/1.2 ui-monospace, monospace; }
.transport-controls { display: grid; grid-template-columns: repeat(4, auto); }
.transport-controls button { min-width: 68px; padding: 0 12px; border: 0; border-right: 1px solid var(--line); background: transparent; font: 500 9px/1 ui-monospace, monospace; cursor: pointer; }
.transport-controls button:last-child { border-right: 0; }
.transport-controls button:hover { background: rgba(132,177,208,.1); }
.transport-controls button:disabled { opacity: .35; cursor: default; }
.transport-controls .primary { color: #0c0d0e; background: var(--ink); }
.transport-controls .primary:hover { background: var(--gold); }
.warp-control { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 12px 15px; }
.warp-stepper { display: grid; grid-template-columns: 24px minmax(105px, 1fr) 24px; align-items: center; gap: 5px; }
.warp-control select { min-width: 0; border: 0; background: transparent; color: var(--ink); font: 500 10px/1 ui-monospace, monospace; outline: none; }
.warp-stepper button { width: 24px; height: 24px; border: 1px solid var(--line); background: rgba(132,177,208,.06); color: var(--ink); font: 13px/1 ui-monospace, monospace; cursor: pointer; }
.warp-stepper button:hover { border-color: var(--line-strong); background: rgba(132,177,208,.12); }
.content-controls { display: grid; grid-template-columns: 1.3fr .8fr; }
.content-controls button { border: 0; border-right: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 9px/1 ui-monospace, monospace; cursor: pointer; }
.content-controls button:last-child { border-right: 0; color: var(--muted); }
.content-controls button:hover { background: rgba(132,177,208,.1); }
.content-controls span { color: var(--gold); font-size: 15px; vertical-align: -1px; }

.workbench-note { position: absolute; z-index: 3; left: 31px; bottom: 15px; margin: 0; color: var(--dim); font-size: 7px; }
.toast { position: absolute; z-index: 8; right: 30px; top: 305px; max-width: 300px; transform: translateX(15px); padding: 10px 14px; border: 1px solid var(--line-strong); background: rgba(4,8,12,.92); color: var(--ink); font: 500 9px/1.3 ui-monospace, monospace; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translateX(0); }

.experiment-dock, .diagnostics, .lab-rail, .workspace-strip, .workbench-note, .guide-toggle, .truth-mark { transition: opacity .45s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.laboratory.is-cinematic .experiment-dock,
.laboratory.is-cinematic .diagnostics,
.laboratory.is-cinematic .lab-rail,
.laboratory.is-cinematic .workspace-strip,
.laboratory.is-cinematic .workbench-note,
.laboratory.is-cinematic .guide-toggle,
.laboratory.is-cinematic .truth-mark { opacity: 0; pointer-events: none; }
.laboratory.is-cinematic .experiment-dock { transform: translate(-50%, -18px); }
.laboratory.is-cinematic .diagnostics, .laboratory.is-cinematic .truth-mark { transform: translateX(18px); }
.laboratory.is-cinematic .lab-rail, .laboratory.is-cinematic .workspace-strip, .laboratory.is-cinematic .workbench-note { transform: translateY(28px); }
.laboratory.is-cinematic .scale-readout { padding: 11px 13px; border-left: 1px solid rgba(239,196,127,.35); background: linear-gradient(90deg, rgba(2,6,9,.72), transparent); backdrop-filter: blur(10px); }
.laboratory.is-cinematic .center-reticle { border-color: rgba(239,196,127,.34); }
.laboratory.is-season-view .experiment-card { left: auto; right: 30px; transform: translateX(0); opacity: 1; border-color: rgba(239,196,127,.38); }
.laboratory.is-season-view .center-reticle span { border-color: rgba(116,214,255,.75); box-shadow: 0 0 16px rgba(116,214,255,.35); }

@media (max-width: 980px) {
  :root { --rail-height: 136px; }
  .lab-rail { grid-template-columns: 1fr auto; }
  .selection-status, .transport-controls { border-bottom: 1px solid var(--line); }
  .warp-control { border-right: 1px solid var(--line); }
  .content-controls { min-height: 58px; }
  .content-drawer { grid-template-columns: 190px minmax(0, 1fr); }
  .diagnostics { display: none; }
  .experiment-dock { top: 86px; }
  .scientist-lesson { top: 150px; right: 20px; }
}

@media (max-width: 640px) {
  :root { --rail-side: 18px; --rail-bottom: 24px; --rail-height: 64px; }
  .laboratory { min-height: 720px; }
  .lab-header { top: 18px; left: 18px; right: 18px; }
  .truth-mark { display: none; }
  .scale-readout { top: 92px; left: 18px; }
  .inspector { top: auto; bottom: calc(var(--rail-bottom) + var(--rail-height) + 36px); left: 18px; width: calc(100vw - 36px); max-height: calc(100vh - 260px); overflow-y: auto; }
  .experiment-card { top: 238px; left: 18px; width: calc(100vw - 36px); max-height: calc(100vh - 348px); }
  .guide-card { top: 238px; left: 18px; width: calc(100vw - 36px); max-height: calc(100vh - 348px); }
  .experiment-dock { top: 182px; left: 18px; right: 18px; width: auto; transform: none; flex-direction: row; }
  .experiment-dock > span { display: none; }
  .experiment-dock button { flex: 1; justify-content: center; border-right: 1px solid var(--line); border-bottom: 0; }
  .experiment-dock { overflow-x: auto; }
  .experiment-dock button { min-width: 82px; }
  .scientist-lesson { top: 238px; right: 18px; left: 18px; width: auto; max-height: calc(100vh - 348px); overflow-y: auto; }
  .lab-rail { grid-template-columns: minmax(260px, 1fr) auto auto minmax(260px, 1fr); overflow-x: auto; }
  .lab-rail > * { border-right: 1px solid var(--line); border-bottom: 0; }
  .selection-status { min-height: 64px; }
  .transport-controls { min-height: 64px; }
  .warp-control { min-height: 64px; border-right: 1px solid var(--line); }
  .content-controls { min-height: 64px; min-width: 250px; }
  .content-drawer { height: 142px; grid-template-columns: 150px minmax(0, 1fr); }
  .workspace-strip { left: 18px; right: 18px; }
  .content-drawer header { padding: 10px; }
  .content-drawer header strong { font-size: 13px; }
  .content-drawer header small { font-size: 7px; }
  .placement-hud { width: calc(100vw - 36px); min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
  .placement-hud > span { display: none; }
  .workbench-note { left: 18px; bottom: 7px; max-width: calc(100vw - 36px); }
  .guide-toggle { right: 18px; bottom: 104px; }
  .laboratory.is-season-view .experiment-card { left: 18px; right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.trail-controls {
  position: fixed;
  z-index: 18;
  right: 24px;
  bottom: 112px;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(216, 167, 80, .48);
  background: rgba(3, 5, 7, .9);
  backdrop-filter: blur(14px);
}

.trail-controls button {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(207, 216, 224, .24);
  background: transparent;
  color: #cfd8e0;
  font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.trail-controls button:hover,
.trail-controls button:focus-visible,
.trail-controls .is-active {
  border-color: #d8a750;
  background: rgba(216, 167, 80, .15);
  color: #f3eee4;
  outline: none;
}

@media (max-width: 760px) {
  .trail-controls {
    right: 12px;
    bottom: 86px;
  }
}

.frame-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
}

.frame-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(207, 216, 224, .24);
  background: rgba(255, 255, 255, .025);
}

.frame-card > span,
.frame-card > small {
  display: block;
  color: #9eabb5;
  font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.frame-card > strong {
  display: block;
  min-height: 42px;
  margin: 6px 0 10px;
  color: #f3eee4;
  font: 600 14px/1.35 Georgia, serif;
}

.event-sequence {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d9e0e5;
  font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.event-sequence i {
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
}

.event-sequence b {
  width: 12px;
  height: 12px;
  border: 2px solid #efc47f;
  border-radius: 50%;
  background: #fff2c9;
  box-shadow: 0 0 16px #efc47f;
}

.frame-comparison > p {
  grid-column: 1 / -1;
  margin: 0;
  padding: 9px 11px;
  border-left: 2px solid #7acfb2;
  background: rgba(122, 207, 178, .07);
  color: #cfd8e0;
  font-size: 11px;
  line-height: 1.45;
}

.frame-comparison.is-replaying .sun-frame .event-sequence b {
  animation: event-flash 1.8s ease-out both;
}

.frame-comparison.is-replaying .rocket-frame .event-sequence i:first-child b {
  animation: event-flash 1.8s ease-out both;
}

.frame-comparison.is-replaying .rocket-frame .event-sequence i:last-child b {
  animation: event-flash 1.8s .9s ease-out both;
}

@keyframes event-flash {
  0% { transform: scale(.5); opacity: .25; }
  18% { transform: scale(1.8); opacity: 1; }
  100% { transform: scale(1); opacity: .75; }
}

#relativity-pause {
  border-color: #7acfb2;
  color: #b9f0dd;
}

.scientist-card-cue {
  display: block;
  flex-basis: 100%;
  margin-top: 8px;
  color: #7acfb2;
  font: 700 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.scientist-action-cue {
  position: fixed;
  z-index: 40;
  width: max-content;
  max-width: 280px;
  padding: 11px 14px;
  border: 1px solid #7acfb2;
  background: #08110f;
  color: #d9fff2;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .5);
  font: 800 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  pointer-events: none;
}

.scientist-action-cue::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: -10px;
  border: 5px solid transparent;
  border-top-color: #7acfb2;
}

@media (max-width: 760px) {
  .frame-comparison { grid-template-columns: 1fr; }
  .frame-comparison > p { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .frame-comparison.is-replaying .event-sequence b { animation: none; }
}