/* ============================================================
   VIVI Music DE — site stylesheet
   hand-written, no framework. plain enough to push straight to
   github pages. dark is the default (it's a music app site),
   light theme hangs off [data-theme="light"].
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #101a52;
  --bg2: #16226b;
  --surface: #1c2a7d;
  --surface2: #24348f;
  --surface3: #2f42a6;
  --line: rgba(175, 190, 255, 0.16);
  --line2: rgba(175, 190, 255, 0.3);
  --text: #eef1ff;
  --muted: #c6cdf5;
  --faint: #93a0d6;
  --accent: #a78bfa;      /* violet */
  --accent2: #7aa2ff;     /* blue */
  --ok: #6fd98b;
  --accent-soft: rgba(167, 139, 250, 0.16);
  --amber-soft: rgba(122, 162, 255, 0.16);
  --grad: linear-gradient(100deg, #a78bfa 0%, #7aa2ff 100%);
  --code-bg: #0c133f;
  --code-text: #e8ebff;
  --nav-bg: rgba(16, 26, 82, 0.85);
  --shadow: 0 18px 44px rgba(4, 8, 40, 0.5);
  --font-display: "Sora", "Geist", system-ui, sans-serif;
  --font-body: "Geist", "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r: 14px;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1fd;
  --bg2: #e4e9fa;
  --surface: #ffffff;
  --surface2: #f2f4ff;
  --surface3: #e6e9ff;
  --line: rgba(38, 44, 110, 0.12);
  --line2: rgba(38, 44, 110, 0.24);
  --text: #1c2350;
  --muted: #5a6496;
  --faint: #828cbd;
  --accent: #6d4fd6;      /* violet */
  --accent2: #3f6cff;     /* blue */
  --ok: #2f9e57;
  --accent-soft: rgba(109, 79, 214, 0.12);
  --amber-soft: rgba(63, 108, 255, 0.12);
  --grad: linear-gradient(100deg, #6d4fd6 0%, #3f6cff 100%);
  --nav-bg: rgba(255, 255, 255, 0.87);
  --shadow: 0 16px 40px rgba(38, 44, 110, 0.14);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
html { scroll-padding-top: 92px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}
/* film-grain overlay, barely there */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}
:root[data-theme="light"] body::before { opacity: 0.035; }

p { margin: 0 0 14px; }
main { flex: 1 0 auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 6px;
  color: var(--accent2);
  white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent); color: #fff6f2; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.hnote {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  margin: -6px 0 26px;
}

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; color: var(--accent); }
.brand-logo {
  height: 28px;
  width: 28px;
  border-radius: 50%;
  object-fit: cover;
  align-self: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.nav-links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.nav-links a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.nav-links a:hover { color: var(--text); text-decoration: none; background: var(--surface2); }
.nav-links a.active { color: var(--text); background: var(--surface2); border-color: var(--line2); }
.nav-links .nav-gh {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent2);
  border: 1px solid var(--line2);
  margin-left: 6px;
}
.nav-links .nav-gh:hover { border-color: var(--accent2); background: var(--amber-soft); }
.nav-toggle {
  display: none;
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--line2);
  color: var(--text);
  border-radius: 10px;
  padding: 7px 13px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.theme-toggle {
  appearance: none;
  flex-shrink: 0;
  width: 37px;
  height: 37px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover { border-color: var(--accent); transform: translateY(-1px); }

@media (max-width: 940px) {
  .nav-toggle { display: inline-block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--bg2);
    border-bottom: 1px solid var(--line);
    padding: 14px 20px 20px;
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a { padding: 11px 14px; border-radius: 10px; }
  .nav-links .nav-gh { margin: 4px 0 0; text-align: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 15px var(--font-body);
  color: #fff7f2;
  background: var(--grad);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 22px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(167, 139, 250, 0.28); }
.btn.ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line2);
}
.btn.ghost:hover { border-color: var(--accent); box-shadow: none; }
.btn.sm { font-size: 13.5px; padding: 9px 15px; border-radius: 10px; }
.btn:disabled, .btn.off {
  opacity: 0.4;
  filter: saturate(0.4);
  pointer-events: none;
  box-shadow: none;
}

/* ---------- shared page furniture ---------- */
.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent2);
  margin: 0 0 10px;
}
.kicker::before { content: "— "; color: var(--faint); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.12; }
.section { padding: 72px 0; }
.sec-head { margin-bottom: 36px; }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 36px); margin: 0 0 10px; }
.sec-head .sub { color: var(--muted); font-size: 16px; max-width: 64ch; margin: 0; }

.hl {
  /* marker highlight, not gradient text — reads as annotated, not generated */
  background-image: linear-gradient(transparent 66%, var(--amber-soft) 0, var(--accent-soft) 0);
  padding: 0 0.08em;
}

/* sub-page header */
.phead {
  padding: 58px 0 34px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(52% 120% at 82% 0%, var(--amber-soft), transparent 70%),
    radial-gradient(46% 120% at 8% 20%, var(--accent-soft), transparent 70%);
}
.phead h1 { font-size: clamp(30px, 4.6vw, 48px); margin: 0 0 12px; }
.phead .lead { color: var(--muted); font-size: 17px; max-width: 68ch; margin: 0; }
.pbody { padding: 42px 22px 90px; }
.pbody .prose { max-width: 780px; }
.pbody h2 { font-size: clamp(20px, 2.6vw, 27px); margin: 44px 0 14px; }
.pbody h2:first-child { margin-top: 0; }
.pbody h3 { font-family: var(--font-body); font-weight: 800; font-size: 17px; letter-spacing: 0; margin: 28px 0 10px; }

