/* ============================================================================
   The Sectioned Brain — a printed-plate interface around a live specimen.

   The stage is the warm dark of a Netter plate ground; the chrome is quiet;
   the one bright object in the room is the ivory caption card, set the way
   the atlas sets its figure legends.
   ========================================================================= */

:root {
  --stage-0:#1B1512;
  --stage-1:#2E241E;
  --stage-2:#100C0A;

  --paper:#EFE7D6;
  --paper-2:#DCD1B9;
  --paper-dim:#A3947D;
  --paper-faint:rgba(239,231,214,.42);

  --rule:rgba(239,231,214,.13);
  --rule-2:rgba(239,231,214,.07);
  --chrome:rgba(23,17,14,.78);

  --carmine:#C4453B;
  --gold:#C9A227;

  --display:Optima,"Optima nova",Candara,"Gill Sans","Gill Sans MT","Trebuchet MS",-apple-system,sans-serif;
  --serif:"Iowan Old Style",Charter,"Charter BT",Palatino,"Palatino Linotype","Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --pad:18px;
  --r:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  font-family:var(--display);
  color:var(--paper);
  background:
    radial-gradient(120% 95% at 50% 42%, var(--stage-1) 0%, var(--stage-0) 46%, var(--stage-2) 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* paper grain over the whole stage, so the dark reads as printed rather than digital */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .48 0 0 0 0 .40 0 0 0 .055 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ── stage ────────────────────────────────────────────────────────────── */

.stage-wrap{position:fixed;inset:0;z-index:0}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab}
#stage:active{cursor:grabbing}

#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.ld{stroke:rgba(239,231,214,.34);stroke-width:.75;fill:none}
.ldot{fill:rgba(239,231,214,.5)}
.ld-sel{stroke:var(--gold);fill:var(--gold);stroke-width:1.2}

#overlay{position:absolute;inset:0;pointer-events:none;z-index:3}

.lbl{
  position:absolute;top:0;left:0;
  font-family:var(--display);
  color:var(--paper);
  letter-spacing:.012em;
  line-height:1.15;
  white-space:nowrap;
  pointer-events:auto;cursor:pointer;
  text-shadow:0 1px 3px rgba(12,8,6,.92),0 0 12px rgba(12,8,6,.7);
  padding:1px 2px;
  transition:opacity .18s ease;
}
.lbl:hover{color:#fff}
.lbl.is-sel{
  color:#fff;
  border-bottom:1px solid var(--gold);
  letter-spacing:.03em;
}
/* margin-ranged labels sit on a single line and never wrap */
.lbl{max-width:min(220px,22vw)}

/* ── top bar ──────────────────────────────────────────────────────────── */

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:22px;
  padding:14px var(--pad) 13px;
  background:linear-gradient(to bottom,rgba(16,11,9,.86),rgba(16,11,9,0));
  pointer-events:none;
}
.topbar > *{pointer-events:auto}

.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{color:var(--carmine);opacity:.9;flex:none;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.brand-text b{
  font-weight:600;font-size:16px;letter-spacing:.055em;text-transform:uppercase;
  color:var(--paper);
}
.brand-text em{
  font-style:normal;font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--paper-dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.search-wrap{margin-left:auto;position:relative;width:min(330px,38vw)}
#search{
  width:100%;font-family:var(--display);font-size:13px;color:var(--paper);
  background:rgba(20,14,12,.6);border:1px solid var(--rule);border-radius:var(--r);
  padding:8px 11px;outline:none;letter-spacing:.01em;
  transition:border-color .2s,background .2s;
}
#search::placeholder{color:rgba(163,148,125,.8)}
#search:focus{border-color:rgba(196,69,59,.7);background:rgba(24,17,14,.85)}

#search-results{
  position:absolute;top:calc(100% + 6px);right:0;left:0;
  background:rgba(20,14,12,.97);border:1px solid var(--rule);border-radius:var(--r);
  overflow:hidden;display:none;box-shadow:0 18px 40px rgba(0,0,0,.55);
}
#search-results.is-open{display:block}
#search-results button{
  display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--rule-2);
  padding:8px 11px;cursor:pointer;font-family:var(--display);color:var(--paper);
}
#search-results button:last-child{border-bottom:0}
#search-results button:hover{background:rgba(196,69,59,.16)}
#search-results span{font-size:13px}
#search-results em{font-style:italic;font-size:11px;color:var(--paper-dim)}
.no-hit{padding:10px 11px;font-size:12px;color:var(--paper-dim)}

