/* Reapple Music — intro material.
   Structure: Feature Motion Studio (Lumno grid, 8px inset panel, 28px outer radius).
   Paint: red on white. Accent #E02E4D from manager/ManagerView.swift (0.88/0.18/0.30);
   window radius 12px and pill 18px from payload/stage.js.
   Every colour is a token; scenes read tokens only, never literals. */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Segoe UI", system-ui, sans-serif;
  --bg: #f4f0ed;
  --ink: #1c1a18;
  --muted: #6d6862;
  --dim: #9c968f;
  --hairline: #ece8e5;
  --block: #ffffff;
  --block-soft: #fbf9f8;
  --cell: #ffffff;
  --cell-hover: #fdf7f7;
  --accent: #e02e4d;
  --accent-ink: #ffffff;
  --chip-bg: #ffffff;
  --chip-line: rgba(28, 26, 24, .12);
  --chip-ink: #57524c;
  --card-shadow: 0 0 0 1px rgba(28, 26, 24, .05), 0 20px 44px -40px rgba(60, 30, 30, .45);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1011;
  --ink: #ecebe8;
  --muted: #a5a09a;
  --dim: #7c7873;
  --hairline: #2a2b2d;
  --block: #171819;
  --block-soft: #141516;
  --cell: #171819;
  --cell-hover: #1d1f20;
  --accent: #ff6b86;
  --accent-ink: #1a1013;
  --chip-bg: #232528;
  --chip-line: rgba(255, 255, 255, .09);
  --chip-ink: #b6bcc5;
  --card-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #121314;
    --ink: #ecebe8;
    --muted: #a5a09a;
    --dim: #7c7873;
    --hairline: #2a2b2d;
  --block: #171819;
  --block-soft: #141516;
    --cell: #171819;
    --cell-hover: #1d1f20;
    --accent: #ff6b86;
    --accent-ink: #1a1013;
    --chip-bg: #232528;
    --chip-line: rgba(255, 255, 255, .09);
    --chip-ink: #b6bcc5;
    --card-shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 30px 60px -40px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: .88em;
  padding: .1em .34em;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}
