@font-face {
  font-family: "Glow Sans";
  src: url("../assets/fonts/glow-sans/GlowSansSC-Compressed-ExtraBold.otf") format("opentype");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans SC";
  src: url("../assets/fonts/noto-sans-sc-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Martian";
  src: url("../assets/fonts/martian-grotesk-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --ink: #11110f;
  --paper: #f2efe7;
  --paper-dim: rgba(242, 239, 231, 0.62);
  --line: rgba(242, 239, 231, 0.24);
  --red: #ef482d;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --progress-scale: 0.3571;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: "Noto Sans SC", sans-serif;
}

.compare {
  height: 100dvh;
  overflow: hidden;
  background: #d9d6ce;
  color: var(--ink);
}

.compare-head {
  height: 74px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(210px, 0.8fr) auto minmax(100px, 0.8fr);
  align-items: center;
  gap: 24px;
  background: #f2efe7;
  border-bottom: 1px solid rgba(17, 17, 15, 0.22);
}

.compare-title {
  display: flex;
  align-items: baseline;
  gap: 13px;
  font: 800 15px/1 "Martian", "Noto Sans SC", sans-serif;
  white-space: nowrap;
}

.compare-title small {
  color: rgba(17, 17, 15, 0.48);
  font: 500 11px/1 "Noto Sans SC", sans-serif;
}

.tabs {
  display: flex;
  max-width: min(100%, 980px);
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px;
  gap: 3px;
  background: rgba(17, 17, 15, 0.07);
  border-radius: 999px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs::before,
.tabs::after { content:""; flex:0 0 min(32vw,440px); }

.tabs button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: transparent;
  color: rgba(17, 17, 15, 0.54);
  font: 650 12px/1 "Noto Sans SC", sans-serif;
  cursor: pointer;
  transition: color 0.25s ease, background 0.25s ease;
}

.tabs button:hover,
.tabs button:focus-visible { color: var(--ink); }
.tabs button.active { background: var(--ink); color: var(--paper); }
.tabs button:focus-visible,
.openpage:focus-visible,
.scope-page button:focus-visible,
.scope-page a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.openpage {
  justify-self: end;
  color: var(--ink);
  font: 700 12px/1 "Noto Sans SC", sans-serif;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

.frame {
  display: block;
  width: 100%;
  height: calc(100dvh - 74px);
  border: 0;
  background: var(--ink);
}

.scope-page {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  --progress: 35.71%;
}

.scope-media,
.scope-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scope-media {
  z-index: -3;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}

.scope-shade {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(10, 10, 9, 0.92) 0%, rgba(10, 10, 9, 0.66) 48%, rgba(10, 10, 9, 0.52) 100%),
    linear-gradient(0deg, rgba(10, 10, 9, 0.72), transparent 52%);
}

.scope-top {
  position: relative;
  height: 74px;
  margin: 0 3.4vw;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

.mark,
.back { color: var(--paper); text-decoration: none; }
.mark { font: 800 15px/1 "Martian", sans-serif; letter-spacing: -0.05em; }
.mark b { color: var(--red); }
.back { justify-self: end; font-size: 11px; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.variant-name { font: 500 9px/1 "Martian", sans-serif; letter-spacing: 0.12em; color: var(--paper-dim); }

.scope-content {
  position: relative;
  z-index: 1;
  height: calc(100dvh - 74px);
  padding: clamp(26px, 4vw, 60px) 3.4vw 36px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(24px, 3vh, 44px);
}

.scope-heading {
  display: grid;
  grid-template-columns: minmax(390px, 0.9fr) minmax(320px, 1.1fr);
  align-items: end;
  gap: 5vw;
}

.scope-heading h1 {
  margin: 0;
  max-width: 760px;
  font: 800 clamp(48px, 6.3vw, 98px) / 0.82 "Glow Sans", "Noto Sans SC", sans-serif;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.scope-heading p {
  margin: 0 0 5px;
  max-width: 520px;
  color: var(--paper-dim);
  font-size: 13px;
  line-height: 1.75;
}

.scope-system { position: relative; min-height: 0; }
.scope-nodes button {
  color: var(--paper);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.scope-nodes small,
.scope-detail small {
  display: block;
  font: 600 8px/1 "Martian", sans-serif;
  letter-spacing: 0.1em;
  color: var(--paper-dim);
}
.scope-nodes strong { display: block; font: 800 18px/1 "Glow Sans", "Noto Sans SC", sans-serif; }
.scope-nodes span { display: block; color: var(--paper-dim); font-size: 9px; }
.scope-nodes .proof span { color: var(--red); }
.scope-nodes .proof small::before { content: "● "; color: var(--red); }

.scope-detail {
  color: var(--paper);
  border-top: 1px solid var(--line);
}
.scope-detail h2 { margin: 7px 0 0; font: 800 clamp(32px, 4vw, 62px)/0.9 "Glow Sans", "Noto Sans SC", sans-serif; }
.scope-detail b { display: block; color: var(--red); font-size: 11px; }
.scope-detail p { margin: 10px 0 0; color: var(--paper-dim); font-size: 12px; line-height: 1.65; }
.asset-note { position: absolute; z-index: 6; right: 3.4vw; bottom: 13px; color: rgba(242,239,231,.48); font-size: 9px; }

/* 01 — continuous relay */
.scope-v1 .scope-system { display: grid; grid-template-rows: minmax(145px, 1fr) auto; align-items: center; }
.scope-v1 .system-track {
  position: absolute;
  left: calc(6.25% - 1px);
  right: calc(6.25% - 1px);
  top: calc(50% - 52px);
  height: 2px;
  background: var(--line);
}
.scope-v1 .system-track::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--red);
  box-shadow: 0 0 18px rgba(239,72,45,.7);
  transform: scaleX(var(--progress-scale));
  transform-origin: left center;
  transition: transform .75s var(--ease);
}
.scope-v1 .scope-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-self: center;
}
.scope-v1 .scope-nodes button { position: relative; padding: 58px 8px 16px; min-width: 0; opacity: .5; transition: opacity .4s ease, transform .55s var(--ease); }
.scope-v1 .scope-nodes button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8px;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(242,239,231,.5);
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-6.5px);
  transition: .5s var(--ease);
}
.scope-v1 .scope-nodes button.active { opacity: 1; transform: translateY(-12px); }
.scope-v1 .scope-nodes button.active::before { width: 28px; height: 28px; border-color: var(--red); background: var(--red); transform: translateY(-13px); box-shadow: 0 0 0 8px rgba(239,72,45,.13); }
.scope-v1 .scope-nodes strong { margin: 7px 0 7px; white-space: nowrap; }
.scope-v1 .scope-detail { padding-top: 18px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; }

/* 02 — accordion field */
.scope-v2 .scope-content { gap: 20px; }
.scope-v2 .scope-heading h1 { font-size: clamp(44px, 5.4vw, 82px); }
.scope-v2 .scope-system { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 18px; }
.scope-v2 .system-track { display: none; }
.scope-v2 .scope-nodes { display: flex; min-height: 0; border: 1px solid var(--line); }
.scope-v2 .scope-nodes button {
  position: relative;
  flex: .72 1 0;
  min-width: 0;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  overflow: hidden;
  opacity: .56;
  transition: flex .82s var(--ease), opacity .45s ease, background .45s ease;
}
.scope-v2 .scope-nodes button:last-child { border-right: 0; }
.scope-v2 .scope-nodes button::after { content: attr(data-index); position: absolute; right: 10px; bottom: 6px; font: 700 58px/1 "Glow Sans", sans-serif; color: rgba(242,239,231,.08); }
.scope-v2 .scope-nodes button.active { flex: 3.1 1 0; opacity: 1; background: rgba(239,72,45,.12); }
.scope-v2 .scope-nodes strong { margin-top: 15px; font-size: clamp(20px, 2vw, 34px); writing-mode: vertical-rl; white-space: nowrap; }
.scope-v2 .scope-nodes button.active strong { writing-mode: horizontal-tb; font-size: clamp(32px, 4vw, 64px); }
.scope-v2 .scope-nodes span { position: absolute; left: 12px; bottom: 16px; white-space: nowrap; }
.scope-v2 .scope-detail { padding-top: 13px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; }
.scope-v2 .scope-detail h2 { font-size: 30px; }

/* 03 — orbit map */
.scope-v3 .scope-shade { background: radial-gradient(circle at 69% 60%, rgba(10,10,9,.22), rgba(10,10,9,.82) 53%, rgba(10,10,9,.95)); }
.scope-v3 .scope-content { grid-template-columns: minmax(280px, .62fr) minmax(620px, 1.38fr); grid-template-rows: minmax(0,1fr); align-items: center; gap: 2vw; }
.scope-v3 .scope-heading { display: block; align-self: center; }
.scope-v3 .scope-heading h1 { font-size: clamp(50px, 6vw, 92px); }
.scope-v3 .scope-heading p { margin-top: 28px; max-width: 350px; }
.scope-v3 .scope-system { height: min(68vw, 690px); max-height: 100%; aspect-ratio: 1.28; justify-self: end; width: 100%; }
.scope-v3 .system-track { position: absolute; inset: 8% 8%; border: 1px solid rgba(242,239,231,.3); border-radius: 50%; }
.scope-v3 .system-track::after { content: ""; position: absolute; left: 50%; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 25px var(--red); animation: orbit-marker 7s linear infinite; transform-origin: 0 calc(46% + 5px); }
.scope-v3 .scope-nodes { position: absolute; inset: 0; }
.scope-v3 .scope-nodes button { position: absolute; width: 128px; padding: 9px; text-align: center; opacity: .48; transition: opacity .45s ease, transform .65s var(--ease); }
.scope-v3 .scope-nodes button strong { margin: 6px 0; white-space: nowrap; }
.scope-v3 .scope-nodes button span { white-space: nowrap; }
.scope-v3 .scope-nodes button.active { opacity: 1; transform: translate(-50%,-50%) scale(1.16); }
.scope-v3 .scope-nodes button.active strong { color: var(--red); }
.scope-v3 .scope-nodes button:nth-child(1) { left: 22%; top: 14%; transform: translate(-50%,-50%); }
.scope-v3 .scope-nodes button:nth-child(2) { left: 50%; top: 4%; transform: translate(-50%,-20%); }
.scope-v3 .scope-nodes button:nth-child(3) { left: 78%; top: 14%; transform: translate(-50%,-50%); }
.scope-v3 .scope-nodes button:nth-child(4) { left: 96%; top: 50%; transform: translate(-85%,-50%); }
.scope-v3 .scope-nodes button:nth-child(5) { left: 78%; top: 86%; transform: translate(-50%,-50%); }
.scope-v3 .scope-nodes button:nth-child(6) { left: 50%; top: 96%; transform: translate(-50%,-80%); }
.scope-v3 .scope-nodes button:nth-child(7) { left: 22%; top: 86%; transform: translate(-50%,-50%); }
.scope-v3 .scope-nodes button:nth-child(8) { left: 4%; top: 50%; transform: translate(-15%,-50%); }
.scope-v3 .scope-nodes button.active:nth-child(n) { transform: translate(-50%,-50%) scale(1.16); }
.scope-v3 .scope-detail { position: absolute; width: 43%; left: 50%; top: 50%; transform: translate(-50%,-50%); padding: 28px 16px 0; text-align: center; border-top-color: var(--red); }
.scope-v3 .scope-detail h2 { font-size: clamp(38px, 4.3vw, 70px); }
.scope-v3 .scope-detail p { max-width: 310px; margin: 12px auto 0; }

/* 04 — dual marquee */
.scope-v4 .scope-content { gap: 22px; }
.scope-v4 .scope-heading h1 { font-size: clamp(44px, 5.5vw, 84px); }
.scope-v4 .scope-system { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr 1fr auto; gap: 9px; overflow: hidden; }
.scope-v4 .system-track { display: none; }
.scope-v4 .scope-nodes { display: flex; gap: 9px; width: max-content; min-width: 100%; align-items: stretch; animation: marquee-left 30s linear infinite; }
.scope-v4 .scope-nodes-echo { animation: marquee-right 34s linear infinite; }
.scope-v4 .scope-nodes button { width: clamp(176px, 16vw, 240px); padding: 14px 16px; border: 1px solid var(--line); background: rgba(17,17,15,.34); opacity: .62; transition: opacity .4s ease, background .4s ease, border-color .4s ease; }
.scope-v4 .scope-nodes button strong { margin: 8px 0 12px; font-size: clamp(21px, 2.1vw, 34px); }
.scope-v4 .scope-nodes button.active { opacity: 1; border-color: var(--red); background: var(--red); }
.scope-v4 .scope-nodes button.active small,
.scope-v4 .scope-nodes button.active span { color: var(--ink); }
.scope-v4 .scope-nodes button.active.proof small::before { color: var(--paper); }
.scope-v4 .scope-system:hover .scope-nodes,
.scope-v4 .scope-system:focus-within .scope-nodes { animation-play-state: paused; }
.scope-v4 .scope-detail { padding-top: 12px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; }
.scope-v4 .scope-detail { min-width: 0; width: 100%; overflow: hidden; }
.scope-v4 .scope-detail > div { min-width: 0; }
.scope-v4 .scope-detail h2 { font-size: 29px; }

/* 05 — depth queue */
.scope-v5 .scope-shade { background: linear-gradient(100deg, rgba(10,10,9,.96) 0 44%, rgba(10,10,9,.48) 78%, rgba(10,10,9,.7)); }
.scope-v5 .scope-content { grid-template-columns: minmax(360px,.72fr) minmax(600px,1.28fr); grid-template-rows: minmax(0,1fr); align-items: center; }
.scope-v5 .scope-heading { display: block; }
.scope-v5 .scope-heading h1 { font-size: clamp(52px, 6.5vw, 102px); }
.scope-v5 .scope-heading p { margin-top: 28px; max-width: 360px; }
.scope-v5 .scope-system { height: 100%; perspective: 900px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; }
.scope-v5 .system-track { position: absolute; left: 12%; top: 8%; bottom: 8%; width: 1px; background: linear-gradient(transparent, var(--red), transparent); }
.scope-v5 .scope-nodes { position: relative; height: 100%; transform-style: preserve-3d; }
.scope-v5 .scope-nodes button {
  position: absolute;
  top: 50%;
  left: 11%;
  width: 82%;
  min-height: 58px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: rgba(17,17,15,.62);
  opacity: var(--opacity, .28);
  transform: translateY(calc(-50% + var(--y, 0px))) translateZ(var(--z, -120px)) scale(var(--scale, .82));
  transition: transform .85s var(--ease), opacity .6s ease, background .5s ease, border-color .5s ease;
}
.scope-v5 .scope-nodes button strong { display: inline-block; margin: 5px 18px 0 0; font-size: clamp(22px,2.4vw,38px); }
.scope-v5 .scope-nodes button span { display: inline-block; }
.scope-v5 .scope-nodes button.active { z-index: 5; background: var(--paper); color: var(--ink); border-color: var(--paper); }
.scope-v5 .scope-nodes button.active small { color: rgba(17,17,15,.55); }
.scope-v5 .scope-detail { align-self: center; padding: 28px 0 0 26px; border-top-color: var(--red); }
.scope-v5 .scope-detail h2 { font-size: clamp(40px,4.6vw,70px); }

@keyframes orbit-marker { to { transform: rotate(360deg); } }
@keyframes marquee-left { from { transform: translateX(4%); } to { transform: translateX(-34%); } }
@keyframes marquee-right { from { transform: translateX(-34%); } to { transform: translateX(4%); } }

/* 06 — spotlight analysis */
.scope-v6 { --spot-x: 64%; --spot-y: 58%; }
.scope-v6 .scope-media { filter: grayscale(1) brightness(.32); }
.scope-v6 .scope-media-reveal { z-index:-2; filter:none; clip-path:circle(240px at var(--spot-x) var(--spot-y)); }
.scope-v6::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: inherit;
  pointer-events: none;
}
.scope-v6 .scope-shade {
  background:
    radial-gradient(circle 240px at var(--spot-x) var(--spot-y), rgba(10,10,9,.02) 0 35%, rgba(10,10,9,.42) 68%, rgba(10,10,9,.9) 100%),
    linear-gradient(90deg,rgba(10,10,9,.88),rgba(10,10,9,.26));
}
.scope-v6 .scope-content { grid-template-columns: .68fr 1.32fr; grid-template-rows: minmax(0,1fr); align-items: center; }
.scope-v6 .scope-heading { display: block; }
.scope-v6 .scope-heading h1 { font-size: clamp(58px,7vw,106px); }
.scope-v6 .scope-heading p { margin-top: 28px; max-width: 370px; }
.scope-v6 .scope-system { height: 78%; align-self: center; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(2,1fr) auto; gap: 1px; }
.scope-v6 .system-track { display: none; }
.scope-v6 .scope-nodes { display: contents; }
.scope-v6 .scope-nodes button { position: relative; padding: 18px; border: 1px solid var(--line); background: rgba(10,10,9,.48); opacity: .48; overflow: hidden; transition: opacity .45s ease, background .45s ease; }
.scope-v6 .scope-nodes button::after { content:""; position:absolute; width:110px; height:110px; left:50%; top:50%; border:1px solid rgba(242,239,231,.16); border-radius:50%; transform:translate(-50%,-50%) scale(.6); opacity:0; transition:.6s var(--ease); }
.scope-v6 .scope-nodes button:hover,
.scope-v6 .scope-nodes button.active { opacity: 1; background: rgba(10,10,9,.18); }
.scope-v6 .scope-nodes button:hover::after,
.scope-v6 .scope-nodes button.active::after { transform:translate(-50%,-50%) scale(1); opacity:1; }
.scope-v6 .scope-nodes strong { margin: 12px 0; font-size: clamp(24px,2.2vw,38px); }
.scope-v6 .scope-detail { grid-column: 1 / -1; padding-top: 14px; display:grid; grid-template-columns:.7fr 1.3fr; gap:6vw; }
.scope-v6 .scope-detail h2 { font-size: 32px; }

