:root {
  --blue: #6780ca;
  --blue-deep: #3a4f8d;
  --gold: #cab667;
  --gold-deep: #9e8f54;
  --ink: #eef0f7;
  --muted: #a7aec6;
  --paper: rgba(22, 26, 42, 0.74);
  --paper-solid: #161a2a;
  --line: rgba(255, 255, 255, 0.09);
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink);
  background-color: #0d1020;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

.bg-image {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
}

.bg-shade {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 70% 0%, rgba(13, 16, 32, 0.25), rgba(13, 16, 32, 0.78) 70%),
    linear-gradient(180deg, rgba(13, 16, 32, 0.35), rgba(13, 16, 32, 0.9) 85%);
}

.grain {
  position: fixed;
  inset: -50%;
  z-index: 50;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}

a { color: inherit; }

::selection { background: var(--gold); color: #1a1708; }

.wrap {
  padding-inline: var(--gutter);
  max-width: 1480px;
  margin-inline: auto;
}

/* nav */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-block: 1.75rem;
}

.mark {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.35rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.mark b { color: var(--gold); font-weight: 600; }

.nav-links {
  display: flex;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-top: 0.6rem;
  font-size: 0.92rem;
}

.nav-links a {
  text-decoration: none;
  color: var(--muted);
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size 0.35s cubic-bezier(.2, .8, .2, 1), color 0.2s;
}

.nav-links a:hover { color: var(--ink); background-size: 100% 2px; }

.nav-links a:nth-child(2) { transform: translateY(0.35rem); }

/* reveal */

.js .reveal {
  opacity: 0;
  transform: translateY(32px) rotate(var(--r, 0deg));
  transition: opacity 0.9s cubic-bezier(.2, .7, .2, 1), transform 0.9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.js .reveal.in {
  opacity: 1;
  transform: translateY(0) rotate(var(--r, 0deg));
}

.js .reveal.settled { transition-delay: 0s; transition-duration: 0.35s; }

/* hero */

.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 7rem) clamp(4rem, 8vw, 7rem);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
  padding-left: 0.15rem;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(3.1rem, 9.4vw, 9rem);
  line-height: 0.93;
  letter-spacing: -0.035em;
  max-width: 11.5em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
  position: relative;
  white-space: nowrap;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0.06em;
  height: 0.09em;
  background: var(--blue);
  border-radius: 99px;
  transform: rotate(-1.4deg) scaleX(0);
  transform-origin: left;
  animation: underline 0.9s 1s cubic-bezier(.2, .8, .2, 1) forwards;
}

@keyframes underline { to { transform: rotate(-1.4deg) scaleX(1); } }

.hero-lead {
  margin-top: clamp(2rem, 5vw, 4.5rem);
  margin-left: clamp(0rem, 9vw, 9rem);
  max-width: 32rem;
  font-size: 1.2rem;
  color: #d4d8e8;
}

.hero-lead p + p { margin-top: 1rem; color: var(--muted); font-size: 1.02rem; }

.hero-cta {
  margin-top: 2.5rem;
  margin-left: clamp(0rem, 9vw, 9rem);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: center;
}

.hero .hero-card {
  position: absolute;
  right: calc(var(--gutter) * -0.25);
  top: clamp(13rem, 25vw, 22rem);
  width: min(26rem, 38vw);
  z-index: 2;
  --r: 2.2deg;
}

.snippet-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.85rem 1.1rem 0;
}

.stamp {
  position: absolute;
  right: clamp(0.5rem, 2.5vw, 3rem);
  top: clamp(23rem, 36vw, 36rem);
  width: clamp(7.5rem, 12vw, 10.5rem);
  aspect-ratio: 1;
  z-index: 3;
  --r: -8deg;
}

.stamp svg { width: 100%; height: 100%; overflow: visible; animation: spin 38s linear infinite; }

.stamp text {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--gold);
}

.stamp .core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--ink);
  letter-spacing: -0.04em;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* cards */

.card {
  background: var(--paper);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid var(--line);
  border-radius: 18px 22px 16px 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 18px 40px -12px rgba(0, 0, 0, 0.55),
    0 40px 90px -30px rgba(0, 0, 0, 0.6);
  position: relative;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 40%, rgba(103, 128, 202, 0.07));
  pointer-events: none;
}

