@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..700,0..1,-50..200&display=swap');

body.page-ai-creation-hall-music {
    background: #080604;
}

body.page-ai-creation-hall-music .site-header {
    background: rgba(10, 7, 4, 0.88);
    border-bottom-color: rgba(214, 174, 92, 0.18);
}

body.page-ai-creation-hall-music .brand-name,
body.page-ai-creation-hall-music .nav-list a {
    color: #f6ead4;
}

body.page-ai-creation-hall-music .brand-tagline {
    color: rgba(246, 234, 212, 0.62);
}

body.page-ai-creation-hall-music .nav-toggle {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(214, 174, 92, 0.24);
}

body.page-ai-creation-hall-music .nav-toggle span {
    background: #d7b76c;
}

body.page-ai-creation-hall-music .site-nav.is-open {
    background: rgba(16, 11, 7, 0.98);
    border-color: rgba(214, 174, 92, 0.24);
}

body.page-ai-creation-hall-music .site-footer {
    margin-top: 0;
}

.music-gen-page {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    color: #f8edda;
    background:
        radial-gradient(circle at 72% 8%, rgba(214, 174, 92, 0.18), transparent 28%),
        radial-gradient(circle at 12% 22%, rgba(168, 109, 28, 0.12), transparent 34%),
        linear-gradient(135deg, #0a0704 0%, #100b06 46%, #050403 100%);
}

.music-gen-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.music-gen-bg::before,
.music-gen-bg::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    filter: blur(18px);
    opacity: 0.55;
}

.music-gen-bg::before {
    width: 520px;
    height: 520px;
    left: -180px;
    top: 140px;
    background: radial-gradient(circle, rgba(214, 174, 92, 0.16), transparent 68%);
    animation: mgGlowDrift 14s ease-in-out infinite alternate;
}

.music-gen-bg::after {
    width: 700px;
    height: 700px;
    right: -260px;
    top: -120px;
    background: radial-gradient(circle, rgba(255, 206, 111, 0.14), transparent 70%);
    animation: mgGlowDrift 18s ease-in-out infinite alternate-reverse;
}

.mg-particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 211, 123, 0.9);
    box-shadow: 0 0 18px rgba(255, 211, 123, 0.82);
    animation: mgParticleFloat 9s ease-in-out infinite;
}

.mg-particle-1 {
    left: 12%;
    top: 22%;
    animation-delay: 0s;
}

.mg-particle-2 {
    left: 28%;
    top: 70%;
    animation-delay: 1.4s;
}

.mg-particle-3 {
    left: 48%;
    top: 18%;
    animation-delay: 2.1s;
}

.mg-particle-4 {
    left: 68%;
    top: 78%;
    animation-delay: 3s;
}

.mg-particle-5 {
    left: 82%;
    top: 34%;
    animation-delay: 4.3s;
}

.mg-particle-6 {
    left: 92%;
    top: 62%;
    animation-delay: 5.2s;
}

.music-gen-container {
    position: relative;
    padding-top: 34px;
    padding-bottom: 48px;
}

.music-topbar,
.music-hero,
.music-workspace,
.music-generating-grid,
.music-summary-strip,
.music-result-card,
.music-bottom-bar {
    width: min(100%, 1500px);
    margin-left: auto;
    margin-right: auto;
}

.music-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 30px;
}

.music-back-link {
    color: rgba(248, 237, 218, 0.72);
    font-weight: 800;
    transition: color 0.2s ease;
}

.music-back-link:hover {
    color: #f2c66e;
}

.music-top-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.music-pill {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.28);
    background: rgba(255, 255, 255, 0.035);
    color: #f8edda;
    cursor: pointer;
}

.music-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214, 174, 92, 0.36);
    background: radial-gradient(circle, rgba(214, 174, 92, 0.18), rgba(255, 255, 255, 0.02));
    box-shadow: 0 0 28px rgba(214, 174, 92, 0.22);
    overflow: hidden;
}

.music-avatar img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.music-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
    gap: 28px;
    align-items: end;
    margin-bottom: 26px;
}

.music-eyebrow,
.music-kicker {
    margin: 0 0 10px;
    color: #d7b76c;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.82rem;
}

.music-hero h1 {
    color: #fff7e8;
    font-size: clamp(2.8rem, 5vw, 5.7rem);
}

.music-hero-text {
    margin-top: 16px;
    max-width: 780px;
    color: rgba(248, 237, 218, 0.76);
    font-size: clamp(1.04rem, 1.5vw, 1.22rem);
}

.music-brand-card {
    justify-self: end;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 16px;
    align-items: center;
    width: min(100%, 380px);
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(214, 174, 92, 0.28);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
}

.music-brand-card img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(214, 174, 92, 0.32));
}

.music-brand-card strong {
    display: block;
    color: #fff3d9;
    font-size: 1.05rem;
}

.music-brand-card span {
    display: block;
    margin-top: 4px;
    color: rgba(248, 237, 218, 0.62);
    font-size: 0.9rem;
}

.music-progress {
    width: min(100%, 1140px);
    min-height: 74px;
    margin: 0 auto 28px;
    padding: 14px 18px;
    border-radius: 22px;
    border: 1px solid rgba(214, 174, 92, 0.24);
    background: rgba(255, 255, 255, 0.035);
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.18);
}

.music-step {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: transparent;
    color: rgba(248, 237, 218, 0.42);
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

.music-step span {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(214, 174, 92, 0.24);
    color: rgba(248, 237, 218, 0.56);
}

.music-step.is-active,
.music-step.is-done {
    color: #eac36f;
}

.music-step.is-active span,
.music-step.is-done span {
    border-color: rgba(234, 195, 111, 0.78);
    background: rgba(214, 174, 92, 0.18);
    color: #ffd784;
}

.music-progress i {
    height: 1px;
    flex: 1;
    min-width: 18px;
    background: linear-gradient(90deg, rgba(214, 174, 92, 0.45), rgba(214, 174, 92, 0.08));
}

.music-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.62fr);
    gap: 28px;
    align-items: start;
}

.music-main-panel,
.music-side-panel {
    display: grid;
    gap: 22px;
}

.music-card {
    position: relative;
    border-radius: 28px;
    border: 1px solid rgba(214, 174, 92, 0.24);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
        rgba(20, 13, 7, 0.72);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(14px);
}

.music-start-card,
.music-mentor-card,
.music-blueprint-card,
.music-preview-card,
.music-spark-card,
.music-upcoming-card,
.music-result-card {
    padding: 26px;
}

.music-section-heading h2,
.music-card-title h2,
.music-preview-head h2,
.music-generating-head h2,
.music-result-card h2 {
    color: #fff5e4;
}

.music-section-heading h2 {
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.music-card-title {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.music-card-title > span {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #ffd784;
    background: rgba(214, 174, 92, 0.16);
    border: 1px solid rgba(214, 174, 92, 0.24);
}

.music-card-title p,
.music-section-heading p,
.music-result-card p {
    color: rgba(248, 237, 218, 0.66);
}

.music-start-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}

.music-start-option {
    min-height: 170px;
    padding: 24px;
    border-radius: 24px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background: rgba(255, 255, 255, 0.035);
    color: #f8edda;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.music-start-option:hover,
.music-start-option.is-selected {
    transform: translateY(-2px);
    border-color: rgba(255, 211, 123, 0.82);
    background: rgba(214, 174, 92, 0.11);
    box-shadow: 0 0 32px rgba(214, 174, 92, 0.16);
}

.music-option-icon {
    display: block;
    font-size: 2.1rem;
    margin-bottom: 14px;
    filter: grayscale(0.2);
}

.music-start-option strong {
    display: block;
    font-size: 1.1rem;
}

.music-start-option small {
    display: block;
    margin-top: 8px;
    color: rgba(248, 237, 218, 0.64);
    line-height: 1.45;
}

.music-chat {
    display: grid;
    gap: 14px;
}

.music-message {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: start;
}

.music-message-avatar {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #ffe0a1;
    font-family: Georgia, serif;
    font-size: 1.7rem;
    border: 1px solid rgba(214, 174, 92, 0.36);
    background: radial-gradient(circle, rgba(214, 174, 92, 0.22), rgba(255, 255, 255, 0.04));
    box-shadow: 0 0 22px rgba(214, 174, 92, 0.18);
}

.music-message-bubble {
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 247, 232, 0.9);
}

.music-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-left: 68px;
}

