:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light dark;color:#ffffffde;background-color:#242424;--color-primary: #667eea;--color-primary-dark: #764ba2;--color-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--color-success: #4caf50;--color-success-dark: #3d9040;--color-danger: #ff6b6b;--color-danger-dark: #ee5a5a;--color-danger-light: #fff5f5;--color-danger-border: #ffcccc;--color-warning: #ff9800;--color-warning-dark: #e68900;--color-white: #ffffff;--color-black: #000000;--color-gray-50: #f9f9f9;--color-gray-100: #f5f5f5;--color-gray-150: #f0f4f8;--color-gray-200: #eeeeee;--color-gray-300: #dddddd;--color-gray-400: #cccccc;--color-gray-500: #888888;--color-gray-600: #666666;--color-gray-700: #444444;--color-gray-800: #333333;--color-black-key: #444444;--color-note-active: #000000;--color-measure-marker: rgba(75, 0, 130, .6);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--radius-full: 50%;--font-size-xs: 10px;--font-size-sm: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 18px;--font-size-2xl: 20px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1);--shadow-md: 0 2px 5px rgba(0, 0, 0, .1);--shadow-lg: 0 4px 15px rgba(0, 0, 0, .15);--shadow-xl: 0 8px 30px rgba(0, 0, 0, .2);--shadow-primary: 0 4px 15px rgba(102, 126, 234, .3);--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, .05);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .25s ease}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:var(--radius-lg);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:var(--font-weight-medium);font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color var(--transition-slow)}button:hover{border-color:var(--color-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.music-grid-app{max-width:1200px;margin:0 auto;padding:var(--spacing-xl);font-family:inherit;display:flex;flex-direction:column;gap:var(--spacing-xl)}.music-grid-app h1{text-align:center;margin-bottom:var(--spacing-xl)}.grid-wrapper{overflow-x:auto;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:0}.controls-container{display:flex;flex-wrap:wrap;gap:var(--spacing-xl);justify-content:space-between}#root{width:100%;max-width:100%;padding:0;margin:0}*{box-sizing:border-box}body{margin:0;padding:0;font-family:inherit}.oscillator-controls{padding:var(--spacing-lg);background-color:var(--color-gray-50);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:var(--spacing-lg) 0}.oscillator-controls h3{margin-top:0;margin-bottom:var(--spacing-sm);color:var(--color-gray-800);font-weight:var(--font-weight-medium)}.control-row{display:flex;align-items:center;margin-bottom:var(--spacing-md);flex-wrap:wrap}.control-row:last-child{margin-bottom:0}.control-label{font-weight:var(--font-weight-medium);margin-right:var(--spacing-sm);min-width:80px}.oscillator-controls input[type=number]{width:60px;padding:var(--spacing-sm);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);font-size:var(--font-size-base);margin:0 5px;background-color:var(--color-white);box-shadow:var(--shadow-inset)}.oscillator-controls input[type=number]:focus{outline:none;border-color:var(--color-primary)}.oscillator-types{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.oscillator-type-label{display:flex;align-items:center;margin-right:var(--spacing-sm);cursor:pointer}.oscillator-type-label input[type=radio]{margin-right:5px;accent-color:var(--color-primary)}.oscillator-controls .instructions{margin-top:var(--spacing-md);color:var(--color-gray-600);font-style:italic}.export-code{padding:var(--spacing-lg);background-color:var(--color-gray-50);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin:var(--spacing-lg) 0}.export-code h3{margin-top:0;margin-bottom:var(--spacing-sm);color:var(--color-gray-800);font-weight:var(--font-weight-medium)}.export-code textarea{width:100%;height:100px;font-family:monospace;padding:var(--spacing-sm);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);resize:vertical;background-color:var(--color-white);box-shadow:var(--shadow-inset);font-size:var(--font-size-base)}.export-code textarea:focus{outline:none;border-color:var(--color-primary)}.export-code .export-buttons{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.export-code button{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-primary-gradient);color:var(--color-white);border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:var(--font-weight-semibold);transition:all var(--transition-base)}.export-code button:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.song-settings{background-color:var(--color-gray-50);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);margin:var(--spacing-lg) 0;width:100%;max-width:400px}.song-settings h3{margin-top:0;margin-bottom:var(--spacing-sm);color:var(--color-gray-800);font-weight:var(--font-weight-medium)}.song-settings-content{display:flex;flex-direction:column;gap:var(--spacing-lg)}.song-name-container{display:flex;align-items:center;gap:var(--spacing-sm)}.song-name-container label{font-weight:var(--font-weight-semibold);color:var(--color-gray-800);white-space:nowrap;min-width:80px}.song-name-input{flex:1;padding:var(--spacing-sm) var(--spacing-sm);border:1px solid var(--color-gray-400);border-radius:var(--radius-sm);font-size:var(--font-size-base);outline:none;transition:border-color var(--transition-base)}.song-name-input:focus{border-color:var(--color-primary);box-shadow:0 0 3px #667eea4d}.export-import-buttons{display:flex;gap:var(--spacing-sm)}.export-button,.import-button{padding:var(--spacing-sm) var(--spacing-lg);color:var(--color-white);border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:var(--font-weight-semibold);flex:1;transition:all var(--transition-base)}.export-button{background-color:var(--color-success)}.export-button:hover{background-color:var(--color-success-dark);transform:translateY(-1px)}.import-button{background-color:var(--color-warning)}.import-button:hover{background-color:var(--color-warning-dark);transform:translateY(-1px)}.key-transpose{background:var(--color-gray-100);border-radius:var(--radius-md);padding:var(--spacing-md)}.key-transpose h3{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-sm);color:var(--color-gray-600);font-weight:500}.key-transpose-controls{display:flex;flex-direction:column;gap:var(--spacing-sm)}.key-selector{display:flex;align-items:center;gap:var(--spacing-sm)}.key-selector label{font-size:var(--font-size-sm);color:var(--color-gray-600);min-width:30px}.key-selector select{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);background:#fff;font-size:var(--font-size-sm);cursor:pointer;transition:var(--transition-fast)}.key-selector select:hover{border-color:var(--color-primary)}.key-selector select:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #667eea33}.transpose-buttons{display:flex;gap:var(--spacing-xs)}.transpose-btn{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);background:#fff;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:var(--transition-fast)}.transpose-btn:hover{background:var(--color-gray-50);border-color:var(--color-primary)}.transpose-btn:active{background:var(--color-gray-100)}.transpose-btn.octave{background:var(--color-gray-50);font-size:var(--font-size-xs)}.transpose-btn.octave:hover{background:var(--color-gray-100)}.mode-buttons{display:flex;gap:var(--spacing-xs)}.mode-btn{flex:1;padding:var(--spacing-xs) var(--spacing-sm);border:1px solid var(--color-gray-300);border-radius:var(--radius-sm);background:#fff;font-size:var(--font-size-sm);font-weight:500;cursor:pointer;transition:var(--transition-fast)}.mode-btn:hover{background:var(--color-gray-50);border-color:var(--color-primary)}.mode-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.mode-btn.active:hover{background:var(--color-primary-dark)}.music-grid-app{display:flex;flex-direction:column;gap:var(--spacing-xl);max-width:1200px;margin:0 auto;padding:var(--spacing-xl);font-family:inherit}.grid-wrapper{position:relative;overflow-x:auto;border:1px solid var(--color-gray-300);border-radius:var(--radius-md);box-shadow:var(--shadow-md)}.grid-container{display:flex;flex-direction:column;position:relative}.column-headers-row{display:flex;flex-shrink:0}.grid-body{display:flex}.note-labels-column{display:flex;flex-direction:column;position:sticky;left:0;z-index:10}.grid-canvas{display:block}.note{width:30px;height:20px;float:left;border:1px solid var(--color-gray-400);box-sizing:border-box;transition:background-color var(--transition-base)}.measure-start{border-left:2px solid var(--color-measure-marker)}.note-label{position:sticky;left:0;z-index:10;box-shadow:2px 0 5px #0000001a;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.note-label-clickable{cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.note-label-clickable:hover{transform:scale(1.05);box-shadow:2px 0 8px #0003}.note-label-clickable:active{transform:scale(.98)}.note-header{height:20px;cursor:pointer;transition:all var(--transition-base)}.note-header:hover:not(.note-label):not(.start-column){background-color:var(--color-gray-300);box-shadow:0 0 5px #0003}.note-header.measure-start-header{font-weight:var(--font-weight-semibold);color:var(--color-primary);background-color:#f0f0ff;border-left:2px solid var(--color-measure-marker)}.note-header.start-column{background-color:var(--color-success);color:var(--color-white);box-shadow:0 0 5px #4caf5080;border-left:2px solid var(--color-success)}.note.start-column:not(.note-header){border-left:2px solid var(--color-success)}.note[data-line="13"]{background-color:#aaa}.note-header-corner{background-color:var(--color-gray-200);display:flex;justify-content:center;align-items:center;font-size:var(--font-size-xs)}.note-header-cell{background-color:var(--color-gray-200);color:var(--color-black);display:flex;justify-content:center;align-items:center;font-size:var(--font-size-xs);cursor:pointer}.note-label-cell{display:flex;justify-content:center;align-items:center;font-size:var(--font-size-xs);cursor:pointer}.note-label-white{background-color:var(--color-white);color:var(--color-black)}.note-label-black{background-color:var(--color-black-key);color:var(--color-white)}.control-panels{display:flex;flex-direction:column;gap:var(--spacing-lg)}.grid-controls{display:flex;flex-wrap:wrap;gap:var(--spacing-xl);padding:var(--spacing-lg);background-color:var(--color-gray-150);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);align-items:center}.control-group{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--color-white);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}.control-group button{display:flex;justify-content:center;align-items:center;width:30px;height:30px;min-width:30px;min-height:30px;padding:var(--spacing-sm);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);cursor:pointer;border:1px solid var(--color-gray-400);background-color:var(--color-white);border-radius:var(--radius-sm);transition:all var(--transition-fast)}.control-group button:hover{background-color:var(--color-gray-100);border-color:var(--color-primary)}.control-group label{font-weight:var(--font-weight-semibold);font-size:var(--font-size-base);color:var(--color-gray-800)}.control-group span{min-width:30px;text-align:center;font-weight:var(--font-weight-medium)}.control-group .trim-btn{width:auto;min-width:auto;padding:var(--spacing-xs) var(--spacing-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium)}.playback-panel{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);background:var(--color-primary-gradient);border-radius:var(--radius-xl);box-shadow:var(--shadow-primary)}.playback-btn{width:64px;height:64px;border:none;border-radius:var(--radius-full);background:var(--color-white);color:var(--color-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);box-shadow:0 2px 8px #00000026;flex-shrink:0}.playback-btn:hover{transform:scale(1.08);box-shadow:0 4px 12px #0003}.playback-btn:active{transform:scale(.95)}.playback-btn.playing{background:var(--color-danger);color:var(--color-white)}.playback-btn.playing:hover{background:var(--color-danger-dark)}.btn-icon{width:38px;height:38px}.playback-status{flex:1;display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:150px}.status-text{color:var(--color-white);font-size:var(--font-size-base);font-weight:var(--font-weight-medium)}.status-text.hint{opacity:.85;font-size:13px;font-weight:var(--font-weight-normal)}.progress-bar{height:6px;background:#ffffff4d;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:var(--color-white);border-radius:3px;transition:width .1s linear}.start-indicator{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#ffffff26;border-radius:var(--radius-lg);flex-shrink:0}.start-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;color:#fffc;font-weight:var(--font-weight-medium)}.start-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-white);line-height:1.2}.reset-btn{display:flex;flex-direction:column;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:#ffffff26;border:none;border-radius:var(--radius-lg);color:#ffffffe6;cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.reset-btn:hover:not(:disabled){background:#ff6b6be6;color:var(--color-white)}.reset-btn:active:not(:disabled){transform:scale(.95)}.reset-btn:disabled{opacity:.4;cursor:not-allowed}.reset-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.5px;font-weight:var(--font-weight-medium)}.reset-icon{width:22px;height:22px;margin-top:2px}.lock-toggle{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:#ffffff26;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);flex-shrink:0}.lock-toggle:hover{background:#ffffff40}.lock-toggle input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:var(--color-white)}.lock-toggle-label{font-size:var(--font-size-sm);color:#ffffffe6;font-weight:var(--font-weight-medium);white-space:nowrap}.note.highlighted{border:2px solid var(--color-warning);box-shadow:0 0 5px #ff980080}.measure-context-menu{position:fixed;z-index:1000;background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);min-width:260px;max-width:300px;overflow:hidden;animation:menuFadeIn var(--transition-fast) ease-out}@keyframes menuFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.menu-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-primary-gradient);color:var(--color-white)}.menu-title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-base)}.menu-close{background:#fff3;border:none;color:var(--color-white);width:24px;height:24px;border-radius:var(--radius-full);cursor:pointer;font-size:var(--font-size-lg);display:flex;align-items:center;justify-content:center;transition:background var(--transition-base)}.menu-close:hover{background:#ffffff4d}.clear-measure-btn{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-danger-light);border:1px solid var(--color-danger-border);border-radius:var(--radius-lg);color:#c44;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast)}.clear-measure-btn:hover{background:#ffe5e5;border-color:#f99}.clear-measure-btn svg{width:18px;height:18px}.menu-empty{padding:var(--spacing-2xl) var(--spacing-lg);text-align:center;color:var(--color-gray-600);font-size:var(--font-size-base)}.menu-section{padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--color-gray-200)}.section-label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-gray-600);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.5px}.measure-list{display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:150px;overflow-y:auto}.measure-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-gray-100);border:2px solid transparent;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast)}.measure-item:hover{background:#e8e8e8}.measure-item.selected{background:#e8f4fd;border-color:var(--color-primary)}.measure-label{font-weight:var(--font-weight-medium);font-size:var(--font-size-base);color:var(--color-gray-800)}.measure-notes{font-size:var(--font-size-sm);color:var(--color-gray-500);background:var(--color-gray-300);padding:2px var(--spacing-sm);border-radius:10px}.measure-item.selected .measure-notes{background:var(--color-primary);color:var(--color-white)}.copy-count-control{display:flex;align-items:center;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-sm)}.copy-count-control button{width:32px;height:32px;border:1px solid var(--color-gray-300);background:var(--color-white);border-radius:var(--radius-md);font-size:var(--font-size-xl);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;line-height:1}.copy-count-control button:hover:not(:disabled){background:var(--color-gray-100);border-color:var(--color-primary)}.copy-count-control button:disabled{opacity:.4;cursor:not-allowed}.copy-count-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold);min-width:40px;text-align:center}.copy-preview{font-size:var(--font-size-sm);color:var(--color-gray-600);text-align:center;padding:var(--spacing-sm);background:var(--color-gray-50);border-radius:var(--radius-md)}.transparent-toggle{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-gray-100);border-radius:var(--radius-lg);transition:background var(--transition-fast)}.transparent-toggle:hover{background:#e8e8e8}.transparent-toggle input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-primary)}.toggle-label{font-weight:var(--font-weight-medium);font-size:var(--font-size-base);color:var(--color-gray-800)}.toggle-hint{font-size:11px;color:var(--color-gray-500);margin-left:auto}.menu-actions{padding:var(--spacing-md) var(--spacing-lg)}.copy-button{width:100%;padding:var(--spacing-md);background:var(--color-primary-gradient);color:var(--color-white);border:none;border-radius:var(--radius-lg);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);cursor:pointer;transition:all var(--transition-base)}.copy-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.copy-button:disabled{opacity:.5;cursor:not-allowed}