* { box-sizing: border-box; } :root { color-scheme: light dark; --bg:#0f172a; --card:#1e293b; --text:#f1f5f9; --muted:#cbd5e1; --link:#7dd3fc; --border:#475569; } body { margin:0; padding:24px 16px; background:var(--bg); color:var(--text); font:16px/1.65 system-ui,sans-serif; } main { max-width:860px; margin:auto; background:var(--card); padding:28px; border:1px solid var(--border); border-radius:16px; overflow-wrap:anywhere; } h1 { font-size:1.7rem; line-height:1.25; } h2 { font-size:1.15rem; margin-top:28px; } a { color:var(--link); } p,li { color:var(--muted); } nav { border-top:1px solid var(--border); padding-top:20px; display:flex; gap:18px; flex-wrap:wrap; } .notice { border:1px solid var(--link); padding:14px; border-radius:10px; } @media(prefers-color-scheme:light) { :root {--bg:#f1f5f9;--card:#fff;--text:#0f172a;--muted:#334155;--link:#0369a1;--border:#cbd5e1;} } @media(max-width:420px) { main {padding:20px;} h1{font-size:1.45rem;} }