/* ── index panel ──────────────────────────────────────────────────────── */

.panel{
  position:fixed;left:var(--pad);top:74px;bottom:178px;width:236px;z-index:15;
  display:flex;flex-direction:column;
  background:var(--chrome);
  border:1px solid var(--rule);border-radius:var(--r);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .28s;
}
body.is-panel-hidden .panel{transform:translateX(calc(-100% - var(--pad) - 4px));opacity:0}

.panel-tabs{display:flex;border-bottom:1px solid var(--rule);flex:none}
.panel-tabs button{
  flex:1;background:none;border:0;cursor:pointer;color:var(--paper-dim);
  font-family:var(--display);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  padding:11px 6px;border-bottom:1.5px solid transparent;margin-bottom:-1px;
  transition:color .18s,border-color .18s;
}
.panel-tabs button.is-on{color:var(--paper);border-bottom-color:var(--carmine)}
.panel-tabs span{
  font-family:var(--mono);font-size:9.5px;opacity:.6;margin-left:3px;letter-spacing:0;
}

.panel-scroll{display:none;overflow-y:auto;overscroll-behavior:contain;padding:4px 0 12px;flex:1}
.panel-scroll.is-on{display:block}

.panel-scroll::-webkit-scrollbar{width:7px}
.panel-scroll::-webkit-scrollbar-thumb{background:rgba(239,231,214,.14);border-radius:4px}

.pane-note{
  font-family:var(--serif);font-size:12px;line-height:1.5;color:var(--paper-dim);
  padding:12px 14px 6px;
}