/* buttons */

.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.95rem 2.25rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.02rem;
  font-family: inherit;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(.3, 1.6, .4, 1), box-shadow 0.25s;
}

.btn span {
  display: block;
  transition: transform 0.35s cubic-bezier(.2, .9, .2, 1);
}

.btn span + span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateY(110%);
}

.btn:hover span:first-child { transform: translateY(-110%); }
.btn:hover span + span { transform: translateY(0); }

.btn-blue {
  background: var(--blue);
  box-shadow: 0 4px 14px rgba(58, 79, 141, 0.4);
}

.btn-blue span + span { background: #3a63e0; }

.btn-blue:hover { transform: rotate(-2deg) translateY(-3px); box-shadow: 0 10px 24px rgba(58, 99, 224, 0.45); }

.btn-gold {
  background: var(--gold);
  box-shadow: 0 4px 14px rgba(158, 143, 84, 0.4);
}

.btn-gold span + span { background: var(--gold-deep); }

.btn-gold:hover { transform: rotate(1.8deg) translateY(-3px); box-shadow: 0 10px 24px rgba(158, 143, 84, 0.5); }

.btn:active { transform: scale(0.96) rotate(0deg); transition-duration: 0.08s; }

/* sections */

.section { position: relative; padding-block: clamp(4rem, 9vw, 9rem); }

.kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 1rem;
  filter: brightness(1.35);
}

.h2 {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.h2 em { font-style: italic; font-weight: 500; color: var(--gold); }

.section-head { max-width: 46rem; }

.section-head p {
  margin-top: 1.5rem;
  max-width: 30rem;
  color: var(--muted);
  margin-left: clamp(0rem, 7vw, 7rem);
}

/* effects */

.fx-grid {
  margin-top: clamp(3rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem) 0;
  align-items: start;
}

.fx {
  transition: transform 0.45s cubic-bezier(.3, 1.4, .4, 1), box-shadow 0.45s;
}

.fx:hover,
.js .reveal.in.fx:hover { transform: translateY(-8px) rotate(calc(var(--r) * -0.4)); }

.fx-portal { grid-column: 1 / 8; --r: -1.4deg; }
.fx-spark { grid-column: 8 / 13; margin-top: 7rem; margin-left: -2rem; --r: 1.6deg; z-index: 2; }
.fx-dash { grid-column: 3 / 10; margin-top: -2.5rem; --r: -0.7deg; z-index: 3; }

.stage {
  position: relative;
  height: clamp(15rem, 26vw, 22rem);
  overflow: hidden;
  border-radius: 16px 20px 0 0;
  background:
    radial-gradient(80% 90% at 50% 55%, rgba(103, 128, 202, 0.16), transparent 70%),
    #0b0e1b;
}

.fx-spark .stage { height: clamp(14rem, 22vw, 19rem); cursor: crosshair; }
.fx-dash .stage { height: clamp(11rem, 16vw, 14rem); }

.fx-body { padding: 1.5rem 1.75rem 1.9rem; }

.fx-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.fx-body p { color: var(--muted); font-size: 0.98rem; max-width: 34rem; }

.fx-body .tag {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dashed rgba(202, 182, 103, 0.5);
  padding-bottom: 1px;
}

.fx-body .tag:hover { border-bottom-style: solid; }

/* portal */

.portal { position: absolute; inset: 0; display: grid; place-items: center; }

.portal .ring {
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, var(--blue), transparent 30%, var(--gold) 55%, transparent 80%, var(--blue));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
  animation: spin 5s linear infinite;
  filter: drop-shadow(0 0 10px rgba(103, 128, 202, 0.8));
}

.portal .r1 { width: 56%; max-width: 11rem; }
.portal .r2 { width: 78%; max-width: 15rem; animation-duration: 8s; animation-direction: reverse; opacity: 0.8; }
.portal .r3 { width: 100%; max-width: 19rem; animation-duration: 13s; opacity: 0.5; }

.portal .glow {
  position: absolute;
  width: 40%;
  max-width: 8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 214, 0.9), rgba(202, 182, 103, 0.4) 35%, transparent 70%);
  animation: pulse 3.2s ease-in-out infinite;
}

@keyframes pulse { 50% { transform: scale(1.25); opacity: 0.75; } }

