:root{--bg:#060810;--panel:#0d1019;--line:#1f2433;--ink:#e6e8ee;--mute:#8a90a2;--acc:#ef4444;--mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;--sans:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.mark{width:12px;height:12px;background:var(--acc);display:inline-block;transform:translateY(1px)}
.name{font-family:var(--mono);font-weight:700;letter-spacing:.14em}
.sub{color:var(--mute);font-size:13px}
.tools{display:flex;gap:10px;align-items:center}
.chip,.seg button,.btn{font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:8px 12px;cursor:pointer;border-radius:3px}
.chip:hover,.seg button:hover,.btn:hover{border-color:var(--acc)}
.seg{display:flex}.seg button{border-radius:0}.seg button:first-child{border-radius:3px 0 0 3px}.seg button:last-child{border-radius:0 3px 3px 0;border-left:0}
.seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.grid{display:grid;grid-template-columns:340px 1fr;gap:16px;padding:16px;max-width:1400px;margin:0 auto}
.panel{background:var(--panel);border:1px solid var(--line);padding:14px;border-radius:4px;max-height:calc(100vh - 110px);overflow:auto}
.fld{margin:0 0 12px}
.fld label{display:block;font-family:var(--mono);font-size:11px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.fld select,.fld input[type=text],.fld input[type=number]{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:7px 8px;font-family:var(--mono);font-size:13px;border-radius:3px}
.fld input[type=range]{width:100%;accent-color:var(--acc);outline:none}
.fld .val{float:right;color:var(--ink)}
.row{display:flex;gap:8px}.row>*{flex:1}
.chk{display:flex;align-items:center;gap:8px;font-size:13px;margin:0 0 10px}
.chk input{accent-color:var(--acc)}
.exp{display:none}.expert .exp{display:block}
.sw{display:flex;height:16px;margin-top:6px;border:1px solid var(--line)}.sw i{flex:1}
.stage{min-width:0}
.preview{background:#0b0d14;border:1px solid var(--line);border-radius:4px;padding:10px;display:flex;justify-content:center;align-items:center;min-height:420px}
.preview svg{max-width:100%;max-height:70vh;height:auto;width:auto}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0}
.stat{background:var(--panel);border:1px solid var(--line);padding:8px 10px;border-radius:3px}
.stat b{display:block;font-family:var(--mono);font-size:16px}.stat span{font-size:11px;color:var(--mute);font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em}
.exports{display:flex;gap:8px;flex-wrap:wrap}
.btn.pri{background:var(--acc);border-color:var(--acc);color:#fff}
.hint{color:var(--mute);font-size:13px}
.foot{border-top:1px solid var(--line);padding:16px;color:var(--mute);font-size:12px;max-width:1400px;margin:0 auto}
.foot p{margin:4px 0}
@media (max-width:900px){.grid{grid-template-columns:1fr}.panel{max-height:none}}
.warn p{margin:8px 0;padding:8px 10px;border-left:3px solid var(--acc);background:var(--panel);color:var(--ink);font-size:13px}