.home-page { --site-accent: #0868ff; background: #efefea; }

.home-hero {
  position: relative;
  min-height: max(860px, 100svh);
  overflow: hidden;
  isolation: isolate;
  background: #efefea;
  border-bottom: 1px solid #0a0a0a;
}

.hero-copy {
  position: relative;
  z-index: 8;
  width: 55%;
  min-height: max(860px, 100svh);
  padding: 132px var(--site-pad) 202px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-code {
  position: absolute;
  top: 104px;
  left: var(--site-pad);
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 10px;
  font-weight: 700;
}

.hero-intro {
  margin: 0 0 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 13px;
  line-height: 1.35;
  filter: blur(3px);
  opacity: .72;
  animation: hero-focus 1.2s var(--site-ease) .2s forwards;
}

@keyframes hero-focus {
  to { filter: blur(1px); opacity: .84; }
}

.home-hero h1 {
  width: min(780px, 100%);
  margin: 0;
  font-family: var(--font-display);
  font-size: 94px;
  font-weight: 760;
  line-height: .91;
}
.home-hero h1 span { display: block; }
.hero-mobile-break { display: none; }

.hero-line {
  position: relative;
  width: min(590px, 100%);
  min-height: 64px;
  margin: 34px 0 0;
  font-size: 20px;
  font-weight: 520;
  line-height: 1.55;
}
.hero-line [data-typewriter].is-typing::after {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 3px;
  vertical-align: -.08em;
  background: currentColor;
  content: "";
  animation: caret-blink .85s step-end infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

.hero-links {
  margin-top: 30px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.hero-links a,
.studio-actions a,
.studio-actions button {
  min-height: 34px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .2s ease, transform .2s var(--site-ease);
}
.hero-links a:hover,
.studio-actions a:hover,
.studio-actions button:hover { opacity: .5; }

.hero-canvas {
  position: absolute;
  inset: 0 0 0 48%;
  z-index: 2;
  overflow: hidden;
  background: #d9dde2;
  border-left: 1px solid #0a0a0a;
}
.hero-axis { position: absolute; z-index: 0; background: rgba(10,10,10,.18); }
.hero-axis-x { top: 50%; right: 0; left: 0; height: 1px; }
.hero-axis-y { top: 0; bottom: 0; left: 50%; width: 1px; }

.hero-screen {
  position: absolute;
  margin: 0;
  filter: drop-shadow(0 28px 42px rgba(0,0,0,.2));
  will-change: transform;
  transition: opacity .45s var(--site-ease), filter .45s var(--site-ease), transform .55s var(--site-ease);
}
.hero-screen img { width: 100%; height: auto; }
.hero-screen-eco {
  z-index: 3;
  top: 6%;
  left: 8%;
  width: min(340px, 40%);
  transform: translate(calc(var(--pointer-x) * 24px), calc(var(--pointer-y) * 16px + var(--scroll-shift) * -22px)) rotate(-5deg);
}
.hero-screen-fuel {
  z-index: 4;
  right: 10%;
  top: 20%;
  width: min(360px, 42%);
  transform: translate(calc(var(--pointer-x) * -34px), calc(var(--pointer-y) * -18px + var(--scroll-shift) * 34px)) rotate(5deg);
}
.hero-screen-note {
  z-index: 2;
  right: -11%;
  top: -8%;
  width: min(310px, 36%);
  transform: translate(calc(var(--pointer-x) * 18px), calc(var(--pointer-y) * 28px + var(--scroll-shift) * -18px)) rotate(10deg);
}
.hero-screen-oshi {
  z-index: 5;
  right: 27%;
  bottom: -18%;
  width: min(330px, 38%);
  transform: translate(calc(var(--pointer-x) * -18px), calc(var(--pointer-y) * 24px + var(--scroll-shift) * 24px)) rotate(-1deg);
}

.hero-coordinate {
  position: absolute;
  z-index: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 10px;
  font-weight: 700;
  writing-mode: vertical-rl;
}
.coordinate-a { left: 12px; bottom: 22px; }
.coordinate-b { right: 12px; top: 88px; }

.hero-index {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #0a0a0a;
  background: rgba(239,239,234,.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.hero-index a {
  min-height: 104px;
  padding: 20px var(--site-pad);
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: end;
  border-right: 1px solid #0a0a0a;
  transition: color .25s ease, background .25s ease;
}
.hero-index a:last-child { border-right: 0; }
.hero-index a:hover { color: #f4f4ef; background: #0a0a0a; }
.hero-index a[aria-current="true"] { color: #f4f4ef; background: #0a0a0a; }
.hero-index span { grid-row: 1 / 3; align-self: center; font-family: ui-monospace, monospace; font-size: 11px; }
.hero-index strong { font-family: var(--font-display); font-size: 19px; }
.hero-index em { color: currentColor; font-size: 11px; font-style: normal; opacity: .6; }
.hero-motion-note {
  position: absolute;
  z-index: 7;
  right: var(--site-pad);
  bottom: 126px;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 9px;
  font-weight: 700;
}

.manifesto {
  position: relative;
  min-height: 96svh;
  padding: 130px var(--site-pad) 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  align-items: end;
  gap: 8%;
  color: #f3f3ee;
  background: #0a0a0a;
  overflow: hidden;
}
.manifesto-number {
  position: absolute;
  top: 92px;
  right: var(--site-pad);
  margin: 0;
  color: rgba(255,255,255,.35);
  font-family: ui-monospace, monospace;
  font-size: 11px;
}
.manifesto-copy h2 {
  max-width: 920px;
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 112px;
  font-weight: 760;
  line-height: .86;
}
.manifesto-copy > p:last-child {
  max-width: 620px;
  margin: 38px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 17px;
  line-height: 1.85;
}
.manifesto-rules { border-top: 1px solid rgba(255,255,255,.5); }
.manifesto-rules span { display: block; padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.22); font-size: 14px; }

.product-index { background: #efefea; }
.app-chapter {
  position: relative;
  min-height: 100svh;
  padding: 112px var(--site-pad) 72px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  border-bottom: 1px solid currentColor;
  isolation: isolate;
}
.chapter-meta {
  position: absolute;
  top: 28px;
  right: var(--site-pad);
  left: var(--site-pad);
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}
.chapter-copy { position: relative; z-index: 5; max-width: 650px; }
.chapter-lockup { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 760; }
.chapter-lockup img { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; }
.chapter-copy h2 {
  margin: 34px 0 0;
  font-family: var(--font-display);
  font-size: 78px;
  font-weight: 760;
  line-height: .92;
}
.chapter-copy > p { max-width: 540px; margin: 30px 0 0; color: currentColor; font-size: 16px; line-height: 1.85; opacity: .68; }
.chapter-link {
  margin-top: 34px;
  display: inline-flex;
  gap: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
  font-size: 14px;
  font-weight: 740;
}
.chapter-link:hover { opacity: .5; }
.chapter-visual { position: absolute; z-index: 2; inset: 70px 0 0 43%; pointer-events: none; }
.chapter-visual img { position: absolute; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.18)); will-change: transform; }
.chapter-keywords {
  position: absolute;
  z-index: 6;
  right: var(--site-pad);
  bottom: 24px;
  left: var(--site-pad);
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  text-transform: uppercase;
}

.chapter-eco { color: #10261f; background: #dce8e2; }
.chapter-eco .eco-primary {
  z-index: 2;
  right: 12%;
  top: 2%;
  width: min(420px, 44%);
  transform: translate(calc(var(--pointer-x) * -22px), calc(var(--pointer-y) * 18px + var(--scroll-shift) * 28px)) rotate(3deg);
}
.chapter-eco .eco-secondary {
  z-index: 1;
  left: 0;
  top: 17%;
  width: min(370px, 40%);
  opacity: .78;
  transform: translate(calc(var(--pointer-x) * 28px), calc(var(--pointer-y) * -12px + var(--scroll-shift) * -24px)) rotate(-7deg);
}

.chapter-fuel { color: #eef7fb; background: #050708; }
.chapter-fuel .chapter-copy > p { color: #b8c6ce; opacity: 1; }
.chapter-fuel .fuel-primary {
  z-index: 2;
  left: 8%;
  top: 3%;
  width: min(420px, 43%);
  transform: translate(calc(var(--pointer-x) * 26px), calc(var(--pointer-y) * 16px + var(--scroll-shift) * 28px)) rotate(-3deg);
}
.chapter-fuel .fuel-secondary {
  z-index: 1;
  right: -2%;
  top: 17%;
  width: min(380px, 39%);
  opacity: .54;
  transform: translate(calc(var(--pointer-x) * -24px), calc(var(--pointer-y) * -18px + var(--scroll-shift) * -22px)) rotate(7deg);
}

.chapter-note { color: #111; background: #f7f7f3; }
.chapter-note .chapter-visual { background: #0d1210; border-left: 1px solid #111; }
.chapter-note .note-primary {
  left: 50%;
  top: 3%;
  width: min(400px, 48%);
  transform: translateX(-50%) translate(calc(var(--pointer-x) * -20px), calc(var(--pointer-y) * 18px + var(--scroll-shift) * 30px));
}

.chapter-oshi { color: #0a0a0a; background: #d9d4f7; }
.chapter-oshi .chapter-visual { background: #efff00; border-left: 1px solid #0a0a0a; }
.chapter-oshi .oshi-primary {
  z-index: 2;
  left: 8%;
  top: 2%;
  width: min(410px, 44%);
  transform: translate(calc(var(--pointer-x) * 22px), calc(var(--pointer-y) * 16px + var(--scroll-shift) * 26px)) rotate(-3deg);
}
.chapter-oshi .oshi-secondary {
  z-index: 1;
  right: -2%;
  top: 17%;
  width: min(370px, 39%);
  opacity: .68;
  transform: translate(calc(var(--pointer-x) * -24px), calc(var(--pointer-y) * -16px + var(--scroll-shift) * -22px)) rotate(6deg);
}

.system-register {
  padding: 120px var(--site-pad) 0;
  color: #dfe7e2;
  background: #10261f;
}
.system-register-intro {
  width: min(920px, 100%);
  padding-bottom: 94px;
}
.system-register-intro .eyebrow { color: #b7d2c5; }
.system-register-intro h2 {
  margin: 22px 0 30px;
  font-family: var(--font-display);
  font-size: clamp(52px, 7vw, 100px);
  font-weight: 760;
  line-height: .88;
}
.system-register-intro > p:last-child {
  max-width: 620px;
  margin: 0;
  color: rgba(223, 231, 226, .72);
  font-size: 17px;
  line-height: 1.85;
}
.system-register-list {
  margin: 0;
  border-top: 1px solid rgba(223, 231, 226, .34);
}
.system-register-list div {
  min-height: 132px;
  padding: 28px 0;
  display: grid;
  grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  border-bottom: 1px solid rgba(223, 231, 226, .2);
}
.system-register-list dt {
  color: #f0c84b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.system-register-list dd {
  max-width: 680px;
  margin: 0;
  font-size: 20px;
  font-weight: 560;
  line-height: 1.5;
}
.system-register-foot {
  min-height: 104px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  color: #b7d2c5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 10px;
  font-weight: 700;
}
.system-register-foot a {
  display: inline-flex;
  gap: 13px;
  padding-bottom: 5px;
  border-bottom: 1px solid currentColor;
  color: #f0c84b;
  font-family: var(--font-body);
  font-size: 14px;
}

.privacy-manifesto {
  min-height: 100svh;
  padding: 122px var(--site-pad) 86px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
  gap: 7%;
  align-items: end;
  color: #0a0a0a;
  background: #ff4d32;
}
.privacy-manifesto h2 {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 780;
  line-height: .88;
}
.privacy-ledger { border-top: 1px solid #0a0a0a; }
.privacy-ledger div { display: grid; grid-template-columns: 48px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(10,10,10,.4); }
.privacy-ledger span { font-family: ui-monospace, monospace; font-size: 11px; }
.privacy-ledger strong { font-size: 15px; line-height: 1.65; }
.privacy-ledger a { margin-top: 30px; display: inline-flex; gap: 16px; border-bottom: 1px solid currentColor; font-size: 14px; font-weight: 740; }

.studio-close {
  min-height: 86svh;
  padding: 98px var(--site-pad) 74px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f3f3ee;
  background: #0868ff;
}
.studio-close-top { display: flex; justify-content: space-between; font-family: ui-monospace, monospace; font-size: 10px; }
.studio-close-main h2 {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-size: 118px;
  font-weight: 760;
  line-height: .86;
}
.studio-actions { margin-top: 48px; display: flex; gap: 28px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .home-hero h1 { font-size: 74px; }
  .hero-copy { width: 59%; }
  .hero-canvas { inset-inline-start: 53%; }
  .manifesto-copy h2 { font-size: 84px; }
  .chapter-copy h2 { font-size: 62px; }
  .privacy-manifesto h2 { font-size: 66px; }
  .studio-close-main h2 { font-size: 88px; }
}

@media (max-width: 820px) {
  .home-hero { min-height: 1000px; }
  .hero-copy { width: 100%; min-height: 720px; padding: 112px 18px 190px; justify-content: flex-end; }
  .hero-code { top: 86px; left: 18px; }
  .home-hero h1 { width: 100%; font-size: 61px; }
  .hero-line { width: 86%; font-size: 17px; }
  .hero-canvas { inset: 62px 0 auto; height: 54%; border-left: 0; border-bottom: 1px solid #0a0a0a; opacity: .66; }
  .hero-screen-eco { left: 1%; width: 36%; }
  .hero-screen-fuel { right: 20%; width: 38%; }
  .hero-screen-note { right: -7%; width: 33%; }
  .hero-screen-oshi { right: 1%; bottom: -25%; width: 36%; }
  .hero-copy { z-index: 7; }
  .hero-copy::before { position: absolute; z-index: -1; right: 0; bottom: 100px; left: 0; height: 390px; background: rgba(239,239,234,.9); content: ""; }
  .hero-index { grid-template-columns: 1fr; }
  .hero-index a { min-height: 68px; padding: 11px 18px; grid-template-columns: 34px 1fr auto; grid-template-rows: 1fr; border-right: 0; border-bottom: 1px solid #0a0a0a; }
  .hero-index a:last-child { border-bottom: 0; }
  .hero-index span { grid-row: auto; }
  .hero-index em { align-self: center; }
  .hero-motion-note { display: none; }
  .manifesto { min-height: 0; padding: 100px 18px 72px; grid-template-columns: 1fr; gap: 70px; }
  .manifesto-copy h2 { font-size: 68px; }
  .manifesto-copy > p:last-child { font-size: 16px; }
  .app-chapter { min-height: 940px; padding: 102px 18px 72px; grid-template-columns: 1fr; align-items: start; }
  .chapter-meta { top: 24px; right: 18px; left: 18px; }
  .chapter-copy { max-width: 620px; }
  .chapter-copy h2 { font-size: 57px; }
  .chapter-copy > p { max-width: 500px; }
  .chapter-visual { inset: auto 0 0 18%; height: 54%; }
  .chapter-note .chapter-visual { left: 0; height: 50%; border-top: 1px solid #111; border-left: 0; }
  .chapter-oshi .chapter-visual { left: 0; height: 50%; border-top: 1px solid #0a0a0a; border-left: 0; }
  .chapter-keywords { display: none; }
  .system-register { padding: 94px 18px 0; }
  .system-register-intro { padding-bottom: 68px; }
  .system-register-list div { grid-template-columns: 1fr; gap: 12px; }
  .system-register-list dd { font-size: 17px; }
  .system-register-foot { min-height: 120px; align-items: flex-start; justify-content: center; flex-direction: column; padding: 28px 0; }
  .privacy-manifesto { min-height: 0; padding: 100px 18px 84px; grid-template-columns: 1fr; gap: 70px; }
  .privacy-manifesto h2 { font-size: 63px; }
  .studio-close { min-height: 720px; padding: 90px 18px 64px; }
  .studio-close-main h2 { font-size: 76px; }
}

@media (max-width: 520px) {
  .home-hero { min-height: 820px; }
  .hero-copy { min-height: 620px; padding-bottom: 172px; }
  .hero-intro { font-size: 11px; }
  .home-hero h1 { font-size: 45px; line-height: .94; }
  .hero-mobile-break { display: block; }
  .hero-line { width: 100%; min-height: 84px; font-size: 16px; }
  .hero-links { gap: 16px; }
  .hero-screen-eco { top: 8%; left: -7%; width: 43%; }
  .hero-screen-fuel { top: 15%; right: 14%; width: 45%; }
  .hero-screen-note { top: 2%; right: -14%; width: 40%; border-width: 4px; border-radius: 24px; }
  .hero-screen-oshi { right: -2%; bottom: -30%; width: 43%; }
  .manifesto-copy h2 { font-size: 54px; }
  .app-chapter { min-height: 860px; }
  .chapter-copy h2 { font-size: 45px; }
  .chapter-copy > p { margin-top: 22px; font-size: 14px; }
  .chapter-visual { left: 0; height: 46%; }
  .chapter-eco .eco-primary { right: 3%; width: 51%; }
  .chapter-eco .eco-secondary { left: -8%; width: 48%; }
  .chapter-fuel .fuel-primary { left: 0; width: 52%; }
  .chapter-fuel .fuel-secondary { right: -10%; width: 48%; }
  .chapter-note .note-primary { width: 58%; border-width: 4px; border-radius: 28px; }
  .chapter-oshi .oshi-primary { left: 0; width: 52%; }
  .chapter-oshi .oshi-secondary { right: -10%; width: 48%; }
  .system-register-intro h2 { font-size: 48px; }
  .system-register-intro > p:last-child { font-size: 15px; }
  .system-register-list div { min-height: 0; padding: 23px 0; }
  .system-register-list dd { font-size: 16px; }
  .privacy-manifesto h2 { font-size: 48px; }
  .privacy-ledger div { grid-template-columns: 34px 1fr; gap: 12px; }
  .studio-close-main h2 { font-size: 61px; }
  .studio-actions { display: grid; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-intro { filter: none; animation: none; }
  .hero-line [data-typewriter]::after { display: none; }
  .hero-screen,
  .chapter-visual img { transform: none !important; }
}