@keyframes pulse-hint{0%,to{transform:scale(1.05);filter:brightness(1.1);box-shadow:0 0 15px 5px rgba(0,255,255,.6)}50%{transform:scale(1.08);filter:brightness(1.3);box-shadow:0 0 25px 10px rgba(0,255,255,.8)}}@keyframes flash-green{0%{filter:brightness(2)}to{filter:brightness(1)}}@keyframes shake-red{0%,to{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}.key-active{filter:brightness(1.2);transform:translateY(7px);box-shadow:inset 0 8px 18px rgba(255,255,255,.18),inset 0-18px 22px rgba(0,0,0,.28),0 8px 0 rgba(0,0,0,.22),0 12px 18px rgba(15,23,42,.18)}.key-correct{animation:flash-green .3s ease-out;background-color:#22c55e!important}.key-wrong{animation:shake-red .3s ease-in-out;background-color:#ef4444!important;box-shadow:0 0 25px 10px rgba(239,68,68,.9)!important;z-index:40}.hint{box-shadow:0 0 20px 8px rgba(0,255,255,.7);border:5px solid #0ff!important;z-index:50;animation:pulse-hint 1.5s infinite ease-in-out}.key-unused{opacity:.38;filter:saturate(.55)}.x-key{position:relative;flex:1 1 0;min-width:28px;max-width:76px;border-radius:24px;cursor:pointer;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;box-shadow:inset 0 10px 18px rgba(255,255,255,.18),inset 0-18px 22px rgba(0,0,0,.22),inset 4px 0 8px rgba(255,255,255,.08),inset -5px 0 10px rgba(0,0,0,.16),0 11px 0 rgba(0,0,0,.18),0 18px 24px rgba(15,23,42,.18)}.x-key::after{content:"";position:absolute;inset:2px 5px auto;height:34%;border-radius:22px 22px 14px 14px;background:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0));pointer-events:none}.x-key:hover{filter:brightness(1.06) saturate(1.05);transform:translateY(-2px)}.x-key__pin{position:absolute;left:50%;z-index:2;width:18px;height:18px;border-radius:999px;background:#f8fafc;box-shadow:inset 0 2px 4px rgba(255,255,255,.95),inset 0-2px 4px rgba(15,23,42,.16),0 2px 7px rgba(15,23,42,.22);transform:translateX(-50%)}.x-key__pin--top{top:22px}.x-key__pin--bottom{bottom:22px}.x-key__label{position:absolute;left:50%;bottom:58px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;transform:translateX(-50%);text-align:center;text-shadow:0 2px 3px rgba(15,23,42,.22);user-select:none}.x-key__label--light{color:#fff}.x-key__label--dark{color:#0f172a;text-shadow:0 1px 0 rgba(255,255,255,.5)}.x-key__note{font-size:clamp(.8rem,1.5vw,1.25rem);font-weight:950;line-height:1;letter-spacing:0;text-transform:uppercase}.x-key__shortcut{font-size:clamp(.66rem,1.05vw,.95rem);font-weight:800;line-height:1;opacity:.72;transition:opacity .15s ease}.x-key:hover .x-key__shortcut{opacity:1}@media (max-width:640px){.x-key{min-width:26px;border-radius:18px}.x-key__pin{width:13px;height:13px}.x-key__pin--top{top:16px}.x-key__pin--bottom{bottom:16px}.x-key__label{bottom:42px;gap:6px}}.score-pop{animation:bounce .5s cubic-bezier(.36,0,.66,-.56)}input[type=range]{accent-color:#6366f1}.panel-card{padding:14px;border:1px solid rgba(226,232,240,.12);border-radius:24px;background:rgba(248,250,252,.96);box-shadow:0 18px 45px rgba(15,23,42,.16)}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:0 8px}.section-label{margin:0;color:#94a3b8;font-size:10px;font-weight:900;font-style:italic;letter-spacing:.32em;text-transform:uppercase}.section-link{display:inline-flex;align-items:center;gap:4px;color:#7c3aed;font-size:12px;font-weight:900;transition:color .15s,transform .15s}.section-link:hover{color:#5b21b6;transform:translateX(2px)}.song-library-list{display:grid;gap:12px}.song-card{width:100%;display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border-radius:22px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s}.song-card:hover{border-color:#a5b4fc;background:#f8f7ff;transform:translateY(-1px)}.song-card--active{border-color:#8b5cf6;background:#fbfaff;box-shadow:0 0 0 3px rgba(139,92,246,.24),0 18px 32px rgba(99,102,241,.18)}.dark .song-card{border-color:#334155;background:#0f172a;box-shadow:0 12px 24px rgba(2,6,23,.24)}.dark .song-card:hover{border-color:#6366f1;background:#172033}.dark .song-card--active{border-color:#818cf8;background:#1e1b4b;box-shadow:0 0 0 3px rgba(129,140,248,.24),0 18px 32px rgba(2,6,23,.35)}.song-card__icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s,box-shadow .15s}.song-card__icon--orange{background:#fff7ed;color:#f97316}.song-card__icon--amber{background:#fffbeb;color:#f59e0b}.song-card__icon--emerald{background:#ecfdf5;color:#10b981}.song-card__icon--sky{background:#f0f9ff;color:#0ea5e9}.song-card__icon--violet{background:#f5f3ff;color:#8b5cf6}.song-card__icon--pink{background:#fdf4ff;color:#d946ef}.song-card--active .song-card__icon{background:#7c3aed;color:#fff;box-shadow:0 10px 22px rgba(124,58,237,.28)}.dark .song-card__icon--amber,.dark .song-card__icon--emerald,.dark .song-card__icon--orange,.dark .song-card__icon--pink,.dark .song-card__icon--sky,.dark .song-card__icon--violet{background:rgba(30,41,59,.92)}.dark .song-card--active .song-card__icon{background:#818cf8;color:#0f172a}.song-card__title{display:block;font-size:15px;font-weight:900;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-card--active .song-card__title{color:#4338ca}.dark .song-card__title{color:#f8fafc}.dark .song-card--active .song-card__title{color:#c7d2fe}.song-card__stars{display:flex;gap:2px;margin-top:5px}.song-card__chevron{width:16px;height:16px;color:#cbd5e1;flex-shrink:0;transition:color .15s,transform .15s}.song-card--active .song-card__chevron,.song-card:hover .song-card__chevron{color:#8b5cf6;transform:translateX(2px)}.action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.action-button,.action-button__icon{align-items:center;justify-content:center;color:#334155}.action-button{display:flex;flex-direction:column;gap:10px;min-height:122px;padding:12px 10px;border:1px solid #e2e8f0;border-radius:22px;font-size:13px;font-weight:900;line-height:1.15;text-align:center;transition:border-color .15s,box-shadow .15s,transform .15s,color .15s,background .15s}.action-button:hover{transform:translateY(-1px);border-color:#c4b5fd;box-shadow:0 14px 26px rgba(15,23,42,.12)}.action-button__icon{display:inline-flex;width:68px;height:68px;border-radius:24px;background:#f8fafc;box-shadow:inset 0 2px 8px rgba(15,23,42,.08),0 12px 24px rgba(15,23,42,.08)}.action-button--listen .action-button__icon,.action-button--play .action-button__icon{color:#334155}.action-button--stop .action-button__icon{background:#fff1f2;color:#ef4444;box-shadow:inset 0 2px 8px rgba(239,68,68,.1),0 12px 24px rgba(239,68,68,.12)}.learn-options,.option-switch{display:grid;gap:12px}.option-switch{grid-template-columns:44px minmax(0,1fr) 52px;align-items:center;width:100%;min-height:72px;padding:12px;border:1px solid transparent;border-radius:18px;background:0 0;color:#0f172a;text-align:left;transition:background .15s,border-color .15s,box-shadow .15s}.option-switch:hover{background:#f8fafc;border-color:#e2e8f0}.dark .option-switch,.dark .option-switch__copy span{color:#f8fafc}.dark .option-switch:hover{background:#172033;border-color:#334155}.option-switch__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:16px;background:#f1f5f9;color:#334155}.dark .option-switch__icon{background:#0f172a;color:#c7d2fe}.option-switch__copy{display:grid;gap:3px;min-width:0}.option-switch__copy span{color:#0f172a;font-size:15px;font-weight:900;line-height:1.1}.option-switch__copy small{color:#64748b;font-size:12px;font-weight:700;line-height:1.25}.dark .option-switch__copy small{color:#94a3b8}.option-switch__toggle{position:relative;width:50px;height:30px;border-radius:999px;background:#cbd5e1;transition:background .15s}.dark .option-switch__toggle{background:#475569}.option-switch__toggle::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:999px;background:#fff;box-shadow:0 3px 8px rgba(15,23,42,.22);transition:transform .15s}.option-switch.active{background:#f5f3ff;border-color:#c4b5fd;box-shadow:0 12px 26px rgba(124,58,237,.12)}.dark .option-switch.active{background:rgba(79,70,229,.22);border-color:rgba(129,140,248,.48)}.option-switch.active .option-switch__icon{background:#ede9fe;color:#7c3aed}.dark .option-switch.active .option-switch__icon{background:rgba(129,140,248,.22);color:#c7d2fe}.option-switch.active .option-switch__toggle{background:#7c3aed}.option-switch.active .option-switch__toggle::after{transform:translateX(20px)}.xylophone-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}.scale-pill{min-height:42px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;box-shadow:0 8px 18px rgba(15,23,42,.06)}.notation-toggle{color:#475569}.notation-toggle,.xylophone-toggle{min-height:42px;border:1px solid #e2e8f0;border-radius:16px;background:#f8fafc;box-shadow:0 8px 18px rgba(15,23,42,.06)}.dark .notation-toggle,.dark .scale-pill,.dark .xylophone-toggle{border-color:#334155;background:#0f172a;color:#cbd5e1;box-shadow:0 8px 18px rgba(2,6,23,.2)}.scale-pill{display:inline-flex;align-items:center;padding:0 18px;font-size:13px;font-weight:900;color:#475569}.notation-toggle{display:inline-grid;grid-template-columns:repeat(2,minmax(82px,1fr));padding:4px;gap:4px}.notation-toggle__button,.songbook-tool,.xylophone-toggle{color:#64748b;font-size:11px;font-weight:900;text-transform:uppercase}.notation-toggle__button{min-height:32px;padding:0 12px;border-radius:12px;transition:background .15s,color .15s,box-shadow .15s}.dark .notation-toggle__button{color:#94a3b8}.notation-toggle__button.active{background:#fff;color:#4f46e5;box-shadow:0 6px 14px rgba(79,70,229,.14)}.dark .notation-toggle__button.active{background:#1e1b4b;color:#c7d2fe;box-shadow:0 6px 14px rgba(2,6,23,.3)}.songbook-tool,.xylophone-toggle{display:inline-flex;align-items:center;gap:8px;padding:0 14px;transition:border-color .15s,color .15s,background .15s}.xylophone-toggle.active{border-color:#bae6fd;background:#f0f9ff;color:#0369a1}.dark .xylophone-toggle.active{border-color:rgba(56,189,248,.42);background:rgba(14,165,233,.16);color:#bae6fd}.songbook-tool{justify-content:center;gap:6px;min-height:36px;padding:0 12px;border-radius:14px;background:#f8fafc;font-size:10px;transition:background .15s,color .15s}.dark .songbook-tool{background:#0f172a;color:#cbd5e1}.songbook-tool.active{background:#eef2ff;color:#4f46e5}.dark .songbook-tool.active{background:#1e1b4b;color:#c7d2fe}.songbook-card{display:grid;grid-template-columns:138px minmax(0,1fr);align-items:start;gap:18px;min-height:210px;padding:22px;border:1px solid #e2e8f0;border-radius:28px;background:#fff;color:#0f172a;box-shadow:0 18px 42px rgba(15,23,42,.08);overflow:hidden}.dark .songbook-card{border-color:#334155;background:#1e293b;color:#f8fafc}.songbook-illustration{position:relative;display:grid;grid-template-rows:112px 36px;align-items:center;justify-content:center;align-self:start;gap:12px;width:138px;height:160px;min-height:160px;margin-top:4px;border-radius:22px;background:#f8fafc;overflow:hidden}.dark .songbook-illustration{background:rgba(15,23,42,.34)}.songbook-illustration img{width:86px;height:auto;filter:drop-shadow(0 14px 22px rgba(15,23,42,.16));grid-row:1;align-self:end}.songbook-illustration__note{position:absolute;top:18px;right:22px;width:18px;height:18px;color:#64748b}.songbook-actions,.songbook-content{position:relative;display:flex;justify-content:center}.songbook-content{flex-direction:column;gap:12px;min-width:0;padding:8px 10px;text-align:center}.songbook-actions{grid-row:2;align-self:start}.songbook-lyrics{color:#334155;font-size:clamp(1.05rem,1.55vw,1.45rem);font-weight:800;line-height:1.35;letter-spacing:0;transition:opacity .18s ease,transform .18s ease}.dark .songbook-lyrics{color:#f8fafc}.songbook-line{display:flex;justify-content:center;flex-wrap:wrap;gap:.22em;margin-bottom:.12em}.songbook-line span{display:inline-block}.songbook-word-active{color:#7c3aed;transform:scale(1.04)}.songbook-active{display:flex;flex-direction:column;gap:18px}.songbook-active__phrase,.songbook-guides{display:flex;flex-direction:column;gap:16px}.songbook-guides{align-items:center;gap:8px}.songbook-note-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}.songbook-note-chips span{min-width:32px;padding:6px 10px;border-radius:9px;background:#7c3aed;color:#fff;font-size:12px;font-weight:900;line-height:1;text-transform:uppercase;box-shadow:0 8px 16px rgba(124,58,237,.16);opacity:.68}.songbook-note-chips span.active{opacity:1;transform:translateY(-1px) scale(1.04);box-shadow:0 10px 20px rgba(124,58,237,.28)}.songbook-rhythm-row{display:flex;justify-content:center;gap:14px;margin-top:12px;color:rgba(217,119,6,.68);font-size:26px;font-weight:900;line-height:1}.songbook-rhythm-row span.active{color:#d97706}.about-card{display:flex;flex-direction:column;gap:18px;padding:24px;border:1px solid rgba(226,232,240,.75);border-radius:30px;background:rgba(255,255,255,.78);color:#334155;box-shadow:0 18px 42px rgba(15,23,42,.08);overflow:hidden}.dark .about-card{border-color:rgba(51,65,85,.86);background:rgba(30,41,59,.72);color:#cbd5e1}.about-card__title{color:#6d5dfc;font-size:17px;font-weight:950;line-height:1;letter-spacing:.06em;text-transform:uppercase}.about-card__body{display:block}.about-card__copy{display:flex;flex-direction:column;gap:14px;min-width:0}.about-card__copy p{color:inherit;font-size:14px;font-weight:500;line-height:1.55;margin:0}.site-footer{width:100%;padding:10px 4px 0;color:#64748b;font-size:12px;line-height:1.5;text-align:center}.site-footer a{color:#6366f1;font-weight:800}.dark .site-footer{color:#94a3b8}.dark .site-footer a{color:#818cf8}.songbook-next-line{padding-top:10px;border-top:1px solid #e2e8f0;color:#94a3b8;font-size:14px;font-weight:700;font-style:italic}.songbook-dots{display:flex;justify-content:center;gap:18px;min-height:12px;color:#cbd5e1;font-size:18px;line-height:1;letter-spacing:0}.songbook-notes,.songbook-rhythm{min-height:0;color:#4f46e5;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}@media (max-width:720px){.songbook-card{grid-template-columns:1fr}.songbook-illustration{width:100%}.songbook-content{padding:0}.songbook-actions{position:static;display:flex;order:-1}.songbook-actions,.xylophone-controls{justify-content:center}.notation-toggle,.scale-pill,.xylophone-toggle{width:100%;justify-content:center}}.utility-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.utility-pill{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:8px 14px;border:1px solid #e2e8f0;border-radius:999px;color:#64748b;font-size:11px;font-weight:900;line-height:1.1;text-transform:uppercase;transition:background .15s,border-color .15s,color .15s}.utility-pill:hover{border-color:#c4b5fd;color:#4f46e5}.utility-pill.active{background:#eef2ff;border-color:#a5b4fc;color:#4f46e5}@media (max-width:520px){.action-grid{gap:10px}.action-button{min-height:106px;font-size:12px}.action-button__icon{width:56px;height:56px;border-radius:20px}}.scrollbar-hide::-webkit-scrollbar{display:none}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none}