/* ============================================================
   TAB SHOWCASE: four tabs of the app, each a live HTML/CSS replica of
   that tool's main panel, animated with transforms and opacity only.
   No screenshots, no cursor, nothing laid over the app's text: the
   caption sits under the stage. One site card (max 880 px, radius 24,
   card tokens) holds the tab strip, the stage and the caption.

   The replica is drawn at a fixed design size and scaled with one
   transform to the stage width: 844 x 500 on desktop, and below 768 px a
   reflowed single column phone replica at 390 x 490 (scale about 0.9, so
   app text stays at 11 px or more on a 375 px screen).

   Motion: one curve, --sc-ease-out, on one ladder. Press 160 ms, state
   200 ms, row enter 320 ms with an 8 px lift, state dim 380 ms, nothing
   over 500 ms except two counted pulses (the 1.7 s glow on the button
   that wants a click, six passes; the Listen Live dot at 157 BPM, eight
   beats). Nothing loops forever. Colours never animate: a state colour
   either snaps with its step or fades in as a layer, by opacity.

   Section classes the script toggles:
     .is-ready    replicas measured and scaled, show them
     .is-touched  the visitor took over: no auto-advance, and the progress
                  line becomes a full underline on the selected tab
     .is-paused   offscreen or hidden page: CSS pulses freeze
     .is-static   prefers-reduced-motion: end states, short plain fades
   ============================================================ */
.tab-showcase { --sc-ease-out: cubic-bezier(.23, 1, .32, 1); }
.section.tab-showcase { padding: 24px 0 32px; overflow-x: clip; }
.tab-showcase .section-head { margin-bottom: 36px; }

.sc-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

/* ---------- card ---------- */
.sc-card {
  padding: 14px 18px 16px;
  border-radius: 24px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow: var(--card-shadow);
}

/* ---------- tab strip, inside the card ---------- */
.sc-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 28px;
  margin: 0 0 12px;
  min-height: 44px;
}
.sc-tab {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 2px 13px;
  border: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-dim);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--sc-ease-out);
}
.sc-tab:hover { color: var(--text); }
.sc-tab:active { transform: scale(.97); }
.sc-tab[aria-selected="true"] { color: var(--text); }
.sc-tab:focus { outline: none; }
.sc-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 8px; }
/* Progress line: "next tab in 5 s". A track under the active tab, the
   fill scales over the tab's slot (one transform, set by the script).
   Once touched, or under reduced motion, it stops moving and stays as a
   full underline on the selected tab, so the pick never rests on text
   colour alone; a new pick fills its own underline in 200 ms. */
.sc-tab-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--border-strong);
  opacity: 0;
  overflow: hidden;
  transition: opacity .3s var(--sc-ease-out);
}
.sc-tab[aria-selected="true"] .sc-tab-bar { opacity: 1; }
.sc-tab-fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.tab-showcase.is-touched .sc-tab-fill { transition: transform .2s var(--sc-ease-out); }
.tab-showcase.is-static .sc-tab-bar,
.tab-showcase.is-static .sc-tab-fill { transition: none; }
.tab-showcase.is-touched .sc-tab[aria-selected="true"] .sc-tab-fill,
.tab-showcase.is-static .sc-tab[aria-selected="true"] .sc-tab-fill { transform: scaleX(1) !important; }

/* ---------- stage ---------- */
.sc-stage {
  --sc-scale: 1;
  position: relative;
  width: 100%;
  aspect-ratio: 844 / 500;
  border-radius: 14px;
  overflow: hidden;
  background: #F4F2FA;
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
  isolation: isolate;
  outline: none;
  contain: layout paint;
}
.sc-stage:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
@supports not (aspect-ratio: 1 / 1) {
  .sc-stage::before { content: ''; display: block; padding-bottom: 59.24%; }
}
/* Switching: the outgoing panel leaves in 120 ms, the incoming one fades
   in from 100 ms, so two apps never sit on top of each other. */
.sc-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .12s var(--sc-ease-out), transform .12s var(--sc-ease-out), visibility 0s linear .12s;
}
.sc-panel.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .3s var(--sc-ease-out) .1s, transform .3s var(--sc-ease-out) .1s, visibility 0s;
}
.sc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sc-replica {
  position: absolute;
  left: 0;
  top: 0;
  width: 844px;
  height: 500px;
  transform: scale(var(--sc-scale));
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity .2s linear;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.tab-showcase.is-ready .sc-replica { opacity: 1; }
/* Resets that cancel every transition for one frame (scene restart) */
.sc-noanim, .sc-noanim *, .sc-noanim *::before, .sc-noanim *::after { transition: none !important; animation: none !important; }
.tab-showcase.is-paused .sc-replica *,
.tab-showcase.is-paused .sc-replica *::before,
.tab-showcase.is-paused .sc-replica *::after { animation-play-state: paused !important; }

/* ---------- caption, inside the card under the stage ----------
   One span per tab, stacked in one grid cell: the old line leaves in
   120 ms, the new one fades in from 100 ms (same curve, same timing as
   the panels), and the line never changes height. */
.sc-caption {
  display: grid;
  margin: 14px 8px 0;
  min-height: 24px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--text);
  text-wrap: balance;
}
.sc-cap {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  transition: opacity .12s var(--sc-ease-out);
}
.sc-cap.is-on { opacity: 1; transition: opacity .3s var(--sc-ease-out) .1s; }

/* ============================================================
   CAMERA: the panels live inside an app window whose sidebar sits just
   off the stage. .is-wide pulls back to show the whole app (the glimpse,
   and every tool change), then it pushes back in. Transform only.
   ============================================================ */