.idx-group{padding:8px 0 4px}
.idx-group h4{
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--paper-dim);
  padding:5px 14px 6px;font-weight:400;
  border-bottom:1px solid var(--rule-2);margin-bottom:3px;
}
.idx-row{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  background:none;border:0;cursor:pointer;padding:5px 14px;
  font-family:var(--display);font-size:12.5px;color:var(--paper-2);
  transition:background .14s,color .14s;
}
.idx-row i{width:9px;height:9px;border-radius:1px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.idx-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idx-row:hover{background:rgba(239,231,214,.06);color:var(--paper)}
.idx-row.is-sel{background:rgba(196,69,59,.2);color:#fff}

.circ-row{
  display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;
  background:none;border:0;border-bottom:1px solid var(--rule-2);cursor:pointer;
  padding:10px 14px;font-family:var(--display);color:var(--paper-2);
  transition:background .16s;
}
.circ-row i{width:9px;height:9px;border-radius:50%;flex:none;margin-top:4px}
.circ-row b{display:block;font-size:12.5px;font-weight:500}
.circ-row em{display:block;font-style:normal;font-family:var(--serif);font-size:11px;line-height:1.42;color:var(--paper-dim);margin-top:2px}
.circ-row:hover{background:rgba(239,231,214,.06)}
.circ-row.is-on{background:rgba(239,231,214,.1)}
.circ-row.is-on b{color:#fff}

#panel-toggle{
  position:fixed;left:var(--pad);top:calc(74px - 30px);z-index:16;
  width:26px;height:22px;background:none;border:0;cursor:pointer;display:none;
}

/* ── caption card: the signature ──────────────────────────────────────── */

.card{
  position:fixed;right:var(--pad);top:74px;width:min(348px,40vw);z-index:18;
  max-height:calc(100vh - 228px);overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(168deg,#F4EDDD 0%,#EAE0CB 62%,#E3D7BE 100%);
  color:#241C16;
  border-radius:2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 0 0 1px rgba(50,36,28,.16),
    0 26px 60px -18px rgba(0,0,0,.72),
    0 4px 14px rgba(0,0,0,.35);
  opacity:0;transform:translateY(-8px) scale(.985);pointer-events:none;
  transition:opacity .26s ease,transform .26s cubic-bezier(.2,.8,.3,1);
}
.card.is-open{opacity:1;transform:none;pointer-events:auto}
.card::-webkit-scrollbar{width:7px}
.card::-webkit-scrollbar-thumb{background:rgba(60,44,34,.2);border-radius:4px}

.card-close{
  position:absolute;top:10px;right:12px;width:24px;height:24px;
  background:none;border:0;cursor:pointer;font-size:21px;line-height:1;
  color:rgba(36,28,22,.42);font-family:var(--display);
}
.card-close:hover{color:var(--carmine)}

.card-eyebrow{
  display:flex;align-items:center;gap:7px;
  font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;
  color:#7A6650;padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px solid rgba(60,44,34,.26);
  padding-right:22px;
}
.card-dot{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.2)}

.card-title{
  font-family:var(--display);font-size:23px;line-height:1.12;font-weight:500;
  font-variant:small-caps;letter-spacing:.028em;color:#1D1611;
}
.card-latin{
  font-family:var(--serif);font-style:italic;font-size:13px;color:#6B5A48;margin-top:3px;
}
.card-path{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#8B775E;margin-top:9px;
}
.card-path span{opacity:.55;padding:0 2px}

.card-body{margin-top:15px}
.card-body dt{
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#96795A;
  margin-top:13px;
}
.card-body dt:first-child{margin-top:0}
.card-body dd{
  font-family:var(--serif);font-size:14.2px;line-height:1.53;color:#2C2219;margin-top:4px;
  hyphens:auto;
}

.card-circuits{margin-top:16px;padding-top:13px;border-top:1px solid rgba(60,44,34,.2)}
.card-clabel{
  display:block;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#96795A;margin-bottom:7px;
}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(60,44,34,.07);border:1px solid rgba(60,44,34,.2);border-radius:2px;
  font-family:var(--display);font-size:11.5px;color:#3A2E23;
  padding:4px 9px;margin:0 5px 5px 0;cursor:pointer;transition:background .15s,border-color .15s;
}
.chip i{width:7px;height:7px;border-radius:50%}
.chip:hover{background:rgba(60,44,34,.14);border-color:rgba(60,44,34,.4)}

.card-actions{display:flex;gap:8px;margin-top:17px;flex-wrap:wrap}
.btn{
  font-family:var(--display);font-size:11.5px;letter-spacing:.055em;text-transform:uppercase;
  background:#3C2C22;color:#F2EADA;border:1px solid #3C2C22;border-radius:2px;
  padding:8px 13px;cursor:pointer;transition:background .17s,color .17s;
}
.btn:hover{background:var(--carmine);border-color:var(--carmine)}
.btn-ghost{background:none;color:#3C2C22}
.btn-ghost:hover{background:#3C2C22;color:#F2EADA;border-color:#3C2C22}

/* ── focus bar ────────────────────────────────────────────────────────── */

#focus-bar{
  position:fixed;top:74px;left:50%;transform:translate(-50%,-14px);z-index:19;
  display:flex;align-items:center;gap:12px;
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r);
  padding:8px 9px 8px 14px;backdrop-filter:blur(9px);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
}
body.is-focused #focus-bar{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.fb-label{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim)}
#focus-name{font-size:13.5px;color:var(--paper)}
#focus-exit{
  font-family:var(--display);font-size:11px;letter-spacing:.05em;
  background:rgba(239,231,214,.1);border:1px solid var(--rule);border-radius:2px;
  color:var(--paper-2);padding:5px 10px;cursor:pointer;transition:background .16s;
}
#focus-exit:hover{background:var(--carmine);border-color:var(--carmine);color:#fff}

/* ── control rail ─────────────────────────────────────────────────────── */

