/* ============================================================================
   arcfly — near-black ground, one cool blue accent for the chain, amber used
   only where the map itself burns amber (the WebGL shaders paint firing cells
   gold, so every "is it firing" readout matches them). Thin arcs are the
   recurring graphic element: flat arc rules between sections, a quarter-arc
   on every instrument surface.

   The stage is composed around the neuron cloud: app.js measures .hook,
   #stats, #sensesStrip and .controls, fits the cloud into the space they
   leave, and writes the cloud's centre back as --bx / --by.

   Contract notes for anyone editing this file:
   - the stacked stage breakpoint MUST stay 900px (app.js STACKED matchMedia)
   - #sHash must be display:none while narrow (app.js skips the RPC read when
     offsetParent is null)
   - app.js REPLACES className on #pill, the readout <dd>s, #burnMsg, .sr and
     .inp, so those elements can only be styled through their ancestors
   - no external fonts, stylesheets or images: system stacks only
   ========================================================================= */

:root {
  --bg:    #06070a;
  --bg1:   #090b10;
  --bg2:   #0c0f15;
  --surf:  rgba(8, 10, 14, .62);
  --surf2: rgba(8, 10, 14, .95);

  --line:  rgba(152, 180, 220, .10);
  --line2: rgba(152, 180, 220, .17);
  --line3: rgba(152, 180, 220, .32);

  --ink:   #e7ecf4;
  --ink2:  #a7b2c4;
  --ink3:  #7f8a9c;   /* >= 4.5:1 on the ground: labels, hints, metadata */
  --ink4:  #333d4c;   /* hairlines and idle dots only, never text */

  --arc:      #5c9dff;              /* the one accent: Arc / chain / controls */
  --arc2:     #8fbcff;
  --arc-soft: rgba(92, 157, 255, .10);
  --arc-line: rgba(92, 157, 255, .42);

  --fire:  #f2a615;   /* only where the map burns amber: firing */
  --fire2: #ffd27a;
  --ice:   #cfe0f5;   /* a highlighted claim, matching the shader */
  --ok:    #6ed39b;
  --bad:   #ff8f7d;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --t: 200ms;
  --bar: 48px;
  --gut: clamp(16px, 2.6vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: 400; letter-spacing: -.02em; }
a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease); }
a:hover { color: var(--arc2); text-decoration-color: var(--arc); }
code, .mono { font-family: var(--mono); font-size: .92em; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--arc); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgba(92, 157, 255, .28); }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: 8px; left: 8px; z-index: 60; padding: 9px 14px; border-radius: 3px;
  background: var(--arc); color: #04101f; font: 500 13px var(--sans); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t) var(--ease); }
.skip:focus { transform: none; color: #04101f; }
#main:focus { outline: none; }

/* small shared primitives */
i:empty { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--ink4); vertical-align: middle; margin: 0 .65em; }
.n { font: 400 10.5px var(--mono); letter-spacing: .14em; color: var(--ink3); margin-right: 8px; }
.k { display: block; font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.tl { background: none; border: 0; padding: 0; margin: 0; color: var(--ink); font: inherit;
  text-decoration: underline; text-decoration-color: var(--line3); text-underline-offset: 3px;
  transition: color var(--t) var(--ease), text-decoration-color var(--t) var(--ease); }
.tl:hover { color: var(--arc2); text-decoration-color: var(--arc); }

/* the arc: a very flat hairline curve, used as the rule between sections */
.sec::before, .foot::before {
  content: ""; position: absolute; top: 0; left: -100%; right: -100%; height: 480px;
  border-radius: 50%; border-top: 1px solid var(--line); pointer-events: none;
}
/* the arc again, as a quarter-circle tick in the corner of every instrument */
.readout::before, .own-instrument::before, .inspector::before, .controls::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 18px; height: 18px;
  border-top: 1px solid var(--arc-line); border-left: 1px solid var(--arc-line);
  border-top-left-radius: 18px; pointer-events: none;
}