.sc-stage { transition: background-color .45s var(--sc-ease-out); }
.sc-stage.is-wide { background-color: #E4DDF3; }
.sc-cam {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1);
  clip-path: inset(0 0 0 calc(-200px * var(--sc-scale)) round 12px);
}
.sc-stage.is-wide .sc-cam { transform: var(--sc-cam); }
.sc-cam-snap .sc-cam, .sc-cam-snap { transition: none !important; }
/* the window's shadow, only on the wide shot */
.sc-cam::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: calc(-200px * var(--sc-scale));
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(111, 91, 211, .22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--sc-ease-out);
}
.sc-stage.is-wide .sc-cam::after { opacity: 1; }

.sc-side {
  position: absolute;
  top: 0;
  left: calc(-200px * var(--sc-scale));
  width: 200px;
  height: calc(100% / var(--sc-scale));
  transform: scale(var(--sc-scale));
  transform-origin: 0 0;
  padding: 26px 12px 0;
  border-right: 1px solid rgba(111, 91, 211, .12);
  pointer-events: none;
}
.sc-side.sc-app {
  background:
    radial-gradient(120% 60% at 110% 15%, rgba(233, 196, 245, .55), transparent 60%),
    radial-gradient(90% 50% at -10% 95%, rgba(196, 178, 247, .6), transparent 60%),
    linear-gradient(165deg, #FBF9FD 0%, #F3ECFB 45%, #F6E9F6 75%, #EAE1FA 100%);
}
.sc-side-logo { padding: 2px 10px 26px; }
.sc-side-logo img { display: block; width: 146px; height: auto; }
.sc-side-nav { position: relative; }
.sc-side-h {
  padding: 0 10px;
  margin: 4px 0 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6B6579; /* brand mono-on-light: 4.6:1 on the sidebar wash (sa-mute was 2.9:1) */
}
.sc-side-item + .sc-side-h { margin-top: 16px; }
.sc-side-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 10px;
  font-size: 13.5px;
  color: var(--sa-ink);
  transition: transform .16s var(--sc-ease-out);
}
.sc-side-item .sc-ico { width: 16px; height: 16px; color: var(--sa-dim); }
.sc-side-item.is-on .sc-ico { color: var(--sa-accent); }
.sc-side-item.is-on { font-weight: 600; }
.sc-side-item.is-pressed { transform: scale(.96); }
.sc-side-beta {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(214, 51, 132, .35);
  background: rgba(252, 231, 243, .9);
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #B4235F;
}
.sc-side-hi {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 32px;
  border-radius: 9px;
  border: 1px solid #CDBDF3;
  background: rgba(255, 255, 255, .6);
  box-shadow: 0 1px 2px rgba(74, 54, 144, .08);
  transition: transform .34s var(--sc-ease-out);
}
.tab-showcase.is-static .sc-cam { transform: none !important; }

/* ============================================================
   THE APP REPLICA. Light lavender app chrome, white panel, Inter body,
   mono step labels, pill chips, purple accents. These colors are the
   app's own, so the replica stays light in the site's dark theme, the
   way a screenshot would.
   ============================================================ */
.sc-app {
  --sa-bg: #F4F2FA;
  --sa-panel: #FFFFFF;
  --sa-ink: #2D2A37;
  --sa-dim: #5B5568;
  --sa-mute: #8C86A0;
  --sa-line: #E8E3F2;
  --sa-line-2: #D8CFEC;
  --sa-lav: #F2EDFC;
  --sa-lav-2: #E9E2F8;
  --sa-accent: #6F5BD3;
  --sa-accent-2: #8B6CF5;
  --sa-accent-ink: #4C3AAE;
  --sa-green: #2FBF71;
  --sa-green-ink: #1E9E5C;
  --sa-shadow: 0 1px 2px rgba(45, 42, 55, .04), 0 10px 24px -14px rgba(74, 54, 144, .28);
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01';
  color: var(--sa-ink);
  background: var(--sa-bg);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}
.sc-app * { box-sizing: border-box; }
.sc-app b, .sc-app strong { font-weight: 600; }

/* window header: the tool's title and one line under it */
.sc-app-head {
  height: 66px;
  padding: 16px 26px 0;
}
.sc-app-title { display: flex; flex-direction: column; gap: 2px; }
.sc-app-title b { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.sc-app-title span { font-size: 13px; color: var(--sa-dim); }
/* the white panel sits inside the stage, framed on every side */
.sc-app-panel {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 66px;
  bottom: 20px;
  padding: 20px 24px;
  background: var(--sa-panel);
  border-radius: 16px;
  box-shadow: var(--sa-shadow);
  overflow: hidden;
}

/* mono step labels, like the app's "1 · UPLOAD AUDIO" */
.sc-step-lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sa-mute);
  margin: 0 0 8px;
}
.sc-step-lab b { font-weight: 700; color: var(--sa-accent); }

/* buttons: purple fill with layered labels. A label swap lifts the old
   label out fast and brings the new one up 6 px just behind it, so the
   two never sit on top of each other. */
