:root {
  --paper: #f1f0e8;
  --paper-deep: #e2e0d5;
  --ink: #101114;
  --ink-soft: #343840;
  --muted: #686b70;
  --line: rgba(16, 17, 20, 0.16);
  --blue: #3157ff;
  --blue-deep: #2142d4;
  --acid: #caff4a;
  --orange: #ff643e;
  --panel: #17191f;
  --panel-2: #20232b;
  --panel-text: #eeefe7;
  --display: "Syne", sans-serif;
  --body: "IBM Plex Sans JP", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.2, .9, .2, 1.15);
  --container: min(1280px, calc(100vw - 64px));
  --header-h: 74px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  content: "";
  opacity: .038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
#main-content { overflow-x: clip; }
::selection { color: var(--paper); background: var(--blue); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--paper-deep); }
::-webkit-scrollbar-thumb { background: var(--ink); border: 2px solid var(--paper-deep); }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 16px;
  color: var(--paper);
  background: var(--blue);
  transform: translateY(-160%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(24px, calc((100vw - 1440px) / 2));
  color: var(--panel-text);
  border-bottom: 1px solid rgba(238, 239, 231, .14);
  transition: color .3s ease, background .3s ease, border-color .3s ease, transform .35s var(--ease-out);
}
.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(241, 240, 232, .92);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
}
.brand {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-decoration: none;
}
.brand-mark { width: 34px; height: 34px; overflow: visible; }
.brand-mark path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark circle { fill: var(--acid); stroke: none; }
.primary-nav { display: flex; align-items: center; gap: 30px; }
.primary-nav a {
  position: relative;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
}
.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--acid);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.primary-nav a:hover::after, .primary-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: none; }

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 90px);
  overflow: clip;
  padding: calc(var(--header-h) + 58px) max(32px, calc((100vw - 1440px) / 2)) 118px;
  color: var(--panel-text);
  background: var(--ink);
  isolation: isolate;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .26;
  background-image:
    linear-gradient(rgba(238,239,231,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,239,231,.12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to right, rgba(0,0,0,.95), transparent 84%);
}
.hero-grid::after {
  position: absolute;
  inset: 0;
  content: "";
  background: radial-gradient(circle at 20% 44%, rgba(49,87,255,.25), transparent 36%);
}
.hero-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ambient-dot { position: absolute; width: 6px; height: 6px; background: var(--acid); box-shadow: 0 0 22px rgba(202,255,74,.9); animation: driftDot 12s ease-in-out infinite alternate; }
.dot-a { top: 24%; left: 46%; }
.dot-b { top: 67%; left: 7%; width: 4px; height: 4px; animation-delay: -3s; }
.dot-c { right: 5%; bottom: 20%; animation-delay: -7s; }
.hero-copy { position: relative; z-index: 2; max-width: 800px; }
.eyebrow, .chapter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
}
.status-dot { width: 8px; height: 8px; background: var(--acid); box-shadow: 0 0 14px rgba(202,255,74,.8); animation: statusPulse 2.2s ease-in-out infinite; }
.hero-eyebrow { opacity: 0; animation: heroFade .8s .15s var(--ease-out) forwards; }
.hero-title {
  max-width: 760px;
  margin-bottom: 32px;
  font-family: var(--display);
  font-size: clamp(3.2rem, 6.5vw, 7.5rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.07em;
}
.title-line { display: block; white-space: nowrap; }
.title-line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(110%) rotate(4deg);
  animation: titleRise .82s calc(.28s + var(--i) * 35ms) var(--ease-out) forwards;
}
.title-line-accent { color: var(--acid); }
.title-line-small { margin-top: 10px; font-size: .47em; line-height: 1.34; letter-spacing: -.045em; }
.hero-lede {
  max-width: 660px;
  margin-bottom: 34px;
  color: rgba(238,239,231,.72);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.9;
  opacity: 0;
  animation: heroFade .9s 1.1s var(--ease-out) forwards;
}
.hero-lede strong { color: var(--panel-text); }
.hero-jump {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  gap: 28px;
  padding: 0 20px;
  color: var(--ink);
  background: var(--acid);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  animation: heroFade .9s 1.28s var(--ease-out) forwards;
  transition: transform .25s var(--ease-snap), background .25s ease;
}
.hero-jump svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform .25s var(--ease-out); }
.hero-jump:hover { background: var(--panel-text); transform: translateY(-3px); }
.hero-jump:hover svg { transform: translateY(3px); }