/* code blocks (always dark — it's a terminal, even in light mode) */
pre.code {
  position: relative;
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 15px 17px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.2px;
  line-height: 1.75;
  margin: 14px 0 18px;
}
pre.code code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
}
.copy-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.04em;
  color: #cfc7d8;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.copy-btn:hover { border-color: var(--accent2); color: #fff7f2; }
.copy-btn.ok { color: var(--ok); border-color: var(--ok); }

/* tables */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin: 14px 0 20px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th {
  font: 600 11.5px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line2);
  white-space: nowrap;
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr:hover td { background: var(--surface2); }
.tbl td code { white-space: normal; }

/* requirements list (dl) */
.reqs { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 4px 20px; margin: 14px 0 20px; }
.reqs .row { display: grid; grid-template-columns: 130px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.reqs .row:last-child { border-bottom: 0; }
.reqs dt { font: 600 12.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.reqs dd { margin: 0; font-size: 15px; }

/* numbered steps */
.steps { list-style: none; margin: 18px 0 26px; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; position: relative; padding: 0 0 20px 56px; color: var(--muted); }
.steps li strong, .steps li b { color: var(--text); }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font: 700 14px var(--font-mono);
  color: var(--accent2);
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 11px;
}

/* tabs (channels + os) */
.tabs { display: flex; gap: 8px; margin: 20px 0 26px; flex-wrap: wrap; }
.tab {
  appearance: none;
  font: 700 14px var(--font-body);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.tab:hover { color: var(--text); border-color: var(--line2); }
.tab.active { background: var(--grad); color: #fff7f2; border-color: transparent; }

/* accordion (native details, styled) */
details.qa { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 10px; overflow: hidden; transition: border-color 0.2s ease; }
details.qa:hover { border-color: var(--line2); }
details.qa[open] { border-color: var(--line2); }
details.qa summary {
  cursor: pointer;
  padding: 15px 18px;
  font-weight: 800;
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: "+";
  font: 600 20px var(--font-mono);
  color: var(--accent2);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
details.qa[open] summary::after { transform: rotate(45deg); }
details.qa .a { padding: 0 18px 16px; color: var(--muted); font-size: 14.5px; }
/* accordion open animation: content fades/slides in under the summary */
@keyframes qaIn { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
details.qa[open] .a { animation: qaIn 0.28s ease both; }

/* chips */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.chip {
  font: 600 12px var(--font-mono);
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
}

/* ---------- home: hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 74px 0 58px;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -8%;
  background:
    radial-gradient(34% 42% at 18% 24%, var(--accent-soft), transparent 70%),
    radial-gradient(38% 46% at 82% 18%, var(--amber-soft), transparent 70%);
  pointer-events: none;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 52px;
  align-items: center;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: rec 2.4s ease-in-out infinite;
}
@keyframes rec {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.55); }
  50% { box-shadow: 0 0 0 7px rgba(167, 139, 250, 0); }
}
.hero h1 {
  font-size: clamp(33px, 5.4vw, 57px);
  margin: 0 0 16px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.hero .tagline { color: var(--muted); font-size: 17px; max-width: 54ch; margin: 0 0 28px; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.hero-meta { font: 500 12.5px var(--font-mono); color: var(--faint); letter-spacing: 0.02em; }
.hero-meta b { color: var(--muted); font-weight: 600; }

/* the app window mock — the "screenshot" that lives in the hero */
.hero-right { position: relative; }
.hero-right .ghost {
  position: absolute;
  right: -30px;
  top: -58px;
  z-index: 0;
  font: 800 150px var(--font-display);
  letter-spacing: 0.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  transform: rotate(-7deg);
  user-select: none;
  pointer-events: none;
}
.mock {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg2);
}
.mock-bar .d { width: 10px; height: 10px; border-radius: 50%; }
.mock-bar .d1 { background: #7aa2ff; }
.mock-bar .d2 { background: #febc2e; }
.mock-bar .d3 { background: #28c840; }
.mock-title {
  flex: 1;
  text-align: center;
  font: 500 11.5px var(--font-mono);
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mock-body { padding: 18px; }
.mock-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.disc {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, var(--surface) 0 17%, transparent 18%),
    conic-gradient(from 30deg, #a78bfa, #7aa2ff, #4c3a9e, #8f9cff, #a78bfa);
  box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.25);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mock-song { min-width: 0; }
.mock-song .t { font-weight: 800; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-song .a { font-size: 13px; color: var(--muted); margin-top: 2px; }
.eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; margin-left: auto; flex-shrink: 0; }
.eq i {
  width: 4px;
  border-radius: 2px;
  background: var(--grad);
  animation: eqbar 1.1s ease-in-out infinite;
}
.eq i:nth-child(1) { height: 40%; }
.eq i:nth-child(2) { height: 90%; animation-delay: 0.15s; }
.eq i:nth-child(3) { height: 60%; animation-delay: 0.3s; }
.eq i:nth-child(4) { height: 100%; animation-delay: 0.45s; }
.eq i:nth-child(5) { height: 55%; animation-delay: 0.6s; }

.mock-lyrics {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  margin-bottom: 15px;
  min-height: 92px;
}
.ly { font-size: 13.5px; color: var(--faint); padding: 2.5px 0; transition: color 0.4s ease, opacity 0.4s ease; opacity: 0.65; }
.ly.on { color: var(--text); font-weight: 700; opacity: 1; }

.seek { position: relative; height: 5px; border-radius: 3px; background: var(--surface3); margin: 4px 2px 8px; }
.seek .fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  border-radius: 3px;
  background: var(--grad);
}
.seek .knob {
  position: absolute;
  top: 50%;
  left: 34%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text);
  border: 3px solid var(--accent);
  transform: translate(-50%, -50%);
}
.mock-times { display: flex; justify-content: space-between; font: 500 11px var(--font-mono); color: var(--faint); margin-bottom: 13px; }
.mock-ctl { display: flex; align-items: center; justify-content: center; gap: 22px; color: var(--muted); }
.mock-ctl button {
  appearance: none;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  transition: color 0.15s ease, transform 0.15s ease;
}
.mock-ctl button:hover { color: var(--text); transform: scale(1.12); }
.mock-ctl .play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--grad);
  color: #fff7f2;
  justify-content: center;
}
.mock-ctl .play:hover { filter: brightness(1.06); transform: scale(1.05); }

.mock-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.vol { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 13px; }
.vol .track { width: 92px; height: 4px; border-radius: 2px; background: var(--surface3); position: relative; }
.vol .track i { position: absolute; inset: 0 auto 0 0; width: 68%; border-radius: 2px; background: var(--muted); }
.paired {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 11px var(--font-mono);
  color: var(--ok);
  background: var(--surface2);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.paired .p-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: rec2 2s ease-in-out infinite; }
@keyframes rec2 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(111, 217, 139, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(111, 217, 139, 0); }
}

.mini-chip {
  position: absolute;
  z-index: 2;
  left: -16px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface3);
  border: 1px solid var(--line2);
  border-radius: 13px;
  padding: 9px 14px 9px 10px;
  box-shadow: var(--shadow);
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.mini-chip .art {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: conic-gradient(from 120deg, #a78bfa, #7aa2ff, #4c3a9e, #a78bfa);
  position: relative;
}
.mini-chip .art::after { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: var(--surface3); }
.mini-chip .mt { font-size: 12.5px; font-weight: 800; }
.mini-chip .ms { font: 500 10.5px var(--font-mono); color: var(--faint); }

/* hero mock: static app window — no fake song, no animation */
.mock-static .mock-app {
  display: flex;
  gap: 14px;
  min-height: 220px;
}
.mock-static .mock-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 74px;
  flex-shrink: 0;
  padding: 10px;
  border-radius: 12px;
  background: var(--surface2);
}
.mock-static .mock-side .mock-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  margin-bottom: 6px;
  background: var(--grad);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.mock-static .mock-side i {
  height: 8px;
  border-radius: 4px;
  background: var(--surface3);
}
.mock-static .mock-side i:first-of-type { background: var(--accent); opacity: 0.55; }
.mock-static .mock-main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}
.mock-static .mock-card {
  height: 26px;
  border-radius: 8px;
  background: var(--surface3);
}
.mock-static .mock-row {
  display: flex;
  gap: 10px;
}
.mock-static .mock-row i {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1px solid var(--line2);
}

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.bcard:hover { transform: translateY(-4px); border-color: var(--line2); box-shadow: var(--shadow); }
.bcard h3 { font-family: var(--font-body); font-weight: 800; font-size: 17.5px; letter-spacing: 0; margin: 0 0 8px; }
.bcard p { color: var(--muted); font-size: 14.5px; margin: 0; }
.b1 { grid-column: span 4; }
.b2 { grid-column: span 2; }
.b3 { grid-column: span 2; }
.b4 { grid-column: span 4; }
.bcard .link { display: inline-block; margin-top: 14px; font-weight: 700; font-size: 14px; }

/* the animated device link inside bento card 1 */
.linkline { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.dev-chip {
  flex-shrink: 0;
  width: 76px;
  padding: 12px 8px 10px;
  text-align: center;
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  font: 700 10px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--muted);
}
.dev-chip .di { display: block; font-size: 20px; margin-bottom: 6px; }
.wires { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--line2) 0 7px, transparent 7px 14px); }
/* The travelling dots are the only thing on the site that moves all the time,
   so they must never touch a layout property: animating `left` invalidated the
   layout of their containing block on every single frame (Lighthouse reported
   ~4 s of "Style & Layout" and >1 s of blocking time on a phone). `.pd` is now
   the invisible full-length rail and the visible dot is its ::after child, so a
   plain translateX moves it: the rail is `100% - 10px` wide, which makes
   `translateX(100%)` travel exactly the same distance the old
   `left: 0 -> calc(100% - 10px)` did. Pixel-identical, composited, no layout. */
