:root {
  --ink: #24212d;
  --muted: #6f6a78;
  --line: #e8e4ed;
  --surface: #ffffff;
  --surface-2: #faf9fc;
  --canvas: #f5f3ef;
  --purple: #6846e8;
  --purple-dark: #4d2dc7;
  --purple-soft: #eee9ff;
  --mint: #56b985;
  --mint-soft: #eaf8ef;
  --sky: #4e98d8;
  --sky-soft: #e9f5ff;
  --peach: #ef9f72;
  --peach-soft: #fff0e8;
  --amber: #d6a542;
  --amber-soft: #fff7df;
  --rose: #d86478;
  --rose-soft: #fff0f3;
  --success: #3ba969;
  --danger: #c8465a;
  --shadow-sm: 0 7px 24px rgba(41, 29, 67, 0.06);
  --shadow-md: 0 18px 55px rgba(41, 29, 67, 0.10);
  --shadow-lg: 0 30px 80px rgba(41, 29, 67, 0.15);
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --sidebar: 264px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { color: inherit; }
[hidden] { display: none !important; }
::selection { background: #d9ceff; color: #2f195f; }

/* Shared controls */
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0 20px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible, .icon-button:focus-visible, .nav-item:focus-visible, .source-button:focus-visible,
.finger-button:focus-visible, .quiz-option:focus-visible, .rhythm-pad:focus-visible {
  outline: 3px solid rgba(104, 70, 232, .28);
  outline-offset: 3px;
}
.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #7959ee 0%, var(--purple) 62%, #5632d7 100%);
  box-shadow: 0 11px 25px rgba(104, 70, 232, .24);
}
.button-primary:hover { box-shadow: 0 15px 34px rgba(104, 70, 232, .32); }
.button-secondary { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.button-secondary:hover { border-color: #ccc4e1; }
.button-wide { width: 100%; }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--purple-dark); font-weight: 800; }
.text-link span { transition: transform .18s ease; }
.text-link:hover span { transform: translateX(3px); }
.page-kicker, .card-kicker {
  display: inline-block;
  color: var(--purple);
  font-size: .73rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.status-chip, .complete-chip, .current-chip, .start-chip, .active-user-chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .75rem;
  font-weight: 800;
}
.status-chip { color: var(--purple-dark); background: var(--purple-soft); }
.complete-chip { color: #1d7d49; background: var(--mint-soft); }
.current-chip { color: #5632d7; background: var(--purple-soft); }
.start-chip { color: #665d6e; background: #f1eff3; }
.card {
  background: var(--surface);
  border: 1px solid rgba(49, 38, 70, .07);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-heading, .section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.card-heading h2, .section-heading h2 { margin: 4px 0 0; line-height: 1.14; }
.section-heading.compact h2 { font-size: 1.25rem; }
.helper-text { color: var(--muted); font-size: .82rem; text-align: center; margin: 11px 0 0; }

/* App shell */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar);
  display: flex;
  flex-direction: column;
  padding: 26px 18px 20px;
  background: rgba(255, 255, 255, .93);
  border-right: 1px solid rgba(45, 34, 66, .08);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 9px 25px; }
.brand > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.brand strong { font-size: 1rem; line-height: 1.2; }
.brand small { margin-top: 3px; color: var(--muted); font-size: .69rem; }
.brand-mark { position: relative; width: 39px; height: 31px; display: block; flex: 0 0 auto; border: 2px solid #27232d; border-radius: 8px; background: #fff; overflow: hidden; }
.brand-mark i { position: relative; float: left; width: 25%; height: 100%; border-right: 1px solid #aaa4ae; }
.brand-mark i:nth-of-type(4) { border-right: 0; }
.brand-mark b { position: absolute; top: 0; width: 8px; height: 18px; background: #27232d; border-radius: 0 0 3px 3px; }
.brand-mark b:nth-of-type(1) { left: 8px; }
.brand-mark b:nth-of-type(2) { right: 8px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 6px; }
.nav-item, .install-button {
  width: 100%;
  min-height: 49px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 0;
  border-radius: 14px;
  padding: 0 14px;
  color: #615a69;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.nav-item span, .install-button span { width: 24px; font-style: normal; font-size: 1.25rem; text-align: center; }
.nav-item em, .install-button em { font-style: normal; font-weight: 750; }
.nav-item:hover, .install-button:hover { color: var(--purple-dark); background: #f6f3ff; }
.nav-item.active { color: var(--purple-dark); background: var(--purple-soft); box-shadow: inset 3px 0 var(--purple); }
.sidebar-spacer { flex: 1 1 auto; min-height: 24px; }
.sidebar-tip {
  margin: 14px 4px 16px;
  padding: 15px 15px 16px;
  background: linear-gradient(145deg, #fffaf0, #fff);
  border: 1px solid #f1e5c8;
  border-radius: 16px;
}
.sidebar-tip > span { color: #dcad46; }
.sidebar-tip strong { margin-left: 6px; font-size: .86rem; }
.sidebar-tip p { margin: 6px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.45; }
.sidebar-user { display: grid; grid-template-columns: 40px minmax(0, 1fr) 34px; align-items: center; gap: 10px; padding: 13px 5px 0; border-top: 1px solid var(--line); }
.sidebar-user > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.sidebar-user strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.sidebar-user small { color: var(--muted); font-size: .66rem; }
.avatar { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 13px; background: var(--purple-soft); color: var(--purple-dark); font-weight: 900; }
.avatar.large { width: 46px; height: 46px; }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { background: #f2eff5; color: var(--ink); }
.app-stage { min-height: 100vh; margin-left: var(--sidebar); }
.page-content { width: min(1380px, 100%); margin: 0 auto; padding: 40px 46px 64px; }
.mobile-header, .mobile-nav { display: none; }
.offline-banner {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translateX(-50%);
  padding: 10px 15px;
  border-radius: 999px;
  color: #fff;
  background: #312b39;
  box-shadow: var(--shadow-md);
  font-size: .8rem;
  font-weight: 700;
}
.toast-stack { position: fixed; z-index: 90; top: 22px; right: 24px; display: grid; gap: 10px; }
.toast { min-width: 280px; max-width: 420px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 14px 13px 16px; border: 1px solid #dfeee4; border-radius: 14px; background: #f2fff6; box-shadow: var(--shadow-md); color: #246e43; font-size: .86rem; font-weight: 700; }
.toast button { border: 0; background: transparent; cursor: pointer; font-size: 1.25rem; }
.toast.is-leaving { opacity: 0; transform: translateY(-8px); transition: .25s ease; }

/* Login */
.login-page { background: #fff; }
.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(430px, .84fr); }
.login-visual { position: relative; min-height: 720px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 70px clamp(44px, 7vw, 112px); color: #fff; background: radial-gradient(circle at 18% 15%, #997df7 0, #7657e7 28%, #5936ca 70%, #43259e 100%); }
.login-visual::after { content: ""; position: absolute; width: 850px; height: 850px; left: -270px; bottom: -615px; border: 88px solid rgba(255,255,255,.08); border-radius: 50%; }
.login-orb { position: absolute; border-radius: 50%; filter: blur(2px); }
.orb-one { width: 280px; height: 280px; top: -110px; right: -60px; background: rgba(255,255,255,.10); }
.orb-two { width: 120px; height: 120px; bottom: 90px; left: 8%; border: 1px solid rgba(255,255,255,.22); }
.login-copy { position: relative; z-index: 2; max-width: 680px; }
.eyebrow-chip { display: inline-flex; padding: 8px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(255,255,255,.10); font-size: .77rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.login-copy h1 { margin: 26px 0 18px; font-size: clamp(2.9rem, 5vw, 5rem); line-height: .98; letter-spacing: -.055em; }
.login-copy p { max-width: 580px; margin: 0; color: rgba(255,255,255,.8); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.login-benefits { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 34px; }
.login-benefits span { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.9); font-weight: 750; }
.login-benefits b { color: #d9d0ff; font-size: .72rem; }
.login-panel { display: grid; place-items: center; padding: 40px; background: #fbfafc; }
.login-card { width: min(430px, 100%); padding: 12px; }
.login-brand { padding: 0 0 54px; }
.login-heading h2 { margin: 7px 0 8px; font-size: clamp(1.8rem, 3vw, 2.3rem); line-height: 1.1; letter-spacing: -.035em; }
.login-heading p { margin: 0 0 27px; color: var(--muted); }
.login-form { display: grid; gap: 18px; }
.field-group { display: grid; gap: 7px; }
.field-group label { font-size: .8rem; font-weight: 850; }
.field-group input {
  width: 100%;
  min-height: 52px;
  border: 1px solid #dcd7e2;
  border-radius: 13px;
  padding: 0 15px;
  color: var(--ink);
  background: #fff;
  transition: border .18s ease, box-shadow .18s ease;
}
.field-group input:focus { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(104,70,232,.11); }
.field-group.has-error input { border-color: var(--danger); }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 50px; }
.password-wrap button { position: absolute; top: 50%; right: 8px; width: 38px; height: 38px; transform: translateY(-50%); border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.password-wrap button:hover { background: #f2eff6; color: var(--purple); }
.check-row { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .82rem; cursor: pointer; }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-row span { display: flex; align-items: center; gap: 9px; }
.check-row b { width: 20px; height: 20px; display: inline-grid; place-items: center; border: 1px solid #cbc5d2; border-radius: 6px; background: #fff; }
.check-row input:checked + span b { border-color: var(--purple); background: var(--purple); }
.check-row input:checked + span b::after { content: "✓"; color: #fff; font-size: .72rem; font-weight: 900; }
.form-alert { margin-bottom: 18px; padding: 12px 14px; border: 1px solid #f0cbd2; border-radius: 12px; color: #9f2f44; background: var(--rose-soft); font-size: .82rem; }
.field-error { color: var(--danger); font-size: .74rem; }
.privacy-note { display: flex; align-items: center; gap: 12px; margin-top: 28px; padding: 15px; border-radius: 14px; background: #f3f0fa; }
.privacy-note > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #fff; color: var(--purple); font-size: 1.2rem; }
.privacy-note p { display: flex; flex-direction: column; margin: 0; }
.privacy-note strong { font-size: .78rem; }
.privacy-note small { margin-top: 2px; color: var(--muted); font-size: .69rem; }
.login-piano { position: absolute; z-index: 1; right: 7%; bottom: 3%; width: min(40vw, 500px); height: 310px; opacity: .97; transform: scale(.86); transform-origin: bottom right; }
.piano-lid { position: absolute; z-index: 3; top: 33px; left: 70px; width: 290px; height: 45px; border-radius: 60% 10% 8px 4px; background: #211d2b; transform: rotate(-8deg); box-shadow: inset 0 3px rgba(255,255,255,.1); }
.piano-body { position: absolute; z-index: 2; top: 65px; left: 92px; width: 310px; height: 155px; border-radius: 80% 14px 22px 28px; background: linear-gradient(145deg, #292432, #17141d); box-shadow: 0 30px 45px rgba(20,10,55,.35), inset 0 2px rgba(255,255,255,.1); }
.piano-keys { position: absolute; left: 22px; bottom: -18px; width: 225px; height: 45px; display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; border-radius: 3px 3px 8px 8px; background: #fff; }
.piano-keys i { border-right: 1px solid #c9c5ce; }
.piano-keys b { position: absolute; top: 0; width: 23px; height: 28px; border-radius: 0 0 4px 4px; background: #1e1a25; }
.piano-keys b:nth-of-type(1) { left: 34px; }.piano-keys b:nth-of-type(2) { left: 78px; }.piano-keys b:nth-of-type(3) { left: 168px; }
.piano-face { position: absolute; top: 70px; left: 120px; display: flex; gap: 22px; }
.piano-face i { width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.piano-face b { position: absolute; top: 15px; left: 17px; width: 25px; height: 12px; border-bottom: 2px solid #fff; border-radius: 50%; }
.piano-legs i { position: absolute; top: 206px; width: 14px; height: 93px; background: #1c1822; border-radius: 4px; }
.piano-legs i:first-child { left: 140px; }.piano-legs i:last-child { left: 340px; }
.music-note { position: absolute; color: rgba(255,255,255,.72); font-size: 2.4rem; animation: float-note 4s ease-in-out infinite; }
.music-note.n1 { left: 25px; top: 0; }.music-note.n2 { right: 20px; top: 30px; animation-delay: -1.5s; }
@keyframes float-note { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-13px) rotate(7deg); } }

/* Dashboard */
.dashboard-hero { min-height: 240px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 30px; margin-bottom: 24px; padding: 30px 38px; overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(125deg, #fff 10%, #f9f6ff 68%, #f1ebff); box-shadow: var(--shadow-sm); }
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin: 7px 0 13px; font-size: clamp(2.35rem, 4vw, 4rem); line-height: .99; letter-spacing: -.06em; font-weight: 600; }
.hero-copy h1 strong { font-weight: 900; }
.hero-copy p { max-width: 570px; margin: 0; color: var(--muted); font-size: 1rem; }
.hero-scene { position: relative; min-height: 170px; }
.mini-piano { position: absolute; right: 2%; bottom: 2px; width: 240px; height: 150px; }
.mini-lid { position: absolute; z-index: 4; top: 11px; left: 28px; width: 180px; height: 27px; border-radius: 90% 10% 7px 5px; background: #28232e; transform: rotate(-7deg); }
.mini-body { position: absolute; z-index: 3; top: 34px; left: 46px; width: 175px; height: 91px; border-radius: 70% 10px 15px 18px; background: linear-gradient(145deg,#332d3a,#1d1922); box-shadow: 0 19px 30px rgba(35,25,55,.18); }
.mini-body > span { position: absolute; top: 39px; left: 80px; color: #fff; font-size: .78rem; }
.mini-keyboard { position: absolute; left: 18px; bottom: -11px; width: 128px; height: 25px; border-radius: 2px 2px 6px 6px; background: repeating-linear-gradient(90deg,#fff 0 17px,#bdb9c2 18px 19px); }
.mini-keyboard::before { content: ""; position: absolute; top: 0; left: 12px; width: 9px; height: 15px; background: #26212b; box-shadow: 19px 0 #26212b, 53px 0 #26212b, 72px 0 #26212b, 91px 0 #26212b; }
.mini-legs i { position: absolute; z-index: 2; top: 115px; width: 8px; height: 34px; border-radius: 3px; background: #242029; }
.mini-legs i:first-child { left: 74px; }.mini-legs i:last-child { right: 30px; }
.plant { position: absolute; left: 8%; bottom: 7px; width: 65px; height: 112px; }
.plant b { position: absolute; bottom: 0; left: 10px; width: 44px; height: 43px; border-radius: 7px 7px 16px 16px; background: #d9aa7c; }
.plant i { position: absolute; width: 37px; height: 18px; border-radius: 90% 0 90% 0; background: #70aa63; transform-origin: right bottom; }
.plant i:nth-child(1) { top: 25px; left: 1px; transform: rotate(45deg); }.plant i:nth-child(2) { top: 4px; left: 21px; transform: rotate(72deg); }.plant i:nth-child(3) { top: 42px; left: 27px; transform: rotate(125deg); }
.floating-note { position: absolute; color: #c8b7ef; font-size: 1.8rem; animation: float-note 3.8s ease-in-out infinite; }
.floating-note.one { right: 56%; top: 10px; }.floating-note.two { right: 14%; top: 4px; animation-delay: -2s; }
.dashboard-grid { display: grid; grid-template-columns: 1.22fr .78fr; gap: 24px; }
.progress-card, .daily-card { min-height: 300px; padding: 26px; }
.progress-main { display: grid; grid-template-columns: 145px 1fr; align-items: center; gap: 25px; margin-top: 23px; }
.progress-ring { --progress: 0; position: relative; width: 135px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--purple) calc(var(--progress) * 1%), #ece9ef 0); }
.progress-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.progress-ring span { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.progress-ring strong { font-size: 1.55rem; }.progress-ring small { color: var(--muted); font-size: .68rem; }
.progress-ring.large { width: 150px; }
.milestone-list { display: grid; gap: 12px; }
.milestone { display: grid; grid-template-columns: 27px 1fr; align-items: center; gap: 10px; color: #857f8a; }
.milestone > span { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid #ded9e3; border-radius: 50%; font-size: .76rem; }
.milestone > div { display: flex; flex-direction: column; }
.milestone strong { font-size: .82rem; }.milestone small { color: #aaa3af; font-size: .66rem; }
.milestone.done { color: #34794f; }.milestone.done > span { color: #fff; border-color: var(--mint); background: var(--mint); }
.milestone.current { color: var(--purple-dark); }.milestone.current > span { border-color: var(--purple); background: var(--purple-soft); }
.daily-card { display: flex; flex-direction: column; }
.flame { font-size: 1.45rem; }
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 7px; margin: 34px 0 25px; }
.week-dots span { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #99929f; background: #f2eff4; font-size: .7rem; font-weight: 850; }
.week-dots span.active { color: #fff; background: var(--purple); box-shadow: 0 5px 12px rgba(104,70,232,.22); }
.week-dots span.today:not(.active) { color: var(--purple); box-shadow: inset 0 0 0 2px #cfc3f5; }
.continue-button { margin-top: auto; }
.next-section { margin-top: 35px; }
.next-section > .section-heading { margin-bottom: 17px; align-items: end; }
.next-section .section-heading h2 { font-size: 1.6rem; }
.lesson-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.lesson-mini-card { min-height: 172px; display: grid; grid-template-columns: 51px minmax(0, 1fr) 27px; gap: 13px; align-items: start; padding: 20px; overflow: hidden; border: 1px solid rgba(49,38,70,.07); border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.lesson-mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.lesson-icon, .course-icon { display: grid; place-items: center; border-radius: 14px; font-size: 1.55rem; }
.lesson-icon { width: 51px; height: 51px; }
.accent-mint .lesson-icon, .accent-mint .course-icon { background: var(--mint-soft); }
.accent-sky .lesson-icon, .accent-sky .course-icon { background: var(--sky-soft); }
.accent-peach .lesson-icon, .accent-peach .course-icon { background: var(--peach-soft); }
.accent-amber .lesson-icon, .accent-amber .course-icon { background: var(--amber-soft); }
.accent-violet .lesson-icon, .accent-violet .course-icon { background: var(--purple-soft); }
.accent-rose .lesson-icon, .accent-rose .course-icon { background: var(--rose-soft); }
.lesson-mini-copy span { color: var(--purple); font-size: .66rem; font-weight: 850; text-transform: uppercase; letter-spacing: .05em; }
.lesson-mini-copy h3 { margin: 5px 0 5px; font-size: 1rem; }
.lesson-mini-copy p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: .75rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.lesson-arrow { align-self: center; color: var(--purple); font-weight: 900; }
.beginner-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 23px; padding: 17px 20px; border: 1px solid #e7e1ec; border-radius: 18px; background: rgba(255,255,255,.67); }
.beginner-strip > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.beginner-strip > div > span { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: var(--purple); background: #fff; box-shadow: var(--shadow-sm); }
.beginner-strip p { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.beginner-strip strong { font-size: .76rem; }.beginner-strip small { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }

/* Generic headers and lesson overview */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 30px; padding: 8px 4px 0; }
.page-header h1 { max-width: 790px; margin: 7px 0 11px; font-size: clamp(2.25rem, 4vw, 3.8rem); line-height: 1; letter-spacing: -.055em; }
.page-header p { max-width: 690px; margin: 0; color: var(--muted); }
.course-progress-card { min-width: 250px; padding: 20px; border: 1px solid #e2dced; border-radius: 18px; background: #fff; box-shadow: var(--shadow-sm); }
.course-progress-card > span { color: var(--purple); font-size: 1.4rem; font-weight: 900; }.course-progress-card > strong { display: block; margin: 2px 0 13px; font-size: .75rem; }
.linear-progress { height: 8px; overflow: hidden; border-radius: 99px; background: #ece8ef; }.linear-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#8c70ee,var(--purple)); }
.course-timeline { position: relative; display: grid; gap: 17px; padding: 5px 0 30px 18px; }
.course-timeline::before { content: ""; position: absolute; left: 43px; top: 18px; bottom: 45px; width: 2px; background: #ddd6e5; }
.course-lesson { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 16px; }
.timeline-node { position: relative; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; border: 6px solid var(--canvas); border-radius: 50%; background: #e7e1ec; }
.timeline-node span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: #766d7c; background: #fff; font-weight: 900; box-shadow: var(--shadow-sm); }
.course-lesson.completed .timeline-node span { color: #fff; background: var(--mint); }.course-lesson.in-progress .timeline-node span { color: #fff; background: var(--purple); }
.course-card { min-height: 154px; display: grid; grid-template-columns: 68px minmax(0,1fr) auto; align-items: center; gap: 19px; padding: 22px 24px; border: 1px solid rgba(49,38,70,.08); border-radius: 20px; background: #fff; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.course-card:hover { transform: translateX(3px); box-shadow: var(--shadow-md); }
.course-icon { width: 68px; height: 68px; font-size: 2rem; }
.course-meta { display: flex; gap: 7px; color: var(--purple); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.course-copy h2 { margin: 5px 0 6px; font-size: 1.32rem; }.course-copy p { max-width: 800px; margin: 0; color: var(--muted); font-size: .83rem; }
.goal-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }.goal-tags span { padding: 5px 9px; border-radius: 99px; color: #716a78; background: #f4f2f5; font-size: .65rem; font-weight: 700; }
.course-state { min-width: 115px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }.course-state small { color: var(--muted); font-size: .67rem; }.course-state > b { color: var(--purple); font-size: 1.25rem; }

/* Lesson player */
.lesson-page { max-width: 1260px; margin: 0 auto; }
.lesson-topbar, .practice-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: 17px; }
.back-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; color: #6d6575; font-size: .82rem; font-weight: 800; }
.back-link:hover { color: var(--purple); }
.lesson-top-title, .practice-title { display: flex; flex-direction: column; align-items: center; }.lesson-top-title span, .practice-title span { color: var(--purple); font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .09em; }.lesson-top-title strong { margin-top: 2px; font-size: .9rem; }
.lesson-duration { justify-self: end; color: var(--muted); font-size: .78rem; font-weight: 750; }
.lesson-progress-header { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.lesson-segments { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 7px; }
.lesson-segments span { height: 6px; border-radius: 99px; background: #e6e2e9; transition: background .22s ease; }.lesson-segments span.active { background: var(--purple); }
.lesson-progress-header small { color: var(--muted); white-space: nowrap; }.lesson-progress-header b { color: var(--ink); }
.lesson-player-card { overflow: hidden; border: 1px solid rgba(49,38,70,.08); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.lesson-step { min-height: 590px; display: grid; grid-template-columns: minmax(0,.86fr) minmax(470px,1.14fr); }
.lesson-step-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(36px,5vw,72px); }
.lesson-step-copy h1 { margin: 8px 0 17px; font-size: clamp(2.25rem,4vw,4.1rem); line-height: .98; letter-spacing: -.055em; }
.lesson-lead { margin: 0; color: #5f5967; font-size: 1rem; line-height: 1.75; }
.lesson-bullets { display: grid; gap: 11px; margin: 25px 0; padding: 0; list-style: none; }
.lesson-bullets li { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 750; }.lesson-bullets li span { width: 23px; height: 23px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #fff; background: var(--mint); font-size: .66rem; }
.lesson-tip { display: flex; gap: 13px; margin-top: 3px; padding: 14px 15px; border: 1px solid #ecdfc3; border-radius: 14px; background: #fffaf0; }.lesson-tip > span { color: #d09a2c; }.lesson-tip p { display: flex; flex-direction: column; margin: 0; color: #6c6252; font-size: .78rem; }.lesson-tip strong { margin-bottom: 2px; color: #403a32; }
.lesson-step-art { min-height: 590px; display: grid; place-items: center; padding: 30px; background: linear-gradient(145deg,#faf9fc,#f1edf7); }
.accent-mint .lesson-step-art { background: linear-gradient(145deg,#f9fdfb,#e7f6ed); }.accent-sky .lesson-step-art { background: linear-gradient(145deg,#f9fcff,#e7f3fd); }.accent-peach .lesson-step-art { background: linear-gradient(145deg,#fffaf7,#ffede3); }.accent-amber .lesson-step-art { background: linear-gradient(145deg,#fffdf7,#fff3cf); }.accent-violet .lesson-step-art { background: linear-gradient(145deg,#fcfaff,#ece6ff); }.accent-rose .lesson-step-art { background: linear-gradient(145deg,#fffafd,#ffe9ef); }
.lesson-player-footer { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 22px; border-top: 1px solid var(--line); }.lesson-mobile-progress { color: var(--muted); font-size: .77rem; }
.lesson-goals-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 11px 22px; margin-top: 16px; padding: 14px 20px; border: 1px solid #e5e0e9; border-radius: 16px; background: rgba(255,255,255,.72); font-size: .75rem; }.lesson-goals-bar > strong { color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }.lesson-goals-bar span { display: flex; align-items: center; gap: 7px; font-weight: 750; }.lesson-goals-bar i { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; color: var(--success); background: var(--mint-soft); font-style: normal; font-size: .62rem; }

/* Lesson illustrations */
.lesson-visual { width: min(100%, 570px); min-height: 470px; display: flex; flex-direction: column; justify-content: center; margin: 0; }
.visual-label { display: flex; flex-direction: column; margin-bottom: 22px; text-align: center; }.visual-label strong { font-size: 1.35rem; }.visual-label span { margin-top: 3px; color: var(--muted); font-size: .75rem; }
.posture-scene { position: relative; height: 350px; overflow: hidden; border-radius: 24px; background: rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(51,39,72,.05); }
.person { position: absolute; z-index: 4; left: 35%; top: 52px; width: 135px; height: 245px; }
.person .head { position: absolute; z-index: 3; top: 0; left: 38px; width: 53px; height: 62px; border-radius: 46% 48% 45% 48%; background: #efbd91; transform: rotate(5deg); }.person .head::after { content:""; position:absolute; right:7px; top:26px; width:4px; height:4px; border-radius:50%; background:#413029; }
.person .hair { position:absolute; z-index:4; top:-5px; left:33px; width:55px; height:34px; border-radius:70% 50% 35% 25%; background:#3c2d27; transform:rotate(4deg); }.person .hair::after { content:""; position:absolute; right:-7px; top:16px; width:17px; height:23px; border-radius:50%; background:#3c2d27; }
.person .torso { position:absolute; z-index:2; top:57px; left:15px; width:79px; height:92px; border-radius:30px 25px 18px 18px; background:#779b70; transform:skew(-5deg); }
.person .upper-arm { position:absolute; z-index:3; top:74px; left:76px; width:63px; height:21px; border-radius:20px; background:#779b70; transform:rotate(27deg); transform-origin:left center; }.person .fore-arm { position:absolute; z-index:3; top:105px; left:119px; width:70px; height:17px; border-radius:20px; background:#efbd91; transform:rotate(-6deg); transform-origin:left center; }
.person .thigh { position:absolute; z-index:1; top:137px; left:47px; width:104px; height:30px; border-radius:20px; background:#353943; transform:rotate(8deg); transform-origin:left center; }.person .shin { position:absolute; z-index:2; top:158px; left:130px; width:28px; height:104px; border-radius:15px; background:#353943; transform:rotate(-2deg); }.person .shoe { position:absolute; z-index:3; top:249px; left:130px; width:74px; height:24px; border-radius:15px 25px 10px 10px; background:#f5f2ef; border:2px solid #c8c3c1; }
.bench { position:absolute; z-index:3; left:25%; top:230px; width:135px; height:30px; border-radius:7px; background:#2a2730; }.bench i { position:absolute; inset:4px; border-radius:5px; background:#393540; }.bench b { position:absolute; top:25px; width:10px; height:80px; background:#28252d; }.bench b:nth-of-type(1) { left:18px; }.bench b:nth-of-type(2) { right:18px; }
.side-piano { position:absolute; z-index:2; right:-8px; top:77px; width:235px; height:225px; }.side-piano .piano-top { position:absolute; top:0; right:0; width:210px; height:56px; border-radius:45% 8px 0 0; background:#28242c; }.side-piano .piano-front { position:absolute; top:47px; right:0; width:210px; height:110px; border-radius:0 0 12px 15px; background:linear-gradient(145deg,#302b34,#1d1920); }.side-piano .side-keys { position:absolute; z-index:2; top:82px; left:-12px; width:116px; height:23px; border-radius:3px; background:repeating-linear-gradient(90deg,#fff 0 13px,#c8c3cc 14px 15px); }.side-piano .side-keys::after { content:""; position:absolute; top:0; left:9px; width:8px; height:13px; background:#222; box-shadow:15px 0 #222,44px 0 #222,59px 0 #222,74px 0 #222; }.side-piano .music-stand { position:absolute; z-index:1; top:-45px; right:74px; width:73px; height:78px; border:8px solid #2a2630; border-bottom-width:4px; border-radius:5px; transform:rotate(3deg); }.side-piano b { position:absolute; top:150px; width:13px; height:87px; border-radius:3px; background:#28242c; }.side-piano .leg-a { left:35px; }.side-piano .leg-b { right:24px; }.side-piano em { position:absolute; right:63px; bottom:-8px; width:35px; height:7px; border-radius:99px; background:#bd8b35; transform:skew(-25deg); }
.posture-guides i { position:absolute; z-index:7; left:44%; border-left:2px dashed rgba(70,170,106,.55); }.guide-head { top:24px; height:60px; }.guide-arm { top:128px; height:90px; }.guide-foot { top:270px; height:50px; }
.posture-checks { position:absolute; z-index:8; left:16px; top:18px; display:grid; gap:8px; }.posture-checks span { padding:6px 9px; border-radius:99px; color:#2c774a; background:rgba(235,249,240,.9); font-size:.67rem; font-weight:800; }
.variant-distance .posture-guides::after { content:"↔ passender Abstand"; position:absolute; left:40%; bottom:18px; padding:7px 10px; border-radius:99px; color:#4e4381; background:#eee9ff; font-size:.68rem; font-weight:800; }.variant-relax .person .torso { transform:rotate(2deg); }.variant-arms .person .upper-arm { transform:rotate(35deg); }.variant-breathing::after { content:"Einatmen · Ausatmen"; position:absolute; left:23px; bottom:24px; color:#4d2dc7; font-weight:850; }
.hand-compare { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.hand-good,.hand-bad { position:relative; min-height:330px; overflow:hidden; padding:20px 17px; border:1px solid; border-radius:20px; }.hand-good { border-color:#caead7; background:rgba(241,255,246,.8); }.hand-bad { border-color:#f3d1d7; background:rgba(255,244,246,.8); }.compare-title { position:relative; z-index:6; font-weight:900; }.hand-good .compare-title { color:#2d8b54; }.hand-bad .compare-title { color:#bd4056; }
.keys-mini { position:absolute; left:16px; right:16px; bottom:68px; height:105px; display:grid; grid-template-columns:repeat(5,1fr); overflow:hidden; border:2px solid #c7c1ca; border-radius:8px; background:#fff; }.keys-mini i { border-right:1px solid #bbb6bf; }.keys-mini i:last-of-type { border-right:0; }.keys-mini b { position:absolute; top:0; width:27px; height:62px; border-radius:0 0 5px 5px; background:#28232b; }.keys-mini b:nth-of-type(1){left:15%}.keys-mini b:nth-of-type(2){left:35%}.keys-mini b:nth-of-type(3){left:72%}
.curved-hand { position:absolute; z-index:4; left:20%; top:73px; width:160px; height:150px; transform:rotate(-5deg); }.curved-hand .palm { position:absolute; left:33px; top:68px; width:104px; height:72px; border-radius:48% 48% 35% 35%; background:#efb78f; box-shadow:inset -7px -8px rgba(193,107,74,.10); }.curved-hand .finger { position:absolute; width:23px; border:3px solid #efb78f; border-bottom:0; border-radius:18px 18px 0 0; background:#f8c8a5; transform-origin:bottom center; }.curved-hand .f1 { left:5px; top:91px; height:51px; transform:rotate(-62deg); }.curved-hand .f2 { left:39px; top:24px; height:78px; transform:rotate(-8deg); }.curved-hand .f3 { left:69px; top:11px; height:91px; }.curved-hand .f4 { left:98px; top:22px; height:81px; transform:rotate(7deg); }.curved-hand .f5 { left:127px; top:46px; height:61px; transform:rotate(15deg); }
.flat-hand { position:absolute; z-index:4; left:14%; top:118px; width:190px; height:53px; border-radius:30px 12px 17px 30px; background:#efb78f; transform:rotate(7deg); box-shadow:-18px 16px 0 -8px #f4c3a0; }.hand-good ul,.hand-bad ul { position:absolute; left:18px; right:12px; bottom:10px; margin:0; padding-left:18px; color:#68616d; font-size:.65rem; }
.finger-map { position:relative; min-height:350px; display:grid; place-items:center; }.finger-hand-shape { position:relative; width:360px; height:280px; }.finger-hand-shape > span { position:absolute; left:80px; bottom:18px; width:220px; height:145px; border-radius:48% 48% 35% 35%; background:#efb78f; box-shadow:inset -15px -17px rgba(182,89,55,.08); }.finger-hand-shape i { position:absolute; z-index:2; display:block; width:51px; border-radius:27px 27px 15px 15px; background:linear-gradient(90deg,#f8c7a3,#eeb184); box-shadow:inset -5px -3px rgba(178,87,55,.09); }.finger-hand-shape i b { position:absolute; top:13px; left:50%; width:29px; height:29px; display:grid; place-items:center; transform:translateX(-50%); border-radius:50%; color:#fff; background:var(--purple); font-style:normal; }.finger-hand-shape .thumb { left:25px; bottom:65px; height:104px; transform:rotate(-58deg); }.finger-hand-shape .index { left:91px; top:41px; height:170px; transform:rotate(-7deg); }.finger-hand-shape .middle { left:153px; top:10px; height:198px; }.finger-hand-shape .ring { left:215px; top:33px; height:177px; transform:rotate(6deg); }.finger-hand-shape .little { left:277px; top:80px; height:132px; transform:rotate(13deg); }
.finger-names { position:absolute; left:5%; right:5%; bottom:0; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; text-align:center; }.finger-names span { padding:6px 3px; border-radius:99px; background:rgba(255,255,255,.75); color:var(--muted); font-size:.63rem; font-weight:750; }.variant-fingers-left .finger-hand-shape { transform:scaleX(-1); }.variant-fingers-left .finger-hand-shape i b { transform:translateX(-50%) scaleX(-1); }.variant-fingers-left .finger-names { direction:rtl; }
.rhythm-visual { min-height:340px; display:grid; grid-template-columns:160px 1fr; align-items:center; gap:28px; padding:30px; border-radius:24px; background:rgba(255,255,255,.62); }.metronome-art { position:relative; width:145px; height:230px; clip-path:polygon(28% 0,72% 0,100% 100%,0 100%); background:linear-gradient(145deg,#443850,#261f2f); box-shadow:0 23px 40px rgba(45,34,64,.19); }.meter-arm { position:absolute; left:70px; top:30px; width:5px; height:140px; border-radius:99px; background:#dad3e0; transform:rotate(18deg); transform-origin:bottom; }.meter-weight { position:absolute; left:82px; top:65px; width:24px; height:38px; border-radius:5px; background:#bca9f4; transform:rotate(18deg); }.metronome-art b { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); color:#fff; font-size:1.3rem; }
.beat-line { display:flex; align-items:center; gap:8px; }.beat-line span { width:42px; height:42px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--purple); font-weight:900; box-shadow:0 8px 16px rgba(104,70,232,.23); }.beat-line i { flex:1; height:3px; background:#d7d0e1; }
.rhythm-copy { grid-column:2; display:flex; justify-content:space-between; color:#746b7e; }.rhythm-copy strong { color:var(--purple); }.rhythm-copy span { color:var(--mint); }.rhythm-copy em { font-style:normal; color:var(--peach); }.variant-metronome .meter-arm { animation:tick 1s ease-in-out infinite alternate; }.variant-rhythm-flow .beat-line span { animation:pulse-beat 1s ease-in-out infinite; }.variant-rhythm-flow .beat-line span:nth-of-type(2){animation-delay:.25s}.variant-rhythm-flow .beat-line span:nth-of-type(3){animation-delay:.5s}.variant-rhythm-flow .beat-line span:nth-of-type(4){animation-delay:.75s}
@keyframes tick { from{transform:rotate(-20deg)} to{transform:rotate(20deg)} } @keyframes pulse-beat { 50%{transform:scale(1.12)} }
.keyboard-visual,.both-hands-visual { position:relative; min-height:330px; display:grid; place-items:center; padding:32px 18px; border-radius:24px; background:rgba(255,255,255,.63); }
.keyboard-strip { position:relative; width:min(100%,520px); height:175px; display:grid; grid-template-columns:repeat(10,1fr); overflow:hidden; border:3px solid #c8c2cc; border-radius:10px; background:#fff; box-shadow:0 18px 28px rgba(49,38,70,.11); }.keyboard-strip i { position:relative; display:flex; align-items:flex-end; justify-content:center; padding-bottom:13px; border-right:1px solid #bcb7bf; font-style:normal; font-size:.65rem; font-weight:850; }.keyboard-strip i:last-of-type{border-right:0}.keyboard-strip b { position:absolute; z-index:2; top:0; width:6.6%; height:101px; border-radius:0 0 6px 6px; background:linear-gradient(#302a35,#17141b); }.keyboard-strip b:nth-of-type(1){left:6.6%}.keyboard-strip b:nth-of-type(2){left:16.6%}.keyboard-strip b:nth-of-type(3){left:36.6%}.keyboard-strip b:nth-of-type(4){left:46.6%}.keyboard-strip b:nth-of-type(5){left:56.6%}.keyboard-strip b:nth-of-type(6){left:76.6%}
.keyboard-callouts span,.note-pins span { position:absolute; z-index:5; padding:7px 10px; border-radius:99px; color:#fff; background:var(--purple); font-size:.67rem; font-weight:850; box-shadow:0 7px 15px rgba(104,70,232,.2); }.keyboard-callouts .two{left:19%;top:34px}.keyboard-callouts .three{right:13%;top:34px}.note-pins .pin-c{left:5%;bottom:37px}.note-pins .pin-f{left:34%;bottom:37px}.many-c span:nth-child(1){left:4%;bottom:37px}.many-c span:nth-child(2){left:69%;bottom:37px}.many-c span:nth-child(3){right:3%;bottom:37px}.range-arrow { position:absolute; z-index:5; left:10%; right:10%; bottom:28px; display:flex; align-items:center; justify-content:center; gap:12px; color:var(--purple); font-size:.72rem; font-weight:850; }.range-arrow i{font-style:normal;letter-spacing:-.1em}.five-finger-pins { position:absolute; z-index:5; left:13%; right:13%; bottom:29px; display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }.five-finger-pins span { padding:8px 4px; border-radius:12px; color:#fff; background:var(--purple); text-align:center; font-size:.63rem; }.five-finger-pins b{font-size:.84rem}.melody-dots { position:absolute; z-index:5; left:13%; right:13%; bottom:45px; display:flex; justify-content:space-between; }.melody-dots span { width:20px; height:20px; border:5px solid #fff; border-radius:50%; background:var(--purple); box-shadow:0 4px 9px rgba(65,42,145,.25); }.visual-note-line { position:absolute; left:12%; right:12%; top:38px; display:flex; align-items:center; justify-content:space-around; color:#9684ca; font-size:1.2rem; }.visual-note-line i{width:70px;height:1px;background:#cabfe2}.keyboard-strip.wide { width:100%; grid-template-columns:repeat(12,1fr); }.both-hands-visual .left-hand-badge,.both-hands-visual .right-hand-badge { position:absolute; z-index:5; top:34px; padding:8px 12px; border-radius:12px; font-size:.68rem; font-weight:900; }.left-hand-badge{left:13%;color:#236a8e;background:#e4f4fc}.right-hand-badge{right:13%;color:#6b35c4;background:#eee6ff}.both-hands-visual strong{display:inline-grid;place-items:center;width:23px;height:23px;margin-left:5px;border-radius:50%;color:#fff;background:currentColor}.exchange-arrow { position:absolute; top:39px; color:var(--purple); font-size:1.35rem; }.variant-hand-exchange .exchange-arrow{animation:exchange 1.5s ease-in-out infinite}.variant-bass-answer .left-hand-badge{transform:translateY(27px)}.variant-bass-answer .right-hand-badge{transform:translateY(-2px)}
@keyframes exchange { 50%{transform:scaleX(1.35)} }

/* Practice */
.practice-page { max-width: 1320px; margin: 0 auto; }
.practice-title h1 { margin:2px 0 0; font-size:1rem; }.input-status { justify-self:end; display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:99px; background:#fff; box-shadow:var(--shadow-sm); font-size:.7rem; }.input-status em{font-style:normal;font-weight:800}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}.input-status.error .status-dot{background:var(--danger);box-shadow:0 0 0 4px var(--rose-soft)}.input-status.listening .status-dot{background:var(--purple);box-shadow:0 0 0 4px var(--purple-soft);animation:pulse-status 1.2s infinite}@keyframes pulse-status{50%{box-shadow:0 0 0 8px rgba(104,70,232,.08)}}
.practice-progress-row { display:flex; align-items:center; gap:14px; margin-bottom:17px; }.practice-progress-track { flex:1; height:7px; overflow:hidden; border-radius:99px; background:#e7e3e9; }.practice-progress-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#62c28b,#7b5bea); transition:width .3s ease; }.practice-progress-row > span{min-width:50px;color:var(--muted);font-size:.72rem;font-weight:800;text-align:right}
.practice-workspace { min-height:590px; display:grid; grid-template-columns:300px minmax(0,1fr); gap:18px; }
.practice-task-card,.practice-main-card { border:1px solid rgba(49,38,70,.08); border-radius:22px; background:#fff; box-shadow:var(--shadow-sm); }
.practice-task-card { padding:27px; }.practice-task-card h2{margin:7px 0 8px;font-size:1.45rem;line-height:1.12}.practice-task-card>p{margin:0;color:var(--muted);font-size:.82rem}
.current-note-card { display:flex; flex-direction:column; align-items:center; margin:26px 0 18px; padding:21px; border-radius:18px; background:linear-gradient(145deg,#f1ecff,#faf8ff); }.current-note-card small{color:var(--muted);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.current-note-card strong{margin:3px 0;font-size:3rem;line-height:1;color:var(--purple-dark)}.current-note-card span{color:var(--muted);font-size:.72rem}
.input-source-list { display:grid; gap:8px; }.source-button { min-height:46px; display:flex; align-items:center; gap:10px; border:1px solid #e2dce8; border-radius:12px; padding:0 11px; background:#fff; cursor:pointer; text-align:left; }.source-button:hover{border-color:#cfc4ed;background:#faf8ff}.source-button span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:var(--purple);background:var(--purple-soft)}.source-button b{font-size:.75rem}.source-button.active{border-color:var(--purple);background:#f7f4ff}
.detected-note { display:grid; grid-template-columns:1fr auto; align-items:end; margin-top:13px; padding:12px 13px; border-radius:12px; background:var(--mint-soft); }.detected-note small{grid-column:1;color:#47715a;font-size:.65rem}.detected-note strong{grid-row:1/3;grid-column:2;color:#2f8050;font-size:1.55rem}.detected-note em{color:#47715a;font-size:.65rem;font-style:normal}.keyboard-hint{margin-top:18px!important;font-size:.7rem!important}.quiz-score-preview{display:grid;grid-template-columns:1fr auto;align-items:end;margin-top:28px;padding:18px;border-radius:16px;background:var(--purple-soft)}.quiz-score-preview span,.quiz-score-preview small{font-size:.68rem;color:var(--muted)}.quiz-score-preview strong{grid-row:1/3;grid-column:2;font-size:2.4rem;line-height:1;color:var(--purple)}
.practice-main-card { position:relative; min-width:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; padding:30px; background:linear-gradient(145deg,#fff,#fbfaff); }
.practice-feedback { display:flex; align-items:center; gap:12px; margin-bottom:25px; padding:12px 14px; border-radius:13px; background:#f3f0f6; }.practice-feedback span{padding:5px 9px;border-radius:99px;background:#fff;color:var(--purple);font-size:.65rem;font-weight:850}.practice-feedback strong{font-size:.86rem}.practice-feedback.success{background:var(--mint-soft)}.practice-feedback.success span{color:#2c8550}.practice-feedback.error{background:var(--rose-soft)}.practice-feedback.error span{color:var(--danger)}
.piano-scroll{width:100%;overflow-x:auto;padding:15px 3px 28px;scrollbar-width:thin}.interactive-piano{position:relative;min-width:690px;height:270px;display:flex;border:3px solid #332e38;border-radius:11px;background:#fff;box-shadow:0 22px 37px rgba(36,29,50,.18);overflow:hidden}.piano-key{position:relative;flex:1 1 0;display:flex;align-items:flex-end;justify-content:center;padding:0 2px 17px;border:0;border-right:1px solid #bdb8c1;background:linear-gradient(#fff,#f4f2f4);cursor:pointer;color:#4a444e;font-size:.65rem;font-weight:850}.piano-key:last-child{border-right:0}.piano-key.black{position:absolute;z-index:3;top:0;width:4.6%;height:62%;padding:0;border:0;border-radius:0 0 6px 6px;background:linear-gradient(90deg,#19161c,#38323e 50%,#151217);box-shadow:0 8px 8px rgba(0,0,0,.25);color:transparent;transform:translateX(-50%)}.piano-key.target.white{background:linear-gradient(#dff8e8,#aee3c1)}.piano-key.target.black{background:linear-gradient(#6750a5,#3a2768)}.piano-key.pressed{transform:translateY(3px)}.piano-key.black.pressed{transform:translateX(-50%) translateY(3px)}.piano-key .key-label{pointer-events:none}.piano-key.target .key-label{color:#207745}.piano-legend{display:flex;align-items:center;gap:16px;margin-top:2px;color:var(--muted);font-size:.67rem}.piano-legend span{display:flex;align-items:center;gap:5px}.piano-legend i{width:10px;height:10px;display:block;border-radius:3px}.legend-screen{background:#d7d2dc}.legend-midi{background:var(--purple)}.legend-mic{background:var(--mint)}.piano-legend small{margin-left:auto}
.interactive-hand{position:relative;width:min(100%,650px);height:430px;margin:0 auto}.hand-palm{position:absolute;z-index:1;left:21%;right:9%;bottom:32px;height:225px;border-radius:50% 50% 35% 35%;background:linear-gradient(100deg,#efb98e,#f8cba9);box-shadow:inset -22px -18px rgba(179,89,55,.07),0 24px 36px rgba(78,53,42,.12)}.finger-button{position:absolute;z-index:3;width:82px;border:0;border-radius:42px 42px 20px 20px;background:linear-gradient(90deg,#f7c5a0,#ecae80);box-shadow:inset -8px -5px rgba(178,84,50,.07);cursor:pointer}.finger-button span{position:absolute;top:18px;left:50%;width:38px;height:38px;display:grid;place-items:center;transform:translateX(-50%);border-radius:50%;color:#fff;background:var(--purple);font-size:1.15rem;font-weight:900;box-shadow:0 8px 17px rgba(104,70,232,.25)}.finger-button small{position:absolute;left:50%;bottom:17px;transform:translateX(-50%);font-size:.64rem;font-weight:800}.finger-1{left:3%;bottom:60px;height:172px;transform:rotate(-57deg)}.finger-1 span,.finger-1 small{transform:translateX(-50%) rotate(57deg)}.finger-2{left:24%;top:47px;height:300px;transform:rotate(-5deg)}.finger-2 span,.finger-2 small{transform:translateX(-50%) rotate(5deg)}.finger-3{left:41%;top:9px;height:340px}.finger-4{left:59%;top:39px;height:310px;transform:rotate(5deg)}.finger-4 span,.finger-4 small{transform:translateX(-50%) rotate(-5deg)}.finger-5{right:5%;top:106px;height:245px;transform:rotate(12deg)}.finger-5 span,.finger-5 small{transform:translateX(-50%) rotate(-12deg)}.finger-button.target{outline:5px solid rgba(104,70,232,.25);outline-offset:4px;filter:drop-shadow(0 0 16px rgba(104,70,232,.25))}.finger-button.correct{background:linear-gradient(90deg,#8bd6a9,#5ebc83)}.finger-button.wrong{animation:shake .28s ease}.finger-rule{text-align:center;color:var(--muted);font-size:.75rem;font-weight:800}.finger-rule span{margin:0 10px;color:#b2aab7}@keyframes finger-target{50%{transform:translateY(-8px)}}@keyframes shake{25%{margin-left:-7px}75%{margin-left:7px}}
.rhythm-stage{display:grid;place-items:center;gap:25px}.rhythm-beats{display:grid;grid-template-columns:repeat(8,34px);gap:9px}.rhythm-beats span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#968f9c;background:#eeeaf1;font-size:.7rem;font-weight:900}.rhythm-beats span.active{color:#fff;background:var(--purple);transform:scale(1.1)}.rhythm-beats span.hit{color:#fff;background:var(--mint)}.rhythm-beats span.miss{color:#fff;background:var(--rose)}.rhythm-pad{width:220px;height:220px;border:0;border-radius:50%;color:#fff;background:radial-gradient(circle at 35% 30%,#947af1,var(--purple) 55%,#4a28bd);box-shadow:0 25px 50px rgba(104,70,232,.28),inset 0 5px rgba(255,255,255,.18);cursor:pointer}.rhythm-pad:disabled{opacity:.45;cursor:not-allowed}.rhythm-pad:not(:disabled):active{transform:scale(.97)}.rhythm-pad span,.rhythm-pad small{display:block}.rhythm-pad span{font-size:1.4rem;font-weight:900}.rhythm-pad small{margin-top:3px;color:#dfd8ff}.rhythm-timing{min-height:28px;color:var(--muted);font-weight:800}
.quiz-stage{width:min(100%,720px);margin:0 auto}.quiz-eyebrow{color:var(--purple);font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.quiz-stage h2{margin:10px 0 25px;font-size:clamp(1.5rem,3vw,2.4rem);line-height:1.16}.quiz-options{display:grid;gap:11px}.quiz-option{min-height:62px;display:grid;grid-template-columns:36px 1fr;align-items:center;gap:12px;border:1px solid #ddd7e3;border-radius:14px;padding:10px 16px;background:#fff;cursor:pointer;text-align:left}.quiz-option span{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:var(--purple);background:var(--purple-soft);font-weight:900}.quiz-option strong{font-size:.88rem}.quiz-option:hover{border-color:#bfb2e6;background:#fbf9ff}.quiz-option.correct{border-color:#7dcc9d;background:var(--mint-soft)}.quiz-option.wrong{border-color:#e698a6;background:var(--rose-soft)}.quiz-option:disabled{cursor:default}.quiz-explanation{margin-top:15px;padding:14px 16px;border-radius:13px;color:#426c54;background:#edf9f1;font-size:.8rem}.quiz-next{margin-top:16px;margin-left:auto}
.practice-result{position:relative;min-height:590px;display:grid;place-items:center;align-content:center;text-align:center;overflow:hidden;padding:45px;border:1px solid rgba(49,38,70,.08);border-radius:24px;background:linear-gradient(145deg,#fff,#f2edff);box-shadow:var(--shadow-md)}.result-check{width:78px;height:78px;display:grid;place-items:center;margin-bottom:18px;border-radius:50%;color:#fff;background:var(--mint);box-shadow:0 15px 30px rgba(59,169,105,.25);font-size:2.1rem}.practice-result h2{margin:8px 0 7px;font-size:2.45rem}.practice-result p{margin:0;color:var(--muted)}.result-score{display:flex;flex-direction:column;margin:25px 0}.result-score strong{font-size:3.3rem;line-height:1;color:var(--purple)}.result-score span{margin-top:5px;color:var(--muted);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.result-actions{display:flex;gap:10px}.result-confetti span{position:absolute;color:#9f87eb;font-size:1.7rem;animation:float-note 3s ease-in-out infinite}.result-confetti span:nth-child(1){left:15%;top:21%}.result-confetti span:nth-child(2){right:18%;top:17%;animation-delay:-1s}.result-confetti span:nth-child(3){right:12%;bottom:19%;animation-delay:-2s}

/* Progress */
.progress-header { align-items:center; }.progress-hero-ring{padding-right:25px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}.stat-card{display:flex;align-items:center;gap:14px;padding:19px;border:1px solid rgba(49,38,70,.08);border-radius:17px;background:#fff;box-shadow:var(--shadow-sm)}.stat-card>span{width:43px;height:43px;display:grid;place-items:center;flex:0 0 auto;border-radius:13px;color:var(--purple);background:var(--purple-soft);font-size:1.1rem}.stat-card>div{display:flex;flex-direction:column}.stat-card strong{font-size:1.45rem;line-height:1.05}.stat-card small{margin-top:3px;color:var(--muted);font-size:.67rem}.progress-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:20px}.progress-course-card,.practice-history-card{padding:23px}.progress-lesson-list{display:grid;margin-top:19px}.progress-lesson-row{display:grid;grid-template-columns:42px minmax(0,1fr) 72px 24px;align-items:center;gap:13px;padding:13px 5px;border-bottom:1px solid var(--line)}.progress-lesson-row:last-child{border-bottom:0}.progress-lesson-row:hover .row-arrow{transform:translateX(3px);color:var(--purple)}.progress-lesson-number{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#746d79;background:#f2eff4;font-weight:900}.progress-lesson-row.done .progress-lesson-number{color:#fff;background:var(--mint)}.progress-lesson-row.current .progress-lesson-number{color:#fff;background:var(--purple)}.progress-lesson-copy{display:flex;flex-direction:column;min-width:0}.progress-lesson-copy strong{font-size:.82rem}.progress-lesson-copy small{overflow:hidden;color:var(--muted);font-size:.66rem;text-overflow:ellipsis;white-space:nowrap}.progress-lesson-score{display:flex;flex-direction:column;align-items:flex-end}.progress-lesson-score b{font-size:.77rem}.progress-lesson-score small{color:var(--muted);font-size:.6rem}.row-arrow{transition:.18s ease}.practice-history-list{display:grid;margin-top:15px}.history-row{display:grid;grid-template-columns:46px 1fr;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.history-row:last-child{border-bottom:0}.history-score{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:#8a5963;background:var(--rose-soft);font-size:.7rem;font-weight:900}.history-score.good{color:#7e631f;background:var(--amber-soft)}.history-score.great{color:#28764a;background:var(--mint-soft)}.history-row>div{display:flex;flex-direction:column}.history-row strong{font-size:.77rem}.history-row small{color:var(--muted);font-size:.62rem}
.empty-state{min-height:400px;display:grid;place-items:center;align-content:center;text-align:center;padding:30px}.empty-state.compact{min-height:265px}.empty-state>span{width:62px;height:62px;display:grid;place-items:center;margin-bottom:12px;border-radius:19px;color:var(--purple);background:var(--purple-soft);font-size:1.5rem}.empty-state strong{font-size:1.1rem}.empty-state p{max-width:360px;margin:6px 0 17px;color:var(--muted);font-size:.8rem}

/* User management */
.admin-header{align-items:center}.admin-shield{min-width:270px;display:flex;align-items:center;gap:13px;padding:17px;border:1px solid #ded7e8;border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}.admin-shield>span{width:43px;height:43px;display:grid;place-items:center;border-radius:13px;color:var(--purple);background:var(--purple-soft);font-size:1.3rem}.admin-shield>div{display:flex;flex-direction:column}.admin-shield strong{font-size:.78rem}.admin-shield small{color:var(--muted);font-size:.66rem}.admin-layout{display:grid;grid-template-columns:minmax(450px,.82fr) minmax(440px,1.18fr);gap:20px}.create-user-card,.user-list-card{padding:25px}.admin-form{display:grid;gap:17px;margin-top:21px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.password-note{display:flex;gap:10px;padding:12px 13px;border-radius:12px;background:#f4f1f8}.password-note>span{width:24px;height:24px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;color:#fff;background:var(--purple);font-size:.7rem;font-weight:900}.password-note p{margin:1px 0 0;color:var(--muted);font-size:.7rem}.managed-user-list{display:grid;margin-top:15px}.managed-user-row{display:grid;grid-template-columns:46px minmax(0,1fr) 58px auto;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}.managed-user-row:last-child{border-bottom:0}.managed-user-copy,.managed-user-stat{display:flex;flex-direction:column;min-width:0}.managed-user-copy strong{font-size:.82rem}.managed-user-copy small{overflow:hidden;color:var(--muted);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.managed-user-stat{align-items:flex-end}.managed-user-stat b{font-size:.9rem}.managed-user-stat small{color:var(--muted);font-size:.6rem}.active-user-chip{color:#28764a;background:var(--mint-soft)}

/* Offline */
.offline-page{background:linear-gradient(145deg,#f8f6fb,#eee8ff)}.offline-shell{min-height:100vh;display:grid;place-items:center;padding:25px}.offline-card{width:min(520px,100%);padding:48px;border:1px solid rgba(49,38,70,.08);border-radius:28px;background:#fff;box-shadow:var(--shadow-lg);text-align:center}.offline-icon{width:76px;height:76px;display:grid;place-items:center;margin:0 auto 20px;border-radius:23px;color:var(--purple);background:var(--purple-soft);font-size:2rem}.offline-card h1{margin:7px 0 10px;font-size:2.2rem}.offline-card p{margin:0 0 24px;color:var(--muted)}

/* Mobile and tablet */
@media (max-width: 1180px) {
  :root { --sidebar: 230px; }
  .page-content { padding: 34px 30px 56px; }
  .dashboard-hero { grid-template-columns: 1fr .64fr; }
  .lesson-step { grid-template-columns: .9fr 1.1fr; }
  .lesson-step-copy { padding: 42px; }
  .lesson-step-art { padding: 18px; }
  .lesson-visual { transform: scale(.91); }
  .practice-workspace { grid-template-columns: 270px minmax(0,1fr); }
  .admin-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar { display: none; }
  .app-stage { margin-left: 0; }
  .mobile-header { position: sticky; z-index: 25; top: 0; min-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 9px 18px; border-bottom: 1px solid rgba(49,38,70,.08); background: rgba(255,255,255,.91); backdrop-filter: blur(15px); }
  .mobile-brand { display: flex; align-items: center; gap: 9px; }.mini-keys{width:32px;height:24px;border:2px solid #2b2631;border-radius:6px;background:repeating-linear-gradient(90deg,#fff 0 7px,#bbb 8px 9px)}.mobile-brand strong{font-size:.88rem}.connection-pill{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.66rem}.connection-pill span{width:7px;height:7px;border-radius:50%;background:var(--mint)}.connection-pill.offline span{background:var(--danger)}.connection-pill em{font-style:normal;font-weight:800}
  .mobile-nav { position: fixed; z-index: 35; left: 10px; right: 10px; bottom: calc(9px + var(--safe-bottom)); min-height: 64px; display: grid; grid-template-columns: repeat(auto-fit,minmax(0,1fr)); align-items: center; padding: 6px; border: 1px solid rgba(49,38,70,.11); border-radius: 20px; background: rgba(255,255,255,.95); box-shadow: 0 16px 45px rgba(43,32,60,.18); backdrop-filter: blur(18px); }
  .mobile-nav a,.mobile-nav button{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;border-radius:14px;color:#78717e;background:transparent}.mobile-nav .active{color:var(--purple);background:var(--purple-soft)}.mobile-nav span{font-size:1.15rem}.mobile-nav small{font-size:.58rem;font-weight:800}
  .page-content { padding: 26px 22px calc(100px + var(--safe-bottom)); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .lesson-card-grid { grid-template-columns: 1fr; }
  .beginner-strip { grid-template-columns: 1fr 1fr; }
  .lesson-step { grid-template-columns: 1fr; }
  .lesson-step-copy { min-height: 450px; }
  .lesson-step-art { min-height: 520px; }
  .lesson-visual { transform: none; }
  .practice-workspace { grid-template-columns: 1fr; }
  .practice-task-card { display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center }.practice-task-card>.page-kicker,.practice-task-card>h2,.practice-task-card>p{grid-column:1}.practice-task-card .current-note-card,.practice-task-card .quiz-score-preview{grid-column:2;grid-row:1/4;margin:0;min-width:150px}.practice-task-card .input-source-list,.practice-task-card .keyboard-hint,.practice-task-card>.button,.practice-task-card .detected-note{grid-column:1/-1}.practice-main-card{min-height:500px}.progress-layout{grid-template-columns:1fr}.stats-grid{grid-template-columns:1fr 1fr}
  .login-shell { grid-template-columns: 1fr; }.login-visual{display:none}.login-panel{min-height:100vh;padding:28px}.login-card{padding:0}.login-brand{padding-bottom:45px}
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .page-content { padding: 20px 14px calc(96px + var(--safe-bottom)); }
  .mobile-header { padding-inline: 14px; }
  .dashboard-hero { min-height: 280px; grid-template-columns: 1fr; padding: 25px 21px; }.hero-copy h1{font-size:2.55rem}.hero-copy p{font-size:.86rem}.hero-scene{min-height:110px}.mini-piano{right:-20px;bottom:-31px;transform:scale(.67);transform-origin:bottom right}.plant{left:5%;bottom:-6px;transform:scale(.78)}.floating-note.one{right:48%;top:12px}.floating-note.two{right:12%;top:3px}
  .dashboard-grid { grid-template-columns: 1fr; gap:14px }.progress-card,.daily-card{min-height:auto;padding:21px}.progress-main{grid-template-columns:105px 1fr;gap:17px}.progress-ring{width:100px}.milestone{gap:7px}.milestone strong{font-size:.75rem}.week-dots{margin:24px 0 21px}.next-section{margin-top:28px}.next-section .section-heading h2{font-size:1.3rem}.section-heading .text-link{font-size:.72rem}.lesson-mini-card{grid-template-columns:47px minmax(0,1fr) 22px;min-height:150px;padding:17px}.lesson-icon{width:47px;height:47px}.beginner-strip{grid-template-columns:1fr;padding:14px 16px}.beginner-strip small{white-space:normal}
  .page-header { display:grid;gap:18px;margin-bottom:22px }.page-header h1{font-size:2.35rem}.course-progress-card,.admin-shield{min-width:0;width:100%}.course-timeline{padding-left:0}.course-timeline::before{left:22px}.course-lesson{grid-template-columns:45px 1fr;gap:8px}.timeline-node{width:45px;height:45px;border-width:5px}.timeline-node span{width:35px;height:35px}.course-card{grid-template-columns:48px minmax(0,1fr);gap:12px;padding:18px 14px}.course-icon{width:48px;height:48px;font-size:1.45rem}.course-copy h2{font-size:1.06rem}.course-copy p{font-size:.74rem}.goal-tags{display:none}.course-state{grid-column:2;min-width:0;flex-direction:row;align-items:center;justify-content:space-between}.course-state>small{display:none}.course-state>b{margin-left:auto}
  .lesson-topbar,.practice-header{grid-template-columns:1fr auto}.lesson-top-title,.practice-title{display:none}.lesson-duration,.input-status{grid-column:2}.lesson-progress-header small{display:none}.lesson-player-card{border-radius:20px}.lesson-step{min-height:auto}.lesson-step-copy{min-height:auto;padding:33px 23px}.lesson-step-copy h1{font-size:2.55rem}.lesson-lead{font-size:.91rem;line-height:1.65}.lesson-step-art{min-height:440px;padding:10px}.lesson-visual{min-height:400px;transform:scale(.82);width:121%;margin-left:-10.5%}.visual-label{margin-bottom:12px}.lesson-player-footer{padding:11px 13px}.lesson-player-footer .button{min-height:44px;padding:0 13px;font-size:.75rem}.lesson-goals-bar{align-items:flex-start;gap:9px}.lesson-goals-bar>strong{width:100%}
  .hand-compare{grid-template-columns:1fr}.hand-bad{display:none}.posture-scene{height:330px}.rhythm-visual{grid-template-columns:125px 1fr;padding:18px}.metronome-art{transform:scale(.8)}.keyboard-strip{height:150px}.keyboard-strip b{height:87px}
  .practice-workspace{gap:12px}.practice-task-card{display:block;padding:20px}.practice-task-card .current-note-card{margin:18px 0}.practice-task-card h2{font-size:1.25rem}.practice-main-card{min-height:450px;padding:18px 12px}.practice-feedback{margin:0 2px 18px}.interactive-piano{min-width:620px;height:240px}.piano-legend{flex-wrap:wrap;padding:0 4px}.piano-legend small{width:100%;margin-left:0}.interactive-hand{height:340px;transform:scale(.86);transform-origin:center}.rhythm-pad{width:185px;height:185px}.rhythm-beats{grid-template-columns:repeat(8,27px);gap:5px}.rhythm-beats span{width:27px;height:27px}.quiz-stage h2{font-size:1.65rem}.quiz-option{padding:9px 11px}.practice-result{min-height:480px;padding:30px 18px}.practice-result h2{font-size:2rem}.result-actions{flex-direction:column;width:100%}.result-actions .button{width:100%}
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px}.stat-card{padding:14px 12px}.stat-card>span{width:36px;height:36px}.stat-card strong{font-size:1.15rem}.progress-header{display:flex}.progress-hero-ring{display:none}.progress-course-card,.practice-history-card{padding:18px 14px}.progress-lesson-row{grid-template-columns:38px minmax(0,1fr) 52px 14px;gap:8px}.progress-lesson-copy small{max-width:170px}.progress-lesson-score small{display:none}
  .admin-layout{grid-template-columns:1fr}.create-user-card,.user-list-card{padding:20px 16px}.field-row{grid-template-columns:1fr}.managed-user-row{grid-template-columns:42px minmax(0,1fr) auto}.managed-user-stat{display:none}.active-user-chip{font-size:.65rem;padding:6px 8px}
  .toast-stack{left:12px;right:12px;top:72px}.toast{min-width:0;width:100%}.offline-card{padding:36px 22px}.login-panel{padding:22px}.login-heading h2{font-size:1.9rem}
}

@media (max-width: 380px) {
  .stats-grid{grid-template-columns:1fr}.progress-main{grid-template-columns:1fr}.progress-ring{margin:0 auto}.lesson-step-copy h1{font-size:2.2rem}.lesson-visual{transform:scale(.72);width:139%;margin-left:-19.5%}.mobile-nav small{font-size:.54rem}.practice-task-card .input-source-list{grid-template-columns:1fr}.interactive-hand{transform:scale(.74)}
}

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