/* motion primitives: continuous, no bounce */
.reveal { animation: rise 700ms var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes rise   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tick   { from { opacity: .35; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes breathe{ 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes halo   { 0% { box-shadow: 0 0 0 0 rgba(92, 157, 255, .35); } 100% { box-shadow: 0 0 0 7px rgba(92, 157, 255, 0); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---------- system bar ---------- */
.sys { position: fixed; top: 0; left: 0; right: 0; z-index: 30; height: var(--bar);
  display: flex; align-items: center; gap: 18px; padding: 0 var(--gut);
  background: rgba(6, 7, 10, .62); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.mark:hover { color: var(--ink); }
.mark img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line2); }
.sys-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sb { font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink2);
  background: none; border: 1px solid var(--line2); border-radius: 3px; padding: 8px 11px;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); }
.sb:hover { color: var(--ink); border-color: var(--line3); background: rgba(255, 255, 255, .035); }
.sb[aria-expanded="true"] { color: var(--arc2); border-color: var(--arc-line); background: var(--arc-soft); }
.sb.ca { min-width: 80px; text-align: center; }
.sb.ca:disabled { color: var(--ink3); border-color: var(--line); cursor: default; background: none; }
.sb.ca.done { color: var(--arc2); border-color: var(--arc-line); }
/* app.js replaces this element's className with "pill live" / "pill off" */
.pill { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px;
  font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3);
  white-space: nowrap; transition: color var(--t) var(--ease); }
.pill i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink4); margin: 0; transition: background var(--t) var(--ease); }
.pill.live { color: var(--ink2); }
.pill.live i { background: var(--arc); animation: halo 2.8s var(--ease) infinite; }
.pill.off { color: var(--bad); }
.pill.off i { background: var(--bad); }

/* ---------- stage ---------- */
.stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: var(--bg);
  --bx: 58%; --by: 48%; scroll-margin-top: 0; }
#brain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; cursor: grab; touch-action: pan-y; }
#brain.drag { cursor: grabbing; }
.veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 60% at var(--bx) var(--by), transparent 44%, rgba(6, 7, 10, .55) 100%),
    radial-gradient(ellipse 46% 34% at 8% 4%, rgba(92, 157, 255, .05), transparent 72%),
    linear-gradient(180deg, rgba(6, 7, 10, .62) 0%, transparent 20%, transparent 68%, rgba(6, 7, 10, .82) 100%); }
/* the horizon arc: one static hairline curve under the cloud */
.stage::after { content: ""; position: absolute; left: -60%; right: -60%; bottom: -640px; height: 720px;
  border-radius: 50%; border-top: 1px solid rgba(152, 180, 220, .09); z-index: 2; pointer-events: none; }
.stage > :not(canvas):not(.veil) { z-index: 3; }

.hook { position: absolute; top: calc(var(--bar) + 52px); left: var(--gut); max-width: 420px; pointer-events: none; }
.hook > * { pointer-events: auto; }
.eyebrow { margin: 0 0 18px; font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.hook h1 { margin: 0; font-size: clamp(32px, 3.9vw, 52px); line-height: 1.02; letter-spacing: -.035em; font-weight: 300; color: var(--ink); text-wrap: balance; }
.hook .sub { margin: 20px 0 0; color: var(--ink2); max-width: 380px; font-size: 14.5px; line-height: 1.6; }

/* the readout: the status line of a running machine, as one instrument */
.readout { position: absolute; left: var(--gut); bottom: 30px; margin: 0; display: grid; gap: 1px;
  padding: 13px 20px 14px 17px; pointer-events: none;
  background: var(--surf); border: 1px solid var(--line); border-radius: 3px;
  backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); }
.rw { position: relative; display: grid; grid-template-columns: 92px auto; align-items: baseline; padding: 4px 0; }
.rw dt { font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
/* app.js replaces the className on these <dd>s: style them from the row only */
.rw dd { margin: 0; font: 400 15px/1.2 var(--mono); color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.rw dd small { font-size: 11px; color: var(--ink3); margin-left: 9px; letter-spacing: 0; }
.rw dd.dim { color: var(--ink3); }
.rw dd.warn { color: var(--bad); }
.rw dd.tick { animation: tick 360ms var(--ease); }
/* the window cadence hairline restarts whenever a new window lands */
.rw .cadence { position: absolute; left: 92px; right: 0; bottom: 0; height: 1px; width: auto;
  background: var(--line2); margin: 0; border-radius: 0; }
.rw .cadence::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--arc); }
.rw .cadence.run::after { width: 100%; transition: width var(--cad, 12s) linear; }
/* the newest block's hash, typeset once under the block row */
.rw .hash { grid-column: 2; font: 400 10px/1.4 var(--mono); color: var(--ink3); letter-spacing: 0;
  max-width: 34ch; word-break: break-all; min-height: 2.8em; margin-top: 4px; opacity: 0; }
