:root {
  --bg: #05060d;
  --glass: rgba(var(--n1), 0.62);
  --glass-strong: rgba(var(--n2), 0.86);
  --line: rgba(150, 180, 255, 0.14);
  --line-strong: rgba(150, 180, 255, 0.26);
  --text: #eaf0ff;
  --muted: #93a0c4;
  --faint: #5f6b8c;
  --cyan: #3ee6ff;
  --violet: #8d7bff;
  --magenta: #ff3d9a;
  --accent: linear-gradient(90deg, #3ee6ff, #8d7bff 55%, #ff3d9a);
  --radius: 18px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --top-h: 56px;
  --sub-h: 46px;
  --dock-h: 52px;
  --panel-w: clamp(320px, 31vw, 420px);
  color-scheme: dark;
  --ov: 255, 255, 255;              /* hover/track overlays */
  --n0: 5, 6, 13; --n1: 14, 18, 36; --n2: 12, 15, 30; --n3: 10, 13, 28; --n4: 3, 4, 10;   /* panel tints */
  --ok: #38e8b0;
  --pink-text: #ffc2de;
  --toast-bg: rgba(40,14,30,.92);
  --loading-bg: radial-gradient(ellipse at 50% 40%, #0d0f24, #05060d 70%);
  --dna-bg: radial-gradient(ellipse at 50% 0%, #11143a 0%, #070816 55%, #05060d 100%);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f8;
  --line: rgba(30, 40, 80, 0.12);
  --line-strong: rgba(30, 40, 80, 0.24);
  --text: #111827;
  --muted: #4b5563;
  --faint: #6b7280;
  --cyan: #0e7490;
  --violet: #5b4bd6;
  --magenta: #be185d;
  --ov: 30, 40, 80;
  --n0: 238, 241, 248; --n1: 255, 255, 255; --n2: 255, 255, 255; --n3: 255, 255, 255; --n4: 200, 206, 222;
  --ok: #047857;
  --pink-text: #9d174d;
  --toast-bg: rgba(255,240,246,.96);
  --loading-bg: radial-gradient(ellipse at 50% 40%, #ffffff, #e6e9f3 70%);
  --dna-bg: radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f1f3f9 55%, #e9ecf5 100%);
}
/* panel text colored inline from the dark palette (gap scores, stage pills, flags): darken it to read on light */
:root[data-theme="light"] .panel [style*="color"] { filter: brightness(0.6) saturate(1.4); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; overscroll-behavior: none; }
body { font: 14px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; touch-action: manipulation; }
a { color: var(--cyan); text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#app { position: fixed; inset: 0; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#gl:active { cursor: grabbing; }

/* ---------- glass ---------- */
.topbar, .subbar .seg, .me-bar, .panel, .dock, .legend, .modal-card, .organ-label, .tip {
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}

/* ---------- top bar ---------- */
.topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 10;
  height: calc(var(--top-h) + var(--sat));
  padding: var(--sat) calc(14px + var(--sar)) 0 calc(14px + var(--sal));
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, rgba(var(--n0), 0.85), rgba(var(--n0), 0.35));
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.glyph { width: 22px; height: 22px; border-radius: 50%; flex: none; background: conic-gradient(from 200deg, #3ee6ff, #8d7bff, #ff3d9a, #3ee6ff); box-shadow: 0 0 18px rgba(141, 123, 255, 0.7); position: relative; }
.glyph::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg); }
.brand-text { font-family: "Space Grotesk", Inter, sans-serif; font-size: 16px; letter-spacing: 0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.brand-text b { color: var(--text); font-weight: 700; }
.actions { display: flex; gap: 4px; flex: 1; justify-content: flex-end; }
.icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--muted); transition: background .2s, color .2s; }
.icon-btn:hover { background: rgba(var(--ov), 0.06); color: var(--text); }
#btn-theme .i-moon, :root[data-theme="light"] #btn-theme .i-sun { display: none; }
:root[data-theme="light"] #btn-theme .i-moon { display: block; }
.icon-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.icon-btn.on { color: var(--cyan); background: rgba(62, 230, 255, 0.1); }

/* ---------- segmented controls ---------- */
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: rgba(var(--ov), 0.05); border: 1px solid var(--line); flex: none; }
.seg button { position: relative; z-index: 1; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--muted); transition: color .25s; white-space: nowrap; }
.seg button[aria-selected="true"] { color: #071018; }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--accent); box-shadow: 0 0 22px rgba(141, 123, 255, 0.55); transition: transform .35s cubic-bezier(.3, 1.3, .5, 1); }
.seg[data-pos="1"] .seg-thumb { transform: translateX(100%); }

/* ---------- sub bar ---------- */
.subbar { position: absolute; z-index: 9; left: 0; right: 0; top: calc(var(--top-h) + var(--sat) + 8px); display: flex; justify-content: center; pointer-events: none; padding: 0 12px; }
.subbar > * { pointer-events: auto; }
.subbar .seg { background: var(--glass); }
.me-bar { display: none; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); max-width: 100%; }
.me-bar #me-file { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.me-bar .lock { color: var(--ok); display: grid; }
.me-bar .lock svg { width: 16px; height: 16px; }
.chip-btn { padding: 6px 12px; border-radius: 999px; background: rgba(var(--ov), 0.08); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip-btn:hover { background: rgba(var(--ov), 0.14); }
#app[data-mode="me"] .species-seg { display: none; }
#app[data-mode="me"] .me-bar { display: flex; }
#app[data-mode="me"] #btn-news { display: none; }

/* ---------- panel (side on wide, sheet on narrow) ---------- */
.panel {
  position: absolute; z-index: 8; display: flex; flex-direction: column;
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  top: calc(var(--top-h) + var(--sat) + 12px); right: calc(12px + var(--sar)); bottom: calc(12px + var(--sab));
  width: var(--panel-w);
  transition: transform .45s cubic-bezier(.2, .9, .2, 1), height .45s cubic-bezier(.2, .9, .2, 1);
}
.panel-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 18px 18px 22px; flex: 1; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(var(--ov), .15) transparent; }
.sheet-handle { display: none; }

/* ---------- dock ---------- */
.dock {
  position: absolute; z-index: 7; left: calc(12px + var(--sal)); right: calc(var(--panel-w) + 24px + var(--sar));
  bottom: calc(12px + var(--sab)); height: var(--dock-h);
  display: flex; gap: 6px; align-items: center; padding: 0 8px; overflow-x: auto; scrollbar-width: none;
  background: var(--glass); border: 1px solid var(--line); border-radius: 999px;
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.dock::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--muted); border: 1px solid transparent; transition: background .2s, color .2s, border-color .2s; white-space: nowrap; }
.chip:hover { color: var(--text); background: rgba(var(--ov), 0.05); }
.chip[aria-pressed="true"] { color: var(--text); background: rgba(var(--ov), 0.08); border-color: var(--line-strong); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; background: currentColor; }

