/* ============================================================
   Kalash Changal — explorable mind
   Dark, cinematic, scientific. Type is small and uppercase, the
   canvas does the talking, and everything in the HUD sits on its
   own compositor layer so canvas repaints never re-rasterise it.
   ============================================================ */
/* Type note — why Manrope at 500 rather than Space Grotesk at 300.

   Light weights disappear on a near-black ground: the stems thin out
   under the antialiaser until the paragraph reads as grey texture
   rather than words. The obvious fix — bolding Space Grotesk — costs
   line length, because its heavier cuts are wider, and a portfolio
   already dense with prose cannot afford longer lines.

   Manrope is a compact grotesque: at 500 it sets no wider than Space
   Grotesk Light did, so every measure below survives untouched while
   the text picks up real weight. The text colours come up with it,
   since half of "too thin" on dark is contrast, not stroke.

   --wt is the one dial: every run of body copy is set from it, so the
   whole site can be made heavier or lighter from a single line. */
:root{
  --void:#02050a; --ink:#eaf3f8; --dim:#93a9ba; --faint:#4e6373;
  --cyan:#5ad6ff; --ember:#ff9a4d; --hair:rgba(120,190,220,.18);
  --disp:"Syncopate","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Manrope","Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wt:500;              /* body copy */
  --wt-strong:600;       /* headings and anything that leads a block */
  --prose:#b9cbd7;       /* paragraphs and list items */
  --wt-label:700;        /* Syncopate ships 400 and 700 only, and 400 at
                            8-11px under .2em tracking is a whisper */
  --pad:60px; --padtop:54px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--void);color:var(--ink);font-family:var(--body);
  font-weight:var(--wt);-webkit-font-smoothing:antialiased;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
:focus-visible{outline:1px solid var(--cyan);outline-offset:4px}
.ml{font-family:var(--disp);font-weight:400;font-size:10px;letter-spacing:.28em;text-transform:uppercase}

#gl{position:fixed;inset:0;display:block;touch-action:none}

/* The overlay stack. Each layer is promoted so the canvas repainting
   underneath cannot force the text above it to re-rasterise — that was
   half of the label shimmer. */
#hue{position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity .5s ease,background .5s ease;will-change:opacity}
#vig{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(132% 112% at 50% 46%,transparent 32%,rgba(0,1,4,.78) 100%)}
#svg{position:fixed;inset:0;pointer-events:none;z-index:3;
  will-change:transform;transform:translateZ(0)}
#dom{position:fixed;inset:0;pointer-events:none;z-index:4;
  will-change:transform;transform:translateZ(0)}
.hud{position:fixed;z-index:6;pointer-events:none;transform:translateZ(0)}
.hud>*{pointer-events:auto}

/* ---------- boot ---------- */
#boot{position:fixed;inset:0;z-index:40;background:var(--void);display:grid;place-items:center;
  transition:opacity .9s ease;text-align:center;padding:24px}
#boot.gone{opacity:0;pointer-events:none}
#boot p{margin:0;color:#33454f}
#boot .sub{margin-top:14px;font-size:12px;font-family:var(--body);letter-spacing:0;text-transform:none}
#boot .bar{margin:22px auto 0;width:180px;height:1px;background:rgba(90,214,255,.14);overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:var(--cyan);transition:width .35s}

/* ---------- identity ---------- */
#identity{top:var(--padtop);left:var(--pad);transition:opacity .7s,transform .7s}
#identity h1{margin:0;font-family:var(--disp);font-weight:400;font-size:32px;letter-spacing:.13em;
  line-height:1.55;text-transform:uppercase}
#identity h1 span{display:block}
#identity h1 span:last-child{color:#9fb6c4}
#identity .headline{margin:14px 0 0;color:#5f7d8d;font-size:9.5px;letter-spacing:.24em}
#identity .rule{width:52px;height:1px;background:var(--ember);margin:20px 0 18px}
#identity .roles{margin:0;color:var(--faint);line-height:2.4}
#cta{margin-top:36px;display:flex;align-items:center;gap:16px;font-family:var(--disp);
  font-size:11px;letter-spacing:.26em;color:var(--ink);text-transform:uppercase;transition:color .3s}
#cta em{font-style:normal;width:32px;height:32px;border:1px solid var(--hair);border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-family:var(--body);
  transition:border-color .3s,background .3s,transform .3s}
