:root { color-scheme: light; --bg:#f3efe4; --ink:#1b1914; --muted:#5e584c; --line:#d9d0c0; --panel:#fffdf8; --accent:#0c5c4a; --on:#f4fff9; --warn:#7a2e24; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.5 Palatino, Georgia, serif; }
header, main, footer { max-width:1100px; margin:0 auto; padding:24px; }
header { display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line); }
.brand { font-family:ui-sans-serif, system-ui, sans-serif; font-weight:700; font-size:22px; color:var(--ink); text-decoration:none; }
.tag { margin:0; color:var(--muted); font-size:14px; flex:1; }
h1 { font-family:ui-sans-serif, system-ui, sans-serif; font-size:clamp(28px,4vw,40px); line-height:1.15; letter-spacing:-.03em; margin:8px 0 16px; }
h2 { font-family:ui-sans-serif, system-ui, sans-serif; font-size:20px; margin:0 0 12px; }
p, li { color:var(--ink); }
.card p, .muted, small { color:var(--muted); }
small { display:block; margin-top:6px; }
ul { margin:0; padding-left:1.1em; }
li + li { margin-top:8px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:16px 0; }
.card.warn { border-color:#e2c2ba; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.narrow { max-width:460px; }
label { display:block; font-family:ui-sans-serif, system-ui, sans-serif; font-size:14px; color:var(--muted); }
input, select { width:100%; margin:6px 0 12px; padding:10px 12px; min-height:44px; border:1px solid #b7ad9c; border-radius:8px; background:#fff; color:var(--ink); font:16px ui-sans-serif, system-ui, sans-serif; }
.banner { color:var(--warn); border:1px solid #e2c2ba; background:#fff6f3; padding:10px 12px; border-radius:8px; }
button, .card a { font:600 14px ui-sans-serif, system-ui, sans-serif; min-height:44px; border-radius:8px; border:1px solid #8d8374; background:transparent; color:var(--ink); padding:10px 14px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; }
button.primary { background:var(--accent); color:var(--on); border-color:var(--accent); }
button:disabled { opacity:.45; cursor:not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.metrics strong { display:block; font-family:ui-sans-serif, system-ui, sans-serif; font-size:32px; }
.heading, .row { display:flex; gap:12px; align-items:end; justify-content:space-between; flex-wrap:wrap; }
.row label { flex:1; min-width:140px; }
.mono { font-family:ui-monospace, monospace; overflow-wrap:anywhere; }
.entry { border-top:1px solid var(--line); padding:10px 0; }
.entry strong { font-family:ui-sans-serif, system-ui, sans-serif; }
footer { border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
[hidden] { display:none !important; }
#challenge { min-height:68px; }
@media (max-width:800px) {
  header, main, footer { padding:16px; }
  header { flex-wrap:wrap; }
  .split, .metrics { grid-template-columns:1fr; }
}