/* One Line — signature prototype.
   Resting states at A01 quality (composed, tactile, intentional); transitions
   in the line-based motion grammar. Paper, ink, one purple/iridescent family.
   The hero form is A01's iridescent sphere rebuilt natively in layers. */

@font-face{ font-family:'AvantGarde'; src:url('assets/fonts/AvantGardeBold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face{ font-family:'CenturyGothic'; src:url('assets/fonts/CenturyGothic.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'CenturyGothic'; src:url('assets/fonts/CenturyGothicBold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root{
  --paper:#f7f4ee;
  --paper-deep:#efe9df;
  --ink:#0c0b0a;
  --ink-trace:#1d1915;
  --ink-soft:#6b6b73;      /* AA on paper */
  --line:#e6dfd4;
  --accent:#6557ff;
  --iri:linear-gradient(92deg,#7d95ee 0%,#a98be6 34%,#e39ac2 66%,#f3c184 100%);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:'CenturyGothic',system-ui,-apple-system,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
h1{ margin:0; font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; text-wrap:balance; }
a{ color:inherit; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:10px 16px; z-index:200; }
.skip-link:focus{ left:12px; top:12px; }

/* ---------- Chrome: fixed, never animates ---------- */
.chrome{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px; pointer-events:none;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.chrome-name{ font-family:'AvantGarde'; font-weight:700; letter-spacing:.3em; font-size:13px; }
.chrome-nav{ display:flex; gap:34px; pointer-events:auto; }
.chrome-nav a{ text-decoration:none; color:var(--ink-soft); font-weight:700; font-size:10.5px; }
.chrome-nav a:hover{ color:var(--ink); }
.chrome-cta{
  pointer-events:auto; text-decoration:none; font-weight:700; font-size:10.5px; letter-spacing:.2em;
  color:#fff; background:var(--ink); border-radius:999px; padding:14px 30px;
  box-shadow:0 10px 24px rgba(20,16,10,.18);
}
.chrome-foot[hidden]{ display:none; }
.chrome-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:100; pointer-events:none;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 40px; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-soft);
}
.foot-name{ font-family:'AvantGarde'; font-weight:700; letter-spacing:.3em; color:var(--ink); }
.foot-arc .arc-step{ font-weight:700; transition:color .35s; }
.foot-arc .arc-step.active{ color:var(--accent); }
.foot-arc .arc-sep{ margin:0 12px; opacity:.6; }

/* ---------- Stage ---------- */
.story{
  position:relative; width:100vw; height:100vh; height:100svh; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 50%, #f9f6f1 0%, var(--paper) 55%, var(--paper-deep) 100%);
}
.stage{ position:absolute; inset:0; transform-origin:50% 50%; will-change:transform; }
.layer{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.layer-bg{ will-change:filter, opacity; }
.layer-thread{ filter:drop-shadow(0 10px 14px rgba(90,70,40,.16)); }
.grain{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.05; mix-blend-mode:multiply; }

/* the warm light: where attention is */
.light{
  position:absolute; left:0; top:0; width:62vw; height:62vw; max-width:900px; max-height:900px;
  margin:-31vw 0 0 -31vw; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(255,246,230,.9) 0%, rgba(255,246,230,.45) 30%, rgba(255,246,230,0) 64%);
}

/* ---------- The hero form (A01 sphere, native) ---------- */
.orb{
  position:absolute; left:78%; top:44%; width:98vh; height:98vh;
  margin:-49vh 0 0 -49vh; border-radius:50%;
  will-change:transform;
}
.orb > div{ position:absolute; border-radius:50%; }
.orb-core{
  inset:0;
  background:
    radial-gradient(circle at 28% 80%, rgba(255,178,150,.34) 0%, rgba(255,178,150,0) 40%),
    radial-gradient(circle at 20% 30%, rgba(150,175,245,.26) 0%, rgba(150,175,245,0) 38%),
    radial-gradient(circle at 42% 36%, #ffffff 0%, #fcfafc 24%, #f5f0f5 50%, #ece4ec 74%, #dfd4df 100%);
  box-shadow:
    inset -30px -60px 110px rgba(120,80,70,.12),
    inset 0 36px 70px rgba(255,255,255,.8),
    0 70px 140px rgba(120,90,40,.18);
}
.orb-iris{
  inset:0; opacity:.42; mix-blend-mode:multiply; filter:blur(28px);
  background:conic-gradient(from 200deg at 50% 50%,
    rgba(143,168,240,0) 0deg, rgba(143,168,240,.85) 45deg, rgba(185,139,230,.95) 95deg,
    rgba(240,150,190,.9) 150deg, rgba(246,201,138,.95) 215deg, rgba(246,201,138,0) 270deg, rgba(143,168,240,0) 360deg);
}
.orb-band{
  inset:2%; opacity:.85; filter:blur(10px);
  background:conic-gradient(from 210deg at 50% 50%,
    rgba(143,168,240,0) 0deg, rgba(143,168,240,.55) 40deg, rgba(185,139,230,.6) 95deg,
    rgba(240,150,190,.6) 150deg, rgba(246,201,138,.7) 215deg, rgba(246,201,138,0) 265deg, rgba(143,168,240,0) 360deg);
  -webkit-mask:radial-gradient(circle, transparent 60%, #000 80%, #000 92%, transparent 99%);
          mask:radial-gradient(circle, transparent 60%, #000 80%, #000 92%, transparent 99%);
}
.orb-highlight{
  width:40%; height:28%; left:12%; top:10%; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.98), rgba(255,255,255,0) 70%);
  filter:blur(6px);
}
.orb-rim{ inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), inset 0 0 50px rgba(255,255,255,.55); }
.orb-flare{
  left:18%; top:64%; width:130%; height:70%; border-radius:50%;
  background:radial-gradient(ellipse at 40% 40%, rgba(255,186,110,.62) 0%, rgba(255,140,120,.32) 36%, rgba(255,140,120,0) 68%);
  filter:blur(34px); opacity:.95;
}

/* ---------- Traces (the six qualities) ---------- */
.trace{ fill:none; stroke:var(--ink-trace); stroke-linecap:round; stroke-linejoin:round; }
.q-customer{ stroke-width:1.1; opacity:.34; }
.q-market{ stroke-width:1.25; opacity:.36; }
.q-product{ stroke-width:1.05; opacity:.28; stroke-linejoin:miter; }
.q-competitive{ stroke-width:1.15; opacity:.30; stroke-linejoin:miter; }
.q-sales{ stroke-width:1.45; opacity:.32; }
.q-internal{ stroke-width:1.7; opacity:.30; }
.trace.iri{ stroke:url(#iri); stroke-width:1.6; opacity:.9; }
.trace.from-orb{ opacity:0; }
.contour{ fill:none; stroke:var(--ink-trace); stroke-width:1; opacity:.09; }

/* ---------- The thread ---------- */
.strand path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }
.strand .halo{ stroke:var(--paper); stroke-width:6; }
.strand .ink{ stroke:var(--ink-trace); stroke-width:2.1; opacity:.86; }
.strand .acc{ stroke:url(#grad); stroke-width:2.3; opacity:0; }

/* ---------- Type + the composed resting state ---------- */
.type{ position:absolute; inset:0; pointer-events:none; }
.hero{ position:absolute; inset:0; }
.hero > *{ position:absolute; }
.eyebrow{
  left:7%; top:17%; margin:0;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); font-weight:700;
}
.eyebrow .x{ margin:0 12px; opacity:.6; }
.h{ position:absolute; line-height:1.0; }
.pay{ color:inherit; }
.grad{ background:var(--iri); -webkit-background-clip:text; background-clip:text; color:transparent; }
.h0{ left:7%; top:20%; width:52%; font-size:clamp(42px,5.3vw,80px); line-height:.97; letter-spacing:-.012em; }
.sub{
  left:7%; top:59%; width:36%; margin:0;
  font-size:14.5px; line-height:1.55; color:#3a3733;
}
.cue{ left:7%; top:71%; display:flex; align-items:center; gap:18px; text-decoration:none; pointer-events:auto; }
.cue-skip{ left:7%; top:80%; margin:0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); text-decoration:none; pointer-events:auto; }
.cue-skip:hover{ color:var(--ink); }
.cta-btn{
  width:52px; height:52px; border-radius:50%; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 12px 26px rgba(20,16,10,.22);
}
.cta-btn svg{ width:20px; height:20px; }
.cta-label{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:700; }

.tiles{ display:flex; gap:22px; }
.tiles.live{ pointer-events:auto; }
.tiles.live .tile{ cursor:pointer; }
.tiles.live .tile:not([aria-disabled="true"]):hover{ transform:translateY(-4px); box-shadow:0 26px 50px rgba(120,90,40,.16), inset 0 1px 0 rgba(255,255,255,.9); }
.tiles.live .tile[aria-disabled="true"]{ cursor:default; }
.tile{ transition:transform .35s ease, box-shadow .35s ease; }
.tiles-cue{ position:absolute; left:7%; top:75.5%; margin:0; opacity:0; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.tile.selected{ box-shadow:0 0 0 1.5px var(--accent), 0 26px 50px rgba(101,87,255,.18); }
.tile{ position:relative; }
.tile::after{ content:''; position:absolute; top:12px; right:12px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:0; transition:opacity .4s; }
.tiles.live .tile:not([aria-disabled="true"])::after{ opacity:1; }
.tiles.live .tile[aria-disabled="true"]{ opacity:.55; }
.tile{
  flex:1 1 0; min-width:0; height:118px; border-radius:26px; text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.32));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 40px rgba(120,90,40,.10), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:var(--ink);
}
.tile svg{ width:26px; height:26px; }
.tile span{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; text-align:center; line-height:1.4; padding:0 8px; }

.h1{ left:44%; top:13%; width:40%; text-align:center; font-size:clamp(34px,3.9vw,56px); line-height:1.08; opacity:0; }
.h2{ left:50%; top:30%; width:60%; transform:translateX(-50%); text-align:center; font-size:clamp(44px,6vw,86px); line-height:1.04; opacity:0; }

/* ---------- Destinations: restrained fragments + one synthesis, one notice ---------- */
.frag, .rcap{
  position:absolute; margin:0; opacity:0; white-space:nowrap; pointer-events:none;
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);
}
.frag.signal, .rcap.signal{ color:var(--accent); }
.rcap .upd{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:8px; vertical-align:middle; opacity:0; }
.note-block{ position:absolute; max-width:320px; opacity:0; pointer-events:none; }
.note-block .tag{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:7px; }
.note-block .tag em, .eyebrow em, .r-others em{ font-style:normal; font-weight:400; letter-spacing:.14em; color:#a9784f; margin-left:8px; }
.note-block p{ margin:0; font-size:15.5px; line-height:1.45; color:#2a2723; }
.synth{ left:53%; top:66%; max-width:300px; }
.notice{ left:56%; top:67%; max-width:330px; }

/* ---------- The room ---------- */
.room{ position:relative; background:var(--paper); z-index:90; }
.room.fixed{ position:fixed; inset:0; overflow:hidden; will-change:clip-path; }
.room.fixed .opview{ display:none; }
.room-stage{
  position:relative; width:100vw; height:100vh; height:100svh; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 50%, #f9f6f1 0%, var(--paper) 55%, var(--paper-deep) 100%);
  transform-origin:50% 50%; will-change:transform;
}
.room .type{ pointer-events:none; }
.lead{ fill:none; stroke:url(#rgrad); stroke-width:2.3; stroke-linecap:round; }
.o-dot{ fill:var(--ink-trace); opacity:.8; }
.r-input{ fill:none; stroke:var(--ink-trace); stroke-linecap:round; stroke-linejoin:round; }
.r-return{ fill:none; stroke:var(--ink-trace); stroke-width:1.3; stroke-linecap:round; opacity:.5; }
.r-branch{ fill:none; stroke:url(#rgrad); stroke-width:2; stroke-linecap:round; opacity:0; }
.r-end{ fill:var(--accent); opacity:0; }
.r-end-ring{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:0; }
.r-ctx{ fill:none; stroke:var(--ink-trace); stroke-linecap:round; stroke-linejoin:round; stroke-width:1.3; opacity:0; }
.r-title{ position:absolute; left:9%; top:16%; width:54%; }
.r-title .eyebrow{ position:static; margin:0 0 14px; }
.r-title .rh0{ position:static; }
.r-title .sub{ position:static; margin:18px 0 0; width:auto; max-width:38ch; }
.rh0{ font-size:clamp(32px,3.5vw,52px); line-height:1.06; }
.rh{ position:absolute; opacity:0; font-size:clamp(32px,3.6vw,54px); line-height:1.06; }
.rh1{ left:7%; top:70%; width:38%; }
.rh2{ left:32%; top:12%; width:36%; text-align:center; }
.rh3{ left:50%; top:13%; width:40%; text-align:right; }
.rh4{ left:7%; top:70%; width:38%; }
.rh5{ left:30%; top:12%; width:40%; text-align:center; }
.r-synth{ left:24%; top:62%; max-width:300px; }
.r-verify{ left:50%; top:64%; max-width:320px; }
.r-line{ position:absolute; left:50%; top:29%; width:40%; text-align:right; margin:0; opacity:0; font-size:14px; letter-spacing:.02em; color:var(--ink-soft); }
.r-close-block{ position:absolute; left:7%; top:70%; width:440px; max-width:60%; text-align:left; opacity:0; pointer-events:none; }
.r-close-block .sub{ position:static; width:auto; margin:0 0 22px; }
.r-close-block .cue{ position:static; display:inline-flex; pointer-events:auto; }
.r-others{ margin:26px 0 0; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.room-close{
  position:fixed; left:40px; top:74px; z-index:101; text-decoration:none;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.room-close.on{ opacity:1; pointer-events:auto; }
.room-close:hover{ color:var(--ink); }

/* ---------- After the pin ---------- */
.after{ background:#fff; border-top:1px solid var(--line); min-height:46vh; display:flex; align-items:center; }
.after-inner{ padding:56px 8%; max-width:60ch; }
.after .eyebrow{ position:static; margin:0 0 10px; }
.after-copy em{ font-style:normal; color:#a9784f; }
.after-copy{ margin:0 0 18px; font-size:16px; line-height:1.55; }
.after-links{ margin:0; padding:0; list-style:none; font-size:13px; line-height:1.9; color:var(--ink-soft); }
.after-links a{ color:var(--ink); }

body.frame .after{ display:none; }

/* ---------- Mobile recomposition (authored, not scaled) ---------- */
@media (max-width:760px){
  .chrome{ padding:18px 20px; }
  .chrome-nav{ display:none; }
  .chrome-cta{ padding:10px 18px; font-size:9.5px; }
  .chrome-foot{ padding:16px 20px; font-size:9px; }
  .foot-name{ display:none; }
  .foot-arc .arc-sep{ margin:0 8px; }
  .orb{ left:86%; top:20%; width:72vw; height:72vw; margin:-36vw 0 0 -36vw; }
  .eyebrow{ left:7%; top:12%; font-size:9px; letter-spacing:.22em; white-space:nowrap; }
  .eyebrow .x:last-of-type, .eyebrow .eb-3{ display:none; }
  .eyebrow .x{ margin:0 7px; }
  .h0{ left:7%; top:16%; width:88%; font-size:clamp(32px,9.6vw,40px); }
  .sub{ left:7%; top:40%; width:84%; font-size:12.5px; }
  .cue{ left:7%; top:55%; gap:14px; }
  .cue-skip{ top:64%; font-size:9.5px; }
  .synth{ left:7%; top:33%; max-width:72%; }
  .frag, .rcap{ font-size:10px; letter-spacing:.16em; }
  .tile::after{ top:8px; right:8px; }
  .notice{ left:7%; top:50%; max-width:84%; }
  .tiles-cue{ top:61.5%; font-size:9.5px; }
  .note-block p{ font-size:13.5px; }
  .r-title{ left:7%; top:12%; width:86%; }
  .rh0{ font-size:clamp(26px,7.6vw,34px); }
  .rh{ font-size:clamp(24px,7vw,32px); }
  .rh1,.rh4{ left:7%; top:8%; width:80%; }
  .rh2,.rh5{ left:7%; top:8%; width:86%; text-align:left; }
  .rh3{ left:7%; top:8%; width:86%; text-align:left; }
  .r-line{ left:7%; top:20%; width:86%; text-align:left; }
  .r-synth{ left:7%; top:62%; max-width:84%; }
  .r-verify{ left:7%; top:62%; max-width:84%; }
  .r-close-block{ top:34%; width:86%; max-width:86%; }
  .rh1,.rh4{ top:66%; }
  .rh2,.rh3,.rh5{ top:14%; }
  .rcap.end-all{ white-space:normal; text-align:center; }
  .room-close{ left:20px; top:58px; font-size:9.5px; }
  .cta-btn{ width:44px; height:44px; }
  .note-arrow{ width:40px; height:40px; margin-left:60px; }
  .tiles{ flex-wrap:wrap; gap:8px; }
  .tile{ flex:1 1 28%; height:72px; border-radius:16px; gap:6px; }
  .tile svg{ width:20px; height:20px; }
  .tile span{ font-size:7.5px; letter-spacing:.14em; }
  .h1{ left:8%; top:11%; width:84%; font-size:clamp(28px,8.4vw,38px); }
  .h2{ top:24%; width:88%; font-size:clamp(38px,11.5vw,50px); }
  .light{ width:120vw; height:120vw; margin:-60vw 0 0 -60vw; }
  .layer-thread{ filter:drop-shadow(0 6px 10px rgba(90,70,40,.14)); }
  .grain{ display:none; }
  .after-inner{ padding:40px 7%; }
}

@media (prefers-reduced-motion: reduce){
  .stage{ transition:opacity .35s ease; }
}


/* ---------- Room · beats, waveforms, output forms, sellers ---------- */
.r-wave{ fill:none; stroke:var(--ink-trace); stroke-width:1; stroke-linejoin:round; opacity:.6; }
.r-motif{ fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linejoin:round; opacity:0; }
.r-ctx.q-internal{ stroke:#c9a267; stroke-dasharray:none; }
.r-flex{ fill:none; stroke:var(--accent); stroke-width:1.1; stroke-linecap:round; opacity:0; }
.r-form{ fill:none; stroke:var(--ink); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.r-form .fill{ fill:var(--accent); stroke:none; }
.r-form .ring{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:.4; }
.r-seller{ opacity:0; }
.r-seller .mk{ fill:var(--ink); stroke:var(--ink); stroke-width:1.4; }
.r-seller .mk.hollow{ fill:none; }
.r-seller .halo{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:0; }
.r-beat{ position:absolute; opacity:0; pointer-events:none; }
.r-beat .h{ position:static; }
.r-beat h1{ font-size:clamp(34px,4.2vw,62px); line-height:1.02; margin:0 0 12px; }
.r-beat p{ margin:0; font-size:14.5px; line-height:1.5; color:#3a3733; max-width:34ch; }
.rb-lb{ left:7%; top:68%; width:40%; }
.rb-ct{ left:28%; top:12%; width:44%; text-align:center; }
.rb-ct p{ margin-left:auto; margin-right:auto; }
.rb-rt{ left:50%; top:14%; width:44%; text-align:right; }
.rb-rt p{ margin-left:auto; }
.r-decision{ left:46%; top:62%; max-width:300px; }
.room-skip{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:101; text-decoration:none;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--ink);
  background:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.9); border-radius:999px; padding:10px 18px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:0 10px 24px rgba(120,90,40,.10);
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.room-skip.on{ opacity:1; pointer-events:auto; }

/* ---------- The operating view: three densities ---------- */
.opview{ position:relative; background:#fbf9f5; border-top:1px solid var(--line); }
.op-inner{ max-width:980px; margin:0 auto; padding:110px 6% 120px; }
.op-hero h2{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:clamp(30px,3.6vw,50px); line-height:1.06; margin:14px 0 20px; max-width:20ch; text-wrap:balance; }
.op-hero .eyebrow{ position:static; margin:0; }
.op-hero .eyebrow em{ font-style:normal; font-weight:400; letter-spacing:.14em; color:#a9784f; margin-left:6px; }
.op-lede{ font-size:17.5px; line-height:1.55; color:#2a2723; max-width:58ch; margin:0 0 22px; }
.op-controls{ margin:0; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.op-controls a{ text-decoration:none; color:var(--ink); }
.op-controls a:hover{ color:var(--accent); }
.op-controls span{ margin:0 12px; opacity:.5; }
.op-end{ margin-top:64px; }

.op-backbone{ margin-top:64px; padding-top:34px; border-top:1px solid var(--line); }
.op-stages{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.op-stage{
  appearance:none; background:none; border:0; padding:6px 2px; cursor:pointer; font:inherit;
  font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:clamp(19px,2.05vw,26px); color:var(--ink);
  position:relative; letter-spacing:.005em;
}
.op-stage::after{ content:''; position:absolute; left:2px; right:2px; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.op-stage:hover::after, .op-stage[aria-expanded="true"]::after{ transform:scaleX(1); }
.op-stage:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
.op-arrow{ color:var(--ink-soft); font-size:16px; opacity:.55; margin:0 1px; }
.op-x{ min-height:44px; margin-top:16px; }
.op-x p{ margin:0; font-size:17px; line-height:1.5; color:#2a2723; max-width:56ch; }
.op-x p b{ font-weight:700; color:var(--accent); margin-left:6px; }
.op-x-hint{ font-size:11px !important; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft) !important; font-weight:700; }

.op-principles{ list-style:none; margin:56px 0 0; padding:30px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.op-principles li{ font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:18px; line-height:1.3; text-wrap:balance; }

.op-more{ margin-top:56px; border-top:1px solid var(--line); }
.op-d{ border-bottom:1px solid var(--line); }
.op-d summary{
  list-style:none; cursor:pointer; padding:18px 0; display:flex; justify-content:space-between; align-items:center;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--ink-soft);
}
.op-d summary::-webkit-details-marker{ display:none; }
.op-d summary::after{ content:'+'; font-family:'AvantGarde'; font-size:16px; color:var(--ink); transition:transform .25s; }
.op-d[open] summary::after{ transform:rotate(45deg); }
.op-d summary:hover{ color:var(--ink); }
.op-d p{ margin:0 0 22px; font-size:15px; line-height:1.6; color:#2a2723; max-width:62ch; }
.op-d p b{ font-weight:700; }

@media (max-width:760px){
  .r-beat h1{ font-size:clamp(28px,8.6vw,38px); }
  .r-beat p{ font-size:13px; }
  .rb-lb{ left:7%; top:64%; width:86%; }
  .rb-ct, .rb-rt{ left:7%; top:14%; width:86%; text-align:left; }
  .rb-ct p, .rb-rt p{ margin-left:0; }
  .r-decision{ left:7%; top:58%; max-width:84%; }
  .room-skip{ bottom:56px; font-size:9.5px; padding:9px 14px; }
  .op-inner{ padding:72px 7% 90px; }
  .op-stages{ gap:4px 8px; }
  .op-stage{ font-size:19px; padding:4px 0; }
  .op-arrow{ font-size:14px; }
  .op-principles{ grid-template-columns:1fr; gap:18px; }
  .op-principles li{ font-size:17px; }
  .op-controls span{ margin:0 8px; }
}

/* ---------- Room modules: shared marks + per-room strokes ---------- */
.r-mk{ opacity:0; }
.r-mk .mk{ fill:var(--ink); stroke:var(--ink); stroke-width:1.4; }
.r-mk .mk.hollow{ fill:none; }
.r-mk .halo{ fill:none; stroke:var(--accent); stroke-width:1.2; opacity:0; }
.r-mk.r-dest .mk{ stroke:var(--accent); fill:var(--accent); }
.r-mk.r-dest .mk.hollow{ fill:none; }
.r-mk.r-hit .mk, .r-mk.r-count .mk{ fill:var(--accent); stroke:var(--accent); }
.r-narr{ fill:none; stroke:var(--ink-trace); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.r-position{ fill:none; stroke:var(--ink-trace); stroke-width:2.6; stroke-linecap:round; opacity:0; }
.r-position.acc{ stroke:url(#rgrad); stroke-width:2.6; }
.r-guide{ fill:none; stroke:var(--ink-trace); stroke-width:1; opacity:.35; }
.r-gtm{ fill:none; stroke:var(--ink-trace); stroke-width:1.3; stroke-linecap:round; opacity:0; }
.r-gtm.acc{ stroke:url(#rgrad); stroke-width:2; opacity:0; }
.r-band{ fill:none; stroke:var(--ink-trace); stroke-width:1; opacity:.22; }
.r-noise{ fill:none; stroke:var(--ink-trace); stroke-width:1.1; stroke-linecap:round; opacity:.5; }
.r-change{ fill:none; stroke:var(--ink-trace); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.r-change.acc{ stroke:url(#rgrad); stroke-width:2.2; }
.r-claim{ fill:none; stroke:var(--ink-trace); stroke-width:1.2; opacity:.5; }
.r-frag{ fill:none; stroke:var(--ink-trace); stroke-width:1.4; stroke-linecap:round; opacity:.6; }
.r-user{ fill:none; stroke:var(--ink-trace); stroke-linecap:round; opacity:.55; }
.r-friction{ fill:none; stroke:#b06a3b; stroke-width:1.4; opacity:.7; }
.rcap.muted{ color:#8a857c; }


/* ---------- Door previews: each door rehearses its room's metaphor on hover ---------- */
.tile{ overflow:hidden; }
.tile > svg{ transition:opacity .25s; }
.tile .tile-prev{ position:absolute; top:calc(50% - 30px); left:calc(50% - 13px); width:26px; height:26px; opacity:0; color:var(--ink); }
@media (max-width:760px){ .tile .tile-prev{ top:calc(50% - 24px); } }
.tiles.live .tile:hover > svg:not(.tile-prev){ opacity:0; }
.tiles.live .tile:hover .tile-prev{ opacity:1; }

/* ---------- Proof: one light moment per room ---------- */
.op-proof{ margin-top:48px; border-top:1px solid var(--line); padding:26px 0 8px; display:grid; grid-template-columns:1fr 2fr; gap:24px 40px; align-items:start; }
.op-proof h3{ margin:0; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.op-proof .op-proof-ctx{ display:block; margin-top:8px; font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:15px; color:var(--ink); }
.op-proof p{ margin:0; font-size:15px; line-height:1.6; color:#2a2723; max-width:56ch; }
.op-proof a{ display:inline-block; margin-top:10px; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; text-decoration:none; color:var(--ink); }
.op-proof a:hover{ color:var(--accent); }
.op-proof.pending p{ color:var(--ink-soft); }
@media (max-width:760px){ .op-proof{ grid-template-columns:1fr; gap:10px; } }

/* ---------- JOS-27 Part B — #static-room: plain semantic content for the
   per-room static pages, in the DOM before any script runs. No new colors
   or components — inherits body's paper/ink/type, minimal structural CSS
   only. script.js hides this once it renders the room in its place. ---------- */
#static-room{ max-width:64ch; margin:0 auto; padding:110px 24px 60px; line-height:1.6; }
#static-room h1{ font-size:clamp(28px,4vw,40px); line-height:1.15; margin-bottom:18px; }
#static-room .static-lede{ font-size:16px; color:var(--ink-trace); margin:0 0 28px; }
#static-room .static-loop{ padding-left:1.2em; margin:0 0 24px; }
#static-room .static-loop li{ margin-bottom:8px; }
#static-room .static-principles{ padding-left:1.2em; margin:0 0 24px; }
#static-room details{ margin-bottom:10px; }
#static-room summary{ cursor:pointer; font-weight:700; }
#static-room .static-proof{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }

/* JOS-29: the one line that names the system gets a reading measure, not the notes column */
.after-copy.after-os{ max-width:62ch; font-size:17px; line-height:1.6; margin-bottom:34px; }
.after-copy.after-os a{ font-weight:700; text-decoration-color:rgba(101,87,255,.6); }

/* ---------- The landing: six doors, always clickable, nothing pinned ---------- */
.functions{ position:relative; background:var(--paper); border-top:1px solid var(--line); padding:128px 0 150px; }
.functions-inner{ max-width:1180px; margin:0 auto; padding:0 6%; }
.functions-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:34px; }
.functions .eyebrow{ position:static; margin:0 0 12px; }
.functions h2{ margin:0; font-family:'AvantGarde','CenturyGothic',sans-serif; font-weight:700; font-size:clamp(28px,3.4vw,46px); line-height:1.06; letter-spacing:-.01em; }
.functions-lede{ margin:0; max-width:34ch; font-size:14.5px; line-height:1.55; color:#3a3733; }
.functions .tiles .tile{ cursor:pointer; }
.os-line{ margin:56px 0 0; max-width:66ch; font-size:16px; line-height:1.62; color:#2a2723; padding-top:28px; border-top:1px solid var(--line); }
.os-line a{ color:var(--ink); font-weight:700; text-decoration-color:rgba(101,87,255,.6); text-underline-offset:3px; }
.os-line a:hover{ text-decoration-color:var(--accent); }
body.frame .functions{ display:none; }

/* ---------- The guide bubble ---------- */
.guide{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120; display:flex; align-items:center; gap:12px; width:max-content; max-width:92vw;
  padding:11px 18px 11px 15px; border-radius:999px; background:rgba(255,255,255,.88); border:1px solid rgba(12,11,10,.08);
  box-shadow:0 12px 30px rgba(120,90,40,.14); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.guide[hidden]{ display:none; }
.guide-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; animation:guide-pulse 2.2s ease-in-out infinite; }
.guide-text{ min-width:0; }
.guide-act{ color:var(--ink); text-decoration:none; border-bottom:1.5px solid rgba(101,87,255,.6); padding-bottom:1px; flex:none; }
.guide-act:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.guide-act[hidden]{ display:none; }
@keyframes guide-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(101,87,255,.35); } 50%{ box-shadow:0 0 0 6px rgba(101,87,255,0); } }
@media (prefers-reduced-motion:reduce){ .guide-dot{ animation:none; } }
@media (max-width:760px){
  .guide{ bottom:60px; font-size:9px; letter-spacing:.12em; padding:9px 14px 9px 12px; gap:9px; white-space:normal; text-align:left; flex-wrap:wrap; justify-content:center; width:auto; max-width:92vw; }
  .op-inner{ padding-bottom:170px; }
  .r-title{ top:11%; padding:8px 10px 10px; margin-left:-10px; background:radial-gradient(ellipse at 40% 50%, rgba(247,244,238,.96) 55%, rgba(247,244,238,0) 100%); border-radius:14px; }
  .functions{ padding:88px 0 140px; }
  .functions-head{ flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:22px; }
  .os-line{ font-size:14.5px; margin-top:36px; }
}

/* ---------- Other functions, at the end of every operating view ---------- */
.op-others{ margin-top:64px; padding-top:26px; border-top:1px solid var(--line); }
.op-others .eyebrow{ position:static; margin:0 0 14px; }
.op-others-row{ display:flex; flex-wrap:wrap; gap:12px 26px; margin:0 0 22px; }
.op-others-row a{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink); text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid transparent; }
.op-others-row a:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.op-others .op-all{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); text-decoration:none; }
.op-others .op-all:hover{ color:var(--ink); }

/* the header needs a ground once the page is a document (doors landing, operating view), never over the hero form */
body[data-guide="doors"] .chrome, body[data-guide="op"] .chrome{ background:linear-gradient(var(--paper) 62%, rgba(247,244,238,0)); padding-bottom:36px; }

/* the guide carries the skip action now; the old button would sit under it */
body[data-guide] .room-skip{ display:none; }