:root{color:#1f292b;background:#f5f7f6;--page-bg: #f5f7f6;--panel-bg: #ffffff;--text-primary: #1f292b;--text-secondary: #667274;--border-color: #d7dedb;--border-hover: #aeb9b5;--primary-color: #1f292b;--primary-hover: #344044;--primary-active: #131a1c;--selected-color: #35677d;--selected-hover: #2e5b6f;--danger-color: #b33a32;--danger-bg-hover: #fff3f1;--danger-border: #e4a29d;--disabled-bg: #e8ecea;--disabled-text: #9ca5a2;--focus-ring: rgba(53, 103, 125, .22);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button{border:1px solid var(--primary-color);border-radius:8px;background:var(--primary-color);color:#fff;cursor:pointer;font:inherit;min-height:44px;padding:0 20px}button:hover{background:var(--primary-hover);border-color:var(--primary-hover)}button:active{background:var(--primary-active);border-color:var(--primary-active)}button:disabled,button:disabled:hover,button:disabled:active{background:var(--disabled-bg);border-color:var(--border-color);color:var(--disabled-text);cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}.app-shell{margin:0 auto;max-width:1240px;padding:20px clamp(16px,3vw,32px) 32px}.app-header{align-items:flex-start;display:flex;gap:16px;justify-content:space-between;margin-bottom:20px}.product-header{align-items:flex-end;display:flex;gap:24px;justify-content:space-between;margin-bottom:8px}.grading-actions{display:flex;gap:12px;flex-shrink:0}.grading-workspace-active{align-items:start;display:grid;gap:10px;grid-template-columns:minmax(0,1fr) 320px}.grading-workspace>.panel{margin-top:10px}.feedback-panel{max-height:620px;overflow-y:auto}.feedback-score{align-items:baseline;display:flex;justify-content:space-between;margin-bottom:12px}.feedback-score strong{color:var(--selected-color);font-size:28px}.grading-breakdown{display:grid;gap:9px;margin:0 0 14px}.grading-category-heading{display:flex;justify-content:space-between}.grading-category{border:1px solid #e1e7e1;border-radius:7px;padding:9px}.grading-subcategories{color:#64706b;display:grid;font-size:11px;gap:2px;margin-top:5px}.grading-category-deductions{margin-top:8px}.grading-no-deduction{color:#1f6b4d;display:block;margin-top:6px}.feedback-list{display:grid;gap:8px}.feedback-item{align-items:flex-start;background:#fff;color:#1f2528;display:flex;flex-direction:column;gap:3px;height:auto;padding:10px;text-align:left}.feedback-item:hover{background:#f7faf8}.feedback-error{border-left:4px solid #b42318}.feedback-warning{border-left:4px solid #d97706}.feedback-suggestion{border-left:4px solid #2563eb}.feedback-item small{color:#52605b;white-space:normal}.product-heading{display:flex;flex-direction:column;justify-content:center;min-width:0}.product-title{color:var(--text-primary);font-size:clamp(30px,2.8vw,38px);font-weight:700;letter-spacing:-.6px;line-height:1.1;margin:0}.product-subtitle{color:var(--text-secondary);font-size:clamp(14px,1.4vw,16px);font-weight:500;line-height:1.3;margin-top:4px}.migration-banner{align-items:center;background:#fff7e6;border:1px solid #e6c36a;border-radius:8px;color:#55400d;display:flex;gap:12px;justify-content:space-between;margin-top:16px;padding:12px 14px}.app-header h1,.panel h2,.panel h3,.app-header p{margin:0}.app-header h1{font-size:32px;line-height:1.15}.app-header p,.muted,.panel-heading span{color:#64706b}.app-header p{margin-top:6px}.button-primary{background:var(--primary-color);border-color:var(--primary-color);color:#fff}.button-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}.button-primary:active{background:var(--primary-active);border-color:var(--primary-active)}.button-secondary{background:var(--panel-bg);border-color:var(--border-color);color:var(--text-primary)}.button-secondary:hover{background:#f2f6f4;border-color:var(--border-hover)}.button-secondary:active{background:#e8eeeb}.button-danger{background:var(--panel-bg);border-color:var(--danger-border);color:var(--danger-color)}.button-danger:hover{background:var(--danger-bg-hover);border-color:var(--danger-color)}.button-danger:active{background:#fbe4e1}.panel{background:var(--panel-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 2px 8px #1f292b0a;margin-top:10px;padding:20px}.panel-heading{align-items:baseline;display:flex;gap:14px;justify-content:space-between;margin-bottom:10px}.panel h2{font-size:18px}.panel h3{font-size:15px;margin-bottom:8px}.voice-summary-grid,.debug-columns,.current-slice-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.input-grid{align-items:end;column-gap:12px;display:grid;grid-template-columns:auto auto auto auto minmax(320px,1fr);margin-bottom:12px;row-gap:20px}.input-field{display:flex;flex-direction:column;gap:8px;min-width:0}.field-caption,.slice-picker{color:var(--text-secondary);display:flex;flex-direction:column;font-size:14px;font-weight:700;gap:8px}select{background:#fff;border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);font:inherit;min-height:44px;padding:0 10px}.key-signature-select{width:180px}.time-signature-select{width:160px}.input-type-select{width:150px}.duration-select{width:160px}.accidental-select{width:140px}.key-field{grid-column:1;grid-row:1}.time-field{grid-column:2;grid-row:1}.tempo-field{grid-column:3;grid-row:1}.measure-field{grid-column:4;grid-row:1}.playback-cell{grid-column:5;grid-row:1}.voice-field{grid-column:1;grid-row:2}.input-type-field{grid-column:2;grid-row:2}.duration-field{grid-column:3;grid-row:2}.accidental-field{grid-column:4;grid-row:2}.edit-cell{grid-column:5;grid-row:2}.right-control-cell{min-width:0;width:100%}.control-action-area{border-left:1px solid var(--border-color);padding-left:24px;width:100%}.insert-controls{align-items:center;display:flex;gap:10px;justify-content:flex-end}.voice-button-group{display:grid;gap:6px;grid-template-columns:repeat(4,minmax(0,1fr))}.voice-button{background:var(--panel-bg);border-color:var(--border-color);color:var(--text-primary);font-weight:700;min-height:44px;padding:0 12px}.voice-button:hover{background:#f0f5f3}.voice-button-active,.voice-button-active:hover{background:var(--selected-color);border-color:var(--selected-hover);color:#fff}.measure-count-control{align-items:center;display:flex;gap:8px;justify-content:flex-start;width:100%}.measure-count-control span{align-items:center;border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);display:flex;justify-content:center;min-height:44px;width:72px}.stepper-button{min-height:44px;padding:0;width:44px}.insert-controls span{color:#64706b;font-size:13px}.input-status{border-top:1px solid var(--border-color);color:var(--text-secondary);font-size:15px;margin:0;padding-top:12px}.input-status strong{color:var(--selected-color);font-weight:700}.active-event-list{border:1px solid #e4e9e3;border-radius:6px;margin-top:14px;padding:12px}.debug-columns{margin-top:16px}.voice-summary{border:1px solid #e4e9e3;border-radius:6px;padding:12px}.note-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.note-line span{background:#eef5f7;border:1px solid #d3e3e8;border-radius:6px;color:#23363c;font-size:13px;padding:3px 7px}.status-ok{color:#1f6b4d;margin:0}.status-error{color:#9a3412;margin:10px 0 0}.issue-list{margin:0;padding-left:18px}.timeline{display:grid;gap:10px 12px;grid-template-columns:104px minmax(640px,1fr);overflow-x:auto;padding-bottom:4px}.timeline-axis,.timeline-track{min-width:640px;position:relative}.timeline-axis{height:28px}.timeline-row{display:contents}.timeline-label{align-items:center;display:flex;gap:8px;min-height:54px}.timeline-label span{color:#64706b;font-size:12px}.active-voice-label strong{color:var(--selected-color)}.timeline-track{background:linear-gradient(to right,rgba(43,78,84,.08) 1px,transparent 1px),#fbfcfb;border:1px solid #dbe3dd;border-radius:6px;cursor:crosshair;height:54px}.active-voice-track{border-color:var(--selected-color);box-shadow:inset 0 0 0 1px #35677d3d}.axis-tick{color:#64706b;font-size:12px;position:absolute;top:4px;transform:translate(-1px)}.grid-line,.slice-line,.timeline-current-line{bottom:0;position:absolute;top:0;width:1px}.grid-line{background:#cdd7d1}.slice-line{background:#bf683f57}.timeline-current-line{background:#d73a31;width:2px;z-index:2}.note-block{align-items:center;background:#2f6f73;border:1px solid #245a5d;border-radius:6px;color:#fff;display:flex;flex-direction:column;gap:2px;justify-content:center;min-width:44px;overflow:hidden;padding:4px;position:absolute;top:7px;bottom:7px;white-space:nowrap;z-index:1}.note-block small{color:#dceeed;font-size:11px}.rest-block{background:#6b7280;border-color:#4b5563}.table-wrap{overflow-x:auto}.slice-picker{max-width:240px}.current-slice-grid{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:14px}.current-slice-grid div{border:1px solid #e4e9e3;border-radius:6px;padding:12px}.current-slice-grid .active-slice-voice{border-color:var(--selected-color);box-shadow:inset 0 0 0 1px #35677d3d}.current-slice-grid strong,.current-slice-grid span{display:block}.current-slice-grid span{font-size:18px;margin-top:5px}table{border-collapse:collapse;min-width:620px;width:100%}th,td{border-bottom:1px solid #e1e7e1;padding:10px 12px;text-align:left}th{color:#52605b;font-size:12px;text-transform:uppercase}td{font-variant-numeric:tabular-nums}.staff-scroll{max-width:100%;min-width:0;overflow-x:auto;overflow-y:hidden;width:100%}.staff-svg{display:block;height:auto;max-width:none}.staff-line{stroke:#20282a;stroke-width:1}.staff-label{fill:#52605b;font-size:13px;font-weight:700}.beat-guide{display:none;stroke:#2f6f732e;stroke-width:1}.measure-guide{stroke:#1f2528d1;stroke-width:1.1}.final-barline-heavy{stroke:#1f2528e6;stroke-width:3.2}.current-tick-guide{stroke:#d73a31;stroke-width:2}.playback-cursor{pointer-events:none;stroke:#7c3aed;stroke-width:2}.playback-control{align-items:center;display:flex;flex-shrink:0;flex-wrap:nowrap;gap:8px;justify-content:flex-end;margin-left:auto;width:240px}.playback-button{flex:1 1 0;min-height:44px;padding:0 14px}.tempo-control{align-items:center;color:var(--text-secondary);display:flex;font-size:15px;gap:8px;white-space:nowrap}.tempo-control input{border:1px solid var(--border-color);border-radius:8px;font:inherit;min-height:44px;padding:0 8px;width:72px}.note-stem{stroke-linecap:round;stroke-width:1.5}.note-flag{stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.note-beam{stroke-linecap:butt;stroke-width:5}.ledger-line{stroke:#20282a;stroke-linecap:round;stroke-width:1.2}.rest-glyph{fill:#20282a;stroke:#20282a;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}.accidental-glyph{fill:#20282a;font-family:Georgia,Times New Roman,serif;font-size:15px;font-weight:700;text-anchor:middle}.key-signature-accidental{fill:#20282a;font-family:Georgia,Times New Roman,serif;font-size:17px;font-weight:700;text-anchor:middle}.grand-staff-brace{fill:#20282a;font-family:Bravura,Petaluma,Noto Music,Segoe UI Symbol,serif;stroke:none}.grand-staff-connector{stroke:#20282a;stroke-width:1.2}.clef{fill:#20282a;font-family:Noto Music,Segoe UI Symbol,Bravura,Georgia,serif;font-size:44px;line-height:1}.bass-clef{font-size:34px}.time-signature text{fill:#20282a;font-family:Georgia,Times New Roman,serif;font-size:18px;font-weight:700;text-anchor:middle}.chord-roman{fill:#374151;font-family:Georgia,Times New Roman,serif;font-size:15px;font-weight:700;text-anchor:middle}.ghost-event{opacity:.42;pointer-events:none}.selected-note .notehead{stroke:#2563eb;stroke-width:1.8}.selected-note .notehead-highlight,.selected-rest-highlight{fill:#2563eb1f;pointer-events:none}.grading-error-highlight{fill:#dc26260f;pointer-events:none;stroke:#dc2626;stroke-width:2}.grading-parallel-line{pointer-events:none;stroke:#dc2626;stroke-width:3}.edit-actions{align-items:center;display:flex;gap:12px;justify-content:flex-end;margin-left:auto;width:240px}.history-button{flex:1 1 0;min-height:44px;padding:0 12px}.input-panel h2{font-size:18px;font-weight:700}.preview-toggle{align-items:center;color:var(--text-secondary);cursor:pointer;display:flex;font-size:14px;font-weight:600;gap:6px;-webkit-user-select:none;user-select:none}.preview-toggle input{accent-color:var(--selected-color);cursor:pointer;height:16px;margin:0;width:16px}.dialog-backdrop{align-items:center;background:#1f252873;display:flex;justify-content:center;inset:0;padding:20px;position:fixed;z-index:100}.dialog{background:#fff;border:1px solid #d8ded8;border-radius:8px;box-shadow:0 10px 30px #1f25282e;max-width:380px;padding:16px;width:100%}.dialog-heading{align-items:center;display:flex;gap:12px;justify-content:space-between;margin-bottom:4px}.dialog-heading h2{font-size:16px;margin:0}.dialog-close{background:#fff;border-color:transparent;color:#64706b;font-size:20px;line-height:1;min-height:28px;padding:0 8px}.dialog-close:hover{background:#f0f5f3;color:var(--text-primary)}.dialog-message{color:var(--text-secondary);font-size:14px;line-height:1.5;margin:0 0 14px}.dialog-actions{display:flex;gap:8px;justify-content:flex-end}.dialog-actions button{min-height:44px}@media(max-width:1180px){.input-grid{display:flex;flex-wrap:wrap;gap:12px 16px}.right-control-cell{margin-left:auto;width:auto}.control-action-area{width:auto}.measure-count-control{justify-content:flex-start;width:auto}}@media(max-width:768px){.product-header{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:10px}.grading-actions{width:100%}.grading-actions button{flex:1 1 auto}.app-header,.panel-heading{align-items:flex-start;flex-direction:column}.voice-summary-grid,.debug-columns,.current-slice-grid{grid-template-columns:1fr}.migration-banner{align-items:flex-start;flex-direction:column}.grading-workspace-active{display:block}}@media(max-width:480px){.app-shell{padding:16px 16px 24px}.input-grid{flex-direction:column}.input-field,.input-field select{width:100%}.right-control-cell{margin-left:0;width:100%}.control-action-area{width:100%}.playback-control,.edit-actions{margin-left:0;width:100%}.measure-count-control{justify-content:space-between;width:100%}.playback-control{flex-wrap:wrap}.edit-actions button{flex:1 1 auto}}