/* PPUTROLL "Signal" theme — the default look, layered after styles.css.
   Every rule is guarded by :root (inside :where(),
   so the guard adds no specificity); theme.js sets data-theme="night" when a
   visitor chooses the dark theme. Fonts: fonts/pretendard.css. */
/* ==========================================================================
   PPUTROLL TOOLS · Variant D · "Bold Signal"
   --------------------------------------------------------------------------
   0. Brief
   Restyle the existing mastering app (no markup change) as a confident,
   energetic audio product. Mood: confident · punchy · clean.
   Signature: a giant ghost word "MASTERING" standing behind the upload card
   (the card is the cut-out subject in front of the letters) + a floating
   pill header detached from the top edge.
   Supporting (quiet): physical light-page CTA pills in a teal→mint signal
   gradient with navy ink labels, 24px cards with one soft shadow, a short
   blur-rise entrance. No media (CSP + privacy promise): type, gradient and
   motion only.

   1. Fonts
   Pretendard Variable (dynamic subset, jsdelivr @1.3.9) for everything.
   H1 clamp(30px, 4vw, 48px) / 800 / lh 1.1 / -0.04em. Ghost word 900 /
   clamp(64px, 13.4vw, 200px) / -0.055em. Body 15–16px / 400 / lh 1.6.
   Labels 12px / 700 / +0.16em. Buttons 15–16px / 750 / -0.01em.

   2. Colour tokens
   page #fcfcfc, top band #eaf0f3 → #fcfcfc over 760px, cards #fff.
   ink #051a24 (text 100), slate #4b5d68 (body 7:1), muted #5c6c76 (5.4:1),
   line #e2e8ec, line-strong #c4cfd6.
   Accent family: signal #00a3a3 + mint #3fe0c5. The gradient
   (135deg, #3fe0c5 0 → #14c8b6 45% → #00a3a3 100%) is used ONLY on
   .primary-button, the active step and the upload glyph. Text-safe teal
   #008488 (4.5:1), teal-dark #00666a on mint-soft #e6f6f4. Labels on the
   gradient are navy ink (5.7:1 at the darkest stop), never white.
   Selected/pressed states use solid ink #051a24 with white text.

   3. Surfaces
   Cards radius 24px, 1px rgba(5,26,36,.06) hairline, 0 4px 16px rgba(0,0,0,.08).
   Inner panels radius 16–18px on #f4f6f8. Controls: pills (999px); inputs 12–14px.
   CTA shadow (craft "physical"): 0 1px 2px / 0 4px 4px / 0 9px 6px / 0 17px 7px
   rgba(5,26,36,.10/.09/.05/.01) + inset 0 2px 8px rgba(255,255,255,.5);
   hover adds 0 10px 26px rgba(0,163,163,.30), translateY(-1px) scale(1.02);
   active scale(.98). Main drop-zone CTA gets a 40px ink arrow chip
   (concentric: 56px pill, 8px inset).

   4. Header
   In flow (never overlaps content): width min(1120px, 100% - 40px), margin
   14px auto 0, height 64px, padding 0 12px, radius 999px, white 84% + blur
   16px, hairline, layered shadow. Logo disc 40px ink (concentric with the
   pill's 32px end radius). Links are 40px soft-grey chips; the donate link is
   the one solid ink chip. Multi-row header states (≤1000 non-tune,
   761–1050 tune, ≤650 all) switch to a 22–24px radius.

   5. Ghost word
   ::before on .wide-shell / .process-shell (isolated, z -1, pointer-events
   none, content alt ""), ink fading 7.5% → 1.5% top to bottom, centred with
   flex and clipped horizontally (overflow-x: clip) so it never widens the
   page. Caps start ~24px below the shell top; the card covers the lower
   ~35% of the letters. "MASTER" under 560px. Hidden in high contrast.

   6. Motion (ease cubic-bezier(.16,1,.3,1))
   header fade-down 0→.7s; steps rise .08s; card rise .16s (.9s, y 24px);
   glyph pop .28s; eyebrow blur-rise .30s; H1 blur-rise .38s (1s, blur 10px);
   sub rise .50s. Done by ~1.4s. Ghost fades in (1.4s, opacity only).
   Hovers ≤ scale 1.03. Not animated: backgrounds, ghost after entrance.
   prefers-reduced-motion: no animation, final state shown.

   7. Responsive
   ≤760: card padding 28px 20px, heading stacks (glyph above), H1 ~32px.
   ≤650: header floats 10px from the edges, 22px radius, A's swipeable link
   row clipped by the card. No horizontal overflow at 390px.
   ========================================================================== */


