:root {
  color-scheme: dark;
  --bg: #050b15;
  --panel: rgba(10, 21, 39, .83);
  --panel-soft: rgba(13, 28, 49, .72);
  --border: rgba(151, 190, 226, .16);
  --text: #eaf5ff;
  --muted: #8fa8bf;
  --cyan: #43d7ff;
  --blue: #248fe5;
  --violet: #8d75ff;
  --gold: #ffc857;
  --rose: #ff6b82;
  --green: #51e3b6;
  --shadow: 0 18px 55px rgba(0, 0, 0, .34);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 48% 44%, rgba(25,79,128,.24), transparent 36%), radial-gradient(circle at 15% 10%, rgba(102,71,200,.14), transparent 25%), linear-gradient(180deg,#06101f,#03070d); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { position: relative; display: grid; grid-template-rows: 76px 1fr 74px; width: 100vw; height: 100vh; padding: 12px; gap: 10px; }
.glass { background: linear-gradient(145deg, rgba(14,30,52,.88), rgba(6,15,29,.78)); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(22px) saturate(1.2); }
.glass-soft { background: rgba(9, 22, 39, .76); border: 1px solid rgba(148,192,225,.18); box-shadow: 0 12px 30px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.topbar { border-radius: 20px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; }
.brand { display:flex; gap: 12px; align-items:center; }
.brand h1 { margin-top: 4px; }
.brand-mark { width: 42px; height: 42px; border-radius: 14px; position: relative; background: radial-gradient(circle at 40% 35%, #113963, #09172a 64%); border: 1px solid rgba(95,194,255,.35); box-shadow: inset 0 0 20px rgba(70,209,255,.12), 0 0 28px rgba(37,138,255,.14); }
.brand-mark span { position:absolute; border-radius:50%; background: var(--cyan); box-shadow: 0 0 14px currentColor; }
.brand-mark span:nth-child(1){width:8px;height:8px;left:9px;top:22px}.brand-mark span:nth-child(2){width:9px;height:9px;left:25px;top:9px;background:var(--violet)}.brand-mark span:nth-child(3){width:10px;height:10px;left:25px;top:27px;background:var(--gold)}
.brand-mark::before,.brand-mark::after{content:"";position:absolute;height:1px;background:rgba(218,245,255,.55);transform-origin:left}.brand-mark::before{width:20px;left:14px;top:23px;transform:rotate(-38deg)}.brand-mark::after{width:17px;left:14px;top:27px;transform:rotate(17deg)}
.eyebrow,.section-kicker { font-size: 10px; letter-spacing: .18em; color: #7897b3; font-weight: 700; }
h1,h2,p { margin: 0; } h1 { font-size: 21px; line-height: 1.08; letter-spacing: -.025em; } h2 { font-size: 23px; letter-spacing: -.02em; }
.top-actions { display:flex; align-items:center; gap:8px; }
.phenotype-pill { padding: 9px 14px; max-width: 340px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:1px solid rgba(107,166,210,.18); border-radius: 999px; background: rgba(11,27,46,.66); color:#bcd4e6; font-size: 12px; }
.button { border: 1px solid transparent; border-radius: 11px; padding: 9px 14px; cursor:pointer; transition: .2s ease; font-weight:650; font-size:12px; }
.button:hover { transform: translateY(-1px); filter: brightness(1.1); }
.button.primary { color:#03111e; background: linear-gradient(135deg,#50dfff,#7eb5ff); box-shadow: 0 8px 25px rgba(42,177,255,.22); }
.button.secondary { background: rgba(22,48,76,.78); border-color: rgba(112,161,198,.22); color:#d8ebf8; }
.button.wide { width:100%; margin-top:10px; }
.play-icon { font-size:10px; margin-right:4px; }
.workspace { min-height:0; display:grid; grid-template-columns: 238px minmax(0,1fr) 286px; gap:10px; }
.left-panel,.right-panel { border-radius:20px; min-height:0; overflow:auto; padding:18px; scrollbar-width:thin; scrollbar-color:#24496a transparent; }
.left-panel section + section { margin-top:22px; padding-top:20px; border-top:1px solid rgba(144,182,211,.10); }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.metric { padding:10px; border:1px solid rgba(131,180,217,.11); border-radius:12px; background:rgba(9,24,42,.62); }
.metric span { display:block; color:var(--muted); font-size:10px; margin-bottom:5px; }.metric strong { font-size:17px; }
.stage-list { margin-top: 12px; display:flex; flex-direction:column; gap:7px; }
.stage-button { position:relative; display:grid; grid-template-columns:27px 1fr; gap:9px; align-items:center; width:100%; text-align:left; background:transparent; border:0; padding:8px; border-radius:12px; cursor:pointer; color:#9fb4c8; }
.stage-button:hover,.stage-button.active { color:#f0fbff; background:rgba(40,88,126,.24); }
.stage-button .stage-index { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(126,177,216,.25); font-size:10px; }
.stage-button.active .stage-index { color:#06111d; background:var(--cyan); box-shadow:0 0 18px rgba(67,215,255,.35); border-color:transparent; }
.stage-button strong { display:block; font-size:11px; }.stage-button small { display:block; font-size:9px; color:#728aa0; margin-top:2px; }
.science-note { margin-top:10px; color:#7890a4; font-size:10px; line-height:1.5; }
.segmented { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-top:10px; }
#viewScope button:last-child { grid-column: 1 / -1; }
.segmented button { background:rgba(10,25,43,.74); border:1px solid rgba(133,176,208,.13); color:#8299ad; border-radius:9px; padding:7px 4px; font-size:9px; cursor:pointer; }.segmented button.active { color:#e8f8ff; border-color:rgba(72,200,255,.45); background:rgba(27,85,119,.42); }
.toggle-row { display:flex; align-items:center; gap:8px; color:#a9bdce; font-size:10px; margin-top:11px; cursor:pointer; }.toggle-row input { accent-color:#43d7ff; }
.map-panel { position:relative; min-width:0; min-height:0; border:1px solid rgba(134,178,214,.13); border-radius:22px; overflow:hidden; background:radial-gradient(circle at 50% 45%, rgba(20,64,104,.24), rgba(2,8,15,.5) 55%, rgba(1,4,9,.88)); box-shadow:inset 0 0 65px rgba(9,45,78,.22), var(--shadow); }
.map-panel::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.35; background-image: radial-gradient(circle,rgba(180,220,255,.45) 0 1px,transparent 1.2px); background-size: 67px 67px; mask-image: radial-gradient(circle at center,#000,transparent 78%); }
#networkCanvas { display:block; width:100%; height:100%; cursor:grab; } #networkCanvas.dragging{cursor:grabbing}
.map-overlay { position:absolute; z-index:3; }.top-left{top:14px;left:14px}.top-right{top:14px;right:14px}
.search-box { width:210px; height:38px; border-radius:12px; display:flex; align-items:center; padding:0 11px; gap:8px; }.search-box svg{width:16px;fill:none;stroke:#7898b3;stroke-width:2}.search-box input{width:100%;background:none;border:0;outline:0;color:#eaf6ff;font-size:11px}.search-box input::placeholder{color:#668096}
.search-results{position:absolute;top:45px;left:0;width:230px;max-height:280px;overflow:auto;border-radius:12px;padding:6px}.search-results button{width:100%;border:0;background:transparent;color:#c8dceb;text-align:left;padding:8px;border-radius:8px;cursor:pointer;font-size:11px}.search-results button:hover{background:rgba(50,107,145,.34)}.hidden{display:none!important}
.legend { border-radius:13px; padding:9px 11px; display:grid; gap:6px; color:#8ca5b9; font-size:9px; }.legend div{display:flex;align-items:center;gap:7px}.legend-dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor}.legend-dot.shared{color:var(--cyan);background:var(--cyan)}.legend-dot.addition{color:var(--gold);background:var(--gold)}.legend-dot.loss{color:var(--rose);background:var(--rose)}.legend-dot.posterior{color:var(--violet);background:var(--violet)}
.map-hint { position:absolute;z-index:3;left:50%;bottom:15px;transform:translateX(-50%);padding:7px 11px;border-radius:999px;color:#718ba1;font-size:9px;pointer-events:none; }
.stage-title { position:absolute;z-index:3;left:14px;bottom:15px;border-radius:14px;padding:9px 12px;display:flex;align-items:center;gap:10px;pointer-events:none; }.stage-title>span{font-size:22px;font-weight:800;color:rgba(95,213,255,.72)}.stage-title strong{font-size:11px;display:block}.stage-title small{font-size:9px;color:#7690a7;display:block;margin-top:2px}
.right-panel { position:relative; }.empty-inspector{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:20px;color:#8097aa}.empty-inspector h2{margin-top:18px;color:#dceef9;font-size:18px}.empty-inspector p{font-size:11px;line-height:1.6;margin-top:8px;max-width:220px}.orbital-icon{width:82px;height:82px;position:relative;border:1px solid rgba(92,181,236,.25);border-radius:50%;animation:spin 16s linear infinite}.orbital-icon::after{content:"";position:absolute;inset:17px;border:1px dashed rgba(127,107,255,.35);border-radius:50%}.orbital-icon span{position:absolute;width:10px;height:10px;border-radius:50%;box-shadow:0 0 16px currentColor}.orbital-icon span:nth-child(1){left:8px;top:34px;color:var(--cyan);background:var(--cyan)}.orbital-icon span:nth-child(2){right:11px;top:11px;color:var(--violet);background:var(--violet)}.orbital-icon span:nth-child(3){right:8px;bottom:18px;color:var(--gold);background:var(--gold)}@keyframes spin{to{transform:rotate(360deg)}}
.gene-inspector{display:flex;flex-direction:column;gap:16px}.gene-heading{display:flex;justify-content:space-between;align-items:flex-start}.status-chip{padding:6px 9px;border-radius:999px;font-size:9px;font-weight:750;background:#1a344d;color:#b6d0e3}.status-chip.addition{background:rgba(255,200,87,.16);color:#ffd36f}.status-chip.shared{background:rgba(67,215,255,.15);color:#61e0ff}.status-chip.loss{background:rgba(255,107,130,.15);color:#ff8fa1}.status-chip.posterior_only{background:rgba(141,117,255,.18);color:#b8a9ff}
.evidence-card{padding:12px;border-radius:14px}.evidence-row{display:flex;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid rgba(140,180,211,.09);font-size:10px}.evidence-row:last-child{border:0}.evidence-row span{color:#819bb0}.evidence-row strong{font-variant-numeric:tabular-nums}
.why-card{border-left:2px solid rgba(67,215,255,.55);padding-left:12px}.why-card p{font-size:11px;line-height:1.58;color:#a9c0d2;margin-top:7px}.contributor-list{display:flex;flex-direction:column;gap:7px;margin-top:8px}.contributor{display:grid;grid-template-columns:1fr 54px;gap:8px;align-items:center}.contributor-name{font-size:10px;color:#cfe3f1}.contributor-bar{height:5px;background:rgba(88,128,160,.18);border-radius:999px;overflow:hidden}.contributor-bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--cyan));box-shadow:0 0 10px rgba(67,215,255,.35)}
.bottom-dock { border-radius:20px;display:grid;grid-template-columns:245px 1fr 90px;align-items:center;padding:0 18px;gap:16px}.dock-summary{display:flex;align-items:center;gap:9px;color:#8ca4b7;font-size:10px}.dock-summary strong{font-size:15px;color:#eaf6ff}.dock-summary .arrow{color:#4a6983}.dock-positive{color:#ffd36f}.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.timeline-step{height:6px;border-radius:999px;background:rgba(69,105,133,.22);cursor:pointer;position:relative;overflow:hidden}.timeline-step::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:.35s ease}.timeline-step.done::after,.timeline-step.active::after{transform:scaleX(1)}.timeline-step.active{box-shadow:0 0 14px rgba(67,215,255,.25)}
.zoom-controls{display:flex;justify-content:flex-end;gap:6px}.zoom-controls button,.icon-button{width:32px;height:32px;border-radius:10px;border:1px solid rgba(117,166,204,.18);background:rgba(18,42,66,.72);color:#d9eefb;cursor:pointer;font-size:17px}
.data-dialog{width:min(620px,calc(100vw - 30px));border:0;padding:0;background:transparent;color:var(--text)}.data-dialog::backdrop{background:rgba(0,4,10,.76);backdrop-filter:blur(8px)}.dialog-card{background:linear-gradient(145deg,#0d2038,#071323);border:1px solid rgba(140,188,222,.22);border-radius:20px;padding:20px;box-shadow:0 30px 100px rgba(0,0,0,.55)}.dialog-header{display:flex;align-items:center;justify-content:space-between}.tab-row{display:flex;gap:6px;margin:18px 0 12px}.tab-row button{flex:1;border:1px solid rgba(125,171,207,.15);background:rgba(10,27,46,.7);color:#8198aa;border-radius:10px;padding:9px;cursor:pointer}.tab-row button.active{color:#e9f8ff;border-color:rgba(74,207,255,.46);background:rgba(34,89,123,.38)}.tab-content{display:none}.tab-content.active{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tab-content p{grid-column:1/-1;color:#879fb2;font-size:11px;line-height:1.5}.tab-content label{display:flex;flex-direction:column;gap:5px;color:#9cb2c3;font-size:10px}.tab-content input{background:rgba(5,16,29,.68);border:1px solid rgba(119,168,204,.19);color:#dff2ff;border-radius:9px;padding:9px;font-size:10px;min-width:0}.dialog-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin-top:7px}.dialog-status{min-height:18px;margin-top:10px;color:#ffb5c0;font-size:10px}
@media(max-width:1100px){.workspace{grid-template-columns:210px minmax(0,1fr)}.right-panel{display:none}.bottom-dock{grid-template-columns:220px 1fr 75px}}

.synthetic-banner {
  position: absolute;
  z-index: 40;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(680px, calc(100vw - 60px));
  padding: 7px 14px;
  border: 1px solid rgba(255, 176, 32, 0.5);
  border-radius: 999px;
  background: rgba(46, 32, 6, 0.94);
  color: #ffd591;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  pointer-events: none;
}
.synthetic-banner[hidden] {
  display: none;
}

.field-note { color: #7d94a8; font-size: 10px; line-height: 1.5; margin-top: 8px; }
.advanced-inputs { margin-top: 12px; }
.advanced-inputs > summary { cursor: pointer; color: #8fb0c7; font-size: 11px; padding: 6px 0; }

.stage-title .stage-count { display: none; }
.stage-legend { flex: 1 1 auto; min-width: 0; padding: 0 18px; text-align: center; }
.stage-legend strong { display: block; font-size: 10.5px; font-weight: 600; color: #cfe3f3; line-height: 1.45; }
.stage-legend small { display: block; margin-top: 2px; font-size: 9px; color: #7f97ab; }


.cutoff-row { display:block; margin-top:10px; color:#a9bdce; font-size:10px; }
.cutoff-row span { display:block; margin-bottom:5px; }
.cutoff-row strong { color:#8fe6ff; font-variant-numeric:tabular-nums; }
.cutoff-row input[type=range] { width:100%; accent-color:#43d7ff; }
.cutoff-row.hidden { display:none; }

.legend div { justify-content: flex-start; }
.legend strong { margin-left: auto; padding-left: 10px; color: #dceef9; font-variant-numeric: tabular-nums; }
.legend-dot.background { color: #526779; background: #526779; }

.data-panel { position: absolute; z-index: 60; left: 12px; right: 12px; bottom: 12px; height: 46vh;
  border-radius: 20px; display: flex; flex-direction: column; padding: 14px 16px; }
.data-panel[hidden] { display: none; }
.data-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.data-head h2 { font-size: 17px; }
.data-actions { display: flex; align-items: center; gap: 10px; }
.data-actions input[type=text], .data-actions input:not([type]) { height: 30px; border-radius: 9px; border: 1px solid rgba(134,178,214,.22);
  background: rgba(9,22,36,.7); color: #eaf6ff; padding: 0 10px; font-size: 11px; outline: none; }
.data-actions .toggle-row { margin-top: 0; }
.data-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; margin-top: 10px; scrollbar-width: thin; scrollbar-color: #24496a transparent; }
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th { position: sticky; top: 0; background: #0a1826; color: #8fb0c7; text-align: left; font-weight: 600;
  padding: 7px 9px; cursor: pointer; white-space: nowrap; border-bottom: 1px solid rgba(140,180,211,.16); }
.data-table th:hover { color: #cfe7f7; }
.data-table td { padding: 6px 9px; border-bottom: 1px solid rgba(140,180,211,.07); color: #c6dcec;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: rgba(50,107,145,.22); }
.data-table tbody tr.is-selected { background: rgba(67,215,255,.14); }
.rank-up { color: #51e3b6; } .rank-down { color: #ff8fa1; } .rank-flat { color: #6b8296; }
.gene-cell { font-weight: 650; color: #eaf6ff; }
.data-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 10px; font-size: 10px; color: #7f97ab; }
.data-downloads a { color: #6fd4ff; text-decoration: none; margin-left: 10px; }
.data-downloads a:hover { text-decoration: underline; }
.data-downloads a.disabled { color: #4a5f72; pointer-events: none; }

.legend-dot.selected { color: #ffc857; background: #ffc857; }

/* Hover explanations for the terms that are internal vocabulary. The label
   stays short and the definition appears only when someone asks for it.

   The left panel scrolls, so it clips anything that reaches past its edges. The
   bubble is therefore anchored to the row or the button group rather than to
   the word, and spans exactly that width, which keeps it inside the panel. */
.segmented, .toggle-row, .cutoff-row { position: relative; }
.segmented button[data-tip], .toggle-row span[data-tip], .cutoff-row span[data-tip] { position: static; }
[data-tip] { cursor: help; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; left: 0; right: 0; bottom: calc(100% + 7px); z-index: 60;
  box-sizing: border-box; padding: 8px 10px;
  border: 1px solid rgba(112,166,210,.34); border-radius: 9px;
  background: rgba(8,20,35,.97); color: #d8ebf8;
  font-size: 10px; line-height: 1.45; font-weight: 400; text-align: left;
  white-space: normal; letter-spacing: 0;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease; pointer-events: none;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* The fit blocks the server for the whole run, so it cannot report real
   progress. The bar tracks elapsed time against a typical run and says so,
   rather than pretending to know how far along the computation is. */
.run-progress { margin-top: 12px; }
.run-bar { height: 4px; border-radius: 999px; background: rgba(120,170,210,.16); overflow: hidden; }
.run-bar span { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg,#50dfff,#7eb5ff); transition: width .45s linear; }
.run-progress-text { margin-top: 7px; font-size: 10px; color: #8ca4b7; }

/* ---- guide, contributor detail and figure mode --------------------------- */
.link-button { background:none; border:0; padding:0; margin-left:4px; color:#5fc6f0; font:inherit; text-decoration:underline; cursor:pointer; }
.link-button:hover { color:#9fe4ff; }

.help-dialog { width:min(760px, calc(100vw - 30px)); }
.help-body { max-height:min(70vh, 640px); overflow:auto; margin-top:16px; padding-right:6px; }
.help-body h3 { margin:18px 0 6px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#8fd4f5; }
.help-body h3:first-child { margin-top:0; }
.help-body p { margin:0 0 8px; color:#a5bcce; font-size:11.5px; line-height:1.62; }
.help-body ul { margin:0 0 8px; padding-left:16px; }
.help-body li { color:#a5bcce; font-size:11.5px; line-height:1.62; margin-bottom:5px; }
.help-body strong { color:#dcefff; font-weight:600; }
.help-body .help-eq { display:block; white-space:pre-wrap; margin:6px 0 10px; padding:9px 11px; border-radius:9px; background:rgba(6,20,35,.72);
  border:1px solid rgba(120,170,206,.16); color:#cfe6f6; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; line-height:1.6; }
.help-body .help-caution { border-left:2px solid rgba(255,150,110,.6); padding-left:10px; color:#e3b9a6; }
.help-body .help-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin:4px 0 10px; }
.help-body .help-fact { background:rgba(8,24,41,.66); border:1px solid rgba(120,170,206,.14); border-radius:10px; padding:9px 10px; }
.help-body .help-fact span { display:block; font-size:9px; letter-spacing:.05em; text-transform:uppercase; color:#7c95a9; }
.help-body .help-fact strong { display:block; margin-top:3px; font-size:14px; color:#e6f6ff; font-weight:600; }
.help-body .help-fact small { display:block; margin-top:3px; font-size:9.5px; color:#7f97ab; line-height:1.45; }

.contributor-share { font-size:9px; color:#7f97ab; margin-left:6px; }
.contributor-samechr { color:#e0a98d; }

.button.wide + .button.wide { margin-top:8px; }

/* Figure mode previews exactly what the export contains, so the overlays the
   canvas key already reproduces step out of the way. */
body.figure-mode .map-overlay.legend,
body.figure-mode .map-hint,
body.figure-mode .stage-title { display:none; }

/* Phones. Stacking the three desktop columns made every control a scroll away
   from the map, so the page is a fixed screen again. The map holds it, the
   stage strip and the two sheet buttons are always in reach at the bottom, and
   the panels arrive as sheets over the map instead of below it. */
@media(max-width:760px){
  html,body{height:100%;overflow:hidden}
  /* A column, not named grid rows. The banner is only present for the
     demonstration, and counting rows made the map inherit whichever row was
     left over, which collapsed it to nothing whenever the banner was absent. */
  .app-shell{display:flex;flex-direction:column;
             height:100vh;height:100dvh;padding:6px;gap:6px}
  .topbar,.synthetic-banner{flex:0 0 auto}
  .topbar{flex-wrap:nowrap;gap:8px;padding:8px 10px;overflow:hidden}
  .brand{flex:0 0 auto;min-width:0}
  .brand h1{font-size:15px;white-space:nowrap}
  .brand .eyebrow{display:none}
  .phenotype-pill{display:none}
  /* Five actions do not fit across a phone, so they scroll sideways rather
     than wrap into rows that eat the map. */
  .top-actions{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;
               gap:6px;padding-bottom:2px;scrollbar-width:none}
  .top-actions::-webkit-scrollbar{display:none}
  .top-actions button{flex:0 0 auto;font-size:11px;padding:7px 11px;white-space:nowrap}
  .synthetic-banner{position:static;transform:none;max-width:100%;border-radius:12px;
                    margin:0;padding:5px 10px;font-size:10px}
  .workspace{display:block;position:relative;flex:1 1 auto;min-height:0}
  .map-panel{position:absolute;inset:0;height:auto}
  .map-panel canvas{touch-action:none}
  .bottom-dock,.legend{display:none}
  /* The caption used to sit at the foot of the map, which is exactly where the
     bar now is, so it moved to the top and carries the count the dock held. */
  .stage-title{top:60px;bottom:auto;left:12px;right:12px;max-width:none}
  .stage-title strong{font-size:12px}
  .stage-title small{font-size:9.5px}
  .stage-title .stage-count{display:block;margin-top:4px;color:#93aec4;line-height:1.35}
  /* Its wording is a mouse's, and the map hint has no room here anyway. */
  .map-hint{display:none}
  /* The stage buttons are already across the bar, so the copy inside the sheet
     is one more of the same list. The note under it is not, and stays. */
  #stageList{display:none}

  /* Both panels become sheets. They keep their own scrolling and stop short of
     the bar so nothing is trapped underneath it. */
  .left-panel,.right-panel{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    max-height:74vh;max-height:74dvh;overflow:auto;border-radius:22px 22px 0 0;
    padding:16px 16px 108px;transform:translateY(103%);
    transition:transform .26s cubic-bezier(.32,.72,0,1);will-change:transform}
  .left-panel.sheet-open,.right-panel.sheet-open{transform:translateY(0)}
  /* The handle is a bar the sheet can be held by. It takes the vertical
     gesture outright, which is what lets a drag beat the scrolling below it,
     and it carries a close button for anyone who would rather tap. */
  .sheet-handle{position:sticky;top:-16px;z-index:2;display:flex;align-items:center;
    justify-content:center;margin:-16px -16px 8px;padding:12px 16px 10px;
    touch-action:none;cursor:grab;
    background:linear-gradient(180deg,rgba(11,26,45,.98),rgba(11,26,45,.86));
    backdrop-filter:blur(10px)}
  .sheet-grip{display:block;width:44px;height:5px;border-radius:999px;
              background:rgba(148,192,225,.5)}
  .sheet-close{position:absolute;right:12px;top:8px;width:32px;height:32px;
    border:1px solid rgba(107,166,210,.24);border-radius:50%;
    background:rgba(11,27,46,.7);color:#cfe3f1;font-size:13px;line-height:1;cursor:pointer}
  .left-panel,.right-panel{overscroll-behavior:contain}
  .left-panel.sheet-dragging,.right-panel.sheet-dragging{transition:none}
  .sheet-backdrop{position:fixed;inset:0;z-index:55;background:rgba(2,6,12,.5);
    opacity:0;pointer-events:none;transition:opacity .26s ease}
  .sheet-backdrop.on{opacity:1;pointer-events:auto}

  /* The bar is the whole navigation. Stage first, because that is the story. */
  .mobile-bar{position:fixed;left:6px;right:6px;bottom:6px;z-index:70;
    display:flex;flex-direction:column;gap:7px;padding:8px;border-radius:18px}
  .mobile-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
  .mobile-step{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
    border:1px solid rgba(107,166,210,.2);border-radius:12px;background:rgba(11,27,46,.6);
    color:#8ca4b7;padding:6px 2px;cursor:pointer}
  .mobile-step strong{font-size:12px;line-height:1}
  .mobile-step span{font-size:8px;line-height:1.15;text-align:center;
    width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mobile-step.active{color:#eaf6ff;border-color:rgba(67,215,255,.5);
    background:linear-gradient(180deg,rgba(30,86,132,.7),rgba(14,40,66,.7));
    box-shadow:0 0 14px rgba(67,215,255,.2)}
  .mobile-actions{display:flex;gap:6px;align-items:stretch}
  .mobile-actions button{flex:1 1 auto;border:1px solid rgba(107,166,210,.2);
    border-radius:12px;background:rgba(11,27,46,.6);color:#cfe3f1;
    font-size:11px;font-weight:600;padding:9px 6px;cursor:pointer}
  .mobile-actions button.zoom{flex:0 0 40px;font-size:15px;font-weight:400}
  .mobile-actions button.active{color:#04121f;background:linear-gradient(135deg,#7ce6ff,#63b8ff);
    border-color:transparent}
  .mobile-actions button[disabled]{opacity:.4}
}
@media(min-width:761px){
  .mobile-bar,.sheet-backdrop,.sheet-handle{display:none}
  /* The stage list in the left panel names the stage and the dock spells out
     what it shows, so a caption drawn over the map repeats both. It also grew
     wide enough to sit on top of the gesture hint. */
  .stage-title{display:none}
}