:root{--bg:#0b0d12;--panel:#12151c;--line:#242a36;--ink:#dfe3ea;--mute:#8a93a3;--ok:#5ad38f;--warm:#ffb15c;--hot:#ff6a5c;--cool:#6cb6ff;--violet:#c68aff;--mono:ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}html,body{height:100%;overscroll-behavior:none}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--mono);overflow:hidden;-webkit-text-size-adjust:100%}
#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
#micro{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;pointer-events:none}
#focal-chip{position:fixed;left:50%;transform:translateX(-50%);bottom:84px;z-index:16;max-width:min(860px,calc(100vw - 24px));background:rgba(10,14,22,.72);border:1px solid rgba(108,182,255,.28);border-radius:10px;padding:6px 11px;font:11px/1.4 var(--mono);color:var(--mute);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-align:center}
#focal-chip b{color:var(--ok)}
#focal-chip .chip-sub{font-size:10px;color:#9aa4b4;margin-top:1px}
#node-card table.cap{width:100%;border-collapse:collapse;font:10px/1.35 var(--mono);margin:3px 0}#node-card table.cap td,#node-card table.cap th{padding:1px 4px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.08)}
.chip-btn{padding:0 6px!important;font:11px/1.3 var(--mono)!important;margin-left:3px;border-radius:4px!important}
#node-card{position:fixed;right:12px;bottom:150px;width:min(400px,calc(100vw - 24px));max-height:min(62dvh,560px);overflow:auto;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:11.5px;z-index:24;backdrop-filter:blur(8px);box-shadow:0 8px 28px rgba(0,0,0,.45)}
#node-card .kv{font-size:11px}#node-card .kv b{font-weight:500;max-width:62%}
.card-links{margin-top:6px;color:var(--mute);font-size:10.5px}.card-links ul{margin:3px 0 0;padding-left:0;list-style:none}.card-links li{padding:2px 0;color:var(--ink);border-bottom:1px dashed #1e2430}
.lk{display:inline-block;width:14px;height:3px;margin-right:6px;vertical-align:middle;background:#5ad38f;opacity:.5}.lk.shaped{background:#ffb15c;opacity:1}.lk4{opacity:1;background:#78f0aa}.lk1{background:#6cb6ff}.lkp{background:#ffec78}
@media(max-width:800px){.nav-strip{flex-wrap:nowrap!important;overflow-x:auto;justify-content:flex-start!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}.nav-strip::-webkit-scrollbar{display:none}.nav-pill{flex:none}#focal-chip{bottom:86px;font-size:10px;padding:5px 8px}#focal-chip .chip-sub{display:none}#node-card{left:8px;right:8px;width:auto;bottom:104px;max-height:46dvh}}
.fab{position:fixed;z-index:20;display:inline-flex;align-items:center;gap:7px;background:color-mix(in srgb,var(--panel) 86%,transparent);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font:600 12px/1 var(--mono);backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);transition:border-color .18s,background .18s,color .18s}
.fab:hover,.fab.open{border-color:var(--ok);color:#fff;background:color-mix(in srgb,var(--panel) 96%,transparent)}
.fab .badge{color:var(--ok);font-weight:600;font-variant-numeric:tabular-nums}
#btn-hud{left:12px;top:12px}
#btn-stats{right:12px;top:12px}
#btn-foot{left:12px;bottom:max(12px,env(safe-area-inset-bottom));font-weight:500;font-size:11px;padding:6px 11px;color:var(--mute)}
.nav-strip{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:25;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 360px)}
.nav-pill{background:color-mix(in srgb,var(--panel) 84%,transparent);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font:500 11px/1 var(--mono);text-decoration:none;backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.35);transition:border-color .18s,color .18s,background .18s;white-space:nowrap}
.nav-pill:hover{border-color:var(--cool);color:#fff;background:color-mix(in srgb,var(--panel) 96%,transparent)}
.nav-pill.active{border-color:var(--ok);color:#fff;background:color-mix(in srgb,var(--ok) 22%,var(--panel));font-weight:600}
.panel-hidden{display:none!important}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.panel-close{background:transparent;border:1px solid var(--line);color:var(--mute);border-radius:6px;padding:2px 7px;font:12px/1.2 var(--mono);cursor:pointer;flex:none}
.panel-close:hover{color:#fff;border-color:var(--ink)}
#hud{position:fixed;left:12px;top:50px;width:min(410px,calc(100vw - 24px));background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:12px 14px;backdrop-filter:blur(8px);max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:15;box-shadow:0 8px 28px rgba(0,0,0,.45)}
#hud h1{font:600 16px/1.2 Georgia,serif;margin:0 0 4px;color:#fff}#hud p{margin:0 0 7px;color:var(--mute);font-size:11.5px}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:6px 0}
button,select{font:12px var(--mono);background:#1a1f2a;color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:5px 8px;cursor:pointer}
button.on{border-color:var(--ok);color:var(--ok)}
.control-group{margin:8px 0}
.cg-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.control-group label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute)}
.ms-budget{font-size:10px;color:var(--ok);font-feature-settings:"tnum";transition:color .2s ease}
.seg{display:flex;background:#0d1017;border:1px solid var(--line);border-radius:8px;padding:2px;gap:2px}
.seg button{flex:1;background:transparent;border:0;border-radius:6px;padding:5px 4px;font:11px/1 var(--mono);color:var(--mute);transition:all .18s ease;cursor:pointer;white-space:nowrap;text-align:center}
.seg button:hover:not(:disabled){color:var(--ink);background:#181d28}
.seg button.active{background:color-mix(in srgb,var(--ok) 18%,#161c26);color:#fff;font-weight:600;box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 45%,transparent)}
.seg button:disabled{opacity:.25;cursor:not-allowed;text-decoration:line-through var(--mute)}
.mesh-pills{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}
.mesh-pills button{font:10.5px/1 var(--mono);padding:4px 6px;border-radius:5px;background:#0d1017;color:var(--mute);border:1px solid var(--line);display:flex;align-items:center;gap:4px}
.mesh-pills button.active{color:#fff;border-color:var(--ink);background:#1a202c}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.main-actions{margin-top:6px}
.btn-primary{background:color-mix(in srgb,var(--ok) 20%,#141a24);color:var(--ok);border:1px solid var(--ok);font-weight:600}
.btn-primary.active{background:var(--ok);color:#080b10;border-color:var(--ok)}
.btn-subtle{background:#151922;color:var(--ink);border:1px solid var(--line)}
.sust-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:7px 0 4px}
@media(max-width:800px){
  .sust-strip{grid-template-columns:repeat(2,1fr)}
}
.sust-pill{background:#0d1017;border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:10px;line-height:1.25}
.sust-pill span{display:block;color:var(--mute);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em}
.sust-pill b{color:var(--ok);font-size:11px}
details#adv{margin-top:7px;border-top:1px solid var(--line);padding-top:6px}
details#adv summary{cursor:pointer;font-size:11.5px;color:var(--cool);font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:3px 0}
details#adv summary::-webkit-details-marker{display:none}
details#adv summary::before{content:"▸ Advanced: opt-ins (+/-), device tiers, Wi-Fi & NAT"}
details#adv[open] summary::before{content:"▾ Advanced: opt-ins (+/-), device tiers, Wi-Fi & NAT"}
.adv-body{margin-top:6px;display:flex;flex-direction:column;gap:8px;padding-right:2px}
.adv-sec{background:#0d1017;border:1px solid var(--line);border-radius:7px;padding:7px 9px}
.adv-sec h3{margin:0 0 5px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#fff;display:flex;justify-content:space-between;align-items:center}
.preset-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.preset-bar button{font-size:10px;padding:3px 6px;border-radius:4px;background:#151a24;color:var(--mute);border:1px solid var(--line)}
.preset-bar button:hover{color:#fff;border-color:var(--cool)}
.sl-item{margin:6px 0;padding-bottom:6px;border-bottom:1px dashed #1b202c}
.sl-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.sl-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink); gap:4px}
.sl-top b{color:#fff;font-variant-numeric:tabular-nums}
.dflt{font-size:9.5px;padding:1px 4px;border-radius:3px;background:#18202c;color:var(--cool);border:1px solid #263246}
.dflt.off{color:var(--mute);background:#141720;border-color:#222734}
input[type=range].adv-range{width:100%;height:4px;margin:4px 0 3px;accent-color:var(--ok);cursor:pointer}
.pro-con{font-size:10px;line-height:1.32;color:var(--mute)}
.pro-con .pro{color:#7ee2a8;display:block}
.pro-con .con{color:#ff9e8e;display:block}
#stats{position:fixed;right:12px;top:50px;width:min(384px,calc(100vw - 24px));background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12px;backdrop-filter:blur(8px);max-height:calc(100dvh - 64px);overflow:auto;-webkit-overflow-scrolling:touch;z-index:15;box-shadow:0 8px 28px rgba(0,0,0,.45)}
#stats h2{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);margin:9px 0 4px}
.kv{display:flex;justify-content:space-between;gap:10px;padding:2px 0;border-bottom:1px dashed #1e2430}.kv b{color:#fff;font-weight:600;text-align:right}.kv .big{font-size:19px;color:var(--ok)}
.bar{height:8px;background:#1a1f2a;border-radius:4px;overflow:hidden;margin:4px 0 8px}.bar i{display:block;height:100%;background:var(--ok);transition:width .25s ease}
.mob-links{margin-top:8px;padding-top:6px;border-top:1px solid var(--line);font-size:11px;color:var(--mute);text-align:center}
.mob-links a{color:var(--cool)}
#foot{position:fixed;left:12px;bottom:48px;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:10px 13px;backdrop-filter:blur(8px);color:var(--mute);font-size:11.5px;max-width:min(680px,calc(100vw - 24px));z-index:15;box-shadow:0 8px 28px rgba(0,0,0,.45)}#foot a{color:var(--cool)}
@media(max-width:1100px){
  .nav-strip{top:48px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 16px);gap:4px;justify-content:center}
  .nav-pill{padding:5px 8px;font-size:10px}
  #hud{top:90px;max-height:calc(100dvh - 100px)}
  #stats{top:90px;max-height:calc(100dvh - 100px)}
}
@media(max-width:800px){
  #btn-hud{left:8px;top:8px;padding:7px 11px;font-size:11.5px}
  #btn-stats{right:8px;top:8px;padding:7px 11px;font-size:11.5px}
  #btn-foot{left:8px;bottom:max(8px,env(safe-area-inset-bottom))}
  .nav-strip{top:46px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 16px);gap:4px;justify-content:center}
  .nav-pill{padding:4px 7px;font-size:9.5px}
  #hud{left:8px;top:86px;width:calc(100vw - 16px);padding:10px 12px;max-height:calc(100dvh - 96px)}
  #hud h1{font-size:15px;margin-bottom:2px}
  #stats{left:8px;right:8px;width:calc(100vw - 16px);top:86px;padding:10px 12px;max-height:calc(100dvh - 96px)}
  #foot{left:8px;bottom:44px;width:calc(100vw - 16px)}
  button,select{padding:7px 10px;font-size:12px}
  .preset-bar button{padding:6px 8px;font-size:10.5px}
  input[type=range].adv-range{height:8px;margin:7px 0 5px}
}

/* ------------------------------------------------------------------ CIRISHolon Story Mode */
.nav-story-btn {
  background: color-mix(in srgb, var(--ok) 25%, var(--panel)) !important;
  border-color: var(--ok) !important;
  color: #fff !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 35%, transparent);
  transition: all .2s ease;
}
.nav-story-btn:hover, .nav-story-btn.active {
  background: color-mix(in srgb, var(--ok) 40%, var(--panel)) !important;
  border-color: var(--ok) !important;
  box-shadow: 0 0 16px rgba(90,211,143,.5);
}
.fab-story {
  left: 172px;
  top: 12px;
  background: color-mix(in srgb, var(--cool) 20%, var(--panel));
  border-color: var(--cool);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.35), 0 0 12px rgba(108,182,255,.25);
  display: inline-flex;
  transition: all .2s ease;
}
.fab-story:hover, .fab-story.active {
  border-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 26%, var(--panel));
  color: #fff;
  box-shadow: 0 0 16px rgba(90,211,143,.45);
}
.btn-story-main {
  background: color-mix(in srgb, var(--cool) 22%, #141c28) !important;
  border: 1px solid var(--cool) !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  padding: 8px 12px !important;
  box-shadow: 0 2px 12px rgba(108,182,255,.2);
  transition: all .18s ease;
  cursor: pointer;
}
.btn-story-main:hover, .btn-story-main.active {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
  color: #080b10 !important;
  box-shadow: 0 0 16px rgba(90,211,143,.5);
}

#story-hud {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(680px, calc(100vw - 24px));
  width: max-content;
  background: rgba(10, 14, 22, 0.54);
  border: 1px solid rgba(108, 182, 255, 0.28);
  border-radius: 18px;
  padding: 7px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 28;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  font-family: var(--mono);
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}
.story-act-badge {
  background: rgba(90, 211, 143, 0.18);
  color: var(--ok);
  border: 1px solid rgba(90, 211, 143, 0.45);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
/* never clamped: a long step scrolls inside the bubble, every word stays reachable */
.story-line {
  font-size: 12px;
  line-height: 1.3;
  color: rgba(242, 246, 252, 0.95);
  white-space: normal;
  display: block;
  max-height: 30dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.story-line a { color: #8ec5ff; }
.story-head { display: contents; }
.story-title { display: none; }
.story-line b { color: var(--ok); font-weight: 600; }
.story-line code {
  color: var(--cool);
  background: rgba(20, 28, 42, 0.65);
  padding: 1px 4px;
  border-radius: 4px;
  font-size: 11px;
}
.story-mini-ctls {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.story-hdr-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(220, 228, 240, 0.85);
  border-radius: 999px;
  padding: 2px 7px;
  font: 10.5px/1.2 var(--mono);
  cursor: pointer;
}
.story-hdr-btn:hover {
  color: #fff;
  border-color: var(--cool);
}
.story-progress-track {
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: transparent;
  pointer-events: none;
}
.story-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--cool), var(--ok));
  transition: width .1s linear;
}
@media(max-width:800px){
  .fab-story { display: none !important; }
  #story-hud {
    bottom: calc(52px + env(safe-area-inset-bottom)); /* above the Info / Layers row, never over it */
    max-width: calc(100vw - 16px);
    width: calc(100vw - 16px);
    border-radius: 22px;
    padding: 6px 10px;
    gap: 7px;
    justify-content: space-between;
  }
  .story-line {
    font-size: 11px;
    white-space: normal;
    flex: 1;
  }
  .story-hdr-btn { padding: 2px 6px; font-size: 10px; }
}

#live-strip{position:fixed;top:76px;left:50%;transform:translateX(-50%);z-index:24;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;max-width:min(860px,calc(100vw - 16px));padding:5px 10px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(8px);font:500 10.5px/1.35 var(--mono);color:var(--mute);text-align:center}
#live-strip b{color:var(--ink)}
#live-strip code{color:#7ee2a8;background:rgba(126,226,168,.08);padding:1px 5px;border-radius:5px}
#live-strip a{color:#8ec5ff}
#live-strip button{font:inherit;color:#8ec5ff;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
#live-strip .ls-x{color:var(--mute);text-decoration:none;margin-left:2px}
#live-strip .ls-short{display:none}
#foot{max-height:calc(100vh - 200px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:800px){#foot{max-height:calc(100vh - 210px)}}
@media(max-width:800px){#live-strip{font-size:9.5px;line-height:1.3;padding:4px 8px;width:calc(100vw - 16px);gap:2px 6px}#live-strip .ls-long{display:none}#live-strip .ls-short{display:inline}#live-strip .ls-x{position:absolute;top:2px;right:6px}}

/* ------------------------------------------------------------------ index.html: the story is the page
   Designed at 390 px first. Every overlay is hidden until the "more" control opens it; the story sheet
   sits at the bottom, grows with its text, and scrolls inside itself past 44% of the screen. */
body.story-first{--sf-top:max(10px,env(safe-area-inset-top));--sf-side:max(12px,env(safe-area-inset-left),env(safe-area-inset-right))}
body.story-first #btn-hud,body.story-first #btn-stats,body.story-first #btn-foot,body.story-first #btn-story-fab,body.story-first .nav-strip{display:none!important}
body.story-first:not(.sf-chip) #focal-chip{display:none!important}
body.story-first #focal-chip{bottom:calc(var(--sheet-h,0px) + 8px)}
#sf-bar{position:fixed;top:var(--sf-top);right:var(--sf-side);z-index:32;display:flex;gap:8px}
.sf-btn{min-width:44px;min-height:44px;padding:0 14px;border-radius:22px;background:color-mix(in srgb,var(--panel) 86%,transparent);color:var(--ink);border:1px solid var(--line);font:600 13px/1 var(--mono);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.35);cursor:pointer}
.sf-btn:hover,.sf-btn.open{border-color:var(--ok);color:#fff}
body.story-first.story-on #sf-replay{display:none}
#sf-replay{border-color:var(--cool)}
#sf-menu{position:fixed;top:calc(var(--sf-top) + 52px);right:var(--sf-side);z-index:33;width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - var(--sf-top) - 64px);overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;background:color-mix(in srgb,var(--panel) 97%,transparent);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 8px 28px rgba(0,0,0,.5)}
#sf-menu button,#sf-menu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:13px/1.3 var(--mono);text-align:left;text-decoration:none;cursor:pointer}
#sf-menu button:hover,#sf-menu a:hover{background:#1a202c;color:#fff}
#sf-menu a[href="globe.html"]{color:var(--ok);border-top:1px solid var(--line);border-radius:0;margin-top:4px}
body.story-first #hud,body.story-first #stats,body.story-first #foot{left:var(--sf-side);right:var(--sf-side);width:auto;top:calc(var(--sf-top) + 54px);bottom:auto;max-width:none;max-height:calc(100dvh - var(--sf-top) - 66px - var(--sheet-h,0px));z-index:29}
body.story-first .panel-close{min-width:44px;min-height:44px;font-size:16px}
body.story-first #node-card{left:var(--sf-side);right:var(--sf-side);width:auto;bottom:calc(var(--sheet-h,0px) + 8px);max-height:calc(100dvh - var(--sf-top) - 66px - var(--sheet-h,0px))}
body.story-first #story-hud{left:0;right:0;bottom:0;transform:none;width:auto;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head ctls" "line line";align-items:center;gap:8px 10px;padding:10px var(--sf-side) calc(12px + env(safe-area-inset-bottom));border-radius:16px 16px 0 0;border-width:1px 0 0;background:rgba(10,14,22,.88);overflow:visible}
body.story-first .story-head{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
body.story-first .story-act-badge{font-size:12px;padding:3px 8px}
body.story-first .story-title{display:inline;font:600 13px/1.3 var(--mono);color:#fff;overflow-wrap:anywhere}
body.story-first .story-mini-ctls{grid-area:ctls;gap:4px}
body.story-first .story-hdr-btn{min-width:44px;min-height:44px;padding:0 8px;font-size:17px;border-radius:12px}
body.story-first .story-line{grid-area:line;font-size:14px;line-height:1.5;max-height:44dvh;padding-right:2px}
body.story-first .story-line code{font-size:13px;overflow-wrap:anywhere}
body.story-first .story-line a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
body.story-first .story-progress-track{left:0;right:0;top:0;bottom:auto;border-radius:16px 16px 0 0;overflow:hidden}
@media(min-width:801px){
  body.story-first #story-hud{left:50%;right:auto;transform:translateX(-50%);width:min(760px,calc(100vw - 32px));bottom:max(16px,env(safe-area-inset-bottom));padding:12px 18px 14px;border-radius:16px;border-width:1px}
  body.story-first .story-line{max-height:min(36dvh,340px)}
  body.story-first #hud,body.story-first #stats,body.story-first #foot{right:auto;width:min(440px,calc(100vw - 32px))}
  body.story-first #stats{left:auto;right:var(--sf-side)}
  body.story-first #node-card{left:auto;width:min(400px,calc(100vw - 24px))}
}
/* narrow screens: the globe centres in the space above the story sheet, so the sheet never covers it */
@media (max-width:700px){body.story-first.story-on #c,body.story-first.story-on #micro{height:calc(100dvh - var(--sheet-h,0px))}}
/* an open node or seat card sits above the story, and the story sheet folds to its header while the card is open */
#node-card{z-index:31}
body.card-open #story-line,body.card-open .story-line{display:none}
/* the zoom cluster: +, -, whole planet. Bottom right; on a phone it rides above the story sheet */
#zoomctl{position:fixed;right:12px;bottom:48px;z-index:22;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.35);touch-action:manipulation;-webkit-user-select:none;user-select:none}
#zoomctl button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:0;border-radius:0;background:transparent;color:var(--ink);font:600 19px/1 var(--mono);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
#zoomctl button+button{border-top:1px solid var(--line)}
@media(hover:hover){#zoomctl button:hover{background:rgba(108,182,255,.12)}}
#zoomctl button:active{background:rgba(108,182,255,.24)}
#zoomctl button:focus-visible{outline:2px solid var(--cool);outline-offset:-2px}
@media(max-width:800px){#zoomctl{right:8px;bottom:calc(var(--sheet-h,0px) + 12px + env(safe-area-inset-bottom,0px))}#zoomctl button{width:44px;height:44px}}

/* ------------------------------------------------------------------ evidence: every figure opens its ledger entry
   A class is told three ways at once: the two-letter code after the figure, the underline's line
   style (solid MEASURED, dashed DERIVED, dotted MODEL, double PROJECTED, wavy FRONTIER), and colour. */
.fig{cursor:pointer;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-skip-ink:none;border-radius:3px;-webkit-tap-highlight-color:rgba(108,182,255,.25)}
.fig::after{content:attr(data-code);display:inline-block;margin-left:2px;padding:0 2px;border:1px solid currentColor;border-radius:3px;font:600 7.5px/1.25 var(--mono);letter-spacing:.03em;vertical-align:super;opacity:.8;text-decoration:none}
.fig-ME{text-decoration-style:solid;text-decoration-color:var(--ok)}.fig-ME::after{color:var(--ok)}
.fig-DE{text-decoration-style:dashed;text-decoration-color:var(--cool)}.fig-DE::after{color:var(--cool)}
.fig-MO{text-decoration-style:dotted;text-decoration-color:var(--warm)}.fig-MO::after{color:var(--warm)}
.fig-PR{text-decoration-style:double;text-decoration-color:var(--violet)}.fig-PR::after{color:var(--violet)}
.fig-FR{text-decoration-style:wavy;text-decoration-color:var(--hot)}.fig-FR::after{color:var(--hot)}
.fig-corr::after{content:attr(data-code) " · under correction";color:var(--hot);border-style:dashed}
.fig-inert{cursor:inherit;text-decoration:none}.fig-inert::after{content:none}
.fig.ev-sample::after{content:attr(data-code)}
@media(hover:hover){.fig:not(.fig-inert):hover{background:rgba(108,182,255,.12)}}
.fig:focus-visible{outline:2px solid var(--cool);outline-offset:1px}
@media(pointer:coarse){.fig:not(.fig-inert){padding:3px 0}}
.tier-note{margin:2px 0 0!important;font-size:11px!important;color:var(--mute)}
.ev-open,.ev-link{background:none;border:0;padding:0;color:var(--cool);font:inherit;text-decoration:underline;cursor:pointer}
#claim-card,#ev-panel{position:fixed;z-index:40;background:color-mix(in srgb,var(--panel) 97%,transparent);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:11.5px;color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#claim-card{z-index:42;right:12px;top:50%;transform:translateY(-50%);width:min(420px,calc(100vw - 24px));max-height:min(78dvh,620px)}
#ev-panel{left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100vw - 24px));max-height:min(84dvh,760px)}
#claim-card:focus,#ev-panel:focus{outline:none}
#claim-card .panel-close,#ev-panel .panel-close{min-width:44px;min-height:44px;font-size:15px}
#claim-card .panel-head b,#ev-panel .panel-head b{color:#fff;font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#claim-card p,#ev-panel p{margin:3px 0 6px;line-height:1.45}
#ev-panel h3{margin:10px 0 4px;font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#fff;display:flex;align-items:center;gap:6px}
.ev-means{color:var(--mute)}
.ev-corr{border:1px dashed var(--hot);border-radius:6px;padding:5px 7px;color:#ffc9c2}
.ev-f{margin:6px 0;border-top:1px dashed #1e2430;padding-top:5px}
.ev-f>span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);margin-bottom:2px}
.ev-f code,.ev-foot code{color:#7ee2a8;background:rgba(126,226,168,.08);padding:1px 4px;border-radius:4px;overflow-wrap:anywhere;white-space:pre-wrap}
.ev-f ul{margin:2px 0 0;padding-left:16px}.ev-f li{margin:2px 0}
.ev-foot{margin-top:8px;color:var(--mute);font-size:10.5px}
.ev-badge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;padding:1px 4px;border:1px solid currentColor;border-radius:4px;font:700 9.5px/1.2 var(--mono)}
.ev-ME{color:var(--ok)}.ev-DE{color:var(--cool)}.ev-MO{color:var(--warm)}.ev-PR{color:var(--violet)}.ev-FR{color:var(--hot)}
.ev-legend,.ev-index{list-style:none;margin:0;padding:0}
.ev-legend li{display:block;padding:5px 0;border-bottom:1px dashed #1e2430;color:var(--mute);line-height:1.4}
.ev-legend .ev-sample{color:#fff;margin:0 4px}
.ev-index li{border-bottom:1px dashed #1e2430}
.ev-item{display:block;width:100%;min-height:44px;text-align:left;background:transparent;border:0;border-radius:6px;padding:6px 4px;color:var(--ink);font:11px/1.4 var(--mono);cursor:pointer}
.ev-item:hover,.ev-item:focus-visible{background:#1a202c;color:#fff}
#tier-now{position:fixed;z-index:20;left:12px;bottom:calc(max(12px,env(safe-area-inset-bottom)) + 40px);min-height:32px;max-width:calc(100vw - 96px);padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 86%,transparent);color:var(--mute);font:500 11px/1.2 var(--mono);text-align:left;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 16px rgba(0,0,0,.35)}
#tier-now::before{content:"◎ ";color:var(--cool)}
#tier-now.tier-micro{border-color:color-mix(in srgb,var(--ok) 55%,var(--line));color:var(--ink)}
#tier-now.tier-micro::before{content:"▦ ";color:var(--ok)}
#tier-now:hover,#tier-now[aria-expanded="true"]{border-color:var(--cool);color:#fff}
@media(max-width:800px){
  #tier-now{z-index:14;left:8px;top:calc(max(8px,env(safe-area-inset-top)) + 72px);bottom:auto;min-height:44px;font-size:10.5px}
  body.story-first #tier-now{z-index:20}
  #claim-card{left:8px;right:8px;width:auto;top:auto;bottom:max(8px,env(safe-area-inset-bottom));transform:none;max-height:72dvh}
  #ev-panel{left:8px;right:8px;width:auto;top:max(8px,env(safe-area-inset-top));bottom:max(8px,env(safe-area-inset-bottom));transform:none;max-height:none}
}
@media(min-width:801px){body:not(.story-first) #foot{bottom:92px;max-height:calc(100vh - 240px)}}
body.story-first #tier-now{left:var(--sf-side);top:var(--sf-top);bottom:auto;min-height:44px;max-width:calc(100vw - 230px)}

table.cap .nw{white-space:nowrap}