/* 07 — pixel dissolve */
.scope-v7 .scope-content { gap: 18px; }
.scope-v7 .scope-heading { grid-template-columns: .8fr 1.2fr; }
.scope-v7 .scope-heading h1 { font-size: clamp(50px,5.6vw,88px); }
.scope-v7 .scope-system { display:grid; grid-template-rows:minmax(0,1fr) auto; gap:16px; }
.scope-v7 .system-track { display:none; }
.scope-v7 .scope-nodes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); border:1px solid var(--line); }
.scope-v7 .scope-nodes button { position:relative; padding:18px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; opacity:.55; transition:opacity .45s ease; }
.scope-v7 .scope-nodes button:nth-child(4n) { border-right:0; }
.scope-v7 .scope-nodes button:nth-child(n+5) { border-bottom:0; }
.scope-v7 .scope-nodes strong { margin:10px 0; font-size:clamp(24px,2.2vw,38px); position:relative; z-index:2; }
.scope-v7 .scope-nodes small,.scope-v7 .scope-nodes span { position:relative; z-index:2; }
.scope-v7 .scope-nodes button.active { opacity:1; }
.pixel-field { position:absolute; inset:0; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr); pointer-events:none; z-index:1; }
.pixel-field b { background:var(--red); opacity:0; transform:scale(.2); transition:opacity .22s ease, transform .35s var(--ease); transition-delay:calc(var(--pixel) * 12ms); }
.scope-v7 .scope-nodes button.active .pixel-field b { opacity:calc(.72 - var(--pixel) * .008); transform:scale(1); }
.scope-v7 .scope-nodes button.active strong,.scope-v7 .scope-nodes button.active small,.scope-v7 .scope-nodes button.active span { color:var(--paper); }
.scope-v7 .scope-detail { padding-top:14px; display:grid; grid-template-columns:.7fr 1.3fr; gap:7vw; }
.scope-v7 .scope-detail h2 { font-size:30px; }

