/* ==========================================================================
   VLGE site · the live instruments, re-coloured
   The instruments are vlge.com's own modules and real captured data (core/lib/,
   patched only to read colours from CSS: research/INSTRUMENTS.md §5.5). Every
   --viz-* token below is read by a module from the instrument's own element, so a
   section's tone decides how its instruments look. Unset = the live look.
   ========================================================================== */

/* ---------- tokens, per tone ---------- */
.tone-light{
  --haze:#F6F1F4;--midnight:#1C141B;--accent:#AA4593;--accent-deep:#6C2D5D;--accent-soft:#EBD7E5;
  --mauve:var(--accent);--mauve-soft:var(--accent-soft);--mauve-deep:var(--accent-deep);--agent:#DF6420;
  --viz-paper:#F6F1F4;--viz-paper-2:#EDE4EA;--viz-ink:#1C141B;--viz-mute:#85737F;--viz-line:rgba(28,20,27,.14);
  --viz-grid:rgba(28,20,27,.06);--viz-grey:#9A8796;--viz-soft:#E7D9E2;
  --viz-ramp-lo:#C9B3C3;--viz-ramp-mid:#AA4593;--viz-ramp-hi:#3D1B35;--viz-bright:#1C141B;--viz-invert:0;
}
.tone-dark{
  --haze:#201C25;--midnight:#ECE6EA;--accent:#D897C9;--accent-deep:#F2D3EA;--accent-soft:#4A2B44;
  --mauve:var(--accent);--mauve-soft:var(--accent-soft);--mauve-deep:var(--accent-deep);--agent:#F07E3E;
  --viz-paper:#201C25;--viz-paper-2:#28232E;--viz-ink:#ECE6EA;--viz-mute:#A894A3;--viz-line:rgba(236,230,234,.14);
  --viz-grid:rgba(236,230,234,.06);--viz-grey:#8C7787;--viz-soft:#3B2738;
  --viz-ramp-lo:#6A5165;--viz-ramp-mid:#D897C9;--viz-ramp-hi:#FBEFF7;--viz-bright:#ECE6EA;--viz-invert:1;
  --viz-logo:"/logo/vlge-white.png";
}
/* the ingest stream is a dark card in either tone, as on the live site */
:root{--ing-bg:#12120F;--ing-bg-2:#15150F;--ing-bg-3:#100F0C;--ing-line:rgba(255,255,255,.1);--ing-ink:#FFFFFF;--ing-ink-2:#CFCBBD;--ing-mute:#9A9784;--ing-acc:#EDEDED;
  --step--1:12px;--step-0:15px;--step-1:clamp(19px,1.6vw,24px);--step-2:clamp(26px,2.4vw,38px);--body:var(--f-sans)}
/* the shared palette object (dataviz.js PAL) and builds.js read <html> only, once: the
   light evidence set by default; a direction that keeps its instruments dark overrides it */
