:root {
  --bg: #0d0e11;
  --bg-2: #14161b;
  --bg-3: #1b1e25;
  --line: #2a2e38;
  --slate: #6b7385;
  --slate-hi: #9aa3b5;
  --text: #d9dde6;
  --white: #f2f4f8;
  --toxic: #a6ff3c;
  --blood: #c2323a;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
p { margin: 0 0 .75rem; }
ol, ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--toxic); outline-offset: 2px; }

.muted { color: var(--slate-hi); }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-bottom: .6rem; }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem max(1rem, env(safe-area-inset-right)) .8rem max(1rem, env(safe-area-inset-left));
  background: rgba(13, 14, 17, .88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 48px; }
/* Fixed height, auto width: the logo keeps its own aspect ratio and never stretches. */
.nav__logo { display: block; line-height: 0; }
.nav__logo img { display: block; height: 48px; max-height: 48px; width: auto; max-width: min(240px, 55vw); object-fit: contain; }
.nav__wordmark { display: none; font-family: var(--mono); font-weight: 700; font-size: .85rem; letter-spacing: .14em; white-space: nowrap; }
.nav__wordmark span { color: var(--toxic); }
.nav__brand--text .nav__logo { display: none; }
.nav__brand--text .nav__wordmark { display: inline; }

.nav__links { display: flex; align-items: stretch; border: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; overflow-x: auto; scrollbar-width: none; }
.nav__links::-webkit-scrollbar { display: none; }
.nav__links a { display: flex; align-items: center; padding: .6rem .95rem; color: var(--slate-hi); white-space: nowrap; border-left: 1px solid var(--line); transition: color .15s, background-color .15s; }
.nav__links a:first-child { border-left: 0; }
.nav__links a:hover { color: var(--white); background: var(--bg-2); }
.nav__links .nav__cta { color: var(--toxic); }
.nav__links .nav__cta span { color: var(--slate); margin-left: .4em; }
.nav__links .nav__cta:hover { background: rgba(166, 255, 60, .08); }

/* Layout */
.hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 7rem 1.25rem 3rem; max-width: 1200px; margin: 0 auto; background: linear-gradient(180deg, transparent, transparent); }
.hero h1 { font-size: clamp(3.4rem, 15vw, 10rem); text-transform: uppercase; color: var(--white); margin-bottom: 1.2rem; }
.hero__sub { color: var(--slate-hi); max-width: 34ch; margin-bottom: 1.5rem; }
.section { max-width: 1200px; margin: 0 auto; padding: 5rem 1.25rem; border-top: 1px solid var(--line); }
.section__head { margin-bottom: 2rem; }
.section__head h2 { font-size: clamp(2rem, 6vw, 3.5rem); text-transform: uppercase; margin-bottom: .5rem; }

.btn { display: inline-block; background: var(--white); color: var(--bg); border: 1px solid var(--white); padding: .65rem 1.3rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.btn:hover { background: var(--toxic); border-color: var(--toxic); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--slate); }
.btn--ghost:hover { background: var(--bg-3); color: var(--white); border-color: var(--slate-hi); }

/* Track card: Spotify-style mini player (card.js). Charcoal glass, rounded cover on the left. */
.tc {
  position: relative; display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 1.1rem; align-items: center;
  padding: 1rem; border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, rgba(40, 44, 54, .72), rgba(18, 20, 25, .82));
  border: 1px solid rgba(255, 255, 255, .08);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .07);
}
/* Soft glow behind the glass, tinted by the playing state. */
.tc::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, rgba(166, 255, 60, .14), transparent); pointer-events: none; transition: opacity .4s; opacity: .55; }
.tc.is-playing::before { opacity: 1; }
.tc > * { position: relative; }

