:root {
    color-scheme: light;
    --ink: #17211b;
    --muted: #5e6a64;
    --paper: #fbfaf6;
    --panel: #ffffff;
    --line: #dedbd1;
    --brand: #265a4b;
    --brand-strong: #173f35;
    --accent: #b84b35;
    --accent-soft: #f7dfd8;
    --gold: #d5a343;
    --blue: #315f8f;
    --green-soft: #e3f1e9;
    --red-soft: #f7dfda;
    --shadow: 0 18px 45px rgba(23, 33, 27, 0.1);
    --radius: 8px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f4f7f3;
    --muted: #aab7b1;
    --paper: #0f1a1d;
    --panel: #172427;
    --line: #314247;
    --brand: #62c49d;
    --brand-strong: #a9eed2;
    --accent: #ff8c64;
    --accent-soft: #40251f;
    --gold: #ffd166;
    --blue: #8fbaff;
    --green-soft: #183c33;
    --red-soft: #40221f;
    --shadow: 0 18px 45px rgba(0, 0, 0, 0.34);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--paper);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--ink);
    background:
        linear-gradient(180deg, rgba(49, 95, 143, 0.08), transparent 320px),
        var(--paper);
}

[hidden] {
    display: none !important;
}

:root[data-theme="dark"] body {
    background:
        radial-gradient(circle at 18% 0%, rgba(98, 196, 157, 0.14), transparent 34rem),
        linear-gradient(180deg, rgba(143, 186, 255, 0.08), transparent 360px),
        var(--paper);
}

a {
    color: var(--brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
input {
    font: inherit;
}

code {
    padding: 0.15rem 0.3rem;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #f4f1e9;
}

:root[data-theme="dark"] code {
    background: #10181a;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid rgba(222, 219, 209, 0.78);
    background: rgba(251, 250, 246, 0.92);
    backdrop-filter: blur(14px);
}

:root[data-theme="dark"] .site-header {
    border-bottom-color: rgba(74, 96, 101, 0.72);
    background: rgba(15, 26, 29, 0.9);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ink);
    font-weight: 800;
}

.brand:hover {
    text-decoration: none;
}

.brand-mark {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.18);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.38rem;
}

.learning-status-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.35rem;
    min-width: 0;
}