.portal i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: suck 2.4s cubic-bezier(.5, 0, .9, .6) infinite;
  animation-delay: calc(var(--k) * -0.17s);
  transform: rotate(calc(var(--k) * 25.7deg)) translateX(130px);
  opacity: 0;
}

@keyframes suck {
  0% { transform: rotate(calc(var(--k) * 25.7deg)) translateX(140px) scale(0.3); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(calc(var(--k) * 25.7deg + 140deg)) translateX(0) scale(0); opacity: 0.2; }
}

/* spark */

.spark-stage .floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}

.spark-stage .hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.8rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: rgba(167, 174, 198, 0.6);
  text-transform: uppercase;
}

.spark {
  position: absolute;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: #fff4d6;
  box-shadow: 0 0 9px 2px rgba(202, 182, 103, 0.9);
  pointer-events: none;
}

.flash {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 232, 170, 0.8) 40%, transparent 70%);
  pointer-events: none;
}

/* dash */

.dash-stage .lane {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 56%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 6px, transparent 6px 14px);
}

.runner {
  position: absolute;
  top: 56%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4d6, var(--gold) 60%);
  box-shadow: 0 0 14px rgba(202, 182, 103, 0.7);
  animation: runner 3s infinite cubic-bezier(.7, 0, .2, 1);
}

.streak {
  position: absolute;
  top: 56%;
  left: 14%;
  height: 22px;
  margin-top: -11px;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--blue) 40%, var(--gold));
  filter: blur(1.5px);
  transform-origin: left;
  animation: streak 3s infinite cubic-bezier(.7, 0, .2, 1);
}

.keycap {
  position: absolute;
  left: 6%;
  bottom: 14%;
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  border-radius: 8px;
  background: #1c2136;
  border: 1px solid var(--line);
  box-shadow: 0 4px 0 #090b15;
  animation: key 3s infinite;
}

@keyframes runner {
  0%, 20% { left: 14%; }
  34%, 100% { left: 86%; }
}

@keyframes streak {
  0%, 20% { width: 0; opacity: 1; }
  34% { width: 72%; opacity: 1; }
  80% { width: 72%; opacity: 0; }
  100% { width: 0; opacity: 0; }
}