/* 08 — editorial console */
.scope-v8 .scope-shade { background:linear-gradient(90deg,rgba(10,10,9,.94) 0 46%,rgba(10,10,9,.55) 72%,rgba(10,10,9,.75)); }
.scope-v8 .scope-content { grid-template-columns:minmax(450px,.9fr) minmax(620px,1.1fr); grid-template-rows:minmax(0,1fr); padding-top:28px; gap:5vw; }
.scope-v8 .scope-heading { display:flex; flex-direction:column; height:100%; justify-content:space-between; border-right:1px solid var(--line); padding-right:5vw; }
.scope-v8 .scope-heading h1 { max-width:650px; font-size:clamp(70px,8.3vw,132px); }
.scope-v8 .scope-heading p { margin:0 0 20px; max-width:430px; }
.scope-v8 .scope-system { display:grid; grid-template-columns:.72fr 1.28fr; min-height:0; align-items:stretch; }
.scope-v8 .system-track { display:none; }
.scope-v8 .scope-nodes { display:grid; grid-template-rows:repeat(8,minmax(0,1fr)); border-top:1px solid var(--line); }
.scope-v8 .scope-nodes button { display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:12px; padding:0 12px; border-bottom:1px solid var(--line); opacity:.45; transition:opacity .35s ease, transform .5s var(--ease); }
.scope-v8 .scope-nodes button::before { content:attr(data-step); font:600 9px/1 "Martian"; color:var(--paper-dim); }
.scope-v8 .scope-nodes button small { display:none; }
.scope-v8 .scope-nodes button strong { font-size:22px; }
.scope-v8 .scope-nodes button.active { opacity:1; transform:translateX(10px); }
.scope-v8 .scope-nodes button.active strong { color:var(--red); }
.scope-v8 .scope-detail { align-self:center; padding:34px 0 0 4vw; border-top-color:var(--red); }
.scope-v8 .scope-detail h2 { font-size:clamp(64px,6.4vw,102px); }
.scope-v8 .scope-detail p { max-width:400px; font-size:14px; }

/* 09 — horizontal reel */
.scope-v9 .scope-content { gap:20px; overflow:hidden; }
.scope-v9 .scope-heading h1 { font-size:clamp(48px,5.6vw,86px); }
.scope-v9 .scope-system { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:14px; min-width:0; }
.scope-v9 .system-track { display:none; }
.scope-v9 .scope-nodes { align-self:center; display:flex; width:max-content; gap:18px; transform:translateX(var(--rail-px,0px)); transition:transform 1s var(--ease); }
.scope-v9 .scope-nodes button { width:clamp(240px,22vw,350px); aspect-ratio:4/3; padding:22px; border:1px solid var(--line); background:rgba(10,10,9,.58); opacity:.24; transform:scale(.86); transition:opacity .5s ease,transform .7s var(--ease),background .5s ease; }
.scope-v9 .scope-nodes button strong { margin:20px 0 14px; font-size:clamp(32px,3vw,50px); }
.scope-v9 .scope-nodes button.active { opacity:1; transform:scale(1); background:rgba(239,72,45,.9); }
.scope-v9 .scope-nodes button.active small,.scope-v9 .scope-nodes button.active span { color:var(--ink); }
.scope-v9 .scope-detail { padding-top:12px; display:grid; grid-template-columns:.7fr 1.3fr; gap:7vw; }
.scope-v9 .scope-detail { min-width:0; width:100%; overflow:hidden; }
.scope-v9 .scope-detail > div { min-width:0; }
.scope-v9 .scope-detail h2 { font-size:29px; }