.hero-stage {
  position: relative;
  min-height: min(66vh, 680px);
  border: 1px solid rgba(238,239,231,.22);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 48px 90px rgba(0,0,0,.32);
  overflow: hidden;
  opacity: 0;
  animation: stageEnter 1.2s .55s var(--ease-out) forwards;
  perspective: 1000px;
}
.hero-stage::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(49,87,255,.3), transparent 34%),
    linear-gradient(transparent 49.6%, rgba(238,239,231,.1) 50%, transparent 50.4%),
    linear-gradient(90deg, transparent 49.6%, rgba(238,239,231,.1) 50%, transparent 50.4%);
  transition: background .15s linear;
}
.hero-stage::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.018) 6px 7px);
}
.stage-corner { position: absolute; z-index: 3; width: 32px; height: 32px; border-color: var(--acid); border-style: solid; }
.corner-tl { top: 16px; left: 16px; border-width: 2px 0 0 2px; }
.corner-tr { top: 16px; right: 16px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 16px; left: 16px; border-width: 0 0 2px 2px; }
.corner-br { right: 16px; bottom: 16px; border-width: 0 2px 2px 0; }
.motion-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: min(32vw, 420px); aspect-ratio: 1;
  transform: translate(-50%,-50%) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  transition: transform .1s linear;
}
.orbit-ring { position: absolute; inset: 9%; border: 1px solid rgba(238,239,231,.28); border-radius: 50%; }
.ring-one { animation: orbitSpin 15s linear infinite; }
.ring-one::before, .ring-two::before { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; content:""; background: var(--acid); box-shadow: 0 0 22px rgba(202,255,74,.7); }
.ring-two { inset: 24%; border-color: rgba(49,87,255,.7); animation: orbitSpin 9s linear infinite reverse; }
.ring-two::before { top: 50%; left: auto; right: -4px; width: 8px; height: 8px; background: var(--blue); box-shadow: 0 0 22px rgba(49,87,255,.8); }
.orbit-core {
  position: absolute;
  inset: 35%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--acid);
  transform: translateZ(80px) rotate(-6deg);
  box-shadow: 12px 12px 0 var(--blue);
}
.orbit-core b { font-family: var(--display); font-size: clamp(46px, 5vw, 78px); line-height: 1; }
.orbit-core i { position: absolute; right: 7px; bottom: 4px; font-family: var(--mono); font-size: 10px; font-style: normal; }
.orbit-label { position: absolute; padding: 5px 8px; color: rgba(238,239,231,.72); background: var(--ink); border: 1px solid rgba(238,239,231,.16); font-family: var(--mono); font-size: 9px; letter-spacing: .12em; }
.label-a { top: 7%; left: 3%; transform: translateZ(30px); }
.label-b { top: 40%; right: -3%; transform: translateZ(60px); }
.label-c { bottom: 4%; left: 18%; transform: translateZ(42px); }
.stage-readout { position: absolute; right: 26px; bottom: 26px; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; }
.stage-readout output { color: var(--acid); font-size: 12px; }
.stage-note { position: absolute; top: 24px; left: 28px; margin: 0; color: rgba(238,239,231,.45); font-size: 11px; }
.hero-marquee { position: absolute; right: 0; bottom: 0; left: 0; overflow: clip; border-top: 1px solid rgba(238,239,231,.16); border-bottom: 1px solid rgba(238,239,231,.16); }
.marquee-track { width: max-content; display: flex; align-items: center; gap: 24px; padding: 13px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .18em; animation: marquee 30s linear infinite; }
.marquee-track i { width: 6px; height: 6px; background: var(--orange); }

.section-shell { width: var(--container); margin-inline: auto; padding-block: clamp(100px, 11vw, 176px); }
.section-intro { display: grid; grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr); gap: 32px; margin-bottom: clamp(54px,7vw,96px); }
.chapter { align-self: start; margin: 10px 0 0; color: var(--muted); }
.chapter span { display: inline-grid; width: 38px; height: 38px; place-items: center; color: var(--paper); background: var(--ink); font-family: var(--mono); font-size: 12px; }
.section-intro h2, .principles-quote p, .closing-section h2, .story-copy h2 {
  margin-bottom: 26px;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 6.4rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.06em;
}
.section-intro > div > p { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: clamp(15px,1.4vw,18px); }

