:root {
  --ink: #050505;
  --ink-2: #0b0c0b;
  --paper: #f2f2ec;
  --muted: rgba(242, 242, 236, .55);
  --line: rgba(255,255,255,.13);
  --line-dark: rgba(5,5,5,.14);
  --green: #79ff36;
  --green-2: #49cc17;
  --glass: rgba(255,255,255,.055);
  --glass-strong: rgba(255,255,255,.09);
  --page: min(1680px, calc(100vw - 56px));
  --pad: clamp(20px, 3vw, 52px);
  --ease: cubic-bezier(.2,.75,.15,1);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  background: var(--ink);
  /* iOS webviews and Android WebView inflate text on their own unless this
     is pinned, which reflows a `clamp()`/vw type scale into a layout that
     no longer matches any of the breakpoints below. Safari proper is much
     less aggressive about it, which is why the two disagree. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  /* Two declarations on purpose: a browser too old for `clip` keeps
     `hidden`, which propagates to the viewport and so leaves `position:
     sticky` inside the body working. Without a fallback, an old webview
     gets no clipping at all and shrinks the whole page to fit the widest
     overflowing element. */
  overflow-x: hidden;
  overflow-x: clip;
  text-rendering: geometricPrecision;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
::selection { background: var(--green); color: #030303; }

/*
 * Focus is never removed, only styled, so keyboard users can always see where
 * they are. Green reads on every surface on this page except the one that is
 * itself green, which overrides it.
 */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 3px;
}
.run-section :focus-visible { outline-color: var(--ink); }

.page-progress {
  position: fixed;
  z-index: 100;
  left: 0; top: 0;
  height: 2px; width: 100%;
  background: transparent;
  pointer-events: none;
}
.page-progress span { display: block; width: 0%; height: 100%; background: var(--green); }

.site-header {
  position: fixed;
  z-index: 80;
  top: 16px;
  left: 50%;
  width: calc(100% - 32px);
  max-width: 1720px;
  transform: translateX(-50%);
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px 0 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(8,8,8,.52);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 10px 40px rgba(0,0,0,.18);
}
.wordmark { font-size: 20px; letter-spacing: -.06em; font-weight: 700; width: fit-content; }
.wordmark span { color: var(--green); }
.desktop-nav { display: flex; gap: 30px; align-items: center; }
.nav-link { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); transition: color .25s ease; }
.nav-link:hover { color: #fff; }
.header-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.sound-toggle, .menu-toggle {
  border: 0; color: inherit; background: transparent; cursor: pointer;
}
.sound-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 8px 10px; text-transform: uppercase; font-size: 10px; letter-spacing: .11em; color: rgba(255,255,255,.66); }
.sound-dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55); transition: all .25s ease; }
.sound-toggle[aria-pressed="true"] .sound-dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 12px rgba(121,255,54,.7); }
.menu-toggle { display: none; position: relative; width: 38px; height: 38px; }
.menu-toggle span { position: absolute; left: 9px; width: 20px; height: 1px; background: white; transition: transform .3s ease, top .3s ease; }
.menu-toggle span:first-child { top: 15px; }
.menu-toggle span:last-child { top: 22px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 19px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 19px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; z-index: 70; inset: 0; background: rgba(5,5,5,.97); color: var(--paper);
  opacity: 0; visibility: hidden; transition: .35s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-menu-inner { height: 100%; padding: 120px 24px 40px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.mobile-nav-link { font-size: clamp(46px, 13vw, 76px); font-weight: 500; letter-spacing: -.06em; line-height: .95; border-top: 1px solid var(--line); padding: 12px 0; }

.section-dark { background: var(--ink); color: var(--paper); }
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  padding: 110px var(--pad) 34px;
  display: flex;
  align-items: stretch;
}
.ambient-grid {
  position: absolute; inset: 0; opacity: .11;
  background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 7vw 7vw;
  mask-image: linear-gradient(to right, #000 0%, transparent 72%);
  -webkit-mask-image: linear-gradient(to right, #000 0%, transparent 72%);
}
.hero-glow {
  position: absolute; width: 68vw; height: 68vw; right: -18vw; top: -10vw;
  background: radial-gradient(circle, rgba(121,255,54,.16), rgba(121,255,54,.06) 32%, transparent 68%);
  filter: blur(22px); opacity: .9; will-change: transform;
}
.hero-copy { position: relative; z-index: 5; width: 64%; min-height: calc(100svh - 144px); display: flex; flex-direction: column; }
.eyebrow-row { display: flex; justify-content: space-between; width: min(850px, 100%); color: var(--muted); font-size: 10px; letter-spacing: .18em; }
.hero-title {
  margin: auto 0 0;
  font-size: clamp(72px, 8.35vw, 162px);
  line-height: .78;
  font-weight: 520;
  letter-spacing: -.085em;
  text-transform: uppercase;
  position: relative; z-index: 5;
}
.hero-title span { display: block; white-space: nowrap; }
.hero-title .accent-word { color: var(--green); }
.hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: 900px; margin-top: 38px; }
.hero-description { margin: 0; color: rgba(255,255,255,.72); max-width: 520px; font-size: clamp(14px, 1.1vw, 18px); line-height: 1.45; letter-spacing: -.02em; }
.hero-description span { color: #fff; }
.hero-actions { display: flex; gap: 8px; flex-shrink: 0; }
.hero-micro { color: rgba(255,255,255,.38); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin: 24px 0 0; }

.hero-character-wrap {
  position: absolute; z-index: 4; right: clamp(-110px, -4vw, -35px); bottom: -2px;
  height: min(92svh, 1120px); width: min(54vw, 940px);
  display: flex; align-items: flex-end; justify-content: flex-end;
  pointer-events: none;
  will-change: transform;
}
.hero-character { height: 100%; width: auto; max-width: none; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 0 48px rgba(77,255,25,.09)); }
.character-orbit {
  position: absolute; width: 60%; aspect-ratio: 1; right: 10%; top: 18%; border-radius: 50%;
  border: 1px solid rgba(121,255,54,.16); box-shadow: 0 0 90px rgba(121,255,54,.07) inset;
}
.character-orbit::after { content:""; position:absolute; inset: 11%; border: 1px dashed rgba(255,255,255,.08); border-radius: 50%; }
.hero-side-note { position: absolute; z-index: 6; right: 18px; top: 50%; transform: rotate(90deg) translateX(50%); transform-origin: right center; font-size: 9px; letter-spacing: .18em; color: rgba(255,255,255,.32); }

.pill {
  min-height: 42px; display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
  padding: 0 15px 0 17px; border-radius: 999px; font-size: 12px; letter-spacing: .01em;
  border: 1px solid transparent; transition: transform .24s var(--ease), background .24s ease, color .24s ease, border-color .24s ease;
  position: relative; overflow: hidden;
}
.pill i { font-style: normal; font-size: 14px; transition: transform .24s var(--ease); }
.pill:hover { transform: translateY(-2px); }
.pill:hover i { transform: translate(2px,-2px); }
.pill-light { background: var(--paper); color: var(--ink); }
.pill-light:hover { background: var(--green); }
.pill-ghost { border-color: rgba(255,255,255,.22); color: #fff; background: rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.pill-ghost:hover { border-color: rgba(121,255,54,.55); background: rgba(121,255,54,.08); }
.pill-dark { background: var(--ink); color: var(--paper); }
.pill-dark:hover { background: #121212; }
.pill-outline-dark { border-color: rgba(5,5,5,.25); color: var(--ink); }
.pill-outline-dark:hover { border-color: var(--ink); }

.glass-pixel { position: absolute; display:block; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.018)); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 28px 70px rgba(0,0,0,.35); }
.hero-pixels .p1 { width: 46px; height: 128px; left: 6%; top: 17%; transform: rotate(17deg); }
.hero-pixels .p2 { width: 74px; height: 56px; left: 26%; top: 23%; transform: rotate(-12deg); }
.hero-pixels .p3 { width: 28px; height: 84px; left: 43%; top: 10%; transform: rotate(35deg); }
.hero-pixels .p4 { width: 90px; height: 35px; left: 18%; bottom: 20%; transform: rotate(-20deg); }

.section-kicker {
  width: var(--page); margin: 0 auto; padding-top: clamp(30px, 4vw, 64px);
  display: flex; justify-content: space-between; border-top: 1px solid var(--line-dark);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: rgba(5,5,5,.48);
}
.section-kicker.light { border-top-color: var(--line); color: rgba(255,255,255,.42); }
.statement-section, .context-section, .setup-section { background: var(--paper); min-height: 100vh; padding: 0 var(--pad) clamp(80px, 10vw, 170px); }
.statement-wrap { width: var(--page); margin: 0 auto; padding-top: clamp(90px, 10vw, 170px); }
.display-statement {
  margin: 0; font-size: clamp(64px, 10vw, 194px); line-height: .82; letter-spacing: -.085em; font-weight: 500; text-transform: uppercase;
}
.display-statement.light { color: var(--paper); }
.statement-copy { width: min(500px, 44vw); margin: 54px 0 0 auto; font-size: clamp(18px, 1.55vw, 26px); line-height: 1.25; letter-spacing: -.04em; }

.identity-stage { width: var(--page); margin: clamp(100px, 14vw, 220px) auto 0; min-height: 650px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 7vw; align-items: center; }
.identity-copy-small { align-self: end; padding-bottom: 30px; border-bottom: 1px solid var(--line-dark); }
.identity-copy-small span { font-size: 9px; letter-spacing: .16em; }
.identity-copy-small p { margin: 14px 0 0; max-width: 360px; font-size: 14px; line-height: 1.45; color: rgba(5,5,5,.55); }
.identity-stack { position: relative; min-height: 650px; perspective: 1100px; }
.layer-card {
  position: absolute; left: 50%; top: 50%; width: min(520px, 85%); height: 180px;
  border: 1px solid rgba(5,5,5,.11); background: rgba(255,255,255,.3); backdrop-filter: blur(18px); box-shadow: 0 38px 80px rgba(20,20,20,.12), inset 0 1px rgba(255,255,255,.65);
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px;
  transform-style: preserve-3d;
}
.layer-card span { font-size: clamp(35px, 5vw, 70px); line-height: 1; letter-spacing: -.07em; }
.layer-card small { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(5,5,5,.48); }
.layer-1 { transform: translate(-67%,-122%) rotate(-4deg) rotateX(55deg); z-index: 1; }
.layer-2 { transform: translate(-54%,-80%) rotate(2deg) rotateX(48deg); z-index: 2; }
.layer-3 { transform: translate(-42%,-35%) rotate(-1deg) rotateX(38deg); z-index: 3; }
.layer-4 { transform: translate(-30%,14%) rotate(3deg) rotateX(28deg); z-index: 4; background: rgba(5,5,5,.91); color: var(--paper); border-color: rgba(255,255,255,.14); }
.layer-4 small { color: rgba(255,255,255,.48); }

.radar-section { padding: 0 var(--pad) clamp(100px, 10vw, 180px); min-height: 125vh; }
.radar-heading-wrap { width: var(--page); margin: 0 auto; padding-top: clamp(90px, 10vw, 170px); display: grid; grid-template-columns: 1.4fr .6fr; align-items: end; gap: 40px; }
.radar-copy { margin: 0 0 10px; font-size: clamp(17px,1.45vw,24px); color: rgba(255,255,255,.62); line-height: 1.3; max-width: 420px; }
.radar-stage { width: var(--page); margin: clamp(80px,10vw,150px) auto 0; height: 560px; position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.radar-lines { position:absolute; inset: 0; width: 100%; height:100%; overflow: visible; }
.radar-lines path { fill:none; stroke: rgba(255,255,255,.18); stroke-width:1.2; stroke-dasharray: 7 9; animation: dash 8s linear infinite; }
.radar-lines path.out { stroke: rgba(121,255,54,.42); stroke-dasharray: 2 7; }
@keyframes dash { to { stroke-dashoffset: -64; } }
.radar-source { position:absolute; left: 1%; width: 220px; display:grid; grid-template-columns: 8px 1fr; column-gap: 12px; align-items:center; }
.radar-source i { width:8px; height:8px; border-radius:50%; background: rgba(255,255,255,.5); }
.radar-source span { font-size: 12px; letter-spacing:.09em; }
.radar-source small { grid-column: 2; color: rgba(255,255,255,.36); margin-top:5px; font-size: 10px; }
.source-1 { top: 76px; } .source-2 { top: 192px; } .source-3 { top: 308px; } .source-4 { top: 424px; }
.event-core { position:absolute; left: 51%; top:50%; transform:translate(-50%,-50%); width: 180px; height:180px; border-radius:50%; border:1px solid rgba(121,255,54,.45); box-shadow: inset 0 0 75px rgba(121,255,54,.1), 0 0 100px rgba(121,255,54,.06); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.event-core span { font-size:9px; letter-spacing:.18em; color:rgba(255,255,255,.45); }
.event-core strong { font-size:32px; letter-spacing:-.06em; font-weight:500; color:var(--green); }
.event-core small { margin-top:4px; color:rgba(255,255,255,.35); font-size:10px; }
.event-output { position:absolute; right:1%; top:50%; transform:translateY(-50%); display:flex; gap:14px; align-items:center; font-size:11px; letter-spacing:.12em; }
.event-output strong { color: var(--green); font-size: 28px; font-weight:300; }

.context-section { padding-bottom: clamp(100px,12vw,200px); }
.context-grid { width: var(--page); margin: 0 auto; padding-top: clamp(90px,10vw,170px); display:grid; grid-template-columns: .9fr 1.1fr; gap: 9vw; }
.sticky-copy { position: sticky; top: 120px; align-self: start; }
.context-copy p { max-width: 460px; font-size: clamp(16px,1.3vw,22px); line-height:1.35; color:rgba(5,5,5,.55); margin-top:40px; }
.thread-demo { padding-top: 80px; position:relative; }
.thread-demo::before { content:""; position:absolute; left:40px; top:130px; bottom:260px; width:1px; background: linear-gradient(var(--green), rgba(5,5,5,.12)); }
.thread-post, .memory-slip, .context-result { position:relative; padding:20px 20px 22px; border:1px solid var(--line-dark); background:rgba(255,255,255,.43); backdrop-filter: blur(10px); margin-bottom:18px; }
.thread-post > div { display:flex; align-items:center; gap:10px; }
.avatar-chip { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#131313; color:white; font-size:10px; }
.avatar-chip.green { background:var(--green); color:#030303; }
.thread-post strong { font-size:12px; }
.thread-post small { margin-left:auto; font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:rgba(5,5,5,.42); }
.thread-post p { margin:22px 0 28px; font-size:clamp(19px,1.8vw,28px); line-height:1.15; letter-spacing:-.04em; max-width:540px; }
.status-chip { font-size:9px; letter-spacing:.13em; color:rgba(5,5,5,.44); }
.post-parent { margin-left: 8%; } .post-incoming { margin-left: 16%; }
.thread-post.active { border-color: rgba(121,255,54,.65); box-shadow: inset 3px 0 var(--green); }
.memory-slip { margin: 62px 0 18px 10%; background: rgba(121,255,54,.12); border-color:rgba(65,170,20,.2); }
.memory-slip span, .context-result span { font-size:9px; letter-spacing:.14em; }
.memory-slip p { margin:12px 0 0; max-width:520px; font-size:14px; line-height:1.35; }
.context-result { margin-left: 10%; background:#050505; color:var(--paper); }
.context-result { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.context-result span { color:rgba(255,255,255,.45); }
.context-result strong { font-size:13px; font-weight:500; color:var(--green); }

.browser-section { padding: 0 var(--pad) clamp(100px,10vw,180px); }
.browser-heading { width:var(--page); margin:0 auto; padding-top:clamp(90px,10vw,170px); display:grid; grid-template-columns:1.4fr .6fr; align-items:end; gap:40px; }
.browser-heading p { font-size:clamp(17px,1.45vw,24px); line-height:1.3; color:rgba(255,255,255,.58); margin:0 0 10px; max-width:420px; }
.browser-shell { width:min(1380px, calc(100vw - 48px)); margin:clamp(80px,10vw,150px) auto 0; min-height:700px; border:1px solid rgba(255,255,255,.16); border-radius:34px; background:rgba(255,255,255,.035); box-shadow: 0 60px 130px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.07); overflow:hidden; }
.browser-topbar { height:66px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 20px; border-bottom:1px solid var(--line); }
.browser-dots { display:flex; gap:7px; } .browser-dots i { width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25); }
.address-pill { justify-self:center; min-width:260px; text-align:center; background:rgba(255,255,255,.055); border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:10px; color:rgba(255,255,255,.5); }
.browser-status { justify-self:end; display:flex; gap:8px; align-items:center; font-size:9px; letter-spacing:.13em; color:rgba(255,255,255,.45); }
.browser-status i { width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 12px rgba(121,255,54,.7); }
.browser-body { min-height:634px; display:grid; grid-template-columns:180px 1fr; }
.browser-rail { border-right:1px solid var(--line); padding:24px 18px; display:flex; flex-direction:column; gap:8px; }
.browser-rail span { font-size:9px; letter-spacing:.11em; color:rgba(255,255,255,.36); padding:10px 12px; border-radius:999px; }
.browser-rail .rail-active { color:var(--paper); background:rgba(255,255,255,.07); }
.browser-canvas { position:relative; overflow:hidden; }
.browser-watermark { position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); font-size:clamp(110px,15vw,250px); font-weight:600; letter-spacing:-.08em; color:rgba(255,255,255,.025); }
.browser-card { position:absolute; width:260px; min-height:140px; padding:18px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.05); backdrop-filter: blur(20px); box-shadow:0 30px 70px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08); display:flex; flex-direction:column; }
.browser-card span { font-size:9px; letter-spacing:.13em; color:rgba(255,255,255,.42); }
.browser-card strong { margin:auto 0 4px; font-weight:500; font-size:25px; letter-spacing:-.05em; }
.browser-card small { font-size:10px; color:rgba(255,255,255,.38); }
.browser-card.one { left:10%; top:17%; transform:rotate(-3deg); }
.browser-card.two { left:40%; top:42%; transform:rotate(2deg); }
.browser-card.three { right:8%; top:19%; transform:rotate(4deg); border-color:rgba(121,255,54,.28); }
.browser-card.three strong { color:var(--green); }

.setup-section { padding-bottom:clamp(100px,10vw,170px); }
.setup-heading { width:var(--page); margin:0 auto; padding-top:clamp(90px,10vw,170px); display:grid; grid-template-columns:1.3fr .7fr; gap:50px; align-items:end; }
.setup-heading p { max-width:450px; margin:0 0 10px; font-size:clamp(16px,1.35vw,22px); color:rgba(5,5,5,.55); line-height:1.35; }
.setup-steps { width:var(--page); margin:clamp(90px,10vw,150px) auto 0; border-top:1px solid var(--line-dark); }
.setup-step { display:grid; grid-template-columns:80px 1fr auto; align-items:center; min-height:118px; border-bottom:1px solid var(--line-dark); transition:padding .35s var(--ease), background .35s ease; cursor:default; }
.setup-step:hover { padding:0 22px; background:rgba(121,255,54,.08); }
.setup-step > span { font-size:10px; letter-spacing:.14em; color:rgba(5,5,5,.38); }
.setup-step strong { font-size:clamp(30px,4vw,60px); letter-spacing:-.06em; font-weight:500; }
.setup-step small { font-size:11px; color:rgba(5,5,5,.48); }

.open-section { position:relative; padding:0 var(--pad) clamp(110px,12vw,210px); overflow:hidden; }
.open-noise { position:absolute; inset:0; opacity:.025; 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='.9'/%3E%3C/svg%3E"); pointer-events:none; }
.open-grid { position:relative; width:var(--page); margin:0 auto; padding-top:clamp(100px,11vw,190px); display:grid; grid-template-columns:1.4fr .6fr; gap:6vw; align-items:end; }
.green-text { color:var(--green); }
.open-copy p { margin:0 0 38px; font-size:clamp(17px,1.45vw,24px); line-height:1.35; color:rgba(255,255,255,.58); }
.install-line { border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.045); min-height:58px; padding:0 14px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; border-radius:12px; cursor:pointer; transition:border-color .25s ease, background .25s ease; }
.install-line:hover { border-color:rgba(121,255,54,.5); background:rgba(121,255,54,.06); }
.install-line > span { color:var(--green); }
.install-line code { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:rgba(255,255,255,.7); font-size:11px; }
.install-line button { background:transparent; border:0; color:rgba(255,255,255,.42); font-size:9px; letter-spacing:.14em; cursor:pointer; }
.open-meta { margin-top:18px; display:flex; flex-wrap:wrap; gap:8px; }
.open-meta span { border:1px solid var(--line); border-radius:999px; padding:7px 10px; font-size:8px; letter-spacing:.12em; color:rgba(255,255,255,.42); }

.run-section { position:relative; min-height:110vh; background:var(--green); color:var(--ink); padding:70px var(--pad); overflow:hidden; display:flex; align-items:center; }
.run-inner { width:var(--page); margin:0 auto; position:relative; z-index:2; }
.run-kicker { display:block; font-size:10px; letter-spacing:.16em; margin-bottom:clamp(40px,7vw,100px); }
.run-title { margin:0; font-size:clamp(100px,18vw,350px); line-height:.69; letter-spacing:-.095em; font-weight:540; }
.run-title span { color:rgba(5,5,5,.46); }
.run-actions { margin-top:clamp(50px,6vw,90px); display:flex; gap:10px; }
.run-pixels .p5 { width:100px;height:220px;right:12%;top:14%;transform:rotate(18deg);border-color:rgba(5,5,5,.17);background:rgba(255,255,255,.19); }
.run-pixels .p6 { width:50px;height:90px;right:30%;bottom:12%;transform:rotate(-28deg);border-color:rgba(5,5,5,.15);background:rgba(255,255,255,.16); }
.run-pixels .p7 { width:160px;height:52px;right:4%;bottom:32%;transform:rotate(-9deg);border-color:rgba(5,5,5,.15);background:rgba(255,255,255,.15); }

.site-footer { min-height:160px; padding:34px var(--pad); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; }
.site-footer p { margin:0; justify-self:center; color:rgba(255,255,255,.38); font-size:11px; }
.site-footer > div { justify-self:end; display:flex; gap:22px; font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:rgba(255,255,255,.55); }

.sound-toast { position:fixed; z-index:200; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; background:#111; color:#fff; border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:9px 13px; font-size:10px; letter-spacing:.1em; text-transform:uppercase; transition:.25s ease; }
.sound-toast.show { transform:translate(-50%,0); opacity:1; }

[data-reveal], [data-split-reveal] { opacity:0; transform:translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
[data-reveal].revealed, [data-split-reveal].revealed { opacity:1; transform:none; }
[data-split-reveal] { transition-duration:1.05s; }

@media (max-width: 1180px) {
  .hero-copy { width:72%; }
  .hero-character-wrap { width:56vw; right:-12vw; opacity:.94; }
  .hero-title { font-size:clamp(62px,8.7vw,114px); }
  .identity-stage { grid-template-columns:1fr; }
  .identity-copy-small { width:50%; }
  .radar-heading-wrap, .browser-heading, .setup-heading, .open-grid { grid-template-columns:1fr; }
  .radar-copy, .browser-heading p, .setup-heading p, .open-copy { margin-left:auto; width:min(520px,60%); }
  .browser-body { grid-template-columns:130px 1fr; }
}

@media (max-width: 820px) {
  :root { --page: calc(100vw - 40px); --pad:20px; }
  .desktop-nav, .sound-label { display:none; }
  .menu-toggle { display:block; }
  .site-header { grid-template-columns:1fr auto; }
  .header-actions { grid-column:2; }
  .sound-toggle { padding:8px; }
  .hero { padding-top:96px; min-height:100svh; }
  .hero-copy { width:100%; min-height:calc(100svh - 130px); }
  .eyebrow-row { width:100%; }
  .hero-title { margin-top:20vh; font-size:clamp(54px,15vw,112px); line-height:.8; max-width:92%; }
  .hero-title span { white-space:normal; }
  .hero-character-wrap { height:58svh; width:74vw; right:-27vw; opacity:.56; }
  .hero-glow { width:100vw;height:100vw;right:-40vw;top:20vh; }
  .hero-bottom { flex-direction:column; align-items:flex-start; max-width:72%; margin-top:auto; }
  .hero-actions { flex-wrap:wrap; }
  .hero-micro { max-width:65%; }
  .hero-side-note { display:none; }
  .hero-pixels .p2, .hero-pixels .p4 { display:none; }

  .display-statement { font-size:clamp(52px,15vw,110px); line-height:.83; }
  .statement-copy { width:75%; margin-top:36px; }
  .identity-stage { margin-top:90px; min-height:auto; }
  .identity-copy-small { width:78%; }
  .identity-stack { min-height:520px; }
  .layer-card { height:148px; }

  .radar-stage { height:620px; }
  .radar-lines { display:none; }
  .radar-source { left:0; width:48%; }
  .source-1 { top:50px; }.source-2{top:135px}.source-3{top:220px}.source-4{top:305px}
  .event-core { left:auto; right:0; top:175px; transform:none; width:145px;height:145px; }
  .event-output { left:0; right:auto; top:auto; bottom:60px; transform:none; border-top:1px solid var(--line); width:100%; padding-top:22px; justify-content:center; }

  .context-grid { grid-template-columns:1fr; }
  .sticky-copy { position:relative; top:auto; }
  .thread-demo { padding-top:50px; }
  .thread-demo::before { left:20px; }
  .post-parent { margin-left:5%; }.post-incoming{margin-left:10%;}
  .memory-slip, .context-result { margin-left:5%; }
  .context-result { flex-direction:column; align-items:flex-start; }

  .browser-shell { min-height:580px; border-radius:22px; }
  .browser-topbar { grid-template-columns:auto 1fr; gap:12px; }
  .address-pill { min-width:0; width:100%; }
  .browser-status { display:none; }
  .browser-body { grid-template-columns:1fr; min-height:514px; }
  .browser-rail { border-right:0; border-bottom:1px solid var(--line); flex-direction:row; overflow:auto; padding:12px; }
  .browser-canvas { min-height:455px; }
  .browser-card { width:220px; min-height:120px; }
  .browser-card.one { left:6%;top:12%; }.browser-card.two{left:24%;top:42%;}.browser-card.three{right:4%;top:18%;}

  .setup-heading p, .radar-copy, .browser-heading p, .open-copy { width:78%; margin-left:0; }
  .setup-step { grid-template-columns:44px 1fr; min-height:100px; }
  .setup-step small { grid-column:2; padding-bottom:18px; }
  .setup-step strong { padding-top:18px; }

  .run-section { min-height:90svh; }
  .run-title { font-size:clamp(94px,26vw,230px); }
  .run-actions { flex-wrap:wrap; }
  .run-pixels .p5 { right:-6%; }
  .site-footer { grid-template-columns:1fr auto; gap:30px; }
  .site-footer p { display:none; }
}

@media (max-width: 520px) {
  .site-header { top:10px; width:calc(100% - 20px); height:52px; }
  .hero { padding-top:76px; padding-bottom:22px; }
  .hero-title { margin-top:20svh; font-size:clamp(50px,15.3vw,76px); }
  .hero-character-wrap { height:53svh; width:88vw; right:-43vw; bottom:0; opacity:.48; }
  .hero-bottom { max-width:88%; }
  .hero-description { font-size:14px; }
  .hero-micro { max-width:90%; font-size:8px; }
  .hero-actions .pill { min-height:39px; gap:18px; font-size:11px; }
  .eyebrow-row { font-size:8px; }
  .eyebrow-index { display:none; }
  .section-kicker { padding-top:25px; font-size:8px; }
  .statement-section, .context-section, .setup-section, .radar-section, .browser-section, .open-section { padding-bottom:88px; }
  .display-statement { font-size:clamp(46px,14.3vw,72px); }
  .statement-copy { width:90%; font-size:17px; }
  .identity-copy-small { width:100%; }
  .identity-stack { min-height:430px; transform:scale(.94); transform-origin:center; }
  .layer-card { width:90%; height:130px; padding:16px; }
  .layer-card span { font-size:33px; }
  .radar-heading-wrap, .browser-heading, .setup-heading, .open-grid { padding-top:74px; }
  .radar-copy, .browser-heading p, .setup-heading p, .open-copy { width:100%; font-size:16px; }
  .radar-stage { height:560px; margin-top:65px; }
  .radar-source { width:54%; }.event-core{width:126px;height:126px;top:155px}.event-core strong{font-size:27px}
  .thread-post { padding:16px; }
  .thread-post p { font-size:18px; }
  .memory-slip,.context-result { margin-left:0; }
  .browser-shell { width:calc(100vw - 26px); margin-top:64px; }
  .browser-dots { display:none; }
  .browser-topbar { grid-template-columns:1fr; padding:0 12px; }
  .browser-card { width:190px; }
  .browser-card.one { left:4%;}.browser-card.two{left:20%;}.browser-card.three{right:1%;}
  .setup-step { min-height:90px; }
  .setup-step strong { font-size:34px; }
  .install-line { grid-template-columns:auto 1fr; }.install-line button{display:none}
  .open-meta { gap:6px; }
  .run-section { padding-top:60px; padding-bottom:60px; }
  .run-kicker { font-size:8px; }
  .run-title { font-size:29vw; }
  .site-footer { min-height:140px; padding:25px 20px; }
  .site-footer > div { gap:12px; font-size:8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  [data-reveal], [data-split-reveal] { opacity:1 !important; transform:none !important; }
}

/* ==========================================================================\n   AI17Z v2 — editorial dark system / centered glass nav / richer motion\n   Visual ideas are original implementations inspired by interactive studio\n   patterns (spotlight, tracing beam, moving borders, scroll reveals).\n   ========================================================================== */

:root {
  --page: min(1720px, calc(100dvw - clamp(32px, 4vw, 88px)));
  --nav-w: min(980px, calc(100dvw - 190px));
  --glass-nav: rgba(12, 13, 12, .58);
  --section-1: #090a09;
  --section-2: #0c0d0c;
}

/* all wordmarks are intentionally one uniform color */
.wordmark,
.wordmark span { color: inherit !important; }

.cursor-spotlight {
  position: fixed;
  z-index: 2;
  width: min(54vw, 760px);
  aspect-ratio: 1;
  left: var(--pointer-x, 50vw);
  top: var(--pointer-y, 30vh);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(121,255,54,.065) 0, rgba(121,255,54,.022) 30%, transparent 69%);
  filter: blur(20px);
  pointer-events: none;
  opacity: .75;
  mix-blend-mode: screen;
  transition: opacity .4s ease;
}

.trace-rail {
  position: fixed;
  z-index: 60;
  left: clamp(9px, 1.1vw, 20px);
  top: 18vh;
  height: 64vh;
  width: 1px;
  background: rgba(255,255,255,.075);
  pointer-events: none;
}
.trace-rail i {
  position: absolute;
  inset: 0;
  transform-origin: top;
  transform: scaleY(var(--scroll-progress, 0));
  background: linear-gradient(to bottom, rgba(121,255,54,.05), var(--green), rgba(121,255,54,.12));
  box-shadow: 0 0 14px rgba(121,255,54,.38);
}
.trace-rail span {
  position: absolute;
  left: 50%;
  top: calc(var(--scroll-progress, 0) * 100%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--green);
  box-shadow: 0 0 18px rgba(121,255,54,.7);
}

/* centered navigation: two sides + exact-center wordmark */
.nav-stage {
  position: fixed;
  z-index: 100;
  top: clamp(10px, 1.5vw, 20px);
  left: 0;
  width: 100%;
  pointer-events: none;
}
.site-header {
  position: relative;
  top: auto;
  left: 50%;
  width: var(--nav-w);
  max-width: none;
  height: 58px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: var(--paper);
  background:
    radial-gradient(260px circle at var(--nav-x, 50%) 50%, rgba(255,255,255,.09), transparent 68%),
    var(--glass-nav);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 16px 50px rgba(0,0,0,.32);
  pointer-events: auto;
  overflow: hidden;
}
.site-header::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.055) 45%, transparent 70%);
  transform: translateX(-120%);
  animation: navSheen 8s ease-in-out 1.2s infinite;
  pointer-events:none;
}
@keyframes navSheen { 0%,72%,100%{transform:translateX(-120%)} 82%{transform:translateX(120%)} }

.nav-side { display:flex; align-items:center; gap:4px; min-width:0; }
.nav-left { justify-content:flex-start; }
.nav-right { justify-content:flex-end; }
.nav-wordmark {
  position: relative;
  justify-self:center;
  z-index:3;
  width:auto;
  padding:7px 14px;
  font-size:20px;
  font-weight:650;
  letter-spacing:-.065em;
  color:#fff !important;
}
.nav-link {
  position:relative;
  z-index:2;
  padding:10px 12px;
  border-radius:999px;
  color:rgba(255,255,255,.62);
  font-size:10px;
  line-height:1;
  letter-spacing:.105em;
  text-transform:uppercase;
  transition: color .22s ease, background .22s ease, transform .22s var(--ease);
}
.nav-link::after {
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:4px;
  height:1px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav-link:hover { color:#fff; background:rgba(255,255,255,.055); transform:translateY(-1px); }
.nav-link:hover::after { transform:scaleX(1); }
.nav-download {
  color:#0a0a0a;
  background:rgba(242,242,236,.94);
  padding-left:15px;
  padding-right:15px;
}
.nav-download:hover { color:#030303; background:var(--green); }
.nav-download::after { display:none; }

/* sound lives outside the nav, on by default */
.sound-toggle {
  position:absolute;
  pointer-events:auto;
  right:clamp(12px, 1.5vw, 24px);
  top:2px;
  height:54px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  color:rgba(255,255,255,.72);
  background:rgba(10,10,10,.5);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px rgba(255,255,255,.08), 0 10px 36px rgba(0,0,0,.25);
  cursor:pointer;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.13em;
  transition:background .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.sound-toggle:hover { background:rgba(20,20,20,.7); border-color:rgba(121,255,54,.34); transform:translateY(-1px); }
.sound-bars { height:13px; display:flex; gap:2px; align-items:center; }
.sound-bars i { width:2px; height:4px; border-radius:2px; background:var(--green); transform-origin:center; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(1) { animation:eq 1s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(2) { animation:eq .72s .12s ease-in-out infinite alternate-reverse; }
.sound-toggle[aria-pressed="true"] .sound-bars i:nth-child(3) { animation:eq .88s .2s ease-in-out infinite alternate; }
.sound-toggle[aria-pressed="false"] .sound-bars i { animation:none; height:3px; background:rgba(255,255,255,.34); }
@keyframes eq { from{height:3px} to{height:13px} }

.menu-toggle { display:none; position:relative; z-index:5; width:38px; height:38px; border:0; color:inherit; background:transparent; cursor:pointer; }
.menu-toggle span { position:absolute; left:9px; width:20px; height:1px; background:white; transition:transform .3s ease, top .3s ease; }
.menu-toggle span:first-child{top:15px}.menu-toggle span:last-child{top:22px}
.menu-toggle[aria-expanded="true"] span:first-child{top:19px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{top:19px;transform:rotate(-45deg)}

.mobile-menu-meta { display:none; }

/* hero */
.hero {
  min-height: max(760px, 100svh);
  padding: clamp(112px, 10vh, 142px) var(--pad) clamp(30px,4vh,52px);
  isolation:isolate;
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:28vh;
  background:linear-gradient(to bottom, transparent, rgba(5,5,5,.93));
  pointer-events:none;
  z-index:3;
}
.ambient-grid {
  opacity:.08;
  background-size:clamp(58px, 6.5vw, 128px) clamp(58px, 6.5vw, 128px);
  mask-image:radial-gradient(ellipse at 28% 44%, #000, transparent 74%);
  -webkit-mask-image:radial-gradient(ellipse at 28% 44%, #000, transparent 74%);
  animation:gridDrift 18s linear infinite;
}
@keyframes gridDrift { to{background-position:64px 64px} }
.hero-spotlights { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-spotlights i { position:absolute; width:70vw; height:125vh; top:-70vh; border-radius:50%; filter:blur(5px); transform-origin:top center; opacity:.9; }
.hero-spotlights i:nth-child(1){left:-22vw;background:radial-gradient(ellipse,rgba(255,255,255,.055),transparent 65%);transform:rotate(23deg);animation:spotA 10s ease-in-out infinite alternate}
.hero-spotlights i:nth-child(2){left:20vw;background:radial-gradient(ellipse,rgba(121,255,54,.07),transparent 67%);transform:rotate(-8deg);animation:spotB 12s ease-in-out infinite alternate}
.hero-spotlights i:nth-child(3){right:-35vw;background:radial-gradient(ellipse,rgba(255,255,255,.035),transparent 65%);transform:rotate(-28deg);animation:spotC 14s ease-in-out infinite alternate}
@keyframes spotA{to{transform:translateX(7vw) rotate(18deg)}}
@keyframes spotB{to{transform:translateX(-4vw) rotate(-3deg)}}
@keyframes spotC{to{transform:translateX(-7vw) rotate(-20deg)}}
.hero-glow { width:min(74vw,1300px); height:min(74vw,1300px); right:-20vw; top:-10vw; opacity:.8; }

.hero-copy {
  z-index:7;
  width:min(66%, 1110px);
  min-height:calc(max(760px,100svh) - clamp(165px,18vh,220px));
}
.hero-principles {
  width:min(920px,100%);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  perspective:900px;
}
.principle {
  --rx:0deg; --ry:0deg;
  position:relative;
  min-height:74px;
  padding:13px 14px 12px 32px;
  display:grid;
  align-content:center;
  gap:5px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  color:#fff;
  background:
    radial-gradient(220px circle at var(--tilt-x,50%) var(--tilt-y,50%), rgba(121,255,54,.11), transparent 65%),
    rgba(255,255,255,.045);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  box-shadow:inset 0 1px rgba(255,255,255,.08);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:border-color .28s ease, background .28s ease, transform .18s ease;
}
.principle::after {
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  border:1px solid transparent;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.16),transparent 65%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  transform:translateX(-110%);
  transition:transform .55s var(--ease);
  pointer-events:none;
}
.principle:hover { border-color:rgba(121,255,54,.32); }
.principle:hover::after { transform:translateX(110%); }
.principle-dot { position:absolute; left:14px; top:17px; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 16px rgba(121,255,54,.58); }
.principle strong { font-size:10px; letter-spacing:.13em; font-weight:600; }
.principle small { color:rgba(255,255,255,.42); font-size:9px; letter-spacing:.02em; }

.hero-title-wrap { margin:auto 0 0; }
.hero-overline { margin:0 0 clamp(20px,2.6vh,34px); color:rgba(255,255,255,.42); font-size:clamp(12px,1vw,15px); letter-spacing:.02em; }
.hero-title { margin:0; font-size:clamp(68px,8.1vw,160px); line-height:.79; font-weight:520; letter-spacing:-.088em; }
.hero-title span { white-space:nowrap; color:var(--paper); }
.hero-title .accent-word { color:var(--paper); }
[data-line-reveal] span {
  display:block;
  opacity:0;
  filter:blur(10px);
  clip-path:inset(0 0 100% 0);
  transform:translateY(34px);
  transition:opacity .8s var(--ease), filter .9s var(--ease), clip-path 1s var(--ease), transform 1s var(--ease);
}
[data-line-reveal].revealed span { opacity:1; filter:blur(0); clip-path:inset(0 0 0 0); transform:none; }
[data-line-reveal].revealed span:nth-child(2){transition-delay:.08s}
[data-line-reveal].revealed span:nth-child(3){transition-delay:.16s}
.hero-title span:last-child::after { content:""; display:inline-block; width:.1em; height:.1em; margin-left:.05em; border-radius:50%; background:var(--green); box-shadow:0 0 .22em rgba(121,255,54,.55); vertical-align:.18em; }
.hero-bottom { max-width:960px; margin-top:clamp(28px,4vh,48px); }
.hero-description { color:rgba(255,255,255,.61); }
.hero-description span { color:#fff; }
.hero-actions { gap:9px; }
.hero-micro { display:none; }
.pill-primary { background:var(--green); color:#050505; border-color:rgba(121,255,54,.75); box-shadow:0 10px 30px rgba(121,255,54,.08); }
.pill-primary:hover { background:#8cff50; box-shadow:0 12px 36px rgba(121,255,54,.18); }
.moving-border::before {
  content:"";
  position:absolute;
  inset:-2px;
  background:conic-gradient(from var(--border-angle,0deg),transparent 0 72%,rgba(255,255,255,.9) 82%,transparent 90%);
  animation:spinBorder 3.5s linear infinite;
  z-index:-2;
}
.moving-border::after { content:""; position:absolute; inset:1px; border-radius:inherit; background:var(--green); z-index:-1; }
@property --border-angle { syntax:"<angle>"; initial-value:0deg; inherits:false; }
@keyframes spinBorder { to{--border-angle:360deg} }

.hero-character-wrap {
  z-index:5;
  height:min(93svh,1130px);
  width:min(54vw,960px);
  right:clamp(-130px,-4.5vw,-38px);
  animation:characterEnter 1.2s .18s var(--ease) both;
}
@keyframes characterEnter { from{opacity:0;transform:translate3d(45px,28px,0) scale(.985);filter:blur(8px)} to{opacity:1;transform:none;filter:blur(0)} }
.character-halo { position:absolute; right:7%; top:20%; width:56%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(121,255,54,.12),transparent 67%); filter:blur(18px); animation:haloPulse 4s ease-in-out infinite alternate; }
@keyframes haloPulse { to{transform:scale(1.08);opacity:.72} }
.character-orbit { animation:orbitBreath 7s ease-in-out infinite alternate; }
.character-orbit::after { animation:orbitSpin 26s linear infinite; }
@keyframes orbitBreath { to{transform:scale(1.05);border-color:rgba(121,255,54,.25)} }
@keyframes orbitSpin { to{transform:rotate(360deg)} }
.hero-pixels .p1{animation:pixelFloat1 8s ease-in-out infinite alternate}.hero-pixels .p2{animation:pixelFloat2 11s ease-in-out infinite alternate}.hero-pixels .p3{animation:pixelFloat3 9s ease-in-out infinite alternate}.hero-pixels .p4{animation:pixelFloat4 12s ease-in-out infinite alternate}
@keyframes pixelFloat1{to{translate:18px -28px;rotate:7deg}}@keyframes pixelFloat2{to{translate:-18px 25px;rotate:-6deg}}@keyframes pixelFloat3{to{translate:12px 32px;rotate:9deg}}@keyframes pixelFloat4{to{translate:-22px -16px;rotate:-4deg}}
.scroll-cue { position:absolute; z-index:8; left:var(--pad); bottom:22px; display:flex; align-items:center; gap:11px; color:rgba(255,255,255,.34); font-size:8px; letter-spacing:.17em; }
.scroll-cue i { display:block; width:38px; height:1px; background:rgba(255,255,255,.14); overflow:hidden; position:relative; }
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--green);transform:translateX(-100%);animation:scrollCue 1.8s ease-in-out infinite}
@keyframes scrollCue{55%,100%{transform:translateX(100%)}}

/* darker continuous editorial sections */
.statement-section,
.context-section,
.setup-section { background:var(--section-1); color:var(--paper); }
.context-section { background:var(--section-2); }
.statement-section .section-kicker,
.context-section .section-kicker,
.setup-section .section-kicker { border-top-color:var(--line); color:rgba(255,255,255,.38); }
.statement-copy,
.context-copy p,
.setup-heading p { color:rgba(255,255,255,.55); }
.identity-copy-small { border-bottom-color:var(--line); }
.identity-copy-small p { color:rgba(255,255,255,.48); }
.layer-card {
  color:var(--paper);
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  box-shadow:0 38px 90px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.12);
}
.layer-card small { color:rgba(255,255,255,.42); }
.layer-4 { background:rgba(121,255,54,.11); border-color:rgba(121,255,54,.28); }
.layer-4 small { color:rgba(255,255,255,.46); }
.thread-demo::before { background:linear-gradient(var(--green),rgba(255,255,255,.08)); box-shadow:0 0 14px rgba(121,255,54,.14); }
.thread-post,
.memory-slip,
.context-result {
  border-color:rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  color:var(--paper);
  box-shadow:0 22px 60px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.06);
}
.thread-post small,
.status-chip { color:rgba(255,255,255,.39); }
.memory-slip { background:rgba(121,255,54,.07); border-color:rgba(121,255,54,.23); }
.context-result { background:rgba(3,3,3,.7); }
.setup-steps { border-top-color:var(--line); }
.setup-step { border-bottom-color:var(--line); }
.setup-step > span,
.setup-step small { color:rgba(255,255,255,.39); }
.setup-step:hover { background:rgba(121,255,54,.055); }

/* richer but restrained motion through the narrative */
[data-reveal], [data-split-reveal] { will-change:transform,opacity,filter; }
[data-reveal] { filter:blur(7px); transform:translateY(32px); transition:opacity .8s var(--ease),transform .95s var(--ease),filter .8s var(--ease); }
[data-reveal].revealed { filter:blur(0); }
[data-split-reveal] { clip-path:inset(0 0 100% 0); filter:blur(8px); transform:translateY(36px); transition:opacity .9s var(--ease),transform 1.05s var(--ease),filter .9s var(--ease),clip-path 1.05s var(--ease); }
[data-split-reveal].revealed { clip-path:inset(0 0 0 0); filter:blur(0); }

.identity-stack.in-view .layer-1{animation:layerIn1 .9s var(--ease) both}.identity-stack.in-view .layer-2{animation:layerIn2 .95s .08s var(--ease) both}.identity-stack.in-view .layer-3{animation:layerIn3 1s .16s var(--ease) both}.identity-stack.in-view .layer-4{animation:layerIn4 1.05s .24s var(--ease) both}
@keyframes layerIn1{from{opacity:0;transform:translate(-80%,-115%) rotate(-9deg) rotateX(72deg)}}
@keyframes layerIn2{from{opacity:0;transform:translate(-70%,-70%) rotate(7deg) rotateX(65deg)}}
@keyframes layerIn3{from{opacity:0;transform:translate(-54%,-20%) rotate(-6deg) rotateX(58deg)}}
@keyframes layerIn4{from{opacity:0;transform:translate(-42%,30%) rotate(8deg) rotateX(50deg)}}

.radar-lines path { stroke-dasharray:7 9; stroke-dashoffset:300; opacity:.18; }
.radar-stage.revealed .radar-lines path { animation:radarDraw 2.2s var(--ease) forwards, dash 8s 2.2s linear infinite; }
.radar-stage.revealed .radar-lines path:nth-child(2){animation-delay:.12s,2.32s}.radar-stage.revealed .radar-lines path:nth-child(3){animation-delay:.24s,2.44s}.radar-stage.revealed .radar-lines path:nth-child(4){animation-delay:.36s,2.56s}.radar-stage.revealed .radar-lines path:nth-child(5){animation-delay:.5s,2.7s}
@keyframes radarDraw{to{stroke-dashoffset:0;opacity:1}}
.event-core::after { content:"";position:absolute;inset:-14px;border:1px solid rgba(121,255,54,.14);border-radius:50%;animation:eventPulse 2.8s ease-out infinite; }
@keyframes eventPulse{0%{transform:scale(.86);opacity:0}35%{opacity:1}100%{transform:scale(1.35);opacity:0}}
.radar-source i { animation:sourceBlink 2.6s ease-in-out infinite; }
.source-2 i{animation-delay:.45s}.source-3 i{animation-delay:.9s}.source-4 i{animation-delay:1.35s}
@keyframes sourceBlink{50%{background:var(--green);box-shadow:0 0 12px rgba(121,255,54,.7)}}

.thread-post { transition:transform .38s var(--ease),border-color .3s ease,background .3s ease; transform-origin:50% 100%; }
.thread-post:hover { transform:translate3d(-4px,-4px,0) rotateX(1.5deg); border-color:rgba(121,255,54,.3); background:rgba(255,255,255,.08); }
.thread-post.active { border-color:rgba(121,255,54,.46); box-shadow:inset 3px 0 var(--green),0 25px 70px rgba(0,0,0,.16); }

.browser-shell { position:relative; }
.browser-shell::after { content:""; position:absolute; inset:-40% -20%; background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.06) 49%,transparent 60%); transform:translateX(-70%) rotate(8deg); animation:browserGlare 9s ease-in-out infinite; pointer-events:none; }
@keyframes browserGlare{0%,58%,100%{transform:translateX(-75%) rotate(8deg)}75%{transform:translateX(75%) rotate(8deg)}}
.browser-card { transition:transform .45s var(--ease),border-color .3s ease,background .3s ease; }
.browser-card.one{animation:cardFloatA 5.5s ease-in-out infinite alternate}.browser-card.two{animation:cardFloatB 6.8s ease-in-out infinite alternate}.browser-card.three{animation:cardFloatC 5.9s ease-in-out infinite alternate}
@keyframes cardFloatA{to{transform:translateY(-12px) rotate(-2deg)}}@keyframes cardFloatB{to{transform:translateY(10px) rotate(1deg)}}@keyframes cardFloatC{to{transform:translateY(-9px) rotate(3deg)}}
.browser-rail .rail-active { position:relative; }
.browser-rail .rail-active::after { content:"";position:absolute;right:10px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--green);transform:translateY(-50%);box-shadow:0 0 10px rgba(121,255,54,.65);animation:railPulse 1.7s ease-in-out infinite }
@keyframes railPulse{50%{opacity:.35}}

.setup-step { position:relative; overflow:hidden; }
.setup-step::before { content:"";position:absolute;left:0;bottom:-1px;width:0;height:1px;background:var(--green);box-shadow:0 0 12px rgba(121,255,54,.35);transition:width .55s var(--ease); }
.setup-step:hover::before { width:100%; }

.install-line { position:relative; overflow:hidden; }
.install-line::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(121,255,54,.09),transparent 65%);transform:translateX(-100%);transition:transform .6s var(--ease);pointer-events:none}
.install-line:hover::after{transform:translateX(100%)}

.run-title { transform-origin:left center; }
.run-section.in-view .run-title { animation:runTitleBreath 1.15s var(--ease) both; }
@keyframes runTitleBreath{from{opacity:.45;transform:scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}

/* sound toast stays subtle */
.sound-toast { background:rgba(14,14,14,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }

/* responsive system: preserve composition rather than simply shrinking it */
@media (min-width: 1700px) {
  .hero-copy { width:min(63%,1120px); }
  .hero-character-wrap { right:max(-70px,-3vw); }
  .hero-principles { width:940px; }
}

@media (max-width: 1260px) {
  :root { --nav-w:min(840px,calc(100dvw - 230px)); }
  .nav-link { padding:10px 9px; font-size:9px; }
  .hero-copy { width:72%; }
  .hero-character-wrap { width:59vw; right:-13vw; }
  .hero-principles { width:min(760px,100%); }
  .principle small { display:none; }
  .principle { min-height:56px; }
}

@media (max-width: 1040px) {
  :root { --page:calc(100dvw - 40px); --pad:20px; --nav-w:214px; }
  .cursor-spotlight,.trace-rail { display:none; }
  .nav-stage { top:10px; }
  .site-header { height:54px; grid-template-columns:42px 1fr 42px; padding:0 7px; overflow:visible; }
  .nav-side { display:none; }
  .nav-wordmark { grid-column:2; font-size:19px; }
  .menu-toggle { display:block; grid-column:1; grid-row:1; }
  .sound-toggle { top:0; right:10px; height:54px; width:54px; padding:0; justify-content:center; }
  .sound-label { display:none; }
  .sound-bars { height:14px; }
  .mobile-menu-meta { display:flex;position:absolute;left:20px;right:20px;top:24px;justify-content:space-between;color:rgba(255,255,255,.48);font-size:10px;text-transform:uppercase;letter-spacing:.12em; }
  .mobile-menu-inner { padding-top:110px; }

  .hero { min-height:max(760px,100svh); padding-top:88px; }
  .hero-copy { width:100%; min-height:calc(max(760px,100svh) - 120px); }
  .hero-principles { width:100%; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; position:relative; z-index:10; }
  .principle { min-height:48px; border-radius:12px; padding:10px 8px 10px 22px; }
  .principle-dot { left:9px; top:13px; width:5px; height:5px; }
  .principle strong { font-size:7.5px; letter-spacing:.09em; white-space:nowrap; }
  .hero-title-wrap { margin-top:clamp(18vh,22vh,26vh); margin-bottom:auto; }
  .hero-overline { font-size:11px; max-width:58%; }
  .hero-title { font-size:clamp(54px,14.7vw,112px); max-width:96%; }
  .hero-title span { white-space:normal; }
  .hero-character-wrap { height:61svh; width:80vw; right:-29vw; bottom:0; opacity:.58; }
  .hero-character { filter:drop-shadow(0 0 38px rgba(77,255,25,.08)); }
  .character-orbit,.character-halo { opacity:.5; }
  .hero-bottom { position:relative; z-index:10; flex-direction:column; align-items:flex-start; gap:20px; max-width:72%; margin-top:24px; }
  .hero-actions { flex-wrap:wrap; }
  .scroll-cue { display:none; }

  .statement-section,.context-section,.setup-section { min-height:auto; }
  .identity-stage { grid-template-columns:1fr; }
  /* The fan is spread for desktop width. Kept at that spread it puts .layer-4
     past the right edge here, which is the page's only real horizontal
     overflow — and the thing a browser without `overflow: clip` zooms out to
     fit. Compressing the stagger keeps the 3D read and stays inside. */
  .layer-1 { transform:translate(-62%,-122%) rotate(-4deg) rotateX(55deg); }
  .layer-2 { transform:translate(-58%,-80%) rotate(2deg) rotateX(48deg); }
  .layer-3 { transform:translate(-54%,-35%) rotate(-1deg) rotateX(38deg); }
  .layer-4 { transform:translate(-50%,14%) rotate(3deg) rotateX(28deg); }
  .identity-copy-small { width:70%; }
  .radar-heading-wrap,.browser-heading,.setup-heading,.open-grid { grid-template-columns:1fr; }
  .radar-copy,.browser-heading p,.setup-heading p,.open-copy { margin-left:0; width:min(560px,78%); }
}

@media (max-width: 560px) {
  :root { --page:calc(100dvw - 28px); --pad:14px; }
  .site-header { width:194px; }
  .sound-toggle { right:10px; }
  .hero { padding:78px 14px 20px; min-height:max(700px,100svh); }
  .hero-copy { min-height:calc(max(700px,100svh) - 100px); }
  .hero-principles { gap:4px; }
  .principle { padding:9px 5px 9px 18px; border-radius:10px; }
  .principle-dot { left:7px; top:11px; width:4px; height:4px; }
  .principle strong { font-size:6.7px; letter-spacing:.06em; }
  .hero-title-wrap { margin-top:17svh; }
  .hero-overline { max-width:74%; font-size:10px; }
  .hero-title { font-size:clamp(47px,14.5vw,80px); line-height:.81; }
  .hero-character-wrap { height:54svh; width:96vw; right:-49vw; opacity:.45; }
  .hero-bottom { max-width:90%; gap:18px; }
  .hero-description { font-size:13px; max-width:315px; }
  .hero-actions .pill { min-height:39px; font-size:10px; gap:15px; }
  .hero-pixels .p2,.hero-pixels .p4 { display:none; }

  .display-statement { font-size:clamp(44px,14vw,76px); }
  .identity-copy-small { width:100%; }
  .thread-post:hover { transform:none; }
  .radar-copy,.browser-heading p,.setup-heading p,.open-copy { width:100%; }
}

@media (pointer: coarse) {
  .cursor-spotlight { display:none; }
  .principle { transform:none !important; }
  .thread-post:hover,.nav-link:hover,.sound-toggle:hover,.pill:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-spotlight,.trace-rail,.hero-spotlights { display:none !important; }
  [data-line-reveal] span { opacity:1!important;filter:none!important;clip-path:none!important;transform:none!important; }
  .site-header::before,.sound-bars i,.ambient-grid,.character-orbit,.character-orbit::after,.character-halo,.glass-pixel,.event-core::after,.radar-source i,.browser-shell::after,.browser-card,.browser-rail .rail-active::after,.scroll-cue i::after,.moving-border::before { animation:none!important; }
}

/* click-position feedback, scoped to interactive surfaces */
.pill,.nav-link,.principle,.setup-step,.sound-toggle { isolation:isolate; }
.click-ring {
  position:absolute;
  z-index:-1;
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid currentColor;
  opacity:.52;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.25);
  animation:clickRing .52s var(--ease) forwards;
}
@keyframes clickRing { to{opacity:0;transform:translate(-50%,-50%) scale(9)} }
.green-text {
  background:linear-gradient(90deg,var(--green) 0%,#d7ffc3 42%,var(--green) 72%);
  background-size:220% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:greenShimmer 5.5s ease-in-out infinite;
}
@keyframes greenShimmer { 0%,65%,100%{background-position:100% 50%}82%{background-position:0 50%} }
@media (prefers-reduced-motion: reduce){.click-ring{display:none!important}.green-text{animation:none!important;background:var(--green);-webkit-background-clip:text;background-clip:text}}

/* Floating X profile shortcut -------------------------------------------------
   Lives outside the centered nav so the primary navigation stays perfectly
   balanced. It follows the page because it is fixed, just like nav-stage. */
.x-social-float {
  position: fixed;
  z-index: 112;
  top: clamp(10px, 1.5vw, 20px);
  left: clamp(12px, 1.6vw, 24px);
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #fff;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.11), transparent 46%),
    rgba(12,13,12,.62);
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 16px 50px rgba(0,0,0,.32);
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.x-social-float::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.x-social-float svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.08));
}
.x-social-float:hover,
.x-social-float:focus-visible {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(121,255,54,.42);
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.14), transparent 46%),
    rgba(12,13,12,.78);
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 18px 52px rgba(0,0,0,.42), 0 0 22px rgba(121,255,54,.08);
}
.x-social-float:hover::after,
.x-social-float:focus-visible::after {
  border-color: rgba(121,255,54,.22);
  box-shadow: inset 0 0 20px rgba(121,255,54,.04);
}
.x-social-float[aria-disabled="true"] { opacity: .58; }

@media (max-width: 1040px) {
  .x-social-float {
    top: 10px;
    left: 10px;
    width: 54px;
    height: 54px;
  }
}
@media (max-width: 560px) {
  .x-social-float {
    width: 46px;
    height: 46px;
    top: 14px;
    left: 12px;
  }
  .x-social-float svg { width: 18px; height: 18px; }
}


/* ==========================================================================
   Reveal safety net
   Every [data-reveal] target sits at opacity 0 until app.js adds `.revealed`.
   If that script never runs — blocked, failed to load, or a parse error in a
   browser that does not accept its syntax — the page is not merely unanimated,
   it is blank. The inline script in <head> sets `.js` before first paint, so
   the hidden state only ever applies where something is able to undo it.
   ========================================================================== */
html:not(.js) [data-reveal],
html:not(.js) [data-split-reveal],
html:not(.js) [data-line-reveal] span {
  opacity: 1 !important;
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
}