:root {
  color-scheme: light;
  --bg: #ffffff;
  --sidebar: #ffffff;
  --panel: #ffffff;
  --panel-soft: #f7f9f6;
  --line: #e6e8e6;
  --text: #252725;
  --muted: #747b75;
  --purple: #669c5a;
  --purple-strong: #548b4c;
  --green: #77b45e;
  --yellow: #c39234;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 980px; min-height: 100vh; background: var(--bg); color: var(--text); }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible + span { outline: 3px solid #b7a4ff; outline-offset: 3px; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 246px; flex: 0 0 246px; background: var(--sidebar); border-right: 1px solid #222633; display: flex; flex-direction: column; padding: 29px 17px 18px; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px; text-decoration: none; color: var(--text); margin-bottom: 52px; }
.brand-mark { display: block; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 10px; object-fit: cover; box-shadow: 0 5px 16px #8f76e33b; }
.brand-name { font: 800 20px Manrope, sans-serif; letter-spacing: -1px; }
.brand-name span { color: var(--purple); }
.sidebar-label, .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.35px; color: #8d92a4; }
.sidebar-label { padding: 0 12px; margin-bottom: 13px; }
.main-nav { display: grid; gap: 5px; }
.nav-item { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; height: 45px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: #a4a8b5; text-align: left; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease; }
.nav-item:hover { background: #1d2130; color: #f4f1ff; transform: translateX(2px); }
.nav-item.active { background: #272338; color: #d4c9ff; }
.nav-icon { width: 19px; text-align: center; font-size: 18px; line-height: 1; color: #9b91c2; }
.nav-item.active .nav-icon { color: #c4b5ff; }
.nav-chevron { margin-left: auto; font-size: 21px; line-height: 1; color: #afa0e9; }
.sidebar-bottom { margin-top: auto; }
.daily-card { background: linear-gradient(145deg, #242033, #211f2d); border: 1px solid #353047; border-radius: 12px; padding: 15px 14px 13px; margin: 0 2px 19px; }
.daily-icon { color: var(--yellow); font-size: 17px; margin-bottom: 7px; }
.daily-title { font: 700 12px Manrope, sans-serif; }
.daily-card p { margin: 6px 0 12px; color: #a8a5b5; font-size: 11px; line-height: 1.55; }
.daily-progress, .overall-track { height: 5px; overflow: hidden; border-radius: 10px; background: #383444; }
.daily-progress span, .overall-track span { display: block; width: 0%; height: 100%; border-radius: inherit; background: #a993ff; transition: width .4s ease; }
.daily-caption { margin-top: 8px; color: #898698; font-size: 9px; }
.settings-link { margin-bottom: 20px; }
.sidebar-foot { padding: 0 11px; color: #6f7483; font-size: 8px; letter-spacing: 1px; font-weight: 700; }
.sidebar-foot span { margin-left: 3px; color: #b9a7ff; font-size: 12px; }
.main-area { position: relative; display: flex; flex-direction: column; min-width: 0; flex: 1; padding: 0 47px; }
.topbar { height: 81px; flex: 0 0 81px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #222633; }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .85px; font-weight: 700; color: #777e8e; }
.breadcrumb strong { color: #d9d9e1; letter-spacing: 0; font-size: 12px; }
.crumb-separator { color: #4a4e5a; }
.topbar-right { display: flex; align-items: center; gap: 15px; }
.streak-pill { padding: 8px 12px; border: 1px solid #302d3d; border-radius: 20px; color: #b6b2c4; font-size: 11px; }
.streak-pill span:first-child { color: var(--yellow); margin-right: 5px; }
.streak-pill span:nth-child(2) { color: #f3e7bd; font-weight: 700; }
.avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #584d79; background: #302941; color: #d0c2ff; font-weight: 700; font-size: 12px; cursor: pointer; transition: transform .2s; }
.avatar:hover { transform: scale(1.08); }
.view { flex: 1; padding-top: 36px; padding-bottom: 72px; animation: fade-in .28s ease both; }
.view.hidden, .hidden { display: none !important; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.welcome-row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 195px; }
.eyebrow { display: flex; align-items: center; gap: 8px; }
.eyebrow-dot { width: 6px; height: 6px; background: #baa7ff; border-radius: 50%; box-shadow: 0 0 9px #b69cff; }
h1, h2, p { margin-top: 0; }
.welcome-row h1, .page-heading h1 { margin: 17px 0 10px; font: 700 34px/1.2 Manrope, sans-serif; letter-spacing: -1.5px; }
.welcome-row h1 span, .page-heading h1 span { color: #b8a5ff; }
.welcome-copy { margin: 0; color: #9ba0af; font-size: 13px; }
.hero-art { position: relative; width: 230px; height: 175px; margin: 0 23px 0 0; }
.hero-glow { position: absolute; width: 168px; height: 139px; left: 25px; top: 10px; border-radius: 50%; background: radial-gradient(ellipse, #a48bfa32, #8a70da03 70%); filter: blur(9px); }
.hero-keyboard { position: absolute; display: flex; left: 24px; bottom: 21px; width: 185px; height: 69px; padding: 0 2px; border: 1px solid #d4d8d2; border-radius: 7px; background: #e8ebe6; box-shadow: 0 8px 14px #68705d25; transform: rotate(-4deg); }
.hero-keyboard i { flex: 1; height: 100%; border: 1px solid #c2bdce; border-radius: 0 0 3px 3px; background: linear-gradient(#f8f7fc, #e7e4ed); }
.hero-keyboard b { position: absolute; width: 12px; height: 39px; top: 0; border-radius: 0 0 3px 3px; background: #30332f; box-shadow: 0 2px 2px #1113; }
.hero-keyboard b:nth-of-type(1) { left: 14%; }.hero-keyboard b:nth-of-type(2) { left: 28%; }.hero-keyboard b:nth-of-type(3) { left: 56%; }.hero-keyboard b:nth-of-type(4) { left: 70%; }.hero-keyboard b:nth-of-type(5) { left: 84%; }
.hero-note { position: absolute; color: #bdaeff; text-shadow: 0 0 20px #a68bff99; }
.note-one { top: 5px; left: 52px; font-size: 29px; transform: rotate(-14deg); }
.note-two { top: 30px; right: 23px; font-size: 22px; color: #f0c978; transform: rotate(12deg); }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 21px 0 17px; }
.eyebrow.muted { color: #787f90; font-size: 9px; }
.section-heading h2, .progress-panel h2, .practice-top h2 { margin: 7px 0 0; font: 700 19px Manrope, sans-serif; letter-spacing: -.4px; }
.overall-progress { width: 190px; color: #858b9a; font-size: 10px; text-align: right; }
.overall-track { height: 4px; margin-top: 9px; background: #2a2e3b; }
.overall-track span { background: #a58df8; }
.level-list { display: grid; gap: 12px; }
.level-card { display: grid; grid-template-columns: 52px minmax(155px, 1fr) minmax(270px, 1.45fr) 118px; align-items: center; gap: 15px; min-height: 118px; padding: 17px 21px; border: 1px solid #292e3c; border-radius: 13px; background: linear-gradient(115deg, #1b1f2b, #191d27); transition: border .2s, transform .2s, background .2s; }
.level-card:not(.locked):hover { border-color: #51466e; transform: translateY(-2px); background: linear-gradient(115deg, #211f30, #1a1e29); }
.level-emblem { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 13px; color: #c8baff; background: #302943; font-size: 22px; }
.level-card[data-level="2"] .level-emblem { color: #f2ce88; background: #342e25; }
.level-card[data-level="3"] .level-emblem { color: #9dd9b1; background: #24352e; }
.level-card.locked .level-emblem { color: #777b88; background: #262a34; }
.level-info { min-width: 0; }
.level-info .level-label { display: flex; align-items: center; gap: 7px; color: #8d94a3; font-size: 9px; letter-spacing: .8px; font-weight: 700; }
.difficulty-dot { width: 5px; height: 5px; background: #a68cf7; border-radius: 50%; }
.level-card[data-level="2"] .difficulty-dot { background: #f3c875; }.level-card[data-level="3"] .difficulty-dot { background: #82c79a; }
.level-info h3 { overflow: hidden; margin: 7px 0 4px; font: 700 16px Manrope, sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.level-info p { overflow: hidden; margin: 0; color: #898f9d; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.quiz-pips { display: flex; align-items: center; justify-content: center; gap: 9px; }
.quiz-pip { width: 43px; height: 43px; border: 1px solid #343948; border-radius: 11px; background: #202430; color: #8d93a0; cursor: pointer; transition: all .18s; }
.quiz-pip:hover:not(:disabled) { border-color: #a88fff; color: #dfd4ff; transform: translateY(-2px); }
.quiz-pip:disabled { cursor: not-allowed; opacity: .45; }
.quiz-pip.completed { color: #e7d57e; border-color: #59513a; background: #302c23; }
.quiz-pip .pip-number { display: block; font-size: 12px; font-weight: 700; }
.quiz-pip .pip-stars { display: block; height: 11px; font-size: 8px; color: #efcf77; white-space: nowrap; }
.level-completion { justify-self: end; text-align: right; }
.level-completion strong { display: block; font: 700 14px Manrope, sans-serif; color: #e3e0eb; }
.level-completion span { display: block; margin-top: 4px; color: #878d9b; font-size: 9px; }
.lock-text { color: #8d91a0 !important; font-size: 11px !important; }
.game-topline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: -1px auto 13px; max-width: 925px; }
.text-button { justify-self: start; border: 0; background: transparent; color: #aca3c8; cursor: pointer; padding: 9px 0; font-size: 12px; }
.text-button:hover { color: #d8cefa; }
.game-progress-label { color: #989dac; letter-spacing: 1.15px; font-size: 9px; font-weight: 700; }
.icon-button { width: 30px; height: 30px; justify-self: end; display: grid; place-items: center; padding: 0; border: 1px solid #383b47; border-radius: 50%; background: transparent; color: #969ba7; font-size: 21px; cursor: pointer; }
.icon-button:hover { color: #fff; border-color: #777; }
.game-progress { max-width: 925px; height: 5px; margin: 0 auto 25px; border-radius: 10px; overflow: hidden; background: #292d38; }
.game-progress span { display: block; height: 100%; width: 16.67%; border-radius: inherit; background: #82bd64; transition: width .4s ease; }
.question-card { max-width: 925px; min-height: 530px; margin: 0 auto; padding: 31px 35px 25px; border: 1px solid #e1e1e4; border-radius: 17px; background: #fafafa; box-shadow: 0 16px 45px #080a101a; color: #242631; text-align: center; }
.question-kicker { color: #888994; font-size: 9px; letter-spacing: 1.2px; font-weight: 700; }
.question-card h1 { margin: 12px 0 5px; font: 600 26px Manrope, sans-serif; letter-spacing: -.7px; color: #20212a; }
.question-subtitle { margin: 0; color: #838590; font-size: 12px; }
.chord-reference { margin-top: 13px; padding: 8px 13px; border: 1px solid #d7d1ec; border-radius: 9px; background: #f4f1ff; color: #61518d; font-size: 10px; font-weight: 600; cursor: pointer; transition: all .18s; }
.chord-reference span { margin-right: 6px; color: #8b75ce; font-size: 9px; }
.chord-reference:hover { border-color: #a994e7; background: #ece7ff; transform: translateY(-1px); }
.piano-wrap { position: relative; width: min(100%, 650px); height: 210px; margin: 30px auto 11px; user-select: none; touch-action: manipulation; }
.piano-keys { position: relative; display: flex; width: 100%; height: 100%; padding: 0 1px 4px; }
.white-key { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; margin-left: -1px; border: 1px solid #d2d3d8; border-radius: 0 0 7px 7px; background: linear-gradient(100deg, #fff, #f9f9fa); box-shadow: 0 4px 0 #d1d1d4, 0 5px 6px #16161a0a; color: #71737b; cursor: pointer; transition: background .1s, transform .1s, box-shadow .1s; }
.white-key:first-child { margin-left: 0; }
.white-key:hover { background: #f0edfb; }
.white-key:active, .white-key.pressed { transform: translateY(2px); box-shadow: 0 2px 0 #c6c6ca; background: #eee9ff; }
.white-key .key-label { position: absolute; bottom: 12px; left: 0; right: 0; color: #777984; font-size: 10px; }
.white-key .target-mark { position: absolute; left: 50%; bottom: 30px; width: 13px; height: 13px; transform: translateX(-50%); border-radius: 50%; background: #91c46f; box-shadow: 0 0 0 4px #91c46f29, 0 2px 3px #13131a30; }
.black-key { position: absolute; z-index: 3; top: 0; width: 4.15%; height: 60%; border: 1px solid #111217; border-radius: 0 0 6px 6px; background: linear-gradient(100deg, #292a30, #111216 70%); box-shadow: 0 4px 0 #c8c8cd, 0 5px 5px #10101522; color: #c7c7cf; cursor: pointer; transform: translateX(-50%); transition: background .1s, height .1s; }
.black-key:hover { background: linear-gradient(100deg, #45414f, #23212a); }
.black-key:active, .black-key.pressed { height: 59%; background: linear-gradient(100deg, #625a76, #302b3b); }
.black-key .key-label { position: absolute; bottom: 7px; left: 0; right: 0; font-size: 8px; }
.black-key .target-mark { position: absolute; left: 50%; bottom: 24px; width: 9px; height: 9px; transform: translateX(-50%); border-radius: 50%; background: #91c46f; box-shadow: 0 0 0 3px #91c46f45; }
.quiz-key-hint { color: #9b9ca5; font-size: 10px; min-height: 16px; }
.answer-area { min-height: 54px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 17px auto 5px; }
.answer-option { min-width: 53px; height: 46px; padding: 0 14px; border: 2px solid #dedfe3; border-radius: 12px; background: #fff; color: #30313a; font-size: 16px; font-weight: 500; cursor: pointer; transition: all .15s ease; }
.answer-option:hover { border-color: #b4a4ed; background: #faf8ff; transform: translateY(-2px); }
.answer-option.selected { border-color: #8d76dd; background: #f2efff; color: #574488; box-shadow: 0 0 0 2px #a38af329; }
.answer-option:disabled { cursor: default; }
.chord-options .answer-option { min-width: 104px; font-size: 12px; }
.feedback { min-height: 22px; margin-top: 2px; font-size: 12px; font-weight: 600; }
.feedback.correct { color: #39864f; }.feedback.incorrect { color: #bd5151; }.feedback.neutral { color: #8d7b42; }
.game-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 9px; }
.primary-button { min-width: 169px; height: 43px; padding: 0 18px; border: 0; border-radius: 10px; background: #29263a; color: #f8f4ff; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 5px 12px #27213b20; transition: background .2s, transform .2s, opacity .2s; }
.primary-button span { margin-left: 9px; color: #c1b3f3; font-size: 16px; vertical-align: -1px; }
.primary-button:hover:not(:disabled) { transform: translateY(-2px); background: #41385e; }
.primary-button:disabled { opacity: .4; cursor: not-allowed; }
.secondary-button { height: 39px; padding: 0 15px; border: 1px solid #d5d6db; border-radius: 9px; background: #fff; color: #555762; font-size: 11px; font-weight: 600; cursor: pointer; transition: all .18s; }
.secondary-button:hover { border-color: #9c88df; color: #57488b; background: #faf8ff; }
.game-footnote { margin: 16px auto 0; text-align: center; color: #858b99; font-size: 10px; }
.game-footnote span { color: #b5a0f7; font-size: 13px; margin-right: 4px; }
.answer-correct { border-color: #68b879 !important; background: #e9f7ec !important; color: #317943 !important; }
.answer-wrong { border-color: #d87474 !important; background: #fff0f0 !important; color: #a13e3e !important; }
.results-view { max-width: 700px; margin: 40px auto; border: 1px solid #2e3241; border-radius: 20px; padding: 42px; text-align: center; background: radial-gradient(ellipse at top, #29243d, #191d28 60%); animation: fade-in .35s ease both; }
.results-icon { display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 19px; border-radius: 24px; color: #f1cd78; background: #383125; font-size: 35px; }
.results-view h1 { margin: 0 0 10px; font: 700 30px Manrope, sans-serif; }
.results-view > p { margin: 0 auto 24px; color: #a8abba; font-size: 13px; }
.result-stars { color: #f1cd78; letter-spacing: 8px; font-size: 29px; margin: 10px 0 22px 8px; }
.result-score { display: flex; justify-content: center; align-items: baseline; gap: 7px; margin-bottom: 27px; }
.result-score strong { font: 700 33px Manrope, sans-serif; }.result-score span { color: #9da2b0; font-size: 12px; }
.results-actions { display: flex; justify-content: center; gap: 11px; }
.results-actions .secondary-button { background: transparent; color: #d3cfdd; border-color: #484454; }
.results-actions .primary-button { background: #a28bf1; color: #211d30; }
.page-heading { margin: 12px 0 27px; }
.page-heading h1 { font-size: 32px; margin-top: 14px; }
.page-heading p { color: #9ba0af; font-size: 13px; margin: 0; }
.practice-card, .progress-panel, .settings-panel { border: 1px solid #2b3040; border-radius: 15px; background: linear-gradient(135deg, #1c202c, #191d27); }
.practice-card { padding: 25px 28px 18px; }
.practice-top { display: flex; align-items: center; justify-content: space-between; }
.practice-top h2 { font-size: 20px; }
.practice-controls { display: flex; align-items: center; gap: 14px; }
.small-button { height: 34px; background: #222634; border-color: #383d4c; color: #b7bbc7; }
.sound-status { color: #8c94a2; font-size: 8px; letter-spacing: 1px; font-weight: 700; }
.sound-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #84c993; box-shadow: 0 0 7px #84c993; }
.practice-piano { width: 100%; height: min(270px, 31vh); margin: 31px auto 12px; }
.practice-piano .white-key { background: linear-gradient(100deg, #fff, #ededf2); color: #434550; }
.practice-piano .white-key .key-label { color: #535662; }
.practice-piano .black-key { width: 4.15%; height: 58%; }
.practice-tip { border-top: 1px solid #2d3240; padding-top: 14px; color: #949aa8; font-size: 10px; }
.practice-tip span { display: inline-block; margin-right: 8px; color: #bcaaff; font-size: 8px; letter-spacing: 1px; font-weight: 700; }
.practice-note-card { display: flex; align-items: center; gap: 14px; margin-top: 15px; padding: 16px 19px; border: 1px solid #302d3e; border-radius: 12px; background: #1c1d29; }
.note-badge { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: #302943; color: #c0adff; font-size: 17px; }
.practice-note-card strong { font: 600 11px Manrope, sans-serif; }.practice-note-card p { margin: 4px 0 0; color: #979bab; font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 19px; }
.stat-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 132px; padding: 17px; border: 1px solid #2b3040; border-radius: 13px; background: #1a1e29; }
.stat-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 9px; font-size: 15px; }
.stat-icon.purple { color: #c5b5ff; background: #312946; }.stat-icon.yellow { color: #eed17e; background: #352f22; }.stat-icon.green { color: #9cddb0; background: #25372c; }.stat-icon.blue { color: #9bcaed; background: #23323c; }
.stat-value { font: 700 25px Manrope, sans-serif; letter-spacing: -.7px; }
.stat-label { margin-top: 4px; color: #838a9a; font-size: 8px; letter-spacing: .8px; font-weight: 700; }
.progress-panel { padding: 21px 22px 10px; }
.progress-panel-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.progress-panel-heading > span { color: #949aa8; font-size: 10px; }
.progress-rows { display: grid; }
.progress-row { display: grid; grid-template-columns: 33px 1fr 98px 59px; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid #2b3040; }
.progress-row-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; background: #29243a; color: #c0afff; font-size: 14px; }
.progress-row:nth-child(2) .progress-row-icon { color: #e9c97f; background: #352f22; }.progress-row:nth-child(3) .progress-row-icon { color: #91d3a4; background: #25372c; }
.progress-row-name strong { display: block; font-size: 11px; }.progress-row-name span { display: block; margin-top: 3px; color: #888f9e; font-size: 9px; }
.progress-row-bar { height: 4px; border-radius: 5px; background: #303543; overflow: hidden; }.progress-row-bar span { display: block; height: 100%; border-radius: inherit; background: #a68ef4; }
.progress-row-count { color: #9399a8; text-align: right; font-size: 9px; }
.settings-panel { padding: 0 23px; }
.setting-row { min-height: 79px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid #2d3240; }
.setting-row:last-child { border-bottom: 0; }
.setting-row strong { font: 600 12px Manrope, sans-serif; }.setting-row p { margin: 4px 0 0; color: #9298a7; font-size: 10px; }
.toggle { position: relative; width: 39px; height: 22px; flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle span { position: absolute; inset: 0; border-radius: 20px; background: #383d4a; pointer-events: none; transition: background .2s; }
.toggle span::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #b1b5bf; transition: transform .2s, background .2s; }
.toggle input:checked + span { background: #655494; }.toggle input:checked + span::after { transform: translateX(17px); background: #e1d7ff; }
.reset-row .secondary-button { height: 34px; color: #e0a0a0; border-color: #60404a; background: #2d222c; }.reset-row .secondary-button:hover { background: #402832; border-color: #bb7076; }
.settings-saved { min-height: 17px; margin: 10px 0; color: #92d3a4; font-size: 10px; }
.main-footer { position: absolute; bottom: 18px; left: 47px; right: 47px; display: flex; justify-content: space-between; color: #626979; font-size: 8px; font-weight: 700; letter-spacing: .8px; }
.main-footer b { color: #a68ef4; padding-left: 3px; }.main-footer i { color: #b29fff; font-style: normal; margin: 0 3px; }
.toast { position: fixed; z-index: 10; left: 50%; bottom: 34px; transform: translate(-50%, 12px); padding: 11px 17px; border: 1px solid #393449; border-radius: 10px; background: #242131; color: #e7e0ff; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: 0 10px 30px #08091288; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1200px) {
  .sidebar { width: 213px; flex-basis: 213px; }.main-area { padding: 0 30px; }
  .level-card { grid-template-columns: 48px minmax(135px, 1fr) minmax(230px, 1.3fr) 85px; gap: 11px; padding: 15px; }
  .quiz-pip { width: 38px; height: 40px; }.quiz-pips { gap: 6px; }
  .level-completion strong { font-size: 12px; }
  .main-footer { left: 30px; right: 30px; }
}
@media (max-height: 850px) {
  .view { padding-top: 24px; padding-bottom: 55px; }
  .welcome-row { min-height: 160px; }.hero-art { transform: scale(.86); transform-origin: right center; }
  .level-list { gap: 8px; }.level-card { min-height: 105px; }
  .question-card { min-height: 480px; padding-top: 24px; }
  .piano-wrap { height: 190px; margin-top: 22px; }
  .practice-piano { height: min(240px, 29vh); }
}

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

body { background: #fff; color: #262826; }
.sidebar { background: #fff; border-right-color: #ededeb; }
.brand { color: #242724; }
.brand-mark { background: #79b65f; box-shadow: 0 5px 16px #66a84b25; }
.brand-name span, .sidebar-foot span { color: #5e964e; }
.sidebar-label, .eyebrow, .breadcrumb { color: #858a85; }
.nav-item { color: #626761; }
.nav-item:hover { background: #f5f8f3; color: #303830; }
.nav-item.active { background: #eef6e9; color: #3f7939; }
.nav-icon, .nav-item.active .nav-icon { color: #659b58; }
.nav-chevron { color: #659b58; }
.daily-card { background: linear-gradient(145deg, #f8fbf5, #f3f7ef); border-color: #e6eddf; }
.daily-card p { color: #747b72; }
.daily-progress, .overall-track { background: #e8ebe6; }
.daily-progress span, .overall-track span { background: #78b65d; }
.daily-caption, .sidebar-foot { color: #818780; }
.main-area { background: #fff; }
.topbar { border-bottom-color: #eceeeb; }
.breadcrumb strong { color: #383c38; }
.crumb-separator { color: #c1c5c0; }
.streak-pill { border-color: #e5e8e2; color: #676c65; background: #fff; }
.streak-pill span:nth-child(2) { color: #5b8e4a; }
.avatar { border-color: #dbe7d3; background: #f0f6eb; color: #558c48; }
.eyebrow-dot { background: #72ad5b; box-shadow: 0 0 8px #73b65c55; }
.welcome-row h1 span, .page-heading h1 span { color: #609650; }
.welcome-copy, .page-heading p { color: #747b75; }
.hero-glow { background: radial-gradient(ellipse, #8cbd7730, #8cbd7700 70%); }
.hero-keyboard { border-color: #d4d8d2; box-shadow: 0 8px 14px #68705d25; }
.hero-keyboard i { border-color: #d4d8d2; background: linear-gradient(#fff, #f0f1ed); }
.hero-keyboard b { background: #262825; }
.hero-note { color: #79a96a; text-shadow: 0 0 20px #8eba6b55; }
.note-two { color: #c39234; }
.eyebrow.muted, .overall-progress { color: #838982; }
.level-card { border-color: #e6e9e4; background: linear-gradient(115deg, #fff, #fcfdfb); }
.level-card:not(.locked):hover { border-color: #b8d0ab; background: linear-gradient(115deg, #fbfdf9, #f6faf3); }
.level-emblem { color: #609750; background: #eff6e9; }
.level-card[data-level="2"] .level-emblem { color: #a57a2c; background: #fbf5e8; }
.level-card[data-level="3"] .level-emblem { color: #4c9166; background: #edf6ef; }
.level-card[data-level="4"] .level-emblem { color: #587fa2; background: #eef4fa; }
.level-card[data-level="5"] .level-emblem { color: #8a6aa5; background: #f5eff9; }
.level-card[data-level="6"] .level-emblem { color: #a47b39; background: #fbf5e8; }
.level-card[data-level="7"] .level-emblem { color: #b46e56; background: #fbf0eb; }
.level-card[data-level="4"] .difficulty-dot { background: #79a6cb; }
.level-card[data-level="5"] .difficulty-dot { background: #aa8ac1; }
.level-card[data-level="6"] .difficulty-dot { background: #d1a553; }
.level-card[data-level="7"] .difficulty-dot { background: #d38a6d; }
.level-card.locked .level-emblem { color: #818780; background: #f0f1ef; }
.level-info .level-label, .level-info p, .level-completion span { color: #818780; }
.level-info h3, .level-completion strong { color: #333832; }
.quiz-pip { border-color: #e1e5de; background: #fff; color: #777e75; }
.quiz-pip:hover:not(:disabled) { border-color: #90b77d; color: #477d3e; }
.quiz-pip.completed { color: #926d24; border-color: #ebdbac; background: #fffaf0; }
.game-topline { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 38px; width: 100%; max-width: none; margin: 0 auto 0; }
.game-progress { width: 100%; max-width: none; height: 13px; margin: 0; border-radius: 20px; background: #eceeed; }
.game-progress span { background: #74b45a; }
.icon-button { width: 32px; height: 32px; border-color: #cfd2cf; color: #a1a5a1; background: #fff; }
.icon-button:hover { color: #444943; border-color: #9da39a; }
.question-card { width: min(100%, 1160px); max-width: none; min-height: 0; margin: 55px auto 0; padding: 0 30px 25px; border: 0; border-radius: 0; background: #fff; box-shadow: none; color: #242624; }
.question-kicker, .question-subtitle, .quiz-key-hint, .game-footnote { display: none; }
.question-card h1 { margin: 0 0 70px; color: #202220; font: 400 38px/1.25 "DM Sans", "Segoe UI", sans-serif; letter-spacing: -.8px; }
.chord-reference { margin: -48px 0 43px; border-color: #e1e5dd; background: #f8faf6; color: #507845; }
.chord-reference span { color: #659954; }
.piano-wrap { width: min(100%, 860px); height: 275px; margin: 0 auto 82px; }
.key-label { display: none !important; }
.white-key { border-color: #d1d2d1; background: #fff; box-shadow: 0 5px 0 #d4d4d4, 0 7px 6px #0000000c; }
.white-key:hover { background: #f8faf6; }
.white-key:active, .white-key.pressed { box-shadow: 0 2px 0 #c7c8c6; background: #f0f5ed; }
.white-key .target-mark, .black-key .target-mark { background: #999d99; box-shadow: 0 0 0 3px #999d9920, 0 2px 3px #13131a30; }
.black-key { background: #151615; box-shadow: 0 5px 0 #d2d2d2, 0 7px 5px #00000012; }
.black-key:hover { background: #343634; }
.black-key:active, .black-key.pressed { background: #4a4d49; }
.answer-area { min-height: 67px; margin: 0 auto; gap: 14px; }
.answer-option { min-width: 60px; height: 67px; padding: 0 22px; border: 2px solid #d5d7d9; border-radius: 15px; background: #fff; color: #252625; font-size: 22px; font-weight: 400; }
.answer-option:hover { border-color: #aebdaf; background: #fbfdf9; transform: translateY(-1px); }
.answer-option.selected { border-color: #82b56d; background: #f1f7ed; color: #3e7436; box-shadow: 0 0 0 2px #82b56d20; }
.chord-options .answer-option { min-width: 185px; height: 67px; font-size: 21px; }
.feedback { min-height: 28px; padding-top: 12px; font-size: 13px; }
.game-actions { margin-top: 13px; }
.primary-button { background: #649b51; color: #fff; }
.primary-button span { color: #e8f4e3; }
.primary-button:hover:not(:disabled) { background: #4e873e; }
.secondary-button { border-color: #d5d9d2; color: #51574f; }
.secondary-button:hover { border-color: #8bb477; color: #49783c; background: #f8fbf5; }
.results-view { border-color: #e4e8e1; background: radial-gradient(ellipse at top, #f4f8ef, #fff 65%); }
.results-view h1 { color: #292d28; }
.results-view > p, .result-score span { color: #747b73; }
.results-actions .secondary-button { background: #fff; color: #51574f; border-color: #d5d9d2; }
.results-actions .primary-button { background: #649b51; color: #fff; }
.practice-card, .progress-panel, .settings-panel { border-color: #e5e9e2; background: #fff; }
.practice-tip { border-top-color: #e8ebe6; color: #747b73; }
.practice-note-card { border-color: #e5e9e2; background: #f9fbf7; }
.note-badge { background: #edf5e9; color: #5a914a; }
.practice-note-card p { color: #747b73; }
.small-button { background: #fff; border-color: #dfe3dc; color: #5e655c; }
.sound-status { color: #737a72; }
.stat-card { border-color: #e5e9e2; background: #fff; }
.stat-icon.purple { color: #5f934f; background: #edf5e9; }
.stat-icon.yellow { color: #a27a2a; background: #fbf4e5; }
.stat-icon.green { color: #4c9166; background: #edf6ef; }
.stat-icon.blue { color: #53839b; background: #eef5f8; }
.stat-label, .progress-panel-heading > span, .progress-row-name span { color: #7d847b; }
.progress-row { border-top-color: #e8ebe6; }
.progress-row-icon, .progress-row:nth-child(2) .progress-row-icon, .progress-row:nth-child(3) .progress-row-icon { background: #edf5e9; color: #5a914a; }
.progress-row-bar { background: #edf0eb; }
.progress-row-bar span { background: #78b45e; }
.progress-row-count { color: #737a72; }
.setting-row { border-bottom-color: #e8ebe6; }
.setting-row p { color: #747b73; }
.toggle span { background: #dfe4dc; }
.toggle span::after { background: #fff; box-shadow: 0 1px 3px #0002; }
.toggle input:checked + span { background: #76ae5d; }
.toggle input:checked + span::after { background: #fff; }
.reset-row .secondary-button { color: #a64e4e; border-color: #eddada; background: #fffafa; }
.main-footer { color: #858b83; }
.main-footer b { color: #679d53; }
.toast { border-color: #e1e6dd; background: #fff; color: #3d5538; box-shadow: 0 10px 30px #2030181c; }

body.in-quiz .sidebar,
body.in-quiz .topbar,
body.in-quiz .main-footer { display: none; }
body.in-quiz .main-area { padding-right: 65px; padding-left: 65px; }
body.in-quiz .view { padding-top: 36px; padding-bottom: 28px; }
body.in-quiz .game-topline { width: 100%; }
body.in-quiz .question-card { margin-top: 72px; }
body.in-quiz .question-card h1 { margin-bottom: 105px; }

@media (max-width: 1200px) {
  .game-topline { gap: 24px; }
  .question-card { margin-top: 45px; padding-right: 18px; padding-left: 18px; }
  .question-card h1 { margin-bottom: 55px; }
  .piano-wrap { height: 245px; margin-bottom: 65px; }
  .answer-option { height: 58px; padding: 0 18px; font-size: 19px; }
  .chord-options .answer-option { min-width: 150px; height: 58px; font-size: 17px; }
}
@media (max-width: 1200px) {
  body.in-quiz .main-area { padding-right: 36px; padding-left: 36px; }
  body.in-quiz .question-card { margin-top: 45px; }
  body.in-quiz .question-card h1 { margin-bottom: 55px; }
}
@media (max-height: 850px) {
  .question-card { margin-top: 34px; }
  .question-card h1 { margin-bottom: 38px; }
  .piano-wrap { height: 220px; margin-bottom: 46px; }
  .answer-option, .chord-options .answer-option { height: 56px; }
}

html, body { width: 100%; height: 100%; min-width: 0; overflow: hidden; }
.app-shell { width: 100%; height: 100%; min-height: 0; display: block; }
.sidebar { display: none; }
.main-area { width: 100%; height: 100%; min-width: 0; overflow: auto; padding: 0 4.25%; }
.topbar { position: sticky; z-index: 20; top: 0; height: 68px; flex-basis: 68px; gap: 34px; justify-content: flex-start; border-bottom: 1px solid #edf0ec; background: #fff; -webkit-app-region: drag; }
.brand { flex: 0 0 auto; padding: 0; margin: 0; }
.topbar .brand, .topbar .main-nav, .topbar .nav-item { -webkit-app-region: no-drag; }
.brand-mark { background: #79b65f; box-shadow: 0 5px 16px #66a84b25; }
.brand-name { font-size: 18px; }
.main-nav { display: flex; align-items: center; gap: 7px; margin-left: 12px; }
.nav-item { width: auto; height: 38px; gap: 8px; padding: 0 13px; border-radius: 9px; color: #686e67; font-size: 12px; -webkit-app-region: no-drag; }
.nav-item:hover { transform: none; background: #f5f8f3; color: #303830; }
.nav-item.active { background: #eef6e9; color: #3f7939; }
.nav-icon, .nav-item.active .nav-icon { width: auto; color: #659b58; font-size: 15px; }
.topbar-right { flex: 0 0 auto; gap: 10px; margin-left: auto; -webkit-app-region: no-drag; }
.streak-pill { padding: 7px 11px; }
.avatar.gear-button { display: grid; place-items: center; width: 34px; height: 34px; padding: 7px; border-color: #e1e8dc; background: #f5f8f2; color: #56894b; }
.gear-button svg { width: 18px; height: 18px; fill: currentColor; transition: transform .2s ease; }
.gear-button:hover svg { transform: rotate(35deg); }
.window-controls { display: flex; align-items: center; gap: 3px; margin-left: 8px; }
.window-control { display: grid; place-items: center; width: 34px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #676d66; font: 400 18px/1 "Segoe UI", sans-serif; cursor: pointer; }
.window-control:hover { background: #f0f2ef; }
.window-close:hover { background: #e35d5d; color: #fff; }
.view { min-height: calc(100% - 68px); }
body.in-quiz .sidebar { display: none; }
body.in-quiz .main-area { padding-right: 4.25%; padding-left: 4.25%; }
body.in-quiz .view { min-height: calc(100% - 68px); padding-top: 36px; padding-bottom: 28px; }
body.in-quiz .topbar { display: flex; }
body.in-quiz .game-topline { width: 100%; }
body.in-quiz .question-card { margin-top: 72px; }
body.in-quiz .question-card h1 { margin-bottom: 105px; }
body.in-quiz .main-footer { display: none; }
.main-footer { bottom: 15px; }

@media (max-width: 900px) {
  .main-area { padding-right: 22px; padding-left: 22px; }
  .topbar { gap: 12px; }
  .main-nav { gap: 2px; margin-left: 0; }
  .nav-item { gap: 5px; padding-right: 8px; padding-left: 8px; font-size: 11px; }
  .streak-pill { display: none; }
  .window-control { width: 27px; }
  body.in-quiz .main-area { padding-right: 22px; padding-left: 22px; }
  body.in-quiz .question-card { margin-top: 45px; }
  body.in-quiz .question-card h1 { margin-bottom: 55px; }
}

.learning-layout { display: grid; grid-template-columns: minmax(0, 1fr) 225px; align-items: stretch; gap: 18px; }
.level-card { cursor: pointer; }
.level-card:focus-visible { outline: 3px solid #8ab779; outline-offset: 3px; }
.fun-facts-panel { display: flex; flex-direction: column; align-items: flex-start; min-height: 100%; padding: 20px 18px; border: 1px solid #e6e9e2; border-radius: 13px; background: linear-gradient(155deg, #f9fcf7, #f3f8ef); }
.fun-facts-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 17px; border-radius: 10px; background: #e9f3e2; color: #6ba454; font-size: 17px; }
.fun-facts-panel .eyebrow { font-size: 8px; letter-spacing: 1px; }
.fun-facts-panel h2 { margin: 7px 0 9px; color: #303730; font: 700 17px Manrope, sans-serif; }
.fun-facts-panel p { min-height: 82px; margin: 0 0 13px; color: #737b70; font-size: 11px; line-height: 1.65; }
.fact-next-button { margin-top: auto; padding: 0; border: 0; background: transparent; color: #558b47; font-size: 10px; font-weight: 700; cursor: pointer; }
.fact-next-button:hover { color: #396f30; }
.fact-next-button span { margin-left: 5px; font-size: 14px; }
.fact-count { margin-top: 12px; color: #989f95; font-size: 9px; }
.quiz-level-page { min-height: calc(100% - 68px); padding: 28px 0 70px; animation: fade-in .22s ease both; }
.back-levels { color: #5d8d4f; }
.back-levels:hover { color: #3d7131; }
.level-page-heading { display: flex; align-items: center; gap: 17px; margin: 20px 0 25px; }
.level-page-heading .level-emblem { width: 55px; height: 55px; font-size: 25px; }
.level-page-heading .eyebrow { margin-bottom: 5px; }
.level-page-heading h1 { margin: 0; color: #2c302b; font: 700 28px/1.2 Manrope, sans-serif; letter-spacing: -.7px; }
.level-page-heading p { margin: 5px 0 0; color: #788074; font-size: 12px; }
.level-page-content { display: grid; grid-template-columns: minmax(0, 1fr) 225px; align-items: start; gap: 18px; }
.level-quiz-panel { padding: 20px; border: 1px solid #e5e9e2; border-radius: 14px; background: #fff; }
.level-quiz-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.level-quiz-heading h2 { margin: 5px 0 0; color: #31352f; font: 700 18px Manrope, sans-serif; }
.level-quiz-heading > span { color: #788074; font-size: 10px; }
.level-quiz-grid { display: grid; gap: 9px; }
.level-quiz-button { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 2px 12px; width: 100%; min-height: 66px; padding: 10px 13px; border: 1px solid #e6eae3; border-radius: 11px; background: #fff; text-align: left; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
.level-quiz-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #abc99c; background: #fbfdf9; }
.level-quiz-number { grid-row: 1 / 3; display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #e3e8df; border-radius: 10px; color: #648659; font: 700 14px Manrope, sans-serif; }
.level-quiz-name { color: #343832; font-size: 12px; font-weight: 700; }
.level-quiz-status { color: #898f84; font-size: 9px; }
.level-quiz-arrow, .level-quiz-lock { grid-column: 3; grid-row: 1 / 3; color: #6e9e5b; font-size: 19px; }
.level-quiz-button.completed .level-quiz-status { color: #997528; }
.level-quiz-button.completed .level-quiz-number { border-color: #e9ddb7; background: #fffbf0; color: #977429; }
.level-quiz-button.locked { background: #fafbf9; cursor: default; }
.level-quiz-button.locked .level-quiz-number, .level-quiz-button.locked .level-quiz-name, .level-quiz-button.locked .level-quiz-status, .level-quiz-button.locked .level-quiz-lock { color: #a4aaa1; }
.level-fact-panel { min-height: 215px; }
.confetti-canvas { position: fixed; z-index: 100; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.confetti-canvas.visible { opacity: 1; }
.page-fade-out { animation: page-exit .13s ease-in forwards !important; pointer-events: none; }
.page-fade-in { animation: page-enter .2s ease-out both !important; }
@keyframes page-exit { to { opacity: 0; transform: translateY(-5px); } }
@keyframes page-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.quiz-pip.locked { opacity: .46; cursor: pointer; }

.songs-heading { margin-bottom: 21px; }
.song-picker-card, .song-preview-card, .songbook { border: 1px solid #e5e9e2; border-radius: 15px; background: #fff; box-shadow: 0 7px 24px #32402a08; }
.song-picker-card { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; padding: 19px 21px; }
.song-select-field { display: grid; gap: 8px; color: #7a8278; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.song-select-control { position: relative; display: flex; align-items: center; min-width: 0; }
.song-select-field select { width: 100%; height: 43px; padding: 0 63px 0 13px; appearance: none; border: 1px solid #e0e6dc; border-radius: 9px; background: #fff; color: #343a33; font: 600 12px "DM Sans", "Segoe UI", sans-serif; letter-spacing: 0; cursor: pointer; }
.song-select-field select:focus-visible { outline: 3px solid #afcdec; outline-offset: 2px; }
.select-search-button { position: absolute; z-index: 1; top: 0; right: 27px; display: grid; width: 29px; height: 43px; place-items: center; padding: 0; border: 0; background: transparent; color: #83907d; cursor: pointer; }
.select-search-button:hover { color: #3478d4; }
.select-search-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.8; }
.select-chevron { position: absolute; right: 13px; width: 7px; height: 7px; transform: rotate(45deg) translateY(-2px); border-right: 1.5px solid #7a8278; border-bottom: 1.5px solid #7a8278; pointer-events: none; }
.song-select-search { width: 100%; height: 35px; padding: 0 11px; border: 1px solid #dce5d6; border-radius: 8px; background: #fbfdf9; color: #343a33; font: 500 11px "DM Sans", "Segoe UI", sans-serif; letter-spacing: 0; }
.song-select-search:focus { outline: 2px solid #afcdec; outline-offset: 1px; }
.song-preview-card { margin-top: 14px; padding: 18px 20px; }
.song-preview-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.song-preview-heading h2 { margin: 6px 0 3px; color: #303630; font: 700 18px Manrope, sans-serif; }
.song-preview-heading p { margin: 0; color: #7c8479; font-size: 10px; }
.song-note-preview { display: flex; flex-wrap: wrap; gap: 6px; max-height: 98px; overflow: auto; }
.song-note-chip { min-width: 40px; height: 29px; padding: 0 8px; border: 1px solid #e2e8de; border-radius: 7px; background: #fafcf9; color: #486340; font: 700 10px "DM Sans", sans-serif; cursor: pointer; transition: background .14s, border-color .14s, transform .14s; }
.song-note-chip:hover { transform: translateY(-1px); border-color: #b8d1aa; background: #f1f8ed; }
.song-preview-break { flex-basis: 100%; height: 0; }
.open-book-button { display: flex; align-items: center; gap: 9px; min-height: 42px; margin: 13px 0 16px; padding: 0 18px; border: 0; border-radius: 9px; background: #3478d4; color: #fff; font: 700 12px "DM Sans", "Segoe UI", sans-serif; box-shadow: 0 5px 13px #3478d430; cursor: pointer; transition: background .16s, transform .16s; }
.open-book-button:hover:not(:disabled) { transform: translateY(-1px); background: #2468c3; }
.open-book-button:disabled { opacity: .55; cursor: default; }
.open-book-button > span { font-size: 17px; }
.songbook { position: relative; margin: 5px 0 12px; padding: 17px 19px 14px; overflow: hidden; border-color: #e2ddcf; background: #fbf8ef; box-shadow: 0 14px 30px #34301e12, inset 9px 0 18px #806f3a0a; animation: page-enter .2s ease-out both; }
.songbook::before { position: absolute; top: 0; bottom: 0; left: 31px; width: 1px; background: #e9dfc9; content: ""; }
.songbook-toolbar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px 12px 25px; border-bottom: 1px solid #e9e2d3; }
.songbook-toolbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.songbook-play-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid #c9d9bd; border-radius: 8px; background: #f2f8ed; color: #47733a; font: 700 10px "DM Sans", "Segoe UI", sans-serif; cursor: pointer; transition: background .16s, border-color .16s, transform .16s; }
.songbook-play-button:hover { transform: translateY(-1px); border-color: #a9c89a; background: #e9f4e1; }
.songbook-play-button span { font-size: 10px; }
.songbook-play-status { min-height: 15px; margin: 8px 0 0 25px; color: #75836c; font: 600 9px "DM Sans", "Segoe UI", sans-serif; }
.songbook-page-label { display: grid; gap: 4px; min-width: 0; }
.book-eyebrow { color: #9a8d71; font-size: 8px; font-weight: 800; letter-spacing: 1.1px; }
.songbook-page-label strong { overflow: hidden; color: #4c463b; font: 700 13px Manrope, sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.notation-toggle { display: flex; flex: 0 0 auto; gap: 4px; margin: 0; padding: 3px; border: 1px solid #e4ddce; border-radius: 9px; background: #f4f0e6; }
.notation-toggle legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.notation-toggle label { position: relative; cursor: pointer; }
.notation-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.notation-toggle label span { display: block; padding: 7px 10px; border-radius: 6px; color: #817965; font-size: 9px; font-weight: 700; white-space: nowrap; }
.notation-toggle input:checked + span { background: #fff; color: #3c6eab; box-shadow: 0 1px 4px #50472d1c; }
.notation-toggle input:focus-visible + span { outline: 2px solid #3478d4; outline-offset: 2px; }
.songbook-page { display: grid; min-height: 180px; align-content: center; padding: 16px 25px 10px 39px; }
.songbook-letter-note { display: grid; place-items: center; min-height: 63px; border: 1px solid #e9e0cc; border-radius: 8px; background: #fffdf7; cursor: pointer; transition: transform .14s, border-color .14s, background .14s; }
.songbook-letter-note:hover { transform: translateY(-2px); border-color: #a9c8e8; background: #f7fbff; }
.letter-note-name { color: #3b4d3b; font: 700 17px Manrope, sans-serif; }
.letter-note-number { margin-top: -8px; color: #aaa18d; font-size: 8px; }
.song-staff-svg { width: 100%; max-height: 220px; overflow: visible; }
.staff-line, .staff-ledger, .staff-barline { stroke: #736e62; stroke-width: 1.15; }
.staff-barline { stroke: #bdb5a5; stroke-width: .8; }
.staff-clef { fill: #474238; font: 52px "Segoe UI Symbol", "Noto Music", serif; }
.staff-note { cursor: pointer; outline: none; }
.staff-note:focus .staff-notehead, .staff-note:hover .staff-notehead { fill: #3478d4; }
.staff-notehead, .staff-stem { fill: #34342f; stroke: #34342f; stroke-width: 1.7; }
.staff-accidental { fill: #4b463c; font: 20px "Segoe UI Symbol", "Segoe UI", sans-serif; }
.songbook-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 11px 2px 0 25px; border-top: 1px solid #e9e2d3; }
.songbook-controls .secondary-button { height: 33px; border-color: #ded7c7; background: #fffdf7; color: #686251; font-size: 10px; }
.songbook-controls .secondary-button:last-child { justify-self: end; }
.songbook-controls .secondary-button:disabled { opacity: .45; cursor: default; }
.songbook-controls > span { color: #8a826e; font-size: 9px; }
.songbook-note { margin: 0; color: #81877d; font-size: 9px; line-height: 1.5; }
.songbook-screen { animation: page-enter .2s ease-out both; }
.songbook-back { margin: 0 0 12px; padding: 7px 0; border: 0; background: transparent; color: #597750; font: 700 11px "DM Sans", "Segoe UI", sans-serif; cursor: pointer; }
.songbook-back:hover { color: #3478d4; }
.songbook-letter-rows { display: grid; gap: 8px; }
.songbook-letter-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.songbook-letter-note, .songbook-letter-spacer { min-width: 0; min-height: 45px; }
.songbook-letter-note { grid-template-rows: 1fr auto; }
.songbook-letter-note .letter-note-number { margin-top: -2px; }
.songbook-letter-spacer { display: block; }
.songbook-page { min-height: 0; padding-top: 14px; padding-bottom: 14px; }
.song-staff-svg { display: block; width: 100%; max-height: none; }

@media (max-width: 950px) {
  .learning-layout, .level-page-content { grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; }
  .level-card { grid-template-columns: 42px minmax(110px, 1fr) minmax(160px, 1.2fr) 65px; gap: 9px; padding: 12px; }
  .level-emblem { width: 39px; height: 39px; }
  .quiz-pips { gap: 4px; }
  .quiz-pip { width: 31px; height: 37px; }
  .level-completion strong { font-size: 11px; }
  .song-picker-card { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .song-picker-card { grid-template-columns: 1fr; }
  .songbook-toolbar { align-items: flex-start; flex-direction: column; }
  .songbook-toolbar-actions { width: 100%; justify-content: space-between; }
  .songbook-page { padding-right: 8px; padding-left: 12px; }
  .songbook-letter-row { gap: 5px; }
  .songbook-letter-note, .songbook-letter-spacer { min-height: 40px; }
}

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

button.click-bounce { animation: click-bounce .24s ease-out; }
@keyframes click-bounce {
  0% { transform: scale(1); }
  32% { opacity: .68; transform: scale(.955); }
  70% { opacity: .94; transform: scale(1.025); }
  100% { opacity: 1; transform: scale(1); }
}

.experiment-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .8fr); gap: 18px; align-items: start; }
.experiment-piano-card, .saved-recordings-card { padding: 19px; border: 1px solid #e5e9e2; border-radius: 14px; background: #fff; box-shadow: 0 7px 24px #32402a08; }
.experiment-toolbar, .saved-recordings-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.experiment-toolbar h2, .saved-recordings-heading h2 { margin: 5px 0 0; color: #333832; font: 700 17px Manrope, sans-serif; }
.octave-controls { display: flex; align-items: center; gap: 8px; }
.octave-controls .secondary-button { height: 32px; padding: 0 9px; font-size: 9px; }
.octave-controls > span { min-width: 49px; color: #697267; font-size: 10px; font-weight: 700; text-align: center; }
.experiment-recorder { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.experiment-recorder input { min-width: 140px; flex: 1 1 160px; height: 38px; padding: 0 11px; border: 1px solid #e0e6dc; border-radius: 8px; background: #fff; color: #333832; font: 500 11px "DM Sans", sans-serif; }
.record-button { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid #e6caca; border-radius: 8px; background: #fff7f7; color: #a54c4c; font-size: 10px; font-weight: 700; cursor: pointer; }
.record-button span { color: #d75d5d; }
.record-button.recording { border-color: #d89595; background: #fbeaea; }
.experiment-recorder .secondary-button { height: 38px; font-size: 10px; }
.experiment-recorder .secondary-button:disabled { opacity: .45; cursor: default; }
.experiment-piano-card .practice-piano { height: 180px; margin-top: 10px; }
.recording-status { min-height: 15px; margin: 9px 0 0; color: #798174; font-size: 9px; }
.saved-recordings-heading { align-items: flex-end; margin-bottom: 13px; }
.saved-recordings-heading > span { color: #838982; font-size: 9px; }
.saved-recordings-list { display: grid; gap: 8px; max-height: 414px; overflow: auto; }
.saved-recording-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 6px; padding: 10px; border: 1px solid #e8ece5; border-radius: 9px; background: #fbfcfa; }
.saved-recording-details { display: grid; min-width: 0; gap: 4px; }
.saved-recording-details strong { overflow: hidden; color: #3b403a; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.saved-recording-details span { color: #858b81; font-size: 8px; }
.recording-play-button { height: 29px; padding: 0 10px; font-size: 9px; }
.recording-play-button:disabled { opacity: .55; }
.recording-delete-button { width: 28px; height: 29px; border: 0; border-radius: 7px; background: transparent; color: #a86464; font-size: 17px; cursor: pointer; }
.recording-delete-button:hover { background: #fff0f0; }
.recordings-empty { margin: 0; padding: 20px 8px; color: #858b81; font-size: 10px; text-align: center; }
.practice-piano .white-key.recording-playback-key { background: #e1f1ff; box-shadow: 0 0 0 3px #4ca5ff70, 0 0 18px #3294ff90; }
.practice-piano .black-key.recording-playback-key { background: #1e7bd0; box-shadow: 0 0 0 2px #66b9ff, 0 0 18px #3294ffbb; }

.playback-speed-control { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 6px; color: #777d71; font-size: 8px; font-weight: 700; }
.playback-speed-control strong { color: #526b48; font-size: 9px; }
.playback-speed-control input { width: 88px; height: 12px; grid-column: 1 / 3; accent-color: #659b58; cursor: pointer; }
.songbook-letter-note.song-note-current { border-color: #398ee8; background: #e8f3ff; box-shadow: 0 0 0 2px #398ee855, 0 0 17px #398ee844; color: #1769b7; }
.songbook-letter-note.song-note-current .letter-note-name { color: #1769b7; }
.letter-note-chord { margin-top: 2px; color: #647a99; font-size: 7px; font-weight: 700; }
.songbook-letter-note.song-note-current .letter-note-chord { color: #1769b7; }
.staff-chord-label { fill: #627d9e; font: 9px "DM Sans", "Segoe UI", sans-serif; }
.staff-note.song-note-current .staff-notehead, .staff-note.song-note-current .staff-stem { fill: #2788df; stroke: #2788df; filter: drop-shadow(0 0 5px #2788df88); }

.dialog-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; background: #17201875; backdrop-filter: blur(5px); animation: fade-in .16s ease-out both; }
.confirm-dialog { width: min(100%, 390px); padding: 27px; border: 1px solid #e3e9df; border-radius: 18px; background: #fff; color: #323831; box-shadow: 0 24px 80px #0f180f35; text-align: center; animation: dialog-pop .2s cubic-bezier(.2,.8,.2,1) both; }
.confirm-dialog-icon { display: grid; width: 48px; height: 48px; place-items: center; margin: 0 auto 13px; border-radius: 15px; background: #eef6e9; color: #61964f; font-size: 23px; }
.confirm-dialog h2 { margin: 0 0 8px; font: 700 20px Manrope, sans-serif; }
.confirm-dialog p { margin: 0; color: #747b72; font-size: 11px; line-height: 1.6; }
.confirm-dialog-actions { display: flex; justify-content: center; gap: 9px; margin-top: 21px; }
.confirm-dialog-actions .secondary-button, .confirm-close-button { height: 38px; padding: 0 13px; font-size: 10px; }
.confirm-close-button { border: 1px solid #dfb8b8; border-radius: 9px; background: #fff3f3; color: #9d4545; font-weight: 700; cursor: pointer; }
.confirm-close-button:hover { background: #fbe4e4; }
@keyframes dialog-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

body.dark-mode { color-scheme: dark; background: #202321; color: #e4e8e3; }
.dark-mode .main-area, .dark-mode .view { background: #202321; color: #e4e8e3; }
.dark-mode .topbar { border-bottom-color: #383d39; background: #242725; }
.dark-mode .brand, .dark-mode .brand-name, .dark-mode .breadcrumb strong { color: #e3e8e1; }
.dark-mode .nav-item { color: #b3bbb2; }
.dark-mode .nav-item:hover { background: #333834; color: #f2f6f0; }
.dark-mode .nav-item.active { background: #394339; color: #b8e4a9; }
.dark-mode .nav-icon, .dark-mode .nav-item.active .nav-icon { color: #96c881; }
.dark-mode .streak-pill, .dark-mode .avatar.gear-button { border-color: #424a42; background: #303630; color: #b3d6a3; }
.dark-mode .window-control { color: #c6cec4; }
.dark-mode .window-control:hover { background: #3a403b; }
.dark-mode .welcome-copy, .dark-mode .page-heading p, .dark-mode .level-info p, .dark-mode .level-completion span { color: #aab2a8; }
.dark-mode .eyebrow, .dark-mode .eyebrow.muted, .dark-mode .sidebar-label, .dark-mode .overall-progress { color: #a3ada1; }
.dark-mode .level-card, .dark-mode .level-quiz-panel, .dark-mode .level-quiz-button, .dark-mode .progress-panel, .dark-mode .practice-card, .dark-mode .settings-panel, .dark-mode .experiment-piano-card, .dark-mode .saved-recordings-card, .dark-mode .song-picker-card, .dark-mode .song-preview-card { border-color: #3b423c; background: #2a2e2b; color: #e4e8e3; box-shadow: 0 7px 24px #00000018; }
.dark-mode .stat-card, .dark-mode .practice-note-card { border-color: #3b423c; background: #2a2e2b; color: #e4e8e3; }
.dark-mode .results-view { border-color: #3b423c; background: radial-gradient(ellipse at top, #303831, #242725 65%); color: #e4e8e3; }
.dark-mode .results-view h1 { color: #e4e8e3; }
.dark-mode .results-view > p, .dark-mode .result-score span, .dark-mode .practice-note-card p { color: #aeb8ac; }
.dark-mode .practice-tip { border-top-color: #414941; color: #b1b9af; }
.dark-mode .stat-label, .dark-mode .progress-panel-heading > span, .dark-mode .progress-row-name span, .dark-mode .progress-row-count { color: #aab4a7; }
.dark-mode .progress-row { border-top-color: #424943; }
.dark-mode .progress-row-icon, .dark-mode .progress-row:nth-child(2) .progress-row-icon, .dark-mode .progress-row:nth-child(3) .progress-row-icon { background: #3a4539; color: #b6d89f; }
.dark-mode .progress-row-bar { background: #444b44; }
.dark-mode .progress-row-bar span { background: #81bb69; }
.dark-mode .progress-row-name strong, .dark-mode .stat-value { color: #e1e8de; }
.dark-mode .quiz-level-page, .dark-mode .level-page-content { color: #e4e8e3; }
.dark-mode .level-quiz-number { border-color: #4a5348; background: #343c34; color: #b9d9a8; }
.dark-mode .level-quiz-status { color: #adb7aa; }
.dark-mode .feedback.correct { color: #9cdaa2; }
.dark-mode .feedback.incorrect { color: #efaaa8; }
.dark-mode .answer-correct { border-color: #65ad5e; background: #2f4934; color: #c9ecc0; }
.dark-mode .answer-wrong { border-color: #bb6969; background: #493233; color: #f4c2c2; }
.dark-mode .setting-row { border-color: #414941; }
.dark-mode .level-card:not(.locked):hover, .dark-mode .level-quiz-button:hover:not(:disabled) { border-color: #5c7955; background: #303731; }
.dark-mode .level-info h3, .dark-mode .level-completion strong, .dark-mode .level-quiz-name, .dark-mode .level-quiz-heading h2, .dark-mode .practice-top h2, .dark-mode .progress-panel h2, .dark-mode .experiment-toolbar h2, .dark-mode .saved-recordings-heading h2 { color: #e2e8df; }
.dark-mode .level-emblem, .dark-mode .level-card.locked .level-emblem { background: #383f38; }
.dark-mode .quiz-pip, .dark-mode .answer-option, .dark-mode .icon-button { border-color: #505750; background: #323733; color: #e2e8df; }
.dark-mode .quiz-pip:hover:not(:disabled), .dark-mode .answer-option:hover { border-color: #78a968; background: #394239; }
.dark-mode .answer-option.selected, .dark-mode .answer-correct { border-color: #6eb258; background: #304632; color: #c8edbb; }
.dark-mode .answer-wrong { border-color: #bb6666; background: #492f31; color: #f1c1c1; }
.dark-mode .question-card { color: #e4e8e3; background: #202321; }
.dark-mode .question-card h1 { color: #e8eee6; }
.dark-mode .game-progress { background: #3a403b; }
.dark-mode .fun-facts-panel { border-color: #39443a; background: linear-gradient(155deg, #2e3830, #282f29); }
.dark-mode .fun-facts-panel h2 { color: #e0e9dc; }
.dark-mode .fun-facts-panel p, .dark-mode .level-page-heading p { color: #b1bbae; }
.dark-mode .level-page-heading h1 { color: #e7ece5; }
.dark-mode .song-select-field, .dark-mode .song-preview-heading p, .dark-mode .songbook-note { color: #a9b2a5; }
.dark-mode .song-select-field select, .dark-mode .song-select-search, .dark-mode .experiment-recorder input { border-color: #4b534b; background: #343935; color: #edf0ec; }
.dark-mode .song-preview-heading h2 { color: #e1e9df; }
.dark-mode .song-note-chip { border-color: #4a5648; background: #343b33; color: #c1dbb6; }
.dark-mode .songbook { border-color: #5a5446; background: #302e29; box-shadow: 0 14px 30px #0003, inset 9px 0 18px #09090918; }
.dark-mode .songbook::before, .dark-mode .songbook-toolbar, .dark-mode .songbook-controls { border-color: #504a3e; }
.dark-mode .songbook-toolbar, .dark-mode .songbook-controls { border-bottom-color: #504a3e; border-top-color: #504a3e; }
.dark-mode .songbook-page-label strong { color: #e4dfd1; }
.dark-mode .songbook-back { color: #a8d091; }
.dark-mode .notation-toggle { border-color: #514c40; background: #39362f; }
.dark-mode .notation-toggle label span { color: #c0b9a8; }
.dark-mode .notation-toggle input:checked + span { background: #4a473e; color: #b6d8f5; }
.dark-mode .songbook-letter-note, .dark-mode .songbook-controls .secondary-button { border-color: #514c40; background: #3a3831; color: #e5e0d4; }
.dark-mode .letter-note-name { color: #e0e5dc; }
.dark-mode .staff-line, .dark-mode .staff-ledger, .dark-mode .staff-barline { stroke: #aaa697; }
.dark-mode .staff-clef, .dark-mode .staff-accidental { fill: #e2dccd; }
.dark-mode .staff-notehead, .dark-mode .staff-stem { fill: #e3decf; stroke: #e3decf; }
.dark-mode .staff-chord-label { fill: #b8d8f5; }
.dark-mode .letter-note-chord { color: #b6d8f5; }
.dark-mode .songbook-play-status { color: #adbd9f; }
.dark-mode .playback-speed-control { color: #bac3b7; }
.dark-mode .playback-speed-control strong { color: #b5d6a5; }
.dark-mode .songbook-play-button { border-color: #57734e; background: #344532; color: #bfe1ad; }
.dark-mode .songbook-letter-note.song-note-current { border-color: #51aaff; background: #273f55; box-shadow: 0 0 0 2px #328ee777, 0 0 18px #2788df55; }
.dark-mode .songbook-letter-note.song-note-current .letter-note-name { color: #90caff; }
.dark-mode .primary-button { background: #57844a; color: #fff; }
.dark-mode .secondary-button { border-color: #515952; background: #353a36; color: #e0e6de; }
.dark-mode .secondary-button:hover { border-color: #77976d; background: #414940; color: #d3efc8; }
.dark-mode .white-key { border-color: #656c65; background: #555b56; box-shadow: 0 5px 0 #373c38, 0 7px 6px #0004; }
.dark-mode .white-key:hover { background: #656d66; }
.dark-mode .white-key:active, .dark-mode .white-key.pressed { background: #3e627d; box-shadow: 0 2px 0 #303b43, 0 0 0 2px #42b6ff; }
.dark-mode .black-key { border-color: #202321; background: #161918; box-shadow: 0 5px 0 #111413, 0 7px 5px #0006; }
.dark-mode .black-key:hover { background: #292e2d; }
.dark-mode .black-key:active, .dark-mode .black-key.pressed { background: #184467; box-shadow: 0 2px 0 #101a21, 0 0 0 2px #39aaff; }
.dark-mode .white-key.pressed::after, .dark-mode .black-key.pressed::after { position: absolute; right: 7px; bottom: 8px; left: 7px; height: 4px; border-radius: 50%; background: #59c6ff; box-shadow: 0 0 6px 2px #28a9ff, 0 0 16px 5px #168dff99; content: ""; pointer-events: none; }
.dark-mode .white-key.pressed::after { right: 18%; bottom: 13px; left: 18%; height: 5px; }
.dark-mode .white-key.recording-playback-key { background: #375773; box-shadow: 0 0 0 3px #39aaff99, 0 0 18px #168dffcc; }
.dark-mode .black-key.recording-playback-key { background: #1b5e91; box-shadow: 0 0 0 2px #64c4ff, 0 0 18px #168dffcc; }
.dark-mode .experiment-recorder input::placeholder { color: #a1aba0; }
.dark-mode .octave-controls > span, .dark-mode .recording-status, .dark-mode .saved-recordings-heading > span { color: #b0b9ad; }
.dark-mode .saved-recording-row { border-color: #444c44; background: #333834; }
.dark-mode .saved-recording-details strong { color: #e1e7df; }
.dark-mode .saved-recording-details span, .dark-mode .recordings-empty { color: #adb6a9; }
.dark-mode .record-button { border-color: #704b4b; background: #463334; color: #f0c0c0; }
.dark-mode .record-button.recording { background: #583535; }
.dark-mode .recording-delete-button:hover { background: #503839; }
.dark-mode .setting-row strong { color: #e3e9e1; }
.dark-mode .setting-row p, .dark-mode .settings-saved { color: #b3bcb1; }
.dark-mode .main-footer { color: #9aa397; }
.dark-mode .daily-card { border-color: #414a40; background: linear-gradient(145deg, #303930, #292f2a); }
.dark-mode .daily-title { color: #e0e8db; }
.dark-mode .daily-card p { color: #b6beb3; }
.dark-mode .dialog-backdrop { background: #070a08b8; }
.dark-mode .confirm-dialog { border-color: #444d44; background: #2b302c; color: #e4e9e2; }
.dark-mode .confirm-dialog p { color: #b4bcb2; }
.dark-mode .confirm-dialog-icon { background: #394736; color: #b5d69f; }
.dark-mode .confirm-dialog-actions .secondary-button { background: #3a403b; }
.dark-mode .toast { border-color: #465146; background: #2d352e; color: #e1eedc; }

@media (max-width: 950px) {
  .experiment-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .experiment-toolbar { align-items: flex-start; flex-direction: column; }
  .experiment-recorder > * { flex: 1 1 100%; }
  .songbook-toolbar-actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  button.click-bounce, .confirm-dialog { animation: none !important; }
}