:root {
    color-scheme: dark;
    --ink: #f3f0e8;
    --ink-soft: #a7afbd;
    --paper: #090d12;
    --sheet: #111821;
    --surface-2: #171f2a;
    --surface-3: #1d2734;
    --rule: rgba(255, 255, 255, .12);
    --rule-strong: rgba(255, 255, 255, .2);
    --accent: #d2a05e;
    --accent-rgb: 210, 160, 94;
    --success: #6fcf97;
    --danger: #e0716b;
    --ui-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --display-font: Georgia, "Times New Roman", serif;
    --mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    --shadow: 0 20px 55px rgba(0, 0, 0, .32);
    --shadow-soft: 0 10px 28px rgba(0, 0, 0, .2);
}
* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 17px/1.55 var(--ui-font);
}

a { color: inherit; }

.page {
    width: min(70rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2.5rem 0 4rem;
}

.stave {
    height: 2.55rem;
    margin-bottom: 1.6rem;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent .5rem,
        var(--rule) .5rem,
        var(--rule) calc(.5rem + 1px)
    );
}

h1, h2 { font-weight: 400; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); letter-spacing: -.03em; }
h2 { margin: 0 0 .35rem; font-size: 1.45rem; }

.lede {
    max-width: 49rem;
    margin: .35rem 0 2rem;
    color: var(--ink-soft);
}

.tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    margin: 0 0 1.8rem;
    padding: 0;
    border-bottom: 1px solid var(--rule);
    list-style: none;
}

.tabs a {
    display: block;
    padding: .6rem .9rem .55rem;
    border-bottom: 3px solid transparent;
    color: var(--ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

.tabs a[aria-selected="true"] {
    border-color: var(--accent);
    color: var(--ink);
}

.tab-intro { margin-bottom: 1.2rem; color: var(--ink-soft); }

form { margin-bottom: 3rem; }

fieldset {
    margin: 0 0 1.4rem;
    padding: 1.15rem 0 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

legend {
    padding-right: .65rem;
    color: var(--ink-soft);
    font-size: .94rem;
    font-style: italic;
}

.fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1rem 1.25rem;
}

label { display: block; }
label > span { display: block; margin-bottom: .28rem; color: var(--ink-soft); font-size: .84rem; }

input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="file"], textarea, select {
    width: 100%;
    min-height: 2.55rem;
    padding: .48rem .58rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--sheet);
    color: var(--ink);
    font: .95rem var(--ui-font);
}

.check {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.55rem;
    padding-top: 1rem;
}

.check > span { margin: 0; color: var(--ink); font-size: .94rem; }
.check input { accent-color: var(--accent); }

.soloist-options {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem .75rem;
}
.soloist-option {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 2.35rem;
    padding: .45rem .7rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--sheet);
    cursor: pointer;
}
.soloist-option > span { margin: 0; color: var(--ink); font-size: .94rem; }
.soloist-option input { margin: 0; accent-color: var(--accent); }
.soloist-option:has(input:checked) { border-color: var(--accent); }

.hint { margin: .45rem 0 0; color: var(--ink-soft); font-size: .84rem; }

button, .downloads a {
    display: inline-block;
    padding: .62rem 1.25rem;
    border: 1px solid var(--ink);
    border-radius: 3px;
    font: .95rem var(--ui-font);
    text-decoration: none;
    cursor: pointer;
}

button { background: var(--ink); color: var(--sheet); }
.downloads a { background: transparent; color: var(--ink); }
button:hover, .downloads a:hover { background: #27334f; color: var(--sheet); }

button:disabled,
input:disabled,
select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

button.control-locked,
.downloads__disabled {
    border-color: var(--rule);
    background: var(--paper);
    color: var(--ink-soft);
}

button.control-locked:hover,
button.control-locked:disabled:hover {
    background: var(--paper);
    color: var(--ink-soft);
}

.content-control-locked {
    display: inline-block;
    padding: .62rem 1.25rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
    background: var(--paper);
    color: var(--ink-soft);
    opacity: .55;
    cursor: not-allowed;
}

.theme-choice__option.is-locked,
label.is-locked {
    color: var(--ink-soft);
    opacity: .68;
}

.theme-choice__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: .55rem 1rem;
    margin-bottom: .9rem;
}

.theme-choice__option {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    min-height: 2.55rem;
    padding: .45rem .55rem;
    border: 1px solid var(--rule);
    border-radius: 3px;
}

.theme-choice__option > span { margin: 0; color: inherit; font-size: .94rem; }
.theme-choice__option input { margin-top: .25rem; accent-color: var(--accent); }
.theme-choice__library { max-width: 34rem; }

input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.error {
    margin: 0 0 2rem;
    padding: .9rem 1.1rem;
    border-left: 3px solid var(--accent);
    background: var(--sheet);
}

.result { padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.summary { display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; color: var(--ink-soft); }
.summary strong { color: var(--ink); font-weight: 400; }
.downloads { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.35rem 0 1.8rem; }
.table-scroll { overflow-x: auto; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--sheet);
    font: .84rem var(--mono);
}