:root{
  --font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --page: #fcfcfc;
  --band: #eaf0f3;
  --ink: #051a24;
  --navy: #051a24;
  --ink-2: #1d313b;
  --slate: #4b5d68;
  --muted: #5c6c76;
  --line: #e2e8ec;
  --line-strong: #c4cfd6;
  --soft: #f4f6f8;
  --chip: #eff3f5;
  --chip-hover: #e3eaee;
  --surface: #fff;
  --teal: #008488;
  --teal-dark: #00666a;
  --teal-bright: #00a3a3;
  --teal-soft: #e6f6f4;
  --signal: #00a3a3;
  --mint: #3fe0c5;
  --signal-grad: linear-gradient(135deg, #3fe0c5 0%, #14c8b6 45%, #00a3a3 100%);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --hairline: rgba(5, 26, 36, .07);
  --shadow: 0 4px 16px rgba(0, 0, 0, .08);
  --shadow-lift: 0 2px 4px rgba(5, 26, 36, .05), 0 14px 32px rgba(5, 26, 36, .1);
  --shadow-press: 0 1px 2px rgba(5, 26, 36, .1), 0 4px 4px rgba(5, 26, 36, .09), 0 9px 6px rgba(5, 26, 36, .05), 0 17px 7px rgba(5, 26, 36, .01), 0 26px 7px rgba(5, 26, 36, 0), inset 0 2px 8px rgba(255, 255, 255, .5);
  --ring: 0 0 0 3px #00a3a3;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-quint: cubic-bezier(.22, 1, .36, 1);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23051a24' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --arrow-up-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E");
  --arrow-up-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000b22' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E");
}

/* Page band first: no white flash, cool band behind the header and ghost word. */
:root{ background: var(--page); }
:where(:root) body{
  color: var(--ink);
  background: linear-gradient(180deg, var(--band) 0, #f3f6f8 380px, var(--page) 760px) no-repeat, var(--page);
  font-family: var(--font);
  -moz-osx-font-smoothing: grayscale;
}
:where(:root) ::selection{ background: rgba(0, 163, 163, .24); }

:where(:root) button:focus-visible, :where(:root) input:focus-visible, :where(:root) select:focus-visible, :where(:root) summary:focus-visible, :where(:root) a:focus-visible{
  outline: 3px solid var(--signal);
  outline-offset: 2px;
}

/* ---------- Floating pill header ---------- */
:where(:root) body[data-screen] .app-header{
  width: min(1120px, calc(100% - 40px));
  margin: 14px auto 0;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(255, 255, 255, .84);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  box-shadow: 0 1px 2px rgba(5, 26, 36, .05), 0 8px 24px rgba(5, 26, 36, .07), 0 24px 48px -24px rgba(5, 26, 36, .14);
}
@media (min-width: 1001px) {
  :where(:root) body:not([data-screen="tune"]) .app-header{ height: 64px; padding: 0 12px; }
}
@media (min-width: 1051px) {
  :where(:root) body[data-screen="tune"] .app-header{ height: 64px; padding: 0 12px; gap: 28px; }
}
:where(:root) body[data-screen] .brand{ gap: 12px; color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
:where(:root) body[data-screen] .brand-mark{
  display: block;
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 6px rgba(5, 26, 36, .2);
  stroke-width: 2.3;
}
:where(:root) .header-actions{ gap: 6px; }
:where(:root) .access-button{
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--ink-2);
  background: var(--chip);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.01em;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
:where(:root) a.access-button{ color: var(--ink-2); }
:where(:root) .access-button b{ font-size: 16px; font-weight: 700; }
:where(:root) .access-button:hover{ color: var(--ink); background: var(--chip-hover); box-shadow: none; }
:where(:root) .access-button[aria-pressed="true"]{ color: var(--teal-dark); background: var(--teal-soft); box-shadow: inset 0 0 0 1.5px var(--signal); }
:where(:root) .support-link, :where(:root) a.support-link{ color: #fff; background: var(--ink); }
:where(:root) .support-link:hover, :where(:root) a.support-link:hover{ color: #fff; background: #12303d; }
:where(:root) .header-project, :where(:root) .outline-button, :where(:root) .icon-button, :where(:root) .reset-button{ border-radius: 999px; }
:where(:root) .header-project{ min-height: 40px; border-color: var(--line); color: var(--ink-2); font-weight: 600; }
:where(:root) .header-actions .icon-button{ width: 40px; min-height: 40px; }
:where(:root) .export-shortcut{ min-height: 40px; color: var(--ink); }

/* Tune-screen stepper: a soft track, the active step in the signal gradient. */
:where(:root) .compact-stepper{ height: 44px; padding: 4px; gap: 2px; border: 0; border-radius: 999px; background: var(--chip); }
:where(:root) .compact-stepper button{ height: 36px; padding: 0 14px 0 5px; border-radius: 999px; color: var(--slate); font-weight: 600; }
:where(:root) .compact-stepper button span{ width: 26px; height: 26px; border: 0; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 12px; font-weight: 700; }
:where(:root) .compact-stepper button[aria-current="step"]{ color: var(--ink); background: var(--signal-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 8px rgba(0, 163, 163, .25); font-weight: 750; }
:where(:root) .compact-stepper button[aria-current="step"] span{ color: #fff; background: var(--ink); box-shadow: none; }
:where(:root) .compact-stepper i{ color: #9aa8b1; font-size: 18px; }

:where(:root) .job-banner{ width: min(1120px, calc(100% - 40px)); margin: 10px auto 0; border-radius: 999px; color: var(--teal-dark); background: var(--teal-soft); }

/* ---------- Step indicator ---------- */
:where(:root) .workflow-steps{
  margin: 4px auto 22px;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 2px rgba(5, 26, 36, .04), 0 6px 18px rgba(5, 26, 36, .06);
  color: var(--slate);
  font-size: 13.5px;
}
:where(:root) .workflow-steps li{ padding: 5px 16px 5px 5px; font-weight: 600; }
:where(:root) .workflow-steps li > span{ width: 26px; height: 26px; border: 1px solid var(--line-strong); color: var(--slate); background: #fff; font-weight: 700; }
:where(:root) .workflow-steps [aria-current="step"]{ color: var(--ink); background: var(--signal-grad); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 10px rgba(0, 163, 163, .28); font-weight: 750; }
:where(:root) .workflow-steps [aria-current="step"] > span{ border-color: var(--ink); color: #fff; background: var(--ink); }

/* ---------- Shared surfaces and controls ---------- */
:where(:root) .surface-card{ border-color: var(--hairline); border-radius: var(--radius-lg); background: #fff; }
:where(:root) .primary-button{
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--signal-grad);
  box-shadow: var(--shadow-press);
  font-weight: 750;
  letter-spacing: -.01em;
  transition: transform .25s var(--ease-quint), box-shadow .25s ease, filter .2s ease;
}
:where(:root) a.primary-button{ text-decoration: none; }
:where(:root) .primary-button:hover{ transform: translateY(-1px) scale(1.02); box-shadow: var(--shadow-press), 0 10px 26px rgba(0, 163, 163, .3); filter: saturate(1.08); }
:where(:root) .primary-button:active{ transform: scale(.98); }
:where(:root) .primary-button:focus-visible{ outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: var(--shadow-press); }
:where(:root) .primary-button:disabled, :where(:root) .primary-button:disabled:hover{ color: #56666f; background: #e4eaed; box-shadow: inset 0 0 0 1px #d3dce1; opacity: 1; transform: none; filter: none; }
:where(:root) .outline-button{ border-color: var(--line-strong); color: var(--ink); font-weight: 650; }
:where(:root) .outline-button:hover, :where(:root) .icon-button:hover, :where(:root) .reset-button:hover, :where(:root) .header-project:hover{ border-color: var(--ink); color: var(--ink); background: #fff; box-shadow: none; }
:where(:root) .text-button{ color: var(--teal-dark); }
:where(:root) .genre-required-choice select,
:where(:root) .result-genre-label select,
:where(:root) .batch-options select,
:where(:root) .settings-dialog select{ min-height: 48px; border-color: var(--line-strong); border-radius: 14px; color: var(--ink); background-color: #fff; }
:where(:root) .genre-required-choice select:hover,
:where(:root) .result-genre-label select:hover,
:where(:root) .batch-options select:hover,
:where(:root) .settings-dialog select:hover{ border-color: var(--ink); }

/* ---------- Ghost word (signature) ---------- */
/* The step pill sits above the word; the card covers the foot of the letters. */
:where(:root) .upload-screen .wide-shell, :where(:root) .process-screen .process-shell{ position: relative; isolation: isolate; padding-top: 24px; }
:where(:root) .upload-screen .wide-shell::before, :where(:root) .process-screen .process-shell::before{
  content: "MASTERING";
  content: "MASTERING" / "";
  position: absolute;
  z-index: -1;
  top: 50px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  overflow-x: clip;
  color: transparent;
  background: linear-gradient(180deg, rgba(5, 26, 36, .08) 20%, rgba(5, 26, 36, .02) 80%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(64px, 12.5vw, 190px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.055em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  animation: d-ghost 1.4s var(--ease-out) both;
}

/* ---------- Upload ---------- */
:where(:root) .upload-card{
  width: min(1000px, 100%);
  margin-top: clamp(40px, 5.9vw, 84px); /* collapses with the 22px step margin */
  padding: 52px 56px 44px;
  border-color: var(--hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
:where(:root) .upload-heading{ align-items: flex-start; gap: 26px; margin-bottom: 36px; }
:where(:root) .round-feature{
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  margin-top: 2px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--signal-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 22px rgba(0, 163, 163, .26);
}
:where(:root) .round-feature svg{ width: 34px; height: 34px; stroke-width: 2.3; }
:where(:root) .upload-heading .eyebrow{ margin: 0 0 12px; color: var(--teal); font-size: 12px; font-weight: 700; letter-spacing: .16em; }
:where(:root) .upload-heading h1{
  max-width: 8em;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
}
:where(:root) .upload-heading h1 + p{ max-width: 36rem; color: var(--slate); font-size: 16px; line-height: 1.6; }
:where(:root) .developer-entry{
  padding: 16px 16px 16px 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--soft);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s var(--ease-quint);
}
:where(:root) .developer-entry strong{ color: var(--ink); font-weight: 750; }
:where(:root) .developer-entry small{ color: var(--slate); }
:where(:root) .developer-entry > span:last-child{ width: 40px; height: 40px; color: #fff; background: var(--ink); font-size: 16px; transition: transform .3s var(--ease-quint); }
:where(:root) .developer-entry:hover{ border-color: rgba(0, 163, 163, .45); background: #fff; box-shadow: 0 8px 22px rgba(5, 26, 36, .08); transform: translateY(-1px); }
:where(:root) .developer-entry:hover > span:last-child{ transform: scale(1.06); }
:where(:root) .genre-required-choice{ margin: 16px 0 18px; padding: 20px 22px; border-color: var(--line); border-radius: 18px; background: var(--soft); }
:where(:root) .genre-required-choice.is-selected{ border-color: rgba(0, 163, 163, .5); background: var(--teal-soft); }
:where(:root) .genre-required-choice label{ color: var(--ink); font-weight: 750; }
:where(:root) .genre-required-choice p{ color: var(--slate); }
:where(:root) .fade-settings{ border-color: var(--line); border-radius: 18px; }
:where(:root) .fade-settings legend{ color: var(--ink); font-weight: 750; }
:where(:root) .fade-duration input{ border-radius: 12px; }
:where(:root) .drop-zone{
  min-height: 300px;
  border: 2px dashed #c3cfd7;
  border-radius: 20px;
  background: radial-gradient(110% 85% at 50% 0, rgba(0, 163, 163, .06), rgba(0, 163, 163, 0) 60%), #fbfcfd;
}
:where(:root) .drop-zone:hover{ border-color: rgba(0, 163, 163, .6); }
:where(:root) .drop-zone.dragging{ border-color: var(--signal); background: var(--teal-soft); }
:where(:root) .drop-zone > svg{
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 50%;
  color: #fff;
  background: var(--ink);
  box-shadow: 0 10px 22px rgba(5, 26, 36, .18);
  stroke-width: 2.2;
}
:where(:root) .drop-zone h2{ color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
:where(:root) .drop-zone p{ color: var(--slate); }
:where(:root) .drop-zone small{ color: var(--muted); }
:where(:root) .drop-zone .primary-button{ gap: 14px; min-height: 56px; padding: 0 8px 0 28px; font-size: 16px; }
:where(:root) .drop-zone .primary-button::after{
  content: "";
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink) var(--arrow-up-white) center / 18px no-repeat;
  transition: transform .3s var(--ease-quint), background-color .2s ease;
}
:where(:root) .drop-zone .primary-button:hover::after{ transform: translateY(-2px); }
:where(:root) .drop-zone .primary-button:disabled::after{ background-color: #a9b6be; transform: none; }
:where(:root) .privacy-row{ padding: 16px 20px; border-radius: 16px; color: var(--slate); background: var(--soft); }
:where(:root) .privacy-row svg{ color: var(--teal); }
:where(:root) .rights-note a, :where(:root) .site-notices a{ color: var(--teal-dark); }
:where(:root) .optional-tools{ border-color: var(--line); border-radius: 18px; }
:where(:root) .optional-tools[open]{ border-color: rgba(0, 163, 163, .4); box-shadow: var(--shadow); }
:where(:root) .optional-tools > summary{ padding: 18px 20px 18px 22px; border-radius: 18px; }
:where(:root) .optional-tools summary strong{ color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
:where(:root) .optional-tools summary small{ color: var(--muted); }
:where(:root) .disclosure-mark{ width: 36px; height: 36px; color: var(--ink); background: var(--chip); font-size: 20px; }
:where(:root) .optional-tools > summary:hover .disclosure-mark{ background: var(--chip-hover); }
:where(:root) .optional-tools[open] > summary .disclosure-mark{ color: #fff; background: var(--ink); }
:where(:root) .studio-box, :where(:root) .batch-drop, :where(:root) .batch-progress, :where(:root) .live-preview-panel{ border-radius: 16px; }
:where(:root) .preview-toggle{ min-height: 40px; padding: 8px 16px; border-radius: 999px; color: var(--ink-2); font-size: 13px; }
:where(:root) .preview-toggle[aria-pressed="true"]{ border-color: var(--ink); color: #fff; background: var(--ink); }
:where(:root) .choice-row button, :where(:root) .trim-action-group button, :where(:root) .trim-utility-button{ border-radius: 12px; }
:where(:root) .site-notices{ border-top-color: var(--line); color: var(--slate); }

/* ---------- Processing ---------- */
:where(:root) .processing-card{ margin-top: clamp(40px, 5.9vw, 84px); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
:where(:root) .file-icon{ border-radius: 18px; color: var(--ink); background: var(--soft); }
:where(:root) .file-summary strong{ color: var(--ink); font-weight: 800; letter-spacing: -.03em; }
:where(:root) .file-summary .outline-button{ border-color: var(--line-strong); }
:where(:root) .progress-orb{ background: conic-gradient(var(--signal) calc(var(--progress) * 1%), #e3e9ed 0); }
:where(:root) .progress-orb > div{ color: var(--ink); }
:where(:root) .progress-line{ background: #e3e9ed; }
:where(:root) .progress-line span{ background: var(--signal); }
:where(:root) .analysis-copy h1{ color: var(--ink); font-weight: 800; letter-spacing: -.04em; }
:where(:root) .progress-meta > strong{ color: var(--teal-dark); }
:where(:root) .analysis-tasks li.active em{ color: var(--teal-dark); background: var(--teal-soft); }

/* ---------- Result / compare ---------- */
:where(:root) .beginner-result h1{ color: var(--ink); font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; line-height: 1.12; letter-spacing: -.04em; }
:where(:root) .beginner-result p{ color: var(--slate); font-size: 16px; }
:where(:root) .uploaded-strip{ padding: 12px 12px 12px 20px; border-color: var(--hairline); border-radius: 18px; box-shadow: var(--shadow); }
:where(:root) .uploaded-strip > div strong{ color: var(--ink); font-size: 15px; font-weight: 750; }
:where(:root) .uploaded-strip .outline-button{ min-height: 40px; padding-inline: 16px; font-size: 13px; }
:where(:root) .result-master-settings{ padding: 28px 32px; border-color: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
:where(:root) .result-master-settings h2{ color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
/* On the result screen export is the one primary CTA; re-mastering is the ink-outline secondary. */
:where(:root) .result-master-settings .primary-button{ color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 2px rgba(5, 26, 36, .08); }
:where(:root) .result-master-settings .primary-button:hover{ box-shadow: inset 0 0 0 1.5px var(--ink), 0 8px 20px rgba(5, 26, 36, .12); filter: none; }
:where(:root) .ab-player{ border-color: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
:where(:root) .ab-player > header{ padding: 16px 24px; border-bottom-color: var(--line); color: var(--ink); }
:where(:root) .active-track-label{ padding: 5px 12px; border: 0; border-radius: 999px; color: var(--teal-dark); background: var(--teal-soft); box-shadow: inset 0 0 0 1px rgba(0, 163, 163, .35); }
:where(:root) .listen-choices{ padding: 18px 24px; gap: 12px; }
:where(:root) .listen-choice{ min-height: 56px; border-color: var(--line-strong); border-radius: 16px; color: var(--ink); font-weight: 750; }
:where(:root) .listen-choice:not([aria-pressed="true"]):not(:disabled):hover{ border-color: var(--ink); color: var(--ink); background: #fff; }
:where(:root) .listen-choice[aria-pressed="true"]{ border-color: var(--ink); color: #fff; background: var(--ink); box-shadow: 0 6px 16px rgba(5, 26, 36, .2); }
:where(:root) .wave-row{ background: #f7f9fa; }
:where(:root) .wave-row.selected{ background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--signal); }
:where(:root) .wave-source-label{ border-radius: 999px; color: var(--slate); }
:where(:root) .wave-row.selected .wave-source-label{ color: var(--teal-dark); }
:where(:root) .playhead, :where(:root) .playhead::before{ background: var(--ink); }
:where(:root) .transport .transport-play{ height: 44px; border-color: var(--ink); border-radius: 999px; color: #fff; background: var(--ink); }
:where(:root) .transport .transport-play:hover{ background: #12303d; }
:where(:root) .transport .transport-seek{ border-radius: 14px; color: var(--ink); }
:where(:root) .transport .transport-seek:hover{ color: var(--teal-dark); background: var(--teal-soft); }
:where(:root) .export-panel{ padding: 28px 32px 24px; border-color: var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
:where(:root) .export-panel-heading strong{ color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
:where(:root) .format-option > span{ border-color: var(--line); border-radius: 16px; }
:where(:root) .format-option b{ color: var(--ink); }
:where(:root) .format-option input:checked + span{ border-color: var(--ink); color: var(--ink); background: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
:where(:root) .format-option input:checked + span::after{ border-color: var(--ink); background: var(--ink); }
:where(:root) .export-cta .primary-button{ min-height: 56px; padding-inline: 32px; }
:where(:root) .compare-section{ border-color: var(--line); border-radius: 18px; }
:where(:root) .headphone-badge, :where(:root) .trim-safe-badge{ color: var(--teal-dark); background: var(--teal-soft); }

/* ---------- Tune ---------- */
:where(:root) .page-title h1{ color: var(--ink); font-weight: 800; letter-spacing: -.04em; }
:where(:root) .preset-card{ border-radius: 20px; }
:where(:root) .preset-card > svg:first-child{ color: var(--teal); }

/* ---------- Dialog and notices ---------- */
:where(:root) .settings-dialog{ border-radius: var(--radius-lg); }
:where(:root) .toast{ border-radius: 16px; background: rgba(5, 26, 36, .95); }

/* ---------- Entrance (blur-rise) ---------- */
@keyframes d-down { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes d-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes d-blur-rise { from { opacity: 0; transform: translateY(22px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes d-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }
@keyframes d-ghost { from { opacity: 0; } to { opacity: 1; } }
:where(:root) .app-header{ animation: d-down .7s var(--ease-out) both; }
:where(:root) .screen.active .workflow-steps{ animation: d-rise .8s var(--ease-out) .08s both; }
:where(:root) .upload-screen.active .upload-card, :where(:root) .process-screen.active .processing-card{ animation: d-rise .9s var(--ease-out) .16s both; }
:where(:root) .upload-screen.active .round-feature{ animation: d-pop .8s var(--ease-quint) .28s both; }
:where(:root) .upload-screen.active .upload-heading .eyebrow{ animation: d-blur-rise .9s var(--ease-out) .3s both; }
:where(:root) .upload-screen.active .upload-heading h1,
:where(:root) .compare-screen.active .beginner-result h1{ animation: d-blur-rise 1s var(--ease-out) .38s both; }
:where(:root) .upload-screen.active .upload-heading h1 + p,
:where(:root) .compare-screen.active .beginner-result p{ animation: d-rise .9s var(--ease-out) .5s both; }

/* ---------- High contrast: strong edges, no ghost, solid ink CTA ---------- */
:where(:root) body.high-contrast{
  --slate: #1d2b34;
  --muted: #26353f;
  --ink-2: #000712;
  --soft: #fff;
  --chip: #fff;
  --chip-hover: #eef2f4;
  --teal-soft: #fff;
  --hairline: #344054;
  --signal: #004e54;
  --shadow: none;
}
:where(:root) body.high-contrast .upload-screen .wide-shell::before,
:where(:root) body.high-contrast .process-screen .process-shell::before{ content: none; display: none; }
:where(:root) body.high-contrast .app-header{ border: 2px solid #000712; background: #fff; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root) body.high-contrast .access-button{ color: #000712; background: #fff; box-shadow: inset 0 0 0 1.5px #344054; }
:where(:root) body.high-contrast .access-button[aria-pressed="true"], :where(:root) body.high-contrast .support-link{ color: #fff; background: #000b22; box-shadow: none; }
:where(:root) body.high-contrast .primary-button{ color: #fff; background: #000b22; box-shadow: none; }
:where(:root) body.high-contrast .primary-button:disabled{ color: #1d2b34; background: #e9edf0; box-shadow: inset 0 0 0 2px #344054; }
:where(:root) body.high-contrast .drop-zone .primary-button::after{ background: #fff var(--arrow-up-ink) center / 18px no-repeat; }
:where(:root) body.high-contrast .drop-zone .primary-button:disabled::after{ background-color: #fff; }
:where(:root) body.high-contrast .workflow-steps [aria-current="step"],
:where(:root) body.high-contrast .compact-stepper button[aria-current="step"]{ color: #fff; background: #000b22; box-shadow: none; }
:where(:root) body.high-contrast .workflow-steps [aria-current="step"] > span,
:where(:root) body.high-contrast .compact-stepper button[aria-current="step"] span{ border-color: #fff; color: #000b22; background: #fff; }
:where(:root) body.high-contrast .round-feature{ color: #fff; background: #000b22; box-shadow: none; }
:where(:root) body.high-contrast .surface-card, :where(:root) body.high-contrast .uploaded-strip, :where(:root) body.high-contrast .result-master-settings,
:where(:root) body.high-contrast .export-panel, :where(:root) body.high-contrast .workflow-steps{ border: 2px solid #344054; box-shadow: none; }
:where(:root) body.high-contrast .developer-entry, :where(:root) body.high-contrast .genre-required-choice, :where(:root) body.high-contrast .fade-settings,
:where(:root) body.high-contrast .privacy-row, :where(:root) body.high-contrast .optional-tools{ border: 1.5px solid #344054; background: #fff; }
:where(:root) body.high-contrast .drop-zone{ border-color: #344054; background: #fff; }
:where(:root) body.high-contrast .disclosure-mark{ box-shadow: inset 0 0 0 1.5px #344054; }
:where(:root) body.high-contrast .wave-row.selected{ background: #fff; }
:where(:root) body.high-contrast .active-track-label{ color: #000712; box-shadow: inset 0 0 0 1.5px #000712; }

/* ---------- Large text (zoom 1.12 on header and main) ---------- */
:where(:root) body.large-text[data-screen] .app-header{ width: calc(min(1120px, 100% - 40px) / 1.12); margin: 12px auto 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1250px) {
  :where(:root) .compact-stepper button{ padding: 0 10px 0 5px; }
}
@media (min-width: 651px) and (max-width: 1000px) {
  /* Keep brand and links on one row while they fit; links wrap on the right before the brand moves. */
  :where(:root) body:not([data-screen="tune"]) .app-header{ grid-template-columns: auto minmax(0, 1fr); min-height: 64px; padding: 10px 12px; border-radius: 32px; }
  :where(:root) body:not([data-screen="tune"]) .access-actions{ justify-content: flex-end; flex-wrap: wrap; }
}
@media (min-width: 761px) and (max-width: 1050px) {
  :where(:root) body[data-screen="tune"] .app-header{ padding: 12px; border-radius: 26px; }
}
@media (max-width: 760px) {
  :where(:root) body[data-screen] .brand{ gap: 10px; font-size: 18px; }
  :where(:root) body[data-screen] .brand-mark{ width: 34px; height: 34px; padding: 7px; }
  :where(:root) .access-button{ min-height: 38px; padding-inline: 13px; font-size: 12.5px; }
  :where(:root) .upload-screen .wide-shell::before, :where(:root) .process-screen .process-shell::before{ top: 64px; }
  :where(:root) .upload-card{ margin-top: 58px; padding: 28px 20px 24px; border-radius: 22px; }
  :where(:root) .upload-heading{ flex-direction: column; gap: 16px; margin-bottom: 24px; }
  :where(:root) .round-feature{ flex-basis: auto; width: 52px; height: 52px; border-radius: 16px; }
  :where(:root) .round-feature svg{ width: 28px; height: 28px; }
  :where(:root) .upload-heading .eyebrow{ margin-bottom: 10px; font-size: 11.5px; letter-spacing: .14em; }
  :where(:root) .upload-heading h1{ font-size: clamp(28px, 8.2vw, 36px); }
  :where(:root) .upload-heading h1 + p{ font-size: 15px; }
  :where(:root) .developer-entry{ padding: 14px 14px 14px 18px; }
  :where(:root) .genre-required-choice{ padding: 16px; }
  :where(:root) .drop-zone{ min-height: 280px; }
  :where(:root) .drop-zone h2{ font-size: 21px; }
  :where(:root) .privacy-row{ padding: 14px 16px; }
  :where(:root) .processing-card{ margin-top: 58px; }
  :where(:root) .result-master-settings, :where(:root) .export-panel{ padding: 20px 16px; border-radius: 22px; }
  :where(:root) .ab-player{ border-radius: 22px; }
  :where(:root) .listen-choices{ padding: 14px; gap: 8px; }
  :where(:root) .uploaded-strip{ padding: 12px 12px 12px 16px; }
  :where(:root) body.large-text[data-screen] .brand{ gap: 6px; font-size: 16px; }
  :where(:root) body.large-text .upload-heading h1{ font-size: clamp(25px, 7vw, 32px); }
}
@media (max-width: 700px) {
  :where(:root) .workflow-steps{ padding: 4px; gap: 2px; font-size: 12px; }
  :where(:root) .workflow-steps li{ padding: 4px 10px 4px 4px; }
  :where(:root) .workflow-steps li > span{ width: 23px; height: 23px; }
}
@media (max-width: 650px) {
  :where(:root) body[data-screen] .app-header{ width: calc(100% - 20px); margin-top: 10px; border-radius: 22px; overflow: clip; }
  :where(:root) body.large-text[data-screen] .app-header{ width: calc((100% - 20px) / 1.12); margin-top: 9px; }
  :where(:root) .job-banner{ width: calc(100% - 20px); border-radius: 18px; }
  :where(:root) .primary-button{ min-height: 52px; }
}
@media (max-width: 560px) {
  /* Phones: the step pill sits above the word, the card covers its foot. */
  :where(:root) .upload-screen .wide-shell::before, :where(:root) .process-screen .process-shell::before{ content: "MASTER"; content: "MASTER" / ""; top: 72px; font-size: 20vw; }
}
@media (max-width: 380px) {
  :where(:root) .workflow-steps li{ padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  :where(:root) .app-header,
  :where(:root) .screen.active .workflow-steps,
  :where(:root) .upload-screen.active .upload-card, :where(:root) .process-screen.active .processing-card,
  :where(:root) .upload-screen.active .round-feature,
  :where(:root) .upload-screen.active .upload-heading .eyebrow,
  :where(:root) .upload-screen.active .upload-heading h1, :where(:root) .compare-screen.active .beginner-result h1,
  :where(:root) .upload-screen.active .upload-heading h1 + p, :where(:root) .compare-screen.active .beginner-result p,
  :where(:root) .upload-screen .wide-shell::before, :where(:root) .process-screen .process-shell::before{ animation: none !important; }
  :where(:root) .primary-button, :where(:root) .developer-entry, :where(:root) .drop-zone .primary-button::after, :where(:root) .developer-entry > span:last-child{ transition: none; }
  :where(:root) .primary-button:hover, :where(:root) .developer-entry:hover{ transform: none; }
}