/* 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 horizontal lime track lines, left-aligned, widths 100/60/85/42% (matches the app's
   .mark .bars). Drawn as backgrounds so the empty inline-block sits on the baseline. */
.g-stems { width: 0.5em; height: 0.52em; margin-left: 0.08em; 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: 100% 0.075em, 60% 0.075em, 85% 0.075em, 42% 0.075em;
  background-position: 0 0, 0 33.333%, 0 66.667%, 0 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; }
/* Room for the heavy glyphs while they animate (WebKit clips filter: blur to the box). */
.hero-mark .ch { padding: .1em .2em .3em; margin: -.1em -.2em -.3em; }
@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 develops from a hairline. Each letter fades in at weight 100 and swells to
   the full 900, one after another, like pulling up the contrast on flat log footage. Then the
   grading bar drags in from the right, turning everything it passes lime, overshoots to 30% and
   settles at 57%. The colour only ever changes where the bar is, so there is no flicker. */
.anim-lut .lutw { --x: 104%; }
.anim-lut .base b { display: inline-block; font-weight: inherit; opacity: 0; font-weight: 100; }
.anim-lut .lime { z-index: 1; opacity: 0; }
.anim-lut .gbar { z-index: 2; opacity: 0; }
.ready .anim-lut .base b { animation: lut-develop 0.9s cubic-bezier(.3, 0, .15, 1) forwards; }
.ready .anim-lut .base b:nth-child(2) { animation-delay: 0.1s; }
.ready .anim-lut .base b:nth-child(3) { animation-delay: 0.2s; }
@keyframes lut-develop { 0% { opacity: 0; font-weight: 100; } 25% { opacity: 1; } 100% { opacity: 1; font-weight: 900; } }
.ready .anim-lut .lutw { animation: lut-wipe 1.15s cubic-bezier(.55, 0, .25, 1) 1.05s forwards; }
.ready .anim-lut .gbar, .ready .anim-lut .lime { animation: lut-bar-in 0.2s ease-out 1.05s forwards, lut-glow 1s ease-out 1.75s; }
.ready .anim-lut .lime { animation: lut-bar-in 0s linear 1.05s forwards; }
@keyframes lut-wipe { 0% { --x: 104%; } 60% { --x: 30%; } 100% { --x: 57%; } }
@keyframes lut-bar-in { to { opacity: 1; } }
@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; } }
.no-js .anim-lut .lutw { --x: 57%; } .no-js .anim-lut .base b { opacity: 1; font-weight: 900; } .no-js .anim-lut .gbar, .no-js .anim-lut .lime { opacity: 1; }

/* Tag: "tag" with a lime strike through it, with a dark gap knocked out around the strike
   (matches the app's .mark .strike). */
.tagw { position: relative; display: inline-block; padding-right: 0.055em; --knock: var(--bg); }
.tagw .strike { position: absolute; left: -0.1em; right: -0.08em; top: 0.53em; height: 0.13em; border-radius: 0.1em;
  background: var(--accent); box-shadow: 0 0 0 0.05em var(--knock); }
