:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; color: rgb(22, 90, 116); background: rgb(247, 252, 255); font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0px; min-width: 0px; height: 100dvh; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgb(255, 255, 255) 0px, rgb(246, 252, 255) 52%, rgb(229, 244, 251) 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.app { height: 100dvh; display: grid; grid-template-rows: auto minmax(0px, 1fr) auto; overflow: hidden; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0px clamp(16px, 3vw, 48px); border-bottom: 1px solid rgb(189, 228, 242); background: linear-gradient(115deg, rgb(255, 255, 255) 0%, rgb(249, 253, 255) 78%, rgb(213, 242, 255) 100%); box-shadow: rgba(143, 215, 240, 0.173) 0px 2px 20px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: 0.28em; font-size: 14px; }
.brand-mark { font-size: 35px; line-height: 1; color: rgb(0, 168, 215); text-shadow: rgb(50, 194, 237) 0px 0px 15px; }
.brand small { display: block; margin-top: 4px; font-size: 8px; letter-spacing: 0.24em; font-weight: 500; color: rgb(120, 170, 189); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.live-indicator { font-size: 9px; letter-spacing: 0.17em; color: rgb(108, 154, 170); margin-right: 14px; white-space: nowrap; }
.live-indicator i { display: inline-block; width: 6px; height: 6px; background: rgb(24, 200, 238); border-radius: 50%; box-shadow: rgb(0, 197, 239) 0px 0px 9px; margin-right: 6px; }
.live-indicator.paused i { background: rgb(154, 188, 200); box-shadow: none; }
.icon-button { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid rgb(178, 220, 234); background: rgba(255, 255, 255, 0.68); color: rgb(25, 135, 172); font-size: 21px; font-weight: 300; transition: background 0.25s, box-shadow 0.25s; }
.icon-button:hover, .icon-button:focus-visible { background: rgb(231, 250, 255); box-shadow: rgba(87, 200, 237, 0.533) 0px 0px 12px; }
main { display: flex; min-height: 0px; position: relative; }
.workbench { flex: 1 1 0%; min-width: 0px; min-height: 0px; display: flex; flex-direction: column; justify-content: center; padding: clamp(12px, 2vw, 26px); gap: clamp(10px, 2vh, 22px); }
.dish-frame { flex: 1 1 0%; min-height: 0px; display: grid; place-items: center; }
.dish { position: relative; width: min(100%, 100dvh - 185px, 900px); aspect-ratio: 1 / 1; border: 1px solid rgb(183, 227, 240); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 36%, rgb(255, 255, 255) 0px, rgb(245, 252, 255) 55%, rgb(221, 241, 249) 100%); box-shadow: rgba(146, 217, 238, 0.392) 0px 0px 45px inset, rgba(255, 255, 255, 0.6) 0px 0px 0px 9px inset, rgb(235, 251, 255) 0px 0px 0px 1px, rgba(169, 230, 245, 0.47) 0px 0px 30px; }
#dish-canvas { width: 100%; height: 100%; display: block; }
.dish-graticule { position: absolute; inset: 9%; border: 1px dashed rgba(139, 201, 219, 0.333); border-radius: 50%; pointer-events: none; }
.dish-graticule::before, .dish-graticule::after { content: ""; position: absolute; background: rgba(139, 201, 219, 0.22); top: 50%; left: 0px; width: 100%; height: 1px; }
.dish-graticule::after { transform: rotate(90deg); }
.dish:not(.show-grid) .dish-graticule { display: none; }
.dish-crosshair { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: 1px solid rgb(128, 197, 218); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.55; pointer-events: none; }
.dish-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 0.21em; color: rgb(108, 168, 189); white-space: nowrap; }
.dish-label-top { top: 8%; }
.dish-label-bottom { bottom: 8%; }
.instrument-bar { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); border: 1px solid rgb(180, 226, 240); background: linear-gradient(120deg, rgba(255, 255, 255, 0.867), rgba(238, 250, 255, 0.81) 75%, rgb(212, 244, 255)); }
#dish-canvas { width: 100%; height: 100%; display: block; }
.dish-graticule { position: absolute; inset: 9%; border: 1px dashed rgba(139, 201, 219, 0.333); border-radius: 50%; pointer-events: none; }
.dish-graticule::before, .dish-graticule::after { content: ""; position: absolute; background: rgba(139, 201, 219, 0.22); top: 50%; left: 0px; width: 100%; height: 1px; }
.dish-graticule::after { transform: rotate(90deg); }
.dish:not(.show-grid) .dish-graticule { display: none; }
.dish-crosshair { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border: 1px solid rgb(128, 197, 218); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0.55; pointer-events: none; }
.dish-label { position: absolute; left: 50%; transform: translateX(-50%); font-size: 9px; letter-spacing: 0.21em; color: rgb(108, 168, 189); white-space: nowrap; }
.dish-label-top { top: 8%; }
.dish-label-bottom { bottom: 8%; }
.instrument-bar { display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); border: 1px solid rgb(180, 226, 240); background: linear-gradient(120deg, rgba(255, 255, 255, 0.867), rgba(238, 250, 255, 0.81) 75%, rgb(212, 244, 255)); box-shadow: rgba(158, 216, 236, 0.208) 0px 3px 20px; min-height: 68px; }
.readout { padding: 13px 16px; border-right: 1px solid rgb(206, 234, 242); display: flex; flex-direction: column; gap: 7px; }
.readout:last-child { border: 0px; }
.readout span { font-size: 9px; letter-spacing: 0.2em; color: rgb(122, 170, 186); }
.readout strong { font: 400 17px Georgia, serif; color: rgb(7, 104, 136); white-space: nowrap; }
footer { display: flex; justify-content: space-between; gap: 10px; padding: 12px clamp(16px, 3vw, 48px); border-top: 1px solid rgb(189, 228, 242); color: rgb(132, 171, 186); font-size: 8px; letter-spacing: 0.18em; }
.side-panel { width: min(390px, 100vw); flex: 0 0 auto; border-left: 1px solid rgb(141, 209, 232); background: linear-gradient(120deg, rgb(255, 255, 255), rgb(246, 252, 255) 80%, rgb(224, 247, 255)); box-shadow: rgba(143, 215, 240, 0.22) -10px 0px 35px; display: flex; flex-direction: column; min-height: 0px; z-index: 10; }
.side-panel[hidden] { display: none; }
.panel-head { padding: 25px 24px 17px; display: flex; justify-content: space-between; align-items: start; }
.panel-head small, .section-note { font-size: 9px; letter-spacing: 0.18em; color: rgb(130, 170, 187); }
.panel-head h1 { font: 400 28px Georgia, serif; margin: 8px 0px 0px; color: rgb(13, 102, 133); }
.panel-tabs { display: flex; border-top: 1px solid rgb(198, 231, 243); border-bottom: 1px solid rgb(165, 220, 235); }
.panel-tabs { overflow-x: auto; scrollbar-width: thin; flex: 0 0 auto; }
.panel-tabs button { flex: 0 0 auto; min-width: 72px; }
.settings-preset-shortcuts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px; flex: 0 0 auto; border-bottom: 1px solid #c5e7f1; background: #eefaff; }
.settings-preset-shortcuts strong { flex: 0 0 auto; color: #56899c; font-size: 9px; letter-spacing: .09em; }
.settings-preset-shortcuts button { flex: 0 0 auto; min-height: 30px; padding: 3px 7px; border: 1px solid #afd9e7; background: #fff; color: #087495; font-size: 9px; letter-spacing: .03em; }
.settings-preset-shortcuts button[aria-pressed=true], .lighting-preset-list button[aria-pressed=true] { border-color: #069fc5; background: #cef5ff; box-shadow: inset 0 0 0 1px #0bb5d8; }
.preset-setup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0 6px; }
.preset-setup label { display:grid; gap:5px; min-width:0; font-size:11px; color:var(--theme-text,#245b6a); }
.preset-setup input { width:100%; min-width:0; box-sizing:border-box; padding:8px; border:1px solid var(--theme-border,#afd9e7); background:var(--theme-card,#fff); color:var(--theme-text,#245b6a); font:inherit; font-size:16px; }
.preset-setup select { width:100%; min-width:0; box-sizing:border-box; min-height:38px; padding:8px; border:1px solid var(--theme-border,#afd9e7); background:var(--theme-card,#fff); color:var(--theme-text,#245b6a); font:inherit; font-size:16px; }
.preset-setup small { color:var(--theme-muted,#56899c); font-size:10px; }
.catalog-preset-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:12px 0; }
.catalog-preset-card { display:grid; min-width:0; border:1px solid var(--theme-border,#b6deea); background:var(--theme-card,#f7fcff); }
.catalog-preset-card > button { width:100%; border:0; }
.preset-environment-choice { display:grid; gap:4px; padding:0 9px 9px; font-size:10px; font-weight:700; color:var(--theme-text,#245b6a); }
.preset-environment-choice select { width:100%; min-height:36px; padding:5px; border:1px solid var(--theme-border,#b6deea); background:var(--theme-card,#fff); color:var(--theme-text,#245b6a); font-size:13px; }
.catalog-preset-group { margin:14px 0 20px; }
.catalog-preset-group h3 { margin:0; font-size:12px; letter-spacing:.08em; color:var(--theme-accent,#087495); }
.catalog-preset-group p { margin:4px 0 0; font-size:11px; line-height:1.4; color:var(--theme-muted,#56899c); }
.catalog-preset-list button { min-width:0; min-height:78px; padding:9px; text-align:left; border:1px solid var(--theme-border,#b6deea); background:var(--theme-card,#f7fcff); color:var(--theme-text,#087495); }
.catalog-preset-list button strong,.catalog-preset-list button span,.catalog-preset-list button small { display:block; }
.catalog-preset-list button strong { color:var(--theme-accent,#087495); font-size:11px; letter-spacing:.05em; }
.catalog-preset-list button span { margin:4px 0; font-size:11px; line-height:1.3; }
.catalog-preset-list button small { color:var(--theme-muted,#56899c); font-size:10px; }
.catalog-preset-list button:disabled { opacity:.55; cursor:not-allowed; }
@media (max-width:460px) { .catalog-preset-list { grid-template-columns:1fr; } .catalog-preset-list button { min-height:64px; } }
.lighting-preset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 12px 0; }
.lighting-preset-list button { min-width: 0; min-height: 62px; padding: 8px; text-align: left; border: 1px solid #b6deea; background: #f7fcff; color: #087495; }
.lighting-preset-list strong, .lighting-preset-list small { display: block; }
.lighting-preset-list strong { font-size: 10px; letter-spacing: .07em; }
.lighting-preset-list small { margin-top: 5px; color: #56899c; font-size: 10px; line-height: 1.3; }
.panel-tabs button { flex: 1 1 0%; padding: 13px; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgb(198, 231, 243) currentcolor currentcolor; border-image: none; background: rgb(248, 253, 255); color: rgb(135, 175, 189); font-size: 10px; letter-spacing: 0.18em; }
.panel-tabs button[aria-selected="true"] { background: rgb(229, 249, 255); color: rgb(4, 125, 164); box-shadow: rgb(18, 169, 212) 0px -2px inset; }
.panel-scroll { padding: 21px 24px; overflow: auto; min-height: 0px; }
.section-note { margin: 0px 0px 24px; line-height: 1.5; }
.control-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin: 0px 0px 24px; font-size: 12px; letter-spacing: 0.04em; }
.control-row output { font-weight: 700; color: rgb(0, 137, 183); }
.control-row input { grid-column: 1 / -1; width: 100%; accent-color: rgb(10, 173, 214); }
.control-row select { grid-column: 1 / -1; width: 100%; min-height:42px; border:1px solid var(--theme-border,#add9e6); background:var(--theme-card,#fff); color:var(--theme-text,#174961); }
.control-row small { grid-column:1 / -1; line-height:1.4; }
.switch-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgb(209, 233, 241); font-size: 12px; }
.switch-row small { display: block; margin-top: 4px; color: rgb(132, 174, 186); }
.switch-row input { accent-color: rgb(10, 173, 214); }
.archive { padding-top: 22px; }
.archive h2 { font-size: 10px; letter-spacing: 0.19em; font-weight: 700; margin: 0px 0px 19px; }
.archive label { display: block; font-size: 10px; letter-spacing: 0.11em; color: rgb(111, 158, 176); margin-bottom: 8px; }
.archive input, .archive select { width: 100%; height: 38px; border: 1px solid rgb(169, 217, 232); border-radius: 0px; background: rgb(255, 255, 255); color: rgb(18, 104, 132); padding: 0px 10px; margin-bottom: 16px; outline-color: rgb(44, 190, 229); }
.archive-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.archive button { height: 38px; border: 1px solid rgb(147, 214, 233); background: rgb(249, 253, 255); color: rgb(18, 123, 158); letter-spacing: 0.08em; font-size: 10px; }
.archive button.primary { background: linear-gradient(110deg, rgb(231, 250, 255), rgb(185, 237, 251)); font-weight: 700; }
.archive button span { margin-left: 7px; }
.archive select { margin-top: 6px; }
.archive #load { width: 100%; }
.status { min-height: 30px; font-size: 11px; line-height: 1.5; color: rgb(104, 155, 173); }
.environment-note { display: flex; gap: 15px; border: 1px solid rgb(199, 234, 244); background: rgb(241, 251, 255); padding: 14px; margin-top: 28px; }
.environment-note i { font-size: 22px; color: rgb(45, 173, 209); }
.environment-note p { margin: 0px; font-size: 11px; line-height: 1.6; color: rgb(84, 134, 155); }
@media (max-width: 780px) {
  .topbar { height: 58px; }
  .brand { font-size: 12px; }
  .brand small { font-size: 7px; }
  .live-indicator { display: none; }
  .workbench { padding: 10px; min-height: 0px; }
  .dish-frame { min-height: 0px; }
  .dish { width: min(100%, 100dvh - 195px); max-height: calc(100dvh - 195px); }
  .instrument-bar { min-height: 56px; }
  .readout { padding: 9px 5px; }
  .readout span { font-size: 7px; letter-spacing: 0.09em; }
  .readout strong { font-size: 12px; }
  footer { font-size: 7px; }
  footer span:last-child { display: none; }
  .side-panel { position: absolute; inset: 0px 0px 0px auto; width: min(390px, 100%); height: 100%; box-shadow: rgba(120, 185, 210, 0.36) -15px 0px 35px; }
}
.welcome-modal[hidden] { display: none; }
.welcome-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(4, 29, 43, .68); backdrop-filter: blur(5px); }
.welcome-card { width: min(480px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: clamp(20px, 5vw, 30px); border: 1px solid #8cdef1; background: linear-gradient(145deg, #fff, #e9f9ff); color: #20566a; box-shadow: 0 16px 60px #001d3580; }
.welcome-card > small { color: #008fb4; font-size: 11px; font-weight: 700; letter-spacing: .23em; }
.welcome-card h1 { margin: 8px 0 12px; color: #006f91; font-size: clamp(27px, 6vw, 36px); line-height: 1.1; font-weight: 500; }
.welcome-card p { margin: 10px 0; line-height: 1.5; }
.welcome-card ol { margin: 18px 0; padding-left: 21px; line-height: 1.5; }
.welcome-card li { margin: 9px 0; }
.welcome-save-note { font-size: 13px; color: #568699; }
.welcome-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.welcome-actions label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.welcome-actions input { width: 17px; height: 17px; accent-color: #008fb4; }
.welcome-actions button { min-height: 44px; padding: 9px 16px; border: 1px solid #008fb4; background: #b8f0ff; color: #006a89; font-weight: 700; letter-spacing: .06em; cursor: pointer; }
.welcome-modal{padding:0;z-index:100}
.welcome-card{box-sizing:border-box;width:100%;height:100dvh;max-height:none;padding:0;background:#ecf8fb;color:#194c60;overscroll-behavior:contain}
.guide-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(20px,4vw,44px) max(20px,calc((100vw - 1120px)/2));background:linear-gradient(125deg,#0c354a,#15637b);color:#e8faff}
.guide-heading h1{color:#fff}.guide-heading p{max-width:690px}.guide-heading small{color:#94e5f3}
.guide-heading button,.welcome-actions button{min-height:44px;padding:10px 16px;border:1px solid #74d9e9;background:#b8f0ff;color:#064c62;font-weight:700;white-space:nowrap;cursor:pointer}
.guide-nav{position:sticky;top:0;z-index:2;display:flex;gap:4px;overflow-x:auto;padding:8px max(16px,calc((100vw - 1120px)/2));background:#d8eef4;border-bottom:1px solid #96cbd7;scrollbar-width:thin}
.guide-nav a{padding:9px 12px;white-space:nowrap;color:#12556c;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.07em}
.guide-nav a:hover,.guide-nav a:focus-visible{background:#fff;outline:2px solid #1698b8;outline-offset:-2px}
.guide-content{max-width:1120px;margin:auto;padding:8px 20px 28px}.guide-content section{padding:24px 0;border-bottom:1px solid #b4d9e1;scroll-margin-top:65px}.guide-content h2{margin:0 0 12px;color:#096786;font-size:clamp(21px,3vw,29px)}.guide-content p{line-height:1.55}
.guide-steps,.guide-gesture-grid,.guide-control-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.guide-steps>div,.guide-gesture-grid>div,.guide-control-grid>div{padding:15px;border:1px solid #b1d4df;background:#f9fdff}.guide-steps b{display:inline-grid;place-items:center;width:29px;height:29px;margin-right:8px;border-radius:50%;background:#087996;color:#fff}.guide-steps strong,.guide-gesture-grid strong,.guide-control-grid strong{display:block;color:#075e79}.guide-steps span{display:block;margin-top:8px;line-height:1.45}.guide-gesture-grid>div>span{display:block;font-size:27px;color:#009db8}.guide-gesture-grid p,.guide-control-grid p{margin:7px 0 0;font-size:14px}
.guide-example,.guide-readout{display:grid;grid-template-columns:minmax(160px,35%) 1fr;align-items:center;gap:20px;margin:14px 0;padding:16px;border:1px solid #b1d4df;background:#f9fdff}.guide-example strong,.guide-readout strong{color:#075e79}.guide-example-dish{position:relative;width:min(100%,210px);aspect-ratio:1;border:4px double #32758a;border-radius:50%;background:radial-gradient(circle,#b9dbe3,#e4f2f4);overflow:hidden}.guide-example-cell{position:absolute;left:48%;top:43%;width:18px;height:18px;border:3px solid #995f8d;border-radius:50%;background:#e3bdd8}.guide-example-field{position:absolute;left:38%;top:33%;width:55px;height:55px;border-radius:50%;background:#bd87b66e}.guide-example-gamete{position:absolute;left:72%;top:54%;width:9px;height:9px;border:2px solid #995f8d;border-radius:50%;background:#fff}.guide-trace{display:flex;flex-wrap:wrap;gap:5px;align-items:center}.guide-trace span{padding:8px;background:#daf1f6;border:1px solid #82c5d2;font-size:11px;font-weight:700}.guide-chart{max-width:300px;background:#edf8fa}.guide-chart svg{display:block;width:100%}.guide-readout small{font-size:11px}.welcome-actions{position:sticky;bottom:0;margin:0;padding:12px max(20px,calc((100vw - 1120px)/2));background:#d8eef4;border-top:1px solid #96cbd7}
@media(max-width:640px){.guide-heading{display:block}.guide-heading button{margin-top:8px}.guide-example,.guide-readout{grid-template-columns:1fr}.guide-gesture-grid,.guide-control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-content{padding-inline:14px}}
@media(max-width:390px){.guide-gesture-grid,.guide-control-grid{grid-template-columns:1fr}}
.inspector-detail { gap: 7px; }
.inspector-identity { padding-bottom: 2px; }
.inspector-identity p { margin: 5px 0 0; font-size: 11px; line-height: 1.35; }
.specimen-activity { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 7px 9px; border: 1px solid #c8e6ef; background: #edfaff; color: #326d81; font: 11px/1.3 Arial,sans-serif; }
.specimen-activity strong { color: #087e9f; }
.specimen-activity span + span::before { content: '·'; margin-right: 8px; }
.inspector-stats { gap: 5px; }
.inspector-stats > div { min-width: 0; padding: 7px; }
.inspector-stats > .stat-advanced { display: none; }
.inspector-stats #specimen-stored-row[hidden] { display: none; }
.inspector-stats #specimen-toxin-row[hidden] { display: none; }
.inspector-stats #specimen-toxin-row:not([hidden]) { border-color:#e9a78e; background:#fff5ef; }
.inspector-stats #specimen-toxin-row:not([hidden]) .stat-icon { color:#bd563f; }
.inspector-stats strong { overflow-wrap: anywhere; }
.metabolic-board { min-width: 0; padding: 8px; border: 1px solid #c8e6ef; background: #f7fcfe; color: #326c82; }
.metabolic-heading { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; font: 11px Arial,sans-serif; }
.metabolic-heading strong { color: #087e9f; letter-spacing: .1em; }
.metabolic-legend { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0; }
.metabolic-legend button { min-height: 30px; padding: 3px 8px; border: 1px solid #b9dce8; background: #fff; color: #22718c; font-size: 11px; }
.metabolic-legend button[aria-pressed=false] { opacity: .48; text-decoration: line-through; }
#metabolic-graph { display: block; width: 100%; height: 150px; touch-action: pan-y; }
#metabolic-graph:focus-visible { outline: 2px solid #0095b8; }
.metabolic-reading { min-height: 30px; font: 11px/1.35 Arial,sans-serif; }
.metabolic-board > small { font-size: 10px; }
.specimen-readiness, .specimen-deep { min-width: 0; border: 1px solid #c8e6ef; background: #f7fcfe; }
.specimen-readiness summary, .specimen-deep summary { padding: 9px; color: #087e9f; font: 700 11px/1.35 Arial,sans-serif; cursor: pointer; }
.specimen-readiness .specimen-meters, .specimen-deep .specimen-perception { border: 0; }
.specimen-readiness #specimen-vacuole-row { display: none; }
.specimen-advanced-values { display: grid; gap: 4px; padding: 0 10px 10px; color: #41778a; font: 11px/1.35 Arial,sans-serif; }
.lighting-dashboard { padding: 10px; border: 1px solid #addce9; background: #f5fcff; color: #28728a; }
.lighting-dashboard h2 { margin: 0 0 4px; font: 700 12px Arial,sans-serif; letter-spacing: .12em; }
.lighting-dashboard p { margin: 0 0 8px; font: 12px/1.4 Arial,sans-serif; }
.lighting-views { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.lighting-views > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lighting-views strong { font: 700 10px/1.3 Arial,sans-serif; letter-spacing: .06em; }
.lighting-views canvas { display: block; max-width: 100%; height: auto; border: 1px solid #bbdfe9; background: #eaf8fc; touch-action: none; cursor: crosshair; }
.lighting-views canvas:focus-visible, .lighting-dashboard button:focus-visible { outline: 2px solid #008db3; outline-offset: 2px; }
.lighting-views small { font: 10px/1.3 Arial,sans-serif; letter-spacing: 0; }
.lighting-gauge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: 9px; font: 700 11px Arial,sans-serif; }
.lighting-gauge input { grid-column: 2; width: 100%; accent-color: #009ec4; }
.lighting-gauge output { grid-column: 3; grid-row: 1; }
.lighting-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; margin-top: 8px; font: 11px Arial,sans-serif; }
.lighting-actions button { min-height: 40px; margin-left: auto; border: 1px solid #9ecfe0; background: #fff; color: #087e9f; padding: 7px 11px; }
.lighting-advanced { margin: 9px 0; border: 1px solid #c6e4ed; padding: 6px; }
.lighting-advanced summary { cursor: pointer; font: 700 11px Arial,sans-serif; color: #087e9f; }
@media (max-width: 420px) { .lighting-views { gap: 5px; } .lighting-views strong { font-size: 9px; } .lighting-actions button { width: 100%; } }
@media (max-width: 420px) { .welcome-actions { gap: 8px; } .welcome-actions label { font-size: 11px; } .welcome-actions button { padding: 8px 10px; font-size: 11px; white-space: nowrap; } }
@media (max-width: 400px) {
  .readout strong { font-size: 10px; }
  .readout span { font-size: 6px; }
  .dish { width: min(100%, 100dvh - 175px); max-height: calc(100dvh - 175px); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
.specimen-inspector { flex: 0 0 auto; min-height: 105px; border: 1px solid rgb(169, 220, 235); background: linear-gradient(112deg, rgb(255, 255, 255), rgb(246, 252, 255) 69%, rgb(216, 244, 255)); box-shadow: rgba(128, 210, 237, 0.208) 0px 0px 24px; overflow: hidden; }
.inspector-empty, .inspector-detail { min-height: 103px; display: flex; align-items: center; gap: 22px; padding: 14px 20px; }
.inspector-empty[hidden], .inspector-detail[hidden] { display: none; }
.inspector-reticle { font: 46px Georgia, serif; color: rgb(131, 200, 220); text-shadow: rgb(43, 189, 230) 0px 0px 20px; }
.inspector-empty div, .inspector-identity { display: flex; flex-direction: column; gap: 6px; }
.specimen-inspector small { font-size: 9px; letter-spacing: 0.16em; color: rgb(120, 169, 186); }
.inspector-empty strong, .inspector-identity strong { font: 400 20px Georgia, serif; color: rgb(8, 111, 145); }
.inspector-empty div > span, .inspector-identity > span { font-size: 11px; color: rgb(100, 152, 170); }
.inspector-detail { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(240px, 2fr) auto; }
.inspector-stats { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 8px; }
.inspector-stats > div { padding: 7px 10px; border-left: 1px solid rgb(200, 233, 242); display: flex; flex-direction: column; gap: 8px; }
.inspector-stats strong { font: 400 17px Georgia, serif; color: rgb(8, 111, 145); white-space: nowrap; }
.inspector-actions { display: flex; gap: 7px; }
.inspector-actions button { border: 1px solid rgb(158, 214, 232); background: rgb(245, 252, 255); color: rgb(17, 125, 158); padding: 9px 11px; font-size: 9px; letter-spacing: 0.1em; white-space: nowrap; }
.inspector-actions button:hover, .inspector-actions button:focus-visible { background: rgb(217, 245, 255); box-shadow: rgba(90, 199, 232, 0.52) 0px 0px 13px; }
.dish { height: min(100%, 900px); width: auto; max-width: 100%; max-height: 100%; cursor: crosshair; }
.dish.has-selection { box-shadow: rgba(146, 217, 238, 0.392) 0px 0px 45px inset, rgba(255, 255, 255, 0.6) 0px 0px 0px 9px inset, rgb(235, 251, 255) 0px 0px 0px 1px, rgba(85, 201, 235, 0.667) 0px 0px 33px; }
.workbench { overflow: hidden; }
@media (max-width: 780px) {
  .app { grid-template-rows: 48px minmax(0px, 1fr); }
  .topbar { height: 48px; padding: 0px 12px; }
  .top-actions { gap: 6px; }
  .icon-button { width: 32px; height: 32px; }
  .workbench { gap: 6px; padding: 6px 8px 8px; }
  .dish-frame { min-height: 0px; overflow: hidden; }
  .dish { height: min(100%, -22px + 100vw); width: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; }
  .instrument-bar { min-height: 44px; }
  .readout { padding: 6px 4px; gap: 4px; }
  .specimen-inspector { min-height: 150px; }
  .inspector-empty, .inspector-detail { min-height: 148px; padding: 10px; }
  .inspector-detail { grid-template-columns: minmax(0px, 1fr) auto; gap: 8px; }
  .inspector-identity { grid-column: 1 / -1; gap: 3px; }
  .inspector-identity strong { font-size: 18px; }
  .inspector-stats { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1px; }
  .inspector-stats > div { padding: 4px 5px; gap: 5px; }
  .inspector-stats strong { font-size: 13px; }
  .specimen-inspector small { font-size: 7px; letter-spacing: 0.07em; }
  .inspector-actions { flex-direction: column; gap: 4px; }
  .inspector-actions button { padding: 6px; font-size: 8px; }
  footer { display: none; }
  .side-panel { height: 100%; max-height: 100%; }
}
@media (max-width: 400px) {
  .brand { font-size: 10px; }
  .brand small { display: none; }
  .instrument-bar { min-height: 40px; }
  .readout span { font-size: 6px; }
  .readout strong { font-size: 10px; }
  .specimen-inspector { min-height: 140px; }
  .inspector-empty, .inspector-detail { min-height: 138px; }
  .inspector-stats strong { font-size: 11px; }
  .inspector-actions button { font-size: 7px; }
}
.genome-inspector { display: grid; gap: 1px; border: 1px solid rgb(184, 228, 241); background: rgb(203, 233, 242); }
.genome-inspector > div { display: flex; justify-content: space-between; gap: 10px; padding: 10px; background: rgb(249, 253, 255); min-width: 0px; }
.genome-inspector span { font-size: 10px; color: rgb(100, 148, 168); }
.genome-inspector strong { font-size: 10px; color: rgb(11, 114, 149); text-align: right; overflow-wrap: anywhere; font-weight: 600; }
.panel-tabs button { min-width: 0px; padding: 12px 4px; font-size: 9px; }
.inspector-actions button:first-child { background: linear-gradient(115deg, rgb(239, 252, 255), rgb(189, 238, 251)); }
#dish-canvas { touch-action: none; }
.cell-lifted #dish-canvas { cursor: grab; }
.cell-lifted #dish-canvas:active { cursor: grabbing; }
.lift-cue { position:absolute; left:50%; top:3%; transform:translateX(-50%); z-index:5; width:max-content; max-width:95%; padding:3px 5px; border:1px solid #38b0c9; background:#dff9f7e8; color:#006d80; font:600 8px Arial,sans-serif; text-align:center; pointer-events:none; }
.dish-label { pointer-events: none; }
.microscope { border-top: 1px solid rgb(196, 231, 241); margin: 22px 0px 0px; padding: 20px 0px; }
.microscope h2 { font-size: 10px; letter-spacing: 0.19em; margin: 0px 0px 12px; }
.microscope > p { font-size: 11px; color: rgb(89, 143, 166); margin: 0px 0px 17px; }
.microscope .control-row { margin-bottom: 16px; }
.micro-buttons { display: flex; gap: 6px; margin: 0px 0px 20px; }
.micro-buttons button { flex: 1 1 0%; min-width: 0px; padding: 9px 5px; background: rgb(248, 253, 255); border: 1px solid rgb(158, 216, 233); color: rgb(8, 124, 159); font-size: 11px; letter-spacing: 0.08em; }
.micro-buttons button:hover, .micro-buttons button:focus-visible { background: rgb(217, 245, 255); box-shadow: rgba(90, 199, 232, 0.52) 0px 0px 12px; }
.microscope .switch-row { padding: 10px 0px; }
.microscope .micro-help { margin: 15px 0px 0px; line-height: 1.6; font-size: 10px; }
.panel-scroll { overscroll-behavior: contain; }
.field-legend { position: absolute; top: 17%; right: 9%; max-width: 35%; padding: 5px 7px; border: 1px solid rgb(164, 218, 233); background: rgba(246, 253, 255, 0.91); color: rgb(36, 126, 157); font-size: 8px; letter-spacing: 0.06em; line-height: 1.4; pointer-events: none; text-align: right; }
.field-legend[hidden] { display: none; }
.overlay-row select { grid-column: 1 / -1; width: 100%; padding: 8px; border: 1px solid rgb(158, 216, 233); background: rgb(248, 253, 255); color: rgb(18, 104, 132); }
.resource-status { display: flex; justify-content: space-between; gap: 5px; flex-wrap: wrap; font-size: 8px; letter-spacing: 0.08em; color: rgb(108, 155, 171); margin: -5px 0px 11px; }
.resource-status b { color: rgb(11, 114, 149); }
.resource-button { width: 100%; padding: 10px; margin: 0px 0px 22px; border: 1px solid rgb(158, 216, 233); background: linear-gradient(110deg, rgb(239, 252, 255), rgb(201, 239, 249)); color: rgb(8, 123, 159); font-size: 10px; letter-spacing: 0.09em; }
.resource-button:hover, .resource-button:focus-visible { box-shadow: rgba(85, 197, 229, 0.5) 0px 0px 12px; }
.resource-action-status { min-height: 14px; margin: -16px 0px 20px; font-size: 10px; color: rgb(86, 141, 161); }
.scope-hud { flex: 0 0 auto; display: grid; grid-template-columns: 150px minmax(0px, 1fr) 76px; gap: 12px; align-items: center; min-height: 94px; padding: 9px 14px; border: 1px solid rgb(169, 220, 235); background: linear-gradient(115deg, rgb(255, 255, 255), rgb(239, 250, 255) 78%, rgb(201, 237, 252)); box-shadow: rgba(119, 201, 230, 0.22) 0px 0px 18px; color: rgb(17, 115, 145); }
.scope-title { display: block; font-size: 9px; letter-spacing: 0.17em; }
.scope-depth { position: relative; min-height: 76px; }
.depth-ruler { position: absolute; right: 2px; top: 6px; bottom: 6px; width: 42px; border-left: 1px solid rgb(119, 186, 208); display: flex; flex-direction: column; justify-content: space-between; padding-left: 6px; font-size: 8px; color: rgb(131, 174, 190); }
.depth-ruler i { position: absolute; transform: translateY(-50%); border-radius: 50%; }
.focus-marker { left: -7px; width: 13px; height: 13px; border: 2px solid rgb(0, 139, 183); background: rgb(255, 255, 255); box-shadow: rgb(62, 190, 229) 0px 0px 9px; }
.specimen-marker { left: 8px; width: 9px; height: 9px; background: rgb(17, 107, 130); box-shadow: rgb(45, 173, 209) 0px 0px 8px; }
.scope-depth output, .scope-depth small { display: block; margin-top: 8px; font-size: 10px; white-space: nowrap; }
.scope-depth small { color: rgb(81, 127, 145); }
.scope-controls { display: grid; gap: 5px; min-width: 0px; }
.scope-line { display: flex; align-items: center; gap: 6px; min-width: 0px; }
.scope-line label { width: 62px; flex: 0 0 auto; font-size: 8px; letter-spacing: 0.08em; }
.scope-line input { min-width: 30px; width: 100%; accent-color: rgb(5, 171, 213); }
.scope-line output { width: 38px; flex: 0 0 auto; font-size: 9px; text-align: right; }
.scope-line button, .scope-pan button { border: 1px solid rgb(155, 211, 228); background: rgb(248, 253, 255); color: rgb(17, 115, 145); min-height: 24px; padding: 2px 5px; font-size: 9px; white-space: nowrap; }
.scope-line button:focus-visible, .scope-pan button:focus-visible { outline: rgb(0, 152, 197) solid 2px; outline-offset: 2px; }
.scope-pan { display: grid; justify-items: center; gap: 1px; }
.scope-pan > div { display: flex; gap: 2px; }
.scope-pan button { min-width: 23px; }
.scope-line #focus-shallow, .scope-line #focus-deep { font-size: 8px; }
@media (max-width: 780px) {
  .scope-hud { grid-template-columns: 94px minmax(0px, 1fr) 51px; gap: 4px; min-height: 92px; padding: 4px 6px; }
  .scope-title { font-size: 7px; }
  .scope-depth { min-height: 80px; }
  .depth-ruler { right: 0px; width: 24px; top: 3px; bottom: 3px; font-size: 7px; }
  .scope-depth output, .scope-depth small { font-size: 7px; max-width: 68px; white-space: normal; margin-top: 5px; }
  .scope-controls { gap: 2px; }
  .scope-line { gap: 2px; }
  .scope-line label { width: 42px; font-size: 6px; }
  .scope-line button { font-size: 7px; min-height: 22px; padding: 1px 2px; }
  .scope-line #focus-shallow, .scope-line #focus-deep { font-size: 0px; width: 18px; flex: 0 0 auto; }
  .scope-line #focus-shallow::after { content: "↑"; font-size: 12px; }
  .scope-line #focus-deep::after { content: "↓"; font-size: 12px; }
  .scope-line output { width: 27px; font-size: 7px; }
  .scope-pan button { min-width: 18px; min-height: 23px; padding: 1px; font-size: 10px; }
}
@media (max-width: 400px) {
  .scope-hud { min-height: 88px; }
  .scope-depth { min-height: 75px; }
}
.scope-hint { display: block; text-align: center; font-size: 8px; letter-spacing: 0.05em; color: rgb(90, 150, 169); white-space: nowrap; }
.depth-ruler span { white-space: nowrap; }
@media (max-width: 780px) {
  .depth-ruler { width: 50px; right: -4px; font-size: 6px; }
  .scope-hint { font-size: 6px; letter-spacing: 0px; }
}
@media (max-width: 780px) {
  .scope-hud { grid-template-columns: 110px minmax(0px, 1fr); grid-template-rows: auto auto; gap: 2px 6px; min-height: 112px; padding: 5px 7px; }
  .scope-depth { min-height: 82px; }
  .scope-title { font-size: 8px; }
  .depth-ruler { width: 52px; right: 0px; font-size: 7px; }
  .scope-depth output, .scope-depth small { font-size: 8px; max-width: 62px; }
  .scope-controls { gap: 3px; }
  .scope-line label { width: 46px; font-size: 8px; }
  .scope-line output { font-size: 8px; width: 31px; }
  .scope-line button { font-size: 8px; min-height: 24px; }
  .scope-pan { grid-column: 1 / -1; display: flex; justify-content: center; gap: 5px; }
  .scope-pan > div { display: flex; gap: 5px; }
  .scope-pan button { min-width: 38px; min-height: 22px; }
  .scope-hint { font-size: 8px; white-space: normal; }
  .scope-line #focus-shallow, .scope-line #focus-deep { width: 20px; }
}
.specimen-inspector { display: grid; grid-template-rows: minmax(0px, 1fr) auto; }
.inspector-follow { display: flex; gap: 8px; justify-content: flex-end; padding: 0px 12px 9px; }
.inspector-follow button { border: 1px solid rgb(158, 214, 232); background: rgb(245, 252, 255); color: rgb(17, 125, 158); padding: 6px 10px; font-size: 9px; letter-spacing: 0.08em; }
.inspector-follow button[aria-pressed="true"] { background: rgb(189, 239, 255); box-shadow: rgb(34, 169, 208) 0px 0px 0px 1px inset, rgba(102, 205, 232, 0.6) 0px 0px 10px; color: rgb(0, 101, 134); }
.inspector-follow button:focus-visible { outline: rgb(0, 142, 185) solid 2px; outline-offset: 2px; }
.aperture-setting-stat { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 0px; border-bottom: 1px solid rgb(197, 231, 241); font-size: 11px; }
.aperture-setting-stat output { color: rgb(0, 137, 183); font-weight: 700; }
.aperture-setting-stat small { width: 100%; line-height: 1.5; color: rgb(103, 152, 170); }
.aperture-stat { min-width: 90px; font-weight: 700; color: rgb(8, 122, 157); width: auto !important; text-align: left !important; }
.scope-line > span { width: 62px; flex: 0 0 auto; font-size: 8px; letter-spacing: 0.08em; }
.scope-line:has(.aperture-stat) { justify-content: space-between; }
@media (max-width: 780px) {
  .specimen-inspector { min-height: 166px; }
  .inspector-empty, .inspector-detail { min-height: 128px; }
  .inspector-follow { padding: 0px 8px 6px; justify-content: center; }
  .inspector-follow button { flex: 1 1 0%; padding: 5px; font-size: 9px; }
  .scope-line > span { width: 46px; font-size: 8px; }
  .aperture-stat { min-width: 76px; font-size: 8px !important; }
}
@media (max-width: 400px) {
  .specimen-inspector { min-height: 160px; }
  .inspector-empty, .inspector-detail { min-height: 122px; }
}
.instrument-bar { grid-template-columns: 156px repeat(5, minmax(0px, 1fr)); overflow: visible; position: relative; min-height: 88px; }
.instrument-bar .scope-hud { min-width: 0px; min-height: 0px; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) 23px; gap: 2px; align-items: stretch; padding: 5px 4px; border-width: 0px 1px 0px 0px; border-style: none solid none none; border-color: currentcolor rgb(180, 226, 240) currentcolor currentcolor; border-image: none; box-shadow: none; background: transparent; }
.scope-lever { min-width: 0px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.scope-lever label { font-size: 8px; letter-spacing: 0.09em; color: rgb(83, 142, 165); }
.lever-track { height: 48px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 3px; position: relative; }
.lever-scale { height: 43px; display: flex; flex-direction: column; justify-content: space-between; font-size: 6px; line-height: 1.6; color: rgb(138, 174, 190); white-space: nowrap; }
.lever-track input[type="range"] { appearance: slider-vertical; writing-mode: vertical-lr; direction: ltr; width: 18px; height: 45px; margin: 0px; accent-color: rgb(10, 173, 214); cursor: pointer; }
.zoom-lever .lever-track input { direction: rtl; }
.lever-markers { position: relative; display: block; width: 13px; height: 43px; border-left: 1px solid rgb(154, 203, 218); }
.lever-markers i { position: absolute; transform: translateY(-50%); border-radius: 50%; }
.lever-markers .focus-marker { left: -5px; width: 9px; height: 9px; border: 2px solid rgb(0, 139, 183); background: rgb(255, 255, 255); box-shadow: rgb(62, 190, 229) 0px 0px 7px; }
.lever-markers .specimen-marker { left: 5px; width: 6px; height: 6px; background: rgb(17, 107, 130); }
.scope-lever output { font-size: 8px; color: rgb(4, 109, 140); white-space: nowrap; }
.scope-lever small { font-size: 7px; color: rgb(104, 151, 169); white-space: nowrap; }
.scope-mini-actions { display: flex; flex-direction: column; gap: 2px; justify-content: center; }
.scope-mini-actions > button, .scope-more summary { display: grid; place-items: center; width: 21px; height: 21px; padding: 0px; border: 1px solid rgb(155, 211, 228); background: rgb(248, 253, 255); color: rgb(17, 115, 145); font-size: 13px; cursor: pointer; list-style: none; }
.scope-more summary::-webkit-details-marker { display: none; }
.scope-mini-actions button[aria-pressed="true"] { background: rgb(173, 222, 240); color: rgb(0, 94, 128); box-shadow: rgb(84, 199, 229) 0px 0px 8px; }
.scope-more-panel { position: absolute; left: 4px; top: calc(100% + 3px); z-index: 10; display: flex; align-items: center; gap: 5px; padding: 7px; border: 1px solid rgb(164, 217, 233); background: rgb(249, 253, 255); box-shadow: rgba(129, 191, 197, 0.37) 0px 5px 16px; }
.scope-more-panel > button, .scope-more-panel .scope-pan button { border: 1px solid rgb(155, 211, 228); background: rgb(255, 255, 255); color: rgb(17, 115, 145); min-height: 24px; padding: 2px 5px; font-size: 9px; }
.scope-more-panel .scope-pan { display: flex; align-items: center; gap: 2px; }
.scope-more-panel .scope-pan > div { display: flex; gap: 2px; }
.instrument-bar .readout { min-width: 0px; justify-content: center; padding: 8px 6px; }
.instrument-bar .readout span { white-space: nowrap; }
.instrument-bar .readout strong { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 780px) {
  .instrument-bar { grid-template-columns: 132px repeat(5, minmax(0px, 1fr)); min-height: 82px; }
  .instrument-bar .scope-hud { grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) 19px; grid-template-rows: 1fr; gap: 1px; padding: 3px 2px; }
  .scope-lever label { font-size: 7px; }
  .lever-track { height: 43px; gap: 1px; }
  .lever-scale { height: 39px; font-size: 6px; }
  .lever-track input[type="range"] { height: 41px; width: 17px; }
  .lever-markers { height: 39px; width: 9px; }
  .scope-lever output { font-size: 7px; }
  .scope-lever small { font-size: 6px; }
  .scope-mini-actions > button, .scope-more summary { width: 18px; height: 19px; font-size: 11px; }
  .instrument-bar .readout { padding: 4px 2px; }
  .instrument-bar .readout span { font-size: 6px; letter-spacing: 0px; }
  .instrument-bar .readout strong { font-size: 10px; }
  .scope-more-panel { left: 0px; max-width: 100%; flex-wrap: wrap; }
}
@media (max-width: 400px) {
  .instrument-bar { grid-template-columns: 132px repeat(5, minmax(0px, 1fr)); min-height: 82px; }
  .instrument-bar .readout strong { font-size: 9px; }
}
.population-context, .locus-detail { border: 1px solid rgb(179, 226, 239); background: rgb(239, 250, 255); padding: 10px; margin: 0px 0px 12px; font-size: 10px; line-height: 1.5; color: rgb(61, 129, 155); }
.sim-guide { border: 1px solid rgb(179, 226, 239); background: rgb(248, 253, 255); padding: 12px 14px; margin: 0 0 12px; color: rgb(52, 111, 134); font-size: 11px; line-height: 1.55; }
.sim-guide h2 { margin: 0 0 8px; color: rgb(8, 111, 145); font-size: 11px; letter-spacing: .12em; }
.sim-guide p { margin: 0 0 9px; }
.sim-guide p:last-child { margin-bottom: 0; }
.locus-detail { margin-top: 12px; }
.genome-inspector { display: block; background: transparent; border: 0px; }
.genome-inspector section { margin: 12px 0px; border: 1px solid rgb(184, 228, 241); background: rgb(248, 253, 255); padding: 8px; }
.genome-inspector h3 { font-size: 9px; letter-spacing: 0.12em; color: rgb(96, 147, 168); margin: 0px 0px 8px; }
.genome-summary, .genome-physiology { font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; background: rgb(247, 252, 255); border: 1px solid rgb(197, 231, 241); padding: 9px; margin: 0px 0px 8px; }
.genome-inspector > button, .genome-family button { border: 1px solid rgb(165, 217, 233); background: rgb(255, 255, 255); color: rgb(8, 123, 159); padding: 7px; margin: 0px 4px 6px 0px; font-size: 9px; }
.gene-locus { width: 100%; display: grid; grid-template-columns: minmax(0px, 1fr) 70px auto; gap: 6px; align-items: center; margin: 4px 0px; padding: 7px; border: 1px solid rgb(199, 232, 242); background: rgb(255, 255, 255); color: rgb(18, 104, 132); text-align: left; font-size: 9px; }
.gene-locus strong { font-size: 9px; font-weight: 600; }
.gene-track { height: 4px; position: relative; background: linear-gradient(90deg, rgb(220, 238, 245), rgb(82, 197, 230)); display: block; }
.gene-track i { position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: rgb(0, 110, 147); transform: translate(-50%, -50%); }
.gene-locus:focus-visible { outline: rgb(0, 141, 181) solid 2px; outline-offset: 2px; }
.instrument-bar .readout small { font-size: 8px; color: rgb(121, 170, 186); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 780px) {
  .instrument-bar .readout small { font-size: 6px; }
  .gene-locus { grid-template-columns: minmax(0px, 1fr) 50px auto; }
}
#reseed-dish { display: block; margin-top: 8px; border: 1px solid rgb(121, 205, 229); background: rgb(230, 250, 255); color: rgb(8, 123, 159); padding: 7px 11px; font-size: 9px; letter-spacing: 0.09em; }
#reseed-dish[hidden] { display: none; }
.graphic-meter { position: relative; display: block; flex: 0 0 auto; width: 25px; height: 45px; border: 1px solid rgb(141, 203, 220); background: linear-gradient(90deg, rgb(255, 255, 255), rgb(232, 250, 255) 50%, rgb(255, 255, 255)); box-shadow: rgba(111, 211, 238, 0.376) 0px 0px 7px inset, rgba(115, 205, 230, 0.2) 0px 0px 5px; cursor: ns-resize; touch-action: none; outline: none; }
.graphic-meter::before { content: ""; position: absolute; inset: 3px 50% 3px auto; width: 1px; background: rgb(119, 187, 208); pointer-events: none; }
.graphic-meter:focus-visible { outline: rgb(4, 124, 163) solid 2px; outline-offset: 2px; }
.graphic-meter .meter-fill { position: absolute; bottom: 0px; left: 0px; right: 0px; background: linear-gradient(0deg, rgba(84, 215, 242, 0.48), rgba(184, 245, 255, 0.22)); pointer-events: none; }
.graphic-meter .meter-marker { position: absolute; z-index: 2; transform: translateY(-50%); pointer-events: none; box-shadow: rgb(55, 188, 232) 0px 0px 7px; }
.graphic-meter .focus-marker { left: 2px; width: 9px; height: 9px; border: 2px solid rgb(0, 139, 183); border-radius: 50%; background: rgb(255, 255, 255); }
.graphic-meter .specimen-marker { right: 2px; width: 7px; height: 7px; border-radius: 50%; background: rgb(17, 107, 130); }
.graphic-meter .zoom-marker { left: 50%; width: 13px; height: 7px; transform: translate(-50%, -50%); border: 1px solid rgb(0, 122, 159); background: rgb(221, 249, 255); border-radius: 2px; }
.scope-lever .meter-label { font-size: 8px; letter-spacing: 0.09em; color: rgb(83, 142, 165); }
.meter-setting { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 8px; padding: 9px 0px; margin: 0px; border-bottom: 1px solid rgb(197, 232, 241); font-size: 11px; color: rgb(51, 110, 133); }
.meter-setting output { color: rgb(8, 123, 160); font-weight: 600; }
.meter-setting small { flex-basis: 100%; color: rgb(117, 157, 174); font-size: 9px; }
@media (max-width: 780px) {
  .graphic-meter { width: 22px; height: 41px; }
  .scope-lever .meter-label { font-size: 7px; }
}
.dish.pan-mode { cursor: grab; }
.dish.pan-mode:active { cursor: grabbing; }
.pan-joystick{position:absolute;z-index:6;width:66px;height:66px;margin:-33px 0 0 -33px;border:2px solid rgba(79,207,234,.9);border-radius:50%;box-shadow:0 0 0 7px rgba(9,105,141,.13),inset 0 0 0 9px rgba(128,229,248,.13),0 0 20px rgba(45,192,223,.38);background:radial-gradient(circle,rgba(215,252,255,.24),transparent 70%);pointer-events:none;transform:translateZ(0)}
.pan-joystick[hidden]{display:none}.pan-joystick i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:#b5f5ff;box-shadow:0 0 8px #49cce8}
.gesture-mode { position: absolute; right: 7%; top: 8%; z-index: 3; padding: 5px 7px; border: 1px solid rgb(102, 188, 217); background: rgba(232, 251, 255, 0.875); color: rgb(8, 115, 152); font-size: 8px; letter-spacing: 0.12em; box-shadow: rgba(81, 200, 235, 0.36) 0px 0px 10px; pointer-events: none; }
.gesture-mode[hidden] { display: none; }
.instrument-bar { grid-template-columns: 156px repeat(5, minmax(0px, 1fr)) 88px; }
.add-cell-button { min-width: 0px; border-width: 0px 0px 0px 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(167, 219, 234); border-image: none; background: linear-gradient(120deg, rgb(249, 254, 255), rgb(201, 241, 251)); color: rgb(8, 123, 159); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; }
.add-cell-button:disabled { opacity: 0.46; cursor: not-allowed; }
.placement-ghost { position: absolute; z-index: 4; border: 2px solid rgb(2, 157, 202); border-radius: 50%; box-shadow: rgb(48, 199, 236) 0px 0px 18px, rgba(234, 255, 255, 0.533) 0px 0px 0px 6px; transform: translate(-50%, -50%); pointer-events: none; }
.placement-ghost[hidden], .placement-cue[hidden], .cell-picker[hidden] { display: none; }
.dish.placing { cursor: crosshair; }
.placement-cue { position: fixed; z-index: 12; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid rgb(105, 204, 232); background: rgba(245, 253, 255, 0.95); box-shadow: rgb(112, 202, 231) 0px 0px 20px; color: rgb(8, 109, 142); font-size: 10px; white-space: nowrap; }
.placement-cue button, .cell-picker button { border: 1px solid rgb(143, 214, 233); background: rgb(230, 249, 255); color: rgb(8, 123, 159); padding: 7px; }
.cell-picker { position: fixed; inset: 0px; z-index: 11; display: grid; place-items: center; background: rgba(230, 248, 255, 0.61); backdrop-filter: blur(6px); }
.cell-picker-card { width: min(420px, -20px + 100vw); max-height: calc(100dvh - 20px); overflow: auto; padding: 16px; border: 1px solid rgb(121, 211, 239); background: linear-gradient(120deg, rgb(255, 255, 255), rgb(240, 251, 255) 75%, rgb(213, 243, 255)); box-shadow: rgba(81, 193, 228, 0.533) 0px 0px 35px; }
.cell-picker-card .panel-head { padding: 0px 0px 12px; }
.cell-picker-card label { display: block; margin: 10px 0px; color: rgb(57, 126, 150); font-size: 11px; }
.cell-picker-card input, .cell-picker-card select, #panel-catalog select { display: block; width: 100%; min-height: 36px; margin-top: 5px; padding: 6px; border: 1px solid rgb(164, 219, 234); background: rgb(255, 255, 255); color: rgb(18, 104, 132); }
.cell-picker-card .quick-count { font-size: 12px; font-weight: 700; margin: 0 0 12px; }
.quick-cell-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cell-picker-card .quick-cell-choice { min-height: 70px; padding: 10px 9px; text-align: left; border: 1px solid color-mix(in srgb, var(--cell-color) 50%, white); border-left: 5px solid var(--cell-color); background: #fff; color: #164f60; }
.quick-cell-choice strong, .quick-cell-choice small { display: block; }
.quick-cell-choice strong { font-size: 13px; color: var(--cell-color); }
.quick-cell-choice small { margin-top: 4px; font-size: 11px; line-height: 1.25; color: #517787; }
.quick-cell-choice:hover, .quick-cell-choice:focus-visible { background: #e8f8fb; outline: 2px solid var(--cell-color); outline-offset: 1px; }
.quick-cell-choice:disabled { opacity: .48; cursor: not-allowed; }
.picker-advanced { margin-top: 12px; padding-top: 9px; border-top: 1px solid #b9dfe9; }
.picker-advanced summary { cursor: pointer; color: #176e88; font-size: 11px; letter-spacing: .05em; }
.catalog-list { display: grid; gap: 6px; margin-bottom: 18px; }
.catalog-entry { border: 1px solid rgb(180, 226, 238); padding: 9px; background: rgb(249, 253, 255); color: rgb(38, 111, 137); font-size: 10px; line-height: 1.5; }
.catalog-entry strong { display: block; color: rgb(8, 109, 142); }
.panel-tabs button { min-width: 0px; padding-inline: 4px; font-size: 9px; }
@media (max-width: 780px) {
  .instrument-bar { grid-template-columns: 132px repeat(5, minmax(0px, 1fr)) 48px; }
  .add-cell-button { font-size: 8px; line-height: 1.15; padding: 2px; }
  .placement-cue { left: 6px; right: 6px; bottom: 4px; transform: none; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 5px; white-space: normal; font-size: 9px; padding: 6px; }
  #placement-instruction { min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
}
@media (max-width: 780px) {
  .instrument-bar { grid-template-columns: 132px repeat(5, minmax(0px, 1fr)); }
  .add-cell-button { position: absolute; right: 2px; top: -34px; z-index: 3; width: 92px; height: 30px; font-size: 9px; border: 1px solid rgb(131, 210, 233); box-shadow: rgba(111, 206, 230, 0.36) 0px 0px 10px; }
}
.dish-tools { position: relative; display: grid; place-items: center; min-width: 0px; }
.tool-toggle { width: 39px; height: 39px; border: 1px solid rgb(120, 206, 232); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(255, 255, 255), rgb(203, 240, 252)); color: rgb(8, 123, 159); font-size: 26px; line-height: 1; box-shadow: rgba(103, 203, 232, 0.48) 0px 0px 15px; }
.tool-toggle[aria-expanded="true"] { background: rgb(188, 239, 252); box-shadow: rgb(51, 191, 230) 0px 0px 20px; }
.tool-menu { position: absolute; right: 0px; bottom: calc(100% + 8px); z-index: 9; width: 172px; padding: 6px; display: grid; gap: 5px; border: 1px solid rgb(139, 213, 233); background: rgba(247, 253, 255, 0.957); box-shadow: rgba(91, 184, 211, 0.44) 0px 8px 24px; }
.tool-menu[hidden], .removal-confirm[hidden] { display: none; }
.tool-menu button { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 8px; border: 1px solid rgb(167, 222, 236); background: rgb(255, 255, 255); color: rgb(8, 123, 159); text-align: left; font-size: 9px; letter-spacing: 0.08em; }
.tool-menu button b { width: 19px; text-align: center; font-size: 16px; font-weight: 400; }
.tool-menu button:disabled { opacity: 0.45; }
.removal-confirm { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 7px; padding: 8px; border: 1px solid rgb(218, 169, 184); background: rgb(255, 247, 250); color: rgb(155, 55, 87); font-size: 10px; }
.removal-confirm span { margin-right: auto; }
.removal-confirm button { border: 1px solid rgb(209, 142, 164); background: rgb(255, 255, 255); color: rgb(146, 45, 75); padding: 6px 8px; font-size: 9px; }
.dish.placing-nutrients .placement-ghost { border-color: rgb(33, 170, 142); box-shadow: rgb(85, 221, 189) 0px 0px 17px, rgba(215, 255, 244, 0.467) 0px 0px 0px 5px; }
.dish.choosing-removal { cursor: crosshair; }
.dish.erasing { cursor: crosshair; }
.dish.erasing .placement-ghost { border-color: #c04d75; background: rgba(192,77,117,.08); box-shadow: 0 0 18px rgba(192,77,117,.45), 0 0 0 4px rgba(255,230,238,.45); }
.focus-lever .lever-scale { font-size: 5px; line-height: 1; }
.focus-lever .lever-scale span { display: block; }
body.performance-mode .dish { background: #f8fdff; box-shadow: none; }
body.performance-mode .brand-mark, body.performance-mode .inspector-reticle { text-shadow: none; }
body.performance-mode .topbar, body.performance-mode .instrument-bar, body.performance-mode .specimen-inspector { box-shadow: none; }
body.performance-mode .icon-button, body.performance-mode .inspector-actions button { transition: none; }
body.performance-mode .icon-button:hover, body.performance-mode .icon-button:focus-visible, body.performance-mode .inspector-actions button:hover, body.performance-mode .inspector-actions button:focus-visible { box-shadow: none; }
body.performance-mode .dish-graticule { opacity: .55; }
body:is(.performance-mode,.adaptive-flat) * { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
body.performance-mode button:disabled, body.performance-mode input:disabled { opacity: .38; cursor: default; }
.inspector-identity > span, #population-detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 780px) {
  .dish-tools { position: absolute; right: 5px; top: -40px; z-index: 9; }
  .tool-toggle { width: 36px; height: 36px; }
  .tool-menu { bottom: calc(100% + 5px); }
  .inspector-detail:has(.removal-confirm:not([hidden])) { max-height: 230px; overflow: auto; }
  .removal-confirm { flex-wrap: wrap; }
  .removal-confirm span { width: 100%; }
}

/* Dish tools and specimen removal stay within the fixed workbench. */
.inspector-detail { min-width: 0; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.8fr) minmax(0, 1.25fr); }
.inspector-identity, .inspector-stats, .inspector-actions { min-width: 0; }
.inspector-actions { flex-wrap: wrap; align-content: center; justify-content: flex-end; }
.inspector-actions button { flex: 1 1 100px; white-space: normal; }
.inspector-detail:has(.removal-confirm:not([hidden])) { max-height: min(31dvh, 220px); overflow-y: auto; }
.removal-confirm { min-width: 0; flex-wrap: wrap; }
.removal-confirm span { flex: 1 1 170px; }
@media (max-width: 780px) {
  .inspector-detail { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .inspector-actions { flex-direction: column; flex-wrap: nowrap; }
  .inspector-actions button { flex: 0 0 auto; }
  .inspector-detail:has(.removal-confirm:not([hidden])) { max-height: min(35dvh, 235px); }
  .removal-confirm { justify-content: stretch; }
  .removal-confirm span { flex-basis: 100%; }
  .removal-confirm button { flex: 1 1 0; }
}

.algae-clump-tools { margin: 14px 0; padding: 12px; border: 1px solid #a7d8ca; background: #f1fbf5; }
.algae-clump-tools h3 { margin: 0 0 8px; color: #40775d; font-size: 12px; letter-spacing: .12em; }
.algae-clump-tools .clump-random-label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.algae-clump-tools .clump-random-label input { width: auto; min-height: 0; margin: 0; accent-color: #4d9873; }
.algae-clump-tools #clump-type-label[hidden] { display: none; }
.clump-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.cell-picker-card .clump-buttons button { min-height: 44px; padding: 7px; border-color: #77b598; background: #def4e5; color: #2b7150; font-weight: 700; font-size: 11px; }
.cell-picker-card .clump-buttons button:disabled { opacity: .5; }

/* Specimen card: readable traits first, actions in rows below. */
.specimen-inspector { max-height: min(43dvh, 420px); overflow-y: auto; grid-template-rows: auto auto; }
.inspector-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 16px 8px; }
.inspector-identity, .inspector-stats, .inspector-actions, .removal-confirm { grid-column: 1; }
.inspector-identity { gap: 7px; }
.inspector-name { display: flex; align-items: center; gap: 11px; min-width: 0; }
.inspector-name > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inspector-name strong { font: 400 23px Georgia, serif; color: #086f91; overflow-wrap: anywhere; }
.inspector-name span:not(.specimen-avatar) { font-size: 11px; color: #648da0; overflow-wrap: anywhere; }
.specimen-avatar { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border: 1px solid; border-radius: 50%; font-size: 27px; }
#specimen-status { margin: 0; color: #4f7e91; font-size: 11px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
.inspector-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.inspector-stats > div { min-width: 0; min-height: 62px; padding: 8px; border: 1px solid #d0eaf2; background: #f8fdff; display: flex; flex-direction: row; align-items: center; gap: 8px; }
.inspector-stats > div > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inspector-stats .stat-icon { flex: 0 0 28px; font-size: 24px; line-height: 1; color: #168db0; text-align: center; }
.inspector-stats small { font-size: 9px; letter-spacing: .09em; }
.inspector-stats strong { font: 600 12px Arial, sans-serif; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.inspector-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; justify-content: stretch; }
.inspector-actions button { min-width: 0; min-height: 38px; padding: 7px; font-size: 9px; white-space: normal; }
.inspector-follow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px 10px; }
.inspector-follow button { min-height: 34px; }
.inspector-detail:has(.removal-confirm:not([hidden])) { max-height: none; }
@media (max-width: 780px) {
  .specimen-inspector { min-height: 0; max-height: 38dvh; }
  .inspector-detail { min-height: 0; grid-template-columns: minmax(0, 1fr); padding: 9px; gap: 7px; }
  .inspector-identity { grid-column: 1; }
  .inspector-name strong { font-size: 20px; }
  .inspector-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .inspector-stats > div { min-height: 56px; padding: 5px; gap: 4px; }
  .inspector-stats .stat-icon { flex-basis: 20px; font-size: 20px; }
  .inspector-stats strong { font-size: 11px; }
  .inspector-stats .stat-secondary { grid-column: 1 / -1; }
  .specimen-inspector small { font-size: 8px; }
  .inspector-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspector-actions button { min-height: 34px; padding: 6px; font-size: 9px; }
  .inspector-follow { padding: 0 9px 8px; }
}

/* Keep dish status above the canvas and tracking beside the microscope. */
.app { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.top-readout-strip { display: flex; align-items: center; gap: 0; min-width: 0; min-height: 36px; overflow-x: auto; overflow-y: hidden; padding: 0 clamp(12px, 2vw, 26px); border-bottom: 1px solid #c5e7f1; background: rgba(245, 252, 255, .94); scrollbar-width: thin; }
.top-readout-strip .field-legend { position: static; flex: 0 0 auto; max-width: none; padding: 3px 9px 3px 0; border: 0; background: none; color: #1787a9; font-size: 10px; line-height: 1.15; text-align: left; white-space: nowrap; }
.top-readout-strip .readout { flex: 0 0 auto; display: flex; flex-direction: row; align-items: baseline; gap: 4px; min-width: 0; padding: 3px 9px; border-left: 1px solid #d0eaf2; border-right: 0; white-space: nowrap; }
.top-readout-strip .readout span { font-size: 8px; letter-spacing: .06em; }
.top-readout-strip .readout strong { font: 600 11px Arial, sans-serif; }
.top-readout-strip .phase-readout strong { letter-spacing: .12em; }
.top-readout-strip .readout small { display: none; }
.instrument-bar { grid-template-columns: 156px minmax(0, 1fr) 52px; align-items: stretch; min-width: 0; }
.instrument-bar .inspector-follow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px; min-width: 0; padding: 8px; }
.instrument-bar .inspector-follow button { min-width: 0; min-height: 36px; padding: 5px; font-size: 9px; white-space: normal; }
.instrument-bar .dish-tools { position: relative; right: auto; top: auto; z-index: 9; }
.instrument-bar .tool-menu { bottom: calc(100% + 8px); }
@media (max-width: 780px) {
  .app { grid-template-rows: 48px auto minmax(0, 1fr); }
  .top-readout-strip { min-height: 33px; padding: 0 7px; }
  .top-readout-strip .field-legend { font-size: 8px; padding-right: 6px; }
  .top-readout-strip .readout { padding: 3px 6px; gap: 3px; }
  .top-readout-strip .readout span { font-size: 7px; }
  .top-readout-strip .readout strong { font-size: 9px; }
  .instrument-bar { grid-template-columns: 132px minmax(0, 1fr) 39px; min-height: 82px; }
  .instrument-bar .inspector-follow { gap: 3px; padding: 4px 3px; }
  .instrument-bar .inspector-follow button { min-height: 42px; font-size: 8px; line-height: 1.15; letter-spacing: 0; }
  .instrument-bar .dish-tools { position: relative; right: auto; top: auto; }
}

/* Tool feedback takes its own row immediately below the dish readouts. */
.app { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.app > .topbar { grid-row: 1; }
.app > .top-readout-strip { grid-row: 2; }
.app > .placement-cue { grid-row: 3; }
.app > main { grid-row: 4; }
.app > footer { grid-row: 5; }
.placement-cue { position: static; left: auto; right: auto; bottom: auto; transform: none; width: 100%; min-width: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 6px clamp(12px, 2vw, 26px); border-width: 0 0 1px; box-shadow: none; white-space: normal; }
.placement-cue #placement-instruction { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.placement-cue button { flex: 0 0 auto; min-height: 30px; padding: 5px 9px; }
@media (max-width: 780px) {
  .app { grid-template-rows: 48px auto auto minmax(0, 1fr); }
  .placement-cue { display: flex; gap: 5px; padding: 5px 8px; font-size: 9px; }
  .placement-cue button { min-height: 30px; padding: 4px 6px; font-size: 9px; }
}

/* Quick species cards expose their variants without opening precise tools. */
.quick-cell-card { min-width: 0; border: 1px solid color-mix(in srgb, var(--cell-color) 45%, white); background: #fff; }
.cell-picker-card .quick-cell-card .quick-cell-choice { width: 100%; border: 0; border-left: 4px solid var(--cell-color); }
.cell-picker-card .quick-variant-label { display: block; margin: 0; padding: 0 7px 7px; font-size: 8px; letter-spacing: .1em; }
.cell-picker-card .quick-variant-label select { width: 100%; min-width: 0; min-height: 32px; margin-top: 3px; padding: 4px 5px; color: #176d86; font-size: 11px; letter-spacing: 0; }
.quick-variant-select:focus-visible { outline: 2px solid var(--cell-color); outline-offset: 1px; }

/* Population tab lists families and living visual variants with dish-level ages. */
.species-roster { display: grid; gap: 10px; margin: 10px 0 20px; }
.species-roster-group { border: 1px solid #b9dfea; background: #faffff; }
.species-roster-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 9px 10px; background: #eaf8fc; color: #086d8d; }
.species-roster-heading strong { font-size: 12px; }
.species-roster-heading span { font-size: 10px; text-align: right; }
.species-roster-variant { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #d9eef4; border-left: 4px solid var(--variant-color); font-size: 10px; }
.species-roster-variant strong { min-width: 0; color: var(--variant-color); overflow-wrap: anywhere; }
.species-roster-variant span { white-space: nowrap; }
.species-roster-heading, .species-roster-variant { width: 100%; border: 0; text-align: left; font: inherit; cursor: pointer; }
.species-roster-variant { border-top: 1px solid #d9eef4; border-left: 4px solid var(--variant-color); }
.species-roster-heading:hover, .species-roster-variant:hover { background: #d9f3fa; }
.species-roster-heading[aria-pressed="true"], .species-roster-variant[aria-pressed="true"] { background: #c5eef9; box-shadow: inset 0 0 0 2px #139ac0; }
.graph-controls { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin: 12px 0; }
.graph-controls label { color: #6093a4; font-size: 9px; letter-spacing: .1em; }
.graph-controls select, .graph-controls input { display: block; width: 100%; min-width: 0; min-height: 36px; margin-top: 5px; padding: 6px; border: 1px solid #a4dbea; background: #fff; color: #126884; font: 12px Arial,sans-serif; }
.graph-wrap { width: 100%; min-height: 280px; padding: 8px; border: 1px solid #b9dfea; background: #faffff; }
#population-graph { display: block; width: 100%; height: 260px; }
.graph-actions { display: flex; gap: 7px; margin: 10px 0; }
.graph-actions button { flex: 1; min-height: 34px; border: 1px solid #a4dbea; background: #f6fcfe; color: #087495; font-size: 10px; letter-spacing: .08em; }
.graph-series { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; margin-bottom: 20px; }
.graph-series label { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px; border: 1px solid #d1eaf1; background: #fbfeff; color: #276e85; font-size: 11px; }
.graph-series input { accent-color: var(--series-color); flex: 0 0 auto; }
.graph-series i { width: 13px; height: 3px; flex: 0 0 auto; background: var(--series-color); }
.graph-series span { min-width: 0; overflow-wrap: anywhere; }
.graph-series b { margin-left: auto; color: #076f91; font-size: 11px; }
.cycle-controls { margin: 10px 0 14px; padding: 10px; border: 1px solid #b9dfea; background: #f7fcfe; }
.cycle-controls h2 { margin: 0 0 9px; font-size: 11px; letter-spacing: .14em; color: #187e9d; }
@media (max-width: 780px) { .graph-series { grid-template-columns: 1fr; } .graph-wrap { min-height: 250px; } #population-graph { height: 230px; } }
.species-roster-heading:focus-visible, .species-roster-variant:focus-visible { outline: 2px solid #008fb9; outline-offset: -3px; }
@media (max-width: 780px) {
  .panel-tabs button { padding: 10px 2px; font-size: 8px; letter-spacing: 0; }
  .species-roster-heading { flex-direction: column; gap: 3px; }
  .species-roster-variant { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 6px; }
  .species-roster-variant span:last-child { grid-column: 1 / -1; color: #668e9d; }
}

/* Specimen drawer keeps a compact handle available over the expanded dish. */
.specimen-inspector { overflow: hidden; grid-template-rows: auto minmax(0, 1fr); }
.inspector-toggle { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 10px; padding: 7px 14px; border: 0; border-bottom: 1px solid #c1e5f0; background: #eaf9fd; color: #157fa0; text-align: left; }
.inspector-toggle > span:first-child { flex: 0 0 auto; font-size: 9px; letter-spacing: .14em; }
.inspector-toggle strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px Arial, sans-serif; color: #087294; }
.inspector-toggle > span:nth-last-child(2) { flex: 0 0 auto; font-size: 11px; }
.inspector-toggle i { flex: 0 0 auto; font-style: normal; font-size: 20px; line-height: 1; transition: transform .18s; }
.inspector-toggle:focus-visible { outline: 2px solid #008fb9; outline-offset: -3px; }
.inspector-body { min-height: 0; overflow-y: auto; }
.inspector-body[hidden] { display: none; }
.specimen-division { margin: 0; color: #147d9d; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.inspector-stats > .energy-stat { grid-column: span 2; }
.energy-stat > span:last-child { flex: 1; }
.battery-shell { position: relative; display: block; width: min(100%, 180px); height: 18px; padding: 2px; border: 2px solid #168db0; border-radius: 3px; background: #e8f4f8; }
.battery-shell::after { content: ''; position: absolute; right: -6px; top: 4px; width: 4px; height: 6px; border-radius: 0 2px 2px 0; background: #168db0; }
.battery-shell > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg,#f1a449,#41bfa1); transition: width .3s ease; }
.specimen-meters { min-width: 0; border: 1px solid #c9e9f2; background: #f6fcfe; padding: 11px; display: grid; gap: 9px; }
.specimen-meters [hidden] { display: none; }
.meter-heading, .meter-row > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meter-heading > strong { font-size: 12px; letter-spacing: .12em; color: #087495; }
.meter-heading > span { font-size: 10px; color: #327d93; text-align: right; }
.breed-meters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.meter-row { min-width: 0; display: grid; gap: 5px; }
.meter-row span, .meter-row strong { font-size: 11px; color: #336e82; }
.meter-row strong { color: #076f91; white-space: nowrap; }
.meter-track { height: 10px; border: 1px solid #b9dce8; background: #e4f0f4; overflow: hidden; border-radius: 5px; }
.meter-track > span { display: block; height: 100%; width: 0; background: #29a7ca; transition: width .3s ease; }
.meter-track.meter-complete > span { background: #42ae8b; }
.meter-note, .breed-conditions { margin: 0; font-size: 10px; line-height: 1.4; color: #548397; }
.specimen-meters .specimen-division { font-size: 11px; font-weight: 700; }
@media (max-width: 780px) {
  .inspector-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inspector-stats > .energy-stat, .inspector-stats .stat-secondary { grid-column: 1 / -1; }
  .breed-meters { grid-template-columns: 1fr; gap: 9px; }
  .meter-heading { align-items: flex-start; flex-direction: column; gap: 3px; }
}
.specimen-inspector.is-collapsed { flex: 0 0 42px; min-height: 42px; max-height: 42px; display: block; }
.specimen-inspector.is-collapsed .inspector-toggle { height: 42px; border-bottom: 0; }
.specimen-inspector.is-collapsed .inspector-toggle i { transform: rotate(180deg); }
@media (max-width: 780px) {
  .inspector-toggle { padding: 6px 9px; gap: 7px; }
  .inspector-toggle > span:first-child { font-size: 8px; }
  .inspector-toggle strong { font-size: 12px; }
  .workbench.inspector-collapsed .dish-frame { overflow: hidden; }
  .workbench.inspector-collapsed .dish { height: min(118vw, 100%); width: auto; max-width: none; max-height: none; }
}
.intervention-timeline{max-height:11rem;overflow:auto;padding-left:1.6rem;color:#326c82;font:12px/1.5 Arial,sans-serif}.intervention-timeline li{padding:.2rem 0;border-bottom:1px solid #d9edf2}
.settings-open .dish-tools{visibility:hidden}
.survival-graph-wrap{min-height:175px;margin:8px 0 14px}#survival-graph{display:block;width:100%;height:175px}

/* Keep microscope and tracking controls directly below the dish status. */
.app { grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
.app > .instrument-bar { grid-row: 3; position: relative; z-index: 6; width: 100%; }
.app > .placement-cue { grid-row: 4; }
.app > main { grid-row: 5; }
.app > footer { grid-row: 6; }
.instrument-bar .tool-menu { top: calc(100% + 8px); bottom: auto; }
.specimen-inspector[hidden] { display: none; }
@media (max-width: 780px) {
  .app { grid-template-rows: 48px auto auto auto minmax(0, 1fr); }
  .app > footer { display: none; }
  .app > .instrument-bar { grid-template-columns: 132px minmax(0, 1fr) 42px; min-width: 0; max-width: 100vw; }
  .instrument-bar .inspector-follow { display: flex; width: 100%; min-width: 0; gap: 3px; padding: 4px 2px; }
  .instrument-bar .inspector-follow button { flex: 1 1 0; min-width: 0; padding: 3px 1px; font-size: 8px; overflow-wrap: anywhere; }
  .instrument-bar .dish-tools { width: 42px; min-width: 0; }
  .workbench { justify-content: flex-start; }
  .dish { width: min(100%, 100dvh - 210px); max-height: calc(100dvh - 210px); }
  .workbench.inspector-collapsed .dish { max-height: none; }
}

/* Dish actions stay visible in a separate horizontal row below the optics. */
.app { grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; }
.app > .instrument-bar { grid-row: 3; grid-template-columns: 156px minmax(0, 1fr); }
.app > .dish-tools { grid-row: 4; position: relative; inset: auto; z-index: 5; display: block; width: 100%; min-width: 0; padding: 5px clamp(12px, 2vw, 26px); border-bottom: 1px solid #c5e7f1; background: #f5fcff; }
.app > .dish-tools .tool-menu { position: static; width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 0; border: 0; background: transparent; box-shadow: none; }
.app > .dish-tools .tool-menu button { min-width: 0; min-height: 38px; justify-content: center; text-align: center; font-size: 10px; font-weight: 600; }
.app > .dish-tools .tool-menu button b { flex: 0 0 auto; }
.app > .placement-cue { grid-row: 5; }
.app > main { grid-row: 6; }
.app > footer { grid-row: 7; }
@media (max-width: 780px) {
  .app { grid-template-rows: 48px auto auto auto auto minmax(0, 1fr); }
  .app > .instrument-bar { grid-template-columns: 132px minmax(0, 1fr); }
  .app > .dish-tools { padding: 4px; }
  .app > .dish-tools .tool-menu { gap: 3px; }
  .app > .dish-tools .tool-menu button { flex-direction: column; gap: 1px; min-height: 43px; padding: 2px 1px; font-size: 8px; line-height: 1.1; letter-spacing: 0; }
  .app > .dish-tools .tool-menu button b { width: auto; font-size: 15px; line-height: 1; }
  .dish { width: min(100%, 100dvh - 250px); max-height: calc(100dvh - 250px); }
}

/* Dish feedback floats over the canvas, leaving the viewport for the dish. */
.app { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.app > .instrument-bar { grid-row: 3; }
.app > main { grid-row: 4; }
.app > footer { grid-row: 5; }
.app > .dish-tools, .app > .placement-cue { grid-row: auto; }
.app > .instrument-bar { grid-template-columns: 156px minmax(0, 1fr); }
.instrument-bar .inspector-follow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; }
.instrument-bar .inspector-follow #tool-toggle { min-width: 38px; padding: 0; font-size: 24px; line-height: 1; }
.instrument-bar .inspector-follow #tool-toggle[aria-expanded="true"] { background: #c9f3fd; }
main > .dish-tools { position: absolute; z-index: 8; top: 0; left: 0; right: 0; width: auto; padding: 5px clamp(12px, 2vw, 26px); border: 0; background: rgba(245, 252, 255, .95); box-shadow: 0 5px 16px rgba(75, 160, 190, .2); }
main > .dish-tools:has(.tool-menu[hidden]) { display: none; }
main > .dish-tools .tool-menu { position: static; width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; padding: 0; border: 0; background: transparent; box-shadow: none; }
main > .dish-tools .tool-menu[hidden] { display: none; }
main > .dish-tools .tool-menu button { min-width: 0; min-height: 38px; justify-content: center; text-align: center; font-size: 10px; font-weight: 600; }
main > .placement-cue { position: absolute; z-index: 7; top: 0; left: 0; right: 0; width: auto; }
main > .dish-tools:not(:has(.tool-menu[hidden])) + .placement-cue { top: 49px; }
main > .placement-cue[hidden] { display: none; }
main > .event-notice { position:absolute; z-index:7; top:0; left:clamp(8px,2vw,24px); right:clamp(8px,2vw,24px); display:flex; align-items:center; gap:10px; min-height:36px; padding:6px 9px; border:1px solid var(--theme-border,#81c6d9); background:var(--theme-surface,#edfbff); color:var(--theme-text,#086f90); box-shadow:0 5px 16px #093d5350; font:11px/1.35 Arial,sans-serif; }
main > .event-notice[hidden] { display:none; }
main > .event-notice span { flex:1; min-width:0; }
main > .event-notice button { flex:none; width:28px; height:26px; border:1px solid currentColor; background:transparent; color:inherit; font-size:19px; line-height:1; cursor:pointer; }
main:has(> .dish-tools .tool-menu:not([hidden])) > .event-notice { top:52px; }
body.settings-open .event-notice { display:none; }
.dish-frame { container-type: size; }
.dish { width: min(100cqw, 100cqh, 900px); height: auto; max-height: none; aspect-ratio: 1; }
@media (max-width: 780px) {
  .app { grid-template-rows: 48px auto auto minmax(0, 1fr); }
  .app > footer { display: none; }
  .app > .instrument-bar { grid-template-columns: 132px minmax(0, 1fr); }
  .instrument-bar .inspector-follow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; }
  .instrument-bar .inspector-follow #tool-toggle { min-width: 0; font-size: 21px; }
  main > .dish-tools { padding: 4px; }
  main > .dish-tools .tool-menu { gap: 3px; }
  main > .dish-tools .tool-menu button { flex-direction: column; gap: 1px; min-height: 43px; padding: 2px 1px; font-size: 8px; line-height: 1.1; letter-spacing: 0; }
  main > .dish-tools .tool-menu button b { width: auto; font-size: 15px; line-height: 1; }
  main > .dish-tools:not(:has(.tool-menu[hidden])) + .placement-cue { top: 51px; }
  .dish { width: min(100cqw, 100cqh); height: auto; max-height: none; }
  .workbench.inspector-collapsed .dish { width: min(118vw, 100cqh); height: auto; max-height: none; }
}

/* The enlarged collapsed view must center against the viewport, not an
   implicit grid column widened by the oversized circle. */
.dish-frame { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.dish-frame > .dish { justify-self: center; }
.specimen-perception { display: grid; gap: 9px; min-width: 0; padding: 11px; border: 1px solid #c9e9f2; background: rgba(241, 250, 254, .8); }
.specimen-perception > strong { color: #087495; font-size: 10px; letter-spacing: .12em; }
.bio-identity, .bio-meters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.bio-identity > div, .bio-meter { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px; border: 1px solid #d0eaf2; background: #f8fdff; }
.bio-identity b, .bio-meter > b { flex: 0 0 24px; color: #168db0; font-size: 23px; line-height: 1; text-align: center; font-weight: 400; }
.bio-identity div > span, .bio-meter > span { display: grid; gap: 4px; min-width: 0; flex: 1; }
.bio-identity small, .bio-meter small { color: #4b8ca1; font-size: 9px; letter-spacing: .08em; }
.bio-identity strong, .bio-meter strong { color: #086f90; font: 600 12px Arial,sans-serif; line-height: 1.2; overflow-wrap: anywhere; }
.bio-meter .meter-track { width: 100%; height: 8px; }
.bio-signal-note { margin: 0; color: #276e85; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 780px) { .bio-identity, .bio-meters { grid-template-columns: repeat(2,minmax(0,1fr)); } .bio-identity > div, .bio-meter { padding: 7px 5px; gap: 5px; } .bio-identity b, .bio-meter > b { flex-basis: 19px; font-size: 19px; } .bio-identity strong, .bio-meter strong { font-size: 11px; } }

/* The optical rails use the full dish viewport and do not change its size. */
.app > .instrument-bar { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.instrument-bar .inspector-follow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; width: min(100%, 430px); padding: 4px 8px; }
.instrument-bar .inspector-follow button,
.instrument-bar .inspector-follow #tool-toggle { min-width: 0; min-height: 34px; padding: 3px 6px; font-size: 10px; line-height: 1; white-space: nowrap; }
.instrument-bar .inspector-follow button span { margin-right: 3px; font-size: 17px; line-height: 0; vertical-align: -2px; }
.instrument-bar .inspector-follow #tool-toggle span { font-size: 20px; }
.dish-frame { position: relative; }
.dish-frame { background-color: transparent; }
.dish-frame > .scope-hud { position: absolute; z-index: 6; inset: 10px 5px; display: block; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; pointer-events: none; }
.dish-frame .scope-lever { position: absolute; top: 0; bottom: 0; width: 52px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid rgba(160, 216, 233, .7); background: rgba(248, 253, 255, .78); box-shadow: 0 0 12px rgba(137, 205, 228, .2); pointer-events: auto; }
.dish-frame .scope-lever { border: 0; background: transparent; box-shadow: none; text-shadow: 0 1px 3px rgba(255, 255, 255, .95); }
.dish-frame .scope-lever .graphic-meter { border: 0; background: transparent; box-shadow: none; }
.dish-frame .scope-lever .graphic-meter::before { left: 50%; right: auto; width: 1px; background: rgba(5, 132, 173, .75); box-shadow: 0 0 4px #fff; }
.dish-frame .scope-lever .meter-fill { background: linear-gradient(0deg, rgba(32, 184, 222, .28), rgba(32, 184, 222, 0)); }
.dish-frame .scope-lever .meter-label, .dish-frame .scope-lever .lever-scale, .dish-frame .scope-lever output, .dish-frame .scope-lever small { color: #087ca1; }
.dish-frame .focus-lever { left: 0; }
.dish-frame .zoom-lever { right: 0; }
.dish-frame .scope-lever .meter-label { flex: 0 0 auto; font-size: 8px; font-weight: 700; }
.dish-frame .scope-lever .lever-track { flex: 1 1 auto; width: 100%; min-height: 0; height: auto; gap: 2px; }
.dish-frame .scope-lever .lever-scale { height: calc(100% - 8px); min-height: 0; font-size: 7px; line-height: 1; }
.dish-frame .scope-lever .graphic-meter { width: 18px; height: calc(100% - 8px); min-height: 72px; }
.dish-frame .scope-lever output { flex: 0 0 auto; font-size: 8px; }
.dish-frame .scope-lever small { flex: 0 0 auto; font-size: 7px; }
.dish-frame .scope-mini-actions { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: row; gap: 3px; padding: 3px; border: 1px solid rgba(160, 216, 233, .7); background: rgba(248, 253, 255, .85); pointer-events: auto; }
.dish-frame .scope-mini-actions > button, .dish-frame .scope-more summary { width: 25px; height: 25px; }
.dish-frame .scope-more-panel { top: calc(100% + 4px); left: 50%; transform: translateX(-50%); max-width: min(90vw, 360px); }
@media (max-width: 780px) {
  .app > .instrument-bar { min-height: 42px; }
  .instrument-bar .inspector-follow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 430px; gap: 3px; padding: 3px 5px; }
  .instrument-bar .inspector-follow button,
  .instrument-bar .inspector-follow #tool-toggle { min-height: 34px; padding: 2px; font-size: 9px; }
  .dish-frame > .scope-hud { inset: 8px 3px; }
  .dish-frame .scope-lever { width: 44px; padding: 5px 1px; }
  .dish-frame .scope-lever .lever-scale { font-size: 6px; }
  .dish-frame .scope-lever .graphic-meter { width: 16px; }
  .dish-frame .scope-lever output { font-size: 7px; }
  .dish-frame .scope-lever small { font-size: 6px; }
}
.panel-tabs button { flex: 0 0 auto; min-width: 72px; padding-inline: 8px; }

/* The interface follows the lamp phase; the dish keeps its own lighting model. */
body[data-light-phase="day"] { --theme-page:#f3fbff; --theme-surface:#f9fdff; --theme-card:#f0faff; --theme-control:#ffffff; --theme-text:#155a74; --theme-accent:#087fa1; --theme-muted:#397084; --theme-border:#abd9e8; --theme-hover:#d9f4fd; }
body[data-light-phase="dawn"] { --theme-page:#f8e9dd; --theme-surface:#fff6ed; --theme-card:#ffeadc; --theme-control:#fffaf3; --theme-text:#62405b; --theme-accent:#9b4669; --theme-muted:#806274; --theme-border:#d9adba; --theme-hover:#ffdccb; }
body[data-light-phase="dusk"] { --theme-page:#292438; --theme-surface:#3a3048; --theme-card:#48394f; --theme-control:#55425b; --theme-text:#fff1e6; --theme-accent:#ffd095; --theme-muted:#dec4cb; --theme-border:#906d87; --theme-hover:#644a65; color-scheme:dark; }
body[data-light-phase="night"] { --theme-page:#081827; --theme-surface:#102b3f; --theme-card:#193a50; --theme-control:#21465b; --theme-text:#e8f7ff; --theme-accent:#8ce4f2; --theme-muted:#aacbd9; --theme-border:#457a91; --theme-hover:#29566c; color-scheme:dark; }
body[data-light-phase] { background:var(--theme-page); color:var(--theme-text); transition:background-color 1s ease,color 1s ease; }
body[data-light-phase] :is(.topbar,.top-readout-strip,.instrument-bar,.specimen-inspector,.side-panel,.app > .dish-tools,.placement-cue,footer) { background:var(--theme-surface); color:var(--theme-text); border-color:var(--theme-border); transition:background-color 1s ease,color 1s ease,border-color 1s ease; }
body[data-light-phase] :is(.settings-preset-shortcuts,.inspector-toggle,.panel-tabs button,.panel-tabs button[aria-selected="true"]) { background:var(--theme-card); color:var(--theme-accent); border-color:var(--theme-border); transition:background-color 1s ease,color 1s ease,border-color 1s ease; }
body[data-light-phase] .panel-tabs button[aria-selected="true"] { background:var(--theme-hover); box-shadow:inset 0 -2px var(--theme-accent); }
body[data-light-phase] :is(.archive,.microscope,.sim-guide,.population-context,.lighting-dashboard,.lighting-advanced,.cycle-controls,.resource-status,.environment-note,.graph-wrap,.specimen-meters,.specimen-perception,.specimen-readiness,.specimen-deep,.metabolic-board,.specimen-activity,.inspector-stats > div,.lighting-preset-list button) { background:var(--theme-card); color:var(--theme-text); border-color:var(--theme-border); transition:background-color 1s ease,color 1s ease,border-color 1s ease; }
body[data-light-phase] :is(.side-panel,.specimen-inspector,.instrument-bar,.topbar) :is(h1,h2,h3,strong,output,summary) { color:var(--theme-text); }
body[data-light-phase] :is(.side-panel,.specimen-inspector,.instrument-bar,.topbar) :is(small,.section-note,.readout span,.readout small,.meter-note,.breed-conditions,.specimen-advanced-values) { color:var(--theme-muted); }
body[data-light-phase] :is(.side-panel,.specimen-inspector,.instrument-bar,.topbar) :is(button,select,input[type="text"],input[type="search"],input[type="number"]) { background:var(--theme-control); color:var(--theme-text); border-color:var(--theme-border); }
body[data-light-phase] :is(.side-panel,.specimen-inspector,.instrument-bar,.topbar) button:hover { background:var(--theme-hover); }
body[data-light-phase] :is(.side-panel,.specimen-inspector,.instrument-bar,.topbar) :is(input[type="range"],input[type="checkbox"]) { accent-color:var(--theme-accent); }
body[data-light-phase] :is(.inspector-stats strong,.meter-row strong,.meter-row span,.meter-heading strong,.specimen-activity strong,.metabolic-heading strong,.inspector-identity strong,.inspector-toggle strong,.brand,.brand-mark,.readout strong,.settings-preset-shortcuts strong) { color:var(--theme-accent); }
body[data-light-phase] :is(.meter-track,.battery-shell) { background:var(--theme-control); border-color:var(--theme-border); }
body[data-light-phase] .top-readout-strip :is(.field-legend,.readout strong) { color:var(--theme-accent); }
body[data-light-phase] .top-readout-strip .readout span { color:var(--theme-muted); }
body[data-light-phase] .top-readout-strip .readout { border-color:var(--theme-border); }
body[data-light-phase] .dish-frame .scope-lever :is(.meter-label,.lever-scale,output,small) { color:var(--theme-accent); text-shadow:0 1px 3px var(--theme-page); }
body[data-light-phase] .dish-frame .scope-mini-actions { background:var(--theme-surface); border-color:var(--theme-border); }
body[data-light-phase] .dish-frame .scope-mini-actions button { background:var(--theme-control); color:var(--theme-accent); border-color:var(--theme-border); }
body[data-light-phase] .lighting-views canvas { border-color:var(--theme-border); }
body[data-light-phase] .settings-preset-shortcuts button[aria-pressed="true"],body[data-light-phase] .lighting-preset-list button[aria-pressed="true"] { background:var(--theme-hover); color:var(--theme-accent); border-color:var(--theme-accent); }
body:is([data-light-phase="dusk"],[data-light-phase="night"]) :is(.bio-identity > div,.bio-meter) { background:var(--theme-control); border-color:var(--theme-border); }
body:is([data-light-phase="dusk"],[data-light-phase="night"]) :is(.bio-identity small,.bio-meter small) { color:var(--theme-muted); }
body:is([data-light-phase="dusk"],[data-light-phase="night"]) :is(.bio-identity strong,.bio-meter strong,.specimen-perception > strong,.bio-signal-note,.specimen-readiness summary,.specimen-deep summary) { color:var(--theme-text); }
body:is([data-light-phase="dusk"],[data-light-phase="night"]) :is(.bio-identity b,.bio-meter > b) { color:var(--theme-accent); }
body:is([data-light-phase="dusk"],[data-light-phase="night"]) .bio-meter .meter-track { background:var(--theme-page); border-color:var(--theme-border); }
body:is([data-light-phase="dusk"],[data-light-phase="night"]) #metabolic-graph { background:var(--theme-card); border:1px solid var(--theme-border); }

/* The viewport is open; the glass rim is drawn at world coordinates on the canvas. */
.dish, .dish.has-selection { background:var(--dish-backdrop,#cde1e9); border:0; border-radius:0; box-shadow:none; overflow:hidden; }
.performance-diagnostics { position:absolute; top:8px; left:8px; z-index:4; max-width:min(88%,330px); padding:6px 8px; background:rgba(5,28,40,.82); color:#e4fbff; font:11px/1.35 ui-monospace,monospace; white-space:pre-line; pointer-events:none; border:1px solid #69c6d6; }
.dish-frame > .performance-diagnostics { left:clamp(54px,8vw,72px); max-width:min(calc(100% - 118px),330px); }
main:has(> .event-notice:not([hidden])) .performance-diagnostics { top:56px; }
main:has(> .dish-tools .tool-menu:not([hidden])):has(> .event-notice:not([hidden])) .performance-diagnostics { top:108px; }
.performance-diagnostics[hidden] { display:none; }
.dish::before, .dish::after { content:none; }
#dish-canvas { background:var(--dish-backdrop,#cde1e9); }
.cell-picker { grid-template-columns:minmax(0,1fr); overflow:hidden; }
.cell-picker-card { box-sizing:border-box; width:min(1100px,100vw); max-width:100vw; min-width:0; height:100dvh; max-height:100dvh; overflow:auto; overscroll-behavior:contain; }
.cell-picker-card > .quick-count,.cell-picker-card > .quick-cell-grid,.cell-picker-card > .picker-advanced { display:none; }
.cellular-catalog { display:grid; grid-template-columns:minmax(270px,.9fr) minmax(0,1.3fr); gap:12px; min-height:0; }
.catalog-browse,.cellular-detail { min-width:0; border:1px solid var(--theme-border,#b9dce8); background:var(--theme-card,#f8fdff); padding:10px; }
.catalog-fiction { margin:0 0 8px; color:var(--theme-muted,#557c90); font:10px/1.35 Arial,sans-serif; }
.catalog-view-tabs { display:flex; gap:5px; }
.catalog-view-tabs button { flex:1; }
.catalog-view-tabs button[aria-pressed="true"] { background:#b9edfa; box-shadow:inset 0 0 0 1px #138caf; }
.catalog-quick { display:flex; gap:5px; overflow-x:auto; padding:3px 0 7px; scrollbar-width:thin; }
.catalog-quick button { flex:none; min-height:36px; padding:6px 10px; white-space:nowrap; }
.catalog-quick button[aria-pressed="true"] { background:var(--theme-hover,#b9edfa); color:var(--theme-accent,#086f90); box-shadow:inset 0 0 0 1px var(--theme-accent,#138caf); }
.catalog-main-diet { max-width:300px; }
.catalog-more { border:1px solid var(--theme-border,#b9dce8); padding:5px 8px; margin:7px 0; }
.catalog-more summary { cursor:pointer; color:var(--theme-accent,#086f90); font-weight:700; min-height:28px; }
.catalog-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px 8px; }
.catalog-filters label { min-width:0; margin:2px 0; }
.catalog-filters select { min-width:0; }
.cellular-list { max-height:calc(100dvh - 355px); min-height:180px; overflow:auto; display:grid; align-content:start; gap:4px; overscroll-behavior:contain; }
.cellular-list button { display:grid; width:100%; padding:8px 9px; text-align:left; border-left:4px solid var(--cell-color,#55a8c1); background:var(--theme-card,#fff); }
.cellular-list button[aria-selected="true"] { outline:2px solid var(--cell-color,#55a8c1); outline-offset:-2px; background:var(--theme-hover,#eaf8fc); }
.cellular-list button strong { color:var(--theme-accent,#086f90); font-size:12px; }
.cellular-list button em { color:var(--theme-muted,#517787); font-size:10px; }
.cellular-list button small { color:var(--theme-muted,#517787); font-size:9px; }
.cellular-detail { display:flex; flex-direction:column; gap:8px; }
#cellular-back { display:none; align-self:flex-start; }
.catalog-sheet-head { display:flex; align-items:center; gap:12px; }
.catalog-preview { flex:0 0 116px; width:116px; height:116px; border-radius:50%; background:radial-gradient(circle,#eaf7fa,#b7d7e2); }
.catalog-sheet-name { min-width:0; }
.catalog-sheet-name h3 { margin:0 0 2px; color:var(--theme-accent,#086f90); font:400 23px Georgia,serif; }
.catalog-sheet-name em { display:block; color:var(--theme-text,#326d81); font:italic 14px Georgia,serif; }
.catalog-sheet-name small { display:block; margin-top:4px; color:var(--theme-muted,#517787); }
.catalog-stat-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.catalog-stat-grid div { padding:7px; border:1px solid var(--theme-border,#b9dce8); background:var(--theme-control,#edfaff); font:11px/1.3 Arial,sans-serif; }
.catalog-design-details { display:grid; gap:7px; min-width:0; padding:8px 0; }
.catalog-design-details details { min-width:0; border:1px solid var(--theme-border,#b9dce8); background:var(--theme-card,#f8fdff); }
.catalog-design-details summary { cursor:pointer; padding:11px; color:var(--theme-accent,#086f90); font:700 12px Arial,sans-serif; }
.catalog-design-details .catalog-stat-grid { padding:6px; }
.catalog-gene-list { max-height:360px; overflow:auto; padding:6px; }
.catalog-gene-list div { display:flex; justify-content:space-between; gap:12px; padding:6px; border-bottom:1px solid var(--theme-border,#b9dce8); font:11px/1.35 Arial,sans-serif; }
.catalog-gene-list span { text-align:right; }
.catalog-design-details > a { padding:9px; font:700 12px Arial,sans-serif; color:var(--theme-accent,#086f90); }
.catalog-stat-grid b { display:block; color:var(--theme-accent,#086f90); font-size:9px; letter-spacing:.06em; }
.catalog-strategy { margin:6px 0; font:12px/1.4 Arial,sans-serif; color:var(--theme-text,#245b70); }
.catalog-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:auto; }
.catalog-actions label { grid-column:1 / -1; margin:0; }
.catalog-actions button { min-width:0; min-height:38px; }
#cellular-place { grid-column:1 / -1; font-weight:700; }
.cellular-extra { max-height:min(45dvh,400px); overflow:auto; padding:8px; border:1px solid var(--theme-border,#b9dce8); color:var(--theme-text,#245b70); font:11px/1.45 Arial,sans-serif; overflow-wrap:anywhere; }
.cellular-extra[hidden] { display:none; }
.catalog-gene-group { margin:5px 0; border:1px solid var(--theme-border,#b9dce8); padding:5px; }
.catalog-gene-group summary { cursor:pointer; font-weight:700; min-height:27px; }
.catalog-gene-row { padding:5px; border-top:1px solid var(--theme-border,#b9dce8); }
.catalog-gene-row[hidden] { display:none; }
.catalog-gene-row strong,.catalog-gene-row small { display:block; }
@media (max-width:900px) { .cell-picker-card { width:100vw; height:100dvh; max-height:100dvh; padding:10px; } .cellular-catalog { display:block; } .catalog-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .cellular-list { max-height:none; min-height:180px; overflow:visible; } .cellular-detail { display:none; } .cellular-catalog.show-detail .catalog-browse { display:none; } .cellular-catalog.show-detail .cellular-detail { display:flex; } #cellular-back { display:block; } .catalog-sheet-head { align-items:flex-start; } .catalog-preview { flex-basis:96px; width:96px; height:96px; } .catalog-sheet-name h3 { font-size:19px; } .catalog-actions { position:sticky; bottom:0; grid-template-columns:repeat(2,minmax(0,1fr)); padding:6px 0; background:var(--theme-card,#f8fdff); } .catalog-actions button { font-size:11px; overflow-wrap:anywhere; } #cellular-import { grid-column:1 / -1; } }
.specimen-behavior { display:grid; gap:3px; padding:9px 11px; border:1px solid var(--theme-border,#b9dce8); background:var(--theme-card,#f2fbff); color:var(--theme-text,#245b70); font:11px/1.35 Arial,sans-serif; }
.specimen-behavior strong { color:var(--theme-accent,#087e9f); font-size:10px; letter-spacing:.07em; text-transform:uppercase; }
.specimen-optima { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.optimum-card { display:grid; gap:5px; min-width:0; padding:8px 10px; border:1px solid var(--theme-border,#b9dce8); background:var(--theme-card,#f8fdff); color:var(--theme-text,#245b70); }
.optimum-card > div:first-child { display:flex; justify-content:space-between; gap:5px; align-items:baseline; }
.optimum-card small { color:var(--theme-muted,#4b8ca1); font:9px/1.25 Arial,sans-serif; }
.optimum-card strong { color:var(--theme-accent,#087e9f); font:600 12px Arial,sans-serif; }
.optimum-track { position:relative; height:12px; border:1px solid var(--theme-border,#b9dce8); border-radius:7px; background:var(--theme-control,#e4f0f4); }
.optimum-band { position:absolute; top:1px; bottom:1px; left:var(--range-start); width:var(--range-width); border-radius:5px; background:#42ae8b9c; }
.optimum-marker { position:absolute; z-index:1; top:-3px; bottom:-3px; left:var(--current); width:3px; transform:translateX(-50%); border-radius:2px; background:var(--theme-accent,#087e9f); box-shadow:0 0 3px #061c2b; }
.optimum-track.outside-optimum .optimum-marker { background:#ef9862; }
.optimum-track.no-optimum .optimum-band { display:none; }
@media (max-width:420px) { .specimen-optima { grid-template-columns:1fr; } }

/* Full dish view keeps the dish viewport fixed while controls and specimen float above it. */
body.full-dish-view, body.full-dish-view .app { width:100vw; height:100dvh; overflow:hidden; }
body.full-dish-view .app { grid-template-rows:38px minmax(0,1fr); }
body.full-dish-view .topbar, body.full-dish-view .app > footer { display:none; }
body.full-dish-view .app > .instrument-bar { grid-row:1; grid-column:1; z-index:12; width:178px; min-width:0; min-height:38px; height:38px; border-right:0; box-shadow:none; }
body.full-dish-view .instrument-bar .inspector-follow { display:flex; width:100%; max-width:none; gap:2px; padding:2px; }
body.full-dish-view .instrument-bar .inspector-follow button { flex:1 1 0; display:grid; place-items:center; min-width:0; min-height:32px; height:32px; padding:0; font-size:18px; line-height:1; }
body.full-dish-view .instrument-bar .inspector-follow button[hidden] { display:none; }
body.full-dish-view .instrument-bar .inspector-follow .control-label { display:none; }
body.full-dish-view .instrument-bar .inspector-follow #tool-toggle { min-width:0; min-height:32px; font-size:19px; }
body.full-dish-view .app > .top-readout-strip { grid-row:1; grid-column:1; z-index:11; height:38px; min-height:38px; margin-left:178px; padding:0 4px; }
body.full-dish-view .top-readout-strip .field-legend { display:none; }
body.full-dish-view .top-readout-strip .readout { gap:3px; padding:2px 5px; }
body.full-dish-view .top-readout-strip .readout span { font-size:7px; }
body.full-dish-view .top-readout-strip .readout strong { font-size:9px; }
body.full-dish-view .app > main { grid-row:2; grid-column:1; width:100%; height:100%; min-height:0; }
body.full-dish-view main > .side-panel { position:absolute; z-index:20; inset:0 0 0 auto; width:min(390px, 100vw); height:100%; max-height:100%; }
body.full-dish-view .workbench { width:100%; height:100%; min-height:0; padding:0; gap:0; overflow:hidden; }
body.full-dish-view .dish-frame { flex:1 1 auto; width:100%; height:100%; min-height:0; overflow:hidden; }
body.full-dish-view .dish-frame > .dish,
body.full-dish-view .workbench.inspector-collapsed .dish { width:max(100vw, calc(100dvh - 38px)); height:max(100vw, calc(100dvh - 38px)); max-width:none; max-height:none; aspect-ratio:1; justify-self:center; }
body.full-dish-view .specimen-inspector,
body.full-dish-view .specimen-inspector.is-collapsed { position:absolute; z-index:10; right:8px; bottom:8px; width:min(390px, calc(100vw - 16px)); min-height:0; max-height:min(65dvh, 540px); flex:none; box-shadow:0 8px 30px rgba(3,16,31,.35); }
body.full-dish-view .specimen-inspector.is-collapsed { height:42px; }
body.full-dish-view .specimen-inspector[hidden] { display:none; }
body.full-dish-view .inspector-body { overscroll-behavior:contain; }
body.full-dish-view .app > .placement-cue { top:38px; }
@media (max-width:780px) {
 body.full-dish-view .app > .instrument-bar { width:164px; }
 body.full-dish-view .app > .top-readout-strip { margin-left:164px; }
 body.full-dish-view .specimen-inspector,
 body.full-dish-view .specimen-inspector.is-collapsed { right:4px; bottom:4px; width:min(360px, calc(100vw - 8px)); max-height:60dvh; }
}
.perception-panel{position:fixed;z-index:8;right:12px;bottom:68px;width:min(360px,38vw);max-height:min(55vh,430px);overflow:auto;box-sizing:border-box;padding:10px;border:1px solid #5aa3ba;background:rgba(5,27,42,.94);color:#dbf5fb;font:11px/1.35 Arial,sans-serif;box-shadow:0 8px 22px #00182788}
.perception-panel[hidden]{display:none}
body:has(#settings:not([hidden])) .perception-panel{display:none}
.perception-title{display:flex;justify-content:space-between;align-items:center;gap:8px;letter-spacing:.12em;color:#8ee8f8}
.perception-title button{border:1px solid #648da0;background:#123b50;color:#ecfaff;min-width:28px;min-height:24px}
.perception-channels,.perception-cues{display:flex;flex-wrap:wrap;gap:4px 8px;margin:7px 0}
.perception-channels label{white-space:nowrap;cursor:pointer}
.perception-channels input{accent-color:#38b9df}
.perception-layer-filters{margin:7px 0;border:1px solid var(--theme-border,#c9e9f2);padding:5px;background:var(--theme-card,#f0faff)}
.perception-layer-filters summary{cursor:pointer;font-weight:700;padding:4px}
.perception-layer-filters .perception-channels{max-height:35vh;overflow-y:auto;overscroll-behavior:contain}
.perception-cues button{border:1px solid #648da0;background:#123b50;color:#ecfaff;padding:4px 6px;font:inherit;cursor:pointer}
.perception-cues button:focus-visible{outline:2px solid #ffdb77}
.perception-panel p{margin:5px 0}
.perception-status{color:#9dc7d6;font-size:10px}
.perception-detail{color:#ffdf89}
@media(max-width:500px){.perception-panel{left:12px;right:12px;bottom:64px;width:auto;max-height:28vh;padding:7px;font-size:10px}.perception-channels{gap:2px 6px}}
/* Compact dish controls: tracking, fit, playback, performance and tools share one row. */
.instrument-bar .inspector-follow { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 38px 38px 43px 38px minmax(0,1fr); width: min(100%, 625px); }
.instrument-bar .inspector-follow.night-vision-available { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 38px 38px 43px 38px 38px minmax(0,1fr); width: min(100%, 665px); }
.instrument-bar #night-vision[hidden] { display:none; }
.instrument-bar .inspector-follow #hud-fit,
.instrument-bar .inspector-follow #pause,
.instrument-bar .inspector-follow #performance-toggle,
.instrument-bar .inspector-follow #night-vision { font-size: 19px; line-height: 1; }
.instrument-bar .inspector-follow #speed-toggle { font-size: 12px; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.instrument-bar .inspector-follow #performance-toggle[aria-pressed="true"] { background:var(--theme-hover,#c9f3fd); color:var(--theme-accent,#087fa1); box-shadow:inset 0 0 0 1px currentColor; }
.instrument-bar .inspector-follow #night-vision[aria-pressed="true"] { background:#e8f2f1; color:#15282e; box-shadow:inset 0 0 0 1px currentColor; }
body.night-vision #dish-canvas { filter:grayscale(1) invert(1) contrast(1.25) brightness(1.3); }
@media (max-width: 780px) {
  .instrument-bar .inspector-follow { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px 32px 40px 32px minmax(0,1fr); width: 100%; max-width: none; }
  .instrument-bar .inspector-follow.night-vision-available { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 30px 30px 38px 30px 30px minmax(0,1fr); width:100%; max-width:none; }
  .instrument-bar .inspector-follow #hud-fit,
  .instrument-bar .inspector-follow #pause,
  .instrument-bar .inspector-follow #performance-toggle,
  .instrument-bar .inspector-follow #night-vision { font-size: 16px; }
  .instrument-bar .inspector-follow #speed-toggle { font-size: 11px; }
}
body.full-dish-view .app { grid-template-rows: 30px 38px minmax(0,1fr); }
body.full-dish-view .app > .top-readout-strip { grid-row:1; grid-column:1; z-index:11; width:100%; height:30px; min-height:30px; margin-left:0; }
body.full-dish-view .app > .instrument-bar { grid-row:2; grid-column:1; z-index:12; width:100%; min-height:38px; height:38px; }
body.full-dish-view .instrument-bar .inspector-follow { width:100%; }
body.full-dish-view .app > main { grid-row:3; }
/* Icon-only microscope controls; infrared floats below them without shrinking the dish. */
.instrument-bar .inspector-follow,
.instrument-bar .inspector-follow.night-vision-available { grid-template-columns:repeat(7,minmax(0,1fr)); width:min(100%,410px); }
.instrument-bar .inspector-follow #follow,
.instrument-bar .inspector-follow #focus-follow,
.instrument-bar .inspector-follow #tool-toggle { font-size:18px; }
.instrument-bar .inspector-follow #tool-toggle i { font-size:18px; }
.instrument-bar .infrared-row { position:absolute; z-index:8; top:100%; left:0; right:0; display:flex; justify-content:center; padding:4px 8px; pointer-events:none; }
.instrument-bar .infrared-row[hidden] { display:none; }
.instrument-bar .infrared-row button { pointer-events:auto; display:flex; align-items:center; justify-content:center; gap:9px; width:108px; min-height:46px; padding:4px 12px; border:1px solid var(--theme-border,#78c4d6); background:var(--theme-control,#103a4e); color:var(--theme-text,#e7faff); font-size:15px; font-weight:700; letter-spacing:.12em; box-shadow:0 3px 12px #00182755; }
.instrument-bar .infrared-row button[aria-pressed="true"] { background:var(--theme-hover,#c9f3fd); color:var(--theme-accent,#087fa1); box-shadow:inset 0 0 0 1px currentColor; }
.instrument-bar .infrared-row button:focus-visible { outline:2px solid var(--theme-accent,#087fa1); outline-offset:2px; }
@media (max-width:780px) {
 .instrument-bar .inspector-follow,
 .instrument-bar .inspector-follow.night-vision-available { grid-template-columns:repeat(7,minmax(0,1fr)); width:100%; max-width:none; }
 .instrument-bar .infrared-row button { min-height:46px; }
}
body.full-dish-view .instrument-bar .inspector-follow { display:flex; width:100%; }
body.full-dish-view .dish-frame > .dish,
body.full-dish-view .workbench.inspector-collapsed .dish { width:max(100vw, calc(100dvh - 68px)); height:max(100vw, calc(100dvh - 68px)); }
body.full-dish-view .app > .placement-cue { top:68px; }
.chemical-view-control { position:absolute; z-index:7; left:8px; bottom:8px; display:flex; align-items:center; flex-wrap:wrap; gap:3px 6px; max-width:190px; padding:5px 7px; border:1px solid var(--theme-border,#78c4d6); background:var(--theme-surface,#eefaff); color:var(--theme-text,#075774); box-shadow:0 2px 12px #00182733; font:700 9px Arial,sans-serif; letter-spacing:.06em; }
.dish-frame { position:relative; }
.chemical-view-control { left:64px; bottom:8px; }
.chemical-view-control select { flex:1 1 95px; min-width:90px; max-width:115px; height:26px; padding:2px 3px; border:1px solid var(--theme-border,#78c4d6); background:var(--theme-control,#fff); color:var(--theme-text,#075774); font:11px Arial,sans-serif; }
.chemical-view-control output { flex:1 0 100%; font:10px Arial,sans-serif; letter-spacing:0; }
.chemical-view-control { display:grid; width:190px; max-width:calc(100vw - 76px); gap:4px; }
.chemical-view-control > strong { font-size:9px; letter-spacing:.08em; }
.chemical-view-list { display:grid; gap:2px; }
.chemical-view-list label { display:grid; grid-template-columns:16px 13px minmax(0,1fr) auto; align-items:center; gap:5px; min-height:25px; cursor:pointer; font:10px Arial,sans-serif; }
.chemical-view-list input { width:15px; height:15px; margin:0; accent-color:var(--theme-accent,#087fa1); }
.chemical-view-swatch { width:11px; height:11px; border:1px solid var(--theme-border,#78c4d6); border-radius:50%; }
.chemical-view-list b { font-variant-numeric:tabular-nums; }
@media (max-width:780px) { .chemical-view-control { left:58px; bottom:6px; max-width:160px; } }
.chemical-view-control { width:230px; max-width:min(230px,calc(100vw - 68px)); max-height:min(42vh,290px); overflow:auto; }
.ecology-legend-head { display:flex; align-items:center; gap:4px; }
.ecology-legend-head strong { flex:1; white-space:nowrap; }
.ecology-legend-head button,.ecology-layer-row button { border:1px solid var(--theme-border,#78c4d6); background:var(--theme-control,#fff); color:var(--theme-text,#075774); font:700 9px Arial,sans-serif; min-height:22px; padding:2px 4px; cursor:pointer; }
.chemical-view-list .ecology-layer-row { display:grid; grid-template-columns:16px 13px minmax(0,1fr) 20px 34px; align-items:center; gap:4px; min-height:27px; font:10px Arial,sans-serif; }
.chemical-view-list .ecology-layer-row span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chemical-view-swatch.gamete { border-radius:55% 45% 55% 45%; background:var(--layer-color); transform:rotate(-18deg); }
.chemical-view-swatch.gamete::after { content:''; display:block; width:6px; height:1px; background:var(--layer-color); transform:translate(-5px,9px) rotate(32deg); }
.chemical-view-swatch.spore { background:radial-gradient(circle at 35% 30%,#fff9 0 1px,transparent 2px),var(--layer-color); border-style:dotted; }
.ecology-layer-empty { margin:3px 0; font:10px Arial,sans-serif; letter-spacing:0; }
@media (max-width:780px) { .chemical-view-control { width:205px; max-width:calc(100vw - 66px); } }
.chemical-view-control { display:block; width:min(320px,calc(100vw - 76px)); max-width:none; max-height:none; overflow:visible; padding:0; }
.chemical-view-control summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; padding:6px 9px; cursor:pointer; list-style:none; font:700 10px Arial,sans-serif; }
.chemical-view-control summary::-webkit-details-marker { display:none; }
.chemical-view-control summary::before { content:'▴'; color:var(--theme-accent,#087fa1); }
.chemical-view-control[open] summary::before { content:'▾'; }
.chemical-view-control summary span { flex:1; }
.chemical-view-control summary output { flex:none; font:10px Arial,sans-serif; letter-spacing:0; }
.ecology-drawer-body { display:grid; gap:7px; max-height:min(48vh,390px); padding:7px; overflow:auto; border-top:1px solid var(--theme-border,#78c4d6); }
.ecology-map-toggle { display:flex; align-items:center; gap:7px; min-height:29px; padding:4px 6px; border:1px solid var(--theme-border,#78c4d6); color:var(--theme-text,#075774); font:700 11px Arial,sans-serif; cursor:pointer; }
.ecology-map-toggle input { accent-color:var(--theme-accent,#087fa1); }
.ecology-map-toggle small { margin-left:auto; font:10px Arial,sans-serif; opacity:.75; }
body.chemistry-map .dish-frame { background:#10212d; }
body.chemistry-map .workbench { background:#10212d; }
body.chemistry-map .dish { border:0; border-radius:0; box-shadow:none; background:#10212d; }
body.chemistry-map .dish-graticule,body.chemistry-map .dish-crosshair,body.chemistry-map .dish-label { display:none; }
body.chemistry-map .dish-frame .scope-lever { text-shadow:none; }
body.chemistry-map .dish-frame .scope-lever .meter-label,body.chemistry-map .dish-frame .scope-lever .lever-scale,body.chemistry-map .dish-frame .scope-lever output,body.chemistry-map .dish-frame .scope-lever small { color:#b8e7f2; }
.ecology-point-inspector{position:absolute;z-index:8;top:10px;right:12px;width:min(330px,calc(100% - 24px));max-height:min(48vh,360px,calc(100% - 18px));display:grid;gap:5px;padding:8px;border:1px solid #80c9d2;background:rgba(9,30,42,.94);color:#e7f9f7;box-shadow:0 5px 24px #0008;font:11px/1.35 Arial,sans-serif;overflow:auto}
.ecology-point-inspector[hidden]{display:none}
.ecology-point-head{display:flex;align-items:center;justify-content:space-between;gap:8px;letter-spacing:.08em}
.ecology-point-head button{min-width:27px;min-height:27px;border:1px solid #80c9d2;background:#193b4b;color:#fff;font-size:18px;cursor:pointer}
.ecology-point-inspector p{margin:0;color:#aedce1}
.ecology-point-list{min-height:0;overflow:auto;display:grid;gap:4px}
.ecology-point-row{display:grid;gap:2px;padding:5px 7px;border-left:3px solid var(--point-color);background:#ffffff12}
.ecology-point-row small,.ecology-point-inspector>small{color:#bad7df;font-size:10px;letter-spacing:0}
@media(max-width:600px){.ecology-point-inspector{top:8px;right:8px;width:min(300px,calc(100% - 16px));max-height:min(38vh,280px,calc(100% - 16px))}}
.ecology-drawer-filters { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ecology-drawer-filters label { display:grid; gap:3px; font:700 9px Arial,sans-serif; }
.ecology-drawer-filters input,.ecology-drawer-filters select { box-sizing:border-box; width:100%; min-width:0; height:27px; padding:3px 5px; border:1px solid var(--theme-border,#78c4d6); background:var(--theme-control,#fff); color:var(--theme-text,#075774); font:11px Arial,sans-serif; }
.ecology-contrast { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px; font:700 9px Arial,sans-serif; }
.ecology-contrast input { width:100%; min-width:0; accent-color:var(--theme-accent,#087fa1); }
.ecology-contrast output { font:10px Arial,sans-serif; letter-spacing:0; }
.chemical-view-list { max-height:230px; overflow:auto; }
.chemical-view-list .ecology-layer-row { grid-template-columns:16px 13px minmax(0,1fr) 22px 38px; min-height:32px; }
.ecology-layer-row[hidden],.ecology-layer-empty[hidden] { display:none; }
.ecology-layer-help { margin:0; font:10px/1.35 Arial,sans-serif; letter-spacing:0; }
.ecology-propagule-tools { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; font:11px/1.35 Arial,sans-serif; }
.ecology-propagule-tools button,.ecology-propagule-tools select { min-width:0; color:var(--theme-text,#075c75); background:var(--theme-control,#eefaff); border:1px solid var(--theme-border,#78c4d6); padding:5px; }
.ecology-propagule-tools label,.ecology-propagule-tools p { grid-column:1/-1; margin:0; }
.ecology-propagule-tools label { display:grid; gap:3px; }
.ecology-propagule-tools p { overflow-wrap:anywhere; }
@media (max-width:780px) { .chemical-view-control { left:58px; bottom:6px; width:min(300px,calc(100vw - 72px)); } .ecology-drawer-body { max-height:43dvh; } }
body.settings-open #settings { position:fixed; inset:0 0 0 auto; width:min(390px,100vw); max-width:100vw; height:100dvh; max-height:100dvh; z-index:25; }
#chemical-preset-list { margin-top:6px; }
.archive .catalog-preset-list button { height:auto; min-height:78px; letter-spacing:normal; }
/* Perception instruments sit in viewport space so an oversized dish and inspector cannot clip them. */
body > .perception-controls { position:fixed; z-index:31; right:12px; bottom:58px; display:flex; gap:4px; pointer-events:auto; }
body > .perception-panel { position:fixed; z-index:30; right:12px; bottom:96px; left:auto; width:min(360px,calc(100vw - 24px)); max-height:min(55dvh,calc(100dvh - 180px)); overflow:auto; }
.top-actions .settings-shortcut i { font-size:17px; }
.top-actions #top-perception-toggle { font-size:17px; }
.top-actions #top-perception-toggle[aria-pressed="true"] { background:var(--theme-hover,#cef5ff); color:var(--theme-accent,#087fa1); box-shadow:inset 0 0 0 1px currentColor; }
.top-actions #top-perception-toggle:disabled { opacity:.45; cursor:default; }
body.full-dish-view .instrument-bar .inspector-follow .compact-shortcut { font-size:16px; }
/* Compact nutrient supply row between the dish status and controls. */
.app { grid-template-rows:auto auto auto auto minmax(0,1fr) auto; }
.app > .nutrient-status-bar { grid-row:3; }
.app > .instrument-bar { grid-row:4; }
.app > main { grid-row:5; }
.app > footer { grid-row:6; }
.nutrient-status-bar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:7px; min-height:37px; padding:3px 10px; border-bottom:1px solid var(--theme-border,#b4e2f0); background:var(--theme-control,#f2fbff); color:var(--theme-text,#086d8b); font:11px Arial,sans-serif; }
.nutrient-status-reading { min-width:0; display:grid; grid-template-columns:auto auto minmax(35px,1fr); gap:6px; align-items:center; }
.nutrient-status-reading span { font-size:9px; letter-spacing:.08em; }
.nutrient-status-reading strong { min-width:35px; font-variant-numeric:tabular-nums; }
.nutrient-status-meter { height:8px; overflow:hidden; border:1px solid var(--theme-border,#93cddd); background:rgba(0,60,80,.16); }
.nutrient-status-meter i { display:block; height:100%; background:linear-gradient(90deg,#14a8ca,#42c596); }
.nutrient-status-meter.overloaded i { background:#e4a24b; }
.nutrient-status-bar button { min-height:29px; padding:2px 8px; border:1px solid var(--theme-border,#93cddd); background:var(--theme-control,#fff); color:var(--theme-text,#086d8b); font:700 10px Arial,sans-serif; white-space:nowrap; }
.nutrient-status-bar button[aria-pressed="true"] { background:var(--theme-hover,#c9f3fd); }
body.full-dish-view .app { grid-template-rows:30px 31px 38px minmax(0,1fr); }
body.full-dish-view .app > .nutrient-status-bar { grid-row:2; grid-column:1; z-index:11; min-height:31px; }
body.full-dish-view .app > .instrument-bar { grid-row:3; }
body.full-dish-view .app > main { grid-row:4; }
@media (max-width:780px) { .app { grid-template-rows:48px auto auto auto minmax(0,1fr); } .nutrient-status-bar { gap:4px; padding:2px 5px; } .nutrient-status-bar button { padding:2px 5px; } }
@media (max-width:500px) { .topbar { padding-inline:8px; } .top-actions { gap:4px; } .top-actions .icon-button { width:31px; height:31px; } body.full-dish-view .instrument-bar .inspector-follow { gap:1px; } body.full-dish-view .instrument-bar .inspector-follow .compact-shortcut { font-size:14px; } }
@media (max-width:400px) { .brand { gap:5px; font-size:10px; letter-spacing:.14em; white-space:nowrap; } .brand-mark { font-size:27px; } .brand small { display:none; } .top-actions { gap:3px; flex:none; } .top-actions .icon-button { width:28px; height:30px; font-size:18px; } .top-actions .settings-shortcut i,.top-actions #top-perception-toggle { font-size:15px; } }
body.full-dish-view .perception-display:not(.is-maximized) { bottom:78px; }
body:has(#perception-display[hidden]) > .perception-controls,
body:has(#settings:not([hidden])) > .perception-controls { display:none; }
@media (max-width:500px) {
 body.full-dish-view .perception-display:not(.is-maximized) { bottom:72px; }
 body > .perception-controls { right:8px; bottom:54px; }
 body > .perception-panel { right:8px; bottom:90px; width:calc(100vw - 16px); max-height:min(48dvh,calc(100dvh - 166px)); }
}

/* Dense specimen dashboard: values stay legible while gauges take half a tile. */
.inspector-detail { gap:4px; padding:7px 9px; }
.inspector-identity { gap:3px; }
.inspector-name { gap:6px; }
.specimen-avatar { flex-basis:30px; width:30px; height:30px; font-size:19px; }
.inspector-name strong { font-size:19px; }
.inspector-name span:not(.specimen-avatar), #specimen-status { font-size:10px; line-height:1.25; }
.specimen-activity { gap:2px 6px; padding:4px 6px; font-size:10px; }
.specimen-activity span + span::before { margin-right:6px; }
.specimen-behavior { gap:2px; padding:5px 7px; font-size:10px; }
.specimen-optima { gap:4px; }
.optimum-card { grid-template-columns:minmax(0,1fr) minmax(0,45%); gap:2px 5px; padding:4px 6px; align-items:center; }
.optimum-card > div:first-child { display:grid; gap:1px; min-width:0; }
.optimum-card > .optimum-track { grid-column:2; grid-row:1 / span 2; width:100%; height:8px; }
.optimum-card > small { grid-column:1; font-size:8px; line-height:1.15; overflow-wrap:anywhere; }
.optimum-card strong { font-size:11px; }
.inspector-stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
.inspector-stats > div { min-height:42px; padding:4px 5px; gap:4px; }
.inspector-stats .stat-icon { flex-basis:17px; font-size:16px; }
.inspector-stats > div > span:last-child { flex:1; gap:2px; }
.inspector-stats small { font-size:8px; letter-spacing:.03em; }
.inspector-stats strong { font-size:10px; line-height:1.15; }
.inspector-stats > .energy-stat { grid-column:span 1; }
.energy-stat > span:last-child { display:grid!important; grid-template-columns:minmax(0,1fr) minmax(0,45%); align-items:center; gap:1px 4px!important; }
.energy-stat small,.energy-stat strong { grid-column:1; }
.energy-stat .battery-shell { grid-column:2; grid-row:1 / span 2; width:100%; height:10px; padding:1px; border-width:1px; }
.energy-stat .battery-shell::after { right:-4px; top:2px; width:3px; height:4px; }
.metabolic-board { padding:5px 6px; }
.metabolic-legend { margin:3px 0; gap:3px; }
.metabolic-legend button { min-height:24px; padding:2px 5px; font-size:10px; }
#metabolic-graph { height:100px; }
.metabolic-reading { min-height:0; font-size:10px; }
.metabolic-board > small { font-size:9px; }
.specimen-readiness summary,.specimen-deep summary { padding:5px 7px; }
.specimen-meters,.specimen-perception { padding:6px; gap:5px; }
.specimen-readiness #specimen-vacuole-row:not([hidden]) { display:grid; }
.breed-meters { gap:5px; }
.meter-row { grid-template-columns:minmax(0,1fr) minmax(0,45%); align-items:center; gap:5px; }
.meter-row > div:first-child { display:grid; gap:1px; min-width:0; }
.meter-row > .meter-track { width:100%; height:7px; }
.meter-row span,.meter-row strong { font-size:9px; line-height:1.15; white-space:normal; overflow-wrap:anywhere; }
.bio-identity,.bio-meters { gap:4px; }
.bio-identity > div,.bio-meter { min-height:38px; padding:4px 5px; gap:4px; }
.bio-identity b,.bio-meter > b { flex-basis:16px; font-size:16px; }
.bio-identity div > span,.bio-meter > span { gap:1px; }
.bio-meter > span { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,45%); align-items:center; gap:1px 4px; }
.bio-meter small,.bio-meter strong { grid-column:1; line-height:1.15; }
.bio-meter small,.bio-identity small { font-size:8px; letter-spacing:.03em; }
.bio-meter strong,.bio-identity strong { font-size:10px; }
.bio-meter .meter-track { grid-column:2; grid-row:1 / span 2; height:7px; }
.bio-signal-note { font-size:10px; }
.chemical-specimen { display:grid; gap:5px; min-width:0; padding:6px; border:1px solid var(--theme-border,#b9dce7); background:var(--theme-card,#f4fbfd); color:var(--theme-text,#164f61); }
.chemical-specimen > strong { font-size:10px; letter-spacing:.12em; }
.chemical-specimen-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.chemical-specimen-grid > div { display:grid; align-content:start; gap:2px; min-width:0; padding:5px; border:1px solid var(--theme-border,#b9dce7); }
.chemical-specimen small { color:var(--theme-muted,#56899c); font-size:9px; line-height:1.25; }
.chemical-specimen-grid strong { font-size:10px; line-height:1.25; overflow-wrap:anywhere; }
.chemical-dashboard{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.chemical-dashboard section{min-width:0;padding:5px;border:1px solid var(--theme-border,#b9dce7)}
.chemical-dashboard h4{margin:0 0 5px;font-size:10px;letter-spacing:.08em}
.chemical-dashboard h4 small{display:block;margin-top:2px;font-weight:normal;letter-spacing:0}
.chemical-meter-list{display:grid;gap:5px;font-size:10px}
.chemical-meter-row{display:grid;gap:2px;min-width:0}
.chemical-meter-label{display:flex;justify-content:space-between;gap:5px;min-width:0}
.chemical-meter-label b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chemical-meter-label small{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chemical-meter-track{height:5px;background:var(--theme-border,#b9dce7);border-radius:4px;overflow:hidden}
.chemical-meter-track>span{display:block;height:100%;background:var(--theme-accent,#25aec4);border-radius:inherit}
.chemical-meter-row[data-reaction="approach"],.chemical-meter-row[data-reaction="gather"]{background:rgba(43,178,121,.16);border-left:3px solid #2bb279;padding-left:4px}
.chemical-meter-row[data-reaction="avoid"]{background:rgba(229,105,96,.18);border-left:3px solid #e56960;padding-left:4px}
.chemical-meter-row[data-reaction="approach"] .chemical-meter-track>span,.chemical-meter-row[data-reaction="gather"] .chemical-meter-track>span{background:#2bb279}
.chemical-meter-row[data-reaction="avoid"] .chemical-meter-track>span{background:#e56960}
@media(max-width:520px){.chemical-dashboard{grid-template-columns:1fr}}
body > .bottom-info-drawer{position:fixed;z-index:31;left:50%;right:auto;top:auto;bottom:6px;transform:translateX(-50%);width:min(560px,calc(100vw - 16px));max-height:min(56dvh,480px);display:grid;grid-template-rows:42px minmax(0,1fr);gap:0;padding:0;overflow:hidden;border:1px solid #6cb3c5;background:rgba(8,31,44,.96);color:#e6f8fb;box-shadow:0 8px 30px #00182788}
body:has(#specimen-inspector:not([hidden])) > .bottom-info-drawer{bottom:48px}
body > .bottom-info-drawer[hidden]{display:none}
body:has(#settings:not([hidden])) > .bottom-info-drawer{display:none}
body > .bottom-info-drawer.is-collapsed{height:42px;grid-template-rows:42px}
.bottom-drawer-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:42px;padding:6px 12px;border:0;border-bottom:1px solid #6cb3c5;background:#1a4658;color:#efffff;text-align:left;cursor:pointer}
.bottom-drawer-toggle span{flex:none;font:700 9px Arial,sans-serif;letter-spacing:.12em}
.bottom-drawer-toggle strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 12px Arial,sans-serif}
.bottom-drawer-toggle i{font:normal 20px Arial,sans-serif}
.bottom-info-drawer.is-collapsed .bottom-drawer-toggle{border-bottom:0}
.bottom-info-drawer.is-collapsed .bottom-drawer-toggle i{transform:rotate(180deg)}
.bottom-info-drawer.is-collapsed .bottom-drawer-body{display:none}
.bottom-drawer-body{min-height:0;overflow:auto;padding:8px}
body > .ecology-point-inspector .ecology-point-list{max-height:30dvh}
body > .perception-panel .perception-channels{margin-top:6px}
@media(max-width:600px){body > .bottom-info-drawer{left:8px;right:8px;bottom:6px;transform:none;width:auto;max-height:min(52dvh,390px)}body:has(#specimen-inspector:not([hidden])) > .bottom-info-drawer{bottom:48px}}
.crispr-drawer{position:fixed;z-index:42;inset:var(--crispr-top,220px) 0 0;width:min(100%,1000px);height:calc(100dvh - var(--crispr-top,220px));max-height:none;margin:0 auto;display:grid;grid-template-rows:42px minmax(0,1fr);background:var(--theme-surface,#f5fcff);color:var(--theme-text,#174961);border:1px solid var(--theme-border,#8bc5d6);box-shadow:0 -8px 35px #061e3559;overflow:hidden}
.crispr-drawer[hidden]{display:none}.crispr-drawer.is-collapsed{top:auto;bottom:0;height:42px;grid-template-rows:42px}.crispr-drawer .inspector-toggle{height:42px}.crispr-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 16px max(24px,env(safe-area-inset-bottom));font:12px/1.4 Arial,sans-serif}.crispr-body[hidden]{display:none}.crispr-tools,.crispr-actions{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:10px 0}.crispr-tools label{flex:1 1 180px}.crispr-tools input{width:100%;min-height:36px}.crispr-tools button,.crispr-actions button,.crispr-gene button{min-height:36px;background:var(--theme-control,#e5f7fb);color:var(--theme-text,#174961);border:1px solid var(--theme-border,#8bc5d6);cursor:pointer}.crispr-category{border:1px solid var(--theme-border,#8bc5d6);margin:8px 0}.crispr-category>summary{padding:10px;font-weight:700;cursor:pointer;background:var(--theme-control,#e5f7fb)}.crispr-gene{display:grid;grid-template-columns:minmax(110px,1fr) minmax(110px,2fr) 82px 38px;gap:4px 8px;align-items:center;padding:8px;border-top:1px solid var(--theme-border,#8bc5d6)}.crispr-gene label{font-weight:700}.crispr-gene small{grid-column:1/-1}.crispr-gene input[type=range]{width:100%;accent-color:var(--theme-accent,#12a9c6)}.crispr-gene input[type=number]{width:100%;min-height:36px;background:var(--theme-surface,#fff);color:var(--theme-text,#174961);border:1px solid var(--theme-border,#8bc5d6)}.crispr-gene details{grid-column:1/-1}.crispr-gene.edited{box-shadow:inset 3px 0 var(--theme-accent,#12a9c6)}#crispr-error{color:#bf4437;font-weight:700}#crispr-dirty{color:#ffcf7d}body:has(.crispr-drawer:not([hidden])) .specimen-inspector{z-index:2}body:has(.crispr-drawer:not([hidden]))>.bottom-info-drawer{display:none}
@media(max-width:600px){.crispr-drawer{width:100%}.crispr-body{padding:9px 10px max(20px,env(safe-area-inset-bottom))}.crispr-gene{grid-template-columns:minmax(0,1fr) 75px 38px}.crispr-gene label{grid-column:1/-1}.crispr-gene input[type=range]{grid-column:1}.crispr-gene input[type=number]{grid-column:2}}
@media(prefers-reduced-motion:reduce){.crispr-drawer{transition:none!important}}
.crispr-actions{position:sticky;bottom:0;z-index:1;padding:5px;background:var(--theme-surface,#f5fcff);border-top:1px solid var(--theme-border,#8bc5d6)}
/* The three contextual instruments share one bottom stack. Only the opened
   instrument grows; the other visible headers remain reachable below it. */
#context-drawer-stack{position:fixed;z-index:42;left:50%;bottom:0;transform:translateX(-50%);width:min(100vw,1000px);max-height:calc(100dvh - var(--drawer-stack-top,0px));display:flex;flex-direction:column;pointer-events:none}
#context-drawer-stack[hidden]{display:none}#context-drawer-stack.has-expanded{height:calc(100dvh - var(--drawer-stack-top,0px))}
body:has(#settings:not([hidden])) #context-drawer-stack,body:has(#welcome-modal:not([hidden])) #context-drawer-stack{display:none}
#context-drawer-stack>.specimen-inspector,#context-drawer-stack>.ecology-point-inspector,#context-drawer-stack>.crispr-drawer,body.full-dish-view #context-drawer-stack>.specimen-inspector{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:none;max-height:none;margin:0;min-height:0;height:42px;flex:0 0 42px;display:grid;grid-template-rows:42px minmax(0,1fr);padding:0;overflow:hidden;pointer-events:auto}
#context-drawer-stack>.specimen-inspector[hidden],#context-drawer-stack>.ecology-point-inspector[hidden],#context-drawer-stack>.crispr-drawer[hidden]{display:none}
#context-drawer-stack>.specimen-inspector:not(.is-collapsed),#context-drawer-stack>.ecology-point-inspector:not(.is-collapsed),#context-drawer-stack>.crispr-drawer:not(.is-collapsed),body.full-dish-view #context-drawer-stack>.specimen-inspector:not(.is-collapsed){height:auto;flex:1 1 auto;min-height:0;max-height:none}
#context-drawer-stack>.specimen-inspector.is-collapsed,#context-drawer-stack>.ecology-point-inspector.is-collapsed,#context-drawer-stack>.crispr-drawer.is-collapsed,body.full-dish-view #context-drawer-stack>.specimen-inspector.is-collapsed{height:42px;min-height:42px;max-height:42px;flex:0 0 42px}
#context-drawer-stack>.specimen-inspector .inspector-body,#context-drawer-stack>.ecology-point-inspector .bottom-drawer-body,#context-drawer-stack>.crispr-drawer .crispr-body{min-height:0;overflow-y:auto;overscroll-behavior:contain}
#context-drawer-stack>.ecology-point-inspector{background:rgba(9,30,42,.97);color:#e7f9f7}
#context-drawer-stack .ecology-point-row>summary{cursor:pointer;font-weight:700}
#context-drawer-stack .ecology-point-row>small{display:block;margin:4px 0}
#context-drawer-stack .ecology-point-row>small:nth-of-type(n+2){padding-left:8px;border-left:1px solid #6b9eac}
#context-drawer-stack .ecology-point-row:not([open])>small:nth-of-type(n+2){display:none}
body:has(#context-drawer-stack:not([hidden])) .chemical-view-control{bottom:50px}
@media(max-width:600px){#context-drawer-stack{width:100vw;left:0;transform:none}}
@media (max-width:780px) {
 .inspector-detail { padding:6px; gap:4px; }
 .inspector-stats,.bio-identity,.bio-meters,.breed-meters { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
 .inspector-stats > div { min-height:40px; padding:4px; }
 .inspector-stats > .energy-stat { grid-column:span 1; }
 .specimen-optima { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .meter-heading { flex-direction:row; align-items:baseline; }
 .bio-identity > div,.bio-meter { padding:4px; gap:3px; }
}

/* Perception is a local instrument until expanded over the world-aligned dish. */
.perception-display { position:absolute; z-index:7; right:max(72px, calc(50% - 50vw + 72px)); bottom:22px; width:168px; height:168px; border:1px solid #5aa3ba; border-radius:50%; background:transparent; box-shadow:none; pointer-events:none; }
.perception-display[hidden] { display:none; }
.perception-display[data-layout="overview"]:not(.is-maximized):not(.is-medallion-zoomed) { width:158px; height:158px; }
.perception-display[data-layout="balanced"]:not(.is-maximized):not(.is-medallion-zoomed) { width:200px; height:200px; }
.perception-display[data-layout="monochrome"]:not(.is-maximized):not(.is-medallion-zoomed) { width:200px; height:200px; }
.perception-display[data-layout="monochrome"] { border-color:#f4f4f4; }
.perception-display[data-layout="monochrome"] #perception-canvas { filter:grayscale(1) contrast(1.65); }
.perception-display[data-layout="compact"]:not(.is-maximized):not(.is-medallion-zoomed) { width:158px; height:158px; }
#perception-canvas { display:block; width:100%; height:100%; border-radius:inherit; pointer-events:auto; touch-action:manipulation; cursor:zoom-in; }
.perception-controls { position:absolute; z-index:2; right:0; bottom:0; display:flex; gap:3px; pointer-events:auto; }
.perception-controls button { width:30px; height:30px; padding:0; border:1px solid #78c4d6; background:#103a4e; color:#e7faff; font:19px/1 Arial,sans-serif; cursor:pointer; }
.perception-controls button:focus-visible { outline:2px solid #ffdf89; outline-offset:2px; }
.perception-display.is-maximized { inset:0; width:100%; height:100%; border:0; border-radius:0; background:transparent; box-shadow:none; }
.perception-display.is-medallion-zoomed { position:fixed; left:50vw; top:50dvh; right:auto; bottom:auto; width:min(calc(100vw - 16px),calc(100dvh - 16px)); height:min(calc(100vw - 16px),calc(100dvh - 16px)); transform:translate(-50%,-50%); pointer-events:auto; z-index:100; }
body.full-dish-view .perception-display.is-medallion-zoomed { bottom:auto; }
.perception-display.is-medallion-zoomed #perception-canvas { cursor:zoom-out; }
.perception-display.is-maximized #perception-canvas { border-radius:0; opacity:var(--perception-opacity,.7); pointer-events:none; cursor:default; }
.perception-display.is-maximized .perception-controls { right:max(72px, calc(50% - 50vw + 72px)); bottom:22px; }
.perception-panel { position:absolute; z-index:7; right:12px; bottom:174px; width:min(360px,calc(100% - 24px)); max-height:min(55%,430px); }
.perception-panel[hidden] { display:none; }
.perception-display.is-maximized + .perception-panel { bottom:50px; }
.perception-chem-track{height:5px;border-radius:5px;background:#476676;overflow:hidden}
.perception-chem-track i{display:block;height:100%;width:0;background:#8edcf5;border-radius:inherit}
@media (max-width:500px) {
 .perception-display { width:148px; height:148px; right:max(56px, calc(50% - 50vw + 56px)); bottom:78px; }
 .perception-display[data-layout="overview"]:not(.is-maximized):not(.is-medallion-zoomed) { width:146px; height:146px; }
 .perception-display[data-layout="balanced"]:not(.is-maximized):not(.is-medallion-zoomed) { width:196px; height:196px; }
 .perception-display[data-layout="monochrome"]:not(.is-maximized):not(.is-medallion-zoomed) { width:196px; height:196px; }
 .perception-display[data-layout="compact"]:not(.is-maximized):not(.is-medallion-zoomed) { width:150px; height:150px; }
 body.full-dish-view .perception-display:not(.is-maximized):not(.is-medallion-zoomed) { bottom:100px; }
 .perception-controls button { width:27px; height:27px; font-size:17px; }
 .perception-display.is-maximized .perception-controls { right:max(56px, calc(50% - 50vw + 56px)); bottom:22px; }
 .perception-panel { left:auto; right:8px; bottom:132px; width:min(320px,calc(100% - 16px)); max-height:38%; }
 .perception-display.is-maximized + .perception-panel { bottom:42px; }
 .perception-display.is-medallion-zoomed + .perception-panel { bottom:64px; }
}
.music-medallion[hidden]{display:none!important}
.music-medallion{position:fixed;right:12px;bottom:12px;width:min(270px,calc(100vw - 16px));height:300px;z-index:90;border:1px solid rgba(127,207,208,.65);border-radius:10px;background:rgba(5,17,23,.92);box-shadow:0 12px 35px rgba(0,0,0,.34);overflow:hidden}
.music-medallion__grip{height:29px;padding:5px 10px;display:flex;justify-content:space-between;align-items:center;color:#b8eeee;background:#102931;font:700 10px/1.2 Arial,sans-serif;letter-spacing:.12em;cursor:grab;touch-action:none;user-select:none}
.music-medallion__grip:active{cursor:grabbing}
.music-medallion__grip button{flex:none;width:25px;height:23px;border:1px solid #48727b;background:#183b43;color:#c6f5ef;font:700 16px/1 Arial,sans-serif;cursor:pointer;touch-action:manipulation}
.music-medallion.is-docked{height:35px;box-shadow:0 4px 20px rgba(0,0,0,.4)}
.music-medallion.is-docked .music-medallion__grip{justify-content:flex-start;cursor:default}
.music-medallion.is-docked .music-medallion__grip>span{display:none}
.music-medallion.is-docked iframe{visibility:hidden;pointer-events:none}
.music-medallion iframe{display:block;width:100%;height:calc(100% - 29px);border:0;background:transparent}
body.settings-open .music-medallion,body:has(#welcome-modal:not([hidden])) .music-medallion,body:has(#cell-picker:not([hidden])) .music-medallion{visibility:hidden;pointer-events:none}

/* Inline soundtrack sits in document flow beneath the header. */
.app{grid-template-rows:auto auto auto auto auto minmax(0,1fr) auto}
.app>.topbar{grid-row:1}
.app>.music-strip{grid-row:2}
.app>.top-readout-strip{grid-row:3}
.app>.nutrient-status-bar{grid-row:4}
.app>.instrument-bar{grid-row:5}
.app>main{grid-row:6}
.app>footer{grid-row:7}
.music-strip[hidden]{display:none!important}
.music-strip{position:relative;z-index:5;width:100%;height:58px;min-height:58px;overflow:hidden;background:#10252d;border-bottom:1px solid var(--theme-border,#78c4d6)}
.music-strip iframe{display:block;width:100%;height:100%;border:0;background:#10252d}
body.full-dish-view .music-strip{display:none}
body.full-dish-view .app{grid-template-rows:30px 31px 38px minmax(0,1fr)}
body.full-dish-view .app>.top-readout-strip{grid-row:1}
body.full-dish-view .app>.nutrient-status-bar{grid-row:2}
body.full-dish-view .app>.instrument-bar{grid-row:3}
body.full-dish-view .app>main{grid-row:4}
@media(max-width:780px){.app{grid-template-rows:48px auto auto auto auto minmax(0,1fr)}.music-strip{height:54px;min-height:54px}}
/* One contextual drawer surface and one persistent row of available tabs. */
#context-drawer-stack{height:44px;max-height:none;display:flex;flex-direction:column;overflow:hidden;background:var(--theme-surface,#eefaff);border:1px solid var(--theme-border,#78c4d6);pointer-events:auto}
#context-drawer-stack.has-expanded{height:min(35dvh,calc(100dvh - var(--drawer-stack-top,0px)))}
#context-drawer-stack.has-expanded.is-full{height:calc(100dvh - var(--drawer-stack-top,0px))}
#context-drawer-nav{order:2;display:flex;flex:0 0 43px;min-height:43px;width:100%;background:var(--theme-surface,#eefaff);border-top:1px solid var(--theme-border,#78c4d6);overflow-x:auto;scrollbar-width:thin}
#context-drawer-nav button{flex:1 0 auto;min-width:0;min-height:42px;padding:4px 9px;border:0;border-right:1px solid var(--theme-border,#78c4d6);background:var(--theme-control,#e5f7fb);color:var(--theme-text,#174961);font:700 11px Arial,sans-serif;cursor:pointer}
#context-drawer-nav button[hidden]{display:none}#context-drawer-nav button.is-active{background:var(--theme-accent,#168aa6);color:#fff}
#context-drawer-stack>:is(.specimen-inspector,.ecology-point-inspector,.perception-panel,.crispr-drawer),#context-drawer-stack>#ecology-drawer,body.full-dish-view #context-drawer-stack>.specimen-inspector{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none;order:1;width:100%;max-width:none;max-height:none;height:auto;flex:1 1 auto;min-height:0;margin:0;padding:0;overflow:hidden;box-shadow:none;border:0;display:none;grid-template-rows:minmax(0,1fr);background:var(--theme-surface,#eefaff);color:var(--theme-text,#174961)}
#context-drawer-stack>:is(.specimen-inspector,.ecology-point-inspector,.perception-panel,.crispr-drawer,#ecology-drawer)[hidden]{display:none}
#context-drawer-stack>.specimen-inspector:not(.is-collapsed),#context-drawer-stack>.ecology-point-inspector:not(.is-collapsed),#context-drawer-stack>.perception-panel:not(.is-collapsed),#context-drawer-stack>.crispr-drawer:not(.is-collapsed),#context-drawer-stack>#ecology-drawer[open],body.full-dish-view #context-drawer-stack>.specimen-inspector:not(.is-collapsed){display:grid;flex:1 1 auto;height:auto;min-height:0}
#context-drawer-stack :is(#inspector-toggle,#ecology-point-toggle,#perception-drawer-toggle,#crispr-toggle),#context-drawer-stack>#ecology-drawer>summary{display:none}
#context-drawer-stack :is(.inspector-body,.bottom-drawer-body,.crispr-body,.ecology-drawer-body){min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain}
#context-drawer-stack>.perception-panel .bottom-drawer-body{background:rgba(8,31,44,.97);color:#e6f8fb}
#context-drawer-stack>#ecology-drawer{font:11px Arial,sans-serif}
#context-drawer-stack>#ecology-drawer .ecology-drawer-body{display:grid}
@media(max-width:600px){#context-drawer-nav button{padding:4px 6px;font-size:10px}}
.crispr-growth,.crispr-rules{display:block;margin:8px 0;padding:9px;border:1px solid var(--theme-border,#8bc5d6);background:var(--theme-card,#eaf8fb)}
.crispr-growth button{min-height:38px;width:100%;border:1px solid var(--theme-border,#8bc5d6);background:var(--theme-control,#d7f5fb);color:var(--theme-text,#174961);font:700 11px Arial,sans-serif;cursor:pointer}
.crispr-growth button:disabled{opacity:.55;cursor:default}.crispr-growth small{display:block;margin-top:5px}.crispr-growth p{margin:5px 0 0}.crispr-rules summary{cursor:pointer;font-weight:700}
.app{grid-template-rows:auto auto auto auto auto auto minmax(0,1fr) auto}
.app>.selected-cell-bar{grid-row:5}.app>.instrument-bar{grid-row:6}.app>main{grid-row:7}.app>footer{grid-row:8}
.selected-cell-bar[hidden]{display:none}
.selected-cell-bar{display:flex;align-items:center;gap:8px;min-width:0;min-height:32px;padding:3px 9px;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--theme-border,#a9dce9);background:var(--theme-surface,#effaff);color:var(--theme-text,#174961);font:11px Arial,sans-serif}
.selected-cell-bar>strong{flex:0 1 auto;min-width:0;max-width:24%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-accent,#087495);font-size:12px}
.selected-cell-bar>span:not(.selected-cell-senses){flex:0 0 auto;white-space:nowrap}
#selected-cell-action{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.selected-cell-senses{display:flex;flex:0 0 auto;gap:3px;margin-left:auto}
.selected-cell-senses span{display:grid;place-items:center;width:19px;height:19px;border:1px solid var(--theme-border,#a9dce9);border-radius:50%;opacity:.35;font-size:12px}
.selected-cell-senses span.is-registered{opacity:1;color:var(--theme-accent,#087495);background:var(--theme-control,#dcf5fa)}
body.full-dish-view .app{grid-template-rows:30px 31px auto 38px minmax(0,1fr)}
body.full-dish-view .app>.selected-cell-bar{grid-row:3}body.full-dish-view .app>.instrument-bar{grid-row:4}body.full-dish-view .app>main{grid-row:5}
@media(max-width:780px){.app{grid-template-rows:48px auto auto auto auto auto minmax(0,1fr)}.selected-cell-bar{gap:5px;padding:3px 6px;font-size:10px}.selected-cell-bar>strong{max-width:27%;font-size:11px}.selected-cell-senses{gap:2px}.selected-cell-senses span{width:17px;height:17px}}
@media(max-width:430px){.selected-cell-bar{flex-wrap:wrap;min-height:43px;gap:1px 6px}.selected-cell-bar>strong{max-width:42%}#selected-cell-action{order:2;flex-basis:100%;white-space:nowrap}.selected-cell-senses span{width:16px;height:16px}}
/* Header switches keep the optional bars in normal flow, so the map gains their space. */
.app{grid-template-rows:auto auto auto auto auto auto auto auto minmax(0,1fr) auto}
.app>.topbar{grid-row:1}.app>.action-shortcuts{grid-row:2}.app>.music-strip{grid-row:3}.app>.top-readout-strip{grid-row:4}.app>.nutrient-status-bar{grid-row:5}.app>.selected-cell-bar{grid-row:6}.app>.instrument-bar{grid-row:7}.app>.dish-tools{grid-row:8}.app>main{grid-row:9}.app>footer{grid-row:10}
.topbar{gap:8px;min-width:0;padding-inline:10px}
.top-section-switches{display:flex;justify-content:flex-end;gap:4px;min-width:0}
.top-section-switches button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:68px;min-height:42px;padding:3px 5px;border:1px solid var(--theme-border,#add9e6);background:var(--theme-control,#f4fcff);color:var(--theme-text,#174961);cursor:pointer;font:700 8px Arial,sans-serif;letter-spacing:.04em;white-space:nowrap}
.top-section-switches button i{font-size:15px}.top-section-switches button[aria-pressed=true]{color:var(--theme-accent,#0788aa);box-shadow:inset 0 -3px var(--theme-accent,#0788aa)}
.action-shortcuts{display:flex;align-items:center;justify-content:flex-end;min-height:40px;padding:3px 10px;box-sizing:border-box;border-bottom:1px solid var(--theme-border,#add9e6);background:var(--theme-surface,#f4fcff)}
.action-shortcuts .top-actions{gap:5px}.action-shortcuts .icon-button{width:31px;height:31px}.action-shortcuts .live-indicator{margin-right:auto}
.app>.dish-tools{position:relative;inset:auto;display:block;width:100%;min-width:0;padding:4px 8px;border-bottom:1px solid var(--theme-border,#add9e6);background:var(--theme-surface,#f4fcff);box-shadow:none;z-index:5}
.app>.dish-tools:has(.tool-menu[hidden]),.app>.dish-tools.top-section-closed{display:none}
.app>.dish-tools .tool-menu{position:static;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;width:100%;padding:0;border:0;background:transparent;box-shadow:none}
.app>.dish-tools .tool-menu[hidden]{display:none}.app>.dish-tools .tool-menu button{min-width:0;min-height:34px;justify-content:center;text-align:center}
.music-strip.top-section-closed,.nutrient-status-bar.top-section-closed,.top-readout-strip.top-section-closed,.instrument-bar.top-section-closed,body.hide-top-info .selected-cell-bar{display:none!important}
body[data-light-phase] :is(.action-shortcuts,.top-section-switches button,.app>.dish-tools){background:var(--theme-surface);color:var(--theme-text);border-color:var(--theme-border)}
body[data-light-phase] .top-section-switches button[aria-pressed="false"]{opacity:.78;box-shadow:none}
body[data-light-phase] .top-section-switches button[aria-pressed="true"]{opacity:1;background:var(--theme-hover);color:var(--theme-accent);border:2px solid var(--theme-accent);box-shadow:inset 0 -4px var(--theme-accent),0 0 10px color-mix(in srgb,var(--theme-accent) 28%,transparent)}
body[data-light-phase] .top-section-switches button:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}
body.full-dish-view .action-shortcuts,body.full-dish-view .topbar{display:none}
body.full-dish-view .app{grid-template-rows:auto auto auto auto auto minmax(0,1fr)}
body.full-dish-view .app>.top-readout-strip{grid-row:1}body.full-dish-view .app>.nutrient-status-bar{grid-row:2}body.full-dish-view .app>.selected-cell-bar{grid-row:3}body.full-dish-view .app>.instrument-bar{grid-row:4}body.full-dish-view .app>.dish-tools{grid-row:5}body.full-dish-view .app>main{grid-row:6}
body.full-dish-view .instrument-bar.top-section-closed{display:grid!important}
body.full-dish-view .app>.instrument-bar{grid-template-columns:minmax(0,1fr)}
body.full-dish-view .instrument-bar .inspector-follow{width:100%;max-width:none}
@media(max-width:780px){.app{grid-template-rows:auto auto auto auto auto auto auto auto minmax(0,1fr)}.topbar{height:44px}.topbar .brand{font-size:10px;letter-spacing:.12em;gap:4px}.topbar .brand-mark{font-size:25px}.topbar .brand small{display:none}.top-section-switches{flex:1;gap:2px}.top-section-switches button{flex:1 1 0;min-width:0;min-height:36px;padding:2px;font-size:7px}.top-section-switches button i{font-size:13px}.action-shortcuts{min-height:36px;padding:2px 6px}.action-shortcuts .live-indicator{display:none}.app>.dish-tools .tool-menu button{flex-direction:column;gap:1px;padding:2px 1px;font-size:8px}}
@media(max-width:390px){.topbar{padding-inline:5px}.topbar .brand>span:last-child{display:none}.top-section-switches button{font-size:6px}.top-section-switches button i{font-size:12px}}
.action-shortcuts.top-section-closed{display:none!important}
.top-section-switches button{flex:1 1 0;min-width:0}
.app>:is(.action-shortcuts,.top-readout-strip,.nutrient-status-bar,.instrument-bar,.dish-tools):not(.top-section-closed){box-sizing:border-box;min-height:44px;padding:4px 8px;border-bottom:1px solid var(--theme-border,#add9e6);background:var(--theme-surface,#f4fcff)}
.action-shortcuts .top-actions{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;width:100%}
.action-shortcuts .live-indicator{display:none}
.action-shortcuts .icon-button{width:100%;height:36px;min-width:0;box-sizing:border-box}
.instrument-bar .inspector-follow,.instrument-bar .inspector-follow.night-vision-available{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;width:100%;max-width:none;padding:0}
.instrument-bar .inspector-follow>button:not([hidden]){min-width:0;min-height:36px;height:36px}
.app>.dish-tools .tool-menu button{min-height:36px}
.nutrient-status-bar button{min-height:36px}
.top-readout-strip{min-width:0;min-height:44px;align-items:center}
.top-readout-strip .readout{padding-block:4px}
body.full-dish-view .instrument-bar .inspector-follow{display:flex;gap:2px;padding:2px}
@media(max-width:780px){.topbar{gap:4px}.top-section-switches{gap:2px}.top-section-switches button{min-height:36px;font-size:6px;letter-spacing:0}.top-section-switches button i{font-size:13px}.app>:is(.action-shortcuts,.top-readout-strip,.nutrient-status-bar,.instrument-bar,.dish-tools):not(.top-section-closed){min-height:42px;padding:3px 4px}.action-shortcuts .top-actions,.instrument-bar .inspector-follow{gap:3px}.action-shortcuts .icon-button,.instrument-bar .inspector-follow>button:not([hidden]){height:35px;min-height:35px}}
@media(max-width:390px){.topbar .brand-mark{font-size:23px}.top-section-switches button{font-size:5.5px}.top-section-switches button i{font-size:12px}}
/* Camera controls stay together; running and display actions form the row below. */
.action-shortcuts .top-actions{grid-template-columns:repeat(5,minmax(0,1fr))}
.instrument-bar .inspector-follow,.instrument-bar .inspector-follow.night-vision-available{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;align-items:stretch;width:100%;max-width:none;padding:0}
.map-control-group,.run-control-group{display:grid;gap:5px;min-width:0}
.map-control-group{grid-template-columns:repeat(3,minmax(0,1fr))}
.run-control-group{grid-template-columns:repeat(7,minmax(0,1fr));padding-top:4px;border-top:1px solid var(--theme-border,#add9e6)}
.run-control-group:has(#night-vision:not([hidden])){grid-template-columns:repeat(8,minmax(0,1fr))}
.instrument-bar .inspector-follow :is(.map-control-group,.run-control-group)>button{display:grid;place-items:center;width:100%;min-width:0;min-height:36px;height:36px;box-sizing:border-box;padding:2px 4px;border:1px solid var(--theme-border,#add9e6);background:var(--theme-control,#fff);color:var(--theme-text,#174961);font-size:17px;cursor:pointer}
.instrument-bar .inspector-follow .run-control-group>button:disabled{opacity:.45;cursor:default}
.instrument-bar .run-control-group #night-vision[hidden]{display:none}
.instrument-bar .run-control-group #night-vision:not([hidden]){display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;font-weight:700}
.instrument-bar .run-control-group #night-vision[aria-pressed="true"]{background:var(--theme-hover,#c9f3fd);color:var(--theme-accent,#087fa1);box-shadow:inset 0 0 0 1px currentColor}
.instrument-bar .run-control-group #chem-map-toggle{display:grid;place-items:center;font-size:17px}
.instrument-bar .run-control-group #chem-map-toggle[aria-pressed="true"]{background:var(--theme-hover,#c9f3fd);color:var(--theme-accent,#087fa1);box-shadow:inset 0 0 0 1px currentColor}
@media(max-width:430px){.instrument-bar .run-control-group #night-vision{gap:2px;font-size:9px}}
.instrument-bar .inspector-follow .run-control-group #speed-toggle{font-size:12px}
.instrument-bar .inspector-follow .run-control-group :is(#dish-fullscreen,#settings-toggle){font-size:19px}
.instrument-bar .inspector-follow .run-control-group :is(#dish-fullscreen,#settings-toggle):hover{background:var(--theme-hover,#cef5ff)}
body.full-dish-view .instrument-bar .inspector-follow{display:flex;gap:2px}
body.full-dish-view :is(.map-control-group,.run-control-group){display:contents}
body.full-dish-view .run-control-group :is(#dish-fullscreen,#settings-toggle){display:none}
/* A half-open drawer owns the bottom of the viewport. The map reflows into
   the available space, while full-height inspection remains an overlay. */
body:has(#context-drawer-stack.has-expanded:not(.is-full)) .app>main{margin-bottom:35dvh}
body:has(#context-drawer-stack.has-expanded:not(.is-full)) .workbench.inspector-collapsed .dish,
body.full-dish-view:has(#context-drawer-stack.has-expanded:not(.is-full)) .dish-frame>.dish{width:100cqw;height:100cqw;max-width:none;max-height:none}
/* Glass belongs to the drawer shell. Cards, controls and meters retain their
   solid theme surfaces so labels remain legible over the dish. */
body[data-light-phase="day"]{--drawer-glass:rgba(245,252,255,.72)}
body[data-light-phase="dawn"]{--drawer-glass:rgba(255,239,225,.74)}
body[data-light-phase="dusk"]{--drawer-glass:rgba(46,37,58,.74)}
body[data-light-phase="night"]{--drawer-glass:rgba(9,32,49,.74)}
#context-drawer-stack{background:var(--drawer-glass,rgba(245,252,255,.72));-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15)}
#context-drawer-stack>:is(.specimen-inspector,.ecology-point-inspector,.perception-panel,.crispr-drawer),
#context-drawer-stack>#ecology-drawer,
body.full-dish-view #context-drawer-stack>.specimen-inspector,
#context-drawer-stack>.perception-panel .bottom-drawer-body{background:transparent}
#context-drawer-nav{background:var(--drawer-glass,rgba(245,252,255,.72))}
/* Ecology and Perception use the same compact sheet language as Specimen. */
#context-drawer-stack :is(.ecology-drawer-body,#perception-drawer-body){box-sizing:border-box;min-width:0;padding:9px;gap:7px;color:var(--theme-text,#174961);font:11px/1.35 Arial,sans-serif}
#context-drawer-stack #perception-drawer-body{background:transparent}
#context-drawer-stack .drawer-sheet-heading,
#context-drawer-stack .perception-title{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:9px;border:1px solid var(--theme-border,#c9e9f2);background:var(--theme-card,#f0faff);color:var(--theme-text,#174961);letter-spacing:normal}
#context-drawer-stack .drawer-sheet-heading small{font:700 9px Arial,sans-serif;letter-spacing:.12em;color:var(--theme-muted,#6393a5)}
#context-drawer-stack .drawer-sheet-heading strong{font:400 19px Georgia,serif;color:var(--theme-accent,#087fa1)}
#context-drawer-stack .drawer-sheet-heading span{font-size:10px;color:var(--theme-muted,#6393a5)}
#context-drawer-stack button.drawer-sheet-heading{width:100%;text-align:left;cursor:pointer}
#context-drawer-stack .perception-title{position:relative;padding-right:44px}
#context-drawer-stack .perception-title strong{font:400 19px Georgia,serif;letter-spacing:0;color:var(--theme-accent,#087fa1)}
#context-drawer-stack .perception-title::after{content:'Sensed input, memory and chosen action';font:10px Arial,sans-serif;color:var(--theme-muted,#6393a5)}
#context-drawer-stack .perception-title button{position:absolute;right:8px;top:8px;min-width:30px;min-height:30px;border:1px solid var(--theme-border,#c9e9f2);background:var(--theme-control,#fff);color:var(--theme-text,#174961)}
#context-drawer-stack :is(.ecology-map-toggle,.ecology-drawer-filters,.ecology-contrast,.ecology-legend-head,.chemical-view-list,.ecology-propagule-tools,.ecology-layer-help,.perception-channels,.perception-cues,.perception-detail,.perception-status,#perception-trace,#perception-chemical-status){min-width:0;margin:0;padding:7px;border:1px solid var(--theme-border,#c9e9f2);background:var(--theme-card,#f0faff);color:var(--theme-text,#174961)}
#context-drawer-stack .ecology-drawer-body{grid-template-columns:repeat(2,minmax(0,1fr));align-content:start}
#context-drawer-stack .ecology-drawer-body>:is(.drawer-sheet-heading,.ecology-map-toggle,.ecology-drawer-filters,.ecology-legend-head,.chemical-view-list,.ecology-propagule-tools,.ecology-layer-help){grid-column:1/-1}
#context-drawer-stack .ecology-drawer-filters{gap:6px}
#context-drawer-stack .ecology-drawer-filters label:first-child{grid-column:1/-1}
#context-drawer-stack .ecology-drawer-filters :is(input,select){min-height:34px}
#context-drawer-stack .ecology-contrast{grid-template-columns:minmax(0,1fr) auto;gap:3px 6px}
#context-drawer-stack .ecology-contrast input{grid-column:1/-1;grid-row:2}
#context-drawer-stack .ecology-contrast output{grid-column:2;grid-row:1}
#context-drawer-stack .chemical-view-list{max-height:none;overflow:visible;gap:3px}
#context-drawer-stack .chemical-view-list .ecology-layer-row{padding:4px 5px;border:1px solid var(--theme-border,#c9e9f2);background:var(--theme-control,#fff)}
#context-drawer-stack .ecology-legend-head button,
#context-drawer-stack .ecology-layer-row button{min-height:30px}
#context-drawer-stack .perception-channels{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:4px}
#context-drawer-stack .perception-channels label{display:flex;align-items:center;gap:4px;min-height:30px;padding:3px 5px;border:1px solid var(--theme-border,#c9e9f2);background:var(--theme-control,#fff);white-space:normal}
#context-drawer-stack .perception-channels input{accent-color:var(--theme-accent,#087fa1)}
#context-drawer-stack .perception-cues button{min-height:30px;border:1px solid var(--theme-border,#c9e9f2);background:var(--theme-control,#fff);color:var(--theme-text,#174961)}
#context-drawer-stack #perception-drawer-body>small{display:block;padding:7px;color:var(--theme-muted,#6393a5);font-size:10px}
@media(max-width:500px){#context-drawer-stack :is(.ecology-drawer-body,#perception-drawer-body){padding:6px;gap:5px}#context-drawer-stack .ecology-drawer-body{grid-template-columns:minmax(0,1fr)}#context-drawer-stack .ecology-contrast{grid-column:1}}
/* The settings panel uses the same framed controls and light-phase palette as the top rows. */
#settings.side-panel{width:min(480px,100vw);background:var(--theme-surface,#f4fcff);color:var(--theme-text,#174961);border-color:var(--theme-border,#add9e6)}
body.settings-open #settings.side-panel{width:min(480px,100vw)}
#settings .panel-head{align-items:center;min-height:58px;padding:8px 12px;border-bottom:1px solid var(--theme-border,#add9e6);background:var(--theme-surface,#f4fcff)}
#settings .panel-head small{font:700 9px Arial,sans-serif;letter-spacing:.13em;color:var(--theme-muted,#6393a5)}
#settings .panel-head h1{margin:2px 0 0;font:700 18px Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--theme-accent,#087fa1)}
#settings #settings-close{width:36px;height:36px;flex:0 0 36px;font-size:25px}
#settings .panel-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px;overflow:visible;border-color:var(--theme-border,#add9e6);background:var(--theme-surface,#f4fcff)}
#settings .panel-tabs button{min-width:0;min-height:36px;padding:4px 2px;box-sizing:border-box;border:1px solid var(--theme-border,#add9e6);background:var(--theme-control,#fff);color:var(--theme-text,#174961);font:700 9px Arial,sans-serif;letter-spacing:.03em}
#settings .panel-tabs button[aria-selected=true]{background:var(--theme-hover,#cef5ff);color:var(--theme-accent,#087fa1);box-shadow:inset 0 -3px var(--theme-accent,#087fa1)}
#settings .panel-scroll{padding:12px;scrollbar-color:var(--theme-border,#add9e6) transparent}
#settings .settings-preset-shortcuts{gap:5px;padding:6px;border-color:var(--theme-border,#add9e6);background:var(--theme-surface,#f4fcff)}
#settings .settings-preset-shortcuts[hidden]{display:none}
#settings .settings-preset-shortcuts button{min-height:34px;border-color:var(--theme-border,#add9e6);background:var(--theme-control,#fff);color:var(--theme-text,#174961)}
#settings :is(.switch-row,.control-row){margin-bottom:8px;padding:10px;border:1px solid var(--theme-border,#add9e6);background:var(--theme-card,#fff);color:var(--theme-text,#174961)}
#settings .switch-row small{line-height:1.35;color:var(--theme-muted,#6393a5)}
@media(max-width:780px){.map-control-group,.run-control-group{gap:3px}.instrument-bar .inspector-follow :is(.map-control-group,.run-control-group)>button{min-height:35px;height:35px}#settings.side-panel{width:100vw}#settings .panel-tabs{gap:3px;padding:4px}#settings .panel-tabs button{font-size:8px;min-height:34px}}
/* Full dish view keeps controls below phone camera cutouts and gives each
   control a normal-size touch target across two rows. */
body.full-dish-view .app{grid-template-rows:auto auto auto auto auto auto minmax(0,1fr)}
body.full-dish-view .app>.topbar{display:flex;grid-row:1;justify-content:center;min-height:calc(44px + env(safe-area-inset-top));height:auto;box-sizing:border-box;padding:env(safe-area-inset-top) 8px 0}
body.full-dish-view .topbar .brand{display:flex;align-items:center;gap:5px}
body.full-dish-view .topbar .brand>span:last-child{display:inline}
body.full-dish-view .topbar .brand small,body.full-dish-view .topbar .top-section-switches{display:none}
body.full-dish-view .app>.top-readout-strip{grid-row:2}
body.full-dish-view .app>.nutrient-status-bar{grid-row:3}
body.full-dish-view .app>.selected-cell-bar{grid-row:4}
body.full-dish-view .app>.instrument-bar{grid-row:5;min-height:0;height:auto}
body.full-dish-view .app>.dish-tools{grid-row:6}
body.full-dish-view .app>main{grid-row:7}
body.full-dish-view .instrument-bar .inspector-follow,
body.full-dish-view .instrument-bar .inspector-follow.night-vision-available{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;width:100%;padding:0}
body.full-dish-view :is(.map-control-group,.run-control-group){display:contents}
body.full-dish-view .instrument-bar .inspector-follow button:not([hidden]){width:100%;min-width:0;min-height:38px;height:38px;box-sizing:border-box;padding:2px;font-size:17px}
body.full-dish-view .instrument-bar .inspector-follow button[hidden]{display:none}
body.full-dish-view .instrument-bar .inspector-follow .compact-shortcut{font-size:16px}
/* Keep controls usable even before the module moves them into groups. */
@media(max-width:780px){
 .instrument-bar .inspector-follow:not(:has(.map-control-group)){grid-template-columns:repeat(6,minmax(0,1fr));gap:3px}
 .instrument-bar .inspector-follow:not(:has(.map-control-group))>button:not([hidden]){min-width:0;min-height:36px;height:36px}
 .dish-frame{width:100%;min-width:0;overflow:hidden}
 .workbench .dish-frame>.dish,.workbench.inspector-collapsed .dish-frame>.dish{width:100cqw;height:100cqw;min-width:100cqw;max-width:none;max-height:none}
}
body.full-dish-view .run-control-group :is(#dish-fullscreen,#settings-toggle){display:none}
@media(max-width:430px){body.full-dish-view .instrument-bar .inspector-follow,
body.full-dish-view .instrument-bar .inspector-follow.night-vision-available{gap:3px}}
/* The Ecology sheet is one scroll surface. Intrinsic grid rows keep controls
   from compressing into an unscrollable viewport when the layer list grows. */
#context-drawer-stack>#ecology-drawer{align-items:stretch}
#context-drawer-stack>#ecology-drawer .ecology-drawer-body{height:auto;min-height:0;max-height:100%;align-self:stretch;grid-auto-rows:max-content;align-content:start;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
/* The ecology sheet is one scroll surface. Grid's implicit rows previously
   grew beyond the drawer and placed its first controls above the scroll origin. */
#context-drawer-stack>#ecology-drawer[open]{display:block;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
#context-drawer-stack>#ecology-drawer .ecology-drawer-body{display:block;height:auto;min-height:0;max-height:none;overflow:visible}
#context-drawer-stack>#ecology-drawer .ecology-drawer-body>*{margin-bottom:7px}
.ecology-view-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.ecology-view-buttons button{min-width:0;min-height:38px;padding:5px 3px;border:1px solid var(--theme-border,#78c4d6);background:var(--theme-control,#fff);color:var(--theme-text,#075774);font:700 10px Arial,sans-serif;cursor:pointer}
.ecology-view-buttons button[aria-pressed="true"]{background:var(--theme-accent,#087fa1);color:#fff}
.ecology-view-buttons output{display:inline-block;min-width:1.5em;margin-left:3px}
/* The square world canvas covers the entire available viewport between the
   active top bars and the bottom edge or an expanded drawer. Crop its excess
   along the longer axis instead of shrinking it to the shorter axis. */
.app>main .workbench{padding:0;min-height:0}
.app>main .dish-frame{width:100%;height:100%;min-height:0;min-width:0;overflow:hidden;container-type:size}
.app>main .workbench .dish-frame>.dish,
body.full-dish-view .app>main .workbench.inspector-collapsed .dish-frame>.dish{width:max(100cqw,100cqh);height:max(100cqw,100cqh);min-width:0;max-width:none;max-height:none;aspect-ratio:1;justify-self:center;align-self:center}
.app>main .dish-frame>.dish{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.portable-record{min-width:0}.portable-record textarea{display:block;box-sizing:border-box;width:100%;max-width:100%;min-height:7rem;margin:.4rem 0;padding:.7rem;resize:vertical;font:12px/1.45 ui-monospace,monospace;background:#f8fcff;color:#173f51;border:1px solid #9cc6d3}.portable-record .portable-preview{box-sizing:border-box;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;max-height:12rem;overflow:auto;padding:.7rem;background:#e8f5fa;color:#17435a}.portable-scopes{display:flex;flex-wrap:wrap;gap:.6rem;margin:.6rem 0}.portable-scopes label{display:inline-flex;align-items:center;gap:.25rem}

/* Foundation Trial entry sits between navigation and the microscope. */
.app{grid-template-rows:repeat(8,auto) minmax(0,1fr) auto}
.foundation-trials{min-width:0;padding:5px 10px 7px;border-bottom:1px solid var(--theme-border,#a8d8e4);background:var(--theme-surface,#ecf9fd);color:var(--theme-text,#17546c)}
.foundation-trials-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.foundation-trials-head h2{font:700 12px/1.2 Arial,sans-serif;letter-spacing:.14em;margin:0}.foundation-trials-head p{font:11px/1.3 Arial,sans-serif;margin:3px 0;color:var(--theme-muted,#527b8a)}
.foundation-actions{display:flex;gap:5px;align-items:center}.foundation-actions a{font:700 10px Arial,sans-serif;color:var(--theme-text,#135a72);padding:8px;text-decoration:none;border:1px solid var(--theme-border,#89c7d8);white-space:nowrap}.lab-readonly{position:fixed;z-index:1000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 24px));padding:18px;display:grid;gap:8px;background:#eafaff;color:#17475b;border:2px solid #087fa1;box-shadow:0 0 0 100vmax #09263d88}.lab-readonly[hidden]{display:none}.lab-readonly a{color:#076a8b;font-weight:800}
.foundation-trials-head button,.foundation-trial-actions button{min-height:34px;padding:5px 10px;border:1px solid var(--theme-border,#89c7d8);background:var(--theme-control,#fff);color:var(--theme-text,#135a72);font-weight:700}.foundation-trials-head button[aria-expanded=true],.foundation-trial-actions #foundation-trial-create{background:var(--theme-accent,#087fa1);color:#fff}
.foundation-trial-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:5px;min-width:0}.foundation-trial-cards button{min-width:0;min-height:48px;text-align:left;padding:5px 7px;border:1px solid var(--theme-border,#8ac5d5);background:var(--theme-control,#fff);color:var(--theme-text,#135a72);overflow-wrap:anywhere}.foundation-trial-cards button strong{display:block;font:700 11px/1.2 Arial,sans-serif}.foundation-trial-cards button small{display:block;margin-top:3px;font:9px/1.2 Arial,sans-serif;opacity:.75}.foundation-trial-cards:not(.is-expanded) button:not(.is-featured){display:none}.foundation-trial-cards.is-expanded{grid-template-columns:repeat(4,minmax(0,1fr));max-height:min(34dvh,290px);overflow-y:auto;overscroll-behavior:contain}
.foundation-trial-preview{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 28px);overflow-y:auto;margin:auto;padding:20px;border:1px solid var(--theme-border,#8ac5d5);background:var(--theme-surface,#f5fcff);color:var(--theme-text,#17546c);box-shadow:0 12px 48px #092e4780}.foundation-trial-preview::backdrop{background:#061f32b8}.foundation-trial-preview h2{margin:6px 0;font-size:20px}.foundation-trial-preview p,.foundation-trial-preview #foundation-trial-disclosure{font:13px/1.45 Arial,sans-serif}.foundation-trial-preview #foundation-trial-disclosure{padding:10px;background:var(--theme-control,#e7f5fa);white-space:pre-line}.foundation-trial-preview label{display:block;margin:10px 0;font-size:12px;font-weight:700}.foundation-trial-preview select{display:block;width:100%;min-height:40px;margin-top:4px}.foundation-trial-close{float:right;min-width:36px;min-height:36px;border:1px solid var(--theme-border,#8ac5d5);background:var(--theme-control,#fff);color:inherit}.foundation-trial-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.foundation-trial-preview a{color:var(--theme-accent,#087fa1);font-weight:700}.foundation-trial-preview #foundation-trial-status{min-height:1.2em}
.foundation-trial-preview label[hidden]{display:none}
body.full-dish-view .foundation-trials{display:none}
@media(max-width:780px){.app{grid-template-rows:repeat(8,auto) minmax(0,1fr) auto}.foundation-trials{padding:4px 6px}.foundation-trials-head p{display:none}.foundation-actions a,.foundation-actions button{font-size:9px;padding:5px}.foundation-trial-cards{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(145px,48vw);grid-template-columns:none;overflow-x:auto;overscroll-behavior-inline:contain}.foundation-trial-cards.is-expanded{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(31dvh,240px);overflow:auto}.foundation-trial-cards button{min-height:43px}.foundation-trials-head h2{font-size:11px}.foundation-trials-head button{min-height:30px;font-size:10px}}
@media(prefers-reduced-motion:reduce){.foundation-trial-cards{scroll-behavior:auto}}
/* Foundation Trials live in the scrollable Presets panel, not a dish top bar. */
.app{grid-template-rows:repeat(8,auto) minmax(0,1fr) auto}
body.full-dish-view #panel-presets .foundation-trials{display:block}
#panel-presets .foundation-trials{padding:12px;margin:10px 0;border:1px solid var(--theme-border,#a8d8e4)}
#panel-presets .foundation-actions{margin:9px 0 0;flex-wrap:wrap}
#panel-presets .foundation-trial-cards,#panel-presets .foundation-trial-cards.is-expanded{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none;overflow:visible}
@media(max-width:780px){.app{grid-template-rows:repeat(8,auto) minmax(0,1fr) auto}#panel-presets .foundation-trials{padding:10px}#panel-presets .foundation-trials-head p{display:block}#panel-presets .foundation-trial-cards,#panel-presets .foundation-trial-cards.is-expanded{display:grid;grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}#panel-presets .foundation-actions a,#panel-presets .foundation-actions button{font-size:10px;min-height:36px}}
.catalog-top-filters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:7px 0; }
.catalog-top-filters label { min-width:0; margin:0; font-size:11px; font-weight:700; }
.catalog-top-filters select { width:100%; min-width:0; }
.catalog-guide-link { display:inline-flex; align-items:center; min-height:36px; padding:6px 10px; margin:4px; border:1px solid var(--theme-border,#b9dce8); color:var(--theme-accent,#086f90); background:var(--theme-card,#fff); font:700 11px Arial,sans-serif; text-decoration:none; }
.catalog-card-badges { color:#805528; font:700 10px/1.4 Arial,sans-serif; }
.catalog-role-badge { display:inline-block; margin-top:7px; padding:4px 7px; background:#d3edf1; color:#175668; font:700 10px Arial,sans-serif; text-transform:uppercase; letter-spacing:.05em; }
.catalog-pitch { margin:6px 0; color:var(--theme-text,#245b70); font:15px/1.4 Georgia,serif; }
.catalog-life { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.catalog-life>div { padding:7px; border:1px solid var(--theme-border,#b9dce8); font:11px/1.35 Arial,sans-serif; }
.catalog-life b { display:block; font-size:9px; letter-spacing:.06em; color:var(--theme-accent,#086f90); }
.catalog-traits { display:grid; gap:6px; padding:10px; border:1px solid #91bac5; background:linear-gradient(130deg,#edf9f8,#faf4e5); color:#174454; }
.catalog-traits h4 { margin:0; font:700 14px Georgia,serif; letter-spacing:.06em; }
.catalog-traits>p { margin:0 0 3px; font:11px/1.4 Arial,sans-serif; }
.catalog-meter { display:grid; gap:2px; font:11px Arial,sans-serif; }
.catalog-meter-title { display:flex; justify-content:space-between; gap:8px; }
.catalog-meter-title span { font-variant-numeric:tabular-nums; }
.catalog-meter-track { height:9px; border:1px solid #8fb1b5; background:#fdfdf7; }
.catalog-meter-track i { display:block; height:100%; background:linear-gradient(90deg,#1b8493,#50c3aa); }
.catalog-meter small { color:#4c6970; font-size:10px; }
@media(max-width:520px){.catalog-top-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }.catalog-life { grid-template-columns:1fr; }}

.catalog-technical { border:1px solid var(--theme-border,#b9dce8); background:var(--theme-card,#fff); }
.catalog-technical summary { cursor:pointer; padding:10px; color:var(--theme-accent,#086f90); font:700 12px Arial,sans-serif; }
.catalog-technical .catalog-stat-grid { padding:6px; }