.controls{
  position:fixed;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + 28px);z-index:17;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-areas:"detail spread section" "view show show";
  gap:0;align-items:stretch;
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  box-shadow:0 20px 50px -22px rgba(0,0,0,.8);
}
.ctl{padding:10px 16px 11px;border-right:1px solid var(--rule-2);min-width:0}
.ctl-detail{grid-area:detail}
.ctl-spread{grid-area:spread}
.ctl-section{grid-area:section;border-right:0}
.ctl-view{grid-area:view;border-top:1px solid var(--rule-2)}
.ctl-toggles{grid-area:show;border-top:1px solid var(--rule-2);border-right:0}

.ctl-name{
  display:block;font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--paper-dim);
}
.ctl-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.ctl-read{display:flex;align-items:baseline;gap:7px;min-width:0}
.ctl-read b{font-family:var(--serif);font-size:15px;font-weight:400;color:var(--paper);letter-spacing:.04em}
.ctl-read i{
  font-style:normal;font-size:10.5px;color:var(--paper-dim);letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ctl-hint{
  font-family:var(--serif);font-size:10.4px;line-height:1.35;color:rgba(163,148,125,.8);margin-top:5px;
}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:16px;background:none;cursor:pointer;display:block;
}
input[type=range]::-webkit-slider-runnable-track{
  height:1.5px;background:rgba(239,231,214,.24);border-radius:0;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:9px;height:15px;margin-top:-6.75px;border-radius:1px;
  background:var(--paper);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.5);
  transition:background .16s;
}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:focus-visible::-webkit-slider-thumb{background:var(--carmine)}
input[type=range]::-moz-range-track{height:1.5px;background:rgba(239,231,214,.24)}
input[type=range]::-moz-range-thumb{
  width:9px;height:15px;border:0;border-radius:1px;background:var(--paper);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}

.ticks{display:flex;justify-content:space-between;margin-top:2px}
.ticks button{
  background:none;border:0;cursor:pointer;padding:2px 6px;
  font-family:var(--serif);font-size:11px;letter-spacing:.08em;
  color:rgba(163,148,125,.7);transition:color .16s;
}
.ticks button:hover{color:var(--paper-2)}
.ticks button.is-on{color:var(--carmine)}

.ctl-view,.ctl-toggles{padding-top:10px}
.viewgrid,.togglegrid{display:grid;gap:3px;margin-top:6px}
.viewgrid{grid-template-columns:repeat(3,minmax(52px,1fr))}
.togglegrid{grid-template-columns:repeat(3,minmax(84px,1fr))}
.viewgrid button,.togglegrid button{
  font-family:var(--display);font-size:10.5px;letter-spacing:.06em;
  background:rgba(239,231,214,.055);border:1px solid var(--rule-2);border-radius:2px;
  color:var(--paper-2);padding:5px 5px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.viewgrid button:hover,.togglegrid button:hover{background:rgba(239,231,214,.13);color:var(--paper)}
.togglegrid button.is-on{background:rgba(196,69,59,.24);border-color:rgba(196,69,59,.5);color:#fff}
#reset:hover{background:rgba(196,69,59,.3)}

.usage{
  position:fixed;left:var(--pad);right:150px;bottom:calc(var(--pad) + 4px);z-index:16;text-align:left;
  font-family:var(--serif);font-size:10.8px;color:rgba(163,148,125,.62);letter-spacing:.02em;
  pointer-events:none;
}

/* ── loading ──────────────────────────────────────────────────────────── */

#loading{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:radial-gradient(110% 90% at 50% 45%,var(--stage-1),var(--stage-2));
  transition:opacity .7s ease;
}
#loading.is-done{opacity:0;pointer-events:none}
.load-inner{text-align:center}
.load-rule{
  width:64px;height:1px;background:var(--carmine);margin:0 auto 18px;
  animation:grow 1.6s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes grow{0%,100%{transform:scaleX(.2);opacity:.35}50%{transform:scaleX(1);opacity:1}}
.load-title{font-size:15px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper)}
.load-sub{font-family:var(--serif);font-size:12.5px;color:var(--paper-dim);margin-top:8px;font-style:italic}
.dots i{opacity:0;animation:blink 1.4s infinite}
.dots i:nth-child(2){animation-delay:.2s}
.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:0}30%{opacity:1}}

