/* Warm Neutral / Solar Accent. Decorative muted is not used for body copy. */
:root {
  --bg: #f8f8f5; --bg-alt: #f3f3ef; --surface: #fff;
  --ink: #17181c; --secondary: #5f636b; --muted: #7d8188;
  --border: #e5e5df; --divider: #ecece7;
  --solar: #f4c542; --solar-hover: #e6b62f; --solar-soft: #fff5cf; --solar-faint: #fffae9;
  --blue: #3558f4; --blue-soft: #eef2ff;
  --success: #178a5b; --success-bg: #eaf7f1;
  --danger: #c83e4d; --danger-bg: #fcedef; --warning: #8a6412;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius: 18px; --control-radius: 12px;
  --shadow: 0 12px 32px #17181c06; --transition: 160ms ease;
  --font: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font); font-size: 16px; line-height: 1.6;
  color: var(--ink); background: var(--bg); color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-padding-bottom: 160px; }
body { margin: 0; }
.signed-in { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
button, input, textarea, select { font: inherit; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 13px 22px; border: 1px solid transparent;
  border-radius: var(--control-radius); background: var(--solar); color: var(--ink);
  font-size: 15px; font-weight: 650; line-height: 1.4; text-align: center;
  cursor: pointer; text-decoration: none; transition: background var(--transition), transform var(--transition), border-color var(--transition);
}
button:hover, .button:hover { background: var(--solar-hover); text-decoration: none; }
button:active, .button:active { transform: translateY(1px); }
.button-secondary, .secondary { background: var(--surface); color: var(--ink); border-color: #898d95; }
.button-secondary:hover, .secondary:hover { background: var(--bg-alt); border-color: var(--secondary); }
.button-danger { background: var(--danger-bg); color: #a62f3d; border-color: #dca4ab; }
.small { min-height: 44px; padding: 10px 16px; font-size: 14px; }
button:disabled, input:disabled, .button[aria-disabled="true"] { background: var(--bg-alt); color: var(--secondary); border-color: var(--border); cursor: not-allowed; transform: none; }
button[aria-busy="true"] { cursor: wait; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--blue); }
#main:focus { outline: none; }
.icon { width: 22px; height: 22px; flex-shrink: 0; vertical-align: middle; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.035em; margin: 0 0 16px; overflow-wrap: anywhere; }
h1 { font-size: clamp(32px, 4vw, 40px); font-weight: 750; }
h2 { font-size: clamp(24px, 3vw, 30px); font-weight: 720; }
h3 { font-size: 20px; font-weight: 680; }
p { margin: 0 0 20px; overflow-wrap: anywhere; }
small { font-size: 14px; font-weight: 450; letter-spacing: 0; }
.lead { font-size: 17px; line-height: 1.65; color: var(--secondary); max-width: 570px; margin-bottom: 28px; }
.muted, .helptext { color: var(--secondary); font-size: 14px; }
.eyebrow { display: block; color: var(--secondary); font-size: 12px; font-weight: 700; letter-spacing: .105em; margin-bottom: 14px; }
.solar-dot, .credit-mark { display: inline-block; width: 8px; height: 8px; background: var(--solar); border-radius: 50%; }
.site-header { max-width: 1200px; margin: auto; padding: 20px 20px; padding-top: max(20px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 750; line-height: 1.2; min-width: 0; letter-spacing: -.5px; }
.brand span:last-child { overflow-wrap: anywhere; }
.brand:hover { text-decoration: none; }
.brand-icon { flex-shrink: 0; width: 36px; height: 36px; display: grid; place-items: center; background: var(--solar); border-radius: 11px; font-size: 24px; }
.balance-pill { display: flex; align-items: center; gap: 7px; white-space: nowrap; min-height: 44px; border: 1px solid var(--border); background: var(--surface); padding: 10px 12px; color: var(--ink); font-size: 13px; font-weight: 650; border-radius: 12px; }
.desktop-nav { display: none; }
.container { max-width: 1200px; margin: auto; padding: 12px 20px 48px; }
.demo-notice { color: var(--secondary); background: var(--bg-alt); border-radius: 8px; padding: 8px 12px; font-size: 12px; margin-bottom: 24px; }
.footer { max-width: 1160px; margin: auto; border-top: 1px solid var(--border); padding: 30px 20px; display: flex; flex-direction: column; gap: 14px; color: var(--secondary); font-size: 13px; }
.footer-brand { font-size: 15px; }
.bottom-nav { position: fixed; z-index: 20; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
.bottom-nav a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 4px; min-height: 52px; color: var(--secondary); font-size: 12px; border-radius: 10px; text-decoration: none; position: relative; }
.bottom-nav a[aria-current] { color: var(--ink); font-weight: 750; background: var(--bg-alt); }
.bottom-nav a[aria-current]::before { content: ""; width: 20px; height: 3px; background: var(--solar); position: absolute; top: 0; border-radius: 2px; }
.hero { display: grid; gap: 40px; padding: 30px 0 44px; }
.hero h1 { font-size: clamp(36px, 5vw, 62px); line-height: 1.1; letter-spacing: -.055em; margin: 24px 0; }
.hero-underline { text-decoration: underline; text-decoration-color: var(--solar); text-decoration-thickness: 5px; text-underline-offset: 7px; }
.hero .lead { max-width: 470px; }
.hero-secondary { display: inline-flex; min-height: 44px; align-items: center; margin: 10px 0 0 16px; color: var(--secondary); font-size: 14px; }
.hero-note { font-size: 13px; color: var(--secondary); margin: 20px 0 0; }
.hero-preview { background: white; border: 1px solid var(--border); padding: 18px; border-radius: 20px; box-shadow: var(--shadow); align-self: center; }
.preview-topline { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .09em; color: var(--secondary); margin: 0 0 16px; }
.preview-caption { padding: 22px 0 0; }
.preview-caption h2 { font-size: 23px; }
.preview-caption .eyebrow { font-size: 9px; margin-bottom: 9px; }
.preview-caption p { font-size: 13px; color: var(--secondary); margin-bottom: 16px; }
.preview-wave { border-top: 1px solid var(--divider); display: flex; align-items: center; gap: 16px; padding-top: 16px; font-size: 12px; color: var(--secondary); }
.preview-wave > span:first-child { font-size: 26px; color: var(--ink); }
.preview-wave > span:last-child { white-space: nowrap; }
.wave-bars { display: flex; flex: 1; align-items: center; justify-content: space-between; height: 32px; gap: 3px; }
.wave-bars i { width: 3px; height: 30%; border-radius: 2px; background: #7784aa; }
.wave-bars i:nth-child(3n) { height: 90%; }.wave-bars i:nth-child(4n) { height: 65%; }.wave-bars i:nth-child(5n) { height: 45%; }
.artwork { position: relative; isolation: isolate; overflow: hidden; min-width: 0; height: 210px; background: linear-gradient(135deg, #efd6c8, #e9b89e 55%, #ca9885); border-radius: 12px; }
.art-2 { background: linear-gradient(135deg, #a9b7df, #727db4 55%, #c8b8d5); }
.art-3 { background: linear-gradient(135deg, #ecd8cc, #dba7a0 65%, #ca8e83); }
.art-4 { background: linear-gradient(135deg, #b4d6cc, #82afba 55%, #66879d); }
.art-5 { background: linear-gradient(135deg, #dfbac4, #b17e96 60%, #dfbe94); }
.art-hero { height: 265px; background: linear-gradient(135deg, #eadbd1, #d7bbad 55%, #b59488); }
.art-orbit { position: absolute; width: 290px; height: 290px; border: 1px solid #fff7; border-radius: 50%; left: -75px; top: -100px; }
.art-orbit::after { content: ""; position: absolute; inset: 22px; border: 1px solid #fff5; border-radius: 50%; }
.art-disc { position: absolute; width: 200px; height: 200px; border-radius: 50%; top: 36px; right: 12%; background: repeating-radial-gradient(circle, #303238 0, #303238 2px, #393b41 3px, #393b41 4px); box-shadow: 12px 16px 22px #17181c15; transform: rotate(-18deg); }
.art-disc span { position: absolute; inset: 33%; border-radius: 50%; background: #e8d4bd; }
.art-disc span::after { content: ""; position: absolute; inset: 42%; border-radius: 50%; background: var(--ink); }
.art-2 .art-disc span { background: #b9c3e5; }.art-4 .art-disc span { background: #bedbd5; }
.art-caption { position: absolute; z-index: 2; left: 20px; bottom: 19px; color: #24252a; font-size: 9px; letter-spacing: .15em; line-height: 1.7; font-weight: 800; background: #ffffffc7; padding: 6px 9px; border-radius: 4px; }
.art-note { position: absolute; right: 18px; top: 12px; font-size: 28px; color: #252630; }
.section { padding: 42px 0; scroll-margin-top: 24px; }
.section-heading { max-width: 700px; margin-bottom: 28px; }.section-heading p { color: var(--secondary); }
.three-grid, .two-grid, .packages, .tracks, .occasion-grid { display: grid; gap: 18px; min-width: 0; }
.card, .surface { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 20px; min-width: 0; }
.card p:last-child { margin-bottom: 0; }
.how-card { margin: 0; padding: 26px; }.how-card p { font-size: 15px; color: var(--secondary); }
.step-number { display: inline-block; font-size: 14px; letter-spacing: .06em; margin-bottom: 28px; padding-bottom: 8px; border-bottom: 3px solid var(--solar); }
.gift-section { display: grid; gap: 24px; }.occasion-grid { grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.occasion { padding: 20px 16px; background: var(--bg-alt); border-bottom: 1px solid var(--border); }
.occasion:nth-child(odd) { border-right: 1px solid var(--border); }.occasion:nth-last-child(-n+2) { border-bottom: none; }
.occasion span { font-size: 10px; color: var(--secondary); letter-spacing: .08em; }.occasion h3 { font-size: 18px; margin: 20px 0 8px; }.occasion p { color: var(--secondary); font-size: 14px; margin: 0; }
.text-link, .back-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.result-example { display: grid; gap: 30px; align-items: center; }.result-example > .artwork { height: 250px; }.result-example p { color: var(--secondary); }
.credit-explainer { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 28px; margin-top: 28px; }.credit-explainer p { max-width: 610px; color: var(--secondary); }
.faq { max-width: 800px; margin: auto; }.faq details { border-bottom: 1px solid var(--border); }.faq p { color: var(--secondary); padding: 0 0 20px; }
summary { min-height: 48px; padding: 14px 0; cursor: pointer; font-weight: 600; font-size: 15px; }
summary::marker { color: var(--secondary); }details[open] > summary { margin-bottom: 8px; }
.narrow, .wizard { max-width: 760px; margin: 28px auto; }.narrow { max-width: 520px; }.center { text-align: center; }
.start-page { display: grid; align-items: center; gap: 36px; padding: 34px 0; }.start-art { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }.start-art .artwork { height: 260px; }.start-art-caption { padding: 20px 8px 8px; font-size: 20px; font-weight: 650; line-height: 1.4; letter-spacing: -.02em; }
.stepper { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1.2fr; padding: 0 0 26px; margin: 0 0 32px; border-bottom: 1px solid var(--border); gap: 8px; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--secondary); }
.stepper li > span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; background: var(--bg-alt); border: 1px solid #b9bbc0; border-radius: 9px; font-size: 12px; }
.stepper [aria-current] { color: var(--ink); font-weight: 750; }.stepper [aria-current] > span { background: var(--solar); border-color: var(--warning); }
.step-long { display: none; }.form-stack label { font-weight: 600; font-size: 15px; display: block; margin-bottom: 8px; }
.field { margin-bottom: 24px; }.field:last-child { margin-bottom: 0; }
.form-stack input:not([type=radio]):not([type=checkbox]):not([type=hidden]), .form-stack textarea, .form-stack select, .input, .textarea, .select { display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #898d95; border-radius: var(--control-radius); background: var(--surface); color: var(--ink); font-size: 16px; }
.form-stack input:hover, .form-stack textarea:hover, .form-stack select:hover { border-color: var(--secondary); }
.form-stack [aria-invalid=true] { border-color: var(--danger)!important; background: #fffbfc!important; }
textarea { resize: vertical; line-height: 1.65; }textarea::placeholder, input::placeholder { color: var(--secondary); opacity: 1; }
.form-stack .helptext { display: block; margin-top: 8px; font-size: 13px; }.helptext ul { padding-left: 20px; }.form-stack > .card > p { margin-bottom: 22px; }
.choice-field { padding: 0; border: 0; margin: 0 0 28px; min-width: 0; }.choice-field:last-child { margin-bottom: 0; }.choice-field legend { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.choice-field > div:not(.errorlist) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice-field label { position: relative; display: flex; gap: 9px; align-items: center; overflow-wrap: anywhere; height: 100%; min-height: 52px; padding: 12px; border: 1px solid #898d95; border-radius: 12px; cursor: pointer; font-size: 14px; font-weight: 500; margin: 0; background: var(--surface); transition: background var(--transition), border-color var(--transition); }
.choice-field label:has(input:checked) { background: var(--solar-faint); border-color: var(--warning); box-shadow: inset 0 0 0 1px var(--solar); font-weight: 650; }
.choice-field label:has(input:checked)::after { content: "✓"; position: absolute; top: 2px; right: 6px; font-size: 10px; color: var(--ink); }
.choice-field label:hover { border-color: var(--ink); }.choice-field label:focus-within { outline: 3px solid var(--blue); }
input[type=radio] { accent-color: var(--ink); width: 17px; height: 17px; flex-shrink: 0; margin: 0; }
.source-tabs > div { grid-template-columns: 1fr!important; }.source-tabs label { padding: 16px; }
.privacy-note { margin-top: 14px; }.lyrics-help { display: flex; align-items: start; flex-wrap: wrap; justify-content: space-between; gap: 12px; }.lyrics-help p { margin: 0; }.character-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.advanced { padding-top: 10px; padding-bottom: 10px; }.advanced summary .muted, .developer-options summary .muted { display: block; font-size: 13px; font-weight: 400; margin-left: 20px; }.advanced[open] { padding-bottom: 24px; }.advanced .field:first-of-type { margin-top: 14px; }
.sticky-cta { position: sticky; z-index: 5; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; padding: 14px 0; background: var(--bg); border-top: 1px solid var(--border); }
.sticky-cta > button, .sticky-cta > .button { margin: 0; }.sticky-cta > .muted { display: none; }.sticky-cta > button { flex: 1; }.sticky-cta .back-link { color: var(--secondary); padding-right: 8px; }.balance-caption { font-size: 12px; color: var(--secondary); }.balance-caption strong { color: var(--ink); font-size: 14px; white-space: nowrap; }
.alert, .notice { padding: 16px 20px; border-radius: 12px; background: var(--blue-soft); color: #304993; margin: 20px 0; font-size: 14px; border: 1px solid #c8d3f3; }
.errorlist { color: #a62f3d; background: var(--danger-bg); padding: 12px 16px 12px 30px; border-radius: 10px; font-size: 14px; }
.alert.error, .notice.error { color: #a62f3d; background: var(--danger-bg); border-color: #e6b6bd; }.alert.success, .notice.success { color: #146d49; background: var(--success-bg); border-color: #abcfbf; }.alert.warning { color: var(--warning); background: var(--solar-faint); border-color: #d9c89b; }
pre { font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; font-size: 15px; }.lyrics { max-height: 280px; overflow: auto; color: var(--secondary); padding-right: 12px; }.variant { padding: 8px 0 18px; border-top: 1px solid var(--border); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }.chips span, .badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 6px; background: var(--bg-alt); color: var(--secondary); font-size: 12px; font-weight: 550; }
.review-title { display: flex; align-items: center; gap: 18px; }.review-title > .artwork { width: 80px; height: 80px; flex-shrink: 0; }.review-title .art-disc { width: 80px; height: 80px; top: 16px; right: -10px; }.review-title .art-caption, .review-title .art-note { display: none; }.review-title h2 { margin: 0; font-size: 24px; }.review-title .eyebrow { font-size: 10px; margin-bottom: 8px; }
.song-settings { display: grid; gap: 16px; margin: 26px 0; padding: 22px 0; border-block: 1px solid var(--divider); }.song-settings > div { display: flex; justify-content: space-between; gap: 16px; }.song-settings dt { color: var(--secondary); font-size: 14px; }.song-settings dd { margin: 0; font-size: 14px; font-weight: 650; }
.edit-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }.edit-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }.creation-cost { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 15px; }.creation-cost p { margin: 6px 0 0; }.cost-value { white-space: nowrap; }
.result-page { max-width: 960px; margin: 16px auto; }.result-heading { margin: 24px 0; }.status-box { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); margin: 24px 0; background: var(--surface); }.status-box p { color: var(--secondary); margin: 10px 0 0; max-width: 560px; }.status-box[data-generation-url] { text-align: center; padding: 40px 24px; }.status-box[data-generation-url] p { margin: 14px auto 0; }.status-box[data-generation-url] > strong { font-size: 14px; color: var(--secondary); }
.badge.status-completed { color: #146d49; background: var(--success-bg); }.badge.status-failed { color: #a62f3d; background: var(--danger-bg); }.badge.status-partial { color: var(--warning); background: var(--solar-faint); }.status-failed #generation-state { color: #a62f3d; }.status-completed #generation-state { color: #146d49; }
.music-loader { height: 58px; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 24px; }.music-loader i { width: 6px; height: 28px; border-radius: 4px; background: var(--ink); animation: sound 1.2s ease-in-out infinite alternate; }.music-loader i:nth-child(2) { animation-delay: -.3s; height: 42px; }.music-loader i:nth-child(3) { animation-delay: -.6s; height: 54px; background: var(--solar); }.music-loader i:nth-child(4) { animation-delay: -.9s; height: 42px; }
@keyframes sound { to { transform: scaleY(.4); } }
.track-card { background: white; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; padding: 10px; }.track-card > .artwork { height: 180px; }.track-body { padding: 20px 12px 6px; }.track-body h3 { font-size: 21px; }.track-body .eyebrow { margin-bottom: 8px; }
.audio-player { margin: 20px 0 10px; }audio { display: block; width: 100%; min-width: 0; height: 44px; }.player-controls { display: flex; gap: 14px; align-items: center; }.player-toggle { width: 48px; min-height: 48px; padding: 0; border-radius: 50%; background: var(--ink); color: white; flex-shrink: 0; }.player-toggle:hover { background: #393b42; }.player-toggle .pause-icon { display: none; }.player-toggle[aria-pressed=true] .play-icon { display: none; }.player-toggle[aria-pressed=true] .pause-icon { display: block; }
.player-timeline { flex: 1; min-width: 0; }.player-seek { width: 100%; min-height: 44px; margin: 0; accent-color: var(--blue); cursor: pointer; }.player-times { display: flex; justify-content: space-between; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--secondary); line-height: 1; }.player-error { color: #a62f3d; font-size: 13px; margin: 12px 0; }.track-actions, .result-footer, .library-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.download-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; font-size: 14px; }.download-link .icon { width: 18px; height: 18px; }
.overflow { position: relative; flex-shrink: 0; }.overflow > summary { list-style: none; width: 44px; height: 44px; min-height: 44px; display: grid; place-items: center; border-radius: 10px; padding: 0; border: 1px solid var(--border); }.overflow > summary::-webkit-details-marker { display: none; }.overflow > summary:hover { background: var(--bg-alt); }.overflow[open] > summary { margin: 0; }.overflow > form { position: absolute; z-index: 10; right: 0; bottom: 50px; width: 230px; padding: 8px 14px; background: white; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.text-button { background: transparent; color: var(--secondary); border: 0; min-height: 44px; padding: 8px 0; font-size: 14px; text-align: left; }.text-button:hover { background: transparent; text-decoration: underline; }.danger { color: #a62f3d; }.result-footer { margin-top: 28px; }
.page-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin: 20px 0 32px; }.page-heading h1, .page-heading h2 { margin: 0; }.page-heading .lead { margin: 12px 0 0; }.page-heading h2 { font-size: 24px; }.page-heading h2 a { color: var(--ink); }.library-generation .page-heading { margin-top: 0; margin-bottom: 24px; }.library-generation .track-card > .artwork { height: 150px; }.library-actions { margin-top: 20px; }
.drafts { margin-bottom: 32px; }.drafts > h2 { font-size: 20px; }.draft-row { display: flex; align-items: center; gap: 16px; border: 1px dashed #898d95; border-radius: 14px; padding: 16px; margin-bottom: 12px; background: var(--surface); }.draft-row > div { flex: 1; min-width: 0; }.draft-row h3 { font-size: 16px; margin: 8px 0 0; }.draft-row .text-link { font-size: 13px; }.empty-state { padding: 44px 24px; }.empty-state p { color: var(--secondary); }.empty-art { width: 150px; margin: 0 auto 30px; }.empty-art .artwork { height: 130px; }.empty-art .art-disc { width: 115px; height: 115px; right: -10px; top: 24px; }.empty-art .art-caption { display: none; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 28px 0; }
.credits-page { max-width: 1000px; margin: 28px auto; }.wallet { display: grid; gap: 26px; padding: 30px; margin: 30px 0 40px; }.wallet-number { font-size: 64px; font-weight: 750; letter-spacing: -.055em; line-height: 1.2; display: block; }.wallet-number small { font-size: 16px; color: var(--secondary); }.wallet-description h2 { font-size: 22px; }.wallet-description p { font-size: 15px; color: var(--secondary); }.packages { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }.package { padding: 20px 16px; margin: 0; }.package h3 { font-size: 36px; margin: 22px 0 0; }.package p { color: var(--secondary); font-size: 14px; }.package button { width: 100%; font-size: 13px; padding: 10px 6px; }.developer-options { margin-bottom: 36px; }.developer-options form { border-top: 1px solid var(--divider); padding-top: 14px; }.developer-options form p { font-size: 13px; }.ledger-row { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }.ledger-row:first-child { padding-top: 0; }.ledger-row:last-child { border: 0; padding-bottom: 0; }.ledger-row > strong { white-space: nowrap; }.positive { color: #146d49; }
.profile-page h2 { overflow-wrap: anywhere; }.avatar { display: grid; place-items: center; width: 64px; height: 64px; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 20px; margin-bottom: 24px; }.avatar .icon { width: 30px; height: 30px; }.profile-balance { border-block: 1px solid var(--divider); padding: 20px 0; margin: 24px 0; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.auth-layout { max-width: 1060px; margin: 30px auto; display: grid; gap: 60px; }.auth-story { display: none; }.auth-form { max-width: 480px; width: 100%; margin: auto; }.auth-form > p { color: var(--secondary); }.auth-form .card { padding: 24px; }.auth-switch { font-size: 14px; text-align: center; }.auth-story h2 { font-size: 40px; line-height: 1.2; }.auth-story .artwork { margin-top: 36px; height: 280px; max-width: 350px; }
.full-width { width: 100%; }.spaced { margin-top: 20px; }.skip { position: absolute; top: -100px; }.skip:focus { top: 0; left: 12px; background: white; padding: 12px; z-index: 30; }[hidden] { display: none!important; }
@media (min-width: 600px) {
  .container { padding-inline: 28px; }.site-header { padding-inline: 28px; }.two-grid, .tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-tabs > div { grid-template-columns: 1fr 1fr!important; }.step-long { display: inline; }.stepper li { font-size: 14px; }.stepper li > span { width: 32px; height: 32px; }
  .sticky-cta > button { flex: 0 1 auto; min-width: 230px; }.sticky-cta > .muted { display: block; }.song-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }.song-settings > div { display: block; }.song-settings dd { margin-top: 6px; }
  .card { padding: 30px; }.track-card { padding: 10px; }.footer { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }.packages { grid-template-columns: repeat(4, minmax(0, 1fr)); }.package { padding: 20px 14px; }
}
@media (min-width: 900px) {
  .signed-in { padding-bottom: 0; }.bottom-nav { display: none; }.desktop-nav { display: flex; align-items: center; gap: 4px; }.desktop-nav a { display: inline-flex; align-items: center; gap: 7px; color: var(--secondary); font-size: 14px; padding: 10px 12px; min-height: 44px; border-radius: 10px; }.desktop-nav .icon { width: 18px; height: 18px; }.desktop-nav a[aria-current] { color: var(--ink); background: var(--solar); text-decoration: none; }.desktop-nav a:not([aria-current]):hover { text-decoration: none; background: var(--bg-alt); }
  .site-header { padding-block: 24px; }.hero { grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: center; padding: 52px 0 60px; }.hero-preview { padding: 22px; }.hero-secondary { margin-left: 18px; }.hero-note { margin-top: 24px; }.hero .eyebrow { font-size: 11px; }
  .section { padding-block: 56px; }.three-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.gift-section { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }.occasion { padding: 26px; }.result-example { grid-template-columns: .85fr 1.15fr; gap: 70px; }.result-example > .artwork { height: 290px; }.result-example .art-disc { width: 280px; height: 280px; }.credit-explainer { padding: 36px; }
  .wizard { margin-top: 40px; }.sticky-cta { bottom: 0; }.start-page { grid-template-columns: 1.3fr 1fr; gap: 72px; max-width: 1040px; margin: 20px auto; padding-block: 60px; }.start-art .artwork { height: 300px; }
  .wallet { grid-template-columns: .8fr 1.2fr; align-items: center; gap: 48px; padding: 36px; }.wallet-description { border-left: 1px solid var(--border); padding-left: 40px; }
  .auth-layout { grid-template-columns: 1fr 1.1fr; align-items: start; margin-block: 50px; }.auth-story { display: block; padding-top: 30px; }
}
@media (max-width: 389px) {
  .site-header, .container { padding-inline: 16px; }.brand { font-size: 15px; gap: 8px; }.balance-pill { padding: 10px; }.hero-secondary { margin-left: 0; display: flex; }.card { padding: 20px; }.track-card { padding: 8px; }.track-body { padding-inline: 8px; }.review-cta button { font-size: 14px; padding-inline: 14px; }.draft-row { gap: 10px; padding: 12px; }.draft-row .text-link { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } }

/* Product polish: keep generated audio honest and the creation flow compact. */
.sound-accent { display: flex; align-items: center; gap: 8px; width: 106px; height: 42px; padding: 0 10px; border-radius: 10px; background: var(--bg-alt); border-left: 4px solid #d99f85; flex-shrink: 0; }
.sound-accent-2 { border-left-color: #7888c5; }.sound-icon { color: var(--ink); font-size: 20px; line-height: 1; }.sound-wave { display: flex; align-items: center; gap: 3px; height: 22px; }.sound-wave i { display: block; width: 3px; height: 9px; border-radius: 3px; background: #a5a9b4; }.sound-wave i:nth-child(2n) { height: 17px; }.sound-wave i:nth-child(3n) { height: 12px; }.sound-accent-2 .sound-wave i { background: #7784aa; }
.track-title-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.track-title-row h3 { margin-bottom: 0; }.track-card { padding: 20px; }.track-body { padding: 0; }.track-card .audio-player { margin-top: 16px; }.library-generation .track-card > .artwork { height: auto; }.library-generation .track-card { padding: 16px; }
.review-sound-mark, .empty-sound-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--solar-faint); color: var(--ink); font-size: 30px; flex-shrink: 0; }.empty-sound-mark { margin: 0 auto 24px; }
.compact-field { position: relative; }.field-note { display: block; margin-top: -16px; color: var(--secondary); font-size: 12px; }.lyrics-card { margin-top: 0; }.lyrics-card textarea { min-height: 190px; }.lyrics-help { padding-top: 4px; }.lyrics-help code { padding: 2px 5px; border-radius: 4px; background: var(--bg-alt); color: var(--ink); font-size: 12px; }
.lyrics-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }.toolbar-button { min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--secondary); font-size: 12px; font-weight: 600; }.toolbar-button:hover, .toolbar-button:focus-visible { background: var(--solar-faint); border-color: var(--warning); color: var(--ink); }.stress-note { margin: -6px 0 12px; font-size: 12px; line-height: 1.45; }
.text-input-card, .lyrics-card { padding-block: 20px; }.text-input-card .field { margin-bottom: 18px; }.text-input-card .choice-field { margin-bottom: 20px; }.privacy-note { margin-bottom: 0; }
.compact-settings { padding-block: 22px; }.compact-settings .choice-field { margin-bottom: 22px; }.compact-settings .mood-field { margin-bottom: 20px; }.compact-settings .mood-field > div:not(.errorlist) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.compact-settings .mood-field label { min-height: 42px; padding: 8px 10px; font-size: 13px; }.compact-settings .choice-field label { min-height: 46px; padding-block: 9px; }.compact-settings .choice-field:last-child { margin-bottom: 0; }
.advanced { margin-top: 12px; }.advanced summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.advanced summary .muted { margin-left: auto; }
.nav-create-form, .inline-create-form { display: inline-flex; margin: 0; }.nav-create-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--secondary); font-size: 14px; font-weight: 500; cursor: pointer; }.nav-create-button:hover, .nav-create-button[aria-current="page"] { background: var(--bg-alt); color: var(--ink); text-decoration: none; }.nav-create-button[aria-current="page"] {}.bottom-nav .nav-create-form { display: block; }.bottom-nav .nav-create-button { flex-direction: column; gap: 4px; width: 100%; min-height: 52px; padding: 0; font-size: 12px; }.text-link-button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }.text-link-button:hover { background: transparent; text-decoration: underline; }.result-footer .inline-create-form { display: inline-flex; }
.step1-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border); }.step1-actions > button { min-width: 230px; }.step1-actions > .muted { margin-right: auto; }
.draft-row { border-style: solid; padding: 11px 14px; min-height: 62px; }.draft-row h3 { margin: 3px 0 0; }.draft-row .badge { padding-block: 3px; font-size: 11px; }
.library-generation { padding: 22px; }.library-generation .tracks { gap: 12px; }.library-generation .page-heading { margin-bottom: 16px; }.library-generation .library-actions { margin-top: 12px; }
.library-tools { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; }.search-field { display: flex; align-items: center; gap: 8px; flex: 1; min-height: 46px; padding: 0 12px; border: 1px solid #898d95; border-radius: 10px; background: var(--surface); color: var(--secondary); }.search-field input { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; color: var(--ink); }.sort-field select { min-height: 46px; padding: 0 10px; border: 1px solid #898d95; border-radius: 10px; background: var(--surface); color: var(--ink); }.library-tools .button { display: none; }.library-row { display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 14px 16px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }.library-sound-tile { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; background: var(--bg-alt); color: var(--ink); font-size: 20px; }.library-sound-tile span { position: absolute; bottom: 7px; left: 9px; width: 26px; height: 2px; background: var(--solar); }.library-main { min-width: 0; flex: 1; }.library-main h2 { margin: 0 0 4px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.library-main h2 a { color: var(--ink); }.library-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--secondary); font-size: 12px; }.library-meta .badge { padding: 2px 7px; }.library-row-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--ink); }.icon-button:hover { background: var(--solar-faint); border-color: var(--warning); }.library-row audio { display: none; }.open-button { min-width: 88px; }.library-row .overflow > form { position: static; padding: 0; border: 0; box-shadow: none; width: auto; }.library-row .overflow-popover { position: absolute; right: 0; bottom: 50px; z-index: 10; display: flex; flex-direction: column; gap: 2px; width: 200px; padding: 7px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); }.overflow-popover > a, .overflow-popover > form .text-button { display: flex; align-items: center; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: 13px; text-decoration: none; }.overflow-popover > a:hover, .overflow-popover > form .text-button:hover { background: var(--bg-alt); text-decoration: none; }.menu-divider { height: 1px; margin: 5px 4px; background: var(--divider); }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }.required-mark { color: var(--secondary); font-weight: 500; }.step1-actions { position: static; }
@media (min-width: 600px) { .text-input-card, .lyrics-card { padding-block: 22px; }.lyrics-card textarea { min-height: 190px; max-height: 320px; }.compact-settings { padding: 24px; }.compact-settings .choice-field { margin-bottom: 18px; }.compact-settings .mood-field > div:not(.errorlist) { grid-template-columns: repeat(4, minmax(0, 1fr)); }.track-card { padding: 20px; } }
@media (max-width: 599px) { .sticky-cta { margin-top: 14px; }.sticky-cta > button { min-height: 50px; }.compact-settings .mood-field > div:not(.errorlist) { grid-template-columns: repeat(2, minmax(0, 1fr)); }.sound-accent { width: 90px; }.track-card { padding: 16px; }.track-title-row { align-items: flex-start; }.track-title-row .eyebrow { margin-bottom: 4px; }.track-title-row h3 { font-size: 18px; }.review-sound-mark { width: 56px; height: 56px; }.lyrics-card textarea { min-height: 170px; }.lyrics-toolbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }.toolbar-button { flex: 0 0 auto; } }
@media (max-width: 599px) { .step1-actions { display: block; }.step1-actions > .muted { display: block; margin: 0 0 8px; }.step1-actions > button { width: 100%; min-height: 52px; } }
@media (max-width: 599px) { .library-tools { flex-wrap: wrap; }.search-field { flex-basis: 100%; }.library-tools .button { display: inline-flex; flex: 1; }.sort-field { flex: 1; }.sort-field select { width: 100%; }.library-row { min-height: 88px; padding: 12px; gap: 10px; }.library-row-actions { gap: 4px; }.open-button { display: none; }.library-main h2 { font-size: 14px; }.library-meta { gap: 5px; font-size: 11px; }.library-row .overflow-popover { right: -4px; bottom: 48px; width: min(200px, calc(100vw - 32px)); } }
.library-main h2 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-note { margin-top: 6px; line-height: 1.4; }
[data-auto-stress] { white-space: nowrap; }

/* Story creation: quiet surfaces, compact navigation, one primary action. */
.site-header { min-height: 60px; padding-block: 10px; }
.balance-pill { padding: 8px 12px; min-height: 44px; text-decoration: none !important; }

.wizard { margin-top: 16px; }
.stepper { padding-bottom: 14px; margin-bottom: 28px; }
.stepper li { font-size: 13px; }
.stepper li > span { width: 28px; height: 28px; }
.stepper .step-complete > span { background: var(--bg-alt); border-color: var(--secondary); }
.story-field textarea { min-height: 230px; height: 230px; max-height: 420px; resize: vertical; }
.story-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.story-actions > button { min-height: 50px; }
.story-actions .button-primary { background: #F4C542; color: #17181C; }
.story-actions .button-primary:hover { background: #E6B62F; }
.voice-button { border-color: #D9D9D3; background: var(--surface); color: var(--ink); }
.voice-button:hover { background: var(--bg-alt); }
.voice-button.is-recording { border-color: var(--danger); color: #a62f3d; background: #FCEDEF; }
.voice-feedback { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; font-size: 14px; }
[data-voice-timer] { color: var(--secondary); font-variant-numeric: tabular-nums; }
.voice-note { margin-top: 8px; }
.recording-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: recording-pulse 1.5s ease-in-out infinite; }
@keyframes recording-pulse { 50% { box-shadow: 0 0 0 5px #c83e4d18; } }
.lyrics-loading { display: flex; gap: 20px; align-items: center; padding: 22px 0; }
.lyrics-loading h2 { font-size: 23px; margin: 0 0 8px; }
.lyrics-loading p { margin: 0; }
.story-wave { display: flex; align-items: center; gap: 5px; height: 44px; flex-shrink: 0; }
.story-wave i { display: block; width: 5px; height: 26px; border-radius: 4px; background: var(--solar); animation: story-sound 1.1s ease-in-out infinite alternate; }
.story-wave i:nth-child(2n) { animation-delay: -.5s; height: 40px; }
.story-wave i:nth-child(3n) { animation-delay: -.8s; }
@keyframes story-sound { to { transform: scaleY(.35); } }
#lyrics-results { scroll-margin-top: 24px; }
#lyrics-state { color: var(--secondary); font-size: 14px; }
#lyrics-state.has-error { color: var(--danger); }
.lyrics-variants { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.variant-card { min-width: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 18px; display: flex; flex-direction: column; transition: border-color .2s, background .2s; }
.variant-number { font-size: 13px; color: var(--secondary); }
.variant-card h3 { margin: 8px 0 12px; font-size: 20px; overflow-wrap: anywhere; }
.variant-preview { font-size: 14px; line-height: 1.65; margin: 0 0 16px; max-height: 185px; overflow: hidden; mask-image: linear-gradient(#000 75%, transparent); }
.variant-card.is-expanded .variant-preview { max-height: none; mask-image: none; }
.variant-actions { margin-top: auto; display: grid; gap: 8px; }
.variant-actions button { min-height: 44px; font-size: 14px; padding: 10px; }
.variant-card.is-selected { border: 2px solid #B5891C; padding: 17px; background: #FFFAE9; }
.lyrics-variants:not(:empty) { animation: variants-in .22s ease-out; }
@keyframes variants-in { from { opacity: .2; transform: translateY(4px); } }
@media (min-width: 768px) {
  .site-header { min-height: 68px; }
  .story-field textarea { min-height: 270px; height: 270px; }
  .story-actions { flex-direction: row; align-items: center; }
  .story-actions [value=lyrics] { margin-left: auto; }
  .lyrics-variants { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  .recording-dot, .story-wave i, .lyrics-variants:not(:empty) { animation: none; }
}
.wizard-story > h1 { margin-top: 0; font-size: clamp(30px, 4vw, 38px); }
.wizard-story > .lead { margin-bottom: 24px; }