.music-quick-replies button,
.music-preview-head button,
.music-result-actions button,
.music-soft-btn,
.music-bar-btn {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.26);
    background: rgba(255, 255, 255, 0.035);
    color: #e9c878;
    font-weight: 900;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.music-quick-replies button:hover,
.music-preview-head button:hover,
.music-result-actions button:hover,
.music-soft-btn:hover,
.music-bar-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 211, 123, 0.76);
    background: rgba(214, 174, 92, 0.12);
}

.music-input-row {
    display: grid;
    grid-template-columns: 1fr 54px;
    gap: 12px;
    margin-top: 18px;
    padding: 12px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background: rgba(0, 0, 0, 0.22);
}

.music-input-row input {
    min-height: 48px;
    border: 0;
    background: transparent;
    color: #fff6e6;
    padding: 0 12px;
    outline: none;
}

.music-input-row input::placeholder,
.music-spark-card textarea::placeholder {
    color: rgba(248, 237, 218, 0.42);
}

.music-input-row button {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(180deg, #f3c86d, #b98225);
    color: #1a1106;
    font-weight: 950;
    cursor: pointer;
}

.music-blueprint-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: center;
}

.music-blueprint-item > span {
    width: 58px;
    height: 58px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: #ffe1a0;
    background: rgba(214, 174, 92, 0.18);
    border: 1px solid rgba(214, 174, 92, 0.28);
}

.music-blueprint-item strong {
    color: #fff0cf;
}

.music-blueprint-item p {
    margin-top: 4px;
    color: rgba(248, 237, 218, 0.62);
}

.music-blueprint-divider {
    height: 1px;
    margin: 18px 0;
    background: linear-gradient(90deg, transparent, rgba(214, 174, 92, 0.34), transparent);
}

.music-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.music-preview-head h2 {
    font-size: 1.25rem;
}

.music-preview-head small {
    color: #d7b76c;
    font-size: 0.78rem;
}

.music-lyrics-preview {
    padding: 18px;
    border-radius: 18px;
    border: 1px solid rgba(214, 174, 92, 0.17);
    background: rgba(0, 0, 0, 0.18);
    color: rgba(255, 247, 232, 0.88);
    line-height: 1.75;
}

.music-prompt-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.music-prompt-grid div,
.music-prompt-field {
    padding: 14px;
    border-radius: 15px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background: rgba(0, 0, 0, 0.16);
}

.music-prompt-grid span,
.music-prompt-field span,
.music-summary-strip span {
    display: block;
    color: rgba(248, 237, 218, 0.48);
    font-size: 0.78rem;
    margin-bottom: 4px;
}

.music-prompt-grid strong,
.music-prompt-field strong,
.music-summary-strip strong {
    color: #fff1d4;
    font-size: 0.88rem;
}

.music-prompt-field {
    margin-top: 10px;
}

.music-bottom-bar {
    position: sticky;
    bottom: 18px;
    z-index: 5;
    margin-top: 26px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(214, 174, 92, 0.26);
    background: rgba(13, 9, 5, 0.86);
    backdrop-filter: blur(18px);
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
    display: grid;
    grid-template-columns: 1fr 1fr minmax(260px, 0.9fr);
    gap: 12px;
}

.music-bar-btn {
    min-height: 56px;
    border-radius: 16px;
}

.music-gold-btn {
    min-height: 56px;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffd884 0%, #d39d3a 56%, #a76d18 100%);
    color: #1a1005;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(255, 211, 123, 0.18);
}

.music-generating {
    width: min(100%, 1500px);
    margin: 0 auto;
    text-align: center;
}

.music-generating-head {
    margin: 36px auto 10px;
}

.music-generating-head h2 {
    max-width: 780px;
    margin: 0 auto;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    color: rgba(255, 247, 232, 0.86);
    font-family: Inter, Segoe UI, Arial, sans-serif;
    font-weight: 700;
}

.music-wave-wrap {
    position: relative;
    height: clamp(180px, 24vw, 340px);
    margin: 10px auto 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.music-wave-wrap::before {
    content: "";
    position: absolute;
    width: min(760px, 92vw);
    height: min(360px, 42vw);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(255, 211, 123, 0.16), transparent 64%);
    filter: blur(8px);
    animation: mgBreath 5s ease-in-out infinite;
}

.music-aura {
    position: absolute;
    width: min(520px, 72vw);
    aspect-ratio: 1 / 1;
    border-radius: 999px;
    border: 1px solid rgba(255, 211, 123, 0.12);
    box-shadow: 0 0 40px rgba(255, 211, 123, 0.08);
    animation: mgAura 5.8s ease-in-out infinite;
}

.music-aura-two {
    width: min(700px, 92vw);
    animation-delay: 1.2s;
}

.music-wave-line {
    position: relative;
    z-index: 2;
    width: min(780px, 92vw);
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(4px, 0.8vw, 10px);
}

.music-wave-line::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 220, 139, 0.88), transparent);
    box-shadow: 0 0 28px rgba(255, 211, 123, 0.74);
}

.music-wave-line span {
    width: clamp(4px, 0.65vw, 8px);
    height: var(--h);
    min-height: 18px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 245, 209, 0.96), rgba(255, 203, 98, 0.86), rgba(150, 90, 16, 0.34));
    box-shadow: 0 0 20px rgba(255, 211, 123, 0.7);
    transform-origin: center;
    animation: mgWave 2.7s ease-in-out infinite;
    animation-delay: var(--d);
}

.music-status-bar {
    width: min(680px, 100%);
    min-height: 48px;
    margin: -6px auto 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.26);
    background: rgba(255, 255, 255, 0.045);
    color: #fff0cf;
}

.music-status-bar span {
    color: #ffd784;
}

.music-status-bar em {
    font-style: normal;
    color: rgba(248, 237, 218, 0.72);
}

.music-breath-text {
    margin: 14px 0 18px;
    color: rgba(248, 237, 218, 0.58);
}

.music-generating-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
    gap: 24px;
    align-items: start;
    text-align: left;
}

.music-spark-card h3 {
    margin: 10px 0 8px;
    color: #fff5e4;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.music-spark-card p {
    color: rgba(248, 237, 218, 0.62);
}

.music-spark-card textarea {
    width: 100%;
    min-height: 62px;
    resize: vertical;
    margin-top: 18px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background: rgba(0, 0, 0, 0.2);
    color: #fff6e6;
    outline: none;
}

.music-spark-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.music-upcoming-card h2 {
    font-size: 1rem;
    margin-bottom: 16px;
    color: #d7b76c;
    font-family: Inter, Segoe UI, Arial, sans-serif;
}

.music-upcoming-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
}

.music-upcoming-card li {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(214, 174, 92, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(248, 237, 218, 0.6);
}

.music-upcoming-card li:first-child {
    color: #f5cf7d;
    border-color: rgba(214, 174, 92, 0.22);
}

.music-summary-strip {
    margin-top: 20px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(214, 174, 92, 0.24);
    background: rgba(255, 255, 255, 0.04);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    text-align: left;
}

.music-saved-note {
    margin-top: 12px;
    color: #d7b76c;
}

.music-generating-actions,
.music-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

.music-result {
    width: min(100%, 980px);
    margin: 40px auto;
}

.music-result-card {
    text-align: center;
}

.music-player-mock {
    margin: 24px auto 0;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background: rgba(0, 0, 0, 0.18);
    display: grid;
    grid-template-columns: 54px 1fr auto;
    gap: 16px;
    align-items: center;
    text-align: left;
}

.music-player-mock > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #1a1005;
    background: linear-gradient(180deg, #ffd884, #b98225);
}

.music-player-mock strong,
.music-player-mock small {
    display: block;
}

.music-player-mock small {
    color: rgba(248, 237, 218, 0.58);
}

.music-player-mock button {
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 0;
    color: #1a1005;
    background: #ffd884;
    font-weight: 950;
    cursor: pointer;
}

@keyframes mgGlowDrift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(40px, 28px, 0) scale(1.08);
    }
}

@keyframes mgParticleFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(0.8);
        opacity: 0.25;
    }

    45% {
        transform: translate3d(18px, -42px, 0) scale(1);
        opacity: 0.95;
    }

    70% {
        transform: translate3d(-10px, -76px, 0) scale(0.72);
        opacity: 0.45;
    }
}

@keyframes mgBreath {
    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.58;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.92;
    }
}