@keyframes key {
  0%, 17% { transform: none; box-shadow: 0 4px 0 #090b15; color: var(--ink); }
  20%, 28% { transform: translateY(4px); box-shadow: 0 0 0 #090b15; color: var(--gold); }
  34%, 100% { transform: none; box-shadow: 0 4px 0 #090b15; color: var(--ink); }
}

/* code */

.code-list { margin-top: clamp(3rem, 7vw, 6rem); }

.piece {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.piece + .piece { margin-top: clamp(4rem, 9vw, 8rem); }

.piece-note {
  grid-column: 1 / 5;
  position: sticky;
  top: 2rem;
  padding-right: 2rem;
  padding-top: 1rem;
}

.piece .num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.5rem, 9vw, 8rem);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(202, 182, 103, 0.55);
  display: block;
  margin-bottom: 0.5rem;
}

.piece h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.piece .file {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--gold);
  margin: 0.4rem 0 1rem;
}

.piece-note p { color: var(--muted); font-size: 0.98rem; }

.piece-code {
  grid-column: 5 / 13;
  --r: 0.5deg;
  overflow: hidden;
}

.piece:nth-child(even) .piece-note { grid-column: 9 / 13; grid-row: 1; padding: 1rem 0 0 1rem; }
.piece:nth-child(even) .piece-code { grid-column: 1 / 9; --r: -0.6deg; margin-left: calc(var(--gutter) * -0.7); }
.piece:nth-child(odd) .piece-code { margin-right: calc(var(--gutter) * -0.7); }

.chrome {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
}

.chrome i { width: 10px; height: 10px; border-radius: 50%; background: #3a4060; }
.chrome i:nth-child(1) { background: #c9695f; }
.chrome i:nth-child(2) { background: var(--gold); }
.chrome i:nth-child(3) { background: #6aa76f; }
.chrome span { margin-left: 0.6rem; }
.chrome .lines { margin-left: auto; opacity: 0.6; }

pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.65;
  padding: 1.25rem 1.4rem 1.5rem;
  overflow: auto;
  max-height: 34rem;
  tab-size: 4;
  color: #d9ddec;
  scrollbar-color: rgba(103, 128, 202, 0.5) transparent;
}

.snip pre { max-height: none; font-size: 0.78rem; padding-top: 0.6rem; }

.k { color: #e0a86b; }
.s { color: #a8c98a; }
.n { color: #e6c27a; }
.f { color: #8aa6ee; }
.b { color: #c79be0; }

/* process */

.talk {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}

.talk .h2 { grid-column: 2 / 9; }

.talk-copy {
  grid-column: 6 / 12;
  margin-top: 2.5rem;
  font-size: 1.12rem;
  color: #d4d8e8;
}

.talk-copy p + p { margin-top: 1.1rem; }

.note-card {
  grid-column: 9 / 13;
  grid-row: 1 / 3;
  margin-top: 5rem;
  padding: 1.5rem 1.6rem;
  --r: 2.5deg;
  align-self: start;
  background:
    linear-gradient(180deg, rgba(202, 182, 103, 0.95), rgba(188, 168, 92, 0.95));
  color: #241f0c;
  border-radius: 4px 4px 22px 4px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 22px 40px -14px rgba(0, 0, 0, 0.6);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.45;
  font-weight: 500;
}

.note-card::before { display: none; }

.note-card small {
  display: block;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* contact */

.contact { padding-block: clamp(5rem, 11vw, 11rem) clamp(4rem, 8vw, 7rem); }

.contact .h2 { font-size: clamp(3.4rem, 12vw, 11rem); line-height: 0.88; }

.contact p {
  margin-top: 2rem;
  margin-left: clamp(0rem, 14vw, 15rem);
  max-width: 30rem;
  color: #d4d8e8;
  font-size: 1.15rem;
}

.contact .hero-cta { margin-left: clamp(0rem, 14vw, 15rem); }

/* footer */

footer {
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.psst {
  font-family: var(--mono);
  font-size: 0.78rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, transform 0.3s cubic-bezier(.3, 1.6, .4, 1);
}

.psst:hover { color: var(--gold); transform: rotate(-2deg) translateX(4px); }

.psst kbd {
  font-family: inherit;
  padding: 0.05rem 0.4rem;
  border: 1px solid currentColor;
  border-radius: 4px;
  margin: 0 0.15rem;
}

.dash-streak {
  position: fixed;
  left: 0;
  height: 14px;
  width: 38vw;
  z-index: 100;
  pointer-events: none;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--blue) 45%, var(--gold));
  filter: blur(1px) drop-shadow(0 0 12px rgba(103, 128, 202, 0.9));
  transform: translateX(-45vw);
  animation: zoom 0.42s cubic-bezier(.6, 0, .2, 1) forwards;
}

@keyframes zoom {
  to { transform: translateX(145vw); }
}

.shake { animation: shake 0.3s linear; }

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-4px, 2px) rotate(-0.15deg); }
  40% { transform: translate(3px, -3px) rotate(0.15deg); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 3px); }
}

/* small screens */

@media (max-width: 900px) {
  .hero .hero-card { position: relative; right: auto; top: auto; width: min(24rem, 90%); margin: 3.5rem 0 0 auto; }
  .stamp { top: auto; bottom: -1.5rem; right: 1rem; width: 6.2rem; }
  .snip pre { font-size: 0.7rem; }
  .hero { padding-bottom: 6rem; }
  .fx-grid, .piece, .talk { display: block; }
  .fx { margin: 0 0 2.5rem; }
  .fx-spark { margin-left: 1.25rem; margin-top: 0; }
  .fx-dash { margin-top: 0; margin-right: 1.25rem; }
  .piece-note { position: static; padding: 0 0 1.25rem; }
  .piece:nth-child(even) .piece-note { padding: 0 0 1.25rem; }
  .piece:nth-child(even) .piece-code,
  .piece:nth-child(odd) .piece-code { margin-inline: 0; }
  .note-card { margin: 2.5rem 0 0 auto; width: min(20rem, 92%); }
  .talk-copy { margin-top: 2rem; }
  .nav-links a:nth-child(2) { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: rotate(var(--r, 0deg)); }
  .hero h1 em::after { transform: rotate(-1.4deg) scaleX(1); }
}

/* scene */

.scene { position: relative; margin-top: clamp(1rem, 4vw, 4rem); }

.scene-track { position: relative; height: 460vh; }

.scene-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 32rem;
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4.5rem);
  align-items: center;
}

.scene-copy .h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }

.scene-intro {
  margin-top: 1.25rem;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 24rem;
}

.steps {
  list-style: none;
  margin-top: 2rem;
  display: grid;
  gap: 0.9rem;
}

.steps li {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  align-items: baseline;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--muted);
  opacity: 0.38;
  transform: translateX(0);
  transition: opacity 0.4s, transform 0.4s cubic-bezier(.2, .9, .2, 1), color 0.4s;
}