.nav .tagw { --knock: #0e0e0f; }

/* Tag intro, as in the app's splash: the letters rise out of a blur, then the strike swipes
   through them from the left, the way Tag strikes out each tag it removes. */
.anim-tag .strike { transform: scaleX(0); transform-origin: left; }
.ready .anim-tag .strike { animation: tag-swipe 0.5s cubic-bezier(.6, 0, .2, 1) 0.6s forwards; }
@keyframes tag-swipe { to { transform: none; } }
.no-js .anim-tag .ch { opacity: 1; } .no-js .anim-tag .strike { transform: none; }

/* Stm: "stm" plus four lime track lines. Static version is .g-stems above. */
.stmw { display: inline-flex; align-items: baseline; }
.stmw .bars { display: inline-block; width: 0.5em; margin-left: 0.08em; vertical-align: baseline; }
.stmw .bars b { display: block; height: 0.075em; border-radius: 0.04em; background: var(--accent); }
.stmw .bars b + b { margin-top: 0.0733em; }
.stmw .bars b:nth-child(1) { --i: 0; --w: 1; width: 100%; }
.stmw .bars b:nth-child(2) { --i: 1; --w: .6; width: 60%; }
.stmw .bars b:nth-child(3) { --i: 2; --w: .85; width: 85%; }
.stmw .bars b:nth-child(4) { --i: 3; --w: .42; width: 42%; }

/* Stm intro (same as the app's splash, stm/ui/styles.css): the letters rise in like the rest of
   the family, then one lime line (the whole song) draws across where the tracks go and splits
   into the four track lines, which slide apart to their lanes and trim to their lengths. */
.anim-stm .bars b { --pitch: 0.1483em; transform-origin: 0 50%; opacity: 0;
  transform: translateY(calc((1.5 - var(--i)) * var(--pitch))) scaleX(0); }
.ready .anim-stm .bars b { animation: stm-draw .4s cubic-bezier(.3, .9, .3, 1) .55s forwards, stm-split .6s cubic-bezier(.65, 0, .35, 1) 1s forwards; }
@keyframes stm-draw { to { opacity: 1; transform: translateY(calc((1.5 - var(--i)) * var(--pitch))) scaleX(calc(1 / var(--w))); } }
@keyframes stm-split { from { opacity: 1; transform: translateY(calc((1.5 - var(--i)) * var(--pitch))) scaleX(calc(1 / var(--w))); }
  to { opacity: 1; transform: none; } }
.no-js .anim-stm .ch { opacity: 1; } .no-js .anim-stm .bars b { opacity: 1; transform: none; }

/* Hop: "hop" followed by a lime up-right arrow, the send counterpart to Dwn's down arrow (as in the app). */
.hopw { position: relative; display: inline-block; }
.hopw .go { position: relative; display: inline-block; width: 0.46em; height: 0.46em; margin-left: 0.04em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.46 -2.46 100 100'%3E%3Cpath transform='rotate(45 50 50)' fill='%23ccff4d' d='M33 46V83A17 17 0 0 0 67 83V46H98L50 -14L2 46Z'/%3E%3C/svg%3E") center/contain no-repeat; }

/* Hop intro: the letters spring up one after another, then the arrow shoots in from the lower
   left with an overshoot, trailing a lime streak that fades behind it, as if it just sent
   something. The p gives a small nudge when the arrow lands next to it. */
.anim-hop .ch { display: inline-block; opacity: 0; transform-origin: 50% 100%; }
.anim-hop .go { opacity: 0; transform: translate(-0.55em, 0.55em) scale(0.5); }
.anim-hop .streak { position: absolute; right: 50%; top: 50%; width: 0.7em; height: 0.07em; margin-top: -0.035em;
  transform-origin: 100% 50%; transform: rotate(-45deg); border-radius: 0.035em; opacity: 0;
  background: linear-gradient(90deg, rgba(204, 255, 77, 0), var(--accent)); }
.ready .anim-hop .ch { animation: hop-spring 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.05s forwards; }
.ready .anim-hop .ch:nth-child(2) { animation-delay: 0.12s; }
.ready .anim-hop .ch:nth-child(3) { animation: hop-spring 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.19s forwards, hop-nudge 0.4s ease-out 0.95s; }
.ready .anim-hop .go { animation: hop-go 0.6s cubic-bezier(.2, .9, .3, 1.25) 0.62s forwards; }
.ready .anim-hop .streak { animation: hop-streak 0.7s ease-out 0.62s forwards; }
@keyframes hop-spring { 0% { opacity: 0; transform: scale(0.2); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hop-go { 0% { opacity: 0; transform: translate(-0.55em, 0.55em) scale(0.5); } 20% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes hop-streak { 0% { opacity: 1; transform: rotate(-45deg) scaleX(1.4); } 100% { opacity: 0; transform: rotate(-45deg) scaleX(0.3); } }
@keyframes hop-nudge { 0%, 100% { transform: none; } 35% { transform: translateX(-0.03em) scale(0.97, 1.03); } }
.no-js .anim-hop .ch, .no-js .anim-hop .go { opacity: 1; transform: none; }

/* Syn: "syn" followed by a lime sync link: two dots, one per track, joined by a line where the
   tracks line up. Static version used in nav, footer and icons (matches the app's .mark). */
.synw { position: relative; display: inline-flex; align-items: baseline; }
.synw .link { position: relative; display: inline-block; flex: none; width: 0.17em; height: 1ex; margin-left: 0.09em; }
.synw .bl { display: inline-block; width: 0; height: 0; }
/* The static mark everywhere else is the outlined brand SVG (viewBox in 2048-unit em: top 1159 above
   the baseline, 500 below, 82 of padding on the left). Sized and offset so its baseline sits on the text's. */
.wordmark img.synmark, .hero-mark img.rest { display: block; height: 0.81em; width: auto; max-width: none; }
.wordmark img.synmark { margin: 0 0 -0.244em -0.04em; }
/* Hero: the live-text intro plays, then cross-fades into the SVG, which main.js lines up on the
   intro's baseline (so the resting mark is the same as the app's and the panel's). */
.hero-mark.anim-syn { position: relative; }
.hero-mark img.rest { position: absolute; left: -0.04em; top: 0; opacity: 0; pointer-events: none; }
.ready .anim-syn.placed img.rest { animation: syn-rest 0.35s ease 1.8s forwards; }
.ready .anim-syn.placed .synw { animation: syn-text-out 0.35s ease 1.8s forwards; }
@keyframes syn-rest { to { opacity: 1; } }
@keyframes syn-text-out { to { opacity: 0; } }
.synw .link b { position: absolute; left: 0; width: 0.17em; height: 0.17em; border-radius: 50%; background: var(--accent); }
.synw .link b:first-child { top: 0; --dx: 0.55em; }
.synw .link b:last-child { bottom: 0; --dx: 0.24em; }
.synw .link i { position: absolute; left: 50%; top: 0.085em; bottom: 0.085em; width: 0.062em; margin-left: -0.031em;
  border-radius: 0.031em; background: var(--accent); }

/* Syn intro: the three letters come in out of step, each at its own height like clips that
   haven't been synced, while the two dots slide in from the right, out of step with each other. Then everything snaps
   into line at the same moment, the line draws between the dots and they pulse once: synced.
   Only transform, opacity and box-shadow, so no letter edge is ever clipped. */
.anim-syn .ch { display: inline-block; opacity: 0; --o: 0em; }
.anim-syn .ch:nth-child(1) { --o: -0.2em; }
.anim-syn .ch:nth-child(2) { --o: 0.16em; }
.anim-syn .ch:nth-child(3) { --o: -0.09em; }
.anim-syn .link b { opacity: 0; transform: translateX(var(--dx)); }
.anim-syn .link i { transform: scaleY(0); }
.ready .anim-syn .ch { animation: syn-in 1.15s linear forwards; }
.ready .anim-syn .ch:nth-child(n) { animation-delay: 0s; } /* all snap together, unlike the shared stagger */
.ready .anim-syn .link b { animation: syn-dot 1.15s linear forwards, syn-pulse 0.9s ease-out 0.85s; }
.ready .anim-syn .link i { animation: syn-line 0.3s cubic-bezier(.3, 0, .2, 1) 0.6s forwards; }
@keyframes syn-in {
  0% { opacity: 0; transform: translateY(calc(var(--o) * 2.2)); animation-timing-function: cubic-bezier(.4, .1, .3, 1); }
  30% { opacity: 1; }
  76% { transform: translateY(calc(var(--o) * -0.22)); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { opacity: 1; transform: none; } }
@keyframes syn-dot {
  0% { opacity: 0; transform: translateX(calc(var(--dx) * 1.6)); animation-timing-function: cubic-bezier(.4, .1, .3, 1); }
  30% { opacity: 1; }
  76% { transform: translateX(calc(var(--dx) * -0.12)); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  100% { opacity: 1; transform: none; } }
@keyframes syn-line { to { transform: none; } }
@keyframes syn-pulse { 0% { box-shadow: 0 0 0 0 rgba(204, 255, 77, 0.75); } 100% { box-shadow: 0 0 0 0.16em rgba(204, 255, 77, 0); } }
.no-js .anim-syn .ch, .no-js .anim-syn .link b { opacity: 1; transform: none; } .no-js .anim-syn .link i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .anim-lut .lutw { --x: 57%; } .anim-lut .base b { opacity: 1; font-weight: 900; } .anim-lut .gbar, .anim-lut .lime { opacity: 1; }
  .anim-stm .bars b { opacity: 1; transform: none; }
  .anim-hop .ch, .anim-hop .go { opacity: 1; transform: none; } .anim-hop .streak { display: none; }
  .anim-tag .strike { transform: none; } .anim-tag * { animation: none !important; }
  .shots .after, .shots .tag { animation: none !important; } .shots .tag.r { opacity: 0; }
  .anim-syn .ch, .anim-syn .link b, .anim-syn .link i { opacity: 1; transform: none; }
  .anim-syn.placed img.rest { opacity: 1; } .anim-syn.placed .synw { opacity: 0; }
  .syn-tl * { animation: none !important; }
  .anim-lut *, .anim-lut .lutw, .anim-stm *, .anim-hop *, .anim-syn * { 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; }

/* Tag: the app's own screenshots, the scan then the cleaned batch, crossfading. */
.shots { position: relative; aspect-ratio: 1536 / 949; background: #0b0b0c; }
.shots img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shots .after { opacity: 0; }
.shots .tag { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, .6); font: 600 12px/1 var(--font); color: #fff; backdrop-filter: blur(6px); }
.shots .tag.r { color: var(--accent); opacity: 0; }
.ready .shots .after, .ready .shots .tag.r { animation: shot-swap 9s ease-in-out 1.5s infinite; }
.ready .shots .tag.l { animation: shot-swap-out 9s ease-in-out 1.5s infinite; }
@keyframes shot-swap { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shot-swap-out { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }

/* 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; }
}

/* =============================================================== type (v2, as on pxlvzn.in)
   Inter Tight for display (100–900, so weights can contrast: a heavy phrase, then a thin one),
   Inter for text, JetBrains Mono for small technical labels. The wordmark keeps the heavy system
   grotesk so it matches the app icons. */
:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --brand: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Tight", "Segoe UI", system-ui, sans-serif;
}
body { letter-spacing: -0.005em; }
.wordmark, .pxl-note .pm { font-family: var(--brand); }
.nav-links { font: 450 14px/1 var(--font); }

.tagline { margin: 0 auto; max-width: 17em; font: 300 clamp(30px, 4.4vw, 54px)/1.08 var(--display); letter-spacing: -0.03em; }
.tagline .t-thin { font-weight: 200; color: var(--text2); }
.tagline .t-bold { display: block; font-weight: 750; color: var(--text); }
.lede { font-weight: 350; }

h2 { font: 750 clamp(34px, 4.8vw, 58px)/1.04 var(--display); letter-spacing: -0.035em; max-width: 20ch; }
h2 .thin { font-weight: 200; color: var(--text2); }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.kicker::before { content: ""; width: 7px; height: 7px; background: var(--accent); }
.section-lede { font: 350 18.5px/1.55 var(--font); }
.card h3 { font: 600 19px/1.25 var(--display); letter-spacing: -0.015em; }
.card p { font-weight: 380; }
.btn { font-family: var(--font); font-weight: 600; letter-spacing: -0.01em; }
.chip { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; }
.caption { font: 400 12px/1.5 var(--mono); }
.meta { font-weight: 400; }
.steps3 .card::before { width: auto; height: auto; background: none; color: var(--accent); font: 500 13px/1 var(--mono);
  content: "0" counter(st); place-items: start; }
.steps3 h3 { font: 200 30px/1.1 var(--display); letter-spacing: -0.03em; margin-top: 18px; }
.trio .big { font: 200 64px/1 var(--display); letter-spacing: -0.04em; }
.platform h3 { font: 700 19px/1.2 var(--display); }
.download-box h2 { font-size: clamp(38px, 5.4vw, 64px); margin-inline: auto; }
footer .fine { font-family: var(--mono); font-size: 11.5px; }
.term { font-family: var(--mono); }

/* ------------------------------------------------------------- Syn timeline (hero illustration)
   The resting state is the synced timeline (what no-JS and reduced-motion visitors see). Once the
   page is ready it loops: the tracks sit out of step while a playhead listens across them, then
   slide into line on the clap one after another, and each gets its confidence score. */
.syn-tl { --th: 150px; --cc: 54px; --cyc: 10s; }
.syn-tl .status { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--stroke); font-size: 13.5px; color: var(--text2); overflow: hidden; }
.syn-tl .status b { color: var(--text); font-weight: 600; }
.syn-tl .s1, .syn-tl .s2 { grid-column: 2; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-tl .s1 { opacity: 0; }
.syn-tl .go { grid-column: 3; }
.syn-tl .status::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.syn-tl .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent);
  box-shadow: 0 0 10px rgba(204, 255, 77, 0.5); }
.syn-tl .ruler { display: flex; justify-content: space-between; margin: 16px calc(var(--cc) + 12px) 6px calc(var(--th) + 12px);
  font: 500 10.5px/1 var(--mono, ui-monospace, monospace); color: var(--text3); }
.syn-tl .tracks { position: relative; display: grid; gap: 5px; }
.syn-tl .trk { display: grid; grid-template-columns: var(--th) minmax(0, 1fr) var(--cc); gap: 12px; align-items: center; height: 34px; }
.syn-tl .th { min-width: 0; line-height: 1.2; }
.syn-tl .th b { display: block; font-size: 12.5px; font-weight: 600; }
.syn-tl .th small { display: block; color: var(--text3); font: 500 10.5px/1.3 var(--mono, ui-monospace, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.syn-tl .lanebg { position: relative; height: 100%; border-radius: 7px; background: rgba(255, 255, 255, 0.025); }
/* Clip cards match the app: a neutral card, a slim status bar on the left, a soft waveform. */
.syn-tl .clip { position: absolute; top: 3px; bottom: 3px; border-radius: 6px; overflow: hidden;
  background: #1d1d20; border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 rgba(204, 255, 77, 0.7); }
.syn-tl .cw { position: absolute; inset: 4px 6px 4px 10px; display: flex; align-items: center; gap: 1px; }
.syn-tl .cw i { flex: 1; min-width: 1px; height: calc(var(--h) * 0.7%); border-radius: 2px; background: rgba(255, 255, 255, 0.17); }
.syn-tl .cw i.k { background: var(--accent); }
.syn-tl .trk:has(.conf.lo) .clip { box-shadow: inset 3px 0 0 #ffb35c; }
.syn-tl .syncline { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; z-index: 2; border-radius: 1px;
  left: calc(var(--th) + 12px + (100% - var(--th) - var(--cc) - 24px) * var(--sync));
  background: var(--accent); box-shadow: 0 0 12px rgba(204, 255, 77, 0.6); transform-origin: top; }
.syn-tl .tracks::before { content: ""; position: absolute; top: -4px; bottom: -4px; width: 2px; z-index: 2; opacity: 0;
  left: calc(var(--th) + 12px); background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 10px rgba(255, 255, 255, 0.35); }
.syn-tl .conf, .confs .conf { display: block; padding: 6px 0; border-radius: 7px; text-align: center; font: 600 11px/1 var(--mono, ui-monospace, monospace);
  background: rgba(255, 255, 255, 0.07); color: var(--text); }
.conf.hi { background: rgba(204, 255, 77, 0.13); color: var(--accent); }
.conf.lo { background: rgba(255, 179, 92, 0.14); color: #ffb35c; }
.syn-tl .more .th b { color: var(--text2); }
.syn-tl .stack { position: absolute; inset: 7px 1% 7px 3%; display: grid; gap: 3px; }
.syn-tl .stack i { border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.syn-tl .stack i:nth-child(2) { margin-left: 6%; } .syn-tl .stack i:nth-child(3) { margin-left: 2%; margin-right: 8%; }
.confs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.confs .conf { padding: 7px 11px; font-size: 12px; }

.ready .syn-tl .clip { animation: syn-clip var(--cyc) cubic-bezier(.6, 0, .25, 1) infinite; animation-delay: calc(var(--i) * 0.11s); }
.ready .syn-tl .cw i.k { animation: syn-key var(--cyc) linear infinite; animation-delay: calc(var(--i) * 0.11s); }
.ready .syn-tl .trk .conf { animation: syn-conf var(--cyc) cubic-bezier(.3, 1.4, .5, 1) infinite; animation-delay: calc(var(--i, 8) * 0.11s); }
.ready .syn-tl .syncline { animation: syn-sline var(--cyc) cubic-bezier(.3, 0, .2, 1) infinite; }
.ready .syn-tl .tracks::before { animation: syn-scan var(--cyc) linear infinite; }
.ready .syn-tl .s1 { animation: syn-s1 var(--cyc) linear infinite; }
.ready .syn-tl .s2, .ready .syn-tl .go { animation: syn-s2 var(--cyc) linear infinite; }
.ready .syn-tl .status::after { animation: syn-prog var(--cyc) linear infinite; }
.ready .syn-tl .spin { animation: syn-spin 0.8s linear infinite, syn-spinner var(--cyc) linear infinite; }
@keyframes syn-clip { 0%, 15% { transform: translateX(var(--off)); opacity: 0.55; } 33%, 91% { transform: none; opacity: 1; } 98%, 100% { transform: translateX(var(--off)); opacity: 0.55; } }
@keyframes syn-key { 0%, 30% { background: rgba(255, 255, 255, 0.35); } 34%, 91% { background: var(--accent); } 98%, 100% { background: rgba(255, 255, 255, 0.35); } }
@keyframes syn-conf { 0%, 33% { opacity: 0; transform: scale(0.7); } 37%, 91% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes syn-sline { 0%, 30% { opacity: 0; transform: scaleY(0); } 36%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes syn-scan { 0% { opacity: 0; left: calc(var(--th) + 12px); } 2% { opacity: 1; } 26% { opacity: 1; left: calc(100% - var(--cc) - 12px); } 28%, 100% { opacity: 0; left: calc(100% - var(--cc) - 12px); } }
@keyframes syn-s1 { 0%, 31% { opacity: 1; } 33%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes syn-s2 { 0%, 34% { opacity: 0; } 37%, 94% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes syn-prog { 0% { transform: scaleX(0); opacity: 1; } 31% { transform: scaleX(1); opacity: 1; } 36%, 100% { transform: scaleX(1); opacity: 0; } }
@keyframes syn-spin { to { transform: rotate(360deg); } }
@keyframes syn-spinner { 0%, 32% { background: transparent; border-color: rgba(204, 255, 77, 0.25) rgba(204, 255, 77, 0.25) rgba(204, 255, 77, 0.25) var(--accent); box-shadow: none; }
  35%, 95% { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 10px rgba(204, 255, 77, 0.5); }
  98%, 100% { background: transparent; border-color: rgba(204, 255, 77, 0.25) rgba(204, 255, 77, 0.25) rgba(204, 255, 77, 0.25) var(--accent); box-shadow: none; } }
@media (max-width: 720px) {
  .syn-tl { --th: 70px; --cc: 44px; }
  .syn-tl .th small, .syn-tl .go { display: none; }
  .syn-tl .status { grid-template-columns: auto 1fr; }
  .syn-tl .ruler span:nth-child(even) { visibility: hidden; }
}

/* ------------------------------------------------------------- Pin
   Mark: "pin" with a dotless i whose dot is a lime pin head (matches the app's icon). */
.pinw { position: relative; display: inline-block; white-space: nowrap; }
.pinw .pi { position: relative; display: inline-block; }
.pinw .head { position: absolute; left: 50%; top: -0.04em; width: 0.25em; height: 0.25em; margin-left: -0.155em; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.75) 0 0.035em, transparent 0.06em), var(--accent); }

/* Pin intro: the letters scroll up into place like the screensaver's columns, each at its own
   speed, then the pin head drops in, squashes as it lands and sends out a ripple: pinned. */
.anim-pin .ch { display: inline-block; opacity: 0; transform: translateY(1.1em); }
.anim-pin .head { opacity: 0; transform: translateY(-1.6em) scale(0.9); }
.anim-pin .ripple { position: absolute; left: 50%; top: -0.04em; width: 0.25em; height: 0.25em; margin-left: -0.155em; border-radius: 50%;
  border: 0.02em solid var(--accent); opacity: 0; }
.ready .anim-pin .ch { animation: pin-col 0.95s cubic-bezier(.2, .8, .2, 1) 0.05s forwards; }
.ready .anim-pin .ch:nth-child(2) { animation-duration: 0.8s; animation-delay: 0.16s; }
.ready .anim-pin .ch:nth-child(3) { animation-duration: 1.05s; animation-delay: 0.1s; }
.ready .anim-pin .head { animation: pin-drop 0.55s cubic-bezier(.5, 0, .75, 0) 1s forwards, pin-land 0.4s cubic-bezier(.2, .9, .3, 1.4) 1.55s forwards; }
.ready .anim-pin .ripple { animation: pin-ripple 0.8s ease-out 1.55s forwards; }
@keyframes pin-col { 0% { opacity: 0; transform: translateY(1.1em); } 30% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pin-drop { 0% { opacity: 0; transform: translateY(-1.6em) scale(0.9); } 20% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes pin-land { 0% { opacity: 1; transform: scale(1.25, 0.7); } 100% { opacity: 1; transform: none; } }
@keyframes pin-ripple { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.no-js .anim-pin .ch, .no-js .anim-pin .head { opacity: 1; transform: none; }
.tile .mk .pi { position: relative; display: inline-block; }
.tile .mk .head { position: absolute; left: 50%; top: -0.04em; width: 0.25em; height: 0.25em; margin-left: -0.155em; border-radius: 50%; background: var(--accent); }

/* The hero wall: five columns of pins scrolling up at different speeds, like the screensaver. */
.pin-wall { position: relative; height: 520px; padding: 14px !important; display: flex; gap: 12px; overflow: hidden; background: #0f0f10; }
.pin-wall::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(#0f0f10, transparent 9%, transparent 82%, rgba(15, 15, 16, 0.85)); }
.pcol { flex: 1; min-width: 0; }
.ptrack { display: flex; flex-direction: column; gap: 12px; animation: pin-scroll calc(38s + var(--c) * 5s) linear infinite;
  animation-delay: calc(var(--c) * -7s); }
@keyframes pin-scroll { to { transform: translateY(calc(-50% - 6px)); } }
.pt { position: relative; aspect-ratio: 1 / var(--r); border-radius: 12px; overflow: hidden; flex: none;
  background: linear-gradient(calc(120deg + var(--k) * 25deg), var(--a), var(--b)); }
.pt i, .pt b { position: absolute; display: block; }
.pt i { left: 18%; top: 22%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.pt b { left: 14%; right: 30%; bottom: 14%; height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.28); }
.pt.s-arch i { border-radius: 999px 999px 8px 8px; width: 52%; top: 18%; aspect-ratio: .8; }
.pt.s-bars i { border-radius: 4px; width: 64%; aspect-ratio: 3; top: 40%; background: rgba(0, 0, 0, 0.18); }
.pt.s-sun i { left: auto; right: 14%; width: 30%; background: rgba(255, 236, 200, 0.45); }
.pt.s-blob i { border-radius: 42% 58% 61% 39% / 47% 39% 61% 53%; width: 60%; }
.pt.s-lines b { box-shadow: 0 -16px 0 rgba(255, 255, 255, 0.18), 0 -32px 0 rgba(255, 255, 255, 0.12); }
.pt.hide { animation: pin-hide 19s ease-in-out infinite; transform-origin: 50% 0; }
.pt-x { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 5px 10px; border-radius: 999px;
  background: rgba(10, 10, 11, 0.8); color: var(--accent); font: 600 12px/1 var(--font); opacity: 0; animation: pin-hide-tag 19s ease-in-out infinite; }
@keyframes pin-hide { 0%, 30% { opacity: 1; filter: none; } 36% { opacity: 1; filter: saturate(.2) brightness(.6); } 44%, 100% { opacity: 0; filter: saturate(.2) brightness(.6); } }
@keyframes pin-hide-tag { 0%, 31% { opacity: 0; } 34%, 41% { opacity: 1; } 44%, 100% { opacity: 0; } }
.pclock { position: absolute; left: 34px; bottom: 26px; z-index: 2; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.7); }
.pclock b { display: block; font: 200 64px/1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pclock small { display: block; margin-top: 6px; font: 450 15px/1 var(--font); color: rgba(255, 255, 255, 0.78); }
@media (max-width: 720px) {
  .pin-wall { height: 400px; gap: 8px; } .pcol:nth-child(n + 4) { display: none; } .ptrack { gap: 8px; }
  .pclock b { font-size: 44px; } .pclock { left: 22px; bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .anim-pin .ch, .anim-pin .head { opacity: 1; transform: none; } .anim-pin * { animation: none !important; }
  .ptrack, .pt.hide, .pt-x { animation: none !important; } .pt.hide { opacity: 1; }
}