/* app.css CSS in 30 seconds: each rule is "selector { property: value; }". .card = every element with class="card" #results = the one element with id="results" a b = a "b" anywhere inside an "a" When two rules conflict, the more specific or later one wins. */ /* Design tokens. Custom properties (--name) act like constants you can override, and :root is the element, so these apply everywhere. Every color below is var(--something), so dark mode only has to redefine the tokens, not every rule. */ :root { --bg: #f6f5f1; /* warm paper */ --surface: #ffffff; --text: #1d1d1b; --muted: #6b6a64; --border: #e2e0d8; --accent: #2f5d8a; /* ink blue */ --accent-text: #ffffff; --mark: #fde9a8; /* highlighter yellow */ --mark-active: #f6c945; --danger-bg: #fdecea; --danger-text: #8a1c12; --radius: 10px; --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: light dark; /* native controls (scrollbars, file inputs) follow the theme */ } /* Follow the OS dark-mode setting */ @media (prefers-color-scheme: dark) { :root { --bg: #161614; --surface: #211f1c; --text: #ecebe6; --muted: #a19f97; --border: #36342f; --accent: #7fb0e0; --accent-text: #0f1a26; --mark: #5a4a14; --mark-active: #8a6d10; --danger-bg: #3b1d19; --danger-text: #ffb4a8; --shadow: none; } } /* border-box: width includes padding and border. Makes sizing much less surprising. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; } /* Centered column. min() picks whichever is smaller: 960px, or the screen width minus a 16px gutter each side. */ .page { width: min(960px, 100% - 32px); margin: 0 auto; padding: 32px 0 64px; } .masthead h1 { margin: 0 0 4px; font-size: 1.75rem; letter-spacing: -.01em; } .lede { margin: 0 0 24px; color: var(--muted); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: 16px; } h2 { margin: 0; font-size: 1.35rem; } h3 { margin: 20px 0 10px; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .card > h3:first-child { margin-top: 0; } .hint { text-transform: none; letter-spacing: 0; font-weight: normal; font-size: .85rem; } /* ---------- Form ---------- */ .field { display: grid; gap: 6px; margin-bottom: 16px; max-width: 320px; } .field label { font-weight: 600; font-size: .9rem; } input[type="password"] { font: inherit; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } /* The drop zone. It's a