.console-section { padding-bottom: 90px; }
.motion-console { display: grid; grid-template-columns: 340px minmax(0,1fr); min-height: 580px; color: var(--panel-text); background: var(--panel); border: 1px solid rgba(16,17,20,.3); box-shadow: 18px 18px 0 var(--blue); }
.console-controls { display: flex; flex-direction: column; border-right: 1px solid rgba(238,239,231,.14); }
.mode-button {
  position: relative;
  flex: 1;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-content: center;
  column-gap: 14px;
  padding: 26px;
  color: rgba(238,239,231,.55);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(238,239,231,.14);
  text-align: left;
  cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.mode-button:last-child { border-bottom: 0; }
.mode-button::after { position: absolute; top: 0; right: 0; bottom: 0; width: 5px; content:""; background: var(--acid); transform: scaleY(0); transition: transform .3s var(--ease-out); }
.mode-button:hover { color: var(--panel-text); background: rgba(255,255,255,.035); }
.mode-button.is-active { color: var(--panel-text); background: rgba(49,87,255,.17); }
.mode-button.is-active::after { transform: scaleY(1); }
.mode-no { grid-row: 1 / span 2; color: var(--acid); font-family: var(--mono); font-size: 11px; }
.mode-button b { font-size: 20px; }
.mode-button small { margin-top: 4px; font-size: 11px; color: inherit; opacity: .65; }
.console-screen { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 26px; overflow: hidden; }
.console-scan { position: absolute; inset: 0; pointer-events: none; opacity: .22; background: linear-gradient(transparent, rgba(202,255,74,.12), transparent); transform: translateY(-120%); }
.motion-console.is-loading .console-scan { animation: scanPass .72s ease-out; }
.console-topline { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px solid rgba(238,239,231,.12); color:rgba(238,239,231,.55); font-family:var(--mono); font-size:10px; letter-spacing:.12em; }
.console-topline span:last-child { color:var(--acid); }
.console-visual { position:relative; flex:1; min-height:310px; margin:24px 0; overflow:hidden; background-color:#12141a; background-image:linear-gradient(rgba(238,239,231,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(238,239,231,.07) 1px,transparent 1px); background-size:36px 36px; }
.console-shape { position:absolute; display:block; transition: transform .8s var(--ease-out), border-radius .8s var(--ease-out), background .8s ease; }
.shape-a { top:14%; left:10%; width:120px; height:120px; background:var(--blue); }
.shape-b { right:12%; bottom:18%; width:94px; height:94px; border:2px solid var(--acid); }
.shape-c { top:24%; right:25%; width:38px; height:180px; background:var(--orange); }
.console-word { position:absolute; left:8%; bottom:8%; font-family:var(--display); font-size:clamp(36px,6vw,100px); font-weight:800; line-height:1; letter-spacing:-.07em; color:var(--panel-text); mix-blend-mode:difference; transition:letter-spacing .8s var(--ease-out), transform .8s var(--ease-out); }
body[data-motion="quiet"] .shape-a { transform:translate(8px,5px); }
body[data-motion="quiet"] .shape-b { transform:translate(-6px,-4px); }
body[data-motion="quiet"] .shape-c { transform:scaleY(.65); }
body[data-motion="quiet"] .console-word { letter-spacing:-.04em; }
body[data-motion="focus"] .shape-a { transform:translate(54px,34px) rotate(10deg); }
body[data-motion="focus"] .shape-b { transform:translate(-38px,-26px) rotate(-16deg); border-radius:50%; }
body[data-motion="focus"] .shape-c { transform:rotate(22deg); }
body[data-motion="immersive"] .shape-a { transform:translate(130px,55px) rotate(45deg) scale(1.25); border-radius:50%; }
body[data-motion="immersive"] .shape-b { transform:translate(-110px,-50px) rotate(100deg) scale(1.5); }
body[data-motion="immersive"] .shape-c { transform:translateX(-75px) rotate(62deg) scaleY(1.4); }
body[data-motion="immersive"] .console-word { letter-spacing:.05em; transform:translateX(5%) scale(1.06); }
.console-result { display:grid; grid-template-columns:minmax(180px,.5fr) 1fr; gap:28px; align-items:end; padding-top:20px; border-top:1px solid rgba(238,239,231,.12); }
.console-result span { display:block; margin-bottom:5px; color:rgba(238,239,231,.45); font-size:10px; }
.console-result strong { font-family:var(--display); font-size:28px; }
.console-result p { margin:0; color:rgba(238,239,231,.67); font-size:13px; line-height:1.8; }

.capabilities { padding-top:140px; }
.demo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--ink); border:1px solid var(--ink); }
.demo-card { min-width:0; display:flex; flex-direction:column; min-height:520px; padding:26px; background:var(--paper); overflow:hidden; }
.demo-meta { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:22px; }
.demo-meta span, .scene-no, .way-card>span { color:var(--blue); font-family:var(--mono); font-size:12px; }
.demo-meta b { font-size:14px; }
.demo-canvas { position:relative; min-height:285px; margin-bottom:22px; overflow:hidden; color:var(--panel-text); background:var(--panel); }
.demo-card > p { max-width:38em; margin:0 0 16px; color:var(--muted); font-size:14px; }
.tech-label { margin-top:auto; color:var(--muted); font-family:var(--mono); font-size:9px; letter-spacing:.13em; }
.text-demo { display:grid; place-items:center; }
.text-demo p { margin:0; font-family:var(--display); font-size:clamp(30px,4vw,58px); font-weight:700; line-height:1.15; letter-spacing:-.05em; }
.text-demo p span { display:block; opacity:0; transform:translateY(34px); }
.text-demo.is-playing p span { animation:textDemo .62s var(--ease-out) forwards; }
.text-demo.is-playing p span:nth-child(2) { animation-delay:.1s; color:var(--acid); }
.text-demo.is-playing p span:nth-child(3) { animation-delay:.2s; }
.replay-button { position:absolute; right:14px; bottom:14px; min-height:44px; padding:0 15px; color:var(--panel-text); background:transparent; border:1px solid rgba(238,239,231,.25); font-size:11px; cursor:pointer; }
.replay-button:hover { color:var(--ink); background:var(--acid); }
.stagger-demo { display:flex; align-items:flex-end; justify-content:center; gap:10px; padding:44px; }
.stagger-demo i { width:17%; height:56%; background:var(--blue); transform:translateY(130%); animation:staggerBars 3.6s var(--ease-out) infinite; }
.stagger-demo i:nth-child(2) { height:76%; animation-delay:.12s; background:var(--acid); }
.stagger-demo i:nth-child(3) { height:42%; animation-delay:.24s; background:var(--orange); }
.stagger-demo i:nth-child(4) { height:88%; animation-delay:.36s; background:var(--panel-text); }
.stagger-demo i:nth-child(5) { height:64%; animation-delay:.48s; background:var(--blue); }
.focus-demo { padding:25px; }
.focus-art { position:absolute; inset:25px; display:grid; place-items:center; overflow:hidden; background:var(--acid); transition:transform .8s var(--ease-out); }
.focus-art::before { position:absolute; width:190px; height:190px; content:""; background:var(--blue); border-radius:50%; transform:translate(-38%,-30%); }
.focus-art i { position:absolute; right:8%; bottom:12%; width:80px; height:80px; border:14px solid var(--ink); transform:rotate(18deg); }
.focus-art span { position:relative; z-index:1; color:var(--ink); font-family:var(--display); font-size:clamp(42px,5vw,74px); font-weight:800; letter-spacing:-.08em; mix-blend-mode:multiply; }
.focus-demo:hover .focus-art { transform:scale(1.13); }
.parallax-demo { background:#20232a; }
.para-grid { position:absolute; inset:-12%; background-image:linear-gradient(rgba(238,239,231,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(238,239,231,.1) 1px,transparent 1px); background-size:28px 28px; transform:translate(var(--px1,0),var(--py1,0)); transition:transform .12s linear; }
.para-disc { position:absolute; top:18%; right:15%; width:140px; height:140px; border-radius:50%; background:var(--blue); transform:translate(var(--px2,0),var(--py2,0)); transition:transform .12s linear; }
.para-card { position:absolute; left:14%; bottom:18%; padding:28px 34px; color:var(--ink); background:var(--acid); box-shadow:10px 10px 0 var(--orange); font-family:var(--display); font-size:34px; font-weight:800; transform:translate(var(--px3,0),var(--py3,0)); transition:transform .12s linear; }
.sticky-mini span { position:absolute; width:54%; height:54%; display:grid; place-items:center; border:1px solid rgba(238,239,231,.16); font-family:var(--display); font-size:44px; font-weight:800; }
.stack-one { top:14%; left:12%; background:var(--blue); animation:stackCards 5s ease-in-out infinite; }
.stack-two { top:23%; left:23%; color:var(--ink); background:var(--acid); animation:stackCards 5s 1.4s ease-in-out infinite; }
.stack-three { top:32%; left:34%; background:var(--orange); animation:stackCards 5s 2.8s ease-in-out infinite; }
.inline-jump { min-height:44px; display:inline-flex; align-items:center; gap:12px; margin-top:auto; font-size:12px; font-weight:700; text-underline-offset:4px; }
.inline-jump span { color:var(--blue); }
.story-mini { display:flex; align-items:center; justify-content:center; gap:12px; padding:30px; font-family:var(--mono); font-size:11px; }
.story-mini i { position:relative; flex:1; height:1px; background:rgba(238,239,231,.22); }
.story-mini i::after { position:absolute; top:-4px; left:0; width:9px; height:9px; content:""; background:var(--acid); animation:travelDot 3s ease-in-out infinite; }
.story-mini i:nth-of-type(2)::after { animation-delay:1.5s; background:var(--orange); }
.marquee-demo { display:flex; flex-direction:column; justify-content:center; gap:18px; }
.marquee-demo>div { width:max-content; display:flex; gap:28px; padding:10px 0; color:var(--acid); font-family:var(--display); font-size:38px; font-weight:700; white-space:nowrap; animation:marquee 12s linear infinite; }
.marquee-demo>div.reverse { color:var(--panel-text); animation-direction:reverse; animation-duration:16s; }
.video-demo { background:radial-gradient(circle at 40% 35%,rgba(49,87,255,.7),transparent 28%),radial-gradient(circle at 70% 68%,rgba(255,100,62,.54),transparent 24%),#11131a; }
.video-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(238,239,231,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(238,239,231,.08) 1px,transparent 1px); background-size:44px 44px; animation:videoScale 5s ease-in-out infinite; }
.video-play { position:absolute; top:50%; left:50%; width:60px; height:60px; display:grid; place-items:center; color:var(--ink); background:var(--acid); border-radius:50%; transform:translate(-50%,-50%); padding-left:4px; }
.video-time { position:absolute; right:14px; bottom:12px; font-family:var(--mono); font-size:10px; }
.micro-demo { display:flex; flex-direction:column; justify-content:center; gap:24px; padding:42px; }
.micro-button { min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; color:var(--ink); background:var(--acid); border:0; box-shadow:7px 7px 0 var(--blue); cursor:pointer; transition:transform .18s ease,box-shadow .18s ease; }
.micro-button:hover { transform:translate(-2px,-2px); box-shadow:10px 10px 0 var(--blue); }
.micro-button:active,.micro-button.is-done { transform:translate(5px,5px); box-shadow:2px 2px 0 var(--blue); }
.micro-button i { font-style:normal; opacity:0; transform:scale(.4); transition:all .25s var(--ease-snap); }
.micro-button.is-done i { opacity:1; transform:scale(1); }
.micro-toggle { display:flex; align-items:center; justify-content:space-between; color:rgba(238,239,231,.65); font-size:12px; }
.micro-toggle button { position:relative; width:66px; height:44px; border:1px solid rgba(238,239,231,.3); border-radius:24px; background:transparent; cursor:pointer; }
.micro-toggle button i { position:absolute; top:9px; left:8px; width:24px; height:24px; background:rgba(238,239,231,.6); border-radius:50%; transition:transform .3s var(--ease-out),background .3s ease; }
.micro-toggle button[aria-pressed="true"] i { background:var(--acid); transform:translateX(25px); }
.assemble-demo b { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); font-family:var(--mono); font-size:10px; letter-spacing:.16em; }
.part { position:absolute; top:50%; left:50%; display:block; animation:assemble 5s var(--ease-out) infinite; }
.part-a { width:150px; height:95px; border:2px solid var(--panel-text); transform:translate(-180%,-150%) rotate(-14deg); }
.part-b { width:72px; height:72px; background:var(--blue); border-radius:50%; transform:translate(120%,-160%); animation-delay:.12s; }
.part-c { width:38px; height:130px; background:var(--acid); transform:translate(-240%,70%) rotate(30deg); animation-delay:.24s; }
.part-d { width:92px; height:38px; background:var(--orange); transform:translate(120%,160%) rotate(-22deg); animation-delay:.36s; }

.story-section { position:relative; height:420vh; color:var(--panel-text); background:var(--ink); }
.story-sticky { position:sticky; top:0; min-height:100svh; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:clamp(40px,8vw,130px); width:var(--container); margin-inline:auto; padding:100px 0 70px; overflow:hidden; }
.chapter-light { color:rgba(238,239,231,.48); }
.chapter-light span { color:var(--ink); background:var(--acid); }
.story-copy h2 { margin-top:30px; font-size:clamp(3rem,5.7vw,6.2rem); }
.story-copy>p { max-width:520px; color:rgba(238,239,231,.62); }
.story-progress { height:4px; margin-top:44px; background:rgba(238,239,231,.15); overflow:hidden; }
.story-progress i { display:block; width:100%; height:100%; background:var(--acid); transform:scaleX(0); transform-origin:left; }
.story-scenes { position:relative; min-height:520px; display:grid; place-items:center; perspective:1000px; }
.story-scenes::before { position:absolute; inset:5%; content:""; border:1px solid rgba(238,239,231,.12); background-image:linear-gradient(rgba(238,239,231,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(238,239,231,.05) 1px,transparent 1px); background-size:42px 42px; }
.story-scene { position:absolute; width:min(88%,520px); min-height:250px; display:flex; flex-direction:column; justify-content:flex-end; padding:34px; color:var(--ink); background:var(--paper); box-shadow:16px 16px 0 var(--blue); opacity:0; visibility:hidden; pointer-events:none; transform:translateY(70px) rotateX(-8deg) scale(.9); transition:opacity .42s ease,transform .72s var(--ease-out); }
.story-scene.is-active { opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) rotateX(0) scale(1); }
.story-scene b { margin:32px 0 12px; font-family:var(--display); font-size:clamp(28px,4vw,48px); line-height:1.2; }
.story-scene p { margin:0; color:var(--muted); font-size:14px; }
.story-cursor { position:absolute; top:9%; right:6%; width:76px; height:76px; display:grid; place-items:center; border:1px solid rgba(238,239,231,.3); border-radius:50%; animation:cursorFloat 4s ease-in-out infinite; }
.story-cursor span { width:12px; height:12px; background:var(--acid); }

.ways-list { border-top:1px solid var(--ink); }
.way-card { display:grid; grid-template-columns:80px minmax(0,1fr) 100px; gap:28px; align-items:center; min-height:150px; padding:24px 14px; border-bottom:1px solid var(--ink); transition:padding .35s var(--ease-out),background .35s ease,color .35s ease; }
.way-card:hover { padding-inline:28px; color:var(--paper); background:var(--blue); }
.way-card:hover>span,.way-card:hover i,.way-card:hover p { color:inherit; }
.way-card h3 { margin:0 0 8px; font-family:var(--display); font-size:clamp(28px,3vw,48px); line-height:1.2; letter-spacing:-.04em; }
.way-card p { max-width:780px; margin:0; color:var(--muted); font-size:14px; transition:color .35s ease; }
.way-card i { justify-self:end; color:var(--muted); font-family:var(--mono); font-size:10px; font-style:normal; letter-spacing:.12em; }

.methods-section { padding-top:70px; }
.method-rail { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border:1px solid var(--ink); }
.method-card { min-height:390px; display:flex; flex-direction:column; padding:26px; border-right:1px solid var(--ink); background:var(--paper); transition:color .35s ease,background .35s ease; }
.method-card:last-child { border-right:0; }
.method-card:hover { color:var(--panel-text); background:var(--ink); }
.method-level { font-family:var(--mono); font-size:9px; letter-spacing:.12em; color:var(--blue); }
.method-card h3 { margin:70px 0 22px; font-family:var(--display); font-size:clamp(28px,3.5vw,52px); line-height:1; letter-spacing:-.05em; }
.method-card p { color:var(--muted); font-size:13px; transition:color .35s ease; }
.method-card:hover p { color:rgba(238,239,231,.6); }
.method-meter { margin-top:auto; height:5px; background:var(--paper-deep); overflow:hidden; }
.method-meter i { display:block; width:var(--fill); height:100%; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-out); }
.method-card.is-visible .method-meter i { transform:scaleX(1); }