th, td { padding: .42rem .7rem; border-bottom: 1px solid #e4e7eb; text-align: left; white-space: nowrap; }
th { color: var(--ink-soft); font-family: var(--ui-font); font-style: italic; font-weight: 400; }
td:first-child { width: 3rem; color: var(--ink-soft); text-align: right; }
td.chord { font-weight: 700; }
td.scale { color: var(--accent); font: italic .9rem var(--ui-font); }

footer { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); color: var(--ink-soft); font-size: .9rem; }
code { font-family: var(--mono); font-size: .86em; }

/* Shared chrome deliberately does not change the musical tabs or score frame. */
#main-content { min-width: 0; scroll-margin-top: 1rem; }
.site-footer, .site-messages {
    width: min(70rem, calc(100% - 2rem));
    margin-inline: auto;
}
.site-footer { margin-top: 0; padding-block: 1rem 2rem; }
.site-footer p { margin: 0; }
.flash { margin: 1rem 0 0; padding: .9rem 1.1rem; border: 1px solid var(--rule); border-inline-start: .25rem solid var(--ink); background: var(--sheet); overflow-wrap: anywhere; }
.flash--success { border-inline-start-color: #356146; }
.flash--error, .flash--warning { border-inline-start-color: var(--accent); }
.page > [role="alert"], .account-page [role="alert"], .editorial-page [role="alert"] {
    padding: .9rem 1.1rem; border-inline-start: .25rem solid var(--accent); background: var(--sheet); overflow-wrap: anywhere;
}
.error ul { margin: 0; padding-inline-start: 1.2rem; }
textarea { min-height: 8rem; resize: vertical; }
input[type="file"] { max-width: 100%; }
.account-card, .subscription-plan, .danger-zone {
    margin-block: 1.5rem;
    padding: 1.25rem;
    border: 1px solid var(--rule);
    border-radius: .25rem;
    background: var(--sheet);
    overflow-wrap: anywhere;
}
dl.account-card { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, 2fr); gap: .6rem 1rem; }
.account-card dt { color: var(--ink-soft); }
.account-card dd { margin: 0; }
.account-card form { margin-bottom: 0; }
.account-page input, .editorial-page input:not([type="checkbox"]), .subscription-page select { margin-block: .35rem 1rem; }
.account-page button, .subscription-page button { max-width: 100%; white-space: normal; }
.subscription-plan { display: inline-block; margin-inline-end: .75rem; }
.danger-zone { border: 2px solid var(--accent); }
.danger-zone h2 { font-weight: 700; }
.danger-link { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
button.button-danger { border: 2px solid var(--accent); background: var(--accent); font-weight: 700; }
button.button-danger:hover { background: #802620; }
.editorial-page > form { margin-top: 1.5rem; padding: 1.25rem; border: 1px solid var(--rule); background: var(--sheet); }
.rich-content { margin-block: 1.5rem; }
.rich-content th, .rich-content td, .rich-text__surface th, .rich-text__surface td { white-space: normal; }
.rich-content td:first-child, .rich-text__surface td:first-child { width: auto; color: inherit; text-align: start; }
.rich-content a { text-underline-offset: .2em; }

@media (max-width: 42rem) {
    body { font-size: 16px; }
    .page { width: min(100% - 1.25rem, 70rem); padding-top: 1.4rem; }
    .fields { grid-template-columns: 1fr; }
    .site-footer, .site-messages { width: calc(100% - 1.25rem); }
    dl.account-card { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
    .account-card dd { margin-bottom: .8rem; }
    .subscription-plan { display: block; margin-inline-end: 0; }
    .account-card, .danger-zone, .editorial-page > form { padding: .85rem; }
}

/* Reserved side rails for possible future advertising. No ad code or tracking is loaded. */
.site-content-shell {
    min-width: 0;
}
.site-content-shell__main {
    min-width: 0;
}
.site-ad-rail {
    display: none;
}

@media (min-width: 94rem) {
    .site-content-shell {
        display: grid;
        grid-template-columns: 10rem minmax(0, 70rem) 10rem;
        justify-content: center;
        align-items: start;
        gap: 1rem;
        width: min(92rem, 100%);
        margin-inline: auto;
    }
    .site-ad-rail {
        display: block;
        width: 10rem;
        padding-top: 2.5rem;
    }
    .site-ad-frame {
        width: 10rem;
        height: 37.5rem;
        border: 1px dashed rgba(255, 255, 255, .12);
        border-radius: .35rem;
        background: rgba(255, 255, 255, .012);
    }
}

/* Sectioned song themes: Bootstrap 5 tabs + responsive source choices. */
.song-theme-tabs { margin-top: 1rem; }
.song-theme-tabs__nav-wrap { scrollbar-width: thin; }
.song-theme-tabs .nav-tabs { min-width: max-content; margin-bottom: 0; border-bottom-color: var(--rule); }
.song-theme-tabs .nav-tabs .nav-link {
    padding: .62rem .9rem .55rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: .35rem .35rem 0 0;
    background: transparent;
    color: var(--ink-soft);
    font: .95rem var(--ui-font);
}
.song-theme-tabs .nav-tabs .nav-link:hover { background: #f7f8f9; color: var(--ink); }
.song-theme-tabs .nav-tabs .nav-link.active {
    border-color: var(--rule) var(--rule) var(--sheet);
    background: var(--sheet);
    color: var(--ink);
}
.song-theme-tabs .tab-content { border-color: var(--rule) !important; background: var(--sheet) !important; }
.song-theme-tabs .theme-import { margin-top: 1rem; }
.song-theme-tabs .theme-import [data-theme-upload-panel][hidden] { display: none !important; }
.song-theme-tabs .theme-choice__options { display: flex; margin-bottom: 0; }
.song-theme-tabs .btn { white-space: normal; font-family: var(--ui-font); }
.theme-choice .theme-choice__source-btn { background: transparent; border-color: var(--rule); color: var(--ink); }
.theme-choice .theme-choice__source-btn.active {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--sheet);
}
.theme-choice .theme-choice__source-btn:hover:not(:disabled) { background: #27334f; border-color: #27334f; color: var(--sheet); }

/* Theme source selector: keep the four choices compact on desktop. */
.theme-choice__options {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: .45rem;
}
.theme-choice__options > div {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
.theme-choice .theme-choice__source-btn {
    width: auto !important;
    min-width: 7.4rem;
    min-height: 2.3rem;
    padding: .42rem .68rem;
    white-space: nowrap;
    font-size: .82rem;
}
@media (max-width: 639px) {
    .theme-choice__options > div { flex: 1 1 calc(50% - .45rem); }
    .theme-choice .theme-choice__source-btn { width: 100% !important; min-width: 0; }
}
.theme-choice .theme-choice__source-btn.disabled,
.theme-choice .theme-choice__source-btn:disabled { opacity: .55; pointer-events: none; }

@media (max-width: 42rem) {
    .song-theme-tabs .tab-content { padding: .85rem !important; }
    .song-theme-tabs .nav-tabs .nav-link { padding-inline: .7rem; }
}


.language-switch { display: flex; gap: .35rem; align-items: center; }
.language-switch__button {
    display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem;
    padding: .3rem .55rem; border: 1px solid var(--rule); border-radius: .25rem;
    background: var(--sheet); text-decoration: none; font: .84rem/1.2 var(--ui-font);
}
.language-switch__button[aria-current="true"] { border-color: var(--accent); font-weight: 700; }
.translation-editor { margin-top: 1.5rem; padding-top: 1rem; }

/* Karaoke appears only while a lyric composition is being played. */
.karaoke-panel {
    margin: -.6rem 0 1.8rem;
    border: 1px solid var(--rule);
    border-radius: .35rem;
    background: var(--sheet);
    overflow: hidden;
}
.karaoke-panel[hidden] { display: none !important; }
.karaoke-panel__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink-soft);
    font-size: .82rem;
}
.karaoke-panel__header strong { color: var(--ink); font-weight: 600; }
.karaoke-panel__lines {
    position: relative;
    height: 10.5rem;
    overflow-y: auto;
    padding: 3.7rem 1.25rem;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.karaoke-panel__section {
    margin: 1rem 0 .2rem;
    color: var(--ink-soft);
    font: .76rem var(--mono);
    text-transform: lowercase;
}
.karaoke-panel__section:first-child { margin-top: 0; }
.karaoke-panel__line {
    margin: .35rem 0;
    color: #8b91a0;
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    line-height: 1.45;
    text-align: center;
    transition: color .12s ease, transform .12s ease;
}
.karaoke-panel__line.is-current {
    color: var(--ink);
    transform: scale(1.015);
}
.karaoke-panel__syllable {
    border-radius: .18rem;
    transition: background-color .08s linear, color .08s linear;
}
.karaoke-panel__syllable.is-active {
    padding-inline: .08em;
    background: var(--accent);
    color: var(--sheet);
}

@media (max-width: 42rem) {
    .karaoke-panel__lines { height: 9rem; padding-inline: .75rem; }
}


/* --------------------------------------------------------------------------
   Studio UI — visual layer only. No musical behavior is changed here.
   -------------------------------------------------------------------------- */

body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% -8%, rgba(210, 160, 94, .12), transparent 31rem),
        radial-gradient(circle at 91% 18%, rgba(76, 113, 154, .11), transparent 34rem),
        linear-gradient(180deg, #0a0f15 0%, #090d12 58%, #080b10 100%);
    color: var(--ink);
}

::selection { background: rgba(var(--accent-rgb), .33); color: #fff; }

a { color: #d9dee8; }
a:hover { color: #fff; }

.composer-page {
    --style-glow: var(--accent-rgb);
    width: min(78rem, calc(100% - 2.25rem));
    padding-top: 1.7rem;
}

.composer-page--classical { --accent: #d5b77b; --accent-rgb: 213, 183, 123; }
.composer-page--modal { --accent: #aa8bd5; --accent-rgb: 170, 139, 213; }
.composer-page--jazz { --accent: #6fb8bd; --accent-rgb: 111, 184, 189; }
.composer-page--blues { --accent: #5ea7d7; --accent-rgb: 94, 167, 215; }
.composer-page--rock { --accent: #df7359; --accent-rgb: 223, 115, 89; }
.composer-page--metal { --accent: #db5966; --accent-rgb: 219, 89, 102; }
.composer-page--western { --accent: #c88b4a; --accent-rgb: 200, 139, 74; }
.composer-page--country { --accent: #d5a257; --accent-rgb: 213, 162, 87; }
.composer-page--dixie { --accent: #e18b5d; --accent-rgb: 225, 139, 93; }

.composer-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 22rem);
    gap: 2rem;
    align-items: end;
    margin: 0 0 1.25rem;
    padding: 2rem 2.1rem 1.8rem;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 1.1rem;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), .09), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.008)),
        #0d131b;
    box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.04);
}

.composer-hero::after {
    content: "";
    position: absolute;
    inset: auto -8rem -10rem auto;
    width: 25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .15), transparent 68%);
    pointer-events: none;
}

.composer-hero__copy { position: relative; z-index: 1; }

.composer-hero .stave {
    width: 8rem;
    height: 1.9rem;
    margin: 0 0 .7rem .15rem;
    opacity: .68;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent .34rem,
        rgba(var(--accent-rgb), .46) .34rem,
        rgba(var(--accent-rgb), .46) calc(.34rem + 1px)
    );
}

.composer-hero h1 {
    display: flex;
    align-items: center;
    gap: .72rem;
    font-family: var(--display-font);
    font-size: clamp(2.45rem, 6vw, 4.35rem);
    line-height: .98;
    letter-spacing: -.045em;
    text-shadow: 0 3px 30px rgba(0,0,0,.4);
}

.composer-logo__mark {
    display: inline-grid;
    place-items: center;
    width: 2.65rem;
    height: 2.65rem;
    flex: 0 0 2.65rem;
    border: 1px solid rgba(var(--accent-rgb), .55);
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .1);
    color: var(--accent);
    font: 1.45rem/1 var(--display-font);
    box-shadow: 0 0 28px rgba(var(--accent-rgb), .12);
}

.composer-hero .lede {
    max-width: 54rem;
    margin: .8rem 0 0;
    color: #bcc3ce;
    font-size: .98rem;
    line-height: 1.65;
}

.composer-hero__meter {
    --vu-height: 8.3rem;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: .42rem;
    height: var(--vu-height);
    padding: 0 .2rem .25rem;
    opacity: .92;
}

.composer-hero__meter span {
    --idle-level: .45;
    --level: var(--idle-level);
    width: clamp(.42rem, 1.2vw, .72rem);
    height: max(.6rem, calc((var(--vu-height) - .25rem) * var(--level)));
    min-height: .6rem;
    border-radius: .35rem .35rem .16rem .16rem;
    background: linear-gradient(180deg, #f4d495 0%, #f0c37f 18%, var(--accent) 62%, rgba(var(--accent-rgb), .35) 100%);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), .15);
    transform-origin: bottom center;
    transition: height .12s ease-out, filter .12s ease-out, opacity .12s ease-out, box-shadow .12s ease-out;
}

.composer-hero__meter.is-active span {
    filter: saturate(1.05);
    opacity: .98;
}

.composer-hero__meter.is-active span.is-peak {
    box-shadow: 0 0 22px rgba(var(--accent-rgb), .28);
}

.style-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 1rem;
    padding-top: .25rem;
    background: linear-gradient(180deg, rgba(9,13,18,.98) 74%, rgba(9,13,18,0));
    backdrop-filter: blur(10px);
}

.style-tabs {
    gap: .4rem;
    margin: 0;
    padding: .48rem;
    border: 1px solid var(--rule);
    border-radius: .85rem;
    background: rgba(17, 24, 33, .88);
    box-shadow: 0 10px 26px rgba(0,0,0,.18);
    scrollbar-width: thin;
}

.style-tabs li { flex: 0 0 auto; }
.style-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 2.65rem;
    padding: .58rem .88rem;
    border: 1px solid transparent;
    border-radius: .62rem;
    color: #aeb6c3;
    font-weight: 650;
    letter-spacing: .01em;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
.style-tabs a:hover {
    border-color: var(--rule);
    background: rgba(255,255,255,.04);
    color: #fff;
    transform: translateY(-1px);
}
.style-tabs a[aria-selected="true"] {
    border-color: rgba(var(--accent-rgb), .45);
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .18), rgba(var(--accent-rgb), .08));
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 7px 20px rgba(0,0,0,.16);
}
.style-tab__dot {
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    background: #626b79;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.025);
}
.style-tabs a[aria-selected="true"] .style-tab__dot {
    background: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .12), 0 0 14px rgba(var(--accent-rgb), .65);
}

.composer-stage {
    margin-bottom: 2rem;
    padding: 1.35rem;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.012)), var(--sheet);
    box-shadow: var(--shadow-soft), inset 0 1px rgba(255,255,255,.03);
}