#cta:hover{color:#fff}
#cta:hover em{border-color:var(--cyan);background:rgba(90,214,255,.12);transform:translateX(5px)}

/* The one line that tells a first-time visitor what they are looking at. */
#tagline{bottom:46px;left:var(--pad);transition:opacity .6s;max-width:30ch}
#tagline b{
  display:block;font-family:var(--disp);font-weight:400;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
#tagline span{
  display:block;margin-top:10px;font-size:14px;line-height:1.7;color:#6b8496;
}
/* The navigation hint has to stay legible — it was the thing people said
   they could not find. Dim on interaction, but never to a whisper. */
#hint{bottom:46px;right:var(--pad);text-align:right;color:#7b93a4;line-height:2.3;
  font-size:10px;letter-spacing:.16em;transition:opacity .6s}
#hint b{font-weight:400;color:var(--cyan)}
body.touched #hint{opacity:.7}
#disclaimer{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;
  margin:0;color:#25323c;font-size:8px;letter-spacing:.24em;pointer-events:none;
  font-family:var(--disp);text-transform:uppercase;text-align:center;max-width:80vw}

#nav{top:56px;right:var(--pad);display:flex;gap:24px;flex-wrap:wrap;justify-content:flex-end;
  max-width:min(60vw,720px)}
#nav button{font-family:var(--disp);font-size:10px;letter-spacing:.24em;color:var(--dim);
  text-transform:uppercase;transition:color .25s;white-space:nowrap}
#nav button:hover,#nav button.on{color:var(--cyan)}

/* ---------- region labels ----------
   Positioned entirely by an integer translate3d from JS. The fixed-height
   box with an integer negative margin does the vertical centring, so no
   percentage transform ever lands on a half pixel. */
.rlabel{
  position:absolute;top:0;height:54px;margin-top:-27px;
  display:flex;flex-direction:column;justify-content:center;
  white-space:nowrap;pointer-events:auto;cursor:pointer;opacity:0;
  transition:opacity .45s ease;
  will-change:transform,opacity;backface-visibility:hidden;
}
.rlabel.right{left:0}
.rlabel.left{right:0;text-align:right;align-items:flex-end}
.rlabel:not(.on){pointer-events:none}
.rlabel b{display:block;font-family:var(--disp);font-weight:400;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;transition:text-shadow .25s}
.rlabel span{display:block;margin-top:6px;font-size:11px;font-weight:var(--wt);color:#5d7383}
.rlabel:hover b{text-shadow:0 0 16px currentColor}
.rlabel.tier-detail span{opacity:.7}

/* ---------- hover readout ---------- */
#tip{
  position:fixed;top:0;left:0;z-index:7;pointer-events:none;min-width:262px;max-width:330px;
  background:rgba(3,9,15,.86);border:1px solid var(--hair);
  border-left:1px solid var(--accent,var(--cyan));
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:20px 24px 21px;opacity:0;transition:opacity .18s;
  will-change:transform,opacity
}
#tip.on{opacity:1}
#tip .hd{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
#tip .nm{font-family:var(--disp);font-size:12px;letter-spacing:.16em;font-weight:400;
  text-transform:uppercase;color:var(--accent,var(--cyan))}
#tip .ct{font-family:var(--disp);font-size:9px;letter-spacing:.16em;color:var(--faint);
  text-transform:uppercase;flex:none}
#tip .lat{margin:6px 0 14px;font-size:12px;font-style:italic;color:#5d7383}
#tip .tg{margin:0;font-size:14px;font-weight:var(--wt);line-height:1.9;color:var(--prose)}
#tip .go{margin:15px 0 0;font-family:var(--disp);font-size:9px;letter-spacing:.2em;
  color:var(--accent,var(--cyan));text-transform:uppercase}

/* ---------- entering overlay ---------- */
#entering{position:fixed;top:50%;right:72px;transform:translateY(-50%);text-align:right;
  opacity:0;transition:opacity .5s;z-index:6;pointer-events:none}
#entering.on{opacity:1}
#entering .k{color:var(--faint)}
#entering h2{margin:16px 0 28px;font-family:var(--disp);font-weight:400;font-size:20px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.8}
#entering ul{margin:0;padding:0;list-style:none}
#entering li{font-family:var(--disp);font-size:10px;letter-spacing:.26em;color:#5a7186;
  text-transform:uppercase;line-height:2.7;opacity:0;transform:translateX(12px);
  transition:opacity .5s,transform .5s}
