:root{color-scheme:light dark;--bg: #10141a;--panel: #181d26;--panel-2: #1f2632;--text: #e6edf3;--muted: #93a1b1;--accent: #14b8a6;--accent-2: #38bdf8;--on-accent: #04231f;--border: #252c38;--radius: 14px;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(1200px 600px at 20% -10%,#15242a,var(--bg));color:var(--text);min-height:100vh}.wrap{max-width:none;margin:0 auto;padding:32px clamp(24px,3vw,56px) 64px}header.hero{display:flex;flex-direction:column;gap:6px;margin-bottom:24px}header.hero h1{margin:0;font-size:28px;letter-spacing:-.02em}header.hero h1 span{color:var(--accent)}header.hero p{margin:0;color:var(--muted);font-size:15px}.grid{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}@media(max-width:900px){.grid{grid-template-columns:1fr}}.sticky{position:sticky;top:20px;align-self:start}@media(max-width:900px){.sticky{position:static}}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.card+.card{margin-top:16px}.card h2{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.dropzone{border:2px dashed var(--border);border-radius:var(--radius);padding:26px 16px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}.dropzone:hover,.dropzone.dragging{border-color:var(--accent);background:#14b8a61a}.dropzone strong{display:block;margin-bottom:4px}.dropzone small{color:var(--muted)}.seg{display:flex;gap:6px;background:var(--panel-2);padding:4px;border-radius:10px}.seg button{flex:1;padding:8px 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;cursor:pointer;text-transform:capitalize;white-space:nowrap}.seg button.active{background:var(--accent);color:var(--on-accent);font-weight:600}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:13px}.field .label{display:flex;justify-content:space-between;color:var(--muted)}.field .label b{color:var(--text);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent)}.row{display:flex;gap:10px;flex-wrap:wrap}.chips{display:flex;gap:8px;flex-wrap:wrap}.chips button{padding:7px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--muted);font:inherit;font-size:13px;cursor:pointer;text-transform:capitalize;white-space:nowrap}.chips button:hover{border-color:var(--accent-2);color:var(--text)}.chips button.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}.swatches{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted)}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:44px;height:32px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);cursor:pointer}input[type=color]::-webkit-color-swatch-wrapper{padding:3px}input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.hint{margin:0 0 12px;font-size:12px;line-height:1.5;color:var(--muted)}.hint code{color:var(--text)}button.btn{padding:10px 16px;border-radius:10px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font:inherit;cursor:pointer}button.btn:hover:not(:disabled){border-color:var(--accent-2)}button.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}select.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:10px 36px 10px 14px;border-radius:10px;border:1px solid var(--border);background-color:var(--panel-2);color:var(--text);font:inherit;cursor:pointer;line-height:1.2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center}select.btn:hover{border-color:var(--accent-2)}select.btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:2px}select.btn option{background:var(--panel);color:var(--text)}button.btn:disabled{opacity:.45;cursor:not-allowed}.previews{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:640px){.previews{grid-template-columns:1fr}}.preview{display:flex;flex-direction:column;gap:8px}.preview .cap{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.frame{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--panel-2);height:clamp(200px,44vh,460px);display:flex;align-items:center;justify-content:center}.frame img{width:100%;height:100%;object-fit:contain;display:block}.frame .empty{color:var(--muted);font-size:13px;padding:20px;text-align:center}.progress{height:6px;border-radius:6px;background:var(--panel-2);overflow:hidden;margin-top:12px}.progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .12s linear}.alert{margin-top:12px;padding:10px 12px;border-radius:10px;background:#e5484d1f;border:1px solid rgba(229,72,77,.4);color:#ff9ea1;font-size:13px}.ok{color:#6ee7a8}pre.payload{margin:0;padding:14px;border-radius:12px;background:#0b0d12;border:1px solid var(--border);color:#b9c2d0;font-size:12px;line-height:1.5;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-all}.meta{display:flex;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:10px}.meta b{color:var(--text)}