/* PXLVZN app sites (stm, lut, hop): shared styles, taken from dwn.pxlvzn.in so every
   app site looks the same. Near-black surfaces, hairline strokes, white primary actions
   and one lime accent. Edit here, then run apps/build.py. */

:root {
  --bg: #0b0b0c;
  --sidebar: #101012;
  --card: #17171a;
  --raised: #212125;
  --stroke: rgba(255, 255, 255, 0.075);
  --stroke-strong: rgba(255, 255, 255, 0.14);
  --text: rgba(255, 255, 255, 0.94);
  --text2: rgba(255, 255, 255, 0.58);
  --text3: rgba(255, 255, 255, 0.38);
  --accent: #ccff4d;
  --accent-ink: #0b0b0c;
  --radius: 20px;
  --max: 1160px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--accent); color: var(--accent-ink); }

.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }

/* ------------------------------------------------------------- wordmark */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  font: 900 24px/1 var(--display);
  letter-spacing: -0.055em;
  color: var(--text);
}
.wordmark svg { width: 0.36em; height: 0.56em; fill: var(--accent); flex: none; }
/* Each app's glyph after its three letters, as in the PXL app tiles. */
.wordmark .g { display: inline-block; flex: none; }
/* Stm: four level bars side by side, bottom-aligned, heights 55/100/35/75% of the x-height
   (matches the app's .mark .bars). Drawn as backgrounds so the empty inline-block sits on the baseline. */
.g-stems { width: 0.36em; height: 0.53em; margin-left: 0.05em; background-repeat: no-repeat;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent));
  background-size: 0.066em 55%, 0.066em 100%, 0.066em 35%, 0.066em 75%;
  background-position: 0 100%, 33.3% 100%, 66.6% 100%, 100% 100%; }

/* ------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  background: rgba(11, 11, 12, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--stroke); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; font-size: 14.5px; color: var(--text2); }
.nav-links a:hover { color: var(--text); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-link {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px;
  color: var(--text2); transition: background 0.15s, color 0.15s;
}
.icon-link:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.icon-link svg { width: 19px; height: 19px; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 46px; padding: 0 22px; border-radius: 13px;
  font: 600 15px/1 var(--font); white-space: nowrap; cursor: pointer; border: 0;
  transition: transform 0.12s ease, background 0.15s, opacity 0.15s;
}
.btn:active { transform: scale(0.985); }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-primary { background: rgba(255, 255, 255, 0.95); color: #000; }
.btn-primary:hover { background: #fff; }
.btn-quiet { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.btn-quiet:hover { background: rgba(255, 255, 255, 0.11); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; border-radius: 15px; }
.btn .sub { font-weight: 500; opacity: 0.55; }

/* ------------------------------------------------------------- hero */

.hero { position: relative; padding: 84px 0 40px; text-align: center; }
.hero::before {
  content: ""; position: absolute; inset: -120px 0 auto; height: 760px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px 340px at 50% 30%, rgba(204, 255, 77, 0.10), transparent 70%),
    radial-gradient(900px 500px at 50% 0%, rgba(255, 255, 255, 0.045), transparent 70%);
}

