/* Mirinex. Palette B ("voice pops"): coral is the only bright colour, used for the voice
   and the one main action; music is a quieter slate that stays readable. Colour lives in the
   waveform and footage, never in decoration. Type: Inter (OFL, self-hosted, fonts/Inter-LICENSE.txt). */
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* More of Inter for the site's languages (Polish, Turkish, Czech, Vietnamese, Russian, Greek…): each file downloads
   only when a page uses its characters. Later faces take precedence within their ranges. */
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-cyrillic-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-cyrillic.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-greek-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-greek.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-vietnamese.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "Inter"; src: url("fonts/InterVariable-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg: #0b0b0e;
  --panel: #15151b;
  --line: #26262f;
  --text: #f2f1ee;
  --muted: #a09fa9;
  --voice: #9ee3f5;
  --music: #a08cff;
  --wave-voice: rgba(158,227,245,.85);
  --wave-music: rgba(160,140,255,.55);
  --ease: cubic-bezier(.2,.8,.2,1);
  --spring: cubic-bezier(.34,1.4,.64,1);
  --radius: 22px;
  --font: "Inter", ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --raised: #1b1b22; --raised-2: #2a2a33; --edge: #3a3a46; --dash: #34343f; --dot: #4a4a56; --track: #22222a; --hover: #16161c;
  --on-voice: #0b0b0e; --voice-hover: #c8f2fb; --doc-text: #cfced6; --drop-shadow: rgba(0,0,0,.9);
  --wave-mix: #cfd0d8; --playhead: #f2f1ee; --wave-idle: #3a3a46; --voice-floor: .42; --music-floor: .58;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
:focus-visible { outline: 2px solid var(--voice); outline-offset: 2px; border-radius: 8px; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.top { display: flex; align-items: center; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 22px 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.01em; text-decoration: none; }
/* The Mirinex wordmark (site/tools/brand_mark.py): the white name, nothing beside it. The first page of a visit
   reveals it once, left to right behind a soft edge (html.mx-seen, set in each page's <head>, skips it after). */
.wm { display: inline-block; line-height: 1; white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, #000 42%, transparent 58%); mask-image: linear-gradient(90deg, #000 42%, transparent 58%);
  -webkit-mask-size: 320% 100%; mask-size: 320% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 0; mask-position: 0 0; animation: wm-reveal 1.1s cubic-bezier(.33, .7, .25, 1) .12s backwards; }
@keyframes wm-reveal { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
.mx-seen .wm { animation: none; }
@media (prefers-reduced-motion: reduce) { .wm { animation: none; } }
.top nav { display: flex; gap: 22px; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a[aria-current], .top nav a:hover { color: var(--text); }

.hero { max-width: 980px; margin: 0 auto; padding: 56px 24px 24px; text-align: center; }
h1 { font: 460 clamp(36px, 6vw, 64px)/1.04 var(--display); letter-spacing: -0.04em; margin: 0 0 16px; }
h1 em { font-style: normal; color: inherit; }
.lede { color: var(--muted); font-size: 19px; margin: 0 auto 36px; max-width: 520px; }
.tool { max-width: 820px; margin: 0 auto; }

.tool { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: left;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 40px 100px -60px var(--drop-shadow); }
.tool > * { display: none; }
.tool[data-state="idle"] .drop, .tool[data-state="working"] .work, .tool[data-state="result"] .result, .tool[data-state="error"] .error, .tool[data-state="batch"] .batch { display: block; animation: enter .32s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px) scale(.995); } }

.drop { position: relative; height: 260px; border-radius: calc(var(--radius) - 8px); border: 1.5px dashed var(--dash); overflow: hidden; cursor: pointer; transition: border-color .2s, background .2s; }
.drop { transition: border-color .2s var(--ease), background .2s var(--ease), transform .25s var(--spring); }
.drop:hover, .drop.over { border-color: var(--voice); background: rgba(158,227,245,.04); }
.drop.over { transform: translateY(-3px) scale(1.006); }
.wave { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.drop-cta { position: absolute; inset: auto 0 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hint { color: var(--muted); font-size: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; border: 0; border-radius: 999px; padding: 13px 26px; min-height: 48px; background: var(--text); color: #0b0b0e; font-weight: 650; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; transition: background .15s var(--ease), transform .15s var(--ease); }
.btn:hover { background: #fff; }
.btn:active, .play:active, .seg button:active { transform: scale(.97); }
.link { background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 8px; }

.work { padding: 34px 26px 22px; }
.fname { margin: 0 0 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 10px; }
.steps li { color: var(--muted); padding-left: 26px; position: relative; }
.steps li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--dot); }
.steps li.now { color: var(--text); }
.steps li.now::before { border-color: var(--voice); background: var(--voice); box-shadow: 0 0 0 5px rgba(158,227,245,.18); animation: pulse 1.4s infinite; }
.steps li.done::before { border-color: rgba(158,227,245,.55); background: rgba(158,227,245,.55); }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(158,227,245,.05); } }
.bar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--voice); transition: width .5s var(--ease); }

.stage { border-radius: calc(var(--radius) - 8px); overflow: hidden; background: #000; }
.result video { width: 100%; display: block; max-height: 460px; cursor: pointer; }
.mix { padding: 20px 10px 6px; }
.mix-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.mix-head output { color: var(--muted); font-variant-numeric: tabular-nums; }
.actions { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 8px; }

.error { padding: 40px 26px; text-align: center; }
.error p { margin: 0 0 8px; }

.privacy { color: var(--muted); font-size: 14px; margin: 20px 0 0; }

.points { max-width: 1080px; margin: 56px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.points div { border-top: 1px solid var(--line); padding-top: 18px; }
.points h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -0.01em; }
.points p { margin: 0; color: var(--muted); font-size: 15px; }
.explain { max-width: 640px; margin: 56px auto; padding: 0 24px; color: var(--muted); font-size: 15px; text-align: center; }
.foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; max-width: 1080px; margin: 0 auto; padding: 22px 24px 40px; }
.foot p { margin: 0; }

@media (max-width: 720px) {
  .top nav a:not([aria-current]) { display: none; }
  .hero { padding-top: 28px; }
  .drop { height: 220px; }
  .points { grid-template-columns: 1fr; }
  .foot { flex-direction: column; gap: 8px; }
}

.paywall { padding: 22px 10px 10px; text-align: center; }
.pw-tag { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; font-size: 13px; color: var(--voice); background: rgba(158,227,245,.1); }
/* A preview names itself at the top of the result; a tap goes to the plans. */
.pw-jump { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: calc(100% - 20px); margin: -2px 10px 14px; padding: 6px 14px; border: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pw-jump::after { content: '↓'; font-weight: 700; }
.pw-jump[hidden] { display: none; }
.paywall h2 { font: 700 26px/1.2 var(--display); letter-spacing: -0.02em; margin: 0 0 6px; }
.pw-sub { color: var(--muted); margin: 0 0 18px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plan { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--raised); color: var(--text); transition: border-color .15s, transform .15s; }
.plan:hover { border-color: var(--edge); }
.plan strong { font-size: 15px; }
.plan span { font: 700 24px/1.1 var(--display); }
.plan small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan em { font-style: normal; font-size: 13px; color: var(--muted); }
.plan.pro { border-color: #d9d8d4; background: rgba(255,255,255,.035); }
.purchase-assurance { max-width: 640px; margin: 18px auto 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.purchase-assurance p { margin: 5px 0; }
.purchase-assurance p:first-child { color: var(--text); font-weight: 600; }
.purchase-assurance a { color: var(--text); text-underline-offset: 3px; }
.purchase-assurance a::after { content: " ↗"; }
.pw-fine { color: var(--muted); font-size: 13px; margin: 14px 0 4px; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }
[hidden] { display: none !important; }

.doc { max-width: 720px; margin: 0 auto; padding: 40px 24px 72px; }
.doc h1 { font-size: clamp(32px, 5vw, 44px); margin-bottom: 6px; }
.doc h2 { font-size: 20px; margin: 34px 0 8px; letter-spacing: -0.01em; }
.doc p, .doc li { color: var(--doc-text); }
.doc ul, .doc ol { padding-left: 20px; }
.doc li { margin: 6px 0; }
.doc .updated { color: var(--muted); font-size: 14px; margin-top: 0; }
.doc .lead { font-size: 18px; color: var(--text); }
.doc a { color: var(--voice); }

.stem-actions { gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.stem-actions .link { margin-left: auto; }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--edge); }
body[data-mode="vocal"] .stage { display: none; }
.limits { font-size: 13px; opacity: .8; }
.note { margin: 4px 10px 0; padding: 10px 14px; border-radius: 12px; background: rgba(158,227,245,.08); color: var(--text); font-size: 14px; }
.plan:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.plan .tag { font-size: 12px; color: var(--muted); margin-top: -2px; }

/* Checkout tab and plan resume */
.checkout { padding-top: 40px; }
.co-card { max-width: 520px; padding: 36px 28px; text-align: center; }
.co-card h2 { font: 700 26px/1.2 var(--display); letter-spacing: -0.02em; margin: 0 0 8px; }
.co-sub { color: var(--muted); margin: 0 auto 14px; max-width: 420px; }
.co-plan { font-size: 14px; margin: 0 0 18px; padding: 10px 14px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); }
.co-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.co-actions a.link { color: var(--muted); font-size: 14px; }
.co-spin { display: block; width: 28px; height: 28px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--voice); animation: co-spin 0.9s linear infinite; }
.co-spin[hidden] { display: none; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.resume { max-width: 820px; margin: 0 auto 12px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--voice);
  background: rgba(158,227,245,.08); display: flex; gap: 12px; align-items: center; justify-content: space-between; text-align: left; font-size: 15px; }
.resume[hidden] { display: none; }
.resume .btn { flex: none; }