/* ---------- legend ---------- */
.legend { position: absolute; z-index: 7; left: calc(12px + var(--sal)); bottom: calc(var(--dock-h) + 22px + var(--sab)); padding: 9px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line); font-size: 11.5px; color: var(--muted); max-width: 300px; }
.legend .ramp { height: 6px; border-radius: 6px; margin: 6px 0 4px; background: linear-gradient(90deg, #3ee6ff, #8d7bff, #ff3d9a); width: 200px; }
.legend .ends { display: flex; justify-content: space-between; width: 200px; }
.legend .keys { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.legend .keys span { display: inline-flex; align-items: center; gap: 6px; }
.legend .t { color: var(--text); font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- labels ---------- */
.organ-label { position: absolute; z-index: 6; pointer-events: none; transform: translate(-50%, calc(-100% - 18px)); padding: 6px 12px; border-radius: 999px; font: 600 12.5px "Space Grotesk", Inter, sans-serif; background: rgba(var(--n3), 0.7); border: 1px solid var(--line-strong); white-space: nowrap; transition: opacity .2s; }
.organ-label::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px; background: linear-gradient(var(--line-strong), transparent); }
.tip { position: absolute; z-index: 11; pointer-events: none; padding: 6px 10px; border-radius: 10px; background: rgba(var(--n3), 0.85); border: 1px solid var(--line-strong); font-size: 12px; white-space: nowrap; transform: translate(14px, 14px); }

/* ---------- panel content ---------- */
.eyebrow { font: 600 11px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); }
.panel h2, .modal h2 { font: 700 22px/1.15 "Space Grotesk", Inter, sans-serif; margin: 6px 0 8px; letter-spacing: -0.01em; }
.panel h3 { font: 600 12px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin: 22px 0 10px; }
.muted { color: var(--muted); }
.lead { color: var(--muted); margin: 0 0 4px; }
.p-head { display: flex; align-items: flex-start; gap: 10px; }
.p-head > div { flex: 1; min-width: 0; }
.back { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--muted); background: rgba(var(--ov), 0.05); flex: none; margin-top: 2px; }
.back:hover { color: var(--text); }
.meter { margin: 14px 0 6px; }
.meter .row { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.meter .row b { color: var(--text); font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-size: 15px; }
.meter .track { height: 8px; border-radius: 8px; background: rgba(var(--ov), 0.06); margin-top: 6px; overflow: hidden; }
.meter .fill { height: 100%; border-radius: 8px; background: var(--accent); background-size: 300px 100%; box-shadow: 0 0 14px rgba(255, 61, 154, 0.4); }
.list { display: flex; flex-direction: column; gap: 8px; }
.row-btn { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--ov), 0.03); border: 1px solid var(--line); text-align: left; width: 100%; transition: background .2s, border-color .2s; }
.row-btn:hover { background: rgba(var(--ov), 0.06); border-color: var(--line-strong); }
.row-btn .name { flex: 1; font-weight: 500; min-width: 0; }
.row-btn .sub { font-size: 12px; color: var(--faint); }
.mini { width: 54px; height: 5px; border-radius: 5px; background: rgba(var(--ov), 0.07); overflow: hidden; flex: none; }
.mini i { display: block; height: 100%; border-radius: 5px; }
.card { padding: 13px 14px; border-radius: 14px; background: rgba(var(--ov), 0.035); border: 1px solid var(--line); }
.card .top { display: flex; align-items: baseline; gap: 8px; justify-content: space-between; }
.card .org { font: 600 15px "Space Grotesk", Inter, sans-serif; }
.card .prog { font-size: 12.5px; color: var(--cyan); margin-top: 2px; }
.card p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.card .note { color: var(--text); opacity: .9; }
.card .src { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 600; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid currentColor; flex: none; }
.pill.solid { border: 0; color: #071018 !important; }
.empty { padding: 16px; border-radius: 14px; border: 1px dashed rgba(255, 61, 154, 0.5); color: var(--pink-text); background: rgba(255, 61, 154, 0.06); font-size: 13px; }
.news-item { display: block; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(var(--ov), 0.025); color: var(--text); }
.news-item:hover { border-color: var(--line-strong); background: rgba(var(--ov), 0.05); }
.news-item .meta { font-size: 11.5px; color: var(--faint); display: flex; gap: 8px; margin-bottom: 3px; }
.news-item .title { font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 4px; }
.stat { padding: 10px; border-radius: 12px; background: rgba(var(--ov), 0.04); border: 1px solid var(--line); }
.stat b { display: block; font: 700 18px "Space Grotesk", Inter, system-ui, sans-serif; }
.stat span { font-size: 11px; color: var(--faint); }
.variant { padding: 12px 13px; border-radius: 14px; background: rgba(var(--ov), 0.035); border: 1px solid var(--line); }
.variant .top { display: flex; gap: 8px; align-items: center; }
.variant .gene { font: 600 14px "Space Grotesk", Inter, system-ui, sans-serif; }
.variant .rs { font-size: 11.5px; color: var(--faint); }
.variant .trait { font-size: 13px; margin-top: 4px; }
.variant .eff { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.gt { font: 600 12px ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 7px; border-radius: 6px; background: rgba(var(--ov), 0.08); letter-spacing: .08em; }
.spacer { flex: 1; }
.fine { font-size: 11.5px; color: var(--faint); margin: 14px 0 0; }
.cta { display: flex; width: 100%; justify-content: center; padding: 12px; border-radius: 14px; font-weight: 600; background: var(--accent); color: #071018; box-shadow: 0 8px 30px rgba(141, 123, 255, 0.35); margin-top: 12px; }
details.untested summary { cursor: pointer; color: var(--faint); font-size: 12.5px; padding: 8px 0; }
.reveal { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--cyan); }

/* ---------- modal ---------- */
.modal { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: calc(16px + var(--sat)) calc(16px + var(--sar)) calc(16px + var(--sab)) calc(16px + var(--sal)); background: rgba(var(--n4), 0.55); animation: fade .25s ease; }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(480px, 100%); max-height: 100%; overflow-y: auto; padding: 24px; border-radius: 24px; background: var(--glass-strong); border: 1px solid var(--line-strong); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(141, 123, 255, 0.08) inset; }
.modal .close { position: absolute; top: 12px; right: 12px; }
.modal p { margin: 0 0 14px; }
.drop { display: grid; justify-items: center; gap: 4px; padding: 22px 16px; border-radius: 18px; border: 1.5px dashed rgba(141, 123, 255, 0.5); background: rgba(141, 123, 255, 0.06); cursor: pointer; text-align: center; transition: background .2s, border-color .2s; }
.drop:hover, .drop.over { background: rgba(141, 123, 255, 0.14); border-color: var(--cyan); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(62, 230, 255, 0.12); color: var(--cyan); margin-bottom: 6px; }
.drop-title { font-weight: 600; }
.drop-sub { font-size: 12px; color: var(--faint); }
.sample-btn { display: grid; gap: 2px; width: 100%; text-align: left; margin-top: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(var(--ov), 0.03); }
.sample-btn span { font-weight: 600; color: var(--cyan); }
.sample-btn small { color: var(--faint); font-size: 12px; }
.sample-btn:hover { background: rgba(var(--ov), 0.06); }
.toggle { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: 13px; color: var(--muted); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.switch { width: 38px; height: 22px; border-radius: 22px; background: rgba(var(--ov), 0.12); position: relative; flex: none; transition: background .2s; margin-top: -1px; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .25s; }
.toggle input:checked + .switch { background: var(--violet); }
.toggle input:checked + .switch::after { transform: translateX(16px); }
.toggle input:focus-visible + .switch { outline: 2px solid var(--cyan); outline-offset: 2px; }
.progress { margin-top: 14px; }
.progress .bar { height: 6px; border-radius: 6px; background: rgba(var(--ov), 0.08); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .15s; }
.progress span { display: block; font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- loading ---------- */
.loading { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--loading-bg); transition: opacity .6s; }
.loading.done { opacity: 0; pointer-events: none; }
.loader-ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, #3ee6ff, #8d7bff, #ff3d9a); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 1.1s linear infinite; }
.loading-text { font: 500 13px Inter; color: var(--muted); letter-spacing: .04em; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* =========================================================
   Narrow / portrait: bottom sheet
   ========================================================= */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  :root { --peek: 118px; }
  .brand-text { font-size: 15px; }
  .panel {
    left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); top: auto; bottom: 0; width: auto;
    border-radius: 22px 22px 0 0; border-bottom: 0;
    height: calc(var(--peek) + var(--sab));
    padding-bottom: var(--sab);
    background: var(--glass-strong);
  }
  .panel[data-sheet="half"] { height: min(56dvh, 560px); }
  .panel[data-sheet="full"] { height: calc(100dvh - var(--top-h) - var(--sat) - 10px); }
  .panel[data-sheet="peek"] .panel-scroll { overflow: hidden; }
  .sheet-handle { display: grid; place-items: center; height: 26px; width: 100%; flex: none; cursor: grab; touch-action: none; }
  .sheet-handle span { width: 40px; height: 5px; border-radius: 5px; background: rgba(var(--ov), 0.25); }
  .panel-scroll { padding: 2px 16px 18px; }
  .panel h2 { font-size: 20px; }
  .dock { left: calc(8px + var(--sal)); right: calc(8px + var(--sar)); bottom: calc(var(--peek) + var(--sab) + 10px); transition: bottom .45s cubic-bezier(.2, .9, .2, 1), opacity .3s; }
  #app[data-sheet="half"] .dock, #app[data-sheet="full"] .dock { opacity: 0; pointer-events: none; }
  .legend { display: none; }
}
@media (max-width: 420px) {
  .brand-text { display: none; }
  .brand { flex: 0; }
  .topbar { justify-content: space-between; }
  .actions { flex: 0; gap: 0; }
  .topbar { gap: 8px; }
  .topbar .icon-btn { width: 34px; }   /* four icons + the mode switch must fit beside the logo */
  .seg button { padding: 7px 12px; }
}
@media (max-width: 340px) {
  .brand { display: none; }   /* 320 px phones: the logo dot has no room beside the switch and icons */
}

/* Phone landscape: short screens keep the side panel but slimmer */
@media (orientation: landscape) and (max-height: 520px) {
  :root { --top-h: 48px; --panel-w: clamp(260px, 36vw, 340px); --dock-h: 44px; }
  .panel { left: auto; right: calc(8px + var(--sar)); top: calc(var(--top-h) + var(--sat) + 8px); bottom: calc(8px + var(--sab)); width: var(--panel-w); height: auto !important; border-radius: 16px; border-bottom: 1px solid var(--line); padding-bottom: 0; }
  .panel[data-sheet] .panel-scroll { overflow-y: auto; }
  .sheet-handle { display: none !important; }
  .panel-scroll { padding: 12px 14px 16px; }
  .subbar { top: calc(var(--top-h) + var(--sat) + 6px); justify-content: flex-start; padding-left: calc(12px + var(--sal)); right: calc(var(--panel-w) + 20px + var(--sar)); }
  .dock { left: calc(8px + var(--sal)); right: calc(var(--panel-w) + 16px + var(--sar)); bottom: calc(8px + var(--sab)); opacity: 1 !important; pointer-events: auto !important; }
  .legend { display: none; }
  .panel h2 { font-size: 18px; }
  .brand-text { display: inline; font-size: 14px; }
  .seg button { padding: 5px 12px; font-size: 12px; }
}

.inline-legend { display: none; margin: 10px 0 2px; font-size: 11.5px; color: var(--muted); }
.inline-legend .ramp { height: 6px; border-radius: 6px; margin: 4px 0; background: linear-gradient(90deg, #3ee6ff, #8d7bff, #ff3d9a); }
.inline-legend .ends { display: flex; justify-content: space-between; }
.inline-legend .keys { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.inline-legend .keys span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) { .inline-legend { display: block; } }
@media (orientation: landscape) and (max-height: 520px) { .inline-legend { display: block; } }

/* =========================================================
   DNA view
   ========================================================= */
.dna { position: absolute; inset: calc(var(--top-h) + var(--sat)) 0 0 0; z-index: 25; display: flex; flex-direction: column; background: var(--dna-bg); animation: fade .25s ease; }
.dna[hidden] { display: none; }
.dna-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px calc(12px + var(--sar)) 8px calc(12px + var(--sal)); border-bottom: 1px solid var(--line); background: rgba(var(--n0), .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.dna-crumbs { display: flex; align-items: center; gap: 4px; min-width: 0; flex: 1 1 auto; font: 600 13px "Space Grotesk", Inter, system-ui, sans-serif; white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.dna-crumbs::-webkit-scrollbar { display: none; }
.dna-crumbs button, .dna-crumbs span { padding: 6px 10px; border-radius: 999px; color: var(--muted); }
.dna-crumbs button:hover { background: rgba(var(--ov), .06); color: var(--text); }
.dna-crumbs > :last-child { color: var(--text); background: rgba(141,123,255,.16); }
.dna-crumbs i { color: var(--faint); font-style: normal; }
.dna-search { display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 38px; border-radius: 999px; background: rgba(var(--ov), .05); border: 1px solid var(--line); flex: 0 1 300px; min-width: 0; color: var(--muted); }
.dna-search:focus-within { border-color: var(--cyan); }
.dna-search.bad { border-color: #ff4d6d; }
.dna-search svg { width: 16px; height: 16px; flex: none; }
.dna-search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--text); font: 500 14px Inter, system-ui, sans-serif; }
.dna-search input::placeholder { color: var(--faint); }
.dna-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.dna-zoom .icon-btn { background: rgba(var(--n1), .8); border: 1px solid var(--line-strong); color: var(--text); width: 44px; height: 44px; border-radius: 14px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.dna-stage { position: relative; flex: 1; min-height: 0; }
.dna-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.dna-tip { position: absolute; pointer-events: none; transform: translate(12px, 12px); padding: 5px 9px; border-radius: 8px; background: rgba(var(--n3), .9); border: 1px solid var(--line-strong); font-size: 12px; white-space: nowrap; z-index: 2; }
.dna-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.dna-loading[hidden] { display: none; }
.dna-toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); max-width: min(520px, calc(100% - 32px)); padding: 10px 14px; border-radius: 12px; background: var(--toast-bg); border: 1px solid rgba(255,77,109,.5); font-size: 13px; z-index: 3; }
.dna-foot { padding: 10px calc(12px + var(--sar)) calc(10px + var(--sab)) calc(12px + var(--sal)); border-top: 1px solid var(--line); background: rgba(var(--n0), .6); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); display: grid; gap: 8px; }
.dna-card { font-size: 13px; color: var(--text); line-height: 1.5; max-height: 34dvh; overflow-y: auto; }
.dna-card.hint { color: var(--muted); }
.dna-card .dc-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 3px; }
.dna-card .dc-title { font: 700 16px "Space Grotesk", Inter, system-ui, sans-serif; }
.dna-card .dc-rs, .dna-card .dc-sub { font: 500 12px Inter, system-ui, sans-serif; color: var(--faint); }
.dna-card .dc-body { color: var(--muted); }
.dna-card .dc-actions { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
.dna-card .dc-actions button, .dna-card .dc-actions a { padding: 7px 12px; border-radius: 999px; background: rgba(var(--ov), .07); font-size: 12.5px; font-weight: 600; color: var(--text); }
.dna-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 11.5px; color: var(--faint); }
.dna-legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dna-legend i { font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; font-style: normal; color: var(--c); padding: 1px 6px; border-radius: 5px; background: rgba(var(--ov), .05); }
/* letter chips: the same colors the canvas uses (DARK / LIGHT in dnaview.js) */
.dna-legend .b-a { --c: #38e8b0; } .dna-legend .b-c { --c: #4fd8ff; } .dna-legend .b-g { --c: #ffb547; } .dna-legend .b-t { --c: #ff5a7a; }
:root[data-theme="light"] .dna-legend .b-a { --c: #0e9f6e; }
:root[data-theme="light"] .dna-legend .b-c { --c: #0284c7; }
:root[data-theme="light"] .dna-legend .b-g { --c: #b45309; }
:root[data-theme="light"] .dna-legend .b-t { --c: #e11d48; }
.dna-legend i.diff { font-family: Inter, system-ui, sans-serif; font-weight: 500; color: var(--pink-text); border: 1px solid #ff3d9a; background: rgba(255,61,154,.15); }
.zoom-dna { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--cyan); }
.zoom-dna svg { width: 16px; height: 16px; }
body.dna-open .subbar { visibility: hidden; }   /* the top bar stays; the DNA view sits below it */
@media (max-width: 560px) {
  .dna-search { order: 3; flex: 1 1 100%; }
  .dna-crumbs { font-size: 12px; }
  .dna-card { max-height: 28dvh; }
}

/* build stamp: commit + build time, deliberately faint, bottom-right corner above everything */
.build-stamp { position: fixed; z-index: 60; right: calc(6px + var(--sar)); bottom: calc(1px + var(--sab)); font: 500 9px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; color: var(--faint); opacity: 0.45; pointer-events: none; user-select: none; }
@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  /* bottom-sheet layout: the sheet covers the bottom edge, so sit just under the top bar instead */
  .build-stamp { bottom: auto; top: calc(var(--top-h) + var(--sat) + var(--sub-h) + 8px); }
}
@media (orientation: landscape) and (max-height: 520px) {
  /* phone on its side: side panel, not a sheet, so the bottom corner under it is free again */
  .build-stamp { top: auto; bottom: var(--sab); font-size: 8px; line-height: 1; }   /* fits the 8 px gap under the panel */
}