.tc__cover { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; box-shadow: 0 12px 28px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
.tc__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Preset covers: pure CSS, no image files. */
.tc__cover--noir { background:
  radial-gradient(circle at 50% 38%, rgba(194, 50, 58, .55), transparent 34%),
  radial-gradient(ellipse at 50% 120%, #2a0d12 0%, transparent 60%),
  repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 255, 255, .025) 18px 19px),
  linear-gradient(180deg, #0b0b0e, #19090d); }
.tc__cover--smoke { background:
  radial-gradient(ellipse at 25% 30%, rgba(34, 211, 238, .55), transparent 45%),
  radial-gradient(ellipse at 78% 70%, rgba(168, 85, 247, .5), transparent 48%),
  radial-gradient(ellipse at 55% 50%, rgba(255, 255, 255, .08), transparent 60%),
  linear-gradient(160deg, #06070c, #10121c); }
.tc__cover--concrete { background:
  repeating-radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(17deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 7px),
  linear-gradient(200deg, rgba(166, 255, 60, .12), transparent 40%),
  linear-gradient(135deg, #4a4c50, #2b2c2f 55%, #1d1e20); }

.tc__body { min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
.tc__head { display: flex; align-items: flex-start; gap: .8rem; }
.tc__text { flex: 1; min-width: 0; }
.tc__title { margin: 0; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc__artist { margin: .15rem 0 0; font-size: .9rem; color: #9ba1ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tc__play { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--toxic); color: #0a0f05; box-shadow: 0 0 0 0 rgba(166, 255, 60, .5), 0 8px 20px rgba(166, 255, 60, .25); transition: transform .12s, box-shadow .2s, background-color .15s; }
.tc__play:hover:not(:disabled) { transform: scale(1.06); background: #b8ff63; }
.tc.is-playing .tc__play { box-shadow: 0 0 0 6px rgba(166, 255, 60, .12), 0 8px 24px rgba(166, 255, 60, .4); }
.tc__play:disabled { background: #3a3f4b; color: #6b7385; box-shadow: none; cursor: not-allowed; }
.tc__play svg { width: 22px; height: 22px; fill: currentColor; }
.tc__play .i-pause, .tc.is-playing .tc__play .i-play { display: none; }
.tc.is-playing .tc__play .i-pause { display: block; }

.tc__scrub { display: flex; align-items: center; gap: .6rem; }
.tc__time { flex: none; min-width: 2.5rem; font-size: .72rem; color: #9ba1ad; font-variant-numeric: tabular-nums; }
.tc__time--rem { text-align: right; }

/* Thin rail that fills to the thumb (--p comes from card.js); the thumb appears on hover and focus. */
.tc__range { --p: 0%; -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 18px; margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.tc__range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--white) var(--p), rgba(255, 255, 255, .18) var(--p)); }
.tc__range::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.tc__range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--white); }
.tc__range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--white); opacity: 0; transition: opacity .12s; }
.tc__range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--white); opacity: 0; }
.tc__range:hover::-webkit-slider-runnable-track, .tc__range:focus-visible::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--toxic) var(--p), rgba(255, 255, 255, .18) var(--p)); }
.tc__range:hover::-moz-range-progress, .tc__range:focus-visible::-moz-range-progress { background: var(--toxic); }
.tc__range:hover::-webkit-slider-thumb, .tc__range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.tc__range:hover::-moz-range-thumb, .tc__range:focus-visible::-moz-range-thumb { opacity: 1; }
.tc__range:focus-visible { outline: none; }
.tc.is-empty .tc__range { pointer-events: none; opacity: .5; }

.tc__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.tc__brand { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: #6b7385; white-space: nowrap; }
.tc__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--toxic); box-shadow: 0 0 6px var(--toxic); }
.tc__vol { display: flex; align-items: center; gap: .3rem; }
.tc__range--vol { flex: none; width: 84px; }
.tc__mute { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: #9ba1ad; }
.tc__mute:hover { color: var(--white); }
.tc__mute svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc__mute .i-spk { fill: currentColor; stroke: none; }
.tc__mute .i-x, .tc.is-muted .tc__mute .i-wave { display: none; }
.tc.is-muted .tc__mute .i-x { display: inline; }
.tc__error { margin: 0; font-size: .78rem; color: #ff7a82; }

@media (max-width: 480px) {
  .tc { grid-template-columns: 88px minmax(0, 1fr); gap: .85rem; padding: .85rem; }
  .tc__title { font-size: 1.05rem; }
  .tc__play { width: 42px; height: 42px; }
  .tc__brand { display: none; }
  .tc__foot { justify-content: flex-end; }
}

/* Generator: form on the left, sticky live preview on the right. */
.gen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (min-width: 900px) { .gen { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; } .gen__preview { position: sticky; top: 96px; } }
.gen__preview { order: -1; }
@media (min-width: 900px) { .gen__preview { order: 0; } }
.gen__form { display: flex; flex-direction: column; gap: 1.1rem; }
.gen__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 520px) { .gen__row { grid-template-columns: minmax(0, 1fr); } }
.gen__field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.gen__label { padding: 0; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-hi); }
.gen__input { width: 100%; padding: .75rem .85rem; font: inherit; font-size: 1rem; color: var(--white); background: #0f1115; border: 1px solid var(--line); border-radius: 6px; transition: border-color .15s, box-shadow .15s; }
.gen__input::placeholder { color: #4b5263; }
.gen__input:focus { outline: none; border-color: var(--toxic); box-shadow: 0 0 0 3px rgba(166, 255, 60, .15); }

.gen__drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1.3rem 1rem; text-align: center; background: #0f1115; border: 1px dashed #3a3f4b; border-radius: 8px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.gen__drop:hover, .gen__drop.is-drag { border-color: var(--toxic); background: rgba(166, 255, 60, .04); }
.gen__drop.is-set { border-style: solid; border-color: rgba(166, 255, 60, .5); }
.gen__drop:focus-within { border-color: var(--toxic); box-shadow: 0 0 0 3px rgba(166, 255, 60, .15); }
.gen__drop .gen__file { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gen__drop-main { font-size: .92rem; color: var(--text); }
.gen__drop-main u { color: var(--toxic); text-underline-offset: 3px; }
.gen__drop-sub { font-family: var(--mono); font-size: .7rem; color: var(--slate); overflow-wrap: anywhere; }
.gen__drop.is-set .gen__drop-sub { color: var(--toxic); }
.gen__file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.gen__covers > .gen__file { left: -9999px; }

.gen__swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 96px)); gap: .75rem; }
.gen__swatch { position: relative; display: flex; flex-direction: column; gap: .35rem; cursor: pointer; }
.gen__swatch input { position: absolute; opacity: 0; pointer-events: none; }
.gen__swatch span { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid var(--line); background-size: cover; background-position: center; transition: border-color .15s, box-shadow .15s, transform .12s; }
.gen__swatch:hover span { transform: translateY(-1px); border-color: var(--slate); }
.gen__swatch input:checked + span { border-color: var(--toxic); box-shadow: 0 0 0 2px var(--toxic), 0 0 18px rgba(166, 255, 60, .3); }
.gen__swatch input:focus-visible + span { outline: 2px solid var(--toxic); outline-offset: 3px; }
.gen__swatch em { font-style: normal; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-hi); text-align: center; }
.gen__swatch--upload span { background-color: #0f1115; border-style: dashed; }
.gen__swatch--upload span b { font-weight: 400; font-size: 1.6rem; color: var(--slate-hi); }
.gen__swatch--upload span.is-set { border-style: solid; }
.gen__swatch--upload span.is-set b { display: none; }
.gen__hint { margin: 0; font-size: .75rem; color: var(--slate); }

.gen__error { margin: 0; font-size: .88rem; color: #ff7a82; }
.gen__note { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.gen__fine { margin: 0; font-size: .78rem; color: var(--slate); }

/* Video and Store: placeholders until they launch. */
.soon-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 720px) { .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .soon + .soon { border-left: 1px solid var(--line); } }
.soon-grid .section { margin: 0; border-top: 0; padding: 3.5rem 1.25rem; }
@media (max-width: 719px) { .soon + .soon { border-top: 1px solid var(--line); } }
.soon h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); text-transform: uppercase; margin-bottom: 1rem; }
.soon__status { display: inline-flex; align-items: center; gap: .6rem; margin: 0; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate-hi); }
.soon__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--toxic); box-shadow: 0 0 8px var(--toxic); animation: soon-pulse 2.4s ease-in-out infinite; }
@keyframes soon-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .soon__dot { animation: none; } }