#entering.on li{opacity:1;transform:none}

/* ---------- content neurons ---------- */
.cnode{
  position:absolute;top:0;left:0;width:76px;height:76px;margin:-38px 0 0 -38px;
  pointer-events:auto;cursor:pointer;display:grid;place-items:center;opacity:0;
  transition:opacity .5s ease;will-change:transform,opacity
}
.cnode.show{opacity:1}
.cnode .ring{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(150,205,230,.3);
  background:radial-gradient(circle,rgba(2,6,12,.92) 0%,rgba(2,6,12,.82) 58%,rgba(2,6,12,0) 100%);
  transition:transform .34s cubic-bezier(.2,.8,.3,1),border-color .3s,box-shadow .35s}
.cnode svg{width:27px;height:27px;stroke:var(--ic,#fff);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.95)) drop-shadow(0 0 2px rgba(0,0,0,1))}
.cnode b{position:absolute;top:-29px;font-family:var(--disp);font-size:10px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;color:#b3c6d2;
  text-shadow:0 0 8px rgba(0,0,0,.95);transition:color .3s;
  max-width:38vw;overflow:hidden;text-overflow:ellipsis}
.cnode:hover .ring,.cnode.sel .ring{transform:scale(1.12);border-color:currentColor;
  box-shadow:0 0 34px -4px currentColor}
.cnode:hover b,.cnode.sel b{color:#fff}
/* "5 parts" under a node that opens into its own network */
.cnode .cap{position:absolute;bottom:-20px;font-style:normal;font-family:var(--disp);
  font-size:7px;letter-spacing:.2em;text-transform:uppercase;color:#5c7182;
  white-space:nowrap;text-shadow:0 0 8px rgba(0,0,0,.95);
  max-width:34vw;overflow:hidden;text-overflow:ellipsis}
.cnode:hover .cap,.cnode.sel .cap{color:currentColor}
/* sub-nodes sit one level in, so they read a size smaller */
.cnode.sub{width:58px;height:58px;margin:-29px 0 0 -29px}
.cnode.sub .ring{width:58px;height:58px}
.cnode.sub svg{width:21px;height:21px}
.cnode.sub b{top:-21px;font-size:7.5px;letter-spacing:.2em}

/* ---------- region title ---------- */
#region-title{position:fixed;right:64px;top:50%;transform:translateY(-50%);text-align:right;z-index:5;
  opacity:0;transition:opacity .6s;pointer-events:none;max-width:25ch}
#region-title.on{opacity:1}
#region-title h2{margin:0;font-family:var(--disp);font-weight:400;font-size:20px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.8}
#region-title .lat{margin:10px 0 0;font-size:12.5px;font-style:italic;color:#5d7383}
#region-title .rule{width:44px;height:1px;margin:22px 0 22px auto}
#region-title .verbs{color:#43566a;line-height:2.8}
#region-title p{margin:26px 0 0;font-size:14.5px;font-weight:var(--wt);line-height:1.9;color:var(--prose)}

/* ---------- project panel ---------- */
#panel{position:fixed;z-index:8;top:0;right:0;height:100%;width:466px;padding:104px 48px 56px;
  background:linear-gradient(270deg,rgba(2,7,13,.975) 56%,rgba(2,7,13,0));
  display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform:translateX(22px);opacity:0;visibility:hidden;
  transition:opacity .42s,transform .42s,visibility .42s}
#panel.on{opacity:1;transform:none;visibility:visible}
#panel::-webkit-scrollbar{width:2px}
#panel::-webkit-scrollbar-thumb{background:rgba(120,190,220,.22)}
#p-kicker{color:var(--faint)}
#panel h2{margin:16px 0 0;font-family:var(--body);font-weight:400;font-size:27px;line-height:1.3}
#panel .rule{width:44px;height:1px;margin:24px 0;background:var(--accent,var(--cyan))}
#panel .txt{margin:0 0 24px;font-size:15.5px;font-weight:var(--wt);line-height:1.85;color:var(--prose);max-width:38ch}
#panel ul{margin:0 0 26px;padding:0;list-style:none}
#panel li{font-size:14.5px;font-weight:var(--wt);line-height:1.8;color:var(--prose);
  padding-left:18px;position:relative;margin-bottom:6px}