.sc-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  height: 36px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 9px;
  background: var(--sa-accent);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 6px 16px -6px rgba(111, 91, 211, .55);
  isolation: isolate;
  transition: transform .16s var(--sc-ease-out);
}
.sc-btn.is-pressed { transform: scale(.95); }
.sc-btn > span {
  grid-area: 1 / 1;
  transition: opacity .2s var(--sc-ease-out);
  white-space: nowrap;
}
.sc-btn > .sc-btn-a, .sc-btn > .sc-btn-b, .sc-btn > .sc-btn-c {
  transition: opacity .1s var(--sc-ease-out), transform .16s var(--sc-ease-out);
}
.sc-btn .sc-btn-b, .sc-btn .sc-btn-c { opacity: 0; transform: translateY(6px); }
.sc-btn.is-busy .sc-btn-a, .sc-btn.is-done .sc-btn-a, .sc-btn.is-stop .sc-btn-a { opacity: 0; transform: translateY(-6px); }
.sc-btn:not(.is-busy):not(.is-done):not(.is-stop) > .sc-btn-a,
.sc-btn.is-busy .sc-btn-b, .sc-btn.is-stop .sc-btn-b,
.sc-btn.is-done .sc-btn-c {
  opacity: 1;
  transform: none;
  transition: opacity .2s var(--sc-ease-out) .08s, transform .24s var(--sc-ease-out) .08s;
}
.sc-btn.is-done .sc-btn-b {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .1s var(--sc-ease-out), transform .16s var(--sc-ease-out);
}
/* state colours snap with their step; the green "done" fill is a layer
   that fades in by opacity over whatever the button was */
.sc-btn.is-stop { background: #F1EEF7; color: var(--sa-ink); box-shadow: none; }
.sc-btn.is-busy { background: var(--sa-accent-2); }
.sc-btn.is-done { box-shadow: 0 6px 16px -6px rgba(47, 191, 113, .5); }
.sc-btn:not(.sc-btn-gen)::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--sa-green);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--sc-ease-out);
}
.sc-btn.is-done::after { opacity: 1; }
.sc-btn-wide { width: 196px; }
.sc-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
}

/* pills and chips */
.sc-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sa-lav-2);
  color: var(--sa-accent);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--sa-lav);
  color: var(--sa-dim);
  font-size: 11.5px;
  white-space: nowrap;
}
.sc-chip b { color: var(--sa-ink); font-weight: 700; }
.sc-chip-bpm { background: var(--sa-lav-2); color: var(--sa-accent-ink); }
.sc-chip-bpm b { color: var(--sa-accent-ink); }

/* dots: status (green), live (purple) */
.sc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sa-green);
  flex: 0 0 auto;
}
.sc-dot-live { background: var(--sa-accent); }

/* select look-alike */
.sc-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--sa-line-2);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: var(--sa-ink);
  white-space: nowrap;
  isolation: isolate;
}
/* the picked or focused ring: a layer over the border, faded by opacity */
.sc-select::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid var(--sa-accent-2);
  box-shadow: 0 0 0 3px rgba(111, 91, 211, .14);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--sc-ease-out);
}
.sc-select i {
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-right: 1.6px solid var(--sa-dim);
  border-bottom: 1.6px solid var(--sa-dim);
  transform: rotate(45deg);
}
.sc-ico { display: block; width: 16px; height: 16px; flex: 0 0 auto; }

/* row entry, shared: 320 ms, 8 px lift */
.sc-file, .sc-row, .sc-stem {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s var(--sc-ease-out), transform .32s var(--sc-ease-out);
}
.sc-file.is-in, .sc-row.is-in, .sc-stem.is-in { opacity: 1; transform: none; }

/* ============================================================
   TAB 1: Key and BPM
   ============================================================ */
.sc-live {
  position: relative;
  padding: 14px 18px 16px;
  border-radius: 14px;
  border: 1px solid #DDD3F3;
  background: linear-gradient(120deg, #F5F0FD 0%, #F8F1FA 60%, #FBF0F6 100%);
  box-shadow: 0 10px 26px -18px rgba(111, 91, 211, .35);
}
.sc-live-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
}
.sc-live-head b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sc-live-status {
  position: relative;
  flex: 1 1 auto;
  height: 18px;
  font-size: 13px;
  color: var(--sa-dim);
}
.sc-live-status > span {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transition: opacity .1s var(--sc-ease-out);
}
.sc-live-on { opacity: 0; color: var(--sa-accent-ink); }
.is-live .sc-live-idle { opacity: 0; }
.is-live .sc-live-on { opacity: 1; transition: opacity .2s var(--sc-ease-out) .08s; }
/* the one live tell: the dot breathes once per beat at 157 BPM, for
   eight beats, then rests lit */
.is-live .sc-live-head .sc-dot-live { background: var(--sa-green); }
.sc-panel.is-on .is-live .sc-live-head .sc-dot-live { animation: scLive 382ms ease-in-out 8; }
@keyframes scLive { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* 60 bars: they rise once (420 ms, 8 ms apart) when Listen starts and
   then sit still. Idle: a flat dim line. */
.sc-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  margin: 8px 0 12px;
  padding: 0 2px;
  opacity: .35;
  transition: opacity .38s var(--sc-ease-out);
}
.is-live .sc-bars { opacity: 1; }
.sc-bar {
  display: block;
  width: 5px;
  height: 100%;
  border-radius: 3px;
  background: var(--c, var(--sa-accent));
  transform: scaleY(.06);
  transform-origin: 50% 50%;
  transition: transform .42s var(--sc-ease-out);
}
.is-live .sc-bar {
  transform: scaleY(var(--b, .5));
  transition-delay: calc(var(--i, 0) * 8ms);
}

.sc-live-read {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}
.sc-read { display: flex; flex-direction: column; gap: 4px; }
/* fixed columns, so the key name never moves the BPM block */
.sc-read-key { flex: 0 0 290px; }
.sc-read-bpm { flex: 0 0 170px; }
.sc-lab {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sa-mute);
}
.sc-val {
  display: block;
  height: 56px;
  font-size: 56px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--sa-mute);
  white-space: nowrap;
}
.sc-num { font-variant-numeric: tabular-nums; }
.is-live .sc-val { color: var(--sa-ink); }
/* the key lands in one swap: the placeholder fades, the name lifts in */
.sc-read-key .sc-val { display: grid; }
.sc-val > span { grid-area: 1 / 1; transition: opacity .2s var(--sc-ease-out), transform .32s var(--sc-ease-out); }
.sc-val .sc-val-b { opacity: 0; transform: translateY(8px); }
.sc-val.is-land .sc-val-a { opacity: 0; }
.sc-val.is-land .sc-val-b { opacity: 1; transform: none; }
.sc-conf { display: inline-flex; gap: 4px; height: 8px; margin-top: 2px; }
.sc-conf i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sa-accent);
  opacity: .22;
  transform: scale(.85);
  transition: opacity .2s var(--sc-ease-out), transform .2s var(--sc-ease-out);
}
.sc-conf i.is-lit { opacity: 1; transform: scale(1); }

