:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--color-bg:#faf7f0;--color-bg-soft:#f7f1e8;--color-surface:#fffaf2;--color-surface-muted:#f3eadf;--color-surface-raised:#fffdf8;--color-text:#4f453d;--color-text-strong:#2d241f;--color-text-muted:#817266;--color-primary:#9f5f3c;--color-primary-strong:#7f472d;--color-primary-soft:#f3ded0;--color-primary-contrast:#fffaf2;--color-accent:#6f5b8f;--color-accent-soft:#e6deee;--color-border:#e6d9ca;--color-border-strong:#d2beaa;--color-danger:#a84837;--color-danger-soft:#f5ddd7;--color-focus:#b56f44;--color-checker:#4e41360f;--color-body-wash:#fffcf6c7;--color-body-glow:#f3ded06b;--color-brand-border:#d2beaac7;--color-inset-highlight:#ffffff80;--color-hover-soft:#9f5f3c14;--color-mode-hover:#fffaf29e;--color-section-bg:#fffdf8b8;--color-debug-bg:#f3eadf5c;--color-danger-border:#a8483733;--color-drop-start:#fffdf8bd;--color-drop-end:#f3eadf47;--color-drop-hover-start:#fffdf8e0;--color-drop-hover-end:#f3ded06b;--color-drop-focus-ring:#9f5f3c14;--color-input-start:#fffdf8f2;--color-input-end:#f7f1e8b8;--color-help-border:#9f5f3c29;--color-download-border:#9f5f3c57;--color-primary-gradient-start:#ad6c46;--color-primary-gradient-end:var(--color-primary-strong);--shadow-soft:0 18px 44px #593e2614;--shadow-panel:0 10px 28px #593e260f;--shadow-control:0 1px 8px #593e2614;--shadow-popover:0 20px 44px #593e2624;--shadow-primary:0 14px 26px #7f472d2e;--shadow-primary-hover:0 16px 32px #7f472d38;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--font-serif:Georgia, "Times New Roman", "Noto Serif SC", "Songti SC", serif;--font-sans:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text:var(--color-text);--text-strong:var(--color-text-strong);--muted:var(--color-text-muted);--bg:var(--color-bg);--surface:var(--color-surface);--surface-muted:var(--color-surface-muted);--border:var(--color-border);--border-strong:var(--color-border-strong);--accent:var(--color-primary);--danger:var(--color-danger);--checker:var(--color-checker);font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*{box-sizing:border-box}html{background:var(--color-bg);min-height:100%}body,#root{min-height:100%}body{color:var(--color-text);background:linear-gradient(180deg, var(--color-body-wash), #faf7f000 340px), radial-gradient(circle at 50% 0, var(--color-body-glow), transparent 420px), var(--color-bg);margin:0;line-height:1.6}button,input,select,textarea{font:inherit}button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}h1,h2,h3,p,dl{margin:0}h1,h2,h3{color:var(--color-text-strong);font-family:var(--font-serif);letter-spacing:0;font-weight:500}h1{font-size:clamp(36px,5vw,62px);line-height:.98}h2{font-size:clamp(21px,2.4vw,28px);line-height:1.12}h3{font-size:16px;line-height:1.25}::selection{color:var(--color-text-strong);background:var(--color-primary-soft)}:root[data-color-scheme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-bg:#0d1320;--color-bg-soft:#111b2c;--color-surface:#162236;--color-surface-muted:#1d2d46;--color-surface-raised:#20324e;--color-text:#d7dfeb;--color-text-strong:#f1f5fb;--color-text-muted:#9aaabd;--color-primary:#59c7d3;--color-primary-strong:#91d9e4;--color-primary-soft:#243b5f;--color-primary-contrast:#07111d;--color-accent:#b6a3ff;--color-accent-soft:#2f2857;--color-border:#2b3f5b;--color-border-strong:#3c5575;--color-danger:#ff9b8f;--color-danger-soft:#442530;--color-focus:#8bd7e2;--color-checker:#d7dfeb12;--color-body-wash:#182946db;--color-body-glow:#5a5fbe57;--color-brand-border:#7498bc70;--color-inset-highlight:#ffffff14;--color-hover-soft:#59c7d31f;--color-mode-hover:#59c7d31a;--color-section-bg:#142034b3;--color-debug-bg:#252b5457;--color-danger-border:#ff9b8f3d;--color-drop-start:#20324ed1;--color-drop-end:#18243aa3;--color-drop-hover-start:#243b5feb;--color-drop-hover-end:#212d52b8;--color-drop-focus-ring:#59c7d329;--color-input-start:#253754f0;--color-input-end:#18263dd6;--color-help-border:#59c7d33d;--color-download-border:#59c7d35c;--color-primary-gradient-start:#64d4df;--color-primary-gradient-end:#a797ff;--shadow-soft:0 22px 58px #00000047;--shadow-panel:0 14px 34px #00000038;--shadow-control:0 1px 12px #0003;--shadow-popover:0 24px 54px #0000005c;--shadow-primary:0 16px 32px #4c98d633;--shadow-primary-hover:0 18px 38px #7e67ff3d}.app-shell{min-height:100svh;padding:var(--space-6) clamp(var(--space-4), 4vw, var(--space-7)) var(--space-4);flex-direction:column;align-items:center;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--space-5);width:min(100%,1240px);padding:0 0 var(--space-7);display:flex}.brand-lockup{align-items:center;gap:var(--space-4);min-width:0;display:flex}.brand-icon{border:1px solid var(--color-brand-border);border-radius:var(--radius-md);background:var(--color-surface-raised);width:60px;height:60px;box-shadow:var(--shadow-panel);flex:none}.eyebrow{max-width:720px;margin-bottom:var(--space-2);color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:12px;font-weight:600;line-height:1.4}.topbar h1{max-width:780px}.topbar-actions{align-items:center;gap:var(--space-3);flex:none;display:flex}.language-switch{min-height:42px;padding:var(--space-1);border:1px solid var(--color-border);background:color-mix(in srgb, var(--color-surface) 78%, transparent);box-shadow:inset 0 1px 0 var(--color-inset-highlight);border-radius:999px;display:inline-flex}.language-switch button{min-width:48px;padding:0 var(--space-3);color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;border-radius:999px;font-size:14px;transition:background-color .16s,color .16s}.language-switch button:hover{color:var(--color-text-strong);background:var(--color-hover-soft)}.language-switch button.active{color:var(--color-primary-strong);background:var(--color-primary-soft)}.download-action,.mini-action,.primary-action{justify-content:center;align-items:center;gap:var(--space-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);min-height:42px;padding:0 var(--space-4);color:var(--color-text-strong);background:var(--color-surface-raised);cursor:pointer;font-size:14px;text-decoration:none;transition:border-color .16s,background-color .16s,color .16s,transform .16s,box-shadow .16s;display:inline-flex}.download-action:hover,.mini-action:hover,.primary-action:hover:not(:disabled){transform:translateY(-1px)}.workspace{gap:var(--space-5);flex:1;grid-template-columns:minmax(310px,380px) minmax(0,1fr);align-items:start;width:min(100%,1240px);display:grid}.app-footer{width:min(100%,1240px);padding:var(--space-6) var(--space-4) 0;color:color-mix(in srgb, var(--color-text-muted) 72%, transparent);justify-content:center;gap:6px;font-size:12px;display:flex}.app-footer a{color:inherit;text-decoration:none}.app-footer a:hover{color:var(--color-primary-strong);text-underline-offset:3px;text-decoration:underline}.control-panel{gap:var(--space-5);padding:var(--space-5);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--color-surface) 88%, var(--color-bg-soft));box-shadow:var(--shadow-soft);flex-direction:column;display:flex}.mode-switch{gap:var(--space-1);padding:var(--space-1);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface-muted);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.mode-switch button{border-radius:var(--radius-sm);min-height:40px;padding:0 var(--space-3);color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;font-size:13px;line-height:1.25;transition:background-color .16s,color .16s,box-shadow .16s}.mode-switch button:hover{color:var(--color-text-strong);background:var(--color-mode-hover)}.mode-switch button.active{color:var(--color-primary-strong);background:var(--color-surface-raised);box-shadow:var(--shadow-control)}.mode-switch-field{gap:var(--space-3)}.drop-stack{gap:var(--space-3);display:grid}.drop-zone{place-items:center;gap:var(--space-3);min-height:172px;padding:var(--space-5);border:1px dashed var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text-strong);background:linear-gradient(180deg, var(--color-drop-start), var(--color-drop-end)), var(--color-surface);cursor:pointer;transition:border-color .16s,background-color .16s,box-shadow .16s;display:grid;position:relative;overflow:hidden}.drop-zone:hover,.drop-zone:focus-within{border-color:var(--color-primary);background:linear-gradient(180deg, var(--color-drop-hover-start), var(--color-drop-hover-end)), var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-drop-focus-ring)}.secondary-drop{min-height:116px}.drop-zone svg{width:30px;height:30px;color:var(--color-primary)}.drop-zone span{max-width:100%;color:var(--color-text);text-align:center;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.45;overflow:hidden}.drop-zone input{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.encoder-status{margin:calc(var(--space-2) * -1) 0 0;color:var(--color-danger);font-size:13px;line-height:1.55}.encoder-status.ready{color:var(--color-text-muted)}.panel-heading{align-items:center;gap:var(--space-2);color:var(--color-text-strong);display:flex}.panel-heading h2{font-size:22px}.panel-heading svg{width:18px;height:18px;color:var(--color-primary)}.control-section{gap:var(--space-4);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-section-bg);display:grid}.control-section h3,.control-section summary{color:var(--color-text-strong);font-family:var(--font-serif);font-size:16px;font-weight:500}.control-section summary{cursor:pointer;width:fit-content}.control-section summary::marker{color:var(--color-primary)}.control-section[open]{display:grid}.control-section[open] summary{margin-bottom:var(--space-1)}.parameter-field{gap:var(--space-2);display:grid}.parameter-field-head{justify-content:space-between;align-items:flex-start;gap:var(--space-3);min-width:0;display:flex}.parameter-field-label{min-width:0;color:var(--color-text-strong);overflow-wrap:anywhere;font-size:14px;line-height:1.45}.parameter-field-meta{flex:none;align-items:center;gap:6px;display:inline-flex}.parameter-field-meta strong{color:var(--color-primary-strong);font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;line-height:1.4}.parameter-help-button{width:26px;height:26px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;flex:none;justify-content:center;align-items:center;padding:0;transition:background-color .16s,border-color .16s,color .16s;display:inline-flex}.parameter-help-button:hover,.parameter-help-button:focus-visible{color:var(--color-primary-strong);background:var(--color-primary-soft);border-color:var(--color-help-border)}.parameter-help-button svg{width:14px;height:14px}.parameter-field input[type=range]{width:100%;accent-color:var(--color-primary);cursor:pointer}.parameter-field select{border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);width:100%;min-height:40px;padding:0 36px 0 var(--space-3);color:var(--color-text-strong);background:linear-gradient(180deg, var(--color-input-start), var(--color-input-end)), var(--color-surface);font-size:14px}.parameter-field select:hover{border-color:var(--color-primary)}.parameter-help-popover{z-index:30;width:min(336px,100vw - 24px);max-width:360px;padding:var(--space-4);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);color:var(--color-text);background:var(--color-surface-raised);box-shadow:var(--shadow-popover);pointer-events:none}.parameter-help-popover h4{margin:0 0 var(--space-2);color:var(--color-text-strong);font-family:var(--font-serif);font-size:16px;font-weight:500;line-height:1.3}.parameter-help-popover p{margin:0 0 var(--space-2);font-size:13px;line-height:1.55}.parameter-help-popover p:last-child{margin-bottom:0}.parameter-help-popover span{color:var(--color-primary-strong);font-weight:600}.parameter-help-popover .warning span{color:var(--color-danger)}.debug-toggle{align-items:center;gap:var(--space-2);color:var(--color-text-muted);font-size:13px;display:flex}.debug-toggle input{accent-color:var(--color-primary)}.debug-section{background:var(--color-debug-bg)}.debug-list{gap:var(--space-2);display:grid}.debug-list div{justify-content:space-between;gap:var(--space-3);display:flex}.debug-list dt{color:var(--color-text-muted);font-size:12px}.debug-list dd{color:var(--color-text-strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;text-align:right;margin:0;font-size:12px}.primary-action{min-height:48px;margin-top:var(--space-1);border-color:var(--color-primary);color:var(--color-primary-contrast);background:linear-gradient(180deg, var(--color-primary-gradient-start), var(--color-primary-gradient-end));box-shadow:var(--shadow-primary)}.primary-action:hover:not(:disabled){box-shadow:var(--shadow-primary-hover)}.primary-action:disabled{cursor:not-allowed;opacity:.58;box-shadow:none;transform:none}.download-action{border-color:var(--color-download-border);color:var(--color-primary-strong);background:var(--color-primary-soft)}.mini-action{min-height:36px;padding:0 var(--space-3);color:var(--color-primary-strong);font-size:13px}.primary-action svg,.download-action svg,.mini-action svg{width:18px;height:18px}.spin{animation:.8s linear infinite spin}.status-line,.error-line,.output-note{font-size:13px;line-height:1.55}.status-line{color:var(--color-text-muted)}.error-line{border:1px solid var(--color-danger-border);border-radius:var(--radius-sm);padding:var(--space-3);color:var(--color-danger);background:var(--color-danger-soft)}.preview-panel{gap:var(--space-5);flex-direction:column;min-width:0;display:flex}.preview-grid{gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.preview-tile{min-width:0;padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--color-surface) 84%, transparent);box-shadow:var(--shadow-panel)}.preview-tile header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);color:var(--color-text-muted);display:flex}.preview-tile header svg{width:16px;height:16px;color:var(--color-primary)}.preview-tile h2{color:var(--color-text-strong);font-family:var(--font-sans);font-size:14px;font-weight:600;line-height:1.35}.preview-tile img,.preview-tile canvas,.empty-preview{aspect-ratio:4/3;object-fit:contain;border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(45deg, var(--color-checker) 25%, transparent 25%), linear-gradient(-45deg, var(--color-checker) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-checker) 75%), linear-gradient(-45deg, transparent 75%, var(--color-checker) 75%);background-color:var(--color-surface-raised);background-position:0 0,0 8px,8px -8px,-8px 0;background-size:16px 16px;width:100%}.empty-preview{place-items:center;display:grid}.metrics{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--color-surface) 82%, transparent);box-shadow:var(--shadow-panel);grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:0;display:grid;overflow:hidden}.metrics div{gap:var(--space-1);padding:var(--space-4);border-right:1px solid var(--color-border);display:grid}.metrics div:last-child{border-right:0}.metrics span{color:var(--color-text-muted);font-size:12px;line-height:1.35}.metrics strong{color:var(--color-text-strong);font-variant-numeric:tabular-nums;font-size:15px;font-weight:600}.output-note{max-width:760px;color:var(--color-text-muted)}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=1080px){.app-shell{padding-inline:var(--space-4)}.topbar{padding-bottom:var(--space-6);flex-direction:column;align-items:flex-start}.topbar-actions{flex-wrap:wrap;align-items:stretch;width:100%}.workspace{grid-template-columns:1fr}.control-panel{order:1}.preview-panel{order:2}}@media (width<=720px){.app-shell{padding:var(--space-5) var(--space-3) var(--space-4)}.brand-lockup{align-items:flex-start}.brand-icon{border-radius:10px;width:48px;height:48px}.language-switch{width:100%}.language-switch button{flex:1}.control-panel{padding:var(--space-4);border-radius:var(--radius-md)}.mode-switch,.preview-grid,.metrics{grid-template-columns:1fr}.metrics div{border-right:0;border-bottom:1px solid var(--color-border)}.metrics div:last-child{border-bottom:0}}