.rw .hash.in { opacity: 1; animation: fadein 800ms var(--ease); }
.rw.blk { grid-template-rows: auto auto; }

/* senses: the live strip of Arc signals (a button that opens the details panel) */
.senses { position: absolute; right: var(--gut); bottom: 30px; display: grid; gap: 8px;
  background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.senses:empty { display: none; }
.senses .sl, .senses .sc { display: none; font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
/* app.js replaces .sr classNames ("sr", "sr on", "sr off") and sets --a */
.sr { display: grid; grid-template-columns: 104px 72px 58px; gap: 14px; align-items: center;
  font: 400 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3);
  transition: color var(--t) var(--ease); }
.sr .k { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr .m { display: block; position: relative; height: 1px; background: var(--line2); overflow: visible; }
.sr .m b { position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--a, 0) * 100%);
  background: var(--fire); opacity: .92; transition: width 900ms var(--ease); }
.sr .v { text-align: right; letter-spacing: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr.on { color: var(--ink2); }
.sr.on .k { color: var(--ink); }
.sr.off { opacity: .45; }
.senses:hover .sr { color: var(--ink2); }
.senses:hover .sc { color: var(--arc2); }

.offline, .loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; max-width: 340px; color: var(--ink2); font-size: 13.5px; }
.offline b { display: block; font: 400 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bad); margin-bottom: 9px; }
.loading { display: flex; align-items: center; gap: 10px; font: 400 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }
.loading i { width: 5px; height: 5px; border-radius: 50%; background: var(--arc); margin: 0; animation: breathe 1.7s ease-in-out infinite; }

/* map controls sit under the cloud, wherever the composition puts it */
.controls { position: absolute; left: var(--bx); transform: translateX(-50%); bottom: 30px;
  display: flex; align-items: center; gap: 2px; padding: 3px;
  background: var(--surf); border: 1px solid var(--line); border-radius: 3px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: left 600ms var(--ease); }
.controls button { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 2px; background: transparent;
  color: var(--ink2); font: 400 14px var(--mono); line-height: 1;
  transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.controls button:hover { color: var(--ink); background: rgba(255, 255, 255, .06); }
.controls #spin { width: auto; padding: 0 11px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.controls #spin[aria-pressed="true"] { color: var(--arc2); }
.controls #spin[aria-pressed="false"] { color: var(--ink3); }
.controls .hint { padding: 0 12px 0 11px; margin-left: 5px; border-left: 1px solid var(--line2);
  font: 400 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); white-space: nowrap; }

/* neuron inspector: built entirely by app.js */
.inspector { position: absolute; top: calc(var(--bar) + 26px); right: var(--gut);
  width: min(330px, calc(100% - 2 * var(--gut))); padding: 17px 18px 15px; font-size: 13px;
  background: var(--surf2); border: 1px solid var(--line2); border-radius: 3px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .55); animation: rise 300ms var(--ease) both; }
.inspector .k { margin: 0 0 8px; }
.inspector h3 { margin: 0 0 10px; font: 300 24px/1.1 var(--mono); letter-spacing: -.03em; }
.inspector .state { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px;
  font: 400 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.inspector .state i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink4); margin: 0; }
.inspector .state.on { color: var(--fire2); }
.inspector .state.on i { background: var(--fire); box-shadow: 0 0 9px rgba(242, 166, 21, .7); }
.inspector dl { margin: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 7px 12px; }
.inspector dt { font: 400 10.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.inspector dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.inspector dd.mono { font-family: var(--mono); font-size: 12px; }
.inspector .own { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); }
.inspector .own .k { margin-bottom: 6px; }
.inspector .own .ut { overflow-wrap: anywhere; white-space: pre-wrap; unicode-bidi: isolate; }
.inspector .own .nm { font-size: 15px; font-weight: 500; }
.inspector .note { color: var(--ink2); margin-top: 3px; }
.inspector .quiet { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink3); }
.inspector .meta { margin-top: 7px; font: 400 11px var(--mono); color: var(--ink3); }
.inspector .meta a { color: var(--ink2); }
.x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 2px;
  background: none; color: var(--ink3); font-size: 18px; line-height: 1;
  transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.x:hover { color: var(--ink); background: rgba(255, 255, 255, .07); }

