:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#1d2125;--bg-deep:#262a2d;--bg-panel:#2c3033;--bg-elevated:#3e4245;--body-face:#4c4f52;--border:#4c4f52;--border-soft:#3e4245;--text:#dfdfdf;--text-body:#d3d6d6;--muted:#848789;--muted-hover:#aaacad;--accent:#a8f;--accent-hover:#bda3ff;--accent-press:#906de9;--accent-dim:#6b5a99;--accent-soft:#aa88ff2e;--mod:#1de9b6;--mod-bright:#64ffda;--mod-cyan:#1dc2e9;--ok:#1de9b6;--warn:#e0b45a;--danger:#ea1616;--radius:9px;--font:"Segoe UI", system-ui, -apple-system, sans-serif;--mono:"Cascadia Code", "Fira Code", ui-monospace, monospace;--shadow:#0006}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);font-family:var(--font);margin:0;line-height:1.45}body{background:radial-gradient(1100px 520px at 12% -8%, #aa88ff24 0%, transparent 55%), radial-gradient(900px 480px at 100% 0%, #1de9b612 0%, transparent 48%), radial-gradient(700px 400px at 50% 100%, #1dc2e90a 0%, transparent 45%), var(--bg)}#app{max-width:1280px;margin:0 auto;padding:1.25rem 1.1rem 2.5rem}header{border-bottom:1px solid var(--border-soft);margin-bottom:1.1rem;padding-bottom:.85rem}.brand-row{align-items:center;gap:.65rem;margin-bottom:.4rem;display:flex}.brand-mark{background:linear-gradient(145deg, var(--accent-hover) 0%, var(--accent) 45%, var(--accent-press) 100%);border-radius:6px;flex-shrink:0;width:1.65rem;height:1.65rem;position:relative;box-shadow:0 0 0 1px #aa88ff59,0 0 16px #aa88ff59,inset 0 1px #ffffff40}.brand-mark:after{content:"";opacity:.9;background:linear-gradient(90deg,#0000,#ffffffd9,#0000);border-radius:2px;position:absolute;inset:28% 18% 32%;transform:skew(-18deg)}header h1{letter-spacing:-.02em;color:var(--text);margin:0;font-size:1.45rem;font-weight:650}header h1 .vital-word{color:var(--accent);text-shadow:0 0 18px #aa88ff73}header p{color:var(--muted);max-width:66ch;margin:0;font-size:.92rem}.app-layout{grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:start;gap:1rem;display:grid}.main-col{flex-direction:column;gap:.85rem;min-width:0;display:flex}.panel-help{border-color:var(--border);max-height:calc(100vh - 1.25rem);box-shadow:0 0 0 1px #aa88ff1a, 0 8px 28px var(--shadow);z-index:5;align-self:start;position:sticky;top:.65rem;overflow:auto}@media (width<=900px){.app-layout{grid-template-columns:1fr}.panel-help{max-height:none;position:relative;top:0}}.panel{background:linear-gradient(180deg, #32363a 0%, var(--bg-panel) 28%, var(--bg-panel) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.1rem;box-shadow:0 4px 18px #00000038}.panel h2{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .75rem;font-size:.85rem;font-weight:600}.dropzone{border:1.5px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--bg-elevated);padding:1.75rem 1rem;transition:border-color .15s,background .15s,box-shadow .25s;position:relative;overflow:hidden}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#2a2735;box-shadow:0 0 0 1px #aa88ff40,0 0 20px #aa88ff1f}.dropzone-idle strong,.dropzone-success .drop-success-title{margin-bottom:.25rem;display:block}.dropzone-idle span{color:var(--muted);font-size:.9rem}.dropzone input{display:none}.dropzone-success{pointer-events:none;flex-direction:column;align-items:center;gap:.2rem;display:none}.dropzone.import-success .dropzone-idle{display:none}.dropzone.import-success .dropzone-success{animation:.45s ease-out both drop-success-in;display:flex}.dropzone.import-success{border-style:solid;border-color:var(--accent);background:radial-gradient(ellipse 90% 80% at 50% 40%, #aa88ff47 0%, transparent 70%), linear-gradient(180deg, #342f45 0%, var(--bg-deep) 100%);animation:2.8s ease-out both import-glow;box-shadow:0 0 0 1px #aa88ff8c,0 0 22px 4px #a8f6,0 0 48px 10px #906de938,inset 0 0 28px #aa88ff1a}.dropzone.import-success:before{content:"";pointer-events:none;background:conic-gradient(#0000 0deg,#bda3ff29 40deg,#0000 80deg 180deg,#64ffda14 220deg,#0000 280deg);animation:2.8s linear both import-shimmer;position:absolute;inset:-40%}.drop-success-title{color:#e8ddff;letter-spacing:.02em;text-shadow:0 0 12px #aa88ffbf;font-size:1.05rem}.drop-success-sub{color:var(--accent-hover);font-size:.9rem;font-weight:500}.drop-success-mode{color:#e8ddffb3;font-size:.78rem;font-family:var(--mono);margin-top:.15rem}@keyframes import-glow{0%{box-shadow:0 0 #bda3fff2,0 0 8px 2px #aa88ffe6,0 0 28px 8px #906de98c,inset 0 0 20px #aa88ff40}35%{box-shadow:0 0 0 1px #aa88ffb3,0 0 28px 8px #aa88ff8c,0 0 56px 14px #906de94d,inset 0 0 32px #aa88ff26}to{box-shadow:0 0 0 1px #aa88ff59,0 0 12px 2px #aa88ff38,0 0 24px 4px #906de91a,inset 0 0 12px #aa88ff0f}}@keyframes import-shimmer{0%{opacity:.85;transform:rotate(0)}70%{opacity:.5}to{opacity:0;transform:rotate(180deg)}}@keyframes drop-success-in{0%{opacity:0;transform:translateY(6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@media (prefers-reduced-motion:reduce){.dropzone.import-success,.dropzone.import-success:before,.dropzone.import-success .dropzone-success{animation:none}.dropzone.import-success{box-shadow:0 0 0 1px #aa88ff8c,0 0 18px 4px #aa88ff59}}.field{flex-direction:column;gap:.3rem;margin-bottom:.75rem;display:flex}.field label{color:var(--muted);font-size:.82rem}.field-row{grid-template-columns:1fr 1fr;gap:.75rem;display:grid}select,input[type=number],input[type=text]{background:var(--bg);border:1px solid var(--border);color:var(--text);font:inherit;border-radius:6px;padding:.45rem .55rem}input[type=range]{width:100%;accent-color:var(--accent)}.checks{flex-wrap:wrap;gap:.75rem 1.1rem;margin:.5rem 0 .75rem;display:flex}.checks label{color:var(--text);cursor:pointer;align-items:center;gap:.4rem;font-size:.9rem;display:flex}details.advanced{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.75rem}details.advanced summary{cursor:pointer;color:var(--accent);margin-bottom:.6rem;font-size:.9rem}.actions{flex-wrap:wrap;gap:.6rem;margin-top:.5rem;display:flex}button{font:inherit;cursor:pointer;background:var(--bg-elevated);color:var(--text);border:none;border:1px solid var(--border);border-radius:7px;padding:.55rem .95rem}button.primary{background:linear-gradient(180deg, var(--accent-hover), var(--accent));color:#111;border-color:#0000;font-weight:600;box-shadow:0 0 14px #aa88ff47}button.primary:hover:not(:disabled){background:linear-gradient(180deg, #cbb8ff, var(--accent-hover));box-shadow:0 0 18px #a8f6}button.primary:active:not(:disabled){background:linear-gradient(180deg, var(--accent), var(--accent-press))}button:hover:not(:disabled):not(.primary):not(.help-linkish):not(.ghost){border-color:var(--muted);background:#4a4e51}button:disabled{opacity:.45;cursor:not-allowed}button.is-busy{opacity:.85;cursor:wait;pointer-events:none}.convert-progress{align-items:center;gap:.75rem;min-height:2.5rem;margin-top:.75rem;display:flex}.convert-progress[hidden]{display:none}.convert-progress-text{flex-direction:column;gap:.15rem;min-width:0;display:flex}.convert-progress .status{margin:0}.progress-eta{color:var(--muted);font-variant-numeric:tabular-nums;margin:0;font-size:.82rem}.progress-eta[hidden]{display:none}.progress-ring{flex-shrink:0;width:2.5rem;height:2.5rem;position:relative}.progress-ring[hidden]{display:none}.progress-ring-svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}.progress-ring-bg{stroke:#aa88ff2e;stroke-width:3px}.progress-ring-fg{stroke:var(--accent);stroke-width:3px;stroke-linecap:round;stroke-dasharray:97.389;stroke-dashoffset:97.389px;filter:drop-shadow(0 0 3px #aa88ff8c);transition:stroke-dashoffset .12s linear}.progress-pct{font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.02em;pointer-events:none;place-items:center;font-size:.62rem;font-weight:650;display:grid;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){.progress-ring-fg{transition:none}}.meta{font-family:var(--mono);color:var(--muted);white-space:pre-wrap;font-size:.78rem;line-height:1.55}.meta strong{color:var(--ok);font-weight:600}.canvas-wrap{background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;margin-bottom:.45rem;padding:.3rem}canvas{width:100%;height:88px;display:block}.guide{color:var(--muted);font-size:.9rem}.guide ol{margin:.4rem 0 0;padding-left:1.2rem}.guide li{margin-bottom:.35rem}.guide code{font-family:var(--mono);background:var(--bg);color:var(--text);border-radius:4px;padding:.05em .3em;font-size:.85em}.status{color:var(--muted);margin-top:.75rem;font-size:.88rem}.status.error{color:var(--danger)}.status.ok{color:var(--ok)}footer{color:var(--muted);margin-top:1.5rem;font-size:.8rem}.field-inactive{opacity:.45}.field-inactive input,.field-inactive select{cursor:not-allowed}.help-where,.help-when-active{color:var(--muted);margin:.2rem 0;font-size:.82rem;line-height:1.4}.help-related{flex-wrap:wrap;align-items:center;gap:.35rem .5rem;font-size:.85rem;display:flex}.help-header{justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.65rem;display:flex}.help-header h2{margin:0}.help-linkish{color:var(--accent);text-underline-offset:2px;cursor:pointer;background:0 0;border:none;padding:.15rem .25rem;font-size:.82rem;text-decoration:underline}.help-linkish:hover{color:var(--accent-hover)}.help-recipes{flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem;display:flex}.recipe-chip{background:var(--bg);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .55rem;font-size:.78rem;display:inline-flex}.recipe-chip:hover{border-color:var(--accent-dim)}.recipe-chip.is-active{border-color:var(--accent);background:#2a2735;box-shadow:0 0 0 1px #aa88ff4d}.recipe-label{font-weight:600}.recipe-action{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem}.help-title{letter-spacing:-.01em;margin:0 0 .5rem;font-size:1.05rem;font-weight:650}.help-body{color:var(--text);font-size:.9rem}.help-summary{color:var(--muted);margin:0 0 .85rem;line-height:1.5}.help-body h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:.9rem 0 .4rem;font-size:.75rem;font-weight:600}.help-list{color:var(--text);margin:0;padding-left:1.15rem}.help-list li{margin-bottom:.35rem}.help-list--warn li::marker{color:var(--warn)}.help-list--tip li::marker{color:var(--ok)}.help-options{flex-direction:column;gap:.55rem;display:flex}.help-option{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.55rem .65rem}.help-option header{flex-wrap:wrap;align-items:center;gap:.4rem .55rem;margin-bottom:.35rem;display:flex}.help-option header strong{font-size:.88rem}.help-effect,.help-consequence{color:var(--muted);margin:.2rem 0 0;font-size:.84rem;line-height:1.45}.help-k{min-width:5.5rem;color:var(--text);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem;font-weight:600;display:inline-block}.help-badge{text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--border);border-radius:999px;padding:.12rem .4rem;font-size:.68rem;font-weight:650;display:inline-block}.help-badge--recommended{color:var(--ok);background:#1a2e2a;border-color:#1de9b673}.help-badge--advanced{color:var(--accent);border-color:var(--accent-dim);background:#2a2735}.help-badge--debug{color:var(--muted);border-color:var(--border)}.help-badge--caution{color:var(--warn);background:#2a2618;border-color:#e0b45a73}.help-active{outline-offset:2px;border-radius:8px;outline:1px solid #aa88ff8c}.dropzone.help-active{border-color:var(--accent)}.guide-more{margin-top:.65rem;font-size:.85rem}.checks label.help-active{background:#2a2735;border-radius:6px;padding:.15rem .35rem}.panel-preview{padding:.7rem .85rem}.panel-preview .field{margin-bottom:.4rem}.preview-top{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.25rem .75rem;margin-bottom:.35rem;display:flex}.preview-top h2{margin:0;font-size:.8rem}.honesty{color:var(--muted);max-width:42ch;margin:0;font-size:.7rem;line-height:1.3}.panel-preview .meta{margin-top:.45rem;font-size:.72rem;line-height:1.4}.lang-flags{gap:.25rem;display:inline-flex}.flag-btn{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.2rem .4rem;font-size:1.15rem;line-height:1}.flag-btn.is-active{border-color:var(--accent);box-shadow:0 0 0 1px #aa88ff59}.help-header{flex-wrap:wrap}.keyboard-row{border-top:1px solid var(--border);margin-top:.5rem;padding-top:.5rem}.kb-meta{flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin-bottom:.35rem;font-size:.8rem;display:flex}.inline-check{cursor:pointer;align-items:center;gap:.35rem;display:inline-flex}.octave-ctl{color:var(--muted);align-items:center;gap:.35rem;font-size:.85rem;display:inline-flex}button.ghost{background:0 0;padding:.3rem .55rem;font-size:.82rem}.keyboard{-webkit-user-select:none;user-select:none;touch-action:none;height:64px;display:flex;position:relative}.key{border:1px solid var(--border);cursor:pointer;margin:0;padding:0;position:relative}.key.white{color:#1a2030;z-index:1;background:linear-gradient(#e8ecf4,#c5ccd8);border-radius:0 0 5px 5px;flex:1;justify-content:center;align-items:flex-end;padding-bottom:.25rem;font-size:.62rem;font-weight:600;display:flex}.key.black{color:#0000;z-index:2;background:linear-gradient(#4c4f52,#262a2d);border-radius:0 0 3px 3px;flex:none;width:7.5%;height:55%;margin-left:-3.75%;margin-right:-3.75%}.key.white.active{background:linear-gradient(180deg, var(--accent-hover), var(--accent));color:#111;box-shadow:0 0 12px #aa88ff59}.key.black.active{background:linear-gradient(180deg, var(--accent), var(--accent-press));box-shadow:0 0 10px #a8f6}.modifiers-details{margin-top:.5rem;padding-top:.5rem}.modifiers-grid{flex-direction:column;gap:.65rem;display:flex}.mod-card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.55rem .65rem;font-size:.85rem}.mod-card>label{align-items:center;gap:.4rem;margin-bottom:.4rem;font-weight:600;display:flex}.field-row.compact{color:var(--muted);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.45rem;font-size:.78rem}.field-row.compact label{flex-direction:column;gap:.2rem;display:flex}.load-actions{flex-wrap:wrap;gap:.45rem;margin-top:.55rem;display:flex}.muted-hint{color:var(--muted);margin:.35rem 0 0;font-size:.78rem;line-height:1.35}.file-list{flex-direction:column;gap:.3rem;max-height:14rem;margin-top:.5rem;display:flex;overflow-y:auto}.file-row{background:var(--bg);border:1px solid var(--border);border-radius:6px;justify-content:space-between;align-items:center;gap:.35rem;padding:.2rem .35rem .2rem .2rem;font-size:.82rem;display:flex}.file-row-main{text-align:left;min-width:0;color:inherit;font:inherit;cursor:pointer;background:0 0;border:none;border-radius:4px;flex:1;padding:.25rem .35rem}.file-row-main:hover{background:var(--bg-elevated)}.file-row-name{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.file-row.is-active{border-color:var(--accent);box-shadow:0 0 0 1px #aa88ff59}.file-row.error{border-color:var(--danger);color:var(--danger)}.file-row.done{border-color:color-mix(in srgb, var(--ok) 55%, var(--border))}.file-row.working{border-color:var(--accent);opacity:.95}@media (width<=900px){.key.black{width:8%;margin-left:-4%;margin-right:-4%}}