.learning-status-item {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-width: 3.2rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.learning-status-item:hover {
    color: var(--brand);
    text-decoration: none;
}

.learning-status-item strong {
    font-size: 1rem;
    font-weight: 950;
    line-height: 1;
}

.learning-status-level-icon {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0.16rem;
    border-radius: 8px;
    background: conic-gradient(#3182ce var(--level-progress), #d4d8d5 0);
}

.learning-status-level-icon img {
    display: block;
    width: 100%;
    height: 100%;
    border: 2px solid var(--panel);
    border-radius: 6px;
    object-fit: cover;
}

.learning-status-flame {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2.35rem;
    font-size: 1.75rem;
    line-height: 1;
}

.learning-status-streak.is-inactive {
    color: #8b9390;
}

.learning-status-streak.is-inactive .learning-status-flame {
    filter: grayscale(1);
    opacity: 0.48;
}

.learning-status-streak.is-active strong {
    color: #d76520;
}

.learning-status-coin-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0.18rem solid #d99c18;
    border-radius: 50%;
    color: #7a5000;
    background: #ffd45b;
    box-shadow: inset 0 0 0 0.16rem rgba(255, 255, 255, 0.38), 0 0.12rem 0.3rem rgba(82, 57, 8, 0.2);
    font-size: 0.75rem;
    line-height: 1;
}

.learning-status-coins strong {
    color: #9b6a00;
}

:root[data-theme="dark"] .learning-status-level-icon {
    background: conic-gradient(#8fbaff var(--level-progress), #435055 0);
}

:root[data-theme="dark"] .learning-status-streak.is-inactive {
    color: #737d7b;
}

:root[data-theme="dark"] .learning-status-coins strong {
    color: #ffd166;
}

.nav-button {
    position: relative;
    display: inline-grid;
    grid-template-columns: auto minmax(0, auto);
    align-items: center;
    gap: 0.38rem;
    min-height: 2.65rem;
    padding: 0.34rem 0.58rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 850;
}

.nav-badge {
    position: absolute;
    top: -0.38rem;
    right: -0.38rem;
    z-index: 3;
    display: grid;
    place-items: center;
    min-width: 1.28rem;
    height: 1.28rem;
    padding: 0 0.28rem;
    border: 2px solid var(--paper);
    border-radius: 999px;
    color: #fff;
    background: #e34242;
    box-shadow: 0 0.16rem 0.45rem rgba(91, 26, 26, 0.28);
    font-size: 0.68rem;
    font-weight: 950;
    line-height: 1;
}

.nav-button:hover,
.nav-button.is-active {
    border-color: rgba(38, 90, 75, 0.18);
    color: var(--ink);
    background: rgba(38, 90, 75, 0.08);
    text-decoration: none;
}

.nav-button.is-active {
    background: var(--green-soft);
}

.nav-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 7px;
    background: #fffdf8;
    color: var(--brand-strong);
    box-shadow: inset 0 0 0 1px rgba(23, 33, 27, 0.15);
    font-size: 1.08rem;
    line-height: 1;
}

.nav-button.is-active .nav-icon {
    background: var(--brand);
    color: #fff;
    box-shadow: none;
}

.nav-icon-keys {
    display: block;
    padding: 0;
    border: 1px solid rgba(23, 33, 27, 0.18);
    background: #fffdf8;
    overflow: hidden;
}

.nav-icon-keys span {
    display: none;
}

.nav-icon-keys img {
    position: absolute;
    inset: 0.16rem;
    width: calc(100% - 0.32rem);
    height: calc(100% - 0.32rem);
    border: 1px solid rgba(15, 26, 29, 0.28);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 0.18rem 0.4rem rgba(0, 0, 0, 0.18);
    object-fit: cover;
    object-position: center;
}

.nav-icon-keys::before {
    display: none;
}

.nav-icon-keys::after {
    display: none;
}

.nav-button.is-active .nav-icon-keys {
    border-color: rgba(255, 255, 255, 0.42);
    background: #f9f5e9;
}

:root[data-theme="dark"] .nav-icon-keys {
    border-color: #54666b;
    background: #f7f4ea;
    box-shadow: inset 0 0 0 1px rgba(15, 26, 29, 0.2);
}

:root[data-theme="dark"] .nav-icon-keys img {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow: 0 0.2rem 0.55rem rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .nav-button.is-active .nav-icon-keys {
    border-color: #a9eed2;
    background: #fff8df;
    box-shadow: 0 0 0 2px rgba(98, 196, 157, 0.18);
}

.nav-icon-note::before {
    content: "♪";
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.55rem;
    line-height: 1;
    transform: translateY(-0.03rem);
}

.nav-icon-target::before {
    content: "◎";
    font-size: 1.25rem;
}

.nav-icon-book::before {
    content: "▤";
    font-size: 1.2rem;
}

.nav-icon-spark::before {
    content: "✦";
    font-size: 1.25rem;
}

.nav-icon-store::before {
    content: "$";
    font-size: 1.22rem;
    font-weight: 950;
}

.nav-icon-people::before,
.nav-icon-people::after {
    content: "";
    position: absolute;
    background: currentColor;
}

.nav-icon-profile::before {
    content: "";
    width: 0.58rem;
    height: 0.58rem;
    margin-top: -0.45rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0.75rem 0 0.27rem currentColor;
}

.nav-icon-people::before {
    width: 0.48rem;
    height: 0.48rem;
    top: 0.42rem;
    left: 50%;
    border-radius: 999px;
    box-shadow: 0.54rem 0 0 currentColor;
    transform: translateX(-0.51rem);
}

.nav-icon-people::after {
    width: 1.22rem;
    height: 0.54rem;
    left: 50%;
    bottom: 0.38rem;
    border-radius: 999px 999px 0.35rem 0.35rem;
    transform: translateX(-50%);
}

.nav-icon-gear::before {
    content: "⚙";
    font-size: 1rem;
}

.nav-icon-exit::before {
    content: "↗";
    font-size: 1.16rem;
}

.nav-icon-moon::before {
    content: "◐";
    font-size: 1.22rem;
}

.bottom-nav {
    position: fixed;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.35rem;
    width: min(50rem, calc(100% - 1.5rem));
    margin: 0 auto;
    padding: 0.45rem;
    border: 1px solid rgba(222, 219, 209, 0.82);
    border-radius: 16px;
    background: rgba(251, 250, 246, 0.94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.bottom-nav .nav-button {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.24rem;
    min-height: 3.7rem;
    padding: 0.35rem 0.2rem;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    text-align: center;
}

.bottom-nav .nav-icon {
    width: 1.9rem;
    height: 1.9rem;
}

.bottom-nav .nav-label {
    font-size: 0.68rem;
    line-height: 1.05;
}

.bottom-nav .nav-button {
    --nav-tint: var(--brand);
    --nav-tint-soft: rgba(38, 90, 75, 0.12);
    border-color: rgba(38, 90, 75, 0.1);
}

.bottom-nav .nav-button:nth-child(1) {
    --nav-tint: #2f7dd1;
    --nav-tint-soft: rgba(47, 125, 209, 0.14);
}

.bottom-nav .nav-button:nth-child(2) {
    --nav-tint: #d23b91;
    --nav-tint-soft: rgba(210, 59, 145, 0.16);
}

.bottom-nav .nav-button:nth-child(3) {
    --nav-tint: #d5a343;
    --nav-tint-soft: rgba(213, 163, 67, 0.18);
}

.bottom-nav .nav-button:nth-child(4) {
    --nav-tint: #14a6a0;
    --nav-tint-soft: rgba(20, 166, 160, 0.16);
}

.bottom-nav .nav-button:nth-child(5) {
    --nav-tint: #7b5bd6;
    --nav-tint-soft: rgba(123, 91, 214, 0.16);
}

.bottom-nav .nav-button:nth-child(6) {
    --nav-tint: #2f9c72;
    --nav-tint-soft: rgba(47, 156, 114, 0.16);
}

.bottom-nav .nav-button:nth-child(7) {
    --nav-tint: #ff8c64;
    --nav-tint-soft: rgba(255, 140, 100, 0.18);
}

.bottom-nav .nav-button .nav-icon {
    border: 1px solid color-mix(in srgb, var(--nav-tint) 45%, transparent);
    background-color: color-mix(in srgb, var(--nav-tint) 14%, #fffdf8);
    color: var(--nav-tint);
}

.bottom-nav .nav-button:hover,
.bottom-nav .nav-button.is-active {
    border-color: color-mix(in srgb, var(--nav-tint) 42%, transparent);
    background: var(--nav-tint-soft);
}

.bottom-nav .nav-button.is-active .nav-icon {
    background-color: var(--nav-tint);
    color: #fff;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--nav-tint) 20%, transparent);
}

.bottom-nav .nav-button.is-active .nav-icon-keys,
.bottom-nav .nav-button:hover .nav-icon-keys {
    background: #fffdf8;
}

.theme-toggle {
    appearance: none;
}

:root[data-theme="dark"] .nav-icon {
    background: #10181a;
    box-shadow: inset 0 0 0 1px rgba(244, 247, 243, 0.16);
}

:root[data-theme="dark"] .nav-button:hover,
:root[data-theme="dark"] .nav-button.is-active {
    border-color: rgba(98, 196, 157, 0.25);
    background: rgba(98, 196, 157, 0.12);
}

:root[data-theme="dark"] .bottom-nav {
    border-color: rgba(74, 96, 101, 0.72);
    background: rgba(15, 26, 29, 0.92);
}

:root[data-theme="dark"] .bottom-nav .nav-button {
    border-color: color-mix(in srgb, var(--nav-tint) 18%, transparent);
}

:root[data-theme="dark"] .bottom-nav .nav-button .nav-icon {
    background-color: color-mix(in srgb, var(--nav-tint) 18%, #10181a);
    color: color-mix(in srgb, var(--nav-tint) 82%, #ffffff);
}

:root[data-theme="dark"] .bottom-nav .nav-button:hover,
:root[data-theme="dark"] .bottom-nav .nav-button.is-active {
    border-color: color-mix(in srgb, var(--nav-tint) 48%, transparent);
    background: color-mix(in srgb, var(--nav-tint) 18%, transparent);
}

:root[data-theme="dark"] .bottom-nav .nav-button.is-active .nav-icon {
    background-color: var(--nav-tint);
    color: #fff;
}

:root[data-theme="dark"] .nav-badge {
    border-color: #0f1a1d;
}

.page-shell {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 7.5rem;
}

.flash {
    width: min(1180px, calc(100% - 2rem));
    margin: 1rem auto 0;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 6px 20px rgba(23, 33, 27, 0.07);
}

.flash-warning,
.form-error {
    border-color: #e8b3a7;
    color: #8f2e21;
    background: var(--red-soft);
}

.auth-layout,
.dashboard-hero,
.result-hero,
.placement-intro,
.lesson-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(310px, 0.94fr);
    gap: clamp(1.2rem, 3vw, 2rem);
    align-items: center;
}

.auth-copy,
.dashboard-hero,
.result-hero,
.placement-intro,
.lesson-hero {
    min-height: 360px;
}

.auth-copy h1,
.dashboard-hero h1,
.result-hero h1,
.placement-intro h1,
.lesson-hero h1,
.top-heading h1 {
    max-width: 780px;
    margin: 0.2rem 0 0.8rem;
    font-size: clamp(2.1rem, 5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.auth-copy p,
.dashboard-hero p,
.result-hero p,
.placement-intro p,
.lesson-hero p,
.section-heading p {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.65;
}

.dashboard-piano-hero {
    display: grid;
    gap: clamp(1rem, 3vw, 1.8rem);
    margin-bottom: 1.35rem;
}

.dashboard-piano-copy {
    max-width: 760px;
}

.dashboard-piano-copy h1 {
    max-width: 780px;
    margin: 0.2rem 0 0.8rem;
    font-size: clamp(2.1rem, 5vw, 4.8rem);
    line-height: 0.98;
    letter-spacing: 0;
}

.dashboard-piano-copy p:not(.eyebrow) {
    max-width: 680px;
    color: var(--muted);
    font-size: 1.06rem;
    line-height: 1.65;
}

.public-logo-panel {
    overflow: hidden;
    padding: 0;
    border-radius: 10px;
}

.public-logo-panel img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.public-feature-grid {
    margin-top: clamp(1.5rem, 4vw, 3rem);
}

.dashboard-piano-shell {
    position: relative;
    min-height: clamp(20rem, 44vw, 30rem);
    padding: clamp(0.75rem, 2.4vw, 1.2rem);
    border: 1px solid #151c19;
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%),
        #111714;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.dashboard-white-keys {
    position: absolute;
    inset: clamp(0.75rem, 2.4vw, 1.2rem);
    top: clamp(4.8rem, 9vw, 6.3rem);
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    align-items: stretch;
}

.dashboard-white-key {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    min-height: 15rem;
    padding: clamp(0.65rem, 1.8vw, 1rem) 0.55rem;
    border: 1px solid #c9c4b8;
    border-bottom-width: 0.55rem;
    background:
        linear-gradient(180deg, #fffefa, #f1ece0);
    color: #17211b;
    text-align: center;
    text-decoration: none;
    box-shadow: inset 0 -1.4rem 0 rgba(213, 163, 67, 0.1);
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.dashboard-white-key:first-child {
    border-radius: 7px 0 0 7px;
}

.dashboard-white-key:last-child {
    border-radius: 0 7px 7px 0;
}

.dashboard-white-key:hover,
.dashboard-white-key:focus-visible {
    border-color: var(--gold);
    background: linear-gradient(180deg, #fffefa, #fff3c8);
    text-decoration: none;
}

.dashboard-white-key:active {
    transform: translateY(0.25rem);
}

.dashboard-white-key.is-primary {
    background: linear-gradient(180deg, #fafff7, #dff4e6);
    border-color: #9acaae;
    box-shadow: inset 0 -1.4rem 0 rgba(38, 90, 75, 0.12);
}

.dashboard-white-key span {
    color: var(--brand-strong);
    font-size: clamp(0.72rem, 1.5vw, 0.9rem);
    font-weight: 950;
    text-transform: uppercase;
}

.dashboard-white-key strong {
    display: block;
    margin-top: 0.2rem;
    color: #17211b;
    font-size: clamp(0.86rem, 1.7vw, 1.08rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.dashboard-white-key small {
    display: block;
    margin-top: 1.2rem;
    color: #68736d;
    font-size: clamp(1.45rem, 3vw, 2.1rem);
    font-weight: 950;
    line-height: 1;
}

.dashboard-black-keys {
    position: absolute;
    inset: clamp(0.75rem, 2.4vw, 1.2rem);
    z-index: 3;
    pointer-events: none;
}

.dashboard-black-key {
    position: absolute;
    top: 0;
    left: calc((100% / 8) * var(--key-left));
    display: grid;
    align-content: end;
    justify-items: center;
    width: calc(100% / 8 * 0.72);
    height: clamp(7.8rem, 18vw, 12rem);
    padding: 0.65rem 0.25rem;
    border-radius: 0 0 8px 8px;
    background: linear-gradient(180deg, #050606, #171d1a);
    color: #fff;
    box-shadow: inset 0 -0.7rem 0 rgba(255, 255, 255, 0.06), 0 0.5rem 1.1rem rgba(0, 0, 0, 0.24);
}

.dashboard-black-key span {
    color: #b9c3bd;
    font-size: clamp(0.58rem, 1.3vw, 0.72rem);
    font-weight: 900;
    text-transform: uppercase;
}

.dashboard-black-key strong {
    color: #fff;
    font-size: clamp(0.92rem, 2.2vw, 1.45rem);
    line-height: 1;
}

:root[data-theme="dark"] .dashboard-piano-shell {
    border-color: #273539;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
        #080d0f;
}

:root[data-theme="dark"] .dashboard-white-key {
    border-color: #88958f;
    background: linear-gradient(180deg, #f7f5ee, #d8d3c7);
    color: #10181a;
}

:root[data-theme="dark"] .dashboard-white-key strong {
    color: #10181a;
}

.eyebrow {
    margin: 0 0 0.5rem;
    color: var(--accent);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.panel {
    padding: clamp(1rem, 2.6vw, 1.45rem);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.auth-form {
    display: grid;
    gap: 1rem;
}

.auth-form h2,
.panel h2,
.lesson-card h2,
.lesson-card h3 {
    margin: 0 0 0.75rem;
    letter-spacing: 0;
}

label {
    display: grid;
    gap: 0.4rem;
    color: var(--ink);
    font-weight: 750;
}

.field-help {
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 650;
    line-height: 1.35;
}

.check-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink);
    font-weight: 750;
}

.check-option input {
    width: 1.05rem;
    min-height: 1.05rem;
    accent-color: var(--brand);
}

.check-option span {
    line-height: 1.35;
}

input {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid #cfc9bd;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}

input:focus {
    outline: 3px solid rgba(49, 95, 143, 0.22);
    border-color: var(--blue);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    border-color: #42555a;
    background: #10181a;
    color: var(--ink);
}

:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
    color: #7f8f89;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.7rem 1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
}

.button:hover {
    text-decoration: none;
}

.button.primary {
    color: #fff;
    background: var(--brand);
}

.button.primary:hover {
    background: var(--brand-strong);
}

.button.secondary {
    color: var(--ink);
    border-color: var(--line);
    background: #fff;
}

.button.secondary:hover {
    border-color: var(--brand);
    background: var(--green-soft);
}

:root[data-theme="dark"] .button.primary {
    color: #0f1a1d;
}

:root[data-theme="dark"] .button.secondary {
    color: var(--ink);
    border-color: #42555a;
    background: #172427;
}

:root[data-theme="dark"] .button.secondary:hover {
    border-color: var(--brand);
    background: var(--green-soft);
}

.button.compact {
    min-height: 2.2rem;
    padding: 0.45rem 0.7rem;
}

.ai-panel .button.compact {
    max-width: 100%;
    white-space: normal;
}

.placement-ai-panel {
    border-color: rgba(97, 200, 162, 0.55);
    background: linear-gradient(135deg, rgba(97, 200, 162, 0.18), rgba(218, 180, 72, 0.12));
}

.placement-ai-callout {
    border-width: 2px;
    box-shadow: 0 18px 44px rgba(38, 90, 75, 0.14);
}

.placement-ai-callout h2 {
    font-size: clamp(1.45rem, 4vw, 2.2rem);
}

:root[data-theme="dark"] .placement-ai-panel {
    border-color: rgba(97, 200, 162, 0.7);
    background: linear-gradient(135deg, rgba(97, 200, 162, 0.16), rgba(218, 180, 72, 0.08));
}

.button.full {
    width: 100%;
}

.button[disabled] {
    cursor: wait;
    opacity: 0.72;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.2rem;
}

.small-text {
    color: var(--muted);
    font-size: 0.9rem;
}

.source-ref-box {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line);
}

.source-ref-box .eyebrow {
    margin-bottom: 0.45rem;
}

.source-ref-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.source-ref {
    display: grid;
    gap: 0.12rem;
    max-width: 18rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(38, 90, 75, 0.18);
    border-radius: 6px;
    color: var(--ink);
    background: var(--green-soft);
    font-size: 0.82rem;
    line-height: 1.3;
}

.source-ref:hover {
    text-decoration: none;
    border-color: rgba(38, 90, 75, 0.38);
}

.source-ref span {
    color: var(--muted);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.keyboard-wrap {
    width: 100%;
}

.keyboard-help,
.screen-piano-status {
    margin: 0 0 0.55rem;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
}

.screen-piano-status {
    margin: 0.45rem 0 0;
    font-weight: 800;
}

.screen-piano-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-top: 0.6rem;
}

.screen-piano-controls .button.compact {
    min-height: 2.1rem;
    padding: 0.42rem 0.65rem;
}

.screen-piano-controls .button[disabled] {
    cursor: not-allowed;
}

.screen-piano-selected {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 800;
}

.keyboard {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(32px, 1fr));
    min-height: clamp(170px, 28vw, 250px);
    padding: 0.8rem;
    border: 1px solid #1c2420;
    border-radius: var(--radius);
    background: #1b211e;
    box-shadow: var(--shadow);
}

.white-key {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    min-width: 0;
    padding: 0.8rem 0.2rem;
    border: 1px solid #cfc8bb;
    border-bottom-width: 5px;
    background: #fffdf8;
    color: inherit;
    cursor: pointer;
    font: inherit;
    touch-action: manipulation;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.white-key:first-child {
    border-radius: 5px 0 0 5px;
}

.white-key:nth-child(8) {
    border-radius: 0 5px 5px 0;
}

.white-key span {
    color: var(--muted);
    font-weight: 900;
    pointer-events: none;
}

.black-key {
    position: absolute;
    left: calc(0.8rem + ((100% - 1.6rem) / 8) * (var(--key-left) + 0.68));
    top: 0.8rem;
    z-index: 2;
    width: calc((100% - 1.6rem) / 8 * 0.64);
    height: 58%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0.55rem 0.2rem;
    border-radius: 0 0 5px 5px;
    border: 0;
    background: #151816;
    color: inherit;
    cursor: pointer;
    font: inherit;
    box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.06);
    touch-action: manipulation;
    transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.black-key span {
    color: #fff;
    font-size: 0.74rem;
    font-weight: 850;
    text-align: center;
    pointer-events: none;
}

.black-key small {
    display: block;
    color: #cfc8bd;
    font-size: 0.68rem;
}

.white-key.is-highlighted {
    background: #fff3c8;
    border-color: #d7a62d;
}

.black-key.is-highlighted {
    background: var(--accent);
}

.white-key:focus-visible,
.black-key:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

.white-key:hover {
    background: #fff0b5;
    border-color: #d7a62d;
}

.black-key:hover {
    background: #3a483f;
}

.white-key:active,
.white-key.is-playing {
    transform: translateY(4px);
    box-shadow: inset 0 8px 12px rgba(38, 59, 47, 0.12);
}

.white-key.is-playing:not(.is-selected) {
    background: #fff8dc;
    border-color: #d9d2c6;
}

.black-key:active,
.black-key.is-playing {
    transform: translateY(5px);
    box-shadow: inset 0 -4px 0 rgba(255, 255, 255, 0.04);
}

.black-key.is-playing:not(.is-selected) {
    background: #202722;
}

.white-key.is-selected {
    background: #fff0b5;
    border-color: #d7a62d;
    box-shadow: inset 0 -8px 0 #d7a62d;
}

.black-key.is-selected {
    background: #3a483f;
    box-shadow: inset 0 -8px 0 rgba(255, 255, 255, 0.09), 0 0 0 2px #d7a62d;
}

.grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-panel {
    padding: 1rem;
}

.compact-panel h2 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

.compact-panel p:not(.eyebrow) {
    margin: 0;
    color: var(--muted);
    line-height: 1.5;
}

.stat-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.course-progress-summary {
    margin-top: 1rem;
}

.recommended-review-panel {
    border-color: #c99743;
    background: #fff9ed;
}

.background-summary-panel {
    margin: 1rem 0;
    border-color: #c99743;
    background: #fff9ed;
}

.store-item {
    align-content: space-between;
}

.store-price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    color: #4b3510;
    background: #fff0b5;
    font-size: 0.85rem;
    font-weight: 950;
}

.store-gift-form {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.store-gift-form select {
    width: 100%;
    min-height: 2.8rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid #cfc9bd;
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}

:root[data-theme="dark"] .store-price {
    color: #17120a;
    background: #ffd166;
}

.stat-number {
    color: var(--brand);
    font-size: clamp(2.8rem, 7vw, 5.4rem);
    font-weight: 950;
    line-height: 1;
}

.panel-heading,
.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.section-heading {
    margin: 2rem 0 1rem;
}

.top-heading {
    align-items: flex-start;
    margin-top: 0;
}

.skill-list {
    display: grid;
    gap: 0.9rem;
}

.path-panel {
    margin-top: 1rem;
}

.path-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.path-list li {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.7rem;
    min-height: 8rem;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.path-list li > span {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-weight: 950;
}

.path-list strong {
    display: block;
    margin-bottom: 0.3rem;
}

.path-list p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.module-list,
.module-review-list {
    display: grid;
    gap: 1rem;
}

.module-review-list .panel {
    display: grid;
    gap: 0.9rem;
}

.review-study-block {
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.review-study-block h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
}

.review-study-block p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.review-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.review-chip-row span {
    padding: 0.24rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f7efe2;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 800;
}

.review-mini-grid {
    gap: 0.8rem;
}

.module-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.module-row h3,
.module-detail h2 {
    margin: 0 0 0.45rem;
}

.module-row p,
.module-detail p {
    color: var(--muted);
    line-height: 1.55;
}

.module-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
    gap: 0.5rem;
    min-width: min(26rem, 100%);
}

.curriculum-detail {
    margin-top: 1rem;
}

.module-score {
    display: grid;
    justify-items: end;
    gap: 0.15rem;
    min-width: 5.5rem;
}

.module-score strong {
    color: var(--brand);
    font-size: 1.8rem;
    line-height: 1;
}

.module-score span {
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 850;
}

.curriculum-item-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 1rem;
}

.curriculum-item {
    display: grid;
    gap: 0.4rem;
    min-height: 8.25rem;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
}

.curriculum-item.is-next {
    border-color: var(--brand);
    background: var(--green-soft);
    box-shadow: inset 0 0 0 2px rgba(38, 90, 75, 0.14);
}

.curriculum-item:hover {
    border-color: var(--brand);
    background: var(--green-soft);
    text-decoration: none;
}

.curriculum-item small {
    align-self: end;
    color: var(--muted);
    font-weight: 850;
    text-transform: uppercase;
}

.item-action {
    align-self: end;
    color: var(--brand-strong);
    font-size: 0.82rem;
    font-weight: 900;
}

.curriculum-item-review,
.curriculum-item-quiz,
.curriculum-item-test,
.curriculum-item-exam {
    background: #f7f2e7;
}

.course-map {
    gap: 1.25rem;
    margin-top: 0;
}

.course-section {
    --module-accent: var(--brand);
    --module-accent-dark: var(--brand-strong);
    overflow: hidden;
    border-color: color-mix(in srgb, var(--module-accent) 54%, var(--line));
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(247, 242, 231, 0.72)),
        var(--panel);
    box-shadow:
        inset 0 0.22rem 0 var(--module-accent),
        var(--shadow);
}

.course-section:nth-child(8n+1) {
    --module-accent: #d23b91;
    --module-accent-dark: #971f65;
}

.course-section:nth-child(8n+2) {
    --module-accent: #2d8f73;
    --module-accent-dark: #17684f;
}

.course-section:nth-child(8n+3) {
    --module-accent: #cf8d1f;
    --module-accent-dark: #925f10;
}

.course-section:nth-child(8n+4) {
    --module-accent: #3b78d8;
    --module-accent-dark: #214f98;
}

.course-section:nth-child(8n+5) {
    --module-accent: #8b5fd6;
    --module-accent-dark: #5f3ca0;
}

.course-section:nth-child(8n+6) {
    --module-accent: #d65c3d;
    --module-accent-dark: #9b3825;
}

.course-section:nth-child(8n+7) {
    --module-accent: #0f9ca8;
    --module-accent-dark: #08717a;
}

.course-section:nth-child(8n) {
    --module-accent: #6674d8;
    --module-accent-dark: #414b9d;
}

.module-path-heading {
    justify-content: center;
    text-align: center;
}

.module-path-heading h2 {
    margin: 0;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1;
}

.unit-path {
    position: relative;
    display: grid;
    gap: 1.2rem;
    max-width: 38rem;
    margin: 1.4rem auto 0;
    padding: 0.5rem 0 1rem;
}

.unit-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.62rem;
    align-items: center;
    min-height: 6.2rem;
    padding: 0.2rem 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.unit-card::before {
    content: "";
    position: absolute;
    top: -1.65rem;
    bottom: -1.65rem;
    left: 50%;
    width: 0.28rem;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--module-accent) 20%, transparent), color-mix(in srgb, var(--module-accent) 48%, transparent), color-mix(in srgb, var(--module-accent) 20%, transparent));
    transform: translateX(-50%);
}

.unit-card:first-child::before {
    top: 50%;
}

.unit-card-final::before {
    bottom: 50%;
}

.unit-card-heading {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    min-width: 0;
    padding-left: 0;
    text-align: center;
}

.unit-card-heading::before {
    display: none;
}

.unit-card-current .unit-card-heading::before {
    border-color: #d23b91;
    background: #ffeff7;
}

.unit-card-complete .unit-card-heading::before {
    border-color: var(--brand);
    background: var(--green-soft);
}

.unit-card-heading span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.7rem;
    padding: 0.28rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--module-accent) 34%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--module-accent) 12%, #fffdf8);
    color: var(--module-accent-dark);
    font-size: 0.72rem;
    font-weight: 950;
    text-transform: uppercase;
}

.unit-card-heading h3 {
    display: none;
}

.unit-node-row {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    transition: transform 0.18s ease;
}

.unit-node-row.single {
    justify-content: center;
}

.unit-card:nth-child(4n+1) .unit-node-row {
    transform: translateX(-3.9rem);
}

.unit-card:nth-child(4n+2) .unit-node-row {
    transform: translateX(3.9rem);
}

.unit-card:nth-child(4n+3) .unit-node-row {
    transform: translateX(1.35rem);
}

.unit-card:nth-child(4n) .unit-node-row {
    transform: translateX(-1.35rem);
}

.unit-node {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 4.7rem;
    height: 4.7rem;
    min-height: 0;
    --part-count: 1;
    --parts-done: 0;
    --parts-angle: 0deg;
    padding: 0;
    border: 0.22rem solid color-mix(in srgb, var(--module-accent) 62%, #fff);
    border-radius: 999px;
    background: #d7dee0;
    color: #fff;
    text-align: center;
    box-shadow: 0 0.45rem 0 #aeb9bd, 0 0 0 0.18rem color-mix(in srgb, var(--module-accent) 24%, transparent), var(--shadow);
    isolation: isolate;
}

.unit-node.has-parts {
    border-color: transparent;
    background:
        radial-gradient(circle at center, #d7dee0 0 58%, transparent 59%),
        repeating-conic-gradient(
            from -90deg,
            transparent 0deg,
            transparent calc((360deg / var(--part-count)) - 7deg),
            rgba(255, 255, 255, 0.9) calc((360deg / var(--part-count)) - 7deg),
            rgba(255, 255, 255, 0.9) calc(360deg / var(--part-count))
        ),
        conic-gradient(
            from -90deg,
            color-mix(in srgb, var(--module-accent) 76%, #fff) 0deg var(--parts-angle),
            rgba(255, 255, 255, 0.86) var(--parts-angle) 360deg
        );
}

.unit-node.has-parts:not(.has-started-parts):not(.is-complete) {
    background:
        radial-gradient(circle at center, #d7dee0 0 58%, transparent 59%),
        repeating-conic-gradient(
            from -90deg,
            color-mix(in srgb, var(--module-accent) 68%, #fff) 0deg,
            color-mix(in srgb, var(--module-accent) 68%, #fff) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.86) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.86) calc(360deg / var(--part-count))
        );
}

.unit-node span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-size: 1.32rem;
    font-weight: 950;
    box-shadow: none;
}

.unit-node strong,
.unit-node small {
    display: none;
}

.unit-node-title {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.65rem);
    z-index: 4;
    display: none;
    width: max-content;
    max-width: min(16rem, 74vw);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow);
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1.25;
    transform: translateX(-50%);
}

.unit-node-title::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 0.45rem solid transparent;
    border-top-color: var(--panel);
    transform: translateX(-50%);
}

.unit-node.is-revealed .unit-node-title {
    display: block;
}

.unit-node.is-current {
    border-color: color-mix(in srgb, var(--module-accent) 76%, #fff);
    background: var(--module-accent);
    color: #fff;
    box-shadow: 0 0.45rem 0 var(--module-accent-dark), 0 0 0 0.18rem color-mix(in srgb, var(--module-accent) 32%, transparent), var(--shadow);
}

.unit-node.has-parts.is-current {
    background:
        radial-gradient(circle at center, var(--module-accent) 0 58%, transparent 59%),
        repeating-conic-gradient(
            from -90deg,
            transparent 0deg,
            transparent calc((360deg / var(--part-count)) - 7deg),
            rgba(255, 255, 255, 0.9) calc((360deg / var(--part-count)) - 7deg),
            rgba(255, 255, 255, 0.9) calc(360deg / var(--part-count))
        ),
        conic-gradient(
            from -90deg,
            color-mix(in srgb, var(--module-accent) 86%, #fff) 0deg var(--parts-angle),
            rgba(255, 255, 255, 0.9) var(--parts-angle) 360deg
        );
}

.unit-node.has-parts.is-current:not(.has-started-parts) {
    background:
        radial-gradient(circle at center, var(--module-accent) 0 58%, transparent 59%),
        repeating-conic-gradient(
            from -90deg,
            rgba(255, 255, 255, 0.88) 0deg,
            rgba(255, 255, 255, 0.88) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.9) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.9) calc(360deg / var(--part-count))
        );
}

.unit-node.is-current span {
    background: transparent;
}

.unit-node.is-complete {
    background: var(--brand);
    color: #fff;
    border-color: color-mix(in srgb, var(--module-accent) 72%, #fff);
    box-shadow: 0 0.45rem 0 var(--brand-strong), 0 0 0 0.18rem color-mix(in srgb, var(--module-accent) 28%, transparent), var(--shadow);
}

.unit-node.has-parts.is-complete {
    background:
        radial-gradient(circle at center, var(--brand) 0 58%, transparent 59%),
        repeating-conic-gradient(
            from -90deg,
            color-mix(in srgb, var(--brand) 76%, #fff) 0deg,
            color-mix(in srgb, var(--brand) 76%, #fff) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.88) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.88) calc(360deg / var(--part-count))
        );
}

.unit-node.is-complete span {
    background: transparent;
}

.unit-node.is-locked {
    background: #5a686c;
    border-color: color-mix(in srgb, var(--module-accent) 44%, #6d777a);
    box-shadow: 0 0.45rem 0 #404d51, 0 0 0 0.18rem color-mix(in srgb, var(--module-accent) 18%, transparent), var(--shadow);
    cursor: not-allowed;
    opacity: 0.48;
}

.unit-node.has-parts.is-locked {
    background:
        radial-gradient(circle at center, #5a686c 0 58%, transparent 59%),
        repeating-conic-gradient(
            from -90deg,
            #6d777a 0deg,
            #6d777a calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.22) calc((360deg / var(--part-count)) - 8deg),
            rgba(255, 255, 255, 0.22) calc(360deg / var(--part-count))
        );
}

.unit-node[href]:hover {
    transform: translateY(-0.08rem);
    text-decoration: none;
}

.unit-node:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 4px;
}

:root[data-theme="dark"] .course-section {
    background:
        linear-gradient(180deg, rgba(23, 36, 39, 0.96), rgba(16, 28, 31, 0.86)),
        var(--panel);
}

:root[data-theme="dark"] .unit-card-heading span {
    background: rgba(15, 26, 29, 0.82);
    border-color: rgba(98, 196, 157, 0.16);
}

.clean-list {
    margin: 0.8rem 0 0;
    padding-left: 1.1rem;
    color: var(--muted);
    line-height: 1.6;
}

.skill-row {
    display: grid;
    gap: 0.35rem;
}

.skill-row > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.skill-row span {
    color: var(--muted);
    font-weight: 850;
}

.mastery-bar {
    height: 0.58rem;
    overflow: hidden;
    border-radius: 999px;
    background: #ede8dd;
}

.mastery-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
}

.mastery-strong span {
    background: var(--brand);
}

.mastery-steady span {
    background: var(--gold);
}

.lesson-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.lesson-card {
    display: grid;
    align-content: space-between;
    gap: 1rem;
    min-height: 250px;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(23, 33, 27, 0.08);
}

.lesson-card p {
    color: var(--muted);
    line-height: 1.55;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 0.7rem;
    padding: 0.25rem 0.48rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    background: #fff;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: capitalize;
}

.status-mastered {
    color: var(--brand-strong);
    border-color: #afd3bf;
    background: var(--green-soft);
}

.status-review {
    color: #8f2e21;
    border-color: #e8b3a7;
    background: var(--red-soft);
}

.placement-form,
.practice-form {
    display: grid;
    gap: 1rem;
}

.lesson-section-piano {
    margin-top: 0.9rem;
}

.question-card {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: 0 10px 30px rgba(23, 33, 27, 0.07);
    min-width: 0;
}

.question-card legend {
    display: grid;
    float: left;
    box-sizing: border-box;
    gap: 0.3rem;
    width: 100%;
    margin: 0;
    padding: 0 0 0.8rem;
    font-size: 1.06rem;
    font-weight: 850;
}

.question-card legend span {
    color: var(--accent);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.question-card .choice-grid {
    clear: both;
}

.question-visual {
    clear: both;
    margin: 0.2rem 0 0.75rem;
}

.question-visual .keyboard-help,
.question-visual .screen-piano-status {
    display: none;
}

.question-visual .keyboard {
    min-height: 110px;
    padding: 0.45rem;
    border-radius: 8px;
    box-shadow: none;
}

.question-visual .white-key {
    padding: 0.55rem 0.12rem;
    border-bottom-width: 3px;
}

.question-visual .black-key {
    left: calc(0.45rem + ((100% - 0.9rem) / 8) * (var(--key-left) + 0.68));
    top: 0.45rem;
    width: calc((100% - 0.9rem) / 8 * 0.64);
    padding: 0.35rem 0.1rem;
}

.question-visual .white-key span,
.question-visual .black-key span {
    font-size: 0.68rem;
}

.question-visual .black-key small {
    font-size: 0.58rem;
}

.question-card::after {
    display: block;
    clear: both;
    content: "";
}

.stage-panel {
    margin-bottom: 1rem;
}

.stage-track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.8rem;
}

.compact-card {
    padding: 0.8rem 0;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.choice {
    min-width: 0;
}

.choice input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.choice span {
    display: flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.68rem 0.75rem;
    border: 1px solid #d9d2c6;
    border-radius: 6px;
    background: #fff;
    font-weight: 750;
    overflow-wrap: anywhere;
}

:root[data-theme="dark"] .choice span {
    border-color: #42555a;
    background: #10181a;
    color: var(--ink);
}

.choice input:checked + span {
    color: #fff;
    border-color: var(--brand);
    background: var(--brand);
}

:root[data-theme="dark"] .choice input:checked + span {
    color: #0f1a1d;
}

.choice input:focus + span {
    outline: 3px solid rgba(49, 95, 143, 0.2);
}

.sticky-submit {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: flex-end;
    padding: 1rem 0;
    background: linear-gradient(180deg, rgba(251, 250, 246, 0), var(--paper) 35%);
}

.score-ring {
    display: grid;
    place-items: center;
    width: 8.5rem;
    height: 8.5rem;
    margin-top: 1.4rem;
    border: 0.7rem solid var(--gold);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--shadow);
}

.score-ring span {
    color: var(--brand);
    font-size: 1.75rem;
    font-weight: 950;
}

.review-list {
    display: grid;
    gap: 0.65rem;
}

.review-item {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.review-item summary {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem;
    cursor: pointer;
    font-weight: 800;
}

.review-item summary span {
    flex: 0 0 auto;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.review-item.is-missed summary span {
    background: var(--accent);
}

.review-item p {
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    color: var(--muted);
}

.lesson-notes p {
    margin: 0 0 1rem;
    line-height: 1.65;
}

.lesson-intro {
    color: var(--muted);
    max-width: 68ch;
}

.lesson-part-meter {
    display: grid;
    gap: 0.45rem;
    margin: 0.2rem 0 0.9rem;
    color: var(--muted);
    font-size: 0.92rem;
    font-weight: 850;
}

.lesson-part-meter > div {
    height: 0.72rem;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel) 78%, var(--muted) 22%);
}

.lesson-part-meter i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--module-accent, var(--brand)), var(--brand));
    transition: width 0.2s ease;
}

.lesson-part-undo {
    justify-self: start;
    margin-top: 0.25rem;
}

.lesson-deep-dive {
    display: grid;
    gap: 0;
    margin-top: 1.1rem;
}

.lesson-detail-block {
    display: none;
    padding: 1.1rem 0;
    border-top: 1px solid var(--line);
    background: transparent;
}

.lesson-detail-block.is-active {
    display: block;
}

.lesson-detail-block.is-locked {
    display: none;
    opacity: 0.62;
}

.lesson-detail-block.is-done {
    display: none;
}

.lesson-detail-block.is-locked .lesson-part-body {
    display: none;
}

.lesson-detail-block.is-done .lesson-detail-heading span::after {
    content: " done";
    color: var(--brand);
}

.lesson-part-locked-note {
    display: none;
}

.lesson-detail-block.is-locked .lesson-part-locked-note {
    display: block;
    margin: 0.3rem 0 0;
    color: var(--muted);
    font-weight: 800;
}

.lesson-part-done {
    margin-top: 0.85rem;
}

.lesson-detail-block.is-done .lesson-part-done {
    color: var(--brand-strong);
    border-color: rgba(97, 200, 162, 0.45);
    background: var(--green-soft);
}

.practice-form.is-locked {
    opacity: 0.72;
}

.practice-form.is-locked .question-card,
.practice-form.is-locked > button[type="submit"] {
    pointer-events: none;
}

.lesson-practice-lock {
    margin: 0;
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(213, 163, 67, 0.38);
    border-radius: 6px;
    background: #fff8df;
    color: #60470f;
    font-weight: 850;
}

:root[data-theme="dark"] .lesson-practice-lock {
    border-color: rgba(213, 163, 67, 0.46);
    background: rgba(213, 163, 67, 0.12);
    color: #f4d892;
}

.lesson-detail-block h3 {
    margin: 0;
    font-size: 1.08rem;
}

.lesson-detail-heading {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.45rem;
}

.lesson-detail-heading span {
    color: var(--brand);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.lesson-detail-block p {
    max-width: 72ch;
    margin: 0 0 0.8rem;
    color: var(--muted);
    line-height: 1.72;
}

.lesson-step-list {
    display: grid;
    gap: 0.45rem;
    max-width: 68ch;
    margin: 0.9rem 0 0;
    padding: 0.85rem 1rem 0.85rem 2rem;
    border-left: 4px solid var(--gold);
    border-radius: 0 6px 6px 0;
    background: #fbfaf4;
    color: var(--ink);
    line-height: 1.5;
}

.lesson-step-list.compact {
    margin-bottom: 1rem;
}

.lesson-step-list li::marker {
    color: var(--brand);
}

.result-panel {
    margin: 1rem 0;
}

.assessment-skill-breakdown {
    display: grid;
    gap: 0.7rem;
    margin: 1rem 0;
    padding: 0.9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fffdf8;
}

.assessment-skill-breakdown h3 {
    margin: 0;
    font-size: 1rem;
}

.reward-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 1rem 0 0.4rem;
}

.reward-chip {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid #ddd4c5;
    border-radius: 8px;
    background: #fffdf8;
}

.reward-chip span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 850;
    text-transform: uppercase;
}

.reward-chip strong {
    color: var(--ink);
    font-size: 1.05rem;
}

.reward-chip-xp {
    border-color: #cfdcb4;
    background: #f7fbef;
}

.reward-chip-coins {
    border-color: #ead18f;
    background: #fff8df;
}

.reward-chip-streak {
    border-color: #d8c7ee;
    background: #f7f1ff;
}

.reward-note {
    margin-top: 0.35rem;
}

.inline-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
}

.inline-search-form input {
    min-height: 2.45rem;
    min-width: 0;
    padding: 0.62rem 0.75rem;
    border: 1px solid #d9d2c6;
    border-radius: 6px;
    font: inherit;
}

.form-label {
    display: block;
    margin: 0.9rem 0 0.35rem;
    font-weight: 850;
}

textarea {
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid #d9d2c6;
    border-radius: 6px;
    font: inherit;
    line-height: 1.5;
    resize: vertical;
}

:root[data-theme="dark"] .inline-search-form input,
:root[data-theme="dark"] textarea {
    border-color: #42555a;
    background: #10181a;
    color: var(--ink);
}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
    border-color: #42555a !important;
    background: #10181a !important;
    color: #f4f7f3 !important;
    caret-color: #f4f7f3;
}

:root[data-theme="dark"] input:-webkit-autofill,
:root[data-theme="dark"] input:-webkit-autofill:hover,
:root[data-theme="dark"] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f4f7f3;
    box-shadow: 0 0 0 1000px #10181a inset;
    transition: background-color 9999s ease-in-out 0s;
}

:root[data-theme="dark"] .button.secondary,
:root[data-theme="dark"] .choice span,
:root[data-theme="dark"] .review-item,
:root[data-theme="dark"] .score-ring,
:root[data-theme="dark"] .lesson-step-list,
:root[data-theme="dark"] .assessment-skill-breakdown,
:root[data-theme="dark"] .module-row,
:root[data-theme="dark"] .curriculum-item,
:root[data-theme="dark"] .source-ref,
:root[data-theme="dark"] .community-row,
:root[data-theme="dark"] .feed-item,
:root[data-theme="dark"] .heart-button,
:root[data-theme="dark"] .reward-chip,
:root[data-theme="dark"] .reward-chip-streak,
:root[data-theme="dark"] .reward-chip-freeze,
:root[data-theme="dark"] .background-summary-panel,
:root[data-theme="dark"] .recommended-review-panel {
    border-color: #42555a;
    background: #172427;
    color: var(--ink);
}

:root[data-theme="dark"] .button.secondary:hover,
:root[data-theme="dark"] .curriculum-item:hover,
:root[data-theme="dark"] .source-ref:hover,
:root[data-theme="dark"] .heart-button:hover,
:root[data-theme="dark"] .heart-button:focus-visible {
    border-color: var(--brand);
    background: #183c33;
    color: var(--ink);
}

:root[data-theme="dark"] .choice input:checked + span,
:root[data-theme="dark"] .status-mastered,
:root[data-theme="dark"] .review-item summary span {
    color: #0f1a1d;
    background: var(--brand);
}

:root[data-theme="dark"] .white-key {
    color: #17211b;
}

:root[data-theme="dark"] .white-key span {
    color: #3d4943;
}

:root[data-theme="dark"] .white-key.is-highlighted,
:root[data-theme="dark"] .white-key:hover,
:root[data-theme="dark"] .white-key.is-selected {
    color: #17211b;
    background: #fff0b5;
}

:root[data-theme="dark"] .white-key.is-playing:not(.is-selected) {
    color: #17211b;
    background: #fff8dc;
}

.community-list {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.community-row {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.community-row.is-current-user {
    border-color: #b8cf91;
    background: #f7fbef;
}

.friend-requests-panel {
    margin: 1rem 0;
    border-color: rgba(227, 66, 66, 0.35);
}

.community-row.is-waiting {
    border-color: rgba(227, 66, 66, 0.32);
    background: #fff7f7;
}

.community-row.is-friend {
    border-color: rgba(97, 200, 162, 0.34);
    background: #f3fbf7;
}

:root[data-theme="dark"] .community-row.is-waiting {
    border-color: rgba(227, 66, 66, 0.45);
    background: rgba(227, 66, 66, 0.09);
}

:root[data-theme="dark"] .community-row.is-friend {
    border-color: rgba(97, 200, 162, 0.4);
    background: rgba(97, 200, 162, 0.08);
}

.community-row span,
.feed-item .small-text {
    display: block;
    margin-top: 0.18rem;
}

.achievement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 1rem;
}

.achievement-card {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}

.achievement-card span {
    width: fit-content;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: #ece7dc;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.achievement-card strong {
    color: var(--ink);
}

.achievement-card p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.achievement-card.is-earned {
    border-color: #d6bb65;
    background: #fff9e8;
}

.achievement-card.is-earned span {
    background: #a87400;
    color: #fff;
}

.achievement-card.is-locked {
    opacity: 0.78;
}

.friends-feed-shell {
    width: min(46rem, 100%);
    margin: 0 auto 1.25rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    overflow: hidden;
}

.friends-feed-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem 0.9rem;
}

.friends-feed-header h1 {
    margin: 0.12rem 0 0;
    font-size: clamp(1.65rem, 4vw, 2.25rem);
    letter-spacing: 0;
}

.friends-feed-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.friends-feed-tabs a {
    position: relative;
    padding: 0.75rem 0.45rem;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 850;
    text-align: center;
    text-decoration: none;
}

.friends-feed-tabs a:hover,
.friends-feed-tabs a:focus-visible,
.friends-feed-tabs a.is-active {
    color: var(--brand-deep);
    background: color-mix(in srgb, var(--brand) 9%, transparent);
}

.friends-feed-tabs a.is-active::after {
    content: "";
    position: absolute;
    right: 0.7rem;
    bottom: -1px;
    left: 0.7rem;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--brand);
}

.friends-feed-tabs span {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-left: 0.15rem;
    padding: 0 0.25rem;
    border-radius: 999px;
    color: #fff;
    background: #d54062;
    font-size: 0.68rem;
}

.feed-list {
    display: grid;
}

.feed-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.5rem;
    gap: 1rem;
    min-width: 0;
    padding: 1.35rem;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

.feed-item:last-child {
    border-bottom: 0;
}

.feed-item-main {
    display: grid;
    min-width: 0;
}

.feed-person {
    align-items: center;
}

.feed-person-copy {
    display: grid;
    min-width: 0;
}

.feed-person-copy strong {
    overflow: hidden;
    color: var(--ink);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-person-copy span {
    margin-top: 0.12rem;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.feed-update-copy {
    margin: 0.9rem 0 0;
}

.feed-update-copy .feed-kind {
    margin: 0 0 0.18rem;
    color: var(--brand-deep);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.feed-update-copy h2 {
    margin: 0;
    color: var(--ink);
    font-size: 1.18rem;
    line-height: 1.3;
    letter-spacing: 0;
}

.feed-update-copy p {
    margin: 0.35rem 0 0;
    color: var(--muted);
    line-height: 1.5;
}

.feed-reaction-form {
    margin-top: 0.9rem;
}

.feed-achievement {
    align-self: center;
    display: grid;
    justify-items: center;
    min-width: 0;
    color: var(--ink);
    text-align: center;
}

.feed-achievement-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 4.35rem;
    height: 4.35rem;
    margin-bottom: 0.18rem;
}

.feed-achievement strong {
    max-width: 100%;
    color: #d88600;
    font-size: 1.7rem;
    line-height: 1;
    overflow-wrap: anywhere;
}

.feed-achievement small {
    margin-top: 0.2rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.feed-achievement-streak .feed-achievement-icon {
    width: 3.7rem;
    height: 4.3rem;
    border-radius: 48% 52% 45% 55% / 62% 58% 42% 38%;
    background: #ff9f0a;
    box-shadow: inset -0.55rem -0.45rem 0 #ff710a;
    transform: rotate(5deg);
}

.feed-achievement-streak .feed-achievement-icon::before {
    content: "";
    position: absolute;
    top: -0.65rem;
    right: 0.15rem;
    width: 2.15rem;
    height: 2.6rem;
    border-radius: 70% 30% 62% 38%;
    background: #ff9f0a;
    transform: rotate(28deg);
}

.feed-achievement-streak .feed-achievement-icon::after {
    content: "";
    position: absolute;
    bottom: 0.2rem;
    left: 1.05rem;
    width: 1.65rem;
    height: 2.25rem;
    border-radius: 55% 45% 50% 50%;
    background: #ffd43b;
}

.feed-achievement-score .feed-achievement-icon,
.feed-achievement-achievement .feed-achievement-icon,
.feed-achievement-lesson .feed-achievement-icon,
.feed-achievement-freeze .feed-achievement-icon {
    border: 0.42rem solid #e2a52c;
    border-radius: 50%;
    background: #ffd86b;
    box-shadow: 0 0.38rem 0 #b77914;
}

.feed-achievement-score .feed-achievement-icon::after,
.feed-achievement-achievement .feed-achievement-icon::after,
.feed-achievement-lesson .feed-achievement-icon::after,
.feed-achievement-freeze .feed-achievement-icon::after {
    content: "";
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand) 58%, #fff);
    box-shadow: inset 0 0 0 0.25rem rgba(255, 255, 255, 0.42);
}

.feed-achievement-lesson .feed-achievement-icon::after { border-radius: 4px; }
.feed-achievement-freeze .feed-achievement-icon::after { background: #71c9e8; transform: rotate(45deg); }

.feed-empty-state {
    display: grid;
    justify-items: start;
    gap: 0.45rem;
    padding: 2rem 1.35rem;
}

.feed-empty-state p {
    margin: 0;
    color: var(--muted);
}

:root[data-theme="dark"] .friends-feed-shell {
    border-color: #42555a;
    background: #10181a;
}

:root[data-theme="dark"] .feed-item {
    border-color: #314247;
    background: transparent;
}

:root[data-theme="dark"] .friends-feed-tabs a:hover,
:root[data-theme="dark"] .friends-feed-tabs a:focus-visible,
:root[data-theme="dark"] .friends-feed-tabs a.is-active,
:root[data-theme="dark"] .feed-update-copy .feed-kind {
    color: #88dfbe;
}

.heart-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 3.15rem;
    min-height: 2.45rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid #d9c8d0;
    border-radius: 7px;
    background: #fff7fa;
    color: #8f3154;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.heart-button:hover,
.heart-button:focus-visible {
    transform: translateY(-1px);
    border-color: #b94b78;
    background: #ffe9f2;
}

.heart-button.is-liked {
    border-color: #b94b78;
    background: #b94b78;
    color: #fff;
}

.heart-button span {
    font-size: 1.05rem;
    line-height: 1;
}

.segmented-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.check-list {
    display: grid;
    gap: 0.75rem;
}

.check-row {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding: 0.85rem;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.check-row span {
    display: inline-flex;
    justify-content: center;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    background: var(--brand);
    font-size: 0.76rem;
    font-weight: 900;
}

.check-row.fail span {
    background: var(--accent);
}

.check-row p {
    margin: 0.2rem 0 0;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.ai-feedback {
    display: grid;
    gap: 0.7rem;
}

.ai-answer-list {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
}

.ai-answer-card {
    padding: 1rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 0 8px 8px 0;
    background: #fff;
}

.ai-answer-card h3,
.ai-answer-card h4 {
    margin: 0.2rem 0 0.45rem;
}

.ai-answer-card p {
    color: var(--muted);
    line-height: 1.55;
}

.try-this {
    padding: 0.75rem;
    border: 1px solid #d7ccb9;
    border-radius: 6px;
    background: #fbfaf4;
}

.ai-feedback h3 {
    margin: 0.4rem 0 0;
}

.ai-feedback ul {
    margin: 0;
    padding-left: 1.2rem;
    color: var(--muted);
    line-height: 1.55;
}

.inline-action-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin: 0;
}

.app-reminder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.8rem;
    width: min(1180px, calc(100% - 2rem));
    margin: 0.75rem auto 0;
    padding: 0.75rem 0.8rem 0.75rem 1rem;
    border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--green-soft) 78%, var(--panel));
}

.app-reminder strong,
.app-reminder span {
    display: block;
}

.app-reminder span {
    margin-top: 0.15rem;
    color: var(--muted);
    font-size: 0.86rem;
}

.reminder-dismiss {
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: 1.45rem;
}

.profile-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1rem;
    padding: clamp(1rem, 3vw, 1.6rem);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel);
    box-shadow: var(--shadow);
}

.profile-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.profile-identity h1,
.profile-identity p {
    margin: 0.15rem 0;
}

.profile-avatar {
    display: grid;
    place-items: end center;
    width: 8.5rem;
    height: 10.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #dcecf2 0 67%, #d7dfc4 67%);
    overflow: hidden;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.profile-stats div {
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel) 88%, var(--green-soft));
}

.profile-stats strong,
.profile-stats span {
    display: block;
}

.profile-stats strong {
    color: var(--brand-strong);
    font-size: 1.65rem;
}

.profile-stats span {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-settings-grid {
    align-items: start;
}

.avatar-builder-preview {
    display: grid;
    place-items: end center;
    min-height: 12.5rem;
    margin: 0.75rem 0 1rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: linear-gradient(180deg, #dcecf2 0 70%, #d7dfc4 70%);
    overflow: hidden;
}

.avatar-builder-form,
.reminder-settings-form {
    display: grid;
    gap: 0.9rem;
}

.avatar-option-row {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
}

.avatar-option-row label,
.avatar-color-field legend {
    color: var(--ink);
    font-size: 0.84rem;
    font-weight: 850;
}

.avatar-option-row select {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--panel);
    font: inherit;
}

.avatar-color-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.avatar-color-field legend {
    margin-bottom: 0.5rem;
}

.avatar-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.avatar-swatch {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    cursor: pointer;
}

.avatar-swatch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.avatar-swatch span {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--panel);
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow: 0 0 0 1px var(--line);
}

.avatar-swatch input:checked + span {
    box-shadow: 0 0 0 3px var(--brand);
}

.avatar-swatch em {
    color: var(--muted);
    font-size: 0.62rem;
    font-style: normal;
}

.setting-toggle {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: start;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
}

.setting-toggle input {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
    accent-color: var(--brand);
}

.setting-toggle strong,
.setting-toggle small {
    display: block;
}

.setting-toggle small {
    margin-top: 0.2rem;
    color: var(--muted);
    line-height: 1.4;
}

.monthly-goals-panel {
    margin: 1rem 0;
}

.monthly-progress-track {
    height: 0.8rem;
    margin: 0.8rem 0 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 75%, transparent);
    overflow: hidden;
}