@keyframes mgAura {
    0% {
        transform: scale(0.84);
        opacity: 0;
    }

    45% {
        opacity: 0.75;
    }

    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

@keyframes mgWave {
    0%,
    100% {
        transform: scaleY(0.62);
        opacity: 0.72;
    }

    50% {
        transform: scaleY(1.15);
        opacity: 1;
    }
}

@media (max-width: 1180px) {
    .music-hero,
    .music-workspace,
    .music-generating-grid,
    .music-summary-strip {
        grid-template-columns: 1fr;
    }

    .music-brand-card {
        justify-self: start;
    }

    .music-prompt-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .music-bottom-bar {
        grid-template-columns: 1fr;
        position: static;
    }
}

@media (max-width: 780px) {
    .music-gen-container {
        padding-top: 24px;
        padding-bottom: 34px;
    }

    .music-topbar,
    .music-hero,
    .music-preview-head,
    .music-spark-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .music-topbar,
    .music-preview-head {
        display: flex;
    }

    .music-top-actions {
        justify-content: space-between;
    }

    .music-progress {
        overflow-x: auto;
        justify-content: flex-start;
        padding: 12px;
    }

    .music-progress i {
        min-width: 34px;
        flex: 0 0 34px;
    }

    .music-start-grid,
    .music-prompt-grid {
        grid-template-columns: 1fr;
    }

    .music-start-card,
    .music-mentor-card,
    .music-blueprint-card,
    .music-preview-card,
    .music-spark-card,
    .music-upcoming-card,
    .music-result-card {
        padding: 20px;
        border-radius: 22px;
    }

    .music-message {
        grid-template-columns: 42px 1fr;
    }

    .music-message-avatar {
        width: 42px;
        height: 42px;
        font-size: 1.25rem;
    }

    .music-quick-replies {
        margin-left: 0;
    }

    .music-input-row {
        grid-template-columns: 1fr 48px;
        border-radius: 18px;
    }

    .music-summary-strip {
        gap: 10px;
    }

    .music-player-mock {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .music-player-mock > span {
        margin: 0 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .music-gen-bg::before,
    .music-gen-bg::after,
    .mg-particle,
    .music-wave-wrap::before,
    .music-aura,
    .music-wave-line span {
        animation: none;
    }
}

/* ==========================================================
   Asylonia Music Generation - Round 2 Focus Wizard
   ========================================================== */

.music-wizard-page {
    --mg-card-max: 980px;
    --mg-soft-gold: #e5c070;
    --mg-bright-gold: #ffd884;
    --mg-cream: #fff6e6;
    --mg-muted: rgba(248, 237, 218, 0.66);
    --mg-faint: rgba(248, 237, 218, 0.42);
}

.music-wizard-topbar {
    width: min(100%, 1240px);
    margin-bottom: 22px;
}

.music-wizard-hero {
    width: min(100%, var(--mg-card-max));
    display: block;
    text-align: center;
    margin: 0 auto 24px;
}

.music-wizard-hero .music-hero-copy {
    padding: 0;
}

.music-wizard-hero h1 {
    font-size: clamp(2.6rem, 5.2vw, 5.2rem);
    letter-spacing: -0.045em;
}

.music-wizard-hero .music-hero-text {
    margin-left: auto;
    margin-right: auto;
    max-width: 620px;
    font-size: clamp(1rem, 1.35vw, 1.16rem);
}

.music-wizard-progress {
    width: min(100%, 980px);
    margin-bottom: 14px;
    background: rgba(255, 255, 255, 0.026);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.music-wizard-progress .music-step {
    font-size: 0.92rem;
}

.music-step-note {
    width: min(100%, 760px);
    margin: 0 auto 24px;
    text-align: center;
    color: var(--mg-muted);
    min-height: 30px;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.music-step-note.is-changing {
    opacity: 0;
    transform: translateY(4px);
}

.music-step-note span {
    display: inline-flex;
    margin-right: 8px;
    color: var(--mg-soft-gold);
    font-weight: 900;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.music-step-note strong {
    color: rgba(255, 246, 230, 0.84);
    font-weight: 750;
}

.music-focus-workspace {
    width: min(100%, var(--mg-card-max));
    margin: 0 auto;
}

.music-focus-shell {
    position: relative;
    min-height: 500px;
    border-radius: 34px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 174, 92, 0.12), transparent 42%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
        rgba(17, 11, 6, 0.72);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.music-focus-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent, rgba(255, 216, 132, 0.08), transparent);
    transform: translateX(-100%);
    opacity: 0;
}

.music-focus-shell.is-transitioning::before {
    animation: musicStepSweep 0.78s ease;
}

.music-step-panel {
    display: none;
    padding: clamp(28px, 5vw, 56px);
    animation: musicPanelIn 0.34s ease both;
}

.music-step-panel.is-active {
    display: block;
}

.music-focus-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 28px;
}

.music-focus-head h2 {
    margin: 0;
    color: var(--mg-cream);
    font-family: "Georgia", "Times New Roman", serif;
    font-size: clamp(1.9rem, 3.2vw, 3.4rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.music-focus-head p:not(.music-kicker) {
    margin: 14px auto 0;
    color: var(--mg-muted);
    max-width: 620px;
    font-size: 1rem;
    line-height: 1.7;
}

.music-start-grid-focus {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.music-start-grid-focus .music-start-option {
    min-height: 190px;
    padding: 28px 22px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)),
        rgba(0, 0, 0, 0.12);
    border-color: rgba(214, 174, 92, 0.2);
}

.music-start-grid-focus .music-start-option.is-selected {
    border-color: rgba(255, 216, 132, 0.82);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.14), transparent 54%),
        rgba(214, 174, 92, 0.08);
}

.music-line-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 132, 0.34);
    background: rgba(255, 255, 255, 0.035);
    color: var(--mg-bright-gold);
    font-size: 1.65rem;
    font-family: Georgia, serif;
    box-shadow: 0 0 28px rgba(255, 216, 132, 0.12);
}

.music-soft-note {
    max-width: 680px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid rgba(214, 174, 92, 0.15);
    background: rgba(255, 255, 255, 0.026);
    color: var(--mg-muted);
}

.music-soft-note span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--mg-bright-gold);
    background: rgba(214, 174, 92, 0.1);
}

.music-soft-note p {
    margin: 0;
    line-height: 1.55;
}

.music-mini-summary {
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background: rgba(255, 255, 255, 0.025);
}

.music-mini-summary span {
    color: var(--mg-faint);
    font-size: 0.82rem;
}

.music-mini-summary strong {
    color: var(--mg-soft-gold);
    font-size: 0.9rem;
}

.music-chat-focus {
    max-width: 760px;
    margin: 0 auto;
}