:root:root{--accent:#000000;--accent-deep:#000000;--haze:#FFFFFF}

/* ---------- module chrome (injected at the end of <head>: overrides carry the host id) ---------- */
#console .cns{background:var(--viz-paper);border-color:var(--viz-line);box-shadow:none;border-radius:14px}
#console .cns__hd,#console .cns .field,#console .cns .stream,#console .cns .sig,#console .cns__transport{border-color:var(--viz-line)}
#console .cns__hd,#console .cns__hd .wm i,#console .cns .plabel,#console .cns .plabel i,#console .cns .kv .k,
#console .cns__transport .clock,#console .cns .callout .sub,#console .cns .js,#console .cns .jp{color:var(--viz-mute)}
#console .cns .jn{color:var(--viz-ink)}
#console .cns__hd .ratechip{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
#console .cns__hd .sw button{color:var(--viz-mute);border-color:var(--viz-line)}
#console .cns__hd .sw button.on{color:var(--viz-paper);background:var(--accent-deep);border-color:var(--accent-deep)}
#console .cns[data-focus] .panel.is-focus,#console .cns.is-transport-focus .cns__transport{background:var(--viz-paper)}
#console .cns__transport .play{color:var(--viz-ink);border-color:var(--viz-line)}
#console .cns__transport .scrub{background:var(--viz-line)}
#console .cns__hd{font-size:10.5px}
#ingest{--accent:var(--ing-acc)}
#ingest .ing{background:var(--ing-bg);border-color:var(--viz-line);box-shadow:none;border-radius:14px}
#ingest .ing__hd{background:var(--ing-bg-2);border-bottom-color:var(--ing-line);color:var(--ing-mute)}
#ingest .ing__lanes{background:var(--ing-bg-3);border-color:var(--ing-line)}
#ingest .ing__lane{border-color:var(--ing-line)}
#ingest .ing__lane.hot{background:var(--ing-bg-2)}
#ingest .ing__hd .wm,#ingest .ing__hd .rate b,#ingest .ing__lane .lid b{color:var(--ing-ink)}
#ingest .ing__hd .rate,#ingest .ing__lane .lid,#ingest .ing__json .ik{color:var(--ing-ink-2)}
#ingest .ing__hd .wm i,#ingest .ing__lane .lid .t,#ingest .ing__lane .geo,#ingest .ing__json .src,#ingest .ing__json .ip{color:var(--ing-mute)}
#ingest .ing__json .in{color:var(--ing-ink)}
#ingest .ing__json .is{color:var(--ing-acc)}
#moment-stage{--dg-bright:var(--accent)}
#moment-stage .dg-sbtn{background:var(--viz-paper);color:var(--viz-mute)}
#moment-stage .dg-sbtn.on{background:var(--accent);border-color:var(--accent);color:var(--viz-paper)}
#moment-stage .dg-readout{background:color-mix(in srgb,var(--viz-paper) 88%,transparent)}
#moment-stage .dg-readout .h,#moment-stage .dg-readout .k,#moment-stage .dg-readout .meta,#moment-stage .dg-readout .fire,
#moment-stage .dg-count .lbl,#moment-stage .dg-tlabel{color:var(--viz-mute)}
#moment-stage .dg-readout .bar{background:var(--viz-line)}
#moment-stage .dg-tip{background:var(--viz-ink);color:var(--viz-paper)}
#moment-stage .dg-tip b{color:var(--accent-soft)}
#builds .bd-stage,#builds .bd-feed,#builds .bd-ct{border-color:var(--viz-line);box-shadow:none}
#builds .bd-tele,#builds .bd-lrow,#builds .bd-jp{color:var(--viz-mute)}
#builds .bd-tab,#builds .bd-play{background:color-mix(in srgb,var(--viz-paper) 82%,transparent);border-color:var(--viz-line)}
#builds .bd-tab.on{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--viz-paper)}
#builds .bd-now{border-bottom-color:var(--viz-line);background:color-mix(in srgb,var(--viz-ink) 5%,transparent)}
#builds .bd-feed-hd{border-bottom-color:var(--viz-line)}
#builds .bd-track .rail{background:var(--viz-line)}
#corpus-feed .fv-feed{background:var(--viz-paper);border-color:var(--viz-line)}
#corpus-feed .fv-feed-hd{color:var(--viz-mute);border-bottom-color:var(--viz-line)}
#corpus-feed .fv-pin{border-bottom-color:var(--viz-line);background:color-mix(in srgb,var(--viz-ink) 5%,transparent)}
#corpus-feed .fv-row,#corpus-feed .fv-jp{color:var(--viz-mute)}
#corpus-feed .fv-stream::after{background:linear-gradient(to top,var(--viz-paper),transparent)}

/* ---------- instrument frames take the tone's paper ---------- */
.viewport,.corpus__stage,.moment__stage,.delta,.impact__viz,.trailplan{background:var(--viz-paper);border-color:var(--viz-line)}

/* ---------- home: the hero world and the capture carousel ---------- */
#heroLayer{opacity:1!important}                     /* the live script's scroll fade: the new hero stays a poster */
.pg-home .paper-fade{pointer-events:none}
.carousel{width:100%}
.carousel__stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#0B090D;border:1px solid var(--viz-line)}
.carousel__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease}
.carousel__vid.is-active{opacity:1}
.carousel__label{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:24px 14px 12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#F6F1F4;background:linear-gradient(to top,rgba(14,12,16,.7),rgba(14,12,16,0));pointer-events:none}
.carousel__nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:color-mix(in srgb,var(--viz-paper) 82%,transparent);color:var(--viz-ink);opacity:0;transition:opacity .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.carousel__stage:hover .carousel__nav{opacity:1}
.carousel__nav--prev{left:10px}.carousel__nav--next{right:10px}
.carousel__dots{display:flex;gap:9px;justify-content:center;margin-top:14px}
.carousel__dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;background:var(--viz-line);transition:background .2s,transform .2s}
.carousel__dot.is-active{background:var(--accent);transform:scale(1.3)}
.carousel__stage.is-crt::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:multiply;
  background:repeating-linear-gradient(to bottom,#0000006b 0 1px,#0000 1px 3px),repeating-linear-gradient(to right,#0000001a 0 1px,#0000 1px 3px),radial-gradient(122% 134% at 50% 50%,#0000 48%,#0000009e)}
.carousel__stage.is-crt::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(120% 130% at 50% 42%,#ffffff17,#fff0 62%);mix-blend-mode:screen}
.carousel__dotcanvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block}
.carousel__stage.is-dots{background:var(--viz-paper)}
.carousel__stage.is-dots .carousel__vid{opacity:0!important}
.carousel__stage.is-dots .carousel__label{color:var(--viz-ink);background:linear-gradient(to top,color-mix(in srgb,var(--viz-paper) 85%,transparent),transparent)}
.carousel__treat{display:flex;gap:0;justify-content:flex-end;margin-top:12px}
.carousel__treat button{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px 5px;border:1px solid var(--viz-line);background:transparent;color:var(--viz-mute);cursor:pointer}
.carousel__treat button:first-child{border-radius:999px 0 0 999px}
.carousel__treat button:last-child{border-radius:0 999px 999px 0}
.carousel__treat button+button{border-left:0}
.carousel__treat button.is-on{background:var(--accent-deep);color:var(--viz-paper);border-color:var(--accent-deep)}

/* ---------- labs: the streams stage (the page script drives which card shows) ---------- */
#stream-list{position:sticky;top:calc(var(--nav-h) + 14vh);min-width:0;align-self:start}
.streams .split{margin-top:clamp(24px,4vw,56px)}
@media (min-width:981px) and (max-height:820px){.streams .split .cns .json,.streams .split .cns .kv{font-size:9.5px}.streams .split .cns .fieldwrap{aspect-ratio:16/4.7}.streams .split .cns .json{height:64px}.streams .split .cns .sig canvas{height:48px}}
@media (min-width:981px) and (max-height:700px){.streams .split .cns .fieldwrap{aspect-ratio:16/3.7}.streams .split .cns .json{height:50px}}

/* ---------- real estate: the 3D splat hero (the island's own markup) ---------- */
.re-hero{position:relative;height:200vh;cursor:grab;touch-action:pan-y;padding:0}
.re-sticky{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;touch-action:pan-y}
.re-entry{position:absolute;left:50%;bottom:13vh;transform:translate(-50%);white-space:nowrap;font-family:var(--f-mono);font-size:12px;color:var(--viz-mute);opacity:0;transition:opacity .9s;pointer-events:none;z-index:2}
.re-cue{position:absolute;left:var(--m);bottom:12vh;font-family:var(--f-mono);font-size:12px;color:var(--viz-mute);padding:8px 14px;border-radius:999px;border:1px solid var(--viz-line);background:color-mix(in srgb,var(--viz-paper) 60%,transparent);transition:opacity .4s;pointer-events:none;z-index:2}
.re-cue .accent{color:var(--accent)}
.re-cue-touch{display:none}
.re-tap{position:absolute;left:50%;bottom:11vh;transform:translate(-50%);z-index:5;font-family:var(--f-mono);font-size:12px;color:var(--viz-ink);padding:9px 18px;border-radius:999px;border:1px solid var(--viz-line);background:var(--viz-paper);opacity:0;pointer-events:none;transition:opacity .3s}
.re-tap.on{background:var(--viz-ink);color:var(--viz-paper)}
.re-loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:10px;background:var(--viz-paper);color:var(--viz-mute);font-family:var(--f-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;transition:opacity .6s}
.re-loading__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
@media (hover:none),(max-width:700px){.re-cue-desk{display:none}.re-cue-touch{display:inline}}
/* the paths clip is black lines on white: blend it into the ground */
.pf__viz{position:relative;aspect-ratio:896/720;overflow:hidden;background:var(--viz-paper);isolation:isolate}
.pf__viz{background:#fff}
.pf__viz video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .18s}
.pf__viz.is-ready video{opacity:1}
.impact__viz{min-height:300px}
.trailplan .fp .k{color:var(--viz-mute)}
.trailplan .fp .v{color:var(--accent)}

/* ---------- retail: the wall of live worlds (built by the page script) ---------- */
.field__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,1vw,12px)}
.cell{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--viz-paper-2);border:1px solid var(--viz-line);border-radius:10px}
.cell.wide{grid-column:span 2;aspect-ratio:2/1}
.cell .poster{position:absolute;inset:0;background-size:cover;background-position:center}
.cell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s}
.cell.playing video{opacity:1}
.cell:hover{border-color:var(--accent)}
.cell .corner{position:absolute;top:8px;left:8px;z-index:3;font-family:var(--f-mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#F6F1F4;background:rgba(14,12,16,.55);padding:4px 6px;border-radius:4px}
.cell .tag{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:12px 10px 10px;
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:#F6F1F4;background:linear-gradient(180deg,transparent,rgba(14,12,16,.72))}
.cell .tag .reg{max-width:64%;line-height:1.35}
.cell .tag .ses{display:block;color:#D897C9;margin-top:2px}
@media (max-width:1100px){.field__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.field__grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- about: the hero world ---------- */
.pg-about .hero #fx{display:block}

/* phones: the eyebrow, then the promise and its chain (the first screen's job), then the hero world
   and the counter as the way into the wall of worlds */
@media (max-width:820px){
  .pg-home .scene{height:auto;min-height:0}
  .pg-home .pin{position:relative;inset:auto}
  .pg-home .layer{position:relative;inset:auto}
  .pg-home #heroLayer{display:flex;flex-direction:column;padding-top:calc(var(--nav-h) + 20px)}
  .pg-home #heroLayer .kick{position:static;order:1;padding:0 var(--m)}
  .pg-home #heroLayer #fx{position:relative;order:3;height:42svh;min-height:280px;margin-top:28px}
  .pg-home #heroLayer .paper-fade,.pg-home .hint,.scrollcue{display:none}
  .pg-home #heroLayer .sessions{position:static;order:4;padding:12px var(--m) 0;text-align:left}
  .pg-home #heroLayer .hero-copy{position:static;order:2;max-width:none;padding:20px var(--m) 0;transform:none;width:auto}
  .pg-home #heroLayer .hero-copy h1{font-size:clamp(30px,8.4vw,46px);max-width:none}   /* type 1 on phones */
  .re-hero{height:240vh}
}


/* ---------- the instruments keep the live site's black and white ----------
   Trajectories, point clouds and charts are data: they are drawn as on vlge.com, black and
   grey on white, in every direction and every section. Brand colour stays outside them. */
.viz-mono{
  --haze:#FFFFFF;--midnight:#141413;--ink:#141413;--ink-2:#5D5950;--ink-3:#8A8676;--line:rgba(42,43,42,.14);--line-2:rgba(42,43,42,.18);
  --accent:#000000;--accent-deep:#000000;--accent-soft:#E5E5E5;--mauve:#000000;--mauve-deep:#000000;--mauve-soft:#E5E5E5;
  --viz-paper:#FFFFFF;--viz-paper-2:#F2F2F2;--viz-ink:#141413;--viz-mute:#8A8676;--viz-line:rgba(42,43,42,.14);
  --viz-grid:rgba(42,43,42,.05);--viz-grey:#606060;--viz-soft:#E8E8E8;
  --viz-ramp-lo:#C4C4C4;--viz-ramp-mid:#808080;--viz-ramp-hi:#000000;--viz-bright:#141413;--viz-invert:0;--viz-logo:initial;
  color:#141413}
.viz-mono.viewport,.viz-mono.impact__viz,.viz-mono.delta,.viz-mono.trailplan,.viz-mono.corpus__stage,.viz-mono.moment__stage{background:#FFFFFF;border-color:rgba(42,43,42,.14)}
.carousel__stage.viz-mono{background:#0B090D}
.carousel__stage.viz-mono.is-dots{background:#FFFFFF}
.viz-mono .vp-tele,.viz-mono .corpus__tele,.viz-mono .vtag{color:#6B6658}
.delta.viz-mono .delta__rows .v,.delta.viz-mono .delta__rows [data-a-id],.delta.viz-mono .delta__rows .d,.delta.viz-mono .delta__hd .pip{color:#000}
.trailplan.viz-mono .fp .v{color:#000}
#ingest.viz-mono{--viz-line:rgba(255,255,255,.1)}