:root { color-scheme: light dark; --edge: #8884; --accent: #7a3e65; }
body { font: 17px/1.6 system-ui, sans-serif; margin: 0; }
main { max-width: 38rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
.lede, .hint { opacity: 0.7; }
form { display: grid; gap: 0.9rem; }
label { display: grid; gap: 0.25rem; font-weight: 600; }
input, select, textarea { font: inherit; padding: 0.5rem; border: 1px solid var(--edge); border-radius: 6px; }
fieldset { border: 1px solid var(--edge); border-radius: 6px; padding: 0.6rem 0.8rem; }
.slots { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 2.4rem; }
.slots button { padding: 0.35rem 0.7rem; background: transparent; color: inherit; border: 1px solid var(--edge); }
.slots button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
button { font: inherit; padding: 0.6rem 1.1rem; border: 0; border-radius: 6px; background: var(--accent); color: #fff; cursor: pointer; justify-self: start; }
.total { font-size: 1.15rem; margin: 0; }
code { word-break: break-all; }
#state, #cancel-state { min-height: 1.5rem; margin: 0; }