#panel li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:1px;
  background:var(--accent,var(--cyan));opacity:.8}
#panel .tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
#panel .tags span{font-family:var(--disp);font-size:9px;letter-spacing:.16em;color:var(--dim);
  border:1px solid rgba(120,190,220,.2);padding:7px 11px;text-transform:uppercase}
/* ticked capability list — the "what this actually does" column */
#panel ul.specs{margin:0 0 26px;display:grid;gap:9px}
#panel ul.specs li{padding-left:24px;margin:0;font-size:12.8px;color:#a8bcc9}
#panel ul.specs li::before{content:"";position:absolute;left:0;top:3px;
  width:13px;height:13px;background:none;opacity:1;
  border:1px solid var(--accent,var(--cyan));border-radius:2px}
#panel ul.specs li::after{content:"";position:absolute;left:4px;top:6px;
  width:5px;height:2.5px;border-left:1.5px solid var(--accent,var(--cyan));
  border-bottom:1.5px solid var(--accent,var(--cyan));transform:rotate(-45deg)}

/* media frames live in css/media.css — the panel only sets the grid */
#panel .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:26px}

/* actions — first link is the primary button, the rest are quiet */
#panel .acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
#panel .acts a{font-family:var(--disp);font-size:8px;letter-spacing:.24em;text-transform:uppercase;
  text-decoration:none;padding:12px 18px;border:1px solid var(--hair);color:var(--dim);
  transition:border-color .25s,color .25s,background .25s}
#panel .acts a:hover{border-color:var(--accent,var(--cyan));color:#fff;
  background:color-mix(in srgb,var(--accent,#5ad6ff) 12%,transparent)}
#panel .acts a.primary{border-color:var(--accent,var(--cyan));color:var(--accent,var(--cyan))}
#panel .links{display:flex;gap:24px;flex-wrap:wrap}
#panel .links a{font-size:12.5px;font-weight:400;color:var(--accent,var(--cyan));text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:3px;opacity:.85}
#panel .links a:hover{opacity:1}
#p-back{margin-top:auto;padding-top:36px;align-self:flex-start;font-family:var(--disp);
  font-size:8.5px;letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
#p-back:hover{color:var(--cyan)}

/* Breadcrumb is generated: every step but the last is a button back to it. */
/* Breadcrumb is generated: every step but the last is a button back to it.
   Project labels are long, so each step truncates rather than pushing the
   trail into the nav on the right. */
#crumb{top:56px;left:var(--pad);display:flex;align-items:center;
  gap:13px;flex-wrap:nowrap;color:var(--dim);max-width:min(46vw,560px);
  opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
#crumb.on{opacity:1;visibility:visible}
#crumb button,#crumb span{max-width:19ch;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;display:block;flex:0 1 auto}
#crumb button{opacity:.7;transition:opacity .25s,color .25s}
#crumb button:hover{opacity:1;color:var(--cyan)}
#crumb span{color:#c3d3dd;flex:0 0 auto;max-width:24ch}
#crumb i{font-style:normal;color:#2c3b47;flex:none}

/* ---------- EEG ---------- */
#eeg{left:50%;bottom:38px;transform:translateX(-50%) translateZ(0);width:300px;
  opacity:.45;transition:opacity .5s}
#eeg.hot{opacity:1}
#eeg .row{display:flex;justify-content:space-between;align-items:baseline;
  color:#3d5061;margin-bottom:9px;transition:color .35s;gap:12px}
#eeg.hot .row{color:var(--eeg,#5ad6ff)}
#eeg .row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#eeg .row span:last-child{white-space:nowrap;flex:none}
#eeg-c{display:block;width:300px;height:43px}
#eeg>*{pointer-events:none}

/* ---------- dive readout ----------
   Only visible while the camera is actually travelling. It reports the real
   flight progress, so it is a status line rather than decoration. */
#dive{left:var(--pad);bottom:46px;right:var(--pad);
  display:flex;align-items:center;gap:20px;color:#3d5261;
  opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
body.flying #dive{opacity:1;visibility:visible}
#dive .track{flex:1;max-width:340px;height:1px;background:rgba(120,190,220,.16);
  overflow:hidden}