.monthly-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--gold));
}

.monthly-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.monthly-badge {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.monthly-badge.is-earned {
    border-color: #d6bb65;
    background: #fff9e8;
}

.monthly-badge.is-locked {
    opacity: 0.72;
}

.monthly-badge-medal {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: #fff;
    background: var(--gold);
    font-weight: 950;
}

.monthly-badge p,
.monthly-badge small {
    margin: 0.18rem 0 0;
    color: var(--muted);
}

.profile-achievement-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.community-person,
.feed-person {
    display: flex;
    min-width: 0;
    gap: 0.7rem;
    align-items: center;
}

.feed-person {
    align-items: flex-start;
}

.avatar-character {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 3.4rem;
    height: 3.4rem;
    object-fit: contain;
}

.avatar-character svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.avatar-small {
    width: 3.25rem;
    height: 3.25rem;
    border: 2px solid color-mix(in srgb, var(--panel) 88%, #fff);
    border-radius: 50%;
    background: #dcebf0;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent), 0 4px 12px rgba(20, 36, 31, 0.14);
    object-fit: cover;
    overflow: hidden;
}
.avatar-large { width: 8.2rem; height: 10.7rem; }
.avatar-builder { width: 10.5rem; height: 14.3rem; }

.avatar-portrait-bg { fill: #dcebf0; }
.avatar-portrait-halo { fill: #fff; opacity: 0.32; }
.avatar-shadow { fill: #17211b; }
.avatar-legs-shape { fill: var(--avatar-pants); }
.avatar-legs-shape path:first-child { filter: brightness(1.07); }

.avatar-shoes {
    fill: #292d35;
    stroke: #15181c;
    stroke-width: 2;
    stroke-linejoin: round;
}

.avatar-shoe-detail {
    fill: none;
    stroke: #f2f3f5;
    stroke-width: 2;
    opacity: 0.62;
}

.avatar-neck-shape,
.avatar-ear-shape,
.avatar-face-shape {
    fill: var(--avatar-skin);
    stroke: color-mix(in srgb, var(--avatar-skin) 72%, #493126);
    stroke-width: 2.2;
    stroke-linejoin: round;
}

.avatar-arm-shape {
    fill: none;
    stroke: var(--avatar-skin);
    stroke-width: 16;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avatar-shirt-shape {
    fill: var(--avatar-shirt);
    stroke: color-mix(in srgb, var(--avatar-shirt) 70%, #20242a);
    stroke-width: 2.3;
    stroke-linejoin: round;
}

.avatar-shirt-shadow { fill: #111; opacity: 0.13; }
.avatar-collar { fill: color-mix(in srgb, var(--avatar-shirt) 68%, #fff); }
.avatar-shirt-emblem rect { fill: #fff; opacity: 0.92; }
.avatar-shirt-emblem path { fill: none; stroke: #20242a; stroke-width: 2; }
.avatar-face-highlight { fill: #fff; opacity: 0.16; }

.avatar-hair-option,
.avatar-glasses-option,
.avatar-facial-option {
    display: none;
}

.hair-short .avatar-hair-option[data-style="short"],
.hair-curly .avatar-hair-option[data-style="curly"],
.hair-long .avatar-hair-option[data-style="long"],
.hair-mohawk .avatar-hair-option[data-style="mohawk"] {
    display: block;
}

.avatar-hair-option { fill: var(--avatar-hair); }

.glasses-round .avatar-glasses-option[data-style="round"],
.glasses-square .avatar-glasses-option[data-style="square"],
.glasses-sun .avatar-glasses-option[data-style="sun"] {
    display: block;
}

.avatar-glasses-option {
    fill: none;
    stroke: #323843;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.avatar-sunglasses { fill: #343b47; }
.avatar-sun-glint { fill: none; stroke: #fff; stroke-width: 2; opacity: 0.46; }

.facial-mustache .avatar-facial-option[data-style="mustache"],
.facial-goatee .avatar-facial-option[data-style="goatee"],
.facial-beard .avatar-facial-option[data-style="beard"] {
    display: block;
}

.avatar-facial-option { fill: var(--avatar-hair); }
.avatar-beard-mouth { fill: none; stroke: #f1aaa0; stroke-width: 3; stroke-linecap: round; }

.avatar-brows {
    fill: none;
    stroke: var(--avatar-hair);
    stroke-width: 4;
    stroke-linecap: round;
}

.avatar-eyes { fill: #fff; stroke: #49352b; stroke-width: 1.5; }
.avatar-iris { fill: #3f6f78; stroke: #1f3032; stroke-width: 1; }
.avatar-eye-glint { fill: #fff; stroke: none; }

.avatar-nose-shape {
    fill: none;
    stroke: color-mix(in srgb, var(--avatar-skin) 64%, #75452f);
    stroke-width: 3;
    stroke-linecap: round;
}

.avatar-smile { fill: none; stroke: #743c40; stroke-width: 4; stroke-linecap: round; }
.avatar-lip { fill: none; stroke: #d98282; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 900px) {
    .profile-hero {
        grid-template-columns: 1fr;
    }

    .monthly-badge-grid,
    .profile-achievement-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .auth-layout,
    .dashboard-hero,
    .result-hero,
    .placement-intro,
    .lesson-hero,
    .grid.two,
    .grid.three {
        grid-template-columns: 1fr;
    }

    .lesson-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .path-list,
    .curriculum-item-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .module-row {
        grid-template-columns: 1fr;
    }

    .module-actions {
        grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr));
    }

    .unit-card {
        grid-template-columns: 1fr;
    }

    .unit-node-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .auth-copy,
    .dashboard-hero,
    .result-hero,
    .placement-intro,
    .lesson-hero {
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .friends-feed-shell {
        width: auto;
        margin-right: -0.5rem;
        margin-left: -0.5rem;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
    }

    .friends-feed-header {
        padding: 1rem;
    }

    .friends-feed-header .button {
        padding-inline: 0.6rem;
    }

    .feed-item {
        grid-template-columns: minmax(0, 1fr) 5.4rem;
        gap: 0.65rem;
        padding: 1.15rem 1rem;
    }

    .feed-achievement-icon {
        width: 3.35rem;
        height: 3.35rem;
    }

    .feed-achievement-streak .feed-achievement-icon {
        width: 2.9rem;
        height: 3.4rem;
    }

    .feed-achievement-streak .feed-achievement-icon::before {
        top: -0.5rem;
        width: 1.7rem;
        height: 2rem;
    }

    .feed-achievement-streak .feed-achievement-icon::after {
        left: 0.8rem;
        width: 1.3rem;
        height: 1.8rem;
    }

    .feed-achievement strong {
        font-size: 1.35rem;
    }

    .feed-achievement small {
        font-size: 0.57rem;
    }

    .feed-update-copy h2 {
        font-size: 1.05rem;
    }

    .app-reminder {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .app-reminder .button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .reminder-dismiss {
        grid-column: 2;
        grid-row: 1;
    }

    .profile-identity {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-stats {
        grid-template-columns: 1fr 1fr;
    }

    .avatar-option-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .site-header {
        position: static;
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .site-header.has-learning-status {
        position: sticky;
        align-items: center;
        flex-direction: row;
        gap: 0.5rem;
        padding: 0.62rem 0.72rem;
    }

    .site-header.has-learning-status .brand {
        flex: 0 0 auto;
    }

    .site-header.has-learning-status .brand > span {
        display: none;
    }

    .learning-status-bar {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: clamp(0.55rem, 4vw, 1.2rem);
    }

    .learning-status-item {
        gap: 0.3rem;
        min-width: 2.75rem;
    }

    .learning-status-level-icon {
        width: 2.05rem;
        height: 2.05rem;
    }

    .learning-status-flame {
        width: 1.7rem;
        height: 2.05rem;
        font-size: 1.55rem;
    }

    .learning-status-coin-icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    .site-nav {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: flex-start;
        width: 100%;
        gap: 0.45rem;
    }

    .nav-button {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0.22rem;
        min-height: 4.15rem;
        padding: 0.42rem 0.25rem;
        text-align: center;
    }

    .nav-label {
        font-size: 0.72rem;
        line-height: 1.05;
    }

    .nav-icon {
        width: 1.95rem;
        height: 1.95rem;
    }

    .page-shell {
        width: min(100% - 1rem, 1180px);
        padding-top: 1rem;
    }

    .dashboard-piano-shell {
        min-height: 27rem;
        padding: 0.55rem;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .dashboard-white-keys {
        inset: 0.55rem;
        top: 4.3rem;
        min-width: 46rem;
    }

    .dashboard-black-keys {
        inset: 0.55rem;
        min-width: 46rem;
    }

    .dashboard-white-key {
        min-height: 21rem;
    }

    .dashboard-white-key span {
        font-size: 0.68rem;
    }

    .dashboard-white-key strong {
        font-size: 0.82rem;
    }

    .dashboard-white-key small {
        font-size: 1.45rem;
    }

    .dashboard-black-key {
        height: 8rem;
    }

    .lesson-grid,
    .choice-grid,
    .path-list,
    .curriculum-item-list,
    .unit-node-row,
    .unit-node-row.single,
    .module-actions,
    .achievement-grid,
    .reward-summary {
        grid-template-columns: 1fr;
    }

    .unit-card-heading {
        padding-left: 0;
    }

    .unit-path {
        gap: 1rem;
        max-width: 100%;
    }

    .unit-node {
        width: 4.15rem;
        height: 4.15rem;
    }

    .unit-card:nth-child(4n+1) .unit-node-row {
        transform: translateX(-2.2rem);
    }

    .unit-card:nth-child(4n+2) .unit-node-row {
        transform: translateX(2.2rem);
    }

    .unit-card:nth-child(4n+3) .unit-node-row {
        transform: translateX(0.75rem);
    }

    .unit-card:nth-child(4n) .unit-node-row {
        transform: translateX(-0.75rem);
    }

    .bottom-nav {
        right: 0.45rem;
        bottom: 0.45rem;
        left: 0.45rem;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        width: calc(100% - 0.9rem);
        padding: 0.34rem;
        border-radius: 14px;
    }

    .bottom-nav .nav-button {
        min-height: 3.45rem;
        padding: 0.28rem 0.1rem;
    }

    .bottom-nav .nav-icon {
        width: 1.68rem;
        height: 1.68rem;
    }

    .bottom-nav .nav-label {
        font-size: 0.58rem;
    }

    .panel-heading,
    .section-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .keyboard {
        min-height: 170px;
        padding: 0.55rem;
    }

    .black-key {
        left: calc(0.55rem + ((100% - 1.1rem) / 8) * (var(--key-left) + 0.68));
        top: 0.55rem;
        width: calc((100% - 1.1rem) / 8 * 0.66);
    }

    .check-row {
        grid-template-columns: 1fr;
    }
}