:root{--bg: #0e0e11;--panel: #18181c;--stage: #101013;--cell: #141418;--line: rgba(255, 255, 255, .08);--text: #f3f3f5;--muted: #8d8d96;--accent: #ff6a2a;--sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100dvh;color:var(--text);font-family:var(--sans);background:radial-gradient(900px 420px at 50% -80px,rgba(255,106,42,.14),transparent 60%),var(--bg)}.page{width:min(880px,calc(100% - 32px));margin:0 auto;padding:36px 0 72px}header{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:20px}h1{margin:0;font-size:1.25rem;font-weight:650;letter-spacing:-.03em}header a{color:var(--muted);font-size:.875rem;text-decoration:none}header a:hover{color:var(--text)}.panel{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);background:var(--panel);border:1px solid var(--line);border-radius:28px;overflow:hidden}.stage{background:var(--stage);display:grid;place-items:center;min-height:280px}.stage svg{width:64%;height:64%;display:block}.form{display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;min-width:0}.drop{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 14px;border-radius:14px;background:#121216;border:1px solid var(--line);cursor:pointer}.drop span{color:var(--muted);font-size:.8rem}.drop strong{font-weight:550;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}.drop:hover,.drop.drag{border-color:#ff6a2ab3}.field{display:flex;flex-direction:column;gap:8px;color:var(--muted);font-size:.8rem}.field-head{display:flex;justify-content:space-between;align-items:baseline}.field-head output{color:var(--text);font-variant-numeric:tabular-nums}input[type=text]{width:100%;background:#121216;color:var(--text);border:1px solid var(--line);border-radius:12px;padding:11px 12px;font:inherit;font-size:.95rem}input[type=range]{width:100%;margin:0;accent-color:var(--accent)}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{appearance:none;border:0;border-radius:12px;min-height:44px;padding:0 16px;font:620 .95rem/1 var(--sans);cursor:pointer;background:#2a2a30;color:var(--text)}.btn.primary{background:var(--accent);color:#1a0903}.btn:disabled{opacity:.45;cursor:wait}.status{min-height:1.1em;margin:0;color:#7dceb0;font-size:.8rem}.shapes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;margin-top:14px}.shape{appearance:none;margin:0;padding:0;border:0;aspect-ratio:1;min-width:0;display:grid;place-items:center;border-radius:22%;background:var(--cell);cursor:pointer;box-shadow:inset 0 0 0 1px transparent}.shape svg{width:74%;height:74%;display:block}.shape.active{box-shadow:inset 0 0 0 2px var(--accent)}@media(max-width:720px){.panel{grid-template-columns:1fr}.stage{aspect-ratio:1;min-height:0}.shapes{grid-template-columns:repeat(4,minmax(0,1fr))}}