*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#0d0d1a;color:#e0e0e0;overflow:hidden;height:100vh}#app{display:grid;grid-template-columns:1fr 320px;height:100vh}#canvas-container{position:relative;overflow:hidden}#canvas-container canvas{display:block}#sidebar{background:#141428;border-left:1px solid #2a2a4a;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}#sidebar h1{font-size:1.3rem;font-weight:600;color:#fff;letter-spacing:.5px}#controls{display:flex;flex-direction:column;gap:10px}#controls label{font-size:.85rem;color:#a0a0c0}#controls select{width:100%;padding:8px 10px;border-radius:6px;border:1px solid #3a3a5a;background:#1e1e3a;color:#e0e0e0;font-size:.9rem;cursor:pointer}#controls select:focus{outline:none;border-color:#6a6aff}.btn-row{display:flex;gap:8px}.btn{flex:1;padding:8px 12px;border:1px solid #3a3a5a;border-radius:6px;background:#1e1e3a;color:#e0e0e0;font-size:.85rem;cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:#2a2a5a;border-color:#6a6aff}.btn:active{background:#3a3a6a}.btn-primary{background:#4040aa;border-color:#5050cc}.btn-primary:hover{background:#5050cc}#info-panel{font-size:.85rem;line-height:1.6}#info-panel .note-info{padding:10px;background:#1a1a34;border-radius:6px;border:1px solid #2a2a4a}#info-panel .note-info strong{color:#fff}#sheet-music{background:#fff;border-radius:6px;min-height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}#sheet-music svg{max-width:100%}.view-toggle{display:flex;gap:6px}.view-toggle .btn{font-size:.75rem;padding:5px 8px}.btn-active{background:#4040aa;border-color:#6a6aff}.camera-presets{display:flex;gap:6px}.camera-presets .btn{font-size:.75rem;padding:5px 8px}.root-buttons{display:flex;flex-wrap:wrap;gap:4px}.root-buttons .btn{flex:0 0 calc(25% - 3px);font-size:.75rem;padding:4px 2px}.tab-bar{display:flex;border-bottom:1px solid #2a2a4a;margin-bottom:10px}.tab-btn{flex:1;padding:8px 4px;background:transparent;border:none;border-bottom:2px solid transparent;color:#666;font-size:.8rem;cursor:pointer;transition:color .15s,border-color .15s}.tab-btn:hover{color:#a0a0c0}.tab-btn.tab-active{color:#fff;border-bottom-color:#6a6aff}.tab-panel,.plugin-container{display:flex;flex-direction:column;gap:10px}.plugin-container+.plugin-container{padding-top:10px;border-top:1px solid #1e1e3a}#controls input[type=checkbox]{margin-right:6px}#controls .tab-panel label{font-size:.85rem;color:#a0a0c0}#controls .tab-panel select{width:100%;padding:8px 10px;border-radius:6px;border:1px solid #3a3a5a;background:#1e1e3a;color:#e0e0e0;font-size:.9rem;cursor:pointer}#controls .tab-panel select:focus{outline:none;border-color:#6a6aff}.checkbox-label{display:flex;align-items:center;cursor:pointer}#loading-overlay{position:fixed;inset:0;background:#0d0d1af2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:1000;transition:opacity .4s}#loading-overlay.hidden{opacity:0;pointer-events:none}.spinner{width:40px;height:40px;border:3px solid #2a2a5a;border-top-color:#6a6aff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.keyboard-layout{display:flex;flex-direction:column;gap:4px;padding:8px;background:#1a1a34;border-radius:6px;border:1px solid #2a2a4a}.keyboard-row{display:flex;gap:3px;justify-content:center}.kb-key{display:flex;flex-direction:column;align-items:center;justify-content:center;width:28px;height:34px;border-radius:4px;font-size:.7rem;font-weight:600;cursor:default;-webkit-user-select:none;user-select:none;transition:background .1s,box-shadow .1s}.kb-key small{font-size:.55rem;font-weight:400;opacity:.7}.kb-white{background:#2a2a4a;color:#e0e0e0;border:1px solid #3a3a5a}.kb-black{background:#1a1a2e;color:#a0a0c0;border:1px solid #2a2a4a}.kb-spacer{width:28px}.kb-active{background:#c90!important;color:#fff!important;border-color:#fc0!important;box-shadow:0 0 8px #ffcc0080}.chord-label{text-align:center;font-size:.85rem;font-weight:600;color:#fc0;min-height:1.2em}.keyboard-octave{display:flex;align-items:center;justify-content:space-between;gap:8px}.kb-oct-btn{flex:0 0 auto;padding:4px 8px;font-size:.75rem}.kb-octave-label{font-size:.85rem;color:#a0a0c0}.kb-octave-label strong{color:#fff}#footer{margin-top:auto;padding-top:16px;border-top:1px solid #2a2a4a;display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#666}#footer a{color:#6a6aff;text-decoration:none}#footer a:hover{text-decoration:underline}@media(max-width:800px){#app{grid-template-columns:1fr;grid-template-rows:1fr auto}#sidebar{border-left:none;border-top:1px solid #2a2a4a;max-height:40vh}}