:root { color-scheme: dark; }
html, body { height: 100%; margin: 0; font-family: ui-sans-serif, system-ui; background: #0b0b10; color: #e8e8ef; }
a { color: inherit; }
.container { max-width: 1100px; margin: 0 auto; padding: 24px; }
.card { background: #141420; border: 1px solid #2a2a3a; border-radius: 14px; padding: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn { background: #222235; border: 1px solid #343454; color: #fff; border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.input { background: #0f0f18; border: 1px solid #2a2a3a; color: #fff; border-radius: 10px; padding: 10px 12px; }
.canvas-wrap { background: #0a0a12; border: 1px solid #2a2a3a; border-radius: 14px; overflow: hidden; }
canvas { display: block; }
.small { opacity: 0.85; font-size: 0.9rem; }