.music-input-focus {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.music-editor-shell {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 24px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(214, 174, 92, 0.08), transparent 46%),
        rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.music-editor-topline {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(214, 174, 92, 0.13);
    background: rgba(255, 255, 255, 0.026);
}

.music-editor-topline span,
.music-prompt-editor-grid label span {
    display: block;
    color: var(--mg-faint);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.music-editor-topline strong {
    display: block;
    margin-top: 3px;
    color: rgba(255, 246, 230, 0.88);
    font-size: 0.95rem;
}

.music-editor-topline em {
    font-style: normal;
    color: var(--mg-soft-gold);
    font-size: 0.82rem;
    font-weight: 850;
}

.music-lyrics-editor,
.music-prompt-editor {
    width: 100%;
    min-height: 390px;
    resize: vertical;
    border: 0;
    outline: none;
    padding: 24px;
    color: rgba(255, 246, 230, 0.92);
    background: transparent;
    font-size: 1.02rem;
    line-height: 1.75;
}

.music-prompt-editor {
    min-height: 170px;
}

.music-tool-row {
    max-width: 800px;
    margin: 18px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.music-tool-row button {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background: rgba(255, 255, 255, 0.028);
    color: var(--mg-soft-gold);
    font-weight: 850;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.music-tool-row button:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 216, 132, 0.72);
    background: rgba(214, 174, 92, 0.1);
}

.music-prompt-editor-grid {
    max-width: 800px;
    margin: 0 auto 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.music-prompt-editor-grid label {
    display: block;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(214, 174, 92, 0.16);
    background: rgba(0, 0, 0, 0.16);
}

.music-prompt-editor-grid input {
    width: 100%;
    min-height: 38px;
    margin-top: 6px;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 246, 230, 0.92);
    font-weight: 750;
}

.music-wide-field {
    grid-column: 1 / -1;
}

.music-ready-grid {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.music-ready-grid article {
    min-height: 110px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(214, 174, 92, 0.17);
    background: rgba(255, 255, 255, 0.028);
}

.music-ready-grid span {
    display: block;
    color: var(--mg-faint);
    font-size: 0.8rem;
    margin-bottom: 8px;
}

.music-ready-grid strong {
    color: rgba(255, 246, 230, 0.92);
    font-size: 1rem;
}

.music-generate-focus {
    max-width: 620px;
    margin: 28px auto 0;
    text-align: center;
}

.music-generate-main {
    width: min(100%, 460px);
    min-height: 64px;
    font-size: 1.05rem;
}

.music-generate-focus p {
    margin: 14px auto 0;
    color: var(--mg-muted);
    line-height: 1.65;
}

.music-wizard-actions {
    width: min(100%, var(--mg-card-max));
    margin: 18px auto 0;
    display: grid;
    grid-template-columns: minmax(120px, 0.36fr) minmax(220px, 0.64fr);
    gap: 12px;
}

.music-wizard-actions button {
    min-height: 58px;
    border-radius: 18px;
}

.music-back-step[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.music-floating-spark {
    position: fixed;
    left: 50%;
    top: 118px;
    z-index: 200;
    transform: translateX(-50%) translateY(-12px);
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(560px, calc(100% - 32px));
    padding: 13px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 132, 0.28);
    background: rgba(15, 10, 5, 0.86);
    color: rgba(255, 246, 230, 0.88);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.35), 0 0 28px rgba(255, 216, 132, 0.11);
    backdrop-filter: blur(16px);
    opacity: 0;
    pointer-events: none;
}

.music-floating-spark span {
    color: var(--mg-bright-gold);
}

.music-floating-spark.is-visible {
    animation: musicSparkToast 3.6s ease both;
}

.music-generating-focus {
    width: min(100%, 1100px);
}

.music-generating-head-focus {
    margin-top: 20px;
}

.music-generating-head-focus .music-eyebrow {
    font-size: 0.9rem;
}

.music-generating-head-focus h2 {
    font-size: clamp(1.25rem, 2.2vw, 1.95rem);
}

.music-generating-grid-focus {
    grid-template-columns: minmax(0, 760px);
    justify-content: center;
}

.music-generating-grid-focus .music-spark-card {
    text-align: left;
}

.music-result-focus {
    width: min(100%, 900px);
}

.music-result-focus .music-result-card {
    padding: clamp(28px, 5vw, 54px);
}

.music-result-focus .music-result-card h2 {
    font-size: clamp(2rem, 4vw, 3.4rem);
}

@keyframes musicPanelIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.992);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes musicStepSweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes musicSparkToast {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-12px) scale(0.98);
    }

    12% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    78% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.985);
    }
}

@media (max-width: 1180px) {
    .music-ready-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .music-wizard-actions {
        position: sticky;
        bottom: 14px;
        z-index: 10;
        padding: 10px;
        border-radius: 22px;
        border: 1px solid rgba(214, 174, 92, 0.22);
        background: rgba(12, 8, 4, 0.86);
        backdrop-filter: blur(14px);
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.32);
    }
}

@media (max-width: 780px) {
    .music-wizard-hero {
        text-align: left;
        margin-bottom: 18px;
    }

    .music-wizard-hero .music-hero-text {
        margin-left: 0;
    }

    .music-step-note {
        text-align: left;
        margin-bottom: 18px;
    }

    .music-step-note span,
    .music-step-note strong {
        display: block;
    }

    .music-step-note span {
        margin-right: 0;
        margin-bottom: 4px;
    }

    .music-focus-shell {
        border-radius: 24px;
        min-height: auto;
    }

    .music-step-panel {
        padding: 24px 18px;
    }

    .music-focus-head {
        text-align: left;
        margin-bottom: 22px;
    }

    .music-start-grid-focus {
        grid-template-columns: 1fr;
    }

    .music-soft-note {
        grid-template-columns: 1fr;
    }

    .music-mini-summary {
        margin-left: 0;
    }

    .music-prompt-editor-grid,
    .music-ready-grid,
    .music-wizard-actions {
        grid-template-columns: 1fr;
    }

    .music-lyrics-editor {
        min-height: 330px;
        padding: 18px;
        font-size: 0.98rem;
    }

    .music-editor-topline {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .music-floating-spark {
        top: 92px;
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .music-step-panel,
    .music-focus-shell.is-transitioning::before,
    .music-floating-spark.is-visible {
        animation: none;
    }
}

/* ==========================================================
   Asylonia Music Generation - Round 3 Polish
   ========================================================== */

/* Dark gold scrollbars */
.music-lyrics-editor,
.music-prompt-editor,
.music-spark-card textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(229, 192, 112, 0.72) rgba(18, 11, 6, 0.68);
}

.music-lyrics-editor::-webkit-scrollbar,
.music-prompt-editor::-webkit-scrollbar,
.music-spark-card textarea::-webkit-scrollbar {
    width: 10px;
}

.music-lyrics-editor::-webkit-scrollbar-track,
.music-prompt-editor::-webkit-scrollbar-track,
.music-spark-card textarea::-webkit-scrollbar-track {
    background: rgba(18, 11, 6, 0.78);
    border-radius: 999px;
}

.music-lyrics-editor::-webkit-scrollbar-thumb,
.music-prompt-editor::-webkit-scrollbar-thumb,
.music-spark-card textarea::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 216, 132, 0.86), rgba(166, 108, 32, 0.82));
    border: 2px solid rgba(18, 11, 6, 0.78);
    border-radius: 999px;
}

.music-lyrics-editor::-webkit-scrollbar-thumb:hover,
.music-prompt-editor::-webkit-scrollbar-thumb:hover,
.music-spark-card textarea::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(255, 230, 164, 0.96), rgba(202, 142, 48, 0.92));
}

/* Start cards: two clear choices */
.music-start-grid-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 720px;
}

.music-start-grid-two .music-start-option {
    min-height: 210px;
}

/* CSS icons - no assets */
.music-css-icon {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    display: block;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 132, 0.34);
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 216, 132, 0.18), transparent 58%),
        rgba(255, 255, 255, 0.032);
    box-shadow:
        0 0 26px rgba(255, 216, 132, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.music-icon-book::before,
.music-icon-book::after {
    content: "";
    position: absolute;
    top: 19px;
    width: 17px;
    height: 25px;
    border: 2px solid rgba(255, 230, 164, 0.92);
    border-radius: 4px 2px 2px 4px;
    background: rgba(16, 10, 5, 0.58);
    box-shadow: 0 0 14px rgba(255, 216, 132, 0.22);
}

.music-icon-book::before {
    left: 14px;
    transform: skewY(-8deg);
}

.music-icon-book::after {
    right: 14px;
    transform: skewY(8deg);
}

.music-icon-note::before {
    content: "";
    position: absolute;
    left: 31px;
    top: 16px;
    width: 3px;
    height: 30px;
    border-radius: 999px;
    background: rgba(255, 230, 164, 0.96);
    box-shadow: 0 0 14px rgba(255, 216, 132, 0.28);
}

.music-icon-note::after {
    content: "";
    position: absolute;
    left: 18px;
    top: 37px;
    width: 19px;
    height: 13px;
    border: 3px solid rgba(255, 230, 164, 0.96);
    border-top: 0;
    border-radius: 0 0 999px 999px;
    transform: rotate(-18deg);
    box-shadow: 0 0 14px rgba(255, 216, 132, 0.22);
}

.music-icon-note {
    overflow: hidden;
}

.music-icon-note span {
    display: none;
}

.music-icon-note .dummy {
    display: none;
}

/* User message delete */
.music-message.is-user-message {
    position: relative;
}

.music-message.is-user-message .music-message-bubble {
    padding-right: 48px;
    border-color: rgba(255, 216, 132, 0.22);
    background:
        linear-gradient(135deg, rgba(255, 216, 132, 0.055), rgba(255, 255, 255, 0.028)),
        rgba(0, 0, 0, 0.16);
}

.music-delete-message {
    position: absolute;
    right: 11px;
    top: 11px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 132, 0.24);
    background: rgba(255, 255, 255, 0.025);
    color: rgba(255, 230, 164, 0.8);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.music-delete-message:hover {
    transform: scale(1.06);
    color: #ffd884;
    border-color: rgba(255, 216, 132, 0.76);
    background: rgba(255, 216, 132, 0.09);
    box-shadow: 0 0 20px rgba(255, 216, 132, 0.12);
}

/* Empty prompt fields with guide text */
.music-prompt-editor-grid input::placeholder,
.music-prompt-editor::placeholder {
    color: rgba(248, 237, 218, 0.36);
    font-weight: 650;
}

.music-prompt-editor-grid label:focus-within {
    border-color: rgba(255, 216, 132, 0.56);
    box-shadow: 0 0 24px rgba(255, 216, 132, 0.08);
}

/* Hybrid Mnemosyne Light Ribbon */
.music-ribbon-wrap {
    height: clamp(210px, 25vw, 350px);
}

.music-ribbon-field {
    position: relative;
    z-index: 2;
    width: min(760px, 92vw);
    height: 190px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    mask-image: linear-gradient(90deg, transparent 0%, black 14%, black 86%, transparent 100%);
}

.music-ribbon-field::before {
    content: "";
    position: absolute;
    inset: 22px 0;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at center, rgba(255, 216, 132, 0.12), transparent 62%);
    filter: blur(8px);
    animation: musicRibbonBreath 5.8s ease-in-out infinite;
}

