/* MRSC website. Red + white, Apple-ish, a little unhinged. */

:root {
  --accent: #FF3B5C;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --line: rgba(0, 0, 0, 0.08);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --max: 1080px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-splashing { overflow: hidden; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

h1, h2, h3 { margin: 0; font-weight: 700; color: var(--ink); }
h1 { font-size: clamp(44px, 7.2vw, 88px); line-height: 1.02; letter-spacing: -0.045em; }
h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -0.04em; }
h2.mega { font-size: clamp(50px, 9.4vw, 124px); line-height: 0.98; letter-spacing: -0.05em; }
.subhead { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.1; }
.lede {
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.42;
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: -0.016em;
  max-width: 700px;
  margin: 22px auto 0;
}
.fine { font-size: 13px; color: var(--ink-3); margin: 14px 0 0; line-height: 1.45; }
.center { text-align: center; }

section { position: relative; }
.section-head { text-align: center; max-width: 960px; margin: 0 auto; padding: 0 22px; }
.section-head--tight { margin-top: 72px; }

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

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  background: #fff;
  cursor: pointer;
}
.splash-flood { position: absolute; inset: 0; background: var(--accent); opacity: 0; }
.splash-logo { position: relative; width: min(340px, calc(100vw - 60px)); height: auto; overflow: visible; }
.splash.is-gone { display: none; }
.stamp-letter { transform-box: view-box; transform-origin: 512px 512px; opacity: 0; }
.stamp-ghost { transform-box: view-box; transform-origin: 512px 512px; opacity: 0; }