/* ---------- scrim + details panel ---------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(3, 4, 6, .62); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease); }
.scrim.open { opacity: 1; pointer-events: auto; }
.panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(420px, 100%);
  display: flex; flex-direction: column; background: var(--surf2); border-left: 1px solid var(--line2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  transform: translateX(100%); visibility: hidden;
  transition: transform 320ms var(--ease), visibility 0s linear 320ms;
  box-shadow: -30px 0 90px rgba(0, 0, 0, .5); }
.panel.open { transform: none; visibility: visible; transition-delay: 0s; }
.panel-head { position: relative; flex: none; height: var(--bar); padding: 0 20px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.panel-head h2 { margin: 0; font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.panel .x { top: 50%; transform: translateY(-50%); right: 14px; }
.panel-body { flex: 1; overflow: auto; padding: 24px 20px 56px; scrollbar-width: thin; scrollbar-color: var(--line3) transparent; }
.panel-body > * { opacity: 0; transform: translateY(6px); transition: opacity 400ms var(--ease) 80ms, transform 400ms var(--ease) 80ms; }
.panel.open .panel-body > * { opacity: 1; transform: none; }

.dsec { padding: 0 0 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.dsec:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.dsec h3 { margin: 0 0 7px; font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); display: flex; align-items: center; gap: 10px; }
.dsub { font-size: 12.5px; color: var(--ink3); margin: 0 0 18px; line-height: 1.5; }
.badge { font: 400 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fire2); border: 1px solid rgba(242, 166, 21, .4); border-radius: 3px; padding: 3px 6px; }

/* the live senses list, built by app.js */
.inputs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.inputs .empty { color: var(--ink3); font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.inp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; font-size: 13px; }
.inp .nm { display: flex; align-items: center; gap: 9px; min-width: 0; }
.inp .nm i { width: 6px; height: 6px; border-radius: 1px; flex: none; margin: 0; }
.inp .val { font: 400 11px var(--mono); color: var(--ink2); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inp .grp { grid-column: 1 / -1; color: var(--ink3); font-size: 11.5px; line-height: 1.45; }
.inp .meter { grid-column: 1 / -1; display: block; position: relative; height: 1px; background: var(--line2); margin-top: 7px; overflow: visible; }
.inp .meter b { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--fire); transition: width 900ms var(--ease); }
.inp.idle .nm { color: var(--ink2); }
.inp.off { opacity: .48; }

.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 12.5px; color: var(--ink2); line-height: 1.45; }
.legend li { display: flex; gap: 11px; align-items: baseline; }
.sw { flex: none; display: inline-block; width: 7px; height: 7px; border-radius: 50%; transform: translateY(-1px); }
.sw.fire { background: var(--fire); box-shadow: 0 0 9px rgba(242, 166, 21, .65); }
.sw.mine { background: var(--ice); }
.sw.base { background: #39404c; }
.sw.imp  { background: transparent; border: 1px dashed var(--ink3); }

.proof { display: grid; grid-template-columns: 1fr; gap: 15px; margin: 15px 0 0; }
.proof dt { font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); margin-bottom: 5px; }
.proof dd { margin: 0; font: 400 11.5px/1.6 var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.proof dd code { font-size: 11px; color: var(--ink2); }
.proof dd .src { display: block; font-family: var(--sans); color: var(--ink3); font-size: 11.5px; margin-top: 4px; line-height: 1.45; }

/* ---------- sections below the stage ---------- */
.sec { position: relative; overflow: hidden; padding-block: clamp(72px, 9vw, 122px); padding-inline: var(--gut);
  scroll-margin-top: var(--bar); }
.wrap { max-width: 1120px; margin: 0 auto; }
.sec-head { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 24px; align-items: start; margin-bottom: 40px; }
.sec-head .idx { margin: 0; display: flex; align-items: center; gap: 11px; padding-top: 7px;
  font: 400 11px/1 var(--mono); letter-spacing: .2em; color: var(--arc); }
.idx .tick { display: block; flex: none; width: 14px; height: 14px; border-top: 1px solid var(--arc-line); border-left: 1px solid var(--arc-line); border-top-left-radius: 14px; }
.sec h2 { margin: 0; font-size: clamp(22px, 2.5vw, 30px); line-height: 1.15; font-weight: 300; letter-spacing: -.03em; }
.sec-sub { margin: 8px 0 0; font-size: 13.5px; color: var(--ink3); max-width: 60ch; }

.lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; max-width: 74ch; color: var(--ink2); margin: 0 0 48px; font-weight: 300; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.three > article { position: relative; border-top: 1px solid var(--line2); padding-top: 20px; }
.three .k { color: var(--arc); margin-bottom: 14px; }
.three h3 { margin: 0 0 10px; font-size: 16px; font-weight: 500; letter-spacing: -.01em; }
.three p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.6; }
.three .tl { margin-top: 14px; font-size: 13px; display: inline-block; }
.three .note-line { margin-top: 14px; font: 400 11.5px/1.5 var(--mono); letter-spacing: .02em; color: var(--ink3); }
.not { margin: 48px 0 0; padding-top: 22px; border-top: 1px solid var(--line); max-width: 78ch;
  font-size: 13.5px; line-height: 1.6; color: var(--ink3); }

