:root{--bg: #0b0b0d;--panel: #121215;--line: #24242a;--text: #ececf1;--muted: #8b8b96;--accent: #ff8a3d;--accent-ink: #1a0d04;--radius: 10px;color-scheme:dark;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit;color:inherit}#app{display:grid;grid-template-columns:1fr 340px;height:100vh;height:100dvh}#stage{position:relative;min-width:0;min-height:0}#viewport{position:absolute;top:0;right:0;bottom:0;left:0}#viewport canvas{display:block;width:100%!important;height:100%!important;touch-action:none}#hud{position:absolute;left:16px;right:16px;top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none}.brand{font-weight:650;letter-spacing:.01em;display:flex;align-items:center;gap:8px;text-shadow:0 1px 8px rgba(0,0,0,.6)}.brand em{font-style:normal;color:var(--muted);font-weight:500}.logo{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;font-weight:800;background:linear-gradient(145deg,#ffd27a,#f2711c 55%,#7c1d06);color:#2a0e02}.cams{display:flex;gap:4px;pointer-events:auto;background:#0c0c0f9e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}.cams button{border:0;background:transparent;padding:5px 11px;border-radius:999px;cursor:pointer;color:var(--muted)}.cams button:hover{color:var(--text);background:#ffffff12}#busy{position:absolute;left:50%;bottom:18px;transform:translate(-50%);font-size:12px;color:var(--muted);background:#0c0c0fb3;padding:5px 12px;border-radius:999px}#panel{background:var(--panel);border-left:1px solid var(--line);overflow-y:auto;padding:6px 18px 28px}section{padding:14px 0 16px;border-bottom:1px solid var(--line)}section:last-child{border-bottom:0}h2{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 12px;font-weight:600}textarea{width:100%;resize:vertical;background:#0c0c0f;border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;font-size:18px;font-weight:600;line-height:1.25;min-height:64px}textarea:focus,select:focus{outline:2px solid color-mix(in srgb,var(--accent) 60%,transparent);outline-offset:1px}.fonts{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 8px;max-height:196px;overflow-y:auto;padding-right:2px}.font{text-align:left;background:#0c0c0f;border:1px solid var(--line);border-radius:8px;padding:7px 9px;cursor:pointer;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font:hover{border-color:#3a3a44}.font.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.upload{display:block;font-size:12px;color:var(--muted);cursor:pointer;margin-bottom:8px}.upload:hover{color:var(--text)}.upload input{display:none}.slider{display:grid;grid-template-columns:1fr auto;align-items:center;row-gap:2px;margin:10px 0;font-size:13px}.slider span{color:#c9c9d2}.slider output{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.slider input{grid-column:1 / -1;width:100%;accent-color:var(--accent);margin:4px 0 0}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.preset{background:none;border:0;padding:0;cursor:pointer;display:grid;gap:5px;justify-items:center;font-size:10.5px;color:var(--muted)}.preset i{width:100%;aspect-ratio:1;border-radius:10px;border:1px solid var(--line);display:block}.preset span{line-height:1.15;text-align:center}.preset:hover i{border-color:#4a4a55}.preset.on i{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.preset.on span{color:var(--text)}.colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:4px}.color{display:grid;justify-items:center;gap:4px;font-size:11px;color:var(--muted);cursor:pointer}.color input{width:100%;height:30px;border:1px solid var(--line);border-radius:8px;padding:0;background:none;cursor:pointer}.color input::-webkit-color-swatch-wrapper{padding:2px}.color input::-webkit-color-swatch{border:0;border-radius:6px}.export .row{display:flex;gap:8px;align-items:center;margin-bottom:10px}select{flex:1;background:#0c0c0f;border:1px solid var(--line);border-radius:8px;padding:8px}.check{display:flex;align-items:center;gap:6px;font-size:13px;color:#c9c9d2;white-space:nowrap}.check input{accent-color:var(--accent)}.export button{flex:1;border-radius:8px;padding:10px;cursor:pointer;border:1px solid var(--line);background:#1a1a1f;font-weight:600}.export button:hover{background:#222229}.export button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent}.export button.primary:hover{filter:brightness(1.08)}.export button:disabled{opacity:.6;cursor:progress}.hint{font-size:12px;color:var(--muted);margin:4px 0 0}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:#1f1f25;border:1px solid #33333b;padding:9px 14px;border-radius:10px;font-size:13px;z-index:10;box-shadow:0 8px 30px #00000080}@media (max-width: 820px){#app{grid-template-columns:1fr;grid-template-rows:52vh 1fr;grid-template-rows:52dvh 1fr}#panel{border-left:0;border-top:1px solid var(--line);padding:4px 16px 24px}#hud{flex-direction:column;align-items:flex-start}.cams button{padding:4px 9px;font-size:12px}}