.sc-upload-lab { margin: 16px 0 8px; }
/* the drop zone and the dropped files share one cell: the zone fades as
   the first file arrives */
.sc-drop-area { display: grid; }
.sc-drop-area > * { grid-area: 1 / 1; }
.sc-files { display: flex; flex-direction: column; gap: 8px; }
.sc-file {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px 0 16px;
  border-radius: 10px;
  border: 1px solid var(--sa-line);
  background: #fff;
  box-shadow: var(--sa-shadow);
}
.sc-file .sc-dot { background: var(--sa-accent); }
.sc-file.is-done .sc-dot { background: var(--sa-green); }
.sc-file-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.sc-file-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--sa-mute);
  white-space: nowrap;
}
.sc-file-res {
  position: relative;
  display: inline-grid;
  align-items: center;
  min-width: 268px;
  height: 24px;
}
.sc-file-res > * { grid-area: 1 / 1; }
.sc-analyzing {
  justify-self: end;
  font-size: 12px;
  color: var(--sa-accent);
  transition: opacity .2s var(--sc-ease-out);
}
.sc-file.is-done .sc-analyzing { opacity: 0; }
.sc-file-chips { display: inline-flex; justify-content: flex-end; gap: 6px; }
.sc-file-chips .sc-chip {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .32s var(--sc-ease-out), transform .32s var(--sc-ease-out);
}
.sc-file.is-done .sc-file-chips .sc-chip { opacity: 1; transform: none; }
.sc-file.is-done .sc-file-chips .sc-chip:nth-child(2) { transition-delay: 60ms; }
.sc-file.is-done .sc-file-chips .sc-chip:nth-child(3) { transition-delay: 120ms; }
.sc-x {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #F1EEF7;
  color: var(--sa-dim);
  font-size: 11px;
  line-height: 24px;
  text-align: center;
}

/* drop zones, like the app's dashed upload boxes */
.sc-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100px;
  border: 1.5px dashed var(--sa-line-2);
  border-radius: 12px;
  background: #FBFAFE;
  color: var(--sa-ink);
  transition: opacity .2s var(--sc-ease-out);
}
.sc-dropzone.is-gone { opacity: 0; }
.sc-dropzone b { font-size: 14px; font-weight: 600; }
.sc-dropzone span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--sa-accent); }
.sc-dropzone .sc-up { width: 22px; height: 22px; margin-bottom: 2px; color: var(--sa-accent); }

/* ============================================================
   TAB 2: Audio Converter
   ============================================================ */
