/* VoiceSoul identity: warm white surfaces and soft lavender buttons. */
.architecture-section { padding-block: 76px 12px; }
.architecture-heading { text-align: center; margin-bottom: 36px; }
.architecture-heading .eyebrow { margin-bottom: 12px; color: #8c8798; }
.architecture-heading h2 { font-size: 31px; }
.architecture-heading > p:last-child { margin: 13px 0 0; font-size: 13px; color: #7e8288; }
.architecture-core { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.architecture-card { background: #fff; border: 1px solid #e4e5e2; border-radius: 17px; text-align: center; }
.architecture-main { position: relative; padding: 38px 24px 27px; overflow: hidden; box-shadow: 0 10px 26px -15px #252b3b16; }
.architecture-badge { position: absolute; top: 16px; right: 16px; background: #f1f2ef; color: #777b81; border: 1px solid #e9eae6; border-radius: 5px; padding: 3px 8px; font-size: 9px; letter-spacing: .5px; }
.architecture-symbol { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; background: #f5f4f7; border: 1px solid #edebf1; border-radius: 24px; margin-bottom: 21px; color: #938aa7; }
.architecture-symbol > .icon { width: 45px; height: 45px; stroke-width: 1.25; }
.architecture-code { color: #aaa6b0; font-size: 8px; letter-spacing: 1.7px; margin: 0 0 7px; }
.architecture-main h3 { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.3px; }
.architecture-main > p:last-of-type { margin: 13px 0 0; font-size: 12px; color: #82858b; }
.architecture-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-top: 1px solid #efefeb; margin-top: 25px; padding-top: 17px; }
.architecture-tags > span { color: #96949c; font-size: 9px; padding: 3px 8px; background: #f7f7f4; border-radius: 4px; }
.architecture-stack { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.architecture-stack > .architecture-card { padding: 25px 14px 23px; }
.architecture-stack > .architecture-card > .icon { width: 29px; height: 29px; margin-bottom: 13px; color: #9a94a5; stroke-width: 1.3; }
.architecture-stack h3 { margin: 0 0 7px; font-size: 14px; font-weight: 500; }
.architecture-stack p { margin: 0; font-size: 11px; color: #95969b; }
@media(max-width:760px) {
  .nav-wrap { gap: 15px; }
  .nav-wrap nav { gap: 14px; margin-right: 0; }
  .nav-link { font-size: 12px; }
  .architecture-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
  .architecture-core { gap: 14px; }
}
@media(max-width:600px) {
  .architecture-section { padding-block: 44px 4px; }
  .architecture-heading { margin-bottom: 25px; }
  .architecture-heading h2 { font-size: 25px; }
  .architecture-heading > p:last-child { font-size: 11px; line-height: 1.9; margin-top: 10px; }
  .architecture-core { grid-template-columns: 1fr; }
  .architecture-main { padding: 32px 20px 22px; }
  .architecture-main h3 { font-size: 20px; }
  .architecture-main > p:last-of-type { font-size: 11px; }
  .architecture-symbol { width: 72px; height: 72px; border-radius: 21px; margin-bottom: 17px; }
  .architecture-symbol > .icon { width: 36px; height: 36px; }
  .architecture-stack > .architecture-card { padding: 23px 10px; }
  .architecture-stack h3 { font-size: 13px; }
  .architecture-stack p { font-size: 10px; }
}

/* Brighten the small feature labels and studio library icons. */
.feature-card p { color: #77718f; }
.feature-bottom { color: #75659f; border-color: #e3def1; }
.voice-result { color: #6e58b7; background: #ece8fb; }
.mini-wave > i { background: #907bd5; }
.words-visual { color: #637ca9; }
.words-visual > span { text-decoration-color: #aebbd5; }
.words-visual > .icon { color: #718bc0; }
.words-visual strong { color: #6e58b7; border-color: #a798d4; }
.mixer-visual > div { color: #765fba; }
.mixer-visual i { background: #e5def5; }
.mixer-visual i::before { background: #9a83d0; }
.mixer-visual i::after { background: #8067c2; }
.cover-one { color: #fff; background: linear-gradient(135deg, #6f5bc2, #a38ee4); }
.cover-two { color: #fff; background: linear-gradient(135deg, #5687c8, #86b5e6); }
.cover-three { color: #fff; background: linear-gradient(135deg, #a264bd, #d39ad8); }
.mock-song.selected { border-color: #8d78d1; background: #302b49; }
.mock-song small, .mock-track-row small { color: #aeb8d0; }
.studio-sidebar > p { color: #d9dff0; }
.mock-search { color: #9eadd0; }
.sidebar-bottom { color: #8b96b2; }
.playing-bars { color: #c4b5f2; }
.footer-bottom > a { color: inherit; text-underline-offset: 3px; }
.footer-bottom > a:hover, .footer-bottom > a:focus-visible { color: var(--accent); text-decoration: underline; }

/* Restored original mist-lavender palette. */
:root {
  --paper: #f7f8fc;
  --cream: #eff0f9;
  --ink: #25263e;
  --muted: #75788f;
  --accent: #7864cc;
  --accent-dark: #6451b3;
  --gold: var(--accent);
  --gold-dark: var(--accent-dark);
  --line: #e3e5f1;
}
::selection { background: #ded7f5; color: #302353; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline-color: #aa9bdf; }
.site-header { background: #f7f8fcf0; border-color: #e4e6f2; }
.brand-name { color: #303149; }
.nav-link { color: #777a90; }
.button-primary { background: #7864cc; border-color: #7864cc; color: #fff; box-shadow: 0 7px 20px #7864cc1c; }
.button-primary:hover { background: #6451b3; border-color: #6451b3; box-shadow: 0 10px 26px #7864cc30; }
.button-outline { border-color: #dcddec; color: #64637d; }
.button-outline:hover { background: #ece9f7; }
.text-link { color: #686281; }
.hero { background: #f0f1fa; border-color: #e2e5f2; }
.hero-grain { background: radial-gradient(ellipse at 83% 35%, #d6cdf17a, transparent 51%), radial-gradient(ellipse at 3% 10%, #e0eaf87a, transparent 46%); }
.hero-grid { display: block; position: absolute; inset: 0 0 0 40%; z-index: -1; background-image: radial-gradient(#b4aed354 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 65%); }
.hero-copy .eyebrow { color: #81789c; }
.hero-copy h1 span::after { content: ''; position: absolute; left: 0; right: 0; height: 6px; bottom: -3px; background: #c7b9ec; border-radius: 5px; }
.hero-description { color: #797d96; }
.live-dot, .tiny-dot { background: #8f7fca; }
.platform-note { color: #9092a8; }
.hero-tags { color: #8c83a5; }
.hero-tags > span { border-color: #dbd8ec; background: #ffffff60; }
.scene-label { color: #9a90b4; }
.scene-label > i { background: #c9c3e0; }
.studio-preview { border: 5px solid #fff; box-shadow: 0 22px 55px -15px #56517a35, 0 1px 3px #45406814; }
.window-controls i:last-child { background: #a493d8; border-color: #a493d8; }
.scene-caption { color: #9991ad; }
.scene-status { background: #a596c5; }
.scroll-cue { color: #9e98b2; }
.scroll-cue > span { border-color: #b3aaca; }
.scroll-cue > span::before { background: #b3aaca; }
.feature-card { border-color: #e1e3f0; box-shadow: 0 3px 12px #68608004; }
.feature-card:hover { box-shadow: 0 16px 32px -12px #73629a22; }
.feature-icon { background: #efecfa; }
.feature-card:nth-child(2) .feature-icon { background: #eaf2fb; color: #7293b9; }
.feature-card:nth-child(3) .feature-icon { background: #eeeaf6; color: #9c82ac; }
.feature-visual { background: #f5f5fb; }
.feature-card:nth-child(2) .feature-visual { background: #f0f5fa; }
.feature-card:nth-child(3) .feature-visual { background: #f5f1f8; }
.guide-section { background: #fff; border-color: #e9eaf4; }
.guide-copy > .text-link { color: #8174a5; }
.steps li, .steps li:first-child, .steps li:last-child { border-top-color: #dad6ea; }
.step-index { color: #8c7fae; }
.steps p { color: #9193a6; }
.download-panel { background: #34314e; border-color: #45415f; color: #f4f1ff; }
.download-panel > .button { background: #a99ae1; border-color: #a99ae1; color: #252039; }
.download-panel > .button:hover { background: #bbadee; border-color: #bbadee; }
.site-footer { background: #eff0f7; border-color: #e2e3ee; }
.modal { background: #fcfbff; border-color: #e0daef; }
.auth-tabs { background: #efedf7; }
.auth-tabs > button[aria-selected=true] { color: #8f7abe; }
.account-stats > div { background: #f0edf8; border-color: #e6dff2; }
.toast { color: #f5f0ff; background: #423653; }

/* Keep the architecture block in the same visual language. */
.architecture-card { border-color: #e1e3f0; }
.architecture-main { box-shadow: 0 10px 26px -15px #56517a22; }
.architecture-badge { background: #efedf7; color: #81789c; border-color: #e1dcef; }
.architecture-symbol { background: #efecfa; border-color: #e2dcef; color: #8f7fca; }
.architecture-code { color: #9c92b7; }
.architecture-main > p:last-of-type, .architecture-stack p { color: #8789a0; }
.architecture-tags { border-top-color: #ece8f4; }
.architecture-tags > span { color: #8d82a8; background: #f5f1fb; }
.architecture-stack > .architecture-card > .icon { color: #9183bd; }
:root {
  --paper: #faf9f6;
  --cream: #f1ede7;
  --ink: #262a30;
  --muted: #71767e;
  --accent: #c6b7e2;
  --accent-dark: #b8a5d8;
  --gold: #81708f;
  --gold-dark: #6c5b7b;
  --line: #e3e5e1;
  --radius: 17px;
}
::selection { background: #e4dbef; color: #342b48; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline-color: #a492bf; }
.site-header { background: #faf9f6f2; border-color: #e7e6e4; }
.brand-name { color: #262a30; }
.nav-link { color: #73777e; }
.button { border-radius: 10px; }
.button-primary { background: var(--accent); border-color: var(--accent); color: #342b48; box-shadow: 0 7px 20px #9682b51c; }
.button-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 10px 26px #9682b530; }
.button-outline { border-color: #dfdedc; color: #666563; }
.button-outline:hover { background: #ecebe9; }
.text-link { color: #676664; }

.hero { background: #f5f2ec; border-color: #e6e5e3; }
.hero-grain { background: none; }
.hero-grid { display: none; }
.hero-inner { grid-template-columns: .95fr 1.2fr; gap: 64px; min-height: 680px; padding-block: 94px 100px; }
.hero-copy .eyebrow { color: #80848a; font-size: 10px; letter-spacing: 1.7px; }
.hero-copy h1 { font-size: clamp(44px, 4.15vw, 60px); line-height: 1.38; letter-spacing: -1.8px; }
.hero-copy h1 span { position: relative; }
.hero-copy h1 span::after { content: none; }
.hero-description { color: #71767e; font-size: 15px; }
.live-dot, .tiny-dot { background: #9b92b4; }
.platform-note { color: #888c91; }
.hero-tags { gap: 8px; margin-top: 29px; font-size: 10px; color: #73787e; }
.hero-tags > span { padding: 5px 10px; border: 1px solid #dbdad8; border-radius: 6px; background: #fffffd60; }
.hero-tags i { display: none; }
.scene-label { display: flex; align-items: center; gap: 12px; color: #969593; margin: 0 3px 14px; font-size: 8px; letter-spacing: 1.8px; }
.scene-label > i { flex: 1; height: 1px; background: #c7c6c4; opacity: .7; }
.scene-label > span:last-child { font-size: 9px; letter-spacing: .9px; }
.studio-preview { transform: none; border: 1px solid #35404d; border-radius: 13px; box-shadow: 0 20px 50px -22px #252b3b38, 0 2px 5px #252b3b0d; }
.window-controls i:last-child { background: #9d9c9a; border-color: #9d9c9a; }
.scene-caption { margin-top: 15px; justify-content: flex-start; gap: 6px; padding-inline: 5px; font-size: 8px; color: #969593; letter-spacing: .4px; }
.scene-status { width: 4px; height: 4px; background: #9e9d9b; border-radius: 50%; }
.scene-caption > span:last-child { margin-left: auto; font-size: 7px; letter-spacing: 2px; color: #a6a5a3; }
.scroll-cue { color: #9c9b99; }
.scroll-cue > span { border-color: #afaeac; }
.scroll-cue > span::before { background: #afaeac; }
.cover-one { background: linear-gradient(135deg, #575654, #999896); color: #e7e6e4; }
.cover-two { background: linear-gradient(135deg, #636260, #abaaa8); color: #f0efed; }
.cover-three { background: linear-gradient(135deg, #5e5d5b, #999896); color: #eeedeb; }

.feature-section { padding-block: 78px; }
.section-heading .eyebrow { letter-spacing: 2px; }
.feature-card { border-color: #e5e4e2; background: #fff; box-shadow: 0 3px 12px #65646204; }
.feature-card:hover { box-shadow: 0 16px 32px -12px #6b6a6822; }
.feature-icon { background: #f0f1ed; color: #77777c; border-radius: 12px; }
.feature-card:nth-child(2) .feature-icon { background: #f0f1ed; color: #77777c; }
.feature-card:nth-child(3) .feature-icon { background: #f0f1ed; color: #77777c; }
.feature-number { color: #b9b8b6; font-family: 'Segoe UI', sans-serif; font-size: 13px; font-style: normal; letter-spacing: 1px; }
.feature-visual { background: #f6f5f3; }
.feature-card:nth-child(2) .feature-visual { background: #f5f4f2; }
.feature-card:nth-child(3) .feature-visual { background: #f3f2f0; }
.voice-visual, .voice-visual > .icon { color: #9f9e9c; }
.voice-result { color: #7c7b79; background: #e7e6e4; }
.mini-wave > i { background: #a3a2a0; }
.words-visual { color: #acaba9; }
.words-visual > span { text-decoration-color: #cac9c7; }
.words-visual > .icon { color: #acaba9; }
.words-visual strong { color: #8e8d8b; border-color: #bab9b7; }
.mixer-visual > div { color: #91908e; }
.mixer-visual i { background: #e1e0de; }
.mixer-visual i::before { background: #abaaa8; }
.mixer-visual i::after { background: #92918f; }
.feature-bottom { color: #969593; border-color: #efeeec; }

.guide-section { background: #fff; border-color: #ecebe9; padding-block: 62px; }
.guide-inner { display: block; }
.guide-copy { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.guide-copy > .eyebrow { grid-column: 1 / -1; margin-bottom: 13px; }
.guide-copy h2 { font-size: 28px; }
.guide-copy h2 br { display: none; }
.guide-copy > p:not(.eyebrow) { grid-column: 1; margin: 10px 0 0; font-size: 12px; }
.guide-copy > p:not(.eyebrow) br { display: none; }
.guide-copy > .text-link { grid-column: 2; grid-row: 2 / 4; color: #7b7a78; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 40px; }
.steps li, .steps li:first-child, .steps li:last-child { position: relative; display: block; padding: 21px 0 0; border: 0; border-top: 1px solid #d9d8d6; }
.step-index { font-family: 'Segoe UI', sans-serif; font-style: normal; font-size: 11px; color: #868583; display: inline-block; margin-bottom: 20px; }
.steps h3 { font-size: 15px; }
.steps p { font-size: 11px; color: #959492; }
.steps li > .icon { position: absolute; top: 20px; right: 3px; width: 18px; height: 18px; color: #b4b3b1; }

.download-section { padding-block: 65px; }
.download-panel { background: #30343b; border-color: #3a3e45; color: #f7f7f4; padding-block: 38px; border-radius: 18px; }
.download-copy > .eyebrow { color: #a8acb3; }
.download-copy > p:not(.eyebrow) { color: #b5b8bf; }
.download-note { color: #c4c7cd; }
.download-note > span { color: #a1a6ae; }
.download-panel > .button { background: var(--accent); border-color: var(--accent); color: #342b48; box-shadow: 0 6px 20px #1b1a1832; }
.download-panel > .button:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.download-emblem > img { transform: none; box-shadow: 0 12px 30px #15141250; }
.download-emblem > span { border-color: #9e9d9b2b; border-radius: 26px; transform: rotate(-12deg); }
.download-emblem > span:last-child { border-color: #9e9d9b19; border-radius: 30px; transform: rotate(12deg); }
.faq-list summary > span { color: #a3a2a0; }
.site-footer { background: #f1f0ee; border-color: #e5e4e2; }
.footer-top { border-color: #e1e0de; }
.footer-top > p { color: #949391; }
.footer-top > div { color: #797876; }
.footer-bottom { color: #9f9e9c; }
.preview-badge { color: #979694; border-color: #d6d5d3; }
.preview-badge:hover { background: #e5e4e2; }

.modal { background: #fdfdfb; border-color: #dedddb; box-shadow: 0 30px 120px #26252340; }
.modal::backdrop { background: #27262466; }
.icon-button { background: #edecea; color: #9e9d9b; }
.icon-button:hover { background: #e0dfdd; }
.modal-description, .auth-footnote, .account-note { color: #7b8086; }
.modal form > label { color: #7d7c7a; }
input, select { border-color: #dedddb; color: #444341; }
input::placeholder { color: #a9a8a6; }
.auth-tabs { background: #efeeec; }
.auth-tabs > button { color: #949391; }
.auth-tabs > button[aria-selected=true] { color: #5f566e; }
.account-avatar { background: #ecebe9; border-color: #dbdad8; color: #969593; }
.demo-notice { background: #f0efed; border-color: #dddcda; color: #8b8a88; }
.account-stats > div { background: #efeeec; border-color: #e3e2e0; }
.account-stats span, .account-detail > span { color: #82848a; }
.account-stats strong, .history-item > strong { color: #4b4654; }
.account-detail, .account-actions, .history, .admin-panel { border-color: #e6e5e3; }
.history-list, .info-modal > p:not(.eyebrow) { color: #7b8086; }
.history-item, th, td { border-color: #ebeae8; }
.history-item small, td small { color: #96999e; }
.account-actions > .plain-button { color: #85868c; }
.info-modal > p.info-note { background: #edecea; }
.table-action { color: #6b6277; border-color: #dcdbd9; }
.table-action:hover { background: #edecea; }
.license-result, code { background: #f0efed; border-color: #e1e0de; color: #665d72; }
.license-result > p, th { color: #85868c; }
.license-result pre { color: #665d72; }
.toast { color: #f7f7f4; background: #30343b; }

@media(min-width:1600px) {
  .hero-inner { min-height: 740px; padding-block: 112px; }
  .hero-copy h1 { font-size: 63px; }
}
@media(max-width:1150px) {
  .hero-inner { gap: 30px; min-height: 620px; padding-block: 78px 90px; }
  .hero-copy h1 { font-size: 46px; }
  .hero-description { font-size: 13px; }
  .steps { gap: 23px; }
}
@media(max-width:900px) {
  .hero-inner { grid-template-columns: 1fr; padding-block: 60px 74px; gap: 36px; }
  .hero-copy h1 { font-size: 49px; }
  .hero-copy h1 br { display: block; }
  .hero-description { font-size: 14px; }
  .studio-preview, .scene-label, .scene-caption { max-width: 620px; margin-inline: auto; }
  .scene-label { margin-bottom: 12px; }
  .scene-caption { margin-top: 15px; }
  .scene-label > span:last-child { font-size: 8px; }
  .hero-grid { inset: 40% 0 0; }
  .guide-copy h2 { font-size: 25px; }
  .steps p { font-size: 10px; }
  .download-panel > .button { margin-left: 114px; }
}
@media(max-width:600px) {
  .hero-inner { padding-block: 42px 60px; gap: 28px; }
  .hero-copy h1 { font-size: 40px; letter-spacing: -1.2px; }
  .hero-copy h1 span::after { content: none; }
  .hero-copy .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .hero-description { font-size: 12px; }
  .hero-tags { margin-top: 22px; font-size: 8px; }
  .hero-tags > span { padding: 3px 8px; }
  .scene-label { font-size: 6px; letter-spacing: 1px; }
  .scene-label > span:last-child { font-size: 7px; }
  .studio-preview { border-width: 3px; border-radius: 11px; }
  .scene-caption { font-size: 7px; gap: 5px; }
  .scene-caption > span:last-child { font-size: 5px; letter-spacing: 1px; }
  .feature-section { padding-block: 45px; }
  .feature-card { border-radius: 15px; }
  .guide-section { padding-block: 43px; }
  .guide-copy { display: block; }
  .guide-copy h2 { font-size: 23px; }
  .guide-copy h2 br, .guide-copy > p:not(.eyebrow) br { display: block; }
  .guide-copy > p:not(.eyebrow) { margin-block: 14px; font-size: 11px; }
  .steps { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .steps li, .steps li:first-child, .steps li:last-child { display: flex; padding: 20px 0; border-top: 1px solid #e4e3e1; }
  .step-index { margin: 0; font-size: 12px; }
  .steps li > .icon { position: static; margin-left: auto; }
  .steps h3 { font-size: 14px; }
  .steps p { font-size: 10px; }
  .download-section { padding-block: 42px; }
  .download-panel { padding-block: 30px; }
  .download-panel > .button { margin: 23px auto 0; }
  .download-copy h2 { font-size: 22px; }
}

/* Final palette override: the original mist-lavender presentation. */
:root { --paper:#f7f8fc; --cream:#eff0f9; --ink:#25263e; --muted:#75788f; --accent:#7864cc; --accent-dark:#6451b3; --gold:var(--accent); --gold-dark:var(--accent-dark); --line:#e3e5f1; }
::selection { background:#ded7f5; color:#302353; }
.site-header { background:#f7f8fcf0; border-color:#e4e6f2; }
.brand-name { color:#303149; }
.nav-link { color:#777a90; }
.button-primary { background:#7864cc; border-color:#7864cc; color:#fff; box-shadow:0 7px 20px #7864cc1c; }
.button-primary:hover { background:#6451b3; border-color:#6451b3; box-shadow:0 10px 26px #7864cc30; }
.button-outline { border-color:#dcddec; color:#64637d; }
.button-outline:hover { background:#ece9f7; }
.text-link { color:#686281; }
.hero { background:#f0f1fa; border-color:#e2e5f2; }
.hero-grain { background:radial-gradient(ellipse at 83% 35%,#d6cdf17a,transparent 51%),radial-gradient(ellipse at 3% 10%,#e0eaf87a,transparent 46%); }
.hero-grid { display:block; background-image:radial-gradient(#b4aed354 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(90deg,transparent,#000 65%); }
.hero-copy .eyebrow { color:#81789c; }
.hero-copy h1 span::after { content:''; position:absolute; left:0; right:0; height:6px; bottom:-3px; background:#c7b9ec; border-radius:5px; }
.hero-description { color:#797d96; }
.live-dot,.tiny-dot { background:#8f7fca; }
.platform-note { color:#9092a8; }
.hero-tags { color:#8c83a5; }
.hero-tags > span { border-color:#dbd8ec; background:#ffffff60; }
.scene-label { color:#9a90b4; }
.scene-label > i { background:#c9c3e0; }
.studio-preview { border:5px solid #fff; box-shadow:0 22px 55px -15px #56517a35,0 1px 3px #45406814; }
.window-controls i:last-child { background:#a493d8; border-color:#a493d8; }
.scene-caption { color:#9991ad; }
.scene-status { background:#a596c5; }
.scroll-cue { color:#9e98b2; }
.scroll-cue > span { border-color:#b3aaca; }
.scroll-cue > span::before { background:#b3aaca; }
.feature-card { border-color:#e1e3f0; box-shadow:0 3px 12px #68608004; }
.feature-card:hover { box-shadow:0 16px 32px -12px #73629a22; }
.feature-icon { background:#efecfa; }
.feature-card:nth-child(2) .feature-icon { background:#eaf2fb; color:#7293b9; }
.feature-card:nth-child(3) .feature-icon { background:#eeeaf6; color:#9c82ac; }
.feature-visual { background:#f5f5fb; }
.feature-card:nth-child(2) .feature-visual { background:#f0f5fa; }
.feature-card:nth-child(3) .feature-visual { background:#f5f1f8; }
.guide-section { background:#fff; border-color:#e9eaf4; }
.guide-copy > .text-link { color:#8174a5; }
.steps li,.steps li:first-child,.steps li:last-child { border-top-color:#dad6ea; }
.step-index { color:#8c7fae; }
.steps p { color:#9193a6; }
.download-panel { background:#34314e; border-color:#45415f; color:#f4f1ff; }
.download-panel > .button { background:#a99ae1; border-color:#a99ae1; color:#252039; }
.download-panel > .button:hover { background:#bbadee; border-color:#bbadee; }
.site-footer { background:#eff0f7; border-color:#e2e3ee; }
.modal { background:#fcfbff; border-color:#e0daef; }
.auth-tabs { background:#efedf7; }
.auth-tabs > button[aria-selected=true] { color:#8f7abe; }
.account-stats > div { background:#f0edf8; border-color:#e6dff2; }
.toast { color:#f5f0ff; background:#423653; }
.architecture-card { border-color:#e1e3f0; }
.architecture-badge { background:#efedf7; color:#81789c; border-color:#e1dcef; }
.architecture-symbol { background:#efecfa; border-color:#e2dcef; color:#8f7fca; }
.architecture-code { color:#9c92b7; }
.architecture-main > p:last-of-type,.architecture-stack p { color:#8789a0; }
.architecture-tags { border-top-color:#ece8f4; }
.architecture-tags > span { color:#8d82a8; background:#f5f1fb; }
.architecture-stack > .architecture-card > .icon { color:#9183bd; }

/* Unified light lavender system: brighter surfaces and one clear accent. */
:root {
  --paper: #f8f7fc;
  --cream: #f0eff8;
  --ink: #25263e;
  --muted: #777a90;
  --accent: #7864cc;
  --accent-dark: #6451b3;
  --gold: var(--accent);
  --gold-dark: var(--accent-dark);
  --line: #e3e5f1;
}
body { background: var(--paper); color: var(--ink); }
.site-header { background: #ffffffee; border-color: #e4e6f2; }
.brand img, .studio-brand img, .download-emblem > img, .modal-brand img { opacity: 1; filter: none; }
.brand-name { color: #303149; }
.brand-name small { color: #7864cc; }
.hero { background: #f0f1fa; }
.feature-section, .guide-section { background: #fff; }
.feature-card, .architecture-card { background: #fff; }
.download-section { background: #f8f7fc; }
.download-panel {
  background: #edeafa;
  border-color: #ddd7ef;
  color: #25263e;
  box-shadow: 0 16px 34px -24px #6f60a344;
}
.download-copy > .eyebrow { color: #7864cc; }
.download-copy > p:not(.eyebrow) { color: #55546c; }
.download-note { color: #686680; }
.download-note > span { color: #85819b; }
.download-panel > .button { background: #7864cc; border-color: #7864cc; color: #fff; box-shadow: 0 8px 20px #7864cc2e; }
.download-panel > .button:hover { background: #6451b3; border-color: #6451b3; }
.download-emblem > img { transform: none; box-shadow: 0 8px 20px #7864cc24; }
.download-emblem > span { border-color: #bdb0e855; }
.download-emblem > span:last-child { border-color: #bdb0e830; }
.site-footer { background: #f0eff8; border-color: #e2e3ee; }
.footer-top, .footer-top > div { color: #5d5b72; }
.footer-top > p, .footer-bottom { color: #85819b; }

/* Premium pass: stronger hierarchy, quieter decoration, and more deliberate spacing. */
:root {
  --paper: #f8f8fc;
  --cream: #f0eff9;
  --ink: #202239;
  --muted: #696c82;
  --accent: #765fd0;
  --accent-dark: #604bb8;
  --line: #e1e3f0;
}
body { font-size: 15px; color: var(--ink); }
.site-header { height: 82px; box-shadow: 0 1px 0 #dfe1ed80, 0 8px 28px #4b467b0a; }
.nav-wrap { max-width: 1260px; }
.brand { gap: 11px; }
.brand img { border-radius: 14px; box-shadow: 0 6px 16px #765fd02b; }
.brand-name { letter-spacing: 2px; font-weight: 700; }
.brand-name small { letter-spacing: 2.4px; }
nav { gap: 32px; }
.nav-link { color: #686b82; transition: color .2s ease; }
.nav-link:hover { color: #322b55; }
.button { border-radius: 11px; font-weight: 650; letter-spacing: .1px; }
.button-primary { background: var(--accent); border-color: var(--accent); box-shadow: 0 10px 24px #765fd02b; }
.button-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: 0 12px 28px #604bb833; }
.button-outline { border-color: #d8d9e8; background: #ffffff80; }
.hero { background: #f0f1fa; border-bottom-color: #dfe2f1; }
.hero-grain { background: radial-gradient(ellipse at 83% 35%, #d6cdf14f, transparent 53%), radial-gradient(ellipse at 3% 10%, #e0eaf84f, transparent 48%); }
.hero-grid { background-image: radial-gradient(#9f96d02c 1px, transparent 1px); }
.hero-inner { min-height: 700px; padding-block: 98px 108px; }
.hero-copy h1 { font-weight: 650; letter-spacing: -2.4px; color: #202239; }
.hero-copy h1 span { color: #765fd0; }
.hero-copy h1 span::after { background: #c5b5f2; height: 5px; }
.hero-description { color: #696c82; max-width: 430px; }
.hero-tags > span { background: #ffffff90; border-color: #d8d8e9; color: #736b96; }
.studio-preview { border-color: #fff; box-shadow: 0 28px 65px -22px #48437044, 0 4px 16px #48437018; }
.scene-label, .scene-caption { color: #8e88a8; }
.feature-section { padding-block: 92px 84px; }
.section-heading { margin-bottom: 36px; }
.section-heading h2, .guide-copy h2, .architecture-heading h2, .faq-heading h2 { color: #242640; letter-spacing: -.7px; }
.section-heading > p, .guide-copy > p:not(.eyebrow), .architecture-heading > p:last-child { color: #777a90; }
.feature-grid { gap: 20px; }
.feature-card { border-color: #e0e2ef; border-radius: 18px; box-shadow: 0 8px 22px -18px #514a7b38; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 18px 35px -20px #514a7b55; }
.feature-icon { border: 1px solid #e1dcef; color: #765fd0; }
.feature-bottom { color: #85819b; }
.guide-section { padding-block: 74px; }
.steps li, .steps li:first-child, .steps li:last-child { border-top-color: #dedced; }
.steps h3 { color: #30324d; }
.steps p { color: #7b7e93; }
.architecture-section { padding-block: 88px 16px; }
.architecture-heading { margin-bottom: 42px; }
.architecture-card { border-radius: 19px; box-shadow: 0 10px 28px -22px #514a7b36; }
.architecture-main { padding-block: 42px 30px; }
.architecture-main h3 { color: #2a2c47; font-weight: 600; }
.architecture-symbol { box-shadow: 0 8px 20px #765fd018; }
.architecture-stack { gap: 18px; }
.architecture-stack > .architecture-card { padding-block: 28px 25px; }
.download-section { padding-block: 86px 76px; }
.download-panel { background: #eeeafb; border-color: #dcd5f0; border-radius: 20px; box-shadow: 0 18px 40px -28px #514a7b55; }
.download-panel > .button { background: var(--accent); border-color: var(--accent); }
.faq-section { padding-bottom: 78px; }
.faq-list details { border-color: #e2e2ee; }
.site-footer { background: #f0eff9; }

@media(max-width:600px) {
  .site-header { height: 73px; }
  .hero-inner { padding-block: 52px 68px; }
  .feature-section { padding-block: 58px 52px; }
  .architecture-section { padding-block: 55px 8px; }
  .download-section { padding-block: 52px 48px; }
}

/* Final contrast pass for compact labels and library artwork. */
.feature-card p { color: #77718f; }
.feature-bottom { color: #75659f; border-color: #e3def1; }
.voice-result { color: #6e58b7; background: #ece8fb; }
.mini-wave > i { background: #907bd5; }
.words-visual { color: #637ca9; }
.words-visual > span { text-decoration-color: #aebbd5; }
.words-visual > .icon { color: #718bc0; }
.words-visual strong { color: #6e58b7; border-color: #a798d4; }
.mixer-visual > div { color: #765fba; }
.mixer-visual i { background: #e5def5; }
.mixer-visual i::before { background: #9a83d0; }
.mixer-visual i::after { background: #8067c2; }
.cover-one { color: #fff; background: linear-gradient(135deg, #6f5bc2, #a38ee4); }
.cover-two { color: #fff; background: linear-gradient(135deg, #5687c8, #86b5e6); }
.cover-three { color: #fff; background: linear-gradient(135deg, #a264bd, #d39ad8); }
.mock-song.selected { border-color: #8d78d1; background: #302b49; }
.mock-song small, .mock-track-row small { color: #aeb8d0; }
.studio-sidebar > p { color: #d9dff0; }
.mock-search { color: #9eadd0; }
.sidebar-bottom { color: #8b96b2; }
.playing-bars { color: #c4b5f2; }
