:root {
  --bg: #101412;
  --bg-deep: #090c0b;
  --surface: #171c19;
  --surface-raised: #1c221f;
  --paper: #202321;
  --line: rgb(231 245 237 / 10%);
  --line-strong: rgb(231 245 237 / 17%);
  --text: #edf5f0;
  --text-muted: #a6b0aa;
  --text-faint: #748079;
  --green: #3ecf8e;
  --green-bright: #72e5b2;
  --green-deep: #153b2b;
  --yellow: #ffd54a;
  --max: 1180px;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
img { max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
::selection { background: rgb(62 207 142 / 28%); color: var(--text); }

.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: .75rem;
  left: .75rem;
  padding: .7rem 1rem;
  border-radius: .45rem;
  background: var(--green);
  color: #07110c;
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 4px; }

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  width: 100%;
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 78px;
}
.brand {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  width: fit-content;
  color: var(--text);
  font-size: .95rem;
  font-weight: 650;
  letter-spacing: -.015em;
  text-decoration: none;
}
.brand img { border-radius: .55rem; }
.site-nav { display: flex; gap: 2rem; }
.site-nav a {
  position: relative;
  color: var(--text-muted);
  font-size: .79rem;
  text-decoration: none;
  transition: color 160ms ease;
}
.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: 1px;
  background: var(--green);
  content: "";
  transform: scaleX(0);
  transition: transform 160ms ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--text); }
