:root{--bg: #ffeeda;--panel: #fffaf1;--panel-2: #fdeedd;--border: rgba(69, 52, 101, .12);--text: #453465;--muted: #8d80a8;--primary: #f97c5d;--primary-strong: #f25a48;--gold: #f2b344;--green: #1fb4a2;--amber: #e8964a;--red: #ea5a52;--right-hand: #1fb4a2;--left-hand: #8f7ef4;--lavender: #b9a5e8;--rose: #f6a9b4;--peach: #ffd9a8;--paper: #fff6e9;--ink-06: rgba(69, 52, 101, .06);--ink-09: rgba(69, 52, 101, .09);--shadow: 0 12px 30px rgba(69, 52, 101, .16);--shadow-soft: 0 4px 14px rgba(69, 52, 101, .1)}*{box-sizing:border-box}html,body,#root{height:100%}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior:none}body{margin:0;background:linear-gradient(180deg,#ffeeda,#fde2d2 45%,#eddcf3);color:var(--text);font-family:ui-rounded,SF Pro Rounded,Segoe UI Rounded,Quicksand,Nunito,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.5;overscroll-behavior:none}button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-family:inherit}h1,h2,h3{letter-spacing:-.3px}.lucide{width:1em;height:1em;vertical-align:-.125em;flex-shrink:0}.app{display:flex;flex-direction:column;height:100%;padding-top:env(safe-area-inset-top);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left)}@supports (height: 100dvh){.app{height:100dvh}}.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;transition:opacity .3s}.app.backdrop-muted .backdrop{opacity:.42}.backdrop-sun{position:absolute;top:6%;right:7%;width:clamp(80px,11vw,140px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 35%,#ffe7bd,#f7b56d 75%);box-shadow:0 0 0 16px #ffcd9440,0 0 0 38px #ffcd941f,0 10px 60px #ffab708c;animation:sun-float 9s ease-in-out infinite}.backdrop-cloud{position:absolute;height:16px;border-radius:999px;background:#ffffffa6;box-shadow:22px -10px 0 -2px #ffffff8c;animation:cloud-drift linear infinite}.backdrop-cloud.c1{top:14%;width:110px;animation-duration:95s}.backdrop-cloud.c2{top:26%;width:70px;height:12px;animation-duration:140s;animation-delay:-60s}.backdrop-scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(32vh,290px);display:block;opacity:.9}@keyframes sun-float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes cloud-drift{0%{transform:translate(-20vw)}to{transform:translate(115vw)}}.app-nav,.app-main{position:relative;z-index:1}.app-nav{z-index:2}.app-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 16px 6px;padding:8px 12px;border:1px solid rgba(255,255,255,.75);border-radius:999px;background:#fffaf1d1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow-soft)}.brand{display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--text);font-size:18px;font-weight:800;letter-spacing:-.3px;cursor:pointer;padding:4px 12px 4px 6px;border-radius:999px;transition:background .15s}.brand:hover{background:var(--ink-06)}.brand-logo{width:30px;height:30px;display:block}.nav-actions{display:flex;gap:4px;align-items:center}.app-main{flex:1;overflow-y:auto;display:flex;flex-direction:column;overscroll-behavior:contain}.screen{width:min(1080px,100%);margin:0 auto;padding:24px 20px 60px}.screen-header{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px}.screen-header h1{margin:0 0 4px;font-size:28px;font-weight:800}.loading{padding:48px;text-align:center;color:var(--muted)}.loading:before{content:"🎵";display:block;font-size:34px;animation:note-bounce 1s ease-in-out infinite}@keyframes note-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px) rotate(-8deg)}}.btn{background:var(--panel);color:var(--text);border:1.5px solid var(--border);border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 0 var(--ink-09);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,border-color .18s,background .18s,color .18s}.btn:hover:not(:disabled){transform:translateY(-2px);border-color:#45346547;box-shadow:0 6px 14px #4534652e}.btn:active:not(:disabled){transform:translateY(0) scale(.96)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:linear-gradient(135deg,#ff9a6b,#f4634e);border-color:transparent;color:#fff;box-shadow:0 6px 16px #f4634e61}.btn.primary:hover:not(:disabled){filter:brightness(1.06);box-shadow:0 9px 20px #f4634e73}.btn.danger{background:transparent;border-color:var(--red);color:var(--red);box-shadow:none}.btn.subtle{background:none;border-color:transparent;box-shadow:none;color:var(--muted)}.btn.subtle:hover,.btn.subtle.active{color:var(--text)}.nav-actions .btn.subtle.active{background:#fff;color:var(--primary-strong);box-shadow:var(--shadow-soft)}.btn.large{font-size:17px;padding:13px 26px}.btn.tempo.active{background:var(--primary);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 4px 12px #f97c5d66}.btn-link{background:none;border:none;color:var(--primary-strong);cursor:pointer;font-size:inherit;font-weight:700;padding:0;text-decoration:underline}.chip{display:inline-block;border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:600;background:var(--ink-06);border:none;white-space:nowrap}.chip.good{color:#0d8577;background:#1fb4a229}.chip.warn{color:#ad6a12;background:#eea23e33}.chip.bad{color:#ce3d46;background:#f2545c29}.chip.subtle,.muted{color:var(--muted)}.small{font-size:12.5px}.row.gap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.error-box{background:#f2545c1f;border:1.5px solid rgba(234,90,82,.5);border-radius:14px;padding:10px 14px;color:#c23a3a}.hint{color:#ad6a12;font-size:14px}.hint.good{color:#0d8577}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}.confetti i{position:absolute;top:-14px;left:var(--cx, 50%);width:9px;height:13px;border-radius:3px;background:var(--cc, var(--gold));opacity:0;animation:confetti-fall var(--ct, 1.7s) ease-in var(--cd, 0s) forwards}.confetti i:nth-child(3n){width:8px;height:8px;border-radius:50%}@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}to{opacity:.9;transform:translateY(min(70vh,460px)) rotate(560deg)}}.song-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:28px}.level-section-header{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0 0 12px}.level-section-header h2{margin:0;font-size:19px}.level-chip{display:inline-flex;align-items:center;gap:6px;align-self:center}button.level-chip{cursor:pointer;font-family:inherit}.level-chip.level-unlocked{color:#2e7d32;background:#5dbb6329}.level-chip.level-locked{color:var(--muted);background:var(--ink-06)}button.level-chip.level-locked:hover{background:var(--ink-09);color:var(--text)}.song-card{background:var(--panel);border:1px solid rgba(255,255,255,.75);border-radius:20px;padding:12px 14px 16px;cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s}.song-card:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--shadow)}.song-card h3{margin:10px 0 2px;font-size:17px;font-weight:700}.song-art{position:relative;height:84px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:40px;margin-bottom:12px;overflow:hidden}.song-art:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.13) 0 12px,transparent 12px 26px)}.song-art:after{content:"";position:absolute;top:9px;right:12px;width:22px;height:22px;border-radius:50%;background:#fff6;box-shadow:0 0 0 6px #ffffff26}.song-art .art-emoji{position:relative;filter:drop-shadow(0 3px 4px rgba(40,25,70,.25));transition:transform .2s}.song-card:hover .art-emoji{animation:note-bounce .55s ease-in-out}.cat-classical{background:linear-gradient(135deg,#c1aef0,#7f6fd0)}.cat-movies{background:linear-gradient(135deg,#f9b8c4,#e8708f)}.cat-games{background:linear-gradient(135deg,#6fd8c8,#2b9d9a)}.cat-pop{background:linear-gradient(135deg,#ffbe78,#f4746a)}.cat-folk{background:linear-gradient(135deg,#b5dd92,#5aa877)}.cat-other{background:linear-gradient(135deg,#ffd9a8,#eea23e)}.song-card-top{display:flex;justify-content:space-between;align-items:center}.difficulty{color:var(--gold);letter-spacing:1px;font-size:13px;text-shadow:0 1px 3px rgba(242,179,68,.35)}.license-badge{font-size:12px;color:var(--muted);margin:6px 0 0}.skill-verdict{white-space:nowrap}.chip.skill-verdict.verdict-ready{background:#5dbb6329;color:#2e7d32}.chip.skill-verdict.verdict-slow-down{background:#5ea5e929;color:#1565c0}.chip.skill-verdict.verdict-close{background:#f2b3442e;color:#a5700e}.chip.skill-verdict.verdict-not-yet{background:#e05c5c24;color:#b03a3a}.skill-assessment{margin:10px 0 4px;padding:10px 14px;border-radius:12px;background:var(--panel, rgba(255, 255, 255, .65));border:1px solid rgba(0,0,0,.08);font-size:14px;line-height:1.5}.skill-assessment.verdict-ready{border-color:#5dbb6373}.skill-assessment.verdict-slow-down{border-color:#5ea5e973}.skill-assessment.verdict-close{border-color:#f2b34480}.skill-assessment.verdict-not-yet{border-color:#e05c5c73}.skill-assessment .skill-missing em{font-style:normal;font-weight:600}.skill-assessment .btn-link{padding:0;font-size:inherit}.fav-btn{position:absolute;top:8px;left:10px;z-index:1;width:32px;height:32px;padding:0;border:none;border-radius:50%;background:#fff6;font-size:15px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}.fav-btn:hover{transform:scale(1.15);background:#ffffffa6}.fav-btn.active{background:#ffffffbf;color:var(--red)}.preview-btn{position:absolute;top:8px;right:10px;z-index:1;width:34px;height:34px;padding:0;border:none;border-radius:50%;background:#fff6;color:var(--primary-strong);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .15s,background .15s}.preview-btn:hover{transform:scale(1.12);background:#ffffffb8}.preview-btn.playing{background:#ffffffd1}.preview-icon{position:relative;z-index:1;font-size:13px;line-height:1;transform:translate(.5px)}.preview-btn.playing .preview-icon{transform:none}.preview-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.preview-ring-track{fill:none;stroke:#4534652e;stroke-width:2.5}.preview-ring-value{fill:none;stroke:var(--primary-strong);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .12s linear}.preview-btn.loading .preview-icon{animation:preview-pulse .9s ease-in-out infinite}@keyframes preview-pulse{0%,to{opacity:.4}50%{opacity:1}}.song-art:after{display:none}.song-user-controls{display:flex;align-items:center;gap:8px;margin-top:6px}.song-user-controls .fav-btn{position:static;background:#45346514}.song-user-controls .fav-btn:hover{background:#45346529}.rating-stars{display:inline-flex}.rating-star{background:none;border:none;padding:0 2px;font-size:20px;line-height:1;cursor:pointer;color:#45346559;transition:transform .12s,color .12s}.rating-star.filled{color:var(--gold);text-shadow:0 1px 3px rgba(242,179,68,.35)}.rating-star:hover{transform:scale(1.2)}.delete-btn{margin-top:8px;font-size:12.5px}.import-zone{border:2.5px dashed rgba(69,52,101,.25);border-radius:20px;padding:18px;text-align:center;background:#fffaf1a6;transition:border-color .15s,background .15s,transform .15s}.import-zone.drag-over{border-color:var(--primary);background:#ffd9a859;transform:scale(1.01)}.ai-zone{margin-top:22px;padding:20px 22px;border-radius:22px;background:linear-gradient(135deg,#ffd9a880,#b9a5e847);border:1.5px solid var(--border);box-shadow:var(--shadow-soft)}.ai-zone-head{display:flex;align-items:flex-start;gap:14px}.ai-zone-head h2{margin:0 0 3px;font-size:19px}.ai-zone-head p{margin:0}.ai-zone-icon{flex:none;display:grid;place-items:center;width:46px;height:46px;font-size:24px;border-radius:15px;background:linear-gradient(135deg,#ff9a6b,#f4634e);box-shadow:0 6px 16px #f4634e52}.ai-field{display:grid;gap:6px;margin:16px 0 6px}.ai-field-label{margin:14px 0 0;font-size:14px;font-weight:650;color:var(--muted)}.ai-field input{background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:13px;padding:11px 14px;font-size:15px;font-family:inherit}.ai-field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #f97c5d38}.ai-choices{grid-template-columns:repeat(3,1fr);gap:8px;max-width:none}.ai-choices .choice-btn{align-items:center;text-align:center;padding:10px 8px}.ai-lengths{margin:12px 0 4px}.ai-lengths .cat-chip{flex-direction:column;gap:1px;padding:8px 16px;text-align:center}.ai-lengths .cat-chip .small{font-weight:500}.ai-generate{margin-top:18px;width:100%;padding:12px 18px;font-size:16px}.ai-note{margin:10px 0 0}.ai-thinking{display:grid;justify-items:center;gap:6px;padding:26px 12px 20px;text-align:center}.ai-thinking-notes{display:flex;gap:10px;font-size:30px;color:var(--primary-strong);margin-bottom:4px}.ai-thinking-notes span{animation:ai-bob .9s ease-in-out infinite}.ai-thinking-notes span:nth-child(2){animation-delay:.15s}.ai-thinking-notes span:nth-child(3){animation-delay:.3s}@keyframes ai-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.license-badge.ai{color:var(--primary-strong);font-weight:650}@media(prefers-reduced-motion:reduce){.ai-thinking-notes span{animation:none}}.progress-track{height:10px;border-radius:999px;background:var(--ink-09);overflow:hidden;margin-bottom:20px}.progress-track.small{height:6px;margin:10px 0 0}.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--primary-strong));border-radius:999px;transition:width .45s cubic-bezier(.34,1.3,.64,1)}.stars .star{color:#4534652e;display:inline-block}.stars .star.filled{color:var(--gold);text-shadow:0 2px 6px rgba(242,179,68,.5);animation:star-pop .5s cubic-bezier(.34,1.56,.64,1) backwards}.stars .star.filled:nth-child(2){animation-delay:.12s}.stars .star.filled:nth-child(3){animation-delay:.24s}.stars.large{font-size:34px;letter-spacing:4px}@keyframes star-pop{0%{transform:scale(0) rotate(-40deg);opacity:0}70%{transform:scale(1.3) rotate(6deg)}to{transform:scale(1) rotate(0);opacity:1}}.island-screen{padding-bottom:8px;--panel-width: 340px;--panel-gap: 24px;--panel-top: 94px;--panel-side: 20px}.island-map-wrap{padding-bottom:32px}.island-map-wrap.with-detail-panel .island-map-col{margin-left:calc(var(--panel-width) + var(--panel-gap))}.island-detail-panel{position:fixed;width:var(--panel-width);top:calc(env(safe-area-inset-top) + var(--panel-top));bottom:calc(env(safe-area-inset-bottom) + 14px);left:max(calc(var(--panel-side) + env(safe-area-inset-left)),calc((100vw - 1080px) / 2 + var(--panel-side) + env(safe-area-inset-left)));display:flex;flex-direction:column;gap:14px}.island-screen .screen-header{margin-left:calc(var(--panel-width) + var(--panel-gap))}.island-detail-panel-card{display:flex;flex-direction:column;gap:5px;padding:20px 22px 22px;background:#fffaf1f2;border:1px solid rgba(255,255,255,.85);border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:left;flex:1;min-height:0;overflow-y:auto}.island-detail-panel-card.empty{align-items:center;justify-content:center;text-align:center}.island-detail-panel-summary{flex:0 1 auto}.island-detail-panel-summary .progress-track.small{margin-top:2px}.island-detail-panel-summary .skill-assessment{margin:4px 0 0}.island-panel-summary-details{display:flex;flex-direction:column;gap:5px}.island-panel-summary-details summary{cursor:pointer;color:var(--muted);font-size:12px;font-weight:700;list-style-position:outside}.island-panel-summary-details[open] summary{color:var(--text)}.island-panel-back{align-self:flex-start;margin:-8px 0 0 -12px;padding:4px 12px;font-size:13px}.island-panel-title{margin:0;font-size:19px;font-weight:800;line-height:1.3}.island-panel-chapter{display:flex;flex-direction:column;gap:2px;margin-top:12px;padding-top:10px;border-top:1.5px dashed var(--border)}.island-panel-chapter-title{font-size:15px}.island-detail-panel-card .island-callout-play{margin-top:auto}.island-map{position:relative;width:100%;max-width:900px;margin:0 auto}.island-trail{position:absolute;inset:0;display:block;pointer-events:none}.trail-seg{fill:none;stroke-linecap:round}.trail-seg.done{stroke:var(--gold);stroke-width:8;opacity:1}.trail-seg.active{stroke:var(--primary);stroke-width:8;stroke-dasharray:.5 13.5;animation:trail-march 1.5s linear infinite}.trail-seg.locked{stroke:#45346561;stroke-width:5.5;stroke-dasharray:.5 12}@keyframes trail-march{to{stroke-dashoffset:-14}}.trail-note{-webkit-user-select:none;user-select:none}.island-node{position:absolute;transform:translate(-50%,-54%);background:none;border:none;padding:0;display:flex;flex-direction:column;align-items:center;color:var(--text);cursor:pointer;z-index:2;transition:scale .2s cubic-bezier(.34,1.56,.64,1);content-visibility:auto;contain-intrinsic-size:165px 225px}.island-node.current,.island-node.selected{content-visibility:visible;z-index:3}.island-node.current{scale:1.05}.island-jump-current{position:sticky;top:14px;z-index:6;display:block;margin:0 auto 8px;box-shadow:0 8px 22px #1f144247}.island-node:hover,.island-node:focus-visible{scale:1.08;z-index:4}.island-node:focus-visible{outline:none}.island-node:before{content:"";position:absolute;left:50%;top:calc(var(--island-size, 94) * 1.02px);width:calc(var(--island-size, 94) * .62px);height:calc(var(--island-size, 94) * .16px);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#45346561,#45346500 74%);pointer-events:none}.island-node.locked:before{opacity:.65}.island-art{display:block;filter:drop-shadow(0 3px 3px rgba(93,74,134,.3)) drop-shadow(0 14px 12px rgba(69,52,101,.26));animation:island-float 7s ease-in-out infinite;animation-delay:var(--float-delay, 0s)}.island-node.locked .island-art{filter:grayscale(.85) brightness(.98) contrast(.94) drop-shadow(0 3px 3px rgba(93,74,134,.28)) drop-shadow(0 12px 10px rgba(69,52,101,.22));animation:none}.island-node.locked:hover .island-art,.island-node.locked:focus-visible .island-art,.island-node.locked.selected .island-art{filter:grayscale(.35) drop-shadow(0 3px 3px rgba(93,74,134,.28)) drop-shadow(0 12px 10px rgba(69,52,101,.22))}@keyframes island-float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.island-halo{position:absolute;left:50%;top:44%;width:115%;aspect-ratio:1.35;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#f97c5d61,#f97c5d00 72%);pointer-events:none;opacity:0;transition:opacity .2s}.island-node.selected .island-halo,.island-node:focus-visible .island-halo{opacity:1}.island-node.current .island-halo{opacity:1;width:140%;background:radial-gradient(closest-side,#f97c5d85,#f97c5d00 74%);animation:halo-pulse 2.2s ease-in-out infinite}@keyframes halo-pulse{0%,to{transform:translate(-50%,-50%) scale(.92)}50%{transform:translate(-50%,-50%) scale(1.08)}}.island-num{position:absolute;left:5%;bottom:24%;min-width:30px;height:30px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff9a6b,#f4634e);border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 8px #4534654d,inset 0 -2px #28194626}.island-node.locked .island-num{background:#9d90bb;font-size:13px}.island-node.passed .island-num,.island-node.completed .island-num{background:linear-gradient(135deg,#3fc6b2,#189a89)}.island-node.mastered .island-num{background:linear-gradient(135deg,#ffc95c,#f0a12e);box-shadow:0 0 0 3px #f2b3444d,0 3px 8px #45346540}.island-current-badge{cursor:pointer;position:absolute;top:-36px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:5px;padding:5px 13px;border-radius:999px;background:linear-gradient(135deg,#ff9a6b,var(--primary-strong));color:#fff;font-size:14px;font-weight:800;white-space:nowrap;border:2px solid rgba(255,255,255,.95);box-shadow:0 6px 16px #f25a486b;animation:map-bounce 1.4s ease-in-out infinite;z-index:2}.island-current-badge:hover{background:linear-gradient(135deg,#ffa87e,#f4634e);box-shadow:0 9px 22px #f25a488c}.island-current-badge:after{content:"";position:absolute;top:100%;left:50%;margin-top:-1px;transform:translate(-50%);border:7px solid transparent;border-top-color:var(--primary-strong);border-bottom:none}@keyframes map-bounce{0%,to{transform:translate(-50%) translateY(0)}50%{transform:translate(-50%) translateY(-7px)}}.island-selected-arrow{position:absolute;top:-12px;left:50%;transform:translate(-50%);z-index:2;filter:drop-shadow(0 4px 8px rgba(242,90,72,.45));animation:map-bounce 1.4s ease-in-out infinite}.island-selected-arrow svg{display:block}.island-selected-arrow path{fill:var(--primary-strong);stroke:#fff;stroke-width:3;stroke-linejoin:round}.island-node-stars{margin-top:-12px;position:relative;z-index:1;font-size:18px;padding:3px 9px 4px;border-radius:999px;background:var(--paper);border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 8px #45346547}.island-node-stars .stars{display:flex;gap:2px}.island-node-stars .star{color:#45346542}.island-unit-marker{position:absolute;left:50%;transform:translate(-50%,-50%);width:min(94%,780px);display:flex;align-items:center;gap:12px;pointer-events:none;z-index:1}.island-unit-marker:before,.island-unit-marker:after{content:"";flex:1;height:2px;border-radius:2px}.island-unit-marker:before{background:linear-gradient(90deg,#5d4a8600,#5d4a8647)}.island-unit-marker:after{background:linear-gradient(90deg,#5d4a8647,#5d4a8600)}.island-unit-marker-pill{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;background:#fffaf1e6;border:1px solid rgba(255,255,255,.85);border-radius:999px;box-shadow:var(--shadow-soft);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:min(420px,86%)}.island-unit-marker-icon{width:34px;height:34px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,#efe4ff,#dbf3ec);display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:inset 0 -2px #28194614}.island-unit-marker-text{display:flex;flex-direction:column;line-height:1.25;white-space:nowrap;overflow:hidden}.island-unit-marker-text strong{font-size:14px;overflow:hidden;text-overflow:ellipsis}button.island-unit-marker-pill{pointer-events:auto;cursor:pointer;font:inherit;color:inherit;text-align:left;transition:transform .15s ease,box-shadow .15s ease}button.island-unit-marker-pill:hover,button.island-unit-marker-pill:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow)}.unit-intro-backdrop{position:fixed;inset:0;z-index:50;background:#23163a8c;display:flex;align-items:center;justify-content:center;padding:24px;overflow-y:auto}.unit-intro-card{max-width:480px;max-height:85vh;overflow-y:auto;text-align:left;animation:callout-in .18s cubic-bezier(.34,1.3,.64,1)}.unit-intro-icon{display:block;font-size:34px;margin-bottom:6px}.unit-intro-card .island-callout-close{top:16px;right:16px}.course-intro-card{max-width:520px;text-align:center}.course-intro-card .skip-link{margin-bottom:0}.unlock-banner{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 12px;border-radius:14px;background:#f2b3442e;border:1px dashed rgba(242,179,68,.55)}.unlock-banner-icon{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:var(--gold);color:#fff;font-size:17px}.unlock-banner-text{display:flex;flex-direction:column;gap:2px;flex:1 1 150px}.unlock-banner .btn.primary{white-space:nowrap;flex:1 1 auto}.unlock-banner .unlock-banner-close{top:-7px;right:-7px}.island-callout{position:absolute;transform:translate(-50%,-100%);width:max-content;max-width:min(300px,calc(100vw - 24px));z-index:6;pointer-events:none}.island-callout.below{transform:translate(-50%)}.island-callout-card{pointer-events:auto;position:relative;display:flex;flex-direction:column;gap:5px;padding:12px 16px 14px;background:#fffaf1f2;border:1px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-align:left;transform-origin:50% 100%;animation:callout-in .18s cubic-bezier(.34,1.3,.64,1)}.island-callout.below .island-callout-card{transform-origin:50% 0%}@keyframes callout-in{0%{opacity:0;transform:scale(.85)}}.island-callout-kicker{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px}.island-callout-title{font-size:16px;line-height:1.3}.island-callout-score{display:flex;align-items:center;gap:8px}.island-callout-play{width:100%;margin-top:5px}.island-callout-locked{margin-top:5px;padding:8px 12px;border-radius:12px;background:var(--ink-06);color:var(--muted);font-size:12.5px;font-weight:600;text-align:center}.island-callout-close{position:absolute;top:-9px;right:-8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--panel);color:var(--muted);cursor:pointer;box-shadow:var(--shadow-soft);font-size:12px;line-height:1}.island-callout-close:hover{color:var(--text)}.island-callout-arrow{position:absolute;left:50%;bottom:-7px;width:14px;height:14px;background:#fffaf1f2;border-right:1px solid rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.85);transform:translate(-50%) rotate(45deg);box-shadow:3px 3px 6px #45346512}.island-callout.below .island-callout-arrow{bottom:auto;top:-7px;border:none;border-left:1px solid rgba(255,255,255,.85);border-top:1px solid rgba(255,255,255,.85);box-shadow:-2px -2px 5px #4534650d}.practice-screen{display:flex;flex-direction:column;height:100%;max-width:none;width:100%;padding:0}.practice-header{display:flex;align-items:center;gap:14px;padding:10px 16px;background:#fffaf1cc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.practice-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.practice-status{display:flex;gap:8px;align-items:center}.position-bar{height:5px;background:var(--ink-09)}.position-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;will-change:transform;background:linear-gradient(90deg,var(--gold),var(--primary-strong));border-radius:0 999px 999px 0}.practice-stage{position:relative;flex:1;display:flex;flex-direction:column;min-height:0;background:radial-gradient(120% 42% at 50% 100%,#ffb06e73,#ffb06e00 70%),radial-gradient(rgba(255,255,255,.5) 1px,transparent 1.7px),radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.5px),linear-gradient(180deg,#2e2150,#4d3877 48%,#8a5387 80%,#c96f77);background-size:100% 100%,260px 260px,170px 170px,100% 100%;background-position:0 0,40px 60px,120px 10px,0 0}.notation-strip{flex-shrink:0;height:56%;max-height:440px;background:var(--paper);border-bottom:1px solid rgba(69,52,101,.18)}@media(pointer:coarse)and (min-height:561px){.notation-strip{height:64%;max-height:560px}}.notation-canvas,.notation-static{display:block;width:100%;height:100%}.stage-filler{flex:1;min-height:0}.view-toggle{display:flex;gap:2px;background:var(--ink-09);border-radius:999px;padding:3px}.view-toggle .btn{border:none;box-shadow:none;background:transparent;border-radius:999px;padding:5px 12px;font-size:12px;white-space:nowrap}.view-toggle .btn:hover:not(:disabled){transform:none;box-shadow:none}.view-toggle .btn.active{background:#fff;color:var(--primary-strong);box-shadow:0 2px 6px #4534652e}.countdown-overlay{position:absolute;inset:0 0 30%;display:flex;align-items:center;justify-content:center;font-size:110px;font-weight:800;color:#fff7ec;text-shadow:0 0 40px rgba(255,200,130,.8),0 4px 30px rgba(30,18,55,.6);pointer-events:none}.countdown-num{display:inline-block;animation:countdown-pop .5s cubic-bezier(.34,1.56,.64,1)}@keyframes countdown-pop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1)}}.overlay-panel{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);background:#fffaf1f7;border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:30px 30px 26px;width:min(560px,calc(100% - 32px));text-align:center;box-shadow:0 24px 70px #1e123773;z-index:5;overflow:hidden}.overlay-panel:before,.theory-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--green),var(--gold),var(--primary),var(--left-hand))}.overlay-panel h2{margin:0 0 6px;font-size:24px}.tempo-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 0;flex-wrap:wrap}.ready-panel .row.gap{margin:16px 0 10px}.accuracy-big{font-size:44px;font-weight:800;margin:4px 0 10px;background:linear-gradient(135deg,var(--gold),var(--primary-strong));-webkit-background-clip:text;background-clip:text;color:transparent}.stat-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}.results-panel .row.gap{margin-top:14px}.keyboard{position:relative;height:clamp(110px,16vh,150px);background:linear-gradient(180deg,#241a3e,#1a1230);border-top:2px solid rgba(10,5,25,.5);flex-shrink:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.key{position:absolute;top:0;border-radius:0 0 6px 6px;cursor:pointer}.key.white{height:100%;background:linear-gradient(180deg,#fffdf6,#f8f0e0 86%,#e6d8c2);border:1px solid #d9c8ae;border-top:none;z-index:1}.key.black{height:62%;background:linear-gradient(180deg,#4a3a68,#2c2148 82%,#1d1533);border:1px solid #170f2b;border-top:none;z-index:2}.key.white.pressed{background:linear-gradient(180deg,#ffe6c8,#ffcda2)}.key.black.pressed{background:linear-gradient(180deg,#6a559a,#453370)}.key.white.expected-right{background:linear-gradient(180deg,#d7f7ef,#59d3bf);border-color:var(--right-hand)}.key.black.expected-right{background:linear-gradient(180deg,#23b39e,#0e7c6d)}.key.white.expected-left{background:linear-gradient(180deg,#e8e2fd,#ab9df7);border-color:var(--left-hand)}.key.black.expected-left{background:linear-gradient(180deg,#8f7ef4,#5b4ac9)}.key-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;color:#a1906f;pointer-events:none}.settings-screen{max-width:720px}.settings-section{background:var(--panel);border:1px solid rgba(255,255,255,.75);border-radius:20px;padding:16px 20px;margin-bottom:16px;box-shadow:var(--shadow-soft)}.settings-section h2{margin:0 0 8px;font-size:18px}.settings-row{display:flex;align-items:center;gap:12px;margin:10px 0}.settings-row select{background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:12px;padding:6px 10px;font-size:14px;font-family:inherit}.settings-row input[type=checkbox]{accent-color:var(--primary)}.settings-version{text-align:center;margin:4px 0 12px}.admin-screen{max-width:980px}.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}.admin-card{display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid rgba(255,255,255,.75);border-radius:20px;padding:14px 16px;box-shadow:var(--shadow-soft)}.admin-card-value{font-size:26px;font-weight:700;letter-spacing:-.5px}.admin-card-label{font-size:13px;font-weight:600}.admin-card-hint{font-size:12px}.admin-chart{margin:8px 0 18px}.admin-bars{display:flex;align-items:flex-end;gap:2px;height:120px;padding:4px 2px 0;border-bottom:1.5px solid var(--border)}.admin-bar{flex:1;display:flex;align-items:flex-end;height:100%;min-width:4px}.admin-bar-fill{width:100%;border-radius:4px 4px 0 0}.admin-chart-axis{display:flex;justify-content:space-between;font-size:12px;margin-top:4px}.admin-chart-summary{margin:6px 0 0;font-size:13px}.admin-unit-row{display:grid;grid-template-columns:minmax(150px,220px) 1fr minmax(170px,auto);align-items:center;gap:12px;margin:8px 0}.admin-unit-title{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-unit-bar{position:relative;height:12px;border-radius:6px;background:var(--ink-06);overflow:hidden}.admin-unit-bar-started,.admin-unit-bar-completed{position:absolute;inset:0 auto 0 0;border-radius:6px}.admin-unit-bar-started{background:var(--lavender)}.admin-unit-bar-completed{background:var(--green)}.admin-unit-counts{font-size:12px;text-align:right}.admin-table-wrap{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;font-size:14px}.admin-table th,.admin-table td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap}.admin-table th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}.admin-table td code{background:var(--ink-06);border-radius:6px;padding:1px 6px;font-size:13px}.admin-generated-at{text-align:center;font-size:12px;margin:4px 0 16px}@media(max-width:760px){.admin-unit-row{grid-template-columns:1fr;gap:4px}.admin-unit-counts{text-align:left}}.device-list{margin:6px 0;padding-left:4px;list-style:none}.skill-catalog{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}.skill-category-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}.skill-chips{display:flex;flex-wrap:wrap;gap:6px}.theory-banner{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:linear-gradient(120deg,#efe4ff,#dbf3ec);border:1px solid rgba(255,255,255,.85);border-radius:20px;padding:14px 18px;margin-bottom:20px;color:var(--text);cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.theory-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.theory-banner-icon{font-size:26px;width:52px;height:52px;border-radius:50%;background:#fffc;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:var(--shadow-soft)}.theory-banner-text{flex:1;display:flex;flex-direction:column}.theory-banner-cta{background:var(--primary);color:#fff;font-weight:700;white-space:nowrap;border-radius:999px;padding:8px 16px;box-shadow:0 4px 12px #f97c5d66}.ai-banner{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:linear-gradient(120deg,#ffe6cf,#efe0ff);border:1px solid rgba(255,255,255,.85);border-radius:20px;padding:14px 18px;margin:22px 0;color:var(--text);cursor:pointer;box-shadow:var(--shadow-soft);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}.ai-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.ai-banner-icon{font-size:24px;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,#ff9a6b,#f4634e);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 6px 16px #f4634e52}.ai-banner-text{flex:1;display:flex;flex-direction:column}.ai-banner-cta{background:var(--primary);color:#fff;font-weight:700;white-space:nowrap;border-radius:999px;padding:8px 16px;box-shadow:0 4px 12px #f97c5d66}.theory-card{background:var(--panel);border:1px solid rgba(255,255,255,.75);border-radius:24px;padding:26px 28px;max-width:760px;margin:0 auto;position:relative;overflow:hidden;box-shadow:var(--shadow)}.theory-card h2{margin-top:0}.theory-card-example{margin:16px 0}.example-notation{width:100%;height:150px;display:block;background:var(--paper);border:1px solid rgba(69,52,101,.15);border-radius:12px}.example-keyboard{height:110px}.sized-keyboard{position:relative;border-radius:10px;overflow:hidden}.sized-keyboard .keyboard{height:100%;border-top:none}.theory-card-nav{display:flex;align-items:center;justify-content:space-between;margin-top:18px;gap:12px;flex-wrap:wrap}.theory-result{text-align:center}.row.gap.center{justify-content:center;flex-wrap:wrap}.theory-exercise-panel{background:var(--panel);border:1px solid rgba(255,255,255,.75);border-radius:24px;padding:20px 24px;max-width:860px;margin:0 auto;box-shadow:var(--shadow-soft)}.exercise-progress{margin:0 0 10px}.quiz-prompt{margin:4px 0 12px;font-size:20px;font-weight:700}.quiz-example{margin-bottom:14px}.quiz-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.quiz-choice{padding:12px 14px;font-size:15px;border-radius:16px}.quiz-choice.correct{border-color:var(--green);background:#1fb4a229;color:#0d8577}.quiz-choice.wrong{border-color:var(--red);background:#f2545c24;color:#ce3d46;animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-3px)}}.quiz-skip{margin-top:14px}.quiz-feedback{margin-top:14px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}.hint.bad{color:#ce3d46}.exercise-notation{width:100%;height:170px;display:block;background:var(--paper);border:1px solid rgba(69,52,101,.15);border-radius:12px}.exercise-keyboard{height:120px;margin-top:14px}.rhythm-keyboard{height:90px}.play-feedback{min-height:22px;margin:8px 0 0;font-weight:700}.play-feedback.ok{color:#0d8577}.play-feedback.bad{color:#ce3d46}.key-find-prompt{font-size:26px;margin:18px 0}.key-find-prompt strong{font-size:34px;color:var(--primary-strong);margin-left:6px}.flash-icon{margin-left:12px;font-weight:700}.flash-icon.ok{color:#0d8577}.flash-icon.bad{color:#ce3d46}.rhythm-controls{margin:14px 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start}.account-toggle{margin-bottom:12px}.account-form{display:grid;gap:10px;max-width:360px;margin-top:8px}.account-form label{display:grid;gap:4px;font-size:14px;color:var(--muted)}.account-form input{background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:12px;padding:8px 12px;font-size:14px;font-family:inherit}.account-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #f97c5d38}.account-form .btn{justify-self:start}.account-details{margin-top:12px}.account-details summary{cursor:pointer;color:var(--muted)}.account-details[open] summary{color:var(--text)}.account-nav{margin-left:6px}.google-signin{display:grid;gap:10px;max-width:360px;margin-top:4px}.auth-divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;text-transform:lowercase}.auth-divider:before,.auth-divider:after{content:"";flex:1;border-top:1.5px solid var(--border)}.google-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#3c4043;border:1.5px solid var(--border);justify-self:start}.google-btn:hover:not(:disabled){background:#f6f9ff}.gsi-button{min-height:44px}.nav-google{position:relative;display:flex;align-items:center;margin-left:6px}.nav-gsi{display:flex;align-items:center;min-height:40px}.nav-google-btn{padding:7px 14px;font-size:14px}.nav-google-error{position:absolute;top:calc(100% + 12px);right:0;z-index:40;width:max-content;max-width:min(340px,80vw);text-align:left;font:inherit;font-size:13.5px;cursor:pointer;box-shadow:var(--shadow-soft)}.onboarding-screen{width:min(680px,100%)}.onboarding-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.onboarding-brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:18px}.onboarding-progress{display:flex;gap:8px}.onboarding-progress .dot{width:10px;height:10px;border-radius:50%;background:var(--ink-09);transition:background .2s,transform .2s}.onboarding-progress .dot.done{background:var(--gold)}.onboarding-progress .dot.active{background:var(--primary);transform:scale(1.3)}.lang-switch{display:flex;gap:4px}.lang-switch .lang-choice{padding:6px 10px;font-size:13px}.lang-switch .lang-choice.active{background:var(--primary);color:#fff}.onboarding-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid rgba(255,255,255,.8);border-radius:24px;padding:26px 28px 24px;box-shadow:var(--shadow)}.onboarding-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--green),var(--gold),var(--primary),var(--left-hand))}.onboarding-card.centered{text-align:center}.onboarding-card h1{margin:8px 0 6px;font-size:30px}.onboarding-card h2{margin:4px 0 6px;font-size:23px}.onboarding-card>.muted{margin-top:0}.onboarding-hero{font-size:54px;line-height:1.15;margin-top:4px}.onboarding-bullets{list-style:none;margin:16px auto 4px;padding:0;max-width:430px;text-align:left;display:grid;gap:9px}.onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.onboarding-actions.center{justify-content:center}.skip-link{display:block;margin:14px auto 2px;color:var(--muted);text-align:center}.onboarding-name{display:grid;gap:5px;margin:14px 0 16px;max-width:340px;font-size:14px;color:var(--muted)}.onboarding-name-row{display:flex;gap:8px;align-items:stretch}.onboarding-name-row input{flex:1 1 auto;min-width:0}.avatar-toggle{flex:0 0 auto;font-size:24px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:12px;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,box-shadow .15s,background .15s}.avatar-toggle:hover{transform:translateY(-1px) scale(1.05);border-color:var(--primary)}.avatar-toggle[aria-expanded=true]{border-color:var(--primary);background:#fff4ec;box-shadow:0 0 0 3px #f97c5d38}.onboarding-name input{background:#fff;color:var(--text);border:1.5px solid var(--border);border-radius:12px;padding:9px 12px;font-size:15px;font-family:inherit}.onboarding-name input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #f97c5d38}.onboarding-field-label{margin:0 0 8px;font-size:14px;color:var(--muted)}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:10px;max-width:430px;margin-bottom:14px}.avatar-choice{font-size:27px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--border);border-radius:16px;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,box-shadow .15s,background .15s}.avatar-choice:hover{transform:translateY(-2px) scale(1.05)}.avatar-choice.selected{border-color:var(--primary);background:#fff4ec;box-shadow:0 0 0 3px #f97c5d40}.style-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin:14px 0 12px}.style-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:#fff;border:2px solid var(--border);border-radius:18px;padding:14px 15px;font:inherit;color:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,box-shadow .15s,background .15s}.style-card:hover{transform:translateY(-2px)}.style-card.selected{border-color:var(--primary);background:#fff4ec;box-shadow:0 6px 18px #f4634e2e}.style-emoji{font-size:30px;line-height:1}.style-try{margin:4px 0 10px}.onboarding-try-keyboard,.midi-check-keyboard{margin-top:10px;height:110px}.midi-check{display:grid;gap:8px}.midi-wait-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--gold);margin-right:4px;animation:midi-wait-pulse 1.2s ease-in-out infinite}@keyframes midi-wait-pulse{0%,to{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}.choice-list{display:grid;gap:10px;margin:14px 0 4px;max-width:470px}.choice-btn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:#fff;border:2px solid var(--border);border-radius:16px;padding:11px 15px;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}.choice-btn:hover{border-color:#4534654d}.choice-btn.selected{border-color:var(--primary);background:#fff4ec;box-shadow:0 4px 14px #f4634e24}.choice-btn.unsure{color:var(--muted);font-weight:600;background:transparent;border-style:dashed}.choice-btn.unsure.selected{color:var(--text);background:#fff4ec;border-style:solid}.onboarding-card>.choice-btn.unsure{margin-top:2px}.cat-chips{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 8px}.cat-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--border);border-radius:999px;padding:8px 15px;font:inherit;font-weight:650;color:inherit;cursor:pointer;transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .15s,background .15s}.cat-chip:hover{transform:translateY(-2px)}.cat-chip.selected{border-color:var(--green);background:#1fb4a221}.summary-list{list-style:none;margin:16px 0 6px;padding:0;display:grid;gap:8px;text-align:left}.summary-list button{width:100%;display:flex;align-items:baseline;justify-content:space-between;gap:14px;background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:10px 14px;font:inherit;color:inherit;cursor:pointer;transition:border-color .15s}.summary-list button:hover{border-color:var(--primary)}.summary-k{color:var(--muted);font-weight:600;white-space:nowrap}.summary-v{font-weight:650;text-align:right}.library-taste-hint{margin:-8px 0 14px}.profile-summary{display:flex;align-items:center;gap:14px;margin:10px 0 12px}.profile-summary p{margin:2px 0 0}.profile-avatar{flex:none;width:58px;height:58px;font-size:32px;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid var(--border);border-radius:50%}.mobile-only{display:none!important}.screen-header-action{margin-left:auto}.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;max-width:640px;margin:0 auto;padding:16px 20px;background:var(--panel);border:1.5px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}.consent-banner p{margin:0;flex:1 1 260px;color:var(--text);font-size:14px}.rotate-overlay{display:none;position:fixed;inset:0;z-index:1000;background:linear-gradient(180deg,#ffeeda,#fbd9c8 55%,#e3d1f0);flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}.rotate-overlay:before{content:"";width:110px;height:110px;border-radius:50%;background:radial-gradient(circle at 38% 35%,#ffe7bd,#f7b56d 75%);box-shadow:0 0 0 14px #ffcd9447,0 0 0 30px #ffcd941f;margin-bottom:6px}.rotate-overlay strong{font-size:20px}.rotate-overlay p{margin:0;max-width:320px}.rotate-overlay-icon{font-size:64px;line-height:1;animation:rotate-hint 2.2s ease-in-out infinite}@keyframes rotate-hint{0%,25%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media(pointer:coarse)and (orientation:portrait){.rotate-overlay{display:flex}}@media(pointer:coarse){.btn{min-height:44px;padding:10px 16px}.btn:active:not(:disabled),.song-card:active,.theory-banner:active,.ai-banner:active{filter:brightness(1.05) saturate(1.1)}.view-toggle .btn{min-height:40px;padding:6px 10px}.island-callout-close{width:32px;height:32px;top:-13px;right:-10px;font-size:14px}.quiz-choice{min-height:48px}.settings-row select,.account-form input,.onboarding-name input{font-size:16px;min-height:40px}.settings-row input[type=checkbox]{width:22px;height:22px}.choice-btn,.avatar-choice{min-height:48px}.cat-chip{min-height:44px}.fav-btn{width:40px;height:40px;font-size:18px}.preview-btn{width:42px;height:42px}.preview-icon{font-size:15px}.rating-star{font-size:26px;padding:0 4px}}@media(orientation:landscape)and (max-height:560px){.app-nav{display:none}.mobile-only{display:inline-flex!important;align-items:center;justify-content:center}.mobile-hide{display:none!important}.backdrop-scene{height:22vh}.backdrop-sun{width:64px}.screen{padding:10px 14px 28px}.screen-header{margin-bottom:12px;gap:10px;align-items:center}.screen-header h1{font-size:20px}.loading{padding:24px}.island-map-wrap{padding-bottom:20px}.island-callout{max-width:min(270px,calc(100vw - 20px))}.island-callout-card{padding:10px 13px 12px;gap:4px}.island-screen{--panel-width: 250px;--panel-top: 14px;--panel-side: 14px}.island-detail-panel-card{padding:14px 16px 16px}.island-panel-title{font-size:17px}.island-panel-chapter{margin-top:6px;padding-top:6px}.song-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:18px}.song-card{padding:10px 12px 12px}.song-art{height:56px;font-size:28px;margin-bottom:8px}.theory-banner{padding:10px 14px;margin-bottom:14px}.ai-banner{padding:10px 14px;margin:14px 0}.theory-banner-icon,.ai-banner-icon{width:42px;height:42px;font-size:20px}.import-zone{padding:12px}.settings-screen{max-width:none}.settings-section{padding:12px 14px;margin-bottom:12px}.theory-card{padding:16px 18px}.theory-exercise-panel{padding:14px 16px}.example-notation{height:120px}.exercise-notation{height:130px}.quiz-prompt{font-size:17px;margin:2px 0 10px}.quiz-choices{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.key-find-prompt{font-size:20px;margin:10px 0}.key-find-prompt strong{font-size:26px}.practice-screen{position:fixed;inset:0;padding:0}.practice-header{padding:calc(4px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 4px calc(10px + env(safe-area-inset-left));gap:8px}.practice-header .btn{min-height:36px;padding:5px 10px;font-size:13px}.practice-title strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.practice-title .muted{display:none}.practice-status{gap:6px}.view-toggle .btn{min-height:34px;padding:5px 8px;font-size:12px}.notation-strip{height:auto;max-height:none;flex:1 1 0;min-height:0}.practice-stage .stage-filler{display:none}.practice-stage .keyboard{height:clamp(120px,34vh,190px)}.countdown-overlay{font-size:clamp(56px,22vh,110px)}.overlay-panel{top:50%;padding:16px 18px 12px;width:min(520px,calc(100% - 24px));max-height:calc(100% - 12px);overflow-y:auto}.overlay-panel h2{font-size:17px}.tempo-row{margin:8px 0;gap:6px}.ready-panel .row.gap{margin:10px 0 6px}.results-panel .row.gap{margin-top:8px}.accuracy-big{font-size:28px;margin:2px 0 6px}.stars.large{font-size:24px;letter-spacing:3px}.stat-chips{margin-bottom:8px}.onboarding-screen{width:100%}.onboarding-header{margin-bottom:10px}.onboarding-card{padding:14px 16px 12px;border-radius:18px}.onboarding-card h1{font-size:22px}.onboarding-card h2{font-size:18px}.onboarding-hero{font-size:34px}.onboarding-actions{margin-top:12px}.skip-link{margin-top:8px}.avatar-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px;max-width:none}.avatar-choice{font-size:22px;border-radius:12px}.style-cards{grid-template-columns:repeat(3,1fr);gap:8px}.style-card{padding:10px 11px}.style-emoji{font-size:24px}.choice-list{gap:7px;max-width:none}.choice-btn{padding:8px 12px}.summary-list{margin:10px 0 4px;gap:6px}.onboarding-try-keyboard,.midi-check-keyboard{height:88px}}@media(max-width:640px){.island-map-wrap.with-detail-panel{display:flex;flex-direction:column;align-items:stretch;gap:24px}.island-map-wrap.with-detail-panel .island-map-col{margin-left:0}.island-detail-panel{position:static;top:auto;bottom:auto;left:auto;width:100%}.island-detail-panel-card{overflow-y:visible}.island-screen .screen-header{margin-left:0}}@media(prefers-reduced-motion:reduce){.backdrop-sun,.backdrop-cloud,.rotate-overlay-icon,.countdown-num,.stars .star.filled,.song-card:hover .art-emoji,.loading:before,.midi-wait-dot,.island-art,.island-current-badge,.island-selected-arrow,.island-halo,.trail-seg.active,.island-callout-card,.unit-intro-card,.quiz-choice.wrong,.preview-btn.loading .preview-icon{animation:none!important}.preview-ring-value{transition:none}.confetti{display:none}.btn,.song-card,.island-node,.theory-banner,.ai-banner,.fav-btn,.preview-btn,.rating-star{transition-duration:.01s}}@media(pointer:coarse){.island-art,.island-halo,.island-current-badge,.island-selected-arrow,.trail-seg.active,.backdrop-sun,.backdrop-cloud{animation:none!important}.island-art{filter:drop-shadow(0 7px 7px rgba(69,52,101,.28))}.island-node.locked .island-art{filter:grayscale(.85) brightness(.98) contrast(.94) drop-shadow(0 6px 6px rgba(69,52,101,.22))}.island-node.locked:hover .island-art,.island-node.locked:focus-visible .island-art,.island-node.locked.selected .island-art{filter:grayscale(.35) drop-shadow(0 6px 6px rgba(69,52,101,.22))}.app-nav,.island-detail-panel-card,.island-unit-marker-pill,.island-callout-card,.practice-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fffaf1}}