/* Semi-Pro V plugin */
/* Semi-Pro V: brushed-steel chassis and cyan readouts, taken from the plugin's own UI.
   Order on every screen size: interface image, feature panels, then the action cards. */
.sp {
  --sp-cyan: #22d3ee;
  --sp-panel: linear-gradient(180deg, #1b1e25 0%, #14161b 100%);
  --sp-edge: #2f3645;
  display: flex; flex-direction: column; gap: 2.5rem;
}
.sp__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .7rem; }
.sp__title { font-size: clamp(2.4rem, 8vw, 4.5rem); text-transform: uppercase; letter-spacing: .02em; background: linear-gradient(180deg, #f2f4f8 0%, #aab4c6 60%, #6f7a90 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp__sub { margin: 0; font-family: var(--mono); font-size: clamp(.68rem, 1.8vw, .82rem); letter-spacing: .12em; text-transform: uppercase; color: var(--white); }
.sp__sub span, .sp__format span { color: var(--sp-cyan); margin: 0 .35em; }
.sp__format { margin: 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--slate-hi); }
.sp__format em { color: var(--slate); }
/* Hero image frame: no bezel or hard edges, just a soft cyan glow behind and a shadow that
   follows the image's own shape (drop-shadow respects transparency, so a cut-out mockup
   gets a shaped shadow, not a box). The aspect ratio comes from the file itself;
   1140 / 760 only reserves space until it loads. Nothing here clips the glow. */
.sp__stage { position: relative; isolation: isolate; width: 100%; max-width: 1140px; margin: 1.5rem 0 0; }
.sp__stage::before { content: ""; position: absolute; z-index: -1; inset: 6% 4% -2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(34, 211, 238, .22), rgba(34, 211, 238, .06) 60%, transparent); filter: blur(48px); pointer-events: none; }
.sp__stage img { display: block; width: 100%; height: auto; aspect-ratio: auto 1140 / 760; object-fit: contain; border-radius: 12px; filter: drop-shadow(0 28px 44px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .14)); }
@media (max-width: 640px) { .sp__stage { margin-top: 1rem; } .sp__stage::before { filter: blur(28px); } .sp__stage img { border-radius: 8px; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .14)); } }