.site-nav a:hover::after { transform: scaleX(1); }
.status-pill {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  justify-self: end;
  padding: .42rem .7rem;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  background: rgb(20 27 23 / 70%);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: .63rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.status-pill span { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 148px 0 90px;
  background:
    radial-gradient(circle at 50% 43%, rgb(38 103 73 / 17%), transparent 44%),
    linear-gradient(180deg, var(--bg-deep), var(--bg) 48%, var(--bg));
}
.hero__grid, .closing__grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(circle, rgb(177 213 194 / 24%) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}
.hero__glow {
  position: absolute;
  z-index: -1;
  top: 22%;
  left: 50%;
  width: min(80vw, 980px);
  aspect-ratio: 2 / 1;
  border-radius: 50%;
  background: rgb(62 207 142 / 8%);
  filter: blur(80px);
  transform: translateX(-50%);
}
.hero__inner { display: grid; gap: clamp(3.5rem, 7vw, 6.5rem); }
.hero__copy { max-width: 900px; margin-inline: auto; text-align: center; }
.eyebrow {
  margin: 0;
  color: var(--green);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
.hero__copy > .eyebrow { display: inline-flex; gap: .6rem; align-items: center; }
.hero__copy > .eyebrow span { width: 20px; height: 1px; background: var(--green); }
h1, h2, h3, p { text-wrap: pretty; }
h1 {
  max-width: 890px;
  margin: 1.15rem auto 0;
  font-size: clamp(2.75rem, 6.1vw, 5.85rem);
  font-weight: 500;
  letter-spacing: -.066em;
  line-height: .96;
}
.hero__lede {
  max-width: 690px;
  margin: 1.65rem auto 0;
  color: var(--text-muted);
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  line-height: 1.65;
}
.hero__actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin-top: 2rem; }
.button {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  min-height: 48px;
  padding: .75rem 1.1rem;
  border-radius: .55rem;
  font-size: .84rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 160ms var(--ease-out), background 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--green); color: #06110b; box-shadow: 0 10px 35px rgb(62 207 142 / 15%); }
.button--primary:hover { background: var(--green-bright); }
.availability { max-width: 540px; color: var(--text-faint); font-size: .72rem; }

.notebook {
  --notebook-curl-step: 0deg;
  --notebook-shade: 0;
  --notebook-turn: 0;
  --notebook-turn-angle: 0deg;
  width: min(100%, 980px);
  margin-inline: auto;
  padding: clamp(1rem, 2.5vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 1.3rem;
  background: linear-gradient(180deg, rgb(28 34 31 / 80%), rgb(19 24 21 / 62%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 40px 80px rgb(0 0 0 / 22%);
  outline: none;
}
.notebook:focus-visible { box-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 0 0 2px rgb(62 207 142 / 55%), 0 40px 80px rgb(0 0 0 / 22%); }
.notebook__heading { display: flex; gap: 2rem; align-items: end; justify-content: space-between; margin-bottom: 1.4rem; }
.notebook__heading h2 { max-width: 580px; margin: .45rem 0 0; font-size: clamp(1.25rem, 2.5vw, 2rem); font-weight: 520; letter-spacing: -.035em; line-height: 1.15; }
.notebook__hint { display: flex; gap: .45rem; align-items: center; margin: 0; color: var(--text-faint); font-family: var(--mono); font-size: .63rem; white-space: nowrap; transition: opacity 220ms ease; }
.notebook.has-interacted .notebook__hint { opacity: 0; }
.notebook__stage { position: relative; perspective: 1600px; perspective-origin: 50% 44%; touch-action: pan-y; user-select: none; cursor: grab; }
.notebook__stage.is-dragging { cursor: grabbing; }
.notebook__ambient, .notebook__contact { position: absolute; z-index: 0; border-radius: 50%; pointer-events: none; }
.notebook__ambient { inset: 24% 4% -7%; background: radial-gradient(ellipse, rgb(0 0 0 / 58%), rgb(0 0 0 / 24%) 48%, transparent 75%); filter: blur(1.9rem); }
.notebook__contact { inset: 73% 10% 1%; background: radial-gradient(ellipse, rgb(0 0 0 / 76%), transparent 72%); filter: blur(.6rem); }
.notebook__tilt { position: relative; z-index: 1; transform-style: preserve-3d; transition: transform 220ms ease-out; will-change: transform; }
.notebook.is-turning .notebook__tilt { transition: none; }
.notebook__book {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid rgb(237 245 240 / 13%);
  border-radius: clamp(.7rem, 1.4vw, 1.15rem);
  background: var(--paper);
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 .15rem .3rem rgb(0 0 0 / 38%), 0 1.8rem 3.5rem rgb(0 0 0 / 38%);
  transform-style: preserve-3d;
}
.notebook__spread, .notebook__handoff { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.notebook__turning-spread { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.notebook__half { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; overflow: hidden; }
.notebook__half.is-left { left: 0; }
.notebook__half.is-right { left: 50%; }
.notebook__half-image { display: block; width: 200%; max-width: none; height: 100%; object-fit: fill; }
.notebook__half-image.is-right { margin-left: -100%; }
.notebook__turn-shadow { position: absolute; z-index: 2; top: 0; bottom: 0; width: 48%; opacity: calc(var(--notebook-shade) * .62); pointer-events: none; }
.notebook__turn-shadow.is-right { right: 0; background: linear-gradient(90deg, rgb(0 0 0 / 38%), transparent 80%); }
.notebook__turn-shadow.is-left { left: 0; background: linear-gradient(270deg, rgb(0 0 0 / 38%), transparent 80%); }
.notebook__handoff { position: absolute; z-index: 7; inset: 0; opacity: 0; }
.notebook__handoff.is-visible { opacity: 1; }
.notebook__curl { position: absolute; z-index: 5; top: 0; width: calc(50% / 20); height: 100%; transform-style: preserve-3d; will-change: transform; }
.notebook__curl.is-next { left: 50%; transform: rotateY(calc(-1 * var(--notebook-turn-angle))); transform-origin: left center; }
.notebook__curl.is-previous { right: 50%; transform: rotateY(var(--notebook-turn-angle)); transform-origin: right center; }
.notebook__segment { position: absolute; top: 0; display: block; width: 100%; height: 100%; transform-style: preserve-3d; }
.notebook__curl.is-next > .notebook__segment { left: 0; transform-origin: left center; }
.notebook__curl.is-previous > .notebook__segment { right: 0; transform-origin: right center; }
.notebook__curl.is-next .notebook__segment > .notebook__segment { left: 100%; transform: rotateY(var(--notebook-curl-step)); transform-origin: left center; }
.notebook__curl.is-previous .notebook__segment > .notebook__segment { right: 100%; transform: rotateY(calc(-1 * var(--notebook-curl-step))); transform-origin: right center; }
.notebook__face { position: absolute; inset: 0 -1.2px 0 0; background-repeat: no-repeat; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; }
.notebook__face.is-back { transform: rotateY(180deg); }
.notebook__face-shadow, .notebook__face-highlight { position: absolute; inset: 0; pointer-events: none; }
.notebook__face-shadow { background: linear-gradient(90deg, rgb(0 0 0 / var(--notebook-shadow-near, 0)), rgb(0 0 0 / var(--notebook-shadow-far, 0))); }
.notebook__face.is-back .notebook__face-shadow { background: linear-gradient(90deg, rgb(0 0 0 / var(--notebook-shadow-far, 0)), rgb(0 0 0 / var(--notebook-shadow-near, 0))); }
.notebook__face-highlight { background: rgb(255 255 255 / 11%); opacity: calc(var(--notebook-shade) * var(--notebook-light, 1) * var(--notebook-light, 1)); }
.notebook__gutter { position: absolute; z-index: 3; top: 0; bottom: 0; left: 50%; width: 7%; background: linear-gradient(90deg, transparent, rgb(0 0 0 / 31%) 43%, rgb(255 255 255 / 3%) 51%, transparent); pointer-events: none; transform: translateX(-50%); }
.notebook__controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: .75rem; align-items: center; margin-top: 1rem; }
.icon-button { display: grid; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: rgb(255 255 255 / 2%); cursor: pointer; place-items: center; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; }
.icon-button:hover:not(:disabled) { border-color: rgb(62 207 142 / 52%); background: rgb(62 207 142 / 8%); transform: translateY(-1px); }
.icon-button:disabled { cursor: wait; opacity: .35; }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.notebook__caption { min-width: 0; text-align: center; }
.notebook__caption > div { display: flex; justify-content: center; gap: .8rem; align-items: center; color: var(--text-faint); font-family: var(--mono); font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; }
.notebook__caption strong { color: var(--green); font-family: var(--sans); font-size: .67rem; font-weight: 650; letter-spacing: .14em; }
.notebook__caption h3 { margin: .3rem 0 0; font-size: clamp(.87rem, 1.5vw, 1rem); font-weight: 560; line-height: 1.35; }
.notebook__caption p { margin: .15rem 0 0; color: var(--text-muted); font-size: .74rem; line-height: 1.45; }

.section { padding: clamp(5.5rem, 11vw, 9.5rem) 0; }
.section-heading { max-width: 690px; }
.section-heading h2, .audience h2, .closing h2 { margin: .75rem 0 0; font-size: clamp(2rem, 4.6vw, 4.2rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.02; }
.section-heading > p:last-child { max-width: 600px; margin: 1.2rem 0 0; color: var(--text-muted); font-size: 1rem; }
.stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: clamp(3rem, 6vw, 5rem) 0 0; padding: 1px; border-radius: 1rem; background: var(--line); list-style: none; overflow: hidden; }
.stage-card { position: relative; min-height: 320px; padding: 1.7rem; background: var(--surface); }
.stage-card__number { position: absolute; top: 1.2rem; right: 1.2rem; color: var(--text-faint); font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; }
.stage-card__icon { display: grid; width: 44px; height: 44px; margin-top: 2.5rem; border: 1px solid rgb(62 207 142 / 22%); border-radius: .65rem; background: rgb(62 207 142 / 6%); color: var(--green); place-items: center; }
.stage-card__icon svg { width: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.35; }
.stage-card h3 { margin: 2rem 0 0; font-size: 1.1rem; font-weight: 570; letter-spacing: -.02em; }
.stage-card p { margin: .8rem 0 0; color: var(--text-muted); font-size: .84rem; line-height: 1.75; }
.section--panel { border-block: 1px solid var(--line); background: var(--surface); }
.principles-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 9vw, 8rem); }
.section-heading--sticky { align-self: start; position: sticky; top: 2rem; }
.principle-list { border-top: 1px solid var(--line-strong); }
.principle { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 2.3rem 0; border-bottom: 1px solid var(--line-strong); }
.principle > span { color: var(--green); font-family: var(--mono); font-size: .62rem; }
.principle h3 { margin: 0; font-size: 1.2rem; font-weight: 570; }
.principle p { margin: .7rem 0 0; color: var(--text-muted); font-size: .9rem; }
.audience { text-align: center; }
.audience__inner { max-width: 900px; }
.audience h2 { max-width: 750px; margin-inline: auto; }
.audience__inner > p:not(.eyebrow) { max-width: 730px; margin: 1.5rem auto 0; color: var(--text-muted); font-size: 1rem; }
.audience__tags { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 2rem; }
.audience__tags span { padding: .48rem .8rem; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--text-muted); font-family: var(--mono); font-size: .65rem; text-transform: uppercase; }
.closing { position: relative; isolation: isolate; overflow: hidden; padding: clamp(6rem, 12vw, 10rem) 0; border-top: 1px solid var(--line); background: var(--bg-deep); text-align: center; }
.closing::after { position: absolute; z-index: -1; bottom: -40%; left: 50%; width: min(100vw, 900px); aspect-ratio: 1; border-radius: 50%; background: rgb(62 207 142 / 7%); content: ""; filter: blur(80px); transform: translateX(-50%); }
.closing__grid { mask-image: radial-gradient(circle at center, black, transparent 70%); }
.closing__inner { max-width: 900px; }
.closing img { margin: 0 auto 1.8rem; border-radius: 1rem; box-shadow: 0 18px 60px rgb(0 0 0 / 36%); }
.closing h2 { max-width: 850px; margin-inline: auto; }
.closing__inner > p:last-child { margin: 1.35rem 0 0; color: var(--text-muted); }
.site-footer { padding: 1.7rem 0; border-top: 1px solid var(--line); background: var(--bg-deep); }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: var(--text-faint); font-size: .68rem; }
.site-footer__inner .brand { font-size: .78rem; }
.site-footer__inner p { margin: 0; }
.site-footer__inner p:last-child { justify-self: end; }

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

.error-page { position: relative; display: grid; isolation: isolate; min-height: 100vh; overflow: hidden; padding: 2rem; background: var(--bg-deep); place-items: center; text-align: center; }
.error-page__grid { position: absolute; z-index: -2; inset: 0; opacity: .3; background-image: radial-gradient(circle, rgb(177 213 194 / 24%) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at center, black, transparent 72%); }
.error-page::after { position: absolute; z-index: -1; width: min(70vw, 700px); aspect-ratio: 1; border-radius: 50%; background: rgb(62 207 142 / 7%); content: ""; filter: blur(70px); }
.error-page__content { max-width: 720px; }
.error-page__content img { margin: 0 auto 1.5rem; border-radius: 1rem; }
.error-page__content h1 { margin-top: .8rem; font-size: clamp(2.6rem, 8vw, 5rem); }
.error-page__content > p:not(.eyebrow) { margin: 1.2rem auto 1.8rem; color: var(--text-muted); }

@media (max-width: 900px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .stage-grid { grid-template-columns: repeat(2, 1fr); }
  .principles-layout { grid-template-columns: 1fr; }
  .section-heading--sticky { position: static; }
  .site-footer__inner { grid-template-columns: 1fr auto; gap: 1rem; }
  .site-footer__inner > p:first-of-type { display: none; }
}

@media (max-width: 600px) {
  .shell { width: min(calc(100% - 28px), var(--max)); }
  .site-header__inner { min-height: 68px; }
  .brand { font-size: .85rem; }
  .brand img { width: 32px; height: 32px; }
  .status-pill { padding: .38rem .55rem; font-size: .55rem; }
  .hero { padding: 116px 0 68px; }
  h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero__lede { font-size: .98rem; }
  .notebook { padding: .8rem; border-radius: .9rem; }
  .notebook__heading { display: block; margin: .25rem .2rem 1rem; }
  .notebook__heading h2 { font-size: 1.15rem; }
  .notebook__hint { margin-top: .65rem; }
  .notebook__book { border-radius: .55rem; }
  .notebook__controls { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: .4rem; }
  .icon-button { width: 44px; height: 44px; }
  .notebook__caption > div { gap: .45rem; font-size: .55rem; }
  .notebook__caption strong { font-size: .57rem; }
  .notebook__caption h3 { font-size: .78rem; }
  .notebook__caption p { display: none; }
  .stage-grid { grid-template-columns: 1fr; }
  .stage-card { min-height: auto; padding: 1.5rem; }
  .stage-card__icon { margin-top: 1rem; }
  .stage-card h3 { margin-top: 1.4rem; }
  .principle { grid-template-columns: 2.4rem 1fr; }
  .site-footer__inner { display: flex; flex-direction: column; text-align: center; }
  .site-footer__inner p:last-child { justify-self: auto; }
}

@media (pointer: coarse) {
  .notebook__tilt { transform: none !important; }
  .notebook__hint span { display: none; }
}

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

@media (forced-colors: active) {
  .status-pill span, .hero__copy > .eyebrow span { background: CanvasText; }
  .stage-card__icon, .icon-button, .notebook, .notebook__book { forced-color-adjust: none; }
}