/* Desktop reading order: graphic, explanation, then chapter tabs. */
.lesson-snap-scroll, .lesson-card .lesson-short-label { display: none; }
@media (min-width: 1024px) {
  .lesson-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(360px, 1fr) auto auto; gap: 24px; padding: 24px 48px 32px; }
  .lesson-stage > .lesson-demo { grid-column: 1; grid-row: 1; width: 100%; min-width: 0; min-height: 360px; transform: none; }
  .lesson-side { display: contents; }
  .lesson-copy { grid-row: 2; grid-column: 1; justify-items: center; text-align: center; }
  .lesson-copy p { max-width: 680px; }
  .lesson-menu { grid-row: 3; grid-column: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .lesson-card { text-align: center; min-height: 44px; }
  .lesson-card strong { font-size: 13px; line-height: 1.5; }
}
@media (width < 1024px) {
  #lessonView.is-active { position: fixed; inset: var(--header-height) 0 0; padding: 0; overflow: hidden; background: var(--paper); }
  #lessonView .lesson-stage { position: relative; display: block; width: 100%; height: 100%; min-height: 0; min-width: 0; padding: 0; }
  #lessonView #lessonDemo, #lessonView .lesson-copy { display: none; }
  #lessonView .lesson-side { display: contents; }
  .lesson-snap-scroll {
    display: block; height: calc(100% - 64px - env(safe-area-inset-bottom));
    overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain; scrollbar-width: none;
  }
  .lesson-snap-scroll::-webkit-scrollbar { display: none; }
  .lesson-snap-section { height: 100%; min-height: 0; box-sizing: border-box; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 16px; padding: 24px clamp(20px, 5vw, 48px) 24px; scroll-snap-align: start; scroll-snap-stop: always; }
  .lesson-snap-section h2 { margin: 0; font-size: 15px; line-height: 1.5; font-weight: 500; color: var(--ink); }
  .lesson-snap-copy { margin: 0 auto; max-width: 620px; font-size: 13px; line-height: 1.8; color: var(--muted); text-align: center; word-break: keep-all; }
  .lesson-snap-graphic { position: relative; min-height: 0; min-width: 0; container-type: size; }
  .lesson-snap-graphic > :is(.lesson-color-demo, .lesson-rhythm-demo, .lesson-harmony-demo, .lesson-feedback-demo) { opacity: 1; pointer-events: auto; inset: 0; min-height: 0; height: 100%; transform: none; }
  .lesson-snap-graphic .lesson-color-demo { gap: clamp(3px, 2vw, 18px); }
  .lesson-snap-graphic .color-chip { max-width: 64px; }
  .lesson-snap-graphic .lesson-rhythm-grid { width: 100%; max-width: 540px; }
  .lesson-snap-graphic .lesson-feedback-demo { gap: 20px; }
  .lesson-snap-graphic .feedback-orb { width: min(220px, 52cqw, 60cqh); }
  .lesson-snap-graphic .lesson-harmony-demo { padding: 46px 0 0; }
  .lesson-snap-graphic .harmony-toolbar { top: 0; right: 0; }
  .lesson-snap-graphic .harmony-card-list { display: flex; width: 100%; height: 100%; padding: 0 0 12px; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .lesson-snap-graphic .harmony-card { flex: 0 0 100%; min-width: 0; height: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(80px, 1fr) auto; gap: 16px; transform: none; scroll-snap-align: start; }
  .lesson-snap-graphic .harmony-combo { grid-row: 1; min-width: 0; justify-self: center; align-self: center; gap: 8px; }
  .lesson-snap-graphic .harmony-card-copy { grid-row: 2; max-height: 100%; overflow-y: auto; }
  .lesson-snap-graphic .harmony-card strong { font-size: 12px; line-height: 1.65; }
  #lessonView .lesson-menu { position: absolute; inset: auto 0 0; height: calc(64px + env(safe-area-inset-bottom)); box-sizing: border-box; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 12px env(safe-area-inset-bottom); border-top: 1px solid var(--hairline); background: var(--paper); }
  #lessonView .lesson-card { min-width: 0; min-height: 44px; padding: 0 4px; text-align: center; color: var(--muted); }
  #lessonView .lesson-card > strong, #lessonView .lesson-card > span:not(.lesson-short-label) { display: none; }
  #lessonView .lesson-card .lesson-short-label { display: block; font-size: 12px; line-height: 1.5; }
  #lessonView .lesson-card.is-active { color: var(--ink); }
  #lessonView .lesson-card.is-active .lesson-short-label { text-decoration: underline; text-underline-offset: 8px; }
  #lessonView .lesson-card:hover { transform: none; }
}
@media (width < 1024px) {
  #lessonView .lesson-menu { border-radius: 0; box-shadow: none; }
  .lesson-snap-graphic .lesson-rhythm-row { grid-template-columns: 40px minmax(0, 1fr); gap: clamp(12px, 3vw, 28px); }
  .lesson-snap-graphic .lesson-rhythm-track { width: 100%; --lesson-gap: clamp(2px, .6vw, 6px); height: clamp(18px, 4vw, 34px); }
}

/* Global mobile navigation stays separate from lesson chapter tabs. */
.mobile-bottom-nav { display: none; }
@media (width < 640px) {
  :root { --bottom-nav-height: calc(56px + env(safe-area-inset-bottom)); }
  .mobile-bottom-nav {
    position: fixed; inset: auto 0 0; z-index: 1100; display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: var(--bottom-nav-height); box-sizing: border-box;
    padding: 0 16px env(safe-area-inset-bottom);
    border-top: 1px solid var(--hairline); background: var(--paper);
  }
  .mobile-bottom-nav .nav-button {
    position: relative; min-width: 0; min-height: 44px; padding: 0 8px;
    color: var(--muted); font-size: 12px; font-weight: 400;
    border: 0; border-radius: 0; background: transparent;
  }
  .mobile-bottom-nav .nav-button.is-active { color: var(--ink); font-weight: 500; }
  .mobile-bottom-nav .nav-button::after { content: none; }
  .mobile-bottom-nav .nav-button.is-active::after {
    content: ''; position: absolute; bottom: 9px; left: calc(50% - 7px);
    width: 14px; height: 1.5px; background: currentColor;
  }
  .site-header .nav > .nav-button { display: none; }
  #lessonView.is-active { bottom: var(--bottom-nav-height); }
  #lessonView .lesson-menu { height: 48px; padding-bottom: 0; border-top: 0; }
  .lesson-snap-scroll { height: calc(100% - 48px); }
  body.is-login-open .mobile-bottom-nav,
  body:has(.compose-view.is-playing) .mobile-bottom-nav { display: none; }
}

@media (width < 640px) {
  body .site-header .nav .user-status-area { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
}

/* Compact account actions and full lesson index. */
@media (width < 1024px) {
  .site-header .nav .user-status-button { display: none; }
  #lessonView .lesson-menu {
    inset: 12px auto auto 20px; width: max-content; max-width: calc(100% - 40px); height: auto;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 10px; padding: 0; border: 0; background: transparent; z-index: 2;
  }
  #lessonView .lesson-card { display: block; flex: none; width: max-content; max-width: 100%; height: auto; min-height: 0; padding: 0; margin: 0; text-align: left; line-height: 1; }
  #lessonView .lesson-card > strong { display: block; font-size: 12px; font-weight: 400; line-height: 1; }
  #lessonView .lesson-card .lesson-short-label { display: none; }
  #lessonView .lesson-card.is-active strong { text-decoration: none; font-weight: 500; }
  .lesson-snap-scroll { height: 100%; }
  .lesson-snap-section { grid-template-rows: minmax(0, 1fr) auto; padding-top: 136px; padding-bottom: clamp(40px, 14dvh, 124px); }
  .lesson-snap-section h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lesson-snap-graphic .feedback-orb {
    width: min(220px, 52cqw, 60cqh); height: min(220px, 52cqw, 60cqh);
    flex: none; border-radius: 50%; animation: none; transform: none;
  }
}

@media (width < 1024px) {
  #lessonMoodOrb.has-glass-sphere { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  #lessonMoodOrb.has-glass-sphere::before, #lessonMoodOrb.has-glass-sphere::after { content: none; }
}

/* Only the harmony chapter uses an opaque centred card. */
@media (width < 1024px) {
  .lesson-preview-card { display: contents; }
  .lesson-snap-section[data-track="colorHarmony"] {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
    padding: 104px 24px 32px;
  }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card {
    width: min(100%, 480px); height: min(100%, 500px); min-height: 0; flex-shrink: 1;
    box-sizing: border-box; display: grid;
    grid-template-rows: minmax(0, 1fr); gap: 24px;
    padding: 28px 24px; border-radius: 24px;
    border: 0; background: #f5f5f5;
    box-shadow: none;
  }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-snap-copy { font-size: 13px; line-height: 1.65; max-width: 340px; flex-shrink: 0; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { background: #242424; border: 0; box-shadow: none; }
}
@media (width < 768px) and (max-height: 650px) {
  .lesson-snap-section[data-track="colorHarmony"] { padding: 92px 16px 12px; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { padding: 16px; gap: 12px; border-radius: 20px; }
}

@media (width < 1024px) {
  .site-header { border-bottom: 0; box-shadow: none; }
}

.harmony-dial { display: none; }
@media (width < 1024px) {
  .lesson-snap-section[data-track="colorHarmony"] { gap: 12px; padding-top: 160px; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card {
    position: relative; isolation: isolate; background: #f8f8f8; padding: 24px;
  }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before,
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after {
    content: ''; position: absolute; border-radius: inherit; pointer-events: none;
    background: #eeeeee; inset: -18px 6% auto; height: 36px; z-index: -1;
  }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after { inset: -36px 14% auto; height: 36px; background: #e5e5e5; z-index: -2; }
  .lesson-snap-graphic .lesson-harmony-demo { padding: 0; overflow: visible; }
  .lesson-snap-graphic .harmony-toolbar { display: none; }
  .lesson-snap-graphic .harmony-card-list { display: block; position: relative; overflow: hidden; padding: 0; }
  .lesson-snap-graphic .harmony-card { display: none; width: 100%; height: 100%; }
  .lesson-snap-graphic .harmony-card.is-dial-active { display: grid; }
  .harmony-dial { position: relative; display: flex; justify-content: center; gap: 0; width: max-content; height: 32px; flex: none; }
  .harmony-dial button { position: relative; width: 28px; height: 32px; padding: 0; border: 0; background: none; color: #c9c9c9; }
  .harmony-dial button::before { content: ''; display: block; margin: auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .harmony-dial button[aria-current="true"] { color: var(--ink); }
  .harmony-dial button[aria-current="true"]::before { height: 6px; }
  .harmony-dial-output { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { background: #242424; }
  html[data-theme="dark"] .lesson-preview-card::before { background: #292929; }
  html[data-theme="dark"] .lesson-preview-card::after { background: #202020; }
}

.harmony-mobile-copy { display: none; }
@media (width < 1024px) {
  #lessonView .lesson-menu::before {
    content: ''; position: absolute; inset: -12px -14px; z-index: -1;
    background: rgb(255 255 255 / 90%); backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px); border-radius: 12px;
  }
  #lessonView .lesson-menu { isolation: isolate; }
  html[data-theme="dark"] #lessonView .lesson-menu::before { background: rgb(18 18 18 / 90%); }
  .lesson-snap-section:not([data-track="colorHarmony"]) { padding-bottom: clamp(72px, 20dvh, 174px); }
  .lesson-snap-graphic .lesson-color-demo {
    box-sizing: border-box; width: min(100%, 448px); height: min(100%, 457px);
    inset: 0; margin: auto; padding-inline: clamp(0px, calc((100vw - 380px) * .28), 40px);
    row-gap: 6px; column-gap: 12px;
  }
  .lesson-snap-graphic .color-chip { min-width: 0; }
  .lesson-snap-graphic .color-chip::after { width: min(32px, 100%); height: auto; aspect-ratio: 1; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { height: min(100%, 420px); }
  .lesson-snap-graphic .harmony-card-list { touch-action: pan-y; user-select: none; }
  .harmony-dial button { width: 18px; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before { height: 18px; border-radius: 24px 24px 0 0; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after { height: 18px; border-radius: 24px 24px 0 0; }
}
@media (width < 768px) {
  .harmony-card-copy > strong[data-i18n] { display: none; }
  .harmony-card-copy > .harmony-mobile-copy { display: block; }
}

@media (width < 1024px) {
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { background: #f2f2f2; touch-action: pan-y; cursor: grab; user-select: none; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card:active { cursor: grabbing; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before { background: #f7f7f7; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after { background: #fbfbfb; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { background: #292929; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before { background: #222; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after { background: #191919; }
}

/* The whole front face tilts independently of the stationary stack. */
@media (width < 1024px) {
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card,
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { padding: 0; background: transparent; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-snap-graphic { background: #f1f3f5; border-radius: 24px; transform-origin: 50% 85%; z-index: 1; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-harmony-demo { inset: 24px; width: auto; height: auto; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before { background: #f6f7f9; height: auto; bottom: 12px; border-radius: 24px; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after { background: #fafbfc; height: auto; bottom: 24px; border-radius: 24px; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-snap-graphic { background: #272b30; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before { background: #202429; }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after { background: #191c20; }
}

.harmony-rear-card { display: none; }
@media (width < 1024px) {
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { width: min(100%, 400px); height: min(100%, 380px); }
  .lesson-preview-card .harmony-rear-card {
    display: block; position: absolute; inset: 0; padding: 24px; box-sizing: border-box;
    border-radius: 24px; background: #f6f8fa; transform: translateY(-14px) scale(.94);
    transform-origin: 50% 50%; overflow: hidden; pointer-events: none; z-index: 0;
  }
  .harmony-rear-card .harmony-card { display: grid; height: 100%; width: 100%; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(80px, 1fr) auto; gap: 16px; transform: none; }
  .harmony-rear-card .harmony-combo { grid-row: 1; justify-self: center; align-self: center; gap: 8px; }
  .harmony-rear-card .harmony-card-copy { grid-row: 2; min-height: 0; overflow: hidden; }
  .harmony-rear-card .harmony-card strong { font-size: 12px; line-height: 1.65; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::before { content: none; }
  .harmony-dial button { width: 15px; }
  .harmony-dial button::before, .harmony-dial button[aria-current="true"]::before { width: 5px; height: 5px; }
  html[data-theme="dark"] .lesson-preview-card .harmony-rear-card { background: #202429; }
}

@media (width < 1024px) {
  .lesson-snap-section[data-track="colorHarmony"] { padding-top: 128px; padding-bottom: 100px; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card { width: min(100%, 280px); height: min(100%, 344px); }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-harmony-demo { inset: 20px; }
  .lesson-preview-card .harmony-rear-card { padding: 20px; }
  .lesson-preview-card .harmony-rear-card[hidden] { display: none; }
  .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card.is-last-card::after { content: none; }
  .lesson-snap-graphic .harmony-combo, .harmony-rear-card .harmony-combo { gap: 4px; }
  .lesson-snap-graphic .harmony-note, .harmony-rear-card .harmony-note { width: 40px; height: 40px; }
}
@media (max-height: 650px) and (width < 1024px) {
  .lesson-snap-section[data-track="colorHarmony"] { padding-top: 120px; padding-bottom: 16px; }
}

/* Match the archive canvas throughout compact dark lessons. */
@media (width < 1024px) {
  html[data-theme="dark"] #lessonView.is-active,
  html[data-theme="dark"] body[data-view="lesson"] .site-header,
  html[data-theme="dark"] body[data-view="lesson"] .mobile-bottom-nav,
  html[data-theme="dark"] #lessonView .lesson-menu::before {
    background: var(--bg);
  }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-snap-graphic { background: #333333; }
  html[data-theme="dark"] .lesson-preview-card .harmony-rear-card {
    background: #2a2a2a; border: 1px solid #383838;
  }
  html[data-theme="dark"] .lesson-snap-section[data-track="colorHarmony"] .lesson-preview-card::after {
    background: #222222; border: 1px solid #303030; box-sizing: border-box;
  }
}

/* Home hero: shared centred orb and copy at every viewport width. */
#homeView .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 24px; }
#homeView .hero .hero-orb-copy {
  grid-area: 1 / 1; z-index: 1; align-self: center; justify-self: center;
  display: flex; flex-direction: column; align-items: center; width: min(100%, 440px);
}
#homeView .hero h1, #homeView .hero .ko-label { transform: none; }
#homeView .hero .home-mood-orb {
  grid-area: 1 / 1; display: block; order: 0; align-self: center; justify-self: center;
  width: min(88vw, 560px, 70dvh); aspect-ratio: 1; margin: 0; position: relative; pointer-events: none;
}
.home-mood-orb:not(.has-glass-sphere) { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #edf0ff, #b7bfdc 45%, #8f9ccc); }

/* Desktop shares the lesson reading and scrolling rules, without the card deck. */
@media (min-width: 1024px) {
  #lessonView.is-active { position: fixed; inset: var(--header-height) 0 0; padding: 0; overflow: hidden; background: var(--home-bg); }
  #lessonView .lesson-stage { position: relative; display: block; height: 100%; min-height: 0; padding: 0; }
  #lessonView #lessonDemo, #lessonView .lesson-copy { display: none; }
  #lessonView .lesson-side, .lesson-preview-card { display: contents; }
  .lesson-snap-scroll { display: block; height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; }
  .lesson-snap-section { height: 100%; box-sizing: border-box; display: grid; grid-template-rows: minmax(0,1fr) auto; gap: 16px; padding: 136px 48px clamp(72px,20dvh,174px); scroll-snap-align: start; scroll-snap-stop: always; }
  .lesson-snap-section h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lesson-snap-copy { margin: 0 auto; max-width: 620px; font-size: 13px; line-height: 1.8; color: var(--muted); text-align: center; }
  .lesson-snap-graphic { position: relative; min-height: 0; min-width: 0; container-type: size; }
  .lesson-snap-graphic > :is(.lesson-color-demo,.lesson-rhythm-demo,.lesson-harmony-demo,.lesson-feedback-demo) { opacity: 1; pointer-events: auto; inset: 0; height: 100%; min-height: 0; transform: none; }
  .lesson-snap-graphic .lesson-color-demo { width: min(100%,448px); margin: auto; gap: 12px; }
  .lesson-snap-graphic .color-chip { flex: 1; min-width: 0; }
  .lesson-snap-graphic .color-chip::after { width: 32px; height: 32px; }
  .lesson-snap-graphic .lesson-rhythm-grid { width: 100%; max-width: 540px; }
  .lesson-snap-graphic .feedback-orb { width: min(220px,52cqw,60cqh); height: min(220px,52cqw,60cqh); border-radius: 50%; animation: none; }
  #lessonMoodOrb.has-glass-sphere { background: transparent; box-shadow: none; overflow: visible; }
  #lessonMoodOrb.has-glass-sphere::before, #lessonMoodOrb.has-glass-sphere::after { content: none; }
  #lessonView .lesson-menu { position: absolute; inset: 12px auto auto 20px; width: max-content; height: auto; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; border: 0; border-radius: 0; box-shadow: none; background: transparent; z-index: 2; isolation: isolate; }
  #lessonView .lesson-menu::before { content: ''; position: absolute; inset: -12px -14px; background: rgb(255 255 255 / 90%); backdrop-filter: blur(16px); border-radius: 12px; z-index: -1; }
  #lessonView .lesson-card { min-height: 0; padding: 0; text-align: left; color: var(--muted); }
  #lessonView .lesson-card strong { font-size: 12px; line-height: 1; font-weight: 400; text-decoration: none; }
  #lessonView .lesson-card.is-active { color: var(--ink); }
  #lessonView .lesson-card.is-active strong { font-weight: 500; }
  #lessonView .lesson-card > span { display: none; }
  .lesson-snap-graphic .lesson-harmony-demo { padding-top: 44px; }
  .lesson-snap-graphic .harmony-card-list { height: 100%; overflow-y: auto; }
  html[data-theme="dark"] #lessonView .lesson-menu::before { background: var(--bg); }
  html[data-theme="dark"] body[data-view="lesson"] .site-header { background: var(--bg); }
}
.wordmark { text-transform: uppercase; }

/* Final typography and quieter content grouping. */
#loginModal #loginTitle { font-weight: 700; }
.site-header .wordmark { font-weight: 500; }
#homeView .hero { grid-template-rows: auto auto; gap: 20px; }
#homeView .hero .home-mood-orb { grid-area: 1 / 1; width: min(72vw, 340px, 42dvh); }
#homeView .hero .hero-orb-copy { grid-area: 2 / 1; }


@media (min-width: 1024px) {
  .lesson-snap-section { grid-template-rows: minmax(180px, 38dvh) auto; align-content: center; padding: 110px 48px 48px; gap: 28px; }
  .lesson-snap-copy { max-width: 440px; line-height: 1.75; }
  .lesson-snap-section[data-track="colorHarmony"] { grid-template-rows: minmax(0,1fr) auto; padding-top: 150px; }
  .lesson-snap-graphic .lesson-harmony-demo { padding: 40px 0 0; }
  .lesson-snap-graphic .harmony-card-list {
    display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-auto-rows: minmax(190px,auto);
    align-content: start; gap: 32px 40px; width: min(100%, 960px); height: 100%; padding: 0 4px 20px; box-sizing: border-box;
  }
  .lesson-snap-graphic .harmony-card { grid-template-columns: minmax(0,1fr); grid-template-rows: 80px auto; gap: 20px; height: auto; min-height: 190px; transform: none; align-content: start; }
  .lesson-snap-graphic .harmony-combo { grid-row: 1; justify-self: center; align-self: center; gap: 8px; }
  .lesson-snap-graphic .harmony-card-copy { grid-row: 2; min-width: 0; text-align: left; }
  .lesson-snap-graphic .harmony-card-name { font-size: 14px; margin-bottom: 8px; }
  .lesson-snap-graphic .harmony-card-copy strong[data-i18n] { display: none; }
  .lesson-snap-graphic .harmony-mobile-copy { display: block; font-size: 12px; line-height: 1.65; font-weight: 400; color: var(--muted); }
  .lesson-snap-graphic .harmony-toolbar { top: 0; right: max(0px, calc((100% - 960px) / 2)); }
}
@media (width < 1024px) {
  .lesson-snap-section:not([data-track="colorHarmony"]) { grid-template-rows: minmax(160px, 38dvh) auto; align-content: center; padding-top: 120px; padding-bottom: 48px; gap: 28px; }
  .lesson-snap-copy { max-width: 400px; }
}
@media (prefers-reduced-motion: reduce) { .hero-typing-char { opacity: 1; } }



/* Text is typed in place; no slide-up or whole-line reveal. */
#homeView .hero,
#homeView .hero .hero-orb-copy,
#homeView .hero h1,
#homeView .hero .ko-label,
#loginModal #loginTitle {
  animation: none; transition: none; transform: none;
}


/* Shiny text is scoped to the AI request's loading message. */
#composeView .ai-loading-shine { color: var(--muted); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
  #composeView .ai-loading-shine {
    --shine-base: #85878c; --shine-highlight: #25282e;
    background: linear-gradient(115deg, var(--shine-base) 35%, var(--shine-highlight) 49%, var(--shine-base) 63%);
    background-size: 250% 100%; background-position: 160% center;
    background-clip: text; -webkit-background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: ai-loading-shine 2.6s ease-in-out infinite;
  }
  html[data-theme="dark"] #composeView .ai-loading-shine { --shine-base: #81848a; --shine-highlight: #fff; }
}
@keyframes ai-loading-shine {
  0%, 12% { background-position: 160% center; }
  85%, 100% { background-position: -60% center; }
}
@media (prefers-reduced-motion: reduce) {
  #composeView .ai-loading-shine { animation: none; background: none; color: var(--muted); -webkit-text-fill-color: currentColor; }
}

#homeView .hero .home-mood-orb { pointer-events: auto; }

/* Deletion status: Call Chip-style fill, elapsed timer and result. */
#deleteChipRegion { position: fixed; z-index: 100000; bottom: 88px; left: 50%; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; pointer-events: none; }
.delete-call-chip { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 24px; padding: 12px 18px; border: 1px solid #dce0e4; border-radius: 999px; background: #f6f7f8; color: #32363b; font: 500 13px SUIT; white-space: nowrap; animation: delete-chip-enter .22s ease-out; }
.delete-call-chip::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #e3e7eb; transform-origin: left; animation: delete-chip-fill 2s ease-in-out infinite; }
.delete-chip-timer { opacity: .65; font-variant-numeric: tabular-nums; }
.delete-call-chip.is-success { color: #206541; border-color: #b8dac7; }
.delete-call-chip.is-success::before { background: #e2f3e9; animation: none; }
.delete-call-chip.is-error { color: #9b3434; border-color: #e5bebe; animation: delete-chip-shake .32s ease; }
.delete-call-chip.is-error::before { background: #fbeaea; animation: none; }
@keyframes delete-chip-fill { 0% { transform: scaleX(0); } 80%,100% { transform: scaleX(1); } }
@keyframes delete-chip-enter { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes delete-chip-shake { 25%,75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .delete-call-chip, .delete-call-chip::before { animation: none; } }

/* Lattice Loader: waves of cells while feedback is actually being requested. */
#aiAnalyzeButton.is-writing { display: flex; align-items: center; justify-content: center; gap: 10px; opacity: 1; }
.lattice-loader { display: grid; grid-template-columns: repeat(4, 3px); gap: 2px; flex: 0 0 auto; }
.lattice-loader i { width: 3px; height: 3px; border-radius: 1px; background: currentColor; animation: lattice-wave 1.2s ease-in-out var(--cell-delay) infinite; }
.ai-writing-time { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .6; }
@keyframes lattice-wave { 0%,100% { opacity: .18; } 45% { opacity: 1; } }
/* Selection controls share one sliding highlight, with existing selection semantics. */
.glide-group { isolation: isolate; }
.analysis-tabs.glide-group, .my-songs-tabs.glide-group, .dashboard-tabs.glide-group { position: relative; }
.glide-group::before { content: ''; pointer-events: none; position: absolute; left: 0; top: 0; width: var(--glide-w, 0px); height: var(--glide-h, 0px); transform: translate(var(--glide-x, 0px),var(--glide-y, 0px)); border-radius: 9px; background: color-mix(in srgb, var(--ink) 9%, transparent); transition: transform .28s cubic-bezier(.22,1,.36,1), width .28s ease, height .28s ease; z-index: -1; }
.glide-group > button { position: relative; }
.glide-group.glide-group > button:is(:hover,:focus-visible,.is-active,.is-selected,[aria-checked="true"],[aria-selected="true"]) { background: transparent; }
.harmony-type-menu.glide-group:not([hidden]), .custom-select-menu.glide-group:not([hidden]) { transform-origin: top left; animation: glide-menu-open .23s cubic-bezier(.22,1,.36,1); }
@keyframes glide-menu-open { from { opacity: 0; transform: scale(.92) translateY(-5px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@media (prefers-reduced-motion: reduce) { .lattice-loader i, .glide-group.glide-group:not([hidden]) { animation: none; } .glide-group::before { transition: none; } }

/* Harmony: Depth Carousel rail + Option Wheel, shared across device sizes. */
#lessonView .has-depth-carousel {
  display: grid; grid-template-columns: 340px 210px; grid-template-rows: 344px auto;
  justify-content: center; align-content: center; align-items: center; gap: 28px 64px;
  padding: 132px 32px 48px; position: relative;
}
#lessonView .has-depth-carousel .lesson-preview-card {
  grid-area: 1 / 1; display: block; position: relative; isolation: auto;
  width: 280px; height: 344px; min-height: 0; padding: 0; margin: 0;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  touch-action: pan-y; cursor: grab; user-select: none;
}
#lessonView .has-depth-carousel .lesson-preview-card::before,
#lessonView .has-depth-carousel .lesson-preview-card::after { content: none; }
#lessonView .has-depth-carousel .lesson-snap-graphic { position: relative; width: 100%; height: 100%; background: transparent; border-radius: 0; container-type: normal; z-index: auto; }
#lessonView .has-depth-carousel .lesson-harmony-demo { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; overflow: visible; }
#lessonView .has-depth-carousel .harmony-card-list { display: block; position: relative; width: 100%; height: 100%; padding: 0; margin: 0; overflow: visible; perspective: 1400px; transform-style: preserve-3d; scroll-snap-type: none; }
#lessonView .has-depth-carousel .harmony-card {
  display: grid; position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(80px,1fr) auto; gap: 16px;
  padding: 24px; box-sizing: border-box; border-radius: 18px; border: 0; box-shadow: none;
  background: color-mix(in srgb, #fafbfc calc(var(--card-depth,0)*100%), #f1f3f5);
  transform-origin: center; backface-visibility: hidden; will-change: transform, opacity; overflow: hidden;
}
#lessonView .has-depth-carousel .harmony-card[hidden] { display: none; }
#lessonView .has-depth-carousel .harmony-combo { grid-row: 1; align-self: center; justify-self: center; gap: 5px; }
#lessonView .has-depth-carousel .harmony-note { width: 40px; height: 40px; }
#lessonView .has-depth-carousel .harmony-card-copy { grid-row: 2; min-width: 0; overflow: visible; text-align: left; }
#lessonView .has-depth-carousel .harmony-card-name { font-size: 15px; margin-bottom: 8px; }
#lessonView .has-depth-carousel .harmony-card-copy strong[data-i18n] { display: none; }
#lessonView .has-depth-carousel .harmony-mobile-copy { display: block; font: 400 12px/1.65 SUIT; color: var(--muted); }
#lessonView .has-depth-carousel .lesson-snap-copy { grid-area: 2 / 1 / 3 / 3; max-width: 450px; margin: 0 auto; font-size: 13px; }
#lessonView .has-depth-carousel > .harmony-toolbar { position: absolute; top: 110px; right: max(32px,calc((100% - 620px)/2)); display: flex; }
#lessonView .has-depth-carousel .option-wheel {
  grid-area: 1 / 2; position: relative; display: block; width: 210px; height: 300px;
  overflow: hidden; touch-action: none; cursor: ns-resize; user-select: none;
  mask-image: linear-gradient(transparent,black 15%,black 85%,transparent);
}
#lessonView .has-depth-carousel .option-wheel button {
  position: absolute; top: calc(50% - 22px); left: 10px; width: 190px; height: 44px;
  border: 0; padding: 0 12px; background: transparent; color: var(--muted);
  text-align: left; font: 400 18px/1 SUIT; white-space: nowrap; cursor: pointer; transform-origin: left center;
}
#lessonView .has-depth-carousel .option-wheel button::before { content: none; }
#lessonView .has-depth-carousel .option-wheel button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
#lessonView .has-depth-carousel .harmony-dial-output { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#lessonView .has-depth-carousel :is(.lesson-preview-card,.option-wheel):focus-visible { outline: 1px solid var(--muted); outline-offset: 6px; border-radius: 18px; }
html[data-theme="dark"] #lessonView .has-depth-carousel .harmony-card { background: color-mix(in srgb, #222 calc(var(--card-depth,0)*100%), #333); }
@media (width < 1024px) { #lessonView .has-depth-carousel > .harmony-toolbar { display: none; } }
@media (width < 640px) {
  #lessonView .has-depth-carousel { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(200px, min(344px,40dvh)) 116px auto; gap: 12px; padding: 128px 24px 20px; }
  #lessonView .has-depth-carousel .lesson-preview-card { grid-area: 1 / 1; justify-self: center; width: min(72vw,264px); height: 100%; margin-left: -24px; }
  #lessonView .has-depth-carousel .option-wheel { grid-area: 2 / 1; justify-self: center; width: 240px; height: 116px; }
  #lessonView .has-depth-carousel .option-wheel button { left: 25px; font-size: 15px; }
  #lessonView .has-depth-carousel .lesson-snap-copy { grid-area: 3 / 1; max-width: 300px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { #lessonView .has-depth-carousel .harmony-card { will-change: auto; } }
#lessonView .has-depth-carousel .harmony-combo { width: max-content; max-width: 100%; }

/* Wake Slider rotated into a vertical volume control. */
#composeView .volume-popover {
  width: 100%; box-sizing: border-box; height: auto; padding: 14px 4px 12px; gap: 12px;
  bottom: 44px; transform: translateX(-50%); border-radius: 18px;
  background: var(--paper); border: 1px solid var(--hairline); box-shadow: none;
}
#composeView .volume-popover[hidden] { display: none; }
.volume-wake-track {
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: space-between;
  position: relative; width: 24px; height: clamp(124px,26dvh,218px); gap: 4px;
  touch-action: none; user-select: none; cursor: ns-resize;
}
.volume-wake-bar {
  flex: 1 1 0; min-height: 1px; max-height: 2px; width: 24px; border-radius: 999px;
  background: color-mix(in srgb,var(--ink) 16%,transparent); transform: scaleX(.416667);
  transform-origin: center; transition: background-color 120ms ease; pointer-events: none;
}
.volume-wake-bar[data-on="true"] { background: var(--ink); }
#composeView .volume-wake-track .volume-slider {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0;
  cursor: inherit; writing-mode: vertical-lr; direction: rtl; touch-action: none;
}
.volume-wake-track:has(.volume-slider:focus-visible) { outline: 1px solid var(--muted); outline-offset: 5px; border-radius: 8px; }
#composeView .volume-value-label { color: var(--muted); font: 400 11px/1 SUIT; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .volume-wake-bar { transition: none; } }

/* Thought Line beneath the AI action: live milestones, then a compact summary. */
.thought-line { margin: 14px 0 4px; color: var(--muted); font: 400 12px/1.6 SUIT; }
.thought-line[hidden] { display: none; }
.thought-header { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.thought-glyph { font: 400 20px/1 SUIT; color: var(--ink); }
.thought-title { flex: 1; min-width: 0; }
.thought-timer { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .65; }
.thought-chevron { transition: transform 350ms ease; }
.thought-line.is-expanded .thought-chevron { transform: rotate(180deg); }
.thought-body { display: grid; grid-template-rows: 0fr; opacity: 0; filter: blur(2px); transition: grid-template-rows 350ms ease,opacity 350ms ease,filter 350ms ease; }
.thought-line.is-expanded .thought-body { grid-template-rows: 1fr; opacity: 1; filter: none; }
.thought-body > div { overflow: hidden; }
.thought-body ol { list-style: none; margin: 4px 0 12px 9px; padding: 0 0 0 18px; border-left: 1px solid var(--hairline); }
.thought-body li { position: relative; padding: 5px 0; animation: thought-step-in 250ms ease-out; }
.thought-body li::before { content: '✓'; position: absolute; left: -24px; width: 12px; text-align: center; background: var(--paper); font-size: 10px; }
.thought-body li.is-current { color: var(--ink); }
.thought-body li.is-current::before { content: '·'; animation: thought-breathe 1.6s ease-in-out infinite; }
.thought-line.is-working .thought-glyph { animation: thought-breathe 1.6s ease-in-out infinite; }
.thought-line.is-working .thought-title { background: linear-gradient(110deg,var(--muted) 30%,var(--ink) 50%,var(--muted) 70%); background-size: 250% 100%; background-clip: text; -webkit-background-clip: text; color: transparent; animation: thought-shimmer 1.8s linear infinite; }
.thought-line.is-error { color: #b15b5b; }
.thought-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes thought-breathe { 50% { opacity: .45; } }
@keyframes thought-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes thought-step-in { from { opacity: 0; filter: blur(2px); } to { opacity: 1; filter: none; } }
@media (prefers-reduced-motion: reduce) { .thought-line *, .thought-line *::before { animation: none !important; transition: none !important; } }

/* Swipe Row: move the original controls, preserving their existing handlers. */
#mySongsList .song-swipe-row { display: block; position: relative; background: transparent; }
.song-swipe-front { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; border-radius: 12px; background: var(--paper); touch-action: pan-y; }
.song-swipe-front .my-song-open { user-select: none; -webkit-user-drag: none; }
#mySongsList .is-current .song-swipe-front, #mySongsList .is-selected .song-swipe-front { background: color-mix(in srgb,var(--ink) 6%,var(--paper)); }
#mySongsList .song-swipe-row.is-revealed, #mySongsList .song-swipe-row[aria-busy="true"] { overflow: hidden; }
.song-swipe-delete { position: absolute; right: 0; top: 0; bottom: 0; display: grid; place-items: center; border: 0; border-radius: 12px; background: #d84444; color: #fff; font: 500 12px SUIT; visibility: hidden; cursor: pointer; transition: background 180ms ease; }
.is-revealed .song-swipe-delete { visibility: visible; }
.is-commit-ready .song-swipe-delete { background: #b92e38; }
.song-swipe-delete:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .song-swipe-delete { transition: none; } }

/* Tension uses its actual pressed state, even outside the harmony demo. */
#lessonTensionToggle .tension-switch.is-squish { flex: none; touch-action: none; cursor: grab; overflow: visible; }
#lessonTensionToggle .tension-switch.is-squish:active { cursor: grabbing; }
#lessonTensionToggle .tension-switch.is-squish::after { content: none; }
.squish-thumb { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px #0000001f; transform-origin: center; pointer-events: none; }
html[data-theme="dark"] .squish-thumb { background: var(--bg); }
#lessonTensionToggle[aria-pressed="true"] .tension-on,
#lessonTensionToggle[aria-pressed="false"] .tension-off { display: inline; }
#lessonTensionToggle[aria-pressed="true"] .tension-off,
#lessonTensionToggle[aria-pressed="false"] .tension-on { display: none; }
#lessonTensionToggle:focus-visible { outline: 1px solid var(--muted); outline-offset: 6px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { #lessonTensionToggle .tension-switch { transition: none; } }

/* Stable glyph widths prevent scramble animation from shifting the layout. */
.scramble-word { display: inline-block; white-space: nowrap; }
.scramble-cell { display: inline-block; position: relative; }
.scramble-measure { visibility: hidden; }
.scramble-ink { position: absolute; inset: 0; text-align: center; font: inherit; color: inherit; pointer-events: none; }

/* Tab selection shares the divider baseline at every responsive padding size.
   Choice menus retain their filled Glide Select highlight. */
:is(.analysis-tabs, .my-songs-tabs, .dashboard-tabs).glide-group {
  border-bottom: 1px solid var(--hairline);
}
:is(.analysis-tabs, .my-songs-tabs, .dashboard-tabs).glide-group::before {
  top: auto;
  bottom: -1px;
  height: 1px;
  border-radius: 0;
  background: var(--ink);
  transform: translateX(var(--glide-x, 0px));
  z-index: 1;
}
:is(.analysis-tabs, .my-songs-tabs, .dashboard-tabs).glide-group > button {
  border-bottom: 0;
  text-decoration: none;
  background: transparent;
}
:is(.analysis-tabs, .my-songs-tabs, .dashboard-tabs).glide-group > button::after {
  content: none;
}

/* The tutorial grid fills its section instead of leaving fixed-width gutters. */
#homeView .large-grid { width: 100%; margin-inline: 0; }
@media (width < 768px) {
  #homeView .grid-explain { --home-grid: calc(100vw / 16); }
}
@media (max-width: 360px) {
  #homeView .grid-explain { --home-grid: calc(100vw / 12); }
}

/* The desktop header and right-edge wheel also cover narrow tablets. */
@media (min-width: 640px) {
  .site-header .wordmark { font-size: 14px; }
  #lessonView .has-depth-carousel {
    grid-template-columns: minmax(0,1fr); grid-template-rows: 344px auto;
  }
  #lessonView .has-depth-carousel .lesson-preview-card { justify-self: center; }
  #lessonView .has-depth-carousel .lesson-snap-copy { grid-area: 2 / 1; }
  #lessonView .has-depth-carousel .option-wheel {
    grid-area: auto; position: absolute; right: 0; top: calc(50% - 128px);
    width: 140px; height: 256px;
  }
  #lessonView .has-depth-carousel .option-wheel button { width: 130px; left: 0; font-size: 15px; }
}
#lessonView .lesson-snap-graphic .feedback-orb {
  width: min(260px,60cqw,68cqh); height: min(260px,60cqw,68cqh);
}

/* Lift only the teaching visuals; keep all explanation text in place. */
#lessonView { --lesson-visual-lift: clamp(24px, 4dvh, 36px); }
#lessonView .lesson-snap-graphic :is(.lesson-color-demo, .lesson-rhythm-grid, .feedback-orb),
#lessonView .has-depth-carousel .harmony-combo {
  translate: 0 calc(-1 * var(--lesson-visual-lift));
}
@media (max-height: 650px) {
  #lessonView { --lesson-visual-lift: 16px; }
}

#homeMoodOrb { position: relative; overflow: visible; }
#homeMoodOrb .orb-scatter-canvas {
  display: none; position: absolute; left: -72px; top: -72px;
  max-width: none; pointer-events: none;
}