/* the senses map table */
.smap { width: 100%; border-collapse: collapse; margin: 0; }
.smap th, .smap td { text-align: left; vertical-align: baseline; padding: 14px 20px 14px 0; border-bottom: 1px solid var(--line); }
.smap thead th { padding-bottom: 11px; border-bottom-color: var(--line2);
  font: 400 10.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink3); }
.smap tbody th { width: 38%; font: 400 14px/1.5 var(--mono); color: var(--ink); font-weight: 400; }
.smap tbody td { color: var(--ink2); font-size: 14px; line-height: 1.5; }
.smap tbody tr:last-child th, .smap tbody tr:last-child td { border-bottom: 0; }
.notes { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line2); display: grid; gap: 16px; max-width: 78ch; }
.notes p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink3); }
.notes b { color: var(--ink2); font-weight: 500; }

/* the Arc spec sheet */
.spec { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; border-top: 1px solid var(--line2); }
.spec > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 18px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.spec dt { font: 400 10.5px/1.7 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.spec dd { margin: 0; color: var(--ink); font-size: 14.5px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.spec dd .sub { display: block; color: var(--ink3); font-size: 12.5px; margin-top: 4px; line-height: 1.5; }

/* ---------- own your neurons ---------- */
.own-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 64px; align-items: start; }
.steps { list-style: none; margin: 0 0 34px; padding: 0; }
.steps li { position: relative; padding: 20px 0 20px 48px; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li:first-child .n { top: 1px; }
.steps .n { position: absolute; left: 0; top: 21px; margin: 0; color: var(--arc); }
.steps h3 { margin: 0 0 7px; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; }
.steps p { margin: 0; color: var(--ink2); font-size: 14px; line-height: 1.6; max-width: 52ch; }
.fine { margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line2); list-style: none; display: grid; gap: 7px;
  font-size: 12px; line-height: 1.55; color: var(--ink3); }
.fine li { padding-left: 15px; position: relative; }
.fine li::before { content: ""; position: absolute; left: 0; top: .72em; width: 6px; height: 1px; background: var(--ink4); }
.fine code { color: var(--ink2); }

.own-instrument { position: relative; border: 1px solid var(--line2); border-radius: 3px; padding: 24px 22px 22px;
  background: linear-gradient(180deg, rgba(92, 157, 255, .035), transparent 42%), var(--bg1); }
.own-instrument .closed { margin-bottom: 0; }
.own-instrument .closed + form, .own-instrument .closed + .done { margin-top: 24px; }
.price { margin: 0 0 18px; font: 400 11px var(--mono); letter-spacing: .06em; color: var(--ink3); }
.price #price, .price #left { color: var(--ink); }
.closed { margin: 0 0 22px; }
.tag { display: inline-block; margin: 0 0 12px; padding: 6px 9px; border: 1px solid var(--arc-line); border-radius: 3px;
  font: 400 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--arc2); background: var(--arc-soft); }