.dim { color: var(--dim); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── top bar ─────────────────────────────────────────────── */
.hero-brand {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 16px; font-size: 14px; font-weight: 620; letter-spacing: -.01em; color: var(--ink);
}
.brand-mark { width: 22px; height: 22px; display: inline-grid; place-items: center; color: var(--accent); }
.brand-mark svg { width: 20px; height: 20px; }
.theme-button { font: inherit; font-size: 12px; cursor: pointer;
  padding: 6px 11px; border-radius: 8px; color: var(--muted);
  border: 0; background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.theme-button:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* ── shell / hero ────────────────────────────────────────── */
.shell { max-width: 1180px; margin: 0 auto; padding: 44px 24px 20px; }

/* First screen: hero + all twelve scenes, no scrolling. */
.first-screen { height: calc(100svh - 76px); display: flex; flex-direction: column; }
.hero { flex: none; margin: 0 auto 18px; max-width: 940px; text-align: center; }
h1 { margin: 0; font-size: clamp(25px, 3.4vw, 38px); line-height: 1.28; letter-spacing: -.035em; font-weight: 680; color: var(--ink); }

section { margin-top: 72px; }
h2 { margin: 0 0 22px; font-size: 21px; letter-spacing: -.028em; font-weight: 650; }
p { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── feature grid (Lumno structure, red/white paint) ─────── */
#capabilities { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; padding-bottom: 112px; }
.fms-grid {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0;
  background: transparent; border-radius: 0; overflow: visible;
}
.fms-tile {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit; background: var(--block);
  border-radius: 18px;
  transition: background 200ms ease;
}
.fms-tile:hover { background: var(--cell-hover); }
.fms-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

.fms-art {
  /* Panel-scoped palette. Light default; dark overrides at the end of the file. */
  --fms-panel: #fbecea;
  --fms-bar-body: #eae3df;
  --fms-bar-heading: #dcd2cb;
  --fms-window: #ffffff;
  --fms-window-outline: rgba(28, 26, 24, .08);
  --fms-window-shadow: 0 10px 24px -12px rgba(60, 30, 30, .3);
  --fms-inner-surface: #f4eeeb;
  --fms-glyph: #4b4641;
  --fms-pill: #d8d4cf;
  --fms-accent: var(--accent);
  --fms-accent-soft: rgba(224, 46, 77, .14);
  --fms-accent-faint: rgba(224, 46, 77, .07);
  --fms-accent-ring: rgba(224, 46, 77, .34);
  --fms-radius-panel: 12px;
  --fms-radius-window: 12px;
  position: relative; margin: 6px 6px 0; min-height: 0; flex: 1 1 auto;
  overflow: hidden; border-radius: var(--fms-radius-panel);
  background-color: var(--fms-panel);
  display: grid; place-items: center;
  pointer-events: none;
  transition: filter 160ms ease, opacity 160ms ease;
}
.fms-tile[data-veiled="true"] .fms-art { filter: blur(6px); opacity: 0; }
.fms-stage { position: relative; width: 126px; height: 118px; isolation: isolate; transform: scale(.9); }

.fms-chip {
  position: absolute; z-index: 1; top: 14px; left: 14px; width: 26px; height: 26px;
  display: grid; place-items: center; border-radius: 8px;
  background: var(--fms-window); color: var(--chip-ink);
  box-shadow: 0 1px 3px rgba(60, 30, 30, .08);
}
.fms-chip svg { width: 14px; height: 14px; overflow: visible; }
.fms-copy { padding: 11px 16px 13px; flex: none; min-height: 84px; }
.fms-copy h3 { margin: 0 0 4px; font-size: 13.5px; line-height: 1.35; font-weight: 650; letter-spacing: -.02em; }
.fms-copy p { font-size: 12px; line-height: 1.5; color: var(--muted); }

/* shared scene primitives */
.mini-window {
  position: absolute; background: var(--fms-window);
  box-shadow: var(--fms-window-shadow);
  border-radius: var(--fms-radius-window); overflow: hidden;
}
.bar-head, .bar {
  display: block; border-radius: 2px; background: var(--fms-bar-body);
  height: 4px; width: 34px; margin: 8px 0 0 9px;
}
.bar-head { height: 5px; width: 38px; margin-top: 11px; background: var(--fms-bar-heading); }
.bar.short { width: 20px; }

/* ── 1. injection ────────────────────────────────────────── */
.host { left: 15px; top: 22px; width: 96px; height: 74px; }
.host-player { position: absolute; left: 10px; bottom: 10px; width: 34px; height: 10px; border-radius: 4px; background: var(--fms-inner-surface); }
.inject-layer {
  position: absolute; left: 12px; top: 18px; width: 96px; height: 74px;
  border-radius: var(--fms-radius-window);
  background: var(--fms-accent-faint);
  box-shadow: inset 0 0 0 1px var(--fms-accent-ring), 0 8px 20px -12px rgba(60, 30, 30, .45);
}
.inject-seal {
  position: absolute; left: 94px; top: 77px; width: 14px; height: 14px;
  display: grid; place-items: center; border-radius: 5px;
  background: var(--fms-accent); color: var(--accent-ink);
}
.inject-seal svg { width: 9px; height: 9px; }

/* ── 2. measurement ──────────────────────────────────────── */
.lobe { position: absolute; top: 45px; width: 21px; height: 21px; border: 2.2px solid var(--fms-glyph); border-radius: 50%; }
.lobe-left { left: 42px; }
.lobe-right { left: 54px; }
.scanline { position: absolute; left: 0; top: 6px; width: 1px; height: 106px; background: var(--fms-accent); opacity: 0; transform: translateX(126px); }
.calib-tick { position: absolute; left: 52px; top: 88px; width: 22px; height: 2px; border-radius: 2px; background: var(--fms-accent); }

/* ── 3. layout ───────────────────────────────────────────── */
.layout-window { left: 15px; top: 18px; width: 96px; height: 82px; }
.layout-art { position: absolute; left: 10px; top: 8px; width: 40px; height: 40px; border-radius: 8px; background: var(--fms-inner-surface); box-shadow: inset 0 0 0 1px var(--fms-window-outline); }
.layout-title { position: absolute; left: 10px; top: 62px; }
.layout-title .bar-head, .layout-title .bar { margin: 0 0 5px; }
.radius-ring { position: absolute; right: 4px; bottom: 4px; width: 22px; height: 22px; border-right: 1.5px solid var(--fms-accent); border-bottom: 1.5px solid var(--fms-accent); border-bottom-right-radius: 11px; transform-origin: bottom right; }

/* ── 4. transport ────────────────────────────────────────── */
.glyph-play { position: absolute; left: 55px; top: 38px; width: 0; height: 0; border-left: 15px solid var(--fms-glyph); border-top: 9px solid transparent; border-bottom: 9px solid transparent; opacity: 0; transform: scale(.86); transform-origin: left center; }
.glyph-pause { position: absolute; left: 54px; top: 36px; display: flex; gap: 4px; }
.glyph-pause i { width: 4.5px; height: 18px; border-radius: 2px; background: var(--fms-glyph); }
.transport-slots { position: absolute; left: 18px; bottom: 4px; display: flex; align-items: flex-end; gap: 4px; }
.transport-slots i { display: block; height: 5px; border-radius: 3px; background: var(--fms-bar-body); }
.transport-slots i:nth-child(1), .transport-slots i:nth-child(5) { width: 10px; }
.transport-slots i:nth-child(2), .transport-slots i:nth-child(4) { width: 16px; }
.transport-slots i:nth-child(3) { width: 9px; background: var(--fms-accent); }

/* ── 5. artwork ──────────────────────────────────────────── */
.cover { position: absolute; left: 36px; top: 26px; width: 54px; height: 54px; border-radius: 9px; background: var(--fms-window); box-shadow: 0 10px 24px -14px rgba(60, 30, 30, .5), inset 0 0 0 1px var(--fms-window-outline); transform: scale(1.03); }
.cover-inner { position: absolute; left: 9px; top: 9px; width: 24px; height: 24px; border-radius: 5px; background: var(--fms-accent-soft); box-shadow: inset 0 0 0 1px var(--fms-accent-ring); }
.cover .bar.short { position: absolute; left: 9px; bottom: 9px; margin: 0; width: 26px; }
.cover-mark { position: absolute; left: 75px; top: 65px; width: 10px; height: 10px; border-radius: 3px; background: var(--fms-accent); }

/* ── 6. backdrop wash ────────────────────────────────────── */
.wash { position: absolute; left: 16px; top: 20px; width: 94px; height: 78px; border-radius: 24px; background: radial-gradient(58% 68% at 50% 44%, var(--fms-accent-soft) 0%, var(--fms-accent-faint) 52%, transparent 80%); filter: blur(7px); transform: scale(1.06); }
.wash-cover { position: absolute; left: 46px; top: 42px; width: 34px; height: 34px; border-radius: 7px; background: var(--fms-inner-surface); box-shadow: 0 6px 16px -10px rgba(60, 30, 30, .4), inset 0 0 0 1px var(--fms-window-outline); }
.wash-cover::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 18px; height: 3px; border-radius: 2px; background: var(--fms-bar-body); }
.wash-rim { position: absolute; left: 16px; top: 20px; width: 94px; height: 78px; border-radius: 24px; box-shadow: inset 0 0 0 1px var(--fms-accent-faint); }

/* ── 7. lyrics ───────────────────────────────────────────── */
.lyric-window { left: 15px; top: 20px; width: 96px; height: 78px; }
.lyric-lines { position: absolute; inset: 0; }
.lyric-line { position: absolute; left: 14px; height: 4px; border-radius: 2px; background: var(--fms-bar-body); opacity: .55; filter: blur(.6px); }
.l1 { top: 12px; width: 52px; }
.l2 { top: 26px; width: 64px; }
.l3 { top: 40px; width: 70px; background: var(--fms-glyph); opacity: 1; filter: none; }
.l4 { top: 54px; width: 58px; }
.l5 { top: 68px; width: 44px; }
.lyric-cue { position: absolute; left: 7px; top: 36px; width: 2px; height: 12px; border-radius: 2px; background: var(--fms-accent); }

/* ── 8. capsule ──────────────────────────────────────────── */
.full-bar { position: absolute; left: 0; top: 74px; width: 126px; height: 22px; border-radius: 8px; background: var(--fms-inner-surface); opacity: 0; transform: translateY(8px) scaleX(1.04); }
.capsule { position: absolute; left: 21px; top: 74px; width: 84px; height: 22px; border-radius: 11px; background: var(--fms-window); box-shadow: 0 10px 22px -14px rgba(60, 30, 30, .55); display: flex; align-items: center; gap: 7px; padding: 0 8px; }
.capsule-art { width: 14px; height: 14px; border-radius: 4px; background: var(--fms-inner-surface); box-shadow: inset 0 0 0 1px var(--fms-window-outline); }
.capsule-lines i { display: block; height: 3px; border-radius: 2px; background: var(--fms-bar-body); width: 26px; margin: 2px 0; }
.capsule-lines i:last-child { width: 16px; }
.capsule-progress { width: 2px; height: 8px; border-radius: 2px; background: var(--fms-accent); margin-left: auto; }
.capsule-material { position: absolute; left: 21px; top: 74px; width: 84px; height: 22px; border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), inset 0 0 0 1px var(--fms-window-outline); }

/* ── 9. queue ────────────────────────────────────────────── */
.queue-panel { position: absolute; right: 12px; top: 12px; width: 66px; height: 94px; border-radius: 12px; background: var(--fms-window); box-shadow: var(--fms-window-shadow); }
.pill { position: absolute; top: 8px; height: 9px; width: 24px; border-radius: 999px; background: var(--fms-pill); }
.p1 { left: 8px; }
.p2 { right: 8px; }
.qrow { position: absolute; left: 8px; height: 4px; width: 38px; border-radius: 2px; background: var(--fms-bar-body); }
.r1 { top: 26px; } .r2 { top: 38px; } .r3 { top: 50px; } .r4 { top: 62px; }
.qdots { position: absolute; right: 7px; top: 27px; display: flex; gap: 2.5px; }
.qdots i { width: 2px; height: 2px; border-radius: 50%; background: var(--fms-glyph); opacity: .5; }

/* ── 10. switches ────────────────────────────────────────── */
.switch-grid { position: absolute; left: 24px; top: 16px; display: grid; grid-template-columns: 44px 44px; gap: 6px; }
.blk { height: 30px; border-radius: 8px; background: var(--fms-accent-faint); box-shadow: inset 0 0 0 1px var(--fms-accent-ring); }
.blk.b4 { background: var(--fms-inner-surface); box-shadow: inset 0 0 0 1px var(--fms-window-outline); }
.blk::before { content: ""; display: block; margin: 9px 0 0 8px; width: 22px; height: 3px; border-radius: 2px; background: var(--fms-bar-body); }
.toggle { position: absolute; left: 49px; top: 90px; width: 30px; height: 16px; border-radius: 999px; background: var(--fms-bar-body); }
.knob { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--fms-window); box-shadow: 0 1px 2px rgba(60, 30, 30, .25); }

