/* Ember's pages: readable on a phone, and from the sofa on the TV. */
:root { color-scheme: light dark; --accent: #c2410c; }
body { margin: 0; font: 18px/1.5 system-ui, sans-serif; background: Canvas; color: CanvasText; }
main { max-width: 36rem; margin: 0 auto; padding: 1.5rem 1rem; }
h1 { color: var(--accent); margin-top: 0; }
ul { padding-left: 1.2rem; }
li { margin: 0.6rem 0; }
small { display: block; opacity: 0.7; }
label { display: block; margin: 0.8rem 0; }
input { font: inherit; padding: 0.4rem; width: 100%; box-sizing: border-box; }
button { font: inherit; padding: 0.5rem 1rem; margin: 0.3rem 0; border-radius: 0.4rem;
         border: 1px solid var(--accent); background: var(--accent); color: white; cursor: pointer; }
li button { padding: 0.2rem 0.6rem; font-size: 0.9rem; background: none; color: var(--accent); }
button:disabled { opacity: 0.5; }
.code { font: 700 4rem/1.2 ui-monospace, monospace; letter-spacing: 0.2em; text-align: center; }
#status { min-height: 1.5em; color: var(--accent); }