.sc-queue {
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sa-shadow);
  overflow: hidden;
  margin-bottom: 14px;
}
.sc-queue-head {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid var(--sa-line);
}
.sc-queue-count { font-size: 14px; font-weight: 700; }
.sc-queue-list { position: relative; padding: 4px 0 4px; }
.sc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 27px;
  padding: 0 16px;
  font-size: 13px;
}
.sc-row .sc-dot { width: 6px; height: 6px; background: #C9C2DA; }
.sc-row.is-done .sc-dot { background: var(--sa-green); }
.sc-row-name { font-weight: 500; }
.sc-row-st {
  position: relative;
  display: inline-grid;
  margin-left: auto;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sc-row-st > span { grid-area: 1 / 1; justify-self: end; transition: opacity .2s var(--sc-ease-out); white-space: nowrap; }
.sc-row-st .sc-st-a { color: var(--sa-mute); }
.sc-row-st .sc-st-b { color: var(--sa-green-ink); opacity: 0; display: inline-flex; align-items: center; gap: 4px; }
.sc-row.is-done .sc-st-a { opacity: 0; }
.sc-row.is-done .sc-st-b { opacity: 1; }
.sc-row-st .sc-check { width: 11px; height: 11px; margin: 0; }
.sc-queue-more {
  height: 20px;
  padding: 2px 16px 0 32px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--sa-mute);
  opacity: 0;
  transition: opacity .2s var(--sc-ease-out);
}
.sc-queue-list.is-in .sc-queue-more { opacity: 1; }

.sc-tiles { display: flex; gap: 6px; margin-bottom: 12px; }
.sc-tile {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 10px;
  border: 1.5px solid var(--sa-line);
  background: #fff;
  color: var(--sa-dim);
  transition: transform .2s var(--sc-ease-out);
}
/* selected tiles, pills and chips: the accent border and lavender fill
   are one layer over the plain look, faded in by opacity (200 ms); the
   text colour snaps with it */
.sc-tile::before, .sc-bit::before, .sc-stem-chip::before {
  content: '';
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: inherit;
  border: 1.5px solid var(--sa-accent-2);
  background: var(--sa-lav);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s var(--sc-ease-out);
}
.sc-tile.is-sel::before, .sc-bit.is-sel::before, .sc-stem-chip.is-lit::before { opacity: 1; }
.sc-tile b { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.sc-tile span { font-size: 9.5px; color: var(--sa-mute); }
.sc-tile.is-sel {
  color: var(--sa-accent);
  transform: translateY(-1px);
}
.sc-tile.is-sel span { color: var(--sa-accent-ink); }
.sc-bitrate {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.sc-bitrate .sc-step-lab { margin: 0 4px 0 0; }
.sc-bits { display: flex; gap: 6px; flex: 1 1 auto; }
.sc-bit {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.5px solid var(--sa-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sa-dim);
}
.sc-bit.is-sel { color: var(--sa-accent); }
.sc-convert { display: flex; align-items: center; gap: 18px; height: 40px; }
/* the progress bar and the end-state hero share one cell */
.sc-convert-state { display: grid; flex: 1 1 auto; align-items: center; }
.sc-convert-state > * { grid-area: 1 / 1; transition: opacity .2s var(--sc-ease-out), transform .32s var(--sc-ease-out); }
.sc-convert-run { display: flex; align-items: center; gap: 14px; }
.sc-convert-done {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--sa-green-ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
}
.sc-convert-done .sc-check { width: 20px; height: 20px; margin-right: 8px; vertical-align: 0; }
.sc-convert.is-done .sc-convert-run { opacity: 0; }
.sc-convert.is-done .sc-convert-done { opacity: 1; transform: none; }
.sc-prog {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 4px;
  background: #EDE9F5;
  overflow: hidden;
}
.sc-prog i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #6F5BD3 0%, #A332FF 100%);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.sc-pct {
  width: 44px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sa-dim);
  text-align: left;
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   TAB 3: Text to Speech
   ============================================================ */
.sc-textbox {
  position: relative;
  height: 72px;
  padding: 12px 14px;
  white-space: pre-wrap;
  border: 1px solid var(--sa-line-2);
  border-radius: 10px;
  background: #fff;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--sa-ink);
  overflow: hidden;
  word-break: break-word;
}
/* the sentence is laid out in full up front, one span per character,
   revealed by opacity; the caret is out of flow and moves by transform */
.sc-ch { opacity: 0; }
.sc-ch.is-on { opacity: 1; }
.sc-caret {
  position: absolute;
  left: 1px;
  top: 2px;
  width: 1.5px;
  height: 17px;
  background: var(--sa-accent);
  opacity: 0;
  will-change: transform;
}
.is-typing .sc-caret { opacity: 1; }
.sc-count {
  margin: 6px 0 12px;
  font-size: 11.5px;
  line-height: 14px;
  color: var(--sa-mute);
  font-variant-numeric: tabular-nums;
}
.sc-count span { display: inline-block; min-width: 2ch; }
.sc-voice {
  display: grid;
  align-items: center;
  width: 100%;
  height: 38px;
  margin-bottom: 14px;
  padding-right: 34px;
}
.sc-voice > span { grid-area: 1 / 1; transition: opacity .1s var(--sc-ease-out); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-voice .sc-voice-a { color: var(--sa-mute); }
.sc-voice .sc-voice-b { opacity: 0; font-weight: 500; }
.sc-voice.is-picked::before { opacity: 1; }
.sc-voice.is-picked .sc-voice-a { opacity: 0; }
.sc-voice.is-picked .sc-voice-b { opacity: 1; transition: opacity .2s var(--sc-ease-out) .08s; }

/* Generate speech: a real button. It glows (Muze's 1.7 s ease-in-out,
   by opacity, six passes so it settles after about 10 s) while it waits
   for a click, and fills over 900 ms while it "generates". */
.sc-btn-gen {
  display: grid;
  width: 100%;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 10px;
  font-size: 14px;
  background: linear-gradient(90deg, #6F5BD3 0%, #7B61FF 100%);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sc-btn-gen:active { transform: scale(.98); }
.sc-btn-gen:focus { outline: none; }
.sc-btn-gen:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--sa-accent); }
.sc-btn-gen::before,
.sc-btn-gen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s var(--sc-ease-out);
}
.sc-btn-gen::before { box-shadow: 0 0 0 2px #8B6CF5, 0 0 8px rgba(123, 97, 255, .35); }
.sc-btn-gen::after { box-shadow: 0 0 18px 3px rgba(123, 97, 255, .7); }
.sc-btn-gen.is-glow::before { opacity: 1; }
.sc-panel.is-on .sc-btn-gen.is-glow::after { animation: scGlow 1.7s ease-in-out 6 alternate; }
@keyframes scGlow { from { opacity: 0; } to { opacity: 1; } }
.sc-btn-gen.is-busy { background: linear-gradient(90deg, #8B6CF5 0%, #9A82FF 100%); }
.sc-gen-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.sc-gen-fill i {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .22);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.sc-btn-gen.is-busy .sc-gen-fill i { transition: transform .9s linear; }

.sc-out {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 66px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--sa-lav);
  border: 1px solid #E3DBF5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .32s var(--sc-ease-out), transform .32s var(--sc-ease-out);
}
.sc-out.is-in { opacity: 1; transform: none; }
.sc-out-meta { display: flex; flex-direction: column; gap: 2px; width: 140px; flex: 0 0 auto; }
.sc-out-meta b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.sc-out-meta span { font-family: var(--font-mono); font-size: 10.5px; color: var(--sa-mute); white-space: nowrap; }
.sc-wv {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 auto;
  height: 64px;
}
/* bars: flat until drawn. Drawn all at once with a stagger (the silent
   finish), or one by one in sync with the clip (.is-on). While a drawn
   waveform replays, the unplayed part is dim. */
.sc-wv i {
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background: var(--sa-accent-2);
  transform: scaleY(.05);
  transform-origin: 50% 50%;
  transition: transform .32s var(--sc-ease-out), opacity .2s linear;
}
.sc-wv.is-stagger i { transition-delay: calc(var(--i, 0) * 8ms); }
.sc-wv.is-drawn i, .sc-wv i.is-on { transform: scaleY(var(--b, .5)); }
.sc-wv.is-dim i { opacity: .35; }
.sc-wv.is-dim i.is-on { opacity: 1; }
/* the playhead: a full-width layer moved by a percentage of its own width */
.sc-ph {
  position: absolute;
  left: 0;
  top: -3px;
  bottom: -3px;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s linear;
}
.sc-ph i {
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--sa-ink);
}
.sc-out.is-playing .sc-ph { opacity: 1; }
.sc-time {
  width: 34px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sa-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* the small Play / Pause button, under the waveform, never over it */
.sc-out-ctl {
  display: flex;
  margin-top: 10px;
  padding-left: 172px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .32s var(--sc-ease-out), transform .32s var(--sc-ease-out), visibility 0s linear .32s;
}
.sc-out-ctl.is-in {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .32s var(--sc-ease-out), transform .32s var(--sc-ease-out), visibility 0s;
}
.sc-playbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  margin: 0;
  padding: 0 14px 0 11px;
  border: 1px solid var(--sa-line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--sa-accent-ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s var(--sc-ease-out);
}
.sc-playbtn:hover { border-color: var(--sa-accent-2); }
.sc-playbtn:active { transform: scale(.95); }
.sc-playbtn:focus { outline: none; }
.sc-playbtn:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sa-accent); }
.sc-playbtn svg { width: 12px; height: 12px; fill: currentColor; }
.sc-playbtn .sc-ico-pause, .sc-playbtn .sc-playbtn-b { display: none; }
.sc-out-ctl.is-playing .sc-ico-play, .sc-out-ctl.is-playing .sc-playbtn-a { display: none; }
.sc-out-ctl.is-playing .sc-ico-pause, .sc-out-ctl.is-playing .sc-playbtn-b { display: inline; }
.sc-out-ctl.is-playing .sc-ico-pause { display: block; }
/* Not heard yet: the pill reads "Tap to hear it", filled like Generate,
   with the one glow (Muze's 1.7 s ease-in-out, by opacity). The glow
   stops while it plays and is off under reduced motion (.is-static). */
.sc-playbtn::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px rgba(139, 108, 245, .55), 0 0 16px 3px rgba(123, 97, 255, .55);
  opacity: 0;
  pointer-events: none;
}
.sc-out-ctl.is-invite .sc-playbtn {
  border-color: transparent;
  background: linear-gradient(90deg, #6F5BD3 0%, #7B61FF 100%);
  color: #fff;
}
.sc-panel.is-on .sc-out-ctl.is-invite.is-in:not(.is-playing) .sc-playbtn::after { animation: scGlow 1.7s ease-in-out infinite alternate; }

/* ============================================================
   TAB 4: Split Stems
   ============================================================ */
.sc-src {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid var(--sa-line);
  border-radius: 12px;
  background: #fff;
}
.sc-src-head { display: flex; align-items: center; gap: 4px; height: 18px; font-size: 13.5px; }
.sc-src-head .sc-check { flex: 0 0 auto; color: var(--sa-green); margin-right: 4px; }
.sc-src-head b { font-weight: 500; white-space: nowrap; }
.sc-src-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--sa-mute);
  white-space: nowrap;
}
.sc-src-wave {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  margin-top: 8px;
}
.sc-src-wave i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--sa-accent-2);
  opacity: .85;
  transform: scaleY(var(--b, .5));
}
.sc-method {
  display: grid;
  align-items: center;
  width: 100%;
  height: 36px;
  margin-bottom: 12px;
}
.sc-method > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .1s var(--sc-ease-out); }
.sc-method .sc-method-b { opacity: 0; font-weight: 500; }
.sc-method.is-picked .sc-method-a { opacity: 0; }
.sc-method.is-picked .sc-method-b { opacity: 1; transition: opacity .2s var(--sc-ease-out) .08s; }
.sc-method.is-focus::before { opacity: 1; }
.sc-stem-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
  opacity: .5;
  transition: opacity .38s var(--sc-ease-out);
}
.sc-stem-chips.is-ready { opacity: 1; }
.sc-stem-chip {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 9px;
  border: 1.5px solid var(--sa-line);
  background: #fff;
  color: var(--sa-dim);
  font-size: 13.5px;
  font-weight: 500;
  transition: transform .16s var(--sc-ease-out);
}
.sc-stem-chip .sc-ico { width: 15px; height: 15px; }
.sc-stem-chip.is-lit { color: var(--sa-accent); }
.sc-btn-split {
  display: grid;
  width: 100%;
  height: 40px;
  margin-bottom: 12px;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(90deg, #7B61FF 0%, #8B6CF5 100%);
}
.sc-btn-split.is-busy { background: #F1EEF7; color: var(--sa-accent-ink); box-shadow: none; }
.sc-btn-split.is-done { background: #F1EEF7; color: #fff; }
.sc-btn-split .sc-split-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(111, 91, 211, .2) 0%, rgba(163, 50, 255, .26) 100%);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.sc-btn-split.is-busy .sc-split-fill { opacity: 1; }
.sc-btn-split .sc-btn-b span { display: inline-block; min-width: 3.4ch; text-align: right; font-variant-numeric: tabular-nums; white-space: pre; }
.sc-stems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sc-stem {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid var(--sa-line);
  background: #FBFAFE;
  color: var(--sa-accent);
}
.sc-stem b { font-size: 13px; font-weight: 600; color: var(--sa-ink); }
.sc-meter {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px;
  margin-left: auto;
}
.sc-meter i {
  display: block;
  width: 3px;
  height: 100%;
  border-radius: 1px;
  background: var(--sa-accent-2);
  transform: scaleY(.1);
  transform-origin: 50% 100%;
  transition: transform .32s var(--sc-ease-out);
}
.sc-stem.is-in .sc-meter i { transform: scaleY(var(--b, .5)); transition-delay: calc(var(--i, 0) * 8ms); }
.sc-stem-len { font-family: var(--font-mono); font-size: 10.5px; color: var(--sa-mute); }

/* ============================================================
   Phones: the card runs edge to edge like Muze's hero, the tabs wrap to
   two rows, and the replica is a reflowed single column at 390 x 490
   (scale about 0.9, app text 13 px or more). Step labels, the Listen
   Live status line and file details are dropped to make room.
   ============================================================ */
/* ============================================================
   DROPDOWN: the select replicas open and walk their options (TTS
   voices, stem methods). Four rows show; the list scrolls by transform.
   ============================================================ */
.sc-select.is-focus { z-index: 5; }
.sc-select.is-focus::before { opacity: 1; }
.sc-select .sc-menu {
  position: absolute;
  left: -1px;
  right: -1px;
  top: calc(100% + 6px);
  height: calc(4 * 30px + 10px);
  padding: 5px;
  border: 1px solid var(--sa-line-2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(45, 42, 55, .05), 0 18px 36px -16px rgba(74, 54, 144, .38);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  opacity: 0;
  transform: translateY(-4px) scale(.985);
  transform-origin: 50% 0;
  pointer-events: none;
  transition: opacity .16s var(--sc-ease-out), transform .2s var(--sc-ease-out);
}
.sc-select .sc-menu.is-open { opacity: 1; transform: none; }
.sc-menu-list {
  position: relative;
  display: block;
  transition: transform .26s var(--sc-ease-out);
}
.sc-menu-hi {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 30px;
  border-radius: 6px;
  background: var(--sa-lav);
  transition: transform .2s var(--sc-ease-out);
}
.sc-menu-list.is-snap, .sc-menu-list.is-snap .sc-menu-hi { transition: none; }
.sc-menu-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px 0 28px;
  font-size: 13px;
  font-weight: 400;
  color: var(--sa-ink);
  transition: transform .16s var(--sc-ease-out);
}
.sc-menu-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-menu-row .sc-check { position: absolute; left: 9px; width: 12px; height: 12px; color: var(--sa-accent); }
.sc-menu-row.is-pressed { transform: scale(.98); }
.sc-menu-row.is-pressed, .sc-menu-row.is-cur { font-weight: 500; }

/* ============================================================
   Converter: Reveal in folder, then the Converted folder over the queue
   ============================================================ */
.sc-queue { position: relative; }
.sc-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--sa-line-2);
  border-radius: 7px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--sa-accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s var(--sc-ease-out), transform .2s var(--sc-ease-out);
}
.sc-reveal .sc-ico { width: 14px; height: 14px; }
.sc-reveal.is-in { opacity: 1; transform: none; }
.sc-reveal.is-in.is-pressed { transform: scale(.95); }
.sc-folder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #fff;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .28s var(--sc-ease-out), transform .32s var(--sc-ease-out);
}
.sc-folder.is-in { opacity: 1; transform: none; }
.sc-folder-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  flex: 0 0 auto;
  padding: 0 14px;
  border-bottom: 1px solid var(--sa-line);
  background: #FAF9FD;
  font-size: 13px;
}
.sc-folder-bar .sc-ico { width: 15px; height: 15px; color: var(--sa-accent-2); }
.sc-lights { position: absolute; left: 14px; top: 50%; display: flex; gap: 6px; margin-top: -5px; }
.sc-lights i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #E2DDEC; }
.sc-folder-n {
  position: absolute;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--sa-mute);
}
.sc-folder-list { padding: 4px 0; }
.sc-folder-list .sc-queue-more { opacity: 1; }
.sc-frow {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 27px;
  padding: 0 16px;
  font-size: 13px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .28s var(--sc-ease-out), transform .28s var(--sc-ease-out);
}
.sc-frow.is-in { opacity: 1; transform: none; }
.sc-frow .sc-ico { width: 15px; height: 15px; color: var(--sa-accent-2); }
.sc-frow-name { font-weight: 500; }
.sc-frow-meta { margin-left: auto; font-size: 12px; color: var(--sa-mute); }

