:root {
  --bg: #0b0e19;
  --panel: #141829;
  --panel-2: #1b2035;
  --line: rgba(255, 255, 255, .09);
  --text: #f7f4ee;
  --muted: #b0b7c9;
  --coral: #ff7a68;
  --mint: #62dbb5;
  --gold: #f5c96a;
  --lavender: #9d91ff;
  --blue: #64b5f6;
  --danger: #ff4d60;
  --shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Manrope, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button { color: inherit; font: inherit; }
button, [tabindex] { outline: none; }
button:focus-visible, [tabindex]:focus-visible { box-shadow: 0 0 0 3px rgba(98, 219, 181, .35); }
svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ambient { position: fixed; border-radius: 999px; filter: blur(100px); opacity: .13; pointer-events: none; z-index: -1; }
.ambient-one { width: 500px; height: 500px; background: var(--lavender); right: 8%; top: -260px; }
.ambient-two { width: 430px; height: 430px; background: var(--coral); left: 20%; bottom: -310px; }

.app-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; display: flex; flex-direction: column; overflow-y: auto; padding: 30px 20px 24px; border-right: 1px solid var(--line); background: rgba(12, 15, 27, .92); backdrop-filter: blur(20px); scrollbar-width: none; z-index: 20; }
.sidebar::-webkit-scrollbar { display: none; }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; margin: 0 8px 44px; }
.brand-mark { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 46px; height: 38px; gap: 3px; transform: rotate(-4deg); }
.brand-mark i { display: grid; place-items: center; border-radius: 9px; background: var(--coral); color: #191525; font: 800 16px/1 Space Grotesk; font-style: normal; box-shadow: inset 0 -3px rgba(0,0,0,.18); }
.brand-mark i:last-child { background: var(--gold); transform: translateY(4px); }
.brand-copy { display: grid; font-family: Space Grotesk; line-height: 1; }
.brand-copy strong { font-size: 18px; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.main-nav { display: grid; gap: 8px; }
.nav-item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px; border: 0; border-radius: 13px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; font-size: 13px; font-weight: 700; transition: .2s ease; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.04); transform: translateX(2px); }
.nav-item.active { color: var(--text); background: rgba(255, 122, 104, .11); }
.nav-icon { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.03); }
.nav-item.active .nav-icon { color: var(--coral); border-color: rgba(255,122,104,.25); background: rgba(255,122,104,.08); }
.guide-menu { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.guide-menu-button { display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 9px; align-items: center; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); color: inherit; cursor: pointer; text-align: left; transition: .2s ease; }
.guide-menu-button:hover { border-color: color-mix(in srgb,var(--mint) 40%,var(--line)); background: color-mix(in srgb,var(--mint) 7%,transparent); transform: translateX(2px); }
.guide-menu-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb,var(--mint) 10%,transparent); color: var(--mint); }
.guide-menu-icon svg { width: 16px; }
.guide-menu-button > span:last-child { display: grid; gap: 2px; min-width: 0; }
.guide-menu-button strong { font-size: 9px; }
.guide-menu-button small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.theme-picker { display: grid; gap: 7px; margin-top: auto; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }
.theme-picker > span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.theme-picker > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.theme-picker button { display: grid; justify-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 6px; font-weight: 800; }
.theme-picker button:hover, .theme-picker button.active { border-color: var(--line); background: rgba(255,255,255,.06); color: var(--text); }
.theme-picker i { display: block; width: 16px; height: 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background: #0b0e19; box-shadow: inset 5px 0 #ff7a68; }
.theme-picker [data-theme="dusk"] i { background: #29213b; box-shadow: inset 5px 0 #b58cff; }
.theme-picker [data-theme="light"] i { border-color: rgba(0,0,0,.12); background: #f6f3ec; box-shadow: inset 5px 0 #62b9a2; }
.theme-picker [data-theme="neon"] i { border-color: rgba(45,239,255,.48); background: #05060b; box-shadow: inset 5px 0 #ff36c8, 0 0 8px rgba(45,239,255,.35); }
.theme-picker [data-theme="cream"] i { border-color: rgba(95,65,30,.15); background: #fff3dd; box-shadow: inset 5px 0 #e58c55; }
.theme-picker [data-theme="sky"] i { border-color: rgba(30,85,115,.15); background: #e9f7ff; box-shadow: inset 5px 0 #48a8cf; }
.theme-picker [data-theme="kid-candy"] i { border-color: rgba(142,64,126,.18); background: #fff0fa; box-shadow: inset 5px 0 #ff6fa9, inset -5px 0 #59cbd1; }
.theme-picker [data-theme="kid-space"] i { border-color: rgba(108,232,255,.38); background: #090d2c; box-shadow: inset 5px 0 #8c7cff, inset -5px 0 #ffd84d, 0 0 7px rgba(108,232,255,.28); }
.daily-card { display: flex; align-items: center; gap: 11px; padding: 13px; margin-top: auto; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.03); }
.daily-card > div:last-child { display: grid; gap: 4px; }
.daily-card strong { font-size: 12px; }
.daily-card small { color: var(--muted); font-size: 10px; }
.daily-ring { --progress: 0deg; display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: conic-gradient(var(--mint) var(--progress), rgba(255,255,255,.07) 0); position: relative; }
.daily-ring::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #121625; }
.daily-ring span { position: relative; z-index: 1; font-size: 9px; font-weight: 800; }
.community-card { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr) 14px; gap: 9px; align-items: center; margin-top: 9px; padding: 10px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--mint) 24%,var(--line)); border-radius: 14px; background: linear-gradient(135deg,color-mix(in srgb,var(--mint) 8%,transparent),color-mix(in srgb,var(--lavender) 7%,transparent)); color: inherit; text-decoration: none; transition: .2s ease; }
.community-card::before { content: ""; position: absolute; width: 55px; height: 55px; right: -28px; top: -29px; border-radius: 50%; background: var(--mint); opacity: .08; filter: blur(2px); }
.community-card:hover { border-color: color-mix(in srgb,var(--mint) 48%,var(--line)); background: linear-gradient(135deg,color-mix(in srgb,var(--mint) 13%,transparent),color-mix(in srgb,var(--lavender) 10%,transparent)); transform: translateY(-1px); }
.community-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb,var(--mint) 13%,transparent); color: var(--mint); }
.community-icon svg { width: 18px; }
.community-copy { display: grid; gap: 2px; min-width: 0; }
.community-copy small { color: var(--mint); font-size: 6px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.community-copy strong { font-size: 8px; line-height: 1.35; }
.community-copy em { overflow: hidden; color: var(--muted); font-size: 6px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.community-arrow { width: 13px; color: var(--muted); }
.sidebar-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: #70798f; font-size: 9px; line-height: 1.5; }
.author-credit { display: grid; gap: 5px; margin-top: 10px; padding: 9px 10px 0; border-top: 1px solid color-mix(in srgb,var(--line) 72%,transparent); }
.author-credit > span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.author-credit > div { display: flex; flex-wrap: wrap; gap: 3px 10px; }
.author-credit a { color: color-mix(in srgb,var(--muted) 82%,var(--text)); font-size: 8px; font-weight: 700; line-height: 1.45; text-decoration: none; transition: color .18s ease; }
.author-credit a:hover, .author-credit a:focus-visible { color: var(--mint); }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid var(--line); border-radius: 10px; background: transparent; cursor: pointer; }
.icon-button svg { width: 17px; }
.sound-off { display: none; }
.muted .sound-on { display: none; }
.muted .sound-off { display: block; }

.main-content { grid-column: 2; min-width: 0; padding: 0 46px 70px; }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 108px; gap: 24px; border-bottom: 1px solid var(--line); }
.eyebrow { display: block; margin-bottom: 6px; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; font-family: Space Grotesk, sans-serif; }
.welcome h1 { font-size: 18px; }
.top-actions { display: flex; align-items: center; gap: 12px; }
.language-picker { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--text); }
.language-picker span { font-size: 14px; }
.language-picker select { max-width: 106px; border: 0; outline: 0; background: transparent; color: inherit; font: 800 9px Manrope; cursor: pointer; }
.language-picker option { background: var(--panel); color: var(--text); }
.language-suggestion { position: fixed; z-index: 400; top: 14px; left: 50%; display: flex; align-items: center; gap: 10px; width: min(560px,calc(100% - 28px)); padding: 11px 13px; border: 1px solid color-mix(in srgb,var(--mint) 55%,var(--line)); border-radius: 13px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); transform: translateX(-50%); }
.language-suggestion[hidden] { display: none; }
.language-suggestion-mark { font-size: 18px; }
.language-suggestion #language-suggestion-copy { flex: 1; font-size: 11px; font-weight: 700; line-height: 1.45; }
.language-suggestion button { width: 27px; height: 27px; border: 0; border-radius: 8px; background: var(--panel-2); color: var(--muted); font: 800 16px Manrope; cursor: pointer; }
.streak-pill, .spark-pill { display: flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.streak-pill strong, .spark-pill strong { color: var(--text); font-size: 13px; }
.streak-flame { color: var(--gold); }
.spark-pill { border-color: color-mix(in srgb,var(--lavender) 30%,var(--line)); background: color-mix(in srgb,var(--lavender) 6%,transparent); }
.spark-mark { color: var(--lavender); text-shadow: 0 0 10px color-mix(in srgb,var(--lavender) 70%,transparent); }
.profile { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--lavender), #7367d9); color: #fff; font-size: 11px; font-weight: 800; box-shadow: inset 0 -4px rgba(0,0,0,.16); cursor: pointer; }
.mobile-menu { display: none; }
.motivation-banner { --motivation-color: var(--mint); position: relative; display: grid; grid-template-columns: 48px minmax(0,1fr) 72px; gap: 12px; align-items: center; min-height: 66px; margin-top: 14px; padding: 9px 13px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--motivation-color) 34%,var(--line)); border-radius: 17px; background: linear-gradient(135deg,color-mix(in srgb,var(--motivation-color) 9%,var(--panel)),var(--panel)); box-shadow: inset 0 1px rgba(255,255,255,.035); transition: border-color .2s, background .2s; }
.motivation-banner[data-tone="progress"] { --motivation-color: var(--blue); }
.motivation-banner[data-tone="streak"], .motivation-banner[data-tone="finish"] { --motivation-color: var(--gold); }
.motivation-banner[data-tone="recover"] { --motivation-color: var(--coral); }
.companion-face { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb,var(--motivation-color) 48%,var(--line)); border-radius: 14px; background: color-mix(in srgb,var(--motivation-color) 14%,var(--panel-2)); color: var(--motivation-color); font: 800 21px/1 Space Grotesk; box-shadow: 0 7px 20px color-mix(in srgb,var(--motivation-color) 12%,transparent); }
.motivation-banner > div:nth-child(2) { position: relative; z-index: 1; display: grid; gap: 2px; min-width: 0; }
.motivation-banner span { color: var(--motivation-color); font-size: 7px; font-weight: 800; letter-spacing: .17em; }
.motivation-banner strong { overflow: hidden; font: 700 12px/1.25 Space Grotesk; text-overflow: ellipsis; white-space: nowrap; }
.motivation-banner p { overflow: hidden; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.motivation-sparks { position: relative; z-index: 1; display: flex; justify-content: end; gap: 8px; }
.motivation-sparks i { width: 7px; height: 7px; border-radius: 3px; background: var(--motivation-color); opacity: .32; transform: rotate(45deg); }
.motivation-sparks i:nth-child(2) { width: 11px; height: 11px; opacity: .7; animation: motivation-spark 1.4s ease-in-out infinite alternate; }
.motivation-sparks i:nth-child(3) { align-self: end; opacity: .48; animation: motivation-spark 1.1s .25s ease-in-out infinite alternate; }
@keyframes motivation-spark { to { opacity: 1; transform: translateY(-5px) rotate(90deg) scale(1.18); } }
.view { display: none; padding-top: 35px; animation: reveal .35s ease; }
.view.active { display: block; }
@keyframes reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 25px; margin-bottom: 25px; }
.section-heading h2 { font-size: clamp(25px, 3vw, 38px); letter-spacing: -.04em; }
.section-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.ghost-button, .primary-button { border: 1px solid var(--line); border-radius: 12px; padding: 11px 16px; background: rgba(255,255,255,.035); cursor: pointer; font-size: 11px; font-weight: 800; transition: .2s ease; }
.ghost-button:hover { background: rgba(255,255,255,.08); }
.primary-button { border-color: transparent; background: var(--coral); color: #1b1420; box-shadow: inset 0 -4px rgba(0,0,0,.13), 0 8px 25px rgba(255,122,104,.16); }
.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button:disabled,.ghost-button:disabled { opacity: .42; cursor: not-allowed; filter: none; transform: none; }
.danger-button { color: var(--danger); border-color: color-mix(in srgb,var(--danger) 25%,transparent); }
.danger-button:hover { background: color-mix(in srgb,var(--danger) 9%,transparent); }
.install-app-button { display: flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid color-mix(in srgb,var(--mint) 38%,var(--line)); border-radius: 999px; background: color-mix(in srgb,var(--mint) 8%,transparent); color: var(--mint); cursor: pointer; font-size: 9px; font-weight: 800; }.install-app-button[hidden] { display: none; }.install-app-button span { font-size: 13px; }

.lesson-track { display: flex; align-items: center; gap: 9px; padding: 8px 0 22px; overflow-x: auto; scrollbar-width: none; }
.lesson-track::-webkit-scrollbar { display: none; }
.lesson-node { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--muted); cursor: pointer; }
.lesson-node:not(:last-child)::after { content: ""; width: 32px; height: 1px; background: var(--line); }
.lesson-node span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); font-size: 9px; font-weight: 800; }
.lesson-node small { font-size: 9px; font-weight: 700; }
.lesson-node.active span { color: #1a1721; background: var(--gold); border-color: var(--gold); }
.lesson-node.active small { color: var(--text); }
.lesson-node.done span { color: #14221e; background: var(--mint); border-color: var(--mint); }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.stat-card { position: relative; overflow: hidden; min-height: 100px; padding: 17px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.stat-card::after { content: ""; position: absolute; width: 75px; height: 75px; right: -32px; top: -32px; border-radius: 50%; background: currentColor; opacity: .08; }
.stat-card.coral { color: var(--coral); }.stat-card.mint { color: var(--mint); }.stat-card.lavender { color: var(--lavender); }.stat-card.gold { color: var(--gold); }
.stat-label { display: block; color: var(--muted); font-size: 9px; font-weight: 700; }
.stat-card strong { display: block; margin-top: 8px; color: var(--text); font: 700 28px/1 Space Grotesk; }
.stat-card strong small { color: var(--muted); font-size: 9px; font-family: Manrope; }
.mini-bars { position: absolute; display: flex; align-items: end; gap: 3px; right: 14px; bottom: 15px; height: 24px; }
.mini-bars i { width: 3px; height: 35%; border-radius: 3px; background: currentColor; opacity: .5; }.mini-bars i:nth-child(2){height:55%}.mini-bars i:nth-child(3){height:45%}.mini-bars i:nth-child(4){height:80%}.mini-bars i:nth-child(5){height:100%}
.mini-ring { position: absolute; right: 15px; bottom: 13px; width: 27px; height: 27px; border: 3px solid rgba(255,255,255,.07); border-top-color: currentColor; border-right-color: currentColor; border-radius: 50%; }
.stat-mark { position: absolute; right: 15px; bottom: 12px; color: currentColor; opacity: .65; font: 700 16px Space Grotesk; }.stat-mark span { font-size: 9px; vertical-align: super; }

.typing-card { border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(145deg, #181c2e, #111522); box-shadow: var(--shadow); overflow: hidden; }
.typing-card-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.typing-card-head > div { display: flex; align-items: center; gap: 8px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(98,219,181,.08); }
.progress-copy { min-width: 150px; justify-content: flex-end; }
.thin-progress { width: 92px; height: 3px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }
.thin-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mint); transition: width .2s; }
.typing-text { min-height: 152px; padding: 28px 34px 24px; color: #596176; font: 600 25px/1.85 Space Grotesk, monospace; letter-spacing: .025em; cursor: text; user-select: none; }
.typing-text .word { white-space: nowrap; }
.typing-text .char { position: relative; border-radius: 4px; transition: color .1s, background .1s; }
.typing-text .char.space { white-space: pre-wrap; }
.typing-text .char.correct { color: var(--text); }
.typing-text .char.wrong { color: var(--danger); background: rgba(255,77,96,.12); }
.typing-text .char.current { color: var(--gold); background: rgba(245,201,106,.09); }
.typing-text .char.current::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 100%; height: 2px; border-radius: 2px; background: var(--gold); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.next-key-hint { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
kbd { font-family: Space Grotesk; }
.next-key-hint kbd, .key-press-label kbd { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 5px; border: 1px solid rgba(245,201,106,.3); border-radius: 6px; background: rgba(245,201,106,.08); color: var(--gold); font-size: 10px; }
.coach-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 14px; margin-top: 14px; }
.coach-card, .finger-card, .keyboard-wrap, .report-card { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.coach-card, .finger-card { padding: 18px; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.card-title h3, .finger-card h3, .keyboard-top h3, .report-card h3 { font-size: 14px; }
.live-badge { padding: 5px 7px; border-radius: 6px; color: var(--mint); background: rgba(98,219,181,.08); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.hands { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 128px; margin: 9px 0 0; }
.hands[data-movement]::before { content: attr(data-movement-copy); position: absolute; z-index: 7; left: 50%; top: 0; padding: 5px 10px; border: 1px solid color-mix(in srgb,var(--mint) 42%,var(--line)); border-radius: 999px; background: color-mix(in srgb,var(--panel) 92%,transparent); color: var(--text); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 18px color-mix(in srgb,var(--mint) 10%,transparent); transform: translateX(-50%); }
.hands[data-movement]::after { content: "↩ wróć na ASDF JKL;"; position: absolute; z-index: 7; left: 50%; bottom: -5px; color: var(--mint); font-size: 7px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.hand { position: relative; width: 116px; height: 77px; border: 1px solid rgba(255,255,255,.12); border-radius: 40px 40px 15px 15px; background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); }
.hand span { position: absolute; bottom: -25px; width: 100%; text-align: center; color: var(--muted); font-size: 8px; }
.finger { position: absolute; bottom: 50px; width: 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px 14px 6px 6px; background: var(--panel-2); transform-origin: bottom; transition: .15s; }
.finger.pinky { height: 44px; left: 5px; transform: rotate(-12deg); }.finger.ring { height: 58px; left: 27px; transform: rotate(-4deg); }.finger.middle { height: 65px; left: 50px; }.finger.index { height: 58px; left: 74px; transform: rotate(5deg); }.finger.thumb { height: 42px; left: 98px; bottom: 25px; transform: rotate(60deg); }
.right-hand { transform: scaleX(-1); }.right-hand span { transform: scaleX(-1); }
.finger.active { background: var(--finger-color, var(--gold)); box-shadow: 0 0 20px color-mix(in srgb, var(--finger-color, var(--gold)) 50%, transparent); transform: translateY(-5px); }
.right-hand .finger.active { transform: translateY(-5px); }
.finger.active[data-direction]::after { position: absolute; z-index: 8; left: 50%; top: -32px; display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid color-mix(in srgb,var(--finger-color,var(--gold)) 55%,white); border-radius: 9px; background: var(--finger-color,var(--gold)); color: #10151d; font: 900 20px/1 Space Grotesk; box-shadow: 0 0 0 4px color-mix(in srgb,var(--finger-color,var(--gold)) 18%,transparent),0 0 18px color-mix(in srgb,var(--finger-color,var(--gold)) 65%,transparent),inset 0 1px rgba(255,255,255,.45); text-shadow: 0 1px rgba(255,255,255,.45); transform: translateX(-50%); animation: finger-direction-pulse .72s ease-in-out infinite alternate; }
.finger.active[data-direction="up"]::after { content: "↑"; }
.finger.active[data-direction="down"]::after { content: "↓"; }
.right-hand .finger.active[data-direction]::after { transform: translateX(-50%) scaleX(-1); }
.game-hands .finger.active[data-direction]::after { top: -52px; width: 46px; height: 46px; border-width: 3px; border-radius: 13px; font-size: 34px; }
@keyframes finger-direction-pulse { from { top: -29px; filter: brightness(.96); } to { top: -35px; filter: brightness(1.16); } }
.game-hands .finger.active[data-direction]::after { animation-name: game-finger-direction-pulse; }
@keyframes game-finger-direction-pulse { from { top: -47px; filter: brightness(.96); } to { top: -57px; filter: brightness(1.16); } }
.home-keys { display: flex; gap: 3px; margin: 0 -5px 9px; z-index: 2; }
.home-keys kbd { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 6px; background: #111522; color: var(--muted); font-size: 8px; }
.home-keys span { width: 12px; }
.coach-tip { margin: 25px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.025); color: var(--muted); font-size: 9px; text-align: center; }.coach-tip strong { color: var(--text); }
.finger-card p { margin: 14px 0 0; color: var(--muted); font-size: 9px; line-height: 1.7; }
.finger-legend { display: grid; gap: 7px; margin-top: 15px; }
.legend-row { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--muted); font-size: 9px; }
.legend-row b { color: var(--text); font-size: 9px; }.legend-row i { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; display: inline-block; }

.keyboard-wrap { margin-top: 14px; padding: 18px; overflow-x: auto; }
.keyboard-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.key-press-label { color: var(--muted); font-size: 9px; }
.keyboard { --key-height: 38px; display: grid; gap: 5px; min-width: 690px; max-width: 920px; margin: auto; }
.key-row { position: relative; display: flex; justify-content: center; gap: 5px; border-radius: 10px; transition: background .18s ease, box-shadow .18s ease; }
.key-row.target-row { background: color-mix(in srgb,var(--mint) 7%,transparent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--mint) 20%,transparent),0 0 18px color-mix(in srgb,var(--mint) 8%,transparent); }
.key-row.target-row::before { position: absolute; z-index: 7; left: 4px; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid color-mix(in srgb,var(--mint) 50%,var(--line)); border-radius: 7px; background: var(--panel); color: var(--mint); font: 900 15px/1 Space Grotesk; box-shadow: 0 0 12px color-mix(in srgb,var(--mint) 24%,transparent); transform: translateY(-50%); }
.key-row.target-row[data-row-direction="up"]::before { content: "↑"; }
.key-row.target-row[data-row-direction="down"]::before { content: "↓"; }
.key { --key-color: #6f7890; position: relative; z-index: 1; display: grid; place-items: center; height: var(--key-height); min-width: 40px; padding: 0 8px; border: 1px solid rgba(255,255,255,.1); border-bottom-width: 3px; border-radius: 8px; background: #1c2134; color: #aab1c3; font: 700 9px Space Grotesk; transition: transform .1s ease, border-color .1s ease, background .1s ease, box-shadow .1s ease, color .1s ease; }
.key-label { position: relative; z-index: 3; display: grid; place-items: center; border-radius: 5px; line-height: 1; }
.key::after { content: ""; position: absolute; inset: auto 6px 4px; height: 2px; border-radius: 3px; background: var(--key-color); opacity: .5; }
.key.home::before { content: ""; position: absolute; bottom: 7px; width: 8px; height: 1px; border-radius: 2px; background: #cdd2dc; }
.key.expected { z-index: 5; color: #fff; border: 3px solid color-mix(in srgb,var(--key-color) 88%,white 12%); background: color-mix(in srgb,var(--key-color) 48%,#15192a); box-shadow: 0 0 0 4px color-mix(in srgb,var(--key-color) 24%,transparent),0 0 15px color-mix(in srgb,var(--key-color) 70%,transparent),0 0 38px color-mix(in srgb,var(--key-color) 38%,transparent),inset 0 0 12px rgba(255,255,255,.12); text-shadow: 0 1px 2px rgba(0,0,0,.45),0 0 7px rgba(255,255,255,.35); transform: translateY(-4px) scale(1.14); animation: expected-key-pulse .62s ease-in-out infinite alternate; }
.key.expected .key-label { min-width: 1.7em; min-height: 1.7em; padding: 2px 5px; border: 1px solid rgba(255,255,255,.92); background: #111827; color: #fff; font-size: max(11px,1.22em); font-weight: 800; box-shadow: 0 1px 0 rgba(255,255,255,.22),0 2px 7px rgba(0,0,0,.62),0 0 0 2px rgba(17,24,39,.35); text-shadow: 0 1px 2px #000; }
.key.expected::after { inset: auto 5px 3px; height: 4px; background: #fff; opacity: .95; box-shadow: 0 0 7px #fff; }
.key.pressed { border-color: var(--key-color); background: var(--key-color); transform: translateY(2px); box-shadow: none; }
.key.pressed .key-label { color: #fff; background: #111827; text-shadow: 0 1px 2px #000; }
.key.feedback-correct { color: #10221c; border-color: var(--mint); background: var(--mint); box-shadow: 0 0 0 4px color-mix(in srgb,var(--mint) 22%,transparent),0 0 24px color-mix(in srgb,var(--mint) 40%,transparent); transform: translateY(1px) scale(1.06); }
.key.feedback-wrong { color: #fff; border-color: var(--danger); background: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb,var(--danger) 22%,transparent),0 0 28px color-mix(in srgb,var(--danger) 45%,transparent); transform: translateY(1px) scale(1.08); animation: wrong-key-shake .22s ease; }
@keyframes wrong-key-shake { 25% { transform: translateX(-2px) scale(1.08); } 75% { transform: translateX(2px) scale(1.08); } }
@keyframes expected-key-pulse { from { filter: brightness(.95); } to { filter: brightness(1.25); box-shadow: 0 0 0 6px color-mix(in srgb,var(--key-color) 20%,transparent),0 0 20px color-mix(in srgb,var(--key-color) 90%,transparent),0 0 48px color-mix(in srgb,var(--key-color) 48%,transparent),inset 0 0 16px rgba(255,255,255,.16); } }
.key-space { width: 310px; }.key-tab { width: 66px; }.key-caps { width: 77px; }.key-shift { width: 100px; }.key-enter { width: 84px; }.key-backspace { width: 85px; }
.keyboard.compact { --key-height: 30px; min-width: 600px; }.keyboard.compact .key { min-width: 34px; font-size: 8px; }.keyboard.compact .key-space { width: 260px; }

.tutorial-layout { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 14px; align-items: start; }
.tutorial-heading-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 7px; border-bottom: 1px solid var(--line); }
.tutorial-heading-actions button { min-width: 0; padding: 7px 3px; white-space: nowrap; font-size: 7px; }
.tutorial-path { position: sticky; top: 15px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.tutorial-path-head { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tutorial-path-head strong { color: var(--text); font: 700 11px Space Grotesk; }
.tutorial-steps { display: grid; max-height: calc(100vh - 225px); overflow-y: auto; padding: 7px; scrollbar-width: thin; }
.tutorial-step { display: grid; grid-template-columns: 27px minmax(0,1fr); gap: 8px; align-items: center; padding: 8px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; transition: .18s; }
.tutorial-step:hover { background: rgba(255,255,255,.035); color: var(--text); }
.tutorial-step > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); font-size: 8px; font-weight: 800; }
.tutorial-step div { display: grid; gap: 2px; min-width: 0; }.tutorial-step strong { overflow: hidden; color: inherit; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.tutorial-step small { color: var(--muted); font-size: 6px; letter-spacing: .06em; text-transform: uppercase; }
.tutorial-step.active { color: var(--text); background: rgba(255,122,104,.09); }.tutorial-step.active > span { border-color: rgba(255,122,104,.4); background: var(--coral); color: #17131b; }
.tutorial-step.done > span { border-color: var(--mint); background: rgba(98,219,181,.14); color: var(--mint); }
.tutorial-main { display: grid; gap: 10px; min-width: 0; }
.tutorial-guide { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.75fr) 105px; gap: 15px; align-items: center; padding: 14px 17px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(135deg,rgba(157,145,255,.09),rgba(255,122,104,.055)); }
.tutorial-stage-label { color: var(--coral); font-size: 7px; font-weight: 800; letter-spacing: .17em; }
.tutorial-guide h2 { margin-top: 5px; font-size: 25px; }.tutorial-guide p { margin: 5px 0 10px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.tutorial-instruction { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 8px; }.tutorial-instruction span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(245,201,106,.3); border-radius: 8px; background: rgba(245,201,106,.07); color: var(--gold); font: 700 8px Space Grotesk; }.tutorial-instruction strong { color: var(--text); }
.tutorial-tip-banner { display: flex; align-items: center; gap: 11px; min-height: 72px; padding: 10px 12px; border: 1px solid rgba(245,201,106,.34); border-radius: 14px; background: linear-gradient(135deg,rgba(245,201,106,.11),rgba(255,122,104,.055)); box-shadow: inset 0 0 20px rgba(245,201,106,.025); }
.tutorial-tip-banner > div:last-child { display: grid; gap: 2px; }.tutorial-tip-banner span { color: var(--gold); font-size: 6px; font-weight: 800; letter-spacing: .15em; }.tutorial-tip-banner strong { font: 700 10px Space Grotesk; }.tutorial-tip-banner p { margin: 0; color: var(--muted); font-size: 7px; line-height: 1.45; }
.bump-key-demo { display: flex; gap: 4px; flex: 0 0 auto; }.bump-key-demo kbd { position: relative; display: grid; place-items: center; width: 29px; height: 31px; border: 1px solid rgba(245,201,106,.45); border-bottom-width: 3px; border-radius: 8px; background: var(--panel-2); color: var(--gold); font-size: 11px; box-shadow: 0 0 15px rgba(245,201,106,.08); }.bump-key-demo i { position: absolute; bottom: 5px; width: 11px; height: 2px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 6px rgba(245,201,106,.6); }
.tutorial-score { display: grid; justify-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); }.tutorial-score > span,.tutorial-score small { color: var(--muted); font-size: 7px; }.tutorial-score strong { margin: 5px 0 3px; font: 700 25px Space Grotesk; }
.tutorial-hands-card { display: grid; grid-template-columns: 210px minmax(330px,1fr) 155px; align-items: center; min-height: 150px; padding: 11px 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow: hidden; }
.tutorial-posture h3 { font-size: 12px; }.tutorial-posture p { margin: 6px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; }
.tutorial-hands { height: 105px; margin: 0; transform: scale(.82); }
.tutorial-check { display: flex; align-items: center; gap: 7px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-size: 7px; line-height: 1.5; }.tutorial-check i { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(245,201,106,.08); }.tutorial-check.good i { background: var(--mint); box-shadow: 0 0 0 4px rgba(98,219,181,.08),0 0 12px rgba(98,219,181,.35); }
.theory-card { overflow: hidden; border: 1px solid color-mix(in srgb,var(--mint) 24%,var(--line)); border-radius: 14px; background: color-mix(in srgb,var(--panel-2) 88%,var(--mint) 12%); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.theory-card summary { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) 22px; gap: 8px; align-items: center; padding: 10px 12px; list-style: none; cursor: pointer; }
.theory-card summary::-webkit-details-marker { display: none; }
.theory-card summary::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid color-mix(in srgb,var(--mint) 35%,var(--line)); border-radius: 7px; color: var(--mint); font: 800 14px/1 Space Grotesk; }
.theory-card[open] summary::after { content: "−"; }
.theory-card summary span,.theory-card > div span { color: var(--mint); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.theory-card summary strong { overflow: hidden; color: var(--text); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.theory-card > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 9px; border-top: 1px solid var(--line); }
.theory-card > div > div { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb,var(--panel) 88%,transparent); }
.theory-card > div span { display: block; margin-bottom: 5px; }
.theory-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.theory-card ul { display: grid; gap: 4px; margin: 0; padding-left: 14px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.theory-card li::marker { color: var(--mint); }
.theory-card .theory-principle { grid-column: 1 / -1; border-color: color-mix(in srgb,var(--mint) 30%,var(--line)); background: color-mix(in srgb,var(--mint) 7%,var(--panel)); }
.theory-card .theory-principle strong { color: var(--text); font-size: 10px; line-height: 1.5; }
.theory-card .theory-avoid { border-color: color-mix(in srgb,var(--danger) 25%,var(--line)); }
.theory-card .theory-avoid span { color: var(--danger); }
.theory-card .theory-extra { grid-column: 1 / -1; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--gold) 35%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--gold) 7%,var(--panel)); color: var(--text); font-weight: 700; }
.lesson-theory-card { margin-top: 7px; }
.smart-coach-strip { --coach-color: var(--mint); display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 11px; align-items: center; margin-bottom: 10px; padding: 8px 11px; border: 1px solid color-mix(in srgb,var(--coach-color) 32%,var(--line)); border-radius: 13px; background: linear-gradient(90deg,color-mix(in srgb,var(--coach-color) 8%,var(--panel)),var(--panel)); box-shadow: inset 0 0 25px color-mix(in srgb,var(--coach-color) 3%,transparent); }
.smart-coach-strip[data-state="precision"] { --coach-color: var(--danger); }.smart-coach-strip[data-state="repair"] { --coach-color: var(--coral); }.smart-coach-strip[data-state="rhythm"] { --coach-color: var(--gold); }.smart-coach-strip[data-state="pace"] { --coach-color: var(--lavender); }
.smart-coach-pulse { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb,var(--coach-color) 55%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--coach-color) 11%,transparent); color: var(--coach-color); font: 800 9px Space Grotesk; box-shadow: 0 0 17px color-mix(in srgb,var(--coach-color) 15%,transparent); }.smart-coach-pulse i { position: absolute; inset: -4px; border: 1px solid color-mix(in srgb,var(--coach-color) 25%,transparent); border-radius: 15px; animation: smart-pulse 1.4s ease-out infinite; }.smart-coach-pulse span { position: relative; }
@keyframes smart-pulse { from { opacity: .8; transform: scale(.82); } to { opacity: 0; transform: scale(1.18); } }
.smart-coach-copy { display: grid; gap: 2px; min-width: 0; }.smart-coach-copy > span,.smart-coach-goal span { color: var(--coach-color); font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }.smart-coach-copy strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.smart-coach-copy p { margin: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.smart-coach-goal { display: grid; gap: 2px; min-width: 74px; padding-left: 11px; border-left: 1px solid var(--line); text-align: right; }.smart-coach-goal strong { color: var(--coach-color); font: 700 18px Space Grotesk; }

.trainer-heading { align-items: center; }
.trainer-hero { --trainer-color: var(--mint); display: grid; grid-template-columns: 125px minmax(0,1fr) 230px; gap: 24px; align-items: center; padding: 22px; border: 1px solid color-mix(in srgb,var(--trainer-color) 30%,var(--line)); border-radius: 21px; background: radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--trainer-color) 13%,transparent),transparent 28%),linear-gradient(135deg,color-mix(in srgb,var(--lavender) 7%,var(--panel)),var(--panel)); }
.trainer-hero[data-stage="precision"] { --trainer-color: var(--danger); }.trainer-hero[data-stage="repair"] { --trainer-color: var(--coral); }.trainer-hero[data-stage="rhythm"] { --trainer-color: var(--gold); }.trainer-hero[data-stage="pace"] { --trainer-color: var(--lavender); }
.trainer-readiness { --readiness: 0deg; position: relative; display: grid; place-items: center; align-content: center; width: 106px; height: 106px; margin: auto; border-radius: 50%; background: conic-gradient(var(--trainer-color) var(--readiness),color-mix(in srgb,var(--text) 8%,transparent) 0); box-shadow: 0 0 28px color-mix(in srgb,var(--trainer-color) 13%,transparent); }.trainer-readiness::before { content: ""; position: absolute; inset: 7px; border: 1px solid var(--line); border-radius: inherit; background: var(--panel); }.trainer-readiness > * { position: relative; }.trainer-readiness span,.trainer-readiness small { color: var(--muted); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }.trainer-readiness strong { color: var(--trainer-color); font: 700 31px Space Grotesk; }
.trainer-diagnosis { min-width: 0; }.trainer-status { color: var(--trainer-color); font-size: 9px; font-weight: 800; letter-spacing: .16em; }.trainer-diagnosis h2 { margin: 7px 0 5px; font-size: 27px; }.trainer-diagnosis p { max-width: 700px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.trainer-focus { display: flex; align-items: center; gap: 10px; margin-top: 12px; }.trainer-focus > span { color: var(--muted); font-size: 9px; }.trainer-focus > div { display: flex; gap: 5px; }.trainer-focus kbd { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid color-mix(in srgb,var(--trainer-color) 42%,var(--line)); border-radius: 7px; background: color-mix(in srgb,var(--trainer-color) 9%,var(--panel)); color: var(--trainer-color); font-size: 11px; font-weight: 800; }
.trainer-action { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.022); }.trainer-action > span { color: var(--muted); font-size: 9px; }.trainer-action > strong { color: var(--trainer-color); font: 700 14px Space Grotesk; }.trainer-action small { color: var(--muted); font-size: 9px; }.trainer-action b { color: var(--text); }.trainer-action button { margin-top: 5px; padding: 8px; font-size: 9px; }
.trainer-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: 12px; margin-top: 12px; }.trainer-card { min-width: 0; padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }.trainer-card h3 { margin: 4px 0 0; font-size: 14px; }.trainer-card .card-title > small { color: var(--muted); font-size: 7px; }
.trainer-plan { display: grid; gap: 7px; margin-top: 13px; }.trainer-plan button { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; align-items: center; width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); color: inherit; cursor: pointer; text-align: left; transition: .18s; }.trainer-plan button:hover { border-color: color-mix(in srgb,var(--mint) 40%,var(--line)); background: color-mix(in srgb,var(--mint) 5%,transparent); transform: translateX(2px); }.trainer-plan b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: color-mix(in srgb,var(--mint) 11%,transparent); color: var(--mint); font: 700 9px Space Grotesk; }.trainer-plan span { display: grid; gap: 2px; min-width: 0; }.trainer-plan strong { font-size: 10px; }.trainer-plan small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.trainer-plan em { color: var(--mint); font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.trainer-signals { display: grid; gap: 7px; margin-top: 13px; }.trainer-signals div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 10px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }.trainer-signals span,.trainer-signals small { color: var(--muted); font-size: 8px; }.trainer-signals small { grid-column: 1 / -1; }.trainer-signals strong { font: 700 14px Space Grotesk; }
.trainer-key-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 13px; }.trainer-key-grid > div { position: relative; display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 8px; align-items: center; padding: 9px; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }.trainer-key-grid kbd { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid color-mix(in srgb,var(--coral) 35%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--coral) 8%,transparent); color: var(--coral); font-size: 14px; font-weight: 800; }.trainer-key-grid span { display: grid; gap: 2px; }.trainer-key-grid strong { font: 700 12px Space Grotesk; }.trainer-key-grid small { color: var(--muted); font-size: 8px; }.trainer-key-grid i { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg,var(--mint) var(--mastery),var(--line) 0); }
.trainer-advice-card p { margin: 9px 0 11px; color: var(--muted); font-size: 10px; line-height: 1.65; }.trainer-advice-card ul { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; }.trainer-advice-card li { position: relative; padding-left: 16px; color: var(--text); font-size: 9px; line-height: 1.5; }.trainer-advice-card li::before { content: ""; position: absolute; left: 0; top: .45em; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px color-mix(in srgb,var(--mint) 50%,transparent); }.trainer-advice-card button { width: 100%; font-size: 9px; }
.private-badge { padding: 8px 11px; border: 1px solid color-mix(in srgb,var(--mint) 28%,var(--line)); border-radius: 999px; background: color-mix(in srgb,var(--mint) 6%,transparent); color: var(--mint); font-size: 8px; font-weight: 800; white-space: nowrap; }.custom-training-layout { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.65fr); gap: 14px; }.custom-editor-card,.custom-info-card { border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }.custom-editor-card { display: grid; grid-template-rows: auto minmax(300px,1fr) auto; min-height: min(670px,calc(100vh - 205px)); padding: 20px; box-shadow: var(--shadow); }.custom-editor-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 14px; }.custom-editor-head h3,.custom-info-card h3 { margin-top: 4px; font-size: 16px; }.custom-editor-card textarea { width: 100%; min-height: 300px; resize: vertical; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: color-mix(in srgb,var(--panel-2) 68%,var(--panel)); color: var(--text); font: 600 17px/1.75 Space Grotesk,monospace; caret-color: var(--mint); }.custom-editor-card textarea::placeholder { color: color-mix(in srgb,var(--muted) 70%,transparent); }.custom-editor-card textarea:focus { border-color: color-mix(in srgb,var(--mint) 55%,var(--line)); box-shadow: 0 0 0 4px color-mix(in srgb,var(--mint) 9%,transparent); outline: 0; }.custom-editor-footer { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding-top: 14px; }.custom-text-stats { display: flex; flex-wrap: wrap; gap: 7px; }.custom-text-stats span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 8px; }.custom-text-stats strong { color: var(--text); }.custom-side { display: grid; gap: 12px; align-content: start; }.custom-info-card { padding: 17px; }.custom-info-card ul { display: grid; gap: 9px; margin: 14px 0 0; padding: 0; list-style: none; }.custom-info-card li { position: relative; padding-left: 16px; color: var(--muted); font-size: 9px; line-height: 1.5; }.custom-info-card li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 800; }.custom-samples { display: grid; gap: 6px; margin-top: 13px; }.custom-samples button { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.02); color: var(--text); cursor: pointer; font-size: 9px; font-weight: 700; text-align: left; transition: .18s; }.custom-samples button:hover { border-color: color-mix(in srgb,var(--mint) 40%,var(--line)); background: color-mix(in srgb,var(--mint) 6%,transparent); transform: translateX(2px); }.pwa-card { background: radial-gradient(circle at 90% 5%,color-mix(in srgb,var(--lavender) 15%,transparent),transparent 40%),var(--panel); }.pwa-card p { margin: 9px 0 13px; color: var(--muted); font-size: 9px; line-height: 1.6; }.pwa-card button { width: 100%; }.custom-mode .lesson-track { display: none; }
.challenge-heading { align-items: center; }
.challenge-reset-copy,.challenge-period { padding: 7px 10px; border: 1px solid color-mix(in srgb,var(--gold) 30%,var(--line)); border-radius: 999px; background: color-mix(in srgb,var(--gold) 6%,transparent); color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
.challenge-hero { position: relative; display: grid; grid-template-columns: 135px minmax(0,1fr) 260px; gap: 24px; align-items: center; min-height: 160px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--lavender) 35%,var(--line)); border-radius: 23px; background: radial-gradient(circle at 8% 50%,color-mix(in srgb,var(--lavender) 22%,transparent),transparent 24%),radial-gradient(circle at 90% 20%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 30%),var(--panel); box-shadow: var(--shadow); }
.challenge-hero::after { content: ""; position: absolute; right: 18%; bottom: -55px; width: 150px; height: 150px; border: 1px solid color-mix(in srgb,var(--gold) 13%,transparent); border-radius: 40px; transform: rotate(28deg); }
.challenge-level-orb { position: relative; z-index: 1; display: grid; place-items: center; align-content: center; width: 115px; height: 115px; border: 1px solid color-mix(in srgb,var(--gold) 50%,var(--line)); border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--gold) 18%,var(--panel)),var(--panel) 68%); box-shadow: 0 0 42px color-mix(in srgb,var(--gold) 16%,transparent),inset 0 0 25px color-mix(in srgb,var(--gold) 6%,transparent); }
.challenge-level-orb span,.challenge-level-orb small { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .12em; }.challenge-level-orb strong { font: 700 44px/1 Space Grotesk; }.challenge-level-orb small { margin-top: 5px; color: var(--muted); letter-spacing: 0; }
.challenge-hero-copy { position: relative; z-index: 1; min-width: 0; }.challenge-hero-copy h2 { margin: 4px 0 7px; font-size: 28px; }.challenge-hero-copy p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.challenge-level-track { height: 6px; margin-top: 15px; overflow: hidden; border-radius: 7px; background: color-mix(in srgb,var(--text) 8%,transparent); }.challenge-level-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--lavender),var(--gold)); box-shadow: 0 0 12px color-mix(in srgb,var(--gold) 45%,transparent); transition: width .35s ease; }
.challenge-hero-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.challenge-hero-stats div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--panel-2) 62%,transparent); }.challenge-hero-stats span,.challenge-hero-stats small { color: var(--muted); font-size: 8px; }.challenge-hero-stats strong { font: 700 18px Space Grotesk; }
.challenge-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 13px; }.challenge-panel { padding: 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }.challenge-panel h3 { margin-top: 4px; font-size: 15px; }.challenge-period { color: var(--mint); border-color: color-mix(in srgb,var(--mint) 28%,var(--line)); background: color-mix(in srgb,var(--mint) 5%,transparent); }.weekly-challenge-panel .challenge-period { color: var(--lavender); border-color: color-mix(in srgb,var(--lavender) 30%,var(--line)); background: color-mix(in srgb,var(--lavender) 6%,transparent); }
.challenge-list { display: grid; gap: 8px; margin-top: 14px; }.challenge-row { display: grid; grid-template-columns: 31px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb,var(--panel-2) 32%,transparent); }.challenge-row.complete { border-color: color-mix(in srgb,var(--mint) 30%,var(--line)); background: color-mix(in srgb,var(--mint) 5%,var(--panel)); }
.challenge-check { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; color: var(--mint); background: var(--panel-2); font-size: 13px; font-weight: 800; }.challenge-row.complete .challenge-check { border-color: var(--mint); background: color-mix(in srgb,var(--mint) 14%,var(--panel-2)); box-shadow: 0 0 15px color-mix(in srgb,var(--mint) 15%,transparent); }
.challenge-row-copy { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 8px; min-width: 0; }.challenge-row-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.challenge-row-copy small { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.challenge-row-copy em { color: var(--muted); font-size: 7px; font-style: normal; }.challenge-progress { align-self: center; height: 3px; overflow: hidden; border-radius: 5px; background: var(--line); }.challenge-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--gold)); }
.challenge-claim { padding: 7px 9px; border: 1px solid color-mix(in srgb,var(--gold) 40%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--gold) 12%,var(--panel)); color: var(--gold); cursor: pointer; font-size: 8px; font-weight: 800; white-space: nowrap; animation: reward-ready 1s ease-in-out infinite alternate; }.challenge-claim:hover { background: var(--gold); color: #211a10; transform: translateY(-1px); }.challenge-reward,.challenge-claimed { color: var(--gold); font-size: 8px; font-weight: 800; white-space: nowrap; }.challenge-claimed { color: var(--mint); }
.badge-section { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }.badge-section-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; margin-bottom: 13px; }.badge-section-head h2 { margin-top: 4px; font-size: 24px; }.badge-section-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }.badge-section-head > span { color: var(--gold); font-size: 9px; font-weight: 800; }
.badge-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.achievement-badge { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 11px; min-height: 150px; padding: 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: color-mix(in srgb,var(--panel) 95%,var(--muted)); opacity: .65; }.achievement-badge.unlocked { border-color: color-mix(in srgb,var(--gold) 38%,var(--line)); background: radial-gradient(circle at 8% 20%,color-mix(in srgb,var(--gold) 13%,transparent),transparent 30%),var(--panel); box-shadow: inset 0 0 22px color-mix(in srgb,var(--gold) 4%,transparent); opacity: 1; }
.badge-medal { position: relative; display: grid; place-items: center; align-self: start; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); color: var(--muted); font: 800 14px Space Grotesk; transform: rotate(-4deg); }.badge-medal i { position: absolute; right: 5px; bottom: 5px; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }.unlocked .badge-medal { border-color: color-mix(in srgb,var(--gold) 58%,var(--line)); background: linear-gradient(145deg,color-mix(in srgb,var(--gold) 24%,var(--panel-2)),var(--panel-2)); color: var(--gold); box-shadow: 0 0 22px color-mix(in srgb,var(--gold) 15%,transparent); }.unlocked .badge-medal i { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.badge-copy { min-width: 0; }.badge-copy > span { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .11em; }.unlocked .badge-copy > span { color: var(--gold); }.badge-copy h3 { margin: 5px 0 4px; font-size: 12px; }.badge-copy p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.badge-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px solid var(--line); }.badge-footer > span { color: var(--muted); font-size: 8px; }.badge-footer .challenge-claim { padding: 6px 8px; }.badge-footer .challenge-reward,.badge-footer .challenge-claimed { font-size: 7px; }
@keyframes reward-ready { to { box-shadow: 0 0 15px color-mix(in srgb,var(--gold) 25%,transparent); } }
.tech-lab { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }.tech-lab-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; margin-bottom: 13px; }.tech-lab-heading h2 { margin: 5px 0 3px; font-size: 24px; }.tech-lab-heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }.tech-sample-count { padding: 7px 10px; border: 1px solid color-mix(in srgb,var(--mint) 32%,var(--line)); border-radius: 99px; background: color-mix(in srgb,var(--mint) 6%,var(--panel)); color: var(--mint); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.tech-lab-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.tech-lab-card { min-width: 0; padding: 17px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,var(--mint)),var(--panel)); }.tech-lab-title { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }.tech-lab-title h3 { margin: 4px 0 0; font-size: 14px; }.tech-lab-title > strong { color: var(--mint); font: 700 23px Space Grotesk; white-space: nowrap; }.tech-lab-title > strong small { color: var(--muted); font-size: 8px; }.tech-lab-title > small { color: var(--muted); font-size: 8px; }.tech-lab-title > small b { color: var(--coral); }.tech-lab-card > p { margin: 7px 0 0; color: var(--muted); font-size: 9px; }
.lab-slow-keys { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin-top: 13px; }.lab-slow-keys > div { display: flex; gap: 7px; align-items: center; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }.lab-slow-keys kbd { display: grid; flex: 0 0 30px; place-items: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb,var(--gold) 45%,var(--line)); border-radius: 8px; background: color-mix(in srgb,var(--gold) 9%,transparent); color: var(--gold); font-size: 12px; font-weight: 800; }.lab-slow-keys span { display: grid; gap: 1px; min-width: 0; }.lab-slow-keys strong { font: 700 10px Space Grotesk; }.lab-slow-keys small { overflow: hidden; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }.lab-empty { grid-column: 1 / -1; margin: 0; padding: 15px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 9px; text-align: center; }
.lab-rhythm-status { display: grid; gap: 3px; margin-top: 13px; }.lab-rhythm-status b { color: var(--gold); font-size: 10px; }.lab-rhythm-status span { color: var(--muted); font-size: 8px; }.lab-rhythm-bars { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin-top: 12px; padding: 10px 9px 0; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(180deg,color-mix(in srgb,var(--gold) 4%,transparent),transparent); }.lab-rhythm-bars > i { flex: 1; min-width: 2px; max-width: 14px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--gold) 34%,transparent)); }.lab-placeholder-bars { display: flex; align-items: flex-end; gap: 4px; width: 100%; height: 100%; opacity: .28; }.lab-placeholder-bars i { flex: 1; height: 35%; border-radius: 3px 3px 0 0; background: var(--muted); }.lab-placeholder-bars i:nth-child(2n) { height: 55%; }.lab-placeholder-bars i:nth-child(3n) { height: 75%; }
.confusion-lab-card,.finger-lab-card { grid-column: 1 / -1; }.lab-confusions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin-top: 13px; }.lab-confusions > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 8px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.018); }.lab-confusions div > span { display: flex; align-items: center; gap: 5px; }.lab-confusions kbd { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid color-mix(in srgb,var(--coral) 36%,var(--line)); border-radius: 6px; background: color-mix(in srgb,var(--coral) 7%,transparent); color: var(--coral); font-size: 10px; font-weight: 800; }.lab-confusions b { color: var(--muted); }.lab-confusions strong { align-self: center; color: var(--danger); font: 700 13px Space Grotesk; }.lab-confusions small { grid-column: 1 / -1; color: var(--muted); font-size: 7px; }
.lab-hand-balance { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; margin-top: 13px; }.lab-hand-balance > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 2px 9px; padding: 9px 11px; border: 1px solid color-mix(in srgb,var(--lavender) 28%,var(--line)); border-radius: 10px; background: color-mix(in srgb,var(--lavender) 5%,transparent); }.lab-hand-balance span { color: var(--muted); font-size: 8px; }.lab-hand-balance strong { color: var(--lavender); font: 700 14px Space Grotesk; }.lab-hand-balance small { grid-column: 1 / -1; color: var(--muted); font-size: 7px; }.lab-finger-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; margin-top: 8px; }.lab-finger-grid > div { display: grid; gap: 3px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); }.lab-finger-grid > div[data-status="weak"] { border-color: color-mix(in srgb,var(--danger) 40%,var(--line)); background: color-mix(in srgb,var(--danger) 5%,transparent); }.lab-finger-grid > div[data-status="stable"] { border-color: color-mix(in srgb,var(--mint) 35%,var(--line)); }.lab-finger-grid span { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .12em; }.lab-finger-grid strong { overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.lab-finger-grid b { margin-top: 3px; color: var(--mint); font: 700 15px Space Grotesk; }.lab-finger-grid small { overflow: hidden; color: var(--muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.technique-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }.technique-strip > div { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.018); color: var(--muted); font-size: 6px; line-height: 1.4; }.technique-strip i { display: grid; place-items: center; width: 19px; height: 19px; flex: 0 0 19px; border-radius: 6px; background: rgba(98,219,181,.08); color: var(--mint); font-size: 7px; font-style: normal; font-weight: 800; }.technique-strip strong { color: var(--text); }
.tutorial-exercise { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 17px; background: linear-gradient(145deg,#181c2e,#111522); }
.tutorial-target { display: grid; place-content: center; justify-items: center; gap: 4px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }.tutorial-target span { color: var(--muted); font-size: 7px; }.tutorial-target kbd { display: grid; place-items: center; min-width: 38px; height: 38px; padding: 0 8px; border: 1px solid rgba(245,201,106,.35); border-radius: 10px; background: rgba(245,201,106,.08); color: var(--gold); font-size: 17px; box-shadow: 0 0 20px rgba(245,201,106,.08); }.tutorial-target strong { font-size: 7px; }
.tutorial-sequence { min-height: 72px; padding: 12px 14px; border-radius: 13px; background: rgba(255,255,255,.018); color: #596176; font: 600 20px/1.8 Space Grotesk; letter-spacing: .04em; cursor: text; }.tutorial-sequence .char { position: relative; border-radius: 4px; }.tutorial-sequence .char.correct { color: var(--text); }.tutorial-sequence .char.wrong { color: var(--danger); background: rgba(255,77,96,.12); }.tutorial-sequence .char.current { color: var(--gold); background: rgba(245,201,106,.1); }.tutorial-sequence .char.current::after { content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; border-radius:2px; background:var(--gold); }
.tutorial-feedback { grid-column: 2; margin-top: -8px; color: var(--muted); font-size: 7px; }
.tutorial-keyboard-wrap { margin-top: 0; padding: 10px 14px 12px; }.tutorial-keyboard-wrap .keyboard-top { margin-bottom: 7px; }.tutorial-keyboard-wrap .keyboard { --key-height: 29px; gap: 4px; max-width: 780px; }.tutorial-keyboard-wrap .key-row { gap: 4px; }.tutorial-keyboard-wrap .key { min-width: 34px; font-size: 8px; }.tutorial-keyboard-wrap .key-space { width: 255px; }
.tutorial-complete { position: fixed; z-index: 50; right: 28px; bottom: 25px; display: flex; align-items: center; gap: 20px; max-width: 480px; padding: 15px 16px; border: 1px solid rgba(98,219,181,.3); border-radius: 16px; background: rgba(20,24,41,.94); box-shadow: var(--shadow),0 0 30px rgba(98,219,181,.08); backdrop-filter: blur(12px); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .22s; }.tutorial-complete.show { opacity: 1; visibility: visible; transform: none; }.tutorial-complete h3 { margin-top: 4px; font-size: 14px; }.tutorial-complete p { margin: 4px 0 0; color: var(--muted); font-size: 8px; }

.game-heading { align-items: center; }
.game-hud { display: flex; gap: 8px; }
.game-hud span { display: grid; gap: 3px; min-width: 74px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.game-hud strong { color: var(--text); font: 700 17px Space Grotesk; }
.game-library { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 8px; margin: -8px 0 12px; padding: 3px 2px 8px; }
.game-mode-card { position: relative; display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 8px; align-items: center; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); color: var(--muted); cursor: pointer; text-align: left; transition: .2s ease; }
.game-mode-card:hover { color: var(--text); border-color: color-mix(in srgb,var(--mode-color) 40%,var(--line)); transform: translateY(-2px); }
.game-mode-card.active { color: var(--text); border-color: color-mix(in srgb,var(--mode-color) 65%,var(--line)); background: color-mix(in srgb,var(--mode-color) 9%,var(--panel)); box-shadow: 0 8px 25px color-mix(in srgb,var(--mode-color) 10%,transparent); }
.game-mode-card > b { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid color-mix(in srgb,var(--mode-color) 40%,var(--line)); border-radius: 9px; background: color-mix(in srgb,var(--mode-color) 12%,transparent); color: var(--mode-color); font: 700 9px Space Grotesk; }
.game-mode-card span { display: grid; gap: 2px; min-width: 0; }.game-mode-card strong { overflow: hidden; color: inherit; font: 700 8px Space Grotesk; text-overflow: ellipsis; white-space: nowrap; }.game-mode-card small { overflow: hidden; color: var(--muted); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.game-stage { position: relative; height: min(55vh, 500px); min-height: 390px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: radial-gradient(circle at 50% 0, #262c4b, #111522 70%); box-shadow: var(--shadow); }
.game-grid { position: absolute; inset: 0; opacity: .15; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 50px 50px; mask-image: linear-gradient(to bottom, black, transparent); }
.cloud { position: absolute; width: 220px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.025); filter: blur(20px); }.cloud-one{left:8%;top:15%}.cloud-two{right:10%;top:30%}
.game-dashboard { position: absolute; z-index: 2; left: 14px; top: 14px; display: flex; align-items: center; gap: 10px; pointer-events: none; }
.speedometer { display: flex; align-items: center; gap: 7px; min-width: 168px; padding: 8px 10px 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(15,19,32,.82); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.speedometer-dial { position: relative; width: 69px; height: 39px; overflow: hidden; flex: 0 0 69px; }
.speedometer-dial::before { content: ""; position: absolute; inset: 2px 2px -31px; border: 6px solid rgba(255,255,255,.08); border-top-color: var(--mint); border-left-color: var(--gold); border-right-color: var(--coral); border-radius: 50%; }
.speedometer-dial::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 0; height: 24px; border-radius: 50% 50% 0 0; background: rgba(255,255,255,.025); }
.speedometer-needle { --speed-angle: -82deg; position: absolute; z-index: 3; left: 34px; bottom: 4px; width: 27px; height: 2px; border-radius: 3px; background: var(--text); box-shadow: 0 0 8px rgba(255,255,255,.5); transform: rotate(var(--speed-angle)); transform-origin: 0 50%; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.speedometer-dial b { position: absolute; z-index: 4; left: 30px; bottom: 0; width: 8px; height: 8px; border: 2px solid var(--text); border-radius: 50%; background: #171b2c; }
.speedometer-dial span { position: absolute; z-index: 4; bottom: 0; color: var(--muted); font-size: 5px; font-weight: 800; }.speed-zero{left:0}.speed-mid{left:33px}.speed-max{right:0}
.speedometer-copy { display: grid; gap: 1px; }.speedometer-copy span { color: var(--muted); font-size: 6px; font-weight: 800; letter-spacing: .15em; }.speedometer-copy strong { font: 700 18px Space Grotesk; }.speedometer-copy small { color: var(--mint); font-size: 6px; }
.level-meter { display: grid; gap: 5px; min-width: 150px; padding: 9px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(15,19,32,.82); backdrop-filter: blur(8px); }
.level-meter > div:first-child { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.level-meter span { color: var(--muted); font-size: 7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.level-meter span strong { color: var(--text); font-size: 10px; }.level-meter small { color: var(--muted); font-size: 6px; }
.level-progress { height: 3px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }.level-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--gold)); transition: width .25s; }
.danger-line { position: absolute; left: 0; right: 0; bottom: 67px; height: 2px; background: var(--danger); box-shadow: 0 0 15px rgba(255,77,96,.5); }
.danger-line span { position: absolute; top: -19px; right: 15px; color: var(--danger); font-size: 7px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.fall-key { --fall-color: var(--coral); position: absolute; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid color-mix(in srgb, var(--fall-color) 72%, white 8%); border-bottom-width: 5px; border-radius: 17px; background: radial-gradient(circle at 35% 25%, color-mix(in srgb, var(--fall-color) 28%, #242a43), color-mix(in srgb, var(--fall-color) 10%, #121625)); color: var(--fall-color); font: 700 23px Space Grotesk; box-shadow: 0 9px 28px color-mix(in srgb, var(--fall-color) 25%, transparent), inset 0 1px rgba(255,255,255,.14), inset 0 -5px rgba(0,0,0,.13); text-shadow: 0 0 12px color-mix(in srgb, var(--fall-color) 60%, transparent); will-change: transform; }
.fall-key::after { content: ""; position: absolute; inset: -7px; border: 1px solid transparent; border-radius: 21px; pointer-events: none; }
.fall-key.urgent { z-index: 2; filter: brightness(1.2); animation: urgent-glow .7s ease-in-out infinite alternate; }
.fall-key.urgent::after { border-color: color-mix(in srgb, var(--fall-color) 58%, transparent); animation: target-ring .7s ease-out infinite; }
.fall-key.hit { animation: pop .25s ease forwards; }.fall-key.missed { animation: miss .28s ease forwards; }
.fall-key.balloon-key { width: 78px; height: 88px; overflow: visible; border: 4px solid color-mix(in srgb,var(--fall-color) 62%,white 38%); border-bottom-width: 6px; border-radius: 52% 52% 48% 48% / 46% 46% 55% 55%; background: radial-gradient(circle at 28% 20%,rgba(255,255,255,.92) 0 5%,rgba(255,255,255,.34) 6% 15%,transparent 16%),radial-gradient(circle at 72% 78%,color-mix(in srgb,var(--fall-color) 68%,#6d45a8 32%),transparent 58%),linear-gradient(145deg,color-mix(in srgb,var(--fall-color) 72%,white 28%),color-mix(in srgb,var(--fall-color) 88%,#754aa5 12%)); color: #172033; font-size: 31px; font-weight: 800; letter-spacing: -.03em; box-shadow: 0 13px 0 -8px color-mix(in srgb,var(--fall-color) 70%,#624078),0 18px 36px color-mix(in srgb,var(--fall-color) 36%,transparent),inset 8px 8px 15px rgba(255,255,255,.24),inset -9px -12px 20px rgba(54,34,82,.18); text-shadow: 0 2px 0 rgba(255,255,255,.88),0 0 5px rgba(255,255,255,.7); }
.fall-key.balloon-key::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -13px; width: 16px; height: 14px; border-radius: 3px 3px 7px 7px; background: linear-gradient(135deg,color-mix(in srgb,var(--fall-color) 75%,white 25%),color-mix(in srgb,var(--fall-color) 78%,#6d45a8 22%)); clip-path: polygon(50% 0,100% 100%,50% 78%,0 100%); transform: translateX(-50%); filter: drop-shadow(0 3px 2px rgba(38,28,58,.16)); }
.fall-key.balloon-key::after { inset: -10px; border-width: 2px; border-radius: 52%; }
.balloon-letter { position: relative; z-index: 3; display: grid; place-items: center; width: 49px; height: 49px; border: 2px solid rgba(255,255,255,.58); border-radius: 50%; background: rgba(255,255,255,.22); box-shadow: 0 5px 14px rgba(48,31,70,.12),inset 0 0 12px rgba(255,255,255,.2); }
.balloon-shine { position: absolute; z-index: 2; left: 17px; top: 14px; width: 13px; height: 25px; border-radius: 50%; background: rgba(255,255,255,.52); filter: blur(.4px); transform: rotate(28deg); pointer-events: none; }
.balloon-string { position: absolute; z-index: -2; left: calc(50% - 8px); top: calc(100% + 8px); width: 17px; height: 35px; border-right: 2px solid color-mix(in srgb,var(--fall-color) 64%,#6f5a83); border-radius: 0 50% 50% 0; opacity: .76; transform: rotate(7deg); transform-origin: top; pointer-events: none; }
.balloon-key.urgent .balloon-letter { border-color: #fff; background: rgba(255,255,255,.4); box-shadow: 0 0 0 4px rgba(255,255,255,.24),0 0 20px rgba(255,255,255,.7),inset 0 0 12px rgba(255,255,255,.32); }
.balloon-key.urgent .balloon-string { animation: balloon-string-wave .7s ease-in-out infinite alternate; }
@keyframes pop { to { opacity: 0; transform: scale(1.6) rotate(15deg); } } @keyframes miss { to { opacity: 0; transform: scale(.7); filter: blur(4px); } }
@keyframes urgent-glow { to { filter: brightness(1.38); box-shadow: 0 10px 42px color-mix(in srgb, var(--fall-color) 55%, transparent), inset 0 1px rgba(255,255,255,.2), inset 0 -5px rgba(0,0,0,.12); } }
@keyframes target-ring { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.35); } }
@keyframes balloon-string-wave { to { transform: rotate(-8deg); } }
.mistake-bubble { --bubble-left: 50%; position: absolute; z-index: 3; left: var(--bubble-left); bottom: 82px; display: grid; place-items: center; width: 58px; height: 58px; border: 2px solid rgba(100,181,246,.75); border-radius: 50%; background: rgba(100,181,246,.12); color: var(--blue); font: 700 22px Space Grotesk; box-shadow: 0 0 35px rgba(100,181,246,.35), inset 0 0 20px rgba(100,181,246,.12); pointer-events: none; animation: mistake-balloon .58s ease-out forwards; }
@keyframes mistake-balloon { 0% { opacity: 0; transform: translate(-50%,20px) scale(.45); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50px) scale(2.25); filter: blur(2px); } }
.speedometer.braking { animation: brake-pulse .38s ease; }.speedometer.braking .speedometer-copy small { color: var(--blue); }
@keyframes brake-pulse { 50% { border-color: rgba(100,181,246,.65); box-shadow: 0 0 25px rgba(100,181,246,.2); } }
.level-up-banner { position: absolute; z-index: 4; left: 50%; top: 48%; display: grid; justify-items: center; gap: 3px; min-width: 145px; padding: 14px 24px; border: 1px solid rgba(245,201,106,.35); border-radius: 17px; background: rgba(18,22,37,.9); box-shadow: 0 15px 45px rgba(0,0,0,.3), 0 0 35px rgba(245,201,106,.12); opacity: 0; pointer-events: none; transform: translate(-50%,-40%) scale(.8); transition: .25s; }.level-up-banner.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }.level-up-banner span { color: var(--gold); font-size: 7px; font-weight: 800; letter-spacing: .2em; }.level-up-banner strong { font: 700 36px Space Grotesk; }.level-up-banner small { color: var(--muted); font-size: 7px; }
.game-overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 20px; text-align: center; background: rgba(12,15,27,.62); backdrop-filter: blur(5px); z-index: 5; }
.game-overlay.hidden { display: none; }
.game-overlay h2 { margin-top: 8px; font-size: 35px; }.game-overlay p { max-width: 350px; margin: 9px 0 20px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.game-kicker { color: var(--gold); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.arcade-challenge { position: absolute; z-index: 2; inset: 74px 35px 42px; display: none; place-content: center; justify-items: center; gap: 10px; text-align: center; }
.game-stage:not([data-mode="rain"]):not([data-mode="balloons"]) .arcade-challenge { display: grid; }
.game-stage:not([data-mode="rain"]):not([data-mode="balloons"]) .danger-line,
.game-stage:not([data-mode="rain"]):not([data-mode="balloons"]) .cloud { display: none; }
.game-stage[data-mode="balloons"] .danger-line { top: 82px; bottom: auto; }.game-stage[data-mode="balloons"] .danger-line span { top: 7px; }
.arcade-kicker { color: var(--mint); font-size: 7px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.arcade-target { max-width: 100%; color: var(--text); font: 700 clamp(25px,5vw,58px)/1.45 Space Grotesk; letter-spacing: .06em; }
.arcade-target .arcade-char { display: inline-grid; place-items: center; min-width: .75em; border-radius: 7px; color: #626b82; transition: .16s; }
.arcade-target .arcade-char.done { color: var(--mint); }.arcade-target .arcade-char.current { color: var(--gold); background: rgba(245,201,106,.09); box-shadow: 0 0 0 1px rgba(245,201,106,.25),0 0 22px rgba(245,201,106,.09); transform: translateY(-3px); }
.arcade-target.memory-hidden .arcade-char { color: var(--lavender); filter: blur(7px); opacity: .48; }
.arcade-target.builder-style .arcade-char { margin: 2px; min-width: 1.05em; padding: .05em .12em; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.arcade-target.accents-style .arcade-char { min-width: 1.1em; color: var(--lavender); text-shadow: 0 0 18px rgba(157,145,255,.28); }
.arcade-target.rhythm-style .arcade-char.current { animation: rhythm-key .7s ease-in-out infinite; }
.arcade-challenge p { max-width: 560px; min-height: 16px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.arcade-track { width: min(520px,80%); height: 6px; margin-top: 7px; overflow: visible; border-radius: 8px; background: rgba(255,255,255,.07); }.arcade-track i { --runner: 0%; position: relative; display: block; width: var(--runner); height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--gold),var(--coral)); transition: width .18s ease; }.arcade-track i::after { content: ""; position: absolute; right: -8px; top: 50%; width: 15px; height: 15px; border: 2px solid var(--text); border-radius: 50%; background: var(--coral); box-shadow: 0 0 15px rgba(255,122,104,.45); transform: translateY(-50%); }
.game-stage[data-mode="memory"] .arcade-challenge::before { content: ""; position: absolute; width: 180px; height: 180px; border-radius: 50%; background: var(--lavender); opacity: .06; filter: blur(35px); }
.game-stage[data-mode="rhythm"] .game-grid { animation: rhythm-grid .7s linear infinite; }
@keyframes rhythm-key { 50% { transform: translateY(-6px) scale(1.12); box-shadow: 0 0 0 5px rgba(245,201,106,.1),0 0 28px rgba(245,201,106,.22); } }
@keyframes rhythm-grid { 50% { opacity: .28; } }
.game-bottom { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: center; gap: 14px; margin-top: 14px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); overflow-x: auto; }
.game-bottom strong { font: 600 11px Space Grotesk; }
.game-hand-guide { display: grid; grid-template-columns: 1fr 108px; align-items: center; gap: 7px; }
.game-hands { position: relative; width: 108px; height: 38px; }
.game-hands .hand { position: absolute; left: 0; top: 0; width: 116px; height: 77px; transform: scale(.44); transform-origin: left top; }
.game-hands .right-hand { right: 0; left: auto; transform: scaleX(-1) scale(.44); transform-origin: right top; margin: 0; }
#game-view .key.expected { animation: expected-key-pulse .62s ease-in-out infinite alternate; }
@keyframes game-key-pulse { to { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 4px color-mix(in srgb,var(--key-color) 14%,transparent), 0 0 28px color-mix(in srgb,var(--key-color) 42%,transparent); } }

.duration-pills { display: flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.duration-pills button { padding: 7px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 800; }
.duration-pills button.active { background: var(--lavender); color: #fff; }
.speed-layout { display: grid; grid-template-columns: minmax(0,1fr) 180px; gap: 14px; }
.speed-main { position: relative; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(145deg, #181c2e, #111522); box-shadow: var(--shadow); overflow: hidden; }
.timer-display { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.timer-display strong { color: var(--gold); font: 700 22px Space Grotesk; }
.typing-text.large { min-height: 335px; max-width: 100%; overflow: hidden; font-size: 28px; overflow-wrap: normal; word-break: normal; }
.speed-actions { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.speed-result-panel { position: absolute; inset: 54px 0 55px; z-index: 3; display: grid; place-content: center; justify-items: center; padding: 25px; background: rgba(17, 21, 34, .92); backdrop-filter: blur(8px); text-align: center; opacity: 0; visibility: hidden; transform: translateY(7px); transition: .22s ease; }
.speed-main.finished .speed-result-panel { opacity: 1; visibility: visible; transform: none; }
.speed-result-panel h3 { margin-top: 7px; font-size: 28px; }
.speed-result-panel p { max-width: 420px; margin: 8px 0 18px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.speed-result-numbers { display: grid; grid-template-columns: repeat(3, 100px); gap: 8px; }
.speed-result-numbers div { display: grid; gap: 4px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.speed-result-numbers strong { font: 700 22px Space Grotesk; }
.speed-result-numbers span { color: var(--muted); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.speed-stats { display: grid; gap: 10px; }
.speed-stats div { display: flex; flex-direction: column; justify-content: center; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.speed-stats span { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.speed-stats strong { margin: 8px 0 4px; font: 700 32px Space Grotesk; }.speed-stats strong span { color: inherit; font-size: inherit; }
.speed-stats small { color: var(--muted); font-size: 8px; }

.progress-hero { display: grid; grid-template-columns: 120px minmax(0,1fr) 190px; align-items: center; gap: 25px; padding: 24px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(135deg, rgba(157,145,255,.1), rgba(255,122,104,.06)); }
.level-orb { display: grid; place-items: center; align-content: center; width: 105px; height: 105px; border: 1px solid rgba(157,145,255,.35); border-radius: 50%; background: radial-gradient(circle, rgba(157,145,255,.18), transparent 65%); box-shadow: 0 0 45px rgba(157,145,255,.12); }
.level-orb span, .level-orb small { color: var(--muted); font-size: 7px; letter-spacing: .14em; }.level-orb strong { font: 700 42px Space Grotesk; }.level-orb small { letter-spacing: 0; }
.progress-hero h2 { font-size: 25px; }.progress-hero p { margin: 8px 0 13px; color: var(--muted); font-size: 10px; }
.xp-bar { height: 5px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; }.xp-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lavender), var(--coral)); }
.best-result { display: grid; justify-items: end; gap: 5px; }.best-result span, .best-result small { color: var(--muted); font-size: 8px; }.best-result strong { font: 700 21px Space Grotesk; }
.report-grid { display: grid; grid-template-columns: 1.5fr .7fr; gap: 14px; margin-top: 14px; }
.report-card { padding: 19px; }.report-card.full { grid-column: 1 / -1; }
.summary-list { display: grid; gap: 14px; margin-top: 18px; }.summary-list div { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--line); }.summary-list span { color: var(--muted); font-size: 9px; }.summary-list strong { font: 700 13px Space Grotesk; }
.chart { display: flex; align-items: end; gap: 8px; height: 155px; margin-top: 20px; padding-top: 10px; border-bottom: 1px solid var(--line); background-image: linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 100% 33.333%; }
.chart-col { display: grid; grid-template-rows: 1fr auto; align-items: end; justify-items: center; gap: 7px; height: 100%; flex: 1; }
.chart-bar { position: relative; width: min(24px, 80%); min-height: 3px; border-radius: 7px 7px 2px 2px; background: linear-gradient(to top, var(--lavender), var(--coral)); opacity: .75; }.chart-bar:hover { opacity: 1; }.chart-bar::before { content: attr(data-value); position: absolute; top: -16px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: 7px; }
.chart-col small { color: var(--muted); font-size: 6px; }
.empty-chart { margin: auto; color: var(--muted); font-size: 9px; align-self: center; }
.mastery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(36px, 1fr)); gap: 6px; margin-top: 16px; }
.mastery-key { display: grid; place-items: center; height: 35px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font: 700 9px Space Grotesk; background: color-mix(in srgb, var(--mint) var(--mastery), var(--panel-2)); }
.profile-settings-card { margin-top: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.profile-settings-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 10px; margin-top: 15px; }
.profile-settings-card label, .profile-modal-fields label { display: grid; gap: 7px; color: var(--muted); font-size: 9px; font-weight: 700; }
.profile-settings-card select, .profile-modal-fields select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); color: var(--text); font: 700 10px Manrope; }
.profile-settings-card p { margin: 13px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.data-version { padding: 5px 7px; border-radius: 7px; background: color-mix(in srgb,var(--mint) 10%,transparent); color: var(--mint); font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.session-history { display: grid; gap: 7px; max-height: 330px; margin-top: 15px; padding-right: 4px; overflow-y: auto; }
.session-row { display: grid; grid-template-columns: minmax(150px,1fr) repeat(3,80px); gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.02); }
.session-row > div { display: grid; gap: 2px; min-width: 0; }.session-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.session-row small, .report-card .card-title > small { color: var(--muted); font-size: 8px; }
.session-metric { display: grid; gap: 2px; text-align: right; }.session-metric b { font: 700 11px Space Grotesk; }.session-metric span { color: var(--muted); font-size: 7px; text-transform: uppercase; }
.profile-modal-backdrop { z-index: 260; }.profile-modal { width: min(560px,100%); max-height: calc(100vh - 28px); padding: 36px; overflow-y: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); }.profile-modal h2 { margin-top: 9px; font-size: 31px; }.profile-modal > p { margin: 10px 0 22px; color: var(--muted); font-size: 11px; line-height: 1.7; }.profile-modal-fields { display: grid; gap: 11px; margin-bottom: 22px; }.profile-modal .primary-button { width: 100%; }

.interface-tour { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; }
.interface-tour.open { visibility: visible; }
.tour-spotlight { position: fixed; border: 2px solid var(--mint); border-radius: 18px; box-shadow: 0 0 0 9999px rgba(3,5,12,.76), 0 0 0 5px rgba(98,219,181,.16), 0 0 35px rgba(98,219,181,.42); pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour-bubble { position: fixed; z-index: 202; width: min(360px,calc(100vw - 24px)); padding: 22px; border: 1px solid color-mix(in srgb,var(--mint) 45%,var(--line)); border-radius: 20px; background: color-mix(in srgb,var(--panel) 94%,#070a12); box-shadow: 0 25px 80px rgba(0,0,0,.5),0 0 35px rgba(98,219,181,.08); pointer-events: auto; }
.tour-bubble-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.tour-bubble-head button { padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 8px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tour-kicker, .technique-kicker { color: var(--mint); font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.tour-bubble h2 { margin-top: 7px; font-size: 25px; letter-spacing: -.035em; }
.tour-bubble p { margin: 10px 0 20px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.tour-actions, .technique-show-actions { display: flex; justify-content: space-between; gap: 9px; }
.tour-actions button, .technique-show-actions button { min-width: 100px; }
.tour-actions button:disabled, .technique-show-actions button:disabled { opacity: .25; pointer-events: none; }
.tour-active { overscroll-behavior: none; }

.technique-show { position: fixed; inset: 0; z-index: 220; display: grid; place-items: center; padding: 24px; background: rgba(3,5,12,.82); backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transition: .2s ease; }
.technique-show.open { opacity: 1; visibility: visible; }
.technique-show-card { position: relative; width: min(1050px,100%); min-height: min(680px,calc(100vh - 48px)); display: grid; grid-template-rows: auto 1fr auto; padding: 34px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--lavender) 36%,var(--line)); border-radius: 28px; background: radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--lavender) 15%,transparent),transparent 38%),var(--panel); box-shadow: 0 32px 100px rgba(0,0,0,.55); }
.technique-show-close { position: absolute; top: 18px; right: 18px; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); color: var(--muted); cursor: pointer; }
.technique-show-progress { display: flex; align-items: center; gap: 12px; padding-right: 50px; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.technique-show-progress > div { width: min(260px,40vw); height: 4px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.07); }
.technique-show-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--mint),var(--lavender)); transition: width .3s ease; }
.technique-slide { display: grid; grid-template-columns: minmax(0,.82fr) minmax(420px,1.18fr); gap: 48px; align-items: center; padding: 35px 0; }
.technique-slide-copy h2 { max-width: 440px; margin-top: 9px; font-size: clamp(32px,4vw,52px); line-height: 1.04; letter-spacing: -.055em; }
.technique-slide-copy > p { max-width: 470px; margin: 15px 0 22px; color: var(--muted); font-size: 11px; line-height: 1.75; }
.technique-slide-copy ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.technique-slide-copy li { position: relative; padding-left: 24px; color: var(--text); font-size: 10px; line-height: 1.55; }
.technique-slide-copy li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border: 2px solid var(--mint); border-radius: 50%; box-shadow: 0 0 9px rgba(98,219,181,.3); }
.technique-slide-visual { min-height: 390px; display: grid; place-items: center; align-content: center; gap: 22px; padding: 30px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); box-shadow: inset 0 0 45px rgba(157,145,255,.035); }
.visual-caption { color: var(--muted); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.demo-hands { display: flex; gap: 70px; align-items: end; }
.demo-hand { display: flex; gap: 5px; align-items: end; padding: 20px 14px 12px; border: 1px solid var(--line); border-radius: 35px 35px 20px 20px; background: rgba(255,255,255,.025); }
.demo-hand i { display: block; width: 16px; height: 56px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.demo-hand i:nth-child(1), .demo-hand i:nth-child(4) { height: 42px; }
.demo-hand i.anchor { border-color: var(--mint); background: color-mix(in srgb,var(--mint) 35%,var(--panel-2)); box-shadow: 0 0 18px rgba(98,219,181,.3); }
.demo-key-row { display: flex; gap: 5px; }
.demo-key-row kbd { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--muted); font: 700 10px Space Grotesk; }
.demo-key-row kbd.anchor { color: var(--text); border-color: var(--mint); box-shadow: 0 0 18px rgba(98,219,181,.2); }
.demo-key-row kbd i { position: absolute; bottom: 5px; width: 7px; height: 2px; border-radius: 3px; background: var(--mint); }
.finger-map { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; width: 100%; }
.finger-map div { display: grid; gap: 5px; min-height: 64px; padding: 11px; border: 1px solid color-mix(in srgb,var(--map-color) 36%,var(--line)); border-radius: 12px; background: color-mix(in srgb,var(--map-color) 8%,transparent); }
.finger-map b { color: var(--map-color); font: 700 10px Space Grotesk; }.finger-map span { color: var(--muted); font-size: 7px; }
.row-reach { display: grid; justify-items: center; gap: 7px; width: 100%; }.row-reach div { display: grid; gap: 8px; width: 90%; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.02); text-align: center; }.row-reach div.home { width: 100%; border-color: var(--mint); background: color-mix(in srgb,var(--mint) 7%,transparent); }.row-reach span { color: var(--muted); font-size: 7px; letter-spacing: .15em; }.row-reach b { font: 700 13px Space Grotesk; letter-spacing: .18em; }.row-reach > i { color: var(--gold); font-size: 8px; font-style: normal; }
.function-keys { display: grid; grid-template-columns: 1fr 1fr 2.4fr 1fr 1fr; gap: 7px; width: 100%; }.function-keys kbd { display: grid; place-items: center; min-height: 62px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--muted); font: 700 8px Space Grotesk; text-align: center; }.function-keys .space { color: var(--text); border-color: var(--mint); }.function-keys small { color: var(--mint); font-size: 7px; }.function-arrows { display: flex; justify-content: space-between; width: 100%; color: var(--muted); font-size: 7px; }
.screen-focus { display: grid; justify-items: center; gap: 24px; width: 100%; }.demo-screen { position: relative; width: 72%; padding: 28px 24px; border: 1px solid var(--mint); border-radius: 16px; background: rgba(98,219,181,.04); box-shadow: 0 0 30px rgba(98,219,181,.08); }.demo-screen i { display: block; width: 85%; height: 5px; margin: 8px auto; border-radius: 6px; background: var(--line); }.demo-screen i:nth-child(2) { width: 65%; background: var(--mint); }.demo-screen b { display: block; margin-top: 20px; color: var(--mint); font: 700 10px Space Grotesk; text-align: center; }.no-look { position: relative; display: grid; place-items: center; width: 80%; height: 100px; overflow: hidden; }.mini-board { width: 90%; height: 60px; border: 1px solid var(--line); border-radius: 12px; background: repeating-linear-gradient(90deg,var(--panel-2) 0 24px,var(--line) 25px 26px); }.no-look span { position: absolute; inset: 0; background: rgba(3,5,12,.76); backdrop-filter: blur(5px); }.no-look strong { position: absolute; color: var(--gold); font: 700 10px Space Grotesk; }
.learning-path { display: grid; gap: 8px; width: 100%; }.learning-path div { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }.learning-path b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb,var(--lavender) 15%,transparent); color: var(--lavender); font: 700 11px Space Grotesk; }.learning-path span { font-size: 9px; font-weight: 700; }
.daily-plan { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; width: 100%; }.daily-plan div { display: grid; justify-items: center; gap: 2px; padding: 20px 5px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }.daily-plan strong { color: var(--mint); font: 700 34px Space Grotesk; }.daily-plan small { color: var(--muted); font-size: 7px; }.daily-plan span { margin-top: 9px; font-size: 8px; font-weight: 800; }
.reward-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; width: 100%; }.reward-orb { display: grid; place-items: center; align-content: center; width: 180px; height: 180px; margin: auto; border: 1px solid var(--lavender); border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--lavender) 20%,transparent),transparent 66%); box-shadow: 0 0 45px rgba(157,145,255,.16); }.reward-orb span { color: var(--lavender); font-size: 24px; }.reward-orb strong { font: 700 42px Space Grotesk; }.reward-orb small { color: var(--muted); font-size: 8px; }.reward-cards { display: grid; gap: 8px; }.reward-cards div { display: flex; justify-content: space-between; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }.reward-cards span { color: var(--muted); font-size: 8px; }.reward-cards strong { font: 700 11px Space Grotesk; }
.technique-show-active { overflow: hidden; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(5,7,13,.72); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: .2s; }
.modal-backdrop.open { opacity: 1; visibility: visible; }
.result-modal { position: relative; width: min(560px, 100%); padding: 44px; border: 1px solid var(--line); border-radius: 26px; background: #171b2d; box-shadow: var(--shadow); text-align: center; transform: translateY(10px); transition: .25s; }.open .result-modal { transform: none; }
.modal-close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; font-weight: 700; }.result-badge { color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .18em; }.result-modal h2 { margin-top: 10px; font-size: 42px; }.result-modal p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }.result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; }.result-grid div { display: grid; gap: 8px; padding: 18px 8px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }.result-grid .result-label { color: var(--muted); font-size: 11px; font-weight: 600; }.result-grid strong { color: var(--text); font: 700 28px Space Grotesk; }.result-grid strong span { color: inherit; font: inherit; }.result-grid strong small { color: var(--muted); font: 700 16px Space Grotesk; }
.reward-share-backdrop { z-index: 280; overflow-y: auto; background: rgba(4,5,12,.82); }
.reward-share-card { position: relative; display: grid; grid-template-columns: minmax(280px,.88fr) minmax(330px,1.12fr); gap: 30px; align-items: center; width: min(920px,100%); max-height: calc(100vh - 34px); padding: 32px; overflow-y: auto; border: 1px solid color-mix(in srgb,var(--gold) 38%,var(--line)); border-radius: 30px; background: radial-gradient(circle at 12% 16%,color-mix(in srgb,var(--gold) 15%,transparent),transparent 31%),radial-gradient(circle at 92% 14%,color-mix(in srgb,var(--lavender) 19%,transparent),transparent 32%),var(--panel); box-shadow: 0 35px 120px rgba(0,0,0,.5),0 0 52px color-mix(in srgb,var(--gold) 12%,transparent); opacity: 0; transform: translateY(20px) scale(.96); transition: .28s ease; }
.reward-share-backdrop.open .reward-share-card { opacity: 1; transform: none; }
.reward-share-close { z-index: 4; }
.reward-share-preview { display: grid; gap: 10px; justify-items: center; }.reward-share-preview canvas { display: block; width: min(100%,390px); height: auto; border: 1px solid color-mix(in srgb,var(--gold) 42%,var(--line)); border-radius: 24px; background: #0b0e1c; box-shadow: 0 20px 60px rgba(0,0,0,.32),0 0 32px color-mix(in srgb,var(--gold) 12%,transparent); }.reward-share-preview > span { color: var(--muted); font-size: 9px; font-weight: 700; }
.reward-share-copy { position: relative; z-index: 2; min-width: 0; }.reward-share-kicker { color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .2em; }.reward-share-copy h2 { margin: 10px 40px 8px 0; font-size: clamp(32px,4vw,48px); line-height: 1.05; }.reward-share-copy > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.reward-share-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 22px 0; }.reward-share-stats div { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--panel-2) 55%,transparent); }.reward-share-stats span { color: var(--muted); font-size: 9px; }.reward-share-stats strong { color: var(--gold); font: 700 23px Space Grotesk; }.reward-share-stats div:last-child strong { color: var(--mint); }
.reward-share-actions { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8px; }.reward-share-actions button { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 45px; }.reward-share-primary { background: linear-gradient(135deg,var(--coral),var(--gold)); box-shadow: inset 0 -4px rgba(0,0,0,.12),0 12px 32px color-mix(in srgb,var(--coral) 18%,transparent); }
.reward-socials { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin-top: 12px; }.reward-socials button { display: grid; justify-items: center; gap: 5px; min-width: 0; padding: 9px 4px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb,var(--panel-2) 50%,transparent); color: var(--muted); cursor: pointer; transition: .18s; }.reward-socials button:hover { border-color: color-mix(in srgb,var(--lavender) 45%,var(--line)); color: var(--text); transform: translateY(-2px); }.reward-socials b { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: color-mix(in srgb,var(--lavender) 12%,transparent); color: var(--lavender); font: 800 11px Manrope; }.reward-socials span { overflow: hidden; max-width: 100%; font-size: 8px; font-weight: 700; text-overflow: ellipsis; }
.reward-share-note { display: block; margin-top: 12px; color: var(--muted); font-size: 8px; line-height: 1.55; }
.reward-confetti { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }.reward-confetti i { position: absolute; top: -15px; width: 8px; height: 18px; border-radius: 4px; background: var(--gold); animation: reward-confetti 2.2s ease-out both; }.reward-confetti i:nth-child(1) { left: 8%; transform: rotate(15deg); }.reward-confetti i:nth-child(2) { left: 20%; background: var(--mint); animation-delay: .08s; }.reward-confetti i:nth-child(3) { left: 35%; background: var(--coral); animation-delay: .18s; }.reward-confetti i:nth-child(4) { left: 48%; background: var(--lavender); animation-delay: .04s; }.reward-confetti i:nth-child(5) { left: 61%; background: var(--mint); animation-delay: .22s; }.reward-confetti i:nth-child(6) { left: 73%; background: var(--gold); animation-delay: .12s; }.reward-confetti i:nth-child(7) { left: 86%; background: var(--coral); animation-delay: .26s; }.reward-confetti i:nth-child(8) { left: 94%; background: var(--lavender); animation-delay: .16s; }
@keyframes reward-confetti { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 16% { opacity: 1; } 100% { opacity: 0; transform: translateY(520px) rotate(560deg); } }
.reward-share-open { overflow: hidden; }
.toast { position: fixed; right: 25px; bottom: 25px; z-index: 110; padding: 11px 15px; border: 1px solid var(--line); border-radius: 10px; background: #22283d; box-shadow: var(--shadow); color: var(--text); font-size: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: none; }

body[data-theme="dusk"] {
  --bg: #171421; --panel: #211c30; --panel-2: #2a243c; --line: rgba(255,255,255,.11);
  --text: #fbf6f0; --muted: #bbb2c8; --coral: #ff8b78; --mint: #70d8b8; --gold: #f2c86d; --lavender: #b092ff;
}
body[data-theme="dusk"] .sidebar { background: rgba(23,20,33,.94); }
body[data-theme="dusk"] .typing-card,
body[data-theme="dusk"] .speed-main { background: linear-gradient(145deg,#272038,#181522); }
body[data-theme="dusk"] .game-stage { background: radial-gradient(circle at 50% 0,#463559,#181522 72%); }
body[data-theme="dusk"] .key { background: #2a243c; }
body[data-theme="dusk"] .home-keys kbd { background: #181522; }

body[data-theme="light"] {
  --bg: #f2f0ea; --panel: #fffdf9; --panel-2: #e9ecf1; --line: rgba(38,43,57,.13);
  --text: #252937; --muted: #626a7a; --coral: #e96555; --mint: #3eaf91; --gold: #d9a83e; --lavender: #7768dc; --blue: #408dcc;
  --danger: #db4055; --shadow: 0 22px 55px rgba(53,55,65,.12);
}
body[data-theme="cream"] {
  --bg: #fff4df; --panel: #fffaf0; --panel-2: #f2e3c9; --line: rgba(91,67,39,.15);
  --text: #3b3025; --muted: #725f4e; --coral: #df7650; --mint: #55a88b; --gold: #d39b35; --lavender: #8b72c8; --blue: #4e91b8;
  --danger: #cf4f56; --shadow: 0 22px 55px rgba(91,67,39,.13);
}
body[data-theme="sky"] {
  --bg: #eaf6fb; --panel: #f9fdff; --panel-2: #dcecf4; --line: rgba(37,80,103,.14);
  --text: #243946; --muted: #587583; --coral: #e56e67; --mint: #3ba68e; --gold: #c89c3d; --lavender: #727ed1; --blue: #3b96c2;
  --danger: #d84e61; --shadow: 0 22px 55px rgba(39,84,105,.13);
}
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .ambient { opacity: .08; }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .sidebar { background: color-mix(in srgb,var(--bg) 95%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .daily-ring::after { background: var(--panel); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .community-card { background: linear-gradient(135deg,color-mix(in srgb,var(--mint) 8%,transparent),color-mix(in srgb,var(--lavender) 6%,transparent)); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .typing-card,
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .speed-main { background: linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 42%,var(--panel))); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .typing-text { color: color-mix(in srgb,var(--muted) 55%,var(--panel)); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .game-stage { background: radial-gradient(circle at 50% 0,color-mix(in srgb,var(--blue) 18%,var(--panel)),var(--bg) 72%); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .game-grid { opacity: .22; }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .game-overlay { background: color-mix(in srgb,var(--bg) 76%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .game-mode-card { background: var(--panel); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .speedometer,
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .level-meter { background: color-mix(in srgb,var(--panel) 88%,transparent); box-shadow: 0 10px 28px color-mix(in srgb,var(--text) 10%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .speedometer-dial::after { background: color-mix(in srgb,var(--text) 4%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .key { border-color: color-mix(in srgb,var(--text) 14%,transparent); background: var(--panel-2); color: color-mix(in srgb,var(--text) 76%,var(--muted)); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .key.expected { color: #fff; border: 3px solid color-mix(in srgb,var(--blue) 80%,#174d69); background: var(--blue); box-shadow: 0 0 0 5px color-mix(in srgb,var(--blue) 25%,transparent),0 6px 0 color-mix(in srgb,var(--blue) 72%,#163f55),0 10px 26px color-mix(in srgb,var(--blue) 40%,transparent); text-shadow: 0 1px 2px rgba(0,0,0,.45); transform: translateY(-5px) scale(1.15); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .key.expected::after { height: 4px; background: #fff; opacity: 1; box-shadow: 0 0 6px #fff; }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .key.feedback-correct { border-color: var(--mint); background: color-mix(in srgb,var(--mint) 35%,var(--panel)); color: color-mix(in srgb,var(--mint) 35%,#14251f); box-shadow: 0 0 0 4px color-mix(in srgb,var(--mint) 20%,transparent),0 8px 22px color-mix(in srgb,var(--mint) 25%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .key.feedback-wrong { border-color: var(--danger); background: var(--danger); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb,var(--danger) 18%,transparent),0 8px 22px color-mix(in srgb,var(--danger) 28%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .home-keys kbd { background: var(--panel-2); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .hands[data-movement]::before,
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .key-row.target-row::before { background: var(--panel); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .speed-result-panel,
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .result-modal,
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .toast { background: var(--panel); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .level-up-banner,
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .tutorial-complete { background: color-mix(in srgb,var(--panel) 95%,transparent); box-shadow: var(--shadow); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .tutorial-exercise { background: linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 42%,var(--panel))); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .tutorial-sequence { color: color-mix(in srgb,var(--muted) 55%,var(--panel)); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .tutorial-tip-banner { background: linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,transparent),color-mix(in srgb,var(--coral) 6%,transparent)); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .tour-bubble { background: var(--panel); box-shadow: 0 25px 80px color-mix(in srgb,var(--text) 24%,transparent),0 0 35px color-mix(in srgb,var(--mint) 12%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .technique-show { background: color-mix(in srgb,var(--text) 68%,transparent); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .technique-show-card { background: radial-gradient(circle at 82% 12%,color-mix(in srgb,var(--lavender) 12%,transparent),transparent 38%),var(--panel); }
:is(body[data-theme="light"],body[data-theme="cream"],body[data-theme="sky"]) .no-look span { background: color-mix(in srgb,var(--text) 68%,transparent); }

body[data-theme="kid-candy"] {
  --bg: #fff3fb; --panel: #fffafd; --panel-2: #f6e8f3; --line: rgba(105,57,103,.15);
  --text: #35253e; --muted: #725f7d; --coral: #ff6f91; --mint: #42baa8; --gold: #e6a52f; --lavender: #956fe7; --blue: #4aa8d8;
  --danger: #dc4268; --shadow: 0 22px 58px rgba(112,65,112,.15);
}
body[data-theme="kid-candy"]::before,
body[data-theme="kid-space"]::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; }
body[data-theme="kid-candy"]::before { background-image: radial-gradient(circle at 11% 18%,rgba(255,111,169,.16) 0 5px,transparent 6px),radial-gradient(circle at 85% 11%,rgba(66,186,168,.16) 0 7px,transparent 8px),radial-gradient(circle at 71% 78%,rgba(149,111,231,.11) 0 5px,transparent 6px); background-size: 145px 145px,190px 190px,125px 125px; }
body[data-theme="kid-candy"] .ambient { opacity: .11; }
body[data-theme="kid-candy"] .sidebar { background: rgba(255,247,252,.95); }
body[data-theme="kid-candy"] .daily-ring::after { background: var(--panel); }
body[data-theme="kid-candy"] :is(.typing-card,.speed-main,.tutorial-exercise) { background: linear-gradient(145deg,var(--panel),#fff1fa); }
body[data-theme="kid-candy"] .typing-text { color: color-mix(in srgb,var(--muted) 58%,var(--panel)); }
body[data-theme="kid-candy"] :is(.coach-card,.finger-card,.keyboard-wrap,.report-card,.stat-card,.game-bottom,.tutorial-path,.tutorial-hands-card,.profile-settings-card) { box-shadow: inset 0 2px rgba(255,255,255,.5),0 12px 34px rgba(117,62,111,.045); }
body[data-theme="kid-candy"] .game-stage { background: radial-gradient(circle at 50% 0,#dff9fb,#fff5fc 72%); }
body[data-theme="kid-candy"] .game-grid { opacity: .2; }
body[data-theme="kid-candy"] .game-overlay { background: rgba(255,245,252,.78); }
body[data-theme="kid-candy"] .game-mode-card { background: var(--panel); }
body[data-theme="kid-candy"] .key { border-color: rgba(73,53,82,.18); background: #fffafd; color: #4a3854; }
body[data-theme="kid-candy"] .key.expected { color: #fff; border: 3px solid color-mix(in srgb,var(--key-color) 72%,#4b3159); background: color-mix(in srgb,var(--key-color) 82%,#fff); box-shadow: 0 0 0 5px color-mix(in srgb,var(--key-color) 25%,transparent),0 7px 0 color-mix(in srgb,var(--key-color) 64%,#594061),0 12px 28px color-mix(in srgb,var(--key-color) 35%,transparent); text-shadow: 0 2px 3px rgba(37,19,43,.55); }
body[data-theme="kid-candy"] :is(.result-modal,.toast,.speed-result-panel,.tutorial-complete) { background: var(--panel); }

body[data-theme="kid-space"] {
  --bg: #080b25; --panel: #111738; --panel-2: #19214a; --line: rgba(132,183,255,.16);
  --text: #f5f7ff; --muted: #b5c0dc; --coral: #ff759f; --mint: #5ee2cd; --gold: #ffd65a; --lavender: #9c8cff; --blue: #67c9ff;
  --danger: #ff5478; --shadow: 0 24px 74px rgba(0,0,20,.4);
}
body[data-theme="kid-space"]::before { background-image: radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(103,201,255,.5) 0 1px,transparent 1.6px); background-position: 0 0,35px 25px; background-size: 72px 72px,105px 105px; opacity: .28; }
body[data-theme="kid-space"] .ambient { opacity: .22; filter: blur(120px); }
body[data-theme="kid-space"] .ambient-one { background: #8b62ff; }
body[data-theme="kid-space"] .ambient-two { background: #37c9df; }
body[data-theme="kid-space"] .sidebar { background: rgba(7,10,31,.95); }
body[data-theme="kid-space"] :is(.typing-card,.speed-main,.tutorial-exercise) { background: linear-gradient(145deg,#161d46,#090d27); box-shadow: var(--shadow),inset 0 0 32px rgba(103,201,255,.025); }
body[data-theme="kid-space"] :is(.coach-card,.finger-card,.keyboard-wrap,.report-card,.stat-card,.game-bottom,.tutorial-path,.tutorial-hands-card,.profile-settings-card) { box-shadow: inset 0 0 24px rgba(103,201,255,.025); }
body[data-theme="kid-space"] .game-stage { border-color: rgba(103,201,255,.28); background: radial-gradient(circle at 50% 0,#252b68,#070a20 73%); box-shadow: var(--shadow),inset 0 0 50px rgba(103,201,255,.04); }
body[data-theme="kid-space"] .game-grid { opacity: .3; background-image: linear-gradient(rgba(103,201,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(156,140,255,.1) 1px,transparent 1px); }
body[data-theme="kid-space"] .key { border-color: rgba(103,201,255,.2); background: linear-gradient(145deg,#1d2858,#0d1232); color: #c8d8f4; }
body[data-theme="kid-space"] .key.expected { color: #081027; border-color: #fff; background: var(--key-color); box-shadow: 0 0 0 4px color-mix(in srgb,var(--key-color) 28%,transparent),0 0 22px var(--key-color),0 0 48px color-mix(in srgb,var(--key-color) 50%,transparent); text-shadow: 0 1px rgba(255,255,255,.55); }

body[data-audience="child-young"] .motivation-banner,
body[data-audience="child-older"] .motivation-banner { min-height: 76px; border-width: 2px; border-radius: 23px; background: linear-gradient(125deg,color-mix(in srgb,var(--motivation-color) 18%,var(--panel)),var(--panel) 65%); box-shadow: inset 0 2px rgba(255,255,255,.08),0 10px 28px color-mix(in srgb,var(--motivation-color) 9%,transparent); }
body[data-audience="child-young"] .companion-face,
body[data-audience="child-older"] .companion-face { width: 52px; height: 52px; border-radius: 18px; font-family: Manrope,sans-serif; font-size: 27px; animation: companion-bounce 1.8s ease-in-out infinite; }
body[data-audience="child-young"] .motivation-banner,
body[data-audience="child-older"] .motivation-banner { grid-template-columns: 56px minmax(0,1fr) 76px; }
body[data-audience="child-young"] .motivation-banner strong,
body[data-audience="child-older"] .motivation-banner strong { font-size: 14px; }
body[data-audience="child-young"] .motivation-banner p,
body[data-audience="child-older"] .motivation-banner p { font-size: 10px; }
body[data-audience="child-young"] :is(.primary-button,.ghost-button,.nav-item,.game-mode-card),
body[data-audience="child-older"] :is(.primary-button,.ghost-button,.nav-item,.game-mode-card) { border-radius: 15px; }
body[data-audience="child-young"] .profile,
body[data-audience="child-older"] .profile,
body[data-audience="teen"] .profile { font-size: 18px; }
body[data-audience="teen"] .motivation-banner { border-color: color-mix(in srgb,var(--motivation-color) 48%,var(--line)); box-shadow: inset 0 0 20px color-mix(in srgb,var(--motivation-color) 5%,transparent),0 0 24px color-mix(in srgb,var(--motivation-color) 6%,transparent); }
@keyframes companion-bounce { 50% { transform: translateY(-3px) rotate(3deg); } }

body[data-theme="neon"] {
  --bg: #03040a; --panel: #090b15; --panel-2: #0e1220; --line: rgba(45,239,255,.2);
  --text: #f5fdff; --muted: #a7b5c9; --coral: #ff36c8; --mint: #2defff; --gold: #e8ff47; --lavender: #9a5cff;
  --blue: #36a7ff; --danger: #ff3d71; --shadow: 0 24px 70px rgba(0,0,0,.48), 0 0 24px rgba(45,239,255,.035);
}
body[data-theme="neon"]::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: linear-gradient(rgba(45,239,255,.02) 1px, transparent 1px), linear-gradient(90deg,rgba(45,239,255,.02) 1px,transparent 1px); background-size: 36px 36px; }
body[data-theme="neon"] .ambient { opacity: .2; filter: blur(120px); }
body[data-theme="neon"] .ambient-one { background: #9a5cff; }
body[data-theme="neon"] .ambient-two { background: #ff36c8; }
body[data-theme="neon"] .sidebar { background: rgba(3,4,10,.96); box-shadow: 8px 0 35px rgba(45,239,255,.025); }
body[data-theme="neon"] .community-card { border-color: rgba(45,239,255,.28); box-shadow: inset 0 0 18px rgba(45,239,255,.025),0 0 18px rgba(45,239,255,.04); }
body[data-theme="neon"] .brand-mark i { background: #ff36c8; color: #05060b; box-shadow: inset 0 -3px rgba(0,0,0,.22), 0 0 14px rgba(255,54,200,.4); }
body[data-theme="neon"] .brand-mark i:last-child { background: #e8ff47; box-shadow: inset 0 -3px rgba(0,0,0,.22), 0 0 14px rgba(232,255,71,.32); }
body[data-theme="neon"] .nav-item.active { background: rgba(255,54,200,.08); box-shadow: inset 0 0 18px rgba(255,54,200,.04); }
body[data-theme="neon"] .nav-item.active .nav-icon { color: #ff36c8; border-color: rgba(255,54,200,.4); box-shadow: 0 0 13px rgba(255,54,200,.15); }
body[data-theme="neon"] .profile { background: linear-gradient(135deg,#9a5cff,#ff36c8); box-shadow: inset 0 -4px rgba(0,0,0,.18),0 0 18px rgba(154,92,255,.4); }
body[data-theme="neon"] .typing-card,
body[data-theme="neon"] .speed-main { background: linear-gradient(145deg,#0e1220,#05060c); box-shadow: var(--shadow), inset 0 0 30px rgba(45,239,255,.015); }
body[data-theme="neon"] .coach-card,
body[data-theme="neon"] .finger-card,
body[data-theme="neon"] .keyboard-wrap,
body[data-theme="neon"] .report-card,
body[data-theme="neon"] .stat-card,
body[data-theme="neon"] .game-bottom,
body[data-theme="neon"] .tutorial-path,
body[data-theme="neon"] .tutorial-hands-card { box-shadow: inset 0 0 25px rgba(45,239,255,.015); }
body[data-theme="neon"] .status-dot { box-shadow: 0 0 5px #2defff,0 0 12px #2defff; }
body[data-theme="neon"] .hands[data-movement]::before,
body[data-theme="neon"] .key-row.target-row::before { border-color: rgba(45,239,255,.55); box-shadow: 0 0 14px rgba(45,239,255,.18); }
body[data-theme="neon"] .key-row.target-row { background: rgba(45,239,255,.035); box-shadow: 0 0 0 2px rgba(45,239,255,.16),0 0 20px rgba(45,239,255,.07); }
body[data-theme="neon"] .typing-text .char.current { text-shadow: 0 0 10px rgba(232,255,71,.65); }
body[data-theme="neon"] .key { border-color: rgba(45,239,255,.18); background: linear-gradient(145deg,#101522,#070911); box-shadow: inset 0 -2px rgba(0,0,0,.45),0 0 8px rgba(45,239,255,.025); color: #aab9ce; }
body[data-theme="neon"] .key.expected { border-color: color-mix(in srgb,var(--key-color) 72%,#fff 28%); background: color-mix(in srgb,var(--key-color) 45%,#080b13); box-shadow: 0 0 0 4px color-mix(in srgb,var(--key-color) 28%,transparent),0 0 18px color-mix(in srgb,var(--key-color) 92%,transparent),0 0 48px color-mix(in srgb,var(--key-color) 48%,transparent),inset 0 0 14px color-mix(in srgb,var(--key-color) 18%,transparent); }
body[data-theme="neon"] .game-stage { border-color: rgba(45,239,255,.3); background: radial-gradient(circle at 50% 0,#151b35,#03040a 72%); box-shadow: var(--shadow),inset 0 0 45px rgba(45,239,255,.025),0 0 18px rgba(45,239,255,.07); }
body[data-theme="neon"] .game-mode-card.active { box-shadow: 0 0 18px color-mix(in srgb,var(--mode-color) 13%,transparent),inset 0 0 18px color-mix(in srgb,var(--mode-color) 4%,transparent); }
body[data-theme="neon"] .game-grid { opacity: .35; background-image: linear-gradient(rgba(45,239,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,54,200,.08) 1px,transparent 1px); }
body[data-theme="neon"] .danger-line { background: #ff3d71; box-shadow: 0 0 7px #ff3d71,0 0 20px rgba(255,61,113,.75); }
body[data-theme="neon"] .danger-line span { color: #ff3d71; text-shadow: 0 0 8px rgba(255,61,113,.8); }
body[data-theme="neon"] .speedometer,
body[data-theme="neon"] .level-meter { border-color: rgba(45,239,255,.28); background: rgba(4,6,13,.88); box-shadow: 0 0 20px rgba(45,239,255,.07),inset 0 0 18px rgba(45,239,255,.025); }
body[data-theme="neon"] .speedometer-needle { background: #f5fdff; box-shadow: 0 0 5px #2defff,0 0 13px #2defff; }
body[data-theme="neon"] .level-progress i { box-shadow: 0 0 9px #2defff; }
body[data-theme="neon"] .fall-key { box-shadow: 0 0 12px color-mix(in srgb,var(--fall-color) 55%,transparent),0 0 32px color-mix(in srgb,var(--fall-color) 25%,transparent),inset 0 1px rgba(255,255,255,.18),inset 0 -5px rgba(0,0,0,.2); }
body[data-theme="neon"] .game-overlay { background: rgba(3,4,10,.72); }
body[data-theme="neon"] .speed-result-panel { background: rgba(5,6,12,.94); }
body[data-theme="neon"] .level-up-banner,
body[data-theme="neon"] .result-modal,
body[data-theme="neon"] .toast,
body[data-theme="neon"] .tutorial-complete { background: #090b15; box-shadow: var(--shadow),0 0 25px rgba(45,239,255,.08); }
body[data-theme="neon"] .tutorial-exercise { background: linear-gradient(145deg,#0e1220,#05060c); }
body[data-theme="neon"] .tutorial-tip-banner { border-color: rgba(232,255,71,.35); box-shadow: 0 0 20px rgba(232,255,71,.035),inset 0 0 20px rgba(232,255,71,.025); }
body[data-theme="neon"] .tour-spotlight { border-color: #2defff; box-shadow: 0 0 0 9999px rgba(1,2,7,.82),0 0 0 5px rgba(45,239,255,.18),0 0 44px rgba(45,239,255,.6); }
body[data-theme="neon"] .tour-bubble,
body[data-theme="neon"] .technique-show-card { border-color: rgba(45,239,255,.42); background-color: #090b15; box-shadow: 0 25px 80px rgba(0,0,0,.6),0 0 34px rgba(45,239,255,.12); }

/* Readability pass: keep supporting text legible without changing card dimensions. */
.guide-menu-button strong { font-size: 10px; }
.guide-menu-button small,
.community-copy small,
.community-copy em,
.tutorial-step small,
.tutorial-tip-banner span,
.game-mode-card small,
.speedometer-copy span,
.speedometer-copy small,
.level-meter small,
.chart-col small { font-size: 9px; }
.theme-picker > span,
.theme-picker button,
.community-copy strong,
.live-badge,
.tutorial-heading-actions button,
.tutorial-stage-label,
.tutorial-tip-banner p,
.tutorial-score > span,
.tutorial-score small,
.tutorial-check,
.tutorial-target span,
.tutorial-target strong,
.tutorial-feedback,
.game-hud span,
.speedometer-dial span,
.level-meter span,
.danger-line span,
.level-up-banner span,
.level-up-banner small,
.arcade-kicker,
.speed-result-numbers span,
.level-orb span,
.level-orb small,
.chart-bar::before,
.result-grid span,
.finger-map span,
.row-reach span,
.function-keys small,
.function-arrows,
.daily-plan small { font-size: 9px; }
.tutorial-path-head,
.tutorial-step > span,
.tutorial-step strong,
.tutorial-instruction,
.tutorial-instruction span,
.tutorial-posture p,
.technique-strip > div,
.technique-strip i,
.tutorial-complete p,
.game-mode-card strong,
.speed-stats span,
.speed-stats small,
.best-result span,
.best-result small,
.tour-bubble-head,
.tour-bubble-head button,
.tour-kicker,
.technique-kicker,
.technique-show-progress,
.function-keys kbd,
.daily-plan span,
.reward-orb small,
.reward-cards span,
.result-badge { font-size: 10px; }
.eyebrow,
.lesson-node span,
.lesson-node small,
.stat-label,
.stat-card strong small,
.typing-card-head,
.next-key-hint,
.hand span,
.coach-tip,
.finger-card p,
.legend-row,
.legend-row b,
.key-press-label,
.tutorial-guide p,
.arcade-challenge p,
.duration-pills button,
.timer-display,
.speed-actions,
.summary-list span,
.empty-chart,
.visual-caption,
.learning-path span { font-size: 11px; }
.community-copy strong,
.guide-menu-button small,
.tutorial-step small,
.game-mode-card small,
.chart-col small { line-height: 1.35; }
.game-mode-card strong,
.tutorial-step strong,
.summary-list strong,
.reward-cards strong { font-weight: 700; }
.key { font-size: 10px; }
.keyboard.compact .key,
.tutorial-keyboard-wrap .key,
#game-view .game-bottom .key { font-size: 9px; }

/* Spacious typography pass: use available room without compromising compact layouts. */
@media (min-width: 1101px) and (min-height: 851px) {
  .welcome h1 { font-size: 20px; }
  .eyebrow { font-size: 10px; }
  .section-heading p { font-size: 14px; line-height: 1.55; }
  .ghost-button, .primary-button { font-size: 12px; }
  .motivation-banner span { font-size: 9px; }
  .motivation-banner strong { font-size: 14px; }
  .motivation-banner p { font-size: 11px; }

  .stat-label,
  .stat-card strong small,
  .typing-card-head,
  .next-key-hint,
  .key-press-label { font-size: 11px; }
  .card-title h3, .finger-card h3, .keyboard-top h3, .report-card h3 { font-size: 16px; }
  .live-badge { font-size: 9px; }
  .coach-tip, .finger-card p, .legend-row, .legend-row b { font-size: 11px; }
  .smart-coach-copy > span, .smart-coach-goal span { font-size: 10px; }
  .smart-coach-copy strong { font-size: 13px; }
  .smart-coach-copy p { font-size: 11px; }

  .tutorial-path-head { font-size: 10px; }
  .tutorial-path-head strong { font-size: 13px; }
  .tutorial-step > span { font-size: 10px; }
  .tutorial-step strong { font-size: 11px; }
  .tutorial-step small { font-size: 9px; }
  .tutorial-stage-label { font-size: 10px; }
  .tutorial-guide h2 { font-size: 29px; }
  .tutorial-guide p { font-size: 12px; }
  .tutorial-instruction, .tutorial-instruction span { font-size: 11px; }
  .tutorial-tip-banner span { font-size: 9px; }
  .tutorial-tip-banner strong { font-size: 12px; }
  .tutorial-tip-banner p { font-size: 10px; }
  .tutorial-score > span, .tutorial-score small { font-size: 9px; }
  .tutorial-posture h3 { font-size: 14px; }
  .tutorial-posture p, .tutorial-check { font-size: 11px; }
  .tutorial-feedback { font-size: 10px; }
  .technique-strip > div { font-size: 10px; }
  .theory-card summary span, .theory-card > div span { font-size: 10px; }
  .theory-card summary strong { font-size: 12px; }
  .theory-card p, .theory-card ul { font-size: 11px; }
  .theory-card .theory-principle strong { font-size: 12px; }

  .trainer-readiness span, .trainer-readiness small { font-size: 9px; }
  .trainer-status { font-size: 11px; }
  .trainer-diagnosis p { font-size: 13px; }
  .trainer-focus > span, .trainer-action > span, .trainer-action small { font-size: 11px; }
  .trainer-action > strong { font-size: 16px; }
  .trainer-action button { font-size: 11px; }
  .trainer-card h3 { font-size: 16px; }
  .trainer-card .card-title > small { font-size: 9px; }
  .trainer-plan strong { font-size: 12px; }
  .trainer-plan small, .trainer-plan em { font-size: 10px; }
  .trainer-signals span, .trainer-signals small { font-size: 10px; }
  .trainer-key-grid small { font-size: 10px; }
  .trainer-advice-card p { font-size: 12px; }
  .trainer-advice-card li, .trainer-advice-card button { font-size: 11px; }

  .custom-text-stats span { font-size: 10px; }
  .custom-info-card li, .custom-samples button, .pwa-card p { font-size: 11px; }

  .challenge-reset-copy, .challenge-period { font-size: 10px; }
  .challenge-level-orb span, .challenge-level-orb small { font-size: 10px; }
  .challenge-hero-copy p { font-size: 12px; }
  .challenge-hero-stats span, .challenge-hero-stats small { font-size: 10px; }
  .challenge-panel h3 { font-size: 17px; }
  .challenge-row-copy strong { font-size: 12px; }
  .challenge-row-copy small { font-size: 10px; }
  .challenge-row-copy em { font-size: 9px; }
  .challenge-claim, .challenge-reward, .challenge-claimed { font-size: 10px; }
  .badge-section-head p, .badge-section-head > span { font-size: 11px; }
  .badge-copy > span { font-size: 9px; }
  .badge-copy h3 { font-size: 14px; }
  .badge-copy p, .badge-footer > span { font-size: 10px; }
  .badge-footer .challenge-reward, .badge-footer .challenge-claimed { font-size: 9px; }

  .tech-lab-heading p { font-size: 12px; }
  .tech-sample-count { font-size: 10px; }
  .tech-lab-title h3 { font-size: 16px; }
  .tech-lab-title > strong small, .tech-lab-title > small, .tech-lab-card > p { font-size: 10px; }
  .lab-slow-keys strong, .lab-rhythm-status b { font-size: 12px; }
  .lab-slow-keys small, .lab-rhythm-status span, .lab-confusions small, .lab-hand-balance small { font-size: 9px; }
  .lab-empty, .lab-hand-balance span { font-size: 10px; }
  .lab-finger-grid span, .lab-finger-grid small { font-size: 8px; }
  .lab-finger-grid strong { font-size: 10px; }

  .game-hud span, .game-kicker, .arcade-kicker { font-size: 10px; }
  .game-mode-card strong { font-size: 11px; }
  .game-mode-card small { font-size: 10px; }
  .game-overlay p, .arcade-challenge p { font-size: 13px; }
  .game-bottom strong { font-size: 13px; }

  .duration-pills button, .timer-display, .speed-actions { font-size: 11px; }
  .speed-result-panel p { font-size: 12px; }
  .speed-result-numbers span { font-size: 9px; }
  .speed-stats span, .speed-stats small { font-size: 10px; }
  .progress-hero p { font-size: 12px; }
  .level-orb span, .level-orb small, .best-result span, .best-result small { font-size: 10px; }
  .summary-list span { font-size: 11px; }
  .summary-list strong { font-size: 15px; }
  .chart-bar::before, .chart-col small { font-size: 9px; }
  .mastery-key { font-size: 11px; }
  .profile-settings-card label, .profile-modal-fields label { font-size: 11px; }
  .profile-settings-card select, .profile-modal-fields select { font-size: 12px; }
  .profile-settings-card p { font-size: 11px; }
  .session-row strong { font-size: 12px; }
  .session-row small, .report-card .card-title > small { font-size: 10px; }
  .session-metric b { font-size: 13px; }
  .session-metric span { font-size: 9px; }

  .tour-bubble { width: min(420px,calc(100vw - 24px)); }
  .tour-bubble-head, .tour-bubble-head button, .tour-kicker { font-size: 10px; }
  .tour-bubble h2 { font-size: 29px; }
  .tour-bubble p { font-size: 13px; }

  .technique-show-card { width: min(1240px,100%); min-height: min(760px,calc(100vh - 48px)); padding: 40px; }
  .technique-show-progress, .technique-kicker { font-size: 11px; }
  .technique-slide { grid-template-columns: minmax(0,.9fr) minmax(480px,1.1fr); gap: 58px; padding: 42px 0; }
  .technique-slide-copy h2 { max-width: 520px; font-size: clamp(38px,4vw,58px); }
  .technique-slide-copy > p { max-width: 560px; font-size: 15px; line-height: 1.7; }
  .technique-slide-copy ul { gap: 13px; }
  .technique-slide-copy li { font-size: 14px; line-height: 1.6; }
  .technique-slide-visual { min-height: 470px; padding: 40px; }
  .visual-caption { font-size: 12px; }
  .demo-key-row kbd, .finger-map b, .row-reach > i, .function-keys kbd,
  .demo-screen b, .no-look strong, .learning-path b, .reward-cards strong { font-size: 12px; }
  .finger-map span, .row-reach span, .function-keys small, .function-arrows,
  .learning-path span, .daily-plan small, .daily-plan span, .reward-orb small,
  .reward-cards span { font-size: 11px; }
  .row-reach b { font-size: 15px; }
}

@media (min-width: 1500px) and (min-height: 950px) {
  .technique-show-card { width: min(1450px,calc(100vw - 72px)); min-height: min(880px,calc(100vh - 60px)); padding: 48px; }
  .technique-slide { grid-template-columns: minmax(0,.92fr) minmax(580px,1.08fr); gap: 72px; padding: 54px 0; }
  .technique-slide-copy h2 { max-width: 620px; font-size: clamp(48px,4vw,68px); }
  .technique-slide-copy > p { max-width: 650px; font-size: 18px; }
  .technique-slide-copy li { font-size: 16px; }
  .technique-slide-visual { min-height: 560px; padding: 50px; }
  .visual-caption { font-size: 14px; }
  .demo-hands { margin-bottom: 16px; transform: scale(1.18); }
  .demo-key-row { transform: scale(1.18); }
  .demo-key-row kbd { width: 46px; height: 46px; font-size: 14px; }
  .demo-hand { gap: 7px; padding: 26px 19px 15px; }
  .demo-hand i { width: 20px; height: 70px; }
  .demo-hand i:nth-child(1), .demo-hand i:nth-child(4) { height: 52px; }
  .finger-map div { min-height: 82px; padding: 15px; }
  .row-reach div { padding: 20px; }
  .function-keys kbd { min-height: 82px; }
  .learning-path div { grid-template-columns: 42px 1fr; padding: 13px; }
  .learning-path b { width: 42px; height: 42px; }
}

@media (max-width: 1450px) {
  .game-library { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* Keep the complete lesson workspace visible at 100% browser zoom. */
@media (min-width: 1101px) and (max-height: 1150px) {
  .main-content { padding-bottom: 12px; }
  .topbar { min-height: 74px; }
  .view { padding-top: 13px; }
  #practice-view .section-heading { margin-bottom: 9px; }
  #practice-view .section-heading h2 { font-size: 29px; }
  #practice-view .section-heading p { margin-top: 4px; font-size: 10px; }
  #practice-view .lesson-track { gap: 7px; padding: 2px 0 10px; }
  #practice-view .smart-coach-strip { margin-bottom: 7px; padding: 6px 9px; }
  #practice-view .lesson-node:not(:last-child)::after { width: 24px; }
  #practice-view .lesson-node span { width: 25px; height: 25px; }
  #practice-view .stats-row { gap: 8px; margin-bottom: 8px; }
  #practice-view .stat-card { min-height: 72px; padding: 11px 13px; border-radius: 13px; }
  #practice-view .stat-card strong { margin-top: 5px; font-size: 22px; }
  #practice-view .mini-bars { right: 11px; bottom: 10px; height: 19px; }
  #practice-view .mini-ring { right: 11px; bottom: 9px; width: 22px; height: 22px; }
  #practice-view .stat-mark { right: 11px; bottom: 9px; font-size: 13px; }
  #practice-view .typing-card { border-radius: 15px; }
  #practice-view .typing-card-head { padding: 8px 14px; }
  #practice-view .typing-text { min-height: 112px; padding: 16px 24px; font-size: 20px; line-height: 1.55; }
  #practice-view .next-key-hint { padding: 7px; }
  #practice-view .coach-grid { gap: 8px; margin-top: 8px; }
  #practice-view .coach-card,
  #practice-view .finger-card { min-height: 158px; padding: 11px 14px; border-radius: 14px; }
  #practice-view .hands { height: 83px; margin: -4px 0 -4px; transform: scale(.72); transform-origin: center bottom; }
  #practice-view .coach-tip { margin: 7px 0 0; padding: 6px 8px; font-size: 8px; }
  #practice-view .lesson-theory-card summary { padding: 7px 9px; }
  #practice-view .finger-legend { gap: 4px; margin-top: 8px; }
  #practice-view .legend-row { padding-bottom: 4px; }
  #practice-view .finger-card p { margin-top: 7px; line-height: 1.35; }
  #practice-view .keyboard-wrap { margin-top: 8px; padding: 10px 14px 11px; border-radius: 14px; }
  #practice-view .keyboard-top { margin-bottom: 7px; }
  #practice-view .keyboard { --key-height: 30px; gap: 4px; min-width: 640px; max-width: 790px; }
  #practice-view .key-row { gap: 4px; }
  #practice-view .key { min-width: 34px; padding: 0 6px; border-radius: 7px; font-size: 9px; }
  #practice-view .key-space { width: 255px; }
  #practice-view .key-tab { width: 55px; }
  #practice-view .key-caps { width: 64px; }
  #practice-view .key-shift { width: 82px; }
  #practice-view .key-enter { width: 70px; }
  #practice-view .key-backspace { width: 72px; }
}

@media (min-width: 1101px) and (max-height: 850px) {
  .main-content { padding-bottom: 0; }
  .sidebar { padding-top: 16px; padding-bottom: 14px; }
  .brand { margin-bottom: 13px; }
  .main-nav { gap: 3px; }
  .nav-item { padding: 7px 10px; }
  .nav-icon { width: 31px; height: 31px; }
  .guide-menu { grid-template-columns: repeat(2,1fr); gap: 5px; margin-top: 7px; padding-top: 7px; }
  .guide-menu-button { grid-template-columns: 1fr; justify-items: center; padding: 6px; text-align: center; }
  .guide-menu-button > span:last-child small { display: none; }
  .theme-picker { padding: 7px; }
  .daily-card { padding: 8px; }
  .community-card { display: none; }
  .sidebar-foot { margin-top: 7px; }
  .author-credit { margin-top: 5px; padding-top: 6px; }
  .topbar { min-height: 54px; }
  .motivation-banner,
  body[data-audience="child-young"] .motivation-banner,
  body[data-audience="child-older"] .motivation-banner { grid-template-columns: 35px minmax(0,1fr); min-height: 42px; margin-top: 5px; padding: 4px 8px; border-radius: 12px; }
  .companion-face,
  body[data-audience="child-young"] .companion-face,
  body[data-audience="child-older"] .companion-face { width: 32px; height: 32px; border-radius: 10px; font-size: 18px; }
  .motivation-banner p, .motivation-sparks { display: none; }
  .motivation-banner strong,
  body[data-audience="child-young"] .motivation-banner strong,
  body[data-audience="child-older"] .motivation-banner strong { font-size: 10px; }
  .topbar .eyebrow,
  #practice-view .section-heading p,
  #practice-view .finger-card p,
  #practice-view .coach-tip { display: none; }
  #practice-view { padding-top: 8px; }
  #practice-view .section-heading { margin-bottom: 5px; }
  #practice-view .section-heading h2 { font-size: 24px; }
  #practice-view .lesson-track { padding-bottom: 6px; }
  #practice-view .smart-coach-strip { grid-template-columns: 32px minmax(0,1fr) auto; margin-bottom: 5px; padding: 4px 8px; }
  #practice-view .smart-coach-pulse { width: 29px; height: 29px; border-radius: 8px; }
  #practice-view .smart-coach-copy p { display: none; }
  #practice-view .stat-card { min-height: 62px; padding: 8px 11px; }
  #practice-view .stat-card strong { font-size: 19px; }
  #practice-view .typing-text { min-height: 82px; padding: 9px 20px; font-size: 18px; }
  #practice-view .typing-card-head { padding: 6px 12px; }
  #practice-view .next-key-hint { padding: 5px; }
  #practice-view .coach-card,
  #practice-view .finger-card { min-height: 108px; padding: 7px 12px; }
  #practice-view .hands { height: 62px; margin: -15px 0 -16px; transform: scale(.54); }
  #practice-view .hands[data-movement]::before { top: -4px; font-size: 9px; }
  #practice-view .hands[data-movement]::after { bottom: -10px; font-size: 9px; }
  #practice-view .finger-legend { margin-top: 5px; }
  #practice-view .keyboard { --key-height: 25px; gap: 3px; max-width: 720px; }
  #practice-view .key-row { gap: 3px; }
  #practice-view .keyboard-wrap { margin-top: 5px; padding: 5px 12px; }
  #practice-view .keyboard-top { margin-bottom: 3px; }
  #tutorial-view { padding-top: 6px; }
  #tutorial-view .tutorial-heading { display: none; }
  #tutorial-view .tutorial-main { gap: 6px; }
  #tutorial-view .tutorial-steps { max-height: calc(100vh - 82px); }
  #tutorial-view .tutorial-guide { padding: 9px 13px; border-radius: 14px; }
  #tutorial-view .tutorial-guide { grid-template-columns: minmax(0,1fr) minmax(250px,.75fr) 90px; }
  #tutorial-view .tutorial-guide h2 { margin-top: 2px; font-size: 19px; }
  #tutorial-view .tutorial-guide p { display: none; }
  #tutorial-view .tutorial-tip-banner p { display: block; }
  #tutorial-view .tutorial-tip-banner { min-height: 58px; padding: 7px 9px; }
  #tutorial-view .tutorial-score { padding: 7px; }
  #tutorial-view .tutorial-score strong { margin: 2px 0; font-size: 20px; }
  #tutorial-view .tutorial-hands-card { min-height: 102px; padding: 4px 13px; border-radius: 14px; }
  #tutorial-view .tutorial-posture p { display: none; }
  #tutorial-view .tutorial-hands { height: 80px; transform: scale(.62); }
  #tutorial-view .theory-card summary { padding: 7px 9px; }
  #tutorial-view .technique-strip { display: none; }
  #tutorial-view .tutorial-exercise { padding: 7px 10px; border-radius: 14px; }
  #tutorial-view .tutorial-target { padding: 5px; }
  #tutorial-view .tutorial-target kbd { min-width: 31px; height: 31px; font-size: 14px; }
  #tutorial-view .tutorial-sequence { min-height: 50px; padding: 7px 11px; font-size: 17px; line-height: 1.5; }
  #tutorial-view .tutorial-keyboard-wrap { padding: 7px 11px; }
  #tutorial-view .tutorial-keyboard-wrap .keyboard-top { margin-bottom: 4px; }
  #tutorial-view .tutorial-keyboard-wrap .keyboard { --key-height: 24px; gap: 3px; max-width: 700px; }
  #tutorial-view .tutorial-keyboard-wrap .key-row { gap: 3px; }
  #tutorial-view .tutorial-keyboard-wrap .key { min-width: 30px; font-size: 9px; }
  #tutorial-view .tutorial-keyboard-wrap .key-space { width: 225px; }
  #game-view { padding-top: 7px; }
  #game-view .game-heading { margin-bottom: 8px; }
  #game-view .game-heading h2 { font-size: 25px; }
  #game-view .game-heading p { display: none; }
  #game-view .game-library { margin: 0 0 6px; padding-bottom: 5px; }
  #game-view .game-mode-card { padding: 6px 8px; }
  #game-view .game-mode-card > b { width: 24px; height: 24px; }
  #game-view .game-stage { height: calc(100vh - 345px); min-height: 315px; border-radius: 17px; }
  #game-view .game-bottom { gap: 8px; margin-top: 7px; padding: 6px 12px; border-radius: 14px; }
  #game-view .game-bottom .keyboard { --key-height: 24px; gap: 3px; max-width: 690px; }
  #game-view .game-bottom .key-row { gap: 3px; }
  #game-view .game-bottom .key { min-width: 29px; font-size: 9px; }
  #game-view .game-bottom .key-space { width: 220px; }
}

@media (max-width: 1100px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .coach-grid { grid-template-columns: 1fr; }
  .challenge-hero { grid-template-columns: 110px minmax(0,1fr); }.challenge-hero-stats { grid-column: 1 / -1; }.badge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .trainer-hero { grid-template-columns: 100px minmax(0,1fr); }.trainer-action { grid-column: 1 / -1; }.trainer-grid { grid-template-columns: 1fr; }
  .custom-training-layout { grid-template-columns: 1fr; }.custom-side { grid-template-columns: repeat(3,minmax(0,1fr)); }.custom-editor-card { min-height: 540px; }
  .lab-finger-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }.lab-confusions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .finger-card { display: none; }
  .tutorial-layout { grid-template-columns: 1fr; }.tutorial-path { position: static; }.tutorial-steps { display: flex; max-height: none; overflow-x: auto; }.tutorial-step { min-width: 150px; }.tutorial-hands-card { grid-template-columns: 170px minmax(300px,1fr); }.tutorial-check { display: none; }
  .technique-show-card { min-height: min(720px,calc(100vh - 32px)); padding: 28px; }
  .technique-slide { grid-template-columns: .9fr 1.1fr; gap: 28px; }
  .technique-slide-visual { min-height: 350px; padding: 20px; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { padding-top: 20px; padding-bottom: 18px; overflow-y: auto; transform: translateX(-100%); transition: .25s; box-shadow: var(--shadow); }.sidebar.open { transform: none; }
  .main-content { padding: 0 18px 50px; }
  .mobile-menu { display: grid; gap: 3px; width: 34px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: transparent; }.mobile-menu span { height: 1px; background: var(--text); }
  .welcome { margin-right: auto; }.welcome .eyebrow { display: none; }.welcome h1 { font-size: 13px; }
  .motivation-banner,
  body[data-audience="child-young"] .motivation-banner,
  body[data-audience="child-older"] .motivation-banner { grid-template-columns: 46px minmax(0,1fr); min-height: 62px; padding: 7px 10px; border-radius: 17px; }
  .motivation-sparks { display: none; }
  .motivation-banner p { white-space: normal; }
  .streak-pill span:last-child, .spark-pill span:last-child { display: none; }
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading .ghost-button { display: none; }
  .game-hud { width: 100%; }.game-hud span { flex: 1; min-width: 0; }
  .game-library { grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: -12px; }
  .speed-layout, .report-grid { grid-template-columns: 1fr; }.speed-stats { grid-template-columns: repeat(3,1fr); }.speed-stats div { padding: 10px; }.speed-stats strong { font-size: 22px; }
  .profile-settings-grid { grid-template-columns: 1fr; }
  .challenge-columns { grid-template-columns: 1fr; }.challenge-heading { align-items: flex-start; }.challenge-reset-copy { white-space: normal; }.challenge-hero { grid-template-columns: 90px minmax(0,1fr); padding: 18px; }.challenge-level-orb { width: 82px; height: 82px; }.challenge-level-orb strong { font-size: 31px; }.challenge-hero-copy h2 { font-size: 22px; }
  .custom-side { grid-template-columns: 1fr; }.custom-editor-card { min-height: auto; }.custom-editor-footer { align-items: stretch; flex-direction: column; }.custom-editor-footer .primary-button { width: 100%; }
  .trainer-heading .primary-button { width: 100%; }.trainer-hero { gap: 14px; padding: 16px; }.trainer-diagnosis h2 { font-size: 22px; }.trainer-key-grid { grid-template-columns: repeat(2,1fr); }
  .tech-lab-heading { align-items: flex-start; flex-direction: column; gap: 10px; }.tech-lab-grid { grid-template-columns: 1fr; }.confusion-lab-card,.finger-lab-card { grid-column: auto; }.lab-slow-keys { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .session-row { grid-template-columns: minmax(130px,1fr) repeat(2,70px); }.session-row .session-duration { display: none; }
  .progress-hero { grid-template-columns: 90px 1fr; }.level-orb { width: 80px; height: 80px; }.best-result { display: none; }
  .tutorial-guide { grid-template-columns: 1fr; }.tutorial-score { display: none; }.tutorial-tip-banner { order: 3; }.tutorial-hands-card { grid-template-columns: 1fr; }.tutorial-posture { display: none; }.tutorial-exercise { grid-template-columns: 100px minmax(0,1fr); }.tutorial-feedback { grid-column: 1 / -1; margin: 0; }.technique-strip { grid-template-columns: repeat(2,1fr); }
  .theory-card > div { grid-template-columns: 1fr; }.theory-card .theory-principle,.theory-card .theory-extra { grid-column: auto; }
  .reward-share-card { grid-template-columns: minmax(210px,.75fr) minmax(280px,1.25fr); gap: 20px; padding: 24px; }
  .reward-share-copy h2 { font-size: 32px; }
  .reward-share-actions { grid-template-columns: 1fr; }
  .technique-show { padding: 12px; overflow-y: auto; }
  .technique-show-card { min-height: calc(100vh - 24px); padding: 24px; }
  .technique-slide { grid-template-columns: 1fr; gap: 22px; align-items: start; padding: 28px 0; }
  .technique-slide-copy h2 { font-size: 34px; }
  .technique-slide-visual { min-height: 300px; }
}

/* Tablet lesson cockpit: keep the complete learning loop visible on iPad-sized screens. */
@media (min-width: 561px) and (max-width: 1100px) {
  .app-shell { display: block; }
  .sidebar { padding-top: 20px; padding-bottom: 18px; overflow-y: auto; transform: translateX(-100%); transition: .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .main-content { padding: 0 16px 34px; }
  .topbar { min-height: 58px; gap: 10px; }
  .topbar .eyebrow { display: none; }
  .welcome h1 { font-size: 16px; }
  .mobile-menu { display: grid; gap: 3px; width: 34px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: transparent; }
  .mobile-menu span { height: 1px; background: var(--text); }
  .top-actions { gap: 6px; }
  .streak-pill, .spark-pill { padding: 7px 9px; }
  .streak-pill span:last-child, .spark-pill span:last-child { display: none; }
  .motivation-banner,
  body[data-audience="child-young"] .motivation-banner,
  body[data-audience="child-older"] .motivation-banner {
    grid-template-columns: 36px minmax(0,1fr);
    min-height: 44px;
    margin-top: 6px;
    padding: 5px 8px;
    border-radius: 13px;
  }
  .companion-face,
  body[data-audience="child-young"] .companion-face,
  body[data-audience="child-older"] .companion-face { width: 32px; height: 32px; border-radius: 10px; font-size: 17px; }
  .motivation-banner p, .motivation-sparks { display: none; }
  .motivation-banner span { font-size: 9px; }
  .motivation-banner strong { font-size: 11px; }

  #practice-view.active { display: flex; flex-direction: column; gap: 6px; padding-top: 7px; }
  #practice-view > * { min-width: 0; margin-top: 0; margin-bottom: 0; }
  #practice-view .section-heading { order: 1; min-height: 28px; margin: 0; }
  #practice-view .section-heading h2 { font-size: 23px; }
  #practice-view .section-heading p { display: none; }
  #practice-view .section-heading .eyebrow { margin-bottom: 2px; font-size: 10px; }
  #practice-view .lesson-track { order: 2; gap: 5px; padding: 0 0 3px; }
  #practice-view .lesson-node { gap: 5px; }
  #practice-view .lesson-node:not(.active) small { display: none; }
  #practice-view .lesson-node:not(:last-child)::after { width: 14px; }
  #practice-view .lesson-node span { width: 25px; height: 25px; font-size: 10px; }
  #practice-view .lesson-node small { font-size: 10px; }

  #practice-view .smart-coach-strip { order: 3; grid-template-columns: 32px minmax(0,1fr) auto; margin: 0; padding: 5px 8px; border-radius: 12px; }
  #practice-view .smart-coach-pulse { width: 30px; height: 30px; border-radius: 9px; }
  #practice-view .smart-coach-copy { gap: 1px; }
  #practice-view .smart-coach-copy > span,
  #practice-view .smart-coach-goal span { font-size: 10px; }
  #practice-view .smart-coach-copy strong,
  #practice-view .smart-coach-goal strong { font-size: 12px; }
  #practice-view .smart-coach-copy p { display: none; }

  #practice-view .stats-row { order: 4; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; margin: 0; }
  #practice-view .stat-card { min-height: 58px; padding: 8px 10px; border-radius: 12px; }
  #practice-view .stat-label, #practice-view .stat-card strong small { font-size: 10px; }
  #practice-view .stat-card strong { margin-top: 4px; font-size: 20px; }
  #practice-view .mini-bars, #practice-view .mini-ring, #practice-view .stat-mark { display: none; }

  #practice-view .typing-card { order: 5; border-radius: 14px; }
  #practice-view .typing-card-head { padding: 6px 10px; font-size: 10px; }
  #practice-view .typing-text { min-height: 104px; padding: 11px 15px; font-size: 20px; line-height: 1.55; }
  #practice-view .next-key-hint { padding: 6px; font-size: 11px; }
  #practice-view .next-key-hint kbd { min-width: 28px; height: 25px; font-size: 12px; }

  #practice-view .keyboard-wrap { order: 6; margin: 0; padding: 8px 8px 9px; border-radius: 14px; }
  #practice-view .keyboard-top { margin-bottom: 5px; }
  #practice-view .keyboard-top .eyebrow { margin-bottom: 2px; font-size: 9px; }
  #practice-view .keyboard-top h3 { font-size: 14px; }
  #practice-view .key-press-label { font-size: 10px; }
  #practice-view .keyboard { --key-height: 29px; min-width: 650px; max-width: 760px; gap: 3px; }
  #practice-view .key-row { gap: 3px; }
  #practice-view .key { min-width: 34px; padding: 0 5px; border-radius: 7px; font-size: 10px; }
  #practice-view .key.expected .key-label { font-size: 12px; }
  #practice-view .key-space { width: 250px; }
  #practice-view .key-tab { width: 54px; }
  #practice-view .key-caps { width: 63px; }
  #practice-view .key-shift { width: 80px; }
  #practice-view .key-enter { width: 68px; }
  #practice-view .key-backspace { width: 70px; }

  #practice-view .coach-grid { order: 7; gap: 0; margin: 0; }
  #practice-view .coach-card { min-height: 112px; padding: 8px 12px; border-radius: 14px; }
  #practice-view .coach-card .card-title,
  #practice-view .coach-tip,
  #practice-view .lesson-theory-card { display: none; }
  #practice-view .hands { height: 92px; margin: -7px 0 -9px; transform: scale(.62); transform-origin: center; }
  #practice-view .hands[data-movement]::before,
  #practice-view .hands[data-movement]::after,
  #practice-view .hand span { font-size: 10px; }
}

@media (min-width: 821px) and (max-width: 1100px) and (max-height: 850px) {
  #practice-view .lesson-node small { display: none; }
  #practice-view .lesson-node:not(:last-child)::after { width: 9px; }
  #practice-view .typing-text { min-height: 88px; padding-top: 8px; padding-bottom: 8px; font-size: 18px; }
  #practice-view .keyboard { --key-height: 28px; min-width: 760px; max-width: 880px; }
  #practice-view .key { min-width: 38px; font-size: 11px; }
  #practice-view .key-space { width: 290px; }
  #practice-view .key-tab { width: 61px; }
  #practice-view .key-caps { width: 71px; }
  #practice-view .key-shift { width: 91px; }
  #practice-view .key-enter { width: 77px; }
  #practice-view .key-backspace { width: 79px; }
  #practice-view .keyboard-wrap { padding-top: 6px; padding-bottom: 7px; }
}

@media (max-width: 560px) {
  .topbar { min-height: 82px; }.top-actions .profile, .streak-pill { display: none; }
  .language-picker select { max-width: 54px; }
  .install-app-button { width: 34px; height: 34px; justify-content: center; padding: 0; font-size: 0; }.install-app-button span { font-size: 15px; }
  .spark-pill { padding: 8px 10px; }
  .motivation-banner { margin-top: 8px; }
  .motivation-banner p { display: none; }
  .view { padding-top: 24px; }.section-heading h2 { font-size: 27px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }.stat-card { min-height: 88px; padding: 13px; }.stat-card strong { font-size: 23px; }
  .typing-text, .typing-text.large { min-height: 205px; padding: 20px; font-size: 19px; line-height: 1.8; }
  .typing-card-head { padding: 11px; }.progress-copy .thin-progress { display: none; }
  .smart-coach-strip { grid-template-columns: 34px minmax(0,1fr); }.smart-coach-pulse { width: 32px; height: 32px; }.smart-coach-copy p,.smart-coach-goal { display: none; }
  .coach-card { display: none; }
  .keyboard-wrap { padding: 12px; }.keyboard-top { margin-bottom: 10px; }
  .game-stage { min-height: 430px; }.game-bottom { grid-template-columns: 1fr; }.game-bottom .keyboard { display: none; }
  .game-mode-card { padding: 7px 8px; }.arcade-challenge { inset: 105px 16px 42px; }.arcade-target { font-size: 25px; }
  .game-dashboard { right: 10px; left: 10px; top: 10px; }.speedometer { min-width: 140px; padding: 6px 8px; }.speedometer-dial { width: 58px; flex-basis: 58px; }.speedometer-needle { left: 29px; width: 22px; }.speedometer-dial b { left: 25px; }.speed-mid{left:27px}.level-meter { min-width: 0; flex: 1; }
  .speed-stats { gap: 6px; }.speed-stats small { display: none; }
  .progress-hero { grid-template-columns: 1fr; }.level-orb { display: none; }
  .challenge-hero { grid-template-columns: 1fr; }.challenge-level-orb { display: none; }.challenge-hero-stats { grid-column: auto; }.challenge-row { grid-template-columns: 31px minmax(0,1fr); }.challenge-row > :last-child { grid-column: 2; justify-self: start; }.badge-grid { grid-template-columns: 1fr; }.badge-section-head { align-items: flex-start; flex-direction: column; }.achievement-badge { min-height: 135px; }
  .trainer-hero { grid-template-columns: 1fr; }.trainer-readiness { display: none; }.trainer-action { grid-column: auto; }.trainer-focus { align-items: flex-start; flex-direction: column; }.trainer-key-grid { grid-template-columns: 1fr; }
  .private-badge { white-space: normal; }.custom-editor-card { padding: 13px; border-radius: 16px; }.custom-editor-card textarea { min-height: 330px; padding: 15px; font-size: 15px; }.custom-editor-head { align-items: stretch; flex-direction: column; }.custom-editor-head .ghost-button { display: block; width: 100%; }
  .tech-lab { margin-top: 20px; padding-top: 18px; }.tech-lab-card { padding: 14px; }.tech-lab-title { align-items: flex-start; flex-direction: column; }.lab-slow-keys,.lab-confusions,.lab-hand-balance { grid-template-columns: 1fr; }.lab-finger-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .session-row { grid-template-columns: minmax(110px,1fr) 62px; }.session-row .session-accuracy { display: none; }
  .profile-modal { padding: 28px 20px; }.profile-modal h2 { font-size: 26px; }
  .result-grid { grid-template-columns: 1fr; }
  .result-modal { padding: 34px 22px 24px; }
  .result-modal h2 { font-size: 32px; }
  .result-modal p { font-size: 12px; }
  .result-grid { gap: 7px; margin: 20px 0; }
  .result-grid div { padding: 12px; }
  .reward-share-backdrop { align-items: start; padding: 10px; }
  .reward-share-card { grid-template-columns: 1fr; gap: 18px; max-height: none; padding: 54px 16px 20px; border-radius: 22px; }
  .reward-share-preview canvas { width: min(78vw,310px); border-radius: 18px; }
  .reward-share-preview > span { display: none; }
  .reward-share-copy h2 { margin-right: 0; font-size: 30px; }
  .reward-share-copy > p { font-size: 11px; }
  .reward-share-stats { margin: 15px 0; }
  .reward-socials span { font-size: 7px; }
  .tutorial-heading .ghost-button { display: none; }.tutorial-hands-card { display: none; }.tutorial-exercise { grid-template-columns: 1fr; }.tutorial-target { grid-template-columns: auto auto 1fr; justify-items: start; }.tutorial-sequence { min-height: 120px; }.tutorial-complete { right: 12px; bottom: 12px; left: 12px; }.technique-strip { grid-template-columns: 1fr; }
  .tour-bubble { padding: 18px; }
  .tour-bubble h2 { font-size: 21px; }
  .tour-spotlight { border-radius: 13px; }
  .technique-show-card { padding: 20px 16px; border-radius: 20px; }
  .technique-show-close { top: 12px; right: 12px; }
  .technique-slide { padding: 24px 0 18px; }
  .technique-slide-copy h2 { font-size: 29px; }
  .technique-slide-copy > p { margin-bottom: 15px; }
  .technique-slide-visual { min-height: 240px; padding: 14px; border-radius: 17px; }
  .demo-hands { gap: 22px; transform: scale(.8); }
  .demo-key-row { gap: 3px; transform: scale(.82); }
  .finger-map { grid-template-columns: repeat(2,1fr); }
  .function-keys { grid-template-columns: repeat(2,1fr); }.function-keys .space { grid-column: 1 / -1; grid-row: 2; }
  .daily-plan { grid-template-columns: repeat(2,1fr); }
  .reward-demo { grid-template-columns: 1fr; }.reward-orb { width: 130px; height: 130px; }.reward-orb strong { font-size: 31px; }.reward-cards { width: 100%; }
  .technique-show-actions { position: sticky; bottom: 0; padding-top: 12px; background: linear-gradient(transparent,var(--panel) 30%); }
}