.why { margin: 0; color: var(--ink2); font-size: 13px; line-height: 1.6; }
.field { display: block; margin-bottom: 15px; }
.lab { display: flex; align-items: baseline; font-size: 12.5px; color: var(--ink2); margin-bottom: 8px; }
.lab em { font-style: normal; font: 400 10.5px var(--mono); color: var(--ink3); margin-left: auto; transition: color var(--t) var(--ease); }
.lab em.over { color: var(--bad); }
.field input, .field textarea { width: 100%; background: rgba(255, 255, 255, .03); border: 1px solid var(--line2); border-radius: 3px;
  padding: 11px 12px; font-size: 16px; line-height: 1.4; resize: vertical; color: var(--ink);
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease); }
.field input:hover, .field textarea:hover { border-color: var(--line3); }
.field input:focus, .field textarea:focus { border-color: var(--arc-line); outline: none; background: rgba(255, 255, 255, .045); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: rgba(255, 143, 125, .6); }
.field input::-webkit-outer-spin-button, .field input::-webkit-inner-spin-button { opacity: .35; }
.cost { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin: 6px 0 16px; padding-top: 15px;
  border-top: 1px solid var(--line); font: 400 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.cost b { color: var(--ink); font: 400 14px var(--mono); letter-spacing: 0; text-transform: none; text-align: right; overflow-wrap: anywhere; }
.btn { display: inline-block; width: 100%; padding: 12px 15px; border-radius: 3px; border: 1px solid var(--line2);
  background: rgba(255, 255, 255, .035); color: var(--ink); font-weight: 500; font-size: 13.5px; line-height: 1.2;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease), transform var(--t) var(--ease); }
.btn:hover { background: rgba(255, 255, 255, .07); border-color: var(--line3); }
.btn:active { transform: translateY(1px); }
.btn.arc { background: var(--arc); border-color: var(--arc); color: #04101f; }
.btn.arc:hover { background: var(--arc2); border-color: var(--arc2); color: #04101f; }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.btn.ghost { width: auto; margin-top: 22px; padding: 9px 15px; background: none;
  font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); }
/* app.js replaces this className with "msg", "msg ok" or "msg err" */
.msg { min-height: 1.4em; margin: 11px 0 0; font-size: 12.5px; color: var(--ink2); line-height: 1.5; overflow-wrap: anywhere; }
.msg.err { color: var(--bad); }
.msg.ok { color: var(--ok); }
.done { margin: 10px 0 0; padding: 14px 15px; font-size: 13px; border: 1px solid rgba(110, 211, 155, .32); border-radius: 3px; overflow: hidden; }
.done h3 { margin: 0 0 5px; font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ok); }
.done p { margin: 0; color: var(--ink2); }
.done .ut { unicode-bidi: isolate; overflow-wrap: anywhere; color: var(--ink); }
.done .ids { font: 400 11px/1.6 var(--mono); color: var(--ice); max-height: 100px; overflow: auto; overflow-wrap: anywhere; margin: 9px 0; }
.done a { font-size: 12.5px; }

/* ---------- owners ---------- */
.wall { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.wall li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px;
  align-items: center; padding: 19px 0; border-bottom: 1px solid var(--line); transition: background var(--t) var(--ease); }
.wall li.active::before { content: ""; position: absolute; left: -14px; top: 19px; bottom: 19px; width: 1px; background: var(--ice); }
.wall .who { min-width: 0; }
.wall .nm, .wall .nt { unicode-bidi: isolate; overflow-wrap: anywhere; white-space: pre-wrap; }
.wall .nm { font-size: 16px; font-weight: 500; line-height: 1.3; }
.wall .nt { color: var(--ink2); font-size: 14px; margin-top: 3px; }
.wall .meta { grid-column: 1; display: flex; flex-wrap: wrap; gap: 4px 15px; margin-top: 5px; font: 400 11px var(--mono); color: var(--ink3); }
.wall .meta a { color: var(--ink2); text-decoration-color: var(--line2); }
.wall .show { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--line2); border-radius: 3px;
  background: none; color: var(--ink2); font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background var(--t) var(--ease); }
.wall .show::before { content: ""; width: 5px; height: 5px; border-radius: 50%; border: 1px solid var(--ice); transition: background var(--t) var(--ease); }
.wall .show:hover { color: var(--ink); border-color: var(--line3); background: rgba(255, 255, 255, .035); }
.wall .show:hover::before, .wall li.active .show::before { background: var(--ice); }
.wall .empty { display: block; color: var(--ink3); font-size: 13.5px; padding: 24px 0; }

/* ---------- credits + foot ---------- */
.credits { padding-block: clamp(60px, 7vw, 84px); }
.cred { margin: 0; padding: 0; list-style: none; color: var(--ink2); display: grid; gap: 8px; font-size: 13.5px; max-width: 78ch; }
.foot { position: relative; overflow: hidden; padding: 34px var(--gut) 48px; text-align: center;
  font: 400 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }

/* ---------- responsive ---------- */
/* below 1240px the full senses list would sit under the nerve cord: it collapses
   to one dot per sense, with a label and a count so it never reads as stray dots */
