:root{--bg:#08080a;--surface:#ffffff0a;--surface-strong:#ffffff14;--border:#ffffff1a;--text:#ffffffe6;--muted:#ffffff73;--accent:#e85d2a;--radius:12px;--speed:.18s}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;margin:0;font:15px/1.55 SF Pro Text,Inter,Segoe UI,system-ui,-apple-system,sans-serif}body{justify-content:center;min-height:100vh;padding:40px 20px 32px;display:flex}.app{flex-direction:column;gap:22px;width:100%;max-width:880px;display:flex}.head{justify-content:space-between;align-items:baseline;gap:16px;display:flex}h1{letter-spacing:-.02em;margin:0;font-size:22px;font-weight:600}h1 span{color:var(--accent)}.lede{color:var(--muted);max-width:60ch;margin:0}.drop{border:1px dashed var(--border);border-radius:var(--radius);text-align:center;cursor:pointer;transition:border-color var(--speed) ease, background var(--speed) ease;padding:48px 24px}.drop:hover,.drop:focus-visible,.drop.is-over{background:var(--surface);border-color:#e85d2a99;outline:none}.drop-inner{flex-direction:column;align-items:center;gap:6px;display:flex}.drop-icon{width:28px;height:28px;color:var(--muted);margin-bottom:6px}.workbench{grid-template-columns:minmax(0,1.35fr) minmax(260px,1fr);align-items:start;gap:22px;display:grid}@media (max-width:720px){.workbench{grid-template-columns:minmax(0,1fr)}}.stage{flex-direction:column;gap:8px;display:flex}#preview{border-radius:var(--radius);border:1px solid var(--border);background:#000;width:100%;height:auto;display:block}.stage-meta{justify-content:space-between;align-items:center;gap:12px;display:flex}.controls{flex-direction:column;gap:18px;display:flex}.field{flex-direction:column;gap:8px;display:flex}.field.row{flex-direction:row;align-items:center;gap:10px}.label,.settings summary{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:12px}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{font:inherit;color:var(--muted);background:var(--surface);cursor:pointer;transition:color var(--speed) ease, border-color var(--speed) ease, background var(--speed) ease;border:1px solid #0000;border-radius:999px;padding:6px 12px;font-size:13px}.chip:hover{color:var(--text);background:var(--surface-strong)}.chip.is-active{color:var(--text);background:#e85d2a1f;border-color:#e85d2aa6}.primary,.ghost{font:inherit;cursor:pointer;border:1px solid var(--border);transition:background var(--speed) ease, border-color var(--speed) ease, transform var(--speed) ease;text-align:center;border-radius:999px;padding:10px 18px;font-size:14px;text-decoration:none}.primary{color:#fff;background:linear-gradient(135deg, var(--accent), #c2451b);border-color:#0000;flex:1;font-weight:500}.primary:hover{transform:translateY(-1px)}.primary[disabled]{opacity:.45;cursor:not-allowed;transform:none}.ghost{color:var(--muted);background:0 0}.ghost:hover{color:var(--text);background:var(--surface)}.progress{flex-direction:column;gap:8px;display:flex}.progress-track{background:var(--surface-strong);border-radius:2px;height:3px;overflow:hidden}.progress-fill{background:var(--accent);transform-origin:0;width:100%;height:100%;transition:transform .15s;transform:scaleX(0)}.result{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:14px;padding:16px;display:flex}.diagnostics{grid-template-columns:auto 1fr;gap:4px 16px;margin:0;font-size:13px;display:grid}.diagnostics dt{color:var(--muted)}.diagnostics dd{overflow-wrap:anywhere;margin:0}.settings{border-top:1px solid var(--border);padding-top:14px}.settings summary{cursor:pointer;list-style:none}.settings summary::-webkit-details-marker{display:none}.settings summary:after{content:" ▾"}.settings[open] summary:after{content:" ▴"}.settings-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 10px;display:grid}.settings-grid label{color:var(--muted);flex-direction:column;gap:5px;font-size:12px;display:flex}.settings-grid input,.settings-grid select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:7px 9px;font-size:13px}.settings-grid input:focus-visible,.settings-grid select:focus-visible,.chip:focus-visible,.primary:focus-visible,.ghost:focus-visible,.drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.note{margin:0;font-size:12px}.muted{color:var(--muted)}.foot{color:var(--muted);border-top:1px solid var(--border);justify-content:center;gap:8px;padding-top:18px;font-size:12px;display:flex}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