.steps li b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--gold);
}

.steps li strong { color: var(--ink); font-weight: 600; }

.steps li.on { opacity: 1; transform: translateX(0.6rem); color: #d4d8e8; }

.scene-stage {
  --u: 1cqw;
  --ground: 17cqw;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-right: calc(var(--gutter) * -1);
  width: calc(100% + var(--gutter));
  border-radius: 6px 26px 8px 22px;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 24px 50px -14px rgba(0, 0, 0, 0.65),
    0 50px 100px -30px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line);
  background: #0b1230;
}

.scene-stage.shake { animation: stageshake 0.4s linear; }

@keyframes stageshake {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-1.4cqw, 0.5cqw) rotate(-0.3deg); }
  35% { transform: translate(1.1cqw, -0.7cqw) rotate(0.25deg); }
  55% { transform: translate(-0.7cqw, -0.3cqw); }
  75% { transform: translate(0.5cqw, 0.5cqw); }
}

.scene-stage .sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 9%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 44% 22%, #fff, transparent),
    radial-gradient(1px 1px at 63% 12%, #cfd8ff, transparent),
    radial-gradient(1.5px 1.5px at 78% 26%, #fff, transparent),
    radial-gradient(1px 1px at 90% 8%, #fff, transparent),
    radial-gradient(1px 1px at 8% 38%, #cfd8ff, transparent),
    radial-gradient(1px 1px at 55% 36%, #fff, transparent),
    linear-gradient(180deg, #080c20 0%, #172351 55%, #3a4f8d 100%);
}

.scene-stage .ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ground);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35)),
    #31374f;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.scene-stage .ground-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--u) * 2.4);
  background:
    radial-gradient(ellipse calc(var(--u) * 1.2) calc(var(--u) * 0.45) at 50% 28%, #6d7699 0 68%, transparent 72%) 0 0 / calc(var(--u) * 3.6) 100% repeat-x,
    linear-gradient(180deg, #5a6286, #454c6c);
}

/* output log */

.studio-out {
  position: absolute;
  left: calc(var(--u) * 2);
  top: calc(var(--u) * 2);
  width: min(30cqw, 22rem);
  min-width: 11rem;
  background: rgba(10, 13, 26, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: clamp(0.58rem, 1.15cqw, 0.78rem);
  line-height: 1.55;
  z-index: 8;
  overflow: hidden;
}

.studio-out .tab {
  padding: 0.3rem 0.7rem;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-out ul { list-style: none; padding: 0.4rem 0.7rem 0.55rem; min-height: 8.6em; }

.studio-out li {
  color: #d9ddec;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s, transform 0.25s;
  white-space: nowrap;
}

.studio-out li.on { opacity: 1; transform: none; }
.studio-out li em { font-style: normal; color: #8aa6ee; margin-right: 0.5em; }

.scene-key {
  position: absolute;
  right: calc(var(--u) * 2);
  top: calc(var(--u) * 2);
  left: auto;
  bottom: auto;
  animation: none;
  transition: transform 0.08s, box-shadow 0.08s, color 0.08s;
  z-index: 8;
}

.scene-key.down { transform: translateY(4px); box-shadow: 0 0 0 #090b15; color: var(--gold); }

/* character */

.char {
  position: absolute;
  left: 10cqw;
  bottom: calc(var(--ground) - var(--u) * 0.2);
  width: calc(var(--u) * 8.8);
  height: calc(var(--u) * 11.8);
  z-index: 5;
  transform-origin: 50% 70%;
  will-change: transform, left;
}

.char > * { position: absolute; }

.char .head {
  left: calc(var(--u) * 2.7);
  top: 0;
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3);
  background: linear-gradient(180deg, #ffd94a, #f0c020);
  border-radius: calc(var(--u) * 0.55);
  box-shadow: inset calc(var(--u) * -0.25) calc(var(--u) * -0.3) 0 rgba(0, 0, 0, 0.16), inset calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 rgba(255, 255, 255, 0.3);
  z-index: 3;
}

.char .eye {
  top: calc(var(--u) * 1.05);
  width: calc(var(--u) * 0.42);
  height: calc(var(--u) * 0.62);
  border-radius: 50%;
  background: #1b1b1b;
}

.char .eye.a { left: calc(var(--u) * 0.95); }
.char .eye.b { right: calc(var(--u) * 0.95); }

.char .smile {
  left: calc(var(--u) * 0.95);
  right: calc(var(--u) * 0.95);
  bottom: calc(var(--u) * 0.5);
  height: calc(var(--u) * 0.7);
  border-bottom: calc(var(--u) * 0.2) solid #1b1b1b;
  border-radius: 0 0 50% 50%;
}

.char .torso {
  left: calc(var(--u) * 2.2);
  top: calc(var(--u) * 3.1);
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  background: linear-gradient(180deg, #1a80cc, #0d69ac);
  border-radius: calc(var(--u) * 0.25);
  box-shadow: inset calc(var(--u) * -0.3) calc(var(--u) * -0.3) 0 rgba(0, 0, 0, 0.2), inset calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0 rgba(255, 255, 255, 0.22);
  z-index: 2;
}

.char .limb { transform-origin: 50% 0; }

.char .arm {
  top: calc(var(--u) * 3.1);
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 4.4);
  background: linear-gradient(180deg, #ffd94a, #f0c020);
  border-radius: calc(var(--u) * 0.3);
  box-shadow: inset calc(var(--u) * -0.25) calc(var(--u) * -0.25) 0 rgba(0, 0, 0, 0.16);
  z-index: 1;
}

.char .arm.l { left: 0; }
.char .arm.r { left: calc(var(--u) * 6.6); }

.char .leg {
  top: calc(var(--u) * 7.5);
  width: calc(var(--u) * 2.2);
  height: calc(var(--u) * 4.3);
  background: linear-gradient(180deg, #5aa75a, #3f8a3f);
  border-radius: calc(var(--u) * 0.3);
  box-shadow: inset calc(var(--u) * -0.25) calc(var(--u) * -0.25) 0 rgba(0, 0, 0, 0.2);
}

.char .leg.l { left: calc(var(--u) * 2.2); }
.char .leg.r { left: calc(var(--u) * 4.4); }

.char { transition: filter 0.3s; }
.char.dashing { filter: drop-shadow(0 0 calc(var(--u) * 0.9) rgba(103, 128, 202, 0.9)); }
.char.dashing .arm.l { transform: rotate(75deg); }
.char.dashing .arm.r { transform: rotate(-70deg); }
.char.dashing .leg.l { transform: rotate(38deg); }
.char.dashing .leg.r { transform: rotate(-30deg); }
.char.dashing .head { transform: translateX(calc(var(--u) * 0.4)); }

.char.walking .arm.l, .char.walking .leg.r { animation: swing 0.62s ease-in-out infinite alternate; }
.char.walking .arm.r, .char.walking .leg.l { animation: swing 0.62s ease-in-out infinite alternate-reverse; }

@keyframes swing {
  from { transform: rotate(-32deg); }
  to { transform: rotate(32deg); }
}

.char:not(.walking):not(.dashing) .torso { animation: bob 2.4s ease-in-out infinite; }

@keyframes bob { 50% { transform: translateY(calc(var(--u) * 0.18)); } }

/* trail */

.trail {
  position: absolute;
  left: 13cqw;
  bottom: calc(var(--ground) + var(--u) * 3);
  height: calc(var(--u) * 6);
  width: 0;
  opacity: 0;
  z-index: 4;
  background: linear-gradient(90deg, transparent, var(--blue) 45%, var(--gold));
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  filter: blur(0.3px) drop-shadow(0 0 calc(var(--u) * 0.8) rgba(103, 128, 202, 0.8));
}

/* wall */

.wall {
  position: absolute;
  left: 59cqw;
  bottom: calc(var(--ground) - var(--u) * 0.2);
  width: calc(var(--u) * 7);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 0.15);
  z-index: 3;
}

.brick {
  height: calc(var(--u) * 2.6);
  background: linear-gradient(180deg, #d9c57a, #b59d4c);
  border-radius: calc(var(--u) * 0.2);
  box-shadow:
    inset calc(var(--u) * -0.22) calc(var(--u) * -0.22) 0 rgba(0, 0, 0, 0.2),
    inset calc(var(--u) * 0.18) calc(var(--u) * 0.18) 0 rgba(255, 255, 255, 0.3);
  transition: transform 0.9s cubic-bezier(.15, .8, .3, 1), opacity 0.5s 0.5s;
}

.wall.broken .brick {
  transform: translate(var(--tx), var(--ty)) rotate(var(--rot));
  opacity: 0;
}

.wall.hit .brick { filter: brightness(1.6); }

/* portal */

.portal3 {
  position: absolute;
  left: calc(87cqw - var(--u) * 4);
  bottom: calc(var(--ground) - var(--u) * 0.4);
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 15);
  z-index: 4;
  transform: scale(0);
  transform-origin: 50% 60%;
}

.p-flat {
  position: absolute;
  inset: 0;
}

.p-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 0.75), #000 calc(100% - var(--u) * 0.65));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--u) * 0.75), #000 calc(100% - var(--u) * 0.65));
  filter: drop-shadow(0 0 calc(var(--u) * 0.7) rgba(103, 128, 202, 0.9));
}

.p-ring::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300%;
  aspect-ratio: 1;
  background: conic-gradient(from 0deg, var(--blue), transparent 28%, var(--gold) 52%, transparent 78%, var(--blue));
  animation: spinc 3.6s linear infinite;
}

.p-ring.b { inset: 12%; opacity: 0.75; }
.p-ring.b::before { animation-duration: 5.4s; animation-direction: reverse; }

@keyframes spinc {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.p-glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 244, 214, 0.85), rgba(202, 182, 103, 0.35) 40%, transparent 70%);
  animation: pulse 2.6s ease-in-out infinite;
}

.portal3 i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--u) * 0.35);
  height: calc(var(--u) * 0.35);
  margin: calc(var(--u) * -0.17);
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 calc(var(--u) * 0.6) var(--gold);
  animation: suck3 2.2s cubic-bezier(.5, 0, .9, .6) infinite;
  animation-delay: calc(var(--k) * -0.22s);
  opacity: 0;
}