/* ── 11. native settings ─────────────────────────────────── */
.settings-window { left: 15px; top: 16px; width: 96px; height: 86px; }
.srow { position: absolute; left: 10px; height: 4px; width: 38px; border-radius: 2px; background: var(--fms-bar-body); }
.s1 { top: 12px; } .s2 { top: 26px; } .s3 { top: 40px; } .s4 { top: 66px; }
.section-row { top: 52px; width: 66px; height: 8px; border-radius: 3px; background: var(--fms-accent-faint); }
.sbar { position: absolute; left: 0; top: 0; width: 2px; height: 8px; border-radius: 2px; background: var(--fms-accent); }
.scontrols { position: static; }
.scontrol { position: absolute; right: 10px; width: 8px; height: 8px; border-radius: 3px; background: var(--fms-bar-body); }
.c1 { top: 10px; } .c2 { top: 24px; } .c3 { top: 38px; } .c4 { top: 64px; }

/* ── 12. off ─────────────────────────────────────────────── */
.native-page { left: 15px; top: 22px; width: 96px; height: 74px; }
.levels { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: flex-end; gap: 3px; }
.levels i { width: 3px; border-radius: 2px; background: var(--fms-accent); }
.levels i:nth-child(1) { height: 6px; }
.levels i:nth-child(2) { height: 11px; }
.levels i:nth-child(3) { height: 7px; }
.off-overlay { position: absolute; left: 15px; top: 22px; width: 96px; height: 74px; border-radius: var(--fms-radius-window); background: var(--fms-accent-faint); box-shadow: inset 0 0 0 1px var(--fms-accent-ring); opacity: 0; transform: translateY(-16px) scale(.98); }