#dive .track i{display:block;height:100%;width:100%;
  background:var(--accent,var(--cyan));transform:scaleX(0);transform-origin:0 50%;
  will-change:transform}
#dive-pct{flex:none;color:var(--accent,var(--cyan));min-width:38px;text-align:right}
#dive>*{pointer-events:none}
body.flying #eeg,body.flying #region-title,body.flying #panel,body.flying #crumb{opacity:0}
/* the detail panel replaces the title card rather than stacking over it */
body[data-mode="node"] #region-title{opacity:0}

/* ---------- guide ----------
   Shown once on a first visit, and any time the Guide button is pressed.
   The site is unfamiliar by design; it should not also be unexplained. */
#guide{
  position:fixed;inset:0;z-index:26;display:grid;place-items:center;padding:24px;
  background:rgba(1,3,7,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s;
}
#guide.on{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
#guide .g-box{
  width:min(560px,100%);padding:40px 42px 34px;
  background:rgba(4,10,17,.97);border:1px solid var(--hair);
  border-top:2px solid var(--cyan);
  box-shadow:0 40px 90px -30px #000;
  transform:translateY(-10px);transition:transform .35s;
}
#guide.on .g-box{transform:none}
#guide .g-k{margin:0;color:var(--faint)}
#guide h2{
  margin:16px 0 0;font-family:var(--disp);font-weight:400;
  font-size:24px;letter-spacing:.1em;text-transform:uppercase;line-height:1.4;
}
#guide .g-lede{margin:16px 0 0;font-size:15px;line-height:1.85;color:var(--prose);max-width:44ch}
#guide .g-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:14px}
#guide .g-steps li{display:flex;align-items:flex-start;gap:16px}
#guide .g-steps b{
  flex:none;width:24px;height:24px;border:1px solid rgba(90,214,255,.4);border-radius:50%;
  display:grid;place-items:center;font-family:var(--disp);font-size:9px;font-weight:400;
  color:var(--cyan);
}
#guide .g-steps span{font-size:14.5px;line-height:1.6;color:var(--dim);padding-top:3px}
#guide .g-steps strong{font-weight:400;color:var(--ink)}
#guide .g-acts{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:34px}
#guide #guide-go{
  font-family:var(--disp);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--cyan);color:var(--cyan);
  transition:background .25s,color .25s;
}
#guide #guide-go:hover{background:rgba(90,214,255,.14);color:#fff}
#guide #guide-read{font-size:13px;color:var(--faint);text-decoration:none;border-bottom:1px solid currentColor}
#guide #guide-read:hover{color:var(--cyan)}

/* ---------- ripple ---------- */
.rip{fill:none;stroke-width:1.2}

/* ---------- atlas sheet ---------- */
#atlas-sheet{position:fixed;inset:0;z-index:14;pointer-events:none;
  background:linear-gradient(90deg,rgba(1,4,8,.94) 30%,rgba(1,4,8,.55) 70%,transparent);
  opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
#atlas-sheet.on{opacity:1;visibility:visible;pointer-events:auto}
#atlas-sheet .inner{position:absolute;left:var(--pad);top:118px;bottom:96px;width:min(560px,52vw);
  display:flex;flex-direction:column}
#atlas-sheet h2{margin:0;font-family:var(--disp);font-weight:400;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
#atlas-note{margin:12px 0 22px;font-size:11.5px;line-height:1.8;color:var(--faint);max-width:44ch}
#atlas-list{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0;padding:0 8px 0 0;display:flex;flex-direction:column;gap:2px}
#atlas-list::-webkit-scrollbar{width:2px}
#atlas-list::-webkit-scrollbar-thumb{background:rgba(120,190,220,.22)}
.arow{display:grid;grid-template-columns:8px 1fr auto;grid-template-areas:"i n c" "i l c" "i t c";
  gap:2px 14px;align-items:center;padding:12px 14px;text-align:left;
  border:1px solid transparent;transition:border-color .22s,background .22s}
.arow i{grid-area:i;width:5px;height:5px;border-radius:50%;background:var(--c);
  box-shadow:0 0 12px var(--c)}
