/* mediarium.app, v3 look: "projection booth at night".
   Deep blue-black ground, one teal accent for the app's own controls, one colour per kind of
   media that keeps its job everywhere: movies amber, TV cyan, music pink, books lilac,
   audiobooks orange. Glow is only for state (live, wanted). Fonts are the app's own. */

@font-face { font-family: 'Wix Madefor Display'; src: url('/fonts/WixMadeforDisplay-Variable.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Host Grotesk'; src: url('/fonts/HostGrotesk-Variable.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Reddit Mono'; src: url('/fonts/RedditMono-Variable.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }

:root {
  --font-display: 'Wix Madefor Display', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Host Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Reddit Mono', ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-move: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-hover: 160ms;
  --dur-move: 480ms;
  --dur-reveal: 640ms;

  --bg: #07080f;
  --bg-2: #0b0d18;
  --surface: #121526;
  --surface-2: #191d33;
  --surface-3: #20253f;
  --border: #262b45;
  --text: #eef0fa;
  --text-dim: #c4c8dc;
  --faint: #979db8;
  --accent: #3ee6c8;
  --accent-hover: #6ff0da;
  --on-accent: #06201b;
  --focus-ring: rgba(62, 230, 200, 0.55);

  --c-movie: #ffc857;
  --c-tv: #3ddcff;
  --c-music: #ff5fa8;
  --c-book: #c8a2ff;
  --c-audio: #ff8f57;
  --c-wanted: #c6f36b;

  /* names the documentation styles already use */
  --teal: var(--accent); --violet: var(--c-book); --amber: var(--c-movie); --blue: var(--c-tv);
  --text-muted: var(--faint);
  --radius: 16px;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; scrollbar-color: var(--surface-3) var(--bg); scrollbar-width: thin; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; overflow-x: clip; }
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 0.5em; line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); color: #fff; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: var(--bg); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 0 0 8px 0; z-index: 100; }
.skip:focus { left: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.ico.fill { fill: currentColor; }
.dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); }

@view-transition { navigation: auto; }
.top { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease); }

/* ---- scroll progress ---- */
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); z-index: 90; pointer-events: none; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px 20px; border-radius: 6px 14px 14px 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 600 0.98rem var(--font-body); cursor: pointer; transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease); }
.btn:hover { text-decoration: none; background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.btn:active { transform: scale(0.97); }
.btn .ico:last-child { transition: transform 0.25s var(--ease); }
.btn:hover .ico:last-child { transform: translateX(3px); }
.btn.big { padding: 15px 26px; font-size: 1.05rem; border-radius: 8px 18px 18px 18px; }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover { background: var(--accent-hover); border-color: transparent; }
.btn.gh-btn { padding: 8px 15px; font-size: 0.9rem; }
.btn.coffee { background: var(--c-movie); color: #2a1a00; border-color: transparent; }
.btn.coffee:hover { background: #ffd78a; border-color: transparent; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 26px; }
.lead { font-size: 1.2rem; color: var(--text-dim); max-width: 50rem; text-wrap: balance; }

/* ---- header ---- */
.top { position: fixed; top: 14px; left: 0; right: 0; z-index: 80; pointer-events: none; padding: 0 14px; }
.top .bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 1180px; margin: 0 auto; padding: 8px 10px 8px 16px; border: 1px solid transparent; border-radius: 8px 22px 22px 22px; pointer-events: auto; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); }
.top.scrolled .bar { background: color-mix(in srgb, var(--bg-2) 80%, transparent); border-color: var(--border); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 1.15rem var(--font-display); color: var(--text); letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 32px; height: 32px; }
.top nav { display: flex; gap: 2px; }
.top nav a { padding: 8px 14px; border-radius: 10px; color: var(--text-dim); font-size: 0.95rem; transition: color 0.15s, background 0.15s; }
.top nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); text-decoration: none; }
.top nav a[aria-current='page'] { color: var(--accent); }
.bar-actions { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: none; width: 38px; height: 36px; border-radius: 4px 12px 12px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; place-items: center; }
.menu-btn svg { width: 18px; height: 18px; }

