:root { --bg: #F5F5F4; --panel: #FFFFFF; --ink: #111111; --ink-2: #515151; --line: #E2E2E0; --accent: #F37F19; --warn: #A24E1B; }
@media (prefers-color-scheme: dark) { :root { --bg: #121212; --panel: #1B1B1B; --ink: #EDEDED; --ink-2: #ABABAB; --line: #2E2E2E; --accent: #F37F19; --warn: #E8976A; color-scheme: dark; } }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Montserrat", "Segoe UI", system-ui, sans-serif; display: grid; place-items: center; padding: 16px; }
.card { width: 100%; max-width: 24rem; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem 1.5rem; display: grid; gap: 0.8rem; }
.mark { display: grid; grid-template-columns: repeat(2, 14px); gap: 2px; }
.mark i { width: 14px; height: 14px; background: var(--ink); border-radius: 2px; }
.mark i:nth-child(2), .mark i:nth-child(3) { background: var(--accent); }
h1 { margin: 0; font-family: "Rubik", "Segoe UI", sans-serif; font-weight: 600; font-size: 1.55rem; line-height: 1.15; }
.who { margin: 0; color: var(--ink-2); }
form { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
label { font-weight: 600; font-size: 0.9rem; }
input { font: inherit; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button { font: 700 1rem "Montserrat", system-ui, sans-serif; padding: 0.7rem; border: 0; border-radius: 8px; background: var(--accent); color: #111111; cursor: pointer; }
.err { display: none; margin: 0; color: var(--warn); font-size: 0.9rem; }
.foot { margin: 0.4rem 0 0; font-size: 0.82rem; color: var(--ink-2); }
body.e1 .e1, body.e2 .e2 { display: block; }