.arow .n{grid-area:n;font-family:var(--disp);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c)}
.arow .l{grid-area:l;font-size:10.5px;font-style:italic;color:#3e5262}
.arow .t{grid-area:t;font-size:11px;color:var(--dim);margin-top:3px}
.arow .c{grid-area:c;font-family:var(--disp);font-size:8px;letter-spacing:.2em;color:#33454f}
.arow:hover{border-color:var(--hair);background:rgba(90,214,255,.045)}
#atlas-close{position:absolute;left:var(--pad);bottom:52px;font-family:var(--disp);font-size:8.5px;
  letter-spacing:.3em;color:var(--dim);text-transform:uppercase}
#atlas-close:hover{color:var(--cyan)}

/* ---------- command palette ---------- */
#pal{position:fixed;inset:0;z-index:20;display:grid;place-items:start center;
  padding:15vh 16px 16px;background:rgba(1,3,7,.80);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;transition:opacity .22s,visibility 0s linear .22s}
#pal.on{opacity:1;visibility:visible;transition:opacity .22s,visibility 0s}
#pal .box{width:min(620px,100%);background:rgba(4,10,17,.985);border:1px solid var(--hair);
  box-shadow:0 40px 90px -30px #000;transform:translateY(-10px);transition:transform .22s}
#pal.on .box{transform:none}
#pal .in{display:flex;align-items:center;gap:18px;padding:20px 24px;
  border-bottom:1px solid rgba(120,190,220,.12)}
#pal .in span{color:var(--faint);flex:none}
#pal input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);
  font-family:var(--body);font-size:16px;font-weight:var(--wt)}
#pal input::placeholder{color:rgba(51,69,81,.5)}
#pal ul{list-style:none;margin:0;padding:8px 0;max-height:46vh;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
#pal ul::-webkit-scrollbar{width:2px}
#pal ul::-webkit-scrollbar-thumb{background:rgba(120,190,220,.22)}
#pal li{display:flex;align-items:center;gap:16px;padding:11px 24px;cursor:pointer;
  border-left:2px solid transparent}
#pal li i{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 10px currentColor}
#pal li .t{flex:1;font-size:13.5px;color:var(--ink);font-weight:var(--wt);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pal li .s{font-family:var(--disp);font-size:8px;letter-spacing:.22em;color:var(--faint);
  text-transform:uppercase;flex:none}
#pal li.sel{background:rgba(90,214,255,.07);border-left-color:currentColor}
#pal li.sel .t{color:#fff}
#pal .empty{padding:26px 24px;color:var(--faint);font-size:13px}
#pal .foot{display:flex;gap:26px;padding:14px 24px;color:#2c3b47;
  border-top:1px solid rgba(120,190,220,.10)}

/* ---------- text mode ----------
   The overlay is just a scroll container now; everything inside it is
   the shared text site, styled by css/textsite.css. */
#tv{position:fixed;inset:0;z-index:22;background:var(--void);overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
#tv.on{visibility:visible;opacity:1}
#tv::-webkit-scrollbar{width:3px}
#tv::-webkit-scrollbar-thumb{background:rgba(120,190,220,.22)}

/* ---------- state-driven visibility ---------- */
body.immersed #identity{opacity:0;transform:translateX(-18px);pointer-events:none}
body.immersed #tagline,
body.immersed #hint,
body.immersed #eeg,
body.immersed #disclaimer{opacity:0}
body.immersed #eeg{opacity:.85}
body[data-mode="diving"] #eeg,
body[data-mode="inside"] #eeg,
body[data-mode="node"] #eeg{opacity:.85}
body.atlas #tagline,body.atlas #hint{opacity:0}
body.atlas #identity{opacity:0;pointer-events:none}
/* the atlas takes the whole frame; anything underneath would compete */
body.atlas #panel,body.atlas #region-title{opacity:0;pointer-events:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  :root{--pad:36px;--padtop:34px}
  #identity h1{font-size:24px}
  #panel{width:400px;padding:48px 36px}
  #region-title{right:40px;max-width:22ch}
  #entering{right:44px}
}

