:root{color:#16211d;font-synthesis:none;text-rendering:optimizelegibility;background:#f6f8f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select,textarea{font:inherit}button{color:#16211d;background:#fff;border:1px solid #b9c5bd;border-radius:6px;min-height:2.25rem;padding:0 .8rem}button.active,button:hover{color:#fff;background:#2f6f60;border-color:#2f6f60}.app-shell{gap:1rem;min-height:100vh;padding:1rem;display:grid}.topbar,.output-pane,.preview-player,.editor-pane,.settings-pane,.support-banner{background:#fff;border:1px solid #d8dfda;border-radius:8px}.support-banner{color:#3b2c12;background:#fff7e7;border-color:#d79b2d;padding:.75rem 1rem;font-weight:700}.topbar{justify-content:space-between;align-items:center;gap:1rem;padding:1rem;display:flex}.topbar h1,.topbar p,h2{margin:0}.topbar h1{letter-spacing:0;font-size:clamp(1.6rem,2vw,2.15rem);line-height:1.1}.eyebrow{color:#65736b;letter-spacing:0;text-transform:uppercase;margin-bottom:.25rem;font-size:.75rem;font-weight:700}.input-tabs,.actions{flex-wrap:wrap;gap:.5rem;display:flex}.workspace{grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);gap:1rem;display:grid}.editor-pane,.settings-pane,.output-pane,.preview-player{padding:1rem}.pane-header{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;display:flex}h2{letter-spacing:0;font-size:1rem;line-height:1.2}textarea,pre{color:#17211e;background:#f9fbfa;border:1px solid #cfd8d2;border-radius:6px;width:100%;min-height:17rem;margin:0;padding:1rem;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:.95rem;line-height:1.55;overflow:auto}textarea{resize:vertical}.editor-tab{min-width:0}.simple-tab{gap:1rem;display:grid}.upload-tab{gap:.85rem;display:grid}.upload-dropzone{text-align:center;background:#fbfaf7;border:2px dashed #b8c5bd;border-radius:8px;place-items:center;gap:.35rem;min-height:11rem;padding:1rem;display:grid}.upload-dropzone.dragging{background:#eef6f2;border-color:#2f6f60}.upload-dropzone p{margin:0;font-size:1.05rem;font-weight:700}.upload-dropzone span,.upload-status{color:#65736b;font-size:.9rem}.upload-actions{flex-wrap:wrap;gap:.5rem;display:flex}.upload-status{background:#fff;border:1px solid #d6ddd9;border-left-width:4px;border-radius:8px;margin:0;padding:.7rem}.upload-status.error{border-left-color:#b42318}.upload-status.warning{border-left-color:#d79b2d}.upload-status.success{border-left-color:#2f6f60}.upload-status.info{border-left-color:#3a6ea5}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.simple-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;display:grid}.checkbox-field{grid-template-columns:auto 1fr;align-content:end;align-items:center;min-height:2.35rem}.checkbox-field input{width:auto;min-height:auto}.note-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;display:grid}.note-grid button{min-height:3rem;padding:0;font-weight:700}.simple-actions{flex-wrap:wrap;gap:.5rem;display:flex}.simple-sequence{background:#fbfaf7;border:1px solid #d6ddd9;border-radius:8px;flex-wrap:wrap;gap:.5rem;min-height:4.4rem;margin:0;padding:.75rem;list-style:none;display:flex}.simple-sequence li{background:#fff;border:1px solid #cfd8d2;border-radius:6px;align-content:center;justify-items:center;min-width:3.5rem;padding:.45rem .6rem;display:grid}.simple-sequence span{font-weight:700}.simple-sequence small{color:#65736b;font-size:.75rem}.editor-grid{grid-template-columns:minmax(0,1fr) 16rem;align-items:start;gap:1rem;display:grid}.editor-surface{min-width:0}.editor-diagnostics{background:#fbfaf7;border:1px solid #d6ddd9;border-radius:8px;min-height:8rem;padding:.85rem}.editor-diagnostics ul{gap:.65rem;margin:0;padding:0;list-style:none;display:grid}.editor-diagnostics li{color:#45211a;gap:.25rem;font-size:.9rem;display:grid}.diagnostic-location{color:#a33b2d;font-weight:700}.diagnostic-empty{color:#61706a;margin:0;font-size:.9rem}.preview-player{justify-content:space-between;align-items:center;gap:1rem;display:flex}.preview-actions{flex-wrap:wrap;gap:.5rem;display:flex}.preview-status{color:#35433c;margin:0;font-weight:700}.empty-output{color:#65736b;text-align:center;background:#f9fbfa;border:1px solid #cfd8d2;border-radius:6px;place-items:center;min-height:8rem;padding:1rem;display:grid}.settings-pane,.settings-panel{align-content:start;gap:.85rem;display:grid}.settings-panel{padding:0}.panel-heading{gap:.2rem;display:grid}.field{gap:.35rem;display:grid}.field-row{justify-content:space-between;align-items:center;gap:.75rem;display:flex}label,legend{color:#35433c;gap:.35rem;font-size:.9rem;font-weight:600;display:grid}legend{margin-bottom:.45rem}input,select{color:#17211e;background:#fff;border:1px solid #c2cdc6;border-radius:6px;width:100%;min-height:2.35rem;padding:0 .65rem}input[type=range]{padding:0}input.invalid,select.invalid{border-color:#b42318;box-shadow:0 0 0 3px #b423181f}.field-error{color:#b42318;margin:0;font-size:.82rem;line-height:1.35}fieldset{border:0;min-width:0;margin:0;padding:0}.segmented{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;display:grid}.segmented label{background:#fff;border:1px solid #c2cdc6;border-radius:6px;justify-content:center;align-items:center;gap:.4rem;min-height:2.35rem;padding:0 .65rem;display:flex}.segmented input{width:auto;min-height:auto}output{color:#65736b;font-size:.86rem;font-weight:700}.toast-region{z-index:10;gap:.5rem;width:min(24rem,100vw - 2rem);display:grid;position:fixed;bottom:1rem;right:1rem}.toast{background:#fff;border:1px solid #c2cdc6;border-left-width:4px;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.7rem;display:grid;box-shadow:0 12px 30px #16211d1f}.toast p{margin:0;line-height:1.45}.toast.error{border-left-color:#b42318}.toast.warning{border-left-color:#d79b2d}.toast.success{border-left-color:#2f6f60}.toast.info{border-left-color:#3a6ea5}@media (width<=760px){.app-shell{padding:.75rem}.topbar{flex-direction:column;align-items:stretch}.workspace,.editor-grid{grid-template-columns:1fr}.simple-controls,.note-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.toast-region{width:calc(100vw - 1.5rem);bottom:.75rem;right:.75rem}}