.principles-section { color:var(--panel-text); background:var(--panel); border-top:1px solid rgba(238,239,231,.12); }
.principles-inner { padding-block:130px; }
.principles-quote { margin:75px 0 90px; padding-left:8%; border:0; }
.principles-quote p { position:relative; max-width:1000px; margin:0; }
.principles-quote p::before { position:absolute; top:.05em; left:-.65em; content:"“"; color:var(--acid); }
.principle-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:rgba(238,239,231,.2); border:1px solid rgba(238,239,231,.2); }
.principle-card { min-height:300px; padding:28px; background:var(--panel); transition:background .3s ease; }
.principle-card:hover { background:var(--panel-2); }
.principle-card>span { color:var(--acid); font-family:var(--mono); font-size:11px; }
.principle-card h3 { margin:72px 0 16px; font-family:var(--display); font-size:27px; line-height:1.3; }
.principle-card p { margin:0; color:rgba(238,239,231,.58); font-size:13px; }
.reduced-note { display:grid; grid-template-columns:90px 1fr; gap:26px; align-items:center; margin-top:50px; padding:28px; border:1px solid rgba(238,239,231,.2); }
.reduced-icon { width:64px; height:64px; display:grid; place-items:center; border:1px solid rgba(238,239,231,.25); border-radius:50%; }
.reduced-icon span { width:26px; height:3px; background:var(--acid); box-shadow:0 8px 0 rgba(238,239,231,.5),0 -8px 0 rgba(238,239,231,.5); }
.reduced-note b { font-size:17px; }
.reduced-note p { margin:4px 0 0; color:rgba(238,239,231,.56); font-size:13px; }