@media (max-width:820px){
  :root{--pad:22px;--padtop:22px}
  #identity h1{font-size:20px;line-height:1.5}
  #identity .rule{margin:16px 0 12px}
  #identity .roles{line-height:2}
  #cta{margin-top:22px}
  #nav{gap:16px;max-width:52vw}
  #tagline{display:none}
  #region-title{right:auto;left:22px;top:auto;bottom:150px;transform:none;text-align:left;
    max-width:70vw}
  #region-title .rule{margin:16px auto 16px 0}
  #region-title p{margin-top:16px;font-size:12px}
  #entering{right:22px;top:auto;bottom:170px;transform:none}
  #atlas-sheet{background:rgba(1,4,8,.95)}
  #atlas-sheet .inner{left:22px;right:22px;width:auto;top:92px;bottom:88px}
  /* text-site padding lives in css/textsite.css */
}

/* Phones: the brain stays the hero, the chrome becomes a bottom bar and
   a stack of sheets above it. --bar is how much room that bar reserves. */
@media (max-width:640px),(pointer:coarse) and (max-width:900px){
  :root{--pad:18px;--padtop:18px;--bar:calc(46px + env(safe-area-inset-bottom))}
  /* Name only. With the tagline the two columns nearly met in the middle of
     a 375px screen; the tagline is one tap away in the readout anyway. */
  .rlabel{height:32px;margin-top:-16px}
  .rlabel b{font-size:10px;letter-spacing:.14em}
  .rlabel span{display:none}

  #identity h1{font-size:18px;letter-spacing:.1em}
  #identity .roles{display:flex;gap:14px;line-height:1}
  #identity .rule{margin:12px 0 10px}
  #cta{margin-top:18px}

  /* navigation becomes a thumb-reachable bar */
  #nav{top:auto;bottom:0;left:0;right:0;max-width:none;
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:0;
    justify-content:space-between;align-items:center;
    padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,rgba(2,5,10,.96) 55%,rgba(2,5,10,0));
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  #nav button{font-size:7.5px;letter-spacing:.16em;padding:4px 8px;flex:0 0 auto}

  /* readout docks above the bar instead of chasing a finger */
  #tip{left:0 !important;right:0;top:auto !important;bottom:var(--bar);
    transform:none !important;min-width:0;max-width:none;width:100%;
    border:0;border-top:1px solid var(--accent,var(--cyan));
    padding:15px 18px 16px;background:rgba(3,9,15,.95)}
  #tip .tg{font-size:11.5px;line-height:1.7}
  #tip .go{margin-top:10px}

  #eeg{width:min(300px,72vw);bottom:calc(var(--bar) + 12px)}
  #eeg-c{width:100%}
  /* the readout sheet occupies that space, so stand the trace down */
  body.readout #eeg{opacity:0}
  #disclaimer{display:none}
  #hint{display:none}
  #tagline b{font-size:11px}
  #tagline span{font-size:12.5px}

  #panel{width:100%;height:auto;max-height:78%;top:auto;bottom:0;
    padding:26px 22px calc(20px + var(--bar));
    background:rgba(2,7,13,.985);border-top:1px solid var(--hair);
    transform:translateY(26px)}
  #panel.on{transform:none}
  #panel h2{font-size:21px}
  #p-back{margin-top:22px;padding-top:0}

  .cnode{width:60px;height:60px;margin:-30px 0 0 -30px}
  .cnode .ring{width:60px;height:60px}
  .cnode svg{width:22px;height:22px}
  .cnode b{top:-22px;font-size:7.5px;letter-spacing:.18em}
  .cnode .cap{bottom:-18px;font-size:6.5px}
  .cnode.sub{width:48px;height:48px;margin:-24px 0 0 -24px}
  .cnode.sub .ring{width:48px;height:48px}
  .cnode.sub svg{width:18px;height:18px}
  .cnode.sub b{top:-18px;font-size:7px}

  #crumb{max-width:none;gap:9px;font-size:7.5px}
  #dive{left:var(--pad);right:var(--pad);bottom:calc(var(--bar) + 14px);gap:12px}
  #dive-label{display:none}
  #panel .shots{grid-template-columns:repeat(3,1fr);gap:6px}
  #panel .acts a{padding:11px 14px;font-size:7.5px;letter-spacing:.18em}

  #region-title{bottom:auto;top:104px;max-width:60vw}
  #region-title h2{font-size:14px}
  #region-title p{display:none}
  /* in a project the parts are already on screen as nodes — listing them
     in the title card as well just collides with them */
  body[data-mode="project"] #region-title .verbs,
  body[data-mode="project"] #region-title .rule{display:none}
  body[data-mode="project"] #region-title{max-width:52vw}
  /* the long descriptor under a sub-node has nowhere to go on a phone */
  .cnode.sub .cap{display:none}
  #entering{bottom:auto;top:50%;left:22px;right:22px;transform:translateY(-50%);text-align:left}
  #entering h2{font-size:14px}

  #pal{padding:8vh 12px 12px}
  #pal .in{padding:16px 18px}
  #pal li{padding:12px 18px}
  #pal .foot{display:none}

  #atlas-sheet .inner{left:18px;right:18px;top:76px;bottom:calc(var(--bar) + 46px)}
  .arow{padding:11px 10px}
  #atlas-close{left:18px;bottom:calc(var(--bar) + 8px)}

  /* text-site padding lives in css/textsite.css */

  /* the region readout must not sit under the panel or the atlas */
  body[data-mode="node"] #tip,body.atlas #tip{opacity:0}
}