.sp__features { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 720px) { .sp__features { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp__panel--wide { grid-column: 1 / -1; } .sp__panel--wide ul { columns: 2; column-gap: 2rem; } }
.sp__panel { position: relative; padding: 1.3rem 1.3rem 1.2rem; background: var(--sp-panel); border: 1px solid var(--sp-edge); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
.sp__panel::before { content: ""; position: absolute; left: 0; top: 1.2rem; bottom: 1.2rem; width: 2px; background: var(--sp-cyan); opacity: .7; }
.sp__num { font-family: var(--mono); font-size: .65rem; letter-spacing: .16em; color: var(--sp-cyan); }
.sp__panel h3 { margin: .35rem 0 .8rem; font-size: 1.1rem; color: var(--white); letter-spacing: -.01em; }
.sp__panel ul { display: block; }
.sp__panel li { break-inside: avoid; position: relative; padding-left: 1rem; margin-bottom: .55rem; font-size: .92rem; color: var(--slate-hi); }
.sp__panel li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border: 1px solid var(--sp-cyan); transform: rotate(45deg); }
.sp__panel strong { color: var(--white); font-weight: 600; }

.sp__hub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 720px) { .sp__hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp__card { display: flex; flex-direction: column; gap: .55rem; padding: 1.5rem; background: var(--sp-panel); border: 1px solid var(--sp-edge); border-top: 2px solid #8e9ab0; border-radius: 6px; }
.sp__card > * { margin: 0; }
.sp__card--download { border-top-color: var(--sp-cyan); }
.sp__card-tag { font-family: var(--mono); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.sp__card h3 { font-size: 1.5rem; text-transform: uppercase; color: var(--white); }
.sp__card-copy { color: var(--slate-hi); }
.sp__amounts { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp__amounts span { font-family: var(--mono); font-size: .78rem; padding: .3rem .65rem; border: 1px solid var(--sp-edge); border-radius: 3px; color: var(--white); background: #0f1115; }
.sp__dl { display: flex; flex-direction: column; gap: .55rem; }
.sp__meta { margin: 0; font-family: var(--mono); font-size: .72rem; color: var(--slate-hi); }
.sp__btn { margin-top: .4rem; text-align: center; border-radius: 4px; font-weight: 700; padding: .85rem 1.3rem; }
.sp__btn:not(:disabled) { background: var(--sp-cyan); border-color: var(--sp-cyan); color: #06181c; }
.sp__btn:not(:disabled):hover { background: #67e8f9; border-color: #67e8f9; }
.sp__btn.sp__btn--support { background: transparent; color: var(--white); border-color: #8e9ab0; }
.sp__btn.sp__btn--support:hover { background: #262b36; border-color: var(--white); }
.sp__install { font-size: .82rem; color: var(--slate-hi); padding-top: .8rem; border-top: 1px solid var(--sp-edge); }
.sp__install strong { color: var(--white); }
.sp__gatekeeper p { margin: 0 0 .4rem; font-size: .82rem; color: var(--slate-hi); }
.sp__gatekeeper pre { margin: 0; padding: .6rem .75rem; background: #0f1115; border: 1px solid var(--sp-edge); border-radius: 4px; overflow-x: auto; }
.sp__card .sp__gatekeeper code { background: none; padding: 0; white-space: pre; overflow-wrap: normal; font-size: .74rem; color: var(--sp-cyan); }
.sp__card code { font-family: var(--mono); font-size: .76rem; color: var(--white); background: #0f1115; padding: .05rem .3rem; border-radius: 3px; overflow-wrap: anywhere; }
.sp__card .sp__sha { display: block; background: none; padding: 0; font-family: var(--mono); font-size: .65rem; color: var(--slate); overflow-wrap: anywhere; }

/* Stack the links under the logo once they no longer fit beside it. */
@media (max-width: 860px) {
  .nav { flex-direction: column; align-items: stretch; gap: .6rem; padding-top: .6rem; padding-bottom: .6rem; }
  .nav__links a { flex: 1 0 auto; justify-content: center; }
  html { scroll-padding-top: 124px; }
}
@media (max-width: 480px) {
  .nav__links .nav__cta span { display: none; }
}

/* Modals */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; background: rgba(5, 6, 8, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__panel { position: relative; width: 100%; max-width: 480px; background: var(--bg-2); border: 1px solid var(--slate); padding: 1.6rem; max-height: 90vh; overflow-y: auto; }
.modal__panel h3 { font-size: 1.8rem; margin-bottom: 1rem; text-transform: uppercase; }
.modal__close { position: absolute; top: .5rem; right: .8rem; background: transparent; border: 0; font-size: 1.8rem; color: var(--slate-hi); line-height: 1; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: var(--white); border-color: var(--white); }

.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem 1.25rem; max-width: 1200px; margin: 0 auto; border-top: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.footer__social { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__social a:hover { color: var(--white); }

@media (max-width: 640px) {
  .nav__brand { min-height: 36px; }
  .nav__logo img { height: 36px; max-height: 36px; }
  .nav__links { letter-spacing: .08em; }
  .nav__links a { padding: .55rem .45rem; }
  html { scroll-padding-top: 108px; }
  .hero { padding-top: 8rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Download email capture */
.sp-modal { border-color: #47536a; border-top: 2px solid #22d3ee; border-radius: 6px; background: linear-gradient(180deg, #1b1e25 0%, #14161b 100%); }
.sp-modal h3 { margin-bottom: .6rem; }
.sp-modal > p { font-size: .92rem; }
.sp-modal__form { display: flex; flex-direction: column; gap: .55rem; margin-top: 1rem; }
.sp-modal__label { font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate-hi); }
.sp-modal__input { width: 100%; padding: .75rem .85rem; font: inherit; font-size: 1rem; color: var(--white); background: #0f1115; border: 1px solid #2f3645; border-radius: 4px; }
.sp-modal__input:focus { outline: none; border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2); }
.sp-modal__input[aria-invalid="true"] { border-color: var(--blood); }
.sp-modal__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.sp-modal__error { margin: 0; font-size: .85rem; color: #ff6b73; }
.sp-modal__form .sp__btn:not(:disabled) { background: #22d3ee; border-color: #22d3ee; color: #06181c; }
.sp-modal__form .sp__btn:not(:disabled):hover { background: #67e8f9; border-color: #67e8f9; }
.sp-modal__skip { align-self: center; margin-top: .2rem; padding: .5rem; background: none; border: 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-hi); text-decoration: underline; text-underline-offset: 3px; }
.sp-modal__skip:hover { color: var(--white); }
.sp-modal__fine { margin: .9rem 0 0; font-size: .75rem; color: var(--slate); text-align: center; }

/* Toxic Chess (restored from the first deployment, unchanged). Kept in one block
   at the end so none of the rules above are touched. */
:root {
  --sq-light: #c8c5b5; /* weathered park stone */
  --sq-dark: #334e38;  /* park moss */
  --hint: #bfff00;
  --hint-soft: #a3e635;
}
.chess { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) { .chess { grid-template-columns: minmax(0, 560px) 1fr; } }
.chess__col { width: 100%; max-width: 560px; margin: 0 auto; }
/* Engraved outdoor park table: beveled slate frame around an inset board. */
.board-wrap {
  margin: .6rem 0; padding: 6px;
  background: linear-gradient(145deg, #3a3a38, #262625 55%, #1f1f1e);
  border: 7px solid #1c1c1c; border-color: #2c2c2b #141414 #0d0d0d #242424;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #0a0a0a, 0 14px 32px rgba(0,0,0,.55), 0 3px 8px rgba(0,0,0,.4);
}
.board {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
  display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  aspect-ratio: 1 / 1; width: 100%;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.sq {
  position: relative; display: grid; place-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  font-size: clamp(1.5rem, 8vw, 3.1rem); line-height: 1;
}
.sq--light { background: var(--sq-light); }
.sq--dark { background: var(--sq-dark); }
.sq__coord { position: absolute; font-family: var(--mono); font-size: .55rem; font-weight: 700; pointer-events: none; }
.sq--light .sq__coord { color: rgba(30, 40, 30, .6); }
.sq--dark .sq__coord { color: rgba(200, 197, 181, .6); }
.sq__coord--file { right: 3px; bottom: 1px; }
.sq__coord--rank { left: 3px; top: 1px; }
.sq--last { box-shadow: inset 0 0 0 100px rgba(163, 230, 53, .38); }
.sq--selected { box-shadow: inset 0 0 0 3px var(--hint), inset 0 0 0 100px rgba(191, 255, 0, .22); }
.sq--check { box-shadow: inset 0 0 0 100px rgba(194, 50, 58, .55); }
.sq--target::after { content: ""; position: absolute; width: 26%; height: 26%; border-radius: 50%; background: var(--hint); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 10px rgba(191, 255, 0, .7); pointer-events: none; }
.sq--target-capture::after { width: 84%; height: 84%; background: transparent; border: 4px solid var(--hint); box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 12px rgba(191, 255, 0, .7); }
.sq--hover { box-shadow: inset 0 0 0 3px var(--slate-hi); }
.piece { pointer-events: none; display: inline-block; width: 1em; height: 1em; line-height: 0; }
.sq > .piece { width: 84%; height: 84%; }
.piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.piece--white { color: #f2f1ea; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.piece--black { color: #7bff2a; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(123, 255, 42, .35)); }
.piece-shove { position: fixed; z-index: 150; margin: 0; transform-origin: center; }
.piece--drag-origin { opacity: .25; }
.piece-ghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; font-size: 3.2rem; touch-action: none; will-change: transform; }

.tray { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 2.4rem; padding: .2rem .1rem; background: transparent; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tray:hover .tray__label { color: var(--hint); }
.tray__label { font-family: var(--mono); font-size: .65rem; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); white-space: nowrap; }
.tray__pieces { display: flex; flex-wrap: wrap; font-size: 1.4rem; line-height: 1.1; }
.tray__pieces .piece { margin-right: .05rem; }

.chess__panel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.chess__status { font-family: var(--mono); font-size: .85rem; letter-spacing: .06em; padding: .8rem 1rem; border: 1px solid var(--line); background: var(--bg-2); margin: 0; }
.chess__status.is-alert { border-color: var(--blood); color: #ff7a82; }
.chess__log { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); font-family: var(--mono); font-size: .8rem; counter-reset: mv; }
.chess__log li { display: flex; gap: .8rem; padding: .35rem .8rem; border-bottom: 1px solid var(--line); }
.chess__log li span:first-child { color: var(--slate); min-width: 2.2rem; }
.chess__log li.is-capture { color: var(--toxic); }
.chess__actions { display: flex; gap: .6rem; }
.chess__actions .btn { cursor: pointer; }
.btn--danger { background: var(--blood); border-color: var(--blood); color: var(--white); }
.btn--danger:hover { background: #e03d46; border-color: #e03d46; }
.modal__panel--toxic { border-color: var(--blood); text-align: center; }
.modal__actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; }
.capture__duel { display: flex; justify-content: center; align-items: center; gap: 1.2rem; font-size: 3.6rem; margin: .5rem 0 1rem; }
.capture__x { font-size: 1.8rem; color: var(--blood); font-family: var(--mono); }

/* Graveyard pop-up (placeholder). Hooks:
   .grave-pop.is-open            backdrop + panel entry state
   .grave-pop__pieces .piece     each fallen piece; --i is its stagger index
   --grave-pop-ms                overall timing */
.grave-pop { --grave-pop-ms: 260ms; opacity: 0; transition: opacity var(--grave-pop-ms) ease; }
.grave-pop.is-open { opacity: 1; }
.grave-pop__panel { border-color: var(--hint); transform: translateY(16px) scale(.97); transition: transform var(--grave-pop-ms) cubic-bezier(.2, .8, .2, 1); }
.grave-pop.is-open .grave-pop__panel { transform: none; }
.grave-pop__pieces { display: flex; flex-wrap: wrap; gap: .4rem; font-size: 2.4rem; min-height: 2.4rem; }
.grave-pop__pieces .piece { opacity: 0; transform: translateY(8px); transition: opacity 200ms ease, transform 200ms ease; transition-delay: calc(var(--i, 0) * 40ms + var(--grave-pop-ms)); }
.grave-pop.is-open .grave-pop__pieces .piece { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .grave-pop, .grave-pop__panel, .grave-pop__pieces .piece { transition: none; }
}

/* Social links (TikTok, YouTube): icons in the header, icon + label in the footer.
   On narrow screens the header icons sit in the logo row's empty right side, so the
   header height (and the scroll offsets that depend on it) doesn't change. */
.nav__social { display: flex; align-items: center; gap: .25rem; flex: none; }
.social-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); color: var(--slate-hi); transition: color .15s, border-color .15s, background-color .15s; }
.social-icon:hover { color: var(--white); border-color: var(--slate); background: var(--bg-2); }
.social-icon svg { width: 16px; height: 16px; fill: currentColor; }
.nav__links { margin-left: auto; }
.footer__link { display: inline-flex; align-items: center; gap: .45rem; }
.footer__link svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
/* With the Chess link and the icons, one header row needs ~970px, so the stacked
   layout (same rules as the 860px block above) starts at 1000px. */
@media (max-width: 1000px) {
  .nav { flex-direction: column; align-items: stretch; gap: .6rem; padding-top: .6rem; padding-bottom: .6rem; }
  .nav__links a { flex: 1 0 auto; justify-content: center; }
  html { scroll-padding-top: 124px; }
  .nav__links { margin-left: 0; }
  .nav__social { position: absolute; top: .6rem; right: max(1rem, env(safe-area-inset-right)); height: 48px; }
}
@media (max-width: 640px) {
  .nav__social { height: 36px; }
  .social-icon { width: 32px; height: 32px; }
}
@media (max-width: 480px) {
  .nav__links .nav__home { display: none; }
}

/* Toxic Chess park: the board lives inside the graveyard park artwork
   (assets/chess/graveyard-park.jpg, 1536x1024). Every overlay is placed in the
   artwork's own pixel coordinates (--x, --y, --w, --h), relative to the visible
   crop (--cx, --cy, --cw, --ch), so it stays locked to the art at any width.
   Measured from the art: painted board x 440-1095, y 177-773 (9 columns x 8 rows,
   ~72.8 x 74.5 px each); graveyard pens x 222-338 and 1198-1314, y 398-656.
   The playable 8x8 board is 596 px square over the painted board's full height;
   the ~30 px strips either side are filled with the frame's own paving tiles. */
@media (min-width: 900px) { .chess--park { grid-template-columns: minmax(0, 1fr); } }
.chess--park { gap: 1.25rem; }
.chess--park .chess__col { max-width: none; }
.chess--park .chess__panel { width: 100%; max-width: 760px; margin: 0 auto; }

.park { --cx: 150; --cy: 100; --cw: 1236; --ch: 750; position: relative; }
.park__view { position: relative; overflow: hidden; aspect-ratio: var(--cw) / var(--ch); border-radius: 10px; background: #2f4a24; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
.park__art { position: absolute; display: block; max-width: none; height: auto; width: calc(1536 / var(--cw) * 100%); left: calc(var(--cx) / var(--cw) * -100%); top: calc(var(--cy) / var(--ch) * -100%); pointer-events: none; user-select: none; -webkit-user-select: none; }
.park__at { position: absolute; left: calc((var(--x) - var(--cx)) / var(--cw) * 100%); top: calc((var(--y) - var(--cy)) / var(--ch) * 100%); width: calc(var(--w) / var(--cw) * 100%); height: calc(var(--h) / var(--ch) * 100%); }

/* Playable board: transparent frame, squares textured from the art itself
   (light = a sandstone square, dark = a grass square, each sampled 3 px inside its edges). */
.park__board { --x: 469.5; --y: 177; --w: 596; --h: 596; z-index: 1; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: 0 0 0 1px rgba(60, 44, 18, .45), 0 8px 22px rgba(0, 0, 0, .3); }
.park .board { width: 100%; height: 100%; aspect-ratio: auto; box-shadow: none; }
.park .sq--light, .park .sq--dark { background-image: url("assets/chess/graveyard-park.jpg"); background-repeat: no-repeat; background-size: calc(1536 / 67 * 100%) calc(1024 / 69 * 100%); }
.park .sq--light { background-position: calc(588.5 / (1536 - 67) * 100%) calc(254 / (1024 - 69) * 100%); }
.park .sq--dark { background-position: calc(515.5 / (1536 - 67) * 100%) calc(254 / (1024 - 69) * 100%); }
.park .sq--light .sq__coord { color: rgba(70, 52, 22, .7); }
.park .sq--dark .sq__coord { color: rgba(230, 240, 200, .75); }

/* Side strips: the frame's paving tiles, copied from just outside the painted board. */
.park__patch { --y: 177; --w: 29.5; --h: 596; background-image: url("assets/chess/graveyard-park.jpg"); background-repeat: no-repeat; background-size: calc(1536 / 29.5 * 100%) calc(1024 / 596 * 100%); }
.park__patch--l { --x: 440; background-position: calc(405 / (1536 - 29.5) * 100%) calc(177 / (1024 - 596) * 100%); }
.park__patch--r { --x: 1065.5; background-position: calc(1101 / (1536 - 29.5) * 100%) calc(177 / (1024 - 596) * 100%); }

/* Captured pieces sit inside the painted GRAVEYARD pens on wider screens. */
@media (min-width: 721px) {
  .park__pen { --y: 398; --w: 116; --h: 258; z-index: 2; container-type: inline-size; display: block; padding: 6px; background: rgba(12, 14, 12, .18); border-radius: 3px; overflow: hidden; }
  .park__pen--l { --x: 222; }
  .park__pen--r { --x: 1198; }
  .park__pen:hover { background: rgba(191, 255, 0, .08); box-shadow: inset 0 0 0 1px rgba(191, 255, 0, .45); }
  .park__pen .tray__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .park__pen .tray__pieces { font-size: 1.2rem; font-size: 24cqi; line-height: 1; gap: 2px; }
}

/* Phones: crop in on the board so it stays playable; the pens fall outside the crop,
   so the trays return to the normal flow above and below the board. */
@media (max-width: 720px) {
  .park { --cx: 405; --cy: 150; --cw: 726; --ch: 650; }
  .park__pen { position: static; width: auto; height: auto; }
  .park__view { border-radius: 8px; }
}