/* Result workspace: custom player, comparison, processing wave */
.work-wave { display: block; width: 100%; height: 72px; margin: 0 0 20px; }
.player { display: flex; align-items: center; gap: 16px; padding: 18px 10px 4px; }
.play { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px 0 18px; border: 0; border-radius: 999px;
  background: var(--text); color: #0b0b0e; font-weight: 650; font-size: 16px; transition: background .15s var(--ease), transform .15s var(--ease); }
.play:hover { background: #fff; }
.play svg { width: 20px; height: 20px; fill: currentColor; }
.play .i-pause, .play[data-playing="true"] .i-play { display: none; }
.play[data-playing="true"] .i-pause { display: block; }
.play span { min-width: 3.1em; text-align: left; }
.track { flex: 1; min-width: 0; }
.scope { display: block; width: 100%; height: 88px; cursor: pointer; touch-action: none; border-radius: 10px; }
.times { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.times [data-legend] { display: flex; gap: 14px; }
.legend-voice::before, .legend-music::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.legend-voice::before { background: var(--voice); }
.legend-music::before { background: var(--music); }
.compare { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 14px 10px 4px; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line); }
.seg button { min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font-weight: 600; font-size: 15px;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--raised-2); color: var(--text); border-color: var(--edge); }
body[data-mode="vocal"] .seg { display: flex; margin: 14px 10px 0; }
body[data-mode="vocal"] .seg button { flex: 1; }
.mix { padding: 0; }
.mix-head output { color: var(--text); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin: 4px 0 0; background: transparent; --fill: 0%; }
input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--music) var(--fill), var(--raised-2) var(--fill)); }
input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--raised-2); }
input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--music); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .15s var(--ease); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--text); border: 0; }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.actions .btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--edge); }
.plans .plan { animation: settle .45s var(--spring) both; }
.plans .plan:nth-child(2) { animation-delay: .06s; }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } }
.plan span, .price { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .player { flex-direction: column; align-items: stretch; gap: 10px; }
  .play { align-self: flex-start; }
  .compare { grid-template-columns: 1fr; gap: 12px; }
  .seg { justify-self: start; }
  .scope { height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Once a file is in, the tool is the hero: headline and intro collapse, the workspace moves up. */
.hero h1, .hero .lede { transition: opacity .25s var(--ease); }
body[data-state="working"] .hero h1, body[data-state="result"] .hero h1, body[data-state="error"] .hero h1, body[data-state="batch"] .hero h1,
body[data-state="working"] .hero .lede, body[data-state="result"] .hero .lede, body[data-state="error"] .hero .lede, body[data-state="batch"] .hero .lede { display: none; }
body[data-state="working"] .hero, body[data-state="result"] .hero, body[data-state="error"] .hero, body[data-state="batch"] .hero { padding-top: 16px; }
.tool { scroll-margin-top: 16px; }
h1, .lede, .paywall h2 { text-wrap: balance; }
.drop-cta { text-align: center; padding: 0 16px; }
@media (max-width: 720px) {
  h1 { font-size: clamp(32px, 9vw, 42px); }
  .actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .actions .btn { width: 100%; }
  .actions .link { align-self: center; }
  .stem-actions .link { margin-left: 0; }
}

/* Round-1 corrections: file context on the result, selector containment on phones */
.rfile { margin: 2px 10px 12px; font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seg { max-width: 100%; box-sizing: border-box; }
.seg button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-mode="vocal"] .seg { margin: 14px 10px 0; width: auto; }
@media (max-width: 720px) {
  .seg button { padding: 0 10px; font-size: 14px; }
  body[data-mode="vocal"] .seg { margin: 12px 0 0; }
  .result { overflow-x: clip; }
}
body[data-mode="vocal"] .seg button { flex: 1 1 auto; }
@media (max-width: 360px) {
  .hero { padding-left: 16px; padding-right: 16px; }
  .tool { padding: 10px; }
  .seg button { padding: 0 8px; font-size: 13.5px; }
}

/* Quiet help: collapsed questions under the tool (COPY.md) */
.help { max-width: 720px; margin: 48px auto 24px; padding: 0 24px; }
.help details { border-top: 1px solid var(--line); }
.help details:last-child { border-bottom: 1px solid var(--line); }
.help summary { cursor: pointer; list-style: none; padding: 16px 28px 16px 0; font-weight: 600; font-size: 15px; position: relative; }
.help summary::-webkit-details-marker { display: none; }
.help summary::after { content: "+"; position: absolute; right: 4px; top: 13px; color: var(--muted); font-size: 20px; font-weight: 400; transition: transform .2s var(--ease); }
.help details[open] summary::after { transform: rotate(45deg); }
.help p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.help a { color: var(--text); }
.foot { gap: 16px; flex-wrap: wrap; }

/* Pricing page */
.pricing .price-cards { max-width: 760px; margin: 8px auto 0; text-align: left; }
.price-cards .plan { text-decoration: none; gap: 8px; padding: 22px; display: flex; flex-direction: column; } /* lines stack; spare height goes above the button */
.price-cards .plan .btn { align-self: stretch; }
.pricing .pw-fine { max-width: 560px; margin: 18px auto 0; }
.free-use h2 { font-size: 20px; letter-spacing: -0.01em; margin: 0 0 10px; }
.free-use p { color: var(--muted); }
.free-use .links a { color: var(--text); }

/* Tool menu: a tab strip under the header; a left sidebar on wide screens (room for more tools). */
.tools { display: flex; gap: 6px; justify-content: center; max-width: 1080px; margin: -6px auto 0; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
.tools::-webkit-scrollbar { display: none; }
.tools a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid transparent;
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 550; transition: color .15s var(--ease), background .15s var(--ease), border-color .15s var(--ease); }
.tools a:hover { color: var(--text); background: var(--hover); }
.tools a[aria-current] { color: var(--text); background: var(--raised); border-color: var(--line); }
.tools svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tools a[aria-current] svg { stroke: var(--voice); }
@media (min-width: 1200px) {
  body:has(> .tools) { padding-left: 248px; }
  body:has(> .tools) .top { position: fixed; top: 0; left: 0; width: 232px; padding: 22px 24px; max-width: none; }
  .tools { position: fixed; top: 76px; left: 16px; width: 216px; flex-direction: column; margin: 0; padding: 0; gap: 2px; }
  .tools a { border-radius: 12px; justify-content: flex-start; }
  body:has(> .tools) .hero { padding-top: 64px; }
}
@media (max-width: 720px) { .tools { justify-content: flex-start; } .tools a { font-size: 14px; padding: 0 12px; } }
.formats { font-size: 12.5px; letter-spacing: .02em; opacity: .75; }
/* Extract audio result */
.extract-wave { height: 72px; margin: 4px 10px 8px; width: calc(100% - 20px); }
.next { margin: 18px 10px 4px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.next p { width: 100%; margin: 0 0 2px; color: var(--muted); font-size: 14px; }
@media (max-width: 720px) { .next .btn { width: 100%; } }
@media (max-width: 720px) { .tools { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); } .tools a[aria-current] { scroll-margin-left: 16px; } }

/* Theme D, "Eleven-light": warm off-white, black pills, colour only in the sound (orbs, waveforms).
   Waveform colours are deepened so even muted bars keep 3:1 on white (voice floor .80, music .74). */
:root[data-theme="light"] {
  --bg: #f7f5f2; --panel: #ffffff; --line: #e6e2dc; --text: #141414; --muted: #6f6b66;
  --voice: #d94f22; --music: #5b6d92; --wave-voice: rgba(217,79,34,.85); --wave-music: rgba(91,109,146,.55);
  --raised: #f3f0eb; --raised-2: #ebe7e1; --edge: #d6d0c8; --dash: #d9d3cb; --dot: #c9c2b8; --track: #ebe7e1; --hover: #efebe5;
  --on-voice: #ffffff; --voice-hover: #c24519; --doc-text: #3a3835; --drop-shadow: rgba(20,20,20,.08);
  --wave-mix: #9a958e; --playhead: #141414; --wave-idle: #d6d0c8; --voice-floor: .80; --music-floor: .74;
}
:root[data-theme="light"] .btn, :root[data-theme="light"] .play { background: var(--text); color: #fff; }
:root[data-theme="light"] .btn:hover, :root[data-theme="light"] .play:hover { background: #2a2a2a; }
:root[data-theme="light"] .btn.ghost { background: transparent; color: var(--text); border-color: var(--edge); }
:root[data-theme="light"] .tool { box-shadow: 0 1px 2px rgba(20,20,20,.04), 0 24px 60px -40px rgba(20,20,20,.18); }
:root[data-theme="light"] .plan.pro { background: #fff; border-color: var(--text); }
:root[data-theme="light"] .seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(20,20,20,.08); }
:root[data-theme="light"] input[type=range]::-webkit-slider-thumb { background: var(--text); }
:root[data-theme="light"] input[type=range]::-moz-range-thumb { background: var(--text); }
:root[data-theme="light"] .pw-tag { color: var(--voice); background: rgba(217,79,34,.08); }



/* Workspace mixer (wiki/tasks/mixer-contract.md). The 4:47 lane cards and quick mixes are gone; the studio
   rows below replace them. */
.mixer { padding: 6px 4px 0; }
.mixer .player { display: block; padding: 10px 6px 0; }
#portal { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.transport { display: flex; align-items: center; gap: 14px; padding: 12px 0 2px; flex-wrap: wrap; }

/* The mixer, done like a studio (DESIGN-PLAN 4:43/4:45): transport on top, a track header on each lane,
   the portal lanes to the right. Matte headers, hairlines, tabular figures; the motion lives in the lanes. */
.mixer .transport { display: flex; align-items: center; gap: 12px; padding: 12px 6px 10px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mixer .transport .play { height: 40px; padding: 0 16px 0 12px; font-size: 14px; }
.counter { font: 500 15px/1 ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--text); display: flex; gap: 6px; }
.counter .sep { color: var(--muted); }
.ab { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--edge); background: transparent; color: var(--muted); font: 600 12.5px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.daw { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 1fr 1fr; height: 250px; }
/* Each lane is its own window beside its track header; the scope canvas on top takes the pointer. */
.daw .lane { grid-column: 2; border-left: 1px solid var(--line); --screen: #0a0a0c; background: var(--screen); }
.daw .lane-voice { grid-row: 1; } .daw .lane-music { grid-row: 2; }
.daw > .scope { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: 100%; border-radius: 0; background: transparent; }
.th-voice { grid-row: 1; } .th-music { grid-row: 2; }
.track-head { grid-column: 1; padding: 12px 14px 10px 8px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.track-head + .track-head { border-top: 1px solid var(--line); }
.th-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.th-top label { margin-right: auto; }
.chip { width: 4px; height: 18px; border-radius: 2px; }
.th-voice .chip { background: var(--voice); } .th-music .chip { background: var(--music); }
.ms { width: 28px; height: 24px; border-radius: 4px; border: 1px solid var(--edge); background: #131318; color: var(--muted); font: 700 12px var(--font); padding: 0; }
.ms:hover { color: var(--text); }
.th-fader { display: flex; align-items: center; gap: 10px; }
.th-fader output { width: 72px; white-space: nowrap; text-align: right; font: 500 12.5px ui-monospace, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; color: var(--muted); }
/* Console fader: hairline track with a 0 dB detent mark, flat engraved cap. */
.th-fader input[type=range] { height: 24px; margin: 0; }
.th-fader input[type=range]::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(90deg, #6d6d78 var(--fill), #2a2a33 var(--fill)); }
.th-fader input[type=range]::-webkit-slider-thumb { width: 12px; height: 22px; margin-top: -10px; border-radius: 3px; background: linear-gradient(90deg, #d9d8d4 0 45%, #1a1a1f 45% 55%, #d9d8d4 55%); box-shadow: 0 1px 3px rgba(0,0,0,.6); }
.th-fader input[type=range]::-moz-range-thumb { width: 12px; height: 22px; border-radius: 3px; background: #d9d8d4; border: 0; }
.th-fader { position: relative; }
.th-fader::after { content: ""; position: absolute; left: calc(6px + (100% - 94px) * 0.9091); top: 50%; width: 1px; height: 10px; margin-top: -5px; background: #6d6d78; pointer-events: none; }
/* Segmented LED ladder with a peak-hold tick. */
.meter { position: relative; height: 5px; border-radius: 1px; --lvl: 0; --pk: 0;
  background: repeating-linear-gradient(90deg, #202027 0 3px, transparent 3px 4px); }
.meter .lvl { position: absolute; inset: 0; width: calc(var(--lvl) * 100%);
  background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 4px); }
.meter .pk { position: absolute; top: 0; bottom: 0; width: 2px; left: calc(var(--pk) * 100% - 2px); background: #f2f1ee; opacity: calc(var(--pk) * 4); }
.th-voice .meter { --c: var(--voice); } .th-music .meter { --c: var(--music); }
.mixer[data-voice-on="false"] .th-voice .th-top label, .mixer[data-music-on="false"] .th-music .th-top label { color: var(--muted); }
.mixer[data-original="true"] .track-head { opacity: .5; }
@media (max-width: 720px) {
  .daw { grid-template-columns: 1fr; grid-template-rows: auto 170px auto; height: auto; }
  /* Phones: Voice strip, Voice lane, Music strip, Music lane (each strip right above its own lane). */
  .daw { grid-template-rows: auto 84px auto 84px; }
  .daw .th-voice { grid-row: 1; } .daw .lane { grid-column: 1; border-left: 0; border-radius: 10px; }
  .daw .lane-voice { grid-row: 2; } .daw .th-music { grid-row: 3; border-top: 0; } .daw .lane-music { grid-row: 4; }
  .daw > .scope { grid-column: 1; grid-row: 2 / span 3; }

  .track-head { padding: 10px 4px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .th-top { flex: 1 1 100%; } .th-fader { flex: 1 1 auto; } .meter { flex: 1 1 100%; }
}

/* The faders are made of the same light (DESIGN-PLAN 4:50): canvas#portal spans the headers and the lanes,
   so each fader track and meter is drawn by the portal in its lane's flowing colour. The native controls
   stay on top for touch, keyboard and screen readers; without WebGL (no data-lit) the CSS track and LED
   meter above remain. */
.daw { position: relative; }
.daw > #portal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; border-radius: 0; }
.daw > .lane { position: relative; z-index: 1; }
.daw > .scope { position: relative; z-index: 2; }
.daw > .track-head { position: relative; z-index: 3; }
.mixer[data-lit="true"] .daw .lane { background: transparent; }
.mixer[data-lit="true"] .meter { display: none; }
.mixer[data-lit="true"] .th-fader input[type=range]::-webkit-slider-runnable-track { background: transparent; }
.mixer[data-lit="true"] .th-fader input[type=range]::-moz-range-track { background: transparent; }
.mixer[data-lit="true"] .th-fader input[type=range]::-webkit-slider-thumb { background: linear-gradient(90deg, #e6e5e1 0 42%, #15151a 42% 58%, #e6e5e1 58%); box-shadow: 0 1px 2px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.6); }
/* Row lamps: the chip is lit in its lane colour while the track is heard, cold glass when it isn't. */
.chip { transition: background-color .45s, box-shadow .45s; }
.th-voice .chip { box-shadow: 0 0 8px rgba(158,227,245,.55); } .th-music .chip { box-shadow: 0 0 8px rgba(160,140,255,.55); }
.mixer[data-voice-on="true"] .th-voice .chip, .mixer[data-music-on="true"] .th-music .chip { transition-duration: .18s; }
.mixer[data-voice-on="false"] .th-voice .chip, .mixer[data-music-on="false"] .th-music .chip { background: #3a3d45; box-shadow: none; }

/* ── Future analog components (DESIGN-PLAN 4:52 "Future analog for every element") ─────────────────────
   Five ingredients: console keys, indicator lamps, engraved labels, smoked glass, aurora edge light.
   Colour lives only in light; surfaces stay monochrome. Sheet of every state: design/components/.
   The .is-hover / .is-focus / .is-pressed classes only exist so the sheet can show those states still. */
:root { --aurora: linear-gradient(90deg, #9ee3f5, #86ecd8, #c9f3ff, #b7a6ff, #a08cff, #9ee3f5);
  --hair-hi: rgba(255,255,255,.09); --hair-lo: rgba(0,0,0,.6); --key: #18181f; --lamp-off: #2c2c35;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; }
@keyframes aurora-run { to { background-position: 200% 0; } }

/* 1 · Keys. Secondary = smoked-glass key, 8 px radius, 1 px top highlight + bottom shade; press travels
   1 px and the hairlines swap (60 ms). Primary = warm white face, near-black text (pill, one per screen). */
.btn.ghost, .ms, .ab, .key { position: relative; border: 1px solid #2c2c36; border-radius: 8px; background: var(--key); color: var(--text);
  box-shadow: inset 0 1px 0 var(--hair-hi), inset 0 -1px 0 var(--hair-lo); transition: transform 60ms linear, box-shadow 60ms linear, color .15s, border-color .2s; }
.btn.ghost:active, .ms:active, .ab:active, .key:active, .key.is-pressed,
.ms[aria-pressed="true"], .ab[aria-pressed="true"] { transform: translateY(1px); box-shadow: inset 0 1px 0 var(--hair-lo), inset 0 -1px 0 var(--hair-hi); }
.btn:not(.ghost):not(.link), .play { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.22); transition: transform 60ms linear, box-shadow 60ms linear, background .15s; }
.btn:not(.ghost):not(.link):active, .play:active, .btn.is-pressed { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(0,0,0,.18), inset 0 -1px 0 rgba(255,255,255,.7); }
.btn:disabled, .ms:disabled, .ab:disabled, .key:disabled { opacity: .38; transform: none; cursor: not-allowed; }

/* 2 · Lamps. A 6 px indicator on every on/off control: warms up in 180 ms, cools down in 450 ms. The key's
   text and position change at once, so the state never waits on the lamp. */
.ms, .ab, .key.lamped { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ms::before, .ab::before, .key.lamped::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp-off);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.6); transition: background-color .45s ease-out, box-shadow .45s ease-out; }
.ms[aria-pressed="true"]::before, .ab[aria-pressed="true"]::before, .key.lamped[aria-pressed="true"]::before { --l: #fff;
  background: var(--l); box-shadow: 0 0 5px var(--l), 0 0 12px color-mix(in srgb, var(--l) 55%, transparent); transition-duration: .18s; transition-timing-function: ease-in; }
.th-voice .ms.solo[aria-pressed="true"]::before { --l: var(--voice); } .th-music .ms.solo[aria-pressed="true"]::before { --l: var(--music); }
.ms { width: 42px; height: 26px; padding: 0; font: 700 11px/1 var(--mono); letter-spacing: .06em; color: var(--muted); }
.ms[aria-pressed="true"], .ab[aria-pressed="true"] { color: var(--text); background: #1e1e26; border-color: #34343f; }
.ms.mute[aria-pressed="true"], .ms.solo[aria-pressed="true"] { background: #1e1e26; color: var(--text); border-color: #34343f; }
.ab { height: 32px; padding: 0 12px 0 10px; font: 700 11px/1 var(--mono); letter-spacing: .14em; color: var(--muted); }

/* 3 · Engraved labels: letter-spaced uppercase mono, like silkscreen on hardware. */
.eng, .th-top label { font: 700 11.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.th-top label { color: var(--text); }
.counter { font-family: var(--mono); }

/* 4 · Smoked glass: near-black panels with a hairline and a faint inner top highlight; no drop shadows. */
.tool, .glass { box-shadow: inset 0 1px 0 rgba(255,255,255,.045); }
.glass { background: rgba(17,17,22,.82); border: 1px solid var(--line); border-radius: 14px; }

/* 5 · Aurora edge light. Hover runs a thin line of the flowing aurora along the edge; keyboard focus is a
   steady 2 px aurora ring with a white inner line (never removed). */
.btn.ghost::after, .ab::after, .ms::after, .key::after, .tools a::after, .glass.edge::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--aurora); background-size: 200% 100%; opacity: 0; transition: opacity .25s;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.tools a { position: relative; }
@media (hover: hover) {
  .btn.ghost:hover::after, .ab:hover::after, .ms:hover::after, .key:hover::after, .tools a:hover::after, .glass.edge:hover::after { opacity: .85; animation: aurora-run 3.2s linear infinite; }
}
.key.is-hover::after, .glass.edge.is-hover::after { opacity: .85; animation: aurora-run 3.2s linear infinite; }
.btn.ghost:focus-visible, .ab:focus-visible, .ms:focus-visible, .key:focus-visible, .key.is-focus, .tools a:focus-visible { outline: 1px solid rgba(255,255,255,.95); outline-offset: 1px; }
.btn.ghost:focus-visible::after, .ab:focus-visible::after, .ms:focus-visible::after, .key:focus-visible::after, .key.is-focus::after, .tools a:focus-visible::after {
  inset: -4px; padding: 2px; opacity: 1; animation: none; border-radius: calc(8px + 4px); }
.btn:not(.ghost):not(.link):focus-visible, .play:focus-visible, .btn.is-focus { outline: 2px solid #b9ecf7; outline-offset: 3px; }
.th-fader input[type=range]:focus-visible { outline: 1px solid rgba(255,255,255,.9); outline-offset: 3px; border-radius: 6px; box-shadow: 0 0 0 5px rgba(158,227,245,.35); }

/* Tool menu: the active tool carries a lit lamp instead of a filled pill. */
.tools a[aria-current] { background: var(--key); border-color: #2c2c36; box-shadow: inset 0 1px 0 var(--hair-hi), inset 0 -1px 0 var(--hair-lo); }
.tools a[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--voice); box-shadow: 0 0 6px var(--voice); order: -1; }
@media (prefers-reduced-motion: reduce) { .btn.ghost::after, .ab::after, .ms::after, .key::after, .tools a::after, .glass.edge::after { animation: none !important; } }

/* ── Revision 5:30: the buttons carry the aurora (Kyle 5:29 "the buttons can get that color too") ───────
   Primary keys are little portals: a face of the same slowly drifting aurora as the waveform (the light half
   of the palette only, near-black text ≥ 11:1 at every point). Secondary keys are smoked glass with a living
   1 px aurora rim. On keys light their whole face in their track's colour; Original lights pearl. */
:root { --aurora-face: linear-gradient(115deg, #eef8ff 0%, #a9e8f7 16%, #8becd9 32%, #c4f6de 46%, #bcc8ff 62%, #d9ccff 78%, #eef8ff 100%); }
@keyframes aurora-drift { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.btn:not(.ghost):not(.link), .play, .btn:not(.ghost):not(.link):hover, .play:hover {
  background: var(--aurora-face); background-size: 300% 100%; color: #0b0b0e; }
.btn:not(.ghost):not(.link), .play { animation: aurora-drift 16s linear infinite;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.06);
  transition: transform 60ms linear, filter .25s, box-shadow .25s; }
.btn:not(.ghost):not(.link):hover, .play:hover, .btn.is-hover { filter: brightness(1.05) saturate(1.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.18), 0 0 24px -4px rgba(158,227,245,.6), 0 0 34px -10px rgba(183,166,255,.6); }
.btn:not(.ghost):not(.link):active, .play:active, .btn.is-pressed { transform: translateY(1px); filter: brightness(1.2) saturate(1.35);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.14), inset 0 -1px 0 rgba(255,255,255,.7), 0 0 30px -2px rgba(201,243,255,.75); transition-duration: 60ms; }
/* The one brightest key per screen (the next thing to press) carries a soft halo at rest. */
.drop-cta .btn, #dl-mix { box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(0,0,0,.18), 0 0 26px -8px rgba(158,227,245,.55), 0 0 40px -14px rgba(183,166,255,.55); }
.btn:not(.ghost):not(.link):disabled { animation: none; filter: grayscale(1) brightness(.55); box-shadow: none; }
/* Secondary keys: the rim of aurora always flows slowly; hover brightens it and spills a little light inward. */
.btn.ghost::after, .ab::after, .key::after, .tools a[aria-current]::after { opacity: .5; animation: aurora-run 7s linear infinite; }
@media (hover: hover) {
  .btn.ghost:hover, .ab:hover, .key:hover { box-shadow: inset 0 1px 0 var(--hair-hi), inset 0 -1px 0 var(--hair-lo), inset 0 0 16px rgba(158,227,245,.12); }
  .btn.ghost:hover::after, .ab:hover::after, .key:hover::after, .tools a:hover::after { opacity: 1; }
}
.key.is-hover { box-shadow: inset 0 1px 0 var(--hair-hi), inset 0 -1px 0 var(--hair-lo), inset 0 0 16px rgba(158,227,245,.12); }
.key.is-hover::after { opacity: 1; }
/* Lit keys = on, in the track's own colour (dark text); Original and the chosen language light pearl. */
.th-voice .ms[aria-pressed="true"] { background: var(--voice); color: #06141a; border-color: #c9f3fb;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(0,0,0,.2), 0 0 14px -3px rgba(158,227,245,.75); }
.th-music .ms[aria-pressed="true"] { background: var(--music); color: #0d0824; border-color: #cdc2ff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.2), 0 0 14px -3px rgba(160,140,255,.75); }
.ab[aria-pressed="true"], .key.lamped[aria-pressed="true"] { background: #eef3f8; color: #0b0b0e; border-color: #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.18), 0 0 16px -4px rgba(238,243,248,.7); }
.ms[aria-pressed="true"]::before, .ab[aria-pressed="true"]::before, .key.lamped[aria-pressed="true"]::before {
  --l: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) { .btn:not(.ghost):not(.link), .play { animation: none; } }
/* Secondary keys get a quieter coloured surface at rest (Astra board note on Kyle 5:29): the same aurora,
   drifting slowly, seen through smoked glass at low strength. White text stays ≥ 12:1 on it. */
.btn.ghost, .ab:not([aria-pressed="true"]), .key:not(.lamped[aria-pressed="true"]), .tools a[aria-current] {
  background: linear-gradient(rgba(20,20,27,.84), rgba(20,20,27,.84)), var(--aurora-face); background-size: 100% 100%, 300% 100%;
  animation: aurora-drift 22s linear infinite; }
.btn.ghost:hover, .ab:not([aria-pressed="true"]):hover, .key:not(.lamped[aria-pressed="true"]):hover, .key.is-hover {
  background: linear-gradient(rgba(20,20,27,.74), rgba(20,20,27,.74)), var(--aurora-face); background-size: 100% 100%, 300% 100%; }
.btn.ghost:disabled, .key:disabled { animation: none; background: var(--key); }
@media (prefers-reduced-motion: reduce) { .btn.ghost, .ab, .key, .tools a[aria-current] { animation: none; } }

/* Tool cards under the drop panel (Kyle 4:39 / 5:32): only tools that work today. Each card has its own
   mini portal: a waveform shaped like its job, with the aurora drifting inside it. */
.tool-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 820px; margin: 18px auto 0; text-align: left; }
.tcard { position: relative; display: grid; gap: 6px; padding: 14px 14px 13px; border-radius: 14px; border: 1px solid var(--line); background: rgba(17,17,22,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045); color: var(--text); text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.tcard::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: var(--aurora); background-size: 200% 100%;
  opacity: 0; transition: opacity .25s; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
@media (hover: hover) { .tcard:hover { transform: translateY(-1px); } .tcard:hover::after { opacity: .9; animation: aurora-run 3.2s linear infinite; } .tcard:hover .mini { filter: brightness(1.15) saturate(1.2); } }
.tcard:focus-visible { outline: 1px solid rgba(255,255,255,.95); outline-offset: 2px; }
.tcard .mini { height: 30px; width: 100%; background: var(--mini, var(--aurora-face)); background-size: 300% 100%; animation: aurora-drift 18s linear infinite;
  -webkit-mask: var(--shape) center / 100% 100% no-repeat; mask: var(--shape) center / 100% 100% no-repeat; transition: filter .25s; }
.tcard .tc-name { font-weight: 600; font-size: 14.5px; letter-spacing: -.005em; }
.tcard .tc-say { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.tcard .tc-tag { position: absolute; top: 12px; right: 12px; font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8d8c96; }
.tcard[data-shape="song"], .tcard[data-shape="karaoke"] { --mini: linear-gradient(115deg, #d9ccff, #b7a6ff 20%, #a08cff 40%, #bcc8ff 60%, #d9ccff 80%, #b7a6ff 100%); }
@media (max-width: 720px) { .tool-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .tcard .tc-say { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .tcard .mini { animation: none; } }
.tcard[data-shape="voice"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.7 15.2h2.00v1.7h-2.00zM4.0 11.3h2.00v9.5h-2.00zM7.3 8.0h2.00v16.0h-2.00zM10.7 10.3h2.00v11.3h-2.00zM14.0 15.1h2.00v1.8h-2.00zM17.3 15.2h2.00v1.7h-2.00zM20.7 15.2h2.00v1.7h-2.00zM24.0 15.2h2.00v1.7h-2.00zM27.3 15.2h2.00v1.7h-2.00zM30.7 14.7h2.00v2.5h-2.00zM34.0 11.1h2.00v9.8h-2.00zM37.3 6.3h2.00v19.4h-2.00zM40.7 4.8h2.00v22.4h-2.00zM44.0 10.0h2.00v12.1h-2.00zM47.3 12.0h2.00v8.0h-2.00zM50.7 15.2h2.00v1.7h-2.00zM54.0 15.2h2.00v1.7h-2.00zM57.3 15.2h2.00v1.7h-2.00zM60.7 15.2h2.00v1.7h-2.00zM64.0 15.2h2.00v1.7h-2.00zM67.3 15.2h2.00v1.7h-2.00zM70.7 15.2h2.00v1.7h-2.00zM74.0 15.2h2.00v1.7h-2.00zM77.3 15.2h2.00v1.7h-2.00zM80.7 15.2h2.00v1.7h-2.00zM84.0 13.5h2.00v5.0h-2.00zM87.3 8.5h2.00v14.9h-2.00zM90.7 8.0h2.00v15.9h-2.00zM94.0 8.1h2.00v15.9h-2.00zM97.3 5.2h2.00v21.5h-2.00zM100.7 10.7h2.00v10.7h-2.00zM104.0 12.4h2.00v7.3h-2.00zM107.3 15.2h2.00v1.7h-2.00zM110.7 15.2h2.00v1.7h-2.00zM114.0 15.2h2.00v1.7h-2.00zM117.3 15.2h2.00v1.7h-2.00z'/%3E%3C/svg%3E"); }
.tcard[data-shape="song"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.7 11.2h2.00v9.6h-2.00zM4.0 9.9h2.00v12.2h-2.00zM7.3 7.7h2.00v16.6h-2.00zM10.7 7.3h2.00v17.5h-2.00zM14.0 9.5h2.00v13.0h-2.00zM17.3 8.4h2.00v15.2h-2.00zM20.7 7.9h2.00v16.2h-2.00zM24.0 5.4h2.00v21.2h-2.00zM27.3 5.7h2.00v20.5h-2.00zM30.7 7.7h2.00v16.6h-2.00zM34.0 6.3h2.00v19.4h-2.00zM37.3 6.4h2.00v19.3h-2.00zM40.7 3.4h2.00v25.1h-2.00zM44.0 5.5h2.00v21.0h-2.00zM47.3 6.1h2.00v19.8h-2.00zM50.7 7.6h2.00v16.9h-2.00zM54.0 4.4h2.00v23.2h-2.00zM57.3 4.2h2.00v23.6h-2.00zM60.7 6.6h2.00v18.9h-2.00zM64.0 7.4h2.00v17.1h-2.00zM67.3 6.3h2.00v19.4h-2.00zM70.7 4.9h2.00v22.2h-2.00zM74.0 4.9h2.00v22.2h-2.00zM77.3 6.7h2.00v18.5h-2.00zM80.7 7.2h2.00v17.6h-2.00zM84.0 6.9h2.00v18.3h-2.00zM87.3 4.5h2.00v23.0h-2.00zM90.7 5.7h2.00v20.7h-2.00zM94.0 7.1h2.00v17.7h-2.00zM97.3 7.4h2.00v17.3h-2.00zM100.7 7.8h2.00v16.3h-2.00zM104.0 6.1h2.00v19.8h-2.00zM107.3 8.5h2.00v15.1h-2.00zM110.7 10.1h2.00v11.8h-2.00zM114.0 10.2h2.00v11.6h-2.00zM117.3 11.2h2.00v9.6h-2.00z'/%3E%3C/svg%3E"); }
.tcard[data-shape="acapella"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.7 11.6h2.00v8.8h-2.00zM4.0 8.9h2.00v14.3h-2.00zM7.3 9.7h2.00v12.7h-2.00zM10.7 6.5h2.00v19.1h-2.00zM14.0 9.6h2.00v12.8h-2.00zM17.3 10.0h2.00v11.9h-2.00zM20.7 11.8h2.00v8.4h-2.00zM24.0 15.2h2.00v1.7h-2.00zM27.3 15.2h2.00v1.7h-2.00zM30.7 15.2h2.00v1.7h-2.00zM34.0 15.2h2.00v1.7h-2.00zM37.3 15.2h2.00v1.7h-2.00zM40.7 15.2h2.00v1.7h-2.00zM44.0 15.2h2.00v1.7h-2.00zM47.3 15.2h2.00v1.7h-2.00zM50.7 15.2h2.00v1.7h-2.00zM54.0 15.2h2.00v1.7h-2.00zM57.3 14.3h2.00v3.4h-2.00zM60.7 10.0h2.00v12.0h-2.00zM64.0 7.7h2.00v16.7h-2.00zM67.3 4.9h2.00v22.2h-2.00zM70.7 4.7h2.00v22.6h-2.00zM74.0 2.0h2.00v28.0h-2.00zM77.3 4.1h2.00v23.9h-2.00zM80.7 5.9h2.00v20.1h-2.00zM84.0 9.8h2.00v12.5h-2.00zM87.3 12.0h2.00v8.0h-2.00zM90.7 15.2h2.00v1.7h-2.00zM94.0 15.2h2.00v1.7h-2.00zM97.3 15.2h2.00v1.7h-2.00zM100.7 15.2h2.00v1.7h-2.00zM104.0 15.2h2.00v1.7h-2.00zM107.3 15.2h2.00v1.7h-2.00zM110.7 15.2h2.00v1.7h-2.00zM114.0 15.2h2.00v1.7h-2.00zM117.3 15.2h2.00v1.7h-2.00z'/%3E%3C/svg%3E"); }
.tcard[data-shape="karaoke"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.7 11.9h2.00v8.1h-2.00zM4.0 9.2h2.00v13.5h-2.00zM7.3 8.2h2.00v15.6h-2.00zM10.7 7.4h2.00v17.2h-2.00zM14.0 9.5h2.00v12.9h-2.00zM17.3 9.5h2.00v13.0h-2.00zM20.7 7.9h2.00v16.3h-2.00zM24.0 8.2h2.00v15.6h-2.00zM27.3 5.0h2.00v22.0h-2.00zM30.7 4.5h2.00v23.0h-2.00zM34.0 6.4h2.00v19.3h-2.00zM37.3 7.6h2.00v16.8h-2.00zM40.7 8.2h2.00v15.6h-2.00zM44.0 6.5h2.00v19.0h-2.00zM47.3 6.1h2.00v19.9h-2.00zM50.7 3.7h2.00v24.5h-2.00zM54.0 5.4h2.00v21.3h-2.00zM57.3 7.1h2.00v17.7h-2.00zM60.7 7.4h2.00v17.1h-2.00zM64.0 6.4h2.00v19.2h-2.00zM67.3 6.5h2.00v19.0h-2.00zM70.7 4.7h2.00v22.6h-2.00zM74.0 4.1h2.00v23.7h-2.00zM77.3 5.1h2.00v21.8h-2.00zM80.7 8.5h2.00v15.1h-2.00zM84.0 7.6h2.00v16.8h-2.00zM87.3 8.0h2.00v16.1h-2.00zM90.7 5.9h2.00v20.3h-2.00zM94.0 5.2h2.00v21.6h-2.00zM97.3 6.1h2.00v19.7h-2.00zM100.7 8.7h2.00v14.7h-2.00zM104.0 9.2h2.00v13.6h-2.00zM107.3 9.2h2.00v13.5h-2.00zM110.7 9.5h2.00v13.1h-2.00zM114.0 9.3h2.00v13.4h-2.00zM117.3 10.4h2.00v11.3h-2.00z'/%3E%3C/svg%3E"); }
.tcard[data-shape="extract"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.7 13.6h2.00v4.7h-2.00zM4.0 12.6h2.00v6.8h-2.00zM7.3 11.7h2.00v8.7h-2.00zM10.7 10.2h2.00v11.5h-2.00zM14.0 9.4h2.00v13.1h-2.00zM17.3 9.1h2.00v13.8h-2.00zM20.7 8.5h2.00v15.0h-2.00zM24.0 6.9h2.00v18.2h-2.00zM27.3 7.5h2.00v17.0h-2.00zM30.7 6.4h2.00v19.2h-2.00zM34.0 6.7h2.00v18.6h-2.00zM37.3 7.2h2.00v17.5h-2.00zM40.7 7.4h2.00v17.3h-2.00zM44.0 8.4h2.00v15.1h-2.00zM47.3 9.4h2.00v13.3h-2.00zM50.7 10.4h2.00v11.2h-2.00zM54.0 10.8h2.00v10.3h-2.00zM57.3 9.9h2.00v12.2h-2.00zM60.7 8.8h2.00v14.4h-2.00zM64.0 8.0h2.00v16.0h-2.00zM67.3 6.7h2.00v18.5h-2.00zM70.7 6.9h2.00v18.1h-2.00zM74.0 6.4h2.00v19.1h-2.00zM77.3 5.3h2.00v21.3h-2.00zM80.7 6.1h2.00v19.8h-2.00zM84.0 6.4h2.00v19.2h-2.00zM87.3 7.0h2.00v18.1h-2.00zM90.7 7.5h2.00v17.1h-2.00zM94.0 9.2h2.00v13.6h-2.00zM97.3 9.7h2.00v12.6h-2.00zM100.7 11.1h2.00v9.8h-2.00zM104.0 12.0h2.00v8.0h-2.00zM107.3 12.1h2.00v7.8h-2.00zM110.7 11.8h2.00v8.3h-2.00zM114.0 11.7h2.00v8.7h-2.00zM117.3 12.1h2.00v7.8h-2.00z'/%3E%3C/svg%3E"); }

.tools a { white-space: nowrap; }

/* The drop panel is the stage (DESIGN-PLAN 4:37): the portal waveform inside the panel, a dashed edge of light,
   light spilling onto the page under it, the idle Voice/Music preview labels, and a running aurora edge while a
   file is dragged anywhere on the page. Outside the panel the page stays calm. */
.drop.staged { border-color: rgba(158,227,245,.26); }
.drop.staged:hover { border-color: rgba(158,227,245,.5); background: none; }
.drop.staged { height: 300px; }
.drop.staged .wave { inset: 18px 20px auto; width: calc(100% - 40px); height: 150px; opacity: 1; border-radius: 12px; }
.drop.staged .drop-cta { bottom: 28px; }
.tool[data-state="idle"] { box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 46px 90px -56px rgba(158,227,245,.45), 0 60px 120px -70px rgba(160,140,255,.5); }
.stage-label { position: absolute; left: 30px; padding: 4px 7px; border-radius: 5px; background: rgba(12,12,16,.78); font-size: 10.5px;
  opacity: 0; transform: translateY(3px); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.stage-label.v { top: 45px; color: var(--voice); } .stage-label.m { top: 120px; color: var(--music); }
.drop.peeled .stage-label { opacity: 1; transform: none; }
.drop.staged::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: var(--aurora);
  background-size: 200% 100%; opacity: 0; transition: opacity .2s; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; }
.drop.staged.drag { border-color: transparent; transform: none; }
.drop.staged.drag::after { opacity: 1; animation: aurora-run 1.6s linear infinite; }
@media (max-width: 720px) { .drop.staged { height: 272px; } .drop.staged .wave { inset: 14px 12px auto; width: calc(100% - 24px); height: 118px; } .stage-label { left: 20px; }
  .stage-label.v { top: 33px; } .stage-label.m { top: 92px; } }
@media (prefers-reduced-motion: reduce) { .drop.staged.drag::after { animation: none; } }
/* Free tool results: the paid next step is the brightest key (Claude 5:38 conversion rule). */
.next .btn:not(.ghost) { margin-right: 8px; }

/* New local-tool values and controls reuse the existing type, panels and actions. */
.local-stats, .local-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 12px 10px; }
.local-stats h2 { font-size: clamp(22px, 4vw, 32px); letter-spacing: -.03em; margin: 6px 0; }
.local-stats .note { text-align: left; }
.local-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.local-fields label { display: grid; gap: 10px; color: var(--muted); font-size: 14px; }
.local-fields input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.local-fields input:focus-visible { outline: 2px solid var(--voice); outline-offset: 2px; }
.join-list { list-style: none; margin: 0; padding: 12px 10px; }
.join-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.join-list li > span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.join-list button { min-height: 44px; }
@media (max-width: 540px) { .local-fields, .local-stats { grid-template-columns: 1fr; gap: 12px; } }

/* First screen (Kyle 5:38 / 5:40): the tool itself, with no box. A big waveform floats on black in Kyle's
   chosen portal look, Choose a file sits on it and the hints sit under it.
   The aurora edge appears only while a file is dragged over the page. */
.tool[data-state="idle"]:has(.drop.staged) { max-width: 1080px; padding: 0; background: none; border-color: transparent; box-shadow: none; }
.drop.staged { height: 440px; border: 0; border-radius: 28px; }
.drop.staged:hover { border-color: transparent; }
.drop.staged .wave { inset: 22px 0 auto; width: 100%; height: 320px; border-radius: 0; }
.drop.staged .drop-cta { inset: 158px 0 auto; bottom: auto; }
.drop.staged .drop-cta > .hint:nth-child(2) { margin-top: 140px; }
.stage-label.v { top: 92px; } .stage-label.m { top: 252px; }
.stage-label { left: 26px; }
@media (max-width: 720px) {
  .drop.staged { height: 336px; border-radius: 22px; }
  .drop.staged .wave { inset: 14px 0 auto; width: 100%; height: 220px; }
  .drop.staged .drop-cta { inset: 100px 0 auto; }
  .drop.staged .drop-cta > .hint:nth-child(2) { margin-top: 90px; }
  .stage-label { left: 14px; } .stage-label.v { top: 58px; } .stage-label.m { top: 168px; }
}

/* Kyle 5:41: every main button mixes the ice blue with the purple, like the waveform, and it moves inside the
   button: two soft pools, aqua and violet, drift past each other behind near-black text. The darkest point of
   the face (violet #a08aff) keeps ≥ 6.8:1 against the text. Secondary keys show the same pools faintly. */
:root { --face-pools: radial-gradient(50% 140% at 50% 50%, #86e6ee 0%, rgba(134,230,238,0) 72%),
    radial-gradient(50% 140% at 50% 50%, #a08aff 0%, rgba(160,138,255,0) 72%), linear-gradient(90deg, #bdeff6, #cdc2ff);
  --aurora: linear-gradient(90deg, #86e6ee, #a08aff, #bdeff6, #b7a6ff, #86e6ee); }
@keyframes face-pools { 0%, 100% { background-position: 0% 50%, 100% 50%, 0 0; } 50% { background-position: 100% 50%, 0% 50%, 0 0; } }
@keyframes glass-pools { 0%, 100% { background-position: 0 0, 0% 50%, 100% 50%, 0 0; } 50% { background-position: 0 0, 100% 50%, 0% 50%, 0 0; } }
.btn:not(.ghost):not(.link), .play, .btn:not(.ghost):not(.link):hover, .play:hover {
  background: var(--face-pools); background-size: 220% 100%, 220% 100%, 100% 100%; }
.btn:not(.ghost):not(.link), .play { animation: face-pools 9s ease-in-out infinite; }
.btn.ghost, .ab:not([aria-pressed="true"]), .key:not(.lamped[aria-pressed="true"]), .tools a[aria-current] {
  background: linear-gradient(rgba(19,19,26,.8), rgba(19,19,26,.8)), var(--face-pools); background-size: 100% 100%, 220% 100%, 220% 100%, 100% 100%;
  animation: glass-pools 13s ease-in-out infinite; }
.btn.ghost:hover, .ab:not([aria-pressed="true"]):hover, .key:not(.lamped[aria-pressed="true"]):hover, .key.is-hover {
  background: linear-gradient(rgba(19,19,26,.68), rgba(19,19,26,.68)), var(--face-pools); background-size: 100% 100%, 220% 100%, 220% 100%, 100% 100%; }
.btn:not(.ghost):not(.link):disabled { animation: none; }
/* Toggles change face and text in the same frame (Astra 5:41: a fading text colour briefly hit ~1:1 on
   violet); only the lamp keeps its warm-up / cool-down. */
.btn.ghost, .ms, .ab, .key { transition: transform 60ms linear, box-shadow 60ms linear, border-color .2s; }
.ab:not([aria-pressed="true"]) { color: #d9dce6; }
@media (prefers-reduced-motion: reduce) { .btn:not(.ghost):not(.link), .play, .btn.ghost, .ab, .key, .tools a[aria-current] { animation: none; } }

/* Tool-card mini waveforms in the portal look (Kyle 5:40): smooth silhouette, fine bars, aqua and violet pools
   drifting inside. */
.tcard .mini { height: 34px; background: var(--face-pools); background-size: 220% 100%, 220% 100%, 100% 100%; animation: face-pools 11s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(134,230,238,.35)); }
.tcard[data-shape="song"], .tcard[data-shape="karaoke"] { --mini: none; }
.tcard[data-shape="voice"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.00 14.94h1.35v2.13h-1.35zM1.88 13.85h1.35v4.30h-1.35zM3.75 11.80h1.35v8.40h-1.35zM5.62 9.93h1.35v12.14h-1.35zM7.50 8.42h1.35v15.16h-1.35zM9.38 8.27h1.35v15.46h-1.35zM11.25 9.94h1.35v12.12h-1.35zM13.12 12.04h1.35v7.92h-1.35zM15.00 13.78h1.35v4.45h-1.35zM16.88 14.88h1.35v2.24h-1.35zM18.75 15.13h1.35v1.75h-1.35zM20.62 15.11h1.35v1.78h-1.35zM22.50 15.08h1.35v1.84h-1.35zM24.38 15.06h1.35v1.89h-1.35zM26.25 15.03h1.35v1.94h-1.35zM28.12 15.01h1.35v1.98h-1.35zM30.00 14.99h1.35v2.02h-1.35zM31.88 14.97h1.35v2.06h-1.35zM33.75 14.95h1.35v2.10h-1.35zM35.62 14.61h1.35v2.78h-1.35zM37.50 13.17h1.35v5.66h-1.35zM39.38 11.19h1.35v9.63h-1.35zM41.25 9.29h1.35v13.41h-1.35zM43.12 7.02h1.35v17.96h-1.35zM45.00 4.25h1.35v23.49h-1.35zM46.88 2.08h1.35v27.84h-1.35zM48.75 1.89h1.35v28.21h-1.35zM50.62 3.57h1.35v24.85h-1.35zM52.50 5.36h1.35v21.29h-1.35zM54.38 5.65h1.35v20.69h-1.35zM56.25 7.34h1.35v17.32h-1.35zM58.12 8.98h1.35v14.04h-1.35zM60.00 9.72h1.35v12.57h-1.35zM61.88 11.72h1.35v8.56h-1.35zM63.75 13.34h1.35v5.32h-1.35zM65.62 14.43h1.35v3.14h-1.35zM67.50 14.82h1.35v2.37h-1.35zM69.38 14.86h1.35v2.28h-1.35zM71.25 14.87h1.35v2.27h-1.35zM73.12 14.87h1.35v2.25h-1.35zM75.00 14.88h1.35v2.23h-1.35zM76.88 14.89h1.35v2.21h-1.35zM78.75 14.91h1.35v2.19h-1.35zM80.62 14.92h1.35v2.16h-1.35zM82.50 14.94h1.35v2.13h-1.35zM84.38 14.95h1.35v2.10h-1.35zM86.25 14.97h1.35v2.06h-1.35zM88.12 14.99h1.35v2.02h-1.35zM90.00 15.01h1.35v1.98h-1.35zM91.88 15.03h1.35v1.94h-1.35zM93.75 15.06h1.35v1.89h-1.35zM95.62 15.08h1.35v1.84h-1.35zM97.50 15.11h1.35v1.78h-1.35zM99.38 15.13h1.35v1.75h-1.35zM101.25 15.07h1.35v1.86h-1.35zM103.12 14.56h1.35v2.88h-1.35zM105.00 13.37h1.35v5.26h-1.35zM106.88 12.34h1.35v7.32h-1.35zM108.75 11.07h1.35v9.85h-1.35zM110.62 10.19h1.35v11.63h-1.35zM112.50 9.74h1.35v12.53h-1.35zM114.38 10.78h1.35v10.44h-1.35zM116.25 11.98h1.35v8.03h-1.35zM118.12 13.03h1.35v5.94h-1.35z'/%3E%3C/svg%3E"); }
.tcard[data-shape="song"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.00 13.12h1.35v5.77h-1.35zM1.88 12.55h1.35v6.90h-1.35zM3.75 11.53h1.35v8.95h-1.35zM5.62 10.30h1.35v11.40h-1.35zM7.50 9.18h1.35v13.64h-1.35zM9.38 8.39h1.35v15.22h-1.35zM11.25 8.30h1.35v15.39h-1.35zM13.12 8.78h1.35v14.44h-1.35zM15.00 9.16h1.35v13.67h-1.35zM16.88 8.91h1.35v14.17h-1.35zM18.75 8.81h1.35v14.39h-1.35zM20.62 8.33h1.35v15.33h-1.35zM22.50 7.64h1.35v16.73h-1.35zM24.38 6.99h1.35v18.02h-1.35zM26.25 6.60h1.35v18.79h-1.35zM28.12 5.58h1.35v20.84h-1.35zM30.00 4.86h1.35v22.29h-1.35zM31.88 5.67h1.35v20.66h-1.35zM33.75 5.90h1.35v20.20h-1.35zM35.62 6.30h1.35v19.41h-1.35zM37.50 6.92h1.35v18.17h-1.35zM39.38 7.10h1.35v17.80h-1.35zM41.25 6.91h1.35v18.19h-1.35zM43.12 6.46h1.35v19.08h-1.35zM45.00 4.97h1.35v22.06h-1.35zM46.88 3.93h1.35v24.15h-1.35zM48.75 3.23h1.35v25.54h-1.35zM50.62 3.87h1.35v24.27h-1.35zM52.50 5.00h1.35v21.99h-1.35zM54.38 5.54h1.35v20.91h-1.35zM56.25 5.54h1.35v20.92h-1.35zM58.12 5.36h1.35v21.29h-1.35zM60.00 5.66h1.35v20.68h-1.35zM61.88 6.04h1.35v19.92h-1.35zM63.75 5.10h1.35v21.80h-1.35zM65.62 3.69h1.35v24.63h-1.35zM67.50 2.79h1.35v26.41h-1.35zM69.38 3.47h1.35v25.06h-1.35zM71.25 4.88h1.35v22.24h-1.35zM73.12 6.24h1.35v19.51h-1.35zM75.00 6.65h1.35v18.71h-1.35zM76.88 6.61h1.35v18.78h-1.35zM78.75 6.95h1.35v18.11h-1.35zM80.62 6.88h1.35v18.24h-1.35zM82.50 6.17h1.35v19.65h-1.35zM84.38 5.75h1.35v20.50h-1.35zM86.25 4.89h1.35v22.23h-1.35zM88.12 5.15h1.35v21.70h-1.35zM90.00 5.63h1.35v20.74h-1.35zM91.88 6.37h1.35v19.26h-1.35zM93.75 7.70h1.35v16.60h-1.35zM95.62 8.21h1.35v15.59h-1.35zM97.50 7.94h1.35v16.12h-1.35zM99.38 7.88h1.35v16.24h-1.35zM101.25 8.21h1.35v15.57h-1.35zM103.12 8.80h1.35v14.39h-1.35zM105.00 8.51h1.35v14.99h-1.35zM106.88 8.07h1.35v15.86h-1.35zM108.75 8.86h1.35v14.28h-1.35zM110.62 9.64h1.35v12.71h-1.35zM112.50 10.53h1.35v10.94h-1.35zM114.38 11.56h1.35v8.87h-1.35zM116.25 12.31h1.35v7.39h-1.35zM118.12 13.11h1.35v5.78h-1.35z'/%3E%3C/svg%3E"); }
.tcard[data-shape="acapella"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.00 12.19h1.35v7.62h-1.35zM1.88 11.34h1.35v9.32h-1.35zM3.75 10.92h1.35v10.16h-1.35zM5.62 10.22h1.35v11.57h-1.35zM7.50 9.90h1.35v12.20h-1.35zM9.38 9.26h1.35v13.48h-1.35zM11.25 7.61h1.35v16.78h-1.35zM13.12 7.54h1.35v16.92h-1.35zM15.00 8.69h1.35v14.62h-1.35zM16.88 8.47h1.35v15.06h-1.35zM18.75 8.74h1.35v14.51h-1.35zM20.62 9.93h1.35v12.13h-1.35zM22.50 10.24h1.35v11.52h-1.35zM24.38 11.17h1.35v9.67h-1.35zM26.25 12.82h1.35v6.36h-1.35zM28.12 14.54h1.35v2.93h-1.35zM30.00 14.99h1.35v2.02h-1.35zM31.88 14.97h1.35v2.06h-1.35zM33.75 14.95h1.35v2.10h-1.35zM35.62 14.94h1.35v2.13h-1.35zM37.50 14.92h1.35v2.16h-1.35zM39.38 14.91h1.35v2.19h-1.35zM41.25 14.89h1.35v2.21h-1.35zM43.12 14.88h1.35v2.23h-1.35zM45.00 14.87h1.35v2.25h-1.35zM46.88 14.87h1.35v2.27h-1.35zM48.75 14.86h1.35v2.28h-1.35zM50.62 14.85h1.35v2.30h-1.35zM52.50 14.85h1.35v2.30h-1.35zM54.38 14.84h1.35v2.31h-1.35zM56.25 14.84h1.35v2.32h-1.35zM58.12 14.84h1.35v2.32h-1.35zM60.00 14.84h1.35v2.32h-1.35zM61.88 14.84h1.35v2.32h-1.35zM63.75 14.84h1.35v2.31h-1.35zM65.62 14.85h1.35v2.30h-1.35zM67.50 14.83h1.35v2.33h-1.35zM69.38 14.25h1.35v3.50h-1.35zM71.25 12.39h1.35v7.23h-1.35zM73.12 10.91h1.35v10.18h-1.35zM75.00 9.91h1.35v12.18h-1.35zM76.88 8.54h1.35v14.93h-1.35zM78.75 6.57h1.35v18.86h-1.35zM80.62 5.76h1.35v20.48h-1.35zM82.50 5.87h1.35v20.27h-1.35zM84.38 3.72h1.35v24.56h-1.35zM86.25 3.73h1.35v24.54h-1.35zM88.12 5.93h1.35v20.15h-1.35zM90.00 6.48h1.35v19.04h-1.35zM91.88 6.63h1.35v18.74h-1.35zM93.75 6.59h1.35v18.82h-1.35zM95.62 6.11h1.35v19.78h-1.35zM97.50 6.84h1.35v18.33h-1.35zM99.38 7.79h1.35v16.42h-1.35zM101.25 8.51h1.35v14.99h-1.35zM103.12 10.53h1.35v10.93h-1.35zM105.00 12.10h1.35v7.81h-1.35zM106.88 13.16h1.35v5.69h-1.35zM108.75 14.17h1.35v3.67h-1.35zM110.62 14.94h1.35v2.12h-1.35zM112.50 15.13h1.35v1.74h-1.35zM114.38 15.13h1.35v1.74h-1.35zM116.25 15.13h1.35v1.74h-1.35zM118.12 15.13h1.35v1.74h-1.35z'/%3E%3C/svg%3E"); }
.tcard[data-shape="karaoke"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.00 13.15h1.35v5.71h-1.35zM1.88 12.18h1.35v7.65h-1.35zM3.75 11.21h1.35v9.57h-1.35zM5.62 10.35h1.35v11.30h-1.35zM7.50 9.51h1.35v12.98h-1.35zM9.38 8.86h1.35v14.28h-1.35zM11.25 8.49h1.35v15.02h-1.35zM13.12 8.59h1.35v14.83h-1.35zM15.00 8.43h1.35v15.13h-1.35zM16.88 8.36h1.35v15.29h-1.35zM18.75 8.53h1.35v14.95h-1.35zM20.62 8.69h1.35v14.62h-1.35zM22.50 8.77h1.35v14.47h-1.35zM24.38 8.71h1.35v14.59h-1.35zM26.25 8.35h1.35v15.29h-1.35zM28.12 7.15h1.35v17.70h-1.35zM30.00 5.91h1.35v20.19h-1.35zM31.88 4.85h1.35v22.31h-1.35zM33.75 4.20h1.35v23.60h-1.35zM35.62 3.67h1.35v24.66h-1.35zM37.50 3.92h1.35v24.15h-1.35zM39.38 5.31h1.35v21.38h-1.35zM41.25 6.01h1.35v19.98h-1.35zM43.12 6.71h1.35v18.58h-1.35zM45.00 7.26h1.35v17.48h-1.35zM46.88 7.09h1.35v17.82h-1.35zM48.75 7.40h1.35v17.20h-1.35zM50.62 7.06h1.35v17.87h-1.35zM52.50 6.43h1.35v19.14h-1.35zM54.38 6.24h1.35v19.53h-1.35zM56.25 5.03h1.35v21.93h-1.35zM58.12 4.05h1.35v23.89h-1.35zM60.00 3.79h1.35v24.42h-1.35zM61.88 3.37h1.35v25.27h-1.35zM63.75 3.26h1.35v25.47h-1.35zM65.62 4.00h1.35v24.00h-1.35zM67.50 5.03h1.35v21.94h-1.35zM69.38 6.05h1.35v19.91h-1.35zM71.25 6.02h1.35v19.96h-1.35zM73.12 6.57h1.35v18.85h-1.35zM75.00 7.15h1.35v17.70h-1.35zM76.88 7.17h1.35v17.66h-1.35zM78.75 7.33h1.35v17.34h-1.35zM80.62 7.07h1.35v17.87h-1.35zM82.50 6.27h1.35v19.45h-1.35zM84.38 5.95h1.35v20.10h-1.35zM86.25 5.44h1.35v21.13h-1.35zM88.12 5.19h1.35v21.61h-1.35zM90.00 5.10h1.35v21.81h-1.35zM91.88 5.43h1.35v21.14h-1.35zM93.75 6.35h1.35v19.30h-1.35zM95.62 7.81h1.35v16.37h-1.35zM97.50 8.86h1.35v14.29h-1.35zM99.38 9.12h1.35v13.75h-1.35zM101.25 9.03h1.35v13.94h-1.35zM103.12 9.74h1.35v12.52h-1.35zM105.00 9.78h1.35v12.44h-1.35zM106.88 9.86h1.35v12.28h-1.35zM108.75 10.16h1.35v11.68h-1.35zM110.62 9.95h1.35v12.09h-1.35zM112.50 9.69h1.35v12.62h-1.35zM114.38 10.18h1.35v11.64h-1.35zM116.25 11.14h1.35v9.73h-1.35zM118.12 12.02h1.35v7.97h-1.35z'/%3E%3C/svg%3E"); }
.tcard[data-shape="extract"] { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0.00 14.20h1.35v3.61h-1.35zM1.88 13.66h1.35v4.68h-1.35zM3.75 12.99h1.35v6.03h-1.35zM5.62 12.33h1.35v7.34h-1.35zM7.50 11.71h1.35v8.58h-1.35zM9.38 11.16h1.35v9.68h-1.35zM11.25 10.58h1.35v10.84h-1.35zM13.12 10.04h1.35v11.93h-1.35zM15.00 9.74h1.35v12.52h-1.35zM16.88 9.20h1.35v13.59h-1.35zM18.75 8.41h1.35v15.19h-1.35zM20.62 7.83h1.35v16.34h-1.35zM22.50 7.49h1.35v17.02h-1.35zM24.38 7.25h1.35v17.49h-1.35zM26.25 6.76h1.35v18.49h-1.35zM28.12 6.23h1.35v19.55h-1.35zM30.00 6.20h1.35v19.59h-1.35zM31.88 6.02h1.35v19.97h-1.35zM33.75 5.80h1.35v20.41h-1.35zM35.62 6.13h1.35v19.75h-1.35zM37.50 5.88h1.35v20.24h-1.35zM39.38 5.99h1.35v20.02h-1.35zM41.25 6.32h1.35v19.37h-1.35zM43.12 6.05h1.35v19.89h-1.35zM45.00 6.43h1.35v19.14h-1.35zM46.88 6.64h1.35v18.71h-1.35zM48.75 6.88h1.35v18.23h-1.35zM50.62 7.46h1.35v17.08h-1.35zM52.50 7.97h1.35v16.05h-1.35zM54.38 8.28h1.35v15.43h-1.35zM56.25 8.75h1.35v14.50h-1.35zM58.12 9.19h1.35v13.61h-1.35zM60.00 9.67h1.35v12.66h-1.35zM61.88 9.99h1.35v12.01h-1.35zM63.75 9.72h1.35v12.57h-1.35zM65.62 9.21h1.35v13.58h-1.35zM67.50 8.72h1.35v14.57h-1.35zM69.38 8.48h1.35v15.04h-1.35zM71.25 8.09h1.35v15.82h-1.35zM73.12 7.47h1.35v17.06h-1.35zM75.00 7.19h1.35v17.61h-1.35zM76.88 7.12h1.35v17.77h-1.35zM78.75 6.64h1.35v18.72h-1.35zM80.62 6.77h1.35v18.46h-1.35zM82.50 6.33h1.35v19.33h-1.35zM84.38 6.12h1.35v19.76h-1.35zM86.25 6.57h1.35v18.86h-1.35zM88.12 6.28h1.35v19.44h-1.35zM90.00 6.28h1.35v19.43h-1.35zM91.88 6.94h1.35v18.12h-1.35zM93.75 6.95h1.35v18.10h-1.35zM95.62 6.98h1.35v18.04h-1.35zM97.50 7.32h1.35v17.36h-1.35zM99.38 7.97h1.35v16.07h-1.35zM101.25 8.24h1.35v15.52h-1.35zM103.12 8.77h1.35v14.46h-1.35zM105.00 9.38h1.35v13.23h-1.35zM106.88 9.80h1.35v12.39h-1.35zM108.75 10.40h1.35v11.21h-1.35zM110.62 11.07h1.35v9.86h-1.35zM112.50 11.84h1.35v8.33h-1.35zM114.38 12.49h1.35v7.02h-1.35zM116.25 13.10h1.35v5.80h-1.35zM118.12 13.74h1.35v4.52h-1.35z'/%3E%3C/svg%3E"); }
.work-wave { height: 150px; margin: 0 0 18px; border-radius: 12px; }
.extract-wave { height: 150px; }
@media (prefers-reduced-motion: reduce) { .tcard .mini { animation: none; } }
@media (max-width: 720px) { .work-wave, .extract-wave { height: 110px; } }
.bar span, .bar > span { background: linear-gradient(90deg, #86e6ee, #a08aff); box-shadow: 0 0 10px rgba(134,230,238,.4); }

/* Additional stem controls reuse the existing button/segment treatment. */
.stem-panel { margin-top: 28px; }
.stem-panel h3 { font-size: 18px; margin-bottom: 10px; }
.stem-panel .seg { flex-wrap: wrap; margin-bottom: 12px; }
.stem-panel audio { display: block; width: 100%; margin-bottom: 16px; }

/* Currency is a preference; changing it never resets the tool. */
.price-preferences{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:12px}
.price-preferences select{font:inherit;color:var(--text,#edf0f7);background:#171a23;border:1px solid #424650;border-radius:6px;padding:5px 8px}
.plan [aria-disabled="true"]{pointer-events:none}

.language-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:14px;font-size:12px}
.language-links [aria-current="true"]{color:var(--text);text-decoration:underline;text-underline-offset:4px}

/* Review 12:30 (Kyle 12:01): headlines and ledes break into balanced lines (no lone "sound." on phones);
   Japanese breaks at natural phrase boundaries; long links on text pages wrap instead of overflowing. */
.lede { text-wrap: balance; }
/* Each sentence of a headline is its own balanced line box (a lone "sound." on phones looked broken). */
.hero h1 { display: flex; flex-direction: column; align-items: center; text-wrap: balance; } .hero h1 br { display: none; }
:lang(ja) :is(h1, .lede, .tc-say, .hint) { word-break: auto-phrase; }
main a { overflow-wrap: anywhere; }
/* Language menu, top right of every page: a globe and the current language name in a smoked-glass key;
   opens a small glass panel of languages (the current one lit). */
.lang-menu { position: absolute; top: 16px; right: 20px; z-index: 30; font-size: 13.5px; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid #2c2c36; background: var(--key); color: var(--text); box-shadow: inset 0 1px 0 var(--hair-hi), inset 0 -1px 0 var(--hair-lo); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lang-menu summary:hover { border-color: rgba(158,227,245,.45); }
.lang-menu .lang-list { position: absolute; right: 0; top: calc(100% + 6px); display: grid; gap: 2px; min-width: min(180px, calc(100vw - 28px)); max-width: calc(100vw - 28px); padding: 6px; margin: 0; border-radius: 12px;
  max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior-y: contain; touch-action: pan-y; justify-content: stretch;
  border: 1px solid var(--line); background: rgba(17,17,22,.96); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -20px rgba(0,0,0,.8); font-size: 14px; }
.lang-menu .lang-list a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; }
.lang-menu .lang-list a:hover { color: var(--text); background: var(--hover); }
.lang-menu .lang-list a[aria-current="true"] { color: var(--text); text-decoration: none; }
.lang-menu .lang-list a[aria-current="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--voice); box-shadow: 0 0 6px var(--voice); }
.lang-menu .lang-list a:not([aria-current="true"])::before { content: ""; width: 6px; height: 6px; }
@media (max-width: 720px) { .lang-menu { top: 14px; right: 14px; } .lang-menu summary { height: 32px; padding: 0 10px; } }
@media (min-width: 1200px) { .lang-menu { position: fixed; top: 18px; right: 24px; left: auto; } }

/* ===================================================================================================
   Visual pass: Kyle's Claude-app session, 1 Oct ("breathtakingly beautiful, cool, groovy, future").
   One layer on top of everything above: a living aurora behind every page, a shimmering headline,
   a glowing drop button, glass cards with light that follows the hover, glass FAQ rows, and gentle
   scroll-in motion. Dark theme only; the light theme keeps its own look. Motion stops for
   prefers-reduced-motion.
   =================================================================================================== */
@property --ve-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root { --ve-a: 108 232 255; --ve-b: 168 126 255; --ve-c: 92 240 205; --ve-d: 255 120 220; --ve-ease: cubic-bezier(.2, .8, .2, 1); }

/* Atmosphere: slow aurora pools of the waveform's colours, a whisper of grain and a fading dot grid. */
:root:not([data-theme="light"]) { background: var(--bg); }
:root:not([data-theme="light"]) body { background: transparent; position: relative; isolation: isolate; }
:root:not([data-theme="light"]) body::before {
  content: ""; position: fixed; inset: -25vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34vmax 24vmax at 30% 22%, rgb(var(--ve-a) / .20), transparent 70%),
    radial-gradient(38vmax 26vmax at 76% 26%, rgb(var(--ve-b) / .24), transparent 70%),
    radial-gradient(30vmax 22vmax at 62% 58%, rgb(var(--ve-d) / .07), transparent 70%),
    radial-gradient(44vmax 28vmax at 30% 96%, rgb(var(--ve-c) / .05), transparent 70%);
  filter: blur(24px) saturate(125%);
  animation: ve-aurora 28s ease-in-out infinite alternate;
}
:root:not([data-theme="light"]) body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px);
  background-size: 160px 160px, 26px 26px;
  opacity: .32;
  -webkit-mask-image: radial-gradient(120vmax 70vmax at 50% 0%, #000 20%, transparent 75%);
          mask-image: radial-gradient(120vmax 70vmax at 50% 0%, #000 20%, transparent 75%);
}
@keyframes ve-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3vmax, -2vmax, 0) rotate(7deg) scale(1.07); }
  100% { transform: translate3d(-3vmax, 2.5vmax, 0) rotate(-5deg) scale(1.02); }
}

/* Headline: crisp white line, then "Keep the voice." in moving liquid light. */
:root:not([data-theme="light"]) .hero h1 { letter-spacing: -0.038em; }
:root:not([data-theme="light"]) .hero h1 em {
  background: linear-gradient(100deg, #b8f4ff 0%, #7fe9d4 18%, #8fb8ff 34%, #b9a2ff 50%, #f3a8ff 62%, #a9ecff 78%, #b8f4ff 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ve-sheen 14s linear infinite;
  filter: drop-shadow(0 0 24px rgb(var(--ve-a) / .3));   /* one soft glow: it is redrawn as the colours drift (stage.js) */
}
@keyframes ve-sheen { to { background-position: -300% 0; } }
:root:not([data-theme="light"]) .lede { color: #a7a9b8; }

/* The drop button: a glass pill with a comet of light orbiting its rim and a soft breathing halo. */
:root:not([data-theme="light"]) .drop .drop-cta .btn {
  position: relative; isolation: isolate;
  background: linear-gradient(120deg, #d2f8ff 0%, #a9efe2 34%, #c3b4ff 72%, #f0c6ff 100%);
  color: #090a12; letter-spacing: -0.012em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .16),
              0 10px 34px -10px rgb(var(--ve-a) / .7), 0 0 70px -12px rgb(var(--ve-b) / .75);
  animation: ve-breathe 4.8s ease-in-out infinite;
  transition: transform .35s var(--ve-ease), box-shadow .35s var(--ve-ease);
}
:root:not([data-theme="light"]) .drop .drop-cta .btn::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--ve-angle), transparent 0 58%, rgb(var(--ve-a) / .95) 70%, #fff 76%, rgb(var(--ve-b) / .95) 82%, transparent 92% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ve-orbit 3.6s linear infinite;
}
:root:not([data-theme="light"]) .drop:hover .drop-cta .btn, :root:not([data-theme="light"]) .drop.drag .drop-cta .btn { transform: translateY(-2px) scale(1.03); }
@keyframes ve-orbit { to { --ve-angle: 360deg; } }
@keyframes ve-breathe {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.16), 0 10px 34px -10px rgb(var(--ve-a) / .6), 0 0 60px -14px rgb(var(--ve-b) / .6); }
  50%      { box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(0,0,0,.16), 0 12px 44px -8px rgb(var(--ve-a) / .85), 0 0 90px -8px rgb(var(--ve-b) / .85); }
}

/* Sidebar / tool rail: the current tool glows; others light up on hover. */
:root:not([data-theme="light"]) .tools a { transition: background .25s var(--ve-ease), color .25s, box-shadow .25s; }
:root:not([data-theme="light"]) .tools a[aria-current] {
  background: linear-gradient(120deg, rgb(var(--ve-a) / .12), rgb(var(--ve-b) / .14));
  border-color: rgb(var(--ve-a) / .28);
  box-shadow: 0 0 0 1px rgb(var(--ve-b) / .10) inset, 0 10px 30px -16px rgb(var(--ve-b) / .8);
}

/* Tool cards: frosted glass, a light that follows the pointer (--mx/--my from visual.js), a lift. */
:root:not([data-theme="light"]) .tcard {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018)), rgba(14, 14, 20, .55);
  border-color: rgba(255, 255, 255, .075); border-radius: 16px;
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  transition: transform .45s var(--ve-ease), box-shadow .45s var(--ve-ease), border-color .45s;
}
:root:not([data-theme="light"]) .tcard::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(220px 140px at var(--mx, 50%) var(--my, 0%), rgb(var(--ve-a) / .16), rgb(var(--ve-b) / .08) 45%, transparent 70%);
}
@media (hover: hover) {
  :root:not([data-theme="light"]) .tcard:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .14);
    box-shadow: 0 24px 60px -28px rgb(var(--ve-b) / .75), 0 10px 30px -20px rgb(var(--ve-a) / .6); }
  :root:not([data-theme="light"]) .tcard:hover::before { opacity: 1; }
}

/* Help: the guides become glass links with an arrow; the questions become glass rows that glow open. */
:root:not([data-theme="light"]) .help > p > a {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; text-decoration: none; font-weight: 550;
  background: linear-gradient(120deg, rgb(var(--ve-a) / .07), rgb(var(--ve-b) / .07)); border: 1px solid rgba(255, 255, 255, .08);
  transition: border-color .3s, transform .35s var(--ve-ease), box-shadow .35s var(--ve-ease);
}
:root:not([data-theme="light"]) .help > p > a::after { content: "→"; margin-left: auto; color: var(--voice); transition: transform .35s var(--ve-ease); }
:root:not([data-theme="light"]) .help > p > a:hover { border-color: rgb(var(--ve-a) / .35); transform: translateY(-2px); box-shadow: 0 16px 40px -26px rgb(var(--ve-a) / .8); }
:root:not([data-theme="light"]) .help > p > a:hover::after { transform: translateX(4px); }
/* A row of links written with " · " separators becomes a stack of cards: the separators would be stray dots. */
:root:not([data-theme="light"]) .help > p.links { display: grid; gap: 10px; font-size: 0; }
:root:not([data-theme="light"]) .help > p.links > a { font-size: 15px; }
:root:not([data-theme="light"]) .help details {
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px; margin: 10px 0; padding: 0 18px;
  background: rgba(255, 255, 255, .022); transition: background .3s, border-color .3s, box-shadow .4s var(--ve-ease);
}
:root:not([data-theme="light"]) .help details:last-child { border-bottom: 1px solid rgba(255, 255, 255, .07); }
:root:not([data-theme="light"]) .help details:hover { background: rgba(255, 255, 255, .035); }
:root:not([data-theme="light"]) .help details[open] {
  background: linear-gradient(160deg, rgb(var(--ve-a) / .06), rgb(var(--ve-b) / .05)); border-color: rgb(var(--ve-a) / .22);
  box-shadow: 0 20px 50px -34px rgb(var(--ve-b) / .9);
}
:root:not([data-theme="light"]) .help summary::after { color: var(--voice); }

/* Footer: a hairline of light instead of a grey rule. */
:root:not([data-theme="light"]) .foot { border-top: 0; position: relative; }
:root:not([data-theme="light"]) .foot::before {
  content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--ve-a) / .45), rgb(var(--ve-b) / .45), transparent);
}

/* Scroll-in: cards, guides and questions rise into place as they enter (browsers with scroll timelines). */
@supports (animation-timeline: view()) {
  :root:not([data-theme="light"]) .tcard, :root:not([data-theme="light"]) .help > p, :root:not([data-theme="light"]) .help details {
    animation: ve-scroll-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%;
  }
}
@keyframes ve-scroll-in { from { opacity: 0; translate: 0 22px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  :root body::before, .hero h1 em, .drop .drop-cta .btn, .drop .drop-cta .btn::after, .tcard, .help > p, .help details { animation: none !important; }
}
/* Ten tools sit as two even rows of five on wide screens instead of 4 + 4 + 2. */
/* The background remover's stage (Oct 2): David's shot right under the subline and as tall as the space allows (Kyle:
   "could be bigger", no empty space above it), the button just under its floor. */
body[data-mode="image"] .drop.staged { margin-top: -33px; height: 486px; }
body[data-mode="image"] .drop.staged .wave { inset: 6px 0 auto; height: 380px; }
body[data-mode="image"] .drop.staged .drop-cta { inset: 325px 0 auto; }
body[data-mode="image"] .drop.staged .drop-cta > .hint:nth-child(2) { margin-top: 4px; }
@media (max-width: 720px) {
  body[data-mode="image"] .drop.staged { margin-top: -34px; height: 380px; }
  body[data-mode="image"] .drop.staged .wave { inset: 6px 0 auto; height: 256px; }
  body[data-mode="image"] .drop.staged .drop-cta { inset: 224px 0 auto; }
  body[data-mode="image"] .drop.staged .drop-cta > .hint:nth-child(2) { margin-top: 2px; }
}
@media (min-width: 1200px) {
  body[data-mode="image"] .drop.staged { height: 536px; }
  body[data-mode="image"] .drop.staged .wave { height: 440px; }
  body[data-mode="image"] .drop.staged .drop-cta { inset: 373px 0 auto; }
}

@media (min-width: 1180px) { .tool-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1020px; } }
/* A bigger stage for the waveform on wide screens: wider and taller, so the hero sells the separation. */
@media (min-width: 1200px) {
  .hero { max-width: 1240px; }
  .tool[data-state="idle"]:has(.drop.staged) { max-width: 1200px; }
  .drop.staged { height: 488px; }
  .drop.staged .wave { height: 384px; }
  .drop.staged .drop-cta { inset: 190px 0 auto; }
  .drop.staged .drop-cta > .hint:nth-child(2) { margin-top: 168px; }
}

/* Visual pass 3: the processing and result screens get the same glass and light as the landing. */
:root:not([data-theme="light"]) .tool[data-state="working"],
:root:not([data-theme="light"]) .tool[data-state="result"],
:root:not([data-theme="light"]) .tool[data-state="error"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)), rgba(11, 11, 17, .66);
  border-color: rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 50px 120px -60px rgb(var(--ve-b) / .6), 0 30px 90px -60px rgb(var(--ve-a) / .5);
}
/* Steps: the current one glows and its words shimmer; finished ones get a check of light. */
:root:not([data-theme="light"]) .steps li.now {
  background: linear-gradient(90deg, #e9fbff 0%, #9fe9ff 30%, #c6b2ff 50%, #e9fbff 70%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: ve-sheen 2.6s linear infinite;
}
:root:not([data-theme="light"]) .steps li.now::before {
  background: radial-gradient(circle, #fff 0 25%, var(--voice) 55%); border-color: transparent;
  box-shadow: 0 0 0 5px rgb(var(--ve-a) / .16), 0 0 18px 2px rgb(var(--ve-a) / .7);
}
:root:not([data-theme="light"]) .steps li.done { color: #c9cbd6; }
:root:not([data-theme="light"]) .steps li.done::before {
  background: linear-gradient(135deg, var(--voice), var(--music)); border-color: transparent; box-shadow: 0 0 10px rgb(var(--ve-a) / .45);
}
/* Progress: a liquid fill with a moving sheen and a bright head. */
:root:not([data-theme="light"]) .bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); overflow: visible; }
:root:not([data-theme="light"]) .bar span {
  position: relative; border-radius: inherit;
  background: linear-gradient(90deg, #5fe3d0, #7cc8ff 35%, #a58cff 70%, #e79cff), linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  background-size: 100% 100%, 40% 100%; background-repeat: no-repeat; background-blend-mode: screen;
  animation: ve-bar-sheen 1.8s linear infinite;
  box-shadow: 0 0 14px rgb(var(--ve-a) / .55), 0 0 28px -4px rgb(var(--ve-b) / .6);
}
:root:not([data-theme="light"]) .bar span::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(0, -50%);
  background: radial-gradient(circle, #fff 0 30%, rgb(var(--ve-a) / .9) 55%, transparent 72%); filter: blur(.4px);
  box-shadow: 0 0 16px 4px rgb(var(--ve-a) / .7);
}
@keyframes ve-bar-sheen { from { background-position: 0 0, -40% 0; } to { background-position: 0 0, 140% 0; } }
/* Result: the main download wears the same orbiting light as the drop button. */
:root:not([data-theme="light"]) #dl-mix { position: relative; isolation: isolate;
  background: linear-gradient(120deg, #d2f8ff 0%, #a9efe2 34%, #c3b4ff 72%, #f0c6ff 100%); color: #090a12; }
:root:not([data-theme="light"]) #dl-mix::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; padding: 2px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--ve-angle), transparent 0 58%, rgb(var(--ve-a) / .95) 70%, #fff 76%, rgb(var(--ve-b) / .95) 82%, transparent 92% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ve-orbit 3.6s linear infinite;
}
:root:not([data-theme="light"]) .actions .btn.ghost {
  background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Every headline's accent line shimmers like the landing's (guides included). */
:root:not([data-theme="light"]) h1 em {
  background: linear-gradient(100deg, #b8f4ff 0%, #7fe9d4 18%, #8fb8ff 34%, #b9a2ff 50%, #f3a8ff 62%, #a9ecff 78%, #b8f4ff 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: ve-sheen 14s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .steps li.now, .bar span, #dl-mix::after, h1 em { animation: none !important; } }
/* Paywall: glass plans; Pro is the hero with an orbiting aurora rim and a liquid-light price. */
:root:not([data-theme="light"]) .pw-tag {
  color: #cdf6ff; background: linear-gradient(90deg, rgb(var(--ve-a) / .16), rgb(var(--ve-b) / .16));
  box-shadow: inset 0 0 0 1px rgb(var(--ve-a) / .28), 0 0 26px -6px rgb(var(--ve-a) / .6);
}
:root:not([data-theme="light"]) .paywall h2 { font-size: clamp(26px, 3.2vw, 34px); letter-spacing: -0.03em; }
:root:not([data-theme="light"]) .plans { gap: 14px; }
:root:not([data-theme="light"]) .plan {
  position: relative; isolation: isolate; padding: 18px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)), rgba(12, 12, 18, .62);
  border-color: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .4s var(--ve-ease), box-shadow .4s var(--ve-ease), border-color .3s;
}
:root:not([data-theme="light"]) .plan:not(:disabled):hover { border-color: rgba(255, 255, 255, .2); box-shadow: 0 24px 60px -30px rgb(var(--ve-a) / .7); }
:root:not([data-theme="light"]) .plan.pro {
  border-color: transparent;
  background: linear-gradient(160deg, rgb(var(--ve-a) / .13), rgb(var(--ve-b) / .17) 60%, rgb(var(--ve-d) / .10)), rgba(14, 12, 24, .72);
  box-shadow: inset 0 0 0 1px rgb(var(--ve-b) / .22), 0 34px 80px -36px rgb(var(--ve-b) / .9), 0 20px 50px -34px rgb(var(--ve-a) / .7);
}
:root:not([data-theme="light"]) .plan.pro::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; z-index: -1; pointer-events: none;
  background: conic-gradient(from var(--ve-angle), rgb(var(--ve-a) / .9), rgb(var(--ve-b) / .9), rgb(var(--ve-d) / .8), rgb(var(--ve-c) / .9), rgb(var(--ve-a) / .9));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ve-orbit 7s linear infinite;
}
:root:not([data-theme="light"]) .plan [data-price] { font-size: 28px; letter-spacing: -0.02em; }
:root:not([data-theme="light"]) .plan.pro [data-price] {
  background: linear-gradient(100deg, #c6f6ff, #9fe9da 30%, #c3b0ff 60%, #f3b4ff); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgb(var(--ve-b) / .45));
}
@media (prefers-reduced-motion: reduce) { .plan.pro::after { animation: none !important; } }

/* ===================================================================================================
   One tool, plain choices (Kyle, 1 Oct: "a mute button on by default" was confusing). The four
   separation pages share one mixer; three presets say what you're listening to, lit in the stem's
   colour, and the page only chooses which one starts lit. Popular uses sit under the tool as chips. */
.presets { display: inline-flex; gap: 3px; padding: 3px; margin-left: auto; border-radius: 10px; border: 1px solid #2c2c36;
  background: var(--key, #18181f); box-shadow: inset 0 1px 0 var(--hair-lo, rgba(0,0,0,.6)), inset 0 -1px 0 var(--hair-hi, rgba(255,255,255,.06)); }
.presets button { height: 30px; padding: 0 15px; border: 0; border-radius: 7px; background: transparent; color: var(--muted);
  font: 600 13px/1 var(--font); letter-spacing: .01em; transition: background .25s var(--ease), color .2s, box-shadow .25s; }
.presets button:hover { color: var(--text); background: var(--hover); }
.presets button[aria-pressed="true"] { color: #0b0b0e; }
.presets [data-preset="voice"][aria-pressed="true"] { background: var(--voice); box-shadow: 0 0 18px -4px var(--voice); }
.presets [data-preset="music"][aria-pressed="true"] { background: var(--music); box-shadow: 0 0 18px -4px var(--music); }
.presets [data-preset="both"][aria-pressed="true"] { background: linear-gradient(110deg, var(--voice), var(--music)); box-shadow: 0 0 18px -4px rgba(160,140,255,.8); }
:root[data-theme="light"] .presets { background: var(--raised); border-color: var(--edge); box-shadow: none; }
:root[data-theme="light"] .presets button[aria-pressed="true"] { color: #fff; }
.mixer[data-original="true"] .presets button[aria-pressed="true"] { opacity: .55; }
@media (max-width: 720px) { .presets { margin-left: 0; order: 3; } .presets button { padding: 0 12px; } }

.uses { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1080px; margin: 30px auto 0; padding: 0 20px; }
.uses a { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 17px 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,255,255,.03); color: var(--text); font-size: 14.5px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: border-color .2s, background .2s, box-shadow .25s, transform .25s var(--ease); }
.uses a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--voice), var(--music)); box-shadow: 0 0 8px rgba(158,227,245,.55); }
.uses a:hover { border-color: rgba(158,227,245,.45); background: rgba(158,227,245,.06); box-shadow: 0 0 24px -8px rgba(158,227,245,.5); transform: translateY(-1px); }
:root:not([data-theme="light"]) .uses a { backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
@media (max-width: 720px) { .uses { gap: 8px; margin-top: 24px; padding: 0 14px; } .uses a { height: 34px; padding: 0 13px 0 11px; gap: 7px; font-size: 13.5px; } }
/* While a file is working or playing, the tool is the page: the chips step aside. */
body:has(#tool:not([data-state="idle"])) .uses { display: none; }

/* The language key stays above every panel and glass card, and reads as glass itself. */
.lang-menu { z-index: 300; }
:root:not([data-theme="light"]) .lang-menu summary { background: rgba(20,20,28,.62); border-color: rgba(255,255,255,.10);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
:root:not([data-theme="light"]) .lang-menu .lang-list { background: rgba(14,14,20,.86); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); }

/* Guides: one quiet line of links under the tool (the long FAQ went, Kyle 1 Oct: "no one wants to read
   any of that"). The sidebar is the one list of tools; the duplicate tool cards went too. */
.guides { display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 6px 22px; max-width: 900px; margin: 56px auto 0; padding: 0 20px; font-size: 13.5px; }
.guides a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.guides a:hover { color: var(--text); border-bottom-color: rgba(158,227,245,.5); }
body:has(#tool:not([data-state="idle"])) .guides { display: none; }
/* The currency key sits with the plans, small and centred. */
.pw-currency { display: flex; justify-content: center; margin: 12px 0 2px; }
.pw-currency:empty { display: none; }
.pw-currency .price-preferences { margin: 0; color: var(--muted); font-size: 12.5px; }
.pw-currency select { border-radius: 8px; padding: 5px 9px; background: rgba(20,20,28,.7); border-color: rgba(255,255,255,.12); }

/* Wordmark: white type that a slow band of the waveform's light passes through now and then. */
:root:not([data-theme="light"]) .brand { background: linear-gradient(100deg, #f4f3f0 0 40%, #bff3ff 50%, #d6caff 58%, #f4f3f0 68%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: brand-sheen 11s ease-in-out infinite; }
@keyframes brand-sheen { 0%, 62% { background-position: 100% 0; } 92%, 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { :root:not([data-theme="light"]) .brand { animation: none; } }

/* Long tool names (Spanish "Detectar BPM y tonalidad") wrap instead of squeezing out their icon. */
.tools a svg { flex: none; }
@media (min-width: 1200px) { .tools a { white-space: normal; line-height: 1.25; padding-block: 8px; } }
/* The immediate offer (free processing full for today): only the file line and the plans show. */
#tool.offer-only .result > :not(#paywall):not(.rfile) { display: none !important; }
#tool.offer-only #paywall { margin-top: 8px; border-top: 0; }

/* What the tool does, said on the tool (Kyle, 1 Oct: "vocal remover implies one single function"):
   three jobs in one glass key above the waveform. Each is its own page with the same tool; the current
   one is lit, so switching feels like a tab. */
.jobs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: fit-content; max-width: calc(100% - 28px);
  margin: 26px auto 0; padding: 5px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 50px -30px rgba(0,0,0,.9); }
.jobs a { display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border-radius: 999px; color: var(--muted);
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: color .2s, background .25s var(--ease), box-shadow .25s; }
.jobs a:hover { color: var(--text); background: rgba(255,255,255,.06); }
.jobs a[aria-current] { color: #0b0b0e; background: linear-gradient(110deg, #d2f8ff, #a9efe2 42%, #c3b4ff 88%);
  box-shadow: 0 0 24px -6px rgba(158,227,245,.75), inset 0 1px 0 rgba(255,255,255,.6); }
:root:not([data-theme="light"]) .jobs { backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
:root[data-theme="light"] .jobs { background: var(--raised); border-color: var(--edge); }
body:has(#tool:not([data-state="idle"])) .jobs { display: none; }
@media (max-width: 720px) {
  .jobs { border-radius: 22px; gap: 3px; margin-top: 20px; }
  .jobs a { height: 36px; padding: 0 13px; font-size: 13.5px; }
}
/* "Remove background" stays on one line when lit (the three jobs are sidebar items now). */
@media (min-width: 1200px) {
  body:has(> .tools) { padding-left: 262px; }
  body:has(> .tools) .top { width: 246px; }
  .tools { width: 230px; }
}

/* Account key (account.js), top right beside the language menu: "Sign in", or the plan once it's here. */
.corner { position: absolute; top: 16px; right: 20px; z-index: 300; display: flex; align-items: flex-start; gap: 8px; }
.corner > .lang-menu { position: relative; top: auto; right: auto; }
@media (min-width: 1200px) { .corner { position: fixed; top: 18px; right: 24px; } .corner > .lang-menu { position: relative; } }
@media (max-width: 720px) { .corner { top: 14px; right: 14px; gap: 6px; } }
.acct-key { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 8px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(20,20,28,.62); color: var(--text); font: 600 13.5px var(--font); cursor: pointer;
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); }
.acct-key:hover { border-color: rgba(158,227,245,.45); }
.acct-key .acct-dot { display: none; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--voice), var(--music)); box-shadow: 0 0 8px rgba(158,227,245,.7); }
.acct-key.on .acct-dot { display: inline-block; }
@media (max-width: 720px) { .acct-key { height: 32px; padding: 0 10px; } }
.acct-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 240px; max-width: calc(100vw - 28px); padding: 8px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(14,14,20,.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.8); display: grid; gap: 2px; }
.acct-menu p { margin: 4px 10px 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.acct-menu .acct-who { color: var(--text); font-weight: 600; overflow-wrap: anywhere; }
.acct-menu .acct-ends { margin-top: -2px; color: #f3c98b; }
.acct-menu button { text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 500 14px var(--font); }
.acct-menu button:hover { background: var(--hover); }
.acct-dialog { width: min(420px, calc(100vw - 32px)); padding: 30px 26px 24px; border-radius: 18px; border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01)), #101016; color: var(--text); text-align: center;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), 0 30px 90px -60px rgb(var(--ve-a, 158 227 245) / .5); }
.acct-dialog::backdrop { background: rgba(5,5,9,.6); backdrop-filter: blur(4px); }
.acct-dialog h2 { margin: 0 0 6px; font: 700 24px/1.2 var(--display); letter-spacing: -.02em; }
.acct-sub { margin: 0 0 18px; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.acct-form { display: grid; gap: 10px; }
.acct-form input { height: 46px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--text); font: 500 16px var(--font); }
.acct-form input:focus { outline: none; border-color: rgba(158,227,245,.6); box-shadow: 0 0 0 3px rgba(158,227,245,.15); }
.acct-form .acct-code { text-align: center; font: 700 24px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .4em; }
.acct-form .btn { height: 46px; justify-content: center; }
.acct-form .link { justify-self: center; color: var(--muted); font-size: 14px; }
.acct-msg { min-height: 1.2em; margin: 12px 0 0; color: #ffb4a8; font-size: 14px; }
.acct-msg:empty { display: none; }
.acct-close { position: absolute; top: 10px; right: 12px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.acct-close:hover { color: var(--text); background: var(--hover); }
.pw-signin { margin: 6px 0 0; text-align: center; }
.pw-signin .link { font-size: 14px; color: var(--muted); }
.acct-form .btn { display: inline-flex; align-items: center; }

/* ===================================================================================================
   Light on every device (Kyle, 1 Oct: "users' computers and phones need to not be overpowered"). Measured
   idle cost of the home page was ~63% of a CPU core across the browser: every looping effect made the
   browser redraw the whole page, blurred layers included, at full frame rate. Now nothing decorative
   loops on an idle page: effects play once, or while you point at them. The waveform paces itself in
   portal.js. Big panels are solid glass instead of live blur; only small keys and menus blur. */
:root:not([data-theme="light"]) body::before { filter: none; animation: none; }
:root:not([data-theme="light"]) h1 em { animation-iteration-count: 1; }
:root:not([data-theme="light"]) .brand { animation-iteration-count: 1; }
.btn.ghost, .ab, .key, .tools a[aria-current],
.btn.ghost::after, .ab::after, .key::after, .tools a::after,
.drop .drop-cta .btn, .drop .drop-cta .btn::after, #dl-mix::after, .plan.pro::after { animation-play-state: paused !important; }
.btn.ghost:hover, .ab:hover, .key:hover, .tools a[aria-current]:hover,
.btn.ghost:hover::after, .ab:hover::after, .key:hover::after, .tools a:hover::after, .btn.ghost:focus-visible::after, .ab:focus-visible::after,
.drop:hover .drop-cta .btn, .drop:hover .drop-cta .btn::after, .drop.over .drop-cta .btn, .drop.over .drop-cta .btn::after,
#dl-mix:hover::after, #dl-mix:focus-visible::after, .plan.pro:hover::after, .plan.pro:focus-visible::after { animation-play-state: running !important; }
:root:not([data-theme="light"]) .tool[data-state="working"], :root:not([data-theme="light"]) .tool[data-state="result"], :root:not([data-theme="light"]) .tool[data-state="error"] {
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)), rgba(13, 13, 19, .94); }
:root:not([data-theme="light"]) .hero h1 em { animation-iteration-count: 1; }
.plan .btn, .plan b.btn { animation-play-state: paused !important; }
.plan:hover .btn, .plan:focus-visible .btn { animation-play-state: running !important; }
/* One-time effects stay brief (each forces full-rate redraws while it plays): the headline sheen is one
   2.4 s pass, and the logo's text shimmer plays while you point at it. */
:root:not([data-theme="light"]) .hero h1 em, :root:not([data-theme="light"]) h1 em { animation-duration: 2.4s; }
:root:not([data-theme="light"]) .brand { animation-play-state: paused; }
:root:not([data-theme="light"]) .brand:hover { animation-play-state: running; }
.acct-up { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
  font: 650 13.5px var(--font); color: #0b0b0e; background: linear-gradient(110deg, #d2f8ff, #a9efe2 42%, #c3b4ff 88%);
  box-shadow: 0 0 18px -6px rgba(158,227,245,.75), inset 0 1px 0 rgba(255,255,255,.6); }
.acct-up:hover { filter: brightness(1.06); }
/* Sign up breathes a soft bloom (Kyle, 1 Oct: "subtly enticing"). The glow is drawn once; only its opacity
   and scale move, which the GPU handles without repainting. */
:root:not([data-theme="light"]) .acct-up { position: relative; z-index: 1; }   /* its light spills over Sign in, never under its glass */
:root:not([data-theme="light"]) .acct-up::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  /* sized and nudged down so it fades out before the top of the page instead of ending in a straight line */
  box-shadow: 0 3px 11px 0 rgba(169, 239, 226, .55), 0 4px 20px 1px rgba(195, 180, 255, .34);
  opacity: .25; animation: ve-bloom 2.8s ease-in-out infinite alternate; }
@keyframes ve-bloom { to { opacity: .95; } }   /* brightness only: the glow always starts at the button's edge */
@media (prefers-reduced-motion: reduce) { :root:not([data-theme="light"]) .acct-up::before { animation: none; opacity: .6; } }
/* Signed in: their initial in a glowing ring; plan holders get a badge beside it. */
.acct-me { width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; color: var(--text);
  font: 700 14px var(--font); background: radial-gradient(circle at 30% 25%, #2a2a38, #14141c);
  box-shadow: 0 0 0 1.5px rgba(158,227,245,.55), 0 0 14px -4px rgba(160,140,255,.7); }
.acct-me:hover { box-shadow: 0 0 0 1.5px rgba(158,227,245,.9), 0 0 18px -4px rgba(160,140,255,.9); }
.acct-badge { display: inline-flex; align-items: center; height: 26px; margin-top: 4px; padding: 0 10px; border-radius: 999px;
  font: 700 12px var(--font); letter-spacing: .04em; color: var(--text); border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); }
.acct-badge.pro { color: #0b0b0e; border: 0; background: linear-gradient(110deg, #d2f8ff, #a9efe2 35%, #c3b4ff 70%, #f0c8ff);
  box-shadow: 0 0 16px -4px rgba(195,180,255,.9), inset 0 1px 0 rgba(255,255,255,.7); }
.acct-up[hidden], .acct-key[hidden], .acct-me[hidden], .acct-badge[hidden] { display: none; }
@media (max-width: 720px) { .acct-up { height: 32px; padding: 0 11px; } .acct-me { width: 32px; height: 32px; } }
@media (max-width: 420px) { .acct-up { padding: 0 9px; font-size: 12.5px; } }
/* Phones: the language key shows just its globe so Plans and Sign in fit beside the logo. */
@media (max-width: 720px) { .corner .lang-menu summary span { display: none; } .corner .lang-menu summary { padding: 0 9px; } }
@media (max-width: 420px) {
  .corner { gap: 4px; right: 10px; }
  .acct-key { padding: 0 9px; font-size: 12.5px; }
  .top .brand { font-size: 15px; gap: 8px; }
}
/* Account (Oct 2): Profile and Billing tabs; Billing cancels or resumes Pro, like ElevenLabs. */
.account-dialog { width: min(440px, calc(100vw - 32px)); text-align: left; }
.account-dialog h2 { text-align: center; }
.account-dialog .acct-tabs { margin: 14px auto 16px; }
.account-dialog .acct-tabs button[aria-selected="true"] { color: #0b0b0e; }
.acct-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.acct-row span { color: var(--muted); flex: none; }
.acct-row b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.acct-row.warn b { color: #f3c98b; }
.acct-actions { display: grid; gap: 8px; margin-top: 20px; }
.acct-btn { height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(255,255,255,.04); color: var(--text); font: 600 14.5px var(--font); cursor: pointer; text-decoration: none; }
.acct-btn:hover { background: var(--hover); }
.acct-btn:disabled { opacity: .6; cursor: default; }
.acct-btn.primary { border: 0; color: #0b0b0e; background: linear-gradient(110deg, var(--voice), var(--music)); box-shadow: 0 0 22px -8px rgba(160,140,255,.8); }
.acct-btn.danger { color: #ffb4a8; border-color: rgba(255,140,120,.28); background: rgba(255,120,100,.05); }
.acct-btn.danger:hover { background: rgba(255,120,100,.12); }
.acct-note { margin: 12px 2px 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
/* The library dialog: one row per file, its tracks as small keys. */
.lib-dialog { width: min(560px, calc(100vw - 32px)); text-align: left; }
.lib-dialog h2, .lib-dialog > .acct-sub { text-align: center; }
.lib-list { display: grid; gap: 10px; max-height: min(60vh, 520px); overflow-y: auto; }
.lib-item { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.03); display: grid; gap: 8px; }
.lib-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.lib-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-meta { flex: none; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.lib-tracks { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-track { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(158,227,245,.35); background: rgba(158,227,245,.08);
  color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.lib-track:hover { background: rgba(158,227,245,.16); }
.lib-track:disabled { opacity: .5; }
.lib-del { justify-self: end; border: 0; background: none; color: var(--muted); font: 500 12.5px var(--font); cursor: pointer; padding: 0; }
.lib-del:hover { color: #ffb4a8; }

/* Switching tools (Kyle, 1 Oct: "the page shouldn't have to reload each time"): the next tool is prerendered when
   you point at it (speculation rules in each tool page), and the switch is a quick crossfade while the sidebar,
   logo and corner keys stand still (cross-document view transitions; browsers without them just navigate). */
@view-transition { navigation: auto; types: page; }
.tools { view-transition-name: ve-tools; z-index: 39; }
/* The header layer holds the corner (Sign up, Sign in, language menus): it stays above the page, so the
   waveform never covers a menu and Safari's overscroll bounce never slides content over the buttons. */
.top { view-transition-name: ve-top; position: relative; z-index: 40; }
.corner { view-transition-name: ve-corner; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* The sidebar highlight slides to the tool you chose (Kyle, 1 Oct): the lit item is one shared element across
   pages, so the browser carries it from the old item to the new one with a spring and a light trail, while the
   page itself lifts out of focus and the new tool settles in. */
::view-transition-group(ve-tool-pill) { animation-duration: .52s; animation-timing-function: cubic-bezier(.22, 1.35, .32, 1); z-index: 1; }
::view-transition-old(ve-tool-pill), ::view-transition-new(ve-tool-pill) { height: 100%; object-fit: fill; animation-duration: .52s; }
::view-transition-new(ve-tool-pill) { animation-name: ve-pill-glow; }
@keyframes ve-pill-glow {
  0%   { filter: drop-shadow(0 0 0 rgba(158,227,245,0)) brightness(1.6) saturate(1.6); }
  35%  { filter: drop-shadow(0 0 22px rgba(158,227,245,.85)) drop-shadow(0 0 40px rgba(160,140,255,.6)) brightness(1.35); }
  100% { filter: drop-shadow(0 0 0 rgba(158,227,245,0)) brightness(1) saturate(1); }
}
html:active-view-transition-type(page)::view-transition-old(root) { animation: ve-page-out .22s cubic-bezier(.4, 0, 1, 1) both; }
html:active-view-transition-type(page)::view-transition-new(root) { animation: ve-page-in .42s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes ve-page-out { to { opacity: 0; filter: blur(8px) brightness(1.2); transform: scale(.985) translateY(-6px); } }
@keyframes ve-page-in { from { opacity: 0; filter: blur(10px) saturate(1.6); transform: scale(1.015) translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .tool-pill { view-transition-name: none !important; } }

/* The lit tool's look lives on its own text-free pill (.tool-pill in each page), so only the shape travels
   between tools: it squashes and stretches as it springs into place, and the labels never smear. */
.tools a { position: relative; isolation: isolate; }
.tools a[aria-current] { background: transparent !important; border-color: transparent !important; box-shadow: none !important; animation: none !important; }
.tools a[aria-current]::after { display: none !important; }
.tool-pill { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  border: 1px solid rgba(158,227,245,.34);
  background: linear-gradient(rgba(19,19,26,.7), rgba(19,19,26,.7)), var(--face-pools, linear-gradient(110deg, #86e6ee, #a08cff));
  background-size: 100% 100%, 220% 100%, 220% 100%, 100% 100%;
  box-shadow: 0 0 18px -6px rgba(158,227,245,.55), 0 0 30px -14px rgba(160,140,255,.7), inset 0 1px 0 rgba(255,255,255,.08); }
/* Only a page switch carries the pill to the new tool; state changes inside a tool leave it be. */
.tool-pill { view-transition-name: none; }
html:active-view-transition-type(page) .tool-pill { view-transition-name: ve-tool-pill; }
:root[data-theme="light"] .tool-pill { background: var(--raised); border-color: var(--line); box-shadow: none; }
::view-transition-image-pair(ve-tool-pill) { animation: ve-pill-squash .52s cubic-bezier(.22, 1.35, .32, 1) both; }
@keyframes ve-pill-squash {
  0% { transform: none; }
  38% { transform: scale(1.05, 1.45); }
  68% { transform: scale(.97, .86); }
  100% { transform: none; }
}
/* Labels ride above the travelling pill, and their lit/unlit swap is a quick fade, not a smear. */
::view-transition-group(ve-tools) { z-index: 2; }
::view-transition-old(ve-tools), ::view-transition-new(ve-tools) { animation-duration: .14s; }
/* Every tool keeps the lit dot's space, so labels don't shift when the highlight moves. */
.tools a:not([aria-current])::before { content: ""; width: 6px; height: 6px; flex: none; order: -1; }

/* ===================================================================================================
   Motion system (Kyle, 1 Oct: "all actions and movements fluid ... super high quality and beautiful").
   One spring for everything that moves, one quick ease for fades. Respects reduced motion. */
:root {
  --spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.084 24.4%, 1.083 26.3%,
    1.055 30.3%, 1.01 36.4%, .996 39.8%, .989 43.7%, .992 50.3%, 1.002 61.1%, 1);
  --spring-soft: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%,
    1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.3%, 1);
  --fade: cubic-bezier(.2, .8, .2, 1);
}

/* 1. The tool panel morphs between choose → processing → result (same-document view transition, app.js). */
.tool { view-transition-name: ve-tool; }
::view-transition-group(ve-tool) { animation-duration: .62s; animation-timing-function: var(--spring-soft); overflow: clip; border-radius: 22px; }
::view-transition-old(ve-tool) { animation: ve-out .24s var(--fade) both; }
::view-transition-new(ve-tool) { animation: ve-in .5s var(--fade) .06s both; }
@keyframes ve-out { to { opacity: 0; transform: scale(.97); filter: blur(6px); } }
@keyframes ve-in { from { opacity: 0; transform: scale(1.02) translateY(8px); filter: blur(10px); } }

/* 2. Every press springs; hover lifts. */
.btn, .acct-up, .acct-key, .acct-me, .lib-track, .presets button, .ab, .ms, .plan, .tools a, .lang-menu summary, .key {
  transition: transform .5s var(--spring), background-color .25s var(--fade), color .2s var(--fade), box-shadow .3s var(--fade), border-color .25s var(--fade), filter .25s var(--fade); }
.btn:active, .acct-up:active, .acct-key:active, .acct-me:active, .lib-track:active, .presets button:active, .ab:active, .ms:active, .tools a:active, .lang-menu summary:active { transform: scale(.95); transition-duration: .08s; }
@media (hover: hover) {
  .acct-up:hover, .acct-key:hover, .lib-track:hover { transform: translateY(-1px); }
  .plan:hover { transform: none; }
}

/* 3. Voice / Music / Both: a light pill slides to the chosen preset (mix-ui.js sets --px / --pw). */
.presets { position: relative; isolation: isolate; }
.presets::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0; width: var(--pw, 0px); border-radius: 7px;
  transform: translateX(var(--px, 0px)); opacity: var(--pon, 0);
  background: linear-gradient(110deg, var(--voice), var(--music)); box-shadow: 0 0 18px -4px rgba(160,140,255,.75);
  transition: transform .55s var(--spring), width .55s var(--spring), opacity .25s var(--fade), background .3s var(--fade); }
.presets[data-on="voice"]::before { background: var(--voice); box-shadow: 0 0 18px -4px var(--voice); }
.presets[data-on="music"]::before { background: var(--music); box-shadow: 0 0 18px -4px var(--music); }
.presets.sliding button[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; }

/* 4. Dialogs open from small and settle; they fade away on close (account.js waits before removing). */
.acct-dialog { opacity: 1; transform: none;
  transition: opacity .3s var(--fade), transform .55s var(--spring), overlay .35s allow-discrete, display .35s allow-discrete; }
.acct-dialog:not([open]), .acct-dialog.closing { opacity: 0; transform: translateY(10px) scale(.96); transition-duration: .2s; }
@starting-style { .acct-dialog[open] { opacity: 0; transform: translateY(18px) scale(.94); } }
.acct-dialog::backdrop { transition: background-color .35s var(--fade), backdrop-filter .35s var(--fade), overlay .35s allow-discrete, display .35s allow-discrete; }
@starting-style { .acct-dialog[open]::backdrop { background-color: transparent; backdrop-filter: blur(0); } }
.acct-dialog.closing::backdrop { background-color: transparent; backdrop-filter: blur(0); }
.acct-form > * { animation: ve-rise .45s var(--spring-soft) both; }
/* Text fields only fade: Safari can leave a moving/blurred input's text at the animation's starting offset. */
.acct-form > input { animation-name: ve-fade-in; }
@keyframes ve-fade-in { from { opacity: 0; } }
.acct-form > *:nth-child(2) { animation-delay: .04s; } .acct-form > *:nth-child(3) { animation-delay: .08s; } .acct-form > *:nth-child(4) { animation-delay: .12s; }

/* 5. Menus unfold from their key and fold back. */
.acct-menu, .lang-menu .lang-list { transform-origin: top right; transition: opacity .2s var(--fade), transform .45s var(--spring); }
@starting-style { .acct-menu { opacity: 0; transform: translateY(-6px) scale(.94); } }
@starting-style { .lang-menu[open] .lang-list { opacity: 0; transform: translateY(-6px) scale(.94); } }
.acct-menu.closing { opacity: 0; transform: translateY(-4px) scale(.96); transition-duration: .16s; }
.acct-menu > * { animation: ve-rise .4s var(--spring-soft) both; }
.acct-menu > *:nth-child(2) { animation-delay: .03s; } .acct-menu > *:nth-child(3) { animation-delay: .06s; } .acct-menu > *:nth-child(4) { animation-delay: .09s; } .acct-menu > *:nth-child(5) { animation-delay: .12s; }

/* 6. Things that arrive come in as a soft stagger: the result, the offer and its plan cards, library rows. */
@keyframes ve-rise { from { opacity: 0; transform: translateY(10px) scale(.985); filter: blur(4px); } }
.tool[data-state="result"] .result > * { animation: ve-rise .55s var(--spring-soft) both; }
.tool[data-state="result"] .result > *:nth-child(2) { animation-delay: .05s; } .tool[data-state="result"] .result > *:nth-child(3) { animation-delay: .1s; }
.tool[data-state="result"] .result > *:nth-child(4) { animation-delay: .15s; } .tool[data-state="result"] .result > *:nth-child(5) { animation-delay: .2s; }
.paywall:not([hidden]) > * { animation: ve-rise .55s var(--spring-soft) both; }
.paywall:not([hidden]) > *:nth-child(2) { animation-delay: .06s; } .paywall:not([hidden]) > *:nth-child(3) { animation-delay: .12s; }
.paywall:not([hidden]) > *:nth-child(4) { animation-delay: .18s; } .paywall:not([hidden]) > *:nth-child(5) { animation-delay: .24s; }
.plans > .plan { animation: ve-rise .6s var(--spring-soft) both; } .plans > .plan:nth-child(2) { animation-delay: .08s; }
.lib-item { animation: ve-rise .5s var(--spring-soft) both; }
.lib-item:nth-child(2) { animation-delay: .04s; } .lib-item:nth-child(3) { animation-delay: .08s; } .lib-item:nth-child(4) { animation-delay: .12s; } .lib-item:nth-child(n+5) { animation-delay: .16s; }
.note:not(:empty), .acct-msg:not(:empty) { animation: ve-rise .4s var(--spring-soft) both; }

@media (prefers-reduced-motion: reduce) {
  .tool { view-transition-name: none; }
  .presets::before, .acct-dialog, .acct-menu, .lang-menu .lang-list { transition: none; }
  .acct-form > *, .acct-menu > *, .tool .result > *, .paywall > *, .plans > .plan, .lib-item, .note, .acct-msg { animation: none !important; }
}

/* The rim of light around "Choose a file" always orbits (Kyle, 1 Oct). Animating the gradient's angle
   repainted the ring every frame, so it used to run only on hover. Now the ring is drawn once as a large conic
   square that the GPU rotates behind the pill, clipped to the pill's shape; the fill sits 2px inside it on its
   own layer, with the same outer size as before. */
:root:not([data-theme="light"]) .drop .drop-cta .btn { overflow: hidden; background: transparent; padding: 15px 28px; min-height: 52px; }
:root:not([data-theme="light"]) .drop .drop-cta .btn::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: -2; width: max(160%, 240px); aspect-ratio: 1; pointer-events: none;
  background: conic-gradient(transparent 0 58%, rgb(var(--ve-a) / .95) 70%, #fff 76%, rgb(var(--ve-b) / .95) 82%, transparent 92% 100%);
  transform: translate(-50%, -50%); animation: ve-spin 3.6s linear infinite; }
@keyframes ve-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
:root:not([data-theme="light"]) .drop .drop-cta .btn::after {
  inset: 2px; padding: 0; z-index: -1; -webkit-mask: none; mask: none; animation: none;
  background: linear-gradient(120deg, #d2f8ff 0%, #a9efe2 34%, #c3b4ff 72%, #f0c6ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .16); }
@media (prefers-reduced-motion: reduce) { :root:not([data-theme="light"]) .drop .drop-cta .btn::before { animation: none; transform: translate(-50%, -50%) rotate(40deg); } }

/* Corner keys are solid, not frosted glass: while Safari bounces on overscroll it clips frosted elements at the
   page's edge, which cut the tops off Sign in and the language key. On this dark page they look the same. */
.acct-key, :root:not([data-theme="light"]) .lang-menu summary { background: rgb(23 22 31); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* The logo is the confident white wordmark (Kyle, 1 Oct, after ElevenLabs). */
:root:not([data-theme="light"]) .brand { animation: none; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.brand { font-weight: 700; letter-spacing: -0.025em; align-items: center; font-size: 20px; }
@media (max-width: 720px) { .top .brand { font-size: 17px; } }

/* The corner keys sit in one exact row: hover lights the outline (the language key now too) without lifting
   anything out of line, and all three set their text the same way. */
:root:not([data-theme="light"]) .lang-menu summary:hover, .lang-menu[open] summary { border-color: rgba(158, 227, 245, .45); }
.acct-up:hover, .acct-key:hover, .lang-menu summary:hover { transform: none; }
.acct-up, .acct-key, .lang-menu summary { line-height: 1; font-size: 13.5px; }
.acct-key, .lang-menu summary { font-weight: 600; }
@media (max-width: 720px) { .acct-up, .acct-key, .lang-menu summary { font-size: 12.5px; } }

/* ===================================================================================================
   The side menu, restrained (Kyle, 1 Oct: "still feels mid tier cheap"). One quiet active state (a tinted
   fill with a hairline edge, white text and icon) instead of a glowing border, dot and cyan icon; monochrome
   icons at the text's weight; tighter rows. */
.tools a::before, .tools a[aria-current]::before, .tools a:not([aria-current])::before { content: none !important; }
.tools a::after { content: none !important; animation: none !important; }
.tools a, :root:not([data-theme="light"]) .tools a {
  min-height: 34px; padding: 0 10px; gap: 11px; border-radius: 8px; border: 0; font: 500 14px/1.2 var(--font); letter-spacing: -0.006em;
  color: rgba(236, 237, 245, .58); background: transparent; transition: color .2s var(--fade), background-color .2s var(--fade); }
.tools a:hover, :root:not([data-theme="light"]) .tools a:hover { color: rgba(255, 255, 255, .92); background: rgba(255, 255, 255, .035); }
.tools a[aria-current], :root:not([data-theme="light"]) .tools a[aria-current] { color: #fff; }
.tools svg, .tools a[aria-current] svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; opacity: .9; }
.tool-pill, :root:not([data-theme="light"]) .tool-pill {
  inset: 0; border: 0; border-radius: 8px; animation: none; filter: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .055));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 1px 0 rgba(255, 255, 255, .06), 0 1px 2px rgba(0, 0, 0, .35); }
.tool-pill::before, .tool-pill::after { content: none !important; }
@media (min-width: 1200px) {
  .tools { top: 84px; gap: 1px; }
  .tools a { padding-block: 0; line-height: 1.2; }
}

/* Sign up's colours flow inside it (Kyle, 1 Oct: "the colors IN the button", not a light around it): a strip of the
   brand gradient, four buttons wide and repeating every two, slides through the face. The GPU moves it; nothing is
   repainted. A thin gloss sits on top; the bloom glows outside. */
:root:not([data-theme="light"]) .acct-up { padding: 0 !important; background: transparent; }
:root:not([data-theme="light"]) .acct-up-face { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center;
  height: 100%; padding: 0 14px; border-radius: inherit; background: #c6f1ee; }
:root:not([data-theme="light"]) .acct-up-face::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 400%; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, #d2f8ff 0%, #a9efe2 12.5%, #c3b4ff 25%, #f0c6ff 37.5%, #d2f8ff 50%, #a9efe2 62.5%, #c3b4ff 75%, #f0c6ff 87.5%, #d2f8ff 100%);
  animation: ve-flow 9s linear infinite; }
@keyframes ve-flow { to { transform: translateX(-50%); } }
:root:not([data-theme="light"]) .acct-up-face::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(0, 0, 0, .1); }
@media (max-width: 720px) { :root:not([data-theme="light"]) .acct-up-face { padding: 0 11px; } }
@media (max-width: 420px) { :root:not([data-theme="light"]) .acct-up-face { padding: 0 9px; } }
@media (prefers-reduced-motion: reduce) { :root:not([data-theme="light"]) .acct-up-face::before { animation: none; } }
html { scrollbar-gutter: stable; }   /* tools of different heights never shift the page sideways when switching */

/* "Or isolate them.": one quick sweep of colour on arrival (here); then stage.js keeps the colours drifting
   slowly (Kyle, 1 Oct). A CSS loop would make the browser draw every frame forever. */
:root:not([data-theme="light"]) .hero h1 em, :root:not([data-theme="light"]) h1 em { animation: ve-sheen 2.4s linear 1; animation-play-state: running; }

/* Menu links don't shrink when pressed: on a left-aligned label the springy press read as the text wobbling
   sideways. The sliding highlight already answers the click. */
.tools a:active, .tools a { transform: none !important; }

/* With many languages the menu is two columns that scroll inside the panel (phones: one column). */
.lang-menu .lang-list { grid-template-columns: repeat(2, minmax(150px, 1fr)); max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
@media (max-width: 520px) { .lang-menu .lang-list { grid-template-columns: 1fr; max-height: 60vh; } }
@media (min-width: 1200px) { .tools { overflow: visible; } }   /* the sliding highlight is never cut at the menu's ends */

/* Leaving is quick and plain (no spring overshoot), mirroring the arrival: dialogs and the language menu. */
.acct-dialog.closing { transition-timing-function: cubic-bezier(.4, 0, 1, 1); }
.lang-menu.closing .lang-list { opacity: 0; transform: translateY(-4px) scale(.96); transition: opacity .15s cubic-bezier(.4, 0, 1, 1), transform .15s cubic-bezier(.4, 0, 1, 1); }
.lang-menu .lang-list a { white-space: nowrap; }   /* every language name on one line: even rows */

/* Background remover (Kyle, 2 Oct): the cutout over a checkerboard, with the original revealed left of a handle. */
.cutout-view { position: relative; width: fit-content; max-width: 100%; margin: 4px auto 2px; border-radius: 14px; overflow: hidden;
  background: repeating-conic-gradient(rgb(255 255 255 / .075) 0% 25%, rgb(255 255 255 / .025) 0% 50%) 0 0 / 22px 22px, #121218;
  box-shadow: 0 0 0 1px var(--edge); --split: 0%; touch-action: pan-y; }
.cutout-view .after { display: block; max-width: 100%; max-height: min(62vh, 560px); width: auto; height: auto; }
.cutout-view .before { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--split)) 0 0); pointer-events: none; }
.cutout-view .handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: rgb(255 255 255 / .9);
  box-shadow: 0 0 14px rgb(var(--ve-a) / .55); pointer-events: none; }
.cutout-view .handle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: rgb(14 14 19 / .78); border: 1.5px solid rgb(255 255 255 / .9);
  -webkit-mask: none; box-shadow: 0 2px 10px rgb(0 0 0 / .35); }
.cutout-view .handle::before { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 8px; margin: -4px 0 0 -6px; z-index: 1;
  background: linear-gradient(90deg, #fff 0 2px, transparent 2px calc(100% - 2px), #fff calc(100% - 2px)); clip-path: polygon(0 50%, 35% 0, 35% 100%, 0 50%, 100% 50%, 65% 0, 65% 100%, 100% 50%); }
.cutout-view input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.cutout-view.solo .before, .cutout-view.solo .handle, .cutout-view.solo input { display: none; }
body[data-mode="image"] .result .actions { justify-content: center; gap: 18px; }
:root[data-theme="light"] .cutout-view { background: repeating-conic-gradient(#e7e3dd 0% 25%, #fbfaf8 0% 50%) 0 0 / 22px 22px, #fff; }
/* Seller outputs (Oct 2): white background and square framing, the same segmented look as the audio presets. */
.outputs, .acct-tabs { display: flex; width: fit-content; gap: 3px; padding: 3px; margin: 14px auto 0; border-radius: 10px; border: 1px solid #2c2c36;
  background: var(--key, #18181f); box-shadow: inset 0 1px 0 var(--hair-lo, rgba(0,0,0,.6)), inset 0 -1px 0 var(--hair-hi, rgba(255,255,255,.06)); }
.outputs button, .acct-tabs button { height: 30px; padding: 0 15px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer;
  font: 600 13px/1 var(--font); letter-spacing: .01em; transition: background .25s var(--ease), color .2s, box-shadow .25s; }
.outputs button:hover, .acct-tabs button:hover { color: var(--text); background: var(--hover); }
.outputs button[aria-pressed="true"], .acct-tabs button[aria-selected="true"] { color: #0b0b0e; background: linear-gradient(110deg, var(--voice), var(--music)); box-shadow: 0 0 18px -4px rgba(160,140,255,.8); }
:root[data-theme="light"] .outputs, :root[data-theme="light"] .acct-tabs { background: var(--raised); border-color: var(--edge); box-shadow: none; }
:root[data-theme="light"] .outputs button[aria-pressed="true"], .acct-tabs button[aria-selected="true"] { color: #fff; }
.cutout-view.on-white, :root[data-theme="light"] .cutout-view.on-white { background: #fff; }
.rsize { margin: 8px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.rsize:empty { display: none; }
body[data-mode="image"] .paywall { margin-top: 18px; }

/* Day Pass → Pro first-month price (pricing.js, account.js, app.js), the way ChatGPT shows an offer: a quiet badge,
   the regular price struck through beside the new one, one line of terms. */
.offer-badge { display: inline-block; width: fit-content; margin: 2px 0 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  letter-spacing: .01em; color: #0b0b0e; background: linear-gradient(100deg, #b8f4ff, #b9a2ff); }
.plan .offer-badge { font: 600 12px/1.4 var(--sans, inherit); justify-self: start; margin: 2px 0 2px; }
.plan .offer-terms span { font: 500 13px/1.45 var(--sans, inherit); }
.plan s.was, .acct-offer s.was { color: var(--muted); font-weight: 500; font-size: .62em; text-decoration-thickness: 1.5px; margin-right: 8px; vertical-align: .18em; }
.acct-offer s.was { font-size: 1em; vertical-align: 0; margin: 0 2px 0 6px; }
.plan .offer-terms { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; font-size: 13px; color: var(--muted); }
.plan .offer-terms .offer-until { font-size: 12px; }
.acct-offer .offer-until { color: var(--muted); font-size: 12px; }
.acct-offer { margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px; background: rgb(var(--ve-a) / .07); box-shadow: inset 0 0 0 1px rgb(var(--ve-a) / .22); }
.acct-offer .acct-offer-price { margin: 0 0 4px; font-size: 16px; }
.acct-offer .acct-offer-price small { color: var(--muted); font-size: 13px; }
.acct-offer .acct-note { margin: 2px 0 0; }
.acct-menu .acct-upgrade { color: var(--voice); text-decoration: none; }
.upsell { margin: 14px 10px 0; font-size: 13px; color: var(--muted); text-align: center; }
.upsell a { color: var(--voice); margin-left: 4px; white-space: nowrap; }
/* A Day Pass holder offered Pro sees Pro alone (Kyle, 2 Oct: a "Get Day Pass" card beside it makes no sense). */
.plans.solo, .price-cards.solo { grid-template-columns: minmax(0, 520px); justify-content: center; }

/* Plan cards, the way ChatGPT lays out a plan: name, Best for, price, one full-width button, ticks, a small foot. */
.plan > .btn { width: 100%; margin: 12px 0 8px; }
.plan .btn:disabled, .plan .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.plan.current .btn { opacity: 1; background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); animation: none; filter: none; }
.plan.current .btn::after { display: none; }
.plan .current-note { color: var(--voice); font-size: 13px; }
.plan .perks-lead { font-size: 14px; font-weight: 600; margin: 2px 0 2px; }
.plan em.perks { display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text); margin: 4px 0 6px; }
.plan .perks i { font-style: normal; display: flex; gap: 10px; align-items: flex-start; line-height: 1.35; }
.plan .perks i::before { content: ''; flex: none; width: 14px; height: 14px; margin-top: 2px; background: var(--voice);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan .card-foot { margin-top: auto; padding-top: 10px; font-size: 12px; color: var(--muted); }
.plan .card-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Pro Lite in the cancel flow (account.js offerLite) */
.acct-offer-title { margin: 6px 0 2px; font: 600 18px/1.3 var(--display, inherit); }
.acct-note.acct-ok { color: var(--voice); }

/* Pro billed monthly or yearly (pricing.js BILLING): a small segmented switch inside the Pro card. */
.plan .billing { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; margin: 6px 0 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--hover); }
.plan .billing[hidden] { display: none; }
.plan .billing button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 600 12.5px/1 var(--font); cursor: pointer; transition: background .15s, color .15s; }
.plan .billing button:hover { color: var(--text); }
.plan .billing button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.plan .billing small { font: 600 11.5px/1 var(--font); color: var(--voice); }
.plan .billing button[aria-pressed="true"] small { color: inherit; opacity: .7; }
.plan .billed { margin-top: 4px; }
/* Refer a friend (account.js) */
.acct-invite { display: block; margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--hover); color: var(--text); font: 600 14px/1.4 var(--font); text-align: center; overflow-wrap: anywhere; user-select: all; }
.acct-fine { margin: 10px 2px 0; font-size: 12.5px; }
.acct-fine a { color: var(--muted); }
/* A friend's invite, on the home page (app.js) */
.invite-note { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; width: fit-content; max-width: calc(100% - 32px); margin: 0 auto 18px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--hover); color: var(--text); font-size: 13.5px; }
.invite-note a { color: var(--voice); font-weight: 600; white-space: nowrap; }

/* Batches of images (bg-page.js): a grid of cutouts on the same checkerboard, one ZIP. */
.batch { display: none; }
.batch-status { margin: 4px 0 0; text-align: center; font: 600 15px/1.4 var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; margin: 18px 0 0; }
.tile { position: relative; margin: 0; padding: 0; border: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: pointer; color: inherit; font: inherit;
  background: repeating-conic-gradient(rgb(255 255 255 / .075) 0% 25%, rgb(255 255 255 / .025) 0% 50%) 0 0 / 16px 16px, #121218; box-shadow: 0 0 0 1px var(--edge); }
:root[data-theme="light"] .tile { background: repeating-conic-gradient(#e7e3dd 0% 25%, #fbfaf8 0% 50%) 0 0 / 16px 16px, #fff; }
.batch.on-white .tile { background: #fff; }
.tile img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.tile .tile-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; font-size: 11.5px; line-height: 1.3; text-align: left; color: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / .62)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
.tile:hover .tile-name, .tile:focus-visible .tile-name, .tile[data-state="error"] .tile-name, .tile[data-state="stopped"] .tile-name { opacity: 1; }
.tile[data-state="queued"] img, .tile[data-state="working"] img { opacity: .35; filter: grayscale(1); }
.tile[data-state="working"]::after { content: ''; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%;
  border: 2px solid rgb(255 255 255 / .25); border-top-color: var(--voice); animation: spin .8s linear infinite; }
.tile[data-state="error"] img, .tile[data-state="stopped"] img { opacity: .25; }
.tile .tile-error { position: absolute; inset: auto 8px 30px; font-size: 11.5px; line-height: 1.35; color: #ffb4b4; text-align: center; }
.tile[data-state="stopped"] .tile-error { color: var(--muted); }
.batch-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.batch .actions { justify-content: center; gap: 18px; margin-top: 18px; }
.batch-paywall:empty { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Caption studio (captions-page.js): the picture with live captions beside the style panel. */
body[data-mode="captions"] .tool[data-state="result"] { max-width: 1180px; }
.studio { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 18px; align-items: start; margin-top: 12px; }
.cap-view { min-width: 0; }
.cap-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 64vh; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #050507;
  box-shadow: 0 0 0 1px var(--edge); cursor: pointer; }
.cap-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cap-stage canvas { position: absolute; pointer-events: none; }
.cap-stage.audio-only { background: radial-gradient(120% 90% at 50% 40%, #232634, #0b0b0e); }
.cap-stage.audio-only video { opacity: 0; }
.cap-transport { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.cap-transport .play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(110deg, var(--voice), var(--music)); color: #0b0b0e; }
.cap-transport .play svg { width: 18px; height: 18px; fill: currentColor; }
.cap-transport .play .i-pause, .cap-transport .play.playing .i-play { display: none; }
.cap-transport .play.playing .i-pause { display: block; }
.cap-transport input[type=range] { flex: 1; min-width: 0; accent-color: var(--voice); }
.cap-time { flex: none; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap-panel { min-width: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); padding: 12px; }
.cap-tabs { margin: 0 0 12px; width: 100%; }
.cap-tabs button { flex: 1; }
.cap-pane { max-height: min(62vh, 560px); overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
.cap-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cap-preset { display: flex; flex-direction: column; gap: 2px; padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--hover);
  color: var(--text); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, box-shadow .2s; }
.cap-preset:hover { border-color: var(--edge); }
.cap-preset[aria-pressed="true"] { border-color: var(--voice); box-shadow: 0 0 0 1px var(--voice), 0 0 22px -8px rgba(158,227,245,.7); }
.cap-preset canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 8px; margin-bottom: 6px; }
.cap-preset strong { font-size: 13.5px; padding: 0 4px; }
.cap-preset small { font-size: 11.5px; color: var(--muted); padding: 0 4px; line-height: 1.35; }
.cap-group { border: 0; margin: 0 0 14px; padding: 0; }
.cap-group legend { font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.cap-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.cap-row label { font-size: 13px; color: var(--text); }
.cap-row input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--voice); }
.cap-row:has(input[type=range]) output { grid-column: 2; grid-row: 1; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cap-row select { font: inherit; font-size: 13px; color: var(--text); background: var(--key, #18181f); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; max-width: 170px; }
.cap-row input[type=color] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.cap-seg { margin: 0; }
.cap-seg button { height: 28px; padding: 0 11px; font-size: 12px; }
.cap-reset { margin: 4px 0 6px; }
.cap-lang { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
.cap-lines { display: flex; flex-direction: column; gap: 6px; }
.cap-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; border-left: 3px solid var(--speaker, transparent); padding-left: 6px; }
.cap-at { border: 0; background: none; color: var(--muted); font: 500 12px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; padding: 6px 2px; }
.cap-at:hover { color: var(--text); }
.cap-line input { width: 100%; min-width: 0; font: inherit; font-size: 14px; color: var(--text); background: var(--key, #18181f); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.cap-line input:focus { outline: none; border-color: var(--voice); }
body[data-mode="captions"] .result .actions { justify-content: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 16px; }
.cap-export-bar { margin: 12px auto 0; max-width: 420px; }
@media (max-width: 860px) {
  .studio { grid-template-columns: 1fr; }
  .cap-pane { max-height: none; }
}

/* "Try a sample" under the uploader (app.js DEMO): only while choosing a file. */
.try-sample { display: none; margin: 14px 0 0; text-align: center; font-size: 14px; }
.tool[data-state="idle"] .try-sample { display: block; }

/* Each tool performs itself on the stage (scenes.js): overlays sit exactly over the waveform, under the button. */
.drop.staged .drop-cta { z-index: 2; }
.drop.lane-scene .stage-label { display: none; }
.scene { position: absolute; inset: 22px 0 auto; height: 320px; pointer-events: none; z-index: 1; }
@media (max-width: 720px) { .scene { inset: 14px 0 auto; height: 220px; } }
@media (min-width: 1200px) { .scene { height: 384px; } }
.scene > * { position: absolute; transition: opacity .35s var(--ease); }
.scene-chip { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(12,12,16,.66); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font: 600 14px/1 var(--font); color: #a9a9b4; font-variant-numeric: tabular-nums; box-shadow: 0 12px 32px -14px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.06);
  transition: opacity .35s var(--ease), border-color .35s, box-shadow .35s; }
.scene-chip b { color: #f4f4f6; font-weight: 700; }
.scene-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes scene-land { 0% { transform: scale(.7); opacity: .2; } 100% { transform: none; opacity: 1; } }

/* Noise remover: a clean line sweeps the hiss away, sparks flying off it; the chip turns from Noisy to Clean. */
.scene-sweep { top: 7%; height: 86%; width: 2px; margin-left: -1px; opacity: 0; border-radius: 2px;
  background: linear-gradient(transparent, rgba(232,252,255,.95) 30%, rgba(232,252,255,.95) 70%, transparent);
  box-shadow: 0 0 16px 3px rgba(158,227,245,.55), 0 0 42px 10px rgba(160,140,255,.22); }
.scene-spark { width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #f2fdff; opacity: 0;
  box-shadow: 0 0 6px 2px rgba(158,227,245,.85), 0 0 14px 4px rgba(160,140,255,.35); animation: scene-spark .9s cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes scene-spark { 0% { opacity: 1; transform: translate(0, 0) scale(1.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } }
.scene-status { top: 5%; right: 4%; }
.scene-status i { width: 9px; height: 9px; border-radius: 50%; background: #ff9f5a; box-shadow: 0 0 10px rgba(255,159,90,.7); animation: scene-jitter .18s steps(2) infinite; }
@keyframes scene-jitter { 50% { transform: translate(.6px, -.5px) scale(.86); opacity: .75; } }
.scene-status[data-state="clean"] { border-color: rgba(158,227,245,.4); box-shadow: 0 0 26px -6px rgba(158,227,245,.55), 0 12px 32px -14px rgba(0,0,0,.85); }
.scene-status[data-state="clean"] i { background: #9ee3f5; box-shadow: 0 0 12px rgba(158,227,245,.9); animation: none; }
.scene-status[data-state="clean"] b { animation: scene-land .45s cubic-bezier(.34,1.6,.64,1); }

/* Labels for what stays (lit) and what's taken away (struck through once it's gone): karaoke, acapella, music. */
.scene-tag { top: 4%; padding: 7px 13px 7px 10px; font-size: 13px; }
.scene-tag.low { top: auto; bottom: 4%; }
.aca-v, .lyr-m, .nm-v { left: 3%; }
.aca-m, .lyr-v, .nm-m { right: 3%; }
.scene-tag i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #9ee3f5; box-shadow: 0 0 10px rgba(158,227,245,.8); transition: background .3s, box-shadow .3s; }
.scene-tag.on { border-color: rgba(158,227,245,.4); box-shadow: 0 0 26px -6px rgba(158,227,245,.55), 0 12px 32px -14px rgba(0,0,0,.85); }
.scene-tag b { transition: color .3s; text-decoration: line-through transparent 2px; }
.scene-tag.gone { opacity: .7; }
.scene-tag.gone i { background: #ff6b6b; box-shadow: 0 0 10px rgba(255,107,107,.6); }
.scene-tag.gone b { color: rgba(236,237,245,.55); text-decoration-color: #ff8a8a; }
/* Notes rise off a voice (or the music floats away and settles back). */
.scene-fx { width: 30px; height: 30px; margin: -15px; background: linear-gradient(135deg, #e8fbff, #5ff4ff 30%, #a07bff 70%, #ff73e0); opacity: 0;
  -webkit-mask: var(--note) center / contain no-repeat; mask: var(--note) center / contain no-repeat;
  filter: drop-shadow(0 0 8px rgba(158,227,245,.9)) drop-shadow(0 0 18px rgba(160,123,255,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.6)); animation: scene-rise 2.4s ease-out both; }
.scene-fx.sink { animation-name: scene-sink; }
.scene-fx.one { --note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v11.3A3.5 3.5 0 1 0 16 17.5V8.2l4 1.6V5.6z'/%3E%3C/svg%3E"); }
.scene-fx.two { --note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 4.5v10.8A3.2 3.2 0 1 0 11 18.3V9.6l8-1.8v5.5a3.2 3.2 0 1 0 2 3V2.5z'/%3E%3C/svg%3E"); }
@keyframes scene-rise { 0% { opacity: 0; transform: translate(0, 12px) scale(.7); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -84px) scale(1.15) rotate(-10deg); } }
@keyframes scene-sink { 0% { opacity: 0; transform: translate(var(--dx), -84px) scale(1.15) rotate(-10deg); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 10px) scale(.6); } }

/* Captions: the voice scrolls under an editor's playhead, the caption track below it, the caption in one of four
   looks in the site's colours. The glow is a bloom (Kyle, 2 Oct): blurred copies of each word's own fill screened
   over it. Each word has room above and below, so its colour (and its bloom) can't be cut off at the top. */
.scene-style { top: 3%; left: 3%; padding: 7px 13px 7px 9px; font-size: 13px; }
.scene-style i { width: 14px; height: 14px; border-radius: 5px; background: var(--sw); box-shadow: 0 0 10px var(--glowc, transparent); }
.scene-style[data-style] { --sw: linear-gradient(135deg, #5ff4ff, #6aa8ff 40%, #a07bff 70%, #ff73e0); --glowc: rgba(160,123,255,.7); }
.scene-style[data-style="cinematic"] { --sw: linear-gradient(135deg, #ffffff, #c7b8ff); --glowc: rgba(199,184,255,.6); }
.scene-style[data-style="highlight"] { --sw: linear-gradient(110deg, #5ff4ff, #a07bff 70%, #ff73e0); }
.scene-caption { top: 5%; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: .3em; opacity: 0; white-space: nowrap; transition: opacity .25s;
  --sweep: linear-gradient(90deg, #5ff4ff, #6aa8ff 34%, #a07bff 68%, #ff73e0); }
.scene-caption b { position: relative; display: inline-block; padding: .22em .06em; margin: -.22em -.06em; font-weight: inherit;
  transition: transform .2s cubic-bezier(.34,1.7,.64,1); }
.scene-caption b::before, .scene-caption b::after { content: attr(data-t); position: absolute; inset: 0; padding: inherit;
  pointer-events: none; -webkit-text-stroke: 0; color: var(--fill, #fff); background: var(--paint, none); background-repeat: no-repeat; mix-blend-mode: screen; }
.scene-caption b::after { filter: blur(.08em); opacity: .95; }
.scene-caption b::before { filter: blur(.26em); opacity: .55; }
.scene-caption.enter { animation: scene-enter .26s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes scene-enter { 0% { transform: scale(.8) translateY(.12em); opacity: .2; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: none; } }
/* Karaoke: each word fills with the sweep as it's sung. */
.scene-caption.karaoke { font: 800 clamp(23px, 3.2vw, 40px)/1.15 "Montserrat", var(--display); letter-spacing: -.01em; }
.scene-caption.karaoke b { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: var(--sweep), linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42));
  background-size: calc(var(--k, 0) * 100%) 100%, 100% 100%; background-repeat: no-repeat; }
.scene-caption.karaoke b::before, .scene-caption.karaoke b::after {
  color: transparent; background-image: var(--sweep); background-size: calc(var(--k, 0) * 100%) 100%; -webkit-background-clip: text; background-clip: text; }
/* Neon: clean white words with a soft shadow, no outline; the word being said takes the sweep and blooms. */
.scene-caption.neon { font: 800 clamp(23px, 3.2vw, 40px)/1.15 "Montserrat", var(--display); letter-spacing: -.015em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.scene-caption.neon b::before { opacity: .3; }
.scene-caption.neon b.on { color: transparent; text-shadow: none; background-image: var(--sweep); -webkit-background-clip: text; background-clip: text; transform: translateY(-.03em) scale(1.04); }
.scene-caption.neon b.on::before, .scene-caption.neon b.on::after { color: transparent; background-image: var(--sweep); -webkit-background-clip: text; background-clip: text; }
.scene-caption.neon b.on::before { opacity: .6; }
/* Highlight: the caption in a frosted glass pill; the word being said sits on a glowing chip in the sweep. */
.scene-caption.highlight { left: 50%; right: auto; translate: -50% 0; gap: .12em; padding: .3em .42em; border-radius: .62em;
  font: 700 clamp(20px, 2.7vw, 33px)/1.2 "Montserrat", var(--display); letter-spacing: -.01em; color: #f4f4f6;
  background: rgba(14,14,20,.6); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 18px 44px -20px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08); }
.scene-caption.highlight b { padding: .06em .24em; margin: 0; border-radius: .36em; transition: background-color .15s, color .15s, box-shadow .2s, transform .2s cubic-bezier(.34,1.7,.64,1); }
.scene-caption.highlight b::before, .scene-caption.highlight b::after { display: none; }
.scene-caption.highlight b.on { color: #08080c; background: linear-gradient(110deg, #5ff4ff, #a07bff 70%, #ff73e0); transform: scale(1.04);
  box-shadow: 0 0 18px rgba(160,123,255,.6), 0 0 40px rgba(95,244,255,.25); }
/* Cinematic: an elegant serif that eases in, cool white with a soft lavender bloom. */
.scene-caption.cinematic { top: 6%; gap: .26em; font: italic 600 clamp(22px, 2.8vw, 34px)/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .015em; color: #f4f1ff; }
.scene-caption.cinematic b { --fill: #d9d0ff; }
.scene-caption.cinematic b::before { opacity: .35; }
.scene-caption.cinematic.enter { animation: scene-fade .5s ease-out both; }
@keyframes scene-fade { 0% { opacity: 0; filter: blur(6px); transform: translateY(6px); } 100% { opacity: 1; filter: none; transform: none; } }
/* The editor: caption blocks on a track that scrolls under the playhead. */
.scene-track { bottom: 0; height: 30px; border-radius: 9px; overflow: hidden; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.scene-tape { position: absolute; inset: 0; }
.scene-seg { position: absolute; left: 0; top: 3px; bottom: 3px; padding: 0 9px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box;
  font: 600 11.5px/22px var(--font); font-style: normal; color: rgba(255,255,255,.45); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s; will-change: transform; }
.scene-seg.done { color: rgba(232,252,255,.78); background: rgba(158,227,245,.11); border-color: rgba(158,227,245,.22); }
.scene-seg.on { color: #08080c; background: linear-gradient(110deg, #5ff4ff, #a07bff 70%, #ff73e0); border-color: transparent; box-shadow: 0 0 20px rgba(160,123,255,.5); }
.scene-playhead { top: 25%; bottom: 0; width: 2px; margin-left: -1px; opacity: 0; border-radius: 2px; background: #fff;
  box-shadow: 0 0 10px 1px rgba(158,227,245,.85), 0 0 26px 4px rgba(160,140,255,.35); }
.scene-playhead::before { content: ''; position: absolute; top: -8px; left: -6px; width: 14px; height: 13px; background: #fff; border-radius: 3px 3px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 58%, 50% 100%, 0 58%); filter: drop-shadow(0 0 6px rgba(158,227,245,.9)); }

@media (max-width: 720px) {
  .scene-caption { top: 15%; } .scene-caption.cinematic { top: 16%; } .scene-playhead { top: 33%; }
  .scene-style { padding: 5px 10px 5px 7px; font-size: 11.5px; } .scene-style i { width: 11px; height: 11px; }
  .scene-track { height: 22px; border-radius: 7px; } .scene-seg { top: 2px; bottom: 2px; padding: 0 6px; font-size: 9.5px; line-height: 16px; border-radius: 5px; }
}
/* BPM and key: grid lines stand on the hits as the analysis passes; below, a timeline ruler with every beat and the bar
   numbers; once the tempo locks, each beat lights its step on the grid, the ruler and the readout's four beat lights. */
.bx-grid { inset: 0; transition: none; }
.bx-grid i { position: absolute; top: 8%; height: 76%; width: 1px; margin-left: -.5px; opacity: 0; scale: 1 .15;
  background: linear-gradient(transparent, rgba(232,252,255,.45) 20%, rgba(232,252,255,.45) 80%, transparent);
  transition: opacity .3s, scale .45s cubic-bezier(.34,1.56,.64,1); }
.bx-grid i.on { opacity: .38; scale: 1 1; }
.bx-grid i.down { width: 2px; margin-left: -1px; background: linear-gradient(transparent, rgba(158,227,245,.85) 15%, rgba(160,140,255,.85) 85%, transparent); }
.bx-grid i.down.on { opacity: .75; }
.bx-grid i.hit { animation: bx-hit .45s ease-out; }
@keyframes bx-hit { 0% { opacity: 1; background: #fff; box-shadow: 0 0 12px 2px rgba(158,227,245,.95), 0 0 30px 6px rgba(160,140,255,.5); } }
.bx-ruler { bottom: 0; height: 34px; border-radius: 10px; transition: none;
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025)); border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 34px -18px rgba(0,0,0,.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bx-ruler > i { position: absolute; bottom: 6px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; background: rgba(236,237,245,.75); opacity: .22; transition: opacity .3s; }
.bx-ruler > i.down { height: 21px; background: linear-gradient(180deg, #c9f3fb, #a08cff); box-shadow: 0 0 10px rgba(158,227,245,.45); }
.bx-ruler > i.on { opacity: 1; }
.bx-ruler > i b { position: absolute; left: 8px; top: 0; font: 700 11.5px/1 var(--font); color: #e8fbff; letter-spacing: .02em; text-shadow: 0 0 8px rgba(158,227,245,.6); }
.bx-ruler > i.hit { animation: bx-tick .45s ease-out; }
@keyframes bx-tick { 0% { background: #fff; box-shadow: 0 0 12px 4px rgba(158,227,245,.95), 0 0 26px 8px rgba(160,140,255,.45); transform: scaleY(1.25); } }
.bx-subs { position: absolute; inset: 0; }
.bx-subs u { position: absolute; bottom: 6px; width: 1px; height: 5px; margin-left: -.5px; background: rgba(236,237,245,.3); }
.bx-scan { top: 4%; height: 84%; width: 70px; margin-left: -70px; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(160,140,255,.16) 70%, rgba(200,190,255,.5)); border-right: 2px solid #d9d2ff;
  box-shadow: 14px 0 30px -10px rgba(160,140,255,.6); }
.scene-readout { top: 4%; right: 3%; }
.scene-readout b { font-size: 19px; min-width: 2.2ch; text-align: right; display: inline-block; }
.scene-readout.locked { border-color: rgba(158,227,245,.45); box-shadow: 0 0 28px -6px rgba(158,227,245,.6), 0 12px 32px -14px rgba(0,0,0,.85); }
.scene-readout.locked .scene-bpm { color: #c9f3fb; }
.bx-leds { display: flex; gap: 4px; }
.bx-leds i { width: 7px; height: 7px; border-radius: 50%; background: var(--edge); transition: background .12s, box-shadow .12s; }
.bx-leds i.on { background: #c9f3fb; box-shadow: 0 0 8px 1px rgba(158,227,245,.9); }
.bx-leds i:first-child.on { background: #fff; box-shadow: 0 0 10px 2px rgba(160,140,255,.9); }
.scene-keyset { display: flex; align-items: center; gap: 9px; max-width: 0; opacity: 0; overflow: hidden; transition: max-width .5s var(--ease), opacity .4s; }
.scene-readout.keyed .scene-keyset { max-width: 200px; opacity: 1; }
.scene-sep { flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--edge); }
.scene-key { color: #f4f4f6; font-weight: 700; }
.scene-camelot { font-style: normal; padding: 3px 7px; border-radius: 6px; font: 800 11.5px/1 var(--font); color: #08080c; background: linear-gradient(110deg, #9ee3f5, #a08cff); }
@media (max-width: 720px) { .bx-ruler { height: 24px; } .bx-ruler > i.down { height: 14px; } .bx-ruler > i { height: 8px; bottom: 4px; } .bx-ruler > i b { font-size: 9.5px; left: 6px; } .bx-subs { display: none; } .bx-leds { display: none; } }

/* Pitch: a keyboard; the lit key climbs C, D, E as the wave tightens. */
.scene-keys { top: 5%; right: 4%; gap: 12px; padding: 8px 16px 8px 10px; }
.keys { position: relative; display: flex; width: 132px; height: 40px; gap: 2px; }
.keys i { flex: 1; border-radius: 0 0 4px 4px; background: linear-gradient(#e9e9ee, #c9c9d2); box-shadow: inset 0 -3px 0 rgba(0,0,0,.18); transition: background .25s, box-shadow .25s; }
.keys i.on { background: linear-gradient(#e8fbff, #9ee3f5 55%, #a08cff); box-shadow: inset 0 -3px 0 rgba(60,40,140,.35), 0 0 18px 2px rgba(158,227,245,.65); }
.keys u { position: absolute; top: 0; width: 8.6%; height: 58%; border-radius: 0 0 3px 3px; background: linear-gradient(#24242c, #0b0b0f); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.scene-to { font-size: 24px; min-width: 1ch; text-align: center; color: #f4f4f6; transition: color .3s; }
.scene-shift { font-style: normal; color: #9ee3f5; font-size: 13px; min-width: 2ch; }
@media (max-width: 720px) { .scene-keys { gap: 8px; padding: 6px 11px 6px 7px; } .keys { width: 78px; height: 24px; gap: 1.5px; } .scene-to { font-size: 17px; } }

/* Audio cutter: trim handles with their times; everything outside them dims; the kept part opens out to fill the
   stage and its length appears. */
.cx-dim { top: 3%; height: 94%; opacity: 0; transition: none; background: linear-gradient(180deg, rgba(8,8,12,.74), rgba(8,8,12,.62)); }
.cx-dim.l { border-radius: 14px 0 0 14px; } .cx-dim.r { border-radius: 0 14px 14px 0; }
.cx-frame { top: 3%; height: 94%; opacity: 0; transition: none; background: linear-gradient(180deg, rgba(158,227,245,.06), rgba(160,123,255,.05)); }
.cx-frame::before, .cx-frame::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #5ff4ff, #6aa8ff 40%, #a07bff 75%, #ff73e0); box-shadow: 0 0 12px rgba(158,227,245,.55); }
.cx-frame::before { top: 0; } .cx-frame::after { bottom: 0; }
.cx-handle { top: 3%; height: 94%; width: 12px; margin-left: -6px; opacity: 0; transition: none; border-radius: 6px;
  background: linear-gradient(180deg, #5ff4ff, #8b7bff 60%, #ff73e0); box-shadow: 0 0 16px rgba(158,227,245,.55), 0 0 40px rgba(160,123,255,.3); }
.cx-handle::before { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 20px; margin: -10px 0 0 -1px; border-radius: 1px;
  background: rgba(8,8,12,.6); box-shadow: -3px 0 0 rgba(8,8,12,.35), 3px 0 0 rgba(8,8,12,.35); }
.cx-handle b { position: absolute; top: 10px; padding: 4px 8px; border-radius: 7px; white-space: nowrap; font: 700 12px/1 var(--font); font-variant-numeric: tabular-nums;
  color: #08080c; background: linear-gradient(110deg, #c9f3fb, #d9d0ff); box-shadow: 0 0 16px rgba(158,227,245,.45); }
.cx-handle.a b { left: 16px; } .cx-handle.b b { right: 16px; }
.cx-clip { left: 50%; top: 4%; translate: -50% 0; gap: 8px; padding: 8px 15px 8px 12px; opacity: 0; scale: .8; color: #c9f3fb;
  border-color: rgba(158,227,245,.45); box-shadow: 0 0 30px -6px rgba(158,227,245,.6), 0 12px 32px -14px rgba(0,0,0,.85);
  transition: opacity .35s var(--ease), scale .5s cubic-bezier(.34,1.56,.64,1); }
.cx-clip.on { opacity: 1; scale: 1; }
.cx-clip b { font-size: 18px; }
@media (max-width: 720px) { .cx-handle { width: 10px; margin-left: -5px; } .cx-handle b { top: 6px; padding: 3px 6px; font-size: 10.5px; } .cx-clip b { font-size: 15px; } }

/* Audio joiner: each file with its name and length; the joins light as they meet; the names become joined.wav. */
.jx-file { top: 5%; translate: -50% 0; gap: 8px; padding: 7px 12px 7px 9px; color: #f4f4f6; font-weight: 600; font-size: 13px; transition: none; }
.jx-file i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 0 10px var(--c1); }
.jx-file em { font-style: normal; color: #8f8f9c; font-weight: 600; }
.jx-file.f0 { --c1: #a07bff; --c2: #c7b8ff; } .jx-file.f1 { --c1: #5ff4ff; --c2: #6aa8ff; } .jx-file.f2 { --c1: #ff73e0; --c2: #ff9ac0; }
.jx-file.joined { --c1: #5ff4ff; --c2: #ff73e0; opacity: 0; scale: .85; border-color: rgba(158,227,245,.45);
  box-shadow: 0 0 30px -6px rgba(158,227,245,.6), 0 12px 32px -14px rgba(0,0,0,.85); transition: opacity .4s var(--ease), scale .5s cubic-bezier(.34,1.56,.64,1); }
.jx-file.joined.on { opacity: 1; scale: 1; }
.jx-file.joined em { color: #c9f3fb; }
.jx-seam { top: 8%; height: 84%; width: 3px; margin-left: -1.5px; border-radius: 3px; opacity: 0; transition: none;
  background: linear-gradient(transparent, #fff 30%, #fff 70%, transparent); box-shadow: 0 0 14px 3px rgba(158,227,245,.8), 0 0 40px 10px rgba(160,123,255,.35); }
@media (max-width: 720px) { .jx-file { font-size: 10.5px; padding: 5px 8px 5px 7px; gap: 5px; } .jx-file em { display: none; } .jx-file.joined em { display: inline; } }

/* Normalizer: each clip's reading above it (the loud one red, at a red ceiling); they level to the −14 LUFS line,
   with the gain each was given below. */
.nx-clip { top: 0; translate: -50% 0; padding: 6px 11px; gap: 7px; font-size: 12px; transition: border-color .3s, box-shadow .3s; }
.nx-clip b { font-size: 15px; min-width: 4.4ch; text-align: right; }
.nx-clip.hot { border-color: rgba(255,90,90,.55); box-shadow: 0 0 24px -6px rgba(255,80,80,.7), 0 12px 32px -14px rgba(0,0,0,.85); }
.nx-clip.hot b { color: #ff8a8a; }
.nx-loud { font-style: normal; font: 700 10.5px/1 var(--font); color: #fff; background: #e5484d; padding: 3px 6px; border-radius: 5px; max-width: 80px; overflow: hidden; transition: max-width .3s, opacity .3s, padding .3s; }
.nx-clip:not(.hot) .nx-loud { max-width: 0; padding: 3px 0; opacity: 0; }
.scene.done .nx-clip { border-color: rgba(158,227,245,.45); box-shadow: 0 0 24px -6px rgba(158,227,245,.6), 0 12px 32px -14px rgba(0,0,0,.85); }
.scene.done .nx-clip b { color: #c9f3fb; }
.nx-gain { bottom: 0; translate: -50% 0; padding: 5px 10px; font-size: 12.5px; font-weight: 700; color: #c9f3fb; opacity: 0; transition: none; }
.nx-gain.down { color: #ffb0b0; }
.nx-ceiling { top: 10%; height: 2px; margin-top: -1px; border-radius: 2px; background: #ff6b6b; box-shadow: 0 0 10px 1px rgba(255,80,80,.8), 0 0 22px 3px rgba(255,60,60,.3); transition: none; }
.nx-level { top: 19%; height: 0; border-top: 1px dashed rgba(232,252,255,.7); filter: drop-shadow(0 0 4px rgba(158,227,245,.6)); transition: none; }
.nx-level span { position: absolute; left: 0; top: -9px; padding: 3px 7px; border-radius: 6px; font: 700 10.5px/1 var(--font); color: #08080c; background: #9ee3f5; letter-spacing: .02em; box-shadow: 0 0 14px rgba(158,227,245,.5); }
@media (max-width: 720px) { .nx-clip { padding: 4px 8px; font-size: 10px; gap: 5px; } .nx-clip b { font-size: 12px; } .nx-gain { font-size: 10.5px; padding: 4px 8px; } .nx-loud { display: none; } }

/* MP4 to MP3 (and the music remover's video): cinematic frames roll past on a strip of film; under them the film's
   optical soundtrack glows, and pours out below as the waveform, landing as audio.mp3. */
.scene-film { top: 1%; left: 0; right: 0; height: 22%; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.scene-reel { position: absolute; left: 0; top: 0; bottom: 0; display: flex; column-gap: 8px; padding: 9px 0 17px; will-change: transform;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 7px, transparent 7px 16px) top / 100% 4px no-repeat,
              repeating-linear-gradient(90deg, rgba(255,255,255,.24) 0 7px, transparent 7px 16px) bottom / 100% 4px no-repeat; }
.scene-reel i { position: relative; flex: none; width: clamp(78px, 9vw, 118px); border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.scene-reel i:nth-child(3n+1) {   /* sunset over water */
  background: radial-gradient(circle at 50% 62%, #ffe3a3 0 9%, rgba(255,190,110,.75) 10%, transparent 26%),
              linear-gradient(#2a1650 0%, #b2407a 38%, #ff8a4c 60%, #3a1d4a 61%, #170d24 100%); }
.scene-reel i:nth-child(3n+2) {   /* ocean horizon */
  background: linear-gradient(transparent 52%, rgba(255,255,255,.35) 52.5%, transparent 54%),
              linear-gradient(#89d6f0 0%, #4aa3d6 50%, #0f5d8c 53%, #06223d 100%); }
.scene-reel i:nth-child(3n) {     /* neon city */
  background: linear-gradient(transparent 58%, #0b0b14 58%),
              linear-gradient(90deg, transparent 0 8%, #13132a 8% 22%, transparent 22% 30%, #1a1236 30% 46%, transparent 46% 58%, #0f1a30 58% 74%, transparent 74% 82%, #1b1030 82% 94%, transparent 94%) bottom / 100% 70% no-repeat,
              linear-gradient(#0d0a24 0%, #4b1d7a 45%, #ff3fa4 72%, #2a0d3d 100%); }
.ex-track { position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; transition: opacity .2s;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8'%3E%3Cpath d='M0 4 Q3 0 6 4 T12 4 T18 4 Q21 1 24 4 T30 4 Q33 -1 36 4 T42 4 T48 4 Q51 2 54 4 T60 4' fill='none' stroke='%239ee3f5' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 60px 8px repeat-x;
  filter: drop-shadow(0 0 4px rgba(158,227,245,.9)); }
.ex-front { top: 24%; height: 66%; width: 2px; margin-left: -1px; opacity: 0; border-radius: 2px;
  background: linear-gradient(rgba(232,252,255,.95), rgba(160,140,255,.5) 70%, transparent); box-shadow: 0 0 14px 2px rgba(158,227,245,.6), 0 0 34px 8px rgba(160,140,255,.25); }
.scene-file { gap: 8px; padding: 8px 14px 8px 10px; color: #f4f4f6; font-weight: 600; }
.scene-file::before { content: ''; width: 18px; height: 14px; border-radius: 3px; color: #c9f3fb; opacity: .9;
  background: linear-gradient(90deg, transparent 0 2px, currentColor 2px 4px, transparent 4px 6px, currentColor 6px 8px, transparent 8px 10px, currentColor 10px 12px, transparent 12px 14px, currentColor 14px 16px, transparent 16px) center / 100% 70% no-repeat;
  -webkit-mask: linear-gradient(transparent 0 15%, #000 15% 85%, transparent 85%); }
.scene-file.out { bottom: 6%; left: 3%; opacity: 0; scale: .85; border-color: rgba(158,227,245,.45);
  box-shadow: 0 0 30px -6px rgba(158,227,245,.6), 0 12px 32px -14px rgba(0,0,0,.85); transition: opacity .4s var(--ease), scale .5s cubic-bezier(.34,1.56,.64,1); }
.scene-file.out.on { opacity: 1; scale: 1; }

/* Stem splitter: the four lanes the song comes apart into, each labelled in its colour; a lane heard alone is lit. */
.scene-lanes { inset: 0; width: 100%; height: 100%; transition: none; filter: drop-shadow(0 0 5px rgba(158,227,245,.45)); }
.scene-stem { left: 3%; translate: 0 -50%; padding: 5px 9px 5px 8px; font-size: 12px; gap: 7px; transition: opacity .25s, border-color .25s, box-shadow .25s; }
.scene-stem i { width: 10px; height: 10px; border-radius: 4px; background: linear-gradient(135deg, var(--from), var(--to)); box-shadow: 0 0 10px var(--from); }
.scene-stem em { font-style: normal; font: 800 9.5px/1 var(--font); padding: 3px 5px; border-radius: 4px; background: rgba(255,255,255,.08); color: rgba(236,237,245,.45); transition: background .25s, color .25s; }
.scene-stem.solo { border-color: var(--from); box-shadow: 0 0 22px -4px var(--from), 0 12px 32px -14px rgba(0,0,0,.85); }
.scene-stem.solo em { background: linear-gradient(135deg, var(--from), var(--to)); color: #08080c; }
@media (max-width: 720px) { .scene-stem { padding: 3px 7px 3px 6px; font-size: 10.5px; gap: 5px; } .scene-stem i { width: 8px; height: 8px; } .scene-stem em { display: none; } }

/* Karaoke maker: the voice streams up into a stage mic (mic.js) above the button; both drawn on canvases. */
.kx-flow { inset: 0; width: 100%; height: 100%; }
.kx-mic { transition: none; }
@media (max-width: 720px) { .scene-fx { width: 19px; height: 19px; margin: -9.5px; } .scene-tag { padding: 5px 10px 5px 8px; font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .scene-spark, .scene-fx { display: none; } .scene-status i { animation: none; } }
/* The lane a tool takes away (karaoke: the vocals; acapella and the voice isolator: the music) dims its label too. */
.drop[data-removed="voice"] .stage-label.v, .drop[data-removed="music"] .stage-label.m { opacity: .38; }

/* Technology (the engine page): stats, model cards, the path of a file, privacy. */
.tech { max-width: 1080px; margin: 0 auto; padding: 24px 16px 40px; }
.tech-hero { text-align: center; padding: 40px 0 28px; }
.tech-hero .eyebrow { color: var(--voice); font: 600 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; }
.tech-hero h1 { font: 600 clamp(38px, 6vw, 72px)/1.02 var(--display); letter-spacing: -.045em; margin: 0 0 20px; }
.tech-hero h1 em { font-style: normal; background: linear-gradient(110deg, var(--voice), var(--music)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech-hero .lead { max-width: 680px; margin: 0 auto; color: var(--muted); font-size: clamp(16px, 1.6vw, 19px); line-height: 1.55; }
.tech-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 40px 0 12px; border-radius: 20px; overflow: hidden;
  background: var(--line); border: 1px solid var(--line); }
.tech-stats div { background: linear-gradient(180deg, #121219, #0e0e13); padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; }
.tech-stats b { font: 600 clamp(34px, 4vw, 48px)/1 var(--display); letter-spacing: -.04em; background: linear-gradient(110deg, #fff, var(--voice) 60%, var(--music));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.tech-stats small { font-size: .45em; letter-spacing: 0; }
.tech-stats span { color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.tech-note { color: var(--muted); font-size: 12.5px; text-align: center; margin: 0 auto 56px; max-width: 720px; line-height: 1.5; }
.tech-note a { color: var(--muted); }
.tech h2 { font: 600 clamp(26px, 3.2vw, 38px)/1.1 var(--display); letter-spacing: -.03em; margin: 0 0 22px; }
.tech-models, .tech-flow, .tech-privacy { margin: 0 0 64px; }
.tech-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tech-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tech-card { padding: 22px 20px; border-radius: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); }
.tech-card h3 { font: 600 19px/1.25 var(--display); letter-spacing: -.02em; margin: 0 0 6px; }
.tech-card p { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0; }
.tech-card .tech-kicker { color: var(--voice); font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
.tech-card:nth-child(even) .tech-kicker { color: var(--music); }
.tech-card .tech-src { font-size: 12.5px; color: #8d8c96; margin: 0 0 12px; }
.tech-flow ol { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tech-flow li { counter-increment: s; padding: 22px 20px; border-radius: 18px; border: 1px solid var(--line); color: var(--muted); font-size: 14px; line-height: 1.55; }
.tech-flow li::before { content: counter(s, decimal-leading-zero); display: block; font: 600 13px/1 var(--font); color: var(--voice); margin-bottom: 14px; letter-spacing: .06em; }
.tech-flow li b { display: block; color: var(--text); font-size: 16px; margin-bottom: 6px; }
.tech-cta { text-align: center; padding: 32px 0 8px; }
.tech-cta .btn { margin-top: 6px; }
@media (max-width: 900px) { .tech-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tech-grid, .tech-flow ol { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tech-grid, .tech-grid.two, .tech-flow ol { grid-template-columns: 1fr; } .tech-hero { padding-top: 20px; } }

/* One footer for every page (Kyle, 2 Oct: "a leading professional service"): brand, product, resources, company. */
.site-foot { display: block; max-width: 1080px; padding: 40px 24px 44px; }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 28px; }
.foot-brand .brand { font-size: 17px; }
.foot-brand p { margin: 12px 0 0; color: var(--muted); font-size: 13.5px; max-width: 260px; line-height: 1.5; }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; }
.site-foot h2 { margin: 2px 0 6px; font: 600 12px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.site-foot nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; width: fit-content; transition: color .15s; }
.site-foot nav a:hover { color: var(--text); }
.foot-legal { margin: 36px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--line); color: #77767f; font-size: 12.5px; }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .foot-brand { grid-column: 1 / -1; } .site-foot nav a { padding: 3px 0; } }

/* Document pages (guides, support, legal): the same polish as the tools (Oct 2 audit). */
.doc h2, .guide h2 { line-height: 1.25; text-wrap: balance; }
.guide h1 em { display: block; text-wrap: balance; }
.guide p, .guide ol, .guide ul:not(.links), .guide-choice { max-width: 68ch; }
.doc ul.links { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.doc ul.links li { margin: 0; }
.doc ul.links a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 18px; border-radius: 14px; text-decoration: none; font-weight: 550;
  color: var(--text); background: linear-gradient(120deg, rgba(158,227,245,.06), rgba(160,140,255,.06)); border: 1px solid rgba(255,255,255,.08);
  transition: border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.doc ul.links a::after { content: "→"; margin-left: auto; color: var(--voice); transition: transform .35s var(--ease); }
.doc ul.links a:hover { border-color: rgba(158,227,245,.35); transform: translateY(-2px); box-shadow: 0 16px 40px -26px rgba(158,227,245,.8); }
.doc ul.links a:hover::after { transform: translateX(4px); }
.guide-credits summary { list-style: none; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.guide-credits summary::-webkit-details-marker { display: none; }
.guide-credits summary::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.guide-credits[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.guide-audio audio { height: 44px; border-radius: 999px; border: 1px solid var(--line); background: var(--raised); }
.guide-audio audio::-webkit-media-controls-panel { background: var(--raised); }
@media (max-width: 720px) { .tools a { min-height: 40px; } .acct-up, .acct-key { height: 40px; } }

/* Proof strip (home): facts we can back, not slogans; the details live on /technology. */
.proof { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 26px; max-width: 1080px; margin: 64px auto 0; padding: 18px 24px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.proof span { display: inline-flex; align-items: baseline; gap: 7px; }
.proof b { color: var(--text); font-weight: 650; }
.proof em { font-style: normal; }
.proof a { color: var(--voice); text-decoration: none; font-weight: 600; white-space: nowrap; }
.proof a i { font-style: normal; display: inline-block; transition: transform .2s; }
.proof a:hover i { transform: translateX(3px); }
@media (max-width: 600px) { .proof { justify-content: flex-start; gap: 10px 18px; margin-top: 44px; font-size: 13px; } }

/* The side menu as a panel (Kyle, 2 Oct: "a proper side bar feeling rather than floating ... the official feeling of
   elevenlabs"): its own surface and edge, tools in groups, new ones tagged, the plan card and help at its foot.
   Phones and tablets keep the sliding row of tools. (site/tools/sidebar.py writes the menu into every page.) */
.tools-h, .side-foot, .side-panel { display: none; }
.tools-new { flex: none; font-style: normal; margin-left: auto; padding: 3px 6px; border-radius: 6px; font: 700 10px/1 var(--font); letter-spacing: .03em;
  color: #08080c; background: linear-gradient(110deg, var(--voice), var(--music)); }
@media (max-width: 1199px) { .tools-new { display: none; } }
@media (min-width: 1200px) {
  body:has(> .tools) { padding-left: 268px; }
  .side-panel { display: block; position: fixed; z-index: 30; top: 0; bottom: 0; left: 0; width: 252px; pointer-events: none;
    background: radial-gradient(130% 34% at 0% 0%, rgba(158,227,245,.075), transparent 62%), radial-gradient(130% 30% at 100% 100%, rgba(160,140,255,.07), transparent 62%), rgba(15,15,20,.82);
    border-right: 1px solid rgba(255,255,255,.07); box-shadow: 30px 0 70px -50px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  body:has(> .tools) .top { z-index: 41; width: 252px; padding: 20px 22px; }
  .tools { top: 68px; left: 12px; width: 228px; bottom: 210px; z-index: 40; gap: 1px; overflow: visible; justify-content: flex-start; }
  .tools-h { display: block; margin: 18px 10px 7px; font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(236,237,245,.36); }
  .tools-h:first-child { margin-top: 8px; }
  :root:not([data-theme="light"]) .tools .tool-pill { background: linear-gradient(var(--voice), var(--music)) 0 50% / 2px 56% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.05)); }
  .side-foot { display: flex; flex-direction: column; gap: 1px; position: fixed; z-index: 40; left: 12px; bottom: 16px; width: 228px; }
  .side-foot a:not(.side-plan) { display: flex; align-items: center; gap: 11px; min-height: 32px; padding: 0 10px; border-radius: 8px;
    color: rgba(236,237,245,.55); font: 500 13.5px/1.2 var(--font); text-decoration: none; transition: color .2s, background-color .2s; }
  .side-foot a:not(.side-plan):hover { color: #fff; background: rgba(255,255,255,.035); }
  .side-foot svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .side-plan { position: relative; display: flex; flex-direction: column; gap: 5px; margin: 0 0 12px; padding: 14px 14px 15px; border-radius: 14px; text-decoration: none; overflow: hidden;
    background: radial-gradient(120% 120% at 100% 0%, rgba(160,140,255,.28), transparent 60%), linear-gradient(135deg, rgba(158,227,245,.13), rgba(160,140,255,.10));
    border: 1px solid rgba(158,227,245,.22); transition: border-color .25s, transform .25s var(--ease); }
  .side-plan b { color: #fff; font: 650 14px/1.2 var(--font); }
  .side-plan span { color: rgba(236,237,245,.68); font-size: 12.5px; line-height: 1.4; }
  .side-plan:hover { border-color: rgba(158,227,245,.5); transform: translateY(-1px); }
  :root[data-plan="pro"] .side-plan, :root[data-plan="lite"] .side-plan { display: none; }
  :root[data-theme="light"] .side-panel { background: #f1eee9; border-right-color: var(--line); box-shadow: none; }
}
@media (min-width: 1200px) {   /* sixteen tools: a little tighter, and the list scrolls inside the panel if the screen is short */
  :root:not([data-theme="light"]) .tools a, .tools a { min-height: 32px; }
  .tools { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 1px 0 8px; }
  .tools::-webkit-scrollbar { display: none; }
  .tools-h { margin: 14px 10px 6px; }
}
@media (min-width: 1200px) and (max-height: 900px) { .side-plan { display: none; } .tools { bottom: 124px; } }

/* Home: starting points, not a second copy of the menu (Kyle, 2 Oct; how ElevenLabs' home works): what you're making,
   each with its own picture in the site's colours. */
.starters { max-width: 1120px; margin: 84px auto 24px; padding: 0 16px; }
.starters h2 { font: 600 clamp(26px, 3.4vw, 40px)/1.12 var(--display); letter-spacing: -.03em; text-align: center; margin: 0 0 10px; }
.starters-lede { text-align: center; color: var(--muted); margin: 0 0 34px; font-size: 16px; }
.starters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.starter { display: flex; flex-direction: column; gap: 5px; padding: 7px 7px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); color: var(--text); text-decoration: none;
  transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.starter .art { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 14px; margin-bottom: 9px; background: #0d0d13; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.starter strong { padding: 0 9px; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.starter span { padding: 0 9px; color: var(--muted); font-size: 13.5px; line-height: 1.45; }
.starter:hover { border-color: rgba(158,227,245,.32); transform: translateY(-3px); box-shadow: 0 24px 54px -28px rgba(158,227,245,.55); }
.starter:hover .art { filter: brightness(1.12) saturate(1.1); }
.starter .art { transition: filter .3s var(--ease); }
@media (max-width: 1100px) { .starters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .starters-grid { gap: 10px; } .starter { padding: 5px 5px 14px; border-radius: 16px; } .starter .art { border-radius: 12px; }
  .starter strong { font-size: 14px; padding: 0 6px; } .starter span { font-size: 12.5px; padding: 0 6px; } }

/* Stem splitter: the four-track mixer (stems-page.js). A transport, then a lane per stem: its colour and name, mute,
   solo, volume and download, and its waveform under the shared playhead (click or drag to move it). */
.mx { margin: 4px 0 18px; border-radius: 20px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); box-shadow: 0 30px 70px -50px rgba(0,0,0,.9); }
.mx-transport { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mx-time { font: 600 15px/1 var(--font); font-variant-numeric: tabular-nums; color: var(--muted); }
.mx-time b { color: var(--text); font-weight: 650; }
.mx-reset { margin-left: auto; font-size: 13.5px; }
.mx-lanes { display: flex; flex-direction: column; }
.mx-lane { display: grid; grid-template-columns: minmax(250px, 32%) 1fr; align-items: center; min-height: 78px; border-bottom: 1px solid var(--line); transition: background-color .2s; }
.mx-lane:last-child { border-bottom: 0; }
.mx-lane:hover { background: rgba(255,255,255,.015); }
.mx-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 0 16px; min-width: 0; }
.mx-dot { flex: none; width: 10px; height: 10px; border-radius: 4px; background: linear-gradient(135deg, var(--from), var(--to)); box-shadow: 0 0 10px var(--from); }
.mx-head b { flex: none; min-width: 58px; font: 650 14.5px/1.2 var(--font); color: var(--text); }
.mx-key { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--raised); color: var(--muted);
  font: 700 11.5px/1 var(--font); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mx-key:hover { color: var(--text); border-color: var(--edge); }
.mx-m[aria-pressed="true"] { background: rgba(229,72,77,.16); color: #ff8a8a; border-color: rgba(229,72,77,.5); }
.mx-s[aria-pressed="true"] { background: linear-gradient(135deg, var(--from), var(--to)); color: #08080c; border-color: transparent; box-shadow: 0 0 14px -2px var(--from); }
.mx-vol { flex: 1 1 auto; min-width: 48px; accent-color: var(--from); }
.mx-dl { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; }
.mx-dl:hover { color: var(--text); border-color: var(--line); background: var(--raised); }
.mx-dl svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mx-wave { display: block; width: 100%; height: 62px; padding-right: 14px; box-sizing: border-box; cursor: pointer; touch-action: none; transition: opacity .2s; }
.mx-lane.quiet .mx-wave { opacity: .3; }
.mx-lane.quiet .mx-head b { color: var(--muted); }
.result .mx + .actions { margin-top: 0; }
body[data-mode="stems"] .result:has(.paywall:not([hidden])) .mx-dl { display: none; }
@media (max-width: 720px) {
  .mx-lane { grid-template-columns: 1fr; padding: 10px 0 6px; }
  .mx-head { padding: 0 12px 4px; }
  .mx-wave { height: 50px; padding: 0 12px; }
}
/* The sliding row (phones and tablets): centred when it fits, starting at the first tool when it doesn't (a centred row
   that overflows cuts its first items off where they can't be scrolled to). */
@media (max-width: 1199px) {
  .tools { justify-content: flex-start; }
  .tools a:first-of-type { margin-left: auto; }
  .tools a:last-of-type { margin-right: auto; }
}

/* Guides: the one tool a guide is about, as a card after its introduction (that tool's own stage), and at the end
   the guide's button with one quiet line on what a plan adds (site/tools/guide_tool.py). */
.guide-tool { margin: 26px 0 30px; }
.guide-tool a { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 22px; padding: 10px; border-radius: 20px;
  text-decoration: none; color: var(--text); border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.9); transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); }
.guide-tool a:hover { border-color: rgba(158,227,245,.3); transform: translateY(-2px); box-shadow: 0 26px 60px -34px rgba(158,227,245,.35); }
.guide-tool img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 14px; background: #0d0d13; }
.guide-tool-text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 10px 4px 0; }
.guide-tool-kicker { font: 600 11px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--voice); }
.guide-tool-text strong { font: 650 21px/1.2 var(--display); letter-spacing: -.02em; }
.guide-tool-line { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin-bottom: 8px; }
.guide-tool .btn { pointer-events: none; }
.guide-next { margin: 34px 0 10px; }
.guide-next p { margin: 0; }
.guide-plan { margin-top: 12px !important; color: var(--muted); font-size: 14px; line-height: 1.5; }
.guide-plan a { color: var(--text); text-decoration-color: rgba(158,227,245,.5); text-underline-offset: 3px; }
@media (max-width: 720px) { .guide-tool a { grid-template-columns: 1fr; gap: 12px; } .guide-tool-text { padding: 0 6px 6px; } }

/* ===================================================================================================
   Mirinex, the official look (Kyle, 3 Oct: "less cheap, more official"). Colour lives in the product (the
   waveforms, the stage scenes, the results and the tracks' own keys) and the interface around it is calm: white
   keys with near-black text, plain smoked glass, silver headlines, quiet badges, a near-black page. Kept from
   Kyle's earlier asks: the rim of light orbiting "Choose a file" (now white light) and Sign up's flowing colours. */
:root:not([data-theme="light"]) { --mx-key: #f2f2f4; --mx-key-hover: #ffffff; --mx-ink: #0b0b0e; --mx-glass: rgba(255, 255, 255, .045);
  --mx-line: rgba(255, 255, 255, .1); --mx-line-hi: rgba(255, 255, 255, .2); --mx-silver: linear-gradient(100deg, #ffffff 0%, #d5d8e2 30%, #f4f6fb 52%, #b8bcc9 76%, #ffffff 100%); }
/* The page: the coloured pools turned well down, so it reads near-black and the visuals carry the colour. */
:root:not([data-theme="light"]) body::before { opacity: .42; filter: blur(24px) saturate(70%); }
/* Primary keys: a solid white face, near-black text, a crisp edge and no glow. */
:root:not([data-theme="light"]) .btn:not(.ghost):not(.link), :root:not([data-theme="light"]) .play {
  background: var(--mx-key); background-size: auto; color: var(--mx-ink); animation: none; filter: none;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px -14px rgba(0, 0, 0, .8); }
:root:not([data-theme="light"]) .btn:not(.ghost):not(.link):hover, :root:not([data-theme="light"]) .play:hover {
  background: var(--mx-key-hover); filter: none;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(0, 0, 0, .45), 0 10px 30px -12px rgba(255, 255, 255, .18); }
:root:not([data-theme="light"]) .drop-cta .btn, :root:not([data-theme="light"]) #dl-mix {
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .14), 0 12px 34px -14px rgba(0, 0, 0, .9); }
/* "Choose a file": the orbiting rim stays (now white light), around a white face. */
:root:not([data-theme="light"]) .drop .drop-cta .btn { animation: none; box-shadow: 0 14px 40px -16px rgba(0, 0, 0, .95); }
:root:not([data-theme="light"]) .drop .drop-cta .btn::before {
  background: conic-gradient(transparent 0 60%, rgba(255, 255, 255, .55) 70%, #fff 76%, rgba(255, 255, 255, .55) 82%, transparent 92% 100%); }
:root:not([data-theme="light"]) .drop .drop-cta .btn::after { background: var(--mx-key); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0, 0, 0, .12); }
/* Secondary keys and the current tool: plain smoked glass, no drifting colour or coloured rims. */
:root:not([data-theme="light"]) .btn.ghost, :root:not([data-theme="light"]) .ab:not([aria-pressed="true"]),
:root:not([data-theme="light"]) .key:not(.lamped[aria-pressed="true"]) {
  background: var(--mx-glass); background-size: auto; animation: none; border-color: var(--mx-line); }
:root:not([data-theme="light"]) .btn.ghost:hover, :root:not([data-theme="light"]) .ab:not([aria-pressed="true"]):hover,
:root:not([data-theme="light"]) .key:not(.lamped[aria-pressed="true"]):hover { background: rgba(255, 255, 255, .08); border-color: var(--mx-line-hi); }
.btn.ghost::after, .ab::after, .key::after, .tools a::after, .tools a[aria-current]::after { display: none; }
:root:not([data-theme="light"]) .tools a[aria-current] { background: rgba(255, 255, 255, .075); background-size: auto; animation: none;
  border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); }
/* Headlines: the accent line is brushed silver with a slow sheen, not a rainbow. */
:root:not([data-theme="light"]) h1 em, :root:not([data-theme="light"]) .hero h1 em {
  background: var(--mx-silver); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
/* Badges, tags and the paywall's label: quiet. */
.tools-new { color: #e9e9ee; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
:root:not([data-theme="light"]) .pw-tag { color: #e9eaef; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
/* Sign up keeps its flowing colours (Kyle, 1 Oct: "the colors IN the button"): the one colour accent in the chrome. */
:root:not([data-theme="light"]) .acct-key:hover, :root:not([data-theme="light"]) .lang-menu summary:hover, .lang-menu[open] summary { border-color: rgba(255, 255, 255, .28); }
/* Plans: Pro is set apart by a clean white outline and a "Recommended" label, not an orbiting rainbow. */
:root:not([data-theme="light"]) .plan.pro { background: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .02)), rgba(14, 14, 20, .7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .34), 0 30px 70px -40px rgba(0, 0, 0, .9); }
:root:not([data-theme="light"]) .plan.pro::after { display: none; }
:root:not([data-theme="light"]) .plan.pro [data-price] { background: none; color: #fff; filter: none; }
:root:not([data-theme="light"]) .plan:not(:disabled):hover { box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9); }
:root:not([data-theme="light"]) .plan.pro:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 30px 70px -40px rgba(0, 0, 0, .9); }
/* Grey fine print, a step brighter to read. */
:root:not([data-theme="light"]) .pw-fine, :root:not([data-theme="light"]) .purchase-assurance p { color: #a3a5b2; }
/* The stage's Vocals / Music labels sit on the light, without dark boxes. */
.stage-label { background: none; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
/* The trust row under every set of plans (site/tools/conversion.py). */
.trust { list-style: none; margin: 16px 0 8px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.trust li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: #dcdde4; }
.trust svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.trust a:hover { text-decoration-color: currentColor; }
.purchase-assurance .trust a::after { content: none; }
.purchase-assurance > p { text-align: center; font-weight: 400; color: #a3a5b2; }
/* Pro's label. */
.plan.pro { position: relative; }
.plan .plan-flag { position: absolute; top: -11px; right: 18px; z-index: 2; padding: 5px 10px; border-radius: 999px; font: 700 11px/1 var(--font);
  letter-spacing: .02em; color: #0b0b0e; background: #f2f2f4; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9); }
/* The whole file under the player: the part heard, then the rest, locked (app.js). */
.locked { display: grid; gap: 9px; width: 100%; margin: 20px 0 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
.locked[hidden] { display: none; }
.locked-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.locked-bar .have { flex: 0 0 var(--have, 25%); background: linear-gradient(90deg, #6ff1ff, #8aa8ff 55%, #b48cff); box-shadow: 0 0 14px rgba(120, 200, 255, .45); }
.locked-bar .rest { flex: 1; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 5px, transparent 5px 10px); }
.locked-bar .rest svg { display: none; }
.locked-line { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: 13.5px; color: #a7a9b6; }
.locked-line b { color: #eceef3; font-weight: 650; font-variant-numeric: tabular-nums; }
.locked-rest { display: inline-flex; align-items: center; gap: 6px; }
.locked-rest svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.locked-cta { margin-left: 12px; color: #fff; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.locked:hover .locked-cta, .locked:focus-visible .locked-cta { text-decoration-color: #fff; }
/* The sample song: a real button under the stage. */
.sample-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 17px 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.sample-btn svg { width: 13px; height: 13px; fill: currentColor; }
/* How it works, the FAQ and the plan comparison (site/tools/conversion.py). */
.howto, .faq, .compare-plans { max-width: 1120px; margin: 80px auto 0; padding: 0 16px; }
.howto h2, .faq h2, .compare-plans h2 { font: 600 clamp(26px, 3.4vw, 38px)/1.12 var(--display); letter-spacing: -.03em; text-align: center; margin: 0 0 30px; text-wrap: balance; }
.howto-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.howto-steps li { display: grid; gap: 9px; align-content: start; padding: 22px 22px 24px; border-radius: 18px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .075); }
.howto-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font); color: #0b0b0e; background: #f2f2f4; }
.howto-steps strong { font-size: 17.5px; font-weight: 650; letter-spacing: -.012em; margin-top: 6px; }
.howto-steps li > span:last-child { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
@media (max-width: 760px) { .howto-steps { grid-template-columns: 1fr; } .howto, .faq, .compare-plans { margin-top: 60px; } }
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, .08); }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 19px 40px 19px 2px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor; opacity: .7; transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--fade); }
.faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.faq summary:hover { color: #fff; }
.faq details p { margin: 0 0 20px; max-width: 64ch; color: var(--muted); font-size: 15px; line-height: 1.6; }
.compare-wrap { max-width: 860px; margin: 0 auto; overflow-x: auto; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .025); }
.compare-plans table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.compare-plans th, .compare-plans td { padding: 14px 20px; text-align: left; vertical-align: middle; border-top: 1px solid rgba(255, 255, 255, .06); }
.compare-plans thead th, .compare-plans thead td { border-top: 0; font-size: 15px; font-weight: 700; color: #fff; }
.compare-plans tbody th { font-weight: 500; color: #d9dae1; }
.compare-plans td { width: 26%; color: #eceef3; }
.compare-plans .yes { width: 18px; height: 18px; vertical-align: middle; fill: none; stroke: #eceef3; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.compare-plans .no { color: #6c6e7a; }
.compare-note { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) { .compare-plans th, .compare-plans td { padding: 12px 12px; } .compare-plans td { width: auto; } }