:root{
  --rail-w:344px;
  --bg0:#04050a;
  --glass:rgba(11,15,25,.82);
  --card:rgba(255,255,255,.025);
  --stroke:rgba(120,165,225,.16);
  --stroke-bright:rgba(150,195,255,.34);
  --txt:#d3dcec; --dim:#8a98b2; --faint:#5d6781;
  --cyan:#5fd6ea; --cyan-deep:#2aa7c4;
  --amber:#ffb347; --hot:#ff6048; --cold:#5a8bff;
  --mono:ui-monospace,"SF Mono",Menlo,"Cascadia Code",Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--sans);color:var(--txt);background:var(--bg0);overflow:hidden;-webkit-font-smoothing:antialiased}
button{font-family:inherit}

/* ---------- stage (full-bleed globe) ---------- */
#scene{position:fixed;inset:0;z-index:0;touch-action:none;cursor:grab;
  background:radial-gradient(1100px 820px at 50% 42%,#0c1224 0%,#05060c 72%)}
#scene:active{cursor:grabbing}
canvas{display:block}

.stage-depth{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;
  display:flex;align-items:baseline;gap:10px;opacity:.92}
.stage-depth #sd-km{font-family:var(--mono);font-size:28px;font-weight:600;color:#eaf6ff;text-shadow:0 0 20px rgba(95,214,234,.4)}
.stage-depth .sd-unit{font-family:var(--mono);font-size:12px;color:var(--dim)}
.stage-depth .sd-layer{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.04em;border-left:1px solid var(--stroke);padding-left:10px}
.drill-status{position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--cyan,#5fd6ea);opacity:0;transition:opacity .25s}
.drill-status.on{opacity:.8}
.band-readout{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--cyan,#5fd6ea);opacity:0;transition:opacity .25s}
.band-readout.on{opacity:.8}
.toggle span em{font-style:normal;font-size:8px;color:var(--amber);opacity:.7;vertical-align:super;margin-left:1px}

/* ---------- floating glass HUD (two loose columns of panes) ---------- */
.hud{position:fixed;top:14px;bottom:14px;width:306px;z-index:5;display:flex;flex-direction:column;gap:12px;
  pointer-events:none;
  overflow-y:auto;overflow-x:visible;overscroll-behavior:contain;   /* invisible scroll area */
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:8px}
.hud::-webkit-scrollbar{width:0;height:0;display:none}
.hud-left{left:14px}
.hud-right{right:14px}
.hud>*{pointer-events:auto;flex:0 0 auto}                            /* cards keep natural height; the column scrolls */
/* left column: the brand pane stays pinned and the rest scrolls UNDER it */
.hud-left .brand-card{position:sticky;top:0;z-index:6;
  background:linear-gradient(158deg,rgba(20,27,44,.92),rgba(8,11,20,.88))}

.card{position:relative;border-radius:16px;padding:13px 15px;
  background:linear-gradient(158deg,rgba(30,38,58,.46),rgba(10,14,24,.38));
  border:1px solid rgba(150,195,255,.16);
  box-shadow:0 18px 46px -22px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%)}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.card-title{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cyan);text-transform:uppercase;font-weight:600}

.brand{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.brand-mark{width:32px;height:32px;border-radius:50%;flex:0 0 auto;position:relative;
  background:radial-gradient(circle at 38% 34%,#fff 0%,var(--amber) 16%,var(--hot) 40%,#7a1f3a 66%,#160a14 100%);
  box-shadow:0 0 20px rgba(255,120,90,.45),inset 0 0 8px rgba(0,0,0,.6);animation:pulse 5s ease-in-out infinite}
.brand-mark::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(120,200,255,.3)}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.22)}}
.brand h1{margin:0;font-size:17px;letter-spacing:.30em;font-weight:600;
  background:linear-gradient(90deg,#eaf3ff,#8fc6e6);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{margin:2px 0 0;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;color:var(--dim)}
.rail-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.gh-link{display:block;margin-top:9px;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  color:var(--faint);text-decoration:none;border:1px solid var(--stroke);border-radius:9px;padding:6px 8px;transition:.16s}
.gh-link:hover{color:var(--cyan);border-color:var(--stroke-bright);background:rgba(95,214,234,.08)}

.btn{font-family:var(--mono);font-size:11px;letter-spacing:.02em;color:var(--txt);cursor:pointer;
  background:rgba(120,160,220,.10);border:1px solid var(--stroke);border-radius:9px;padding:7px 9px;transition:.16s;text-align:center}
.btn:hover{background:rgba(120,160,220,.2);border-color:var(--stroke-bright);color:#eaf6ff}
.btn.primary{background:linear-gradient(180deg,rgba(95,214,234,.24),rgba(95,214,234,.08));border-color:var(--stroke-bright);color:#dffaff}
.btn.primary:hover{background:linear-gradient(180deg,rgba(95,214,234,.36),rgba(95,214,234,.14))}
.btn.big{padding:11px 16px;font-size:13px}

/* info tooltip */
.info{font-size:11px;color:var(--faint);cursor:help;position:relative;border:1px solid var(--stroke);border-radius:50%;
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;outline:none}
.info:hover,.info:focus{color:var(--cyan);border-color:var(--cyan)}
.info::after{content:attr(data-tip);position:absolute;top:120%;right:0;width:230px;z-index:30;
  background:#0c1322;border:1px solid var(--stroke-bright);border-radius:9px;padding:9px 11px;
  font-size:11.5px;line-height:1.5;color:var(--txt);letter-spacing:0;text-transform:none;font-weight:400;
  box-shadow:0 14px 36px -12px rgba(0,0,0,.85);opacity:0;transform:translateY(-4px);pointer-events:none;transition:.16s}
.info:hover::after,.info:focus::after{opacity:1;transform:translateY(0)}

/* ---------- depth ---------- */
.depth-big{display:flex;align-items:baseline;gap:6px}
.depth-big #depth-km{font-family:var(--mono);font-size:44px;line-height:.9;font-weight:600;color:#eaf6ff;text-shadow:0 0 20px rgba(95,214,234,.3)}
.depth-unit{font-family:var(--mono);font-size:15px;color:var(--dim)}
.depth-layer{font-family:var(--mono);font-size:12px;color:var(--amber);letter-spacing:.02em;margin:5px 0 12px}

.slider{-webkit-appearance:none;appearance:none;width:100%;height:5px;border-radius:6px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--cyan-deep),rgba(120,160,220,.18))}
.slider::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:17px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff,#9fe6f5 40%,#2aa7c4 100%);border:1px solid #cfeefb;box-shadow:0 0 12px rgba(95,214,234,.7)}
.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:1px solid #cfeefb;background:#7fdcef;box-shadow:0 0 12px rgba(95,214,234,.7);cursor:pointer}

.depth-rail{position:relative;height:13px;border-radius:7px;margin:11px 0 4px;border:1px solid var(--stroke);overflow:hidden}
.depth-rail .rail-fill{position:absolute;inset:0}
.depth-rail .rail-cursor{position:absolute;top:-2px;bottom:-2px;width:2px;background:#fff;box-shadow:0 0 9px #fff,0 0 4px var(--cyan);transition:left .1s linear}
.depth-ticks{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.depth-ticks .tick{font-family:var(--mono);font-size:9.5px;color:var(--dim);background:rgba(120,160,220,.07);
  border:1px solid var(--stroke);border-radius:20px;padding:3px 8px;cursor:pointer;transition:.14s;white-space:nowrap}
.depth-ticks .tick:hover{color:#eaf6ff;border-color:var(--cyan);background:rgba(95,214,234,.12)}
.depth-ticks .tick.on{color:#04111a;background:var(--cyan);border-color:var(--cyan);font-weight:600}

.depth-controls{display:flex;gap:7px;margin-top:12px}
.mini{font-family:var(--mono);font-size:12px;color:var(--txt);background:rgba(120,160,220,.08);
  border:1px solid var(--stroke);border-radius:8px;padding:7px 0;cursor:pointer;flex:0 0 40px;transition:.14s}
.mini.wide{flex:1}
.mini:hover{background:rgba(95,214,234,.16);border-color:var(--stroke-bright);color:#eaf6ff}

/* ---------- segmented ---------- */
.segmented{display:flex;border:1px solid var(--stroke);border-radius:9px;overflow:hidden;margin-bottom:12px}
.segmented button{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding:8px 6px;border:0;background:transparent;color:var(--dim);cursor:pointer;transition:.15s}
.segmented button.active{background:linear-gradient(180deg,rgba(95,214,234,.22),rgba(95,214,234,.07));color:#eaf6ff}

/* ---------- legend ---------- */
.legend-bar{height:12px;border-radius:6px;border:1px solid var(--stroke)}
.dvs-bar{background:linear-gradient(90deg,#c0202e 0%,#ff5e5e 17%,#ffb08a 33%,#eef2f6 50%,#9ec4ff 67%,#5a8bff 83%,#1438b0 100%)}
.legend-ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--dim);margin:4px 1px 10px}
.legend-key{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
/* swatch sits to the left (absolute) so the description flows as normal inline text
   — making the <li> a flex container turned every inline <b>/word into its own item */
.legend-key li{font-size:11.5px;line-height:1.45;color:var(--txt);position:relative;padding-left:20px}
.legend-key li .sw{position:absolute;left:0;top:4px;margin:0}
.legend-key b{color:#eaf3ff;font-weight:600}
.sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto;margin-top:2px;box-shadow:0 0 7px currentColor}
.sw.hot{background:#ff5340;color:#ff5340}.sw.cold{background:#5a8bff;color:#5a8bff}
.sw.faint{background:linear-gradient(90deg,#5a8bff66,transparent);box-shadow:none;border:1px solid var(--stroke)}
.sw.hatch{background:repeating-linear-gradient(45deg,#9aa3b6 0 1.5px,transparent 1.5px 3.5px);box-shadow:none;border:1px solid var(--stroke)}
.legend-key.chips li{font-size:11px;color:var(--dim)}
.legend-foot{font-size:10.5px;color:var(--faint);font-style:italic;margin:9px 0 0}
#datasrc{margin-top:9px}
.src-note{font-size:10px;line-height:1.45;color:var(--faint);font-style:italic;margin:8px 0 2px}
.legend-lead{font-size:11px;line-height:1.5;color:var(--dim);margin-bottom:9px}
.legend-lead b{color:#eaf3ff}.legend-lead em{font-style:italic;color:#cdd8ea}

/* hover tooltip */
.tip{position:fixed;z-index:25;max-width:232px;pointer-events:none;
  background:rgba(9,13,22,.95);border:1px solid var(--stroke-bright);border-radius:9px;padding:8px 10px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.85)}
.tip b{display:block;font-size:12.5px;color:#eaf3ff;margin-bottom:3px}
.tip .tip-type{display:block;font-family:var(--mono);font-size:10px;color:var(--cyan)}
.tip .tip-d{display:block;font-family:var(--mono);font-size:9.5px;color:var(--faint);margin-top:3px}

/* extracted-feature panel */
.focus-card{position:fixed;right:14px;top:14px;z-index:12;width:306px;padding:16px;border-radius:16px;
  border:1px solid var(--stroke-bright);background:rgba(11,15,25,.9);box-shadow:var(--shadow);
  backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%)}
body.focusing .hud-right{opacity:0;pointer-events:none;transition:opacity .25s}
.focus-card .btn{margin-bottom:12px;width:100%;text-align:center}
.focus-card .kicker{display:block;margin-bottom:5px}
.focus-card h3{margin:0 0 8px;font-size:18px;color:#eaf3ff}
#focus-meaning{font-size:13px;line-height:1.6;color:var(--txt);margin:0 0 12px}
.focus-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.focus-rows div{background:rgba(120,160,220,.05);border:1px solid var(--stroke);border-radius:9px;padding:8px 10px}
.focus-rows span{display:block;font-family:var(--mono);font-size:9px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.focus-rows b{font-family:var(--mono);font-size:11.5px;color:#e7f1ff}
.focus-src{border-top:1px solid var(--stroke);padding-top:10px}
.focus-src p{font-size:11.5px;line-height:1.5;color:var(--dim);margin:5px 0 0}
#focus-src a{display:block;color:var(--cyan);font-size:11.5px;line-height:1.45;text-decoration:none;padding:5px 0;border-bottom:1px solid rgba(120,160,220,.08)}
#focus-src a:last-child{border-bottom:0}
#focus-src a:hover{color:#bfefff;text-decoration:underline}
.focus-hint{font-size:10px;color:var(--faint);font-style:italic;margin:12px 0 0;line-height:1.45}

/* glossary */
.gloss-body{display:flex;flex-direction:column;gap:14px;margin-top:8px;max-height:60vh;overflow:auto;padding-right:6px}
.gloss-item{display:flex;gap:12px;align-items:flex-start}
.gloss-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;margin-top:3px;box-shadow:0 0 9px currentColor}
.gloss-txt{flex:1}
.gloss-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.gloss-head b{font-size:14px;color:#eaf3ff}
.gloss-nat{font-family:var(--mono);font-size:10px;color:var(--cyan)}
.gloss-depth{font-family:var(--mono);font-size:10px;color:var(--faint);margin:2px 0 4px}
.gloss-mean{font-size:12.5px;line-height:1.55;color:var(--txt)}

/* ---------- features + readout ---------- */
.sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;margin:2px 0 7px;display:flex;align-items:center;gap:7px}
.sub.model-sub{margin-top:14px}
.feature-list{list-style:none;margin:0;padding:0;max-height:138px;overflow:auto}
.feature-list li{display:flex;align-items:center;gap:8px;font-size:12px;padding:4px 0;color:var(--txt);border-bottom:1px solid rgba(120,160,220,.06)}
.feature-list li .swatch{width:9px;height:9px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 7px currentColor}
.feature-list li .ftype{font-family:var(--mono);font-size:8.5px;color:var(--faint);margin-left:auto;text-transform:uppercase;letter-spacing:.05em}
.feature-list li.muted{color:var(--faint);border:0;font-style:italic}

.readout{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.ro{background:rgba(120,160,220,.05);border:1px solid var(--stroke);border-radius:9px;padding:8px 10px}
.ro-v{display:block;font-family:var(--mono);font-size:16px;color:#eaf3ff;margin-bottom:2px}
.ro-k{font-size:9.5px;color:var(--dim);line-height:1.35;display:block}
.ro-k em{color:var(--faint);font-style:italic}

.coverage{margin-top:12px}
.coverage-top{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-bottom:5px}
.coverage-top span:last-child{font-family:var(--mono);color:#eaf3ff}
.coverage-bar{height:7px;border-radius:5px;background:rgba(120,160,220,.12);overflow:hidden}
.coverage-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,#3a6c8a,var(--cyan));transition:width .2s,background .2s}
.coverage-foot{font-size:10px;color:var(--faint);font-style:italic;margin-top:5px}

.temp-big{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;padding:10px 12px;border-radius:10px;
  background:linear-gradient(100deg,rgba(255,120,70,.16),rgba(255,160,90,.03));border:1px solid rgba(255,150,90,.30)}
.temp-big #ro-temp{font-family:var(--mono);font-size:20px;color:#ffd9a8;text-shadow:0 0 16px rgba(255,140,80,.45)}
.temp-meta{display:flex;flex-direction:column;gap:1px}
.temp-cap{font-size:10px;color:var(--dim);letter-spacing:.02em;font-style:italic}
.readout3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.readout3 .ro{padding:7px 9px}
.readout3 .ro-v{font-size:14px}
.know-sub{margin-top:14px}
.know{font-size:12px;line-height:1.55;color:var(--txt)}

/* ---------- data pipeline ---------- */
.model-groups{display:flex;gap:14px;margin:0 0 8px}
.model-all{font-family:var(--mono);font-size:10px;letter-spacing:.06em}
.model-list{max-height:160px;overflow:auto;margin:2px 0 4px;padding-right:6px;
  border-top:1px solid var(--stroke);border-bottom:1px solid var(--stroke)}
.model-list .model-grp{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--faint);
  text-transform:uppercase;margin:9px 0 4px;position:sticky;top:0;background:rgba(11,15,25,.7);backdrop-filter:blur(4px)}
.model-list .model-grp:first-child{margin-top:5px}
.model-row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--dim);cursor:pointer;padding:3px 0}
.model-row:hover{color:var(--txt)}
.model-row input{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:4px;flex:0 0 auto;
  background:rgba(120,160,220,.18);border:1px solid var(--stroke);cursor:pointer;position:relative;transition:.15s}
.model-row input:checked{background:linear-gradient(180deg,var(--cyan),var(--cyan-deep));border-color:var(--cyan)}
.model-row input:checked::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #04111a;border-width:0 2px 2px 0;transform:rotate(45deg)}
.model-row .model-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.model-tag{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.04em;flex:0 0 auto;
  border-radius:4px;padding:1px 5px;text-transform:uppercase}
.model-tag.s{color:#bfefff;background:rgba(95,214,234,.16);border:1px solid rgba(95,214,234,.4)}
.model-tag.p{color:#ffd9a8;background:rgba(255,150,90,.14);border:1px solid rgba(255,150,90,.4)}
.normalize-toggle{display:flex;margin:9px 0 2px;font-size:11.5px}
.ctl .clus-val{font-family:var(--mono);font-size:10px;color:#eaf3ff;min-width:30px;text-align:right;white-space:nowrap}
.ctl .slider.clus{max-width:120px}
#vizmode{margin-bottom:2px}

/* ---------- toggles + advanced ---------- */
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.toggle{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--dim);cursor:pointer;min-width:0}
.toggle span{min-width:0}
.toggle input{appearance:none;-webkit-appearance:none;width:28px;height:15px;border-radius:9px;position:relative;flex:0 0 auto;
  background:rgba(120,160,220,.2);border:1px solid var(--stroke);transition:.18s;cursor:pointer}
.toggle input::after{content:"";position:absolute;top:1px;left:1px;width:11px;height:11px;border-radius:50%;background:#8fa1bd;transition:.18s}
.toggle input:checked{background:linear-gradient(90deg,var(--cyan-deep),var(--cyan))}
.toggle input:checked::after{left:14px;background:#eafcff}
.toggle:hover{color:var(--txt)}

.advanced{margin-top:13px;border-top:1px solid var(--stroke);padding-top:10px}
.advanced summary{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);cursor:pointer;list-style:none}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{content:"▸ ";color:var(--faint)}
.advanced[open] summary::before{content:"▾ "}
.ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.ctl span{font-family:var(--mono);font-size:10px;color:var(--dim);white-space:nowrap}
.ctl .slider{max-width:150px}
.ctl.master{margin:2px 0 9px}
.ctl.master span{color:var(--cyan);font-size:10.5px}
.dial-grp{font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;margin:11px 0 3px;border-bottom:1px solid var(--stroke);padding-bottom:3px}

/* ---------- presets ---------- */
#preset-card{transition:box-shadow .35s,border-color .35s}
#preset-card.applied{animation:preset-pulse .7s ease-out}
@keyframes preset-pulse{0%{box-shadow:0 0 0 0 rgba(95,214,234,.5)}100%{box-shadow:0 18px 46px -22px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.06)}}
.preset-list{list-style:none;margin:0 0 11px;padding:0;max-height:172px;overflow:auto;display:flex;flex-direction:column;gap:6px}
.preset-row{display:flex;align-items:center;gap:7px;background:rgba(120,160,220,.05);
  border:1px solid var(--stroke);border-radius:9px;padding:3px 5px 3px 4px}
.preset-row:hover{border-color:var(--stroke-bright)}
.preset-star{flex:0 0 auto;background:none;border:0;cursor:pointer;font-size:13px;line-height:1;color:var(--faint);padding:4px 2px;transition:.14s}
.preset-star:hover{color:var(--amber)}
.preset-star.on{color:var(--amber);text-shadow:0 0 8px rgba(255,179,71,.6)}
.preset-load{flex:1;min-width:0;text-align:left;background:none;border:0;cursor:pointer;
  font-family:var(--sans);font-size:12px;color:var(--txt);padding:5px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preset-load:hover{color:#eaf6ff}
.preset-del{flex:0 0 auto;background:none;border:0;cursor:pointer;font-family:var(--mono);font-size:11px;color:var(--faint);padding:4px 5px;border-radius:6px;transition:.14s}
.preset-del:hover{color:var(--hot);background:rgba(255,96,72,.12)}
.preset-empty{font-size:11px;color:var(--faint);font-style:italic;line-height:1.45;padding:2px 0}
.preset-save{display:flex;gap:7px}
.preset-input{flex:1;min-width:0;font-family:var(--sans);font-size:12px;color:var(--txt);
  background:rgba(120,160,220,.07);border:1px solid var(--stroke);border-radius:9px;padding:7px 10px;outline:none;transition:.14s}
.preset-input::placeholder{color:var(--faint)}
.preset-input:focus{border-color:var(--stroke-bright);background:rgba(120,160,220,.12)}
.preset-save .btn{flex:0 0 auto}
.preset-share{width:100%;margin-top:8px}

.rail-foot{font-size:10.5px;line-height:1.5;color:var(--faint);margin:13px 0 0}
.rail-foot em{font-style:italic;color:var(--dim)}
.linkish{background:none;border:0;color:var(--cyan);cursor:pointer;font-size:10.5px;padding:0;text-decoration:underline}

/* ---------- tour caption ---------- */
.tour{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;width:min(620px,70vw);z-index:8;display:flex;justify-content:center;pointer-events:none}
.tour-card{pointer-events:auto;max-width:560px;width:100%;background:rgba(9,13,22,.9);backdrop-filter:blur(12px);
  border:1px solid var(--stroke-bright);border-radius:14px;padding:15px 18px;box-shadow:0 18px 50px -18px rgba(0,0,0,.85)}
.tour-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px}
.tour-meta #tour-step{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--cyan)}
.tour-x{background:none;border:0;color:var(--dim);font-size:11px;font-family:var(--mono);cursor:pointer}
.tour-x:hover{color:#fff}
.tour-card h3{margin:0 0 5px;font-size:17px;color:#eaf3ff}
.tour-card p{margin:0;font-size:13.5px;line-height:1.55;color:var(--txt)}

/* ---------- guide modal ---------- */
.modal-wrap{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:22px;
  background:rgba(2,4,9,.66);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal{position:relative;max-width:680px;max-height:88vh;overflow:auto;padding:30px 34px;border-radius:18px;
  border:1px solid var(--stroke-bright);background:rgba(13,18,30,.94)}
.modal .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;color:var(--cyan)}
.modal h2{margin:8px 0 14px;font-size:25px;color:#eaf3ff}
.modal h2 em,.modal p em{font-style:italic;color:#dfe9f8}
.modal>p{font-size:14px;line-height:1.62;color:var(--txt);margin:0 0 16px}
.guide-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
.g-card{border:1px solid var(--stroke);border-radius:13px;padding:15px 16px;background:rgba(255,255,255,.02)}
.g-card.scan{border-color:rgba(150,195,255,.34)}
.g-card.model{border-color:rgba(255,160,90,.3)}
.g-card h4{margin:0 0 8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#eaf3ff}
.g-card.model h4{color:#ffc08a}
.g-card p{font-size:12.5px;line-height:1.55;color:var(--txt);margin:0 0 8px}
.g-card p:last-child{margin:0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:baseline}
.dot.hot{background:#ff5340;box-shadow:0 0 7px #ff5340}.dot.cold{background:#5a8bff;box-shadow:0 0 7px #5a8bff}
.dot.faint{background:#5a8bff44;border:1px solid var(--stroke)}
.guide-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.guide-cta-row .btn{flex:1;min-width:200px}
.modal-close{position:absolute;top:15px;right:17px;background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer}
.modal-close:hover{color:#fff}
.credits{font-size:11px;color:var(--faint);line-height:1.6}

/* ---------- loading ---------- */
.overlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:radial-gradient(800px 600px at 50% 50%,#0a1020,#04050a);transition:opacity .8s ease}
.overlay.hide{opacity:0;pointer-events:none}
.loading-core{width:64px;height:64px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 38% 34%,#fff,#ffb347 18%,#ff5e5e 42%,#7a1f3a 70%,#160a14 100%);
  box-shadow:0 0 46px rgba(255,110,80,.5);animation:pulse 2.6s ease-in-out infinite}
.loading-core::after{content:"";position:absolute;inset:-13px;border-radius:50%;border:1px solid rgba(120,200,255,.4);border-top-color:transparent;animation:spin 1.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--cyan)}
.dots::after{content:"";animation:dots 1.4s steps(4,end) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

.hidden{display:none!important}

.depth-note{font-size:11px;line-height:1.5;color:var(--dim);font-style:italic;margin-top:11px;border-top:1px solid var(--stroke);padding-top:9px}

/* ---------- data sources modal ---------- */
.data-body{max-height:62vh;overflow:auto;margin-top:8px;padding-right:6px}
.data-cat{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);text-transform:uppercase;
  margin:18px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--stroke)}
.data-cat:first-child{margin-top:4px}
.data-item{border-left:2px solid var(--stroke);padding:1px 0 9px 12px;margin-bottom:9px}
.data-item b{color:#eaf3ff;font-size:13px}
.data-item .di-meta{font-family:var(--mono);font-size:10px;color:var(--faint);margin:3px 0 4px}
.data-item .di-one{font-size:12.5px;color:var(--txt);line-height:1.5}
.data-item a{color:var(--cyan);font-size:11px;text-decoration:none}
.data-item a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:980px){ .hud{width:42vw} }
@media (max-width:640px){
  .hud-right{display:none}
  .hud-left{width:calc(100vw - 28px)}
  .tour{width:calc(100vw - 28px)}
  .guide-two{grid-template-columns:1fr}
}
@media (max-height:760px){ .hud{overflow-y:auto;overflow-x:hidden} }   /* fallback only on short screens */