:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background-color:#f1f5f9;color:#0f172a}*{box-sizing:border-box}body{margin:0;background-color:#f1f5f9}main.page{max-width:960px;margin:0 auto;padding:2rem 1.5rem 4rem;display:flex;flex-direction:column;gap:1.5rem}header h1{margin:0 0 .25rem;font-size:1.75rem}header p{margin:0;color:#475569}.card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 10px 40px #0f172a14;border:1px solid #e2e8f0}.card h2{margin-top:0;margin-bottom:.5rem;font-size:1.25rem}.card p{margin-top:0;color:#475569}button{border:none;border-radius:8px;background-color:#2563eb;color:#fff;padding:.65rem 1.25rem;font-size:.95rem;font-weight:600;cursor:pointer;transition:background-color .2s ease,transform .2s ease}button:hover:not(:disabled){background-color:#1d4ed8;transform:translateY(-1px)}button:disabled{background-color:#94a3b8;cursor:not-allowed}.status{margin-top:.75rem;font-weight:600;color:#0f172a}.elapsed{margin-top:.25rem;color:#475569;font-size:.9rem}.error{margin-top:.5rem;color:#dc2626;font-weight:500}.output{margin-top:1rem;background-color:#0f172a;color:#e2e8f0;padding:1rem;border-radius:8px;font-size:.85rem;overflow-x:auto}.score-viewer{margin-top:1rem;overflow-x:auto;border-radius:12px;border:1px solid #e2e8f0;background:#fff;padding:1rem}.score-viewer svg{display:block;max-width:100%;height:auto}.helper{color:#94a3b8;margin-top:.5rem}.actions{display:flex;gap:.5rem;align-items:center}h4{margin-top:0}.midi-player{display:flex;align-items:center;gap:1rem;margin-top:1rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#1e293b,#0f172a);border-radius:12px;box-shadow:0 4px 20px #0f172a4d}.midi-player-controls{display:flex;gap:.5rem;flex-shrink:0}.midi-player-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:50%;background:#334155;color:#e2e8f0;transition:all .2s ease}.midi-player-btn:hover:not(:disabled){background:#475569;transform:scale(1.05)}.midi-player-btn:disabled{background:#1e293b;color:#475569;cursor:not-allowed}.midi-player-btn-play{width:48px;height:48px;background:linear-gradient(135deg,#3b82f6,#2563eb)}.midi-player-btn-play:hover:not(:disabled){background:linear-gradient(135deg,#60a5fa,#3b82f6)}.midi-player-progress-container{flex:1;min-width:0}.midi-player-progress-bar{position:relative;height:8px;background:#334155;border-radius:4px;cursor:pointer;overflow:visible}.midi-player-progress-bar:hover{height:10px;margin:-1px 0}.midi-player-progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:4px;transition:width .05s linear}.midi-player-progress-handle{position:absolute;top:50%;width:14px;height:14px;background:#fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 8px #0000004d;opacity:0;transition:opacity .2s ease}.midi-player-progress-bar:hover .midi-player-progress-handle{opacity:1}.midi-player-time{display:flex;align-items:center;gap:.25rem;font-size:.85rem;font-family:SF Mono,Fira Code,monospace;color:#94a3b8;flex-shrink:0;min-width:90px;justify-content:flex-end}.midi-player-time-current{color:#e2e8f0}.midi-player-time-separator{color:#475569}.midi-player-settings{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:.75rem;padding:.5rem .75rem;border-radius:10px;background:#0f172aa6;border:1px solid rgba(148,163,184,.18);color:#e2e8f0}.midi-player-setting{display:flex;align-items:center;gap:.45rem;font-size:.85rem;color:#e2e8f0}.midi-player-setting input[type=checkbox]{accent-color:#3b82f6}.midi-player-setting-range{gap:.6rem}.midi-player-setting-range input[type=range]{width:140px}@media(max-width:640px){.midi-player-setting-range input[type=range]{width:110px}}.inference-controls{display:flex;flex-direction:column;gap:1rem;margin-bottom:1.25rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:10px;border:1px solid #e2e8f0}.control-group{display:flex;flex-direction:column;gap:.35rem}.control-group label{font-size:.9rem;color:#334155;font-weight:500}.control-group label strong{color:#0f172a;font-weight:700;font-family:SF Mono,Fira Code,monospace}.control-group input[type=range]{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:#cbd5e1;border-radius:3px;cursor:pointer}.control-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #2563eb66;transition:transform .2s ease}.control-group input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.1)}.control-group input[type=range]:disabled{opacity:.5;cursor:not-allowed}.control-group input[type=range]:disabled::-webkit-slider-thumb{background:#94a3b8;cursor:not-allowed}.control-group .hint{font-size:.8rem;color:#64748b}.range-with-input{display:flex;align-items:center;gap:.75rem}.range-with-input input[type=range]{flex:1}.number-input{width:70px;padding:.4rem .5rem;border:1px solid #cbd5e1;border-radius:6px;font-size:.9rem;font-family:SF Mono,Fira Code,monospace;font-weight:600;text-align:center;background:#fff;color:#0f172a;transition:border-color .2s ease,box-shadow .2s ease}.number-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.number-input:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}.radio-group{display:flex;gap:1rem;margin-top:.25rem}.radio-label{display:flex;align-items:center;gap:.4rem;font-size:.95rem;color:#334155;cursor:pointer}.radio-label input[type=radio]{width:18px;height:18px;accent-color:#2563eb;cursor:pointer}.radio-label input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.checkbox-label{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:#334155;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:#2563eb;cursor:pointer}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.5}.run-button{font-size:1rem;padding:.75rem 1.5rem}.progress-bar{margin-top:.75rem;height:6px;background:#e2e8f0;border-radius:3px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa);border-radius:3px;transition:width .1s ease-out}.score-viewer .note-active,.score-viewer .note-active *{fill:#ef4444!important;stroke:#ef4444!important;transition:fill .1s ease,stroke .1s ease}.score-viewer .note-active{filter:drop-shadow(0 0 4px rgba(239,68,68,.6))}.score-viewer .ledger-active{stroke:#ef4444!important;transition:stroke .1s ease}.results-container{display:flex;flex-direction:column;gap:1.5rem;margin-top:1rem}.result-item{padding:1.25rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:10px;border:1px solid #e2e8f0}.result-item h3{margin:0 0 .75rem;font-size:1rem;color:#334155;display:flex;align-items:center;gap:.5rem}.result-item h3:before{content:"";display:inline-block;width:8px;height:8px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:50%}.result-item .score-viewer,.result-item .midi-player,.result-item .output{margin-top:.75rem}.result-item details summary{cursor:pointer;color:#64748b;font-size:.85rem;padding:.5rem 0}.result-item details summary:hover{color:#334155}.results-grid-4{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}@media(max-width:768px){.results-grid-4{grid-template-columns:1fr}}.model-select{width:100%;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:6px;font-size:.95rem;background:#fff;color:#0f172a;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease}.model-select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f626}.model-select:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}.steps-button-group{display:flex;flex-wrap:wrap;gap:.5rem}.steps-btn{min-width:48px;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;font-size:.9rem;font-family:SF Mono,Fira Code,monospace;font-weight:600;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .1s ease}.steps-btn:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8;transform:translateY(-1px)}.steps-btn-active{background:linear-gradient(135deg,#3b82f6,#2563eb);border-color:#2563eb;color:#fff}.steps-btn-active:hover:not(:disabled){background:linear-gradient(135deg,#60a5fa,#3b82f6);border-color:#3b82f6}.steps-btn:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed;transform:none}.steps-btn-active:disabled{background:#94a3b8;border-color:#94a3b8;color:#fff}.candidate-selector{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;padding:.75rem 1rem;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:8px;border:1px solid #e2e8f0}.candidate-selector-label{font-size:.9rem;font-weight:500;color:#334155;display:flex;align-items:center;gap:.25rem}.candidate-loading-indicator{color:#94a3b8;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.candidate-btn-group{display:flex;gap:.5rem}.candidate-btn{width:36px;height:36px;padding:0;border:2px solid var(--candidate-color);border-radius:8px;background:#fff;color:var(--candidate-color);font-size:.9rem;font-weight:700;cursor:pointer;transition:background-color .15s ease,transform .1s ease,box-shadow .15s ease}.candidate-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px color-mix(in srgb,var(--candidate-color) 30%,transparent)}.candidate-btn-active{background:var(--candidate-color);color:#fff}.candidate-btn-hovered:not(.candidate-btn-active){box-shadow:0 0 0 3px color-mix(in srgb,var(--candidate-color) 25%,transparent),0 4px 12px color-mix(in srgb,var(--candidate-color) 20%,transparent)}.score-viewer .candidate-note-0,.score-viewer .candidate-note-0 *{fill:#e63946!important;stroke:#e63946!important}.score-viewer .candidate-note-1,.score-viewer .candidate-note-1 *{fill:#3b82f6!important;stroke:#3b82f6!important}.score-viewer .candidate-note-2,.score-viewer .candidate-note-2 *{fill:#f97316!important;stroke:#f97316!important}.score-viewer .candidate-note-3,.score-viewer .candidate-note-3 *{fill:#7c3aed!important;stroke:#7c3aed!important}.single-result-container{position:relative}.single-result-container .score-viewer{margin-top:0}.single-result-container .midi-player{margin-top:1rem}.preload-status{position:absolute;top:.5rem;right:.5rem;padding:.25rem .5rem;background:#0009;color:#fff;font-size:.75rem;border-radius:4px;pointer-events:none}.result-item-candidate-0{border-left:4px solid #e63946}.result-item-candidate-1{border-left:4px solid #3b82f6}.result-item-candidate-2{border-left:4px solid #f97316}.result-item-candidate-3{border-left:4px solid #7c3aed}.gpt-analysis-panel{margin-top:1.5rem;padding:1.25rem;background:linear-gradient(135deg,#fefce8,#fef9c3);border-radius:10px;border:1px solid #fde047}.gpt-analysis-panel h3{margin:0 0 1rem;font-size:1.1rem;color:#854d0e;display:flex;align-items:center;gap:.5rem}.gpt-analysis-panel h3:before{content:"🤖"}.gpt-controls{margin-bottom:1rem}.gpt-control-row{display:flex;gap:.5rem;flex-wrap:wrap}.gpt-api-input{flex:1;min-width:200px;padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.9rem;background:#fff}.gpt-api-input:focus{outline:none;border-color:#eab308;box-shadow:0 0 0 3px #eab30826}.gpt-model-select{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:6px;font-size:.9rem;background:#fff;cursor:pointer}.gpt-model-select:focus{outline:none;border-color:#eab308}.gpt-analyze-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#eab308,#ca8a04);border:none;border-radius:6px;color:#fff;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;white-space:nowrap}.gpt-analyze-btn:hover:not(:disabled){background:linear-gradient(135deg,#facc15,#eab308);transform:translateY(-1px)}.gpt-analyze-btn:disabled{background:#9ca3af;cursor:not-allowed}.gpt-hint{margin:.5rem 0 0;font-size:.8rem;color:#92400e}.gpt-error{margin-top:.75rem;padding:.75rem 1rem;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;color:#dc2626;font-size:.9rem}.gpt-loading{display:flex;align-items:center;gap:.75rem;padding:1rem;background:#fffbeb;border-radius:6px;color:#92400e}.gpt-spinner{width:20px;height:20px;border:2px solid #fde68a;border-top-color:#eab308;border-radius:50%;animation:gpt-spin .8s linear infinite}@keyframes gpt-spin{to{transform:rotate(360deg)}}.gpt-results{margin-top:1rem}.gpt-global-summary{padding:1rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb;margin-bottom:1rem}.gpt-global-summary h4{margin:0 0 .5rem;font-size:.95rem;color:#374151}.gpt-one-liner{margin:0 0 .75rem;font-size:1rem;color:#1f2937;font-weight:500}.gpt-focus-tags{display:flex;flex-wrap:wrap;gap:.5rem}.gpt-focus-tag{padding:.25rem .75rem;background:#fef3c7;border-radius:999px;font-size:.8rem;color:#92400e}.gpt-candidates-section{margin-bottom:1rem}.gpt-candidates-section h4{margin:0 0 .75rem;font-size:.95rem;color:#374151}.gpt-candidate-detail{margin-bottom:.5rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb;overflow:hidden}.gpt-candidate-summary{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;user-select:none;transition:background .15s ease}.gpt-candidate-summary:hover{background:#f9fafb}.gpt-candidate-id{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(135deg,#3b82f6,#2563eb);border-radius:6px;color:#fff;font-weight:700;font-size:.9rem}.gpt-candidate-tags{flex:1;font-size:.9rem;color:#6b7280}.gpt-scores-inline{display:flex;gap:.5rem;font-size:.8rem}.gpt-scores-inline span{padding:.15rem .5rem;background:#f3f4f6;border-radius:4px;cursor:help}.gpt-candidate-content{padding:1rem;border-top:1px solid #e5e7eb;background:#fafafa}.gpt-section{margin-bottom:1rem}.gpt-section:last-child{margin-bottom:0}.gpt-section h5{margin:0 0 .5rem;font-size:.85rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.gpt-section p{margin:0;font-size:.9rem;color:#374151}.gpt-section ul{margin:0;padding-left:1.25rem;font-size:.9rem;color:#374151}.gpt-section li{margin-bottom:.25rem}.gpt-section li:last-child{margin-bottom:0}.gpt-scores-grid{display:flex;flex-direction:column;gap:.5rem}.gpt-score-item{display:flex;align-items:center;gap:.75rem}.gpt-score-label{width:120px;font-size:.85rem;color:#6b7280}.gpt-score-bar{flex:1;height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}.gpt-score-fill{height:100%;background:linear-gradient(90deg,#eab308,#f59e0b);border-radius:4px;transition:width .3s ease}.gpt-score-value{width:24px;font-size:.85rem;font-weight:600;color:#374151;text-align:right}.gpt-evidence-list{list-style:none;padding:0}.gpt-evidence-list li{padding:.5rem;background:#fff;border-radius:4px;margin-bottom:.5rem;border:1px solid #e5e7eb}.gpt-evidence-list code{background:#fef3c7;padding:.15rem .4rem;border-radius:3px;font-size:.85rem;color:#92400e}.gpt-exercise{padding:.75rem;background:#ecfdf5;border-radius:6px;border-left:3px solid #10b981;font-style:italic}.gpt-comparison{margin-bottom:1rem;padding:1rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb}.gpt-comparison h4{margin:0 0 .75rem;font-size:.95rem;color:#374151}.gpt-comparison-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}@media(max-width:640px){.gpt-comparison-grid{grid-template-columns:1fr}}.gpt-comparison-item{padding:.75rem;background:#f9fafb;border-radius:6px;display:flex;flex-direction:column;gap:.25rem}.gpt-comparison-label{font-size:.75rem;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.gpt-comparison-id{font-size:1.25rem;font-weight:700;color:#3b82f6}.gpt-comparison-reason{font-size:.85rem;color:#374151}.gpt-learning-notes{margin-bottom:1rem;padding:1rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb}.gpt-learning-notes h4{margin:0 0 .75rem;font-size:.95rem;color:#374151}.gpt-concepts,.gpt-prompts{margin-bottom:.75rem}.gpt-concepts:last-child,.gpt-prompts:last-child{margin-bottom:0}.gpt-concepts h5,.gpt-prompts h5{margin:0 0 .5rem;font-size:.85rem;color:#6b7280}.gpt-concepts ul,.gpt-prompts ul{margin:0;padding-left:1.25rem;font-size:.9rem;color:#374151}.gpt-confidence{margin-bottom:1rem;padding:.5rem 1rem;background:#f3f4f6;border-radius:6px;font-size:.85rem;color:#6b7280;text-align:center}.gpt-reset-btn{width:100%;padding:.5rem;background:#f3f4f6;border:1px solid #d1d5db;border-radius:6px;color:#6b7280;font-size:.85rem;cursor:pointer;transition:all .15s ease}.gpt-reset-btn:hover{background:#e5e7eb;color:#374151}.gpt-mode-selector{display:flex;gap:.75rem;align-items:center;padding:.25rem .5rem;background:#f9fafb;border-radius:6px;border:1px solid #d1d5db}.gpt-mode-label{display:flex;align-items:center;gap:.35rem;font-size:.85rem;color:#374151;cursor:pointer;white-space:nowrap}.gpt-mode-label input[type=radio]{width:16px;height:16px;accent-color:#eab308;cursor:pointer}.gpt-mode-label input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.gpt-simple-info{margin-top:.75rem;padding:.75rem 1rem;background:#ecfdf5;border-radius:6px;border-left:3px solid #10b981}.gpt-simple-info p{margin:0;font-size:.9rem;color:#047857}.gpt-simple-banner{margin-top:1rem;padding:1rem 1.25rem;background:linear-gradient(135deg,#fefce8,#fef9c3);border-radius:10px;border:1px solid #fde047}.gpt-simple-one-liner{margin:0 0 .75rem;font-size:1rem;font-weight:500;color:#854d0e}.gpt-simple-focus-tags{display:flex;flex-wrap:wrap;gap:.5rem}.gpt-simple-focus-tag{padding:.25rem .75rem;background:#fef3c7;border-radius:999px;font-size:.8rem;color:#92400e;border:1px solid #fde68a}.simple-candidate-analysis{margin-top:.75rem;padding:.75rem 1rem;background:linear-gradient(135deg,#fffbeb,#fef3c7);border-radius:8px;border-left:3px solid #f59e0b}.simple-description{margin:0 0 .5rem;font-size:.9rem;font-style:italic;color:#78350f}.simple-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}.simple-tag{font-size:.75rem;padding:.15rem .5rem;background:#f59e0b;color:#fff;border-radius:999px;font-weight:500}.simple-scores{display:flex;gap:.75rem;font-size:.85rem}.simple-scores>span{display:flex;align-items:center;gap:.2rem;padding:.2rem .5rem;background:#fff;border-radius:4px;border:1px solid #fde68a;cursor:help}.simple-score-icon{font-size:.9rem}.simple-score-value{font-weight:600;color:#78350f}.gpt-provider-selector{display:flex;gap:1rem;align-items:center;padding:.5rem .75rem;background:#fff;border-radius:6px;border:1px solid #d1d5db;margin-bottom:.75rem}.gpt-provider-label{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:500;color:#374151;cursor:pointer}.gpt-provider-label input[type=radio]{width:16px;height:16px;accent-color:#eab308;cursor:pointer}.gpt-provider-label input[type=radio]:disabled{cursor:not-allowed;opacity:.5}.gpt-api-keys-section{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.75rem}.gpt-api-row{display:flex;align-items:center;gap:.5rem}.gpt-api-label{min-width:60px;font-size:.85rem;font-weight:500;color:#6b7280}.gpt-mini-score-container{margin-bottom:1rem;padding:.75rem;background:#fff;border-radius:8px;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000000d}.gpt-mini-score-viewer{width:100%;overflow-x:auto;margin-bottom:.5rem}.gpt-mini-score-viewer svg{max-width:100%;height:auto}.gpt-mini-score-loading{padding:1rem;text-align:center;color:#9ca3af;font-size:.85rem;font-style:italic}