:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #11161e; color: #edf5f3; }
body { margin: 0; min-width: 320px; }
main { min-height: 100vh; display: grid; place-items: center; padding: 2rem; box-sizing: border-box; }
.slice-shell { width: min(100%, 720px); }
.eyebrow { color: #5bd4c3; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: .25rem 0 .5rem; font-size: clamp(1.8rem, 6vw, 3rem); }
.summary { color: #b9c7c4; max-width: 58ch; line-height: 1.5; }
.controls { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
button { appearance: none; border: 1px solid #50605e; border-radius: 999px; padding: .45rem .75rem; background: #1e292f; color: inherit; cursor: pointer; }
button.selected, button:hover { background: #2c746a; border-color: #5bd4c3; }
canvas { display: block; width: min(100%, 640px); aspect-ratio: 1; height: auto; background: #05080c; border: 1px solid #50605e; }
#renderer-status { color: #b9c7c4; min-height: 1.5em; }