:root {--bg:#091018;--bg-2:#0d1622;--surface:#121d2b;--surface-2:#172436;--surface-3:#1d2d43;--line:#2b3e58;--text:#f7f9fc;--muted:#9fb0c6;--accent:#9d7cff;--accent-2:#b994ff;--accent-rgb:157,124,255;--brand-accent:#9d7cff;--brand-accent-2:#b994ff;--brand-accent-rgb:157,124,255;--good:#5dde99;--bad:#ff6b7d;--warn:#ffc966;--purple:#b38cff;--shadow:0 24px 70px rgba(0,0,0,.35);} #practiceSetupScreen,#gameScreen.practice-theme {--accent:#67b7ff;--accent-2:#8dd0ff;--accent-rgb:103,183,255;} * {box-sizing:border-box;} html {color-scheme:dark;} body {margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 20% -10%,rgba(var(--accent-rgb),.17),transparent 34rem),radial-gradient(circle at 90% 10%,rgba(179,140,255,.11),transparent 30rem),linear-gradient(180deg,#0b1420 0%,var(--bg) 65%);} button,input,select {font:inherit;} button {color:inherit;} .app-shell {width:min(1180px,calc(100% - 28px));margin:0 auto;padding:24px 0 48px;} .app-header {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px;} .brand-button {display:flex;align-items:center;gap:11px;margin-left:8px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;} a.brand-button {color:inherit;text-decoration:none;} .beta-badge {display:inline-block;align-self:flex-start;margin:4px 0 0;padding:5px 9px;border:1px solid rgba(var(--brand-accent-rgb),.45);border-radius:999px;color:var(--brand-accent-2);font-size:.64rem;font-weight:900;letter-spacing:.09em;line-height:1.2;text-transform:uppercase;} .brand-mark {display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto;border-radius:15px;color:#07111a;background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));box-shadow:0 10px 28px rgba(var(--brand-accent-rgb),.24);font-size:1.7rem;font-weight:950;} .brand-copy {display:grid;align-self:flex-start;gap:1px;margin-top:4px;line-height:1.15;white-space:nowrap;} .brand-copy strong {color:var(--text);font-size:1.15rem;letter-spacing:-.025em;} .brand-copy span {color:#aebdd1;font-size:.7rem;font-weight:700;} .brand-button:hover .brand-mark,.brand-button:focus-visible .brand-mark {animation:brand-note-hop .6s ease-out both;box-shadow:0 7px 20px rgba(var(--brand-accent-rgb),.3);} @keyframes brand-note-hop {0%,100% {transform:translateY(0) rotate(0);} 40% {transform:translateY(-4px) rotate(-7deg) scale(1.06);} 70% {transform:translateY(1px) rotate(3deg);}} @media (prefers-reduced-motion:reduce) {.brand-button:hover .brand-mark,.brand-button:focus-visible .brand-mark {animation:none;}} .header-actions {display:flex;align-items:center;gap:8px;} .header-action-icon {display:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;} .eyebrow {display:block;margin:0 0 5px;color:var(--accent);text-transform:uppercase;letter-spacing:.13em;font-size:.72rem;font-weight:850;} .screen {display:none;} .screen.active {display:block;} .hero-card,.panel {border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(23,36,54,.96),rgba(18,29,43,.97));box-shadow:var(--shadow);} .hero-card {padding:clamp(24px,5vw,50px);} .hero-copy {max-width:780px;margin-bottom:32px;} .hero-copy h1 {max-width:780px;margin:0 0 16px;font-size:clamp(2.3rem,7vw,4.7rem);line-height:.98;letter-spacing:-.035em;} .hero-copy p:last-child {max-width:700px;margin:0;color:var(--muted);line-height:1.7;} .mode-grid {display:grid;grid-template-columns:1.1fr .9fr;gap:14px;} .mode-card {display:flex;min-height:250px;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:8px;padding:26px;border:1px solid var(--line);border-radius:20px;cursor:pointer;text-align:left;transition:transform 160ms ease,border-color 160ms ease,filter 160ms ease;} .mode-card:hover,.mode-card:focus {outline:0;transform:translateY(-4px);border-color:var(--accent);filter:brightness(1.06);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22),0 18px 34px rgba(0,0,0,.26);} .arcade-card {background:radial-gradient(circle at 80% 20%,rgba(157,124,255,.26),transparent 18rem),linear-gradient(160deg,#2b2145,#19182e 70%);} .practice-card {background:radial-gradient(circle at 80% 20%,rgba(103,183,255,.2),transparent 18rem),linear-gradient(160deg,#1a2f49,#142238 70%);} .practice-card .mode-kicker {color:#67b7ff;} .practice-card:hover,.practice-card:focus {border-color:#67b7ff;box-shadow:0 0 0 3px rgba(103,183,255,.22),0 18px 34px rgba(0,0,0,.26);} .learn-link-wrap {margin-top:14px;} .learn-card {min-height:158px;color:var(--text);text-decoration:none;background:radial-gradient(circle at 88% 30%,rgba(93,222,153,.1),transparent 17rem),linear-gradient(145deg,#1b2934,#152431 72%);} .learn-card .mode-kicker {color:var(--good);} .learn-card:hover,.learn-card:focus {border-color:var(--good);box-shadow:0 0 0 3px rgba(93,222,153,.2),0 18px 34px rgba(0,0,0,.26);} .learn-card .mode-title {font-size:1.7rem;} .home-learning-overview {display:grid;gap:22px;margin-top:18px;padding:clamp(24px,4vw,38px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(18,29,43,.96),rgba(12,22,34,.96));box-shadow:0 16px 42px rgba(0,0,0,.2);} .home-learning-intro {max-width:780px;} .home-learning-intro h2,.home-learning-overview h3 {margin-top:0;} .home-learning-intro h2 {margin-bottom:10px;font-size:clamp(1.75rem,4vw,2.5rem);} .home-learning-intro>p:last-child,.home-learning-grid p {margin:0;color:var(--muted);line-height:1.65;} .home-learning-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .home-learning-grid article {padding:18px;border:1px solid rgba(159,176,198,.16);border-radius:14px;background:rgba(8,15,24,.3);} .home-learning-grid h3,.home-practice-skills h3 {margin-bottom:7px;font-size:1rem;} .home-practice-skills {padding-top:18px;border-top:1px solid var(--line);} .home-practice-skills ul {display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;} .home-practice-skills li {padding:7px 10px;border:1px solid rgba(var(--accent-rgb),.24);border-radius:999px;color:var(--muted);background:rgba(var(--accent-rgb),.07);font-size:.82rem;font-weight:750;} .mode-kicker {color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:850;} .mode-title {font-size:2.15rem;font-weight:900;} .mode-description {max-width:460px;color:var(--muted);line-height:1.55;} .mode-cta {margin-top:8px;font-weight:850;} .summary-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px;} .home-progress-overview {margin-bottom:18px;} .home-progress-overview .save-notice {margin:0;} .home-progress-overview .home-summary {margin-top:12px;} .summary-card {min-height:100px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(18,29,43,.8);} .summary-card strong {font-size:1.7rem;} .summary-label {color:var(--muted);font-size:.77rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;} .panel {padding:clamp(20px,4vw,36px);} .panel h2,.panel h3 {margin-top:0;} .panel-heading,.setting-heading,.setup-footer,.game-topbar {display:flex;align-items:center;justify-content:space-between;gap:16px;} .panel-heading {margin-bottom:20px;} .panel-heading.compact {margin-bottom:14px;} .setting-heading {align-items:flex-start;margin-bottom:14px;} .setting-heading h3 {margin-bottom:4px;} .setting-heading p,.setup-summary {margin:0;color:var(--muted);line-height:1.5;font-size:.92rem;} .setup-stack {display:grid;gap:14px;} .tabbed-setup-stack {grid-template-columns:minmax(0,1fr);min-width:0;gap:0;} .tabbed-setup-stack>* {min-width:0;} .tabbed-setup-stack>.setting-block,.tabbed-setup-stack>.setup-stack>.setting-block:first-child:not(.hidden),.tabbed-setup-stack>.setup-stack>.setting-block:first-child.hidden + .setting-block {border-top-left-radius:0;border-top-right-radius:0;} .setting-block {padding:18px;border:1px solid var(--line);border-radius:17px;background:rgba(8,15,24,.26);} .practice-option-group:not(.hidden)~.practice-option-group:not(.hidden) {margin-top:20px;padding-top:20px;border-top:1px solid var(--line);} .choice-grid {display:grid;gap:9px;} .choice-grid.three {grid-template-columns:repeat(3,1fr);} .choice-grid.four {grid-template-columns:repeat(4,1fr);} .control-setting-label {margin:16px 0 8px;color:var(--muted);font-size:.85rem;font-weight:800;} .choice-grid.two {grid-template-columns:repeat(2,1fr);} .choice-grid.dynamic {grid-template-columns:repeat(auto-fit,minmax(150px,1fr));} .choice-grid button {min-height:90px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);cursor:pointer;text-align:left;} .choice-grid button strong {font-size:1rem;} .choice-grid button span {color:var(--muted);font-size:.84rem;} .choice-grid button.selected {border-color:var(--accent);background:linear-gradient(180deg,rgba(var(--accent-rgb),.16),rgba(23,36,54,.95));box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.15);} .mode-switch button {min-height:70px;} .level-sections {display:grid;gap:20px;} .control-key-grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;} .control-key-grid button {min-height:76px;display:grid;place-content:center;gap:6px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);cursor:pointer;} .control-key-grid button:disabled {cursor:default;} .control-key-grid button.capturing {border-color:var(--accent);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.25);} .control-key-grid kbd {color:var(--accent-2);font-size:1.15rem;font-weight:900;} .controls-status {min-height:1.5em;margin:12px 0 0;color:var(--muted);} .level-section {--level-accent:#77d8dd;} .level-section:nth-child(4n + 2) {--level-accent:#a891ff;} .level-section:nth-child(4n + 3) {--level-accent:#ffc779;} .level-section:nth-child(4n + 4) {--level-accent:#ff8ca3;} .level-section + .level-section {padding-top:20px;border-top:1px solid var(--line);} .level-section-heading {display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px;} .level-section-heading h4,.completed-level-group h4 {margin:0;} .level-section-heading h4 {color:var(--level-accent);font-size:1.08rem;letter-spacing:.02em;} .completed-level-items span {color:var(--muted);font-size:.85rem;} .level-section-heading span {padding:4px 9px;border:1px solid color-mix(in srgb,var(--level-accent) 28%,var(--line));border-radius:999px;color:var(--level-accent);background:color-mix(in srgb,var(--level-accent) 8%,transparent);font-size:.73rem;font-weight:800;white-space:nowrap;} .level-section .choice-grid button {position:relative;min-height:190px;justify-content:flex-start;gap:0;overflow:hidden;padding:20px;border-color:color-mix(in srgb,var(--level-accent) 52%,var(--line));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--level-accent) 34%,#111628),#111628 72%);box-shadow:0 13px 30px rgba(0,0,0,.18);isolation:isolate;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;} .level-section .choice-grid button::before {position:absolute;top:3px;right:9px;color:color-mix(in srgb,var(--level-accent) 18%,transparent);font-size:8.5rem;font-weight:1000;line-height:1;content:attr(data-level-number);z-index:-1;} .level-section .choice-grid button:hover {transform:translateY(-2px);border-color:var(--level-accent);box-shadow:0 17px 34px rgba(0,0,0,.25);} .level-section .choice-grid.dynamic {grid-template-columns:repeat(auto-fill,minmax(235px,1fr));} .level-section .choice-grid button.selected {border-color:var(--level-accent);box-shadow:inset 0 0 0 2px var(--level-accent),0 0 0 3px color-mix(in srgb,var(--level-accent) 47%,transparent),0 17px 34px rgba(0,0,0,.25);} .level-section .choice-grid button:focus-visible {outline:2px solid var(--level-accent);outline-offset:3px;} .level-card-header {width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;} .level-card-number {color:var(--text);font-size:.79rem;font-weight:950;letter-spacing:.14em;} .level-section .choice-grid button .level-card-title {display:block;margin-top:35px;color:var(--text);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:900;letter-spacing:-.025em;line-height:1.15;} .level-section .choice-grid button .level-card-status {flex:none;padding:5px 8px;border:1px solid color-mix(in srgb,var(--level-accent) 65%,transparent);border-radius:999px;color:#080f18;background:var(--level-accent);font-size:.68rem;font-weight:800;white-space:nowrap;} .level-section .choice-grid button.completed .level-card-status {border-color:var(--good);background:var(--good);color:#07151a;} .level-section .choice-grid button.perfect-clear .level-card-status {border-color:var(--warn);background:var(--warn);color:#1d170a;} .level-card-results {display:grid;gap:10px;width:calc(100% + 40px);margin:auto -20px -20px;padding:14px 20px 17px;border-top:1px solid color-mix(in srgb,var(--level-accent) 30%,transparent);background:rgba(5,9,18,.42);} .level-card-ready {color:var(--text);font-size:.76rem;font-weight:800;} .level-section .choice-grid button .level-card-achievement {color:var(--good);font-size:.72rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;} .level-section .choice-grid button.perfect-clear .level-card-achievement {color:var(--warn);} .level-card-stats {width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;} .level-section .choice-grid button .level-card-stat {min-width:0;display:flex;flex-direction:column;gap:2px;padding:8px 9px;border:1px solid rgba(159,176,198,.16);border-radius:9px;background:rgba(5,12,22,.36);} .level-section .choice-grid button .level-card-stat-label {color:var(--muted);font-size:.67rem;line-height:1.25;} .level-card-stat b {color:var(--text);font-size:.95rem;line-height:1.2;} .level-section .choice-grid button .level-card-detail {color:var(--muted);font-size:.72rem;line-height:1.45;} @media (prefers-reduced-motion:reduce) {.level-section .choice-grid button {transition:none;} .level-section .choice-grid button:hover {transform:none;}} .completed-level-items .level-complete {color:var(--good);} .toggle-grid {display:grid;grid-template-columns:repeat(7,1fr);gap:8px;} .toggle-grid label {position:relative;} .toggle-grid input {position:absolute;opacity:0;} .toggle-grid span {min-height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:var(--surface-2);font-weight:900;cursor:pointer;} .toggle-grid input:checked + span {color:#07111a;border-color:var(--accent);background:var(--accent);} .two-column {display:grid;grid-template-columns:1fr 1fr;gap:12px;} .two-column label {display:grid;gap:8px;color:var(--muted);font-weight:750;} select {width:100%;padding:10px 12px;color:var(--text);border:1px solid var(--line);border-radius:10px;background:var(--surface-2);} .practice-range-preview {margin-top:16px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:rgba(8,15,24,.34);} .practice-range-graphic {overflow-x:auto;} .practice-range-graphic svg {display:block;width:100%;min-width:580px;height:auto;shape-rendering:geometricPrecision;text-rendering:geometricPrecision;} .practice-range-graphic svg[data-layout="vertical"] {min-width:0;} .range-preview-staff-line,.range-preview-ledger {stroke:#647b95;stroke-width:1.5;vector-effect:non-scaling-stroke;} .range-preview-note.excluded {opacity:.38;} .range-preview-stem {stroke:var(--accent-2);stroke-width:2.25;stroke-linecap:round;vector-effect:non-scaling-stroke;} .range-preview-head {fill:var(--accent);stroke:var(--accent-2);stroke-width:1.75;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(var(--accent-rgb),.5));} .range-preview-note.excluded .range-preview-head {fill:#71849b;stroke:#9fb0c6;filter:none;} .range-preview-note.excluded .range-preview-stem {stroke:#9fb0c6;} .range-preview-label {fill:var(--text);font-size:13px;font-weight:750;} .practice-range-preview p {margin:8px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45;} .setting-value {color:var(--accent-2);} .range-row {display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;color:var(--muted);} input[type="range"] {width:100%;accent-color:var(--accent);} .setup-footer {margin-top:20px;align-items:center;} #practiceSetupScreen .setup-footer {justify-content:flex-end;} .primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button,.text-button {border-radius:11px;font-weight:800;cursor:pointer;} .primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button {padding:11px 15px;} .primary-button {color:#07111a;border:0;background:linear-gradient(135deg,var(--accent),var(--accent-2));} .primary-button.large {padding:13px 20px;} .secondary-button {color:var(--text);border:1px solid var(--line);background:var(--surface-3);} .ghost-button,.icon-button {color:var(--muted);border:1px solid var(--line);background:transparent;} .icon-button {display:inline-flex;align-items:center;gap:7px;} .text-button {padding:0;color:var(--accent);border:0;background:transparent;} .danger-button {color:var(--bad);border:1px solid rgba(255,107,125,.3);background:rgba(255,107,125,.09);} .primary-button:hover,.secondary-button:hover,.ghost-button:hover,.icon-button:hover,.danger-button:hover {filter:brightness(1.12);} .game-shell {padding-bottom:10px;} .game-topbar {display:grid;grid-template-columns:minmax(150px,auto) 1fr auto;margin-bottom:12px;} .game-mode-block strong {display:block;font-size:1.05rem;} .hud-group {display:flex;justify-content:center;gap:8px;} .hud-item {min-width:96px;padding:8px 12px;text-align:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);} .hud-item span {display:block;color:var(--muted);font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;} .hud-item strong {font-size:1.25rem;} .combo-hud {position:relative;} .combo-hud small {position:absolute;right:8px;top:7px;color:var(--warn);font-weight:900;} .combo-hud.streaking {border-color:rgba(93,222,153,.58);background:linear-gradient(180deg,rgba(93,222,153,.12),var(--surface));box-shadow:0 0 20px rgba(93,222,153,.12);} .combo-hud.milestone {animation:combo-milestone 420ms ease-out;} @keyframes combo-milestone {0% {transform:scale(1);} 38% {transform:scale(1.1);} 100% {transform:scale(1);}} .game-actions {display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;} .arcade-status-row {display:grid;grid-template-columns:auto minmax(180px,1fr) minmax(180px,.7fr);gap:12px;align-items:center;margin-bottom:10px;} .flow-label {display:grid;} .flow-label span {font-weight:900;} .flow-label small {color:var(--muted);} #practiceLevelStatusRow {grid-template-columns:auto minmax(180px,1fr);} .meter-track,.song-progress-track {overflow:hidden;border-radius:999px;background:#07101a;border:1px solid var(--line);} .meter-track {height:12px;} .meter-fill {height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--bad),var(--warn),var(--good));transition:width 180ms ease;} #practiceLevelProgress {background:linear-gradient(90deg,var(--accent),var(--accent-2));} .song-progress-wrap {display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;} .song-progress-wrap.endless {display:flex;justify-content:flex-end;} .song-progress-track {height:7px;} .song-progress-fill {height:100%;width:0%;background:var(--accent);} .song-progress-wrap span {min-width:48px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;} .game-stage {position:relative;overflow:hidden;border:1px solid var(--line);border-radius:20px;background:#07111d;box-shadow:var(--shadow);} .game-speed-row {display:grid;grid-template-columns:auto minmax(100px,1fr) auto;align-items:center;gap:12px;margin-top:10px;color:var(--muted);font-size:.8rem;font-weight:750;} .game-speed-row input {min-width:0;} .game-speed-row strong {color:var(--accent-2);font-size:.88rem;font-variant-numeric:tabular-nums;min-width:62px;text-align:right;} #staffCanvas {width:100%;height:min(50vw,450px);min-height:330px;display:block;} .stage-overlay {position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:rgba(7,12,19,.76);backdrop-filter:blur(6px);} .stage-overlay.hidden,.modal-backdrop.hidden,.hidden {display:none !important;} .countdown-overlay {background:rgba(7,12,19,.4);} .countdown-content {display:grid;place-items:center;} .countdown-content span {color:#fff;text-transform:uppercase;letter-spacing:.18em;font-size:.8rem;font-weight:850;} .countdown-content strong {font-size:clamp(5rem,18vw,10rem);line-height:1;} .overlay-card,.modal-card {width:min(430px,calc(100% - 32px));padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);text-align:center;} .overlay-card {display:grid;gap:10px;} .overlay-card h2 {margin:0 0 8px;} .feedback-row {min-height:44px;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin:6px 0;} .feedback {min-height:32px;display:flex;align-items:center;font-weight:850;} .feedback.good {color:var(--good);} .feedback.streak {color:var(--warn);text-shadow:0 0 18px rgba(255,201,102,.24);} .feedback.bad {color:var(--bad);} .feedback.neutral {color:var(--muted);} .timing-feedback {min-width:90px;text-align:right;font-size:.88rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;} .timing-feedback.perfect {color:var(--warn);} .timing-feedback.good {color:var(--good);} .timing-feedback.ok {color:var(--accent);} .answer-buttons {display:grid;grid-template-columns:repeat(7,1fr);gap:8px;width:min(100%,820px);} .answer-buttons[data-size="large"] {width:min(100%,960px);} .answer-buttons[data-size="extra"] {width:min(100%,1050px);} .answer-buttons[data-position="left"] {margin-right:auto;} .answer-buttons[data-position="center"] {margin-inline:auto;} .answer-buttons[data-position="right"] {margin-left:auto;} .answer-buttons[data-size="large"] button {min-height:82px;font-size:1.48rem;} .answer-buttons[data-size="extra"] button {min-height:100px;font-size:1.68rem;} #keyboardPlayArea:focus-visible {outline:3px solid var(--accent-2);outline-offset:3px;} .answer-buttons button {min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 5px;border:1px solid var(--line);border-radius:13px;background:var(--surface);cursor:pointer;font-size:1.28rem;font-weight:950;transition:transform 110ms ease,border-color 110ms ease,background 110ms ease;} .answer-buttons button:hover {transform:translateY(-2px);border-color:var(--accent);background:var(--surface-3);} .answer-buttons button.correct-flash {border-color:var(--good);background:rgba(93,222,153,.2);} .answer-buttons button.wrong-flash {border-color:var(--bad);background:rgba(255,107,125,.18);} @media (prefers-reduced-motion:reduce) {.combo-hud.milestone {animation:none;}} .game-footer {display:flex;flex-wrap:wrap;justify-content:center;gap:16px;padding-top:11px;color:var(--muted);font-size:.83rem;} .site-footer {display:flex;align-items:center;justify-content:center;gap:16px;padding:40px 12px 0;color:var(--muted);font-size:.85rem;} .site-footer a,.legal-content a {color:var(--accent-2);text-underline-offset:3px;} .site-footer a:hover,.legal-content a:hover {color:var(--text);} .button-link {display:inline-flex;align-items:center;justify-content:center;text-decoration:none;} .legal-panel {padding:clamp(24px,5vw,48px);} .legal-heading {padding-bottom:26px;border-bottom:1px solid var(--line);} .legal-heading h1 {margin:0 0 10px;font-size:clamp(2.2rem,7vw,3.8rem);line-height:1;letter-spacing:-.03em;} .legal-updated {margin:0;color:var(--muted);} .legal-content {max-width:68ch;} .legal-content section {padding-top:28px;} .legal-content h2 {margin:0 0 10px;font-size:1.25rem;} .legal-content p,.legal-content li {color:var(--muted);line-height:1.72;} .legal-content p {margin:0;} .legal-content ul {margin:10px 0;padding-left:1.4rem;} .legal-content strong {color:var(--text);} .learn-shell {width:min(960px,calc(100% - 28px));--accent:#5dde99;--accent-2:#9af0bf;--accent-rgb:93,222,153;--learn-note-color:#5dde99;} .learn-hero {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:clamp(28px,6vw,56px);} .learn-hero h1 {max-width:650px;margin:0 0 16px;font-size:clamp(2.4rem,7vw,4.6rem);line-height:.98;letter-spacing:-.035em;} .learn-hero p:last-child,.lesson-copy>p,.landmark-grid p {color:var(--muted);line-height:1.7;} .learn-hero p:last-child {max-width:650px;margin:0;} .clef-display {display:grid;place-items:center;width:150px;height:190px;color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.3);border-radius:28px;background:radial-gradient(circle,rgba(var(--accent-rgb),.17),rgba(9,16,24,.24) 68%);font-family:"Times New Roman",serif;font-size:8rem;line-height:1;} .learn-section {display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;margin-top:18px;padding:clamp(22px,4vw,36px);border:1px solid var(--line);border-radius:20px;background:rgba(18,29,43,.82);} .lesson-number {display:grid;place-items:center;width:42px;height:42px;color:#07111a;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-size:1.1rem;font-weight:950;} .lesson-copy h2,.quiz-heading h2 {margin:0 0 10px;font-size:clamp(1.6rem,4vw,2.2rem);} .lesson-copy>p {margin:0;} .note-alphabet {display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-top:22px;} .note-alphabet span {display:grid;place-items:center;min-height:52px;color:var(--accent-2);border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:1.15rem;font-weight:950;} .note-alphabet span:last-child {color:var(--good);border-color:rgba(93,222,153,.45);} .staff-facts,.landmark-grid {display:grid;gap:12px;margin-top:22px;} .staff-facts {grid-template-columns:repeat(2,1fr);} .staff-facts article,.landmark-grid article {padding:18px;border:1px solid var(--line);border-radius:15px;background:rgba(8,15,24,.32);} .staff-facts strong,.staff-facts small,.staff-facts .fact-label {display:block;} .staff-facts strong {margin:8px 0;color:var(--accent-2);font-size:clamp(1.15rem,3vw,1.5rem);letter-spacing:.08em;} .staff-facts small,.fact-label {color:var(--muted);} .fact-label {font-size:.72rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;} .landmark-grid {grid-template-columns:repeat(3,1fr);} .landmark-grid p {margin:7px 0 0;font-size:.92rem;} .lesson-tip {margin-top:18px !important;padding:14px 16px;border-left:3px solid var(--good);background:rgba(93,222,153,.07);} .lesson-visual {margin:22px 0 0;} .lesson-canvas {display:block;width:100%;height:250px;border:1px solid var(--line);border-radius:18px;background:#07111d;} .lesson-visual figcaption {margin-top:9px;color:var(--muted);font-size:.86rem;line-height:1.55;text-align:center;} .quiz-panel {margin-top:18px;padding:clamp(22px,4vw,36px);} .quiz-heading {display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px;} .quiz-heading strong {color:var(--muted);white-space:nowrap;} .quiz-instruction {margin:0 0 12px;color:var(--muted);} .learn-staff-canvas {display:block;width:100%;height:260px;border:1px solid var(--line);border-radius:18px;background:#07111d;} .quiz-answers {display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px;} .quiz-answers button {min-height:56px;color:var(--text);border:1px solid var(--line);border-radius:12px;background:var(--surface-2);cursor:pointer;font-size:1.1rem;font-weight:950;} .quiz-answers button:hover:not(:disabled) {border-color:var(--accent);transform:translateY(-2px);} .quiz-answers button.correct {color:var(--good);border-color:var(--good);background:rgba(93,222,153,.13);} .quiz-answers button.wrong {color:var(--bad);border-color:var(--bad);background:rgba(255,107,125,.11);} .quiz-answers button:disabled {cursor:default;} .quiz-feedback {min-height:34px;margin-top:14px;font-weight:800;} .quiz-feedback.correct {color:var(--good);} .quiz-feedback.wrong {color:var(--bad);} .quiz-feedback.result {color:var(--accent-2);font-size:1.15rem;} .quiz-next {margin-top:8px;} .learn-actions {display:flex;justify-content:center;gap:10px;margin-top:22px;} .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .results-hero {display:grid;justify-items:center;text-align:center;} .results-hero h2 {margin:4px 0 6px;} .results-hero p:last-child {margin:0;color:var(--muted);} .result-grade {display:grid;place-items:center;width:92px;height:92px;margin:8px 0;border:1px solid rgba(var(--accent-rgb),.5);border-radius:24px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(179,140,255,.16));font-size:3.4rem;font-weight:950;} .note-breakdown {margin-top:20px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(7,13,21,.25);} .note-stats-list {display:grid;gap:9px;} .note-stat-row {display:grid;grid-template-columns:34px 1fr 64px;gap:12px;align-items:center;} .note-stat-letter {font-weight:950;} .note-stat-bar {height:10px;overflow:hidden;border-radius:999px;background:#07101a;} .note-stat-fill {height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--accent-2));} .note-stat-value {color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;} .weakest-pill {padding:7px 10px;color:var(--warn);border:1px solid rgba(255,201,102,.24);border-radius:999px;background:rgba(255,201,102,.08);font-size:.8rem;font-weight:850;} .results-actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;} .results-actions button {transition:transform .16s ease,filter .16s ease,border-color .16s ease,background-color .16s ease,box-shadow .16s ease;} .results-actions button:hover,.results-actions button:focus {outline:0;transform:translateY(-2px);filter:brightness(1.14);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.24),0 10px 24px rgba(0,0,0,.28);} .results-actions .secondary-button:hover,.results-actions .secondary-button:focus,.results-actions .ghost-button:hover,.results-actions .ghost-button:focus {color:var(--text);border-color:var(--accent);background:rgba(var(--accent-rgb),.1);} .results-actions button:active {transform:translateY(0);} @media (prefers-reduced-motion:reduce) {.results-actions button {transition:none;} .results-actions button:hover,.results-actions button:focus {transform:none;}} .progress-summary {grid-template-columns:repeat(3,1fr);} .save-notice {display:flex;align-items:center;justify-content:space-between;gap:20px;margin:20px 0;padding:18px 20px;border:1px solid rgba(185,148,255,.36);border-radius:17px;background:rgba(149,110,228,.09);} .save-notice.hidden {display:none;} .save-notice h2,.save-notice h3,.save-notice p {margin:0;} .save-notice h2,.save-notice h3 {font-size:1.05rem;} .save-notice p {margin-top:5px;color:var(--muted);font-size:.88rem;line-height:1.5;} .save-notice .secondary-button {flex:0 0 auto;} @media (max-width:580px) {.save-notice {align-items:stretch;flex-direction:column;}} .progress-preference {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:17px;background:rgba(8,15,24,.26);} .progress-preference h3,.progress-preference p {margin:0;} .progress-preference p {margin-top:5px;color:var(--muted);font-size:.88rem;} .progress-switch {display:inline-flex;align-items:center;gap:10px;padding:5px 9px 5px 5px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);cursor:pointer;white-space:nowrap;} .progress-switch input {appearance:none;position:relative;flex:0 0 auto;width:54px;height:30px;margin:0;border:1px solid #53647d;border-radius:999px;background:#34445b;cursor:pointer;transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;} .progress-switch input::before {content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#f7f9fc;box-shadow:0 2px 5px rgba(0,0,0,.3);transition:transform .2s ease;} .progress-switch input:checked {border-color:var(--accent-2);background:linear-gradient(120deg,#7555df,var(--accent));box-shadow:0 0 13px rgba(var(--accent-rgb),.24);} .progress-switch input:checked::before {transform:translateX(24px);} .progress-switch input:focus-visible {outline:3px solid var(--text);outline-offset:3px;} .progress-switch span {min-width:2.1em;color:var(--muted);font-size:.8rem;font-weight:800;letter-spacing:.04em;text-align:center;text-transform:uppercase;} .progress-switch input:checked + span {color:var(--accent-2);} @media (prefers-reduced-motion:reduce) {.progress-switch input,.progress-switch input::before {transition:none;}} .completed-level-list {display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;} .completed-level-group {padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2);} .completed-level-items {display:grid;gap:6px;margin-top:9px;} .danger-zone {margin-top:22px;padding-top:20px;border-top:1px solid var(--line);} .modal-backdrop {position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:rgba(4,8,13,.84);backdrop-filter:blur(8px);} .modal-card {text-align:left;} .modal-card h2 {margin:0;} .modal-card ol {padding-left:22px;color:var(--muted);line-height:1.7;} .modal-card .primary-button {width:100%;} @media (max-width:850px) {.home-progress-overview .save-notice:not(.hidden)~.home-summary {display:none;} .app-shell,.learn-shell {width:100%;} .app-header {margin-inline:14px;} .hero-card,.panel,.home-learning-overview,.learn-section {border-right:0;border-left:0;border-radius:0;} .mode-grid,.choice-grid.three {grid-template-columns:1fr;} .home-learning-grid {grid-template-columns:1fr;} .choice-grid.four {grid-template-columns:repeat(2,1fr);} .mode-card {min-height:190px;} .summary-grid,.progress-summary {grid-template-columns:repeat(2,1fr);} .landmark-grid {grid-template-columns:1fr;} .game-topbar {grid-template-columns:1fr auto;} .game-mode-block {grid-column:1;} .game-actions {grid-column:2;grid-row:1;} .hud-group {grid-column:1 / -1;grid-row:2;} .arcade-status-row {grid-template-columns:auto 1fr;} .song-progress-wrap {grid-column:1 / -1;}} @media (max-width:580px) {.control-key-grid {grid-template-columns:repeat(4,minmax(0,1fr));} .app-shell {width:100%;padding-top:14px;} .app-header {margin-inline:7px;margin-bottom:14px;} .header-actions .ghost-button {padding:9px 10px;} .header-actions {gap:4px;} #muteButton {padding:9px 11px;} #muteLabel {display:none;} .learn-hero {grid-template-columns:1fr;} .clef-display {width:100%;height:120px;font-size:6rem;} .learn-section {grid-template-columns:1fr;} .note-alphabet {grid-template-columns:repeat(4,1fr);} .staff-facts {grid-template-columns:1fr;} .quiz-heading {flex-direction:column;gap:4px;} .learn-staff-canvas {height:220px;} .lesson-canvas {height:230px;} .quiz-answers {grid-template-columns:repeat(4,1fr);} .learn-actions {flex-direction:column;} .hero-copy h1 {font-size:2.45rem;} .summary-grid,.progress-summary {grid-template-columns:1fr 1fr;} .summary-card {min-height:88px;} .toggle-grid {grid-template-columns:repeat(4,1fr);} #practiceTypeChoices button {min-height:58px;padding:9px 4px;} #practiceTypeChoices button span {display:none;} .practice-options-panel {padding:14px;} .practice-options-panel .setting-heading {gap:8px;} .range-row {grid-template-columns:1fr 1fr;gap:6px 10px;} .range-row input[type="range"] {grid-column:1 / -1;grid-row:1;} .range-row span {grid-row:2;font-size:.78rem;} .range-row span:last-child {text-align:right;} .practice-range-preview {padding:10px;} .practice-range-graphic {overflow-x:hidden;} .two-column {grid-template-columns:1fr;} .choice-grid.two {grid-template-columns:1fr;} .level-section .choice-grid.dynamic {grid-template-columns:1fr;} #staffCanvas {height:78vw;min-height:320px;max-height:390px;} .hud-item {min-width:0;flex:1;padding:7px;} .answer-buttons {display:flex;flex-wrap:wrap;width:94%;} .answer-buttons[data-size="large"],.answer-buttons[data-size="extra"] {width:94%;} .answer-buttons[data-size="extra"] button {flex-basis:calc((100% - 16px) / 3);} .answer-buttons button {flex:1 1 calc((100% - 24px) / 4);min-height:56px;} .feedback-row {grid-template-columns:1fr;gap:0;} .timing-feedback {text-align:left;} .setup-footer,.panel-heading {align-items:flex-start;} .setup-footer {flex-direction:column;} .setup-footer .primary-button {width:100%;} .note-stat-row {grid-template-columns:28px 1fr 56px;}} @media (max-width:760px) {#arcadeTimer {display:none;} .app-header {flex-wrap:nowrap;gap:6px;} .app-header>.button-link,.header-actions {margin-left:auto;} .brand-button {display:grid;grid-template-columns:auto auto;column-gap:6px;row-gap:2px;flex-shrink:0;} .brand-mark {grid-row:1 / 3;width:42px;height:42px;} .brand-copy {margin-top:0;} .brand-copy strong {font-size:1rem;} .brand-copy span {font-size:.65rem;} .beta-badge {grid-column:2;justify-self:start;margin:0;padding:1px 5px;font-size:.56rem;} .header-actions {gap:3px;flex:1 1 auto;min-width:0;margin-left:0;} .header-actions .ghost-button {padding:9px 5px;font-size:.8rem;} .header-actions>* {flex:1 1 0;min-width:max-content;min-height:40px;display:inline-flex;align-items:center;justify-content:center;} #muteButton {min-width:40px;padding:9px 5px;} #muteLabel {display:none;}} @media (max-width:420px) {.header-actions {min-width:0;gap:2px;} .brand-button {column-gap:5px;} .app-header {gap:4px;} .brand-copy strong {font-size:.85rem;} .brand-copy span {font-size:.58rem;} .beta-badge {font-size:.5rem;} .brand-mark {width:36px;height:36px;border-radius:12px;font-size:1.35rem;} .header-actions .ghost-button {padding:9px 4px;font-size:.75rem;} #muteButton {padding:9px 4px;font-size:1rem;}} @media (max-width:375px) {.brand-mark {width:32px;height:36px;} .brand-copy strong {font-size:.78rem;} .brand-copy span {font-size:.55rem;} .header-actions {gap:3px;} .header-actions .ghost-button {font-size:.8rem;} .header-actions .header-action-label {display:none;} .header-action-icon {display:block;} #statsButton,.header-actions>.button-link,#muteButton {min-width:36px;padding-inline:5px;}} .answer-buttons .note-label {font-size:1.25rem;font-weight:900;line-height:1;} .answer-buttons .shortcut-label {color:var(--muted);font-size:0.66rem;font-weight:800;line-height:1;letter-spacing:0.07em;text-transform:uppercase;}