/* Kevin Park portfolio. Dark neon cards.
   Revolut-style app vocabulary (card, chip, pill, glowing figure) with a Stripe gradient band
   and Coinbase-blue actions. Shape rule: controls are pills; cards are 28px; panels are 20px. */

:root {
  color-scheme: dark;
  /* ground and surfaces */
  --ink-0: #08080C;
  --ink-1: #111117;
  --ink-2: #191922;
  --ink-3: #22222E;
  --line: rgb(255 255 255 / .08);
  --line-2: rgb(255 255 255 / .14);
  /* text */
  --fg: #F4F4F7;
  --fg-2: #B6B6C8;
  --fg-3: #8C8CA2;
  /* color */
  --blue: #0052FF;
  --blue-hover: #1F66FF;
  --blue-ink: #8FB0FF;
  --violet: #8B5CF6;
  --pink: #FF3D8B;
  --amber: #FFB84D;
  --lime: #C8FF3D;
  --cyan: #2DE2E6;
  --grad: linear-gradient(115deg, #2F6BFF 0%, #7B3FF2 38%, #FF3D8B 72%, #FFB84D 100%);
  --grad-cool: linear-gradient(115deg, #2F6BFF 0%, #7B3FF2 55%, #FF3D8B 100%);
  --focus: #8FB0FF;

  /* type */
  --sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-hero: clamp(2.75rem, 1rem + 5.4vw, 6rem);
  --t-display: clamp(2.375rem, 1.3rem + 3.8vw, 4.75rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --t-h3: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem);
  --t-lead: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-label: 0.8125rem;

  /* space and shape */
  --gutter: clamp(16px, 4.2vw, 56px);
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(5.5rem, 12vw, 10rem);
  --r-card: 28px;
  --r-panel: 20px;
  --r-sm: 12px;
  --nav-h: 60px;
  --nav-top: calc(env(safe-area-inset-top, 0px) + 12px);

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--nav-top) + 24px);
  scrollbar-color: var(--ink-3) var(--ink-0);
  background: var(--ink-0);
}
body {
  margin: 0;
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--blue-ink);
  overflow-x: clip;
}
::selection { background: var(--blue); color: #fff; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.kp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; left: 16px; top: 12px; z-index: 60; padding: 10px 18px; border-radius: 999px;
  background: var(--blue); color: #fff; text-decoration: none; font-weight: 600; font-size: .9375rem;
  transform: translateY(-160%); transition: transform 200ms var(--ease-out);
}
.skip:focus-visible { transform: none; }
.wrap { width: 100%; max-width: calc(1280px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.icon { width: 1.125rem; height: 1.125rem; flex: none; }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 50; top: var(--nav-top); left: 0; right: 0; padding-inline: 16px; pointer-events: none; view-transition-name: site-nav; }
.nav__inner {
  pointer-events: auto;
  margin-inline: auto; max-width: 1180px; height: var(--nav-h);
  display: flex; align-items: center; gap: 6px; padding: 0 8px 0 14px;
  border-radius: 999px;
  background: rgb(17 17 23 / .72);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 16px 40px -20px rgb(0 0 0 / .8);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .nav__inner { background: var(--ink-1); } }
@media (prefers-reduced-transparency: reduce) { .nav__inner { background: var(--ink-1); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav__brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; text-decoration: none; font-weight: 650; font-stretch: 108%; letter-spacing: -0.01em; white-space: nowrap; }
.logo { width: 30px; height: 30px; display: block; flex: none; }
.logo svg { width: 100%; height: 100%; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: .9375rem; color: var(--fg-2); transition: color 160ms ease, background-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .nav__links a:hover { color: var(--fg); background: rgb(255 255 255 / .06); } }
.nav .btn { min-height: 44px; margin-left: 6px; }
@media (max-width: 620px) {
  .nav__links a { padding: 0 9px; font-size: .875rem; }
  .nav__brand span:not(.logo) { font-size: .9375rem; }
  .nav .btn--compact .btn__text, .nav .btn--compact .icon--out { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav .btn--compact { padding: 0; width: 44px; justify-content: center; }
}

/* ---------- buttons, pills ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 22px;
  border-radius: 999px; border: 1px solid transparent;
  font-size: 1rem; font-weight: 600; line-height: 1; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .icon { transition: transform 220ms var(--ease-out); }
.btn .icon--brand { width: 1.25rem; height: 1.25rem; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--ghost { border-color: var(--line-2); color: var(--fg); background: rgb(255 255 255 / .02); }
.btn--white { background: #fff; color: var(--ink-0); }
.btn--compact { min-height: 44px; padding: 0 16px; font-size: .9375rem; }
@media (hover: hover) and (pointer: fine) {
  .btn--blue:hover { background: var(--blue-hover); }
  .btn--ghost:hover { background: rgb(255 255 255 / .07); border-color: rgb(255 255 255 / .24); }
  .btn--white:hover { background: #E9E9F2; }
  .btn:hover .icon--down { transform: translateY(2px); }
  .btn:hover .icon--out { transform: translate(2px, -2px); }
  .btn:hover .icon--next { transform: translateX(3px); }
}
.pill {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: var(--t-label); font-weight: 600; letter-spacing: .005em;
  background: rgb(255 255 255 / .07); border: 1px solid var(--line-2); color: var(--fg);
}
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); font-weight: 600; color: var(--fg-2); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgb(255 184 77 / .16); }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: clamp(7rem, 16vw, 14rem); overflow: clip; }
.band {
  position: absolute; z-index: -1; left: -12%; right: -12%; top: 40%; height: clamp(150px, 17vw, 250px);
  transform: skewY(-11deg); transform-origin: 100% 0;
  background:
    linear-gradient(100deg, transparent 0 18%, rgb(255 255 255 / .10) 18% 19%, transparent 19% 100%),
    linear-gradient(100deg, #2F6BFF 0%, #7B3FF2 24%, #FF3D8B 48%, #FFB84D 62%, #2F6BFF 80%, #7B3FF2 100%);
  background-size: 100% 100%, 220% 100%;
  animation: bandflow 26s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .12) 34%, #000 64%);
  mask-image: linear-gradient(90deg, transparent 0%, rgb(0 0 0 / .12) 34%, #000 64%);
}
@keyframes bandflow { from { background-position: 0 0, 0% 0; } to { background-position: 0 0, 220% 0; } }
.band--article { top: 0; height: clamp(160px, 22vw, 280px); opacity: .55; }
.hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 0; align-items: start; }
.hero__text { display: contents; }
.hero h1 { grid-column: 1 / -1; grid-row: 1; }
.hero__lower { grid-column: 1 / span 6; grid-row: 2; }
.hero h1 {
  font-size: var(--t-hero); line-height: .98; letter-spacing: -0.04em; font-weight: 720; font-stretch: 116%;
  max-width: 16ch; padding-bottom: .06em;
}
.story {
  display: inline-block; padding: 0 .2em .04em; margin: 0 -.02em; border-radius: .26em;
  background: var(--grad-cool); color: #fff; font-style: italic; font-weight: 700;
  box-shadow: 0 10px 40px -12px rgb(123 63 242 / .7);
  transform: rotate(-2deg);
}
.hero__sub { margin-top: 1.75rem; max-width: 30ch; font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); }
.hero .actions { margin-top: 2.5rem; }
.hero__card { grid-column: 8 / span 5; grid-row: 2; justify-self: end; align-self: center; width: min(100%, 470px); margin-top: clamp(1rem, 2vw, 2rem); display: block; text-decoration: none; perspective: 1100px; border-radius: 26px; }
.hero__card:focus-visible { outline-offset: 10px; }
.card3d {
  --rx: 0deg; --ry: 0deg; --mx: 30%; --my: 20%;
  display: block; aspect-ratio: 1.586; border-radius: 24px; position: relative;
  transform: rotateZ(-7deg) rotateX(calc(8deg + var(--rx))) rotateY(calc(-14deg + var(--ry)));
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease-out);
  box-shadow: 0 50px 90px -40px rgb(47 107 255 / .6), 0 30px 60px -30px rgb(255 61 139 / .45);
}
.card3d.is-tracking { transition: none; }
.card3d__face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 6px; padding: clamp(16px, 5%, 26px);
  color: #fff;
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 255 255 / .22), transparent 45%),
    radial-gradient(90% 80% at 100% 100%, #FF3D8B 0%, transparent 55%),
    radial-gradient(80% 90% at 90% 0%, #FFB84D 0%, transparent 45%),
    linear-gradient(135deg, #2F6BFF 0%, #6C3BF0 55%, #B03AD8 100%);
  border: 1px solid rgb(255 255 255 / .28);
}
.card3d__top { display: flex; justify-content: space-between; align-items: center; }
.card3d__kicker { font-size: var(--t-label); font-weight: 600; letter-spacing: .01em; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / .18); }
.card3d__art { align-self: center; min-height: 0; height: 100%; opacity: .9; display: flex; align-items: center; }
.card3d__art .lines { height: 100%; max-height: 110px; width: auto; max-width: 72%; }
.card3d__line { font-size: clamp(1.25rem, 0.9rem + 1.2vw, 1.75rem); font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.08; max-width: 12ch; }
.card3d__bottom { display: flex; align-items: center; margin-top: 6px; }
.card3d__brand { font-weight: 800; font-stretch: 120%; letter-spacing: .02em; font-size: 1.0625rem; }
.card3d__go { width: 1.5rem; height: 1.5rem; opacity: .9; }
.card3d__sheen { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at var(--mx) var(--my), rgb(255 255 255 / .38), transparent 70%); mix-blend-mode: overlay; }
.lines__thin path { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lines__main { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.lines__node { fill: #fff; }

/* ---------- statement ---------- */
.statement { padding-block: clamp(2rem, 6vw, 5rem) var(--section); }
.statement__lead { font-size: var(--t-display); line-height: 1.04; letter-spacing: -0.035em; font-weight: 700; font-stretch: 112%; max-width: 20ch; }
.reveal span { color: var(--fg); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal span { color: var(--fg-3); animation: lit linear both; animation-timeline: view(); animation-range: entry 10% cover 42%; }
  }
}
@keyframes lit { to { color: var(--fg); } }
.statement__body { margin-top: clamp(2rem, 4vw, 3rem); margin-left: auto; max-width: 40rem; display: grid; gap: 1rem; font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); }

/* ---------- selected work ---------- */
.h2 { font-size: var(--t-h2); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700; font-stretch: 114%; margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.h2--sm { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.375rem); }
.work { padding-bottom: var(--section); }
.work__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.tile {
  position: relative; isolation: isolate; border-radius: var(--r-card); overflow: hidden;
  display: grid; gap: 1.5rem; padding: clamp(22px, 3vw, 40px);
  transition: transform 300ms var(--ease-out), border-color 200ms ease;
}
.tile h3 { font-size: var(--t-h3); line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; font-stretch: 108%; max-width: 20ch; }
.tile h3 a { text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.tile:has(h3 a:focus-visible) { outline: 2px solid var(--focus); outline-offset: 4px; }
.tile h3 a:focus-visible { outline: none; }
.tile__desc { color: var(--fg-2); line-height: 1.6; max-width: 46ch; }
.tile__text { display: grid; gap: 1rem; align-content: start; }
.tile__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .9375rem; margin-top: .25rem; }
.tile__go .icon { transition: transform 240ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover { transform: translateY(-4px); }
  .tile:hover .tile__go .icon { transform: translateX(4px); }
}
.tile--ml { grid-column: 1 / span 7; color: #fff; grid-template-rows: auto 1fr; background: linear-gradient(150deg, #0052FF 0%, #2F6BFF 55%, #5B45F5 100%); }
.tile--ml .tile__desc { color: rgb(255 255 255 / .86); }
.result__chip {
  display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px;
  background: #fff; color: var(--ink-0); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em;
}
.tile__impact { font-size: .9375rem; color: #fff; max-width: 44ch; padding-left: 14px; border-left: 1px solid rgb(255 255 255 / .4); }
.tile--lc { grid-column: 8 / span 5; color: #fff; grid-template-rows: auto 1fr; background: linear-gradient(150deg, #5B45F5 0%, #7B3FF2 50%, #A8329E 100%); }
.tile--lc .tile__desc { color: rgb(255 255 255 / .86); }
.result--row { display: flex; flex-wrap: wrap; gap: 8px; }
.tile--lc .tile__art { align-self: end; background-image: radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1px); background-size: 18px 18px; }
.tile--lc .dg-lc { width: 100%; max-width: 420px; margin-inline: auto; display: block; }
.tile--lc .dg-arc { stroke: #fff; }
.tile--lc .dg-ring { stroke: rgb(255 255 255 / .4); }
.tile--lc .dg-label { fill: #fff; }
.tile--compact.tile--ml, .tile--compact.tile--lc { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; grid-template-rows: auto; align-items: center; }
.tile--compact .tile__art { max-width: 460px; justify-self: end; width: 100%; }
.tile--compact .dg-pair { grid-template-columns: 1fr; }

.panel {
  position: relative; border-radius: var(--r-panel); background: #0C0C12; border: 1px solid var(--line);
  background-image: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1px); background-size: 18px 18px;
  padding: clamp(14px, 2.4vw, 28px);
}
.tile__art.panel { align-self: end; }
.tile--ml .tile__art.panel { background-color: transparent; border: 0; border-radius: 0; padding: 0; background-image: radial-gradient(rgb(255 255 255 / .16) 1px, transparent 1px); background-size: 18px 18px; }
.tile--ml .dg-state__cap { color: rgb(255 255 255 / .9); }
.tile--ml .dg-flow--blocked { stroke: rgb(255 255 255 / .55); }
.tile--ml .dg-accounts rect { fill: rgb(255 255 255 / .12); stroke: #fff; }
.tile--ml .dg-accounts path { stroke: #fff; }
.tile--ml .dg-tokens circle, .tile--ml .dg-tokens rect { fill: rgb(255 255 255 / .12); stroke: #fff; }
.tile--compact.tile--ml { align-items: center; }

/* ---------- diagrams ---------- */
.dg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2vw, 24px); }
.dg-state { display: grid; gap: 10px; }
.dg-state__cap { font-size: var(--t-small); color: var(--fg-2); text-align: center; text-wrap: balance; }
.dg-state__cap .dot { display: inline-block; vertical-align: .05em; margin-right: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dot--stop { background: var(--pink); box-shadow: 0 0 0 4px rgb(255 61 139 / .18); }
.dot--go { background: var(--lime); box-shadow: 0 0 0 4px rgb(200 255 61 / .18); }
.dg-label { font-family: var(--sans); font-size: 26px; font-weight: 500; fill: var(--fg); }
.dg-label--layer { font-size: 26px; font-weight: 800; font-stretch: 118%; letter-spacing: .04em; }
.dg-label--stage { font-size: 19px; font-weight: 650; }
.dg-tokens circle, .dg-tokens rect { fill: rgb(45 226 230 / .08); stroke: var(--cyan); stroke-width: 1.6; }
.dg-accounts rect { fill: rgb(139 92 246 / .12); stroke: #A78BFA; stroke-width: 1.6; }
.dg-accounts path { stroke: #A78BFA; stroke-width: 1.4; fill: none; opacity: .5; }
.dg-wall { fill: var(--pink); filter: drop-shadow(0 0 14px rgb(255 61 139 / .55)); }
.dg-stop { stroke: var(--pink); stroke-width: 3; stroke-linecap: round; fill: none; }
.dg-flow { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.dg-flow--blocked { stroke: rgb(255 255 255 / .32); stroke-dasharray: 2 7; }
.dg-flow--open { stroke: var(--lime); }
.dg-head { fill: var(--lime); }
.dg-layer rect { fill: url(#kp-grad-v); }
.dg-layer { filter: drop-shadow(0 0 16px rgb(123 63 242 / .6)); }
.dg-arc { fill: none; stroke: url(#kp-grad-h); stroke-width: 3.2; stroke-linecap: round; }
.dg-head--arc { fill: #fff; }
.dg-ring { fill: none; stroke: rgb(255 255 255 / .22); stroke-width: 1; stroke-dasharray: 2 7; }
.dg-node { fill: #fff; filter: drop-shadow(0 0 8px rgb(255 255 255 / .7)); }
.dg-col { fill: rgb(255 255 255 / .03); stroke: rgb(255 255 255 / .2); stroke-width: 1.4; }
.dg-col--hot { fill: rgb(139 92 246 / .16); stroke: url(#kp-grad-v); stroke-width: 2; }
.dg-label--col { font-size: 22px; font-weight: 650; font-stretch: 108%; }
.dg-flow--path { stroke-width: 3; filter: drop-shadow(0 0 10px rgb(200 255 61 / .35)); }
.dg-stopdot { fill: var(--ink-0); stroke: var(--lime); stroke-width: 2.4; }
.dg-origin { fill: var(--lime); filter: drop-shadow(0 0 10px rgb(200 255 61 / .6)); }
.dg-arc--line { stroke: url(#kp-grad-line); stroke-width: 3.2; }

/* ---------- experience ---------- */
.exp { padding-bottom: var(--section); }
.exp__profile { font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.roles { display: grid; gap: 14px; }
.role {
  display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: var(--gap);
  padding: clamp(20px, 2.6vw, 34px); border-radius: var(--r-card); background: var(--ink-1); border: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.role:first-child { background: linear-gradient(var(--ink-1), var(--ink-1)) padding-box, var(--grad-cool) border-box; border: 1px solid transparent; }
.role__when { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-2); align-self: start; padding-top: 4px; }
.role__arrow { width: .95rem; height: .95rem; color: var(--fg-3); }
.role__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: var(--t-h3); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; font-stretch: 106%; }
.role__at { font-size: .6em; font-weight: 700; font-stretch: 112%; letter-spacing: .01em; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .08); border: 1px solid var(--line-2); transform: translateY(-3px); }
.role__place { margin-top: 6px; color: var(--fg-3); font-size: var(--t-small); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tags li { font-size: var(--t-label); font-weight: 550; padding: 5px 11px; border-radius: 999px; background: rgb(255 255 255 / .05); border: 1px solid var(--line); color: var(--fg-2); }
.role__bullets { margin-top: 18px; display: grid; gap: 12px; max-width: 70ch; }
.role__bullets li { position: relative; padding-left: 22px; color: var(--fg-2); line-height: 1.6; }
.role__bullets li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 8px; border-radius: 3px; background: var(--grad-cool); }
mark.fig { color: #DFFF8A; font-weight: 650; background: rgb(200 255 61 / .12); padding: 1px 7px; border-radius: 7px; box-shadow: 0 2px 14px -4px rgb(200 255 61 / .35); -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
.exp__extra { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-top: 14px; }
.card { border-radius: var(--r-card); background: var(--ink-1); border: 1px solid var(--line); padding: clamp(20px, 2.6vw, 30px); display: grid; gap: 8px; align-content: start; color: var(--fg-2); }
.card__h { font-size: 1.0625rem; font-weight: 650; color: var(--fg); margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: var(--t-small); padding: 7px 14px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); color: var(--fg); }

/* ---------- strengths bento ---------- */
.strengths { padding-bottom: var(--section); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.bento__cell {
  border-radius: var(--r-card); padding: clamp(22px, 2.6vw, 32px); min-height: 190px;
  display: grid; align-content: end;
  background: var(--ink-1); border: 1px solid var(--line);
  font-size: clamp(1.25rem, 1rem + .7vw, 1.625rem); line-height: 1.25; letter-spacing: -0.02em; font-weight: 650; font-stretch: 106%;
}
.bento__cell--1, .bento__cell--2 { grid-column: span 3; }
.bento__cell--3, .bento__cell--4, .bento__cell--5 { grid-column: span 2; }
.bento__cell--2 { background: var(--ink-2); }
.bento__cell--4 { background: var(--blue); border-color: transparent; color: #fff; }
.bento__cell--3 { background: var(--grad-cool); border-color: transparent; color: #fff; }
.bento__cell--5 { background: var(--lime); color: #0B0D05; border-color: transparent; }

/* ---------- closing ---------- */
.closing { padding-bottom: clamp(3rem, 6vw, 5rem); }
.closing__card {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 36px;
  padding: clamp(2.5rem, 7vw, 6rem) clamp(1.5rem, 6vw, 5rem);
  display: grid; justify-items: start; gap: 2rem;
  background: var(--grad-cool); background-size: 180% 180%;
  animation: shift 16s var(--ease-in-out) infinite alternate;
}
@keyframes shift { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }
.closing__glow { position: absolute; z-index: -1; inset: auto -10% -60% auto; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .22); filter: blur(60px); }
.closing__url { font-size: clamp(1.875rem, 0.8rem + 4.6vw, 5rem); line-height: 1; letter-spacing: -0.04em; font-weight: 750; font-stretch: 112%; color: #fff; overflow-wrap: normal; }

/* ---------- footer ---------- */
.foot { padding-block: 1.5rem 3rem; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--fg-3); font-size: var(--t-small); }
.foot__row .logo { width: 24px; height: 24px; }
.foot__row a { margin-left: auto; color: var(--fg-2); text-underline-offset: .25em; text-decoration-color: var(--line-2); }
.foot__row a:hover { color: var(--fg); }

/* ---------- article ---------- */
.progress { position: fixed; z-index: 55; top: 0; left: 0; right: 0; height: 3px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(0); display: none; }
@supports (animation-timeline: scroll()) {
  .progress { display: block; animation: grow linear both; animation-timeline: scroll(root); }
}
@keyframes grow { to { transform: scaleX(1); } }
.art-head { position: relative; isolation: isolate; overflow: clip; padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(2.5rem, 6vw, 5rem)); }
.art-head__in { display: grid; justify-items: start; gap: 1.25rem; }
.art-head:not(:has(.art-head__in)) { display: grid; justify-items: start; gap: 1.25rem; }
.crumb { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-2); text-decoration: none; font-size: .9375rem; font-weight: 550; }
.crumb:hover { color: var(--fg); }
.crumb .icon { width: 1rem; height: 1rem; transition: transform 220ms var(--ease-out); }
.crumb:hover .icon { transform: translateX(-3px); }
.art-head h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -0.038em; font-weight: 720; font-stretch: 114%; max-width: 16ch; }
.deck { font-size: var(--t-lead); color: var(--fg-2); max-width: 40ch; line-height: 1.45; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: .75rem; }
.facts li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--ink-1); border: 1px solid var(--line); font-size: .9375rem; }
.facts__k { color: var(--fg-3); font-size: var(--t-label); font-weight: 600; }
.facts__v { padding: 4px 12px; border-radius: 999px; background: var(--ink-2); font-weight: 600; }
.facts__v--grad { background: linear-gradient(115deg, #0052FF 0%, #7B3FF2 100%); color: #fff; text-decoration: none; }

.art { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--section); }
.art--single { grid-template-columns: minmax(0, 1fr); }
.rail__inner { position: sticky; top: calc(var(--nav-top) + var(--nav-h) + 32px); }
.rail__h { font-size: var(--t-label); font-weight: 600; color: var(--fg-3); margin-bottom: 12px; }
.rail ol { display: grid; gap: 4px; }
.rail a { display: block; padding: 8px 12px; border-radius: 12px; font-size: .9375rem; line-height: 1.35; color: var(--fg-3); text-decoration: none; transition: color 160ms ease, background-color 160ms ease; }
.rail a:hover { color: var(--fg); }
.rail a[aria-current="true"] { color: var(--fg); background: var(--ink-2); }
.flow { min-width: 0; max-width: 54rem; }
.flow > * + * { margin-top: 1.25rem; }
.flow > h2 { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; font-stretch: 110%; margin-top: clamp(3.5rem, 7vw, 5.5rem); scroll-margin-top: calc(var(--nav-h) + var(--nav-top) + 24px); max-width: 36rem; }
.prose, .flow > .issues, .flow > .pull { max-width: 38rem; }
.prose { font-size: 1.125rem; line-height: 1.72; color: #DADAE4; }
.prose i { font-style: italic; }
.issues { display: grid; gap: 10px; }
.issues li { padding: 16px 18px; border-radius: 16px; background: var(--ink-1); border: 1px solid var(--line); color: #DADAE4; line-height: 1.6; }
.issues__k { font-weight: 700; color: var(--fg); }
.tldr { border-radius: var(--r-card); padding: clamp(22px, 3vw, 36px); background: linear-gradient(var(--ink-1), var(--ink-1)) padding-box, var(--grad) border-box; border: 1px solid transparent; }
.flow .tldr h2 { font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; color: var(--fg-2); margin: 0 0 14px; }
.tldr dl { display: grid; gap: 14px; }
.tldr dl > div { display: grid; grid-template-columns: 8rem 1fr; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.tldr dl > div:first-child { padding-top: 0; border-top: 0; }
.tldr dt { color: var(--fg-3); font-weight: 600; font-size: .9375rem; }
.tldr dd { font-size: 1.125rem; line-height: 1.5; font-weight: 550; }
.fig { margin-block: clamp(2rem, 4vw, 3rem); }
.fig__panel { position: relative; }
.fig figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: var(--t-small); color: var(--fg-2); }
.fig__panel--grad { border-radius: var(--r-card); padding: clamp(2rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 3.5rem); background: var(--grad-cool); }
.specimen { font-size: clamp(2.25rem, 1rem + 5vw, 5.25rem); line-height: .98; letter-spacing: -0.04em; font-weight: 750; font-stretch: 116%; color: #fff; max-width: 12ch; }
.fig__panel--proof { padding: clamp(18px, 3vw, 32px); background-image: none; background: var(--ink-1); }
.proof__host { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); font-size: .9375rem; font-weight: 600; margin-bottom: 14px; text-decoration: none; transition: border-color 160ms ease, background-color 160ms ease; }
.proof__host .icon { width: .95rem; height: .95rem; color: var(--fg-2); }
@media (hover: hover) and (pointer: fine) { .proof__host:hover { border-color: var(--line-2); background: var(--ink-3); } }
.proof__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgb(200 255 61 / .18); }
.proof { display: grid; }
.proof > div { display: grid; grid-template-columns: 11rem 1fr; gap: 16px; padding-block: 14px; border-top: 1px solid var(--line); }
.proof dt { color: var(--fg-3); font-size: var(--t-small); font-weight: 600; }
.proof dd { line-height: 1.55; }
.proof > div:first-child dd { font-size: 1.25rem; font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; }
.fig__panel--lc .dg-lc { max-width: 480px; margin-inline: auto; }
.fig__panel--step .dg-step { display: block; width: 100%; max-width: 620px; margin-inline: auto; }
.fig__panel--terms { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.terms { display: grid; gap: 6px; }
.terms__k { font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; color: rgb(255 255 255 / .78); }
.terms__v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45em; row-gap: .1em; color: #fff; font-weight: 750; font-stretch: 114%; letter-spacing: -0.035em; line-height: 1.02; }
.terms__sep { font-weight: 400; opacity: .5; }
.terms--tried .terms__v { font-size: clamp(1.375rem, 1rem + 1.6vw, 2.25rem); color: rgb(255 255 255 / .62); }
.terms--tried .terms__v span:not(.terms__sep) { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgb(255 255 255 / .7); }
.terms--final .terms__v { display: grid; font-size: clamp(2rem, 1rem + 3.6vw, 4rem); }
.fig__cta { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--fg); font-weight: 600; text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease; }
.fig__cta .icon { width: .9rem; height: .9rem; }
.fig__cta:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .fig__cta:hover { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .24); } }
.proof--links > div { grid-template-columns: 13rem 1fr; }
.proof--links dt a { color: var(--fg-2); text-decoration: none; }
.proof--links dt a .icon { display: inline-block; width: .85rem; height: .85rem; margin-left: 6px; vertical-align: -0.1em; }
@media (hover: hover) and (pointer: fine) { .proof--links dt a:hover { color: var(--fg); } }
.prose a.inline { color: #fff; text-decoration: underline; text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .prose a.inline:hover { text-decoration-color: var(--pink); } }
.pull { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.25; letter-spacing: -0.025em; font-weight: 650; font-stretch: 106%; padding-left: 22px; border-left: 1px solid var(--violet); }
.next { padding-bottom: clamp(3rem, 6vw, 5rem); }
.next .tile { grid-column: 1 / -1; }

.zoom-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: zoom-in; color: var(--fg);
  background: rgb(255 255 255 / .1); border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.zoom-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .zoom-btn:hover { background: rgb(255 255 255 / .18); } }

/* ---------- zoom dialog ---------- */
.zoom { width: min(100vw - 24px, 1280px); max-width: none; max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--line-2); border-radius: 24px; background: var(--ink-1); color: var(--fg); transform-origin: var(--zx, 50%) var(--zy, 50%); box-shadow: 0 40px 100px -30px rgb(0 0 0 / .9); }
.zoom[open] { animation: zoom-in 240ms var(--ease-out); }
.zoom::backdrop { background: rgb(8 8 12 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade-in 200ms ease; }
.zoom__bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 12px 12px 22px; border-bottom: 1px solid var(--line); background: var(--ink-1); }
.zoom__title { font-weight: 650; }
.zoom__close { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--line-2); cursor: pointer; transition: transform 160ms var(--ease-out); }
.zoom__close:active { transform: scale(.94); }
.zoom__body { overflow: auto; padding: clamp(12px, 3vw, 28px); }
.zoom__body .panel { min-width: 760px; }
@keyframes zoom-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 404 ---------- */
.nf { padding-top: calc(var(--nav-top) + var(--nav-h) + clamp(4rem, 10vw, 8rem)); padding-bottom: var(--section); display: grid; justify-items: start; gap: 1.5rem; }
.nf__code { font-size: clamp(4rem, 2rem + 8vw, 6rem); line-height: .9; font-weight: 800; font-stretch: 125%; letter-spacing: -0.04em; color: var(--violet); }
.nf h1 { font-size: var(--t-h2); letter-spacing: -0.035em; font-weight: 700; font-stretch: 112%; }

/* ---------- transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .art { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .tile--ml, .tile--lc { grid-column: 1 / -1; }
  .tile--ml { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero__lower, .hero__card { grid-column: 1 / -1; }
  .hero__card { grid-row: 3; justify-self: center; width: min(88%, 400px); margin-top: 3rem; }
  .card3d { transform: rotateZ(-4deg) rotateX(calc(6deg + var(--rx))) rotateY(calc(-8deg + var(--ry))); }
  .role { grid-template-columns: 1fr; gap: 12px; }
  .exp__extra { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bento__cell--1, .bento__cell--2, .bento__cell--3, .bento__cell--4 { grid-column: span 1; }
  .bento__cell--5 { grid-column: 1 / -1; }
  .tile--compact.tile--ml, .tile--compact.tile--lc { grid-template-columns: 1fr; }
  .tile--compact .tile__art { justify-self: stretch; max-width: none; }
}
@media (max-width: 640px) {
  .dg-pair { grid-template-columns: 1fr; }
  .fig__panel:has(.dg-pair) { padding-bottom: 68px; }
  .bento { grid-template-columns: 1fr; }
  .bento__cell { grid-column: 1 / -1 !important; min-height: 0; gap: 1.25rem; }
    .tldr dl > div, .proof > div { grid-template-columns: 1fr; gap: 4px; }
  .statement__body { margin-left: 0; }
  .foot__row a { margin-left: 0; }
  .hero h1 { max-width: none; }
  .closing__url { font-size: clamp(1.75rem, 1rem + 5vw, 2.5rem); }
  .band { top: 58%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .band, .closing__card { animation: none !important; }
  .card3d { transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .zoom[open] { animation: fade-in 120ms ease; }
  @view-transition { navigation: none; }
}