/* Orr Biologicals — Algal Digital Lab
   Dark instrument surface for the computational workspace. The public site
   remains the warm editorial shell; this route is intentionally immersive. */
:root {
  --sim-ink: #eaf6ec;
  --sim-ink-soft: #b9cdbd;
  --sim-mute: #8da696;
  --sim-faint: #5e7666;
  --sim-bg: #06100c;
  --sim-bg-2: #091711;
  --sim-panel: rgba(13, 29, 20, .84);
  --sim-panel-strong: #0e2017;
  --sim-panel-soft: rgba(18, 38, 26, .72);
  --sim-border: rgba(163, 225, 170, .14);
  --sim-border-strong: rgba(163, 225, 170, .28);
  --sim-leaf: #91e49c;
  --sim-leaf-bright: #b5ffc0;
  --sim-leaf-deep: #3cae62;
  --sim-cyan: #73d8d3;
  --sim-amber: #e2b16d;
  --sim-red: #f08e83;
  --sim-purple: #bd9eea;
  --sim-sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sim-serif: "Source Serif 4", Georgia, serif;
  --sim-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sim-radius: 15px;
  --sim-shadow: 0 24px 90px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--sim-bg); scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--sim-ink);
  background:
    radial-gradient(circle at 72% -12%, rgba(65, 139, 80, .17), transparent 32rem),
    radial-gradient(circle at 18% 60%, rgba(30, 112, 88, .08), transparent 30rem),
    var(--sim-bg);
  font: 14px/1.55 var(--sim-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .48; }