.pill {
  display: inline-flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 10px;
  border-radius: 999px; border: 1px solid var(--stroke-strong); background: rgba(255, 255, 255, 0.035);
  font-size: 13px; font-weight: 500; color: var(--text2);
}
.pill b { color: var(--text); font-weight: 600; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.pill:hover { border-color: rgba(255, 255, 255, 0.24); }

.hero-mark { display: flex; width: max-content; margin: 34px auto 26px; font-size: clamp(64px, 11vw, 112px); }
.hero-mark .ch, .hero-mark svg, .hero-mark .g { display: inline-block; opacity: 0; }
.ready .hero-mark .ch { animation: rise 0.7s cubic-bezier(.2, .9, .25, 1.05) forwards; }
.ready .hero-mark .ch:nth-child(2) { animation-delay: 0.09s; }
.ready .hero-mark .ch:nth-child(3) { animation-delay: 0.18s; }
.ready .hero-mark svg, .ready .hero-mark .g { transform-origin: bottom; animation: drop 0.62s cubic-bezier(.3, 1.45, .5, 1) 0.42s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(0.35em); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes drop { from { opacity: 0; transform: translateY(-1.1em) scaleY(1.35); } to { opacity: 1; transform: none; } }

h1 {
  margin: 0 auto; max-width: 15ch;
  font: 800 clamp(40px, 6.4vw, 76px)/1.02 var(--display); letter-spacing: -0.035em;
}
h1 .soft { color: var(--text3); }
.lede { margin: 22px auto 0; max-width: 620px; font-size: clamp(17px, 1.6vw, 19px); color: var(--text2); }

.cta { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.meta { margin-top: 16px; font-size: 13px; color: var(--text3); }
.meta a { color: var(--text2); border-bottom: 1px solid var(--stroke-strong); }
.meta a:hover { color: var(--text); }

/* App window */
.showcase { margin-top: 64px; }
.switch {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, 0.05);
  margin-bottom: 22px; position: relative;
}
.switch button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent;
  color: var(--text3); font: 600 13.5px/1 var(--font); cursor: pointer; transition: color 0.2s;
}
.switch button svg { width: 14px; height: 14px; }
.switch button[aria-selected="true"] { color: var(--text); }
.switch .thumb {
  position: absolute; top: 3px; bottom: 3px; left: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.11);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: transform 0.35s cubic-bezier(.3, 1.2, .5, 1), width 0.35s;
}

.window {
  position: relative; margin: 0 auto; max-width: 1100px; aspect-ratio: 2200 / 1520;
  border-radius: 14px; background: var(--sidebar);
  box-shadow: 0 0 0 1px var(--stroke-strong), 0 40px 120px -20px rgba(0, 0, 0, 0.9), 0 0 140px -30px rgba(204, 255, 77, 0.16);
  overflow: hidden;
}
.window img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s ease; }
.window img[hidden] { display: block; opacity: 0; pointer-events: none; }
.caption { margin-top: 16px; font-size: 13.5px; color: var(--text3); }

/* ------------------------------------------------------------- sites strip */

.sites { padding: 54px 0 20px; text-align: center; }
.sites p { margin: 0 0 18px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); font-weight: 600; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .row { display: flex; gap: 10px; width: max-content; animation: slide 40s linear infinite; }
.marquee span {
  height: 38px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 11px;
  background: var(--card); border: 1px solid var(--stroke); color: var(--text2); font-size: 14px; font-weight: 500;
}
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee .row { animation: none; flex-wrap: wrap; justify-content: center; width: auto; } }

/* ------------------------------------------------------------- sections */

section.block { padding: 110px 0 0; }
.kicker { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); }
h2 { margin: 12px 0 0; font: 800 clamp(32px, 4.4vw, 52px)/1.06 var(--display); letter-spacing: -0.03em; max-width: 18ch; }
h2 .accent { color: var(--accent); }
.section-lede { margin: 18px 0 0; max-width: 560px; font-size: 18px; color: var(--text2); }

/* Bento */
.bento { margin-top: 48px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.card {
  position: relative; padding: 26px; border-radius: var(--radius); background: var(--card);
  border: 1px solid var(--stroke); overflow: hidden;
}
.card h3 { margin: 16px 0 6px; font: 650 19px/1.25 var(--display); letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--text2); font-size: 15px; }
.card .ico {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.06); color: var(--text);
}
.card .ico svg { width: 18px; height: 18px; }
.card .ico.lime { background: var(--accent); color: var(--accent-ink); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: 1 / -1; }

.chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 28px; padding: 0 11px; display: inline-flex; align-items: center; border-radius: 8px;
  background: rgba(255, 255, 255, 0.06); font-size: 12.5px; font-weight: 600; color: var(--text2);
}
.chip.on { background: rgba(255, 255, 255, 0.92); color: #000; }

.keys { margin-top: 20px; display: flex; gap: 6px; align-items: center; }
.key {
  min-width: 40px; height: 40px; padding: 0 10px; display: grid; place-items: center; border-radius: 10px;
  background: var(--raised); border: 1px solid var(--stroke-strong); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  font: 600 17px/1 var(--font); color: var(--text);
}

/* Trim timeline illustration */
.timeline { margin-top: 22px; position: relative; height: 54px; border-radius: 10px; overflow: hidden; display: flex; gap: 2px; }
.timeline i { flex: 1; background: linear-gradient(180deg, #2a2f3a, #1b1e25); }
.timeline i:nth-child(3n) { background: linear-gradient(180deg, #34303c, #1e1c24); }
.timeline i:nth-child(4n) { background: linear-gradient(180deg, #2c3a33, #1a221e); }
.timeline .sel {
  position: absolute; top: 0; bottom: 0; left: 28%; width: 38%; border: 2px solid var(--accent); border-radius: 8px;
  box-shadow: 0 0 0 999px rgba(11, 11, 12, 0.55);
}
.timeline .sel::before, .timeline .sel::after {
  content: ""; position: absolute; top: 50%; width: 4px; height: 20px; margin-top: -10px; border-radius: 2px; background: var(--accent);
}
.timeline .sel::before { left: -3px; } .timeline .sel::after { right: -3px; }

.mini-progress { margin-top: 22px; display: grid; gap: 10px; }
.mini-progress div { height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); position: relative; overflow: hidden; display: flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--text2); }
.mini-progress div::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); background: var(--accent); border-radius: 2px; }

.list { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text2); font-size: 15px; }
.list li svg { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--accent); }

/* Cloud spotlight */
.split { margin-top: 48px; display: grid; grid-template-columns: 1fr 1.35fr; gap: 48px; align-items: center; }
.split .window { aspect-ratio: auto; border-radius: 12px; }
.split .window img { position: static; }
.services { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.service { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 6px; border-radius: 11px; background: var(--card); border: 1px solid var(--stroke); font-size: 14px; font-weight: 600; }
.service i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; }
.service i svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linejoin: round; }

.versus { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.versus div { padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); font-size: 13.5px; color: var(--text2); }
.versus b { display: block; margin-bottom: 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text3); }
.versus code { font: 500 12.5px/1.7 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); display: block; }
.versus .bad code { color: var(--text3); text-decoration: line-through; text-decoration-color: rgba(255, 120, 110, 0.6); }
.versus .good { border-color: rgba(204, 255, 77, 0.28); }

/* Privacy trio */
.trio { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.trio .card { padding: 30px; }
.trio .big { font: 800 40px/1 var(--display); letter-spacing: -0.03em; }
.trio .big span { color: var(--accent); }

/* Download */
.download { padding: 120px 0 0; }
.download-box {
  position: relative; padding: 64px 40px; border-radius: 28px; text-align: center; overflow: hidden;
  background: radial-gradient(500px 260px at 50% 0%, rgba(204, 255, 77, 0.12), transparent 70%), var(--sidebar);
  border: 1px solid var(--stroke);
}
.download-box h2 { margin-inline: auto; }
.platforms { margin: 40px auto 0; max-width: 760px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; }
.platform { min-width: 0; padding: 24px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 14px; }
.platform.current { border-color: rgba(204, 255, 77, 0.35); }
.platform header { display: flex; align-items: center; gap: 12px; }
.platform header svg { width: 26px; height: 26px; }
.platform h3 { margin: 0; font: 650 18px/1.2 var(--display); }
.platform small { display: block; color: var(--text3); font-size: 13px; margin-top: 2px; }
.platform .btn { width: 100%; }
.platform .note { margin: 0; font-size: 13px; color: var(--text3); }
.platform .note b { color: var(--text2); font-weight: 600; }

/* Google sign-in notice */
.notice {
  margin: 18px auto 0; max-width: 760px; display: flex; gap: 16px; text-align: left;
  padding: 22px 24px; border-radius: 20px; background: rgba(255, 179, 89, 0.06); border: 1px solid rgba(255, 179, 89, 0.28);
}
.notice > svg { width: 24px; height: 24px; flex: none; color: #ffb359; margin-top: 2px; }
.notice h3 { margin: 0; font: 650 16.5px/1.35 var(--display); color: var(--text); }
.notice p { margin: 8px 0 0; font-size: 14.5px; color: var(--text2); }
.notice p b, .notice li b { color: var(--text); font-weight: 600; }
.notice .small { font-size: 13px; color: var(--text3); }
.notice .small a { color: var(--text2); border-bottom: 1px solid var(--stroke-strong); }
.steps { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: s; }
.steps li {
  counter-increment: s; display: inline-flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px 0 6px;
  border-radius: 10px; background: var(--card); border: 1px solid var(--stroke); font-size: 14px; color: var(--text2);
}
.steps li::before {
  content: counter(s); width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); color: #000; font-size: 12.5px; font-weight: 700;
}
.cloud-note { margin: 18px 0 0; font-size: 13.5px; color: var(--text3); }
.cloud-note a { color: var(--text2); border-bottom: 1px solid var(--stroke-strong); }
@media (max-width: 720px) { .notice { flex-direction: column; gap: 10px; padding: 18px; } }

/* Footer */
footer { margin-top: 120px; padding: 40px 0 56px; border-top: 1px solid var(--stroke); color: var(--text3); font-size: 13.5px; }
footer .wrap { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: start; }
footer nav { display: flex; flex-wrap: wrap; gap: 22px; }
footer nav a:hover { color: var(--text); }
footer .fine { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12.5px; }
footer .fine a { border-bottom: 1px solid var(--stroke-strong); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-mark .ch, .hero-mark svg, .hero-mark .g { opacity: 1; animation: none !important; }
}

/* ------------------------------------------------------------- legal pages */

.doc { padding: 72px 0 0; }
.doc .wrap { max-width: 760px; }
.doc .back { display: inline-flex; align-items: center; gap: 7px; color: var(--text3); font-size: 14px; }
.doc .back:hover { color: var(--text); }
.doc .back svg { width: 15px; height: 15px; }
.prose { margin-top: 26px; }
.prose h1 { margin: 0; max-width: none; text-align: left; font-size: clamp(36px, 5vw, 52px); }
.prose h2 { margin: 48px 0 0; font-size: 24px; max-width: none; letter-spacing: -0.02em; }
.prose h3 { margin: 30px 0 0; font: 650 18px/1.3 var(--display); }
.prose p, .prose li { color: var(--text2); font-size: 16.5px; line-height: 1.7; }
.prose p { margin: 14px 0 0; }
.prose ul { margin: 14px 0 0; padding-left: 20px; }
.prose li { margin: 8px 0; }
.prose li::marker { color: var(--text3); }
.prose strong { color: var(--text); font-weight: 600; }
.prose em { color: var(--text3); font-style: normal; font-size: 14px; }
.prose a { color: var(--text); border-bottom: 1px solid rgba(204, 255, 77, 0.55); }
.prose a:hover { border-bottom-color: var(--accent); }
.prose code { font: 500 0.88em ui-monospace, "SF Mono", Menlo, monospace; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); color: var(--text); }

