/* ═══════════════════════════════════════════════════════════════════════════
   RemoveVocals Studio — multitrack editor
   Standalone stylesheet: the studio does NOT load style.css / enhance.css.
   Those are built for a light, marketing-page layout and fight a dense,
   dark, full-viewport tool. Fonts come from the shared /fonts/fonts.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --st-bg:        #0a0a0c;
  --st-panel:     #121216;
  --st-panel-2:   #17171d;
  --st-panel-3:   #1e1e26;
  --st-raise:     #26262f;
  --st-line:      #2a2a33;
  --st-line-soft: #202028;
  --st-text:      #e9e9ee;
  --st-text-2:    #a2a2ae;
  --st-text-3:    #6e6e7c;
  --st-purple:    #6c3bf5;
  --st-purple-2:  #8b5cf6;
  --st-purple-dim:rgba(108,59,245,.16);
  --st-green:     #4fb071;
  --st-red:       #ff424d;
  --st-yellow:    #eed409;
  --st-orange:    #f4812e;
  --st-blue:      #6c8bd5;
  --st-r:  8px;
  --st-r-sm: 6px;
  --st-r-lg: 12px;
  --st-head-w: 218px;
  --st-track-h: 92px;
  --st-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

/* [hidden] has no effect on an element whose display is set by a rule with
   higher specificity, and SVG icons inside flex buttons are exactly that.
   Without this the play and pause glyphs stack on top of each other. */
[hidden]{ display:none !important; }

html,body{ height:100%; }
body.st-body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--st-bg);
  color:var(--st-text);
  font-size:13px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow:hidden;
  overscroll-behavior:none;
}
button{ font-family:inherit; cursor:pointer; color:inherit; }
input,select,textarea{ font-family:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--st-purple-2); outline-offset:1px; }