.music-ribbon-line {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(700px, 92vw);
    height: 2px;
    border-radius: 999px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(255, 231, 173, 0.88), transparent);
    box-shadow:
        0 0 18px rgba(255, 216, 132, 0.65),
        0 0 38px rgba(255, 216, 132, 0.18);
}

.music-ribbon-line-core {
    height: 1px;
    opacity: 0.78;
}

.music-ribbon-line-1,
.music-ribbon-line-2,
.music-ribbon-line-3,
.music-ribbon-line-4 {
    height: 3px;
    opacity: 0.72;
    filter: blur(0.25px);
}

.music-ribbon-line-1 {
    animation: musicRibbonWave1 4.8s ease-in-out infinite;
}

.music-ribbon-line-2 {
    animation: musicRibbonWave2 5.6s ease-in-out infinite;
    animation-delay: -1.2s;
}

.music-ribbon-line-3 {
    animation: musicRibbonWave3 6.2s ease-in-out infinite;
    animation-delay: -2.1s;
    opacity: 0.54;
}

.music-ribbon-line-4 {
    animation: musicRibbonWave4 7.4s ease-in-out infinite;
    animation-delay: -3s;
    opacity: 0.46;
}

.music-ribbon-dot {
    position: absolute;
    z-index: 3;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 230, 164, 0.95);
    box-shadow:
        0 0 16px rgba(255, 216, 132, 0.9),
        0 0 32px rgba(255, 216, 132, 0.24);
    opacity: 0.42;
    animation: musicRibbonDot 7s ease-in-out infinite;
}

.music-ribbon-dot-1 {
    left: 18%;
    top: 43%;
    animation-delay: 0s;
}

.music-ribbon-dot-2 {
    left: 34%;
    top: 60%;
    animation-delay: -1.4s;
}

.music-ribbon-dot-3 {
    left: 52%;
    top: 38%;
    animation-delay: -2.3s;
}

.music-ribbon-dot-4 {
    left: 68%;
    top: 57%;
    animation-delay: -3.8s;
}

.music-ribbon-dot-5 {
    left: 82%;
    top: 45%;
    animation-delay: -5.1s;
}

/* Result icon actions */
.music-result-icon-actions {
    margin: 24px auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.music-icon-action {
    min-width: 118px;
    min-height: 88px;
    display: grid;
    place-items: center;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 22px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.08), transparent 52%),
        rgba(255, 255, 255, 0.026);
    color: rgba(255, 246, 230, 0.78);
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.music-icon-action:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 216, 132, 0.68);
    background: rgba(255, 216, 132, 0.08);
    box-shadow: 0 0 28px rgba(255, 216, 132, 0.12);
}

.music-icon-action strong {
    font-size: 0.88rem;
    color: rgba(255, 246, 230, 0.78);
}

.music-icon-action.is-active strong {
    color: #ffd884;
}

.music-action-star,
.music-action-heart,
.music-action-download {
    position: relative;
    width: 34px;
    height: 34px;
    display: block;
}

/* Star icon */
.music-action-star::before {
    content: "☆";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffd884;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 0 16px rgba(255, 216, 132, 0.22);
}

.music-icon-action.is-active .music-action-star::before {
    content: "★";
    color: #ffd884;
    text-shadow:
        0 0 16px rgba(255, 216, 132, 0.55),
        0 0 34px rgba(255, 216, 132, 0.24);
}

/* Heart icon */
.music-action-heart::before {
    content: "♡";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #ffd884;
    font-size: 2rem;
    line-height: 1;
    text-shadow: 0 0 16px rgba(255, 216, 132, 0.22);
}

.music-icon-action.is-active .music-action-heart::before {
    content: "♥";
    color: #ff5f7f;
    text-shadow:
        0 0 16px rgba(255, 95, 127, 0.6),
        0 0 34px rgba(255, 95, 127, 0.22);
}

/* Download icon with CSS */
.music-action-download::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 6px;
    width: 4px;
    height: 18px;
    border-radius: 999px;
    background: #ffd884;
    box-shadow: 0 0 14px rgba(255, 216, 132, 0.3);
}

.music-action-download::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 16px;
    width: 16px;
    height: 16px;
    border-left: 4px solid #ffd884;
    border-bottom: 4px solid #ffd884;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 10px rgba(255, 216, 132, 0.24));
}

.music-action-download {
    border-bottom: 3px solid #ffd884;
}

.music-result-secondary-actions {
    margin-top: 18px;
}

@keyframes musicRibbonBreath {
    0%,
    100% {
        transform: scaleX(0.92) scaleY(0.84);
        opacity: 0.48;
    }

    50% {
        transform: scaleX(1.05) scaleY(1);
        opacity: 0.88;
    }
}

@keyframes musicRibbonWave1 {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(-18px) scaleX(0.92) rotate(0.2deg);
        opacity: 0.42;
    }

    50% {
        transform: translate(-50%, -50%) translateY(16px) scaleX(1.03) rotate(-0.2deg);
        opacity: 0.86;
    }
}

@keyframes musicRibbonWave2 {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(22px) scaleX(1.04) rotate(-0.25deg);
        opacity: 0.38;
    }

    50% {
        transform: translate(-50%, -50%) translateY(-14px) scaleX(0.94) rotate(0.25deg);
        opacity: 0.78;
    }
}

@keyframes musicRibbonWave3 {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(-38px) scaleX(0.76);
        opacity: 0.22;
    }

    50% {
        transform: translate(-50%, -50%) translateY(34px) scaleX(0.98);
        opacity: 0.62;
    }
}

@keyframes musicRibbonWave4 {
    0%,
    100% {
        transform: translate(-50%, -50%) translateY(42px) scaleX(0.86);
        opacity: 0.18;
    }

    50% {
        transform: translate(-50%, -50%) translateY(-32px) scaleX(1.04);
        opacity: 0.52;
    }
}

@keyframes musicRibbonDot {
    0%,
    100% {
        transform: translate3d(-18px, 10px, 0) scale(0.72);
        opacity: 0.18;
    }

    45% {
        transform: translate3d(26px, -16px, 0) scale(1);
        opacity: 0.88;
    }

    70% {
        transform: translate3d(44px, 8px, 0) scale(0.82);
        opacity: 0.34;
    }
}

