:root{--bg: #020617;--card: rgba(15, 23, 42, .8);--primary: #6366f1;--secondary: #10b981;--accent: #f59e0b;--text: #f8fafc;--white-key: #ffffff;--black-key: #0f172a;--glass: rgba(255, 255, 255, .03)}body{margin:0;background-color:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,sans-serif;overflow-x:hidden}.music-app{min-height:100vh;background:radial-gradient(circle at 0% 0%,#1e1b4b 0%,transparent 50%),radial-gradient(circle at 100% 100%,#312e81 0%,transparent 50%);display:flex;flex-direction:column}.top-nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:#020617cc;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.1);position:sticky;top:0;z-index:100}.brand{display:flex;align-items:center;gap:.75rem;font-weight:800;font-size:1.25rem;letter-spacing:-.02em}.brand small{font-size:.6rem;background:var(--primary);color:#fff;padding:2px 6px;border-radius:4px;margin-left:4px;vertical-align:middle}.logo-icon{color:var(--primary);filter:drop-shadow(0 0 10px rgba(99,102,241,.5))}.stats{display:flex;align-items:center;gap:1.5rem}.stat-item{display:flex;align-items:center;gap:.75rem;font-size:.9rem;font-weight:700;background:var(--glass);padding:.4rem 1rem;border-radius:12px}.mini-progress{width:60px;height:6px;background:#ffffff1a;border-radius:10px;overflow:hidden}.mini-progress div{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .6s cubic-bezier(.34,1.56,.64,1)}.cloud-tag{font-size:.7rem;padding:.4rem .8rem;background:#10b9811a;border-radius:20px;display:flex;align-items:center;gap:.4rem;color:var(--secondary);border:1px solid rgba(16,185,129,.2)}.syncing{animation:pulse 1.5s infinite;color:var(--accent);border-color:var(--accent)}.content{flex:1;max-width:1200px;margin:0 auto;padding:2rem;width:100%;box-sizing:border-box}.hero-grid{display:grid;grid-template-columns:320px 1fr;gap:2rem;margin-bottom:2.5rem}.instrument-card{background:var(--card);border-radius:24px;padding:1.25rem;border:1px solid rgba(255,255,255,.05);box-shadow:0 20px 40px #0006;transition:transform .3s ease}.instrument-card:hover{transform:translateY(-5px)}.image-frame{width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;position:relative;background:#000;margin-bottom:1rem}.image-frame img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2}.glow{position:absolute;top:0;right:0;bottom:0;left:0;filter:blur(40px);opacity:.4;z-index:1}.inst-badge{position:absolute;top:12px;right:12px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:900;padding:2px 8px;border-radius:4px;z-index:3}.inst-info h3{margin:0;font-size:1.4rem;font-weight:800}.inst-type{margin:.25rem 0 .75rem;font-size:.7rem;color:var(--primary);font-weight:700;letter-spacing:.1em}.inst-specs{display:flex;gap:1rem;font-size:.7rem;color:#64748b}.inst-specs span{display:flex;align-items:center;gap:.3rem}.score-control-panel{background:var(--card);border-radius:24px;padding:1.5rem;border:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column}.panel-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.title-group{display:flex;flex-direction:column}.song-title{font-size:1.1rem;font-weight:800}.song-meta{font-size:.7rem;color:#64748b}.panel-actions{margin-left:auto;display:flex;gap:.5rem}.playback-controls{display:flex;align-items:center;gap:1.5rem;margin-bottom:1.5rem}.main-play-btn{background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;color:#fff;padding:.75rem 1.75rem;border-radius:12px;font-weight:700;display:flex;align-items:center;gap:.75rem;cursor:pointer;box-shadow:0 10px 20px #6366f14d;transition:all .2s}.main-play-btn:active{transform:scale(.95)}.main-play-btn.playing{background:#ef4444;box-shadow:0 10px 20px #ef44444d}.dynamic-sheet{background:#0006;border-radius:16px;padding:1.25rem;overflow-x:auto;scrollbar-width:none}.sheet-track{display:flex;gap:.75rem;align-items:flex-end;min-width:max-content;height:140px}.sheet-note-block{display:flex;flex-direction:column;align-items:center;gap:.4rem;opacity:.25;transition:.2s}.sheet-note-block.active{opacity:1}.note-bar{width:24px;border-radius:6px;transition:all .2s}.sheet-note-block.is-rest .note-bar{background:transparent!important;border:1px dashed rgba(255,255,255,.2)}.piano-container{margin:2rem 0;overflow-x:auto;padding:1rem 0;scrollbar-width:none}.piano-keyboard{display:flex;justify-content:center;min-width:900px}.piano-key{position:relative;cursor:pointer;transition:.1s;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:1rem}.piano-key.white{width:52px;height:200px;background:linear-gradient(to bottom,#f8fafc,#fff);border:1px solid #e2e8f0;border-radius:0 0 8px 8px;z-index:1;color:#94a3b8}.piano-key.black{width:32px;height:125px;background:linear-gradient(to bottom,#1e293b,#020617);margin:0 -16px;z-index:2;border-radius:0 0 6px 6px;color:#475569;border:none}.piano-key.pressed{background:var(--primary)!important;color:#fff!important;transform:translateY(4px);box-shadow:inset 0 0 20px #0003}.piano-key.guide{border:2px solid var(--secondary);box-shadow:0 0 20px #10b98166}.guide-dot{width:8px;height:8px;background:var(--secondary);border-radius:50%;position:absolute;top:15px;animation:breathe 1.2s infinite}.library-container{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.lib-section{background:var(--card);border-radius:20px;padding:1.5rem;border:1px solid rgba(255,255,255,.05)}.lib-title{font-weight:800;margin-bottom:1.25rem;display:flex;align-items:center;gap:.6rem;color:#94a3b8;font-size:.9rem}.grid-list{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem;padding-right:.5rem}.grid-list::-webkit-scrollbar{width:4px}.grid-list::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.list-item{background:#ffffff05;padding:.75rem 1rem;border-radius:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:.2s;border:1px solid transparent}.list-item:hover{background:#ffffff0d;transform:translate(5px)}.list-item.active{background:#6366f11a;border-color:var(--primary)}.list-item.locked{opacity:.3;cursor:not-allowed;filter:grayscale(1)}.full-score-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#020617e6;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;display:grid;place-items:center;padding:2rem}.full-score-modal{background:#0f172a;width:100%;max-width:850px;max-height:85vh;border-radius:28px;border:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px #0009}.modal-header{padding:1.5rem 2rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}.header-title h2{margin:0;font-size:1.5rem}.header-title p{margin:.25rem 0 0;font-size:.8rem;color:#64748b}.full-notes-grid{flex:1;padding:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:.75rem;overflow-y:auto}.full-note-item{background:#ffffff08;padding:.8rem;border-radius:14px;text-align:center;cursor:pointer;transition:.2s;border:1px solid transparent}.full-note-item:hover{background:var(--primary);border-color:#fff3;transform:scale(1.05)}.full-note-item.rest{border:1px dashed rgba(255,255,255,.1);opacity:.5}.footer{padding:2rem;text-align:center;color:#475569;font-size:.75rem}.footer-content{display:flex;align-items:center;justify-content:center;gap:.5rem}@keyframes breathe{0%,to{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.4)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@media (max-width: 900px){.hero-grid,.library-container{grid-template-columns:1fr}}