/* ------------------------------------------------------------- per-app marks and logo animations
   Every app has its own mark and its own intro, each showing what the app does.
   Shared with the apps: tell the app threads when these change. */

@property --x { syntax: "<percentage>"; inherits: true; initial-value: 57%; }

/* Lut: "lut" cut by a thin lime grading bar at 57%. Letters left of the bar are white, right of
   it lime, with a dark gap knocked out around the bar. Static version used in nav, footer, icons. */
.lutw { position: relative; display: inline-block; --x: 57%; --knock: var(--bg); }
.lutw .lime { position: absolute; inset: 0; color: var(--accent); clip-path: inset(-0.3em -0.3em -0.3em var(--x)); }
.lutw .gbar { position: absolute; left: var(--x); top: 0.095em; bottom: -0.065em; width: 0.075em; margin-left: -0.0375em;
  border-radius: 0.02em; background: var(--accent); box-shadow: 0 0 0 0.045em var(--knock); }
.nav .lutw { --knock: #0e0e0f; }

/* Lut intro: the word arrives as flat, washed-out log footage. The grading bar drags in from the
   right, turning everything it passes lime while the colours cycle through the spectrum (a LUT
   remapping them), overshoots to 30%, then settles at 57% as the left side develops to full white. */
.anim-lut .lutw { --x: 104%; }
.anim-lut .base { color: #55565c; opacity: 0; }
.anim-lut .lime { filter: hue-rotate(150deg) saturate(1.6); }
.anim-lut .gbar { opacity: 0; }
.ready .anim-lut .base { animation: lut-log 0.45s ease-out forwards, lut-develop 0.7s ease-out 1.05s forwards; }
.ready .anim-lut .lutw { animation: lut-wipe 1.1s cubic-bezier(.55, 0, .25, 1) 0.45s forwards; }
.ready .anim-lut .gbar { animation: lut-bar-in 0.15s linear 0.45s forwards, lut-glow 0.9s ease-out 1.45s; }
.ready .anim-lut .lime { animation: lut-remap 1.1s ease-in-out 0.45s forwards; }
@keyframes lut-log { to { opacity: 1; } }
@keyframes lut-develop { from { color: #55565c; } to { color: var(--text); } }
@keyframes lut-wipe { 0% { --x: 104%; } 60% { --x: 30%; } 100% { --x: 57%; } }
@keyframes lut-bar-in { to { opacity: 1; } }
@keyframes lut-remap { 0% { filter: hue-rotate(150deg) saturate(1.6); } 55% { filter: hue-rotate(-60deg) saturate(1.3); } 100% { filter: none; } }
@keyframes lut-glow { 0% { box-shadow: 0 0 0 0.045em var(--knock), 0 0 0.5em var(--accent); } 100% { box-shadow: 0 0 0 0.045em var(--knock), 0 0 0 transparent; } }

/* Stm: "stm" plus four lime level bars (55/100/35/75%). Static version is .g-stems above. */
.stmw { display: inline-flex; align-items: baseline; }
.stmw .play { position: relative; display: inline-block; }
.stmw .bars { display: inline-flex; align-items: flex-end; gap: 0.034em; height: 0.53em; margin-left: 0.05em; }
.stmw .bars b { --step: 0.1em; display: block; width: 0.066em; background: var(--accent); transform-origin: 50% 100%; }
.stmw .bars b:nth-child(1) { --i: 0; --h: 0.55; height: 55%; }
.stmw .bars b:nth-child(2) { --i: 1; --h: 1; height: 100%; }
.stmw .bars b:nth-child(3) { --i: 2; --h: 0.35; height: 35%; }
.stmw .bars b:nth-child(4) { --i: 3; --h: 0.75; height: 75%; }

/* Stm intro: a playhead sweeps across and reveals the word (as in the app). Where it stops, the
   whole song appears as one thick bar that thumps twice with the word, then splits into its four
   stems, which spring apart to their own levels and keep dancing like live meters for a while. */
.anim-stm .word { display: inline-block; clip-path: inset(-0.1em 100% -0.2em 0); }
.anim-stm .head { position: absolute; top: 0.08em; bottom: 0.02em; left: 0; width: 0.04em; border-radius: 0.02em; opacity: 0;
  background: var(--accent); box-shadow: 0 0 0.12em var(--accent), 0 0 0.3em rgba(204, 255, 77, 0.6); }
.anim-stm .bars b { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, 0); }
.ready .anim-stm .word { animation: play-in 0.7s cubic-bezier(.65, 0, .35, 1) 0.1s forwards; }
.ready .anim-stm .head { animation: head-run 0.7s cubic-bezier(.65, 0, .35, 1) 0.1s forwards; }
.ready .anim-stm .play { animation: stm-thump 0.6s ease-out 0.95s; }
.ready .anim-stm .bars b { animation: stm-split 1.25s linear 0.75s forwards, stm-dance var(--d) ease-in-out 2.1s 8 alternate; }
.anim-stm .bars b:nth-child(1) { --d: 0.42s; --lo: 0.55; --hi: 1.25; }
.anim-stm .bars b:nth-child(2) { --d: 0.5s; --lo: 0.7; --hi: 1.05; }
.anim-stm .bars b:nth-child(3) { --d: 0.34s; --lo: 0.6; --hi: 1.9; }
.anim-stm .bars b:nth-child(4) { --d: 0.46s; --lo: 0.5; --hi: 1.2; }
@keyframes play-in { to { clip-path: inset(-0.1em 0 -0.2em 0); } }
@keyframes head-run { 0% { left: 0; opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes stm-thump { 0%, 40%, 80% { transform: none; } 15%, 55% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes stm-split {
  0% { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, 0); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  14% { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, calc(1 / var(--h))); }
  24% { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, calc(0.8 / var(--h))); }
  34% { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, calc(1 / var(--h))); }
  44% { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, calc(0.8 / var(--h))); }
  52% { transform: translateX(calc(var(--i) * var(--step) * -1)) scale(2.4, calc(1 / var(--h))); animation-timing-function: cubic-bezier(.3, 1.7, .45, 1); }
  76% { transform: translateX(0) scale(1, 1.18); animation-timing-function: ease-in-out; }
  88% { transform: translateX(0) scale(1, 0.9); }
  100% { transform: none; }
}
@keyframes stm-dance { from { transform: scaleY(var(--hi)); } to { transform: scaleY(var(--lo)); } }
.no-js .anim-stm .word { clip-path: none; }
.no-js .anim-stm .bars b { transform: none; }

/* Hop: "hop" with a lime "o" caught mid-hop, 0.28em above the baseline, over a short shadow dash (as in the app). */
.hopw { position: relative; display: inline-block; }
.hopw .o { display: inline-block; color: var(--accent); transform: translateY(-0.28em); transform-origin: 50% 100%; }
.hopw .sh { position: absolute; left: 0.734em; top: 0.83em; width: 0.29em; height: 0.07em; border-radius: 0.035em; background: rgba(204, 255, 77, 0.38); }

/* Hop intro: the h and p spring up from the baseline (as in the app). Then the lime o bounds in from
   the left, hops onto the top of the h, squashes, hops down into its gap (the p flinches), squashes
   again and floats up to hover over its shadow, bobbing gently. */
.anim-hop { margin-top: calc(34px + 0.5em); }
.anim-hop .ch { display: inline-block; opacity: 0; transform-origin: 50% 100%; }
.anim-hop .o { opacity: 0; }
.anim-hop .sh { opacity: 0; }
.ready .anim-hop .ch { animation: hop-spring 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.05s forwards; }
.ready .anim-hop .ch.p { animation: hop-spring 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.17s forwards, hop-flinch 0.35s ease-out 1.3s; }
.ready .anim-hop .o { animation: hop-o 1.25s linear 0.45s forwards, hop-bob 1.4s ease-in-out 1.75s infinite alternate; }
.ready .anim-hop .sh { animation: hop-sh-in 0.3s ease-out 1.3s forwards, hop-sh-bob 1.4s ease-in-out 1.75s infinite alternate; }
@keyframes hop-spring { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hop-o {
  0% { opacity: 0; transform: translate(-1.5em, 0); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  4% { opacity: 1; }
  16% { transform: translate(-1.04em, -1.12em); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  32% { opacity: 1; transform: translate(-0.58em, -0.73em); animation-timing-function: ease-out; }
  37.6% { transform: translate(-0.58em, -0.73em) scale(1.25, 0.75); animation-timing-function: ease-in; }
  41.6% { transform: translate(-0.58em, -0.73em) scale(0.92, 1.1); animation-timing-function: cubic-bezier(.2, .6, .4, 1); }
  54.4% { transform: translate(-0.29em, -1.08em); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  68% { transform: translate(0, 0); animation-timing-function: ease-out; }
  73.6% { transform: translate(0, 0) scale(1.38, 0.62); animation-timing-function: ease-in-out; }
  80% { transform: translate(0, -0.02em) scale(0.9, 1.12); animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  100% { opacity: 1; transform: translate(0, -0.28em); }
}
@keyframes hop-bob { from { transform: translateY(-0.28em); } to { transform: translateY(-0.36em); } }
@keyframes hop-flinch { 0%, 100% { transform: none; } 30% { transform: translateY(0.05em) scale(1.03, 0.95); } }
@keyframes hop-sh-in { to { opacity: 1; } }
@keyframes hop-sh-bob { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0.75); opacity: 0.6; } }
.no-js .anim-hop .ch, .no-js .anim-hop .o, .no-js .anim-hop .sh { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .anim-lut .lutw { --x: 57%; } .anim-lut .base { color: var(--text); opacity: 1; } .anim-lut .lime { filter: none; } .anim-lut .gbar { opacity: 1; }
  .anim-stm .word { clip-path: none; } .anim-stm .head { display: none; } .anim-stm .bars b { transform: none; }
  .anim-hop .ch, .anim-hop .o, .anim-hop .sh { opacity: 1; }
  .anim-lut *, .anim-lut .lutw, .anim-stm *, .anim-hop * { animation: none !important; }
}

/* ------------------------------------------------------------- app illustrations
   No screenshots yet, so each hero shows what the app does, drawn in HTML. */

.demo {
  position: relative; margin: 0 auto; max-width: 1000px; padding: 0; text-align: left;
  border-radius: 14px; background: var(--sidebar); overflow: hidden;
  box-shadow: 0 0 0 1px var(--stroke-strong), 0 40px 120px -20px rgba(0, 0, 0, 0.9), 0 0 140px -30px rgba(204, 255, 77, 0.16);
}
.demo .bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--stroke); color: var(--text3); font-size: 13px; }
.demo .bar i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.demo .bar span { margin-left: 10px; font-weight: 600; color: var(--text2); }
.demo .bar .r { margin-left: auto; font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text3); }
.demo .body { padding: 22px; }
.drop {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px;
  border: 1.5px dashed rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.02); color: var(--text2); font-size: 14px;
}
.drop .file { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--raised); color: var(--text); flex: none; }
.drop .file svg { width: 18px; height: 18px; }
.drop b { color: var(--text); font-weight: 600; }
.drop small { display: block; color: var(--text3); font-size: 12.5px; margin-top: 2px; }
.drop .go { margin-left: auto; }