@media (max-width: 780px) {
    .music-start-grid-two {
        grid-template-columns: 1fr;
    }

    .music-start-grid-two .music-start-option {
        min-height: 178px;
    }

    .music-ribbon-field {
        height: 160px;
    }

    .music-result-icon-actions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .music-icon-action {
        min-width: 0;
        min-height: 78px;
        border-radius: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .music-ribbon-field::before,
    .music-ribbon-line-1,
    .music-ribbon-line-2,
    .music-ribbon-line-3,
    .music-ribbon-line-4,
    .music-ribbon-dot {
        animation: none;
    }
}

/* ==========================================================
   Asylonia Music Generation - Round 4 Sine Light Ribbon
   ========================================================== */

.music-sine-wrap {
    height: clamp(220px, 27vw, 370px);
}

.music-sine-field {
    position: relative;
    z-index: 2;
    width: min(820px, 94vw);
    height: 230px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

.music-sine-field::before {
    content: "";
    position: absolute;
    inset: 20px 0;
    border-radius: 999px;
    background:
        radial-gradient(ellipse at center, rgba(255, 216, 132, 0.14), transparent 58%),
        linear-gradient(90deg, transparent, rgba(255, 216, 132, 0.08), transparent);
    filter: blur(10px);
    animation: musicSineBreath 6.4s ease-in-out infinite;
}

.music-sine-field::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(760px, 92vw);
    height: 1px;
    transform: translate(-50%, -50%);
    background: linear-gradient(90deg, transparent, rgba(255, 226, 158, 0.38), transparent);
    box-shadow:
        0 0 20px rgba(255, 216, 132, 0.38),
        0 0 54px rgba(255, 216, 132, 0.12);
}

.music-sine-svg {
    position: relative;
    z-index: 2;
    width: 112%;
    height: 100%;
    overflow: visible;
}

.music-sine-path {
    fill: none;
    stroke: url("#musicSineGold");
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: url("#musicSineGlow");
    transform-origin: center;
    will-change: transform, opacity, stroke-dashoffset;
}

.music-sine-core {
    stroke-width: 4.2;
    opacity: 0.95;
    stroke-dasharray: 620 250;
    animation:
        musicSineDriftCore 8.8s ease-in-out infinite,
        musicSineDash 7.2s linear infinite,
        musicSinePulse 5.4s ease-in-out infinite;
}

.music-sine-companion {
    stroke-width: 2.1;
    opacity: 0.44;
    stroke-dasharray: 520 300;
}

.music-sine-companion-1 {
    animation:
        musicSineDriftOne 10.5s ease-in-out infinite,
        musicSineDashSoft 9s linear infinite;
}

.music-sine-companion-2 {
    animation:
        musicSineDriftTwo 12.2s ease-in-out infinite,
        musicSineDashSoft 10.6s linear infinite reverse;
    opacity: 0.36;
}

.music-sine-companion-3 {
    stroke-width: 1.45;
    opacity: 0.26;
    stroke-dasharray: 420 360;
    animation:
        musicSineDriftThree 14.6s ease-in-out infinite,
        musicSineDashSoft 12s linear infinite;
}

.music-sine-orb {
    position: absolute;
    z-index: 3;
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 236, 184, 0.96);
    box-shadow:
        0 0 16px rgba(255, 216, 132, 0.95),
        0 0 42px rgba(255, 216, 132, 0.28);
    opacity: 0.34;
    animation: musicSineOrb 9s ease-in-out infinite;
}

.music-sine-orb-1 {
    left: 18%;
    top: 54%;
    animation-delay: 0s;
}

.music-sine-orb-2 {
    left: 38%;
    top: 40%;
    animation-delay: -2.2s;
}

.music-sine-orb-3 {
    left: 62%;
    top: 57%;
    animation-delay: -4.6s;
}

.music-sine-orb-4 {
    left: 80%;
    top: 43%;
    animation-delay: -6.8s;
}

@keyframes musicSineBreath {
    0%,
    100% {
        transform: scaleX(0.92) scaleY(0.82);
        opacity: 0.46;
    }

    50% {
        transform: scaleX(1.06) scaleY(1.02);
        opacity: 0.9;
    }
}

@keyframes musicSineDash {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -870;
    }
}

@keyframes musicSineDashSoft {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -640;
    }
}

@keyframes musicSinePulse {
    0%,
    100% {
        opacity: 0.72;
        stroke-width: 3.2;
    }

    45% {
        opacity: 1;
        stroke-width: 4.6;
    }

    60% {
        opacity: 0.82;
        stroke-width: 3.8;
    }
}

@keyframes musicSineDriftCore {
    0%,
    100% {
        transform: translateX(-22px) translateY(0) scaleY(0.92);
    }

    50% {
        transform: translateX(22px) translateY(-3px) scaleY(1.08);
    }
}

@keyframes musicSineDriftOne {
    0%,
    100% {
        transform: translateX(28px) translateY(-14px) scaleY(0.86);
    }

    50% {
        transform: translateX(-26px) translateY(10px) scaleY(1.08);
    }
}

@keyframes musicSineDriftTwo {
    0%,
    100% {
        transform: translateX(-32px) translateY(18px) scaleY(0.96);
    }

    50% {
        transform: translateX(30px) translateY(-10px) scaleY(1.16);
    }
}

@keyframes musicSineDriftThree {
    0%,
    100% {
        transform: translateX(38px) translateY(-2px) scaleY(0.74);
    }

    50% {
        transform: translateX(-36px) translateY(4px) scaleY(1);
    }
}

@keyframes musicSineOrb {
    0%,
    100% {
        transform: translate3d(-36px, 12px, 0) scale(0.72);
        opacity: 0.12;
    }

    35% {
        transform: translate3d(0, -14px, 0) scale(1);
        opacity: 0.82;
    }

    70% {
        transform: translate3d(42px, 10px, 0) scale(0.82);
        opacity: 0.28;
    }
}

@media (max-width: 780px) {
    .music-sine-wrap {
        height: 230px;
    }

    .music-sine-field {
        height: 170px;
        width: 96vw;
    }

    .music-sine-core {
        stroke-width: 3.4;
    }

    .music-sine-companion {
        stroke-width: 1.7;
    }
}

@media (prefers-reduced-motion: reduce) {
    .music-sine-field::before,
    .music-sine-core,
    .music-sine-companion-1,
    .music-sine-companion-2,
    .music-sine-companion-3,
    .music-sine-orb {
        animation: none;
    }
}

/* ==========================================================
   Asylonia Music Generation - Round 5 Mnemosyne Canvas Ribbon
   ========================================================== */

.music-mnemo-canvas-wrap {
    height: clamp(230px, 28vw, 380px);
}

.music-mnemo-canvas-wrap::before {
    content: "";
    position: absolute;
    width: min(760px, 92vw);
    height: min(330px, 42vw);
    border-radius: 999px;
    background:
        radial-gradient(ellipse at center, rgba(255, 216, 132, 0.12), transparent 62%);
    filter: blur(12px);
    animation: musicMnemoCanvasBreath 6.4s ease-in-out infinite;
}

.music-mnemo-canvas {
    position: relative;
    z-index: 3;
    width: min(860px, 94vw);
    height: 260px;
    display: block;
    border-radius: 999px;
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
}

@keyframes musicMnemoCanvasBreath {
    0%,
    100% {
        opacity: 0.46;
        transform: scaleX(0.92) scaleY(0.84);
    }

    50% {
        opacity: 0.88;
        transform: scaleX(1.06) scaleY(1);
    }
}

@media (max-width: 780px) {
    .music-mnemo-canvas-wrap {
        height: 240px;
    }

    .music-mnemo-canvas {
        width: 96vw;
        height: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .music-mnemo-canvas-wrap::before {
        animation: none;
    }
}

/* ==========================================================
   Asylonia Music Generation - Patch A State + Mock API
   ========================================================== */

[data-mock-finish] {
    display: none !important;
}

.music-api-error-card {
    width: min(760px, 100%);
    margin: 20px auto 0;
    padding: 22px;
    border-radius: 24px;
    border: 1px solid rgba(255, 153, 102, 0.34);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 153, 102, 0.10), transparent 58%),
        rgba(28, 13, 8, 0.78);
    color: rgba(255, 246, 230, 0.9);
    text-align: left;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
}

.music-api-error-card[hidden] {
    display: none !important;
}

.music-api-error-card h3 {
    margin: 0 0 8px;
    color: #ffd884;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
}

.music-api-error-card p {
    margin: 0;
    color: rgba(255, 246, 230, 0.68);
    line-height: 1.65;
}

.music-api-error-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.music-api-error-actions button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 216, 132, 0.28);
    background: rgba(255, 255, 255, 0.03);
    color: #e5c070;
    font-weight: 900;
    cursor: pointer;
}

.music-api-error-actions button:hover {
    border-color: rgba(255, 216, 132, 0.72);
    background: rgba(255, 216, 132, 0.09);
}

.music-generation-debug-note {
    width: min(760px, 100%);
    margin: 12px auto 0;
    color: rgba(248, 237, 218, 0.42);
    font-size: 0.82rem;
    text-align: center;
}

.music-ready-grid article.is-updated {
    border-color: rgba(255, 216, 132, 0.34);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.08), transparent 54%),
        rgba(255, 255, 255, 0.03);
}

.music-player-mock.is-loading {
    opacity: 0.72;
}

