/* The product palette and component hierarchy are documented in DESIGN.md. */
:root {
  color-scheme: dark;
  --page: #1b1918;
  --surface: #242120;
  --surface-2: #2e2927;
  --surface-3: #3a3330;
  --text: #f6f0e7;
  --soft: #cec2b6;
  --quiet: #bbac9f;
  --accent: #f2a38e;
  --accent-ink: #291c17;
  --pink: #f2a38e;
  --mint: #b6d2bc;
  --stroke: #51463f;
  --stroke-strong: #9b887a;
  --shadow: #00000040;
  --ink: var(--text);
  --muted: var(--soft);
  --line: var(--stroke);
  --purple: var(--accent);
  --radius-control: 10px;
  --radius-panel: 20px;
}
html[data-theme=light] {
  color-scheme: light;
  --page: #f6f1e9;
  --surface: #fffcf7;
  --surface-2: #eee6dc;
  --surface-3: #e1d5c8;
  --text: #302923;
  --soft: #5e5147;
  --quiet: #6b5b4e;
  --accent: #954634;
  --accent-ink: #fffaf3;
  --pink: #954634;
  --mint: #3e6650;
  --stroke: #d5c6b7;
  --stroke-strong: #8b7766;
  --shadow: #30292320;
}
html { scroll-padding-top: 104px; }
body { background: var(--page); color: var(--text); font-size: 16px; line-height: 1.95; }
body::before { content: none; }
main { max-width: 1248px; padding: 0 32px; margin: auto; }
main > section { scroll-margin-top: 32px; }
main, section, article, .panel, .section-heading > div { min-width: 0; }
h1, h2, h3 { color: var(--text); line-height: 1.5; }
p { overflow-wrap: anywhere; }
button, input, textarea, select { font: inherit; }
:is(a[href],button,summary,select,label[for],label:has(input[type=checkbox]),label:has(input[type=radio]),input[type=checkbox],input[type=radio]):not(:disabled) { cursor: pointer; }
button:disabled, input:disabled, select:disabled { cursor: not-allowed; }
button, .button, .ghost, .text-button, .subtle, .import { min-height: 44px; min-width: 44px; }
button, a { -webkit-tap-highlight-color: transparent; transition: filter 120ms, border-color 120ms; }
button:not(:disabled):active, .button:active, .ghost:active { filter: brightness(.88); }
button:disabled, .button:disabled, .ghost:disabled { opacity: .55; transform: none; }
:is(button,a,input,select,textarea,summary):focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; scroll-margin-block: 180px 64px; }
.button, .ghost, .text-button, .subtle { border-radius: var(--radius-control); font-size: 14px; line-height: 1.8; font-weight: 600; transition: filter 120ms, border-color 120ms; }
.button { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); padding: 11px 20px; box-shadow: none; }
.button:hover:enabled, a.button:hover { background: var(--accent); color: var(--accent-ink); filter: brightness(1.08); transform: none; box-shadow: none; }
.ghost, .subtle { padding: 10px 16px; border: 1px solid var(--stroke-strong); background: transparent; color: var(--text); }
.ghost:hover:enabled, .subtle:hover, a.ghost:hover { background: var(--surface-3); color: var(--text); transform: none; }
.text-button { color: var(--accent); padding: 8px 4px; background: transparent; }
.text-button:hover { text-decoration: underline; text-underline-offset: 5px; }
.panel { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-panel); box-shadow: none; }
.eyebrow, .section-label { color: var(--soft); font-size: 13px; letter-spacing: 0; }
.skip-link { position: fixed; inset: 8px 16px auto auto; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 12px; border-radius: 8px; transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.topbar { position: sticky; top: 0; z-index: 80; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 24px; min-height: 80px; height: auto; max-width: none; margin: 0; padding: 12px max(24px,calc((100vw - 1280px)/2)); background: var(--page); border-bottom: 1px solid var(--stroke); box-shadow: none; }
.brand { font-size: 32px; color: var(--text); gap: 10px; flex-shrink: 0; }
.brand-icon { font-size: 39px; color: var(--accent); background: none; border: 0; width: auto; height: auto; }
.brand small { color: var(--quiet); font-size: 11px; margin-top: 3px; }
.header-actions { display: flex; grid-column: 3; grid-row: 1; gap: 8px; align-items: center; margin-inline-start: auto; }
.header-actions .ghost, .theme-toggle { padding: 8px 12px; font-size: 13px; min-height: 44px; border: 1px solid var(--stroke-strong); border-radius: 10px; background: transparent; color: var(--text); }
.theme-toggle { min-width: 54px; }
.header-actions .ghost:hover, .theme-toggle:hover { background: var(--surface-2); }
.topbar nav { display: flex; grid-column: 2; grid-row: 1; justify-content: center; gap: 4px; align-items: center; }
.topbar nav a { text-align: center; white-space: nowrap; color: var(--soft); padding: 9px 10px; min-height: 44px; font-size: 14px; border: 0; border-radius: 4px; }
.topbar nav a:hover { background: var(--surface-2); color: var(--text); }
.topbar nav a.active { color: var(--text); background: transparent; box-shadow: inset 0 -2px var(--accent); }
.topbar nav a.active::after { content: none; }
#nav-toggle { display: none; }
.topbar nav[hidden] { display: none; }

.account-strip { background: none; border: 0; padding: 0; margin: 24px 0 0; color: var(--quiet); font-size: 13px; border-radius: 0; min-height: 44px; }
.intro { min-height: 0; padding: 28px 0 32px; gap: 32px; align-items: center; }
.intro h1 { font-family: var(--font-body); font-weight: 700; font-size: 34px; margin: 0 0 8px; line-height: 1.5; color: var(--text); }
.intro h1 em { color: var(--accent); font-style: normal; }
.intro > div > p { font-size: 16px; color: var(--soft); line-height: 2.1; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.hero-actions a { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.together { transform: none; border: 0; border-inline-start: 1px solid var(--stroke); border-radius: 0; padding: 16px 32px; background: none; box-shadow: none; }
.together > span { font-size: 64px; color: var(--accent); line-height: 1; }
.together p { font-size: 16px; color: var(--text); }
.together small { font-size: 13px; color: var(--quiet); margin-top: 6px; }
.start-guide { background: var(--surface-2); padding: 22px 28px; margin: 0 0 24px; gap: 24px; }
.start-guide h2 { font-family: var(--font-body); font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.start-guide p { font-size: 14px; color: var(--soft); }
.start-guide > div:last-child { flex-wrap: wrap; gap: 12px; }
.start-guide .button { background: transparent; color: var(--text); border-color: var(--stroke-strong); font-size: 13px; }
.start-guide .button:hover:enabled { background: var(--surface-3); color: var(--text); }
.start-guide .text-button { font-size: 13px; }
.relationship { position: relative; min-height: 0; text-align: start; background: var(--surface); padding: 28px 36px 32px; overflow: visible; border-color: var(--stroke); box-shadow: none; }
.relationship::after, .stars, .hero-decoration, .couple-orbit, .studio-wave, .screen-stars, .room-symbol, .question-strip > div > span { display: none; }
.relationship .sky-caption { color: var(--quiet); font-size: 13px; align-items: center; }
.relationship h2 { font-size: clamp(38px,4vw,52px); color: var(--text); margin: 24px 0 8px; }
.relationship h2 i { color: var(--accent); }
.relationship > p { color: var(--soft); font-size: 15px; margin-bottom: 20px; }
.relationship-days { justify-content: flex-start; margin-bottom: 12px; gap: 14px; }
.relationship-days b { color: var(--accent); font-size: 30px; }
.relationship-days span { color: var(--soft); font-size: 14px; }
.relationship .subtle { background: transparent; border-color: var(--stroke-strong); color: var(--text); font-size: 13px; }
.sky { background: var(--surface); border-color: var(--stroke); }
.sky-caption, .sky-bottom, .city small, .flight-label { color: var(--soft); }
.city h2, .city time { color: var(--text); }
.room-bar { margin-top: 24px; padding: 24px 28px; gap: 20px; background: var(--surface); border-color: var(--stroke); }
.room-intro h2 { font-size: 28px; color: var(--text); }
.room-intro p { font-size: 14px; color: var(--soft); max-width: 38rem; }
.room-actions { gap: 10px; flex-wrap: wrap; }
.room-actions input { min-width: 120px; width: 144px; margin: 0; min-height: 46px; background: var(--surface-2); border-color: var(--stroke-strong); color: var(--text); font-size: 16px; }
.room-actions .button, .room-actions .ghost { font-size: 14px; }
.room-actions label.sr-only { position: static; clip: auto; width: auto; height: auto; margin: 0; overflow: visible; color: var(--soft); font-size: 13px; }
.room-hint { color: var(--quiet); border-color: var(--stroke); font-size: 13px; line-height: 2; }
.presence-chip { background: var(--surface-2); border-color: var(--stroke); color: var(--text); font-size: 13px; }
.presence-chip.online::before { box-shadow: none; background: var(--mint); }

.play-section, .studio-section, .cinema-section, .library-section, .notes-section { margin-top: 64px; }
.section-heading { margin-bottom: 24px; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.section-heading h2, .library-section .section-heading h2 { color: var(--text); font-family: var(--font-body); font-weight: 700; font-size: clamp(24px,2.5vw,32px); margin: 0 0 8px; }
.section-heading .eyebrow, .section-number { display: none; }
.section-heading p, .library-section #album-mode, .library-section #playlist-mode { color: var(--soft); font-size: 15px; line-height: 2; }
.section-number { color: var(--quiet); font-size: 13px; }
.games-layout { gap: 32px 48px; align-items: start; }
.game-card { padding: 24px 0; background: transparent; border: 0; border-top: 1px solid var(--stroke); border-radius: 0; }
.game-card-top { display: none; }
.game-card h3 { font-family: var(--font-body); font-weight: 650; font-size: 23px; color: var(--text); }
.game-card .tag, .game-card > p, .rps-card .tag, .rps-card > p { color: var(--soft); font-size: 14px; }
.game-card-top .mini-icon { color: var(--accent); }
.game-card-top .tag { overflow-wrap: anywhere; }
.ttt-board { width: min(292px,100%); margin: 24px auto; gap: 10px; }
.ttt-board button { height: 82px; background: var(--surface-2); color: var(--accent); border: 1px solid var(--stroke-strong); border-radius: 10px; }
.ttt-board button:hover:enabled, .ttt-board button.mark-o { background: var(--surface-3); color: var(--text); transform: none; }
.ttt-board button:disabled { opacity: 1; }
.game-footer { border-color: var(--stroke); flex-wrap: wrap; gap: 12px; }
.game-footer small, .game-footer .ghost { color: var(--soft); font-size: 13px; }
.game-footer .ghost { border-radius: 10px; }
.rps-card .game-footer small { color: var(--soft); }
.rps-options { gap: 12px; flex-wrap: wrap; }
.rps-options button { color: var(--text); background: var(--surface-2); border: 1px solid var(--stroke-strong); width: 86px; font-size: 14px; border-radius: 12px; }
.rps-options button:hover:enabled { background: var(--surface-3); transform: none; box-shadow: none; }
.rps-result { color: var(--soft); font-size: 14px; }
.c4-board { background: var(--surface-3); border-color: var(--stroke); grid-template-columns: repeat(7,minmax(44px,1fr)); overflow-x: auto; max-width: 100%; }
.c4-board .disc { background: var(--page); border-color: var(--stroke-strong); }
.c4-board .disc.player-0 { background: var(--accent); }
.c4-board .disc.player-1 { background: var(--mint); }
.c4-board > button { min-height: 44px; color: var(--text); background: var(--surface-2); border: 1px solid var(--stroke-strong); border-radius: 8px; }
.memory-board > button { background: var(--surface-2); color: var(--text); border-color: var(--stroke-strong); }
.memory-board > button.revealed, .memory-board > button.matched { background: var(--surface-3); }
.memory-scores { color: var(--soft); font-size: 14px; }
.quiz-panel { padding: 28px; background: var(--surface); }
.quiz-panel h3 { font-size: 32px; }
.quiz-panel > p, .quiz-columns label { font-size: 15px; color: var(--soft); }
.quiz-columns fieldset { border-color: var(--stroke-strong); border-radius: 12px; }
.quiz-columns legend { color: var(--text); font-size: 15px; }
.quiz-columns label { background: var(--surface-2); border-color: var(--stroke); border-radius: 8px; }
.quiz-columns label:has(input:checked) { background: var(--surface-3); border-color: var(--accent); }
.question-strip { padding: 24px 28px; background: transparent; border-color: var(--stroke); gap: 20px; }
.question-strip > div { padding: 0; }
.question-strip h3 { font-size: 27px; }
.question-strip p { font-size: 14px; color: var(--soft); }
.question-strip .button { background: transparent; color: var(--text); border-color: var(--stroke-strong); font-size: 14px; margin: 0; }

.studio-panel { background: transparent; padding: 0; border: 0; border-radius: 0; }
.studio-top { border-bottom: 1px solid var(--stroke); padding-bottom: 20px; align-items: center; gap: 16px; }
.studio-live { color: var(--soft); font-size: 14px; }
.studio-live .dot { display: none; }
.instrument-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 24px 0; padding: 0; }
.instrument-tab { background: transparent; border: 0; border-bottom: 1px solid var(--stroke); border-radius: 0; color: var(--soft); font-size: 15px; padding: 12px; min-width: 0; box-shadow: none; transition: border-color 120ms; }
.instrument-tab[aria-pressed=true] { background: var(--surface-2); color: var(--text); border-color: var(--accent); box-shadow: inset 0 -2px var(--accent); font-weight: 700; }
.instrument-tab:hover { transform: none; background: var(--surface-3); color: var(--text); }
.instrument-tab[aria-pressed=true]:hover { background: var(--surface-2); color: var(--text); }
.studio-mood { padding: 0 0 16px; }
.studio-mood h3 { font-family: var(--font-body); font-size: clamp(21px,2.5vw,28px); font-weight: 700; margin: 8px 0; }
.studio-mood p { color: var(--soft); font-size: 14px; }
.studio-toolbar { display: flex; flex-wrap: wrap; gap: 16px 24px; padding: 16px; margin-bottom: 16px; background: var(--surface); border-top: 1px solid var(--stroke); border-bottom: 1px solid var(--stroke); }
.studio-toolbar label, .studio-meters label { font-size: 13px; color: var(--soft); margin: 0; white-space: normal; }
.studio-toolbar select, .guitar-controls select, .kalimba-mode-label select { min-height: 44px; background: var(--surface-2); border-color: var(--stroke-strong); color: var(--text); font-size: 15px; border-radius: 8px; }
.studio-toolbar input[type=range], .guitar-performance input[type=range] { min-height: 44px; width: 108px; padding: 0; margin: 0; accent-color: var(--accent); }
.studio-toolbar button, .studio-toolbar #studio-sustain { font-size: 13px; margin-inline: 0; }
.studio-toolbar [aria-pressed=true] { background: var(--surface-3); border-color: var(--accent); color: var(--accent); }
.studio-keyboard { height: 226px; border-color: #151312; background: #151312; border-radius: 12px; box-shadow: none; }
.studio-keyboard .white-key { background: #f8f1e5; color: #493c31; border-color: #ad9c89; border-bottom-color: #bca993; }
.studio-keyboard .black-key { background: #28231f; color: #f8f1e5; border-color: #0f0d0b; border-bottom-color: #0f0d0b; box-shadow: 2px 4px 4px #0005; }
.studio-keyboard .studio-key span, .studio-keyboard .black-key span { font-size: 12px; }
.studio-keyboard .studio-key kbd { font-size: 12px; opacity: 1; }
.studio-keyboard .white-key.own-note { background: #f2a38e; color: #291c17; border-bottom-color: #a4513b; box-shadow: none; }
.studio-keyboard .black-key.own-note { background: #954634; color: #fffaf3; box-shadow: none; }
.studio-keyboard .studio-key.peer-note { border-bottom-color: #477058; box-shadow: inset 0 -12px #b6d2bc; }
.studio-keyboard .studio-key:focus-visible { outline: 3px solid #a0442e; outline-offset: -4px; }
.studio-keys-scroll, .guitar-fret-scroll, .kalimba-tines { scrollbar-color: var(--accent) var(--surface-2); scrollbar-width: auto; max-width: 100%; overscroll-behavior-x: contain; }
.guitar-controls label, .guitar-performance label, .kalimba-mode-label { color: var(--soft); font-size: 14px; flex-wrap: wrap; }
.guitar-controls button, .guitar-performance button, .fretboard-navigation button { font-size: 14px; }
.guitar-controls select { max-width: 100%; }
.guitar-fretboard { grid-template-columns: 112px repeat(25,58px); }
.fret-label { min-height: 48px; }
.fret-label button { min-width: 44px; min-height: 48px; }
.fret-label button small { font-size: 10px; opacity: 1; }
.fret-note { height: 48px; font-size: 12px; background: #533822; color: #fff0d6; text-shadow: none; }
.fret-number { color: #f0dec5; }
.fret-note.fretted { background: #365040; color: #f3fff1; box-shadow: inset 0 0 0 2px #b6d2bc; }
.fret-note.own-note, .fret-label .own-note { background: #9b4735; color: #fffaf3; box-shadow: inset 0 0 0 2px #f2a38e; }
.fret-note.peer-note, .fret-label .peer-note { background: #365040; color: #f3fff1; box-shadow: inset 0 0 0 2px #b6d2bc; }
.guitar-help, .fretboard-navigation > span, #guitar-shape { font-size: 13px; color: var(--soft); }
.guitar-chords .chord-pad { padding: 12px; color: var(--text); font-size: 20px; background: var(--surface-2); border-color: var(--stroke-strong); border-radius: 10px; }
.chord-pad.strumming { background: var(--accent); color: var(--accent-ink); }
.kalimba-tines { background: #4b3323; border-color: #a4845d; border-radius: 12px; justify-content: flex-start; gap: 8px; padding: 24px 16px; }
.kalimba-tine { flex-basis: 44px; color: #332719; }
.kalimba-tine strong { font-size: 12px; }
.kalimba-tine small { font-size: 12px; opacity: 1; }
.kalimba-tine.own-note { background: #f2a38e; }
.kalimba-tine.peer-note { box-shadow: inset 0 0 0 3px #365040; }
.studio-bottom { border-color: var(--stroke); gap: 16px; }
.studio-bottom p, #studio-audio-status, .studio-section .media-hint { font-size: 13px; color: var(--soft); }
.studio-bottom p:last-child { color: var(--quiet); }
.studio-meters { flex-wrap: wrap; gap: 16px; }
.studio-section .media-hint a { color: var(--accent); text-decoration: underline; }

.cinema-panel { background: var(--surface); border-color: var(--stroke); border-radius: 20px; box-shadow: none; }
.cinema-topline { background: var(--surface); color: var(--soft); border-color: var(--stroke); padding: 18px 24px; font-size: 14px; }
.provider-badge { color: var(--quiet); background: transparent; border: 0; font-size: 13px; padding: 0; }
.screen-wrap { aspect-ratio: 16/9; background: #151312; }
#screen-empty { color: #cec2b6; padding: 24px; }
#screen-empty > span, #screen-empty p { color: #cec2b6; font-size: 14px; }
#screen-empty h3 { color: #f6f0e7; font-size: clamp(24px,3vw,36px); }
.cinema-orb { box-shadow: none; color: #f2a38e; border-color: #9b887a; width: 56px; height: 56px; }
.player-controls { background: var(--surface-2); gap: 12px; padding: 12px 20px; flex-wrap: wrap; }
.player-controls button { min-width: 44px; min-height: 44px; color: var(--text); font-size: 15px; border: 1px solid transparent; border-radius: 8px; }
.player-controls button:hover:enabled { background: var(--surface-3); border-color: var(--stroke-strong); }
.player-controls input { accent-color: var(--accent); min-width: 120px; min-height: 44px; padding: 0; flex: 1; background: transparent; }
.player-controls #video-time { color: var(--soft); font-size: 12px; }
.cinema-bottom { padding: 24px; flex-wrap: wrap; }
.cinema-bottom .ghost { border-radius: 10px; color: var(--text); border-color: var(--stroke-strong); font-size: 14px; }
.cinema-badge { color: var(--soft); font-size: 13px; }
.cinema-badge::before { content: none; }
.video-title { color: var(--text); font-size: 29px; }
.cinema-bottom p, .media-hint { color: var(--soft); font-size: 13px; line-height: 2; }
.cinema-readiness { border-color: var(--stroke); padding: 20px 24px; flex-wrap: wrap; }
.cinema-readiness span { background: var(--surface-2); color: var(--soft); font-size: 13px; border-radius: 8px; }
.cinema-readiness .ready-person { color: var(--mint); }

.photo-card, .playlist-panel, .note, .listening-panel { background: var(--surface); border-color: var(--stroke); box-shadow: none; border-radius: 16px; }
.photo-card img { aspect-ratio: 4/3; }
.photo-card > p { color: var(--text); font-size: 15px; }
.photo-card > small, .photo-count, .library-help { color: var(--soft); font-size: 13px; }
.photo-card > .text-button, .library-section > .text-button, .library-section > label.import, .library-section .section-heading .button { font-size: 14px; }
.library-empty { color: var(--soft); border-color: var(--stroke); background: transparent; }
.library-empty > span { color: var(--accent); }
.library-empty h3 { color: var(--text); font-size: 29px; }
.library-empty p { color: var(--soft); font-size: 15px; }
.playlist-cover { background: var(--surface-2); color: var(--accent); }
.playlist-cover small, .playlist-cover p, .track-info small { color: var(--soft); font-size: 13px; }
.playlist-cover > span { color: var(--accent); }
.vinyl { color: #f6f0e7; background: #28231f; }
.track-area #track-count { color: var(--soft); font-size: 14px; }
.track-row { border-color: var(--stroke); gap: 12px; }
.track-number, .track-info strong { color: var(--text); font-size: 15px; }
.track-index { color: var(--quiet); font-size: 14px; }
.track-play { color: var(--accent); font-size: 14px; }
.track-actions { flex-wrap: wrap; gap: 8px; }
.track-actions a, .track-actions button, .photo-delete, .photo-favorite { color: var(--text); background: var(--surface-2); border: 1px solid var(--stroke-strong); border-radius: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.listen-controls input { min-height: 44px; }
.listening-panel p, .listen-controls label, .listen-controls span { color: var(--soft); font-size: 14px; }
.note, .note:nth-child(3n+2), .note:nth-child(3n) { background: var(--surface); border-color: var(--stroke); transform: none; }
.note p { color: var(--text); font-size: 16px; }
.note-bottom, .note-bottom button, .empty-text { color: var(--soft); font-size: 13px; }
#note-list:has(>.empty-text) { background: var(--surface); border-color: var(--stroke); }
.photo-comment-form input, #chat-form input { font-size: 16px; }
.photo-comments p, .photo-view-caption { color: var(--text); font-size: 15px; }
.photo-comments p { background: var(--surface-2); }
.photo-comments strong { color: var(--accent); }
.quick-reactions button { background: var(--surface-2); border-color: var(--stroke-strong); min-width: 44px; min-height: 44px; }

dialog { background: var(--surface); color: var(--text); border: 1px solid var(--stroke-strong); border-radius: 20px; padding: 28px; max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 24px 80px #0006; }
dialog::backdrop { background: #13100dbb; backdrop-filter: none; }
.dialog-head { gap: 16px; align-items: center; }
.dialog-head h2 { color: var(--text); font-size: 29px; }
.close, dialog .close { min-width: 44px; min-height: 44px; width: 44px; height: 44px; background: var(--surface-3); color: var(--text); border: 1px solid var(--stroke-strong); border-radius: 10px; flex-shrink: 0; }
dialog p, dialog small, .launch-dialog > p, .launch-dialog form > p, .launch-dialog details p, .onboarding-steps p, .management-box > p { color: var(--soft); font-size: 14px; line-height: 2.1; }
dialog label, .launch-dialog label { color: var(--text); font-size: 14px; }
dialog input, dialog select, dialog textarea, #video-dialog input, .launch-dialog :is(input,select,textarea) { background: var(--surface-2); color: var(--text); border-color: var(--stroke-strong); font-size: 16px; min-height: 48px; border-radius: 8px; }
input::placeholder, textarea::placeholder { color: var(--quiet); opacity: 1; }
dialog .submit { font-size: 15px; }
.question { color: var(--text)!important; font-family: var(--font-body); font-weight: 500; font-size: 22px!important; line-height: 2; min-height: 5rem; margin: 24px 0; }
.dialog-head h2, .quiz-panel h3, .question-strip h3, .library-empty h3 { font-family: var(--font-body); font-weight: 650; font-size: 22px; }
.check-label { font-size: 14px; min-height: 44px; }
.check-label input { min-height: 20px; width: 20px; height: 20px; accent-color: var(--accent); }
.account-tabs { gap: 8px; flex-wrap: wrap; }
.account-tabs [aria-pressed=true] { background: var(--surface-3); color: var(--accent); border-color: var(--accent); }
.source-chips span, .video-examples p, .video-examples .text-button { color: var(--soft); font-size: 13px; background: transparent; }
.launch-dialog { width: min(720px,calc(100vw - 32px)); }
.launch-dialog summary { color: var(--accent); font-size: 15px; padding: 8px 0; min-height: 44px; }
.launch-dialog small { font-size: 13px; color: var(--quiet); }
.onboarding-steps strong { color: var(--text); font-size: 16px; }
.management-box { background: var(--surface-2); border-color: var(--stroke); padding: 24px; border-radius: 12px; }
.management-box h3 { color: var(--text); font-family: var(--font-body); font-size: 19px; font-weight: 700; }
.management-row label { min-width: min(240px,100%); }
.management-row select, .management-row button { font-size: 14px; }
.danger-zone { border-color: var(--pink); }
.danger-zone h3, #sensitive-phrase, #closed-pair-hint { color: var(--pink); }
#sensitive-form { border-color: var(--pink); border-radius: 12px; }
#management-result, #feedback-result { color: var(--mint); font-size: 14px; }
.chat-launch { background: var(--surface); color: var(--text); border: 1px solid var(--stroke-strong); border-radius: 12px; padding: 12px 18px; font-size: 14px; box-shadow: 0 4px 16px var(--shadow); bottom: max(20px,env(safe-area-inset-bottom)); }
.chat-panel { z-index: 100; background: var(--surface); border-color: var(--stroke-strong); box-shadow: 0 16px 64px var(--shadow); width: min(430px,calc(100vw - 32px)); height: min(780px,calc(100dvh - 120px)); overflow: auto; }
#chat-status { color: var(--soft); font-size: 13px; }
.chat-message { background: var(--surface-2); color: var(--text); }
.chat-message p { color: var(--text); font-size: 15px; }
.chat-message small { color: var(--soft); font-size: 12px; }
.chat-message.mine { background: var(--surface-3); }
#chat-form { flex-wrap: wrap; }
#chat-messages { min-height: 80px; }
#chat-form > label { width: 100%; margin: 0; color: var(--soft); font-size: 13px; }
#chat-form > input:not([type=file]) { width: 100%; flex-basis: 100%; margin: 0; background: var(--surface-2); color: var(--text); border-color: var(--stroke-strong); }
.chat-compose-actions { width: 100%; display: flex; justify-content: space-between; gap: 12px; }
.chat-compose-actions button { font-size: 14px; }
#chat-upload-status { width: 100%; font-size: 12px; color: var(--soft); margin: 0; line-height: 1.8; }
#chat-draft { width: 100%; }
#chat-draft[hidden] { display: none; }
#chat-draft-preview img, #chat-draft-preview video { max-height: 120px; width: 100%; object-fit: contain; background: var(--page); aspect-ratio: 3/2; }
.chat-attachment { margin: 8px 0; }
.chat-attachment img, .chat-attachment video { display: block; width: 100%; max-height: 240px; object-fit: contain; aspect-ratio: 3/2; background: var(--page); border-radius: 6px; }
.chat-attachment video { max-height: 180px; }
.chat-attachment button { font-size: 13px; }
.chat-attachment a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); font-size: 13px; text-decoration: underline; }
.attachment-error { font-size: 13px!important; color: var(--pink)!important; }
.chat-remove { display: inline-block; min-height: 44px; background: transparent; color: var(--soft); font-size: 12px; padding: 8px; margin-inline-start: 8px; }
.question-progress { color: var(--quiet); font-size: 13px; border-top: 1px solid var(--stroke); padding-top: 12px; }
#chat-form label.sr-only { position: static; clip: auto; width: 100%; height: auto; margin: 0; overflow: visible; color: var(--soft); font-size: 13px; }
footer { border-color: var(--stroke); margin-top: 64px; padding-bottom: 90px; }
footer .brand { color: var(--text); }
footer p, footer small { color: var(--quiet); font-size: 13px; }
.launch-links button, .launch-links a, footer .text-button { font-size: 14px; color: var(--soft); }
#toast { background: var(--surface-3); color: var(--text); border: 1px solid var(--stroke-strong); font-size: 14px; bottom: 84px; box-shadow: none; }

@media (min-width: 1001px) {
  .studio-panel { display: grid; grid-template-columns: 170px minmax(0,1fr); column-gap: 32px; align-items: start; }
  .studio-top { grid-column: 1/-1; grid-row: 1; margin-bottom: 28px; padding: 12px 0 20px; }
  .instrument-tabs { grid-column: 1; grid-row: 2/9; display: flex; flex-direction: column; margin: 0; gap: 0; border-inline-end: 1px solid var(--stroke); padding-inline-end: 20px; }
  .instrument-tab { text-align: start; min-height: 78px; padding: 16px 12px; border-bottom-color: transparent; }
  .instrument-tab::after { display: block; font-size: 12px; font-weight: 400; color: var(--quiet); padding-top: 5px; }
  .instrument-tab[data-instrument=piano]::after { content: '۸۸ کلاویه'; }
  .instrument-tab[data-instrument=guitar]::after { content: '۶ سیم · ۲۴ فرت'; }
  .instrument-tab[data-instrument=kalimba]::after { content: '۱۷ تیغه / کروماتیک'; }
  .instrument-tab[data-instrument=synth]::after { content: '۱۲۸ نت MIDI'; }
  .instrument-tab[aria-pressed=true] { background: transparent; color: var(--accent); box-shadow: inset -2px 0 var(--accent); }
  .studio-mood { grid-column: 2; grid-row: 2; padding-bottom: 20px; }
  .studio-toolbar { grid-column: 2; grid-row: 3; margin-bottom: 20px; }
  #studio-kalimba, #studio-guitar { grid-column: 2; grid-row: 4; }
  .studio-keys-scroll { grid-column: 2; grid-row: 5; }
  .studio-meters { grid-column: 2; grid-row: 6; }
  .studio-bottom { grid-column: 2; grid-row: 7; }
  #studio-audio-status { grid-column: 2; grid-row: 8; }
}
@media (max-width: 1140px) {
  .topbar { gap: 12px; padding: 12px 24px; }
  .brand { font-size: 28px; }
  .brand small, .header-actions .settings { display: none; }
  .topbar nav a { padding: 9px 7px; font-size: 13px; }
  .header-actions { order: 2; }
  .start-guide { align-items: flex-start; }
  .start-guide > div:last-child { flex-shrink: 1; }
}
@media (max-width: 800px) {
  .topbar { display: flex; flex-wrap: wrap; }
  .topbar nav { order: 4; flex-basis: 100%; justify-content: space-between; }
  main { padding: 0 24px; }
  .intro { padding: 32px 0; }
  .together { display: none; }
  .start-guide { flex-direction: column; gap: 16px; padding: 24px; }
  .start-guide > div:last-child { justify-content: flex-start; }
  .games-layout { grid-template-columns: 1fr; }
  .room-bar { flex-wrap: wrap; }
  .room-actions { width: 100%; }
  .quiz-panel { padding: 24px; }
  .studio-panel { padding: 0; }
  .game-card { padding: 20px 0; }
  .quiz-columns { grid-template-columns: 1fr; }
  .studio-toolbar { gap: 16px; }
  .studio-toolbar label { flex: 1 0 120px; }
  .studio-toolbar input[type=range] { width: 100%; }
  .playlist-panel { grid-template-columns: 1fr; }
  .playlist-cover { min-height: 160px; }
  .question-strip { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 152px; }
  main { padding: 0 16px; }
  .topbar { padding: 12px 16px; gap: 10px; min-height: 0; }
  .brand { font-size: 28px; flex: 1; }
  .brand small { font-size: 10px; }
  .brand-icon { font-size: 35px; }
  .header-actions { gap: 6px; margin: 0; }
  .header-actions .ghost, .theme-toggle { font-size: 12px; padding: 8px; }
  .theme-toggle { min-width: 44px; }
  .header-actions .settings { display: none; }
  #nav-toggle { display: flex; order: 3; flex-basis: 100%; justify-content: space-between; align-items: center; font-size: 14px; padding: 9px 14px; }
  #nav-toggle::after { content: '+'; font-size: 22px; line-height: 1; }
  #nav-toggle[aria-expanded=true]::after { content: '−'; }
  .topbar nav { position: absolute; top: 100%; inset-inline: 16px; margin: 0; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--surface); border: 1px solid var(--stroke-strong); border-radius: 12px; box-shadow: 0 12px 24px var(--shadow); }
  .topbar nav a { padding: 12px 8px; font-size: 14px; }
  .account-strip { margin-top: 16px; font-size: 12px; }
  .intro { padding: 24px 0 32px; }
  .intro h1 { font-size: 30px; margin-bottom: 8px; }
  .intro > div > p { font-size: 15px; }
  .hero-actions { gap: 10px; margin-top: 20px; }
  .hero-actions a { flex: 1 1 150px; font-size: 14px; padding: 12px; }
  .start-guide { padding: 20px; }
  .start-guide p { font-size: 14px; }
  .start-guide > div:last-child { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .relationship { padding: 20px; }
  .relationship .sky-caption { gap: 12px; flex-wrap: wrap; font-size: 13px; }
  .relationship h2 { font-size: 40px; margin-top: 16px; }
  .relationship > p { font-size: 14px; }
  .relationship-days { flex-wrap: wrap; }
  .relationship-days span { font-size: 13px; }
  .relationship .subtle { font-size: 12px; }
  .room-bar { padding: 20px; }
  .room-intro h2 { font-size: 27px; }
  .room-intro p { font-size: 14px; }
  .room-actions { display: flex; align-items: stretch; }
  .room-actions label.sr-only { flex-basis: 100%; }
  .room-actions input { flex-basis: 100%; width: 100%; }
  .room-actions button { flex: 1 1 140px; }
  .play-section, .studio-section, .cinema-section, .library-section, .notes-section { margin-top: 44px; }
  .section-heading h2, .library-section .section-heading h2 { font-size: 25px; }
  .section-heading p, .library-section #album-mode, .library-section #playlist-mode { font-size: 14px; }
  .section-heading .eyebrow { font-size: 13px; }
  .section-number { display: none; }
  .section-heading > .button { font-size: 14px; }
  .quiz-panel { padding: 20px; }
  .game-card { padding: 20px 0; }
  .studio-panel { padding: 0; }
  .game-card-top { flex-wrap: wrap; }
  .game-card-top .tag { font-size: 13px; }
  .game-card h3 { font-size: 23px; }
  .ttt-board button { height: 72px; }
  .rps-options { gap: 8px; }
  .rps-options button { width: 76px; padding: 14px 6px; }
  .rps-options button span { font-size: 30px; }
  .question-strip { padding: 20px; }
  .question-strip h3 { font-size: 27px; }
  .question-strip p { font-size: 14px; }
  .studio-top { align-items: stretch; flex-direction: column; }
  .studio-top .button { width: 100%; }
  .instrument-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .instrument-tab { font-size: 15px; }
  .studio-mood h3 { font-size: 22px; }
  .studio-mood p { font-size: 14px; }
  .studio-toolbar label { font-size: 13px; }
  .studio-toolbar button, .studio-toolbar #studio-sustain { font-size: 13px; flex: 1 1 130px; }
  .studio-toolbar label select { min-width: 0; width: 100%; }
  .studio-keyboard { height: 210px; }
  .studio-bottom { flex-direction: column; }
  .studio-bottom p { font-size: 13px; }
  .guitar-controls label { flex-basis: 100%; }
  .guitar-controls select { width: 100%; font-size: 15px; }
  .guitar-controls button { width: 100%; }
  .guitar-performance button { white-space: normal; font-size: 14px; }
  .fretboard-navigation > span { font-size: 13px; }
  .fretboard-navigation button { font-size: 13px; }
  .cinema-topline { padding: 16px; font-size: 13px; gap: 12px; flex-wrap: wrap; }
  .screen-wrap { aspect-ratio: 4/3; }
  #screen-empty { padding: 16px; }
  #screen-empty h3 { font-size: 27px; }
  #screen-empty p { font-size: 14px; max-width: 100%; }
  .player-controls { gap: 8px; padding: 12px; }
  .player-controls input { order: 8; flex-basis: 100%; }
  .cinema-bottom, .cinema-readiness { padding: 20px; }
  .cinema-bottom .ghost { font-size: 14px; }
  .media-hint { font-size: 13px; padding: 0; }
  .track-row { flex-wrap: wrap; padding: 16px; }
  .track-info { flex: 1; min-width: 0; }
  .track-actions { flex-basis: 100%; padding-inline-start: 28px; }
  .track-actions a, .track-actions button { font-size: 13px; }
  .library-help { font-size: 13px; }
  dialog, .launch-dialog { padding: 20px; width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .dialog-head h2 { font-size: 26px; }
  .management-box { padding: 16px; }
  .management-row { align-items: stretch; }
  .management-row button { flex: 1 1 120px; font-size: 14px; }
  .management-row label { flex-basis: 100%; min-width: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .launch-links { gap: 8px 16px; }
  .chat-launch { left: 16px; font-size: 13px; }
  .chat-panel { left: 12px; bottom: 80px; width: calc(100% - 24px); padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
@media (max-width: 400px) {
  .c4-card { padding-inline: 4px; }
  .c4-card .game-card-top, .c4-card > h3, .c4-card > p, .c4-card .game-footer { margin-inline: 12px; }
  .c4-board { gap: 1px; padding: 0; }
}