@media (max-width: 768px) {
  .section.tab-showcase { padding: 8px 0 20px; }
  .tab-showcase .section-head { margin-bottom: 26px; }
  .sc-wrap { width: auto; max-width: none; margin-left: -18px; margin-right: -18px; }
  .sc-card { padding: 8px 10px 14px; border-radius: 0; border-left: 0; border-right: 0; }
  .sc-tabs { gap: 2px 18px; margin-bottom: 8px; min-height: 42px; }
  .sc-tab { font-size: 15px; padding: 9px 2px 12px; }
  /* the phone replica never scales past about 1.2 (a tablet held upright) */
  .sc-stage { aspect-ratio: 390 / 490; max-width: 480px; margin: 0 auto; border-radius: 10px; }
  .sc-caption { margin: 12px 6px 0; font-size: 15px; }

  .sc-replica { width: 390px; height: 490px; }
  .sc-app-head { height: 58px; padding: 13px 16px 0; }
  .sc-app-title b { font-size: 20px; }
  .sc-app-title span { font-size: 13px; }
  .sc-app-panel { left: 10px; right: 10px; top: 58px; bottom: 10px; padding: 16px; }
  .sc-app-panel .sc-step-lab { display: none; }
  .sc-btn { font-size: 14px; }

  /* Key and BPM */
  .sc-live { padding: 12px 14px 14px; }
  .sc-live-head .sc-pill, .sc-live-status { display: none; }
  .sc-live-head .sc-btn { margin-left: auto; }
  .sc-bars { height: 36px; margin: 8px 0 10px; }
  .sc-bar { width: 3px; }
  .sc-live-read { gap: 24px; }
  .sc-read-key { flex: 0 0 150px; }
  .sc-read-bpm { flex: 0 0 90px; }
  .sc-lab { font-size: 13px; line-height: 15px; letter-spacing: .12em; }
  .sc-val { height: 30px; font-size: 28px; letter-spacing: -0.02em; line-height: 30px; }
  .sc-drop-area { margin-top: 14px; }
  .sc-dropzone { height: 132px; }
  .sc-dropzone span { font-size: 13px; letter-spacing: .02em; }
  .sc-file {
    display: grid;
    grid-template-columns: 8px 1fr 24px;
    grid-template-rows: 22px 26px;
    gap: 4px 10px;
    align-items: center;
    height: 62px;
    padding: 6px 12px 6px 14px;
  }
  .sc-file .sc-dot { grid-row: 1; grid-column: 1; }
  .sc-file-name { grid-row: 1; grid-column: 2; font-size: 14px; }
  .sc-file .sc-x { grid-row: 1; grid-column: 3; font-size: 13px; }
  .sc-file-meta { display: none; }
  .sc-file-res { grid-row: 2; grid-column: 2 / 4; min-width: 0; }
  .sc-analyzing { justify-self: start; font-size: 13px; }
  .sc-file-chips { justify-content: flex-start; }
  .sc-chip { height: 26px; font-size: 13px; }

  /* Audio Converter */
  .sc-queue { margin-bottom: 12px; }
  .sc-queue-count { font-size: 15px; }
  .sc-row { height: 30px; font-size: 14px; padding: 0 14px; }
  .sc-row-st { height: 18px; font-size: 13px; letter-spacing: .06em; }
  .sc-row-st .sc-check { width: 13px; height: 13px; }
  .sc-queue-more { height: 22px; font-size: 13px; letter-spacing: .02em; padding-left: 30px; }
  .sc-tile:nth-child(n+5) { display: none; }
  .sc-tile b { font-size: 14px; }
  .sc-tile span { font-size: 13px; }
  .sc-tiles { margin-bottom: 12px; }
  .sc-tile { height: 50px; }
  .sc-bitrate { margin-bottom: 12px; }
  .sc-bit { height: 32px; font-size: 14px; }
  .sc-convert { flex-direction: column; align-items: stretch; gap: 10px; height: auto; }
  .sc-btn-wide { width: 100%; height: 40px; }
  .sc-convert-state { height: 28px; }
  .sc-pct { font-size: 13px; width: 48px; }

  /* Text to Speech */
  .sc-textbox { height: 92px; font-size: 14.5px; }
  .sc-count { margin: 6px 0 12px; font-size: 13px; line-height: 16px; }
  .sc-voice { height: 40px; margin-bottom: 12px; font-size: 14px; }
  .sc-btn-gen { margin-bottom: 12px; font-size: 15px; }
  .sc-out { height: 60px; gap: 10px; padding: 0 14px; }
  .sc-out-meta { display: none; }
  .sc-time { font-size: 13px; width: 38px; }
  .sc-wv { height: 52px; }
  .sc-wv i { width: 3px; }
  .sc-out-ctl { padding-left: 0; }
  .sc-playbtn { height: 34px; font-size: 14px; }

  /* Split Stems */
  .sc-src-head { font-size: 14px; }
  .sc-src-meta { display: none; }
  .sc-src-wave i { width: 2px; }
  .sc-src-wave i:nth-child(2n) { display: none; }
  .sc-method { height: 38px; font-size: 14px; }
  .sc-stem-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .sc-stem-chip { justify-content: center; height: 34px; padding: 0 8px; font-size: 14px; }
  .sc-btn-split { height: 42px; }
  .sc-stems { grid-template-columns: repeat(2, 1fr); }
  .sc-stem { height: 32px; padding: 0 10px; }
  .sc-stem b { font-size: 13.5px; }
  .sc-stem-len { display: none; }
}