/* ── focus ring ───────────────────────────────────────────────────────── */

button:focus-visible,input:focus-visible{
  outline:1.5px solid var(--carmine);outline-offset:2px;
}

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width:1180px){
  .controls{grid-template-columns:1fr 1fr;}
  .ctl{border-bottom:1px solid var(--rule-2)}
  .ctl:nth-child(2n){border-right:0}
  .ctl:nth-last-child(-n+2){border-bottom:0}
  .card{max-height:calc(100vh - 340px)}
  .panel{bottom:268px}
}
@media (max-width:820px){
  .panel{
    top:auto;bottom:auto;left:0;right:0;width:100%;
    top:66px;max-height:38vh;border-radius:0;border-left:0;border-right:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
  }
  body.is-panel-shown .panel{transform:none;opacity:1;pointer-events:auto}
  #panel-toggle{display:block;left:auto;right:var(--pad);top:60px;
    width:34px;height:26px;border:1px solid var(--rule);border-radius:2px;background:var(--chrome)}
  #panel-toggle span,#panel-toggle span::before,#panel-toggle span::after{
    position:absolute;left:9px;width:16px;height:1px;background:var(--paper-2);content:"";
  }
  #panel-toggle span{top:12px}
  #panel-toggle span::before{top:-5px;left:0}
  #panel-toggle span::after{top:5px;left:0}
  .card{
    left:var(--pad);right:var(--pad);width:auto;top:auto;bottom:calc(var(--pad) + 4px);
    max-height:52vh;
  }
  .controls{
    grid-template-columns:1fr;bottom:auto;top:58px;left:var(--pad);right:var(--pad);
    max-height:none;
  }
  .ctl-view,.ctl-toggles{display:none}
  .usage{display:none}
  .search-wrap{width:auto;flex:1}
  .brand-text em{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* provenance: measured atlas geometry vs a schematic placement */
.card-source{
  margin-top:14px;padding-top:11px;border-top:1px solid rgba(60,44,34,.18);
  font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:#8B775E;
  display:flex;align-items:center;gap:7px;
}
.card-source::before{
  content:"";width:6px;height:6px;border-radius:50%;flex:none;background:#8B775E;
}
.card-source.is-measured::before{background:#5E8A6B}
.card-source.is-schematic::before{background:var(--gold)}
.card-source.is-grouped::before{background:rgba(60,44,34,.35)}

/* ── top right: search + zoom ──────────────────────────────────────────── */
.topright{margin-left:auto;display:flex;align-items:center;gap:14px}
.search-wrap{position:relative;width:min(300px,32vw);margin-left:0}

.zoom{
  display:flex;align-items:center;gap:8px;
  background:rgba(20,14,12,.6);border:1px solid var(--rule);border-radius:var(--r);
  padding:6px 11px;
}
.zoom-lab{font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--paper-dim)}
.zoom input[type=range]{width:104px}
.zoom-val{
  font-family:var(--mono);font-size:10.5px;color:var(--paper-2);
  min-width:34px;text-align:right;
}

/* ── panel & controls collapse ─────────────────────────────────────────── */
#panel-toggle,#controls-toggle{
  position:fixed;z-index:19;display:flex;align-items:center;gap:6px;
  background:var(--chrome);border:1px solid var(--rule);border-radius:var(--r);
  color:var(--paper-dim);cursor:pointer;padding:5px 10px;width:auto;height:auto;
  font-family:var(--display);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:color .16s,border-color .16s;
}
#panel-toggle:hover,#controls-toggle:hover{color:var(--paper);border-color:rgba(239,231,214,.3)}
#panel-toggle svg,#controls-toggle svg{transition:transform .3s cubic-bezier(.4,0,.2,1)}

