@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--bg-gradient: linear-gradient(135deg, #0d1117, #161b22);--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-primary: #e6edf3;--text-secondary: #8b949e;--accent: #58a6ff;--accent-hover: #79c0ff;--accent-glow: rgba(88, 166, 255, .4);--danger: #f85149}body{margin:0;font-family:Inter,sans-serif;background:var(--bg-gradient);color:var(--text-primary);min-height:100vh}.app-container{max-width:1000px;margin:0 auto;padding:2rem}.app-header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(90deg,#58a6ff,#a371f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem}.app-header p{color:var(--text-secondary);font-size:1.1rem}.main-content{display:grid;grid-template-columns:280px 1fr;gap:2rem;margin-top:2rem}.controls-panel,.stave-section{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:16px;padding:1.5rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 32px #0003}.palette h3,.stave-header h3{margin-top:0;font-size:1.2rem;font-weight:600;border-bottom:1px solid var(--glass-border);padding-bottom:.5rem}.palette-grid{display:grid;grid-template-columns:1fr;gap:.75rem;margin-top:1rem;max-height:400px;overflow-y:auto}.draggable-note{background:#ffffff08;border:1px solid var(--glass-border);border-radius:8px;padding:.75rem 1rem;display:flex;align-items:center;gap:1rem;cursor:grab;transition:all .2s ease}.draggable-note:hover{background:#ffffff14;border-color:var(--accent);transform:translateY(-2px);box-shadow:0 4px 12px var(--accent-glow)}.draggable-note:active{cursor:grabbing}.note-symbol{font-size:1.5rem;color:var(--accent);width:30px;text-align:center}.info-box{display:flex;gap:.5rem;background:#58a6ff1a;padding:1rem;border-radius:8px;margin-top:1.5rem;font-size:.9rem;color:var(--accent)}.actions{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:1rem;cursor:pointer;border:none;transition:all .2s ease}.btn-primary{background:var(--accent);color:#000}.btn-primary:hover{background:var(--accent-hover);box-shadow:0 0 15px var(--accent-glow)}.btn-secondary{background:transparent;color:var(--text-primary);border:1px solid var(--glass-border)}.btn-secondary:hover{background:#ffffff0d}.stave-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.beat-counter{padding:.25rem .75rem;border-radius:20px;background:#ffffff1a;font-size:.9rem;font-weight:600;transition:all .3s ease}.beat-counter.full{background:var(--danger);color:#fff;box-shadow:0 0 10px #f851494d}.stave-container{background:#fff;border-radius:8px;min-height:200px;overflow:hidden;position:relative;transition:all .3s ease;display:flex;justify-content:center;align-items:center}.stave-container.drag-over{box-shadow:0 0 0 4px var(--accent) inset;filter:brightness(.9)}.stave-container svg{width:100%;height:100%}.toast{position:fixed;bottom:2rem;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:1rem 2rem;border-radius:30px;font-weight:600;box-shadow:0 10px 30px #0000004d;animation:slideUp .3s cubic-bezier(.175,.885,.32,1.275) forwards;z-index:1000}@keyframes slideUp{0%{transform:translate(-50%,100%);opacity:0}to{transform:translate(-50%);opacity:1}}