.closing-section { position:relative; min-height:88svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:110px 28px; overflow:hidden; text-align:center; }
.closing-section::before { position:absolute; inset:0; content:""; opacity:.36; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(circle at center,#000,transparent 74%); }
.closing-section>* { position:relative; z-index:1; }
.closing-section .eyebrow { color:var(--muted); }
.closing-section h2 { margin:18px 0 42px; }
.closing-orbit { position:absolute; top:50%; left:50%; width:min(76vw,820px); aspect-ratio:1; transform:translate(-50%,-50%); opacity:.16; }
.closing-orbit i { position:absolute; inset:0; border:1px solid var(--blue); border-radius:50%; animation:orbitSpin 24s linear infinite; }
.closing-orbit i:nth-child(2) { inset:17%; border-color:var(--orange); animation-direction:reverse; animation-duration:16s; }
.closing-orbit span { position:absolute; top:50%; left:50%; font-family:var(--display); font-size:8vw; font-weight:800; transform:translate(-50%,-50%); }
.back-top { min-height:50px; display:inline-flex; align-items:center; gap:32px; padding:0 20px; color:var(--paper); background:var(--blue); font-size:13px; font-weight:700; text-decoration:none; box-shadow:8px 8px 0 var(--ink); transition:transform .2s ease,box-shadow .2s ease; }
.back-top:hover { transform:translate(4px,4px); box-shadow:4px 4px 0 var(--ink); }

.site-footer { min-height:210px; display:grid; grid-template-columns:1fr 1fr auto; gap:32px; align-items:center; padding:44px max(32px,calc((100vw - 1440px)/2)); color:var(--panel-text); background:var(--ink); border-top:1px solid rgba(238,239,231,.15); }
.footer-mark { display:flex; align-items:center; gap:14px; }
.footer-mark b { display:block; font-family:var(--display); }
.footer-mark span,.footer-year,.site-footer>p { color:rgba(238,239,231,.48); font-family:var(--mono); font-size:10px; letter-spacing:.08em; }
.site-footer>p { margin:0; text-align:center; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(34px); transition:opacity .72s var(--ease-out),transform .72s var(--ease-out); }
.js .reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes heroFade { to { opacity:1; transform:translateY(0); } from { opacity:0; transform:translateY(18px); } }
@keyframes titleRise { to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes stageEnter { to { opacity:1; transform:translateY(0) scale(1); } from { opacity:0; transform:translateY(32px) scale(.96); } }
@keyframes driftDot { to { transform:translate(42px,-30px) rotate(90deg); } }
@keyframes statusPulse { 50% { opacity:.36; box-shadow:0 0 3px rgba(202,255,74,.2); } }
@keyframes orbitSpin { to { transform:rotate(360deg); } }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes scanPass { from { transform:translateY(-120%); } to { transform:translateY(120%); } }
@keyframes textDemo { to { opacity:1; transform:translateY(0); } }
@keyframes staggerBars { 0%,14% { transform:translateY(130%); } 35%,72% { transform:translateY(0); } 92%,100% { transform:translateY(130%); } }
@keyframes stackCards { 0%,18% { transform:translate(0,0); } 34%,68% { transform:translate(18px,-18px) rotate(3deg); } 85%,100% { transform:translate(0,0); } }
@keyframes travelDot { 0%,14% { left:0; opacity:0; } 25%,75% { opacity:1; } 90%,100% { left:calc(100% - 9px); opacity:0; } }
@keyframes videoScale { 0%,100% { transform:scale(1); } 55% { transform:scale(1.12); } }
@keyframes assemble { 0%,20% { opacity:.3; } 45%,72% { opacity:1; transform:translate(-50%,-50%) rotate(0); } 92%,100% { opacity:.3; } }
@keyframes cursorFloat { 50% { transform:translate(-12px,18px); } }

@media (max-width: 1080px) {
  :root { --container:min(100% - 42px,1040px); }
  .hero { grid-template-columns:1fr .78fr; gap:30px; padding-inline:28px; }
  .hero-stage { min-height:520px; }
  .motion-orbit { width:35vw; }
  .method-rail { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .method-card { border-bottom:1px solid var(--ink); }
  .method-card:nth-child(2) { border-right:0; }
  .method-card:nth-child(n+3) { border-bottom:0; }
}

@media (max-width: 820px) {
  :root { --header-h:66px; --container:min(100% - 34px,740px); }
  .site-header { padding-inline:18px; }
  .nav-toggle { position:relative; z-index:2; width:46px; height:46px; display:grid; place-items:center; color:inherit; background:transparent; border:0; }
  .nav-toggle span { position:absolute; width:22px; height:1px; background:currentColor; transition:transform .25s ease,top .25s ease; }
  .nav-toggle span:first-child { top:18px; }
  .nav-toggle span:last-child { top:27px; }
  .nav-toggle[aria-expanded="true"] span:first-child { top:23px; transform:rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { top:23px; transform:rotate(-45deg); }
  .primary-nav { position:fixed; top:0; right:0; width:min(82vw,360px); height:100svh; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding:70px 36px; color:var(--panel-text); background:var(--ink); transform:translateX(105%); transition:transform .45s var(--ease-out); }
  .primary-nav.is-open { transform:translateX(0); }
  .primary-nav a { width:100%; font-size:16px; border-bottom:1px solid rgba(238,239,231,.18); }
  .hero { min-height:auto; grid-template-columns:1fr; padding:calc(var(--header-h) + 56px) 22px 105px; }
  .hero-copy { max-width:100%; }
  .hero-title { font-size:clamp(2.8rem,12vw,5rem); }
  .hero-stage { min-height:520px; }
  .motion-orbit { width:min(68vw,400px); }
  .section-intro { grid-template-columns:1fr; }
  .chapter { margin-bottom:6px; }
  .motion-console { grid-template-columns:1fr; box-shadow:10px 10px 0 var(--blue); }
  .console-controls { display:grid; grid-template-columns:repeat(3,1fr); border-right:0; border-bottom:1px solid rgba(238,239,231,.14); }
  .mode-button { min-height:128px; display:flex; flex-direction:column; gap:4px; padding:18px; border-right:1px solid rgba(238,239,231,.14); border-bottom:0; }
  .mode-button:last-child { border-right:0; }
  .mode-button::after { top:auto; right:0; bottom:0; left:0; width:auto; height:4px; transform:scaleX(0); }
  .mode-button.is-active::after { transform:scaleX(1); }
  .mode-no { margin-bottom:8px; }
  .mode-button b { font-size:16px; }
  .mode-button small { font-size:9px; line-height:1.5; }
  .demo-grid { grid-template-columns:1fr; }
  .demo-card { min-height:500px; }
  .story-section { height:auto; padding-block:100px; }
  .story-sticky { position:relative; min-height:auto; grid-template-columns:1fr; padding:0; overflow:visible; }
  .story-progress { display:none; }
  .story-scenes { min-height:auto; display:flex; flex-direction:column; gap:18px; }
  .story-scenes::before,.story-cursor { display:none; }
  .story-scene { position:relative; width:100%; min-height:230px; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .way-card { grid-template-columns:54px 1fr; }
  .way-card i { display:none; }
  .principle-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer { grid-template-columns:1fr; text-align:left; }
  .site-footer>p { text-align:left; }
}

@media (max-width: 560px) {
  :root { --container:calc(100% - 28px); }
  .hero { padding-inline:14px; }
  .hero-title { font-size:clamp(2.45rem,12vw,4rem); line-height:1.17; letter-spacing:-.065em; }
  .title-line-small { font-size:.42em; }
  .hero-lede br { display:none; }
  .hero-stage { min-height:430px; }
  .motion-orbit { width:78vw; }
  .stage-note { display:none; }
  .section-shell { padding-block:92px; }
  .section-intro { margin-bottom:48px; }
  .section-intro h2,.story-copy h2,.principles-quote p,.closing-section h2 { font-size:clamp(2.25rem,11vw,3.8rem); line-height:1.2; }
  .motion-console { min-height:auto; }
  .console-controls { grid-template-columns:1fr; }
  .mode-button { min-height:88px; display:grid; grid-template-columns:38px 1fr; border-right:0; border-bottom:1px solid rgba(238,239,231,.14); }
  .mode-button:last-child { border-bottom:0; }
  .mode-no { grid-row:1/span 2; }
  .console-screen { padding:16px; }
  .console-visual { min-height:280px; }
  .console-word { font-size:12vw; }
  .console-result { grid-template-columns:1fr; gap:12px; }
  .demo-card { min-height:470px; padding:18px; }
  .demo-canvas { min-height:250px; }
  .focus-art span { font-size:48px; }
  .story-section { padding-block:88px; }
  .story-sticky { width:calc(100% - 28px); }
  .story-scene { box-shadow:9px 9px 0 var(--blue); }
  .way-card { grid-template-columns:42px 1fr; gap:14px; padding:22px 4px; }
  .way-card:hover { padding-inline:12px; }
  .way-card h3 { font-size:28px; }
  .method-rail { grid-template-columns:1fr; }
  .method-card { min-height:300px; border-right:0; border-bottom:1px solid var(--ink) !important; }
  .method-card:last-child { border-bottom:0 !important; }
  .method-card h3 { margin-top:44px; }
  .principle-grid { grid-template-columns:1fr; }
  .principle-card { min-height:250px; }
  .principle-card h3 { margin-top:48px; }
  .reduced-note { grid-template-columns:1fr; }
  .closing-section { min-height:76svh; padding-inline:18px; }
  .site-footer { padding-inline:22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; }
  .reveal,.reveal.is-visible,.hero-eyebrow,.hero-lede,.hero-jump,.hero-stage,.title-line span { opacity:1 !important; transform:none !important; }
  .primary-nav { transition-duration:.2s !important; }
  .story-section { height:auto; padding-block:100px; }
  .story-sticky { position:relative; min-height:auto; grid-template-columns:1fr; padding:0; }
  .story-scenes { min-height:auto; display:flex; flex-direction:column; gap:18px; }
  .story-scenes::before,.story-cursor,.story-progress { display:none; }
  .story-scene { position:relative; width:100%; opacity:1; visibility:visible; pointer-events:auto; transform:none; }
}