/* ── motion ──────────────────────────────────────────────────
   Base styles are the final frame. Keyframes describe where objects
   come from, mostly as transforms; opacity is kept only where an
   object has to appear or leave the composition entirely.
   Single curve: cubic-bezier(.22,1,.36,1) — decelerating, never overshooting. */
@keyframes fms-glyph-draw { from { stroke-dasharray: 90; stroke-dashoffset: 90; } to { stroke-dasharray: 90; stroke-dashoffset: 0; } }
@keyframes fms-layer-enter { from { transform: translateY(-14px) scale(.96); } }
@keyframes fms-layer-settle { from { transform: translateY(-4px); } }
@keyframes fms-seal { from { transform: scale(.2) rotate(-14deg); } }
@keyframes fms-scan { from { opacity: 1; transform: translateX(-2px); } }
@keyframes fms-lobe-left { from { transform: translateX(-5px); } }
@keyframes fms-lobe-right { from { transform: translateX(5px); } }
@keyframes fms-tick { from { transform: scaleX(.15); } }
@keyframes fms-seat { from { transform: translateY(14px); } }
@keyframes fms-title-in { from { transform: translateY(-7px); } }
@keyframes fms-radius { from { transform: scale(.7); } }
@keyframes fms-play-out { from { opacity: 1; transform: scale(1); } }
@keyframes fms-pause-in { from { opacity: 0; transform: scale(1.09); } }
@keyframes fms-slots { from { transform: translateY(4px) scaleY(.7); } }
@keyframes fms-cover-press { from { transform: scale(.95) translateY(2px); } }
@keyframes fms-cover-settle { from { transform: scale(1.14); } }
@keyframes fms-cover-mark { from { transform: scale(.2); } }
@keyframes fms-wash-in { from { transform: scale(.55); } }
@keyframes fms-wash-cover { from { transform: translateY(-12px) scale(.9); } }
@keyframes fms-rim { from { transform: scale(1.04); } }
@keyframes fms-lines-scroll { from { transform: translateY(14px); } }
@keyframes fms-focus-line { from { filter: blur(2.4px); transform: scaleX(.95); } }
@keyframes fms-cue { from { transform: scaleY(0); } }
@keyframes fms-bar-collapse { from { opacity: 1; transform: translateY(-2px) scaleX(.94); } }
@keyframes fms-capsule-in { from { transform: scaleX(.5); } }
@keyframes fms-material { from { opacity: 0; transform: scale(1.04); } }
@keyframes fms-panel-slide { from { transform: translateX(34px); } }
@keyframes fms-rows-in { from { transform: translateX(9px); } }
@keyframes fms-dots { from { transform: scale(.3); } }
@keyframes fms-knob { from { transform: translateX(15px); } }
@keyframes fms-toggle-track { from { background: var(--fms-accent); } }
@keyframes fms-handback { from { background: var(--fms-accent-soft); box-shadow: inset 0 0 0 1px var(--fms-accent-ring); } }
@keyframes fms-blocks-settle { from { transform: translateY(2px); } }
@keyframes fms-row-insert { from { transform: translateY(7px) scaleX(.92); } }
@keyframes fms-controls-align { from { transform: translateX(7px); } }
@keyframes fms-row-confirm { from { background: var(--fms-bar-body); } }
@keyframes fms-lift { from { opacity: 1; transform: none; } }
@keyframes fms-native-reveal { from { transform: scale(.96); } }
@keyframes fms-levels { from { transform: scaleY(.2); } }