.wires .pd {
  position: absolute;
  top: -4px;
  left: 0;
  width: calc(100% - 10px);
  height: 10px;
  background: none;
  will-change: transform;
  animation: pdot 2.4s linear infinite;
}
.wires .pd::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad);
}
.wires .pd.back { animation-name: pdotb; animation-delay: 1.2s; }
@keyframes pdot { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes pdotb { 0% { transform: translateX(100%); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

.sticker {
  position: absolute;
  top: 15px;
  right: -36px;
  transform: rotate(35deg);
  background: var(--grad);
  color: #fff7f2;
  font: 700 10px var(--font-mono);
  letter-spacing: 0.14em;
  padding: 4px 42px;
  pointer-events: none;
}
.paths { margin-top: 14px; font: 500 12px var(--font-mono); color: var(--faint); line-height: 2; }
.paths code { font-size: 11.5px; }

/* ---------- sync band ---------- */
.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 70px 0; position: relative; overflow: hidden; }
.band::after {
  content: "one playback";
  position: absolute;
  left: -12px;
  bottom: -34px;
  font: 800 120px var(--font-display);
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  transform: rotate(-3deg);
  pointer-events: none;
  user-select: none;
}
.band-grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 46px; align-items: center; }
.band h2 { font-size: clamp(25px, 3.6vw, 38px); margin: 0 0 12px; }
.band p { color: var(--muted); font-size: 15.5px; max-width: 52ch; }
.band .linkline { margin-top: 26px; }

/* ---------- screenshots (css-drawn) ---------- */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shot {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 16px;
  overflow: hidden;
  transform: rotate(var(--r, 0deg));
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.shot:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow); }
.shot .frame { aspect-ratio: 16 / 11; background: var(--bg2); border-bottom: 1px solid var(--line); display: flex; padding: 12px; gap: 10px; }
.shot figcaption { padding: 12px 15px; font: 500 11.5px var(--font-mono); color: var(--muted); }
/* shot 1: library */
.ui-side { width: 52px; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.ui-side i { height: 9px; border-radius: 3px; background: var(--surface3); }
.ui-side i.on { background: var(--grad); }
.ui-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ui-search { height: 18px; border-radius: 9px; background: var(--surface3); position: relative; }
.ui-search::after { content: ""; position: absolute; left: 8px; top: 6px; width: 8px; height: 8px; border: 1.5px solid var(--faint); border-radius: 50%; }
.ui-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 7px; }
.ui-row:nth-child(3) { background: var(--surface2); }
.ui-art { width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0; }
.ui-row:nth-child(2) .ui-art { background: linear-gradient(135deg, #a78bfa, #4c3a9e); }
.ui-row:nth-child(3) .ui-art { background: linear-gradient(135deg, #7aa2ff, #6d4fd6); }
.ui-row:nth-child(4) .ui-art { background: linear-gradient(135deg, #3aa8c9, #2b4dd8); }
.ui-row:nth-child(5) .ui-art { background: linear-gradient(135deg, #6fd98b, #2aa87a); }
.ui-row:nth-child(6) .ui-art { background: linear-gradient(135deg, #8a4fd8, #d84f9e); }
.ui-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ui-lines i { height: 6px; border-radius: 3px; background: var(--surface3); }
.ui-lines i:first-child { width: 62%; }
/* shot 2: player */
.shot .frame.center { flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.shot .frame .s-disc {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--bg2) 0 16%, transparent 17%), conic-gradient(from 30deg, #a78bfa, #7aa2ff, #4c3a9e, #8f9cff, #a78bfa);
  animation: spin 8s linear infinite;
  margin-bottom: 10px;
}
.shot .frame .s-title { height: 8px; width: 46%; border-radius: 4px; background: var(--surface3); margin-bottom: 6px; }
.shot .frame .s-sub { height: 6px; width: 30%; border-radius: 3px; background: var(--surface3); opacity: 0.7; }
.shot .frame .s-ly { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; align-items: center; }
.shot .frame .s-ly i { height: 5px; border-radius: 3px; background: var(--surface3); }
.shot .frame .s-ly i.on { background: var(--grad); width: 56%; }
.shot .frame .s-ly i:nth-child(1) { width: 72%; }
.shot .frame .s-ly i:nth-child(3) { width: 64%; }
/* shot 3: device sync */
.shot .frame.sync { flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.qr-mini { width: 62px; height: 62px; background: #f4f1ee; border-radius: 8px; padding: 6px; }
.s-code { font: 700 14px var(--font-mono); letter-spacing: 0.3em; color: var(--text); }
.s-btns { display: flex; gap: 7px; }
.s-btns i { height: 16px; width: 52px; border-radius: 8px; background: var(--surface3); }
.s-btns i:first-child { background: var(--grad); width: 68px; }

/* ---------- what's new ---------- */
.news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.news-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.news-item:hover { border-color: var(--line2); transform: translateY(-3px); }
.news-item .ver {
  display: inline-block;
  font: 700 12px var(--font-mono);
  color: var(--accent2);
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 3px 9px;
  margin-bottom: 10px;
}
.news-item .dt { font: 500 11.5px var(--font-mono); color: var(--faint); display: block; margin-bottom: 8px; }
.news-item p { font-size: 14px; color: var(--muted); margin: 0; }
.news-more { margin-top: 22px; font-weight: 700; }

/* ---------- final cta ---------- */
.cta { padding: 86px 0; text-align: center; position: relative; overflow: hidden; }
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(44% 62% at 50% 55%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.cta h2 { position: relative; font-size: clamp(28px, 4.4vw, 46px); margin: 0 0 12px; }
.cta p { position: relative; color: var(--muted); max-width: 52ch; margin: 0 auto 28px; }
.cta .hero-ctas { position: relative; justify-content: center; margin: 0; }

/* ---------- footer ---------- */
.foot { flex-shrink: 0; background: var(--bg2); border-top: 1px solid var(--line); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1.1fr 1.5fr;
  gap: 34px;
  padding: 52px 0 38px;
}
.foot h4 {
  font: 600 11.5px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--faint);
  margin: 4px 0 14px;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 9px; }
.foot ul a { color: var(--muted); font-size: 14px; }
.foot ul a:hover { color: var(--text); }
.foot-blurb { color: var(--muted); font-size: 14px; margin: 14px 0 12px; max-width: 34ch; }
.foot-meta { font: 500 11.5px var(--font-mono); color: var(--faint); margin: 0; }
.foot-note { font-size: 13px; color: var(--faint); line-height: 1.7; margin: 0; }
.foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 16px 0 20px;
  font: 500 12px var(--font-mono);
  color: var(--faint);
}

/* ---------- downloads ---------- */
.os-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 28px;
  cursor: pointer;
  color: var(--text);
  font: 600 14.5px var(--font-body);
  text-align: left;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.os-banner:hover { border-color: var(--accent); transform: translateY(-2px); }
.os-banner .oi { font-size: 20px; }
.os-banner .arrow { margin-left: auto; color: var(--accent2); font-family: var(--font-mono); }
.rel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 34px;
}
.rel-head .lbl { font: 600 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.rel-head .ver-big { font-family: var(--font-display); font-size: 24px; font-weight: 600; margin: 4px 0 2px; }
.rel-head .dt { font: 500 12px var(--font-mono); color: var(--faint); }
.rel-head .rhs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.os-sec { margin: 36px 0; }
.os-sec h2 { font-family: var(--font-body); font-weight: 800; font-size: 20px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.os-sec h2 .oi { font-size: 22px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 12px; }
.dl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 18px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.dl:hover { border-color: var(--line2); transform: translateY(-2px); }
.dl .t { font-weight: 800; font-size: 15px; }
.dl .d { font-size: 13px; color: var(--muted); margin: 0; }
.dl .btn { margin-top: auto; }
.dl .btn-row { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.dl .btn-row .btn { margin-top: 0; }
.dl .miss { font: 500 11px var(--font-mono); color: var(--faint); }
.dl.off { opacity: 0.5; }
@keyframes flashbox {
  0%, 100% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0); }
  30% { box-shadow: 0 0 0 5px var(--accent-soft); }
}
.flash { animation: flashbox 1.3s ease 2; }

/* ---------- install guide ---------- */
.guide { display: grid; grid-template-columns: 210px 1fr; gap: 48px; align-items: start; }
.toc { position: sticky; top: 86px; }
.toc h4 { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--faint); margin: 0 0 12px; }
.toc a {
  display: block;
  padding: 6px 0 6px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  border-left: 2px solid var(--line);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.toc a:hover { color: var(--text); text-decoration: none; }
.toc a.on { color: var(--accent); border-color: var(--accent); }
.os-panel { display: none; }
.os-panel.show { display: block; animation: fadein 0.35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.callout {
  display: flex;
  gap: 12px;
  background: var(--surface2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent2);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--muted);
  margin: 16px 0;
}
.callout b { color: var(--text); }

/* ---------- sync page ---------- */
.duo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
  margin: 34px 0 8px;
}
.device {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 30px 22px 26px;
  text-align: center;
  cursor: default;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.device:hover, .device:focus-visible, .device.tapped {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: var(--shadow);
}
.device .ico { font-size: 42px; line-height: 1; display: block; margin-bottom: 12px; }
.device h3 { font-family: var(--font-body); font-weight: 800; font-size: 17px; margin: 0 0 4px; }
.device .sub2 { font: 500 12px var(--font-mono); color: var(--faint); }
.tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(5px);
  width: 250px;
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  box-shadow: var(--shadow);
}
.tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--line2);
}
.device:hover .tip, .device:focus-visible .tip, .device.tapped .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.duo-mid {
  position: relative;
  height: 2px;
  width: min(200px, 40vw);
  background: repeating-linear-gradient(90deg, var(--line2) 0 8px, transparent 8px 16px);
}
/* same rail + dot split as .wires .pd above: translateX only, never `left` */
.duo-mid .pd {
  position: absolute;
  top: -4px;
  left: 0;
  width: calc(100% - 10px);
  height: 10px;
  background: none;
  will-change: transform;
  animation: pdot 2.2s linear infinite;
}
.duo-mid .pd::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad);
}
.duo-mid .pd.back { animation-name: pdotb; animation-delay: 1.1s; }
.relay-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 8px 8px 8px 16px;
  font: 500 12.5px var(--font-mono);
  color: var(--muted);
}
.relay-chip code { border: 0; background: none; padding: 0; color: var(--accent2); white-space: normal; }
.relay-chip .copy-btn { position: static; font-size: 10.5px; }

/* pairing demo */
.pair-demo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 18px;
  padding: 26px;
  margin: 18px 0;
}
.pair-demo .plabel { font: 600 11px var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.pair-demo h3 { font-family: var(--font-body); font-weight: 800; font-size: 18px; margin: 6px 0 8px; letter-spacing: 0; }
.pair-demo .pstat { font: 500 12.5px var(--font-mono); color: var(--muted); margin: 0 0 14px; min-height: 20px; }
.pair-demo .pstat.live { color: var(--ok); }
.pair-code {
  font: 700 34px var(--font-mono);
  letter-spacing: 0.32em;
  margin: 0 0 16px;
  color: var(--text);
}
.pair-code .c { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; }
.pair-code .c.on { opacity: 1; transform: none; }
.pair-ctl { display: flex; gap: 10px; flex-wrap: wrap; }
.qrbox {
  width: 158px;
  aspect-ratio: 1;
  background: #f4f1ee;
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 2px;
  box-shadow: var(--shadow);
}
.qrbox .m { background: transparent; border-radius: 1px; }
.qrbox .m.on { background: #221b28; }
.pair-demo .qrnote { text-align: center; font: 500 10.5px var(--font-mono); color: var(--faint); margin-top: 10px; }

/* ---------- changelog timeline ---------- */
/* changelog toolbar: search + version selector */
.cl-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 800px;
  margin-bottom: 30px;
  padding: 12px;
  border: 1px solid var(--line2);
  border-radius: 16px;
  background: var(--surface1);
}
/* The template loads Tailwind through the Play CDN (tpl.js), which injects its
   reset stylesheet into <head> AFTER style.css. Its `[type=...]` rule paints
   inputs white with specificity 0-1-0, so it beats the equal-specificity theme
   classes (.cl-search, .err-search) and leaves white bars with near-white text.
   Prefixing the selectors with the element type out-ranks that reset so every
   search field keeps the site theme in dark and light mode. */
input.cl-search {
  flex: 1;
  min-width: 200px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background-color: var(--surface2);
  color: var(--text);
  font: 500 14px var(--font-ui);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input.cl-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.18); }
input.cl-search::placeholder { color: var(--faint); }
.cl-sellabel { font-size: 13px; font-weight: 600; color: var(--muted); }
.cl-select {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  color: var(--text);
  font: 600 13.5px var(--font-ui);
  outline: none;
  cursor: pointer;
  max-width: 260px;
}
.cl-select:focus { border-color: var(--accent); }

.cl-morewrap { text-align: center; margin-top: 26px; max-width: 800px; }
.cl-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--surface2);
  color: var(--text);
  font: 600 14px var(--font-ui);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.cl-more:hover { border-color: var(--accent); background: var(--surface1); }
.cl-more:active { transform: scale(0.97); }

.tl { position: relative; padding-left: 30px; max-width: 800px; }
.tl::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line);
}
.tl-item { position: relative; padding-bottom: 38px; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 4px var(--bg);
}
.tl-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-ver {
  font: 700 13px var(--font-mono);
  color: var(--accent2);
  background: var(--surface2);
  border: 1px solid var(--line2);
  border-radius: 8px;
  padding: 4px 10px;
}
.tl-date { font: 500 12px var(--font-mono); color: var(--faint); }
.tl-body { color: var(--muted); font-size: 14.5px; }
.tl-body p { margin: 0 0 10px; }
.tl-body ul, .tl-body ol { margin: 0 0 10px; padding-left: 22px; }
/* the Tailwind reset sets list-style:none on ul/ol, so lists rendered from the
   release-note markdown must get their markers back explicitly */
.tl-body ul { list-style: disc; }
.tl-body ol { list-style: decimal; }
.tl-body li { margin-bottom: 5px; }
.tl-body li > ul { margin-bottom: 2px; }
.tl-body pre { background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; }
.tl-body pre code { color: var(--code-text); font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; white-space: pre; }
.tl-body .mdh { font-weight: 800; color: var(--text); font-size: 15px; margin: 14px 0 8px; }
.tl-body code { white-space: normal; }
.tl-more { display: inline-block; margin-top: 4px; font-weight: 700; font-size: 13.5px; }

/* ---------- errors page ---------- */
.err-tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
input.err-search {
  flex: 1;
  min-width: 240px;
  max-width: 440px;
  background-color: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text);
  font: 500 14px var(--font-mono);
  transition: border-color 0.15s ease;
}
input.err-search:focus { outline: none; border-color: var(--accent); }
.err-count { font: 500 12px var(--font-mono); color: var(--faint); }
.err-legend { display: flex; gap: 8px; }
.err-legend .chip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.err-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.err {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 17px 19px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.err:hover { border-color: var(--line2); transform: translateY(-2px); }
.err.hide { display: none; }
.err .top { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; flex-wrap: wrap; }
.err .code {
  font: 700 12.5px var(--font-mono);
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--accent2);
}
.err.vivi .code { background: var(--accent-soft); color: var(--accent); }
.err .scope { font: 600 10.5px var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); }
.err h4 { font: 800 14px var(--font-body); letter-spacing: 0; margin: 0 0 6px; word-break: break-word; }
.err p { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.err .fix { color: var(--text); }
.err .fix b { color: var(--accent2); font-family: var(--font-mono); font-size: 12px; }
.err-empty { display: none; padding: 40px 0; text-align: center; color: var(--faint); font-family: var(--font-mono); font-size: 13.5px; }
/* Clickable error cards: clicking one puts #CODE in the address bar so the
   exact error can be shared; the deep-linked card is highlighted. */
.err { cursor: pointer; }
.err .code { transition: background 0.2s ease, color 0.2s ease; }
.err:hover .code { background: var(--accent-soft); color: var(--accent); }
.err.err-target {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 18px 40px rgba(0,0,0,0.45);
  animation: errPop 0.6s ease;
}
.err .err-link {
  font: 600 10.5px var(--font-mono);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: auto;
}
.err:hover .err-link { color: var(--accent); }
@keyframes errPop {
  0% { transform: translateY(4px); }
  100% { transform: translateY(0); }
}

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 330px 1fr; gap: 44px; align-items: start; }
.glance {
  position: sticky;
  top: 86px;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: 16px;
  padding: 22px;
}
.glance h3 { font-family: var(--font-body); font-weight: 800; font-size: 14px; letter-spacing: 0; margin: 0 0 14px; }
.glance .row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.glance .row:last-child { border-bottom: 0; }
.glance .k { font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--faint); padding-top: 2px; }
.glance .v { font-weight: 700; text-align: right; }
.glance .v a { color: var(--accent); font-weight: 600; }

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

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero-right { max-width: 560px; }
  .hero-right .ghost { right: 0; font-size: 110px; }
  .band-grid { grid-template-columns: 1fr; gap: 30px; }
  .guide { grid-template-columns: 1fr; gap: 30px; }
  .toc { display: none; }
  .about-grid { grid-template-columns: 1fr; gap: 34px; }
  .glance { position: static; }
  .shots { grid-template-columns: 1fr 1fr; }
  .news { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .b1, .b4 { grid-column: span 2; }
  .b2, .b3 { grid-column: span 1; }
  .duo { grid-template-columns: 1fr; }
  .duo-mid { width: 2px; height: 44px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--line2) 0 8px, transparent 8px 16px); }
  .duo-mid .pd, .duo-mid .pd.back { display: none; }
  .tip { position: static; transform: none; width: auto; opacity: 1; pointer-events: auto; box-shadow: none; margin-top: 12px; }
  .tip::after { display: none; }
  .pair-demo { grid-template-columns: 1fr; }
  .qrbox { margin: 0 auto; }
}
@media (max-width: 620px) {
  .section { padding: 54px 0; }
  .shots { grid-template-columns: 1fr; }
  .news { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .b1, .b4, .b2, .b3 { grid-column: span 1; }
  .mini-chip { left: 6px; bottom: 12px; }
  .reqs .row { grid-template-columns: 1fr; gap: 4px; }
  .foot-grid { grid-template-columns: 1fr; gap: 26px; }
  .foot-bar { justify-content: center; text-align: center; }
  .rel-head { flex-direction: column; align-items: flex-start; }
}

/* ---------- device-based responsive (phone / tablet via UA) ----------
   The layout follows the *device*, not just the viewport: a phone gets the
   full stacked mobile layout even when mirrored on a big external screen,
   while tablets and foldables degrade to desktop. The media queries above
   stay as a viewport fallback for desktop windows narrower than the
   breakpoints. */
.vm-phone .nav-toggle { display: inline-block; }
.vm-phone .nav-links {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: var(--bg2);
  border-bottom: 1px solid var(--line);
  padding: 14px 20px 20px;
}
.vm-phone .nav.open .nav-links { display: flex; }
.vm-phone .nav-links a { padding: 11px 14px; border-radius: 10px; }
.vm-phone .nav-links .nav-gh { margin: 4px 0 0; text-align: center; }

.vm-phone .hero-grid { grid-template-columns: 1fr; gap: 44px; }
.vm-phone .hero-right { max-width: 560px; }
.vm-phone .band-grid { grid-template-columns: 1fr; gap: 30px; }
.vm-phone .guide { grid-template-columns: 1fr; gap: 30px; }
.vm-phone .toc { display: none; }
.vm-phone .about-grid { grid-template-columns: 1fr; gap: 34px; }
.vm-phone .glance { position: static; }
.vm-phone .shots { grid-template-columns: 1fr 1fr; }
.vm-phone .news { grid-template-columns: 1fr 1fr; }
.vm-phone .foot-grid { grid-template-columns: 1fr 1fr; }

.vm-phone .bento { grid-template-columns: 1fr 1fr; }
.vm-phone .b1, .vm-phone .b4 { grid-column: span 2; }
.vm-phone .b2, .vm-phone .b3 { grid-column: span 1; }
.vm-phone .duo { grid-template-columns: 1fr; }
.vm-phone .duo-mid { width: 2px; height: 44px; margin: 0 auto; background: repeating-linear-gradient(180deg, var(--line2) 0 8px, transparent 8px 16px); }
.vm-phone .duo-mid .pd, .vm-phone .duo-mid .pd.back { display: none; }
.vm-phone .tip { position: static; transform: none; width: auto; opacity: 1; pointer-events: auto; box-shadow: none; margin-top: 12px; }
.vm-phone .tip::after { display: none; }
.vm-phone .pair-demo { grid-template-columns: 1fr; }
.vm-phone .qrbox { margin: 0 auto; }

.vm-phone .section { padding: 54px 0; }
.vm-phone .shots { grid-template-columns: 1fr; }
.vm-phone .news { grid-template-columns: 1fr; }
.vm-phone .bento { grid-template-columns: 1fr; }
.vm-phone .b1, .vm-phone .b4, .vm-phone .b2, .vm-phone .b3 { grid-column: span 1; }
.vm-phone .reqs .row { grid-template-columns: 1fr; gap: 4px; }
.vm-phone .foot-grid { grid-template-columns: 1fr; gap: 26px; }
.vm-phone .foot-bar { justify-content: center; text-align: center; }
.vm-phone .rel-head { flex-direction: column; align-items: flex-start; }

/* tablets / foldables: keep desktop layout but drop the two-pane guide */
.vm-tablet .guide { grid-template-columns: 1fr; gap: 30px; }
.vm-tablet .toc { display: none; }

/* ---------- text safety ----------
   the Tailwind preflight resets margins/list-markers and a few long inline
   tokens (code paths, urls) used to escape their boxes on narrow screens.
   These rules guarantee text wraps inside its container everywhere. */
p, li, dt, dd, figcaption, blockquote, .a, .prose, .lead, .sub {
  overflow-wrap: break-word;
}
.tl-body li, .prose li { overflow-wrap: anywhere; }
code {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 760px) {
  code { white-space: normal; }
  .relay-chip code, .tl-body pre code, pre.code, pre code { white-space: pre; }
  .wrap.pbody { padding-left: 16px; padding-right: 16px; }
}
/* ===== screenshot gallery (screenshots.html) ===== */
.shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
  margin-top: 4px;
}
.gshot {
  position: relative;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.55);
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
}
.gshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.gshot:hover img { transform: scale(1.03); }
.gshot figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 14px 9px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #fff;
  text-align: left;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.78));
  pointer-events: none;
}
.vm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5,6,20,0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.vm-lightbox.open { opacity: 1; pointer-events: auto; }
/* Touch swipe: let the browser scroll vertically but deliver horizontal
   gestures to the lightbox navigation. */