/* ── Boot gate ───────────────────────────────────────────────────────────── */
.st-boot{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(108,59,245,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(139,92,246,.08) 0%, transparent 55%),
    var(--st-bg);
  padding:24px;
}
.st-boot[hidden]{ display:none; }
.st-boot-card{ max-width:520px; text-align:center; }
.st-boot-logo{ color:var(--st-purple-2); margin-bottom:18px; }
.st-boot-card h1{ font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:8px; }
.st-boot-card p{ color:var(--st-text-2); font-size:14px; line-height:1.6; }
.st-boot-actions{ margin-top:20px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.st-app{
  height:100vh; height:100dvh;
  display:flex; flex-direction:column;
  background:var(--st-bg);
}
.st-app[hidden]{ display:none; }
.st-main{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.st-top{
  flex:0 0 auto;
  height:52px;
  display:flex; align-items:center; gap:14px;
  padding:0 12px;
  background:var(--st-panel);
  border-bottom:1px solid var(--st-line);
}
.st-brand{
  display:flex; align-items:center; gap:8px;
  color:var(--st-text); text-decoration:none;
  font-weight:700; font-size:14px; letter-spacing:-.01em;
  padding:6px 10px 6px 6px; border-radius:var(--st-r);
  transition:background .16s;
}
.st-brand:hover{ background:var(--st-panel-3); }
.st-brand svg{ color:var(--st-purple-2); }

.st-proj{ display:flex; align-items:center; gap:8px; min-width:0; }
.st-proj-name{
  background:transparent; border:1px solid transparent; border-radius:var(--st-r-sm);
  padding:5px 8px; font-size:13px; font-weight:600; width:190px; min-width:60px;
  transition:border-color .16s, background .16s;
}
.st-proj-name:hover{ background:var(--st-panel-2); }
.st-proj-name:focus{ background:var(--st-panel-3); border-color:var(--st-line); outline:none; }
.st-save-state{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--st-text-3); background:var(--st-panel-3);
  padding:3px 7px; border-radius:20px; white-space:nowrap;
}
.st-save-state.is-dirty{ color:var(--st-yellow); background:rgba(238,212,9,.10); }
.st-save-state.is-saving{ color:var(--st-blue); background:rgba(108,139,213,.12); }
.st-save-state.is-saved{ color:var(--st-green); background:rgba(79,176,113,.12); }
.st-save-state.is-error{ color:var(--st-red); background:rgba(255,66,77,.12); }

.st-transport{
  display:flex; align-items:center; gap:6px;
  margin:0 auto;
  background:var(--st-panel-2); border:1px solid var(--st-line-soft);
  border-radius:var(--st-r-lg); padding:5px 8px;
}
.st-tbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:30px; border:none; border-radius:var(--st-r-sm);
  background:var(--st-panel-3); color:var(--st-text-2);
  transition:background .14s, color .14s;
}
.st-tbtn:hover:not(:disabled){ background:var(--st-raise); color:var(--st-text); }
.st-tbtn:disabled{ opacity:.35; cursor:not-allowed; }
.st-tbtn.is-on{ background:var(--st-purple); color:#fff; }
.st-tbtn-sm{ width:30px; height:28px; }
.st-tbtn-play{ width:42px; background:var(--st-purple); color:#fff; }
.st-tbtn-play:hover{ background:var(--st-purple-2); color:#fff; }
.st-tbtn-play.is-playing{ background:var(--st-panel-3); color:var(--st-text); }

.st-clock{
  display:flex; flex-direction:column; align-items:center; line-height:1.15;
  font-family:var(--st-mono); padding:0 10px; min-width:98px;
}
.st-clock #stClockTime{ font-size:14px; font-weight:600; letter-spacing:.02em; }
.st-clock-bars{ font-size:10px; color:var(--st-text-3); letter-spacing:.03em; }

.st-bpm{ display:flex; align-items:center; gap:6px; padding-left:6px; }
.st-bpm > span{ font-size:10px; font-weight:700; color:var(--st-text-3); letter-spacing:.05em; }
.st-bpm input{
  width:52px; background:var(--st-panel-3); border:1px solid var(--st-line-soft);
  border-radius:var(--st-r-sm); padding:5px 6px; font-size:12px; font-family:var(--st-mono);
  text-align:center; outline:none;
}
.st-bpm input:focus{ border-color:var(--st-purple); }

.st-top-right{ display:flex; align-items:center; gap:8px; }

.st-presence{ display:flex; align-items:center; }
.st-presence .st-av{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff;
  border:2px solid var(--st-panel); margin-left:-7px;
  background:var(--st-purple); object-fit:cover;
}
.st-presence .st-av:first-child{ margin-left:0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.st-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:32px; padding:0 14px; border-radius:var(--st-r);
  border:1px solid var(--st-line); background:var(--st-panel-3);
  color:var(--st-text); font-size:12.5px; font-weight:600;
  transition:background .14s, border-color .14s, opacity .14s;
  white-space:nowrap;
}
.st-btn:hover:not(:disabled){ background:var(--st-raise); }
.st-btn:disabled{ opacity:.4; cursor:not-allowed; }
.st-btn-sm{ height:28px; padding:0 11px; font-size:12px; }
.st-btn-primary{ background:var(--st-purple); border-color:var(--st-purple); color:#fff; }
.st-btn-primary:hover:not(:disabled){ background:var(--st-purple-2); border-color:var(--st-purple-2); }
.st-btn-ghost{ background:transparent; }
.st-btn-ghost:hover:not(:disabled){ background:var(--st-panel-3); }
.st-btn-danger{ background:transparent; border-color:rgba(255,66,77,.4); color:#ff8a91; }
.st-btn-danger:hover:not(:disabled){ background:rgba(255,66,77,.12); }

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.st-toolbar{
  flex:0 0 auto; height:42px;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--st-panel-2); border-bottom:1px solid var(--st-line);
}
.st-tools{ display:flex; gap:3px; background:var(--st-panel); border-radius:var(--st-r); padding:3px; }
.st-tool{
  width:28px; height:26px; border:none; border-radius:var(--st-r-sm);
  background:transparent; color:var(--st-text-3);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .14s,color .14s;
}
.st-tool:hover{ color:var(--st-text); background:var(--st-panel-3); }
.st-tool.is-on{ background:var(--st-purple); color:#fff; }
.st-sep{ width:1px; height:20px; background:var(--st-line); }
.st-spacer{ flex:1; }

.st-check{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--st-text-2); cursor:pointer; user-select:none; }
.st-check input{ accent-color:var(--st-purple); width:14px; height:14px; cursor:pointer; }
.st-select{
  height:28px; background:var(--st-panel-3); border:1px solid var(--st-line);
  border-radius:var(--st-r-sm); padding:0 8px; font-size:12px; outline:none; cursor:pointer;
}
.st-select:focus{ border-color:var(--st-purple); }

.st-zoom{ display:flex; align-items:center; gap:6px; }
.st-zoom input[type=range]{ width:130px; accent-color:var(--st-purple); cursor:pointer; }

/* ── Arrangement ─────────────────────────────────────────────────────────── */
.st-arrange{
  flex:1; min-height:0; display:flex;
  background:var(--st-bg);
}
.st-heads-col{
  flex:0 0 var(--st-head-w); width:var(--st-head-w);
  display:flex; flex-direction:column;
  background:var(--st-panel); border-right:1px solid var(--st-line);
  min-height:0;
}
.st-heads-top{
  height:30px; flex:0 0 30px; display:flex; align-items:center;
  padding:0 12px; border-bottom:1px solid var(--st-line);
  background:var(--st-panel-2);
}
.st-heads-label{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--st-text-3); }
.st-heads{ flex:1; overflow:hidden; position:relative; }
.st-heads-inner{ position:absolute; inset:0; will-change:transform; }

.st-canvas-col{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
.st-ruler{ display:block; width:100%; height:30px; flex:0 0 30px; background:var(--st-panel-2); border-bottom:1px solid var(--st-line); cursor:pointer; }
.st-canvas-wrap{ flex:1; min-height:0; position:relative; overflow:hidden; }
.st-canvas{ display:block; width:100%; height:100%; }

.st-drop-hint{
  position:absolute; inset:8px; z-index:5;
  border:2px dashed var(--st-purple-2); border-radius:var(--st-r-lg);
  background:rgba(108,59,245,.10);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; color:var(--st-text);
  pointer-events:none;
}
.st-drop-hint[hidden]{ display:none; }

.st-hscroll{ flex:0 0 11px; height:11px; background:var(--st-panel); border-top:1px solid var(--st-line-soft); position:relative; }
.st-hscroll-thumb{ position:absolute; top:2px; height:7px; border-radius:4px; background:var(--st-raise); cursor:grab; min-width:26px; }
.st-hscroll-thumb:hover{ background:#3a3a46; }

/* ── Track headers ───────────────────────────────────────────────────────── */
.st-head{
  position:absolute; left:0; right:0;
  border-bottom:1px solid var(--st-line-soft);
  padding:7px 9px 7px 0;
  display:flex; gap:8px;
  background:var(--st-panel);
  overflow:hidden;
}
.st-head.is-sel{ background:var(--st-panel-2); }
.st-head-color{ flex:0 0 4px; border-radius:0 3px 3px 0; align-self:stretch; margin-right:2px; cursor:pointer; }
.st-head-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.st-head-row1{ display:flex; align-items:center; gap:5px; }
.st-head-idx{ font-size:10px; font-family:var(--st-mono); color:var(--st-text-3); width:14px; flex:0 0 14px; }
.st-head-name{
  flex:1; min-width:0; background:transparent; border:1px solid transparent;
  border-radius:4px; padding:2px 4px; font-size:12.5px; font-weight:600;
  text-overflow:ellipsis;
}
.st-head-name:hover{ background:var(--st-panel-3); }
.st-head-name:focus{ background:var(--st-panel-3); border-color:var(--st-line); outline:none; }
.st-head-row2{ display:flex; align-items:center; gap:4px; }
.st-mini{
  width:22px; height:20px; border:1px solid var(--st-line); border-radius:4px;
  background:var(--st-panel-2); color:var(--st-text-3);
  font-size:10px; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s,color .12s,border-color .12s;
}
.st-mini:hover{ color:var(--st-text); background:var(--st-panel-3); }
.st-mini.on-m{ background:var(--st-orange); border-color:var(--st-orange); color:#1a1000; }
.st-mini.on-s{ background:var(--st-yellow); border-color:var(--st-yellow); color:#191500; }
.st-mini.on-fx{ background:var(--st-purple); border-color:var(--st-purple); color:#fff; }
.st-head-fader{ flex:1; min-width:40px; accent-color:var(--st-purple); height:14px; cursor:pointer; }
.st-head-db{ font-family:var(--st-mono); font-size:9.5px; color:var(--st-text-3); width:38px; text-align:right; flex:0 0 38px; }
.st-head-meter{ flex:0 0 5px; align-self:stretch; border-radius:3px; background:var(--st-panel-3); overflow:hidden; position:relative; }
.st-head-meter i{ position:absolute; left:0; right:0; bottom:0; background:linear-gradient(to top,var(--st-green),var(--st-yellow) 78%,var(--st-red) 96%); height:0; }

.st-heads-empty{ padding:22px 14px; color:var(--st-text-3); font-size:12px; line-height:1.6; text-align:center; }

/* ── Mixer ───────────────────────────────────────────────────────────────── */
.st-resize{ flex:0 0 5px; background:var(--st-panel); cursor:ns-resize; border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); }
.st-resize:hover{ background:var(--st-purple-dim); }
.st-bottom{ flex:0 0 262px; min-height:120px; display:flex; background:var(--st-panel); overflow:hidden; }

.st-mixer{ flex:1; min-width:0; display:flex; gap:1px; overflow-x:auto; overflow-y:hidden; padding:8px 8px 8px 8px; background:var(--st-panel-2); }
.st-strip{
  flex:0 0 78px; width:78px; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--st-panel); border:1px solid var(--st-line-soft); border-radius:var(--st-r);
  padding:8px 6px; position:relative;
}
.st-strip.is-sel{ border-color:var(--st-purple); }
.st-strip.is-master{ flex:0 0 92px; width:92px; background:var(--st-panel-3); }
.st-strip-name{
  width:100%; text-align:center; font-size:11px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:var(--st-text); cursor:pointer;
}
.st-strip-color{ width:100%; height:3px; border-radius:2px; }
.st-strip-pan{ width:100%; accent-color:var(--st-purple); height:12px; cursor:pointer; }
.st-strip-pan-lbl{ font-family:var(--st-mono); font-size:9px; color:var(--st-text-3); margin-top:-3px; }
.st-strip-main{ flex:1; min-height:0; display:flex; gap:5px; align-items:stretch; width:100%; justify-content:center; }
.st-strip-fader{ writing-mode:vertical-lr; direction:rtl; width:22px; accent-color:var(--st-purple); cursor:pointer; }
.st-strip-meter{ width:9px; border-radius:3px; background:#0d0d10; overflow:hidden; position:relative; border:1px solid var(--st-line-soft); }
.st-strip-meter i{ position:absolute; left:0; right:0; bottom:0; height:0; background:linear-gradient(to top,var(--st-green),var(--st-yellow) 76%,var(--st-red) 94%); }
.st-strip-meter b{ position:absolute; left:0; right:0; height:2px; background:var(--st-red); opacity:0; }
.st-strip-db{ font-family:var(--st-mono); font-size:9.5px; color:var(--st-text-2); }
.st-strip-btns{ display:flex; gap:3px; }
.st-strip-lufs{ font-family:var(--st-mono); font-size:9.5px; color:var(--st-text-3); text-align:center; line-height:1.35; }
.st-strip-lufs b{ color:var(--st-text); font-weight:600; }

/* ── Inspector ───────────────────────────────────────────────────────────── */
.st-inspector{
  flex:0 0 352px; width:352px; display:flex; flex-direction:column;
  border-left:1px solid var(--st-line); background:var(--st-panel); min-height:0;
}
.st-insp-tabs{ display:flex; flex:0 0 auto; border-bottom:1px solid var(--st-line); background:var(--st-panel-2); }
.st-insp-tab{
  flex:1; padding:9px 6px; border:none; background:transparent;
  color:var(--st-text-3); font-size:11.5px; font-weight:700;
  border-bottom:2px solid transparent; transition:color .14s,border-color .14s;
}
.st-insp-tab:hover{ color:var(--st-text-2); }
.st-insp-tab.is-on{ color:var(--st-text); border-bottom-color:var(--st-purple); }
.st-insp-body{ flex:1; min-height:0; overflow-y:auto; padding:12px; }

.st-fx{ border:1px solid var(--st-line-soft); border-radius:var(--st-r); margin-bottom:9px; overflow:hidden; background:var(--st-panel-2); }
.st-fx-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--st-panel-3); }
.st-fx-title{ flex:1; font-size:12px; font-weight:700; letter-spacing:.01em; }
.st-fx-power{
  width:26px; height:16px; border-radius:20px; border:none; position:relative;
  background:var(--st-raise); transition:background .16s; flex:0 0 26px;
}
.st-fx-power::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--st-text-3); transition:transform .16s,background .16s; }
.st-fx-power.is-on{ background:var(--st-purple); }
.st-fx-power.is-on::after{ transform:translateX(10px); background:#fff; }
.st-fx-body{ padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.st-fx-body.is-off{ opacity:.42; pointer-events:none; }
.st-fx-body.cols-1{ grid-template-columns:1fr; }

.st-knob{ display:flex; flex-direction:column; gap:3px; }
.st-knob-top{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.st-knob-lbl{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--st-text-3); }
.st-knob-val{ font-family:var(--st-mono); font-size:10.5px; color:var(--st-text-2); }
.st-knob input[type=range]{ width:100%; accent-color:var(--st-purple); height:14px; cursor:pointer; }

/* Typed value entry. The read-out doubles as the field so the panel does not
   grow a second control per parameter. */
.st-knob-edit{ cursor:text; border-bottom:1px dotted transparent; }
.st-knob-edit:hover{ border-bottom-color:var(--st-text-3); }
.st-knob-input{
  width:62px; background:var(--st-panel); border:1px solid var(--st-purple);
  border-radius:4px; padding:1px 4px; font-family:var(--st-mono); font-size:10.5px;
  color:var(--st-text); outline:none; text-align:right;
}

.st-row{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.st-row label{ font-size:11.5px; color:var(--st-text-2); flex:0 0 auto; }
.st-field{
  flex:1; min-width:0; height:28px; background:var(--st-panel-3); border:1px solid var(--st-line);
  border-radius:var(--st-r-sm); padding:0 8px; font-size:12px; outline:none;
}
.st-field:focus{ border-color:var(--st-purple); }
.st-hint{ font-size:11px; color:var(--st-text-3); line-height:1.55; margin:6px 0 10px; }
.st-empty{ padding:26px 12px; text-align:center; color:var(--st-text-3); font-size:12px; line-height:1.6; }

.st-eqview{ width:100%; height:78px; display:block; border-radius:var(--st-r-sm); background:#0d0d10; border:1px solid var(--st-line-soft); grid-column:1/-1; }
.st-grcurve{ width:100%; height:26px; display:block; border-radius:4px; background:#0d0d10; border:1px solid var(--st-line-soft); grid-column:1/-1; }

.st-section-title{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--st-text-3); margin:14px 0 8px; }
.st-section-title:first-child{ margin-top:0; }

.st-preset-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.st-preset{
  padding:5px 10px; border-radius:20px; border:1px solid var(--st-line);
  background:var(--st-panel-2); font-size:11px; font-weight:600; color:var(--st-text-2);
  transition:background .14s,color .14s,border-color .14s;
}
.st-preset:hover{ background:var(--st-panel-3); color:var(--st-text); }
.st-preset.is-on{ background:var(--st-purple); border-color:var(--st-purple); color:#fff; }

/* ── Status bar ──────────────────────────────────────────────────────────── */
.st-statusbar{
  flex:0 0 24px; height:24px; display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--st-panel); border-top:1px solid var(--st-line);
  font-size:11px; color:var(--st-text-3);
}
.st-statusbar #stStatusMeta{ font-family:var(--st-mono); }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.st-modal-host{ position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:22px; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }
.st-modal-host[hidden]{ display:none; }
.st-modal{
  width:100%; max-width:520px; max-height:86vh; overflow-y:auto;
  background:var(--st-panel); border:1px solid var(--st-line); border-radius:var(--st-r-lg);
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.st-modal-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 12px; }
.st-modal-head h2{ flex:1; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.st-modal-x{ width:28px; height:28px; border:none; border-radius:var(--st-r-sm); background:var(--st-panel-3); color:var(--st-text-2); font-size:16px; line-height:1; }
.st-modal-x:hover{ background:var(--st-raise); color:var(--st-text); }
.st-modal-body{ padding:0 18px 4px; }
.st-modal-foot{ display:flex; gap:8px; justify-content:flex-end; padding:14px 18px 18px; }

.st-progress{ height:6px; border-radius:4px; background:var(--st-panel-3); overflow:hidden; margin:10px 0; }
.st-progress i{ display:block; height:100%; background:var(--st-purple); width:0; transition:width .2s; }

.st-link-box{ display:flex; gap:6px; margin:8px 0 4px; }
.st-link-box input{ flex:1; min-width:0; height:34px; background:var(--st-panel-3); border:1px solid var(--st-line); border-radius:var(--st-r-sm); padding:0 10px; font-size:12px; font-family:var(--st-mono); outline:none; }

.st-people{ list-style:none; margin:6px 0 0; }
.st-people li{ display:flex; align-items:center; gap:9px; padding:7px 0; border-top:1px solid var(--st-line-soft); font-size:12.5px; }
.st-people li:first-child{ border-top:none; }
.st-people .st-av{ width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; color:#fff; background:var(--st-purple); flex:0 0 26px; }
.st-people .st-who{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-people .st-role{ font-size:10.5px; color:var(--st-text-3); text-transform:uppercase; letter-spacing:.05em; font-weight:700; }

/* ── Toasts ──────────────────────────────────────────────────────────────── */
.st-toasts{ position:fixed; right:16px; bottom:36px; z-index:180; display:flex; flex-direction:column; gap:8px; max-width:330px; }
.st-toast{
  background:var(--st-panel-3); border:1px solid var(--st-line); color:var(--st-text);
  padding:10px 13px; border-radius:var(--st-r); font-size:12.5px; line-height:1.45;
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;
}
.st-toast.is-in{ opacity:1; transform:translateY(0); }
.st-toast.is-error{ border-color:rgba(255,66,77,.5); background:#2a1113; }
.st-toast.is-ok{ border-color:rgba(79,176,113,.45); }

/* ── Locked (non-Pro) state ──────────────────────────────────────────────── */
.st-lock{ max-width:600px; text-align:left; }
.st-lock h1{ font-size:24px; margin-bottom:10px; letter-spacing:-.02em; }
.st-lock p{ color:var(--st-text-2); font-size:14px; line-height:1.65; margin-bottom:14px; }
.st-lock ul{ list-style:none; margin:0 0 20px; }
.st-lock li{ display:flex; gap:9px; align-items:flex-start; padding:5px 0; font-size:13.5px; color:var(--st-text-2); }
.st-lock li svg{ color:var(--st-purple-2); flex:0 0 16px; margin-top:2px; }
.st-lock-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ── Narrow viewports ──────────────────────────────────────────────────────
   Handled purely in CSS so it stays correct when the window is resized after
   load, not only when the page happened to open narrow. */
.st-toosmall{ display:none; }
.st-toosmall strong{ color:var(--st-text); display:block; font-size:17px; margin-bottom:8px; }
.st-toosmall-actions{ margin-top:18px; }
@media (max-width:900px){
  .st-app, .st-boot, .st-toasts, .st-modal-host{ display:none !important; }
  .st-toosmall{
    display:flex; position:fixed; inset:0; z-index:190; padding:26px;
    align-items:center; justify-content:center; text-align:center;
    background:var(--st-bg); color:var(--st-text-2); font-size:14px; line-height:1.65;
  }
}

/* ── Context menu ────────────────────────────────────────────────────────── */
.st-ctxmenu{
  position:fixed; z-index:170; min-width:172px; padding:5px;
  background:var(--st-panel-3); border:1px solid var(--st-line);
  border-radius:var(--st-r); box-shadow:0 16px 40px rgba(0,0,0,.5);
}
.st-ctx-item{
  display:block; width:100%; text-align:left; border:none; background:transparent;
  color:var(--st-text); font-size:12.5px; padding:7px 10px; border-radius:var(--st-r-sm);
  transition:background .12s;
}
.st-ctx-item:hover{ background:var(--st-raise); }
.st-ctx-item.is-danger{ color:#ff8a91; }
.st-ctx-item.is-danger:hover{ background:rgba(255,66,77,.14); }
.st-ctx-sep{ height:1px; background:var(--st-line); margin:4px 6px; }
/* ═══════════════════════════════════════════════════════════════════════════
   RemoveVocals Studio — PAGE DE VENTE (ecran verrouille, offre Studio absente)
   ───────────────────────────────────────────────────────────────────────────
   OU CE FICHIER DOIT ALLER
   Colle tel quel A LA FIN de /studio-app/studio.css, apres la derniere regle
   existante, puis bump la cle de cache dans la coquille :
       <link rel="stylesheet" href="/studio-app/studio.css?v=5">

   POURQUOI DANS studio.css ET PAS DANS UN FICHIER A PART
   1. Une requete de moins sur une page dont le seul travail est de convaincre.
   2. L'ORDRE est garanti. Une feuille separee peut arriver avant studio.css
      (ordre des <link>, cache, priorite reseau) et alors la media query
      « max-width:900px » de studio.css, qui fait `display:none !important`
      sur tout, gagnerait sur nos regles de deverrouillage.
   3. Les jetons --st-* sont deja la, sur :root. La reproduction de l'interface
      s'en sert : si la palette du studio bouge, la reproduction suit toute
      seule. C'est la seule chose de cette page qui ne vieillit pas.

   REGLE DE SURETE ABSOLUE (relire avant toute retouche)
   AUCUN selecteur ci-dessous ne cible une classe .st-* EN TETE de selecteur.
   L'editeur et cette page vivent dans la MEME feuille et la MEME page : une
   regle `.st-head{...}` ecrite ici s'appliquerait a l'editeur des abonnes.
   Toutes les classes de cette page sont prefixees `rvs-` (RemoveVocals Sell),
   y compris celles de la reproduction — qui NE REUTILISE PAS les classes de
   l'editeur, justement pour que studio.css ne puisse pas la deformer (ex.
   `.st-head{position:absolute}` empilerait les quatre en-tetes de piste au
   meme endroit). Les VALEURS sont recopiees de studio.css, les NOMS non.

   Les trois seules regles qui touchent a des selecteurs existants sont
   groupees dans le bloc « DEVERROUILLAGE » ci-dessous, et chacune est
   conditionnee par `.rvs-on`, une classe posee par le script UNIQUEMENT
   quand la page de vente est affichee. Un abonne ne la voit jamais.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── DEVERROUILLAGE : rendre la page defilante et visible ──────────────────
   Trois blocages de studio.css empechent une page longue d'exister ici, et
   les trois sont VOULUS pour l'editeur (un DAW plein ecran ne defile pas) :

   1. `body.st-body{ overflow:hidden }` + `html,body{height:100%}`
      La regle de propagation veut que, l'element racine etant `visible`,
      c'est l'overflow du BODY qui devient celui de la fenetre. Une page de
      5 000 px etait donc coupee au premier ecran, a TOUTES les largeurs.
   2. `.st-boot{ position:fixed; inset:0 }`
      La carte de demarrage est une surcouche fixe et centree : y poser une
      page longue la centre verticalement et coupe les deux bouts. La page de
      vente n'est donc PAS rendue dans .st-boot ; elle est un frere de
      #stBoot, et le script masque #stBoot.
   3. `@media (max-width:900px){ .st-app,.st-boot,... { display:none !important } }`
      Sous 900 px l'editeur s'efface au profit de « Studio needs a wider
      screen ». Correct pour l'editeur, absurde pour une page de vente : le
      visiteur qui arrive de son telephone est justement celui a qui il faut
      parler. On neutralise l'avis SEULEMENT quand la vente est a l'ecran.

   Les classes sont posees sur <html> ET sur <body> : `html.rvs-on` evite un
   `:has()` (absent des navigateurs d'avant 2023) pour la meme chose. */
html.rvs-on{ height:auto; }
body.st-body.rvs-on{
  height:auto; min-height:100%;
  overflow:visible;                 /* rend le defilement a la fenetre */
  overscroll-behavior:auto;
}
/* `!important` assume : la regle d'en face en a un, dans une media query. */
body.rvs-on .st-toosmall{ display:none !important; }

/* ═══ La page ══════════════════════════════════════════════════════════════ */
.rvs-sell{
  /* Jetons PROPRES a la page. Les couleurs de texte sont choisies pour leur
     contraste MESURE sur --st-bg (#0a0a0c) :
       --st-text   #e9e9ee  16,35:1   titres
       --st-text-2 #a2a2ae   7,83:1   corps
       --rvs-accent #a78bfa  7,27:1   sur-titres, numeros d'etape
     --st-purple-2 (#8b5cf6) vaut 4,67:1 sur le fond mais SEULEMENT 4,41:1
     sur --st-panel : il n'est jamais utilise comme texte sur un panneau. */
  --rvs-accent:  #a78bfa;
  --rvs-hair:    #22222b;
  --rvs-card:    #101014;
  /* 1220 (largeur native de la reproduction) + 32 de remplissage + 2 de
     bordures : au-dela de cette largeur de fenetre, la reproduction est a
     l'echelle 1 exactement, jamais a 0,97. */
  --rvs-maxw:    1254px;

  position:relative; z-index:1;
  background:
    radial-gradient(ellipse 1100px 620px at 50% -8%, rgba(108,59,245,.17) 0%, transparent 70%),
    var(--st-bg);
  color:var(--st-text);
  font-size:16px; line-height:1.6;
  padding-bottom:0;
}
.rvs-wrap{ max-width:var(--rvs-maxw); margin:0 auto; padding:0 16px; }

/* ── Barre du haut ────────────────────────────────────────────────────────
   Volontairement mince : elle situe la page, elle ne rivalise pas avec la
   reproduction qui arrive juste dessous. */
.rvs-nav{
  display:flex; align-items:center; gap:12px;
  max-width:var(--rvs-maxw); margin:0 auto; padding:10px 16px;
}
.rvs-nav-brand{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--st-text); text-decoration:none;
  font-weight:700; font-size:14.5px; letter-spacing:-.01em;
  min-height:44px;                       /* cible tactile */
}
.rvs-nav-brand svg{ color:var(--rvs-accent); }
.rvs-nav-sp{ flex:1; }
.rvs-nav-link{
  display:inline-flex; align-items:center;
  color:var(--st-text-2); text-decoration:none; font-size:13.5px; font-weight:600;
  padding:0 10px; min-height:44px; border-radius:8px;
}
.rvs-nav-link:hover{ color:var(--st-text); background:var(--st-panel-2); }

/* ── Heros ────────────────────────────────────────────────────────────────
   Ordre voulu : sur-titre + titre COMPACTS, puis la reproduction EN GRAND,
   puis le reste du texte. Un visiteur a qui on vient de refuser l'ouverture
   du studio doit voir le studio, pas un paragraphe. */
.rvs-hero{ padding:14px 0 0; text-align:center; }
.rvs-eyebrow{
  font-size:12px; font-weight:800; letter-spacing:.10em; text-transform:uppercase;
  color:var(--rvs-accent); margin-bottom:10px;
}
.rvs-h1{
  font-size:clamp(30px, 5.2vw, 50px); line-height:1.06; font-weight:800;
  letter-spacing:-.028em; margin:0 auto 14px; max-width:16ch;
}
.rvs-h1 em{ font-style:normal; color:var(--rvs-accent); }
.rvs-sub{
  font-size:clamp(15px, 1.7vw, 18px); color:var(--st-text-2);
  max-width:60ch; margin:0 auto 22px;
}

/* ── Scene : le cadre qui porte la reproduction ───────────────────────────
   La reproduction est dessinee a sa TAILLE NATIVE (1220 x 752) puis reduite
   par `transform:scale`. `zoom` aurait evite le calcul de hauteur mais n'est
   arrive dans Firefox qu'en 126 (2024) ; `transform` marche partout.
   Comme transform ne change pas la mise en page, la hauteur du cadre est
   calculee a la main. --rvs-sc est ecrit par le script ; la valeur ci-dessous
   est le repli SANS JavaScript (une largeur de bureau courante). */
.rvs-stage{
  --rvs-sc:.86;
  position:relative;
  width:100%; height:calc(752px * var(--rvs-sc));
  margin:0 auto;
  border:1px solid var(--st-line);
  border-radius:14px;
  overflow:hidden;
  background:var(--st-bg);
  box-shadow:0 30px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(139,92,246,.10) inset;
}
.rvs-stage-inner{
  width:1220px; height:752px;
  transform:scale(var(--rvs-sc));
  transform-origin:top left;
}
/* Sous ~788 px de fenetre, reduire davantage rendrait les chiffres de 9,5 px
   illisibles (0,62 x 9,5 = 5,9 px). On passe donc a l'ECHELLE 1 : la
   reproduction garde sa taille reelle, le cadre defile lateralement — ce
   qu'une timeline fait de toute facon — et la hauteur est coupee juste apres
   la barre de defilement horizontale de l'editeur (52+42+30+368+11 = 503 px),
   une frontiere REELLE de l'interface, pas une coupe au hasard. La console et
   l'inspecteur reviennent plus bas, entiers et a 100 %. */
.rvs-stage.is-native{ --rvs-sc:1; height:503px; overflow-x:auto; overflow-y:hidden; }
.rvs-stage.is-native .rvs-stage-inner{ transform:none; }
@media (max-width:787px){
  .rvs-stage{ --rvs-sc:1; height:503px; overflow-x:auto; overflow-y:hidden; }
  .rvs-stage .rvs-stage-inner{ transform:none; }
}
.rvs-shot-cap{
  font-size:12.5px; color:var(--st-text-2); margin:10px auto 0; max-width:68ch;
  text-align:center;
}
.rvs-shot-cap b{ color:var(--st-text); font-weight:600; }
.rvs-swipe{ display:none; margin-top:6px; color:var(--st-text-2); }
@media (max-width:787px){ .rvs-swipe{ display:block; } }

/* ── Boutons ──────────────────────────────────────────────────────────────
   Le blanc sur --st-purple mesure 5,86:1. Le survol de .st-btn-primary passe
   a --st-purple-2, ou le meme blanc tombe a 4,23:1 : sous AA. Nos boutons ne
   changent donc PAS de fond au survol, ils se soulevent. */
.rvs-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 26px; border-radius:10px;
  border:1px solid transparent; background:var(--st-panel-3); color:var(--st-text);
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:transform .14s, box-shadow .14s, background .14s, border-color .14s;
}
.rvs-btn-primary{
  background:var(--st-purple); border-color:var(--st-purple); color:#fff;
  box-shadow:0 8px 24px rgba(108,59,245,.34);
}
.rvs-btn-primary:hover{ transform:translateY(-1px); box-shadow:0 12px 32px rgba(108,59,245,.46); }
.rvs-btn-primary:active{ transform:translateY(0); }
.rvs-btn-ghost{ background:transparent; border-color:var(--st-line); color:var(--st-text); }
.rvs-btn-ghost:hover{ background:var(--st-panel-2); border-color:var(--st-raise); }
.rvs-btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.rvs-cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:0 0 12px; }
.rvs-cta-note{ font-size:13.5px; color:var(--st-text-2); margin:0 0 26px; min-height:21px; }
.rvs-cta-note b{ color:var(--st-text); font-weight:700; }

/* ── Sections ─────────────────────────────────────────────────────────────*/
.rvs-sec{ padding:64px 0 0; }
.rvs-sec-head{ max-width:64ch; margin:0 auto 34px; text-align:center; }
.rvs-h2{
  font-size:clamp(23px, 3vw, 33px); line-height:1.15; font-weight:800;
  letter-spacing:-.022em; margin-bottom:10px;
}
.rvs-sec-head p{ color:var(--st-text-2); font-size:16px; }

/* ── Une etape : texte d'un cote, fragment d'interface de l'autre ──────────
   Les fragments sont a 100 % de leur taille reelle. Aucun n'est l'ecran
   entier : chacun ne montre que le panneau dont parle l'etape. */
/* ⚠️ DEBORDEMENT HORIZONTAL, TROUVE AU BANC A 375 px : une colonne de grille
   vaut `auto` par defaut, et un element de grille a `min-width:auto`. Le
   fragment de 600 px imposait donc sa largeur a la colonne, la colonne a la
   grille, et la grille a la page entiere — 618 px de large sur un telephone
   de 375, tout le texte deborde, y compris le titre. Le `overflow-x:auto` du
   cadre ne servait a rien : il ne se declenche que si la boite est CONTRAINTE.
   `minmax(0,1fr)` est cette contrainte. */
.rvs-step{
  display:grid; grid-template-columns:minmax(0,1fr);
  gap:26px 40px; align-items:center; margin-bottom:56px;
}
.rvs-step-txt, .rvs-step-fig{ min-width:0; }
.rvs-step-txt .rvs-n{
  display:block; font-family:var(--st-mono); font-size:12.5px; font-weight:700;
  letter-spacing:.14em; color:var(--rvs-accent); margin-bottom:10px;
}
.rvs-step-txt h3{ font-size:clamp(20px,2.4vw,26px); line-height:1.2; font-weight:800; letter-spacing:-.02em; margin-bottom:10px; }
.rvs-step-txt p{ color:var(--st-text-2); font-size:15.5px; margin-bottom:12px; }
.rvs-step-txt p:last-child{ margin-bottom:0; }
.rvs-step-txt strong{ color:var(--st-text); font-weight:650; }

/* Le fragment lui-meme : une fenetre a bord franc, jamais un flou.
   `overflow:auto` sur X parce qu'un panneau de 598 px ne rentre pas dans un
   telephone et qu'un panneau ECRASE serait un mensonge sur ses proportions. */
.rvs-frag{
  border:1px solid var(--st-line); border-radius:12px;
  background:var(--st-panel); overflow-x:auto; overflow-y:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.45);
}
.rvs-frag-in{ display:inline-block; vertical-align:top; }
.rvs-frag-cap{ font-size:12.5px; color:var(--st-text-2); margin-top:9px; }

@media (min-width:900px){
  /* La colonne LARGE est toujours celle du fragment, jamais celle du texte.
     ⚠️ Vu au banc : sans la seconde regle, une etape inversee mettait son
     panneau de 600 px dans la colonne etroite et le rognait — le fondu de
     sortie du clip, qui est justement ce que la legende decrit, tombait hors
     du cadre. Inverser l'ORDRE sans inverser les LARGEURS ne suffit pas. */
  .rvs-step{ grid-template-columns:minmax(0,1fr) minmax(0,1.16fr); }
  .rvs-step-b{ grid-template-columns:minmax(0,1.16fr) minmax(0,1fr); }
  .rvs-step-b .rvs-step-txt{ order:2; }
  .rvs-step-b .rvs-step-fig{ order:1; }
}

/* ── Grille de faits ──────────────────────────────────────────────────────*/
.rvs-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); }
.rvs-card{
  background:var(--rvs-card); border:1px solid var(--rvs-hair);
  border-radius:12px; padding:18px 18px 19px;
}
.rvs-card h4{ font-size:15px; font-weight:750; margin-bottom:6px; letter-spacing:-.01em; }
.rvs-card p{ font-size:14px; color:var(--st-text-2); }
.rvs-card code{
  font-family:var(--st-mono); font-size:12.5px; color:var(--rvs-accent);
  background:rgba(139,92,246,.10); padding:1px 5px; border-radius:4px;
}

/* ── Le bloc honnete ──────────────────────────────────────────────────────
   Il arrive AVANT le dernier bouton, jamais apres : ce qui limite le produit
   se dit du cote ou la personne peut encore changer d'avis. */
.rvs-honest{
  border:1px solid var(--rvs-hair); border-radius:14px;
  background:var(--st-panel); padding:26px 24px;
  max-width:820px; margin:0 auto;
}
.rvs-honest h3{ font-size:18px; font-weight:750; margin-bottom:14px; letter-spacing:-.01em; }
.rvs-honest ul{ list-style:none; margin:0; }
.rvs-honest li{
  display:flex; gap:11px; align-items:flex-start;
  padding:8px 0; font-size:14.5px; color:var(--st-text-2);
  border-top:1px solid var(--st-line-soft);
}
.rvs-honest li:first-child{ border-top:none; }
.rvs-honest li b{ color:var(--st-text); font-weight:650; }
.rvs-honest li svg{ flex:0 0 16px; margin-top:4px; color:var(--st-text-3); }

/* ── Cloture ──────────────────────────────────────────────────────────────*/
.rvs-final{ text-align:center; padding:70px 0 26px; }
.rvs-final .rvs-h2{ margin-bottom:12px; }
.rvs-final p{ color:var(--st-text-2); max-width:52ch; margin:0 auto 24px; }
.rvs-foot{
  border-top:1px solid var(--st-line-soft); margin-top:30px;
  padding:20px 0 40px; text-align:center;
  font-size:12.5px; color:var(--st-text-2);
}
.rvs-foot a{ color:var(--st-text-2); min-height:44px; display:inline-flex; align-items:center; padding:0 10px; }

/* ═══ Modale d'abonnement ══════════════════════════════════════════════════
   z-index 300 : au-dessus de .st-boot (200) et de .st-toosmall (190), mais
   TRES en dessous de la caisse rv-checkout (99990), qui doit pouvoir se
   poser par-dessus sans que l'on s'en occupe. */
.rvs-modal-host{
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:rgba(6,6,10,.78);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
}
.rvs-modal-host[hidden]{ display:none; }
.rvs-modal{
  position:relative; width:100%; max-width:430px; max-height:92vh; overflow-y:auto;
  background:var(--st-panel); border:1px solid var(--st-line); border-radius:16px;
  box-shadow:0 28px 90px rgba(0,0,0,.66);
  padding:24px 22px 22px;
}
.rvs-modal h2{ font-size:20px; font-weight:800; letter-spacing:-.02em; margin-bottom:7px; padding-right:40px; }
.rvs-modal-sub{ font-size:14px; color:var(--st-text-2); margin-bottom:18px; }
.rvs-modal-x{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px; border:none; border-radius:10px;
  background:transparent; color:var(--st-text-2);
  display:inline-flex; align-items:center; justify-content:center;
}
.rvs-modal-x:hover{ background:var(--st-panel-3); color:var(--st-text); }

/* Le choix de periodicite. <label> + <input type=radio> visuellement masque
   mais PRESENT : le groupe reste un vrai groupe de boutons radio pour le
   clavier et pour un lecteur d'ecran, avec fleches et annonce d'etat. */
.rvs-opts{ display:flex; flex-direction:column; gap:9px; margin-bottom:16px; }
.rvs-opt{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:64px; padding:12px 14px;
  border:1px solid var(--st-line); border-radius:11px;
  background:var(--st-panel-2); cursor:pointer;
  transition:border-color .14s, background .14s;
}
.rvs-opt:hover{ background:var(--st-panel-3); }
.rvs-opt input{
  position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none;
}
.rvs-opt-dot{
  flex:0 0 18px; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--st-raise); position:relative;
}
.rvs-opt-main{ flex:1; min-width:0; }
/* ⚠️ `display:block` explicite : ce sont des <span>, donc en ligne par defaut.
   Sans cette ligne, « Yearly » et le prix se collaient sur la meme ligne, sans
   espace — « Yearly₹866 a month ». Vu au banc avec la bande indienne. */
.rvs-opt-t{ display:block; font-size:14.5px; font-weight:700; }
.rvs-opt-p{ display:block; font-size:13px; color:var(--st-text-2); margin-top:2px; }
.rvs-opt-p:empty{ display:none; }         /* sans geo : pas de ligne vide */
.rvs-opt.is-on{ border-color:var(--st-purple); background:var(--st-purple-dim); }
.rvs-opt.is-on .rvs-opt-dot{ border-color:var(--st-purple-2); }
.rvs-opt.is-on .rvs-opt-dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:var(--st-purple-2);
}
.rvs-opt input:focus-visible + .rvs-opt-dot{ outline:2px solid var(--st-purple-2); outline-offset:3px; }
.rvs-modal .rvs-btn{ width:100%; }
.rvs-modal-note{ font-size:12.5px; color:var(--st-text-2); margin-top:13px; line-height:1.55; }
.rvs-modal-note + .rvs-modal-note{ margin-top:8px; }
.rvs-modal-warn{
  font-size:13.5px; color:var(--st-text-2); background:var(--st-panel-2);
  border:1px solid var(--st-line); border-radius:10px; padding:12px 13px; margin-bottom:14px;
}

/* ── Mouvement ────────────────────────────────────────────────────────────
   Une seule animation d'apparition sur la scene, et les animations de la
   reproduction (definies plus bas). Coupees en bloc quand le systeme demande
   moins de mouvement — et remplacees, dans la reproduction, par une image
   FIXE COHERENTE, jamais par un ecran a zero. */
@keyframes rvs-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.rvs-hero .rvs-stage{ animation:rvs-in .7s cubic-bezier(.2,.7,.3,1) both; }

@media (prefers-reduced-motion:reduce){
  .rvs-sell *,
  .rvs-sell *::before,
  .rvs-sell *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA REPRODUCTION DE L'INTERFACE
   ───────────────────────────────────────────────────────────────────────────
   Ce n'est pas une image : c'est du HTML, mis en forme avec les VALEURS
   recopiees de studio.css (chaque bloc porte le nom de la regle d'origine).
   Consequences voulues : net a tout niveau de zoom, quelques kilo-octets, et
   les couleurs viennent des jetons --st-*, donc un changement de palette du
   studio se propage tout seul. Un changement de STRUCTURE, lui, ne se propage
   pas : c'est le prix, et il est note dans le README.

   Les noms sont en `rvs-` et JAMAIS en `st-` : studio.css est charge sur
   cette page, et `.st-head{position:absolute}` empilerait les quatre
   en-tetes de piste au meme endroit si on reutilisait ses classes.

   Tout le bloc est `aria-hidden` cote balisage et ne contient AUCUN element
   focalisable (que des <span> et des <div>) : au clavier et au lecteur
   d'ecran, la reproduction n'existe pas — une description en texte la
   remplace. C'est aussi pourquoi --st-text-3 (3,94:1) est tolere ici : il
   vient du studio, il n'y est jamais porteur d'information, et il n'est
   jamais utilise dans le TEXTE de la page.
   ═══════════════════════════════════════════════════════════════════════════ */
.rvs-shot{
  width:1220px; height:752px;
  display:flex; flex-direction:column;
  background:var(--st-bg); color:var(--st-text);
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:13px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
  user-select:none; cursor:default;
}
.rvs-shot *{ min-width:0; }

/* ── .st-top ──────────────────────────────────────────────────────────── */
.rvs-top{
  flex:0 0 52px; height:52px; display:flex; align-items:center; gap:14px;
  padding:0 12px; background:var(--st-panel); border-bottom:1px solid var(--st-line);
}
.rvs-brand{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:14px; letter-spacing:-.01em; padding:6px 10px 6px 6px; }
.rvs-brand svg{ color:var(--st-purple-2); }
.rvs-proj{ display:flex; align-items:center; gap:8px; }
.rvs-proj-name{
  border:1px solid transparent; border-radius:6px; padding:5px 8px;
  font-size:13px; font-weight:600; width:190px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rvs-chev{
  width:30px; height:28px; border-radius:6px; background:var(--st-panel-3); color:var(--st-text-2);
  display:inline-flex; align-items:center; justify-content:center;
}
/* .st-save-state.is-saved */
.rvs-save{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 7px; border-radius:20px; white-space:nowrap;
  color:var(--st-green); background:rgba(79,176,113,.12);
}
/* .st-transport */
.rvs-transport{
  display:flex; align-items:center; gap:6px; margin:0 auto;
  background:var(--st-panel-2); border:1px solid var(--st-line-soft);
  border-radius:12px; padding:5px 8px;
}
.rvs-tbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:30px; border-radius:6px;
  background:var(--st-panel-3); color:var(--st-text-2);
}
.rvs-tbtn-sm{ width:30px; height:28px; }
/* .st-tbtn-play.is-playing : fond neutre pendant la lecture, pas violet */
.rvs-tbtn-play{ width:42px; background:var(--st-panel-3); color:var(--st-text); }
.rvs-tbtn-on{ background:var(--st-purple); color:#fff; }
/* .st-clock */
.rvs-clock{
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--st-mono); padding:0 8px;
}
.rvs-roll{ height:1.35em; overflow:hidden; }
.rvs-roll span{ display:block; height:1.35em; line-height:1.35em; white-space:nowrap; }
.rvs-clock-t{ font-size:13px; font-weight:600; }
.rvs-clock-b{ font-size:9.5px; color:var(--st-text-3); }
.rvs-bpm{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--st-text-2); }
.rvs-bpm i{ font-style:normal; font-size:10px; font-weight:700; letter-spacing:.05em; }
.rvs-bpm b{
  font-family:var(--st-mono); font-weight:600; font-size:12px; color:var(--st-text);
  background:var(--st-panel-3); border:1px solid var(--st-line);
  border-radius:6px; padding:3px 8px;
}
.rvs-top-right{ display:flex; align-items:center; gap:8px; }
/* .st-presence .st-av */
.rvs-av{
  width:26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:700; color:#fff;
  border:2px solid var(--st-panel); margin-left:-7px; background:var(--st-purple);
}
.rvs-av:first-child{ margin-left:0; }
/* .st-btn */
.rvs-sbtn{
  display:inline-flex; align-items:center; height:32px; padding:0 14px;
  border-radius:8px; border:1px solid var(--st-line); background:var(--st-panel-3);
  color:var(--st-text); font-size:12.5px; font-weight:600; white-space:nowrap;
}
.rvs-sbtn-ghost{ background:transparent; }
.rvs-sbtn-primary{ background:var(--st-purple); border-color:var(--st-purple); color:#fff; }
.rvs-sbtn-sm{ height:28px; padding:0 11px; font-size:12px; }

/* ── .st-toolbar ──────────────────────────────────────────────────────── */
.rvs-toolbar{
  flex:0 0 42px; height:42px; display:flex; align-items:center; gap:8px;
  padding:0 12px; background:var(--st-panel-2); border-bottom:1px solid var(--st-line);
}
.rvs-tools{ display:flex; gap:3px; background:var(--st-panel); border-radius:8px; padding:3px; }
.rvs-tool{
  width:28px; height:26px; border-radius:6px; background:transparent; color:var(--st-text-3);
  display:inline-flex; align-items:center; justify-content:center;
}
.rvs-tool.is-on{ background:var(--st-purple); color:#fff; }
.rvs-vsep{ width:1px; height:20px; background:var(--st-line); }
.rvs-sp{ flex:1; }
.rvs-check{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--st-text-2); }
.rvs-box{
  width:14px; height:14px; border-radius:3px; background:var(--st-purple);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
}
.rvs-select{
  height:28px; display:inline-flex; align-items:center; gap:14px;
  background:var(--st-panel-3); border:1px solid var(--st-line);
  border-radius:6px; padding:0 8px; font-size:12px; color:var(--st-text);
}
.rvs-select svg{ color:var(--st-text-3); }
.rvs-zoom{ display:flex; align-items:center; gap:6px; }
.rvs-range{ width:130px; height:14px; display:flex; align-items:center; position:relative; }
.rvs-range::before{ content:''; position:absolute; left:0; right:0; height:4px; border-radius:3px; background:var(--st-raise); }
.rvs-range i{ position:absolute; left:0; height:4px; border-radius:3px; background:var(--st-purple); }
.rvs-range b{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--st-purple); }

/* ── .st-arrange ──────────────────────────────────────────────────────── */
.rvs-arrange{ flex:1; min-height:0; display:flex; background:var(--st-bg); }
.rvs-heads-col{
  flex:0 0 218px; width:218px; display:flex; flex-direction:column;
  background:var(--st-panel); border-right:1px solid var(--st-line);
}
.rvs-heads-top{
  height:30px; flex:0 0 30px; display:flex; align-items:center; padding:0 12px;
  border-bottom:1px solid var(--st-line); background:var(--st-panel-2);
}
.rvs-heads-lbl{ font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--st-text-3); }
/* .st-head — position:static ici, la pile est un flux normal */
.rvs-head{
  height:92px; flex:0 0 92px;
  border-bottom:1px solid var(--st-line-soft);
  padding:7px 9px 7px 0; display:flex; gap:8px;
  background:var(--st-panel); overflow:hidden;
}
.rvs-head.is-sel{ background:var(--st-panel-2); }
.rvs-head-color{ flex:0 0 4px; border-radius:0 3px 3px 0; align-self:stretch; margin-right:2px; }
.rvs-head-body{ flex:1; display:flex; flex-direction:column; gap:5px; }
.rvs-head-r1{ display:flex; align-items:center; gap:5px; }
.rvs-head-idx{ font-size:10px; font-family:var(--st-mono); color:var(--st-text-3); flex:0 0 14px; }
.rvs-head-name{
  flex:1; border:1px solid transparent; border-radius:4px; padding:2px 4px;
  font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rvs-head-r2{ display:flex; align-items:center; gap:4px; }
/* .st-mini */
.rvs-mini{
  width:22px; height:20px; border:1px solid var(--st-line); border-radius:4px;
  background:var(--st-panel-2); color:var(--st-text-3);
  font-size:10px; font-weight:800; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
}
.rvs-mini.on-m{ background:var(--st-orange); border-color:var(--st-orange); color:#1a1000; }
.rvs-mini.on-s{ background:var(--st-yellow); border-color:var(--st-yellow); color:#191500; }
.rvs-mini.on-fx{ background:var(--st-purple); border-color:var(--st-purple); color:#fff; }
.rvs-head-fader{ flex:1; min-width:40px; height:14px; position:relative; display:flex; align-items:center; }
.rvs-head-fader::before{ content:''; position:absolute; left:0; right:0; height:4px; border-radius:3px; background:var(--st-raise); }
.rvs-head-fader i{ position:absolute; left:0; height:4px; border-radius:3px; background:var(--st-purple); }
.rvs-head-fader b{ position:absolute; width:12px; height:12px; border-radius:50%; background:var(--st-purple); }
.rvs-head-db{ font-family:var(--st-mono); font-size:9.5px; color:var(--st-text-3); flex:0 0 38px; text-align:right; }
/* .st-head-meter */
.rvs-head-meter{
  flex:0 0 5px; align-self:stretch; border-radius:3px;
  background:var(--st-panel-3); overflow:hidden; position:relative;
}
.rvs-head-meter i{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background:linear-gradient(to top,var(--st-green),var(--st-yellow) 78%,var(--st-red) 96%);
  transform-origin:bottom;
}

/* ── Piste temporelle (le canvas, redessine en HTML) ──────────────────── */
.rvs-canvas-col{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; }
/* .st-ruler : fond #17171d, graduations #3a3a46 / #242430, chiffres #8a8a98 / #5a5a68 */
.rvs-ruler{
  height:30px; flex:0 0 30px; position:relative; overflow:hidden;
  background:#17171d; border-bottom:1px solid var(--st-line);
}
.rvs-ruler i{ position:absolute; top:8px; bottom:0; width:1px; background:#3a3a46; }
.rvs-ruler span{
  position:absolute; font-family:var(--st-mono); font-size:10px; font-weight:600;
  line-height:1; white-space:nowrap;
}
/* ⚠️ COLLISION DE NOMS, TROUVEE AU BANC : ces deux libelles s'appelaient
   d'abord .rvs-bar et .rvs-sec. Or .rvs-sec est le nom des SECTIONS de la
   page, avec `padding:64px 0 0` : chaque libelle de secondes de la regle
   heritait de 64 px de remplissage et la regle se disloquait. Les noms
   internes a la reproduction portent donc un second prefixe (r comme ruler).
   Le prefixe `rvs-` protege de studio.css ; il ne protege de rien a
   l'interieur de la page elle-meme. */
.rvs-ruler .rvs-rbar{ top:4px; color:#8a8a98; }
.rvs-ruler .rvs-rsec{ top:16px; color:#5a5a68; }
.rvs-lane-wrap{ flex:1; min-height:0; position:relative; overflow:hidden; background:#0a0a0c; }
/* lanes alternees : #0d0d10 / #0a0a0c, separateur #1a1a21 */
.rvs-lane{ height:92px; position:relative; border-bottom:1px solid #1a1a21; }
.rvs-lane:nth-child(odd){ background:#0d0d10; }
.rvs-lane.is-sel{ background:#0d0d10; box-shadow:inset 0 0 0 999px rgba(108,59,245,.045); }
/* grille : barres #26262f, temps #18181e */
.rvs-grid-lines{ position:absolute; inset:0; pointer-events:none; }
.rvs-grid-lines i{ position:absolute; top:0; bottom:0; width:1px; background:#18181e; }
.rvs-grid-lines i.rvs-onbar{ background:#26262f; }
/* .st-clip : degrade vertical .26 -> .13, entete .72, contour .62, rayon 4 */
.rvs-clip{
  position:absolute; top:3px; bottom:4px;
  border-radius:4px; overflow:hidden;
  background:linear-gradient(to bottom, rgb(var(--c) / .26), rgb(var(--c) / .13));
  box-shadow:0 0 0 1px rgb(var(--c) / .62) inset;
}
.rvs-clip-h{
  position:absolute; top:0; left:0; right:0; height:13px;
  background:rgb(var(--c) / .72);
  font-size:10px; font-weight:600; color:rgba(255,255,255,.96);
  line-height:13px; padding:0 4px; white-space:nowrap; overflow:hidden;
}
.rvs-clip-w{ position:absolute; left:0; right:0; top:13px; bottom:2px; }
.rvs-clip-w svg{ display:block; width:100%; height:100%; fill:rgba(255,255,255,.55); }
/* .st-hscroll */
.rvs-hscroll{ flex:0 0 11px; height:11px; background:var(--st-panel); border-top:1px solid var(--st-line-soft); position:relative; }
.rvs-hscroll i{ position:absolute; top:2px; height:7px; border-radius:4px; background:var(--st-raise); }
/* tete de lecture : trait blanc de 1 px, du haut de la regle au bas des pistes */
.rvs-play{
  position:absolute; top:0; bottom:11px; left:0; width:1px;
  background:#fff; z-index:6; pointer-events:none;
}
.rvs-play::before{
  content:''; position:absolute; top:0; left:-5px;
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:9px solid #fff;
}

/* ── .st-bottom : console + inspecteur ────────────────────────────────── */
.rvs-resize{ flex:0 0 5px; background:var(--st-panel); border-top:1px solid var(--st-line); border-bottom:1px solid var(--st-line); }
.rvs-bottom{ flex:0 0 220px; display:flex; background:var(--st-panel); overflow:hidden; }
.rvs-mixer{ flex:1; min-width:0; display:flex; gap:1px; padding:8px; background:var(--st-panel-2); overflow:hidden; }
/* .st-strip */
.rvs-strip{
  flex:0 0 78px; width:78px; display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--st-panel); border:1px solid var(--st-line-soft); border-radius:8px;
  padding:8px 6px; position:relative;
}
.rvs-strip.is-sel{ border-color:var(--st-purple); }
.rvs-strip.is-master{ flex:0 0 92px; width:92px; background:var(--st-panel-3); }
.rvs-strip-name{ width:100%; text-align:center; font-size:11px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rvs-strip-color{ width:100%; height:3px; border-radius:2px; }
.rvs-strip-pan{ width:100%; height:12px; position:relative; display:flex; align-items:center; }
.rvs-strip-pan::before{ content:''; position:absolute; left:0; right:0; height:4px; border-radius:3px; background:var(--st-raise); }
.rvs-strip-pan b{ position:absolute; width:10px; height:10px; border-radius:50%; background:var(--st-purple); }
.rvs-strip-pan-lbl{ font-family:var(--st-mono); font-size:9px; color:var(--st-text-3); margin-top:-3px; }
.rvs-strip-main{ flex:1; min-height:0; display:flex; gap:5px; align-items:stretch; justify-content:center; width:100%; }
.rvs-strip-fader{ width:22px; position:relative; display:flex; justify-content:center; }
.rvs-strip-fader::before{ content:''; position:absolute; top:0; bottom:0; width:4px; border-radius:3px; background:var(--st-raise); }
.rvs-strip-fader b{ position:absolute; width:14px; height:12px; border-radius:3px; background:var(--st-purple); }
/* .st-strip-meter */
.rvs-strip-meter{
  width:9px; border-radius:3px; background:#0d0d10; overflow:hidden;
  position:relative; border:1px solid var(--st-line-soft);
}
.rvs-strip-meter i{
  position:absolute; left:0; right:0; bottom:0; height:100%;
  background:linear-gradient(to top,var(--st-green),var(--st-yellow) 76%,var(--st-red) 94%);
  transform-origin:bottom;
}
.rvs-strip-db{ font-family:var(--st-mono); font-size:9.5px; color:var(--st-text-2); }
.rvs-strip-btns{ display:flex; gap:3px; }
.rvs-strip-lufs{ font-family:var(--st-mono); font-size:9.5px; color:var(--st-text-3); text-align:center; line-height:1.35; }
.rvs-strip-lufs b{ color:var(--st-text); font-weight:600; }
/* Dans l'application la valeur est dans un <b> : blanche et en 600, sous un
   libelle gris. Notre rouleau est fait de <span>, il faut donc le redire. */
.rvs-strip-lufs .rvs-roll span{ color:var(--st-text); font-weight:600; }

/* ── .st-inspector ────────────────────────────────────────────────────── */
.rvs-insp{
  flex:0 0 352px; width:352px; display:flex; flex-direction:column;
  border-left:1px solid var(--st-line); background:var(--st-panel);
}
.rvs-insp-tabs{ display:flex; flex:0 0 auto; border-bottom:1px solid var(--st-line); background:var(--st-panel-2); }
.rvs-insp-tab{
  flex:1; padding:9px 6px; text-align:center;
  color:var(--st-text-3); font-size:11.5px; font-weight:700;
  border-bottom:2px solid transparent;
}
.rvs-insp-tab.is-on{ color:var(--st-text); border-bottom-color:var(--st-purple); }
.rvs-insp-body{ flex:1; min-height:0; overflow:hidden; padding:12px; }
.rvs-sect{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--st-text-3); margin:14px 0 8px; }
.rvs-sect:first-child{ margin-top:0; }
/* .st-preset */
.rvs-presets{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.rvs-preset{
  padding:5px 10px; border-radius:20px; border:1px solid var(--st-line);
  background:var(--st-panel-2); font-size:11px; font-weight:600; color:var(--st-text-2);
}
.rvs-preset.is-on{ background:var(--st-purple); border-color:var(--st-purple); color:#fff; }
.rvs-hint{ font-size:11px; color:var(--st-text-3); line-height:1.55; margin:6px 0 10px; }
.rvs-row{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.rvs-row-lbl{ font-size:11.5px; color:var(--st-text-2); flex:0 0 auto; }
.rvs-field{
  flex:1; height:28px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--st-panel-3); border:1px solid var(--st-line); border-radius:6px;
  padding:0 8px; font-size:12px; white-space:nowrap; overflow:hidden;
}
.rvs-field svg{ color:var(--st-text-3); flex:0 0 auto; }
/* .st-fx */
.rvs-fx{ border:1px solid var(--st-line-soft); border-radius:8px; margin-bottom:9px; overflow:hidden; background:var(--st-panel-2); }
.rvs-fx-head{ display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--st-panel-3); }
.rvs-fx-title{ flex:1; font-size:12px; font-weight:700; }
.rvs-fx-pow{ width:26px; height:16px; border-radius:20px; background:var(--st-raise); position:relative; flex:0 0 26px; }
.rvs-fx-pow::after{ content:''; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--st-text-3); }
.rvs-fx-pow.is-on{ background:var(--st-purple); }
.rvs-fx-pow.is-on::after{ transform:translateX(10px); background:#fff; }
.rvs-fx-body{ padding:10px; display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.rvs-fx-body.cols-1{ grid-template-columns:1fr; }
.rvs-fx-body.is-off{ opacity:.42; }
/* .st-knob */
.rvs-knob{ display:flex; flex-direction:column; gap:3px; }
.rvs-knob-top{ display:flex; justify-content:space-between; align-items:baseline; gap:6px; }
.rvs-knob-lbl{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--st-text-3); }
.rvs-knob-val{ font-family:var(--st-mono); font-size:10.5px; color:var(--st-text-2); }
.rvs-knob .rvs-range{ width:100%; }
/* .st-eqview / .st-grcurve */
.rvs-eqview{ grid-column:1/-1; height:78px; border-radius:6px; background:#0d0d10; border:1px solid var(--st-line-soft); overflow:hidden; }
.rvs-eqview svg{ display:block; width:100%; height:100%; }
.rvs-grcurve{ grid-column:1/-1; height:26px; border-radius:4px; background:#0d0d10; border:1px solid var(--st-line-soft); overflow:hidden; position:relative; }

/* ── .st-statusbar ────────────────────────────────────────────────────── */
.rvs-status{
  flex:0 0 24px; height:24px; display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--st-panel); border-top:1px solid var(--st-line);
  font-size:11px; color:var(--st-text-3);
}
.rvs-status .rvs-meta{ font-family:var(--st-mono); }

/* ═══════════════════════════════════════════════════════════════════════════
   LE MOUVEMENT DE LA REPRODUCTION
   ───────────────────────────────────────────────────────────────────────────
   Une session ARRETEE et une session QUI TOURNE ne vendent pas la meme chose.
   Tout ce qui bouge ici bouge en `transform` uniquement — jamais width, left,
   height ni filter — donc sur la couche de composition, sans recalcul de mise
   en page. Aucun minuteur JavaScript n'existe : ni setInterval, ni
   requestAnimationFrame. Le seul script lie au mouvement est un
   IntersectionObserver qui pose `animation-play-state:paused` des que le
   cadre sort de l'ecran.

   BOUCLE DE 12 SECONDES, ET ELLE EST COHERENTE :
   la timeline est dessinee a 82 px/s, la tete parcourt 984 px en 12 s, et
   l'horloge avance d'un cran par seconde. A 120 BPM une seconde vaut deux
   temps, donc les mesures affichees (1.1.000, 1.3.000, 2.1.000, ...) sont
   exactement ce que `main.js` calculerait a ces instants — voir
   updateClock(), tick = floor((totalBeats % 1) * 960), pad a 3 chiffres.
   Un compteur qui ne collerait pas a la tete de lecture serait un faux.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tete de lecture : 0 -> 984 px en 12 s, lineaire, jamais de retour visible
   (elle repart de la gauche, comme une lecture relancee). */
@keyframes rvs-head{ from{ transform:translateX(0); } to{ transform:translateX(984px); } }
/* Les deux rouleaux de chiffres : 12 crans, un par seconde. `steps(12, end)`
   fait tenir chaque valeur une seconde pleine au lieu de glisser entre deux. */
@keyframes rvs-roll12{ from{ transform:translateY(0); } to{ transform:translateY(-16.2em); } }
@keyframes rvs-roll4{ from{ transform:translateY(0); } to{ transform:translateY(-5.4em); } }
/* Bargraphes. --lv porte le niveau de repos de chaque piste ; les images-cles
   ne font que le moduler, donc une seule regle sert les cinq. */
@keyframes rvs-mtr{
  0%,100%{ transform:scaleY(var(--lv)); }
  17%{ transform:scaleY(calc(var(--lv) * .58)); }
  36%{ transform:scaleY(calc(var(--lv) * 1.16)); }
  55%{ transform:scaleY(calc(var(--lv) * .71)); }
  78%{ transform:scaleY(calc(var(--lv) * 1.05)); }
}

.rvs-play{ animation:rvs-head 12s linear infinite; }
.rvs-roll-t > div{ animation:rvs-roll12 12s steps(12,end) infinite; }
.rvs-roll-b > div{ animation:rvs-roll12 12s steps(12,end) infinite; }
.rvs-roll-s > div{ animation:rvs-roll4 12s steps(4,end) infinite; }
.rvs-head-meter i, .rvs-strip-meter i{ transform:scaleY(var(--lv,.5)); }
.rvs-m1{ animation:rvs-mtr 1.10s ease-in-out infinite; }
.rvs-m2{ animation:rvs-mtr  .92s ease-in-out infinite; }
.rvs-m3{ animation:rvs-mtr 1.42s ease-in-out infinite; }
.rvs-m4{ animation:rvs-mtr 1.26s ease-in-out infinite; }
.rvs-m5{ animation:rvs-mtr 1.63s ease-in-out infinite; }

/* Hors de l'ecran, on ne paie rien. Pose par le script. */
.rvs-stage.is-idle .rvs-shot *{ animation-play-state:paused !important; }

/* ── Mouvement reduit : une image FIXE et COHERENTE, pas un ecran mort ────
   Le reglage systeme coupe toutes les animations (regle generale plus haut).
   Sans ces trois surcharges la reproduction retomberait sur l'etat de depart,
   c'est-a-dire la tete a gauche pendant que l'horloge affiche 00:00.000 et
   que les bargraphes montrent un niveau : incoherent. On fige donc l'ensemble
   sur l'instant t = 4 s, qui est un etat REEL de l'application :
     tete a 4 x 82 = 328 px · horloge 00:04.000 · mesure 3.1.000
   Les bargraphes gardent leur niveau de repos, ce qui est exactement ce
   qu'affiche une lecture en cours. */
@media (prefers-reduced-motion:reduce){
  .rvs-play{ transform:translateX(328px); }
  .rvs-roll-t > div, .rvs-roll-b > div{ transform:translateY(-5.4em); }  /* cran 4 */
  .rvs-roll-s > div{ transform:translateY(-1.35em); }                    /* cran 1 */
}

/* ── Fragments : boites de dialogue (.st-modal & co) ──────────────────────*/
.rvs-dlg{ background:var(--st-panel); border-radius:12px; }
.rvs-dlg-head{ display:flex; align-items:center; gap:10px; padding:16px 18px 12px; }
.rvs-dlg-head h4{ flex:1; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.rvs-dlg-x{
  width:28px; height:28px; border-radius:6px; background:var(--st-panel-3); color:var(--st-text-2);
  display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:1;
}
.rvs-dlg-body{ padding:0 18px 4px; }
.rvs-dlg-foot{ display:flex; gap:8px; justify-content:flex-end; padding:14px 18px 18px; }
/* .st-check dans une ligne de dialogue */
.rvs-check-row{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
.rvs-box.is-off{ background:transparent; border:1px solid var(--st-raise); }
.rvs-file{ justify-content:flex-start; color:var(--st-text-2); }

/* ── Fragment « clips » : le gros plan d'une voie ─────────────────────────*/
.rvs-frag-clips{ background:var(--st-bg); }
.rvs-frag-clips .rvs-lane-wrap{ height:92px; }
.rvs-frag-insp{ background:var(--st-panel); }
.rvs-frag-insp .rvs-insp-body{ overflow:visible; }
/* Fondus : un triangle sombre a chaque bord, exactement comme les remplit
   timeline.js (rgba(10,10,12,.62)), plus le trait blanc de la pente. */
.rvs-fade{ position:absolute; top:13px; bottom:0; pointer-events:none; }
.rvs-fade-i{
  left:0;
  background:linear-gradient(to bottom right, rgba(10,10,12,.62) 49.6%, rgba(255,255,255,.5) 49.6%, rgba(255,255,255,.5) 51%, transparent 51%);
}
.rvs-fade-o{
  right:0;
  background:linear-gradient(to bottom left, rgba(10,10,12,.62) 49.6%, rgba(255,255,255,.5) 49.6%, rgba(255,255,255,.5) 51%, transparent 51%);
}
/* Poignees de fondu : deux pastilles blanches de 3,2 px de rayon a y = cy+15,
   soit 15 px sous le haut du clip. */
.rvs-grab{
  position:absolute; top:11.8px; width:6.4px; height:6.4px; margin-left:-3.2px;
  border-radius:50%; background:#fff;
}

/* ── Barre de reduction de gain (drawGr) ─────────────────────────────────*/
.rvs-grcurve i{ position:absolute; left:0; top:0; bottom:0; }
.rvs-grcurve span{
  position:absolute; left:8px; top:50%; transform:translateY(-50%);
  font-family:var(--st-mono); font-size:11px; font-weight:600; color:#a2a2ae;
}

/* ── Divers ──────────────────────────────────────────────────────────────*/
.rvs-btn-lg{ min-height:54px; padding:0 32px; font-size:16px; }
.rvs-ic-play{ display:none; }
.rvs-ic-pause{ display:inline-flex; }

/* Mouvement reduit : la reproduction est figee sur t = 4 s, c'est-a-dire un
   transport EN PAUSE au milieu du morceau. Or l'application, en pause, montre
   le triangle de lecture sur un bouton violet — c'est `is-playing` qui le
   passe en fond neutre avec la double barre. On retablit donc l'etat exact. */
@media (prefers-reduced-motion:reduce){
  .rvs-ic-play{ display:inline-flex; }
  .rvs-ic-pause{ display:none; }
  .rvs-tbtn-play{ background:var(--st-purple); color:#fff; }
}