:root{
  --bg:#04070c;
  --panel:#0a1119;
  --panel2:#0e1a26;
  --line:#1b2c3a;
  --ink:#d6e6f2;
  --ink-dim:#7d97ab;
  --accent:#2ff5d0;        /* electric cyan-mint */
  --accent2:#6f8dff;       /* ultraviolet blue */
  --accent-hot:#ff4fd8;    /* hot magenta */
  --warn:#ff8a5c;          /* ember orange */
  --radius:9px;
  /* reusable gradient surfaces */
  --grad-panel:linear-gradient(160deg,#0e1a27,#091019);
  --grad-panel-hi:linear-gradient(160deg,#14273a,#0c1725);
  --glow-accent:0 0 0 1px rgba(47,245,208,.5) inset, 0 0 12px rgba(47,245,208,.28);
  font-size:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Flexbox layout: side panels transition their own width reliably (grid track
   transitions are flaky with a 1fr track in Chromium). */
#app{
  display:flex;
  height:100vh;
  gap:1px;
  background:var(--line);
  /* Custom arrow everywhere outside the dish surface. */
  cursor:url('../public/cursors/Cursor_Arrow_sm.png') 4 4, default;
}
/* Interactive chrome used to replace the custom arrow with the operating
   system's pointer hand. Keep one consistent arrow across menus, buttons,
   labels and sliders. Only the dish deliberately overrides it farther below
   for its living tool cursor. */
#app *{cursor:inherit}
#left{width:260px;flex:0 0 auto}
#right{width:300px;flex:0 0 auto}
#center{flex:1 1 auto;min-width:0}
/* Collapse by sliding with a negative margin (width stays fixed) so the panel
   content translates as one solid tray instead of reflowing every frame. */
#app.left-collapsed #left{margin-left:-260px}
#app.right-collapsed #right{margin-right:-300px}

/* fullscreen: dish fills the viewport, panels float over it as glass overlays */
#app.fullscreen #left, #app.fullscreen #right{
  position:absolute;top:0;bottom:0;z-index:12;
  background:linear-gradient(180deg,rgba(11,20,32,.84),rgba(7,13,21,.86));
  backdrop-filter:blur(13px);
}
#app.fullscreen #left{left:0;box-shadow:10px 0 34px rgba(0,0,0,.45)}
#app.fullscreen #right{right:0;box-shadow:-10px 0 34px rgba(0,0,0,.45)}

.panel{
  background:linear-gradient(180deg,#0b1420,#080f18);
  overflow-x:hidden;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  padding:14px;
  gap:16px;
  min-width:0;
  transition:margin .28s ease;
}
/* Minimal, theme-matched scrollbars — nothing when content fits, and a rounded
   inset pill that only reveals on hover when the pane actually overflows. */
.panel, .scroll, .sl-body{ scrollbar-width:thin; scrollbar-color:transparent transparent; }
.panel:hover, .scroll:hover, .sl-body:hover{ scrollbar-color:#22384a transparent; }
.panel::-webkit-scrollbar,
.scroll::-webkit-scrollbar,
.sl-body::-webkit-scrollbar{ width:10px; height:10px; }
.panel::-webkit-scrollbar-track,
.scroll::-webkit-scrollbar-track,
.sl-body::-webkit-scrollbar-track{ background:transparent; }
.panel::-webkit-scrollbar-thumb,
.scroll::-webkit-scrollbar-thumb,
.sl-body::-webkit-scrollbar-thumb{
  background:transparent;              /* hidden until the pane is hovered */
  border-radius:999px;
  border:3px solid transparent;       /* inset padding around the pill */
  background-clip:padding-box;
}
.panel:hover::-webkit-scrollbar-thumb,
.scroll:hover::-webkit-scrollbar-thumb,
.sl-body:hover::-webkit-scrollbar-thumb{
  background:#22384a; background-clip:padding-box;
}
.panel::-webkit-scrollbar-thumb:hover,
.scroll::-webkit-scrollbar-thumb:hover,
.sl-body::-webkit-scrollbar-thumb:hover{
  background:#31536b; background-clip:padding-box;   /* brighter on direct grab */
}

/* ---- brand ---- */
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.brand-logo{width:100%;max-width:220px;height:auto;display:block;
  filter:drop-shadow(0 1px 5px rgba(0,0,0,.5)) drop-shadow(0 0 9px rgba(95,211,196,.18))}
.brand .tag{font-size:11px;color:var(--ink-dim);letter-spacing:1.5px;margin-left:3px}

section h2{
  font-size:11px;text-transform:uppercase;letter-spacing:1.5px;
  color:var(--accent);margin-bottom:9px;font-weight:600;
}

/* ---- tools ---- */
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.tool{
  background:linear-gradient(155deg,#13202e,#0b1522);border:1px solid var(--line);color:var(--ink);
  border-radius:11px;padding:11px 6px 9px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  font-size:20px;line-height:1;transition:.14s;
}
.tool-ico{width:34px;height:34px;object-fit:contain;display:block}
.tool span{font-size:10.5px;color:var(--ink-dim);letter-spacing:.5px;font-weight:500}
.tool:hover{border-color:var(--accent2);transform:translateY(-1px);
  background:linear-gradient(155deg,#18293a,#0e1a28);box-shadow:0 4px 13px rgba(0,0,0,.4)}
.tool:active{transform:translateY(0)}
.tool.active{border-color:var(--accent);background:linear-gradient(155deg,#123c35,#0c2420);box-shadow:var(--glow-accent)}
.tool.active span{color:#eafffb}

.hint{font-size:10.5px;color:var(--ink-dim);line-height:1.5;margin-top:8px}

/* ---- collapsible config sections ---- */
.fold-head{
  cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;
  transition:color .14s;
}
.fold-head:hover{color:#8dffee}
.fold-caret{font-size:9px;opacity:.7;transition:transform .22s ease;margin-left:8px}
section.fold.collapsed .fold-caret{transform:rotate(-90deg)}
.fold-body{overflow:hidden;max-height:640px;opacity:1;
  transition:max-height .28s ease,opacity .2s ease}
section.fold.collapsed .fold-body{max-height:0;opacity:0}

/* ---- compact dish actions (icon + label mini buttons) ---- */
.dish-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.mini-btn{
  background:linear-gradient(155deg,#13202e,#0b1522);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:7px 4px 6px;cursor:pointer;transition:.14s;
  display:flex;flex-direction:column;align-items:center;gap:3px;font-size:16px;line-height:1;
}
.mini-btn span{font-size:9.5px;color:var(--ink-dim);letter-spacing:.3px}
.mini-btn:hover{border-color:var(--accent2);transform:translateY(-1px);
  background:linear-gradient(155deg,#18293a,#0e1a28);box-shadow:0 4px 13px rgba(0,0,0,.4)}
.mini-btn:hover span{color:var(--ink)}
.mini-btn:active{transform:translateY(0)}
.dish-meta{margin-top:9px}
.dish-meta b{color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- icon-as-button mute (no frame, just the speaker art) ---- */
.mute-btn{
  background:none;border:none;padding:0;margin:0;cursor:pointer;
  line-height:0;width:100%;display:flex;justify-content:center;
  filter:drop-shadow(0 0 4px rgba(95,211,196,.28));
  transition:transform .14s,filter .14s,opacity .14s;
}
.mute-ico{width:24px;height:24px;object-fit:contain;display:block}
.mute-btn:hover{transform:scale(1.14);filter:drop-shadow(0 0 7px rgba(47,245,208,.55))}
.mute-btn:active{transform:scale(1.02)}
.mute-btn.muted{filter:grayscale(.8) drop-shadow(0 0 2px rgba(0,0,0,.4));opacity:.7}
.mute-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:3px;border-radius:6px}
.slider.muted input[type=range]{opacity:.4;filter:grayscale(.5)}

/* ---- sliders ---- */
.slider{display:grid;grid-template-columns:26px 1fr;align-items:center;gap:9px;margin-bottom:13px;color:var(--ink)}
.slider-ico{font-size:17px;text-align:center;line-height:1;filter:drop-shadow(0 0 4px rgba(95,211,196,.28))}
img.slider-ico{width:24px;height:24px;object-fit:contain;display:block}
.slider-main{display:block;min-width:0;position:relative}
/* comfort band: where the living population's temp/pH preferences cluster.
   Keep the thumb inside it to keep cells un-stressed. */
.pref-marker{
  position:absolute;bottom:0;height:7px;z-index:0;pointer-events:auto;
  border-radius:5px;opacity:0;transition:left .3s,width .3s,opacity .3s;
  background:linear-gradient(90deg,rgba(120,230,170,0),rgba(120,230,170,.55) 50%,rgba(120,230,170,0));
  box-shadow:0 0 7px rgba(120,230,170,.45);
}
.selected-pref-marker{position:absolute;bottom:-2px;width:2px;height:12px;z-index:3;pointer-events:auto;
  opacity:0;transform:translateX(-1px);border-radius:2px;background:#f5fbff;
  box-shadow:0 0 5px rgba(255,255,255,.85);transition:left .24s,opacity .2s}
.selected-pref-marker::before{content:'';position:absolute;left:50%;top:-3px;transform:translateX(-50%);
  border-left:3px solid transparent;border-right:3px solid transparent;border-top:0;border-bottom:3px solid #f5fbff}
.slider-main input[type=range]{position:relative;z-index:1}
.slider-top{display:block;font-size:11.5px;color:var(--ink);margin-bottom:3px}
.slider .ends{float:right;color:var(--ink-dim);font-size:10px}
input[type=range]{
  -webkit-appearance:none;width:100%;height:7px;margin-top:0;
  background:linear-gradient(90deg,#123240,#1a4258);border-radius:5px;outline:none;
  border:1px solid #12222e;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#8dffee,var(--accent));
  cursor:inherit;box-shadow:0 0 9px rgba(47,245,208,.8);border:1px solid #0a1a1f;
}
/* Style Lab keeps a slimmer track */
.sl-row input[type=range]{height:6px}
.sl-row input[type=range]::-webkit-slider-thumb{width:14px;height:14px}

/* temperature slider: cold-blue → hot-red track, thumb tinted by value (--th) */
#tempSlider{
  background:linear-gradient(90deg,hsl(205,85%,55%),hsl(288,78%,56%),hsl(15,90%,56%));
  border-color:#101d28;
}
#tempSlider::-webkit-slider-thumb{
  background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.75),var(--th,#9a6ed0) 70%);
  box-shadow:0 0 10px var(--th,#9a6ed0);
  border:1px solid rgba(0,0,0,.35);
  transition:background .1s linear, box-shadow .1s linear;
}

.env-status-summary{display:flex;align-items:center;justify-content:space-between;gap:5px;margin:-1px 0 11px;
  padding:6px 7px;border:1px solid #16303d;border-radius:8px;background:rgba(7,18,27,.62);
  color:#7893a5;font-size:8.5px;line-height:1;white-space:nowrap}
.env-status-summary span{display:inline-flex;align-items:center;gap:3px}
.env-status-summary i{width:6px;height:6px;border-radius:50%;display:inline-block;box-shadow:0 0 5px currentColor}
.env-status-summary b{font-variant-numeric:tabular-nums;color:#d6e7ef;font-weight:650}
.env-status-summary .env-ok{background:#76e5bd;color:#76e5bd}
.env-status-summary .env-warn{background:#f0b562;color:#f0b562}
.env-status-summary .env-bad{background:#ff6e68;color:#ff6e68}

/* themed checkboxes */
.check{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-dim);margin-bottom:8px;cursor:pointer}
.check input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.check .cbox{
  width:16px;height:16px;border-radius:5px;flex-shrink:0;
  border:1px solid var(--line);background:var(--grad-panel);
  display:inline-flex;align-items:center;justify-content:center;transition:.14s;
}
.check:hover .cbox{border-color:var(--accent2)}
.check input:checked + .cbox{
  border-color:var(--accent);background:linear-gradient(160deg,#164a3f,#123027);box-shadow:var(--glow-accent);
}
.check input:checked + .cbox::after{content:'✓';color:#8dffee;font-size:11px;font-weight:800;line-height:1}
.check input:focus-visible + .cbox{outline:2px solid var(--accent2);outline-offset:1px}
.env-overlays-title{display:none}

/* ---- buttons ---- */
.btn{
  background:var(--grad-panel);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius);padding:7px 12px;cursor:pointer;font-size:12px;transition:.14s;
}
.btn:hover{border-color:var(--accent2);background:var(--grad-panel-hi)}
.btn.active{border-color:var(--accent);color:#eafffb;background:linear-gradient(160deg,#123a34,#0c2420);box-shadow:var(--glow-accent)}
.btn.wide{width:100%;margin-top:8px}
.btn.sm{padding:5px 9px;font-size:11px}
.btn.icon-close{
  width:34px;height:34px;min-width:34px;padding:0;display:inline-grid;place-items:center;
  border-radius:10px;font-size:0;line-height:1;color:#c7d9e5;
}
.btn.icon-close>span{font-size:21px;font-weight:400;line-height:1;transform:translateY(-1px)}
.btn.icon-close:hover{color:#fff}
.btn.icon-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.seed-row{display:flex;gap:6px}
.seed-row input{flex:1}
input[type=text]{
  background:var(--bg);border:1px solid var(--line);color:var(--ink);
  border-radius:var(--radius);padding:7px 9px;font-size:12px;outline:none;width:100%;
}
input[type=text]:focus{border-color:var(--accent2)}

/* ---- center / dish ---- */
#center{position:relative;background:radial-gradient(circle at 50% 40%,#0a1017,#04070b);overflow:hidden}
/* outside the dish circle (black corners of the canvas) shows the arrow too;
   inside the circle the toy cursor takes over via .dish-cursor-active */
#dish{width:100%;height:100%;display:block;cursor:url('../public/cursors/Cursor_Arrow_sm.png') 4 4, default;touch-action:none}
#dish.dish-cursor-active{cursor:var(--dish-tool-cursor,url('../public/cursors/Cursor_Arrow_sm.png') 4 4,default)!important}
#dish.dish-cursor-active.dish-cursor-spring{cursor:none!important}

/* Desktop fine-pointer toy cursor. The actual hit coordinate never moves;
   only this pointer-events:none art layer has spring lag. */
#dishCursor{
  position:fixed;left:0;top:0;z-index:14;display:none;opacity:0;
  pointer-events:none;user-select:none;contain:layout style;
  will-change:transform;
  --cursor-col:rgba(218,248,255,.95);--hot-x:50%;--hot-y:50%;
  transform-origin:var(--hot-x) var(--hot-y);
}
@media (hover:hover) and (pointer:fine){#dishCursor{display:block}}
#dishCursor.visible{opacity:1}
#dishCursorImage{
  display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;
  transform-origin:var(--hot-x) var(--hot-y);will-change:transform;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.38));
}
/* The placeholder remains deliberately simple until Photoshop art lands. */
#dishCursor:not(.has-art)::before{
  content:'';position:absolute;left:22%;top:22%;right:22%;bottom:22%;border-radius:48% 55% 46% 58%;
  border:2px solid rgba(235,251,255,.9);
  background:radial-gradient(circle at 35% 28%,#fff 0 6%,transparent 8%),
    radial-gradient(circle at 62% 62%,rgba(255,255,255,.75) 0 7%,transparent 9%),
    radial-gradient(circle at 40% 40%,var(--cursor-col),rgba(130,190,210,.25));
  box-shadow:0 0 9px var(--cursor-col),inset 0 0 7px rgba(255,255,255,.55);
}
#dishCursor:not(.has-art) #dishCursorImage{opacity:0}
#dishCursor[data-tool="feed"]{--cursor-col:rgba(218,239,62,.95)}
#dishCursor[data-tool="toxin"]{--cursor-col:rgba(227,68,239,.95)}
#dishCursor[data-tool="virus"]{--cursor-col:rgba(163,90,255,.95)}
#dishCursor[data-tool="cull"]{--cursor-col:rgba(255,104,120,.95)}
#dishCursor[data-tool="grazer"]{--cursor-col:rgba(158,245,68,.95)}
#dishCursor[data-tool="predator"]{--cursor-col:rgba(255,90,104,.95)}
#dishCursor[data-tool="drifter"]{--cursor-col:rgba(104,160,255,.95)}
#dishCursor[data-tool="colony"]{--cursor-col:rgba(98,235,237,.95)}
#dishCursor[data-tool="preserve"]{--cursor-col:rgba(255,210,75,.95)}
#dishCursor[data-tool="refuge"]{--cursor-col:rgba(158,244,255,.95)}
@keyframes dish-cursor-pop{0%{opacity:.45;scale:.82}65%{opacity:1;scale:1.04}100%{opacity:1;scale:1}}
#dishCursor.visible.tool-pop{animation:dish-cursor-pop .13s ease-out}
body.reduced #dishCursor{animation:none}
#dishCursorHit{
  position:fixed;z-index:13;width:8px;height:8px;border:1px solid rgba(220,250,255,.8);
  border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);
}
@keyframes dish-cursor-hit{0%{opacity:.8;scale:.5}100%{opacity:0;scale:3.2}}
#dishCursorHit.pulse{animation:dish-cursor-hit .26s ease-out}
body.reduced #dishCursorHit{display:none}

/* collapse carets pinned to the inner edges of the dish area */
.edge-caret{
  position:absolute;top:50%;transform:translateY(-50%);z-index:15;
  width:22px;height:48px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(18,30,42,.9),rgba(8,14,20,.9));
  border:1px solid var(--line);color:var(--ink-dim);
  cursor:pointer;font-size:16px;transition:.15s;backdrop-filter:blur(6px);
}
.edge-caret:hover{color:var(--accent);border-color:var(--accent2);box-shadow:0 0 12px rgba(47,245,208,.2)}
#leftCaret{left:0;border-left:none;border-radius:0 9px 9px 0}
#rightCaret{right:0;border-right:none;border-radius:9px 0 0 9px}
#topbar{
  position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:16;
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(160deg,rgba(16,28,40,.82),rgba(7,13,20,.82));
  backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:12px;padding:7px 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.4);
}
.speeds{display:flex;gap:3px}
/* fixed width + even distribution so changing digit counts never reflow the bar */
.stats{display:flex;justify-content:space-between;width:188px;font-size:12px;color:var(--ink-dim)}
.stats span{display:inline-flex;align-items:center;gap:5px;font-size:12px}
.stats b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums;transition:color .15s}
.stats b.bumped{color:var(--accent)}
/* icon-only topbar buttons (play/pause, fullscreen): square, single glyph */
#topbar .btn{white-space:nowrap}
#topbar .btn.ico{padding:7px;width:34px;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
#topbar .btn.ico svg{display:block}
/* custom PNG icons: stat glyphs + labelled topbar buttons */
.stat-ico{width:17px;height:17px;object-fit:contain;display:block}
#styleBtn,#treeBtn,#jarTopBtn{display:inline-flex;align-items:center;gap:6px}
.btn-ico{width:17px;height:17px;object-fit:contain;display:block}
/* section-header icons (Species / Genome / Field journal) */
section h2:has(.h2-ico){display:flex;align-items:center;gap:6px}
.h2-ico{width:16px;height:16px;object-fit:contain;flex:0 0 auto}
/* overlay-header icons (Tree of Life, Discoveries) */
.ovh{display:flex;align-items:center;gap:13px}
.ovh-ico{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
/* topbar reads as one instrument: tight clusters divided by hairlines */
#topbar{gap:0}
.tb-group{display:flex;align-items:center;gap:9px;padding:0 13px}
.tb-group:first-child{padding-left:3px}
.tb-group:last-child{padding-right:3px}
.tb-group + .tb-group{border-left:1px solid var(--line)}
#topbar .stats{padding-left:0;border-left:none}

/* living legend: thriving species pulse, dwindling ones dim (inline styles) */
@keyframes dotpulse{
  0%,100%{box-shadow:0 0 4px currentColor;transform:scale(.9)}
  50%{box-shadow:0 0 11px currentColor,0 0 3px currentColor;transform:scale(1.1)}
}
.dot.pulse{animation:dotpulse 2.6s ease-in-out infinite}
body.reduced .dot.pulse{animation:none}

/* on-brand tooltip (single JS-positioned element, escapes panel clipping) */
.app-tip{
  position:fixed;z-index:200;pointer-events:none;
  background:linear-gradient(160deg,#14263a,#0c1622);color:var(--ink);
  border:1px solid var(--line);border-radius:7px;padding:5px 9px;
  font-size:10.5px;line-height:1.35;letter-spacing:.2px;white-space:nowrap;max-width:230px;
  box-shadow:0 8px 22px rgba(0,0,0,.5);opacity:0;transform:translateY(3px);
  transition:opacity .13s ease,transform .13s ease;
}
.app-tip.show{opacity:1;transform:translateY(0)}

/* ---- right / journal ---- */
.graph{width:100%;height:90px;background:linear-gradient(180deg,#0c1826,#070e17);border-radius:var(--radius);border:1px solid var(--line)}
section.grow{display:flex;flex-direction:column;min-height:0}
.scroll{overflow-y:auto;max-height:180px}
.right section.grow:nth-child(2) .scroll{max-height:150px}
/* Desktop right rail scrolls as one document. Prevent flexbox from shrinking a
   taller Genome inspector and letting its rows paint through Field Journal. */
@media (min-width:821px){#right>section{flex-shrink:0}}

.sp-row{
  display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:7px;
  font-size:12px;cursor:pointer;transition:.12s;border:1px solid transparent;
}
.sp-row:hover{background:var(--grad-panel)}
.sp-row.selected{background:linear-gradient(160deg,#12283c,#0c1a29);border-color:var(--accent2);box-shadow:0 0 10px rgba(111,141,255,.22)}
.sp-icon{width:22px;height:22px;flex-shrink:0;border-radius:6px;
  background:radial-gradient(circle at 50% 45%,#0d1a26,#060d15);
  border:1px solid var(--line);image-rendering:auto}
.dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 7px currentColor,0 0 2px #000 inset}
.dot.big{width:16px;height:16px}
.sp-name{flex:1;color:var(--ink);font-weight:500}
.sp-diet{font-size:10px;color:var(--ink-dim)}
.sp-count{font-variant-numeric:tabular-nums;color:var(--ink);min-width:26px;text-align:right}

.empty{font-size:11px;color:var(--ink-dim);font-style:italic;padding:8px 2px}

/* inspector */
.inspector{font-size:12px}
.insp-head{display:flex;gap:9px;align-items:center;margin-bottom:10px}
.insp-name{font-size:13px;color:#eaf4fb}
.insp-role{font-size:10px;color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin-left:4px}
.insp-meta{font-size:10.5px;color:var(--ink-dim);margin-top:2px}
.trait{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.trait .tl{width:96px;font-size:10.5px;color:var(--ink-dim);flex-shrink:0}
.tbar{flex:1;height:6px;background:#0a1620;border:1px solid #13232f;border-radius:4px;overflow:hidden}
.tfill{display:block;height:100%;border-radius:4px;box-shadow:0 0 6px currentColor;
  transition:width .32s cubic-bezier(.4,0,.2,1),background .32s ease,color .32s ease}
body.reduced .tfill{transition:none}
.dot.big{transition:background .32s ease}
/* head fades softly when you switch to inspecting a different organism */
@keyframes inspSwap{from{opacity:.25}to{opacity:1}}
.insp-head.insp-swap{animation:inspSwap .3s ease}
body.reduced .insp-head.insp-swap{animation:none}
/* lineage breadcrumb */
.insp-lineage{display:flex;flex-wrap:wrap;align-items:center;gap:3px 4px;margin-bottom:9px;font-size:10.5px;line-height:1.4}
.insp-lineage:empty{display:none}
.lin-label{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px;font-size:9px;margin-right:3px}
.lin-node{display:inline-flex;align-items:center;gap:3px;color:var(--ink-dim)}
.lin-node.me{color:#eaf4fb;font-weight:600}
.lin-node.gone{opacity:.5}
.lin-dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 4px currentColor}
.lin-arrow,.lin-more{color:var(--ink-dim);opacity:.55;font-size:9.5px}

/* per-species stats + cause-of-death mix */
.insp-stats{margin-bottom:10px}
.insp-statrow{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:10.5px;color:var(--ink-dim)}
.insp-statrow b{color:#eaf4fb;font-variant-numeric:tabular-nums}
.insp-parent{font-size:10px;color:var(--ink-dim);margin-top:3px}
.death-mix{display:flex;height:6px;border-radius:4px;overflow:hidden;margin-top:7px;background:#0a1620;border:1px solid #13232f}
.dm-seg{display:block;height:100%;transition:width .3s ease}
.death-legend{display:flex;flex-wrap:wrap;gap:3px 9px;margin-top:5px;font-size:9.5px;color:var(--ink-dim)}
.dm-key{display:inline-flex;align-items:center;gap:4px}
.dm-chip{width:7px;height:7px;border-radius:2px}

.insp-hint{font-size:10px;color:var(--ink-dim);margin-top:9px;font-style:italic}
.insp-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px}
.insp-badge{font-size:10px;background:var(--grad-panel);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.env-fit{margin:2px 0 11px;padding:8px 9px 7px;border:1px solid #183040;border-radius:9px;
  background:linear-gradient(155deg,rgba(13,29,41,.82),rgba(7,17,26,.72))}
.env-fit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;
  font-size:9px;text-transform:uppercase;letter-spacing:.85px;color:var(--accent)}
.env-fit-head b{font-size:8.5px;letter-spacing:.55px;font-weight:650}
.env-fit-row{display:grid;grid-template-columns:66px 1fr 53px;align-items:center;gap:7px;margin:5px 0}
.env-fit-label{font-size:9.5px;color:#9ab0bf}
.env-fit-gauge{position:relative;height:6px;border-radius:4px;background:#09151e;border:1px solid #152b38}
.env-fit-gauge i{position:absolute;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,rgba(65,220,178,.22),rgba(83,248,202,.62));
  box-shadow:0 0 6px rgba(47,245,208,.2);transition:left .3s,width .3s}
.env-fit-gauge b{position:absolute;top:50%;width:2px;height:10px;transform:translate(-1px,-50%);border-radius:2px;
  background:#f4fbff;box-shadow:0 0 5px rgba(255,255,255,.7);transition:left .25s}
.env-fit-state{font-size:8.5px;text-align:right;text-transform:uppercase;letter-spacing:.35px}
.adapt-history{margin:-2px 0 11px;padding:7px 9px 8px;border-left:1px solid #1d3947;background:linear-gradient(90deg,rgba(18,43,53,.24),transparent)}
.adapt-history-head{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#68cdb9;margin-bottom:5px}
.adapt-history [data-adaptation-list]{display:grid;gap:3px}
.adapt-trace{display:grid;grid-template-columns:5px 31px 1fr;align-items:center;gap:5px;font-size:9px;line-height:1.25;color:#91a9b8}
.adapt-trace i{width:5px;height:5px;border-radius:50%;box-shadow:0 0 6px currentColor}
.adapt-trace b{font-size:8px;color:#607f91;font-weight:500;font-variant-numeric:tabular-nums}
.adapt-empty{font-size:9px;color:#526b7b;font-style:italic}
.sp-tag{font-size:10px;margin-left:2px}

/* events */
.log{font-size:11px;line-height:1.65}
.event{padding:2px 0;color:var(--ink);border-bottom:1px solid rgba(26,39,51,.5)}
.ev-t{color:var(--ink-dim);font-variant-numeric:tabular-nums;margin-right:3px}
.ev-extinction{color:var(--warn)}
.ev-speciation{color:var(--accent)}
.ev-bloom{color:#ff7fe0}
.ev-symbiosis{color:#8dffb0}
.ev-preserve{color:#ffd76a}
.ev-infect{color:#c98bff}
.ev-protagonist{color:#ffe08a}
.ev-grief{color:#9fb3c4}
.ev-mood{color:#b58cff}
.ev-behemoth{color:#8fd0ff}
.ev-fusion{color:#8fd0ff}

/* ---- evolutionary tree overlay ---- */
#treeOverlay{
  position:fixed;inset:0;z-index:70;
  background:#04080d;display:flex;flex-direction:column;overflow:hidden;
}
#treeOverlay.hidden{display:none}
#treeHeader{
  position:relative;z-index:3;flex:0 0 auto;padding:11px clamp(14px,2.2vw,34px) 9px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(9,18,29,.98),rgba(6,13,22,.96));
  box-shadow:0 7px 24px rgba(0,0,0,.24)
}
#treeHeader h2{font-size:15px;letter-spacing:2px;color:#eaf4fb;text-transform:uppercase}
.tree-primary-row,.tree-secondary-row{display:flex;align-items:center;justify-content:space-between;gap:18px;max-width:1500px;margin:0 auto}
.tree-identity{display:flex;align-items:center;gap:11px;min-width:0}
.tree-identity .ovh-ico{width:39px;height:39px}
.tree-title-line{display:flex;align-items:center;gap:10px}
.tree-live{display:inline-flex;align-items:center;gap:5px;color:#7eb7ad;font-size:8.5px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase}
.tree-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(47,245,208,.8)}
.tree-status{font-size:10.5px;color:var(--ink-dim);margin-top:2px;font-variant-numeric:tabular-nums}
.tree-secondary-row{margin-top:8px;min-height:32px}
#treeControls{display:flex;align-items:center;gap:7px;min-width:0}
.tree-command,.tree-density-btn,.tree-help{
  min-height:32px;border:1px solid var(--line);border-radius:8px;background:#0a1521;color:#8aa2b3;
  padding:6px 10px;font:650 9.5px/1 Segoe UI,sans-serif;letter-spacing:.65px;text-transform:uppercase;cursor:pointer;
  transition:border-color .14s,color .14s,background .14s,box-shadow .14s
}
.tree-command:hover,.tree-density-btn:hover,.tree-help:hover{border-color:#315a70;color:#e7f5fb}
.tree-command.active,.tree-density-btn.active{border-color:#25867c;color:#eafffb;
  background:linear-gradient(160deg,#123a34,#0b2421);box-shadow:0 0 12px rgba(47,245,208,.12)}
.tree-command:focus-visible,.tree-density-btn:focus-visible,.tree-help:focus-visible,#treeCanvas:focus-visible,
.tree-return-now:focus-visible,.tree-inspector-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tree-density{display:flex;align-items:center;gap:4px;padding-left:6px;border-left:1px solid var(--line)}
.tree-density>span{color:#617f92;font-size:8.5px;font-weight:650;letter-spacing:1px;text-transform:uppercase;margin-right:2px}
.tree-density-btn{padding-inline:8px}
.tree-help{width:32px;padding:0;font-size:12px;border-radius:50%}
.tree-helper{color:#587184;font-size:9.5px;white-space:nowrap}
.compact-label{display:none}
#treeViewport{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  background:radial-gradient(circle at 50% 10%,rgba(18,59,68,.12),transparent 48%),#04080d}
#treeCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.tree-return-now{position:absolute;z-index:4;top:12px;right:14px;min-height:34px;padding:7px 12px;
  border:1px solid #25867c;border-radius:999px;background:rgba(10,34,33,.94);color:#eafffb;
  box-shadow:0 5px 18px rgba(0,0,0,.38),0 0 14px rgba(47,245,208,.12);font-size:9.5px;
  font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer}
.tree-hover-tip{position:absolute;z-index:5;pointer-events:none;width:196px;padding:8px 10px;border:1px solid #294456;
  border-radius:8px;background:rgba(6,15,24,.94);box-shadow:0 8px 24px rgba(0,0,0,.45)}
.tree-hover-tip strong,.tree-hover-tip span{display:block}
.tree-hover-tip strong{color:#effaff;font-size:11px}
.tree-hover-tip span{color:#829daf;font-size:9.5px;margin-top:2px}
.tree-inspector{position:absolute;z-index:5;right:18px;bottom:18px;width:min(310px,calc(100% - 36px));
  padding:12px;border:1px solid #294456;border-radius:13px;background:linear-gradient(160deg,rgba(10,23,35,.97),rgba(6,14,23,.97));
  box-shadow:0 14px 38px rgba(0,0,0,.52),0 0 20px rgba(47,245,208,.06);backdrop-filter:blur(9px)}
.tree-inspector-close{position:absolute;top:6px;right:7px;width:27px;height:27px;border:0;background:transparent;
  color:#7893a5;border-radius:7px;cursor:pointer;font-size:17px}
.tree-inspector-close:hover{color:#fff;background:#102333}
.tree-inspector-head{display:flex;align-items:center;gap:9px;padding-right:25px}
.tree-inspector-head img,.tree-inspector-dot{width:38px;height:38px;flex:0 0 auto;border-radius:10px;object-fit:contain;
  border:1px solid var(--line);background:#06101a}
.tree-inspector-dot{border-radius:50%;box-shadow:0 0 12px currentColor}
.tree-inspector-head strong,.tree-inspector-head span{display:block}
.tree-inspector-head strong{color:#eefaff;font-size:13px}
.tree-inspector-head span{color:#7e9aab;font-size:9.5px;margin-top:2px;text-transform:uppercase;letter-spacing:.45px}
.tree-inspector dl{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;margin:11px 0 10px}
.tree-inspector dl>div{min-width:0}
.tree-inspector dt{color:#5f7c90;font-size:8px;text-transform:uppercase;letter-spacing:.8px}
.tree-inspector dd{color:#cfe0ea;font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-adapt-list{display:grid;gap:4px;margin:2px 0 10px;padding-top:8px;border-top:1px solid #173040}
.tree-adapt-list span{display:grid;grid-template-columns:5px 31px 1fr;align-items:center;gap:5px;font-size:9px;line-height:1.2;color:#91a9b8}
.tree-adapt-list i{width:5px;height:5px;border-radius:50%;box-shadow:0 0 6px currentColor}
.tree-adapt-list b{font-size:8px;color:#607f91;font-weight:500;font-variant-numeric:tabular-nums}
.tree-inspector-actions{display:flex;gap:6px}
.tree-inspector-actions .btn{flex:1}
#app.tree-workspace>#left,#app.tree-workspace>#right,
#app.tree-workspace #topbar,#app.tree-workspace #mDock,#app.tree-workspace #mBackdrop,
#app.tree-workspace #mobileLab,#app.tree-workspace #skye{visibility:hidden;pointer-events:none}
#treeOverlay.is-entering #treeHeader{animation:treeHeaderIn .48s cubic-bezier(.2,.75,.25,1) both}
#treeOverlay.is-entering #treeViewport{animation:treeViewportIn .52s ease-out both}
@keyframes treeHeaderIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes treeViewportIn{from{opacity:.2}to{opacity:1}}
body.reduced #treeOverlay.is-entering #treeHeader,body.reduced #treeOverlay.is-entering #treeViewport{animation-duration:.08s}
body.reduced .tree-live i{box-shadow:none}

/* ---- section header with an inline opener (Field journal → Discoveries) ---- */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.chip-btn{
  background:var(--grad-panel);border:1px solid var(--line);color:var(--ink);
  border-radius:7px;padding:3px 8px;cursor:pointer;font-size:10.5px;
  letter-spacing:.3px;transition:.14s;white-space:nowrap;
}
.chip-btn:hover{border-color:var(--accent2);color:#eafffb;background:var(--grad-panel-hi);box-shadow:0 0 10px rgba(47,245,208,.18)}
.chip-btn #discCount{color:var(--accent);font-size:9.5px;margin-left:3px;font-variant-numeric:tabular-nums}
.chip-btn.discovery-new{animation:discFound 1.8s cubic-bezier(.2,.8,.2,1)}
@keyframes discFound{
  0%,100%{transform:scale(1);box-shadow:none}
  18%{transform:scale(1.08);border-color:#fff4a8;box-shadow:0 0 0 4px rgba(255,224,110,.12),0 0 24px rgba(47,245,208,.5)}
  45%{transform:scale(1.02);border-color:var(--accent)}
}

/* ---- discoveries gallery overlay ---- */
#discOverlay{
  position:fixed;inset:0;z-index:60;
  background:
    radial-gradient(circle at 50% -10%,rgba(31,88,92,.22),transparent 42%),
    linear-gradient(180deg,rgba(4,8,13,.98),rgba(4,7,12,.985));
  backdrop-filter:blur(8px);
  display:flex;flex-direction:column;
}
#discOverlay.hidden{display:none}
#discHeader{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px clamp(18px,3vw,48px);border-bottom:1px solid var(--line);
  background:rgba(7,14,22,.72);flex:0 0 auto;
}
#discHeader h2{font-size:17px;letter-spacing:2.4px;color:#eaf4fb;text-transform:uppercase}
#discHeader .tag{font-size:11px;color:var(--ink-dim);margin-top:3px}
.disc-header-actions{display:flex;align-items:center;gap:18px}
.disc-progress{display:grid;grid-template-columns:auto auto;align-items:end;column-gap:10px;min-width:185px}
.disc-progress-label{font-size:9px;text-transform:uppercase;letter-spacing:1.2px;color:var(--ink-dim)}
.disc-progress strong{grid-row:1/3;grid-column:2;font-size:25px;line-height:1;color:#eafffb;font-variant-numeric:tabular-nums}
.disc-progress strong small{font-size:11px;color:var(--ink-dim);font-weight:500}
.disc-progress-track{height:4px;border-radius:4px;background:#132431;overflow:hidden;margin-top:5px}
.disc-progress-track i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--accent2),var(--accent));box-shadow:0 0 8px var(--accent);transition:width .45s ease}
#discGrid{
  flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;padding:clamp(22px,3vw,44px);
  width:100%;max-width:1540px;margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px;align-content:start;
}
.disc-empty{grid-column:1/-1;text-align:center;padding:40px 20px}
.disc-card{
  position:relative;min-height:282px;overflow:hidden;
  background:linear-gradient(155deg,rgba(19,34,48,.88),rgba(8,15,24,.92));
  border:1px solid #203647;border-radius:16px;padding:14px 16px 15px;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.disc-card::after{content:'';position:absolute;inset:auto 10% 0;height:1px;background:linear-gradient(90deg,transparent,rgba(47,245,208,.32),transparent)}
.disc-card-top{width:100%;display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.disc-num{font-size:9px;letter-spacing:1.3px;color:#5f7b8f;font-variant-numeric:tabular-nums}
.disc-state{font-size:8.5px;letter-spacing:.8px;text-transform:uppercase;color:#6f91a5}
.disc-card.alive{cursor:pointer}
.disc-card.alive:hover{border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.45),var(--glow-accent)}
.disc-card.alive:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.disc-portrait-wrap{width:120px;height:120px;margin:1px 0 3px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(36,85,94,.28),transparent 68%)}
.disc-portrait{width:96px;height:96px}
.disc-event-portrait{position:relative;width:120px;height:120px;margin:1px 0 3px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(47,245,208,.17),rgba(20,52,65,.12) 48%,transparent 72%)}
.disc-event-portrait span{position:relative;z-index:1;font-size:44px;filter:drop-shadow(0 0 12px rgba(47,245,208,.32))}
.disc-event-portrait i{position:absolute;inset:20px;border:1px solid rgba(91,224,204,.28);border-radius:50%;box-shadow:0 0 22px rgba(47,245,208,.1) inset}
.disc-card.event-record{border-color:#28505a;background:linear-gradient(155deg,rgba(14,42,48,.88),rgba(8,15,24,.94))}
.disc-title{font-size:12px;font-weight:650;color:#f0f7fb;letter-spacing:.3px}
.disc-sp{font-size:13px;font-weight:650;margin-top:1px}
.disc-gone{font-size:9.5px;color:var(--ink-dim);font-weight:400;letter-spacing:.3px}
.disc-cap{font-size:10.5px;color:#91a9b9;margin-top:3px;line-height:1.35}
.disc-meta{font-size:9.5px;color:var(--ink-dim);opacity:.75;font-variant-numeric:tabular-nums;margin-top:3px}
.disc-action{margin-top:auto;padding-top:9px;font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:#668397}
.disc-card.alive .disc-action{color:var(--accent)}
.disc-card.locked{border-style:dashed;background:linear-gradient(155deg,rgba(12,23,33,.64),rgba(7,12,19,.78))}
.disc-card.locked::after{display:none}
.disc-card.locked .disc-state{color:#596d7b}
.disc-lock{width:112px;height:112px;margin:5px 0 7px;border-radius:50%;display:grid;place-items:center;border:1px dashed #274152;background:radial-gradient(circle,rgba(38,68,83,.28),transparent 70%)}
.disc-lock span{font-family:Georgia,serif;font-size:42px;color:#3a5669;text-shadow:0 0 16px rgba(47,245,208,.12)}
.disc-card.locked .disc-title{color:#91a6b4}
.disc-card.locked .disc-cap,.disc-card.locked .disc-action{color:#536b7b}

@media (max-width:700px){
  #discHeader{align-items:flex-start;flex-wrap:wrap;padding:12px 14px}
  #discHeader .ovh-ico{width:38px;height:38px}
  .disc-header-actions{width:100%;justify-content:space-between;gap:10px}
  .disc-progress{min-width:150px}
  #discGrid{grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:10px;padding:14px 12px calc(150px + env(safe-area-inset-bottom,0px))}
  .disc-card{min-height:244px;padding:10px 9px 12px}
  .disc-portrait-wrap{width:92px;height:92px}
  .disc-portrait{width:78px;height:78px}
  .disc-event-portrait{width:92px;height:92px}
  .disc-event-portrait span{font-size:36px}
  .disc-lock{width:84px;height:84px}
}

.hidden{display:none}

/* ---- Style Lab editor panel ---- */
#stylePanel{
  position:absolute;top:0;right:0;bottom:0;width:330px;z-index:25;
  background:linear-gradient(180deg,#0c1622,#070d15);
  border-left:1px solid var(--line);
  box-shadow:-8px 0 30px rgba(0,0,0,.5);
  display:flex;flex-direction:column;overflow:hidden;
}
#stylePanel.hidden{display:none}
.sl-head{display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line)}
.sl-head h2{font-size:13px;letter-spacing:2px;color:#eaf4fb;text-transform:uppercase}
.sl-head .tag{font-size:10.5px;color:var(--ink-dim);margin-top:2px}
.sl-preset-select{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);font-size:10px;color:var(--accent);
  text-transform:uppercase;letter-spacing:1.1px}
.sl-preset-select select{width:100%;min-width:0;background:#0b1723;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:6px 9px;font-size:11px;outline:none}
.sl-preset-select select:focus{border-color:var(--accent);box-shadow:var(--glow-accent)}
.sl-mobile-only{display:none}
.sl-preset{
  background:var(--grad-panel);border:1px solid var(--line);color:var(--ink);
  border-radius:9px;padding:8px 10px;font-size:11px;cursor:pointer;transition:.12s;
}
.sl-preset:hover{border-color:var(--accent);color:#eafffb;box-shadow:var(--glow-accent)}
.sl-preset.active{border-color:var(--accent);color:#eafffb;background:linear-gradient(160deg,#123a34,#0c2420);box-shadow:var(--glow-accent)}
.sl-body{flex:1;overflow-y:auto;padding:6px 14px 14px}
.sl-group{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;
  color:var(--accent);margin:14px 0 8px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;user-select:none}
.sl-group:hover{color:#8dffee}
.sl-fold{display:inline-block;transition:transform .2s ease;font-size:9px;opacity:.8}
.sl-sec.collapsed .sl-fold{transform:rotate(-90deg)}
.sl-sec-body{max-height:900px;overflow:hidden;transition:max-height .25s ease,opacity .2s ease;opacity:1}
.sl-sec.collapsed .sl-sec-body{max-height:0;opacity:0}
.sl-row{display:grid;grid-template-columns:18px 86px 1fr 30px;align-items:center;gap:8px;margin-bottom:9px}
.sl-label{font-size:10.5px;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-ico{width:16px;height:16px;color:#cfe0ec;display:block}
.sl-swatch{width:15px;height:15px;border-radius:50%;background:#888;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 6px rgba(0,0,0,.4);display:block}
.sl-row input[type=range]{margin-top:0}
.sl-val{font-size:10.5px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.sl-hint{font-size:11px;color:var(--ink-dim);font-style:italic;line-height:1.5;padding:2px 0 6px}
.sl-sp-head{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.sl-portrait{width:52px;height:52px;border-radius:11px;flex-shrink:0;
  background:radial-gradient(circle at 50% 42%,#0f1e2c,#060d15);
  border:1px solid var(--line);box-shadow:0 0 0 1px rgba(0,0,0,.3) inset}
.sl-sp-info{display:flex;flex-direction:column;gap:3px;min-width:0}
.sl-sp-name{font-size:13.5px;color:#eaf4fb;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-sp-tag{font-size:9.5px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px}
.btn.wide.sm{width:100%;margin-top:4px}
.sl-foot{display:flex;gap:8px;padding:11px 14px;border-top:1px solid var(--line)}
.sl-foot .btn{flex:1}

/* ---- Dr. Skye Solva: onboarding + milestone guide (anchored to the dish) ----
   Avatar + bubble each ease in independently so the bubble can be staggered a
   beat behind her; sizes are ~15% larger than the mobile baseline. */
#skye{
  position:absolute;left:18px;bottom:18px;z-index:14;
  display:flex;align-items:flex-end;max-width:480px;pointer-events:none;
}
#skye.show{pointer-events:auto}
#skyeAvatar{width:152px;height:auto;flex:0 0 auto;margin-right:2px;margin-bottom:-7px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.6));pointer-events:none;user-select:none;
  opacity:0;transform:translateY(16px);
  transition:opacity .32s ease,transform .4s cubic-bezier(.32,.72,0,1)}
#skye.show #skyeAvatar{opacity:1;transform:translateY(0)}
#skyeBubble{position:relative;z-index:1;
  background:linear-gradient(160deg,rgba(18,38,58,.96),rgba(11,20,32,.97));
  border:1px solid var(--line);border-radius:17px;padding:14px 18px 15px;max-width:312px;
  box-shadow:0 12px 34px rgba(0,0,0,.55);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(12px) scale(.98);
  transition:opacity .34s ease .17s,transform .4s cubic-bezier(.32,.72,0,1) .17s}
#skye.show #skyeBubble{opacity:1;transform:translateY(0) scale(1)}
#skyeName{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;color:var(--accent);font-weight:600;margin-bottom:6px}
/* ghost reserves the final size so the typewriter never reflows the bubble */
#skyeTextWrap{position:relative}
#skyeTextGhost,#skyeText{font-size:14.5px;line-height:1.55;color:var(--ink);display:block;margin:0}
#skyeTextGhost{visibility:hidden}
#skyeTextGhost::after{content:'▍';margin-left:1px} /* reserve the caret's space too */
#skyeText{position:absolute;inset:0}
#skyeText::after{content:'▍';margin-left:1px;color:var(--accent);opacity:.7;animation:skyeCaret .8s steps(1) infinite}
#skyeText.done::after{content:''}
@keyframes skyeCaret{50%{opacity:0}}
#skyeActions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
#skyeActions[hidden]{display:none}
#skyeActions .btn.sm{font-size:11.5px;padding:6px 11px}
#skyeActions .skye-primary{border-color:var(--accent);color:#eafffb;background:linear-gradient(160deg,#123a34,#0c2420)}
#skyeActions .skye-primary:hover{box-shadow:var(--glow-accent)}
#skyeActions .skye-ghost{opacity:.72;padding:6px 9px}
#skyeActions .skye-ghost:hover{opacity:1}

/* =====================================================================
   MOBILE VERTICAL  —  everything below is gated to small screens so the
   desktop / iPad-landscape layout is never touched. The dish fills the
   viewport (circle fits width, centred → bands top/bottom hold the glass
   chrome); tools live in a bottom "toy shelf", panels become bottom sheets.
   ===================================================================== */
#mDock, #mBackdrop, #mobileLab, #mobileLabSpeedBtn, #mobileTelemetry,
#mobileLifeToast, #mobileShotBtn, #mobileRandomBtn, .m-only { display:none; }

@media (max-width: 820px) {
  /* --- shell: dish fills the viewport, panels leave the flow --- */
  #app{display:block;position:relative;height:100vh;height:100dvh;gap:0;background:#03060a}
  #center{position:absolute;inset:0}
  #dish{width:100%;height:100%}
  #leftCaret,#rightCaret{display:none}

  /* --- top glass pill: play / speed / core stats --- */
  #topbar{top:calc(8px + env(safe-area-inset-top,0px));left:8px;right:8px;transform:none;gap:0;padding:5px 6px;border-radius:13px;
    justify-content:space-between}
  #topbar #styleBtn,#topbar #treeBtn,#topbar #shotBtn,#topbar #fsBtn{display:none}
  #topbar .tb-group{padding:0 7px;gap:6px}
  #topbar .tb-group:first-child{padding-left:2px}
  #topbar .speeds{gap:2px}
  #topbar .btn.sm{padding:4px 6px;font-size:10px}
  #topbar .stats{width:auto;gap:9px}
  #topbar .stats span{gap:3px;font-size:11px}
  #topbar .stat-ico{width:15px;height:15px}
  #topbar .btn.ico{width:30px;padding:6px}

  /* --- panels become bottom sheets --- */
  #left,#right{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;
    max-height:80vh;height:auto;z-index:40;padding:16px 14px 20px;
    border:1px solid var(--line);border-bottom:none;border-radius:18px 18px 0 0;
    box-shadow:0 -12px 44px rgba(0,0,0,.55);
    transform:translateY(110%);transition:transform .3s cubic-bezier(.32,.72,0,1);
  }
  #left.sheet-open,#right.sheet-open{transform:translateY(0)}
  /* grab handle */
  #left::before,#right::before{content:'';position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:38px;height:4px;border-radius:3px;background:rgba(160,190,215,.35)}
  #left .brand{display:none}
  #left section:first-of-type h2,       /* "Interventions" heading (tools are docked) */
  #left section:first-of-type .hint{display:none}

  /* --- backdrop behind an open sheet --- */
  #mBackdrop{display:block;position:fixed;inset:0;z-index:35;background:rgba(2,5,9,.5);
    opacity:0;pointer-events:none;transition:opacity .25s}
  #mBackdrop.show{opacity:1;pointer-events:auto}

  /* --- bottom dock: the toy shelf + sheet nav --- */
  #mDock{display:flex;flex-direction:column;gap:6px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(0deg,rgba(5,10,17,.96),rgba(8,14,22,.72));
    backdrop-filter:blur(11px);border-top:1px solid var(--line);
    transition:transform .25s ease,opacity .2s ease}
  #mToolSlot .tool-grid{display:flex;grid-template-columns:none;gap:6px;overflow-x:auto;
    padding-bottom:2px;scrollbar-width:none}
  #mToolSlot .tool-grid::-webkit-scrollbar{display:none}
  #mToolSlot .tool{flex:0 0 auto;width:58px;padding:8px 4px 6px;border-radius:12px}
  #mToolSlot .tool-ico{width:28px;height:28px}
  #mToolSlot .tool span{font-size:9px}
  #mNav{display:flex;gap:6px}
  .m-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;
    background:var(--grad-panel);border:1px solid var(--line);color:var(--ink-dim);
    border-radius:11px;padding:6px 2px;cursor:pointer;font-size:9.5px;letter-spacing:.3px}
  .m-nav-btn img{width:20px;height:20px;object-fit:contain}
  .m-nav-btn:active{background:var(--grad-panel-hi);border-color:var(--accent2)}

  /* Floating quick actions: mobile only, outside the permanent HUD. Their
     visible glyphs are modest while each complete 44px circle remains tappable. */
  #mobileShotBtn,#mobileRandomBtn{display:flex;position:fixed;z-index:31;
    top:var(--mobile-quick-top,49px);bottom:auto;width:44px;height:44px;padding:0;
    align-items:center;justify-content:center;border-radius:50%;color:#c5d3dc;
    background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;
    opacity:0;transform:translateY(3px);pointer-events:none;
    transition:opacity .2s ease,transform .2s ease,background-color .16s ease}
  #mobileShotBtn{left:12px}
  #mobileRandomBtn{left:52px}
  #mobileShotBtn.is-visible,#mobileRandomBtn.is-visible{opacity:.88;transform:translateY(0);pointer-events:auto}
  #mobileShotBtn:is(:hover,:focus-visible),#mobileRandomBtn:is(:hover,:focus-visible){opacity:1;color:#eafffb;border-color:transparent;
    background:transparent}
  #mobileShotBtn:focus-visible,#mobileRandomBtn:focus-visible{outline:2px solid var(--accent);outline-offset:-7px}
  #mobileShotBtn:active,#mobileRandomBtn:active{transform:scale(.94);background:transparent}

  /* Ambient telemetry never participates in hit testing. Its position and one
     of three stable layouts are supplied by MobileVitalityHUD safe-region math. */
  #mobileTelemetry{display:grid;position:fixed;z-index:22;pointer-events:none;
    left:var(--telemetry-x,12px);top:var(--telemetry-y,calc(100vh - 220px));
    width:var(--telemetry-w,calc(100vw - 24px));height:var(--telemetry-h,82px);
    opacity:0;transform:translateY(3px);color:#cfe0eb;
    transition:opacity .22s ease,transform .22s ease}
  #mobileTelemetry.is-visible{opacity:.92;transform:translateY(0)}
  #mobileTelemetry[data-layout="horizontal"]{grid-template-columns:minmax(118px,44%) minmax(0,1fr);gap:12px;align-items:center}
  #mobileTelemetry[data-layout^="stacked"]{grid-template-columns:1fr;grid-template-rows:48px 1fr;gap:7px}
  .mobile-telemetry-graph-wrap{height:100%;min-width:0;padding:0;overflow:hidden;
    border:1px solid var(--line);border-radius:10px;
    background:linear-gradient(180deg,#0c1826,#070e17);box-shadow:inset 0 0 16px rgba(0,0,0,.2)}
  #mobileTelemetryGraph{display:block;width:100%;height:100%;border-radius:inherit}
  .mobile-telemetry-species-wrap{position:relative;min-width:0}
  #mobileTelemetrySpecies{display:grid;gap:2px}
  .mobile-telemetry-row{display:grid;grid-template-columns:25px minmax(0,1fr) auto;
    align-items:center;gap:7px;min-width:0;height:23px;padding:1px 5px 1px 2px;
    border-radius:7px;background:linear-gradient(90deg,rgba(4,10,16,.34),rgba(4,10,16,.08))}
  .mobile-telemetry-icon{display:block;width:23px;height:23px;object-fit:contain;border-radius:50%}
  span.mobile-telemetry-icon{width:14px;height:14px;margin:4px;box-shadow:0 0 8px currentColor}
  .mobile-telemetry-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    color:var(--species-color,#dbe8f0);font-size:9.5px;font-weight:600;letter-spacing:.15px;
    text-shadow:0 1px 5px #000}
  .mobile-telemetry-count{min-width:18px;color:#edf7fb;font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
  .mobile-telemetry-count.is-changing{animation:mobile-count-pop .28s ease-out}
  .mobile-telemetry-row.is-new{animation:mobile-species-glow 1.2s ease-in-out infinite alternate;
    background:linear-gradient(90deg,rgba(47,245,208,.16),rgba(4,10,16,.08))}
  #mobileTelemetryMore{position:absolute;right:2px;bottom:-11px;color:#7892a4;font-size:8px;letter-spacing:.4px}
  @keyframes mobile-count-pop{0%{transform:scale(1)}45%{transform:scale(1.18);color:#fff}100%{transform:scale(1)}}
  @keyframes mobile-species-glow{from{box-shadow:inset 0 0 0 1px rgba(47,245,208,.08)}to{box-shadow:inset 0 0 0 1px rgba(47,245,208,.34),0 0 9px rgba(47,245,208,.11)}}

  /* Major events remain legible even when the dish leaves no telemetry-safe
     negative space. The toast is informational and never captures gestures. */
  #mobileLifeToast{display:flex;position:fixed;z-index:28;left:50%;top:var(--mobile-toast-top,52px);
    max-width:calc(100vw - 128px);min-height:34px;padding:5px 11px 5px 7px;
    align-items:center;gap:7px;border:1px solid rgba(56,92,111,.72);
    border-color:color-mix(in srgb,var(--event-color,#2ff5d0) 34%,#294052);
    border-radius:11px;background:rgba(5,13,21,.88);box-shadow:0 7px 22px rgba(0,0,0,.38);
    backdrop-filter:blur(9px);color:#e5f0f5;pointer-events:none;opacity:0;
    transform:translate(-50%,-3px);transition:opacity .2s ease,transform .2s ease}
  #mobileLifeToast.is-visible{opacity:1;transform:translate(-50%,0)}
  #mobileLifeToastIcon{display:flex;width:24px;height:24px;flex:0 0 24px;align-items:center;
    justify-content:center;color:var(--event-color,#2ff5d0);font-size:15px}
  #mobileLifeToastIcon img{width:24px;height:24px;object-fit:contain}
  #mobileLifeToastText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:10.5px;font-weight:600;letter-spacing:.1px}

  /* --- overlays (tree / discoveries / style) ride above the dock --- */
  #treeOverlay,#discOverlay{z-index:50}
  #stylePanel{z-index:50;width:100%}
  #discHeader{flex-wrap:wrap;gap:8px}

  /* Tree remains a true full-screen chronicle on mobile. */
  #treeHeader{padding:calc(7px + env(safe-area-inset-top,0px)) 9px 7px}
  .tree-primary-row{gap:8px}
  .tree-identity{gap:7px}
  .tree-identity .ovh-ico{width:31px;height:31px}
  #treeHeader h2{font-size:12px;letter-spacing:1.5px}
  .tree-title-line{gap:7px}
  .tree-live{font-size:7.5px;letter-spacing:.8px}
  .tree-status{font-size:8.5px;margin-top:1px;max-width:270px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #treeClose{width:34px;height:34px;flex:0 0 34px}
  .tree-secondary-row{margin-top:6px;min-height:34px;display:block}
  #treeControls{gap:5px;overflow-x:auto;overflow-y:hidden;padding:1px 0 2px;scrollbar-width:none;overscroll-behavior-x:contain}
  #treeControls::-webkit-scrollbar{display:none}
  .tree-command,.tree-density-btn,.tree-help{min-height:32px;padding:6px 8px;font-size:8.5px;flex:0 0 auto}
  .wide-label{display:none}
  .compact-label{display:inline}
  .tree-density{gap:3px;padding-left:5px;flex:0 0 auto}
  .tree-density>span{font-size:7.5px;margin-right:0}
  .tree-density-btn{padding-inline:7px}
  .tree-help{width:32px;padding:0}
  .tree-helper{display:none}
  .tree-return-now{top:9px;right:9px;min-height:32px;padding:6px 10px;font-size:8.5px}
  .tree-hover-tip{display:none}
  .tree-inspector{left:9px;right:9px;bottom:calc(9px + env(safe-area-inset-bottom,0px));width:auto;
    padding:9px 10px;border-radius:12px}
  .tree-inspector-head img,.tree-inspector-dot{width:32px;height:32px}
  .tree-inspector-head strong{font-size:11.5px}
  .tree-inspector-head span{font-size:8.5px}
  .tree-inspector dl{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:8px 0}
  .tree-inspector dt{font-size:7px}
  .tree-inspector dd{font-size:8.5px}
  .tree-inspector-actions .btn{min-height:29px;padding:5px 7px;font-size:8.5px}

  /* --- Skye sits above the toy shelf; sheets/overlays cover her --- */
  #skye{left:8px;right:8px;bottom:150px;max-width:none;justify-content:center;z-index:24}
  #skyeAvatar{width:94px;margin-right:-10px;margin-bottom:-4px}
  #skyeBubble{max-width:none;flex:1}
}

/* =====================================================================
   MOBILE PORTRAIT LAB — reusable split workspace shell. Environment is
   the first provider; Style and Life can mount into #mobileLabContent later.
   The canvas remains alive/full-size beneath the opaque lower workspace.
   ===================================================================== */
@media (max-width: 820px) and (orientation: portrait) {
  body.mobile-lab-lock{overflow:hidden;overscroll-behavior:none}

  #mobileLab{
    display:flex;flex-direction:column;position:fixed;z-index:44;
    left:0;right:0;top:49vh;top:49dvh;bottom:0;min-height:0;
    color:var(--ink);background:linear-gradient(180deg,#0c1723 0%,#08111b 100%);
    border-top:1px solid #254052;border-radius:18px 18px 0 0;
    box-shadow:0 -15px 42px rgba(0,0,0,.58),0 -1px 0 rgba(47,245,208,.08);
    transform:translateY(104%);opacity:.98;
    transition:transform .31s cubic-bezier(.22,.78,.24,1);
    overflow:hidden;pointer-events:none;
  }
  #mobileLab.is-open{transform:translateY(0);pointer-events:auto}
  .mobile-lab-handle{width:44px;height:4px;flex:0 0 auto;margin:8px auto 2px;
    border-radius:99px;background:rgba(154,188,210,.42);box-shadow:0 0 7px rgba(95,211,196,.08)}
  .mobile-lab-header{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;
    min-height:43px;padding:3px 15px 8px;border-bottom:1px solid rgba(32,57,75,.8)}
  .mobile-lab-header h2{margin:0;color:var(--accent);font-size:11px;font-weight:650;
    text-transform:uppercase;letter-spacing:1.55px}
  .mobile-lab-heading{min-width:0}
  #mobileLabSubtitle{margin:2px 0 0;color:var(--ink-dim);font-size:9.5px;line-height:1.2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mobileLabClose{flex:0 0 34px}
  #mobileLabContent{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
    padding:10px 23px calc(18px + env(safe-area-inset-bottom,0px)) 17px}
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll){
    scrollbar-width:thin;scrollbar-color:rgba(69,101,121,.08) transparent}
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll)::-webkit-scrollbar{width:8px;height:8px}
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll)::-webkit-scrollbar-track{background:transparent;margin-block:8px}
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll)::-webkit-scrollbar-thumb{
    min-height:34px;border:2px solid transparent;border-radius:999px;background-clip:padding-box;
    background-color:rgba(69,101,121,.08);transition:background-color .2s ease;
  }
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll)::-webkit-scrollbar-button{display:none;width:0;height:0}
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll):is(:hover,:focus-within,.is-scroll-active){
    scrollbar-color:rgba(82,119,141,.34) transparent}
  #mobileLab :is(#mobileLabContent,.mobile-panel-scroll):is(:hover,:focus-within,.is-scroll-active)::-webkit-scrollbar-thumb{
    background-color:rgba(82,119,141,.34)}

  /* Shared compact tab strip used by Style and Life providers. */
  #mobileLabContent .mobile-panel-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
    flex:0 0 auto;gap:4px;padding:8px 14px;border-bottom:1px solid rgba(32,57,75,.8)}
  #mobileLabContent .mobile-panel-tab{min-width:0;min-height:37px;padding:7px 5px;
    border:1px solid transparent;border-radius:9px;background:transparent;color:#7892a4;
    font-size:9.5px;font-weight:650;text-transform:uppercase;letter-spacing:1px;cursor:pointer}
  #mobileLabContent .mobile-panel-tab.active{color:#eafffb;border-color:#247a73;
    background:linear-gradient(160deg,rgba(18,58,52,.9),rgba(12,36,32,.86));box-shadow:0 0 10px rgba(47,245,208,.12)}
  #mobileLabContent .mobile-panel-tab:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  #mobileLabContent .illustrated-mobile-tabs{gap:6px;padding:7px 14px 8px;
    background:linear-gradient(180deg,rgba(12,24,37,.74),rgba(7,17,27,.32));
    border-bottom-color:rgba(36,77,91,.82);box-shadow:inset 0 -1px rgba(0,0,0,.22)}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab{display:flex;position:relative;
    min-height:42px;padding:6px 8px;align-items:center;justify-content:center;gap:7px;
    border-radius:10px;color:#7897aa;overflow:hidden;
    transition:color .18s ease,border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab::after{content:'';position:absolute;
    left:12px;right:12px;bottom:0;height:2px;border-radius:2px 2px 0 0;
    background:var(--accent);opacity:0;transform:scaleX(.4);transition:opacity .18s ease,transform .18s ease}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab :is(img,svg){width:22px;height:22px;
    flex:0 0 22px;object-fit:contain;opacity:.68;filter:saturate(.72);
    transition:opacity .18s ease,filter .18s ease,transform .18s ease}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab span{min-width:0;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab.active{color:#eafffb;border-color:rgba(47,245,208,.42);
    background:linear-gradient(160deg,rgba(18,65,58,.82),rgba(9,31,31,.72));
    box-shadow:inset 0 1px rgba(255,255,255,.035),0 5px 16px rgba(0,0,0,.18),0 0 12px rgba(47,245,208,.1)}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab.active::after{opacity:.9;transform:scaleX(1)}
  #mobileLabContent .illustrated-mobile-tabs .mobile-panel-tab.active :is(img,svg){opacity:1;
    filter:saturate(1.08) drop-shadow(0 0 5px rgba(47,245,208,.25));transform:scale(1.06)}
  #mobileLabContent [data-mobile-pane]{display:none}
  #mobileLabContent [data-mobile-pane].is-active{display:block}
  #mobileLabContent #environmentSection{display:block;margin:0;padding:0}
  #mobileLabContent #environmentSection>.fold-head{display:none}
  #mobileLabContent #environmentSection>.fold-body,
  #mobileLabContent #environmentSection.collapsed>.fold-body{
    max-height:none;opacity:1;overflow:visible;transition:none
  }
  #mobileLabContent #environmentSection .slider{grid-template-columns:31px 1fr;gap:11px;margin-bottom:10px}
  #mobileLabContent img.slider-ico{width:29px;height:29px}
  #mobileLabContent .slider-top{font-size:12px;margin-bottom:6px}
  #mobileLabContent .slider .ends{font-size:10px}
  #mobileLabContent input[type=range]{height:9px;touch-action:none}
  #mobileLabContent input[type=range]::-webkit-slider-thumb{width:22px;height:22px}
  #mobileLabContent #reduceMotionRow{display:none}
  #mobileLabContent .env-status-summary{margin-bottom:7px}
  #mobileLabContent .env-overlays{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;
    margin-top:3px;padding:9px 0 0;border-top:1px solid rgba(31,55,72,.82)}
  #mobileLabContent .env-overlays-title{display:block;grid-column:1/-1;color:var(--accent);
    font-size:9px;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:1px}
  #mobileLabContent .env-overlays .check{margin:0;min-height:30px;font-size:11px}

  /* Style provider: same live controls, focused through the shared tabs. */
  #app.mobile-lab-style #mobileLabContent{padding:0;overflow:hidden}
  #mobileLabContent #stylePanel{position:static;inset:auto;width:100%;height:100%;min-height:0;
    flex:1;background:transparent;border:0;box-shadow:none;display:flex;overflow:hidden}
  #mobileLabContent #stylePanel .sl-head,
  #mobileLabContent #stylePanel .sl-preset-select,
  #mobileLabContent #stylePanel #slSpeciesSec,
  #mobileLabContent #stylePanel .sl-foot{display:none}
  #mobileLabContent #stylePanel .sl-mobile-only{display:block}
  #mobileLabContent #stylePanel .mobile-panel-tabs{display:grid}
  #mobileLabContent .sl-mobile-targetbar{position:relative;display:flex!important;align-items:center;
    min-height:43px;gap:8px;padding:6px 14px;border-bottom:1px solid rgba(27,49,65,.72)}
  #mobileLabContent .sl-mobile-target{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
  .mobile-target-label{flex:0 0 auto;color:var(--accent);font-size:8.5px;font-weight:650;
    letter-spacing:1px;text-transform:uppercase}
  .mobile-target-icon{width:27px;height:27px;object-fit:contain;border-radius:7px;
    border:1px solid var(--line);background:#07101a;flex:0 0 auto}
  .mobile-target-dot{width:18px;height:18px;border-radius:50%;box-shadow:0 0 8px currentColor;flex:0 0 auto}
  #mobileLabContent .sl-target-name,#mobileLabContent .sl-target-all{min-width:0;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis;color:#eaf4fb;font-size:12px;font-weight:600}
  #mobileLabContent .sl-mobile-more{width:34px;height:30px;min-width:34px;padding:0;font-size:13px;line-height:1}
  #mobileLabContent .sl-mobile-menu{position:absolute;z-index:6;right:14px;top:39px;width:152px;
    padding:6px;display:grid;gap:5px;background:#0a1521;border:1px solid var(--line);
    border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.6)}
  #mobileLabContent .sl-mobile-menu[hidden]{display:none}
  #mobileLabContent .sl-mobile-menu .btn{text-align:left}
  #mobileLabContent .sl-mobile-hue{display:grid!important;grid-template-columns:15px 76px 1fr 32px 31px;
    align-items:center;gap:7px;min-height:39px;padding:4px 14px 7px;border-bottom:1px solid rgba(27,49,65,.72)}
  #mobileLabContent .sl-mobile-hue[hidden]{display:none!important}
  #mobileLabContent .sl-mobile-hue .sl-label{font-size:10px}
  #mobileLabContent .sl-mobile-hue .btn{width:31px;min-width:31px;padding:4px}
  #mobileLabContent #stylePanel .sl-preset-grid{display:none}
  #mobileLabContent #stylePanel .sl-preset-grid.is-active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;padding:14px 17px calc(18px + env(safe-area-inset-bottom,0px))}
  #mobileLabContent .sl-preset-grid .sl-preset{min-height:45px;font-size:11px;letter-spacing:.3px}
  #mobileLabContent #stylePanel .sl-body{flex:1;min-height:0;max-height:none;overflow-y:auto;
    padding:7px 17px calc(18px + env(safe-area-inset-bottom,0px))}
  #mobileLabContent #stylePanel[data-style-tab="presets"] .sl-body{display:none}
  #mobileLabContent #stylePanel .sl-sec.is-active{display:block}
  #mobileLabContent #stylePanel .sl-sec.is-active>.sl-group{display:none}
  #mobileLabContent #stylePanel .sl-sec-body{max-height:none;overflow:visible;opacity:1}
  #mobileLabContent #stylePanel .sl-row{grid-template-columns:18px 92px 1fr 34px;
    min-height:34px;gap:8px;margin-bottom:11px}
  #mobileLabContent #stylePanel .sl-label{font-size:10.5px}
  #mobileLabContent #stylePanel .sl-ico{width:17px;height:17px}

  /* Life provider: Overview fixes the graph and gives remaining room to the
     species list; Genome and Journal each own a dedicated scroll region. */
  #app.mobile-lab-life #mobileLabContent{padding:0 15px calc(12px + env(safe-area-inset-bottom,0px));overflow:hidden}
  #mobileLabContent #right{position:static;inset:auto;width:100%;height:100%;max-height:none;min-height:0;
    padding:0;transform:none!important;transition:none;background:transparent;border:0;border-radius:0;
    box-shadow:none;display:flex;flex-direction:column;overflow:hidden}
  #mobileLabContent #right::before{display:none}
  #mobileLabContent #right>.mobile-panel-tabs{margin:0 -15px}
  #mobileLabContent #right>section{display:none;margin:0;padding:0}
  #mobileLabContent #right>section.is-active{display:flex;flex-direction:column}
  #mobileLabContent #right section>h2{flex:0 0 auto;margin:8px 0 6px;font-size:9px;letter-spacing:1.15px}
  #mobileLabContent #lifePopulation.is-active{flex:0 0 103px}
  #mobileLabContent #lifePopulation .graph{height:76px;min-height:76px;border-radius:9px}
  #mobileLabContent #lifeSpecies.is-active{flex:1 1 auto;min-height:0}
  #mobileLabContent #speciesList{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;padding-right:4px}
  #mobileLabContent .sp-row{min-height:38px;padding:5px 6px}
  #mobileLabContent #lifeGenome.is-active,
  #mobileLabContent #lifeJournal.is-active{flex:1 1 auto;min-height:0}
  #mobileLabContent #lifeGenome>h2{display:none}
  #mobileLabContent .life-selection-row{display:flex;align-items:center;gap:8px;flex:0 0 auto;
    min-height:45px;padding:6px 1px;border-bottom:1px solid rgba(27,49,65,.72)}
  #mobileLabContent .life-selection-empty{color:var(--ink-dim);font-size:10px;line-height:1.3}
  #mobileLabContent .life-selection-name{min-width:0;color:#eaf4fb;font-size:12px;font-weight:600;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mobileLabContent .life-selection-name small{display:block;color:var(--ink-dim);font-size:9px;
    font-weight:400;text-transform:uppercase;letter-spacing:.5px;margin-top:1px}
  #mobileLabContent #inspector{flex:1 1 auto;min-height:0;overflow-y:auto;padding:10px 4px 8px 1px}
  #mobileLabContent #lifeJournal .sec-head{flex:0 0 auto;min-height:45px;margin:0;padding:6px 1px;
    border-bottom:1px solid rgba(27,49,65,.72)}
  #mobileLabContent #lifeJournal .sec-head h2{margin:0;font-size:9px}
  #mobileLabContent #lifeJournal #discBtn{padding:5px 8px;font-size:10px}
  #mobileLabContent #eventLog{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;
    padding:8px 4px 8px 1px;font-size:10.5px;line-height:1.65}

  /* The lab replaces the intervention shelf; no empty dock footprint remains. */
  #app.mobile-lab-open #mDock{transform:translateY(110%);opacity:0;pointer-events:none}
  #app.mobile-lab-open #mBackdrop{opacity:0;pointer-events:none}
  #app.mobile-lab-open #skye{display:none}

  /* Compact live HUD: pause, one cycling speed control, pop/species/time. */
  #app.mobile-lab-open #topbar{top:calc(6px + env(safe-area-inset-top,0px));left:8px;right:8px;
    padding:4px 6px;border-radius:12px;justify-content:space-between}
  #app.mobile-lab-open #topbar>.tb-group{padding:0 5px;gap:5px}
  #app.mobile-lab-open #topbar>.tb-group:last-child{display:none}
  #app.mobile-lab-open #topbar .speeds>[data-speed]{display:none}
  #app.mobile-lab-open #mobileLabSpeedBtn{display:inline-flex!important;min-width:39px;
    align-items:center;justify-content:center;padding:5px 8px;color:#eafffb;border-color:var(--accent)}
  #app.mobile-lab-open #topbar .stats{gap:8px;justify-content:flex-end}
  #app.mobile-lab-open #topbar .stats span{font-size:10px;gap:3px}
  #app.mobile-lab-open #topbar .stats span:has(#statGen){display:none}
  #app.mobile-lab-open #topbar .stat-ico{width:14px;height:14px}
  #app.mobile-lab-open #topbar .stats b{font-size:11px}

  body.reduced #mobileLab{transition-duration:.07s}
  body.reduced #mDock{transition-duration:.07s}
  body.reduced #mobileTelemetry,body.reduced #mobileLifeToast,body.reduced #mobileShotBtn,
  body.reduced #mobileRandomBtn{transition-duration:.06s}
  body.reduced .mobile-telemetry-count.is-changing,body.reduced .mobile-telemetry-row.is-new{animation:none}
}

/* ---- story layer (Phase 1): journal tiers, click-to-locate, toasts, follow ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.journal-filter{margin-left:auto}
.journal-filter[aria-pressed="false"]{color:var(--ink-dim)}
.sec-head .journal-filter + .chip-btn{margin-left:0}
.event.is-locatable{cursor:pointer;border-radius:4px;transition:background .12s}
.event.is-locatable:hover,.event.is-locatable:focus-visible{background:rgba(47,245,208,.07);outline:none}
.event.tier-minor{opacity:.62}
.event.tier-headline{color:#f8e7a6;font-weight:600;padding:4px 6px 4px 7px;margin:2px 0;
  border-left:2px solid #f5d66e;border-bottom:none;background:linear-gradient(90deg,rgba(245,214,110,.1),transparent 80%)}
.ev-chronicle .ev-t{color:#c9b46a}

.btn.disc-top{gap:5px}
.btn.disc-top b{color:var(--accent);font-size:11px;font-variant-numeric:tabular-nums}
.btn.disc-top.discovery-new{animation:discFound 1.8s cubic-bezier(.2,.8,.2,1)}

.insp-head-text{flex:1 1 auto;min-width:0}
.insp-follow{flex:0 0 auto}
.insp-follow.is-on{border-color:var(--accent);color:var(--accent);box-shadow:0 0 10px rgba(47,245,208,.22)}
.insp-summary{font-size:11.5px;color:#cfe3f0;margin:-4px 0 10px;line-height:1.4}

.story-toast{position:absolute;z-index:6;left:50%;top:66px;transform:translate(-50%,-8px);opacity:0;
  display:flex;align-items:center;gap:9px;max-width:min(560px,calc(100% - 120px));
  padding:7px 12px 7px 8px;border-radius:11px;cursor:pointer;text-align:left;
  font:inherit;font-size:12px;color:var(--ink);
  background:rgba(8,15,22,.86);border:1px solid color-mix(in srgb,var(--event-color,#2ff5d0) 45%,transparent);
  box-shadow:0 8px 26px rgba(0,0,0,.45),0 0 18px color-mix(in srgb,var(--event-color,#2ff5d0) 18%,transparent);
  backdrop-filter:blur(6px);transition:opacity .22s ease,transform .22s ease}
.story-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.story-toast.is-headline{color:#f8e7a6;border-color:rgba(245,214,110,.55)}
.story-toast-icon{flex:0 0 26px;height:26px;display:grid;place-items:center;color:#f5d66e}
.story-toast-icon img{width:26px;height:26px;object-fit:contain}
.story-toast-text{min-width:0;line-height:1.35}
.story-toast-go{flex:0 0 auto;font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--accent);opacity:.8}
.story-toast:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body.reduced .story-toast{transition:opacity .12s linear;transform:translate(-50%,0)}
@media (max-width: 820px) and (orientation: portrait){
  .story-toast{display:none}
  #discTopBtn{display:none}
}
/* Desktop opens Discoveries from the top bar, so the journal header keeps just its filter. */
@media (min-width: 821px){ #lifeJournal #discBtn{display:none} }

/* ---- documentary mode (Phase 4): UI fades, captions as lower thirds ---- */
body.documentary #left, body.documentary #right, body.documentary #topbar,
body.documentary .edge-caret, body.documentary #storyToast, body.documentary #skye,
body.documentary #mDock, body.documentary #mobileVitality, body.documentary #mobileLifeToast {
  opacity:0 !important; pointer-events:none !important; transition:opacity .6s ease;
}
#docCaption{position:absolute;z-index:7;left:max(28px,4%);bottom:max(30px,6%);max-width:min(620px,80%);
  display:flex;flex-direction:column;gap:4px;padding:12px 18px 13px 16px;border-left:3px solid #f5d66e;
  background:linear-gradient(90deg,rgba(4,9,14,.78),rgba(4,9,14,.35) 85%,transparent);
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
#docCaption.is-visible{opacity:1;transform:none}
body:not(.documentary) #docCaption{display:none}
.doc-kicker{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:#f5d66e}
.doc-line{font-size:17px;line-height:1.35;color:#eaf4fb;text-wrap:balance}
#docHint{position:absolute;z-index:7;top:18px;left:50%;transform:translateX(-50%);font-size:12px;color:#cfe3f0;
  padding:6px 12px;border-radius:999px;background:rgba(4,9,14,.6);opacity:0;transition:opacity .6s ease;pointer-events:none}
#docHint.is-visible{opacity:1}
body:not(.documentary) #docHint{display:none}
body.reduced #docCaption{transition:opacity .2s linear;transform:none}

/* ---- Specimen Jar ---- */
#jarOverlay{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(4,8,13,.98),rgba(4,7,12,.985));backdrop-filter:blur(8px)}
#jarOverlay.hidden{display:none}
#jarHeader{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px clamp(18px,3vw,48px);border-bottom:1px solid var(--line);background:rgba(7,14,22,.72)}
#jarHeader h2{font-size:17px;letter-spacing:2.4px;color:#eaf4fb;text-transform:uppercase}
#jarHeader .tag{font-size:11px;color:var(--ink-dim);margin-top:3px}
#jarGrid{flex:1 1 auto;overflow-y:auto;padding:clamp(22px,3vw,44px);display:grid;gap:18px;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));max-width:1400px;width:100%;margin:0 auto}
.jar-card{display:flex;flex-direction:column;gap:4px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--grad-panel)}
.jar-card canvas{width:160px;height:120px;align-self:center}
.jar-card b{color:#eaf4fb;font-size:13px}
.jar-what{font-size:11.5px;color:#cfe3f0}
.jar-from{font-size:10.5px;color:var(--ink-dim)}
.jar-actions{display:flex;gap:8px;margin-top:8px}
.jar-remove{color:var(--ink-dim)}
.jar-empty{color:var(--ink-dim);font-size:13px;max-width:60ch}
.jar-chip b{color:var(--accent);font-size:9.5px;margin-left:3px}
@media (min-width: 821px){ #lifeJournal #jarBtn{display:none} }
@media (max-width: 820px) and (orientation: portrait){ #jarTopBtn{display:none} }
#releaseHint{position:absolute;z-index:8;top:66px;left:50%;transform:translateX(-50%);padding:7px 14px;border-radius:10px;
  background:rgba(8,15,22,.88);border:1px solid rgba(245,214,110,.5);color:#f8e7a6;font-size:12px;pointer-events:none}

/* ---- while you were away ---- */
#awayCard{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100% - 32px));
  display:flex;flex-direction:column;gap:10px;padding:18px 20px;border-radius:14px;border:1px solid rgba(245,214,110,.45);
  background:rgba(6,12,19,.94);box-shadow:0 18px 50px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
#awayCard[hidden]{display:none}
#awayCard .away-title{font-size:15px;color:#f8e7a6}
#awayCard .away-body{font-size:13px;color:#cfe3f0;display:flex;flex-direction:column;gap:4px;max-height:50vh;overflow-y:auto}
#awayCard .away-actions{display:flex;gap:8px;justify-content:flex-end}
.away-row{all:unset;cursor:pointer;padding:5px 6px;border-radius:6px;font-size:12.5px;color:#eaf4fb;line-height:1.35}
.away-row span{color:#c9b46a;font-variant-numeric:tabular-nums}
.away-row:hover,.away-row:focus-visible{background:rgba(245,214,110,.08)}