:root{--bg:#0b0f1a;--panel:#111827;--accent:#3b82f6;--accent-2:#22c55e;--text:#e5e7eb;--muted:#9ca3af;--card:#0f0f12;--radius:14px}body{background:var(--bg);color:var(--text);margin:0;font-family:Inter,system-ui}.app{z-index:1;gap:20px;width:100%;max-width:100%;display:flex;position:relative}.sidebar{background:var(--panel);border-right:1px solid #1f2937;flex-direction:column;flex-shrink:0;gap:20px;width:280px;padding:20px;display:flex}.group{flex-direction:column;gap:10px;display:flex}label{color:var(--muted);font-size:13px}.value{color:var(--muted);font-size:12px}input[type=range]{width:100%}button{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:10px}button.secondary{background:#374151}button.success{background:var(--accent-2)}.canvas-wrap{background:var(--card);border-radius:var(--radius);flex:1;justify-content:center;align-items:center;min-height:400px;padding:16px;display:flex}canvas{object-fit:contain;touch-action:none;border:1px solid #ffffff14;border-radius:12px;max-width:720px}#canvas{cursor:none}.status{color:var(--muted);font-size:12px}.wrap{z-index:1;position:relative}.wrap header{z-index:10;position:relative}@media (width<=900px){.app{flex-direction:column}.sidebar{order:2;width:100%}.canvas-wrap{order:1;min-height:300px}}