/* Short landscape phones: drop the vertical furniture entirely. */
@media (max-height:520px) and (orientation:landscape){
  #identity .roles,#tagline,#disclaimer{display:none}
  #identity h1{font-size:17px}
  #cta{margin-top:14px}
  #eeg{display:none}
}

@media (prefers-reduced-motion:reduce){
  .rlabel,#tip,#panel,#entering,#region-title,#atlas-sheet,#pal,#tv{transition-duration:.01ms}
}

/* ============================================================
   WEIGHT PASS — the display face, made legible.

   Syncopate ships in 400 and 700 and nothing between. Every small
   tracked label on this page was set in 400, and at 8–11px with
   .16–.28em of tracking that is not a quiet label, it is an
   invisible one: the tracking pulls the stems apart until there is
   more gap than letter.

   700 is therefore not a stylistic choice here, it is the only
   other option — and at these sizes it reads as crisp rather than
   heavy. The large uppercase settings are deliberately left at 400,
   because a 32px name in Syncopate Bold is shouting.
   ============================================================ */
.ml,
#nav button,
#cta,
#hint,
#disclaimer,
.rlabel b,
#tagline b,
#tip .nm,
#tip .ct,
#tip .go,
#entering li,
.cnode .cap,
#panel .tags span,
#panel .acts a,
#p-back,
#atlas-close,
.arow .n,
.arow .c,
#pal li .s,
#pal .foot span{font-weight:var(--wt-label)}

/* Tracking that made sense for a light weight is too generous for a
   bold one — pull it back so the labels read as words, not as spaced
   capitals. */
.ml{letter-spacing:.22em}
#nav button{letter-spacing:.19em}

/* Prose that was set straight from --dim: lift it to the reading
   colour, keeping --dim for the labels it was chosen for. */
#guide .g-steps span,
#region-title #rt-lede,
#tagline span{color:var(--prose)}

/* ============================================================
   MICRO LABELS — Syncopate stops working below about 10px.

   Syncopate is a wide geometric display face: its caps are built
   from near-circles and long flat strokes, which is exactly what
   makes the name and the region titles look like an anatomy plate.
   At 7–9px with tracking on top, those same shapes collapse — the
   counters fill in and "OPENCV" comes out as a row of blobs.

   So the type system splits by size rather than by role. Syncopate
   keeps everything from ~10px up, where its character is the point.
   Everything smaller is set in Manrope, uppercased and tracked: it
   holds its shape at 7px, and tracked caps read as the same family
   of label either way.
   ============================================================ */
:root{ --micro:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif; }

#disclaimer,
#tip .ct,
#tip .go,
#panel .tags span,
#panel .acts a,
#p-back,
#atlas-close,
.arow .n,
.arow .c,
#pal li .s,
#pal .foot span,
.mem figcaption{font-family:var(--micro);font-weight:700}

/* Manrope's caps carry more ink per letter, so they need slightly
   less tracking than Syncopate did to read as the same label. */
#panel .tags span{font-size:9.5px;letter-spacing:.13em}
#panel .acts a{font-size:8.5px;letter-spacing:.18em}
#tip .ct,#tip .go{letter-spacing:.13em}
.arow .n{font-size:10px;letter-spacing:.1em}
#pal li .s{letter-spacing:.14em}
.mem figcaption{font-size:8px;letter-spacing:.14em;color:#cfdde6}