@keyframes suck3 {
  0% { transform: rotate(calc(var(--k) * 36deg)) translateX(calc(var(--u) * 8)) scale(0.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: rotate(calc(var(--k) * 36deg + 120deg)) translateX(0) scale(0); opacity: 0.2; }
}

.fx-layer { position: absolute; inset: 0; z-index: 7; pointer-events: none; }

.fx-layer .spark {
  width: calc(var(--u) * 0.55);
  height: calc(var(--u) * 0.55);
  margin: calc(var(--u) * -0.27);
}

.fx-layer .flash {
  width: calc(var(--u) * 1.6);
  height: calc(var(--u) * 1.6);
  margin: calc(var(--u) * -0.8);
}

/* scene on small screens */

@media (max-width: 900px) {
  .scene-sticky { grid-template-columns: 1fr; align-content: center; gap: 1.25rem; }
  .scene-stage { --u: 1.55cqw; --ground: 22cqw; aspect-ratio: 4 / 3; order: -1; margin-right: 0; width: 100%; }
  .scene-copy .h2 { font-size: 2rem; }
  .scene-copy .kicker, .scene-intro { display: none; }
  .steps { margin-top: 0.75rem; }
  .steps li { display: none; opacity: 1; transform: none; }
  .steps li.on { display: grid; transform: none; }
  .studio-out { min-width: 0; width: 56cqw; }
  .wall { left: 58cqw; }
  .scene-key { transform-origin: center; }
}

.scene-track.static { height: auto; }
.scene-track.static .scene-sticky { position: relative; height: auto; padding-block: 3rem; }

@media (prefers-reduced-motion: reduce) {
  .char.walking .arm, .char.walking .leg { animation: none !important; }
}