/* ---------- Glass ---------- */
.glass-btn {
  --tint: var(--accent);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px;
  border: 0; border-radius: 999px;
  font: 600 17px/1 var(--font); letter-spacing: -0.01em;
  color: #fff; text-decoration: none; white-space: nowrap;
  cursor: pointer; isolation: isolate; overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tint) 78%, #fff) 0%, var(--tint) 52%, color-mix(in srgb, var(--tint) 86%, #000) 100%);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.65),
    inset 0 -1px 2px rgba(0, 0, 0, 0.16),
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.3),
    0 12px 28px -10px color-mix(in srgb, var(--tint) 75%, transparent),
    0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.45s var(--spring), box-shadow 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.glass-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(140px 70px at var(--mx, 30%) var(--my, -10%), rgba(255, 255, 255, 0.5), transparent 70%);
  transition: opacity 0.3s;
}
.glass-btn::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 1px; height: 46%;
  border-radius: 999px; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
}
.glass-btn:hover { transform: scale(1.035); }
.glass-btn:active { transform: scale(0.96); transition-duration: 0.12s; }
.glass-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--tint) 45%, transparent); outline-offset: 3px; }
.glass-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.glass-btn svg .dot { fill: currentColor; stroke: none; }
.glass-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.glass-btn--white {
  color: var(--accent);
  background: linear-gradient(180deg, #fff, #f4f4f6);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(0, 0, 0, 0.08), 0 14px 30px -12px rgba(0, 0, 0, 0.35);
}
.glass-btn--clear {
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.glass-btn[hidden] { display: none; }

.glass-round {
  width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 6px 18px -6px rgba(0, 0, 0, 0.18);
  transition: transform 0.4s var(--spring), background 0.2s;
}
.glass-round:hover { transform: scale(1.08); }
.glass-round:active { transform: scale(0.92); }
.glass-round svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.glass-card {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border-radius: 30px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.07), 0 30px 70px -30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.nav-inner { max-width: var(--max); margin: 0 auto; height: 54px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
.nav-brand img { border-radius: 7px; }
.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 13.5px; text-decoration: none; color: var(--ink); opacity: 0.78; transition: opacity 0.2s; }
.nav-links a:hover { opacity: 1; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-discord { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #5865F2; background: rgba(88, 101, 242, 0.1); transition: transform 0.4s var(--spring), background 0.2s; }
.nav-discord:hover { transform: scale(1.08); background: rgba(88, 101, 242, 0.18); }
.nav-discord svg { width: 20px; height: 20px; }
use[href="#i-discord"] { fill: currentColor; stroke: none; }
.dc-note { margin: 22px auto 0; font-size: 15px; color: var(--ink-2); }
.dc-note a { color: #5865F2; font-weight: 600; text-decoration: none; white-space: nowrap; }
.dc-note a:hover { text-decoration: underline; }
.dc-note svg { display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.3em; vertical-align: -0.22em; }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 40px; text-align: center; overflow: hidden; }
.hero-copy { padding: 0 22px; }
.hero-icon {
  width: 112px; height: 112px; margin: 0 auto;
  border-radius: 25px;
  box-shadow: 0 22px 44px -14px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.hero-kicker { margin: 26px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--accent); }
.hero h1 { margin: 12px auto 0; max-width: 920px; }
.cta-row { display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 36px; }
.text-link { color: var(--accent); text-decoration: none; font-size: 19px; font-weight: 500; }
.text-link:hover { text-decoration: underline; }

.hero-phones {
  --w: clamp(210px, 26vw, 320px);
  position: relative; height: calc(var(--w) * 2.2);
  max-width: 1100px; margin: 70px auto 0;
}
.hero-phone { position: absolute; left: 50%; top: 0; width: var(--w); transition: transform 1.4s var(--ease-out), opacity 1.2s var(--ease-out); }
.hero-phone--center { z-index: 3; transform: translate(-50%, 0); }
.hero-phone--left { z-index: 2; transform: translate(calc(-50% - var(--w) * 0.78), calc(10% + var(--py, 0px))) scale(0.86); }
.hero-phone--right { z-index: 2; transform: translate(calc(-50% + var(--w) * 0.78), calc(10% + var(--py, 0px))) scale(0.86); }
.js body:not(.ready) .hero-phone { opacity: 0; }
.js body:not(.ready) .hero-phone--center { transform: translate(-50%, 18%); }
.js body:not(.ready) .hero-phone--left { transform: translate(-50%, 24%) scale(0.86); }
.js body:not(.ready) .hero-phone--right { transform: translate(-50%, 24%) scale(0.86); }
.hero-phone--left { transition-delay: 0.12s; }
.hero-phone--right { transition-delay: 0.2s; }

/* ---------- Phone frame ---------- */
.phone {
  position: relative; width: 100%; aspect-ratio: 402 / 874;
  border-radius: 16.4% / 7.55%;
  padding: 1.3%;
  background: linear-gradient(140deg, #8a8a90 0%, #3b3b40 18%, #6e6e74 46%, #2c2c30 74%, #74747a 100%);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.5), 0 24px 40px -24px rgba(0, 0, 0, 0.35);
}
.phone-bezel { width: 100%; height: 100%; border-radius: 15.4% / 7.1%; background: #050506; padding: 2.6%; }
.screen {
  --pt: calc(100cqw / 402);
  position: relative; width: 100%; height: 100%;
  border-radius: 13.6% / 6.3%;
  overflow: hidden; background: #000;
  container-type: inline-size;
  isolation: isolate;
  transform: translateZ(0);
}
.screen > img.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 30; }
.screen > .shot-status { z-index: 35; }
.shot-status svg { fill: none; stroke: none; }
.shot-status svg.fill { fill: currentColor; }
.screen .di { position: absolute; z-index: 40; top: calc(11 * var(--pt)); left: 50%; width: calc(124 * var(--pt)); height: calc(36 * var(--pt)); transform: translateX(-50%); border-radius: 999px; background: #000; }

/* ---------- Mock: shared ---------- */
.mock { position: absolute; inset: 0; overflow: hidden; text-align: left; color: var(--m-ink, #fff); font-family: var(--m-font, var(--font)); font-stretch: var(--m-stretch, normal); letter-spacing: var(--m-track, -0.01em); text-transform: var(--m-case, none); }
.mock svg { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mock svg.fill { fill: currentColor; stroke: none; }
.m-bg { position: absolute; inset: 0; z-index: 0; }
.m-bg .cover { position: absolute; inset: -30%; width: 160%; height: 160%; filter: blur(calc(46 * var(--pt))) saturate(1.3); }
.m-bg::after { content: ""; position: absolute; inset: 0; background: var(--m-scrim, none); }
.m-tex { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
.m-tex.grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.55; mix-blend-mode: overlay; }
.m-tex.paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .9 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); opacity: 0.5; mix-blend-mode: multiply; }
.m-tex.halftone { background-image: radial-gradient(circle, color-mix(in srgb, var(--m-ink, #fff) 22%, transparent) 32%, transparent 36%); background-size: calc(7 * var(--pt)) calc(7 * var(--pt)); mix-blend-mode: normal; }
.m-tex.scanlines { background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.32) 0 calc(1.2 * var(--pt)), transparent calc(1.2 * var(--pt)) calc(3.4 * var(--pt))); }
.m-tex.scanlines::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%); background-size: 100% 300%; animation: scan 6s linear infinite; }
@keyframes scan { from { background-position: 0 100%; } to { background-position: 0 -200%; } }

.m-status { position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: calc(58 * var(--pt)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(34 * var(--pt)) 0 calc(44 * var(--pt)); font: 600 calc(17 * var(--pt)) / 1 var(--font); letter-spacing: -0.02em; text-transform: none; font-stretch: normal; }
.m-status .icons { display: flex; gap: calc(6 * var(--pt)); align-items: center; }
.m-status svg { height: calc(13 * var(--pt)); width: auto; }
.m-home { position: absolute; z-index: 20; bottom: calc(8 * var(--pt)); left: 50%; width: calc(140 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 9px; background: currentColor; transform: translateX(-50%); opacity: 0.9; }

.gl { background: color-mix(in srgb, var(--m-ink, #fff) 14%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 calc(0.6 * var(--pt)) 0 color-mix(in srgb, #fff 35%, transparent); }
.mock.is-light .gl { background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 #fff, 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 calc(6 * var(--pt)) calc(18 * var(--pt)) rgba(0, 0, 0, 0.08); }

/* ---------- Mock: Now Playing ---------- */
.np-grab { position: absolute; z-index: 10; top: calc(60 * var(--pt)); left: 50%; width: calc(40 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 9px; background: currentColor; opacity: 0.35; transform: translateX(-50%); }
.np-col { position: absolute; z-index: 10; inset: calc(92 * var(--pt)) calc(24 * var(--pt)) calc(34 * var(--pt)); display: flex; flex-direction: column; gap: var(--m-gap, calc(20 * var(--pt))); }
.np-art-wrap { display: flex; justify-content: center; transition: transform 0.5s var(--spring); }
.np-col.paused .np-art-wrap { transform: scale(0.84); }
.np-art { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: calc(20 * var(--m-corner, 1) * var(--pt)); box-shadow: 0 calc(16 * var(--pt)) calc(28 * var(--pt)) rgba(0, 0, 0, 0.45); }
.np-art .cover { position: absolute; inset: 0; }
.layout-large .np-art-wrap { margin: 0 calc(-8 * var(--pt)); }
.layout-large .np-art { border-radius: calc(12 * var(--m-corner, 1) * var(--pt)); }
.shape-sharp .np-art { border-radius: calc(2 * var(--pt)); }
.shape-circle .np-art { border-radius: 50%; width: 92%; }
.shape-arch .np-art { border-radius: 999px 999px calc(14 * var(--pt)) calc(14 * var(--pt)); width: 88%; aspect-ratio: 0.86; }
.frame-print .np-art { border: calc(10 * var(--pt)) solid #fff; }
.frame-outline .np-art { outline: calc(3 * var(--pt)) solid var(--m-ink, #fff); outline-offset: calc(4 * var(--pt)); }
.frame-glow .np-art { box-shadow: 0 0 calc(40 * var(--pt)) color-mix(in srgb, var(--m-accent) 75%, transparent), 0 0 calc(110 * var(--pt)) color-mix(in srgb, var(--m-accent) 45%, transparent); }

.np-vinyl { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.03) 31%), repeating-radial-gradient(circle, #0c0c0d 0 calc(1.4 * var(--pt)), #1a1a1c calc(1.4 * var(--pt)) calc(2.8 * var(--pt))); box-shadow: 0 calc(18 * var(--pt)) calc(34 * var(--pt)) rgba(0, 0, 0, 0.5); }
.np-vinyl::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 30deg, transparent 0 8%, rgba(255, 255, 255, 0.13) 12%, transparent 18% 50%, rgba(255, 255, 255, 0.1) 62%, transparent 68%); z-index: 2; }
.np-vinyl .disc { position: absolute; inset: 0; border-radius: 50%; animation: spin 1.8s linear infinite; }
.np-col.paused .np-vinyl .disc { animation-play-state: paused; }
.np-vinyl .label { position: absolute; inset: 31%; border-radius: 50%; overflow: hidden; }
.np-vinyl .label .cover { position: absolute; inset: 0; }
.np-vinyl .spindle { position: absolute; z-index: 3; left: 50%; top: 50%; width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); margin: calc(-7 * var(--pt)) 0 0 calc(-7 * var(--pt)); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fafafa, #9a9aa0); }
@keyframes spin { to { transform: rotate(360deg); } }

.np-min { display: flex; flex-direction: column; gap: calc(30 * var(--pt)); padding-top: calc(30 * var(--pt)); }
.np-min .np-art { width: calc(130 * var(--pt)); border-radius: calc(16 * var(--m-corner, 1) * var(--pt)); }
.np-wave { display: flex; align-items: center; gap: calc(3 * var(--pt)); height: calc(150 * var(--pt)); }
.np-wave i { flex: 1; height: 30%; border-radius: 9px; background: currentColor; opacity: 0.85; animation: wave 1.1s ease-in-out infinite alternate; }
.np-col.paused .np-wave i { animation-play-state: paused; }
@keyframes wave { from { height: 12%; } to { height: var(--h, 80%); } }

.np-title { display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.np-title .tt { flex: 1; min-width: 0; }
.np-title .t1 { font-size: calc(22 * var(--pt)); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-title .t2 { font-size: calc(19 * var(--pt)); opacity: 0.6; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.align-center .np-title .tt { text-align: center; }
.align-center .np-title .gc { display: none; }
.gc { flex: none; width: calc(42 * var(--pt)); height: calc(42 * var(--pt)); border-radius: 50%; display: grid; place-items: center; }
.gc svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }

.np-prog .track { position: relative; height: calc(6 * var(--pt)); border-radius: 9px; background: color-mix(in srgb, var(--m-ink, #fff) 25%, transparent); overflow: hidden; }
.np-prog .fill { position: absolute; inset: 0 auto 0 0; width: 34%; background: var(--m-ink, #fff); border-radius: 9px; animation: prog 50s linear infinite; }
@keyframes prog { from { width: 22%; } to { width: 88%; } }
.np-prog .times { display: flex; justify-content: space-between; align-items: center; margin-top: calc(9 * var(--pt)); font-size: calc(12 * var(--pt)); font-weight: 500; font-variant-numeric: tabular-nums; }
.np-prog .times span { opacity: 0.6; }
.np-prog .badge { display: flex; gap: calc(4 * var(--pt)); align-items: center; font-size: calc(11 * var(--pt)); font-weight: 600; opacity: 0.55; }
.np-prog .badge svg { width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); }

.np-ctrl { display: flex; align-items: center; justify-content: space-between; }
.np-ctrl.no-modes { justify-content: center; gap: calc(44 * var(--pt)); }
.np-ctrl .mode { width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); display: grid; place-items: center; opacity: 0.45; }
.np-ctrl .mode svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); }
.np-ctrl .skip { width: calc(64 * var(--pt)); height: calc(64 * var(--pt)); display: grid; place-items: center; cursor: pointer; border-radius: 50%; transition: transform 0.3s var(--spring), background 0.2s; }
.np-ctrl .skip:active { transform: scale(0.86); background: color-mix(in srgb, var(--m-ink, #fff) 12%, transparent); }
.np-ctrl .skip svg { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); }
.np-ctrl .play { --s: var(--m-playscale, 1); width: calc(74 * var(--s) * var(--pt)); height: calc(74 * var(--s) * var(--pt)); border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: transform 0.3s var(--spring); }
.np-ctrl .play:active { transform: scale(0.9); }
.np-ctrl .play svg { width: calc(28 * var(--s) * var(--pt)); height: calc(28 * var(--s) * var(--pt)); }
.play-glass .np-ctrl .play { background: rgba(255, 255, 255, 0.92); color: rgba(0, 0, 0, 0.75); }
.mock.is-light.play-glass .np-ctrl .play { background: var(--m-ink, #111); color: color-mix(in srgb, #fff 92%, transparent); }
.play-accent .np-ctrl .play { background: var(--m-accent); color: #fff; }
.play-plain .np-ctrl .play svg { width: calc(46 * var(--s) * var(--pt)); height: calc(46 * var(--s) * var(--pt)); }

.np-bar { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-top: auto; }
.np-bar .b { flex: none; width: calc(48 * var(--pt)); height: calc(48 * var(--pt)); border-radius: 50%; display: grid; place-items: center; }
.np-bar .b svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.np-bar .sp { flex: 1; }
.np-bar .views { flex: 1; height: calc(48 * var(--pt)); border-radius: 999px; display: flex; align-items: center; justify-content: space-around; padding: 0 calc(5 * var(--pt)); }
.np-bar .views span { flex: 1; height: calc(38 * var(--pt)); display: grid; place-items: center; border-radius: 999px; }
.np-bar .views span.on { background: color-mix(in srgb, var(--m-ink, #fff) 22%, transparent); }
.np-bar .views svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.icons-outline .np-bar svg, .icons-outline .gc svg { stroke-width: 1.4; }

/* ---------- Mock: Lyrics ---------- */
.ly-head { position: absolute; z-index: 10; top: calc(84 * var(--pt)); left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); display: flex; align-items: center; gap: calc(12 * var(--pt)); }
.ly-head .mini { position: relative; flex: none; width: calc(54 * var(--pt)); height: calc(54 * var(--pt)); border-radius: calc(9 * var(--pt)); overflow: hidden; }
.ly-head .mini .cover { position: absolute; inset: 0; }
.ly-head .t1 { font-size: calc(17 * var(--pt)); font-weight: 700; }
.ly-head .t2 { font-size: calc(15 * var(--pt)); opacity: 0.6; }
.ly-head .chips { margin-left: auto; display: flex; gap: calc(6 * var(--pt)); }
.ly-head .chips span { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; display: grid; place-items: center; }
.ly-head .chips svg { width: calc(15 * var(--pt)); height: calc(15 * var(--pt)); }
.ly-lines { position: absolute; z-index: 10; top: calc(160 * var(--pt)); left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); bottom: calc(250 * var(--pt)); overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 80%, transparent); }
.ly-track { transition: transform 0.8s var(--ease-out); }
.ly-line { font-size: calc(30 * var(--pt)); font-weight: 700; line-height: 1.16; letter-spacing: -0.02em; margin: 0 0 calc(22 * var(--pt)); opacity: 0.32; filter: blur(calc(1.2 * var(--pt))); transform: scale(0.95); transform-origin: left center; transition: opacity 0.6s, filter 0.6s, transform 0.6s var(--ease-out), text-shadow 0.6s; }
.ly-line.on { opacity: 1; filter: none; transform: none; }
.glow .ly-line.on { text-shadow: 0 0 calc(18 * var(--pt)) rgba(255, 255, 255, 0.55); }
.ly-bottom { position: absolute; z-index: 10; left: calc(24 * var(--pt)); right: calc(24 * var(--pt)); bottom: calc(34 * var(--pt)); display: flex; flex-direction: column; gap: calc(18 * var(--pt)); }

/* ---------- Mock: Library ---------- */
.mock.is-light { background: #fff; }
.lib-tools { position: absolute; z-index: 10; top: calc(62 * var(--pt)); right: calc(18 * var(--pt)); display: flex; gap: calc(10 * var(--pt)); }
.lib-tools span { width: calc(40 * var(--pt)); height: calc(40 * var(--pt)); border-radius: 50%; display: grid; place-items: center; color: #111; }
.lib-tools svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); }
.lib-title { position: absolute; z-index: 10; top: calc(110 * var(--pt)); left: calc(18 * var(--pt)); font-size: calc(34 * var(--pt)); font-weight: 800; letter-spacing: -0.03em; color: #000; }
.lib-pins { position: absolute; z-index: 10; top: calc(166 * var(--pt)); left: calc(18 * var(--pt)); right: calc(18 * var(--pt)); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--pt)); }
.lib-pins .pin .cv { position: relative; aspect-ratio: 1; border-radius: calc(12 * var(--pt)); overflow: hidden; box-shadow: 0 calc(4 * var(--pt)) calc(12 * var(--pt)) rgba(0, 0, 0, 0.12); }
.lib-pins .pin .cv .cover { position: absolute; inset: 0; }
.lib-pins .pin div:last-child { font-size: calc(13 * var(--pt)); font-weight: 500; color: #111; margin-top: calc(6 * var(--pt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-rows { position: absolute; z-index: 10; top: calc(340 * var(--pt)); left: calc(18 * var(--pt)); right: calc(18 * var(--pt)); }
.lib-row { display: flex; align-items: center; gap: calc(14 * var(--pt)); height: calc(56 * var(--pt)); color: #000; border-bottom: 0.5px solid rgba(0, 0, 0, 0.1); }
.lib-row .ic { flex: none; width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: calc(10 * var(--pt)); display: grid; place-items: center; color: #fff; }
.lib-row .ic svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); stroke-width: 2.4; }
.lib-row .nm { flex: 1; font-size: calc(19 * var(--pt)); letter-spacing: -0.02em; }
.lib-row .ct { font-size: calc(15 * var(--pt)); color: #8e8e93; }
.lib-row .ch { width: calc(9 * var(--pt)); height: calc(14 * var(--pt)); color: #c4c4c7; }
.lib-mini { position: absolute; z-index: 15; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(100 * var(--pt)); height: calc(62 * var(--pt)); border-radius: 999px; display: flex; align-items: center; gap: calc(10 * var(--pt)); padding: 0 calc(16 * var(--pt)) 0 calc(12 * var(--pt)); color: #000; }
.lib-mini .cv { position: relative; flex: none; width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); border-radius: calc(9 * var(--pt)); overflow: hidden; }
.lib-mini .cv .cover { position: absolute; inset: 0; }
.lib-mini .tt { flex: 1; min-width: 0; line-height: 1.2; }
.lib-mini .t1 { font-size: calc(14 * var(--pt)); font-weight: 600; }
.lib-mini .t2 { font-size: calc(11 * var(--pt)); color: #8e8e93; }
.lib-mini .pl { width: calc(34 * var(--pt)); height: calc(34 * var(--pt)); border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 calc(2.5 * var(--pt)) color-mix(in srgb, var(--m-accent) 25%, transparent); position: relative; }
.lib-mini .pl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--m-accent) 0 38%, transparent 38%); -webkit-mask: radial-gradient(circle, transparent calc(14.5 * var(--pt)), #000 calc(15 * var(--pt))); mask: radial-gradient(circle, transparent calc(14.5 * var(--pt)), #000 calc(15 * var(--pt))); }
.lib-mini svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.lib-bar { position: absolute; z-index: 15; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); bottom: calc(26 * var(--pt)); display: flex; align-items: center; justify-content: space-between; }
.lib-bar .round { width: calc(62 * var(--pt)); height: calc(62 * var(--pt)); border-radius: 50%; display: grid; place-items: center; color: var(--m-accent); }
.lib-bar .round svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); stroke-width: 2.6; }
.lib-bar .tabs { height: calc(62 * var(--pt)); width: calc(190 * var(--pt)); border-radius: 999px; display: flex; align-items: center; padding: calc(4 * var(--pt)); color: #000; }
.lib-bar .tabs span { flex: 1; height: 100%; border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(2 * var(--pt)); font-size: calc(10 * var(--pt)); font-weight: 600; }
.lib-bar .tabs span.on { background: rgba(0, 0, 0, 0.06); color: var(--m-accent); }
.lib-bar .tabs svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }

/* ---------- Covers ---------- */
.cover { overflow: hidden; background: #333; }
.cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.3 -.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity: 0.55; }
.cover > svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Customize ---------- */
.customize { padding: 140px 0 40px; }
.swear { position: relative; display: inline-block; color: var(--accent); white-space: nowrap; }
.swear-word { display: inline-block; transition: transform 0.5s var(--spring), opacity 0.25s; }
.swear-word.flip { transform: rotateX(90deg); opacity: 0; }
.brush-underline { position: absolute; left: -2%; right: -2%; bottom: -0.1em; width: 104%; height: 0.32em; overflow: visible; }
.brush-underline path { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 0.9s var(--ease-out) 0.35s; filter: url(#rough); opacity: 0.9; }
.reveal.in .brush-underline path, .no-js .brush-underline path { stroke-dashoffset: 0; }
.mom-toggle {
  margin: 26px auto 0; display: inline-flex; align-items: center; gap: 10px;
  border: 0; background: var(--bg-2); border-radius: 999px; padding: 7px 16px 7px 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: background 0.2s;
}
.mom-toggle:hover { background: #ececf0; }
.mom-switch { position: relative; width: 38px; height: 23px; border-radius: 999px; background: #d1d1d6; transition: background 0.25s; }
.mom-switch span { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: transform 0.35s var(--spring); }
.mom-toggle[aria-pressed="true"] .mom-switch { background: #34c759; }
.mom-toggle[aria-pressed="true"] .mom-switch span { transform: translateX(15px); }

.carousel { --card: clamp(232px, 25vw, 300px); margin-top: 40px; position: relative; }
.carousel-track {
  display: flex; gap: clamp(20px, 3vw, 40px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 40px calc(50vw - var(--card) / 2) 10px;
  cursor: grab;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track.dragging { scroll-snap-type: none; cursor: grabbing; }
.carousel-track.dragging * { pointer-events: none; }
.car-card { flex: 0 0 var(--card); scroll-snap-align: center; transform: scale(var(--s, 1)); opacity: var(--o, 1); transition: transform 0.12s linear, opacity 0.12s linear; user-select: none; -webkit-user-select: none; }
.car-flip { display: block; perspective: 1800px; cursor: pointer; border-radius: 16% / 7.5%; outline: none; }
.car-flip:focus-visible .phone { outline: 3px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 4px; }
.flip-inner { position: relative; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(0.3, 1.35, 0.5, 1); }
.car-flip[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
.flip-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-back { position: absolute; inset: 0; transform: rotateY(180deg); }
.flip-hint { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--bg-2); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; transition: transform 0.4s var(--spring), background 0.2s; }
.flip-hint:hover { background: #ebebef; }
.flip-hint:active { transform: scale(0.94); }
.flip-hint svg { width: 16px; height: 16px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.6s var(--spring); }
.car-flip[aria-pressed="true"] + .car-cap .flip-hint svg { transform: rotate(180deg); }
.car-cap { text-align: center; margin-top: 30px; opacity: var(--c, 1); }
.car-cap .nm { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; display: inline-flex; align-items: center; gap: 8px; }
.car-cap .nm i { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
.car-cap p { margin: 6px auto 0; font-size: 16px; color: var(--ink-2); max-width: 300px; line-height: 1.4; }
.carousel-ui { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 30px; }
.carousel-dots { display: flex; gap: 8px; align-items: center; padding: 0 8px; height: 44px; border-radius: 999px; background: var(--bg-2); padding: 0 16px; }
.carousel-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: #c7c7cc; cursor: pointer; transition: width 0.4s var(--spring), background 0.3s; }
.carousel-dots button[aria-selected="true"] { width: 24px; background: var(--accent); }
#carPlay .i-play { display: none; }
#carPlay.paused .i-play { display: block; fill: var(--ink); }
#carPlay.paused .i-pause { display: none; }

/* ---------- Chips ---------- */
.chip { border: 0; cursor: pointer; height: 32px; padding: 0 13px; border-radius: 999px; background: var(--bg-2); font-size: 14px; font-weight: 500; color: var(--ink); transition: background 0.2s, color 0.2s, transform 0.3s var(--spring); }
.chip:hover { background: #e9e9ee; }
.chip:active { transform: scale(0.94); }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; }

/* ---------- Every knob ---------- */
.knobs { padding: 150px 0 40px; overflow: hidden; }
.knob-phones { display: flex; justify-content: center; align-items: flex-start; margin: 70px auto 0; padding: 0 22px; max-width: 1180px; }
.knob-phone { flex: 0 0 clamp(150px, 17vw, 214px); margin: 0 -12px; transform: translateY(var(--y)) rotate(var(--r)); transition: transform 0.6s var(--spring); position: relative; z-index: 1; }
.knob-phone--mid { z-index: 3; }
.knob-phone:nth-child(2), .knob-phone:nth-child(4) { z-index: 2; }
.knob-phone:hover { transform: translateY(calc(var(--y) - 18px)) rotate(var(--r)) scale(1.04); z-index: 4; }
.knob-phone figcaption { text-align: center; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.knob-phone .phone { box-shadow: 0 40px 70px -36px rgba(0, 0, 0, 0.5), 0 18px 30px -20px rgba(0, 0, 0, 0.3); }
.knob-wall { margin-top: 80px; display: flex; flex-direction: column; gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.knob-row { overflow: hidden; }
.knob-track { display: flex; gap: 10px; width: max-content; animation: marquee 90s linear infinite; }
.knob-row.rev .knob-track { animation-direction: reverse; animation-duration: 110s; }
.knob-row:nth-child(3) .knob-track { animation-duration: 100s; }
.knob-wall:hover .knob-track { animation-play-state: paused; }
.knob { flex: none; height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 999px; background: var(--bg-2); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; }
.knob.hot { background: var(--accent); color: #fff; }

/* ---------- all in one app btw ---------- */
.btw { padding: 220px 22px 100px; text-align: center; overflow: hidden; }
.btw-inner { position: relative; display: inline-block; font-size: clamp(54px, 10.5vw, 150px); padding: 0.45em 0.55em 0.5em; }
.btw-text { margin: 0; font-size: 1em; font-weight: 800; letter-spacing: -0.055em; line-height: 0.98; color: var(--ink); }
.btw-text span { color: var(--accent); font-style: italic; letter-spacing: -0.03em; }
.btw-boar, .btw-skull { position: absolute; height: auto; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
.btw-boar { left: -0.4em; top: -0.95em; width: 1.6em; transform: rotate(-9deg); }
.btw-skull { right: -0.22em; bottom: -0.38em; width: 1em; transform: rotate(14deg); }

/* ---------- Features ---------- */
.features { padding: 160px 0 40px; }
.bento { max-width: var(--max); margin: 60px auto 0; padding: 0 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 20px; }
.tile { position: relative; overflow: hidden; border-radius: 32px; background: var(--bg-2); padding: 34px; min-height: 440px; display: flex; flex-direction: column; gap: 26px; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--dark { background: #0c0c0e; color: #f5f5f7; }
.tile--dark h3 { color: #f5f5f7; }
.tile h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.08; letter-spacing: -0.03em; }
.tile p { margin: 12px 0 0; color: var(--ink-2); font-size: 17px; line-height: 1.45; max-width: 520px; }
.tile--dark p { color: rgba(245, 245, 247, 0.62); }
.tile-copy .glass-btn { margin-top: 20px; }

/* Sources */
.sleeves { margin-top: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-right: 8%; }
.sleeve { position: relative; aspect-ratio: 1; }
.sleeve .rec { position: absolute; inset: 4%; border-radius: 50%; background: radial-gradient(circle, var(--c) 0 17%, #111 17.5% 19%, transparent 19.5%), repeating-radial-gradient(circle, #111 0 2px, #1d1d20 2px 4px); transition: transform 0.9s var(--spring); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.sleeve .jacket { position: relative; z-index: 2; height: 100%; border-radius: 8px; background: var(--c); color: #fff; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c) 90%, #000), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
.sleeve .jacket::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 45%); pointer-events: none; }
.sleeve .jacket svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sleeve .jacket b { font-size: 16px; letter-spacing: -0.02em; line-height: 1.15; display: block; }
.sleeve .jacket small { font-size: 12.5px; opacity: 0.85; line-height: 1.25; display: block; margin-top: 3px; }
.tile--sources.in .sleeve .rec { transform: translateX(34%) rotate(40deg); }
.tile--sources.in .sleeve:hover .rec { transform: translateX(48%) rotate(120deg); }

/* Lyrics */
.lyrics-demo { position: relative; margin-top: auto; flex: 1; min-height: 360px; display: flex; flex-direction: column; }
.lyrics-demo .ld-head { display: flex; align-items: center; gap: 12px; }
.lyrics-demo .ld-head .cv { position: relative; width: 46px; height: 46px; border-radius: 9px; overflow: hidden; flex: none; }
.lyrics-demo .ld-head .cv .cover { position: absolute; inset: 0; }
.lyrics-demo .ld-head b { display: block; font-size: 15px; }
.lyrics-demo .ld-head small { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.55); }
.lyrics-demo .ld-tr { margin-left: auto; border: 0; cursor: pointer; height: 32px; padding: 0 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 13px; font-weight: 600; transition: background 0.2s; }
.lyrics-demo .ld-tr[aria-pressed="true"] { background: #fff; color: #000; }
.ld-view { position: relative; flex: 1; overflow: hidden; margin-top: 20px; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 78%, transparent); }
.ld-track { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.9s var(--ease-out); }
.ld-line { font-size: clamp(25px, 2.5vw, 31px); font-weight: 700; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 22px; color: rgba(255, 255, 255, 0.28); filter: blur(1.2px); transform: scale(0.96); transform-origin: left; transition: color 0.5s, filter 0.5s, transform 0.6s var(--ease-out); }
.ld-line.on { filter: none; transform: none; color: rgba(255, 255, 255, 0.28); }
.ld-line .w { transition: color 0.25s, text-shadow 0.25s; }
.ld-line.on .w.lit { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, 0.45); }
.ld-line.past { color: rgba(255, 255, 255, 0.38); }
.ld-line small { display: block; font-size: 0.55em; font-weight: 600; letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.45); margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s var(--ease-out), opacity 0.4s; }
.translating .ld-line small { max-height: 3em; opacity: 1; }

/* Search */
.search-demo { margin-top: auto; }
.search-pill { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 10px 30px -14px rgba(0, 0, 0, 0.25); font-size: 17px; font-weight: 500; }
.search-pill svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.search-pill .caret { width: 2px; height: 22px; background: var(--accent); border-radius: 2px; animation: blink 1s steps(1) infinite; margin-left: -6px; }
@keyframes blink { 50% { opacity: 0; } }
.tapes { display: flex; flex-wrap: wrap; gap: 10px; min-height: 92px; padding: 22px 4px 0; align-content: flex-start; }
.tape {
  display: inline-flex; align-items: center; height: 34px; padding: 0 14px;
  border-radius: 3px; background: #121214; color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28), 0 -1px 0 rgba(0, 0, 0, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 0 rgba(0, 0, 0, 0.4), 0 6px 14px -6px rgba(0, 0, 0, 0.5);
  transform: rotate(var(--r, 0deg)) scale(0.6); opacity: 0;
  transition: transform 0.6s var(--spring), opacity 0.3s;
}
.tape.red { background: var(--accent); }
.tape.in { transform: rotate(var(--r, 0deg)); opacity: 1; }

/* Mix */
.mix-demo { position: relative; margin-top: auto; height: 190px; }
.mix-wave { position: absolute; left: 0; right: 0; top: 18px; height: 88px; display: flex; align-items: center; gap: 3px; }
.mix-wave i { flex: 1; border-radius: 9px; height: var(--h); }
.mix-wave--a i { background: var(--accent); }
.mix-wave--b i { background: var(--ink); }
.mix-wave--a { -webkit-mask-image: linear-gradient(90deg, #000 30%, transparent 85%); mask-image: linear-gradient(90deg, #000 30%, transparent 85%); animation: mixA 7s ease-in-out infinite alternate; }
.mix-wave--b { -webkit-mask-image: linear-gradient(90deg, transparent 15%, #000 70%); mask-image: linear-gradient(90deg, transparent 15%, #000 70%); animation: mixB 7s ease-in-out infinite alternate; }
@keyframes mixA { from { opacity: 1; } to { opacity: 0.15; } }
@keyframes mixB { from { opacity: 0.15; } to { opacity: 1; } }
.mix-fader { position: absolute; left: 10%; right: 10%; top: 132px; height: 6px; border-radius: 9px; background: rgba(0, 0, 0, 0.1); }
.mix-fader span { position: absolute; top: 50%; left: 0; width: 46px; height: 28px; margin: -14px 0 0 -23px; border-radius: 8px; background: linear-gradient(180deg, #fff, #e6e6ea); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.06); animation: fader 7s ease-in-out infinite alternate; }
.mix-fader span::after { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 2px; margin-left: -1px; background: var(--accent); border-radius: 2px; }
@keyframes fader { from { left: 0; } to { left: 100%; } }
.mix-label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--ink-2); background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }
.mix-label::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34c759; margin-right: 7px; vertical-align: 1px; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }

/* EQ */
.eq-demo { margin-top: auto; }
.eq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.eq-faders { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; height: 170px; }
.eq-f { position: relative; display: flex; flex-direction: column; align-items: center; }
.eq-f .rail { position: relative; flex: 1; width: 4px; border-radius: 9px; background: rgba(0, 0, 0, 0.1); }
.eq-f .rail::before { content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.15); }
.eq-f .knob { position: absolute; left: 50%; top: var(--y, 50%); width: 20px; height: 13px; margin: -6.5px 0 0 -10px; border-radius: 5px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent)); box-shadow: 0 3px 8px color-mix(in srgb, var(--accent) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: top 0.9s var(--spring); }
.eq-f small { font-size: 10px; color: var(--ink-3); margin-top: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Covers */
.tile--covers { flex-direction: row; align-items: center; }
.tile--covers .tile-copy { flex: 0 0 38%; }
.cover-grid { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; perspective: 900px; }
.cover-grid .cv { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.45); transition: transform 0.7s var(--spring); }
.cover-grid .cv .cover { position: absolute; inset: 0; }
.cover-grid .cv.flip { transform: rotateY(90deg) scale(0.9); transition-duration: 0.22s; transition-timing-function: ease-in; }
.cover-grid .cv span { position: absolute; z-index: 2; left: 8px; bottom: 7px; font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

/* App icons */
.icon-picker { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 14px; }
.icon-opt { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.icon-opt .ico { position: relative; width: 100%; max-width: 76px; aspect-ratio: 1; border-radius: 22.5%; background: var(--c); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c) 80%, #000), inset 0 1px 0 rgba(255, 255, 255, 0.3); transition: transform 0.4s var(--spring), box-shadow 0.3s; }
.icon-opt .ico svg { width: 100%; height: 100%; }
.icon-opt:hover .ico { transform: scale(1.06) rotate(-2deg); }
.icon-opt[aria-checked="true"] .ico { box-shadow: 0 0 0 3px var(--bg-2), 0 0 0 5.5px var(--c), 0 10px 20px -10px color-mix(in srgb, var(--c) 80%, #000); }
.icon-opt[aria-checked="true"] { color: var(--ink); font-weight: 600; }

/* Vinyl toy */
.vinyl-stage { flex: 1; display: grid; place-items: center; padding: 6px 0 4px; }
.vinyl { position: relative; width: min(100%, 320px); aspect-ratio: 1; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; background: repeating-radial-gradient(circle, #101012 0 1.5px, #1e1e21 1.5px 3px); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.8), inset 0 0 0 6px #0a0a0b; }
.vinyl:active { cursor: grabbing; }
.vinyl::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 20deg, transparent 0 6%, rgba(255, 255, 255, 0.16) 11%, transparent 17% 50%, rgba(255, 255, 255, 0.12) 61%, transparent 67%); }
.vinyl-label { position: absolute; inset: 33%; border-radius: 50%; background: var(--accent); display: grid; place-items: center; transform: rotate(var(--rot, 0deg)); }
.vinyl-label::before { content: ""; position: absolute; width: 9%; height: 9%; border-radius: 50%; background: #0c0c0e; }
.vinyl-label span { position: absolute; top: 20%; font-size: 10px; font-weight: 800; letter-spacing: 0.12em; color: #fff; }
.vinyl-label::after { content: "MRSC"; position: absolute; bottom: 20%; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; color: #fff; }

/* Everywhere */
.tile--everywhere { flex-direction: row; align-items: center; }
.tile--everywhere .tile-copy { flex: 0 0 40%; }
.everywhere { flex: 1; display: flex; flex-direction: column; gap: 26px; align-items: center; }
.island { display: flex; align-items: center; gap: 10px; height: 46px; max-width: 100%; padding: 0 18px 0 12px; border-radius: 999px; background: #000; color: #fff; font-size: 14px; font-weight: 600; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.6); transition: width 0.6s var(--spring); overflow: hidden; }
.island-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; animation: islandPulse 1.6s ease-in-out infinite; }
.island-dot::after { content: "”"; font-size: 18px; font-weight: 800; line-height: 1; margin-top: 6px; }
@keyframes islandPulse { 50% { transform: scale(0.82); } }
.island-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s, transform 0.4s var(--ease-out); }
.island-text.swap { opacity: 0; transform: translateY(8px); }
.ew-widgets { width: min(100%, 340px); height: auto; border-radius: 26px; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.35); }
.ew-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ew-chip { background: #fff; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 500; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08); }

/* Organize */
.org-list { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.org-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 11px 14px; font-size: 15px; font-weight: 500; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.org-item .ck { flex: none; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px #d1d1d6; display: grid; place-items: center; transition: background 0.3s, box-shadow 0.3s; }
.org-item .ck svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.4s var(--spring); }
.org-item.done .ck { background: #34c759; box-shadow: none; }
.org-item.done .ck svg { opacity: 1; transform: none; }
.org-item s { color: var(--ink-3); text-decoration-thickness: 1.5px; }
.org-item > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.org-item em { font-style: normal; color: var(--ink-3); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.org-done { text-align: center; font-weight: 600; color: #34c759; font-size: 15px; height: 22px; opacity: 0; transition: opacity 0.4s; }
.org-done.show { opacity: 1; }

/* ---------- Left out ---------- */
.leftout { margin-top: 160px; background: var(--accent); color: #fff; padding: 140px 22px; text-align: center; }
.leftout-kicker { font-size: 19px; font-weight: 600; opacity: 0.85; margin: 0 0 30px; }
.leftout-lines { max-width: 1000px; margin: 0 auto; }
.leftout-lines p { margin: 0; font-size: clamp(38px, 6.4vw, 84px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.06; opacity: var(--o, 0.28); transition: opacity 0.25s linear; }
.leftout-lines p:last-child { margin-top: 0.5em; }

/* ---------- Trusted ---------- */
.trusted { padding: 150px 0 40px; }
.trusted h2 sup { color: var(--accent); font-size: 0.55em; top: -0.7em; position: relative; vertical-align: baseline; }
.marquee { margin-top: 50px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee--reverse .marquee-track { animation-direction: reverse; animation-duration: 70s; }
.marquee--reverse { margin-top: 30px; padding: 20px 0 44px; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo { flex: none; display: flex; align-items: center; height: 90px; padding: 0 38px; color: #9a9aa0; transition: color 0.3s; white-space: nowrap; }
.logo:hover { color: var(--ink); }
.logo.l-serif { font: italic 600 34px/1 ui-serif, "New York", Georgia, serif; letter-spacing: -0.02em; }
.logo.l-heavy { font-size: 26px; font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; }
.logo.l-wide { font-size: 21px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; }
.logo.l-mono { font: 600 20px/1 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: -0.02em; }
.logo.l-round { font: 800 28px/1 ui-rounded, "SF Pro Rounded", var(--font); letter-spacing: -0.03em; }
.logo.l-thin { font-size: 30px; font-weight: 300; letter-spacing: -0.03em; }
.logo.l-strike { font-size: 26px; font-weight: 800; letter-spacing: -0.03em; text-decoration: line-through; text-decoration-thickness: 3px; }
.logo small { font-size: 12px; font-weight: 600; letter-spacing: 0; margin-left: 8px; font-style: normal; text-transform: none; font-family: var(--font); opacity: 0.8; }
.logo .face { width: 52px; height: 52px; margin-right: 12px; filter: grayscale(1) contrast(1.05); opacity: 0.75; transition: filter 0.3s, opacity 0.3s, transform 0.5s var(--spring); }
.logo:hover .face { filter: none; opacity: 1; transform: rotate(-8deg) scale(1.15); }
.logo .mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: currentColor; margin-right: 10px; }
.logo .mark::after { content: attr(data-l); color: #fff; font: 800 17px/1 var(--font); }

.review { flex: none; width: 330px; margin: 0 10px; background: var(--bg-2); border-radius: 24px; padding: 22px 24px; }
.review .stars { color: var(--accent); letter-spacing: 2px; font-size: 15px; }
.review q { display: block; margin-top: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.35; quotes: "“" "”"; }
.review .who { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.review .face { flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06); }
.review cite { display: block; font-size: 14px; color: var(--ink-3); font-style: normal; line-height: 1.3; }
#reviewTrack { align-items: center; }
.dc-card { display: block; background: #5865F2; color: #fff; text-decoration: none; transition: transform 0.45s var(--spring), background 0.2s; }
.dc-card:hover { transform: translateY(-4px); background: #4E5BE0; }
.dc-card .dc-logo { display: block; width: 26px; height: 20px; color: #fff; }
.dc-card q { quotes: none; color: #fff; font-size: 19px; letter-spacing: -0.025em; }
.dc-card .face { border-radius: 12px; background: #FF3B5C; box-shadow: none; }
.dc-card cite { color: #fff; font-weight: 600; }
.dc-card cite small { display: block; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.dc-card .dc-go { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #5865F2; font-size: 18px; font-weight: 700; transition: transform 0.45s var(--spring); }
.dc-card:hover .dc-go { transform: translateX(3px); }

/* ---------- At a glance ---------- */
.glance { padding: 150px 22px 0; }
.glance-list { max-width: 900px; margin: 50px auto 0; padding: 8px 34px; border-radius: 32px; background: var(--bg-2); }
.glance-list > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.glance-list > div:first-child { border-top: 0; }
.glance-list dt { font-weight: 600; font-size: 17px; }
.glance-list dd { margin: 0; color: var(--ink-2); font-size: 17px; }

/* ---------- FAQ ---------- */
.faq { padding: 150px 22px 40px; }
.faq-list { max-width: 820px; margin: 50px auto 0; }
.faq details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.faq details::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease-out), content-visibility 0.45s allow-discrete; }
.faq details[open]::details-content { height: auto; }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 0; font-size: clamp(19px, 2vw, 23px); font-weight: 600; letter-spacing: -0.02em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%231d1d1f' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform 0.45s var(--spring), background-color 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); background-color: #e8e8ed; }
.faq details p { margin: 0 0 26px; color: var(--ink-2); font-size: 18px; max-width: 700px; }

/* ---------- Finale ---------- */
.finale { margin-top: 150px; background: var(--accent); color: #fff; text-align: center; padding: 120px 22px 130px; overflow: hidden; }
.finale-logo { width: clamp(170px, 22vw, 240px); height: auto; margin: 0 auto; overflow: visible; }
.finale h2 { color: #fff; margin-top: 30px; }
.finale .lede { color: rgba(255, 255, 255, 0.86); }
.finale .glass-btn svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-2); padding: 28px 22px 40px; font-size: 13px; color: var(--ink-3); }
.footer-inner { max-width: var(--max); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; justify-content: space-between; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: 15px; }
.footer-brand img { border-radius: 5px; }
.footer-links { display: inline-flex; gap: 22px; }
.footer-links a { color: var(--ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--tall { grid-row: auto; }
  .tile--covers, .tile--everywhere { flex-direction: column; align-items: stretch; }
  .tile--covers .tile-copy, .tile--everywhere .tile-copy { flex: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; }
  .hero { padding-top: 54px; }
  .hero-phones { --w: min(56vw, 250px); }
  .hero-phone--left { transform: translate(calc(-50% - var(--w) * 0.62), calc(10% + var(--py, 0px))) scale(0.8); }
  .hero-phone--right { transform: translate(calc(-50% + var(--w) * 0.62), calc(10% + var(--py, 0px))) scale(0.8); }
  .customize, .knobs, .features, .trusted, .faq, .glance { padding-top: 100px; }
  .glance-list { padding: 4px 22px; border-radius: 26px; }
  .glance-list > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
  .hero-kicker { font-size: 16px; }
  .chip { height: 30px; padding: 0 11px; font-size: 13px; }
  .knob-phones { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px 16px 30px; margin-top: 40px; gap: 14px; }
  .knob-phones::-webkit-scrollbar { display: none; }
  .knob-phone { flex-basis: 52vw; margin: 0; transform: none; scroll-snap-align: center; }
  .knob-phone:hover { transform: none; }
  .knob-wall { margin-top: 40px; }
  .knob { height: 38px; font-size: 14px; padding: 0 14px; }
  .btw { padding-top: 140px; }
  .bento { grid-template-columns: minmax(0, 1fr); padding: 0 16px; gap: 14px; }
  .tile--wide { grid-column: auto; }
  .tile { padding: 26px; min-height: 0; border-radius: 28px; }
  .sleeves { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-right: 16%; }
  .cover-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .leftout { margin-top: 110px; padding: 100px 16px; }
  .finale { margin-top: 110px; }
  .review { width: 280px; }
  .logo { padding: 0 24px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .knob-track, .hero-icon, .np-vinyl .disc, .np-wave i, .mix-wave, .mix-fader span, .island-dot, .m-tex.scanlines::after { animation: none !important; }
  .marquee { overflow-x: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}