/* ---- the solid kind glyphs, same recipe as the app ---- */
.kg { color: var(--k, var(--accent)); stroke: color-mix(in srgb, currentColor 50%, #000); overflow: visible; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)); }
.kg .g-top { stop-color: color-mix(in srgb, currentColor 50%, #fff); }
.kg .g-mid { stop-color: currentColor; }
.kg .g-low { stop-color: color-mix(in srgb, currentColor 62%, #000); }
.kg .solid { fill: color-mix(in srgb, currentColor 35%, #000); }
.kg .shine { stroke: rgba(255, 255, 255, 0.8); stroke-width: 1.3; fill: none; }
.kg .edge { stroke: rgba(0, 0, 0, 0.5); fill: none; }
.kg .pages { stroke: #f2e6cb; stroke-width: 1.8; fill: none; }
.kg .screen-in { fill: #0b0d18; stroke: color-mix(in srgb, currentColor 40%, #000); }
.kg.g-music { stroke: #141726; }
.kg .v-top { stop-color: #6b7391; } .kg .v-mid { stop-color: #3d4360; } .kg .v-low { stop-color: #1f2336; }
.kg .groove { stroke: rgba(205, 214, 240, 0.22); stroke-width: 0.8; fill: none; }
.kg .label { stroke: color-mix(in srgb, currentColor 50%, #000); }
.kg .hole { fill: #0b0d18; stroke: #f2e6cb; stroke-width: 0.7; }
.kg .logo-depth { fill: color-mix(in srgb, currentColor 45%, #000); stroke: color-mix(in srgb, currentColor 35%, #000); }
.kg .logo-face { stroke: color-mix(in srgb, currentColor 55%, #000); }
.kg.g-logo { color: var(--accent); }
.kg.g-movie { --k: var(--c-movie); } .kg.g-tv { --k: var(--c-tv); } .kg.g-music { --k: var(--c-music); } .kg.g-book { --k: var(--c-book); } .kg.g-audio { --k: var(--c-audio); }

/* ============ HERO ============ */
.hero { position: relative; min-height: 100dvh; padding-top: 128px; overflow: clip; isolation: isolate; background: radial-gradient(120% 70% at 78% 0%, rgba(15, 19, 48, 0.85) 0%, transparent 62%); }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 180px; background: linear-gradient(transparent, color-mix(in srgb, var(--bg) 65%, transparent)); z-index: 4; pointer-events: none; }
.dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.beam { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: calc(0.55 + var(--hp, 0) * 0.5); }
.beam i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; clip-path: polygon(73.5% 7%, 78.5% 7%, 99% 78%, 4% 78%); background: linear-gradient(190deg, color-mix(in srgb, var(--accent) 34%, transparent) 0%, color-mix(in srgb, var(--accent) 10%, transparent) 55%, transparent 100%); filter: blur(28px); animation: flicker 7s ease-in-out infinite; }
.beam i + i { clip-path: polygon(75% 7%, 77% 7%, 90% 78%, 22% 78%); filter: blur(10px); opacity: 0.55; animation-delay: -3s; }
@keyframes flicker { 0%, 100% { opacity: 1; } 22% { opacity: 0.88; } 44% { opacity: 1; } 68% { opacity: 0.94; } }
.lens { position: absolute; left: 76%; margin-left: calc(clamp(84px, 11vw, 150px) / -2); top: 70px; width: clamp(84px, 11vw, 150px); z-index: 3; transform: translateY(calc(var(--hp, 0) * -40px)); }
.lens .kg { width: 100%; height: auto; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--accent) 55%, transparent)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); animation: bob 6s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-10px); } }
.hero-copy { position: relative; z-index: 3; }
.hero h1 { font-size: clamp(2.7rem, 7.4vw, 6rem); line-height: 0.98; letter-spacing: -0.04em; font-weight: 800; max-width: 11.5em; margin-bottom: 0.4em; }
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.hero h1 .w > span { display: inline-block; transform: translateY(105%); animation: word 0.9s var(--ease-out) forwards; animation-delay: calc(0.15s + var(--i) * 0.06s); }
@keyframes word { to { transform: none; } }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero .lead { max-width: 50rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: 0; animation: fade 0.8s var(--ease-out) 0.85s forwards; }
.hero .cta { opacity: 0; animation: fade 0.8s var(--ease-out) 1s forwards; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; font: 500 0.82rem var(--font-mono); color: var(--faint); opacity: 0; animation: fade 0.8s var(--ease-out) 1.15s forwards; }
.hero-meta li { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--k, var(--accent)); }
@keyframes fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.stage { position: relative; z-index: 2; max-width: 1240px; margin: clamp(36px, 6vw, 70px) auto 0; padding: 0 24px; perspective: 1800px; }
.screen { position: relative; border-radius: 10px 26px 26px 26px; padding: 10px; background: linear-gradient(160deg, #20253f, #0e1122); border: 1px solid #343a5c; box-shadow: 0 60px 140px rgba(0, 0, 0, 0.7), 0 -30px 120px color-mix(in srgb, var(--accent) 14%, transparent); transform-origin: 50% 0; transform: rotateX(calc(18deg - var(--hp, 0) * 18deg)) scale(calc(0.93 + var(--hp, 0) * 0.07)) translateY(calc(var(--hp, 0) * -30px)); will-change: transform; }
.screen img { border-radius: 4px 18px 18px 18px; width: 100%; height: auto; background: var(--bg-2); }
.screen::after { content: ''; position: absolute; inset: 10px; border-radius: 4px 18px 18px 18px; background: linear-gradient(115deg, rgba(255, 255, 255, 0.1), transparent 32%); mix-blend-mode: screen; pointer-events: none; }
.float { position: absolute; z-index: 3; width: var(--s, 90px); left: var(--x); top: var(--y); transform: translate3d(calc(var(--px, 0) * var(--d) * 1px), calc(var(--hp, 0) * var(--d) * -1.6px + var(--py, 0) * var(--d) * 1px), 0) rotate(var(--r, 0deg)); transition: transform 0.25s ease-out; }
.float .kg { width: 100%; height: auto; animation: bob 7s ease-in-out infinite alternate; animation-delay: var(--ad, 0s); }

/* ============ SECTIONS ============ */
.block { padding-top: clamp(44px, 6vw, 84px); padding-bottom: clamp(44px, 6vw, 84px); position: relative; }
.sec-head { max-width: 64rem; margin-bottom: clamp(24px, 3.4vw, 42px); }
.sec-head h2 { font-size: clamp(2rem, 4.8vw, 3.7rem); letter-spacing: -0.035em; line-height: 1; font-weight: 800; }
.sec-head p { color: var(--text-dim); font-size: 1.15rem; max-width: 52rem; text-wrap: balance; }
.sec-head h2 em { font-style: normal; color: var(--k, var(--accent)); }
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--rd, 0) * 70ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ============ EIGHT APPS, ONE ============ */
.merge { height: 220vh; position: relative; --e: 1; }
.merge-pin { position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; overflow: clip; }
.merge-title { position: absolute; top: 14vh; left: 0; right: 0; text-align: center; padding: 0 24px; }
.merge-title h2 { font-size: clamp(2rem, 5.6vw, 4.6rem); font-weight: 800; letter-spacing: -0.04em; margin: 0; line-height: 1; position: relative; }
.merge-title .a, .merge-title .b { display: block; transition: opacity 0.4s var(--ease), transform 0.5s var(--ease-out), filter 0.4s; }
.merge-title .b { position: absolute; inset: 0; opacity: 0; transform: translateY(24px); filter: blur(8px); color: var(--accent); }
.merge.done .merge-title .a { opacity: 0; transform: translateY(-24px); filter: blur(8px); }
.merge.done .merge-title .b { opacity: 1; transform: none; filter: none; }
.merge-stage { position: relative; width: min(980px, 94vw); height: min(520px, 56vh); margin-top: 8vh; }
.app { position: absolute; left: 50%; top: 50%; display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 16px 10px 20px; border-radius: 4px 14px 14px 14px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; will-change: transform, opacity; transform: translate(calc(-50% + (1 - var(--e, 0)) * var(--x)), calc(-50% + (1 - var(--e, 0)) * var(--y))) scale(calc(1 - var(--e, 0) * 0.55)); opacity: calc(1 - var(--e, 0) * var(--e, 0) * 1.05); }
.app b { font: 700 1rem var(--font-display); }
.app span { font: 500 0.74rem var(--font-mono); color: var(--faint); }
.app::before { content: ''; position: absolute; left: 8px; top: 11px; bottom: 11px; width: 3px; border-radius: 2px; background: var(--k); }
.core { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 10px; transform: translate(-50%, -50%) scale(calc(0.7 + var(--e, 0) * 0.4)); opacity: calc(0.35 + var(--e, 0) * 0.65); text-align: center; }
.core .kg { width: clamp(90px, 14vw, 150px); height: auto; filter: drop-shadow(0 0 calc(var(--e, 0) * 50px) color-mix(in srgb, var(--accent) 60%, transparent)) drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5)); }
.core b { font: 800 1.4rem var(--font-display); letter-spacing: -0.02em; }
.merge-count { position: absolute; bottom: 9vh; left: 0; right: 0; text-align: center; margin: 0; font: 500 1rem var(--font-mono); color: var(--faint); }
.merge-count b { color: var(--text); font-size: 1.6rem; font-weight: 700; display: inline-block; min-width: 1ch; }

/* ============ STORY ============ */
.story { height: 380vh; position: relative; }
.story-pin { position: sticky; top: 0; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.5fr); gap: clamp(24px, 3vw, 56px); align-items: center; max-width: 1380px; margin: 0 auto; padding: 90px 24px 40px; }
.story h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -0.035em; line-height: 1; font-weight: 800; margin-bottom: 0.9em; }
.steps { list-style: none; margin: 0; padding: 0; position: relative; }
.steps::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.steps::after { content: ''; position: absolute; left: 0; top: 6px; width: 2px; height: calc((100% - 12px) * var(--sp4, 0)); background: var(--accent); }
.step { padding: 6px 0 6px 28px; opacity: 0.38; transition: opacity 0.45s var(--ease); }
.step h3 { font-size: 1.5rem; margin-bottom: 0.2em; display: flex; align-items: center; gap: 12px; }
.step h3 .ico { width: 28px; height: 28px; flex: none; color: var(--accent); }
.step p { margin: 0; color: var(--text-dim); text-wrap: balance; max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease-out); }
.step.on { opacity: 1; }
.step.on p { max-height: 9em; }
.step + .step { margin-top: 14px; }
.story-shots { position: relative; }
.story-shots .screen { transform: none; padding: 8px; aspect-ratio: 16 / 10; }
.story-shots .screen img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; object-position: top; clip-path: inset(0 0 100% 0); transition: clip-path 0.8s var(--ease-out); }
.story-shots .screen img.on { clip-path: inset(0); z-index: 2; }
.story-shots .screen img.prev { clip-path: inset(0); z-index: 1; }
.story-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 4px 12px 12px 12px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); border: 1px solid var(--border); font: 600 0.82rem var(--font-body); backdrop-filter: blur(10px); opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease-out) 0.35s, transform 0.5s var(--ease-out) 0.35s; }
.story-chip.on { opacity: 1; transform: none; }
.story-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.story-chip.live i { animation: livedot 1.4s ease-in-out infinite; }
@keyframes livedot { 50% { opacity: 0.35; } }
.inline-shot { display: none; }

/* ============ SHELF ============
   Five cards that share one row. The open card grows (flex-grow, one curve, one duration) and the
   others give way. Each card's text sits in a box that is always as wide as an open card, so the
   words never re-wrap while the card changes width: the card is only a window that opens wider.
   Which card is open is decided by the page script (hover with a short delay, focus, tap). */
.shelf { --grow: 2.6; container-type: inline-size; display: flex; gap: 14px; height: clamp(430px, 36vw, 470px); }
.kcard { --k: var(--c-movie); position: relative; flex: 1 1 0; min-width: 0; border-radius: 6px 24px 24px 24px; border: 1px solid color-mix(in srgb, var(--k) 32%, var(--border)); background: linear-gradient(170deg, color-mix(in srgb, var(--k) 13%, var(--surface)), var(--surface) 62%); overflow: hidden; contain: layout paint; cursor: pointer; transition: flex-grow var(--dur-move) var(--ease-move), border-color var(--dur-hover) var(--ease); }
.kcard.open { flex-grow: var(--grow); border-color: var(--k); }
.kcard:has(:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.kin { position: absolute; left: 0; top: 0; bottom: 0; width: calc((100cqw - 56px) * var(--grow) / (4 + var(--grow))); padding: 26px 24px 24px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; }
.kcard .kg { position: absolute; top: 26px; left: 24px; width: clamp(64px, 7vw, 96px); height: auto; transform-origin: 0 0; transition: transform var(--dur-move) var(--ease-move); z-index: 1; }
.kcard.open .kg { transform: scale(1.5) rotate(-5deg); }
.kcard h3 { font-size: clamp(1.05rem, 1.7cqw, 1.5rem); margin: 0 0 0.15em; white-space: nowrap; }
.kbtn { all: unset; cursor: pointer; color: var(--text); font: inherit; letter-spacing: inherit; }
.kbtn:focus-visible { outline: none; }
.kcard .tag { margin: 0; color: var(--text-dim); font-size: 0.88rem; white-space: nowrap; }
.kcard .more { position: absolute; left: 24px; right: 24px; bottom: 96px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms; }
.kcard.open .more { opacity: 1; visibility: visible; transform: none; transition: opacity 280ms var(--ease-out) 150ms, transform 360ms var(--ease-out) 130ms, visibility 0s; }
.kcard .more p { margin: 0; color: var(--text-dim); font-size: 0.98rem; }
.kcard .facts { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font: 500 0.78rem var(--font-mono); color: var(--faint); }
.kcard .facts li::before { content: '+ '; color: var(--k); }
.kcard .facts li { white-space: nowrap; }
.kcard.movie { --k: var(--c-movie); }
.kcard.tv { --k: var(--c-tv); }
.kcard.music { --k: var(--c-music); }
.kcard.book { --k: var(--c-book); }
.kcard.audio { --k: var(--c-audio); }
/* one cue per kind, drawn inside the card so the border stays whole */
.kcard.movie::before { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 26px; margin-top: -13px; z-index: 0; background: radial-gradient(circle 13px at 0 50%, var(--bg) 0 12px, transparent 13px), radial-gradient(circle 13px at 100% 50%, var(--bg) 0 12px, transparent 13px); }
.kcard.tv::before { content: ''; position: absolute; inset: 0; z-index: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0 1px, transparent 1px 3px); -webkit-mask-image: linear-gradient(#000, transparent 60%); mask-image: linear-gradient(#000, transparent 60%); }
.kcard.book::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.08) 5px, transparent); }
.kcard.music::before { content: ''; position: absolute; right: -72px; top: -72px; width: 200px; height: 200px; border-radius: 50%; z-index: 0; background: radial-gradient(circle, #0b0c12 0 3%, var(--k) 3.5% 24%, #16121c 24.5% 26%, transparent 26.5%), repeating-radial-gradient(circle, #2b3050 0 1.2px, #1c2038 1.6px 2.6px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 0 0 1px #3a4066; transition: transform var(--dur-move) var(--ease-move); }
.kcard.music.open::before { transform: translate(-96px, 100px) rotate(140deg); }
.kcard.audio::before { content: ''; position: absolute; right: -60px; top: -64px; width: 180px; height: 180px; border-radius: 50%; z-index: 0; border: 12px solid color-mix(in srgb, var(--k) 26%, transparent); transition: transform var(--dur-move) var(--ease-move); }
.kcard.audio.open::before { transform: translate(-30px, 20px) scale(1.15); }
/* a second shape for movies, TV and books too, like the record and the headband */
.kcard.movie::after { content: ''; position: absolute; right: -34px; top: 22px; width: 150px; height: 46px; z-index: 0; border-radius: 4px; transform: rotate(18deg); transition: transform var(--dur-move) var(--ease-move);
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--k) 70%, #fff) 7px 13px) 4px 5px / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--k) 70%, #fff) 7px 13px) 4px calc(100% - 5px) / 100% 7px no-repeat,
    linear-gradient(color-mix(in srgb, var(--k) 20%, #10121b), color-mix(in srgb, var(--k) 20%, #10121b)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--k) 40%, #10121b); }
.kcard.movie.open::after { transform: translate(-46px, 26px) rotate(30deg); }
.kcard.tv::after { content: ''; position: absolute; right: 0; top: 0; width: 150px; height: 150px; z-index: 0; background: repeating-radial-gradient(circle at 100% 0, transparent 0 14px, color-mix(in srgb, var(--k) 38%, transparent) 14px 16px); -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%); mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%); transform-origin: 100% 0; transition: transform var(--dur-move) var(--ease-move); }
.kcard.tv.open::after { transform: scale(1.5); }
.kcard.book::after { content: ''; position: absolute; right: 36px; top: 0; width: 24px; height: 70px; z-index: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 78%, #fff), var(--k)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)); transform-origin: 50% 0; transition: transform var(--dur-move) var(--ease-move); }
.kcard.book.open::after { transform: scaleY(1.6); }
.states { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 28px; align-items: center; color: var(--text-dim); font-size: 0.95rem; }
.state { display: inline-flex; align-items: center; gap: 12px; }
.state i { display: block; width: 44px; height: 30px; border-radius: 4px 9px 9px 9px; background: color-mix(in srgb, var(--c-movie) 38%, var(--surface)); border: 2px solid var(--c-movie); }
.state.wanted i { background: transparent; border: 2px dashed var(--c-wanted); box-shadow: 0 0 14px color-mix(in srgb, var(--c-wanted) 40%, transparent); animation: pulse-dash 1.6s linear infinite; }
@keyframes pulse-dash { 50% { border-color: color-mix(in srgb, var(--c-wanted) 40%, transparent); } }
.state.live i { position: relative; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.state.live i::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); box-shadow: 0 0 12px var(--accent); transform-origin: 0 50%; animation: fill 2.6s var(--ease) infinite; }
@keyframes fill { from { transform: scaleX(0.05); } to { transform: scaleX(1); } }

/* ============ BENTO ============ */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.tile { --k: var(--accent); position: relative; grid-column: span var(--c, 4); padding: 28px; border-radius: 6px 24px 24px 24px; background: linear-gradient(170deg, color-mix(in srgb, var(--k) 9%, var(--surface)), var(--surface) 55%); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-height: 280px; }
.tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--k) 12%, transparent), transparent 60%); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.tile:hover::before { opacity: 1; }
.tile h3 { font-size: 1.5rem; margin: 0; letter-spacing: -0.025em; }
.tile > p { margin: 0; color: var(--text-dim); font-size: 1rem; max-width: 42rem; text-wrap: balance; }
.tile .vis { margin-top: auto; padding-top: 22px; position: relative; }
.stack { grid-column: span 5; display: grid; gap: 14px; }
.tile.in-stack { grid-column: auto; min-height: 0; }
.tile.t-wide { --c: 7; } .tile.t-mid { --c: 5; } .tile.t-third { --c: 4; } .tile.t-half { --c: 6; }
.tile .tag { align-self: flex-start; font: 600 0.72rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--k); margin-bottom: 8px; }
.row { display: grid; grid-template-columns: 5.2em 1fr auto; gap: 12px; align-items: center; font: 500 0.82rem var(--font-mono); color: var(--faint); padding: 6px 0; }
.row .bar { height: 6px; border-radius: 3px; background: var(--surface-3); position: relative; overflow: hidden; }
.row .bar::after { content: ''; position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: var(--k, var(--accent)); border-radius: 3px; }
.in .row .bar::after { animation: grow 1.6s var(--ease-out) 0.2s forwards; }
@keyframes grow { to { transform: scaleX(var(--v, 0.6)); } }
.row em { font-style: normal; color: var(--text); }
.tunnel { display: block; width: 100%; height: auto; }
.tunnel .pipe { stroke: var(--border); stroke-width: 14; fill: none; stroke-linecap: round; }
.tunnel .flow { stroke: var(--accent); stroke-width: 3; fill: none; stroke-dasharray: 2 14; stroke-linecap: round; animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.tunnel text { font: 500 11px var(--font-mono); fill: var(--faint); }
.tunnel .node { fill: var(--surface-2); stroke: var(--border); }
.ladder { display: grid; gap: 6px; }
.ladder div { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-radius: 4px 10px 10px 10px; background: var(--surface-2); border: 1px solid var(--border); font: 600 0.85rem var(--font-mono); color: var(--faint); }
.ladder div:nth-child(1) { animation: pick 6s infinite; } .ladder div:nth-child(2) { animation: pick 6s 2s infinite; } .ladder div:nth-child(3) { animation: pick 6s 4s infinite; }
@keyframes pick { 0%, 30%, 100% { color: var(--faint); border-color: var(--border); background: var(--surface-2); } 4%, 26% { color: var(--on-accent); background: var(--accent); border-color: var(--accent); } }
.srt { font: 500 0.8rem/1.7 var(--font-mono); color: var(--faint); }
.srt .t { color: var(--c-tv); } .srt .l { color: var(--text); display: block; }
.srt .ok { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 5px 12px; border-radius: 4px 10px 10px 10px; border: 1px solid var(--border); background: var(--surface-2); font: 500 0.82rem var(--font-body); color: var(--text-dim); }
.hello { position: relative; height: 3.2rem; font: 800 2.4rem var(--font-display); letter-spacing: -0.03em; margin-bottom: 14px; }
.hello span { position: absolute; left: 0; opacity: 0; animation: hello 12s infinite; animation-delay: calc(var(--i) * 2s); transform: translateY(14px); }
@keyframes hello { 0% { opacity: 0; transform: translateY(14px); } 3%, 14% { opacity: 1; transform: none; } 17%, 100% { opacity: 0; transform: translateY(-14px); } }
.who { display: grid; gap: 8px; }
.who div { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 0.9rem; }
.who b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 0.8rem var(--font-display); background: var(--k2); color: #0b0d18; }
.who span { margin-left: auto; font: 500 0.75rem var(--font-mono); color: var(--faint); }
.logos { display: flex; flex-wrap: wrap; gap: 10px; }
.logos span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 4px 12px 12px 12px; background: var(--surface-2); border: 1px solid var(--border); font: 600 0.9rem var(--font-body); color: var(--lc, var(--text-dim)); }
.logos svg { width: 18px; height: 18px; fill: currentColor; }
.tile .shot { margin: 18px -28px -28px; border-top: 1px solid var(--border); }
.tile .shot { max-height: 300px; overflow: hidden; }
.tile .shot img { width: 100%; height: auto; }
.tile.photo { padding-bottom: 0; }