@media (max-width: 780px) {
    .music-api-error-card {
        border-radius: 20px;
        padding: 18px;
    }

    .music-api-error-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* ==========================================================
   Asylonia Music Generation - Patch C1 Brand Polish
   ========================================================== */

.music-generation-debug-note {
    display: none !important;
}

.music-api-error-card p[data-api-error-message] {
    color: rgba(255, 246, 230, 0.72);
}

.music-brand-word {
    color: #ffd884;
}

/* ==========================================================
   Patch C2 - Start icons + Result cleanup
   Uses current classes: music-css-icon / music-start-option
   ========================================================== */

/* Reset old book/note pseudo icons if old classes still exist nearby */
.music-icon-story-sheet::before,
.music-icon-story-sheet::after,
.music-icon-lyric-note::before,
.music-icon-lyric-note::after {
    content: none !important;
}

/* Story = single paper sheet with writing lines */
.music-icon-story-sheet {
    position: relative;
}

.music-icon-story-sheet > i {
    position: absolute;
    left: 21px;
    top: 15px;
    width: 24px;
    height: 33px;
    border: 2px solid rgba(255, 230, 164, 0.94);
    border-radius: 5px;
    background:
        linear-gradient(135deg, transparent 0 73%, rgba(255, 216, 132, 0.18) 74% 100%),
        rgba(16, 10, 5, 0.5);
    box-shadow:
        0 0 14px rgba(255, 216, 132, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.music-icon-story-sheet > i::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -2px;
    width: 9px;
    height: 9px;
    border-left: 2px solid rgba(255, 230, 164, 0.82);
    border-bottom: 2px solid rgba(255, 230, 164, 0.82);
    border-bottom-left-radius: 4px;
    background: rgba(255, 216, 132, 0.12);
}

.music-icon-story-sheet > b,
.music-icon-story-sheet > em,
.music-icon-story-sheet::after {
    position: absolute;
    left: 28px;
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 230, 164, 0.88);
    box-shadow: 0 0 8px rgba(255, 216, 132, 0.18);
}

.music-icon-story-sheet > b {
    top: 27px;
}

.music-icon-story-sheet > em {
    top: 34px;
    font-style: normal;
}

.music-icon-story-sheet::after {
    content: "";
    top: 41px;
}

/* Lyrics = clear music note */
.music-icon-lyric-note {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1;
    color: #ffd884;
    text-shadow:
        0 0 12px rgba(255, 216, 132, 0.45),
        0 0 28px rgba(255, 216, 132, 0.18);
}

/* Keep start icon circle consistent */
.music-start-option .music-css-icon {
    overflow: hidden;
}

/* Result page after removing Rescue */
.music-result-secondary-actions {
    margin-top: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.music-result-secondary-actions button {
    min-width: 220px;
}

.music-result-icon-actions {
    margin-top: 20px;
    margin-bottom: 18px;
}

.music-result-card .music-player-mock {
    margin-top: 22px;
}

@media (max-width: 780px) {
    .music-icon-story-sheet > i {
        left: 20px;
        top: 14px;
        width: 23px;
        height: 31px;
    }

    .music-icon-story-sheet > b,
    .music-icon-story-sheet > em,
    .music-icon-story-sheet::after {
        left: 27px;
        width: 11px;
    }

    .music-icon-story-sheet > b {
        top: 26px;
    }

    .music-icon-story-sheet > em {
        top: 33px;
    }

    .music-icon-story-sheet::after {
        top: 40px;
    }

    .music-icon-lyric-note {
        font-size: 2.45rem;
    }

    .music-result-secondary-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .music-result-secondary-actions button {
        min-width: 0;
        width: 100%;
    }
}

/* ==========================================================
   Patch C3 - Clean UI + Result Flow Polish
   ========================================================== */

.music-pill-brand {
    color: #ffd884;
    border-color: rgba(255, 216, 132, 0.42);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.12), transparent 58%),
        rgba(255, 255, 255, 0.035);
    box-shadow: 0 0 22px rgba(255, 216, 132, 0.08);
}

.music-pill-brand:hover {
    border-color: rgba(255, 216, 132, 0.72);
    background: rgba(255, 216, 132, 0.08);
}

.music-result-secondary-actions button[data-create-another-version] {
    border-color: rgba(255, 216, 132, 0.34);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.08), transparent 54%),
        rgba(255, 255, 255, 0.035);
}

.music-result-secondary-actions button[data-create-another-version]:hover {
    border-color: rgba(255, 216, 132, 0.76);
    background: rgba(255, 216, 132, 0.1);
}

/* ==========================================================
   Asylonia Music Generation - Song Title Field
   ========================================================== */

.music-title-shell {
    max-width: 800px;
    margin: 0 auto 16px;
    border-radius: 22px;
    border: 1px solid rgba(214, 174, 92, 0.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.07), transparent 54%),
        rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.music-title-shell label {
    display: block;
    padding: 16px 18px;
}

.music-title-shell span {
    display: block;
    color: rgba(248, 237, 218, 0.48);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
    margin-bottom: 7px;
}

.music-title-shell input {
    width: 100%;
    min-height: 44px;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 246, 230, 0.96);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.25rem, 2.4vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.025em;
}

.music-title-shell input::placeholder {
    color: rgba(248, 237, 218, 0.34);
}

/* ==========================================================
   Asylonia Music Generation - Clean Song Title Card
   ========================================================== */

.music-title-shell {
    display: none !important;
}

.music-title-card {
    max-width: 800px;
    margin: 0 auto 18px;
    padding: 18px 20px 16px;
    border-radius: 24px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.10), transparent 58%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
        rgba(0, 0, 0, 0.18);
    box-shadow:
        0 18px 52px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.music-title-card label {
    display: block;
    margin: 0 0 8px;
    color: rgba(248, 237, 218, 0.52);
    font-size: 0.78rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-weight: 900;
}

.music-title-card input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(255, 246, 230, 0.98);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.55rem, 3vw, 2.45rem);
    line-height: 1.15;
    font-weight: 900;
    letter-spacing: -0.04em;
}

.music-title-card input::placeholder {
    color: rgba(248, 237, 218, 0.30);
}

.music-title-card:focus-within {
    border-color: rgba(255, 216, 132, 0.58);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.24),
        0 0 32px rgba(255, 216, 132, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

@media (max-width: 780px) {
    .music-title-card {
        padding: 16px;
        border-radius: 20px;
    }

    .music-title-card input {
        font-size: 1.55rem;
    }
}

/* ==========================================================
   Asylonia Music Generation - Multiline Story Input
   ========================================================== */

.music-story-input-row {
    align-items: end;
    border-radius: 26px;
}

.music-story-input-row textarea {
    width: 100%;
    min-height: 48px;
    max-height: 150px;
    border: 0;
    outline: 0;
    resize: none;
    overflow-y: auto;
    background: transparent;
    color: #fff6e6;
    padding: 13px 12px 10px;
    font: inherit;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.music-story-input-row textarea::placeholder {
    color: rgba(248, 237, 218, 0.42);
}

.music-story-input-row button {
    flex: 0 0 auto;
}

/* ==========================================================
   Asylonia Music Generation - Story Textarea Gold Scrollbar
   Add near end of asylonia-music-generation.css
   ========================================================== */

.music-story-input-row textarea {
    scrollbar-width: thin;
    scrollbar-color: rgba(229, 192, 112, 0.82) rgba(18, 11, 6, 0.82);
}

/* Chrome / Edge / Safari */
.music-story-input-row textarea::-webkit-scrollbar {
    width: 10px;
}

.music-story-input-row textarea::-webkit-scrollbar-track {
    background: rgba(18, 11, 6, 0.86);
    border-radius: 999px;
    margin: 8px 0;
    box-shadow: inset 0 0 0 1px rgba(214, 174, 92, 0.10);
}

.music-story-input-row textarea::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg, rgba(255, 230, 164, 0.96), rgba(202, 142, 48, 0.92));
    border: 2px solid rgba(18, 11, 6, 0.86);
    border-radius: 999px;
    box-shadow:
        0 0 12px rgba(255, 216, 132, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.music-story-input-row textarea::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(180deg, rgba(255, 241, 196, 1), rgba(225, 164, 61, 0.98));
}


/* ==========================================================
   Music Result - native audio color polish
   ========================================================== */

.music-result-card audio,
.music-player-mock audio {
    width: 100%;
    accent-color: #d6ae5c;
    filter: sepia(0.32) saturate(0.86) brightness(0.84);
}

/* ==========================================================
   Asylonia Music Generation - Patch D1 Start Modes + Prompt Choices
   ========================================================== */

.music-start-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 980px;
}

.music-start-grid-four .music-start-option {
    min-height: 210px;
}

.music-icon-instrumental,
.music-icon-wordless {
    position: relative;
}