/* Stm: four stem lanes */
.lanes { margin-top: 16px; display: grid; gap: 8px; }
.lane { display: grid; grid-template-columns: 92px 1fr 30px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--stroke); }
.lane b { font-size: 13.5px; font-weight: 600; }
.lane small { display: block; color: var(--text3); font: 500 11px/1.3 ui-monospace, "SF Mono", Menlo, monospace; }
.wave { height: 38px; display: flex; align-items: center; gap: 2px; overflow: hidden; }
.wave i { flex: 1; min-width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); height: calc(var(--h) * 1%); }
.lane.on .wave i { background: var(--accent); }
.ready .wave i { animation: wv 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1s); }
@keyframes wv { to { transform: scaleY(0.55); } }
.lane .solo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.06); color: var(--text3); font: 700 11px/1 var(--font); }
.lane.on .solo { background: var(--accent); color: var(--accent-ink); }

/* Lut: before/after scene with a draggable split */
.grade { position: relative; aspect-ratio: 16 / 7.4; border-radius: 12px; overflow: hidden; user-select: none; touch-action: pan-y; cursor: ew-resize; }
.grade .scene { position: absolute; inset: 0; }
.scene .sky { position: absolute; inset: 0 0 38% 0; }
.scene .sun { position: absolute; width: 13%; aspect-ratio: 1; border-radius: 50%; left: 62%; top: 24%; }
.scene .hill { position: absolute; left: -30%; right: -10%; bottom: 0; height: 52%; border-radius: 50% 50% 0 0 / 70% 70% 0 0; }
.scene .hill.b { left: 30%; right: -30%; height: 44%; }
.scene .ground { position: absolute; inset: auto 0 0 0; height: 22%; }
.scene.before .sky { background: linear-gradient(#8fa3b4, #c4cdd2); }
.scene.before .sun { background: #f2f0e6; box-shadow: 0 0 40px #f2f0e6; }
.scene.before .hill { background: #6c7a6e; } .scene.before .hill.b { background: #58665b; }
.scene.before .ground { background: #49524a; }
.scene.after .sky { background: linear-gradient(#253a6b, #e9925a 82%); }
.scene.after .sun { background: #ffd28a; box-shadow: 0 0 60px #ffb35c; }
.scene.after .hill { background: #3d3550; } .scene.after .hill.b { background: #2c2740; }
.scene.after .ground { background: #1d1a29; }
.grade .after-clip { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x, 50%)); }
.grade .handle { position: absolute; top: 0; bottom: 0; left: var(--x, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, .5); }
.grade .handle::after { content: "⟷"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #000; font: 700 15px/1 var(--font); }
.grade .tag { position: absolute; top: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .55); font: 600 12px/1 var(--font); color: #fff; backdrop-filter: blur(6px); }
.grade .tag.l { left: 12px; } .grade .tag.r { right: 12px; }
.swatches { margin-top: 14px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.swatch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--stroke); font-size: 13px; color: var(--text2); min-width: 0; }
.swatch .chipset { display: flex; gap: 3px; flex: none; }
.swatch .chipset i { width: 16px; height: 26px; border-radius: 4px; }
.swatch b { color: var(--text); font-weight: 600; display: block; }
.swatch code { font: 500 11.5px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text3); }
.swatches .arrow-r { color: var(--accent); font-size: 20px; font-weight: 700; }

/* Hop: devices and a hopping file */
.devices { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: end; padding-top: 70px; }
.device { padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); text-align: center; }
.device .shape { margin: 0 auto 12px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 8px; display: grid; place-items: center; color: var(--text3); font: 600 11px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.device.mac .shape { width: 110px; height: 70px; border-bottom-width: 7px; }
.device.win .shape { width: 100px; height: 66px; }
.device.phone .shape { width: 44px; height: 78px; border-radius: 10px; }
.device b { display: block; font-size: 14px; font-weight: 600; }
.device small { color: var(--text3); font-size: 12.5px; }
.device.on { border-color: rgba(204, 255, 77, 0.35); }
.device.on .shape { border-color: var(--accent); color: var(--accent); }
.arc { position: absolute; left: 16.66%; right: 16.66%; top: 0; height: 120px; pointer-events: none; }
.arc svg { width: 100%; height: 100%; overflow: visible; }
.arc path { fill: none; stroke: rgba(204, 255, 77, 0.45); stroke-width: 2; stroke-dasharray: 5 7; vector-effect: non-scaling-stroke; }
.hopper { position: absolute; top: 0; left: 16.66%; width: calc(100% - 33.33%); height: 120px; pointer-events: none; }
.hopper i { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 18px var(--accent); left: 0; top: 92%; }
.transfer { margin-top: 14px; display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--stroke); font-size: 13.5px; }
.transfer .meter { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.transfer .meter i { display: block; height: 100%; width: 64%; background: var(--accent); }
.transfer small { color: var(--text3); font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; }
.code6 { display: inline-flex; gap: 5px; }
.code6 span { width: 26px; height: 32px; border-radius: 7px; display: grid; place-items: center; background: var(--raised); border: 1px solid var(--stroke-strong); font: 700 15px/1 ui-monospace, "SF Mono", Menlo, monospace; }

/* How it works */
.steps3 { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: st; }
.steps3 .card { counter-increment: st; }
.steps3 .card::before { content: counter(st); width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #000; font: 700 14px/1 var(--font); }

/* Terminal */
.term { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #070708; border: 1px solid var(--stroke); font: 500 12.5px/1.75 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text2); overflow-x: auto; white-space: pre; }
.term .p { color: var(--accent); }
.term .c { color: var(--text3); }

/* Part of PXL */
.pxl-note { margin: 22px auto 0; max-width: 760px; display: flex; align-items: center; gap: 16px; text-align: left; padding: 18px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); }
.pxl-note .pm { font: 900 22px/1 var(--display); letter-spacing: -0.055em; display: inline-flex; align-items: baseline; flex: none; }
.pxl-note .pm i { display: inline-block; width: .19em; height: .19em; background: var(--accent); margin-left: .06em; }
.pxl-note p { margin: 0; font-size: 14.5px; color: var(--text2); }
.pxl-note a { color: var(--text); border-bottom: 1px solid rgba(204, 255, 77, 0.55); }
.soon { display: none; }
.is-soon .soon { display: inline; }
.is-soon .not-soon { display: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .span-2, .span-3, .span-4 { grid-column: span 1; }
  .list.cols { columns: 1 !important; }
  .bento .wide { grid-column: span 2; }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .trio { grid-template-columns: 1fr; }
  .steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .hero { padding-top: 56px; }
  .showcase { margin-top: 48px; }
  .window { border-radius: 10px; }
  section.block { padding-top: 84px; }
  .bento { grid-template-columns: 1fr; }
  .bento .wide { grid-column: span 1; }
  .card { padding: 22px; }
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .platform { padding: 18px; }
  .platform .btn .sub { display: none; }
  .versus { grid-template-columns: 1fr; }
  .download-box { padding: 44px 18px; border-radius: 22px; }
  footer .wrap { grid-template-columns: 1fr; }
  .btn-lg { height: 50px; padding: 0 22px; }
  .demo .body { padding: 14px; }
  .drop .go { display: none; }
  .lane { grid-template-columns: 64px 1fr; } .lane .solo { display: none; }
  .swatches { grid-template-columns: 1fr; } .swatches .arrow-r { display: none; }
  .devices { gap: 8px; padding-top: 56px; }
  .device { padding: 10px 6px; }
  .device.mac .shape { width: 72px; height: 48px; } .device.win .shape { width: 66px; height: 44px; } .device.phone .shape { width: 30px; height: 54px; }
  .transfer { grid-template-columns: 1fr; }
  .pxl-note { flex-direction: column; align-items: flex-start; }
}