.app-shell{display:grid;height:100vh;width:100vw;grid-template-columns:1fr;grid-template-rows:auto auto auto 1fr;grid-template-areas:"toolbar" "note-input" "editor" "score-canvas";gap:0}.toolbar-slot{grid-area:toolbar;background-color:var(--color-toolbar-bg);border-bottom:1px solid var(--color-border)}.note-input-panel{grid-area:note-input;background-color:var(--color-panel-bg);border-bottom:1px solid var(--color-border);padding:var(--spacing-md);overflow-y:auto}.editor-panel{grid-area:editor;background-color:var(--color-panel-bg);border-bottom:1px solid var(--color-border);padding:var(--spacing-md);overflow-y:auto}.score-canvas-slot{grid-area:score-canvas;background-color:var(--color-score-bg);overflow:auto}@media (min-width: 1024px){.app-shell{grid-template-columns:300px 1fr;grid-template-rows:auto auto 1fr;grid-template-areas:"toolbar toolbar" "note-input score-canvas" "editor score-canvas"}.note-input-panel,.editor-panel{border-bottom:none;border-right:1px solid var(--color-border)}}._noteInputPanel_ixusg_5{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#f5f5f5;border-radius:8px}._pitchButtons_ixusg_15{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}._pitchButton_ixusg_15{width:48px;height:48px;min-width:44px;min-height:44px;border-radius:50%;border:2px solid transparent;color:#fff;font-size:1.125rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.5)}._pitchButton_ixusg_15:hover{transform:scale(1.1);box-shadow:0 2px 8px #0003}._pitchButton_ixusg_15:active{transform:scale(.95)}._pitchButton_ixusg_15._selected_ixusg_46{border-color:#06c;box-shadow:0 0 0 3px #0066cc4d}._hButton_ixusg_52{border-color:#333!important;color:#333!important;text-shadow:none!important}._hButton_ixusg_52._selected_ixusg_46{border-color:#06c!important;box-shadow:0 0 0 3px #0066cc4d}._controlGroup_ixusg_64{display:flex;flex-direction:column;gap:.5rem}._controlLabel_ixusg_70{font-weight:600;font-size:.875rem;color:#333}._buttonGroup_ixusg_76{display:flex;gap:.25rem;flex-wrap:wrap}._durationButton_ixusg_83,._octaveButton_ixusg_84{padding:.5rem 1rem;min-width:44px;min-height:44px;border:2px solid #ccc;border-radius:4px;background:#fff;color:#333;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}._durationButton_ixusg_83:hover,._octaveButton_ixusg_84:hover{border-color:#999;background:#f9f9f9}._durationButton_ixusg_83._active_ixusg_104,._octaveButton_ixusg_84._active_ixusg_104{border-color:#06c;background:#06c;color:#fff}._accentedRow_ixusg_112{display:flex;align-items:center;gap:.5rem}._accentedToggle_ixusg_118{width:44px;height:44px;min-width:44px;min-height:44px;border:2px solid #999;border-radius:4px;background:#fff;color:#333;font-size:1.25rem;font-weight:700;cursor:pointer;transition:all .2s ease}._accentedToggle_ixusg_118:hover:not(:disabled){border-color:#666;background:#f0f0f0}._accentedToggle_ixusg_118:disabled{opacity:.35;cursor:not-allowed}._accentedToggle_ixusg_118._accentedActive_ixusg_143{border-color:#06c;background:#06c;color:#fff}._accentedLabel_ixusg_149{font-size:.875rem;font-weight:500;color:#666}._actionButtons_ixusg_156{display:flex;gap:.5rem;flex-wrap:wrap}._addNoteButton_ixusg_162,._restButton_ixusg_163{flex:1 1 0;padding:.75rem 1rem;min-width:44px;min-height:44px;border:none;border-radius:4px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;text-align:center}._addNoteButton_ixusg_162{background:#06c;color:#fff}._addNoteButton_ixusg_162:hover:not(:disabled){background:#0052a3}._addNoteButton_ixusg_162:disabled{background:#ccc;cursor:not-allowed;opacity:.6}._restButton_ixusg_163{background:#666;color:#fff}._restButton_ixusg_163:hover{background:#555}._addNoteButton_ixusg_162:active:not(:disabled),._restButton_ixusg_163:active{transform:scale(.98)}._toolbar_1ptbl_5{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--color-toolbar-bg, #f5f5f5);border-bottom:1px solid #ddd;min-height:60px;flex-wrap:wrap}._titleSection_1ptbl_16{flex:1 1 200px;min-width:200px}._titleInput_1ptbl_21{width:100%;padding:.5rem .75rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;background:#fff;min-height:44px}._titleInput_1ptbl_21:focus{outline:2px solid #007bff;outline-offset:2px;border-color:#007bff}._controlsSection_1ptbl_37,._actionsSection_1ptbl_38{display:flex;gap:.5rem;flex-wrap:wrap}._controlsSection_1ptbl_37,._actionsSection_1ptbl_38{flex:0 1 auto}._selectControl_1ptbl_52{min-width:44px;min-height:44px;padding:.5rem .75rem;font-size:.875rem;border:1px solid #ccc;border-radius:4px;background:#fff;color:#333;cursor:pointer}._selectControl_1ptbl_52:focus{outline:2px solid #007bff;outline-offset:2px;border-color:#007bff}._placeholderButton_1ptbl_70{min-width:44px;min-height:44px;padding:.5rem 1rem;font-size:.875rem;border:1px solid #ccc;border-radius:4px;background:#e9ecef;color:#6c757d;cursor:not-allowed;opacity:.6}._modeToggle_1ptbl_83{display:flex;gap:0;border:1px solid #ccc;border-radius:4px;overflow:hidden}._modeButton_1ptbl_91{min-width:44px;min-height:44px;padding:.5rem .75rem;font-size:.875rem;border:none;background:#fff;color:#333;cursor:pointer;transition:background-color .2s ease;white-space:nowrap}._modeButton_1ptbl_91:hover{background:#e9ecef}._modeButton_1ptbl_91:focus{outline:2px solid #007bff;outline-offset:-2px}._modeButtonActive_1ptbl_113{background:#007bff;color:#fff;font-weight:600}._modeButtonActive_1ptbl_113:hover{background:#0056b3}._actionButton_1ptbl_123{min-width:44px;min-height:44px;padding:.5rem .75rem;font-size:.875rem;border:1px solid #ccc;border-radius:4px;background:#fff;color:#333;cursor:pointer;transition:background-color .2s ease;white-space:nowrap}._actionButton_1ptbl_123:hover{background:#e9ecef}._actionButton_1ptbl_123:focus{outline:2px solid #007bff;outline-offset:2px;border-color:#007bff}._actionButton_1ptbl_123:active{background:#dee2e6}._hiddenFileInput_1ptbl_151{display:none}@media (max-width: 768px){._toolbar_1ptbl_5{flex-direction:column;align-items:stretch;gap:.75rem}._titleSection_1ptbl_16,._controlsSection_1ptbl_37,._actionsSection_1ptbl_38{width:100%}._controlsSection_1ptbl_37,._actionsSection_1ptbl_38{justify-content:flex-start}}._scoreCanvas_1yhi0_1{background-color:var(--color-score-bg, #fafafa);width:100%;min-height:300px;padding:1rem;box-sizing:border-box}._noteEditor_f8ygt_7{display:flex;flex-direction:column;gap:1rem;padding:1rem;background:#f5f5f5;border-radius:8px}._heading_f8ygt_16{font-size:.875rem;font-weight:700;color:#333;margin:0;text-transform:uppercase;letter-spacing:.05em}._placeholder_f8ygt_25{padding:1rem;color:#999;font-size:.875rem;text-align:center}._pitchSection_f8ygt_33{display:flex;flex-direction:column;gap:.5rem}._currentPitch_f8ygt_39{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;color:#333}._pitchIndicator_f8ygt_48{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid rgba(0,0,0,.2)}._pitchButtons_f8ygt_56{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}._pitchButton_f8ygt_56{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;border:2px solid transparent;color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.5)}._pitchButton_f8ygt_56:hover:not(:disabled){transform:scale(1.1);box-shadow:0 2px 8px #0003}._pitchButton_f8ygt_56:active:not(:disabled){transform:scale(.95)}._pitchButton_f8ygt_56:disabled{opacity:.4;cursor:not-allowed}._pitchButton_f8ygt_56._activePitch_f8ygt_92{border-color:#06c;box-shadow:0 0 0 3px #0066cc4d}._hButton_f8ygt_98{border-color:#333!important;color:#333!important;text-shadow:none!important}._hButton_f8ygt_98._activePitch_f8ygt_92{border-color:#06c!important;box-shadow:0 0 0 3px #0066cc4d}._hButton_f8ygt_98:disabled{border-color:#999!important}._controlGroup_f8ygt_114{display:flex;flex-direction:column;gap:.375rem}._controlLabel_f8ygt_120{font-weight:600;font-size:.875rem;color:#333}._selectControl_f8ygt_127{padding:.5rem .75rem;min-width:44px;min-height:44px;border:2px solid #ccc;border-radius:4px;background:#fff;color:#333;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}._selectControl_f8ygt_127:hover:not(:disabled){border-color:#999}._selectControl_f8ygt_127:focus{border-color:#06c;outline:none;box-shadow:0 0 0 2px #06c3}._selectControl_f8ygt_127:disabled{background:#eee;color:#999;cursor:not-allowed}._deleteButton_f8ygt_158{padding:.75rem 1.5rem;min-width:44px;min-height:44px;border:none;border-radius:4px;background:#dc2626;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:.5rem}._deleteButton_f8ygt_158:hover{background:#b91c1c}._deleteButton_f8ygt_158:active{transform:scale(.98)}._lyricsEditor_dsi8b_7{display:flex;flex-direction:column;gap:.375rem;padding:1rem;background:#f5f5f5;border-radius:8px}._heading_dsi8b_16{font-size:.875rem;font-weight:700;color:#333;margin:0;text-transform:uppercase;letter-spacing:.05em}._controlGroup_dsi8b_25{display:flex;flex-direction:column;gap:.375rem}._controlLabel_dsi8b_31{font-weight:600;font-size:.875rem;color:#333}._lyricInput_dsi8b_37{padding:.5rem .75rem;min-width:44px;min-height:44px;border:2px solid #ccc;border-radius:4px;background:#fff;color:#333;font-size:.875rem;font-weight:500;transition:all .2s ease}._lyricInput_dsi8b_37:hover:not(:disabled){border-color:#999}._lyricInput_dsi8b_37:focus{border-color:#06c;outline:none;box-shadow:0 0 0 2px #06c3}._lyricInput_dsi8b_37:disabled{background:#eee;color:#999;cursor:not-allowed}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;width:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}:root{--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--breakpoint-tablet: 768px;--breakpoint-desktop: 1024px;--color-toolbar-bg: #f5f5f5;--color-panel-bg: #ffffff;--color-score-bg: #fafafa;--color-border: #e0e0e0;--color-text: #333333;--color-text-secondary: #666666}#root{height:100%;width:100%}