/* SPDX-License-Identifier: LicenseRef-Zyvor-Production-1.0 */
:root {
  --blue:#0071e3; --blue-h:#0077ed; --sky:#2997ff; --green:#30d158; --red:#ff453a; --amber:#ff9f0a;
  --bg:#ffffff; --bg2:#f5f5f7; --ink:#1d1d1f; --soft:#6e6e73; --line:rgba(0,0,0,.1); --card:#fff;
  --ease:cubic-bezier(.28,.11,.32,1);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#000; --bg2:#0b0b0d; --ink:#f5f5f7; --soft:#a1a1a6; --line:rgba(255,255,255,.12); --card:#161618; }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:56px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased; line-height:1.45; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--blue); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:var(--mono); font-size:.92em; }
h1,h2,h3 { margin:0; letter-spacing:-.03em; }
.grad { background:linear-gradient(90deg,#fff 0%,var(--sky) 55%,var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.chapter:not(.dark) .grad { background:linear-gradient(90deg,var(--blue),var(--sky)); -webkit-background-clip:text; background-clip:text; }

/* Nav */
.nav { position:sticky; top:0; z-index:50; background:rgba(22,22,23,.78); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-in { max-width:1080px; margin:0 auto; height:52px; padding:0 22px; display:flex; align-items:center; gap:28px; }
.logo { display:flex; align-items:center; gap:9px; color:#f5f5f7; font-weight:600; font-size:17px; letter-spacing:-.02em; }
.logo:hover { text-decoration:none; }
.links { display:flex; gap:26px; margin-left:auto; }
.links a { color:rgba(245,245,247,.8); font-size:13px; transition:color .2s; }
.links a:hover { color:#fff; text-decoration:none; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--blue); color:#fff; font-size:17px; font-weight:500; padding:12px 24px; border-radius:980px; border:0; cursor:pointer; transition:background .2s, transform .2s var(--ease); font-family:inherit; }
.btn:hover { background:var(--blue-h); text-decoration:none; }
.btn:active { transform:scale(.97); }
.btn.sm { font-size:13px; padding:6px 14px; }
.btn.ghost { background:transparent; color:inherit; box-shadow:inset 0 0 0 1.5px currentColor; }
.btn.ghost:hover { background:rgba(127,127,127,.12); }
.link { font-size:17px; color:var(--sky); }
.cta { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:22px; margin-top:30px; }

/* Hero */
.hero { position:relative; overflow:hidden; background:#000; color:#f5f5f7; text-align:center; padding:96px 22px 0; }
.hero-glow { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,113,227,.45), transparent 70%),
             radial-gradient(ellipse 40% 35% at 85% 85%, rgba(100,210,255,.18), transparent 70%); }
.hero-glow::after { content:""; position:absolute; inset:0; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); }
.hero-copy { position:relative; max-width:880px; margin:0 auto; animation:rise 1s var(--ease) both; }
.eyebrow, .kicker { font-size:15px; font-weight:600; color:var(--sky); margin:0 0 14px; letter-spacing:-.01em; }
.chapter:not(.dark) .kicker { color:var(--blue); }
.hero h1 { font-size:clamp(48px, 8vw, 96px); line-height:1.02; font-weight:700; letter-spacing:-.05em; }
.lede { margin:22px auto 0; max-width:36em; font-size:clamp(18px, 2vw, 22px); color:#a1a1a6; letter-spacing:-.012em; }
.lede code { color:#f5f5f7; }
.frame { position:relative; max-width:1080px; margin:64px auto 0; border-radius:18px 18px 0 0; overflow:hidden; background:#1c1c1e;
  box-shadow:0 -10px 120px rgba(0,113,227,.35), 0 0 0 1px rgba(255,255,255,.14); }
.chrome { height:32px; display:flex; align-items:center; gap:8px; padding:0 14px; background:#2c2c2e; }
.chrome i { width:12px; height:12px; border-radius:50%; background:#ff5f57; }
.chrome i:nth-child(2) { background:#febc2e; } .chrome i:nth-child(3) { background:#28c840; }
.chrome span { margin-left:12px; font-family:var(--mono); font-size:12px; color:#a1a1a6; }
@keyframes rise { from { opacity:0; transform:translateY(22px); } }

/* Stat band */
.band { max-width:1080px; margin:0 auto; padding:64px 22px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat b { display:block; font-size:clamp(44px, 6vw, 72px); font-weight:700; letter-spacing:-.05em; line-height:1; background:linear-gradient(180deg,var(--ink),var(--soft)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span { display:block; margin-top:10px; font-size:15px; color:var(--soft); }

/* Chapters */
.chapter { padding:120px 22px; background:var(--bg); }
.chapter:nth-of-type(even):not(.dark) { background:var(--bg2); }
.chapter.dark { background:#000; color:#f5f5f7; --soft:#a1a1a6; --line:rgba(255,255,255,.12); --card:#161618; }
.ch-head { max-width:880px; margin:0 auto 64px; text-align:center; }
.ch-head h2 { font-size:clamp(36px, 5.6vw, 64px); line-height:1.05; font-weight:700; }
.sub { margin:18px auto 0; max-width:40em; font-size:clamp(17px, 1.8vw, 21px); color:var(--soft); }

/* Stack */
.stack-wrap { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.5fr 1fr; gap:48px; align-items:center; }
.stack { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; perspective:1400px; }
.stack > li { opacity:0; transform:translateY(40px) rotateX(18deg); transition:opacity .8s var(--ease), transform .8s var(--ease), box-shadow .3s, background .3s; transition-delay:calc(var(--i) * 110ms); cursor:default; }
.stack.in > li { opacity:1; transform:none; }
.layer { position:relative; display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:16px; padding:20px 24px; border-radius:20px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), rgba(255,255,255,.03));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent); }
.layer::before { content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:4px; background:var(--c); box-shadow:0 0 16px var(--c); }
.layer:hover, .layer.on { box-shadow:inset 0 0 0 1.5px var(--c), 0 20px 60px color-mix(in srgb, var(--c) 30%, transparent); }
.ln { font-size:22px; font-weight:700; letter-spacing:-.02em; }
.lj { color:#a1a1a6; font-size:16px; }
.lt { font-family:var(--mono); font-size:13px; font-weight:600; padding:5px 11px; border-radius:980px; background:rgba(255,255,255,.07); color:#f5f5f7; }
.hv { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.hv span { padding:14px 8px; text-align:center; border-radius:16px; font-size:15px; font-weight:600; background:rgba(255,159,10,.08); box-shadow:inset 0 0 0 1px rgba(255,159,10,.45); transition:box-shadow .3s; }
.hv:hover span, .hv.on span { box-shadow:inset 0 0 0 1.5px var(--amber), 0 12px 40px rgba(255,159,10,.2); }
.kvm { display:flex; align-items:baseline; gap:14px; padding:18px 24px; border-radius:20px; background:linear-gradient(90deg,#1c1c1e,#26262a); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.kvm.on, .kvm:hover { box-shadow:inset 0 0 0 1.5px #a1a1a6; }
.stack-detail { padding:28px; border-radius:24px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); min-height:200px; }
.stack-detail p:last-child { margin:0; font-size:19px; line-height:1.5; color:#d1d1d6; }

/* Race */
.race { max-width:980px; margin:0 auto; padding:32px; border-radius:28px; background:var(--card); box-shadow:0 0 0 1px var(--line), 0 30px 80px rgba(0,0,0,.08); }
.race-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-bottom:28px; }
.clock { margin-left:auto; font-family:var(--mono); font-size:15px; color:var(--soft); }
.clock b { font-size:28px; color:var(--ink); font-variant-numeric:tabular-nums; }
.seg { display:inline-flex; padding:3px; border-radius:980px; background:rgba(127,127,127,.14); }
.seg button { border:0; background:transparent; color:inherit; font:inherit; font-size:14px; padding:7px 16px; border-radius:980px; cursor:pointer; transition:background .2s, box-shadow .2s; }
.seg button[aria-selected="true"] { background:var(--card); box-shadow:0 1px 4px rgba(0,0,0,.18); font-weight:600; }
.chapter.dark .seg button[aria-selected="true"] { background:#3a3a3c; }
.lane { margin-top:22px; }
.lane-h { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.lane-h b { font-size:20px; letter-spacing:-.02em; }
.lane-h span { font-family:var(--mono); font-size:12px; color:var(--soft); }
.lane-t { margin-left:auto; font-style:normal; font-family:var(--mono); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; }
.win .lane-t { color:var(--blue); }
.track { position:relative; margin-top:10px; height:18px; border-radius:9px; background:rgba(127,127,127,.15); overflow:visible; }
.fill { position:absolute; inset:0 auto 0 0; width:0; border-radius:9px; }
.win .fill { background:linear-gradient(90deg,var(--blue),var(--sky)); box-shadow:0 0 18px rgba(41,151,255,.5); }
.lose .fill { background:linear-gradient(90deg,#8e8e93,#aeaeb2); }
.mark { position:absolute; top:-5px; width:4px; height:28px; border-radius:2px; left:var(--x, 0); opacity:0; transition:opacity .3s; }
.mark.run { background:var(--amber); } .mark.ssh { background:var(--green); }
.mark.on { opacity:1; }
.lane-s { margin-top:8px; font-size:14px; color:var(--soft); min-height:1.4em; }
.lane-s b { color:var(--ink); }
.legend { margin:22px 0 0; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--soft); }
.lg { width:4px; height:14px; border-radius:2px; display:inline-block; }
.lg.run { background:var(--amber); } .lg.ssh { background:var(--green); margin-left:12px; }
.fine { margin:10px 0 0; font-size:13px; color:var(--soft); }

/* Paths */
.paths { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.path { padding:28px; border-radius:26px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.path.win { background:linear-gradient(180deg, rgba(41,151,255,.1), rgba(255,255,255,.02)); box-shadow:inset 0 0 0 1.5px rgba(41,151,255,.5), 0 30px 80px rgba(0,113,227,.18); }
.path h3 { font-size:28px; display:flex; align-items:center; gap:12px; }
.hops { margin-left:auto; font-family:var(--mono); font-size:13px; padding:5px 11px; border-radius:980px; }
.lose .hops { color:var(--red); background:rgba(255,69,58,.12); } .win .hops { color:var(--green); background:rgba(48,209,88,.12); }
.path ol { margin:20px 0 0; padding:0; list-style:none; counter-reset:h; }
.path li { counter-increment:h; display:flex; align-items:center; gap:14px; padding:10px 14px; margin-top:8px; border-radius:14px; background:rgba(255,255,255,.05); font-weight:600; }
.path li::before { content:counter(h); width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:50%; font-family:var(--mono); font-size:13px; background:#2c2c2e; color:#a1a1a6; }
.win li::before { background:var(--blue); color:#fff; }
.path li.pod { box-shadow:inset 0 0 0 1.5px rgba(255,159,10,.6); background:rgba(255,159,10,.08); }
.gone { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px; }
.gone s, .gone span { font-family:var(--mono); font-size:13px; padding:6px 12px; border-radius:980px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.gone s { color:#8e8e93; text-decoration-color:var(--red); }
.gone span { box-shadow:inset 0 0 0 1px rgba(48,209,88,.55); }

/* Bench */
.bench { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.b { padding:26px 28px; border-radius:24px; background:var(--card); box-shadow:0 0 0 1px var(--line); }
.b.wide { grid-column:1 / -1; }
.b h3 { font-family:var(--mono); font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--soft); }
.b .x { margin:6px 0 22px; font-size:40px; font-weight:700; letter-spacing:-.04em; }
.bar, .dots { display:grid; grid-template-columns:90px 1fr 90px; align-items:center; gap:14px; margin-top:12px; font-size:15px; font-weight:600; }
.bar span, .dots span { color:var(--soft); }
.bar i { position:relative; height:22px; border-radius:11px; background:rgba(127,127,127,.14); overflow:hidden; }
.bar i::after { content:""; position:absolute; inset:0 auto 0 0; width:0; border-radius:11px; transition:width 1.4s var(--ease) .2s; }
.b.in .bar i::after { width:var(--w); }
.bar.k i::after { background:linear-gradient(90deg,var(--blue),var(--sky)); box-shadow:0 0 18px rgba(41,151,255,.5); }
.bar.v i::after { background:linear-gradient(90deg,#8e8e93,#aeaeb2); }
.bar b, .dots b { font-family:var(--mono); text-align:right; }
.dots div { display:flex; gap:8px; flex-wrap:wrap; }
.dots i { width:26px; height:26px; border-radius:8px; transform:scale(.4); opacity:0; transition:transform .5s var(--ease), opacity .5s; }
.b.in .dots i { transform:none; opacity:1; }
.dots.k i { background:linear-gradient(145deg,var(--sky),var(--blue)); box-shadow:0 0 12px rgba(41,151,255,.5); }
.dots.v i { background:transparent; box-shadow:inset 0 0 0 1.5px rgba(255,69,58,.6); }
.dots.v b { color:var(--red); }
.honest { max-width:820px; margin:40px auto 0; font-size:15px; color:var(--soft); text-align:center; }
.honest b { color:var(--ink); }

/* Gallery */
.gallery { max-width:1080px; margin:0 auto; text-align:center; }
.gallery .frame { margin-top:28px; border-radius:18px; }
.gallery img { transition:opacity .35s var(--ease); }

/* Tiles */
.tiles { max-width:1080px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile { position:relative; overflow:hidden; padding:30px 28px; border-radius:24px; background:var(--card); box-shadow:0 0 0 1px var(--line); transition:transform .4s var(--ease), box-shadow .4s; }
.tile::before { content:""; display:block; width:40px; height:40px; border-radius:12px; margin-bottom:20px; background:linear-gradient(145deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow:0 8px 24px color-mix(in srgb, var(--c) 40%, transparent); }
.tile.in:hover { transform:translateY(-4px); box-shadow:0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.12); }
.tile h3 { font-size:22px; }
.tile p { margin:8px 0 0; color:var(--soft); font-size:16px; }

/* Code + final */
.code { position:relative; max-width:820px; margin:0 auto; border-radius:22px; background:#161618; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.code pre { margin:0; padding:28px 30px; overflow-x:auto; font-size:15px; line-height:1.7; color:#f5f5f7; }
.code .c { color:#8e8e93; }
.copy { position:absolute; top:14px; right:14px; border:0; font:inherit; font-size:13px; padding:6px 14px; border-radius:980px; background:rgba(255,255,255,.1); color:#f5f5f7; cursor:pointer; }
.copy:hover { background:rgba(255,255,255,.18); }
.final { margin:100px auto 0; text-align:center; }
.final h2 { font-size:clamp(32px, 5vw, 56px); }
.final .link { color:var(--sky); }

.foot { padding:28px 22px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; max-width:1080px; margin:0 auto; font-size:12px; color:var(--soft); }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity:1; transform:none; }

/* Responsive */
@media (max-width:900px) {
  .links { display:none; }
  .nav-in { justify-content:space-between; }
  .band { grid-template-columns:repeat(2,1fr); }
  .stack-wrap, .paths, .bench { grid-template-columns:1fr; }
  .tiles { grid-template-columns:1fr 1fr; }
  .layer { grid-template-columns:1fr auto; }
  .layer .lj { grid-column:1 / -1; grid-row:2; }
}
@media (max-width:560px) {
  .chapter { padding:80px 18px; }
  .hero { padding-top:64px; }
  .tiles, .hv { grid-template-columns:1fr 1fr; }
  .tiles { grid-template-columns:1fr; }
  .race { padding:22px 18px; }
  .clock { margin-left:0; width:100%; }
  .bar, .dots { grid-template-columns:70px 1fr 70px; }
  .dots i { width:18px; height:18px; border-radius:6px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal, .stack > li { opacity:1; transform:none; }
  .bar i::after { width:var(--w); }
  .dots i { transform:none; opacity:1; }
}