.music-icon-instrumental > i {
    position: absolute;
    left: 17px;
    top: 35px;
    width: 30px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 230, 164, 0.9);
    box-shadow:
        0 -8px 0 rgba(255, 230, 164, 0.56),
        0 8px 0 rgba(255, 230, 164, 0.38),
        0 0 14px rgba(255, 216, 132, 0.28);
}

.music-icon-instrumental > b {
    position: absolute;
    left: 21px;
    top: 22px;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 230, 164, 0.9);
    border-radius: 999px;
    box-shadow: 0 0 16px rgba(255, 216, 132, 0.22);
}

.music-icon-wordless > i,
.music-icon-wordless > b,
.music-icon-wordless > em {
    position: absolute;
    display: block;
    border-radius: 999px;
    background: rgba(255, 230, 164, 0.92);
    box-shadow: 0 0 14px rgba(255, 216, 132, 0.28);
}

.music-icon-wordless > i {
    left: 17px;
    top: 33px;
    width: 10px;
    height: 10px;
}

.music-icon-wordless > b {
    left: 29px;
    top: 24px;
    width: 10px;
    height: 26px;
}

.music-icon-wordless > em {
    left: 42px;
    top: 30px;
    width: 10px;
    height: 14px;
    font-style: normal;
}

.music-choice-lab {
    max-width: 800px;
    margin: 0 auto 18px;
    display: grid;
    gap: 13px;
}

.music-choice-lab section {
    padding: 14px;
    border-radius: 18px;
    border: 1px solid rgba(214, 174, 92, 0.16);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 216, 132, 0.055), transparent 58%),
        rgba(0, 0, 0, 0.14);
}

.music-choice-lab section > span {
    display: block;
    margin-bottom: 10px;
    color: rgba(248, 237, 218, 0.48);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 900;
}

.music-choice-lab button {
    min-height: 34px;
    margin: 0 7px 8px 0;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.22);
    background: rgba(255, 255, 255, 0.026);
    color: rgba(255, 230, 164, 0.86);
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.music-choice-lab button:hover,
.music-choice-lab button.is-selected {
    transform: translateY(-1px);
    border-color: rgba(255, 216, 132, 0.74);
    background: rgba(255, 216, 132, 0.10);
    color: #ffd884;
    box-shadow: 0 0 22px rgba(255, 216, 132, 0.10);
}

@media (max-width: 1180px) {
    .music-start-grid-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 760px;
    }
}

@media (max-width: 780px) {
    .music-start-grid-four {
        grid-template-columns: 1fr;
    }

    .music-start-grid-four .music-start-option {
        min-height: 178px;
    }

    .music-choice-lab button {
        width: 100%;
        margin-right: 0;
    }
}


/* ==========================================================
   Asylonia Music Generation - Patch M5 Icons + Result Player + Choices
   ========================================================== */

.music-start-symbol {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.music-start-symbol::before,
.music-start-symbol::after,
.music-start-symbol > i,
.music-start-symbol > b,
.music-start-symbol > em {
    display: none !important;
    content: none !important;
}

.music-start-ms-icon,
.music-result-ms-icon,
.music-action-ms-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    overflow: hidden;
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
}

.music-start-ms-icon {
    color: #ffd884;
    font-size: 32px;
    font-variation-settings: 'FILL' 0, 'wght' 460, 'GRAD' 0, 'opsz' 32;
    text-shadow: 0 0 16px rgba(255, 216, 132, 0.34);
}

.music-start-option:hover .music-start-ms-icon,
.music-start-option.is-selected .music-start-ms-icon {
    font-variation-settings: 'FILL' 1, 'wght' 580, 'GRAD' 0, 'opsz' 32;
    transform: scale(1.03);
}

.music-generation-note-card {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: 24px 28px;
    text-align: center;
}

.music-generation-note-card h2 {
    margin: 4px 0 8px;
    color: #fff5e4;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.65rem, 3vw, 2.55rem);
    line-height: 1.06;
}

.music-generation-note-card p:not(.music-kicker) {
    color: rgba(248, 237, 218, 0.64);
    line-height: 1.7;
}

.music-result-player {
    width: min(100%, 760px);
    margin: 24px auto 0;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 28px;
    border: 1px solid rgba(216, 168, 79, 0.32);
    background:
        radial-gradient(circle at 18% 50%, rgba(255, 216, 132, 0.16), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.018)),
        rgba(8, 5, 3, 0.70);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 18px 44px rgba(0, 0, 0, 0.24),
        0 0 28px rgba(255, 216, 132, 0.06);
    text-align: left;
}

.music-result-player audio {
    display: none;
}

.music-result-play,
.music-result-sound {
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        filter 0.16s ease,
        background 0.16s ease,
        color 0.16s ease;
}

.music-result-play {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border: 1px solid rgba(255, 230, 164, 0.54);
    color: #1a1005;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 246, 216, 0.56), transparent 42%),
        linear-gradient(180deg, #ffe39b 0%, #d39d3a 62%, #9f6617 100%);
    box-shadow:
        0 0 22px rgba(255, 216, 132, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.music-result-sound {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid rgba(216, 168, 79, 0.36);
    color: #f4d48a;
    background: rgba(255, 255, 255, 0.040);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        0 6px 16px rgba(0, 0, 0, 0.16);
}

.music-result-play:hover,
.music-result-sound:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow:
        0 0 24px rgba(255, 216, 132, 0.32),
        0 10px 22px rgba(0, 0, 0, 0.24);
}

.music-result-player.is-playing .music-result-play {
    color: #fff8e8;
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 238, 180, 0.45), transparent 42%),
        linear-gradient(180deg, #c99631 0%, #7d4b12 100%);
}

.music-result-player-main {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.music-result-player-titleline strong,
.music-result-player-titleline small {
    display: block;
}

.music-result-player-titleline strong {
    color: #fff5e4;
    font-size: 1.04rem;
    line-height: 1.24;
}

.music-result-player-titleline small {
    margin-top: 2px;
    color: rgba(248, 237, 218, 0.58);
    font-size: 0.82rem;
}

.music-result-progress-wrap {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.music-result-progress {
    width: 100%;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(90deg, #ffd884 0%, #b98225 100%);
    outline: none;
    cursor: pointer;
    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.46),
        0 0 14px rgba(255, 216, 132, 0.10);
}

.music-result-progress::-webkit-slider-runnable-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 216, 132, 0.92), rgba(170, 103, 24, 0.82));
}

.music-result-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -4px;
    border-radius: 999px;
    border: 2px solid #2a1707;
    background: #ffe19a;
    box-shadow:
        0 0 0 3px rgba(255, 216, 132, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.38);
}

.music-result-progress::-moz-range-track {
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 216, 132, 0.92), rgba(170, 103, 24, 0.82));
}

.music-result-progress::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 2px solid #2a1707;
    background: #ffe19a;
    box-shadow:
        0 0 0 3px rgba(255, 216, 132, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.38);
}

.music-result-time {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: rgba(255, 241, 212, 0.58);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.02em;
}

.music-result-ms-icon {
    font-size: 23px;
    font-variation-settings: 'FILL' 1, 'wght' 680, 'GRAD' 0, 'opsz' 24;
}

.music-result-sound .music-result-ms-icon {
    font-size: 20px;
    color: currentColor;
}

.music-action-ms-icon {
    color: #ffd884;
    font-size: 31px;
    font-variation-settings: 'FILL' 0, 'wght' 470, 'GRAD' 0, 'opsz' 32;
    text-shadow: 0 0 16px rgba(255, 216, 132, 0.22);
}

.music-icon-action:hover .music-action-ms-icon,
.music-icon-action.is-active .music-action-ms-icon,
.music-icon-action[aria-pressed="true"] .music-action-ms-icon {
    font-variation-settings: 'FILL' 1, 'wght' 640, 'GRAD' 0, 'opsz' 32;
}

.music-icon-action.is-disabled,
.music-icon-action[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.music-result-secondary-actions .music-pill-button,
.music-result-secondary-actions a.music-pill-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(214, 174, 92, 0.30);
    color: #e9c878;
    background: rgba(255, 255, 255, 0.035);
    font-weight: 900;
    text-decoration: none;
}

.music-choice-lab {
    max-width: 860px;
}

@media (max-width: 780px) {
    .music-result-player {
        grid-template-columns: 44px minmax(0, 1fr) 38px;
        border-radius: 24px;
        padding: 10px;
    }

    .music-result-player-titleline strong {
        font-size: 0.95rem;
    }
}