#panel-toggle{left:var(--pad);top:48px}
body.is-panel-hidden #panel-toggle svg{transform:rotate(180deg)}
body.is-panel-hidden .panel{transform:translateX(calc(-100% - var(--pad) - 8px));opacity:0;pointer-events:none}

#controls-toggle{right:var(--pad);bottom:var(--pad)}
body.is-controls-hidden #controls-toggle{bottom:var(--pad)}
body.is-controls-hidden #controls-toggle svg{transform:rotate(180deg)}
body.is-controls-hidden .controls{transform:translateY(calc(100% + var(--pad) + 12px));opacity:0;pointer-events:none}
body.is-controls-hidden .usage{opacity:0}
.controls{transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .28s}
.usage{transition:opacity .28s}

/* ── isolate ───────────────────────────────────────────────────────────── */
#isolate-btn{
  font-family:var(--display);font-size:11px;letter-spacing:.05em;
  background:rgba(239,231,214,.1);border:1px solid var(--rule);border-radius:2px;
  color:var(--paper-2);padding:5px 10px;cursor:pointer;transition:background .16s;
}
#isolate-btn:hover{background:rgba(239,231,214,.2);color:#fff}
#isolate-btn.is-on{background:var(--gold);border-color:var(--gold);color:#241C16}

/* ── localization rulers drawn into the plate ──────────────────────────── */
.rule-line{stroke:rgba(239,231,214,.5);stroke-width:.8;fill:none;stroke-dasharray:3.5 2.5}
.rule-tick{stroke:rgba(239,231,214,.62);stroke-width:1.1}
.rule-plane{stroke:rgba(201,162,39,.5);stroke-width:.9;fill:none;stroke-dasharray:1.5 3}
.rule-text{
  font-family:"Iowan Old Style",Charter,Palatino,Georgia,serif;
  font-size:10.5px;fill:#EFE7D6;letter-spacing:.02em;
  paint-order:stroke;stroke:rgba(12,8,6,.85);stroke-width:2.6px;stroke-linejoin:round;
}

/* ── pathway stations ──────────────────────────────────────────────────── */
.circ-stations{display:block;margin-top:6px;line-height:1.5}
.circ-stations button{
  background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--display);font-size:10.5px;color:var(--paper-dim);letter-spacing:.01em;
}
.circ-stations button:hover{color:var(--paper);text-decoration:underline}
.circ-stations i{font-style:normal;color:rgba(163,148,125,.45);padding:0 4px}