/* 10 — coordinate network */
.scope-v10 .scope-shade { background:linear-gradient(90deg,rgba(10,10,9,.9) 0 32%,rgba(10,10,9,.45),rgba(10,10,9,.72)); }
.scope-v10 .scope-content { grid-template-columns:.62fr 1.38fr; grid-template-rows:minmax(0,1fr); align-items:center; gap:3vw; }
.scope-v10 .scope-heading { display:block; }
.scope-v10 .scope-heading h1 { font-size:clamp(58px,6.7vw,104px); }
.scope-v10 .scope-heading p { margin-top:28px; max-width:360px; }
.scope-v10 .scope-system { height:min(68vh,650px); position:relative; }
.scope-v10 .system-track { position:absolute; inset:0; border:1px solid var(--line); }
.scope-v10 .system-track::before,.scope-v10 .system-track::after { content:""; position:absolute; background:var(--line); }
.scope-v10 .system-track::before { left:50%; top:0; bottom:0; width:1px; }
.scope-v10 .system-track::after { top:50%; left:0; right:0; height:1px; }
.network-lines { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.network-lines line { stroke:rgba(242,239,231,.28); stroke-width:1; vector-effect:non-scaling-stroke; }
.scope-v10 .scope-nodes { position:absolute; inset:0; }
.scope-v10 .scope-nodes button { position:absolute; width:150px; padding:10px; opacity:.48; transition:opacity .4s ease,transform .65s var(--ease); }
.scope-v10 .scope-nodes button strong { margin:6px 0; }
.scope-v10 .scope-nodes button.active { opacity:1; transform:scale(1.15); }
.scope-v10 .scope-nodes button.active strong { color:var(--red); }
.scope-v10 .scope-nodes button:nth-child(1){left:3%;top:43%}.scope-v10 .scope-nodes button:nth-child(2){left:17%;top:6%}.scope-v10 .scope-nodes button:nth-child(3){left:34%;top:25%}.scope-v10 .scope-nodes button:nth-child(4){left:49%;top:1%}.scope-v10 .scope-nodes button:nth-child(5){left:64%;top:38%}.scope-v10 .scope-nodes button:nth-child(6){left:82%;top:12%}.scope-v10 .scope-nodes button:nth-child(7){left:73%;top:74%}.scope-v10 .scope-nodes button:nth-child(8){left:42%;top:69%}
.scope-v10 .scope-detail { position:absolute; right:3%; bottom:2%; width:42%; padding-top:14px; background:rgba(10,10,9,.68); }
.scope-v10 .scope-detail h2 { font-size:42px; }

/* 11 — rotating apparatus */
.scope-v11 .scope-shade{background:radial-gradient(circle at 65% 55%,rgba(10,10,9,.18),rgba(10,10,9,.92) 65%)}
.scope-v11 .scope-content{grid-template-columns:.68fr 1.32fr;grid-template-rows:minmax(0,1fr);align-items:center}
.scope-v11 .scope-heading{display:block}.scope-v11 .scope-heading h1{font-size:clamp(58px,6.8vw,106px)}.scope-v11 .scope-heading p{margin-top:28px;max-width:360px}
.scope-v11 .scope-system{height:72%;perspective:900px;display:grid;grid-template-columns:1fr .62fr;align-items:center}
.scope-v11 .system-track{position:absolute;left:34%;top:10%;bottom:10%;width:1px;background:var(--line)}
.scope-v11 .scope-nodes{position:relative;height:100%;transform-style:preserve-3d}
.scope-v11 .scope-nodes button{position:absolute;left:18%;top:50%;width:260px;padding:15px 18px;border:1px solid var(--line);background:rgba(10,10,9,.7);opacity:var(--opacity);transform:translateY(calc(-50% + var(--y))) translateZ(var(--z)) rotateX(calc(var(--distance)*-7deg));transition:.8s var(--ease)}
.scope-v11 .scope-nodes button strong{font-size:30px;margin:5px 0}.scope-v11 .scope-nodes button.active{opacity:1;background:var(--paper);color:var(--ink);transform:translateY(-50%) translateZ(100px) scale(1.12)}.scope-v11 .scope-nodes button.active small{color:#555}
.scope-v11 .scope-detail{padding:25px 0 0 3vw;border-top-color:var(--red)}.scope-v11 .scope-detail h2{font-size:clamp(54px,5.5vw,88px)}

/* 12 — business telemetry */
.scope-v12 .scope-content{gap:18px}.scope-v12 .scope-heading h1{font-size:clamp(48px,5.2vw,82px)}
.scope-v12 .scope-system{display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:minmax(0,1fr);gap:5vw;min-height:0}
.scope-v12 .system-track{display:none}.scope-v12 .scope-nodes{display:grid;grid-template-rows:repeat(8,minmax(0,1fr));border-top:1px solid var(--line)}
.scope-v12 .scope-nodes button{position:relative;display:grid;grid-template-columns:120px 170px 1fr 110px;align-items:center;gap:20px;padding:0 4px;border-bottom:1px solid var(--line);opacity:.48;transition:opacity .4s ease}
.scope-v12 .scope-nodes button::after{content:"";height:5px;width:100%;background:var(--paper-dim);transform:scaleX(var(--bar-scale,.6));transform-origin:left;transition:transform .7s var(--ease)}
.scope-v12 .scope-nodes button small{grid-column:1}.scope-v12 .scope-nodes button strong{grid-column:2;font-size:22px}.scope-v12 .scope-nodes button span{grid-column:4;text-align:right}.scope-v12 .scope-nodes button::after{grid-column:3;grid-row:1}
.scope-v12 .scope-nodes button.active{opacity:1}.scope-v12 .scope-nodes button.active::after{background:var(--red);box-shadow:0 0 18px rgba(239,72,45,.5)}
.scope-v12 .scope-detail{align-self:center;padding:25px 0 0;border-top-color:var(--red)}.scope-v12 .scope-detail h2{font-size:clamp(55px,6vw,92px)}

/* 13 — glitch manifesto */
.scope-v13{background:#dfe43b;color:#0b0b09}.scope-v13 .scope-media{opacity:.26;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.5)}.scope-v13 .scope-shade{background:rgba(218,229,46,.55)}
.scope-v13 .scope-top{border-color:rgba(10,10,9,.3)}.scope-v13 .mark,.scope-v13 .back{color:#0b0b09}.scope-v13 .variant-name{color:rgba(10,10,9,.6)}
.scope-v13 .scope-content{display:block;padding-top:20px}.scope-v13 .scope-heading{display:none}.scope-v13 .scope-system{height:100%;display:grid;grid-template-rows:1fr auto}
.scope-v13 .system-track{display:none}.scope-v13 .scope-nodes{order:2;display:grid;grid-template-columns:repeat(8,1fr);border-top:2px solid #0b0b09}
.scope-v13 .scope-nodes button{padding:14px 7px;color:#0b0b09;border-right:1px solid rgba(10,10,9,.35);opacity:.45}.scope-v13 .scope-nodes button.active{opacity:1;background:#0b0b09;color:#dfe43b}.scope-v13 .scope-nodes button small,.scope-v13 .scope-nodes button span{color:inherit}.scope-v13 .scope-nodes button strong{font-size:19px;margin:7px 0}
.scope-v13 .scope-detail{align-self:center;border:0;color:#0b0b09}.scope-v13 .scope-detail small,.scope-v13 .scope-detail p{color:rgba(10,10,9,.62)}.scope-v13 .scope-detail b{color:#0b0b09}.scope-v13 .scope-detail h2{font-size:clamp(150px,20vw,330px);line-height:.72;text-transform:uppercase;letter-spacing:-.04em}.scope-v13 .scope-detail p{position:absolute;right:0;top:28%;width:300px;font-size:14px}
.glitch-signal{position:absolute;left:0;right:0;top:7%;white-space:nowrap;overflow:hidden;font:700 18px/1 "Martian";letter-spacing:.08em;color:#0b0b09;transform:skewX(-18deg)}
.scope-v13 .asset-note{color:rgba(10,10,9,.55)}

/* 14 — dual shutter */
.scope-v14 .scope-media{clip-path:inset(0 50% 0 0);object-position:left}.scope-v14 .scope-media-second{z-index:-2;clip-path:inset(0 0 0 50%);object-position:right;filter:grayscale(1) brightness(.4)}
.scope-v14 .scope-shade{background:linear-gradient(90deg,rgba(10,10,9,.52),rgba(10,10,9,.08) 48%,rgba(10,10,9,.78) 52%,rgba(10,10,9,.68))}
.scope-v14 .scope-content{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);padding-top:28px;gap:0}.scope-v14 .scope-heading{display:flex;flex-direction:column;justify-content:space-between;padding-right:5vw;border-right:1px solid var(--paper)}.scope-v14 .scope-heading h1{font-size:clamp(65px,7.5vw,118px)}.scope-v14 .scope-heading p{margin-bottom:24px}
.scope-v14 .scope-system{padding-left:4vw;display:grid;grid-template-columns:.55fr 1.45fr;align-items:center}.scope-v14 .system-track{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red)}
.scope-v14 .scope-nodes{display:grid;grid-template-rows:repeat(8,1fr);height:74%}.scope-v14 .scope-nodes button{padding:0 10px;border-bottom:1px solid var(--line);opacity:.35}.scope-v14 .scope-nodes button.active{opacity:1;transform:translateX(10px)}.scope-v14 .scope-nodes button strong{font-size:20px}.scope-v14 .scope-nodes small,.scope-v14 .scope-nodes span{display:none}
.scope-v14 .scope-detail{padding:26px 0 0 3vw;border-top-color:var(--red)}.scope-v14 .scope-detail h2{font-size:clamp(58px,6vw,96px)}

/* 15 — cursor archive */
.scope-v15 .scope-content{grid-template-columns:.72fr 1.28fr;grid-template-rows:minmax(0,1fr);align-items:center}.scope-v15 .scope-heading{display:block}.scope-v15 .scope-heading h1{font-size:clamp(60px,7vw,108px)}.scope-v15 .scope-heading p{margin-top:28px;max-width:360px}
.scope-v15 .scope-system{height:72%;display:grid;grid-template-rows:1fr auto}.scope-v15 .system-track{display:none}.scope-v15 .scope-nodes{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:10px}.scope-v15 .scope-nodes button{padding:16px;border:1px solid var(--line);background:rgba(10,10,9,.5);opacity:.42}.scope-v15 .scope-nodes button.active{opacity:1;border-color:var(--red)}.scope-v15 .scope-nodes strong{font-size:28px;margin:8px 0}.scope-v15 .scope-detail{padding-top:15px;display:grid;grid-template-columns:.7fr 1.3fr;gap:6vw}.scope-v15 .scope-detail h2{font-size:31px}
.trail-stamp{position:fixed;z-index:8;pointer-events:none;padding:8px 12px;background:var(--red);color:var(--ink);font:800 20px/1 "Glow Sans";font-style:normal;transform:translate(-50%,-50%) rotate(var(--tilt));animation:trail-out 1.1s ease forwards}@keyframes trail-out{60%{opacity:1}to{opacity:0;transform:translate(-50%,-90%) rotate(var(--tilt)) scale(.72)}}

/* 16 — convergence funnel */
.scope-v16 .scope-content{grid-template-columns:.58fr 1.42fr;grid-template-rows:minmax(0,1fr);align-items:center}.scope-v16 .scope-heading{display:block}.scope-v16 .scope-heading h1{font-size:clamp(58px,6.7vw,102px)}.scope-v16 .scope-heading p{margin-top:28px;max-width:350px}
.scope-v16 .scope-system{height:76%;position:relative;display:grid;grid-template-columns:1fr .55fr;align-items:center}.scope-v16 .system-track{position:absolute;left:11%;right:39%;top:12%;bottom:12%;clip-path:polygon(0 0,100% 42%,100% 58%,0 100%);background:linear-gradient(90deg,rgba(242,239,231,.04),rgba(239,72,45,.24));border-left:1px solid var(--line)}
.scope-v16 .scope-nodes{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);height:100%;align-items:center}.scope-v16 .scope-nodes button{padding:8px 10px;opacity:.38;transition:.55s var(--ease)}.scope-v16 .scope-nodes button:nth-child(even){transform:translateX(calc(var(--distance)*-2px));text-align:right}.scope-v16 .scope-nodes button.active{opacity:1;transform:translateX(45%) scale(1.12);z-index:2}.scope-v16 .scope-nodes button.active strong{color:var(--red)}.scope-v16 .scope-nodes strong{font-size:24px;margin:5px 0}
.scope-v16 .scope-detail{align-self:center;padding:25px 0 0 2vw;border-top-color:var(--red)}.scope-v16 .scope-detail h2{font-size:clamp(50px,5.4vw,86px)}

/* 17 — operations console */
.scope-v17 .scope-shade{background:rgba(10,10,9,.88)}.scope-v17 .scope-content{grid-template-columns:.55fr 1.45fr;grid-template-rows:minmax(0,1fr);padding-top:28px;gap:3vw}.scope-v17 .scope-heading{display:flex;flex-direction:column;justify-content:space-between}.scope-v17 .scope-heading h1{font-size:clamp(52px,6vw,94px)}.scope-v17 .scope-heading p{margin-bottom:20px}
.scope-v17 .scope-system{display:grid;grid-template-columns:270px 1fr;border:1px solid var(--line);background:rgba(4,6,5,.88);min-height:0}.scope-v17 .system-track{display:none}.scope-v17 .scope-nodes{display:grid;grid-template-rows:repeat(8,1fr);border-right:1px solid var(--line)}.scope-v17 .scope-nodes button{padding:0 14px;border-bottom:1px solid var(--line);opacity:.42}.scope-v17 .scope-nodes button.active{opacity:1;background:rgba(239,72,45,.14)}.scope-v17 .scope-nodes button strong{font-size:19px}.scope-v17 .scope-nodes button span{float:right}.scope-v17 .scope-detail{margin:38px;align-self:center;border-top-color:var(--red)}.scope-v17 .scope-detail::before{content:"> PROCESS SELECTED";display:block;margin-bottom:50px;color:var(--red);font:600 10px/1 "Martian"}.scope-v17 .scope-detail h2{font-size:clamp(68px,7vw,112px)}.scope-v17 .scope-detail p{max-width:500px;font-size:14px}

/* 18 — magnetic field */
.scope-v18 .scope-shade{background:linear-gradient(180deg,rgba(5,7,6,.54),rgba(5,7,6,.82)),radial-gradient(circle at 50% 50%,transparent 0 24%,rgba(5,7,6,.62) 76%)}
.scope-v18 .scope-content{display:block;padding:18px 3.4vw 34px}.scope-v18 .scope-heading{display:none}
.scope-v18 .scope-system{height:100%;position:relative;overflow:hidden;border:1px solid rgba(242,239,231,.14)}
.scope-v18 .system-track{position:absolute;z-index:2;left:50%;top:50%;width:330px;height:330px;border:1px solid rgba(242,239,231,.62);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 22px rgba(242,239,231,.025),0 0 0 92px rgba(242,239,231,.025),0 0 85px rgba(239,72,45,.14);animation:buoy-ring 5.4s ease-in-out infinite}
.scope-v18 .system-track::before,.scope-v18 .system-track::after{content:"";position:absolute;border-radius:50%;inset:24px;border:1px dashed rgba(242,239,231,.28);animation:ring-rotate 18s linear infinite}.scope-v18 .system-track::after{inset:64px;border-style:solid;border-color:rgba(239,72,45,.28);animation-direction:reverse;animation-duration:12s}
.scope-v18 .scope-nodes{position:absolute;z-index:3;inset:0}.scope-v18 .scope-nodes button{position:absolute;width:180px;padding:10px 12px 14px 36px;text-align:left;opacity:.52;transition:opacity .4s ease,transform .65s var(--ease)}
.scope-v18 .scope-nodes button::before{content:"";position:absolute;left:9px;top:10px;width:15px;height:15px;border:2px solid var(--paper);border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:rgba(10,10,9,.8);box-shadow:0 0 0 5px rgba(242,239,231,.04)}
.scope-v18 .scope-nodes button::after{content:attr(data-coordinate);display:block;margin-top:7px;color:rgba(242,239,231,.4);font:500 7px/1 "Martian";letter-spacing:.05em}
.scope-v18 .scope-nodes button:nth-child(1){left:5%;top:11%}.scope-v18 .scope-nodes button:nth-child(2){left:35%;top:3%}.scope-v18 .scope-nodes button:nth-child(3){left:72%;top:12%}.scope-v18 .scope-nodes button:nth-child(4){left:84%;top:43%}.scope-v18 .scope-nodes button:nth-child(5){left:70%;top:77%}.scope-v18 .scope-nodes button:nth-child(6){left:35%;top:84%}.scope-v18 .scope-nodes button:nth-child(7){left:5%;top:72%}.scope-v18 .scope-nodes button:nth-child(8){left:13%;top:40%}
.scope-v18 .scope-nodes button.active{left:50%;top:50%;width:230px;padding-left:42px;transform:translate(-50%,-58%) scale(1.06);opacity:1;z-index:5}.scope-v18 .scope-nodes button.active::before{width:20px;height:20px;border-color:var(--red);background:var(--red);box-shadow:0 0 0 9px rgba(239,72,45,.12),0 0 24px rgba(239,72,45,.5)}.scope-v18 .scope-nodes button.active strong{color:var(--paper);font-size:34px}.scope-v18 .scope-nodes strong{font-size:22px;margin:5px 0}.scope-v18 .scope-nodes span{font-size:8px}
.scope-v18 .scope-detail{position:absolute;z-index:6;left:50%;top:50%;width:270px;transform:translate(-50%,58px);padding:12px 0 0;text-align:center;border:0}.scope-v18 .scope-detail small,.scope-v18 .scope-detail h2,.scope-v18 .scope-detail b{display:none}.scope-v18 .scope-detail p{margin:0;color:rgba(242,239,231,.56);font-size:9px;line-height:1.55}
.route-map{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none}.route-map path{fill:none;vector-effect:non-scaling-stroke}.map-contour{stroke:rgba(242,239,231,.09);stroke-width:1}.map-route{stroke:rgba(242,239,231,.24);stroke-width:1;stroke-dasharray:5 8}.route-b{stroke:rgba(239,72,45,.28);stroke-dasharray:2 11}.map-core-dot{fill:var(--red);filter:drop-shadow(0 0 9px var(--red))}.map-legend{position:absolute;z-index:4;left:20px;right:20px;bottom:16px;display:flex;justify-content:space-between;color:rgba(242,239,231,.4);font:500 8px/1 "Martian";letter-spacing:.12em}
@keyframes buoy-ring{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 10px))}}@keyframes ring-rotate{to{transform:rotate(360deg)}}

/* 19 — giant index */
.scope-v19 .scope-shade{background:linear-gradient(0deg,rgba(10,10,9,.75),rgba(10,10,9,.28))}.scope-v19 .scope-content{display:block;padding-top:12px}.scope-v19 .scope-heading{display:none}.scope-v19 .scope-system{height:100%;display:grid;grid-template-rows:1fr auto}.scope-v19 .system-track{display:none}.scope-v19 .scope-nodes{order:2;display:flex;justify-content:space-between;border-top:1px solid var(--paper)}.scope-v19 .scope-nodes button{flex:1;padding:14px 8px;text-align:center;opacity:.34}.scope-v19 .scope-nodes button.active{opacity:1}.scope-v19 .scope-nodes button strong{font-size:20px;margin:5px 0}.scope-v19 .scope-nodes button.active strong{color:var(--red)}
.scope-v19 .scope-detail{align-self:center;border:0;text-align:center}.scope-v19 .scope-detail small{font-size:12px}.scope-v19 .scope-detail h2{font-size:clamp(170px,23vw,370px);line-height:.7;white-space:nowrap}.scope-v19 .scope-detail b{font-size:14px}.scope-v19 .scope-detail p{max-width:440px;margin:18px auto 0;font-size:14px}

/* 20 — spatial filmstrip */
.scope-v20 .scope-content{grid-template-columns:.58fr 1.42fr;grid-template-rows:minmax(0,1fr);align-items:center}.scope-v20 .scope-heading{display:block}.scope-v20 .scope-heading h1{font-size:clamp(58px,6.8vw,104px)}.scope-v20 .scope-heading p{margin-top:28px;max-width:350px}
.scope-v20 .scope-system{height:80%;perspective:1000px}.scope-v20 .system-track{display:none}.scope-v20 .scope-nodes{position:absolute;inset:0;transform-style:preserve-3d}.scope-v20 .scope-nodes button{position:absolute;width:230px;aspect-ratio:1.25;padding:18px;border:1px solid var(--line);background:rgba(10,10,9,.72);opacity:.42;transform:rotate(var(--tilt,0deg)) translateZ(var(--depth,-80px));transition:.8s var(--ease)}.scope-v20 .scope-nodes button:nth-child(1){left:2%;top:4%;--tilt:-8deg;--depth:-120px}.scope-v20 .scope-nodes button:nth-child(2){left:31%;top:0;--tilt:5deg}.scope-v20 .scope-nodes button:nth-child(3){left:59%;top:8%;--tilt:-3deg}.scope-v20 .scope-nodes button:nth-child(4){left:76%;top:38%;--tilt:9deg}.scope-v20 .scope-nodes button:nth-child(5){left:60%;top:68%;--tilt:-7deg}.scope-v20 .scope-nodes button:nth-child(6){left:30%;top:72%;--tilt:4deg}.scope-v20 .scope-nodes button:nth-child(7){left:2%;top:65%;--tilt:-4deg}.scope-v20 .scope-nodes button:nth-child(8){left:18%;top:35%;--tilt:7deg}.scope-v20 .scope-nodes button.active{left:50%;top:50%;transform:translate(-50%,-50%) translateZ(180px) rotate(0) scale(1.18);opacity:1;z-index:5;background:var(--red);color:var(--ink)}.scope-v20 .scope-nodes button strong{font-size:28px;margin:8px 0}.scope-v20 .scope-nodes button.active small,.scope-v20 .scope-nodes button.active span{color:var(--ink)}
.scope-v20 .scope-detail{position:absolute;right:0;bottom:-8%;width:43%;padding-top:12px}.scope-v20 .scope-detail h2{font-size:32px}
.scope-v16 .scope-heading h1,
.scope-v20 .scope-heading h1 { font-size:clamp(54px,5.7vw,90px); }
.scope-v11 .scope-nodes,
.scope-v20 .scope-nodes { pointer-events:none; }
.scope-v11 .scope-nodes button,
.scope-v20 .scope-nodes button { pointer-events:auto; }

.scope-v18 .scope-nodes button:not(.active) { transform:translate(var(--magnetic-x,0),var(--magnetic-y,0)); }
.scope-v19 .scope-detail p { position:absolute;right:2%;top:66%;z-index:3;max-width:360px;margin:0;padding:12px 15px;background:rgba(10,10,9,.7);font-size:13px;text-align:left; }

/*
  SECOND SCREEN / TITLELESS PROCESS WORLDS
  The twenty candidates no longer explain the section with a hero title.
  Each viewport is led by the eight business objects and its own interaction grammar.
*/
.scope-content{
  display:block;
  height:calc(100dvh - 74px);
  padding:clamp(18px,2.4vw,34px) 3.4vw 38px;
}
.scope-system{width:100%;height:100%;min-width:0;min-height:0}

/* 01 — a single charged relay occupies the whole field */
.scope-v1 .scope-system{grid-template-rows:minmax(0,1fr) 118px}
.scope-v1 .system-track{top:43%;overflow:visible}
.scope-v1 .scope-nodes{align-self:center}
.scope-v1 .scope-nodes button{padding-top:86px}
.scope-v1 .scope-nodes strong{font-size:clamp(18px,1.7vw,27px)}
.scope-v1 .scope-detail{align-self:end;padding-top:15px}
.scope-v1 .system-track::after{
  transform:scaleX(var(--relay-from-scale,var(--progress-scale)));
  transition:none;
}
.scope-v1.relay-restart .system-track::after{animation:relay-fill 4.2s linear both}
.scope-v1 .scope-nodes button{opacity:.28;transition:opacity .28s ease,transform .55s var(--ease),filter .28s ease}
.scope-v1 .scope-nodes button.passed{opacity:.72}
.scope-v1 .scope-nodes button.passed::before{border-color:var(--red);background:var(--red);box-shadow:0 0 12px rgba(239,72,45,.42)}
.scope-v1.relay-restart .scope-nodes button.active{animation:relay-arrive .68s cubic-bezier(.16,1,.3,1) both}
.scope-v1 .scope-nodes button.active::before{animation:relay-node-pulse 1.35s ease-out infinite}
.relay-timer{position:absolute;left:-1px;top:-22px;width:46px;height:46px;opacity:0;transform:rotate(-90deg);pointer-events:none}
.relay-timer svg{display:block;width:100%;height:100%;overflow:visible}
.relay-timer circle{fill:none;stroke-width:2;vector-effect:non-scaling-stroke}
.relay-timer-base{stroke:rgba(242,239,231,.14)}
.relay-timer-progress{stroke:var(--paper);stroke-linecap:round;stroke-dasharray:119.38;stroke-dashoffset:119.38}
.scope-v1 .scope-nodes button.active .relay-timer{opacity:1}
.scope-v1.relay-restart .scope-nodes button.active .relay-timer-progress{animation:relay-countdown 4.2s linear both}
.relay-runner{position:absolute;z-index:5;top:calc(43% - 6px);left:var(--relay-from);width:12px;height:12px;border-radius:50%;background:var(--paper);box-shadow:-14px 0 18px 2px rgba(239,72,45,.7),0 0 0 5px rgba(239,72,45,.18);transform:translateX(-50%);pointer-events:none;opacity:0}
.relay-restart .relay-runner{animation:relay-runner 4.2s linear both}
.relay-readout{position:absolute;z-index:4;left:0;right:0;top:calc(43% - 46px);display:flex;justify-content:space-between;color:rgba(242,239,231,.42);font:600 8px/1 "Martian",sans-serif;letter-spacing:.12em;pointer-events:none}
.relay-readout b{color:var(--paper);font:inherit;font-variant-numeric:tabular-nums}
@keyframes relay-fill{from{transform:scaleX(var(--relay-from-scale))}to{transform:scaleX(var(--relay-to-scale))}}
@keyframes relay-runner{0%{left:var(--relay-from);opacity:0;filter:blur(2px)}4%{opacity:1;filter:blur(0)}92%{left:var(--relay-to);opacity:1}100%{left:var(--relay-to);opacity:0}}
@keyframes relay-countdown{from{stroke-dashoffset:119.38}to{stroke-dashoffset:0}}
@keyframes relay-arrive{0%{opacity:.3;filter:blur(7px);transform:translateY(0)}100%{opacity:1;filter:blur(0);transform:translateY(-12px)}}
@keyframes relay-node-pulse{0%{box-shadow:0 0 0 0 rgba(239,72,45,.34)}75%,100%{box-shadow:0 0 0 15px rgba(239,72,45,0)}}

/* 01 / motion study — one layout, ten authored relay mechanics */
.relay-packets,.relay-beam,.relay-ripple,.relay-type{position:absolute;z-index:5;pointer-events:none}
.relay-packets{left:0;right:0;top:calc(43% - 4px);height:8px;opacity:0}
.relay-packets i{position:absolute;left:var(--relay-from);top:0;width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 14px rgba(239,72,45,.72);opacity:0}
.relay-packets i:nth-child(2){--packet-delay:.26s}.relay-packets i:nth-child(3){--packet-delay:.52s}.relay-packets i:nth-child(4){--packet-delay:.78s}.relay-packets i:nth-child(5){--packet-delay:1.04s}
.relay-beam{left:var(--relay-from);top:calc(43% - 1px);width:calc(var(--relay-to) - var(--relay-from));height:2px;transform-origin:left;background:linear-gradient(90deg,transparent,var(--paper),transparent);opacity:0}
.relay-ripple{left:var(--relay-to);top:43%;width:26px;height:26px;border:1px solid var(--paper);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0}
.relay-type{left:50%;top:calc(43% - 108px);width:360px;height:58px;transform:translateX(-50%);overflow:hidden;text-align:center}
.relay-type span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.02em;font:800 44px/1 "Glow Sans","Noto Sans SC",sans-serif;letter-spacing:-.03em}
.relay-type i{font-style:normal;display:inline-block;opacity:0}

/* M02 — staggered packet convoy */
.relay-m2 .relay-runner,.relay-m2 .relay-timer{display:none}
.relay-m2.relay-restart .relay-packets{opacity:1}
.relay-m2.relay-restart .relay-packets i{animation:relay-packet 3.1s cubic-bezier(.16,1,.3,1) var(--packet-delay,0s) both}
.relay-m2.relay-restart .scope-nodes button.next::before{animation:relay-receive 1s ease-out 3.05s both}

/* M03 — scanner wake, node labels resolve sequentially */
.relay-m3 .relay-runner{width:3px;height:88px;top:calc(43% - 44px);border-radius:0;background:linear-gradient(transparent,var(--paper),transparent);box-shadow:12px 0 28px rgba(239,72,45,.7)}
.relay-m3.relay-restart .relay-runner{animation:relay-scan 4.2s cubic-bezier(.42,0,.58,1) both}
.relay-m3.relay-restart .scope-nodes button.next strong{animation:relay-label-resolve .8s cubic-bezier(.16,1,.3,1) 3.2s both}

/* M04 — charge packets compress into a white beam */
.relay-m4 .relay-runner,.relay-m4 .relay-timer{display:none}
.relay-m4.relay-restart .relay-beam{animation:relay-beam 4.2s ease-in-out both}
.relay-m4.relay-restart .relay-ripple{animation:relay-ripple 1.1s ease-out 3.05s both}

/* M05 — completed nodes relay a metronomic pulse */
.relay-m5 .relay-runner,.relay-m5 .relay-timer{display:none}
.relay-m5.relay-restart .scope-nodes button::before{animation:relay-domino .46s cubic-bezier(.16,1,.3,1) calc(var(--relay-order) * .12s) both}
.relay-m5.relay-restart .scope-nodes button.active::before{animation:relay-hold 4.2s ease-in-out infinite}

/* M06 — label-to-label character handoff */
.relay-m6 .relay-runner,.relay-m6 .relay-timer{display:none}
.relay-m6.relay-restart .relay-type-out i{animation:relay-letter-out .42s cubic-bezier(.7,0,.84,0) calc(var(--letter)*.035s) both}
.relay-m6.relay-restart .relay-type-in i{animation:relay-letter-in .62s cubic-bezier(.16,1,.3,1) calc(2.75s + var(--letter)*.055s) both}
.relay-m6 .scope-nodes button.active strong,.relay-m6 .scope-nodes button.next strong{color:var(--red)}

/* M07 — the line draws in hard segments, then seals the next checkpoint */
.relay-m7 .relay-runner{display:none}.relay-m7 .relay-timer{display:none}
.relay-m7.relay-restart .system-track::after{animation:relay-segment-fill 4.2s steps(8,end) both}
.relay-m7.relay-restart .scope-nodes button.next::before{animation:relay-lock .56s cubic-bezier(.16,1,.3,1) 3.5s both}

/* M08 — soft pressure wave, one bounded blur crossing the route */
.relay-m8 .relay-timer{display:none}
.relay-m8 .relay-runner{width:72px;height:72px;top:calc(43% - 36px);background:radial-gradient(circle,var(--red) 0 5%,rgba(239,72,45,.34) 18%,transparent 70%);box-shadow:none;filter:blur(8px);mix-blend-mode:screen}
.relay-m8.relay-restart .relay-runner{animation:relay-pressure 4.2s cubic-bezier(.22,1,.36,1) both}

/* M09 — cursor scrubs the active process; line follows without autoplay ornament */
.relay-m9 .relay-runner,.relay-m9 .relay-timer,.relay-m9 .relay-readout{display:none}
.relay-m9 .scope-system{cursor:ew-resize}
.relay-m9 .scope-nodes button.active::before{animation:none}
.relay-m9 .scope-nodes button.active{animation:none}

/* M10 — a relay arc launches, lands, and ripples */
.relay-m10 .relay-timer{display:none}
.relay-m10 .relay-runner{width:14px;height:14px;top:calc(43% - 7px)}
.relay-m10.relay-restart .relay-runner{animation:relay-arc 4.2s cubic-bezier(.45,0,.55,1) both}
.relay-m10.relay-restart .relay-ripple{animation:relay-ripple 1.25s ease-out 3.1s both}

/* M11 — the process itself is an endless loop; the center is the reader */
.relay-m11 .system-track{left:0;right:0;top:43%;height:1px;background:linear-gradient(90deg,transparent 0,var(--line) 7%,var(--paper) 46%,var(--paper) 54%,var(--line) 93%,transparent)}
.relay-m11 .system-track::before{content:"";position:absolute;left:50%;top:-108px;width:1px;height:216px;background:linear-gradient(transparent,rgba(242,239,231,.52),transparent)}
.relay-m11 .system-track::after{display:none}
.relay-m11 .scope-nodes{position:absolute;left:50%;right:auto;top:43%;width:0;height:0;display:block}
.relay-m11 .scope-nodes button{position:absolute;left:0;top:0;width:154px;padding:68px 8px 16px;opacity:var(--loop-opacity);transform:translate(calc(-50% + var(--loop-x)), -50%) scale(var(--loop-scale));transition:opacity .22s linear,filter .22s linear;color:var(--paper)}
.relay-m11 .scope-nodes button::before{top:0;left:50%;transform:translate(-50%,-6.5px)}
.scope-v1.relay-m11 .scope-nodes button.active{z-index:7;opacity:var(--loop-opacity);filter:blur(calc((1 - var(--loop-heat)) * 2px));animation:none;transform:translate(calc(-50% + var(--loop-x)),-50%) scale(var(--loop-scale))}
.relay-m11 .scope-nodes button.active::before{left:50%;transform:translate(-50%,-13px);animation:relay-node-pulse 1.35s ease-out infinite}
.relay-m11 .scope-nodes button:not(.active){filter:blur(calc(min(2.5px, abs(var(--loop-distance)) * .7px)))}
.relay-m11 .scope-nodes strong{font-size:23px;text-align:center}
.relay-m11 .scope-nodes small,.relay-m11 .scope-nodes span{text-align:center}
.relay-m11 .scope-detail{position:absolute;left:0;right:0;bottom:0;height:118px}
.relay-m11 .relay-runner,.relay-m11 .relay-packets,.relay-m11 .relay-beam,.relay-m11 .relay-ripple,.relay-m11 .relay-type,.relay-m11 .relay-readout,.relay-m11 .relay-timer{display:none}
.relay-loop-focus{display:none}
.relay-m11 .relay-loop-focus{display:block;position:absolute;z-index:6;left:50%;top:43%;width:250px;height:170px;transform:translate(-50%,-50%);border-left:1px solid rgba(242,239,231,.46);border-right:1px solid rgba(242,239,231,.46);pointer-events:none}
.relay-m11 .relay-loop-focus::before,.relay-m11 .relay-loop-focus::after{content:"";position:absolute;left:50%;width:18px;height:1px;background:var(--red);transform:translateX(-50%)}
.relay-m11 .relay-loop-focus::before{top:0}.relay-m11 .relay-loop-focus::after{bottom:0}
.relay-m11 .relay-loop-focus i{position:absolute;left:50%;top:50%;width:84px;height:84px;border:1px solid rgba(239,72,45,.2);border-radius:50%;transform:translate(-50%,-50%);animation:loop-reader 2.4s ease-in-out infinite}
.relay-m11 .relay-loop-focus span{position:absolute;left:50%;top:-17px;transform:translateX(-50%);white-space:nowrap;color:rgba(242,239,231,.45);font:600 7px/1 "Martian",sans-serif;letter-spacing:.14em}
.relay-loop-hit{display:none}
.relay-m11 .relay-loop-hit{display:block;position:absolute;z-index:8;left:0;right:0;top:calc(43% - 86px);height:172px;cursor:pointer;background:transparent}
.relay-m11 .scope-nodes button{pointer-events:none}
.relay-m11 .scope-nodes button:focus-visible{pointer-events:auto}

@keyframes relay-packet{0%{left:var(--relay-from);opacity:0;transform:scale(.2)}10%{opacity:1;transform:scale(1)}88%{left:var(--relay-to);opacity:1}100%{left:var(--relay-to);opacity:0;transform:scale(.2)}}
@keyframes relay-receive{0%{box-shadow:0 0 0 0 rgba(242,239,231,.7)}100%{box-shadow:0 0 0 24px rgba(242,239,231,0)}}
@keyframes relay-scan{0%{left:var(--relay-from);opacity:0;transform:translateX(-50%) scaleY(.2)}8%{opacity:1;transform:translateX(-50%) scaleY(1)}88%{left:var(--relay-to);opacity:1}100%{left:var(--relay-to);opacity:0;transform:translateX(-50%) scaleY(.2)}}
@keyframes relay-label-resolve{0%{filter:blur(12px);letter-spacing:.22em;opacity:.12}100%{filter:blur(0);letter-spacing:-.03em;opacity:1}}
@keyframes relay-beam{0%,12%{opacity:0;transform:scaleX(0)}22%{opacity:1}72%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes relay-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(4.8)}}
@keyframes relay-domino{0%{filter:brightness(1);transform:translateY(-6.5px) scale(1)}55%{filter:brightness(2);transform:translateY(-6.5px) scale(1.45)}100%{filter:brightness(1);transform:translateY(-6.5px) scale(1)}}
@keyframes relay-hold{0%,100%{transform:translateY(-13px) scale(1)}50%{transform:translateY(-13px) scale(1.18)}}
@keyframes relay-letter-out{0%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-110%);filter:blur(8px)}}
@keyframes relay-letter-in{0%{opacity:0;transform:translateY(110%);filter:blur(8px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes relay-segment-fill{from{transform:scaleX(var(--relay-from-scale))}to{transform:scaleX(var(--relay-to-scale))}}
@keyframes relay-lock{0%{border-radius:50%;transform:translateY(-6.5px) rotate(0)}100%{border-radius:2px;transform:translateY(-6.5px) rotate(45deg);background:var(--paper);border-color:var(--paper)}}
@keyframes relay-pressure{0%{left:var(--relay-from);opacity:0;transform:translateX(-50%) scale(.25)}18%{opacity:1}82%{left:var(--relay-to);opacity:.9;transform:translateX(-50%) scale(1)}100%{left:var(--relay-to);opacity:0;transform:translateX(-50%) scale(.25)}}
@keyframes relay-arc{0%{left:var(--relay-from);opacity:0;transform:translate(-50%,0) scale(.5)}8%{opacity:1}50%{transform:translate(-50%,-82px) scale(1.18)}88%{left:var(--relay-to);opacity:1;transform:translate(-50%,0) scale(1)}100%{left:var(--relay-to);opacity:0;transform:translate(-50%,0) scale(.35)}}
@keyframes loop-reader{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.82)}50%{opacity:.8;transform:translate(-50%,-50%) scale(1.1)}}

/* 02 — full-height accordion, detail floating over the expanded panel */
.scope-v2 .scope-system{position:relative;display:block}
.scope-v2 .scope-nodes{height:100%}
.scope-v2 .scope-nodes button{padding:24px 16px}
.scope-v2 .scope-nodes button.active{flex:4.6 1 0}
.scope-v2 .scope-nodes button.active strong{font-size:clamp(48px,6.4vw,98px)}
.scope-v2 .scope-detail{position:absolute;z-index:4;left:28%;right:3%;bottom:26px;padding:14px 0 0;grid-template-columns:.55fr 1fr;pointer-events:none}

/* 03 — orbit becomes the complete composition */
.scope-v3 .scope-system{width:100%;height:100%;max-height:none;aspect-ratio:auto;justify-self:auto}
.scope-v3 .system-track{inset:6% 13%;border-radius:50%}
.scope-v3 .scope-nodes button{width:150px}
.scope-v3 .scope-nodes strong{font-size:22px}
.scope-v3 .scope-detail{width:34%;max-width:480px}

/* 04 — two live logistics belts with a fixed reading dock */
.scope-v4 .scope-system{height:100%;grid-template-rows:minmax(0,1fr) minmax(0,1fr) 116px}
.scope-v4 .scope-nodes button{width:clamp(230px,22vw,340px);padding:22px}
.scope-v4 .scope-nodes button strong{font-size:clamp(28px,3vw,48px)}
.scope-v4 .scope-detail{align-self:end}

/* 05 — centered depth queue with its current object docked right */
.scope-v5 .scope-system{height:100%;grid-template-columns:1.34fr .66fr}
.scope-v5 .scope-nodes button{left:8%;width:84%;min-height:78px;padding:16px 24px}
.scope-v5 .scope-nodes{pointer-events:none}
.scope-v5 .scope-nodes button{pointer-events:auto;z-index:var(--layer,1)}
.scope-v5 .scope-nodes button strong{font-size:clamp(30px,3.4vw,52px)}
.scope-v5 .scope-detail{padding-left:4vw}

/* 06 — spotlight analysis fills a clean 4 × 2 specimen field */
.scope-v6 .scope-system{height:100%;grid-template-rows:repeat(2,minmax(0,1fr));grid-template-columns:repeat(4,minmax(0,1fr))}
.scope-v6 .scope-nodes button{padding:clamp(18px,2vw,30px)}
.scope-v6 .scope-nodes strong{font-size:clamp(28px,2.8vw,44px)}
.scope-v6 .scope-detail{position:absolute;z-index:5;left:3%;right:3%;bottom:18px;padding:12px 0 0;background:linear-gradient(90deg,rgba(10,10,9,.78),transparent);pointer-events:none}

/* 07 — pixel tiles become the interface, not supporting cards */
.scope-v7 .scope-system{grid-template-rows:minmax(0,1fr) 106px}
.scope-v7 .scope-nodes strong{font-size:clamp(30px,3.2vw,50px)}
.scope-v7 .scope-nodes button{padding:clamp(20px,2.4vw,36px)}
.scope-v7 .scope-detail{align-self:end}

/* 08 — operational editorial split: index and live reading pane */
.scope-v8 .scope-system{height:100%;grid-template-columns:.62fr 1.38fr;border-top:1px solid var(--line)}
.scope-v8 .scope-nodes button{grid-template-columns:52px minmax(150px,1fr) auto;padding:0 20px}
.scope-v8 .scope-nodes button strong{font-size:clamp(22px,2.1vw,34px)}
.scope-v8 .scope-detail{margin-left:6vw;padding-top:clamp(40px,8vh,92px)}
.scope-v8 .scope-detail h2{font-size:clamp(88px,10vw,158px)}

/* 09 — cinematic reel owns the viewport */
.scope-v9 .scope-system{height:100%;grid-template-rows:minmax(0,1fr) 104px}
.scope-v9 .scope-nodes button{width:clamp(310px,31vw,480px);aspect-ratio:1.45;padding:30px}
.scope-v9 .scope-nodes button strong{font-size:clamp(42px,4.6vw,72px)}
.scope-v9 .scope-detail{align-self:end}

/* 10 — full coordinate network and a restrained readout */
.scope-v10 .scope-system{height:100%}
.scope-v10 .scope-nodes button{width:170px}
.scope-v10 .scope-nodes strong{font-size:24px}
.scope-v10 .scope-detail{right:2%;bottom:3%;width:36%;padding:18px;background:rgba(10,10,9,.78)}

/* 11 — rotating apparatus centered with a dedicated output bay */
.scope-v11 .scope-system{height:100%;grid-template-columns:1.38fr .62fr}
.scope-v11 .scope-nodes button{left:34%;width:330px;padding:20px 24px}
.scope-v11 .scope-nodes button strong{font-size:40px}
.scope-v11 .system-track{left:48%}
.scope-v11 .scope-detail{padding-left:5vw}

/* 12 — telemetry table expands to the full operating surface */
.scope-v12 .scope-system{height:100%;grid-template-columns:1.52fr .48fr;gap:4vw}
.scope-v12 .scope-nodes button{grid-template-columns:130px 210px 1fr 120px;padding:0 12px}
.scope-v12 .scope-nodes button strong{font-size:26px}
.scope-v12 .scope-detail{padding:28px 0 0 2vw}

/* 13 — one giant active word plus an index rail */
.scope-v13 .scope-system{grid-template-rows:minmax(0,1fr) 82px}
.scope-v13 .scope-detail h2{font-size:clamp(190px,25vw,390px)}
.scope-v13 .scope-detail p{top:22%;right:2%;width:340px}
.scope-v13 .scope-nodes button{padding:18px 9px}

/* 14 — the dual shutter is now the whole stage */
.scope-v14 .scope-system{height:100%;padding:0;display:grid;grid-template-columns:240px minmax(0,1fr);align-items:stretch}
.scope-v14 .system-track{left:240px}
.scope-v14 .scope-nodes{height:100%;padding-right:24px}
.scope-v14 .scope-nodes button{padding:0 18px}
.scope-v14 .scope-nodes button strong{font-size:25px}
.scope-v14 .scope-detail{align-self:center;padding:36px 5vw 0}
.scope-v14 .scope-detail h2{font-size:clamp(90px,10vw,158px)}

/* 15 — archive tiles become a dense cursor-reactive wall */
.scope-v15 .scope-system{height:100%;grid-template-rows:minmax(0,1fr) 106px}
.scope-v15 .scope-nodes{gap:1px}
.scope-v15 .scope-nodes button{padding:clamp(20px,2.4vw,36px);background:rgba(10,10,9,.56)}
.scope-v15 .scope-nodes strong{font-size:clamp(34px,3.6vw,58px)}
.scope-v15 .scope-detail{align-self:end}

/* 16 — a large convergence machine with the answer at its mouth */
.scope-v16 .scope-system{height:100%;grid-template-columns:1.42fr .58fr}
.scope-v16 .system-track{left:8%;right:33%;top:5%;bottom:5%}
.scope-v16 .scope-nodes button{padding:12px 18px}
.scope-v16 .scope-nodes strong{font-size:clamp(24px,2.7vw,42px)}
.scope-v16 .scope-detail{padding-left:4vw}

/* 17 — true operations console, no marketing column */
.scope-v17 .scope-system{height:100%;grid-template-columns:320px minmax(0,1fr)}
.scope-v17 .scope-nodes button{padding:0 20px}
.scope-v17 .scope-nodes button strong{font-size:24px}
.scope-v17 .scope-detail{margin:clamp(42px,7vw,96px)}
.scope-v17 .scope-detail h2{font-size:clamp(100px,11vw,174px)}

/* 18 — magnetic operations map remains the map-led candidate */
.scope-v18 .scope-content{padding:18px 3.4vw 38px}

/* 19 — giant selected index, with the eight choices as a control strip */
.scope-v19 .scope-system{grid-template-rows:minmax(0,1fr) 86px}
.scope-v19 .scope-detail h2{font-size:clamp(210px,27vw,420px)}
.scope-v19 .scope-nodes button{padding:20px 10px}
.scope-v19 .scope-detail p{top:62%}

/* 20 — spatial filmstrip now fills the entire projection volume */
.scope-v20 .scope-system{height:100%;perspective:1200px}
.scope-v20 .scope-nodes button{width:clamp(230px,21vw,330px);padding:22px}
.scope-v20 .scope-nodes button strong{font-size:clamp(30px,3vw,46px)}
.scope-v20 .scope-detail{right:3%;bottom:3%;width:36%;padding:18px;background:rgba(10,10,9,.72)}
.scope-v20 .scope-detail h2{font-size:42px}

@media (max-width: 900px) {
  .compare-head { height: 120px; padding: 10px 12px; grid-template-columns: 1fr auto; grid-template-rows: 31px 58px; gap: 7px; }
  .compare-title { font-size: 12px; }
  .compare-title small { display: none; }
  .openpage { grid-column: 2; grid-row: 1; font-size: 10px; }
  .tabs { grid-column: 1 / -1; grid-row: 2; width: 100%; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; border-radius: 12px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: 0 0 auto; padding: 10px 13px; }
  .frame { height: calc(100dvh - 120px); }

  .scope-page { overflow-y: auto; }
  .scope-top { height: 58px; margin: 0 18px; grid-template-columns: 1fr auto; }
  .variant-name { display: none; }
  .scope-content { height: auto; min-height: calc(100dvh - 58px); padding: 24px 18px 50px; gap: 24px; }
  .scope-heading { display: block; }
  .scope-heading h1 { font-size: clamp(46px, 15.5vw, 68px); line-height: .88; }
  .scope-heading p { margin-top: 17px; max-width: 570px; font-size: 11px; line-height: 1.65; }
  .scope-detail h2 { font-size: 34px; }
  .asset-note { right: 18px; bottom: 9px; }

  .scope-v1 .scope-system { display: block; }
  .scope-v1 .system-track { top: 7px; left: 7px; right: auto; bottom: 18px; width: 2px; height: auto; }
  .scope-v1 .system-track::after { width: 100%; height: 100%; transform: scaleY(var(--progress-scale)); transform-origin: center top; transition: transform .75s var(--ease); }
  .scope-v1 .scope-nodes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 12px; padding-left: 18px; }
  .scope-v1 .scope-nodes button { padding: 10px 6px; border-bottom: 1px solid var(--line); }
  .scope-v1 .scope-nodes button::before { top: 50%; left: -17px; width: 10px; height: 10px; transform: translateY(-50%); }
  .scope-v1 .scope-nodes button.active { transform: translateX(5px); }
  .scope-v1 .scope-nodes button.active::before { width: 16px; height: 16px; transform: translate(-3px,-50%); box-shadow: 0 0 0 4px rgba(239,72,45,.13); }
  .scope-v1 .scope-nodes strong { margin: 4px 0; font-size: 16px; }
  .scope-v1 .scope-detail { margin-top: 20px; grid-template-columns: 1fr; gap: 14px; }

  .scope-v2 .scope-system { display: block; }
  .scope-v2 .scope-nodes { flex-direction: column; min-height: 520px; }
  .scope-v2 .scope-nodes button { flex: 1 1 0; width: 100%; min-height: 51px; padding: 9px 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scope-v2 .scope-nodes button.active { flex: 2.1 1 0; }
  .scope-v2 .scope-nodes strong,
  .scope-v2 .scope-nodes button.active strong { writing-mode: horizontal-tb; font-size: 20px; margin: 5px 0 0; }
  .scope-v2 .scope-nodes span { left: auto; right: 14px; bottom: 13px; }
  .scope-v2 .scope-nodes button::after { font-size: 42px; }
  .scope-v2 .scope-detail { margin-top: 18px; grid-template-columns: 1fr; gap: 12px; }

  .scope-v3 .scope-content { display: block; }
  .scope-v3 .scope-heading h1 { font-size: clamp(46px,15vw,66px); }
  .scope-v3 .scope-heading p { margin-top: 16px; }
  .scope-v3 .scope-system { margin-top: 20px; height: min(112vw, 500px); width: 100%; aspect-ratio: auto; }
  .scope-v3 .system-track { inset: 12% 5%; }
  .scope-v3 .scope-nodes button { width: 84px; padding: 5px 2px; }
  .scope-v3 .scope-nodes strong { font-size: 15px; margin: 4px 0; }
  .scope-v3 .scope-nodes span { font-size: 7px; }
  .scope-v3 .scope-nodes button:nth-child(1) { left: 18%; top: 17%; }
  .scope-v3 .scope-nodes button:nth-child(2) { left: 50%; top: 5%; }
  .scope-v3 .scope-nodes button:nth-child(3) { left: 82%; top: 17%; }
  .scope-v3 .scope-nodes button:nth-child(4) { left: 98%; top: 50%; }
  .scope-v3 .scope-nodes button:nth-child(5) { left: 82%; top: 83%; }
  .scope-v3 .scope-nodes button:nth-child(6) { left: 50%; top: 95%; }
  .scope-v3 .scope-nodes button:nth-child(7) { left: 18%; top: 83%; }
  .scope-v3 .scope-nodes button:nth-child(8) { left: 2%; top: 50%; }
  .scope-v3 .scope-detail { width: 54%; padding: 16px 3px 0; }
  .scope-v3 .scope-detail h2 { font-size: 28px; }
  .scope-v3 .scope-detail p { font-size: 9px; }

  .scope-v4 .scope-system { min-height: 470px; grid-template-rows: 1fr 1fr auto; }
  .scope-v4 .scope-nodes button { width: 162px; padding: 12px; }
  .scope-v4 .scope-nodes button strong { font-size: 24px; }
  .scope-v4 .scope-detail { grid-template-columns: 1fr; gap: 10px; }

  .scope-v5 .scope-content { display: block; }
  .scope-v5 .scope-heading h1 { font-size: clamp(46px,15vw,66px); }
  .scope-v5 .scope-heading p { margin-top: 17px; }
  .scope-v5 .scope-system { display: block; height: auto; margin-top: 24px; perspective: none; }
  .scope-v5 .system-track { left: 7px; top: 0; bottom: 102px; }
  .scope-v5 .scope-nodes { position: relative; height: 326px; padding-left: 18px; perspective: 680px; overflow: visible; }
  .scope-v5 .scope-nodes button {
    position: absolute;
    top: calc(var(--slot) * 39px);
    left: 18px;
    width: calc(100% - 18px);
    min-height: 52px;
    margin: 0;
    padding: 8px 13px;
    opacity: max(.36, var(--opacity)) !important;
    transform: translateX(calc(var(--distance) * 2px)) translateZ(var(--z)) scale(var(--scale)) !important;
    transform-origin: right center;
  }
  .scope-v5 .scope-nodes button.active { opacity: 1 !important; transform: translateX(8px) translateZ(0) scale(1) !important; }
  .scope-v5 .scope-nodes button strong { font-size: 20px; margin-top: 3px; }
  .scope-v5 .scope-detail { margin-top: 10px; padding: 13px 0 0; }
  .scope-v5 .scope-detail h2 { font-size: 30px; }
  .scope-v5 .scope-detail p { margin-top: 6px; font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: 0.001ms !important; }
}