.vm-lightbox { touch-action: pan-y; }
.vm-lightbox .vm-lb-img { -webkit-user-drag: none; user-select: none; }
.vm-lightbox .vm-lb-img {
  max-width: 92vw;
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.6);
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}
.vm-lightbox .vm-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
.vm-lightbox .vm-lb-nav:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}
.vm-lightbox .vm-lb-nav svg { width: 26px; height: 26px; }
.vm-lightbox .vm-lb-prev { left: 26px; }
.vm-lightbox .vm-lb-next { right: 26px; }
.vm-lightbox .vm-lb-count {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--vm-font-geist, inherit);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75);
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 5px 14px;
  z-index: 2;
}
@media (max-width: 640px) {
  .vm-lightbox .vm-lb-prev { left: 10px; }
  .vm-lightbox .vm-lb-next { right: 10px; }
  .vm-lightbox .vm-lb-nav { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  .shot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Motion — forced on every page and on every device
   ------------------------------------------------------------
   The card "lifts" and most of the polish were hover-driven, so
   phones and iPhones (which have no hover) got no motion at all.
   These rules add device-independent motion: an always-on drift
   in the page background, press feedback for touch, and reveal
   timing that also fires for blocks taller than the screen.
   Motion is part of the brand here, so there is no
   prefers-reduced-motion opt-out.
   ============================================================ */
#page-background { overflow: hidden; }

/* ambient gradient drift — every page, every device */
@keyframes vmAurora {
  0%   { transform: translate3d(-4%, -3%, 0) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.07); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.03); }
}
#page-background::after {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(167, 139, 250, 0.30), transparent 70%) 18% 12% / 58% 58% no-repeat,
    radial-gradient(closest-side, rgba(122, 162, 255, 0.26), transparent 70%) 82% 78% / 62% 62% no-repeat,
    radial-gradient(closest-side, rgba(175, 190, 255, 0.18), transparent 70%) 50% 105% / 70% 55% no-repeat;
  animation: vmAurora 16s ease-in-out infinite alternate;
}

/* page entrance — opacity only, so the fixed layers keep working */
@keyframes vmPageIn { from { opacity: 0; } to { opacity: 1; } }
.js main { animation: vmPageIn 0.5s ease both; }

/* reveal timing shared by every auto-tagged block (see main.js) */
.js .reveal {
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

/* touch press feedback: the same response everywhere in the page */
.bcard:active,
.dl:active,
.news-item:active,
.shot:active,
.gshot:active,
.os-banner:active,
.tip:active {
  transform: scale(0.985);
}
@media (hover: none) {
  /* no hover on phones: rising on tap keeps the cards alive */
  .bcard:active,
  .dl:active,
  .news-item:active,
  .os-banner:active {
    transform: translateY(-3px) scale(0.99);
  }
}