::selection { color: #06100c; background: var(--sim-leaf); }
:focus-visible { outline: 2px solid var(--sim-leaf); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #07120d; }
::-webkit-scrollbar-thumb { background: #294735; border: 2px solid #07120d; border-radius: 10px; }

.sim-skip {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: -999px;
  padding: 10px 16px;
  color: #05100a;
  background: var(--sim-leaf);
  border-radius: 7px;
  font-weight: 700;
}
.sim-skip:focus { left: 14px; }
.sim-app { display: flex; min-height: 100vh; }

/* Sidebar */
.sim-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  display: flex;
  flex: 0 0 252px;
  flex-direction: column;
  width: 252px;
  padding: 28px 16px 18px;
  background: linear-gradient(180deg, rgba(7, 19, 13, .98), rgba(6, 15, 10, .98));
  border-right: 1px solid var(--sim-border);
}
.sim-brand { display: inline-flex; align-items: center; gap: 11px; padding: 0 10px; }
.sim-brand svg { width: 32px; height: 32px; flex: 0 0 32px; color: var(--sim-leaf); }
.sim-brand strong { display: block; color: #f1faef; font-size: 14px; letter-spacing: -.02em; }
.sim-brand small { display: block; margin-top: 3px; color: var(--sim-mute); font: 9px/1.2 var(--sim-mono); letter-spacing: .13em; }
.sim-sidebar-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 30px 10px 14px;
  color: var(--sim-mute);
  font: 9px var(--sim-mono);
  letter-spacing: .12em;
}
.status-orb { width: 7px; height: 7px; border-radius: 50%; background: var(--sim-leaf); box-shadow: 0 0 0 4px rgba(145, 228, 156, .1), 0 0 13px rgba(145, 228, 156, .55); }
.sim-nav { display: flex; flex-direction: column; gap: 3px; }
.sim-nav-label { margin: 10px 11px 7px; color: var(--sim-faint); font: 9px var(--sim-mono); letter-spacing: .19em; text-transform: uppercase; }
.sim-nav-label-lower { margin-top: 29px; }
.sim-nav-item {
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 43px;
  padding: 8px 10px;
  color: var(--sim-mute);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
.sim-nav-item:hover { color: var(--sim-ink); background: rgba(135, 216, 145, .06); border-color: var(--sim-border); transform: translateX(2px); }
.sim-nav-item.is-active { color: var(--sim-ink); background: linear-gradient(90deg, rgba(97, 182, 109, .16), rgba(97, 182, 109, .04)); border-color: rgba(145, 228, 156, .18); box-shadow: inset 3px 0 var(--sim-leaf); }
.nav-glyph { color: var(--sim-leaf); font-size: 17px; line-height: 1; text-align: center; }
.sim-nav-item:not(.is-active) .nav-glyph { color: var(--sim-faint); }
.sim-nav-item span:nth-child(2) { font-size: 12.5px; font-weight: 500; }
.sim-nav-item kbd { color: var(--sim-faint); font: 9px var(--sim-mono); }
.sim-sidebar-bottom { margin-top: auto; }
.sim-model-badge { display: flex; align-items: center; gap: 10px; margin: 0 5px 14px; padding: 12px 10px; background: rgba(145, 228, 156, .055); border: 1px solid var(--sim-border); border-radius: 10px; }
.model-icon { display: grid; width: 27px; height: 27px; place-items: center; color: var(--sim-leaf); background: rgba(145, 228, 156, .11); border-radius: 7px; font: 16px var(--sim-serif); }
.sim-model-badge b, .sim-model-badge small { display: block; }
.sim-model-badge b { color: var(--sim-ink-soft); font: 10px var(--sim-mono); }
.sim-model-badge small { margin-top: 3px; color: var(--sim-faint); font-size: 10px; }
.sim-settings-link, .sim-exit-link { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px; color: var(--sim-mute); background: none; border-radius: 7px; font-size: 11px; text-align: left; }
.sim-settings-link:hover, .sim-exit-link:hover { color: var(--sim-ink); background: rgba(255, 255, 255, .04); }
.sim-settings-link span, .sim-exit-link span { color: var(--sim-faint); font-size: 15px; }

/* Top bar and shared copy */
.sim-main { min-width: 0; width: calc(100% - 252px); margin-left: 252px; }
.sim-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 74px; padding: 15px clamp(20px, 3vw, 46px); border-bottom: 1px solid var(--sim-border); background: rgba(6, 16, 11, .7); backdrop-filter: blur(16px); }
.sim-breadcrumb { display: flex; align-items: center; gap: 9px; color: var(--sim-mute); font: 10px var(--sim-mono); letter-spacing: .04em; white-space: nowrap; }
.sim-breadcrumb i { color: var(--sim-faint); font-style: normal; }
.sim-breadcrumb strong { color: var(--sim-ink-soft); font-weight: 400; }
.sim-top-actions { display: flex; align-items: center; gap: 9px; min-width: 0; }
.sim-project-chip { display: inline-flex; align-items: center; gap: 7px; max-width: 220px; padding: 7px 11px; color: var(--sim-ink-soft); background: rgba(255, 255, 255, .035); border: 1px solid var(--sim-border); border-radius: 20px; font-size: 11px; }
.sim-project-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--sim-cyan); box-shadow: 0 0 9px rgba(115, 216, 211, .7); }
.sim-icon-action, .sim-top-action, .sim-run-action { min-height: 34px; border-radius: 7px; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.sim-icon-action { width: 34px; color: var(--sim-leaf); background: rgba(145, 228, 156, .06); border: 1px solid var(--sim-border); font-size: 18px; }
.sim-icon-action:hover, .sim-top-action:hover { background: rgba(145, 228, 156, .13); border-color: var(--sim-border-strong); }
.sim-top-action { padding: 0 12px; color: var(--sim-ink-soft); background: rgba(255, 255, 255, .025); border: 1px solid var(--sim-border); font-size: 11px; }
.sim-top-action span, .sim-run-action span:last-child { margin-left: 7px; color: var(--sim-faint); font: 9px var(--sim-mono); }
.sim-run-action { padding: 0 15px; color: #07120b; background: var(--sim-leaf); font-size: 11px; font-weight: 700; }
.sim-run-action:hover { background: var(--sim-leaf-bright); transform: translateY(-1px); }
.run-icon { margin-right: 5px; }
.sim-view { width: 100%; max-width: 1800px; min-height: calc(100vh - 74px); padding: clamp(25px, 3.2vw, 49px) clamp(20px, 3vw, 46px) 80px; margin: 0 auto; }
.sim-nojs-panel { max-width: 580px; margin: 15vh auto; padding: 34px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.sim-nojs-panel h1, .sim-page-heading h1 { margin: 12px 0 10px; color: #f4fff2; font-size: clamp(32px, 4vw, 56px); line-height: .98; letter-spacing: -.055em; }
.sim-nojs-panel p:last-child, .sim-page-subtitle { max-width: 58ch; color: var(--sim-ink-soft); font: 16px/1.65 var(--sim-serif); }
.sim-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.sim-page-heading h1 { margin-bottom: 0; }
.sim-page-heading p { margin: 0; }
.sim-eyebrow { color: var(--sim-leaf); font: 10px var(--sim-mono); letter-spacing: .2em; text-transform: uppercase; }
.sim-section-label { color: var(--sim-mute); font: 10px var(--sim-mono); letter-spacing: .14em; text-transform: uppercase; }
.sim-muted { color: var(--sim-mute); }
.sim-mono { font-family: var(--sim-mono); }
.sim-provenance { display: inline-flex; align-items: center; gap: 6px; color: var(--sim-amber); font: 9px var(--sim-mono); letter-spacing: .08em; text-transform: uppercase; }
.sim-provenance::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.sim-divider { height: 1px; margin: 24px 0; background: var(--sim-border); }
.sim-empty { display: grid; min-height: 230px; place-items: center; padding: 32px; color: var(--sim-mute); background: rgba(255, 255, 255, .018); border: 1px dashed var(--sim-border); border-radius: var(--sim-radius); text-align: center; }
.sim-empty strong { display: block; margin-bottom: 7px; color: var(--sim-ink-soft); font-size: 16px; }
.sim-empty p { max-width: 43ch; margin: 0 auto 17px; font: 15px/1.55 var(--sim-serif); }
.sim-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 37px; padding: 0 14px; color: var(--sim-ink-soft); background: rgba(255, 255, 255, .04); border: 1px solid var(--sim-border); border-radius: 7px; font-size: 11px; font-weight: 600; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; }
.sim-button:hover { color: var(--sim-ink); background: rgba(145, 228, 156, .09); border-color: var(--sim-border-strong); transform: translateY(-1px); }
.sim-button.primary { color: #06100c; background: var(--sim-leaf); border-color: var(--sim-leaf); }
.sim-button.primary:hover { color: #06100c; background: var(--sim-leaf-bright); }
.sim-button.ghost { background: transparent; }
.sim-button.danger { color: var(--sim-red); }
.sim-button.small { min-height: 30px; padding: 0 10px; font-size: 10px; }
.sim-button:disabled { transform: none; }
.sim-link-button { color: var(--sim-leaf); background: none; font-size: 11px; font-weight: 600; }
.sim-link-button:hover { color: var(--sim-leaf-bright); text-decoration: underline; text-underline-offset: 4px; }

/* Dashboard */
.dashboard-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .44fr); gap: 24px; align-items: stretch; margin-bottom: 26px; }
.dashboard-hero-copy { position: relative; overflow: hidden; min-height: 252px; padding: clamp(25px, 4vw, 48px); background: linear-gradient(120deg, rgba(35, 82, 49, .52), rgba(12, 31, 21, .88) 64%); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); box-shadow: var(--sim-shadow); }
.dashboard-hero-copy::after { content: ""; position: absolute; right: -55px; bottom: -85px; width: 310px; height: 310px; background: radial-gradient(circle, rgba(145, 228, 156, .18), transparent 65%); border: 1px solid rgba(145, 228, 156, .14); border-radius: 50%; box-shadow: 0 0 0 32px rgba(145, 228, 156, .025), 0 0 0 64px rgba(145, 228, 156, .018); pointer-events: none; }
.dashboard-hero-copy h2 { position: relative; z-index: 1; max-width: 12ch; margin: 15px 0 13px; color: #f1fbf0; font-size: clamp(31px, 4vw, 55px); line-height: .97; letter-spacing: -.055em; }
.dashboard-hero-copy p { position: relative; z-index: 1; max-width: 53ch; margin: 0; color: var(--sim-ink-soft); font: 16px/1.6 var(--sim-serif); }
.dashboard-hero-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 25px; }
.dashboard-signal-card { display: flex; flex-direction: column; justify-content: space-between; padding: 23px; background: linear-gradient(160deg, rgba(13, 37, 25, .92), rgba(9, 21, 15, .9)); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.signal-topline { display: flex; justify-content: space-between; color: var(--sim-mute); font: 9px var(--sim-mono); letter-spacing: .12em; text-transform: uppercase; }
.signal-wave { position: relative; height: 92px; margin: 17px 0 12px; overflow: hidden; border-bottom: 1px solid var(--sim-border); }
.signal-wave::before, .signal-wave::after { content: ""; position: absolute; inset: 15px 0 0; background: linear-gradient(90deg, transparent, rgba(145, 228, 156, .3), transparent); clip-path: polygon(0 64%, 5% 59%, 9% 73%, 14% 39%, 20% 52%, 27% 19%, 32% 48%, 40% 31%, 47% 57%, 53% 15%, 62% 45%, 70% 30%, 77% 60%, 83% 25%, 91% 49%, 100% 17%, 100% 25%, 91% 57%, 83% 33%, 77% 68%, 70% 39%, 62% 55%, 53% 27%, 47% 65%, 40% 40%, 32% 60%, 27% 30%, 20% 62%, 14% 49%, 9% 81%, 5% 68%, 0 76%); opacity: .9; }
.signal-wave::after { inset: 42px 0 0; background: linear-gradient(90deg, transparent, rgba(115, 216, 211, .3), transparent); transform: translateX(-22px) scaleY(.6); }
.signal-value { display: flex; align-items: baseline; gap: 8px; }
.signal-value strong { color: var(--sim-leaf); font-size: 36px; letter-spacing: -.06em; }
.signal-value span { color: var(--sim-mute); font: 10px var(--sim-mono); }
.signal-card-note { margin-top: 7px; color: var(--sim-mute); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.dashboard-panel { min-width: 0; padding: 20px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.dashboard-panel.panel-span-7 { grid-column: span 7; }
.dashboard-panel.panel-span-5 { grid-column: span 5; }
.dashboard-panel.panel-span-12 { grid-column: span 12; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.panel-heading h2, .panel-heading h3 { margin: 0; color: var(--sim-ink); font-size: 15px; letter-spacing: -.02em; }
.panel-heading h2 { font-size: 18px; }
.panel-heading p { margin: 4px 0 0; color: var(--sim-mute); font: 12px/1.45 var(--sim-serif); }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 19px 0 0; }
.metric-mini { min-width: 0; padding: 14px; background: rgba(255, 255, 255, .025); border: 1px solid var(--sim-border); border-radius: 10px; }
.metric-mini span { display: block; overflow: hidden; color: var(--sim-mute); font: 9px var(--sim-mono); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.metric-mini strong { display: block; margin-top: 8px; color: var(--sim-ink); font-size: 21px; letter-spacing: -.04em; }
.metric-mini small { display: block; margin-top: 2px; color: var(--sim-faint); font-size: 10px; }
.run-list { width: 100%; border-collapse: collapse; }
.run-list th { padding: 0 10px 10px; color: var(--sim-faint); font: 9px var(--sim-mono); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.run-list td { padding: 12px 10px; color: var(--sim-ink-soft); border-top: 1px solid var(--sim-border); font-size: 11px; }
.run-list tr:hover td { background: rgba(145, 228, 156, .035); }
.run-list td:first-child { color: var(--sim-ink); font-weight: 600; }
.run-list td:last-child { text-align: right; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; color: var(--sim-leaf); font: 9px var(--sim-mono); text-transform: uppercase; }
.status-pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-pill.amber { color: var(--sim-amber); }
.status-pill.red { color: var(--sim-red); }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.quick-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 106px; padding: 14px; color: var(--sim-ink-soft); background: rgba(255, 255, 255, .025); border: 1px solid var(--sim-border); border-radius: 10px; text-align: left; transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.quick-card:hover { background: rgba(145, 228, 156, .07); border-color: var(--sim-border-strong); transform: translateY(-2px); }
.quick-card b { color: var(--sim-ink); font-size: 12px; }
.quick-card p { margin: 5px 0 0; color: var(--sim-mute); font: 12px/1.35 var(--sim-serif); }
.quick-card span { align-self: flex-end; color: var(--sim-leaf); font-size: 17px; }

/* Laboratory */
.lab-title-bar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.lab-title-bar h2 { margin: 9px 0 0; color: #effbef; font-size: clamp(25px, 3vw, 38px); line-height: 1; letter-spacing: -.05em; }
.lab-title-bar p { max-width: 44ch; margin: 0; color: var(--sim-mute); font: 13px/1.45 var(--sim-serif); text-align: right; }
.lab-grid { --lab-stage-height: clamp(430px, 44vw, 640px); display: grid; grid-template-columns: minmax(236px, 276px) minmax(380px, 1fr) minmax(230px, 286px); gap: 12px; align-items: start; }
.sim-panel { min-width: 0; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); box-shadow: 0 18px 50px rgba(0, 0, 0, .12); }
.control-panel { max-height: var(--lab-stage-height); overflow: auto; overscroll-behavior: contain; padding: 18px 17px; scrollbar-gutter: stable; }
.control-panel h3 { margin: 0; color: var(--sim-ink); font-size: 14px; }
.control-panel .panel-subtitle { margin: 5px 0 18px; color: var(--sim-mute); font: 12px/1.45 var(--sim-serif); }
.field-group { margin-bottom: 14px; }
.field-group:last-child { margin-bottom: 0; }
.field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--sim-mute); font: 9px var(--sim-mono); letter-spacing: .09em; text-transform: uppercase; }
.field-label em { color: var(--sim-faint); font-style: normal; letter-spacing: 0; text-transform: none; }
.sim-input, .sim-select, .sim-textarea { width: 100%; color: var(--sim-ink); background: rgba(0, 0, 0, .2); border: 1px solid var(--sim-border); border-radius: 7px; outline: 0; transition: border-color .2s ease, box-shadow .2s ease; }
.sim-input, .sim-select { height: 36px; padding: 0 10px; }
.sim-textarea { min-height: 115px; padding: 10px; line-height: 1.5; resize: vertical; }
.sim-input:focus, .sim-select:focus, .sim-textarea:focus { border-color: var(--sim-leaf); box-shadow: 0 0 0 3px rgba(145, 228, 156, .1); }
.sim-select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sim-mute) 50%), linear-gradient(135deg, var(--sim-mute) 50%, transparent 50%); background-position: calc(100% - 14px) 15px, calc(100% - 10px) 15px; background-repeat: no-repeat; background-size: 4px 4px, 4px 4px; }
.sim-select option { color: #14231a; background: #eaf6ec; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.three-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.input-with-unit { position: relative; }
.input-with-unit .sim-input { padding-right: 45px; }
.input-unit { position: absolute; top: 50%; right: 9px; color: var(--sim-faint); font: 9px var(--sim-mono); transform: translateY(-50%); pointer-events: none; }
.control-divider { height: 1px; margin: 18px 0; background: var(--sim-border); }
.switch-list { display: grid; gap: 7px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; min-height: 29px; color: var(--sim-ink-soft); font-size: 11px; }
.switch-row span small { display: block; margin-top: 1px; color: var(--sim-faint); font: 9px var(--sim-mono); }
.sim-switch { position: relative; width: 42px; height: 24px; flex: 0 0 42px; }
.sim-switch input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sim-switch span { position: absolute; inset: 2px 0; background: #20352a; border: 1px solid var(--sim-border); border-radius: 20px; transition: background .2s ease, border-color .2s ease; }
.sim-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--sim-mute); border-radius: 50%; transition: transform .2s ease, background .2s ease; }
.sim-switch input:checked + span { background: rgba(145, 228, 156, .23); border-color: rgba(145, 228, 156, .45); }
.sim-switch input:checked + span::after { background: var(--sim-leaf); transform: translateX(22px); }
.sim-switch input:focus-visible + span { outline: 2px solid var(--sim-leaf); outline-offset: 3px; }
.control-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 19px; }
.validation-message { display: none; margin-top: 10px; padding: 10px; color: var(--sim-red); background: rgba(240, 142, 131, .08); border: 1px solid rgba(240, 142, 131, .22); border-radius: 7px; font: 10px/1.45 var(--sim-mono); }
.validation-message.is-visible { display: block; }

.visual-panel { position: relative; height: auto; min-height: 420px; max-height: var(--lab-stage-height); aspect-ratio: 1.08 / 1; overflow: hidden; background: #07130f; border: 1px solid var(--sim-border-strong); border-radius: var(--sim-radius); box-shadow: 0 24px 80px rgba(0, 0, 0, .3); }
.visual-panel::before { content: ""; position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 12%, rgba(4, 12, 8, .08) 54%, rgba(2, 7, 5, .5) 100%); pointer-events: none; }
#labCanvas { display: block; width: 100%; height: 100%; min-height: 0; background: #07130f; cursor: grab; touch-action: none; }
#labCanvas:active { cursor: grabbing; }
.scene-kicker, .scene-telemetry, .scene-camera-control, .scene-legend { position: absolute; z-index: 2; }
.scene-kicker { top: 17px; left: 18px; max-width: calc(100% - 170px); }
.scene-kicker strong { display: block; margin-top: 5px; color: #f4fff2; font-size: 17px; letter-spacing: -.03em; }
.scene-kicker small { color: var(--sim-mute); font: 9px var(--sim-mono); letter-spacing: .06em; }
.scene-telemetry { top: 17px; right: 18px; display: grid; gap: 7px; min-width: 112px; padding: 10px 11px; background: rgba(5, 16, 10, .72); border: 1px solid var(--sim-border); border-radius: 8px; backdrop-filter: blur(8px); }
.telemetry-item { display: flex; justify-content: space-between; gap: 15px; color: var(--sim-mute); font: 9px var(--sim-mono); }
.telemetry-item strong { color: var(--sim-leaf); font-weight: 400; }
.scene-camera-control { right: 14px; bottom: 14px; display: flex; justify-content: center; gap: 4px; max-width: calc(100% - 28px); padding: 4px; background: rgba(5, 16, 10, .8); border: 1px solid var(--sim-border); border-radius: 8px; backdrop-filter: blur(8px); }
.camera-button { padding: 6px 8px; color: var(--sim-mute); background: transparent; border-radius: 5px; font: 9px var(--sim-mono); }
.camera-button:hover, .camera-button.is-active { color: var(--sim-ink); background: rgba(145, 228, 156, .13); }
.scene-legend { right: 18px; bottom: 60px; left: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px 11px; color: var(--sim-mute); font: 9px var(--sim-mono); text-align: center; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; border-radius: 50%; }
.legend-dot.green { background: var(--sim-leaf); box-shadow: 0 0 8px var(--sim-leaf); }
.legend-dot.cyan { background: var(--sim-cyan); box-shadow: 0 0 8px var(--sim-cyan); }
.legend-dot.amber { background: var(--sim-amber); box-shadow: 0 0 8px var(--sim-amber); }
.scene-status { position: absolute; top: 50%; left: 50%; z-index: 3; max-width: calc(100% - 32px); padding: 7px 10px; color: var(--sim-mute); background: rgba(5, 16, 10, .7); border: 1px solid var(--sim-border); border-radius: 6px; font: 9px var(--sim-mono); letter-spacing: .04em; text-align: center; transform: translate(-50%, -50%); pointer-events: none; }
.scene-status.is-hidden { display: none; }
.scene-loading { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; color: var(--sim-ink-soft); background: #07130f; font: 10px var(--sim-mono); letter-spacing: .08em; }
.scene-loading.is-hidden { display: none; }
.loader { width: 16px; height: 16px; margin-bottom: 12px; border: 1px solid rgba(145, 228, 156, .25); border-top-color: var(--sim-leaf); border-radius: 50%; animation: sim-spin .8s linear infinite; }
@keyframes sim-spin { to { transform: rotate(360deg); } }
.telemetry-panel { display: flex; flex-direction: column; gap: 15px; padding: 17px; }
.telemetry-head { display: flex; justify-content: space-between; gap: 8px; align-items: start; }
.telemetry-head h3 { margin: 0; color: var(--sim-ink); font-size: 14px; }
.telemetry-head small { display: block; margin-top: 4px; color: var(--sim-mute); font: 9px var(--sim-mono); }
.live-dot { width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: var(--sim-leaf); box-shadow: 0 0 0 4px rgba(145, 228, 156, .1), 0 0 12px rgba(145, 228, 156, .6); }
.result-hero { padding: 16px; background: linear-gradient(145deg, rgba(81, 175, 93, .14), rgba(255, 255, 255, .015)); border: 1px solid rgba(145, 228, 156, .2); border-radius: 11px; }
.result-hero .result-label { color: var(--sim-mute); font: 9px var(--sim-mono); letter-spacing: .12em; text-transform: uppercase; }
.result-hero strong { display: block; margin: 7px 0 2px; color: var(--sim-leaf-bright); font-size: 31px; letter-spacing: -.06em; }
.result-hero small { color: var(--sim-mute); font-size: 10px; }
.result-list { display: grid; gap: 0; margin: 0; }
.result-list > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--sim-border); }
.result-list dt { color: var(--sim-mute); font-size: 10px; }
.result-list dd { margin: 0; color: var(--sim-ink-soft); font: 10px var(--sim-mono); text-align: right; }
.factor-list { display: grid; gap: 8px; }
.factor-row { display: grid; grid-template-columns: 66px 1fr 36px; align-items: center; gap: 7px; color: var(--sim-mute); font: 9px var(--sim-mono); }
.factor-track { height: 4px; overflow: hidden; background: rgba(255,255,255,.08); border-radius: 4px; }
.factor-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--sim-leaf-deep), var(--sim-leaf)); border-radius: inherit; }
.factor-row b { color: var(--sim-ink-soft); font-weight: 400; text-align: right; }
.provenance-note { margin-top: auto; padding: 11px; color: var(--sim-mute); background: rgba(226, 177, 109, .06); border-left: 2px solid var(--sim-amber); font: 10px/1.5 var(--sim-serif); }
.provenance-note strong { display: block; margin-bottom: 3px; color: var(--sim-amber); font: 9px var(--sim-mono); letter-spacing: .09em; text-transform: uppercase; }