.fms-tile[data-played="true"] .fms-chip svg path,
.fms-tile[data-played="true"] .fms-chip svg circle,
.fms-tile[data-played="true"] .fms-chip svg rect { animation: fms-glyph-draw 560ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .inject-layer { animation: fms-layer-enter 500ms 250ms cubic-bezier(.22, 1, .36, 1) both, fms-layer-settle 350ms 900ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .inject-seal { animation: fms-seal 420ms 1600ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .scanline { animation: fms-scan 450ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .lobe-left { animation: fms-lobe-left 420ms 850ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .lobe-right { animation: fms-lobe-right 420ms 850ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .calib-tick { animation: fms-tick 400ms 1600ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .layout-art { animation: fms-seat 450ms 300ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .layout-title { animation: fms-title-in 400ms 900ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .radius-ring { animation: fms-radius 420ms 1600ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .glyph-play { animation: fms-play-out 400ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .glyph-pause { animation: fms-pause-in 520ms 750ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .transport-slots { animation: fms-slots 380ms 1500ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .cover { animation: fms-cover-press 450ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .cover-inner { animation: fms-cover-settle 520ms 850ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .cover-mark { animation: fms-cover-mark 380ms 1450ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .wash { animation: fms-wash-in 500ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .wash-cover { animation: fms-wash-cover 500ms 850ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .wash-rim { animation: fms-rim 400ms 1500ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .lyric-lines { animation: fms-lines-scroll 520ms 300ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .lyric-line.l3 { animation: fms-focus-line 420ms 900ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .lyric-cue { animation: fms-cue 350ms 1500ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .full-bar { animation: fms-bar-collapse 550ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .capsule { animation: fms-capsule-in 500ms 650ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .capsule-material { animation: fms-material 420ms 1400ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .queue-panel { animation: fms-panel-slide 500ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .qrow { animation: fms-rows-in 450ms 800ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .qdots { animation: fms-dots 350ms 1500ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .knob { animation: fms-knob 350ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .toggle { animation: fms-toggle-track 350ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .blk.b4 { animation: fms-handback 450ms 700ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .blk.b1,
.fms-tile[data-played="true"] .blk.b2,
.fms-tile[data-played="true"] .blk.b3 { animation: fms-blocks-settle 350ms 1400ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .section-row { animation: fms-row-insert 450ms 250ms cubic-bezier(.22, 1, .36, 1) both, fms-row-confirm 400ms 1400ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .scontrols { animation: fms-controls-align 380ms 800ms cubic-bezier(.22, 1, .36, 1) both; }

.fms-tile[data-played="true"] .off-overlay { animation: fms-lift 520ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .native-page { animation: fms-native-reveal 450ms 800ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .levels { animation: fms-levels 400ms 1450ms cubic-bezier(.22, 1, .36, 1) both; transform-origin: bottom; }

/* ── pipeline / limits / evidence / install ──────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; background: transparent; }
.steps li { background: var(--block); border-radius: 16px; padding: 22px 24px 24px; }
.step-index { display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--accent); margin-bottom: 8px; }
.steps h3 { margin: 0 0 6px; font-size: 14px; font-weight: 650; letter-spacing: -.02em; }
.steps p { font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.limits { padding-top: 0; }
.limits h2 { margin-bottom: 16px; }
.limits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.limits li { font-size: 13px; line-height: 1.7; color: var(--muted); padding-left: 15px; position: relative; }
.limits li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: .55; }
.limits li b { color: var(--ink); font-weight: 600; }

.table-wrap { background: var(--block); border-radius: 18px; overflow: hidden; padding: 4px 10px; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { text-align: left; padding: 10px 14px; vertical-align: top; }
thead th { font-size: 11px; letter-spacing: .07em; color: var(--dim); font-weight: 650; }
tbody th { font-weight: 600; white-space: nowrap; }
tbody tr:nth-child(odd) th, tbody tr:nth-child(odd) td { background: var(--block-soft); border-radius: 6px; }
tr:target th { box-shadow: inset 3px 0 0 var(--accent); }
td { color: var(--muted); }
td code { font-size: 11.5px; }

.install { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.install p { margin: 0 0 8px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.install p.dim { font-size: 12px; }
.cli { margin: 0; padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 4%, transparent); overflow-x: auto; }
.cli code { background: none; padding: 0; font-size: 11.5px; line-height: 1.8; color: var(--ink); white-space: pre; }

.footer { max-width: 1180px; margin: 0 auto; padding: 44px 24px 72px; font-size: 12px; color: var(--muted); display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.footer p { margin: 0 0 6px; }

/* ── dark panel tokens ───────────────────────────────────── */
:root[data-theme="dark"] .fms-art {
  --fms-panel: #211c1d;
  --fms-bar-body: #303338;
  --fms-bar-heading: #3f444a;
  --fms-window: #232528;
  --fms-window-outline: rgba(255, 255, 255, .07);
  --fms-window-shadow: 0 8px 20px -10px rgba(0, 0, 0, .65);
  --fms-inner-surface: #2e3134;
  --fms-glyph: #c2c8d0;
  --fms-pill: #55524d;
  --fms-accent-soft: rgba(255, 107, 134, .16);
  --fms-accent-faint: rgba(255, 107, 134, .08);
  --fms-accent-ring: rgba(255, 107, 134, .36);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .fms-art {
    --fms-panel: #1b1c1e;
    --fms-bar-body: #303338;
    --fms-bar-heading: #3f444a;
    --fms-window: #232528;
    --fms-window-outline: rgba(255, 255, 255, .07);
    --fms-window-shadow: 0 8px 20px -10px rgba(0, 0, 0, .65);
    --fms-inner-surface: #2e3134;
    --fms-glyph: #c2c8d0;
    --fms-pill: #55524d;
    --fms-accent-soft: rgba(255, 107, 134, .16);
    --fms-accent-faint: rgba(255, 107, 134, .08);
    --fms-accent-ring: rgba(255, 107, 134, .36);
  }
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 860px), (max-height: 740px) {
  .first-screen { height: auto; display: block; }
  #capabilities { display: block; }
  .fms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .fms-art { flex: none; height: 180px; }
  .fms-stage { transform: none; }
  .fms-copy { padding: 18px 20px 20px; }
  .fms-copy h3 { font-size: 14.5px; }
  .fms-copy p { font-size: 12.5px; }
  .hero { margin-bottom: 34px; }
  h1 { font-size: clamp(27px, 4.2vw, 42px); }
}
@media (max-height: 840px) {
  .fms-stage { transform: scale(.78); }
}
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; }
  .install { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 620px) {
  .shell { padding: 44px 14px 24px; }
  .wide-break { display: none; }
  h2 { font-size: 19px; }
  .fms-grid { grid-template-columns: 1fr; }
  .fms-art { height: 196px; }
  .fms-copy { padding: 20px 22px 24px; }
  th, td { padding: 10px 12px; }
  tbody th { white-space: normal; }
  .footer { padding: 32px 14px 56px; }
}

/* ── reduced motion: final frame from first paint, no work scheduled ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fms-tile[data-veiled="true"] .fms-art { filter: none; opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Frosted gradient cards — final surface pass.
   Page is pure black/white; the twelve cards carry the colour.
   ───────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --ink: #111111;
  --muted: #6b6663;
  --dim: #9a9490;
  --hairline: #e8e5e2;
  --cell: #ffffff;
  --block: #f5f4f2;
  --block-soft: #faf9f8;
  --chip-bg: #ffffff;
  --chip-line: rgba(0, 0, 0, .12);
  --chip-ink: #333333;
  --text-on-card: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #000000;
  --ink: #f2f2f2;
  --muted: #a3a09d;
  --dim: #7c7976;
  --hairline: #242424;
  --cell: #0d0d0d;
  --block: #141414;
  --block-soft: #101010;
  --chip-bg: #ffffff;
  --chip-line: rgba(255, 255, 255, .1);
  --chip-ink: #222222;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #000000;
    --ink: #f2f2f2;
    --muted: #a3a09d;
    --dim: #7c7976;
    --hairline: #242424;
    --cell: #0d0d0d;
    --block: #141414;
    --block-soft: #101010;
    --chip-bg: #ffffff;
    --chip-line: rgba(255, 255, 255, .1);
    --chip-ink: #222222;
  }
}

.fms-grid { gap: 10px; }

.fms-tile {
  container-type: inline-size;
  isolation: isolate;
  border-radius: 20px;
  overflow: hidden;
  background-color: #888;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .35);
  transition: filter 220ms ease;
}
.fms-tile:hover { background-color: #888; filter: brightness(1.04); }

/* grain: canvas noise, one noise pixel per device pixel, overlaid on the card */
.fms-tile::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background-image: var(--noise, none);
  background-size: 128px 128px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .4;
  pointer-events: none;
}

.fms-art {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0;
  margin: 0; border-radius: 0; background: transparent;
  overflow: visible;
}
.fms-chip {
  top: 14px; left: 14px; z-index: 3;
  width: 28px; height: 28px; border-radius: 9px;
  background: rgba(255, 255, 255, .88);
  color: var(--chip-ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}
.fms-chip svg { width: 15px; height: 15px; }

.fms-copy { position: relative; z-index: 3; padding: 0 12px 16px; text-align: center; min-height: 0; }
.fms-copy h3 {
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", system-ui, sans-serif;
  font-weight: 400;
  font-size: 8cqw;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--text-on-card);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* secondary surfaces on the monochrome page */
.steps li { background: var(--block); }
.table-wrap { background: var(--block); }
tbody tr:nth-child(odd) th, tbody tr:nth-child(odd) td { background: transparent; border-radius: 0; }
tbody tr:nth-child(even) th, tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
thead th { color: var(--dim); }
.cli { background: var(--block); }
.theme-button { background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* Marks that sit directly on the gradient must read white; marks inside the
   white mini-windows keep their ink. */
/* keep 16px of air under the last row on the first screen */
.first-screen { height: calc(100svh - 66px); }

.calib-tick { background: var(--fms-on-card); }
.transport-slots i:nth-child(3) { background: var(--fms-on-card); }

/* ─────────────────────────────────────────────────────────────
   One frosted red/white canvas. The twelve scenes float on it.
   ───────────────────────────────────────────────────────────── */
:root {
  --bg: #fff7f8;
  --ink: #2b0a12;
  --muted: #6d4b4a;
  --dim: #9c7573;
  --hairline: rgba(120, 20, 40, .12);
  --block: rgba(255, 255, 255, .5);
  --block-soft: transparent;
  --chip-bg: rgba(255, 255, 255, .78);
  --chip-ink: #3a1018;
  --text-on-card: #2b0a12;
}
:root[data-theme="dark"] {
  --bg: #0b0507;
  --ink: #f6ecee;
  --muted: #c0a3a9;
  --dim: #8d6f76;
  --hairline: rgba(255, 255, 255, .1);
  --block: rgba(255, 255, 255, .05);
  --block-soft: transparent;
  --chip-bg: rgba(255, 255, 255, .88);
  --chip-ink: #2a0b12;
  --text-on-card: #f6ecee;
}

body {
  background-color: var(--bg);
  /* Even red/white field, deeper in the NetEase red — no vertical ramp. */
  background-image:
    radial-gradient(72% 66% at 90% 2%, rgba(226, 96, 86, .5) 0%, rgba(226, 96, 86, 0) 68%),
    radial-gradient(96% 88% at 52% 42%, rgba(190, 14, 14, .56) 0%, rgba(190, 14, 14, 0) 78%),
    radial-gradient(80% 74% at 0% 86%, rgba(184, 10, 10, .55) 0%, rgba(184, 10, 10, 0) 72%),
    radial-gradient(80% 74% at 100% 84%, rgba(190, 20, 16, .5) 0%, rgba(190, 20, 16, 0) 72%),
    radial-gradient(70% 58% at 48% 108%, rgba(170, 8, 8, .45) 0%, rgba(170, 8, 8, 0) 72%),
    linear-gradient(128deg, #efc2bb 0%, #e0968e 46%, #c9635b 100%);
  background-attachment: fixed;
}
:root[data-theme="dark"] body {
  background-image:
    radial-gradient(75% 70% at 12% 10%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(80% 75% at 50% 44%, rgba(180, 30, 26, .18) 0%, rgba(180, 30, 26, 0) 70%),
    radial-gradient(75% 70% at 4% 86%, rgba(194, 12, 12, .22) 0%, rgba(194, 12, 12, 0) 68%),
    linear-gradient(128deg, #1a0b0b 0%, #120505 60%, #0a0202 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body {
    background-image:
      radial-gradient(75% 70% at 12% 10%, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, 0) 62%),
      radial-gradient(80% 75% at 50% 44%, rgba(180, 30, 26, .18) 0%, rgba(180, 30, 26, 0) 70%),
      radial-gradient(75% 70% at 4% 86%, rgba(194, 12, 12, .22) 0%, rgba(194, 12, 12, 0) 68%),
      linear-gradient(128deg, #1a0b0b 0%, #120505 60%, #0a0202 100%);
  }
}

/* grain over the whole canvas, not per card */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0;
  background-image: var(--noise, none);
  background-size: 128px 128px;
  mix-blend-mode: overlay;
  opacity: .4;
  pointer-events: none;
}
.shell, .footer { position: relative; z-index: 1; }

/* the twelve scenes float: no surface, no card stroke, no radius */
.fms-tile {
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  filter: none;
}
.fms-tile:hover { background: none; filter: none; }
.fms-tile::after { content: none; }
.fms-tile:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 8px; }

.fms-chip { background: var(--chip-bg); box-shadow: 0 1px 4px rgba(80, 10, 20, .16); }
.fms-copy h3 { color: var(--ink); text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }

/* frosted panels for the secondary sections */
.steps li, .table-wrap, .cli {
  background: var(--block);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.steps li { border-radius: 16px; }
.table-wrap { border-radius: 18px; }
.cli { border-radius: 12px; }
tbody tr:nth-child(even) th, tbody tr:nth-child(even) td { background: transparent; }
tr:target th { box-shadow: inset 3px 0 0 var(--accent); }

/* Floating groups: chip, scene and label stack as one compact unit centred in
   its cell, instead of a scene pinned to the top and a label pinned to the bottom. */
.fms-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 6px 4px;
}
.fms-chip { position: static; order: 1; flex: none; }
.fms-art { order: 2; flex: 0 0 auto; width: 100%; height: 118px; display: grid; place-items: center; }
.fms-copy { order: 3; padding: 0; }

/* ── arc carousel ─────────────────────────────────────────── */
#capabilities { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; padding-bottom: 112px; }
.ring-stage {
  position: relative; flex: 1 1 auto; min-height: 0;
  width: 100vw; margin-left: calc(50% - 50vw);
  display: grid; place-items: center;
  overflow: hidden; outline-offset: -4px;
  touch-action: pan-y;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.ring { position: relative; width: 310px; height: 375px; transform-style: preserve-3d; }

/* pure white, borderless, solid — no glass, no stroke, no gradient */
.ring-card {
  position: absolute; inset: 0;
  width: 310px; height: 375px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 22px;
  background: #ffffff;
  border: 0;
  border-radius: 24px;
  box-shadow: 0 26px 50px -36px rgba(80, 10, 20, .5), 0 1px 4px rgba(80, 10, 20, .1);
  transform: translateX(var(--x, 0px)) translateZ(var(--z, 0px)) rotateY(var(--rot, 0deg));
  transform-origin: center center;
  opacity: var(--alpha, 1);
  transition: transform 900ms cubic-bezier(.22, 1, .36, 1), opacity 620ms ease;
  will-change: transform, opacity;
  -webkit-user-drag: none;
  user-select: none;
}
.ring-card .fms-art { height: 172px; }
.ring-card .fms-stage { transform: scale(1); }
.ring-card .fms-copy { transition: opacity 300ms ease; }
.ring-card .fms-copy h3 { font-size: 26px; color: var(--ink); text-shadow: none; }
/* only the front card is named; the neighbours are just shapes */
.ring-card:not(.is-active) .fms-copy { opacity: 0; }
.ring-card .fms-chip { width: 30px; height: 30px; border-radius: 9px; background: #f3f0ef; box-shadow: none; color: #6b5f5c; }
.ring-card .fms-chip svg { width: 16px; height: 16px; }

.ring-btn {
  position: static; z-index: 60;
  width: 38px; height: 38px; margin: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: #7a1a2c;
  background: #ffffff;
  box-shadow: 0 10px 26px -16px rgba(80, 10, 20, .6);
}
.ring-btn:hover { color: #2b0a12; }
.ring-btn svg { width: 20px; height: 20px; }

.ring-meta { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 18px; font-size: 12px; letter-spacing: .1em; color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(90, 6, 16, .35); }
.ring-meta .ring-total { color: rgba(255, 255, 255, .52); }

@media (max-width: 860px), (max-height: 740px) {
  .ring-stage { display: block; }
  .ring {
    width: 100%; height: auto; display: flex; gap: 14px;
    overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 12px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .ring-card {
    position: relative; inset: auto; flex: 0 0 76%; height: 350px;
    transform: none; opacity: 1;
  }
  .ring-btn { display: none; }
  .ring-card .fms-copy h3 { font-size: 23px; }
}

/* Cards are always white, so the scene inside them always uses the light palette,
   even when the page is dark. The label is ink on white in both themes. */
:root .ring-card .fms-art {
  --fms-window: #ffffff;
  --fms-window-outline: rgba(28, 26, 24, .08);
  --fms-window-shadow: 0 10px 24px -12px rgba(60, 30, 30, .3);
  --fms-bar-body: #eae3df;
  --fms-bar-heading: #dcd2cb;
  --fms-inner-surface: #f4eeeb;
  --fms-glyph: #4b4641;
  --fms-pill: #d8d4cf;
  --fms-accent-soft: rgba(224, 46, 77, .14);
  --fms-accent-faint: rgba(224, 46, 77, .07);
  --fms-accent-ring: rgba(224, 46, 77, .34);
  --chip-bg: #f3f0ef;
  --chip-ink: #6b5f5c;
}
.ring-card .fms-copy h3 { color: #1b1113; }
.ring-card .fms-chip { color: #6b5f5c; }

/* single entry: repo and download */
.cta { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; }
.cta-btn {
  font-size: 13px; text-decoration: none; color: #1b1113;
  padding: 10px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  transition: background 200ms ease, color 200ms ease;
}
.cta-btn:hover { background: #fff; }
.cta-btn.solid { background: #1b1113; color: #fff; }
.cta-btn.solid:hover { background: #3a1a20; }

/* ─────────────────────────────────────────────────────────────
   Scene rework: transport, artwork, capsule, switches, layout.
   Everything transform-first; no bounce; base state = final frame.
   ───────────────────────────────────────────────────────────── */

/* transport: press ring, big glyphs, hit slots */
.press-ring {
  position: absolute; left: 35px; top: 20px; width: 56px; height: 56px;
  border-radius: 50%; border: 1.5px solid var(--fms-accent);
  opacity: 0; transform: scale(1.25);
}
.glyph-play {
  left: 54px; top: 36px; border-left: 20px solid var(--fms-glyph);
  border-top: 12px solid transparent; border-bottom: 12px solid transparent;
}
.glyph-pause { left: 54px; top: 36px; gap: 6px; }
.glyph-pause i { width: 6px; height: 24px; border-radius: 2.5px; }
.transport-slots { left: 18px; bottom: 4px; }
.transport-slots i { height: 6px; }

/* artwork: cover, glow, play badge */
.cover-glow {
  position: absolute; left: 21px; top: 12px; width: 84px; height: 84px;
  border-radius: 24px; background: var(--fms-accent-faint); filter: blur(6px);
  opacity: 1; transform: scale(1);
}
.cover { left: 31px; top: 22px; width: 64px; height: 64px; border-radius: 10px; }
.cover-inner { left: 11px; top: 11px; width: 26px; height: 26px; }
.cover .bar.short { left: 11px; bottom: 11px; width: 30px; }
.cover-play {
  position: absolute; left: 56px; top: 46px; width: 0; height: 0;
  border-left: 13px solid var(--fms-accent); border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  opacity: 0; transform: translateX(0) scale(1.3); transform-origin: left center;
}
.cover-mark { left: 84px; top: 74px; width: 11px; height: 11px; border-radius: 3px; }

/* capsule: bar, capsule, material rim, shine */
.full-bar { top: 72px; height: 24px; border-radius: 9px; }
.capsule { left: 20px; top: 72px; width: 86px; height: 24px; border-radius: 12px; padding: 0 9px; gap: 8px; overflow: hidden; }
.capsule-art { width: 16px; height: 16px; border-radius: 5px; }
.capsule-lines i { height: 3px; width: 28px; }
.capsule-material { left: 20px; top: 72px; width: 86px; height: 24px; border-radius: 12px; }
.capsule-shine {
  position: absolute; top: -6px; left: 0; width: 26px; height: 36px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  transform: skewX(-16deg) translateX(120px);
  opacity: 0;
}

/* switches: three rows, the last one hands back */
.switch-rows { position: absolute; left: 15px; top: 24px; width: 96px; display: grid; gap: 10px; }
.switch-row {
  position: relative; height: 22px; border-radius: 8px;
  background: var(--fms-accent-faint);
  box-shadow: inset 0 0 0 1px var(--fms-accent-ring);
  opacity: 1;
}
.row-bar { position: absolute; left: 9px; top: 9px; width: 38px; height: 4px; border-radius: 2px; background: var(--fms-bar-body); }
.mini-toggle {
  position: absolute; right: 7px; top: 4px; width: 26px; height: 14px;
  border-radius: 999px; background: var(--fms-accent);
}
.mini-knob {
  position: absolute; right: 2px; top: 2px; width: 10px; height: 10px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(60,30,30,.25);
}
.switch-row.off { background: var(--fms-inner-surface); box-shadow: inset 0 0 0 1px var(--fms-window-outline); }
.switch-row.off .row-bar { background: var(--fms-bar-body); }
.switch-row.off .mini-toggle { background: var(--fms-bar-body); }
.switch-row.off .mini-knob { right: auto; left: 2px; }

/* layout: measured gap between artwork and title */
.gap-line {
  position: absolute; left: 10px; top: 54px; width: 40px; height: 2px;
  border-radius: 2px; background: var(--fms-accent); transform-origin: left center;
}

@keyframes fms-press-ring { from { opacity: .7; transform: scale(.45); } }
@keyframes fms-cover-glow { from { opacity: 0; transform: scale(.72); } }
@keyframes fms-cover-play { from { opacity: 1; transform: scale(1); } }
@keyframes fms-shine { from { opacity: .9; transform: skewX(-16deg) translateX(-30px); } }
@keyframes fms-gap { from { transform: scaleX(0); } }
@keyframes fms-row-off { from { background: var(--fms-accent-faint); box-shadow: inset 0 0 0 1px var(--fms-accent-ring); } }
@keyframes fms-knob-left { from { left: 14px; } }

.fms-tile[data-played="true"] .press-ring { animation: fms-press-ring 460ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .cover-glow { animation: fms-cover-glow 560ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .cover-play { animation: fms-cover-play 420ms 250ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .capsule-shine { animation: fms-shine 700ms 1400ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .gap-line { animation: fms-gap 420ms 1600ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .switch-row.off { animation: fms-row-off 450ms 700ms cubic-bezier(.22, 1, .36, 1) both; }
.fms-tile[data-played="true"] .switch-row.off .mini-knob { animation: fms-knob-left 350ms 250ms cubic-bezier(.22, 1, .36, 1) both; }