.composer-stage > h2,
.composer-stage > section > h2,
.composer-form > h2 {
    color: #fff;
    font-size: clamp(1.45rem, 3vw, 1.9rem);
    font-weight: 650;
    letter-spacing: -.02em;
}

.tab-intro {
    max-width: 62rem;
    margin: .4rem 0 1.25rem;
    color: var(--ink-soft);
}

.composer-form { margin-bottom: 0; }
.composer-form fieldset,
.song-theme-tabs {
    position: relative;
    margin: 0 0 1rem;
    padding: 1.05rem 1.05rem 1.1rem;
    border: 1px solid var(--rule);
    border-radius: .78rem;
    background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.006)), #0f161f;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.composer-form fieldset:hover {
    border-color: rgba(var(--accent-rgb), .24);
}

.composer-form legend {
    float: none;
    width: auto;
    margin: 0 0 .9rem;
    padding: 0;
    color: #f1f3f6;
    font-size: .82rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .085em;
    text-transform: uppercase;
}

.fields { gap: .9rem 1rem; }
label > span { color: #9ea7b5; font-size: .78rem; font-weight: 650; letter-spacing: .018em; }

input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="file"], textarea, select {
    min-height: 2.75rem;
    padding: .55rem .7rem;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .55rem;
    background: #0a1017;
    color: #edf0f5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:hover, textarea:hover, select:hover { border-color: rgba(255,255,255,.23); }
input:focus, textarea:focus, select:focus {
    border-color: rgba(var(--accent-rgb), .75);
    background: #0c131b;
    box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .09);
}