/* Charts, analysis and tables */
.lab-analysis-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 12px; margin-top: 12px; }
.analysis-panel { min-width: 0; padding: 18px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.analysis-panel .panel-heading { margin-bottom: 13px; }
.chart-wrap { position: relative; min-height: 235px; }
#biomassChart { display: block; width: 100%; height: 235px; }
.chart-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--sim-faint); font: 10px var(--sim-mono); letter-spacing: .04em; }
.compare-box { display: grid; gap: 11px; }
.compare-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: end; }
.compare-row > span { padding-bottom: 9px; color: var(--sim-faint); font: 10px var(--sim-mono); text-align: center; }
.compare-result { display: grid; gap: 8px; padding: 12px; background: rgba(115, 216, 211, .055); border: 1px solid rgba(115, 216, 211, .16); border-radius: 9px; }
.compare-result > div { display: flex; justify-content: space-between; gap: 8px; color: var(--sim-mute); font-size: 10px; }
.compare-result strong { color: var(--sim-cyan); font: 10px var(--sim-mono); }
.analysis-footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.assumptions-panel { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 25px; margin-top: 12px; padding: 18px; background: rgba(255, 255, 255, .018); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.assumptions-panel h3 { margin: 0 0 8px; color: var(--sim-ink); font-size: 14px; }
.assumptions-panel p { margin: 0; color: var(--sim-mute); font: 13px/1.55 var(--sim-serif); }
.assumptions-panel ol { display: grid; gap: 6px; margin: 0; padding-left: 19px; color: var(--sim-mute); font-size: 11px; }
.assumptions-panel li::marker { color: var(--sim-leaf-deep); font-family: var(--sim-mono); }
.run-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.meta-chip { padding: 5px 8px; color: var(--sim-mute); background: rgba(255, 255, 255, .03); border: 1px solid var(--sim-border); border-radius: 5px; font: 9px var(--sim-mono); }
.meta-chip strong { color: var(--sim-ink-soft); font-weight: 400; }

/* Shared list views */
.view-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; padding: 13px 15px; background: rgba(255,255,255,.025); border: 1px solid var(--sim-border); border-radius: 10px; }
.view-toolbar p { margin: 0; color: var(--sim-mute); font: 12px var(--sim-serif); }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.data-table-wrap { overflow-x: auto; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.data-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.data-table th { padding: 13px 15px; color: var(--sim-faint); background: rgba(255,255,255,.025); font: 9px var(--sim-mono); letter-spacing: .12em; text-align: left; text-transform: uppercase; }
.data-table td { padding: 14px 15px; color: var(--sim-ink-soft); border-top: 1px solid var(--sim-border); font-size: 11px; vertical-align: middle; }
.data-table tr:hover td { background: rgba(145, 228, 156, .035); }
.data-table td strong { display: block; color: var(--sim-ink); font-size: 12px; }
.data-table td small { display: block; margin-top: 3px; color: var(--sim-faint); font: 9px var(--sim-mono); }
.data-table .number { color: var(--sim-leaf); font: 11px var(--sim-mono); white-space: nowrap; }
.table-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.catalog-card { position: relative; display: flex; min-height: 220px; flex-direction: column; padding: 19px; overflow: hidden; background: linear-gradient(150deg, rgba(20, 51, 32, .72), rgba(11, 26, 18, .76)); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.catalog-card::before { content: ""; position: absolute; right: -35px; top: -35px; width: 130px; height: 130px; border: 1px solid rgba(145, 228, 156, .11); border-radius: 50%; box-shadow: 0 0 0 14px rgba(145, 228, 156, .025), 0 0 0 28px rgba(145, 228, 156, .02); }
.catalog-card:hover { transform: translateY(-3px); border-color: var(--sim-border-strong); background: linear-gradient(150deg, rgba(27, 68, 42, .75), rgba(11, 26, 18, .82)); }
.catalog-card-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.catalog-card h2 { max-width: 14ch; margin: 0; color: var(--sim-ink); font-size: 18px; letter-spacing: -.03em; }
.catalog-card .latin { margin-top: 4px; color: var(--sim-leaf); font: 10px var(--sim-mono); }
.strain-mark { display: grid; width: 36px; height: 36px; place-items: center; color: var(--sim-cyan); border: 1px solid rgba(115, 216, 211, .22); border-radius: 50%; font-size: 22px; }
.catalog-card p { margin: 17px 0; color: var(--sim-mute); font: 13px/1.5 var(--sim-serif); }
.catalog-card .card-bottom { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; }
.catalog-card .card-bottom small { max-width: 18ch; color: var(--sim-faint); font: 9px/1.4 var(--sim-mono); }
.catalog-card .card-bottom button { color: var(--sim-leaf); background: none; font-size: 11px; font-weight: 600; }
.catalog-card .card-bottom button:hover { color: var(--sim-leaf-bright); }
.note-layout { display: grid; grid-template-columns: minmax(220px, .48fr) minmax(0, 1fr); gap: 13px; }
.note-editor, .note-list-panel { padding: 20px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.note-editor h2, .note-list-panel h2 { margin: 0 0 17px; color: var(--sim-ink); font-size: 16px; }
.note-editor .field-group { margin-bottom: 13px; }
.note-editor .sim-button { margin-top: 3px; }
.note-list { display: grid; gap: 8px; }
.note-card { padding: 13px; background: rgba(255,255,255,.025); border: 1px solid var(--sim-border); border-radius: 8px; }
.note-card-head { display: flex; justify-content: space-between; gap: 9px; }
.note-card strong { color: var(--sim-ink-soft); font-size: 12px; }
.note-card time { color: var(--sim-faint); font: 9px var(--sim-mono); white-space: nowrap; }
.note-card p { display: -webkit-box; overflow: hidden; margin: 7px 0 0; color: var(--sim-mute); font: 12px/1.45 var(--sim-serif); -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.assistant-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 14px; }
.assistant-panel { padding: 21px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.assistant-panel h2 { margin: 0 0 8px; color: var(--sim-ink); font-size: 18px; }
.assistant-panel > p { margin: 0 0 18px; color: var(--sim-mute); font: 14px/1.55 var(--sim-serif); }
.assistant-disclaimer { display: flex; gap: 9px; margin-top: 17px; padding: 11px; color: var(--sim-amber); background: rgba(226,177,109,.06); border: 1px solid rgba(226,177,109,.13); border-radius: 7px; font: 10px/1.5 var(--sim-mono); }
.assistant-disclaimer span { font-size: 14px; }
.assistant-answer { min-height: 290px; padding: 22px; background: linear-gradient(150deg, rgba(20,51,32,.65), rgba(11,26,18,.75)); border: 1px solid rgba(145,228,156,.16); border-radius: var(--sim-radius); }
.assistant-answer h3 { margin: 0 0 13px; color: var(--sim-leaf-bright); font-size: 15px; }
.assistant-answer p { margin: 0 0 13px; color: var(--sim-ink-soft); font: 15px/1.65 var(--sim-serif); }
.assistant-answer ul { display: grid; gap: 8px; margin: 0; padding-left: 18px; color: var(--sim-mute); font-size: 11px; }
.assistant-answer li::marker { color: var(--sim-leaf); }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.settings-card { padding: 21px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.settings-card h2 { margin: 0 0 8px; color: var(--sim-ink); font-size: 16px; }
.settings-card p { margin: 0 0 16px; color: var(--sim-mute); font: 13px/1.5 var(--sim-serif); }
.settings-stat { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid var(--sim-border); color: var(--sim-mute); font-size: 11px; }
.settings-stat strong { color: var(--sim-ink-soft); font: 10px var(--sim-mono); }
.settings-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.report-header { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding: 23px; background: linear-gradient(120deg, rgba(35,82,49,.52), rgba(12,31,21,.88)); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.report-header h2 { margin: 8px 0 6px; color: #f4fff2; font-size: 28px; letter-spacing: -.04em; }
.report-header p { margin: 0; color: var(--sim-ink-soft); font: 14px var(--sim-serif); }
.report-header .report-stamp { padding: 8px 11px; color: var(--sim-amber); border: 1px solid rgba(226,177,109,.23); border-radius: 6px; font: 9px var(--sim-mono); white-space: nowrap; }
.report-sections { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-top: 13px; }
.report-section { padding: 18px; background: var(--sim-panel); border: 1px solid var(--sim-border); border-radius: var(--sim-radius); }
.report-section h3 { margin: 0 0 12px; color: var(--sim-ink); font-size: 14px; }
.report-section pre { max-height: 270px; overflow: auto; margin: 0; padding: 13px; color: var(--sim-ink-soft); background: rgba(0,0,0,.22); border-radius: 7px; font: 10px/1.55 var(--sim-mono); white-space: pre-wrap; }

/* Toast and motion */
.sim-toast { position: fixed; right: 23px; bottom: 23px; z-index: 50; max-width: min(360px, calc(100vw - 46px)); padding: 12px 15px; color: var(--sim-ink); background: #173524; border: 1px solid rgba(145,228,156,.38); border-radius: 8px; box-shadow: 0 15px 40px rgba(0,0,0,.28); font-size: 11px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease; }
.sim-toast.is-visible { opacity: 1; transform: translateY(0); }
.sim-toast.is-error { color: #ffeae6; background: #42231f; border-color: rgba(240,142,131,.4); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media (max-width: 1260px) {
  .sim-sidebar { width: 218px; flex-basis: 218px; }
  .sim-main { width: calc(100% - 218px); margin-left: 218px; }
  .sim-brand small { font-size: 8px; }
  .lab-grid { grid-template-columns: minmax(220px, 260px) minmax(320px, 1fr) minmax(215px, 260px); }
  .sim-top-action { display: inline-flex; }
}
@media (max-width: 1400px) {
  /* The fixed navigation rail reduces the usable width before the viewport
     reaches the usual tablet breakpoint. Keep the instrument panels from
     forcing a three-column overlap in that intermediate range. */
  .lab-grid { grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); }
  .telemetry-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .provenance-note { margin-top: 0; }
}
@media (max-width: 1040px) {
  .lab-grid { --lab-stage-height: clamp(410px, 56vw, 590px); grid-template-columns: minmax(220px, 270px) minmax(0, 1fr); }
  .sim-topbar { flex-wrap: wrap; }
  .sim-top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .telemetry-panel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .provenance-note { margin-top: 0; }
  .lab-analysis-grid { grid-template-columns: 1fr; }
  .dashboard-hero { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .sim-app { display: block; }
  .sim-sidebar { position: relative; inset: auto; display: block; width: 100%; min-height: 0; padding: 16px 17px 13px; border-right: 0; border-bottom: 1px solid var(--sim-border); }
  .sim-brand { padding: 0; }
  .sim-sidebar-status { position: absolute; top: 23px; right: 17px; margin: 0; font-size: 8px; }
  .sim-sidebar-status .status-orb { width: 6px; height: 6px; }
  .sim-nav { display: flex; flex-direction: row; gap: 4px; margin: 17px -4px 0; overflow-x: auto; padding: 0 4px 4px; scrollbar-width: none; }
  .sim-nav::-webkit-scrollbar { display: none; }
  .sim-nav-label { display: none; }
  .sim-nav-item { grid-template-columns: 17px auto; flex: 0 0 auto; min-height: 34px; padding: 7px 9px; }
  .sim-nav-item kbd { display: none; }
  .sim-nav-item span:nth-child(2) { font-size: 10px; white-space: nowrap; }
  .nav-glyph { font-size: 13px; }
  .sim-sidebar-bottom { display: flex; align-items: center; gap: 5px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
  .sim-sidebar-bottom::-webkit-scrollbar { display: none; }
  .sim-model-badge { display: none; }
  .sim-settings-link, .sim-exit-link { width: auto; flex: 0 0 auto; padding: 7px 9px; white-space: nowrap; }
  .sim-main { width: 100%; margin-left: 0; }
  .sim-topbar { min-height: 61px; padding: 10px 17px; flex-wrap: wrap; }
  .sim-breadcrumb { font-size: 9px; }
  .sim-top-actions { flex: 1 1 auto; gap: 6px; min-width: 0; justify-content: flex-end; }
  .sim-project-chip { max-width: 140px; padding: 6px 8px; font-size: 10px; }
  .sim-icon-action { width: 31px; min-height: 31px; }
  .sim-top-action { min-height: 31px; padding: 0 8px; font-size: 10px; }
  .sim-top-action span { display: none; }
  .sim-run-action { min-height: 31px; padding: 0 9px; font-size: 10px; }
  .sim-run-action span:last-child { display: none; }
  .sim-view { min-height: calc(100vh - 61px); padding: 25px 15px 56px; }
  .sim-page-heading { display: block; margin-bottom: 20px; }
  .sim-page-heading h1 { font-size: 36px; }
  .sim-page-subtitle { margin-top: 10px !important; font-size: 15px; }
  .dashboard-hero-copy { min-height: 300px; padding: 25px; }
  .dashboard-hero-copy h2 { font-size: 38px; }
  .dashboard-signal-card { min-height: 220px; }
  .dashboard-panel.panel-span-7, .dashboard-panel.panel-span-5, .dashboard-panel.panel-span-12 { grid-column: span 12; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .lab-title-bar { display: block; }
  .lab-title-bar h2 { font-size: 30px; }
  .lab-title-bar p { margin-top: 10px; text-align: left; }
  .lab-grid { --lab-stage-height: clamp(380px, 108vw, 560px); grid-template-columns: 1fr; }
  .visual-panel { grid-row: 1; height: var(--lab-stage-height); min-height: 0; max-height: none; aspect-ratio: auto; }
  #labCanvas { min-height: 0; }
  .control-panel { grid-row: 2; }
  .telemetry-panel { display: flex; grid-column: auto; grid-row: 3; }
  .lab-analysis-grid { grid-template-columns: 1fr; }
  .assumptions-panel { grid-template-columns: 1fr; gap: 15px; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > span { display: none; }
  .catalog-grid, .settings-grid, .assistant-grid, .report-sections, .note-layout { grid-template-columns: 1fr; }
  .view-toolbar { display: block; }
  .toolbar-actions { margin-top: 11px; }
  .report-header { display: block; }
  .report-header .report-stamp { display: inline-block; margin-top: 14px; }
}
@media (max-width: 430px) {
  .sim-breadcrumb span, .sim-breadcrumb i { display: none; }
  .sim-project-chip { max-width: 115px; }
  .sim-run-action { padding: 0 8px; }
  .sim-run-action .run-icon { margin-right: 2px; }
  .sim-topbar { align-items: start; }
  .sim-breadcrumb { flex: 1 1 100%; }
  .sim-top-actions { flex-basis: 100%; justify-content: flex-start; }
  .sim-project-chip { max-width: none; flex: 1 1 auto; }
  .scene-kicker { max-width: 47%; }
  .scene-telemetry { top: 14px; right: 12px; min-width: 0; max-width: 45%; padding: 8px; }
  .telemetry-item { gap: 7px; font-size: 8px; }
  .scene-camera-control { right: 12px; bottom: 12px; left: 12px; max-width: none; overflow-x: auto; }
  .scene-legend { right: 12px; bottom: 57px; left: 12px; line-height: 1.45; }
  .lab-grid { --lab-stage-height: clamp(350px, 112vw, 480px); }
  .three-fields { grid-template-columns: 1fr 1fr; }
  .three-fields > :last-child { grid-column: span 2; }
}