:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #090b0d; color: #e5ece7; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(circle at 50% -10%, #1c2b36, #090b0d 45rem); }
main { width: min(1180px, calc(100% - 32px)); margin: 44px auto 56px; }
header { margin-bottom: 28px; }
.eyebrow { color: #62d784; letter-spacing: .13em; font: 700 .72rem ui-monospace, monospace; }
h1 { font-size: clamp(2.1rem, 6vw, 4rem); margin: 0; letter-spacing: -.05em; }
header p:not(.eyebrow) { color: #adb8b0; max-width: 58ch; }
.controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px; border: 1px solid #2b3933; border-radius: 12px; background: #111715cc; }
label { display: grid; gap: 6px; color: #aab7ae; font-size: .8rem; }
input, select, button { min-height: 40px; border-radius: 7px; border: 1px solid #405047; background: #0c100e; color: #ecf5ed; padding: 8px 10px; font: inherit; }
input:focus, select:focus, button:focus { outline: 2px solid #45d875; outline-offset: 2px; }
.actions { display: flex; flex-wrap: wrap; align-content: end; gap: 8px; grid-column: span 3; }
button { cursor: pointer; } button:hover { border-color: #63d888; } button.primary { background: #1a9b4e; color: #06140b; font-weight: 800; border-color: #3adc75; } button:disabled { cursor: not-allowed; opacity: .5; }
#status { color: #86c798; font: .85rem ui-monospace, monospace; min-height: 1.25em; }
.output { border: 1px solid #2c4035; border-radius: 12px; overflow: hidden; background: #000; box-shadow: 0 22px 60px #0008; }
canvas { display: block; width: 100%; height: auto; }
.note { color: #86948b; font-size: .8rem; }
@media (max-width: 720px) { main { margin-top: 24px; } .controls { grid-template-columns: 1fr 1fr; } .actions { grid-column: span 2; } }
@media (max-width: 480px) { .controls { grid-template-columns: 1fr; } .actions { grid-column: auto; } }