select { color-scheme: dark; }
textarea { line-height: 1.55; }
.lyrics-editor-label textarea {
    min-height: 20rem;
    font-family: var(--mono);
    font-size: .92rem;
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb), .06), transparent 1.8rem),
        #0a1017;
}

.check,
.form-check { color: #dbe0e7; }
.check input,
.form-check-input,
.soloist-option input,
.theme-choice__option input { accent-color: var(--accent); }

.soloist-options { gap: .55rem; }
.soloist-option,
.theme-choice__option {
    min-height: 2.65rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .62rem;
    background: #0a1017;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.soloist-option:hover,
.theme-choice__option:hover { border-color: rgba(var(--accent-rgb), .35); background: #0d151e; }
.soloist-option:has(input:checked),
.theme-choice__option:has(input:checked) {
    border-color: rgba(var(--accent-rgb), .6);
    background: rgba(var(--accent-rgb), .09);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08);
}

.hint, .text-muted { color: #8f99a8 !important; }

.song-theme-tabs { margin-top: 1rem; padding: 0; overflow: hidden; }
.song-theme-tabs > h3,
.song-theme-tabs > p { margin-inline: 1rem; }
.song-theme-tabs > h3 { margin-top: 1rem; color: #eef1f4; }
.song-theme-tabs .nav-tabs {
    padding: 0 .65rem;
    border-bottom-color: var(--rule);
    background: #0c121a;
}
.song-theme-tabs .nav-tabs .nav-link {
    margin-bottom: -1px;
    color: #919baa;
    border-radius: .5rem .5rem 0 0;
}
.song-theme-tabs .nav-tabs .nav-link:hover { background: rgba(255,255,255,.035); color: #fff; }
.song-theme-tabs .nav-tabs .nav-link.active {
    border-color: rgba(var(--accent-rgb), .4) rgba(var(--accent-rgb), .4) #111821;
    background: #111821;
    color: var(--accent);
}
.song-theme-tabs .tab-content { border: 0 !important; border-top: 1px solid var(--rule) !important; background: #111821 !important; }
.theme-choice .theme-choice__source-btn {
    border-color: rgba(255,255,255,.14);
    background: #0a1017;
    color: #d7dce3;
}
.theme-choice .theme-choice__source-btn.active {
    border-color: rgba(var(--accent-rgb), .65);
    background: rgba(var(--accent-rgb), .14);
    color: #fff;
}
.theme-choice .theme-choice__source-btn:hover:not(:disabled) {
    border-color: rgba(var(--accent-rgb), .5);
    background: rgba(var(--accent-rgb), .1);
    color: #fff;
}

.compose-button {
    position: relative;
    min-height: 3.25rem;
    min-width: 11.5rem;
    margin-top: .2rem;
    padding: .8rem 1.5rem .8rem 3.1rem;
    border: 1px solid rgba(var(--accent-rgb), .75);
    border-radius: .72rem;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .98), rgba(var(--accent-rgb), .75));
    color: #0a0d11;
    font-weight: 850;
    letter-spacing: .01em;
    box-shadow: 0 10px 24px rgba(var(--accent-rgb), .18), inset 0 1px rgba(255,255,255,.26);
}
.compose-button::before {
    content: "♫";
    position: absolute;
    inset-inline-start: 1.15rem;
    top: 50%;
    translate: 0 -50%;
    font-size: 1.2rem;
}
.compose-button:hover:not(:disabled) {
    background: linear-gradient(180deg, #f0c988, var(--accent));
    color: #080b0e;
    transform: translateY(-1px);
    box-shadow: 0 14px 30px rgba(var(--accent-rgb), .23);
}

button,
.downloads a,
.content-control-locked {
    border-radius: .58rem;
}
button {
    border-color: rgba(255,255,255,.14);
    background: #202a37;
    color: #f2f4f7;
}
button:hover { background: #2a3645; color: #fff; }

.compose-result-shell:empty { display: none; }
.result {
    position: relative;
    margin-top: .5rem;
    padding: 1.35rem;
    overflow: hidden;
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(var(--accent-rgb), .035), rgba(255,255,255,.01)), var(--sheet);
    box-shadow: var(--shadow-soft);
}
.result::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent) 18%, rgba(var(--accent-rgb), .2) 62%, transparent);
}
.result__header { margin-bottom: .8rem; }
.result__title-row { display: flex; align-items: center; gap: .65rem; }
.result__title-row h2 { margin: 0; color: #fff; font-weight: 700; }
.result__signal {
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 .28rem rgba(var(--accent-rgb), .1), 0 0 18px rgba(var(--accent-rgb), .55);
}
.summary { gap: .48rem; margin: .9rem 0 0; }
.summary > span {
    display: inline-flex;
    align-items: baseline;
    gap: .25rem;
    min-height: 2rem;
    padding: .36rem .62rem;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 999px;
    background: rgba(255,255,255,.025);
    color: #8f99a7;
    font-size: .8rem;
}
.summary strong { color: #eef1f4; font-weight: 750; }

.player-toolbar {
    align-items: center;
    gap: .55rem;
    margin: 1rem 0 1.25rem;
    padding: .72rem;
    border: 1px solid var(--rule);
    border-radius: .78rem;
    background: #0b1118;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.player-toolbar button,
.player-toolbar a {
    min-height: 2.55rem;
    padding: .58rem .82rem;
    border-color: rgba(255,255,255,.13);
    border-radius: .58rem;
    background: #151e29;
    color: #e4e8ee;
    font-size: .84rem;
    font-weight: 700;
}
.player-toolbar button:hover:not(:disabled),
.player-toolbar a:hover {
    border-color: rgba(var(--accent-rgb), .42);
    background: #1c2734;
    color: #fff;
}
.player-toolbar .transport-button--play {
    min-width: 7rem;
    border-color: rgba(var(--accent-rgb), .58);
    background: rgba(var(--accent-rgb), .16);
    color: #fff;
}
.player-toolbar .transport-button--play::before { content: "⏯"; margin-inline-end: .45rem; color: var(--accent); }
.player-toolbar .transport-button--restart::before { content: "↺"; margin-inline-end: .42rem; color: var(--accent); }
.player-toolbar .action-link--download::before,
.player-toolbar .action-button--download::before { content: "↓"; margin-inline-end: .42rem; color: var(--accent); }
.player-toolbar .action-link--score::before,
.player-toolbar .action-button--score::before { content: "♩"; margin-inline-end: .42rem; color: var(--accent); }

.karaoke-panel {
    position: relative;
    margin: 0 0 1.35rem;
    border: 1px solid rgba(var(--accent-rgb), .28);
    border-radius: .9rem;
    background:
        radial-gradient(circle at 50% 115%, rgba(var(--accent-rgb), .13), transparent 58%),
        linear-gradient(180deg, #090e14, #0d141d);
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 16px 38px rgba(0,0,0,.24);
}
.karaoke-panel::before {
    content: "";
    position: absolute;
    top: .88rem;
    left: 50%;
    width: 4.3rem;
    height: 2px;
    translate: -50% 0;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: .8;
}
.karaoke-panel__header {
    padding: .7rem 1rem;
    border-bottom-color: var(--rule);
    color: #8791a0;
    font-size: .76rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.karaoke-panel__header strong { color: var(--accent); letter-spacing: .1em; }
.karaoke-panel__lines { height: 12.25rem; padding: 4.2rem 1.4rem; }
.karaoke-panel__section { color: #6f7988; letter-spacing: .09em; text-transform: uppercase; }
.karaoke-panel__line { color: #626d7b; font-size: clamp(1.1rem, 2.6vw, 1.65rem); font-weight: 620; }
.karaoke-panel__line.is-current { color: #f4f1ea; text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.karaoke-panel__syllable.is-active {
    padding: .04em .13em;
    background: linear-gradient(180deg, #f4cc8e, var(--accent));
    color: #11151a;
    box-shadow: 0 0 18px rgba(var(--accent-rgb), .24);
}

.composition-save {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) auto;
    gap: .75rem;
    align-items: end;
    margin: .2rem 0 1.25rem;
    padding: .9rem;
    border: 1px solid var(--rule);
    border-radius: .72rem;
    background: rgba(255,255,255,.018);
}
.composition-save button { min-height: 2.75rem; }

.table-scroll {
    margin-top: 1rem;
    border: 1px solid var(--rule);
    border-radius: .72rem;
    background: #0b1118;
}
table { background: transparent; }
th, td { border-bottom-color: rgba(255,255,255,.07); }
th { color: #8f99a8; background: rgba(255,255,255,.025); }
td { color: #cbd1da; }
td.chord { color: #fff; }
td.scale { color: var(--accent); }
tbody tr:hover { background: rgba(var(--accent-rgb), .035); }

.error,
.flash,
.page > [role="alert"] {
    border: 1px solid rgba(224, 113, 107, .28);
    border-left: 3px solid var(--danger);
    border-radius: .6rem;
    background: rgba(224,113,107,.07);
    color: #f2d8d5;
}

.score-preview-shell {
    overflow: hidden;
    margin: 1rem 0;
    border: 1px solid var(--rule) !important;
    border-radius: .8rem;
    background: #f8f7f2;
}

@media (max-width: 56rem) {
    .composer-hero { grid-template-columns: 1fr; }
    .composer-hero__meter { display: none; }
    .composer-stage { padding: 1rem; }
    .composition-save { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
    .composer-page { width: calc(100% - 1rem); padding-top: .75rem; }
    .composer-hero { padding: 1.35rem 1.05rem 1.2rem; border-radius: .85rem; }
    .composer-hero h1 { font-size: clamp(2rem, 13vw, 3rem); }
    .composer-logo__mark { width: 2.25rem; height: 2.25rem; flex-basis: 2.25rem; }
    .style-nav { top: -.1rem; }
    .style-tabs { border-radius: .7rem; padding: .38rem; }
    .style-tabs a { min-height: 2.35rem; padding: .48rem .68rem; font-size: .87rem; }
    .composer-stage, .result { padding: .85rem; border-radius: .78rem; }
    .composer-form fieldset { padding: .9rem; }
    .player-toolbar { padding: .55rem; }
    .player-toolbar button, .player-toolbar a { flex: 1 1 auto; text-align: center; }
    .karaoke-panel__lines { height: 10rem; padding: 3.4rem .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

.composer-stage .form-check-input {
    border-color: rgba(255,255,255,.22);
    background-color: #0a1017;
}
.composer-stage .form-check-input:checked {
    border-color: var(--accent);
    background-color: var(--accent);
}
.composer-stage .form-check-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb), .1);
}

/* Terms of use — studio/legal layout */
.terms-page {
    width: min(78rem, calc(100% - 2rem));
}
.terms-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.8rem 2rem;
    border: 1px solid rgba(var(--accent-rgb), .22);
    border-radius: 1rem;
    background:
        linear-gradient(90deg, rgba(var(--accent-rgb), .08), transparent 55%),
        repeating-linear-gradient(to bottom, transparent 0, transparent 1.05rem, rgba(255,255,255,.025) 1.05rem, rgba(255,255,255,.025) calc(1.05rem + 1px)),
        #0d141d;
    box-shadow: var(--shadow-soft);
}
.terms-hero h1 { margin: .25rem 0 .55rem; max-width: 52rem; }
.terms-hero p { margin: 0; max-width: 54rem; color: var(--ink-soft); }
.terms-hero__mark {
    display: grid;
    place-items: center;
    width: 7rem;
    height: 7rem;
    border: 1px solid rgba(var(--accent-rgb), .34);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), .13), transparent 68%);
    color: var(--accent);
    font: 2rem/1 var(--display-font);
    box-shadow: inset 0 0 35px rgba(var(--accent-rgb), .06);
}
.terms-kicker {
    color: var(--accent);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.terms-layout {
    display: grid;
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.terms-sidebar {
    position: sticky;
    top: 1rem;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: .8rem;
    background: #0d141d;
    color: var(--ink-soft);
    font-size: .86rem;
}
.terms-sidebar strong { color: #f2f4f7; }
.terms-sidebar ul { margin: .7rem 0 1rem; padding-left: 1.15rem; }
.terms-sidebar li + li { margin-top: .42rem; }
.terms-action,
.terms-admin-actions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: .45rem .72rem;
    border: 1px solid rgba(var(--accent-rgb), .32);
    border-radius: .55rem;
    background: rgba(var(--accent-rgb), .08);
    color: #f3f0e8;
    text-decoration: none;
}
.terms-action:hover,
.terms-admin-actions a:hover { background: rgba(var(--accent-rgb), .15); }
.terms-card {
    padding: clamp(1.25rem, 3vw, 2.4rem);
    border: 1px solid var(--rule);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.018), transparent 14rem), var(--sheet);
    box-shadow: var(--shadow-soft);
}
.terms-title-block {
    margin-bottom: 1.7rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--rule);
}
.terms-title-block h1 { margin-top: .28rem; }
.terms-meta { margin: .55rem 0 0; color: var(--ink-soft); font-size: .84rem; }
.terms-content {
    max-width: 58rem;
    margin-inline: auto;
    white-space: normal;
    color: #d8dde4;
    line-height: 1.72;
}
.terms-content > p:first-child {
    margin-top: 0;
    padding: .85rem 1rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 .5rem .5rem 0;
    background: rgba(var(--accent-rgb), .055);
    color: #eef1f4;
}
.terms-content h2 {
    margin: 2.15rem 0 .65rem;
    padding-top: .3rem;
    color: #fff;
    font-family: var(--display-font);
    font-size: 1.5rem;
    letter-spacing: -.015em;
}
.terms-content h2::before {
    content: "♪";
    margin-right: .55rem;
    color: var(--accent);
    font-size: .8em;
}
.terms-content p { margin: .65rem 0; }
.terms-content ul,
.terms-content ol { margin: .7rem 0 1rem; padding-left: 1.35rem; }
.terms-content li + li { margin-top: .38rem; }
.terms-content strong { color: #fff; }
.terms-content blockquote {
    margin: 1.4rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(var(--accent-rgb), .22);
    border-left: 4px solid var(--accent);
    border-radius: .65rem;
    background: #0b1118;
    color: #e8dfd0;
}
.terms-admin-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; }

@media (max-width: 50rem) {
    .terms-layout { grid-template-columns: 1fr; }
    .terms-sidebar { position: static; }
    .terms-hero { grid-template-columns: 1fr; padding: 1.25rem; }
    .terms-hero__mark { display: none; }
    .terms-card { padding: 1.05rem; }
}

/* Public guide: readable like liner notes rather than an administration page. */
.guide-content {
    max-width: 58rem;
    padding: clamp(1rem, 2vw, 1.8rem);
    border: 1px solid var(--rule);
    border-radius: .65rem;
    background:
        linear-gradient(135deg, rgba(var(--accent-rgb), .06), transparent 26rem),
        var(--sheet);
    box-shadow: var(--shadow-soft);
}
.guide-content .guide-lede {
    margin-top: 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rule);
    color: var(--ink);
    font-size: 1.08rem;
}
.guide-content h2 {
    margin-top: 2rem;
    padding-left: .7rem;
    border-left: 3px solid var(--accent);
}
.guide-content p,
.guide-content li { color: var(--ink-soft); }
.guide-content strong { color: var(--ink); }
.guide-content code {
    padding: .08rem .3rem;
    border: 1px solid var(--rule);
    border-radius: .25rem;
    background: var(--surface-2);
    color: var(--ink);
}
.guide-content pre {
    overflow-x: auto;
    padding: 1rem 1.15rem;
    border: 1px solid var(--rule);
    border-radius: .4rem;
    background: #080b10;
    color: var(--ink);
}
.guide-content pre code { padding: 0; border: 0; background: transparent; }

.audio-ambience__fields {
    align-items: end;
}

.audio-effect-control input[type="range"] {
    width: 100%;
    min-width: 9rem;
}

.audio-effect-control output {
    display: inline-block;
    min-width: 2.4ch;
    margin-left: .35rem;
    color: var(--accent);
    font-family: var(--mono);
    text-align: right;
}

/* Administration — rolling 30-day access journal. */
.access-log-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 1rem 0 1.5rem;
}
.access-log-stats > div {
    display: grid;
    gap: .15rem;
    padding: .85rem 1rem;
    border: 1px solid var(--rule);
    border-radius: .7rem;
    background: rgba(255,255,255,.025);
}
.access-log-stats strong { font-size: 1.35rem; }
.access-log-stats span { color: #aeb6c3; font-size: .84rem; }
.access-log-table code { white-space: nowrap; }
.access-log-table small { color: #9ca6b3; overflow-wrap: anywhere; }
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 1.25rem 0;
}
@media (max-width: 720px) {
    .access-log-stats { grid-template-columns: 1fr; }
}

/* Lazy style tabs: only the active Turbo Frame is mounted. Previously visited
   frames are kept in memory by style_tabs.js and restored without a request. */
.style-panel-host > turbo-frame {
    display: block;
    width: 100%;
}

.style-panel-host > turbo-frame.style-panel-loading {
    position: relative;
    min-height: 12rem;
}

.style-panel-host > turbo-frame.style-panel-loading::after {
    content: '';
    position: absolute;
    top: 4rem;
    left: 50%;
    width: 1.8rem;
    height: 1.8rem;
    margin-left: -.9rem;
    border: 2px solid rgba(255,255,255,.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: request-spinner-spin .75s linear infinite;
}