/* ============================================================
   Reduced motion: each tab shows its finished state, switching is a plain
   short fade (out 100 ms, then in 150 ms), the selected tab keeps a still
   full underline, nothing pulses, the button does not glow.
   ============================================================ */
@media (max-width: 768px) {
  .sc-select .sc-menu { height: calc(4 * 34px + 10px); }
  .sc-menu-hi, .sc-menu-row { height: 34px; }
  .sc-menu-row { font-size: 14px; }
  .sc-frow { height: 30px; font-size: 14px; padding: 0 14px; }
  .sc-frow-meta { font-size: 12.5px; }
  .sc-reveal { font-size: 13px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-tab-bar, .sc-tab-fill { transition: none; }
  .sc-tab[aria-selected="true"] .sc-tab-fill { transform: scaleX(1) !important; }
}
.tab-showcase.is-static .sc-replica *,
.tab-showcase.is-static .sc-replica { transition: none !important; animation: none !important; }
.tab-showcase.is-static .sc-replica *::before,
.tab-showcase.is-static .sc-replica *::after { transition: none !important; animation: none !important; }
.tab-showcase.is-static .sc-caret { display: none; }
.tab-showcase.is-static .sc-panel { transform: none; transition: opacity .1s linear, visibility 0s linear .1s; }
.tab-showcase.is-static .sc-panel.is-on { transition: opacity .15s linear .05s, visibility 0s; }
.tab-showcase.is-static .sc-cap { transition: opacity .08s linear; }
.tab-showcase.is-static .sc-cap.is-on { transition: opacity .12s linear .05s; }

/* Progress fills span the whole button (they were inheriting grid-area 1/1
   from .sc-btn > span, which left an unfilled strip on the left). */
.sc-btn-split .sc-split-fill, .sc-btn-gen .sc-gen-fill { grid-area: auto; }