@media (max-width: 1240px) {
  .senses { display: flex; align-items: center; gap: 8px; padding: 7px 0; }   /* taller hit area for the collapsed dots */
  .senses .sl, .senses .sc { display: inline; }
  .senses .sl { margin-right: 4px; }
  .senses .sc { margin-left: 8px; color: var(--ink2); }
  .sr { display: block; }
  .sr .k, .sr .v { display: none; }
  .sr .m { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); opacity: .7;
    transition: background var(--t) var(--ease), opacity var(--t) var(--ease); }
  .sr .m b { display: none; }
  .sr.on .m { background: var(--fire); opacity: calc(.35 + var(--a, 0) * .65); }
  .sr.off .m { opacity: .28; }
}
@media (max-width: 1180px) {
  .controls .hint { display: none; }
  .hook { max-width: 340px; }
  .hook h1 { font-size: clamp(30px, 3.6vw, 40px); }
  .hook .sub { max-width: 340px; font-size: 14px; }
  .own-grid { gap: 44px; }
}
/* stacked stage (phones, portrait tablets). This breakpoint is wired to app.js
   (STACKED = matchMedia("(max-width: 900px)")) and must stay at 900px. */
@media (max-width: 900px) {
  .sys { gap: 10px; }
  .sb { padding: 7px 9px; letter-spacing: .07em; }
  .sb.ca { min-width: 0; }
  .pill { margin-left: 2px; }
  .pill span { display: none; }

  .stage { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-items: end; column-gap: 12px; height: 100svh; min-height: 640px; padding: calc(var(--bar) + 22px) var(--gut) 14px; }
  .stage > :not(canvas):not(.veil) { position: relative; }
  .hook { grid-column: 1 / -1; grid-row: 1; align-self: start; top: auto; left: auto; max-width: none; }
  .hook h1 { font-size: clamp(27px, 7.4vw, 36px); }
  .hook .sub { font-size: 13.5px; margin-top: 13px; max-width: 440px; }
  .senses { grid-column: 1; grid-row: 3; right: auto; bottom: auto; margin: 0 0 14px; min-width: 0; flex-wrap: wrap; row-gap: 7px; }
  .controls { grid-column: 2; grid-row: 3; left: auto; bottom: auto; transform: none; margin: 0 0 14px; justify-self: end; }
  .readout { grid-column: 1 / -1; grid-row: 4; left: auto; bottom: auto; padding: 12px 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .rw { grid-template-columns: 1fr; gap: 5px; padding: 0; }
  .rw.opt, .rw .hash { display: none; }   /* #sHash must stay display:none here */
  .rw dd { font-size: 14px; }
  .rw .cadence { left: 0; bottom: -6px; }
  .offline, .loading { position: absolute; }
  .inspector { position: absolute; top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; max-height: 62%; overflow: auto; }

  .sec-head { grid-template-columns: 1fr; gap: 12px; margin-bottom: 30px; }
  .sec-head .idx { padding-top: 0; }
  .three { grid-template-columns: 1fr; gap: 30px; }
  .spec { grid-template-columns: 1fr; gap: 0; }
  .own-grid { grid-template-columns: 1fr; gap: 34px; }
  .panel { width: 100%; }
  .wall li { grid-template-columns: minmax(0, 1fr); }
  .wall .show { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 10px; }
  .wall li.active::before { left: -8px; }
}
/* the senses map stacks rather than squeezing two text columns */
@media (max-width: 680px) {
  .smap thead { display: none; }
  .smap tbody tr { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .smap tbody tr:last-child { border-bottom: 0; }
  .smap tbody th, .smap tbody td { display: block; width: auto; padding: 0; border: 0; }
  .smap tbody td { margin-top: 4px; }
  .spec > div { grid-template-columns: 1fr; gap: 5px; }
}
@media (max-width: 420px) {
  .eyebrow .opt { display: none; }
  .sb { padding: 7px 8px; }
  .senses .sc { display: none; }
  .steps li { padding-left: 0; }
  .steps .n { position: static; display: block; margin-bottom: 7px; }
  .steps li:first-child .n { top: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .inspector, .rw dd.tick, .rw .hash.in, .loading i, .pill.live i { animation: none; }
  .rw .cadence.run::after { transition: none; width: 0; }
  .sr .m, .sr .m b, .inp .meter b, .btn, .panel, .panel-body > *, .scrim, .sb, .x, .controls, .skip, .senses .sc { transition: none; }
  .panel-body > * { opacity: 1; transform: none; }
}