/* ============ PHONES ============ */
.phones { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.phone-row { display: flex; gap: clamp(10px, 2vw, 26px); justify-content: center; align-items: flex-start; height: clamp(440px, 56vw, 640px); overflow: clip; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.phone { width: clamp(120px, 16vw, 200px); flex: none; border-radius: 28px; padding: 6px; background: linear-gradient(160deg, #2a2f4d, #10132a); border: 1px solid #3a4066; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6); transform: translateY(calc(var(--pp, 0) * var(--dy) * 1px + var(--oy) * 1px)); }
.phone img { border-radius: 22px; width: 100%; height: auto; }

/* ============ PRIVACY ============ */
.privacy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.nodes { width: 100%; height: auto; }
.nodes .box { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.nodes .core-box { fill: color-mix(in srgb, var(--accent) 10%, var(--surface)); stroke: var(--accent); }
.nodes text { font: 600 13px var(--font-body); fill: var(--text); }
.nodes .sm { font: 500 11px var(--font-mono); fill: var(--faint); }
.nodes .wire { stroke: var(--accent); stroke-width: 2; fill: none; stroke-dasharray: 3 9; stroke-linecap: round; animation: flow 1.6s linear infinite; }
.nodes .none { opacity: 0.5; }
.nodes .none rect { stroke-dasharray: 5 6; fill: none; stroke: var(--faint); }
.nodes .strike { stroke: var(--c-audio); stroke-width: 2; }
.zeros { display: grid; gap: 4px; margin: 28px 0 0; padding: 0; list-style: none; }
.zeros li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); font-size: 1.1rem; }
.zeros b { font: 800 clamp(2rem, 3.6vw, 3rem) var(--font-display); letter-spacing: -0.04em; color: var(--accent); min-width: 1.4ch; }

/* ============ INSTALL ============ */
.install { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 70px); align-items: start; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button { font: 600 0.9rem var(--font-body); padding: 8px 16px; border-radius: 4px 12px 12px 12px; border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
.tabs button:hover { color: var(--text); border-color: var(--faint); }
.tabs button[aria-selected='true'] { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.panel[hidden] { display: none; }
.term { position: relative; border-radius: 6px 18px 18px 18px; background: #05060c; border: 1px solid var(--border); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--border); font: 500 0.78rem var(--font-mono); color: var(--faint); }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.term-bar .copy { margin-left: auto; font: 600 0.78rem var(--font-mono); color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; cursor: pointer; }
.term-bar .copy:hover { color: var(--accent); }
.code { margin: 0; padding: 22px 24px; overflow-x: auto; line-height: 1.65; color: #dce3ec; font-size: 0.86rem; }
.code code { background: none; border: 0; padding: 0; color: inherit; }
.code .c { color: var(--faint); } .code .k { color: var(--c-tv); } .code .s { color: var(--c-movie); }
.install ol { list-style: none; counter-reset: s; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.install ol li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; gap: 12px; color: var(--text-dim); }
.install ol li::before { content: counter(s); font: 700 1.3rem var(--font-mono); color: var(--accent); }
.install ol li b { color: var(--text); }
.note { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: 4px 14px 14px 14px; background: var(--surface); color: var(--text-dim); font-size: 0.95rem; }

/* ============ COMMUNITY: the credits wall ============
   Three rows of cards drifting sideways at different speeds. The page script moves them (so the
   speed can ease down smoothly when someone points at them); without it the same loop runs in CSS. */
.credits { display: grid; gap: 14px; padding: 6px 0 14px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.crow { overflow: hidden; }
.ctrack { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0; list-style: none; will-change: transform; }
html:not(.js) .ctrack { animation: slide var(--dur, 160s) linear infinite; }
html:not(.js) .crow[data-dir='-1'] .ctrack { animation-direction: reverse; }
@keyframes slide { to { transform: translateX(-50%); } }
.cc { --ck: var(--accent); flex: none; width: 300px; display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px 13px 13px; border-radius: 6px 16px 16px 16px; background: color-mix(in srgb, var(--ck) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ck) 30%, var(--border)); }
.cc.reddit { --ck: #ff5a2c; }
.cc.gh { --ck: #c4c8dc; }
.cc .av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 0.95rem var(--font-display); color: #0b0d18; background: var(--ck); }
.cb { display: grid; gap: 4px; min-width: 0; }
.cb b { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 0.92rem var(--font-display); }
.cb b a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb b a:hover { color: var(--ck); text-decoration: none; }
.cb b i { flex: none; font: 500 0.68rem var(--font-mono); font-style: normal; color: var(--ck); border: 1px solid color-mix(in srgb, var(--ck) 45%, transparent); padding: 0 7px; border-radius: 999px; }
.cb span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font: 400 0.92rem/1.38 var(--font-body); color: var(--text-dim); text-wrap: pretty; }
.cb span em { font-style: normal; color: var(--faint); font: 500 0.74rem var(--font-mono); }
.legend { display: flex; gap: 22px; list-style: none; margin: 4px 0 0; padding: 0; font: 500 0.82rem var(--font-body); color: var(--text-dim); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--ck, var(--accent)); }
.legend .reddit { --ck: #ff5a2c; }
.legend .gh { --ck: #c4c8dc; }
.credits-more { display: flex; justify-content: center; padding-top: 14px; }

/* ============ FAQ ============ */
.faq { columns: 2; column-gap: 56px; border-top: 1px solid var(--border); }
.qa { border-bottom: 1px solid var(--border); break-inside: avoid; }
.qa summary { cursor: pointer; list-style: none; padding: 22px 0; font: 700 1.2rem var(--font-display); letter-spacing: -0.02em; display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; font: 400 1.8rem var(--font-mono); color: var(--accent); transition: transform 0.3s var(--ease); }
.qa[open] summary::after { transform: rotate(45deg); }
.qa-a { padding: 0 0 22px; color: var(--text-dim); }
.qa-a p { margin: 0; max-width: none; }
.qa-a p + p { margin-top: 0.8em; }
.qa-a code { font-size: 0.85em; }
.qa-a a { text-decoration: underline; text-underline-offset: 3px; }

/* ============ SUPPORT + FOOTER ============ */
.support-band .card-s { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: clamp(24px, 4vw, 44px); border-radius: 6px 28px 28px 28px; border: 1px solid color-mix(in srgb, var(--c-music) 35%, var(--border)); background: linear-gradient(130deg, color-mix(in srgb, var(--c-music) 12%, var(--surface)), var(--surface) 60%); }
.support-band h2 { margin: 0 0 0.2em; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.support-band p { margin: 0; color: var(--text-dim); }
.support-band .kg { width: 72px; height: 72px; }
.fair { padding: 0 24px 40px; color: var(--faint); font-size: 0.9rem; max-width: 84rem; }
.foot { position: relative; border-top: 1px solid var(--border); padding: 56px 0 36px; overflow: clip; background: color-mix(in srgb, var(--bg) 88%, transparent); }
.foot .wrap { position: relative; z-index: 1; }
.foot-grid { display: grid; grid-template-columns: 1.3fr 2fr; gap: 50px; }
.foot-brand p { color: var(--text-dim); max-width: 24rem; }
.foot-brand .kg { width: 56px; height: 56px; margin-bottom: 10px; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cols strong { display: block; margin-bottom: 12px; font: 600 0.78rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.cols a { display: block; padding: 4px 0; color: var(--text-dim); }
.cols a:hover { color: var(--accent); text-decoration: none; }
.fine { font-size: 0.82rem; color: var(--faint); max-width: 70rem; }
.foot .glow-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 260px; background: radial-gradient(60% 100% at 50% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent); pointer-events: none; }

/* ============ PLAIN PAGES ============ */
.doc { padding-top: 130px; }
.doc h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.035em; font-weight: 800; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 6px 20px 20px 20px; padding: 22px 24px; }
.card p { color: var(--text-dim); margin: 0 0 1em; }
.card p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 20px 0; }

/* ============ SUPPORT TIP + COOKIES ============ */
.tip { position: fixed; right: 18px; bottom: 18px; z-index: 70; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
body:has(.hero):not(.past-hero) .tip { opacity: 0; transform: translateY(12px); pointer-events: none; }
.tip summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 11px 17px; border-radius: 6px 16px 16px 16px; font-weight: 700; font-size: 0.92rem; color: #2a1a00; background: var(--c-movie); transition: background 0.15s, transform 0.12s; }
.tip summary::-webkit-details-marker { display: none; }
.tip summary:hover { background: #ffd78a; }
.tip summary:active { transform: scale(0.97); }
.tip[open] summary { background: var(--surface-2); color: var(--text); }
.tip-panel { position: absolute; right: 0; bottom: 56px; width: min(320px, calc(100vw - 36px)); padding: 20px; border-radius: 6px 20px 20px 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.tip-panel p { margin: 0 0 12px; color: var(--text-dim); font-size: 0.95rem; }
.tip-panel .tip-title { font: 700 1.1rem var(--font-display); color: var(--text); }
.tip-panel .btn { width: 100%; }
.tip-panel .tip-fine { margin: 12px 0 0; font-size: 0.78rem; }
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; padding: 16px 24px; background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4); font-size: 0.95rem; line-height: 1.5; }
.consent-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 24px; }
.consent p { margin: 0; flex: 1; }
.consent-actions { display: flex; gap: 10px; flex: none; }
.consent-actions .btn { padding: 9px 20px; }

/* ============ SMALL SCREENS ============ */
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tile.t-wide, .tile.t-mid, .tile.t-half, .tile.t-full, .stack { --c: 6; grid-column: span 6; }
  .tile.accounts { grid-template-columns: 1fr; }
  .move { grid-template-columns: 1fr; }
  .tile.t-third { --c: 3; }
  .privacy, .install, .phones { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .top nav { display: none; }
  .menu-btn { display: grid; }
  .top.open nav { display: flex; flex-direction: column; position: absolute; top: 64px; left: 14px; right: 14px; padding: 8px; background: color-mix(in srgb, var(--bg-2) 94%, transparent); border: 1px solid var(--border); border-radius: 6px 20px 20px 20px; backdrop-filter: blur(16px); pointer-events: auto; }
  .top.open nav a { padding: 12px 14px; font-size: 1.05rem; }
}
@media (scripting: none) {
  .merge { height: auto; } .merge-pin { position: static; height: auto; padding: 90px 0 60px; } .merge-title .a { display: none; } .merge-title .b { position: static; opacity: 1; transform: none; filter: none; }
  .story { height: auto; } .story-pin { position: static; height: auto; grid-template-columns: 1fr; padding: 60px 24px; } .story-shots { display: none; }
  .step { opacity: 1; padding-left: 0; } .step p { max-height: none; } .steps::before, .steps::after { display: none; } .step + .step { margin-top: 36px; }
  .inline-shot { display: block; width: min(230px, 66%); height: auto; border-radius: 24px; border: 5px solid #2a2f4d; margin: 18px 0 0; }
}
@media (max-width: 900px) {
  .story { height: auto; }
  .story-pin { position: static; height: auto; grid-template-columns: 1fr; padding: 60px 24px; }
  .story-shots { display: none; }
  .step { opacity: 1; padding-left: 0; }
  .step p { max-height: none; }
  .steps::before, .steps::after { display: none; }
  .step + .step { margin-top: 36px; }
  .inline-shot { display: block; margin-top: 14px; border-radius: 6px 16px 16px 16px; border: 1px solid var(--border); width: min(230px, 66%); height: auto; border-radius: 24px; border: 5px solid #2a2f4d; margin: 18px 0 0; }
}
@media (max-width: 700px) {
  .bento { grid-template-columns: 1fr; }
  .tile, .stack, .tile.t-wide, .tile.t-mid, .tile.t-half, .tile.t-full, .tile.t-third { grid-column: auto; }
  .hero { padding-top: 104px; }
  .lens { top: 70px; }
  .hero h1 { max-width: 8em; }
  .stage { padding: 0 12px; }
  .float { display: none; }
  .support-band .card-s { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr 1fr; }
  .consent-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .consent-actions .btn { flex: 1; }
  .tip summary span { display: none; }
  .tip summary { padding: 13px; }
  .merge-stage { height: 48vh; }
  .app { padding: 7px 11px 7px 16px; }
  .app b { font-size: 0.85rem; }
  .app span { display: none; }
  .bar-actions .gh-btn:not(.primary) span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero h1 .w > span { transform: none; }
  .hero .lead, .hero .cta, .hero-meta { opacity: 1; }
  .merge { height: auto; }
  .merge-pin { position: static; height: auto; padding: 80px 0; }
}

/* Documentation and plain pages. Same markup as before; tokens come from site.css. */
.doc { max-width: 860px; padding-top: 132px; padding-bottom: 40px; }
.doc .lead { margin-left: 0; }
.doc.center { text-align: center; padding-top: 200px; }
.doc.center .cta { justify-content: center; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.doc h2 { font-size: 1.5rem; margin-top: 1.8em; }
.doc ul, .doc ol { padding-left: 1.3em; } .doc li { margin-bottom: 0.5em; }
ul.links { list-style: none; padding: 0; display: grid; gap: 10px; }
ul.links li { padding: 12px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin: 0; }
.dim { color: var(--text-dim); }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 20px 0; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.card p { color: var(--text-dim); margin: 0 0 1em; } .card p:last-child { margin-bottom: 0; }
a.card.link { color: var(--text); display: block; transition: border-color .2s var(--ease), background .2s var(--ease); }
a.card.link:hover { text-decoration: none; border-color: var(--accent); background: var(--surface-2); }
.manual { display: grid; grid-template-columns: 268px minmax(0, 1fr) 210px; gap: 38px; padding-top: 118px; padding-bottom: 20px; align-items: start; }
.manual.index { grid-template-columns: 268px minmax(0, 1fr); }
.man-menu { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.man-menu > summary { display: none; }
.man-group { margin-bottom: 22px; --t: var(--teal); }
.man-group.violet { --t: var(--violet); } .man-group.amber { --t: var(--amber); } .man-group.blue { --t: var(--blue); }
.man-title { margin: 0 0 6px; padding-left: 10px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t); }
.man-group ul, .man-toc ul { list-style: none; margin: 0; padding: 0; }
.man-group a { display: block; padding: 6px 10px; border-radius: 10px; color: var(--text-dim); font-size: 0.94rem; border-left: 3px solid transparent; transition: background .15s, color .15s; }
.man-group a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.man-group a[aria-current="page"] { background: color-mix(in srgb, var(--t) 14%, transparent); color: var(--text); border-left-color: var(--t); font-weight: 600; }
.man-body { --t: var(--teal); min-width: 0; }
.man-body.violet { --t: var(--violet); } .man-body.amber { --t: var(--amber); } .man-body.blue { --t: var(--blue); }
.crumbs { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 10px; }
.crumbs span { opacity: 0.5; margin: 0 4px; }
.prose { max-width: 780px; }
.prose h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 0.4em; }
.prose h2 { font-size: 1.55rem; margin-top: 2.1em; padding-top: 0.9em; border-top: 1px solid var(--border); }
.prose h3 { font-size: 1.15rem; margin-top: 1.7em; color: var(--text); }
.prose h4 { font-size: 1rem; margin-top: 1.4em; font-family: var(--font-display); }
.prose p, .prose li { color: var(--text); }
.prose li { margin-bottom: 0.4em; } .prose ul, .prose ol { padding-left: 1.4em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prose a:hover { text-decoration-color: var(--accent); }
.prose img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); box-shadow: var(--shadow); display: block; margin: 1.2em 0; }
.prose pre { background: #0A0C10; color: #DCE3EC; border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; overflow-x: auto; line-height: 1.55; }
.prose pre code { background: none; border: 0; padding: 0; color: inherit; }
.prose blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid var(--t); background: color-mix(in srgb, var(--t) 8%, var(--surface)); border-radius: 0 14px 14px 0; }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.tbl { overflow-x: auto; margin: 1.2em 0; border: 1px solid var(--border); border-radius: 14px; }
.tbl table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
.tbl th, .tbl td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tbl th { background: var(--surface-2); font-family: var(--font-display); font-size: 0.85rem; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td code { white-space: nowrap; }
.man-toc { position: sticky; top: 88px; max-height: calc(100vh - 108px); overflow-y: auto; font-size: 0.88rem; scrollbar-width: thin; }
.man-toc .man-title { padding-left: 0; color: var(--text-dim); }
.man-toc a { display: block; padding: 4px 0 4px 12px; color: var(--text-dim); border-left: 2px solid var(--border); }
.man-toc a:hover { color: var(--accent); border-left-color: var(--accent); text-decoration: none; }
.man-toc .d1 a { padding-left: 24px; font-size: 0.84rem; }
.man-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 780px; margin-top: 3em; }
.man-pn a { display: block; padding: 14px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); transition: border-color .2s var(--ease), background .2s var(--ease); }
.man-pn a:hover { text-decoration: none; border-color: var(--t); background: var(--surface-2); }
.man-pn small { display: block; color: var(--text-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.man-pn span { font-family: var(--font-display); font-weight: 600; }
.man-pn .next { text-align: right; grid-column: 2; }
.man-edit { margin-top: 18px; font-size: 0.88rem; }
.manual.index .cta { margin: 10px 0 34px; }
.dg { margin-bottom: 34px; --t: var(--teal); }
.dg.violet { --t: var(--violet); } .dg.amber { --t: var(--amber); } .dg.blue { --t: var(--blue); }
.dg h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t); margin-bottom: 14px; }
.dgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.dcard { display: block; padding: 18px 20px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--t) 25%, var(--border)); background: linear-gradient(150deg, color-mix(in srgb, var(--t) 9%, var(--surface)), var(--surface)); color: var(--text); transition: border-color .2s var(--ease), background .2s var(--ease); }
.dcard:hover { text-decoration: none; border-color: var(--t); background: linear-gradient(150deg, color-mix(in srgb, var(--t) 15%, var(--surface)), var(--surface)); }
.dcard h3 { font-size: 1.02rem; margin-bottom: 0.25em; } .dcard p { margin: 0; color: var(--text-dim); font-size: 0.93rem; }

@media (max-width: 1180px) { .manual { grid-template-columns: 250px minmax(0, 1fr); } .man-toc { display: none; } }
@media (max-width: 860px) {
  .manual, .manual.index { grid-template-columns: 1fr; gap: 10px; padding-top: 24px; }
  .man-menu { position: static; max-height: none; overflow: visible; order: 2; margin-top: 30px; padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
  .man-menu > summary { display: block; cursor: pointer; padding: 14px 18px; font-family: var(--font-display); font-weight: 600; }
  .man-menu > .man-nav { padding: 0 14px 10px; }
  .man-pn { grid-template-columns: 1fr; } .man-pn .next { grid-column: 1; text-align: left; }
}

.prose ol { padding-left: 2.1em; }
.hero-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }

/* ============ ONE FILM'S JOURNEY ============ */
.journey { --k: var(--c-movie); padding: clamp(22px, 4vw, 44px); border-radius: 6px 28px 28px 28px; border: 1px solid var(--border); background: linear-gradient(170deg, color-mix(in srgb, var(--c-movie) 8%, var(--surface)), var(--surface) 60%); overflow: hidden; }
.journey .track { list-style: none; margin: 0 0 34px; padding: 40px 0 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.journey .track::before { content: ''; position: absolute; left: 10%; right: 10%; top: 65px; height: 2px; background: var(--border); }
.journey .track::after { content: ''; position: absolute; left: 10%; top: 65px; height: 2px; width: calc(var(--j, 0) * 20%); background: var(--accent); transition: width 0.7s var(--ease-out); }
.st { display: grid; justify-items: center; gap: 10px; text-align: center; position: relative; z-index: 1; color: var(--faint); transition: color 0.4s; }
.st b { font: 600 0.9rem var(--font-body); }
.st-dot { width: 52px; height: 52px; border-radius: 6px 16px 16px 16px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); transition: background 0.4s, border-color 0.4s, color 0.4s; }
.st-dot .ico { width: 22px; height: 22px; }
.journey[data-step='0'] .st:nth-child(1), .journey[data-step='1'] .st:nth-child(2), .journey[data-step='2'] .st:nth-child(3), .journey[data-step='3'] .st:nth-child(4), .journey[data-step='4'] .st:nth-child(5) { color: var(--text); }
.journey[data-step='0'] .st:nth-child(1) .st-dot, .journey[data-step='1'] .st:nth-child(2) .st-dot, .journey[data-step='2'] .st:nth-child(3) .st-dot, .journey[data-step='3'] .st:nth-child(4) .st-dot, .journey[data-step='4'] .st:nth-child(5) .st-dot { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.ticket { position: absolute; top: 0; left: 0; width: 20%; display: grid; justify-items: center; pointer-events: none; transform: translateX(calc(var(--j, 0) * 100%)); transition: transform 0.8s var(--ease-out); z-index: 2; }
.ticket .kg { width: 40px; height: 40px; }
.jlogs { position: relative; min-height: 150px; }
.jlog { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.45s var(--ease), transform 0.55s var(--ease-out); pointer-events: none; }
.journey[data-step='0'] .l0, .journey[data-step='1'] .l1, .journey[data-step='2'] .l2, .journey[data-step='3'] .l3, .journey[data-step='4'] .l4 { opacity: 1; transform: none; }
.jhead { margin: 0 0 8px; font: 700 1.35rem var(--font-display); letter-spacing: -0.02em; }
.jline { margin: 0 0 6px; color: var(--text-dim); }
.jline.mono { font-family: var(--font-mono); font-size: 0.88rem; color: var(--text); overflow-wrap: anywhere; }
.jline .n { font-family: var(--font-mono); color: var(--accent); }
.jbar { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; margin: 6px 0 10px; max-width: 560px; }
.jbar i { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0.04); }
.journey[data-step='1'] .jbar i { animation: jfill 2.8s var(--ease) forwards; }
@keyframes jfill { to { transform: scaleX(1); } }
.jname { position: relative; min-height: 1.6em; }
.jname .old, .jname .new { display: block; }
.jname .new { position: absolute; left: 0; top: 0; opacity: 0; color: var(--accent); }
.journey[data-step='2'] .jname .old { animation: jold 3s var(--ease) 0.4s forwards; }
.journey[data-step='2'] .jname .new { animation: jnew 3s var(--ease-out) 0.4s forwards; }
@keyframes jold { 0%, 30% { opacity: 1; } 55%, 100% { opacity: 0; transform: translateY(-8px); filter: blur(4px); } }
@keyframes jnew { 0%, 30% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 60%, 100% { opacity: 1; transform: none; filter: none; } }
.jtree { padding-left: 1.4em; position: relative; opacity: 0; }
.jtree::before { content: ''; position: absolute; left: 0.4em; top: 0.1em; bottom: 0.9em; width: 0.7em; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.journey[data-step='3'] .jtree { animation: jin 0.6s var(--ease-out) 0.3s forwards; }
.journey[data-step='3'] .jtree.t2 { animation-delay: 0.9s; color: var(--c-tv); }
@keyframes jin { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.jtoast { display: inline-flex; align-items: center; gap: 12px; margin: 8px 0 0; padding: 12px 18px; border-radius: 4px 14px 14px 14px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
.jtoast i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-wanted); box-shadow: 0 0 12px var(--c-wanted); }
.jtoast span { margin-left: 8px; padding: 4px 12px; border-radius: 4px 9px 9px 9px; background: var(--accent); color: var(--on-accent); font-size: 0.85rem; }
@media (max-width: 700px) {
  .st b { font-size: 0.7rem; }
  .st-dot { width: 42px; height: 42px; }
  .journey .track::before, .journey .track::after { top: 61px; }
  .jlogs { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .jtree { opacity: 1; }
  .jname .old { display: none; }
  .jname .new { opacity: 1; position: static; }
}

/* section headings: words rise in one by one once the heading is in view */
.js .sec-head h2 .rw { display: inline-block; opacity: 0; transform: translateY(0.4em); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i) * 45ms + 100ms); }
.js .sec-head.in h2 .rw, .js [data-reveal].in .sec-head h2 .rw { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .sec-head h2 .rw { opacity: 1; transform: none; } }


/* ============ FIXED BACKGROUND: the media shapes and the logo, kept faint ============ */
.bg-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.bgi { position: absolute; left: var(--x); top: var(--y); width: var(--s); opacity: var(--o); transform: translate3d(0, calc(var(--bgy, 0) * var(--d) * 1px), 0) rotate(var(--r)); }
.bgi .kg { width: 100%; height: auto; filter: none; animation: bgfloat var(--t) ease-in-out infinite alternate; animation-delay: var(--ad); }
@keyframes bgfloat { to { transform: translate3d(0, -16px, 0); } }

/* ============ MORE FEATURES ============ */
.more-feats { margin-top: 36px; }
.more-feats h3 { font-size: 1.2rem; margin-bottom: 14px; }
.more-feats p { margin: 18px 0 0; }

/* short blocks of text break evenly instead of leaving one word alone on the last line */
.jline, .note, .qa-a p, .support-band p, .fair p, .zeros li { text-wrap: balance; }

@media (max-width: 900px) { .faq { columns: 1; } }


/* ============ SHELF, stacked: phones, small tablets, and no script ============
   Every card shows everything, one under the other. Nothing opens or closes. */
@media (max-width: 1000px) {
  .shelf { flex-direction: column; height: auto; container-type: normal; }
  .kcard { flex: none; contain: none; cursor: default; }
  .kin { position: static; width: auto; padding: 112px 24px 24px; }
  .kcard h3 { font-size: 1.5rem; }
  .kcard .more { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 12px; }
  .kcard.open .kg, .kcard .kg { transform: none; }
  .kcard.music.open::before, .kcard.audio.open::before, .kcard.movie.open::after, .kcard.tv.open::after, .kcard.book.open::after { transform: none; }
  .kcard.movie.open::after { transform: rotate(18deg); }
  .kcard.book.open::after { transform: none; }
  .kcard .facts li { white-space: normal; }
  .kcard .tag { white-space: normal; }
}
html:not(.js) .shelf { flex-direction: column; height: auto; container-type: normal; }
html:not(.js) .kcard { flex: none; contain: none; cursor: default; }
html:not(.js) .kin { position: static; width: auto; padding: 112px 24px 24px; }
html:not(.js) .kcard .more { position: static; opacity: 1; visibility: visible; transform: none; margin-top: 12px; }

/* ============ BUTTON: a bigger link-out button (used under sections) ============ */
.btn.pill { gap: 12px; padding: 12px 24px 12px 12px; border-radius: 999px; font-size: 1.05rem; background: var(--surface-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.btn.pill > .ico:first-child { box-sizing: content-box; width: 20px; height: 20px; padding: 9px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
.btn.pill:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.pill:hover > .ico:first-child { background: color-mix(in srgb, var(--on-accent) 14%, transparent); color: var(--on-accent); }
.btn.pill:hover .ico:last-child { transform: translateX(3px); }
.more-feats { text-align: center; }
.more-feats .chips { justify-content: center; }
.more-cta { display: flex; justify-content: center; margin: 30px 0 0 !important; }

/* ============ BENTO: more tiles ============ */
.tile.t-full { --c: 12; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; color: var(--text-dim); font-size: 1rem; }
.ticks li { position: relative; padding-left: 22px; text-wrap: pretty; }
.ticks li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; border-radius: 2px 4px 4px 4px; background: var(--k, var(--accent)); }
.ticks b { color: var(--text); }
.tile.accounts { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 40px); }
.tile.accounts h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); max-width: 22em; }
.tile.accounts .tag { margin-bottom: 8px; }
.acc-copy > p:not(.tag) { margin: 10px 0 0; color: var(--text-dim); max-width: 40rem; }
.acc-vis { padding-top: 0 !important; margin-top: 0 !important; }
.perm { padding: 18px; border-radius: 6px 20px 20px 20px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3); }
.perm-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.perm-head b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 0.85rem var(--font-display); background: var(--c-music); color: #0b0d18; }
.perm-head span { font: 700 1.05rem var(--font-display); }
.perm-head em { margin-left: auto; font: 500 0.75rem var(--font-mono); font-style: normal; color: var(--faint); }
.perm-list { list-style: none; margin: 8px 0 0; padding: 0; }
.perm-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 0.95rem; color: var(--text-dim); }
.sw { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--surface-3); border: 1px solid var(--border); }
.sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--faint); }
.sw.on { background: color-mix(in srgb, var(--accent) 80%, #000); border-color: transparent; }
.sw.on::after { left: 18px; background: #fff; }
.perm-kinds { list-style: none; margin: 8px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; }
.perm-kinds li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 4px 10px 10px 10px; font: 500 0.8rem var(--font-body); color: var(--text); border: 1px solid color-mix(in srgb, var(--kk) 55%, var(--border)); background: color-mix(in srgb, var(--kk) 12%, transparent); }
.perm-kinds li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--kk); }
.perm-kinds .movie { --kk: var(--c-movie); } .perm-kinds .tv { --kk: var(--c-tv); } .perm-kinds .music { --kk: var(--c-music); } .perm-kinds .book { --kk: var(--c-book); }
.perm-kinds .off { color: var(--faint); background: transparent; border-style: dashed; border-color: var(--border); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--faint) 60%, transparent); }
.perm-kinds .off::before { background: var(--faint); }
.perm-req { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: var(--surface); border: 1px dashed color-mix(in srgb, var(--c-wanted) 55%, var(--border)); }
.pr-t { display: grid; gap: 1px; min-width: 0; }
.pr-t b { font: 600 0.9rem var(--font-body); }
.pr-t i { font: 400 0.78rem var(--font-body); font-style: normal; color: var(--faint); }
.pr-b { display: flex; gap: 6px; }
.pb { padding: 3px 11px; border-radius: 4px 9px 9px 9px; background: var(--accent); color: var(--on-accent); font: 600 0.78rem var(--font-body); }
.pb.no { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.perm-left { margin: 12px 0 0; font: 500 0.8rem var(--font-mono); color: var(--faint); }
.perm-left b { color: var(--text); }
.clients { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.clients li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 4px 10px 10px 10px; background: var(--surface-2); border: 1px solid var(--border); font: 500 0.88rem var(--font-body); }
.clients em { font: 500 0.78rem var(--font-mono); font-style: normal; color: var(--faint); }
.clients li:first-child em { color: var(--accent); }
.tile.in-stack { gap: 6px; }

/* ============ MOVING IN: the logo grid ============ */
.move { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.move-facts { margin-top: 22px; }
.pl-title { margin: 0 0 12px; font: 600 0.78rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.plgrid { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
.pl { display: flex; align-items: center; gap: 11px; padding: 9px 12px 9px 9px; border-radius: 4px 12px 12px 12px; border: 1px solid var(--border); background: var(--surface); color: var(--faint); transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); }
.pl-g { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface-2); }
.pl-g svg { width: 24px; height: 24px; fill: currentColor; }
.pl.wide .pl-g { position: relative; width: 64px; overflow: hidden; }
.pl.wide .pl-g svg { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); }
.mono-g { font: 800 1.05rem var(--font-display); letter-spacing: -0.02em; }
.pl-n { font: 600 0.9rem var(--font-body); color: var(--text-dim); transition: color var(--dur-hover) var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) and (pointer: fine) {
  .pl:hover { color: var(--lc, var(--text)); border-color: color-mix(in srgb, var(--lc, var(--text)) 50%, var(--border)); background: var(--surface-2); }
  .pl:hover .pl-n { color: var(--text); }
}
.pl-note { margin: -8px 0 0; font-size: 0.85rem; color: var(--faint); }
.install .plgrid { margin-top: 22px; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
.install .plgrid .pl-n { font-size: 0.85rem; }

/* ============ INSTALL: many tabs ============ */
.tabs { gap: 6px; }
.tabs button { transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease), background var(--dur-hover) var(--ease); padding: 7px 14px; font-size: 0.88rem; }
.panel > p { margin: 0 0 14px; }
.panel > p:first-child { color: var(--text); }

/* ============ FOOTER WORDMARK in 3D ============
   Twenty copies of the word stacked a little apart in depth make the letters thick. The page
   script tilts the whole stack with the scroll position and the pointer (transform only). */
.mega { --depth: 2px; position: relative; width: max-content; max-width: none; margin: 40px 0 10px; font: 800 clamp(3rem, 15.2vw, 15rem) var(--font-display); letter-spacing: -0.06em; line-height: 0.9; white-space: nowrap; user-select: none; padding: 0 0.06em 0.1em 0; perspective: 1100px; perspective-origin: 50% 40%; }
.mega-3d { position: relative; display: block; transform-style: preserve-3d; transform: rotateX(6deg) rotateY(-9deg); will-change: transform; }
.mega-3d .m { position: absolute; left: 0; top: 0; display: block; transform: translateZ(calc(var(--z) * var(--depth) * -1)); color: color-mix(in srgb, var(--accent) calc(62% - var(--z) * 2.2%), #04100e); }
.mega-3d .m:first-child { position: relative; }
.mega-3d .m.front { transform: translateZ(0); color: transparent; background: linear-gradient(172deg, #b6fff0 0%, var(--accent) 34%, #25bfa6 100%); -webkit-background-clip: text; background-clip: text; }
.mega-3d .m.rim { transform: translate3d(-1.6px, -1.6px, -0.5px); color: #dcfff8; }
.mega-3d .m.back { color: #04100e; }
@media (max-width: 700px) { .mega { --depth: 1px; perspective: 700px; } }
@media (prefers-reduced-motion: reduce) { .mega-3d { will-change: auto; } }

@media (prefers-reduced-motion: reduce) {
  .credits { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); mask-image: none; -webkit-mask-image: none; overflow: visible; max-width: 1240px; margin: 0 auto; padding: 6px 24px 14px; }
  .crow, .ctrack { display: contents; }
  .cc { width: auto; }
  .cc[aria-hidden='true'] { display: none; }
}

@media (max-width: 1000px) {
  .tile.accounts, .move { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .perm { padding: 14px; }
  .plgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl.wide .pl-g { width: 52px; }
  .pl.wide .pl-g svg { width: 46px; height: 46px; }
}

.card h2 { font-size: 1.2rem; margin: 0 0 0.4em; }

/* a long word or a wide child must never widen a one-column layout */
@media (max-width: 1000px) { .privacy, .install, .phones, .move { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) { .manual, .manual.index { grid-template-columns: minmax(0, 1fr); } }
.doc pre.code { background: #05060c; border: 1px solid var(--border); border-radius: 6px 18px 18px 18px; }
.prose code, .qa-a code { overflow-wrap: anywhere; }
.prose pre code { overflow-wrap: normal; }


/* ---- public numbers and survey ---- */
.stats .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 22px 0 8px; }
.stat-tile { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--surface, #12141f); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.stat-tile strong { font-family: var(--font-display, inherit); font-size: 2.2rem; line-height: 1; }
.stat-tile span { color: var(--text-dim, #9aa3b8); font-size: .92rem; }
.stat-days { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding: 10px 0; }
.stat-day { flex: 1; min-width: 4px; border-radius: 4px 4px 0 0; background: var(--accent, #3ee6c8); opacity: .85; }
.stat-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 14px 0 26px; }
.stat-group { padding: 14px 16px 12px; border-radius: 16px; background: var(--surface, #12141f); border: 1px solid var(--border, rgba(255,255,255,.1)); }
.stat-group h3 { margin: 0 0 10px; font-size: 1rem; }
.stat-row { display: grid; grid-template-columns: minmax(90px, 40%) 1fr 2.4ch; gap: 10px; align-items: center; padding: 3px 0; font-size: .92rem; }
.stat-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; }
.stat-fill { display: block; height: 100%; border-radius: 99px; background: var(--accent, #3ee6c8); }
.stat-n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim, #9aa3b8); }
form.survey { display: grid; gap: 18px; margin-top: 18px; }
.survey-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 18px; }
form.survey label { display: grid; gap: 6px; font-weight: 600; }
form.survey select, form.survey textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.18)); background: var(--surface, #12141f); color: inherit; font: inherit; }
.survey-checks { border: 1px solid var(--border, rgba(255,255,255,.12)); border-radius: 14px; padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.survey-checks legend { font-weight: 600; padding: 0 6px; }
form.survey label.check { display: inline-flex; grid-template-columns: none; align-items: center; gap: 8px; font-weight: 400; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the live star count in the header ---- */
.gh-stars { margin-left: 8px; padding-left: 9px; border-left: 1px solid var(--border, rgba(255,255,255,.18)); color: #ffd166; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-stars b { font-weight: 700; color: inherit; }
form.survey input[type=text], form.survey input[type=email] { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.18)); background: var(--surface, #12141f); color: inherit; font: inherit; }
@media (max-width: 760px) { .bar-actions .gh-btn:not(.primary) .gh-stars { display: inline; } }


/* ---- full-colour logos, the platform strip, tighter gaps, no awkward wrapping ---- */
.pl-img { width: 30px; height: 30px; object-fit: contain; display: block; }
.pl.colour .pl-g { filter: none; opacity: 1; }
.pl.colour { color: var(--text); }
.pl-n, .pl-title, .state, .btn, .tag, .st b, .story-chip, .app b, .app span, .kbtn, .chip, .legend li, nav a, .cols a, .cols strong, .tabs button, .merge-count { white-space: nowrap; }
.app { display: grid; justify-items: center; gap: 4px; }
.app .pl-img { width: 28px; height: 28px; }
.logo-marquee { overflow: hidden; margin: 8px 0 20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.lm-track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 12px; width: max-content; animation: lm-run 46s linear infinite; }
.logo-marquee:hover .lm-track { animation-play-state: paused; }
.lm-track li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); white-space: nowrap; font-weight: 600; font-size: .95rem; }
@keyframes lm-run { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .lm-track { animation: none; flex-wrap: wrap; width: auto; } .lm-track li[aria-hidden] { display: none; } }

/* narrower gaps between the sections */
.block { padding-top: clamp(22px, 3vw, 42px); padding-bottom: clamp(22px, 3vw, 42px); }
.sec-head { margin-bottom: clamp(16px, 2.4vw, 30px); }
.support-band { padding-top: 6px; }
.fair { max-width: 1240px; margin: 0 auto; padding: 0 24px 30px; box-sizing: border-box; text-wrap: pretty; }
.sec-head h2, .story h2, .merge-title h2 { text-wrap: balance; }
.sec-head p, .doc p, .fair, .tile p { text-wrap: pretty; }
.sec-head h2.one-line { white-space: nowrap; }

/* the film's journey stays in view while you scroll through it */
#journey.scroll { height: 280vh; }
#journey.scroll .jpin { position: sticky; top: 84px; }


/* ---- the five media cards: their pictures move ---- */
@keyframes film-run { to { background-position: 17px 5px, 17px calc(100% - 5px), 0 0; } }
@keyframes rings-out { 0% { scale: 0.8; opacity: 0; } 25% { opacity: 1; } 100% { scale: 1.25; opacity: 0; } }
@keyframes scan-run { to { background-position: 0 18px; } }
@keyframes disc-spin { to { rotate: 360deg; } }
@keyframes ribbon-sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 5deg; } }
@keyframes band-breathe { 0%, 100% { scale: 0.97; border-color: color-mix(in srgb, var(--k) 22%, transparent); } 50% { scale: 1.06; border-color: color-mix(in srgb, var(--k) 46%, transparent); } }
@keyframes kg-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes antenna { 0%, 100% { rotate: 0deg; } 50% { rotate: 4deg; } }
.kcard.movie::after { animation: film-run 1.6s linear infinite; }
.kcard.movie.open::after { animation-duration: 0.7s; }
.kcard.tv::after { animation: rings-out 3.2s ease-out infinite; }
.kcard.tv::before { animation: scan-run 5s linear infinite; }
.kcard.music::before { animation: disc-spin 9s linear infinite; }
.kcard.music.open::before { animation-duration: 3.5s; }
.kcard.book::after { animation: ribbon-sway 3.4s ease-in-out infinite; }
.kcard.audio::before { animation: band-breathe 3.6s ease-in-out infinite; }
.kcard .kg { animation: kg-bob 5s ease-in-out infinite; }
.kcard:nth-child(2) .kg { animation-delay: -1s; }
.kcard:nth-child(3) .kg { animation-delay: -2s; }
.kcard:nth-child(4) .kg { animation-delay: -3s; }
.kcard:nth-child(5) .kg { animation-delay: -4s; }
@media (prefers-reduced-motion: reduce) { .kcard::before, .kcard::after, .kcard .kg { animation: none !important; } }

/* ---- "and a few more things": cards that say what each one is ---- */
.morecards { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; text-align: left; }
.morecards li { display: grid; gap: 6px; align-content: start; padding: 18px 20px 20px; border-radius: 6px 20px 20px 20px; background: var(--surface); border: 1px solid var(--border); transition: border-color .2s, transform .2s, background .2s; }
.morecards li:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.morecards b { font: 700 1.05rem var(--font-display); color: var(--text); }
.morecards span { color: var(--text-dim); font-size: .95rem; line-height: 1.5; text-wrap: pretty; }
.more-feats h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

/* ---- install tabs with logos, and the full-width strip of where it runs ---- */
.tabs button { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.tabs button .pl-img { width: 20px; height: 20px; flex: none; }
.runs-on { padding: 8px 0 34px; overflow: hidden; }
.runs-on .pl-title.center { text-align: center; margin: 0 0 12px; }
.runs-on .logo-marquee { margin: 0; }

/* headings that sit above what they explain are centred, with their sub-heading */
section > .sec-head, .jpin > .sec-head { text-align: center; margin-left: auto; margin-right: auto; }
section > .sec-head p, .jpin > .sec-head p { margin-left: auto; margin-right: auto; }
#shelf .states, #community .legend { justify-content: center; }


/* ---- polish: dark logos on a light plate, a marquee that never pauses, the record turns in place ---- */
.pl-img.dark { box-sizing: border-box; padding: 3px; background: #e9edf5; border-radius: 8px; }
.logo-marquee:hover .lm-track { animation-play-state: running; }
.lm-track { animation: lm-run 52s linear infinite; }
@keyframes lm-run { to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .lm-track li[aria-hidden] { display: none; } }

/* the record sits whole inside the card and turns on its own centre, like it is playing */
.kcard.music::before { right: 16px; top: 16px; width: clamp(96px, 8.2vw, 124px); height: clamp(96px, 8.2vw, 124px); transform-origin: 50% 50%; transition: scale var(--dur-move) var(--ease-move); }
.kcard.music.open::before { transform: none; scale: 1.18; }

/* titles that sit above what they explain: everything centred, also in the community section */
.wrap > .sec-head, #community .sec-head, #faq .sec-head { text-align: center; margin-left: auto; margin-right: auto; }
.wrap > .sec-head p, #community .sec-head p, #faq .sec-head p { margin-left: auto; margin-right: auto; }
#community .legend { justify-content: center; }


/* ---- tables on the privacy page ---- */
.table-wrap { overflow-x: auto; margin: 14px 0 20px; border: 1px solid var(--border); border-radius: 14px; }
.legal-table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.legal-table th { font: 700 .78rem var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); background: var(--surface); }
.legal-table tr:last-child td { border-bottom: 0; }
.legal-table td:first-child { min-width: 16rem; }


/* ---- one rhythm: every section is separated by the same space (40px above and 40px below its content) ---- */
:root { --gap: 40px; }
.block { padding-top: var(--gap); padding-bottom: var(--gap); }
.support-band { padding-top: var(--gap); }
.runs-on { padding: var(--gap) 0; overflow: hidden; }
#community { padding-top: var(--gap); padding-bottom: var(--gap); }
.sec-head { margin-bottom: 28px; }
/* the phones: the row is only as tall as what shows, so no empty space is left under them */
.phone-row { height: clamp(400px, 36vw, 520px); }

/* ---- small phones: the header fits (the Install button is in the first screen anyway) and the film's station names do not run together ---- */
@media (max-width: 560px) {
  .bar-actions .btn.primary.gh-btn { display: none; }
  .journey .st b { display: none; }
  .journey[data-step='0'] .st:nth-child(1) b, .journey[data-step='1'] .st:nth-child(2) b, .journey[data-step='2'] .st:nth-child(3) b, .journey[data-step='3'] .st:nth-child(4) b, .journey[data-step='4'] .st:nth-child(5) b { display: block; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; }
  .journey .track { padding-bottom: 28px; }
  .journey .st { position: relative; }
}