:root{color-scheme:light;font-family:Trebuchet MS,Segoe UI,sans-serif}html{scrollbar-gutter:stable both-edges}*,*:before,*:after{box-sizing:border-box}body{margin:0;background:#fff;color:#111827;min-height:100vh}#app{padding:2rem;max-width:1280px;margin:0 auto}.app-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.title{display:flex;align-items:center;gap:.5rem;margin:0 0 .5rem;font-size:clamp(1.6rem,3vw,2.4rem)}.brand-logo{width:2.6rem;height:auto;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.subtitle{opacity:.9;margin-bottom:1.6rem}.github-link{border:1px solid #d1d5db;border-radius:999px;color:#111827;background:#fff;padding:.45rem .8rem;text-decoration:none;font-size:.9rem;line-height:1;box-shadow:0 1px 3px #0f172a14}.github-link:hover{background:#f9fafb;border-color:#9ca3af}.toolbar{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:1rem;align-items:end}.score-row{grid-template-columns:minmax(170px,260px) minmax(145px,180px) minmax(145px,170px) minmax(180px,1fr)}.ai-section{margin-bottom:1rem}.ai-details{min-width:0}.ai-details summary{cursor:pointer}.ai-details[open] summary{margin-bottom:.75rem}.ai-panel{display:grid;grid-template-columns:minmax(260px,1fr) minmax(120px,150px);gap:.75rem;align-items:end}.settings-row{grid-template-columns:minmax(135px,170px) minmax(90px,110px) minmax(105px,125px) minmax(120px,140px) minmax(110px,125px) minmax(80px,95px) minmax(95px,115px) minmax(90px,110px)}.toolbar label,.ai-panel label,.bpm-field{display:flex;flex-direction:column;gap:.4rem;min-width:0}.toolbar input,.toolbar select,.toolbar textarea,.toolbar button,.ai-panel input,.ai-panel textarea,.ai-panel button{border:1px solid #d1d5db;border-radius:8px;padding:.55rem .65rem;background:#fff;color:#111827;width:100%}.toolbar button,.ai-panel button{cursor:pointer;border-color:#9ca3af;background:#f9fafb}.toolbar button:hover,.ai-panel button:hover{background:#f3f4f6}.bpm-input-row{display:grid;grid-template-columns:minmax(0,1fr) 52px;gap:.4rem}.toolbar .tap-bpm-button{padding-left:.35rem;padding-right:.35rem}.script-json-field textarea{min-height:8rem;resize:vertical;font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,monospace;line-height:1.35}.status-field{display:grid;gap:.4rem}.status-field>span:first-child{font-size:.95rem}.status{min-height:1.25rem;font-size:.95rem}.playback-bar{display:grid;grid-template-columns:minmax(150px,190px) minmax(130px,170px) minmax(260px,1fr);gap:.75rem;align-items:center;margin:.75rem 0 0}.playback-bar button{border:1px solid #9ca3af;border-radius:8px;padding:.55rem .65rem;background:#f9fafb;color:#111827;cursor:pointer;width:100%}.playback-bar button:hover{background:#f3f4f6}.playback-bar audio{width:100%}.parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1rem 0}.part{border:1px solid #e5e7eb;border-radius:10px;padding:.8rem;background:#fff;box-shadow:0 2px 6px #0f172a14;min-width:0}.part.is-muted{background:#f9fafb}.part.is-muted textarea{opacity:.58}.part-header{display:grid;grid-template-columns:minmax(54px,.8fr) minmax(145px,1.4fr) 24px;align-items:center;gap:.35rem;font-size:.9rem;margin-bottom:.45rem}.part-header input{min-width:0}.part-header select{min-width:0;max-width:none}.mute-button{width:24px;height:28px;border:1px solid #cbd5e1;border-radius:7px;background:#fff;color:#475569;cursor:pointer;font-size:.72rem;line-height:1;padding:0}.mute-button:hover{background:#f1f5f9}.mute-button.is-muted{background:#111827;border-color:#111827;color:#fff}.part input,.part select,.part textarea{width:100%;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#111827;padding:.5rem}.part textarea{min-height:130px;resize:none}.custom-mix{display:grid;gap:.45rem;margin:0 0 .55rem}.mix-sliders{display:grid;gap:.45rem;margin-bottom:.45rem}.source-partials .mix-sliders,.source-partials .mix-values-row,.source-mix .partials-row,.advanced-panel.is-disabled{opacity:.45}.mix-slider{display:grid;grid-template-columns:56px minmax(0,1fr);align-items:center;gap:.45rem;font-size:.82rem}.mix-slider input{padding:0}.mix-values{font-size:.85rem}.source-row{display:grid;grid-template-columns:auto 64px minmax(0,1fr);align-items:center;gap:.45rem;margin-bottom:.45rem}.partials-row{grid-template-columns:auto 64px minmax(0,1fr)}.source-row input[type=radio],.advanced-toggle input[type=checkbox]{width:auto;padding:0}.filter-row{display:grid;grid-template-columns:72px minmax(0,1fr) 58px;align-items:center;gap:.45rem;margin-bottom:.45rem}.filter-row button{width:auto;padding:.45rem .5rem;font-size:.78rem}.mix-details{font-size:.85rem;min-width:0}.mix-details summary{cursor:pointer;margin:.05rem 0 .35rem}.timbre-plots{display:grid;gap:.45rem;min-width:0}.timbre-plots figure{margin:0;min-width:0}.timbre-plots canvas{display:block;width:100%;max-width:100%;height:68px;border:1px solid #d1d5db;border-radius:6px;background:#fff}.timbre-plots figcaption{margin-top:.15rem;color:#475569;font-size:.76rem}.advanced-toggle{display:flex;align-items:center;gap:.45rem;margin:.5rem 0 .45rem}.advanced-panel{display:grid;gap:.45rem}.advanced-row{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:.45rem}.timbre-keyboard{display:grid;grid-template-columns:repeat(28,minmax(0,1fr));grid-template-rows:1.65rem 1.85rem;isolation:isolate;margin:.65rem 0 .85rem;min-width:0}.timbre-key{display:flex;justify-content:center;border:1px solid #cbd5e1;cursor:pointer;font:inherit;line-height:1;padding:0}.timbre-key:focus-visible{outline:2px solid #2563eb;outline-offset:-2px}.timbre-key.white{grid-row:1 / 3;align-items:flex-end;min-height:3.5rem;margin-left:-1px;background:#fff;color:#111827;border-radius:0 0 5px 5px;z-index:1}.timbre-key.white:first-child{margin-left:0}.timbre-key.black{grid-row:1 / 2;align-items:center;height:2rem;margin:0 12%;background:#111827;border-color:#111827;color:#fff;border-radius:0 0 4px 4px;z-index:2}.timbre-key.white:hover,.timbre-key.white.is-active{background:#dbeafe;border-color:#93c5fd}.timbre-key.black:hover,.timbre-key.black.is-active{background:#1d4ed8;border-color:#1d4ed8}.parts-resize-handle{display:flex;justify-content:center;height:10px;margin:-.45rem 0 .35rem;cursor:ns-resize}.parts-resize-handle span{width:56px;height:7px;border:1px solid #cbd5e1;border-radius:999px;background:linear-gradient(#94a3b8,#94a3b8) center / 34px 1px no-repeat,#f8fafc}.parts-resize-handle:hover span{border-color:#94a3b8;background-color:#f1f5f9}@media (max-width: 980px){.score-row{grid-template-columns:minmax(0,1fr) minmax(145px,180px)}.settings-row{grid-template-columns:repeat(4,minmax(0,1fr))}.status-field{grid-column:1 / -1}}@media (max-width: 768px){.app-header{align-items:flex-start}.toolbar,.score-row,.ai-panel,.settings-row,.playback-bar{grid-template-columns:1fr}}