/* ── localization note on the card ─────────────────────────────────────── */
.card-loc{
  margin-top:13px;padding:9px 11px;
  background:rgba(60,44,34,.07);border-left:2px solid var(--carmine);
  font-family:var(--serif);font-size:13px;line-height:1.5;color:#3A2E23;
}
.card-loc b{
  display:block;font-family:var(--display);font-weight:400;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#96795A;margin-bottom:3px;
}
.card-metrics{
  display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:11px;
  font-family:var(--mono);font-size:10.5px;color:#6B5A48;
}
.card-metrics span b{color:#241C16;font-weight:600}


/* ── section controls ──────────────────────────────────────────────────── */
.secaxis,.secrow{display:grid;gap:3px;margin-bottom:6px}
.secaxis{grid-template-columns:repeat(4,1fr)}
.secrow{grid-template-columns:1fr 1fr;margin-top:6px;margin-bottom:0}
.secaxis button,.secrow button{
  font-family:var(--display);font-size:10.5px;letter-spacing:.05em;
  background:rgba(239,231,214,.055);border:1px solid var(--rule-2);border-radius:2px;
  color:var(--paper-2);padding:5px 4px;cursor:pointer;white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.secaxis button:hover,.secrow button:hover{background:rgba(239,231,214,.13);color:var(--paper)}
.secaxis button.is-on{background:rgba(196,69,59,.24);border-color:rgba(196,69,59,.5);color:#fff}
.secrow button.is-on{background:var(--gold);border-color:var(--gold);color:#241C16}
input[type=range]:disabled{opacity:.3;cursor:default}

/* ── label focus ───────────────────────────────────────────────────────── */
.focusrow{display:flex;align-items:center;gap:9px;margin-top:8px}
.focusrow .ctl-name{flex:none}
.focusrow input[type=range]{flex:1}
.focus-val{font-family:var(--mono);font-size:10px;color:var(--paper-dim);min-width:44px;text-align:right}

/* ── card: header stays put while the body scrolls ─────────────────────── */
.card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.card-head{
  flex:none;position:relative;
  padding:18px 22px 0;
  background:linear-gradient(168deg,#F4EDDD 0%,#F1E9D7 100%);
}
.card-head .card-eyebrow{margin-bottom:0;padding-bottom:10px}
.card-scroll{
  overflow-y:auto;overscroll-behavior:contain;flex:1;
  padding:13px 22px 18px;
}
.card-scroll::-webkit-scrollbar{width:7px}
.card-scroll::-webkit-scrollbar-thumb{background:rgba(60,44,34,.2);border-radius:4px}
.card-close{top:14px;right:14px}

body.is-looking #stage{cursor:crosshair}

/* ── on-screen navigation, for touch ───────────────────────────────────── */
#pads{
  position:fixed;left:0;right:0;bottom:0;z-index:18;
  display:none;align-items:flex-end;justify-content:space-between;
  padding:0 var(--pad) calc(var(--pad) + 4px);
  pointer-events:none;
}
body.is-pads #pads{display:flex}
#pads{bottom:calc(var(--pad) + var(--rail-h, 0px) + 34px)}
body.is-controls-hidden #pads{bottom:calc(var(--pad) + 34px)}

.pad{
  position:relative;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(28,21,17,.62),rgba(20,14,12,.86));
  border:1px solid var(--rule);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  pointer-events:auto;touch-action:none;flex:none;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
}
.pad-cap{
  position:absolute;top:-16px;left:0;right:0;text-align:center;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-dim);
}
.pad-thumb{
  position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:rgba(239,231,214,.16);border:1px solid rgba(239,231,214,.34);
  transition:background .15s;will-change:transform;
}
.pad.is-active .pad-thumb{background:rgba(196,69,59,.42);border-color:var(--carmine)}
.pad-hint{
  position:absolute;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(163,148,125,.5);pointer-events:none;
}
.pad-n{top:6px;left:0;right:0;text-align:center}
.pad-s{bottom:6px;left:0;right:0;text-align:center}
.pad-w{left:5px;top:50%;transform:translateY(-50%)}
.pad-e{right:5px;top:50%;transform:translateY(-50%)}

.pad-col{display:flex;flex-direction:column;gap:6px;pointer-events:auto;margin:0 0 8px}
.pad-btn{
  width:46px;height:40px;border-radius:var(--r);cursor:pointer;
  background:rgba(20,14,12,.78);border:1px solid var(--rule);color:var(--paper-2);
  font-family:var(--display);font-size:15px;line-height:1;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  touch-action:none;transition:background .14s;
}
.pad-btn:active,.pad-btn.is-down{background:rgba(196,69,59,.4);color:#fff;border-color:var(--carmine)}

@media (max-width:820px){
  .pad{width:96px;height:96px}
  .pad-thumb{width:38px;height:38px;margin:-19px 0 0 -19px}
}

/* the selection bar persists until dismissed, so it carries its own close */
body.is-selected #focus-bar{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#focus-clear{
  width:24px;height:24px;padding:0;flex:none;
  background:none;border:1px solid var(--rule);border-radius:2px;
  color:var(--paper-dim);font-family:var(--display);font-size:16px;line-height:1;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;
}
#focus-clear:hover{background:var(--carmine);border-color:var(--carmine);color:#fff}
#details-btn{
  font-family:var(--display);font-size:11px;letter-spacing:.05em;
  background:rgba(239,231,214,.1);border:1px solid var(--rule);border-radius:2px;
  color:var(--paper-2);padding:5px 10px;cursor:pointer;transition:background .16s;
}
#details-btn:hover{background:rgba(239,231,214,.2);color:#fff}