*{box-sizing:border-box}body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:#14213d;background:#f5f7fb}
header,main,footer{max-width:720px;margin:0 auto;padding:16px}header{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:700;font-size:22px;color:#1d4ed8;text-decoration:none}a{color:#1d4ed8}
h1{font-size:26px;line-height:1.25}h2{font-size:20px;margin-top:28px}.lead{font-size:18px}
code{background:#e8edf7;padding:1px 4px;border-radius:4px;word-break:break-all}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pack{background:#fff;border:1px solid #d6deec;border-radius:10px;padding:12px}.pack p{margin:4px 0}.pack .n{font-weight:700;font-size:18px}
.button,button{display:inline-block;background:#1d4ed8;color:#fff;border:0;border-radius:8px;padding:10px 16px;font-size:16px;text-decoration:none;cursor:pointer}
form label{display:block;margin:10px 0}form input,form select{display:block;width:100%;padding:8px;font-size:16px;border:1px solid #b8c4da;border-radius:6px;margin-top:4px}
form label.check input{display:inline;width:auto}.problem{background:#fdecec;border:1px solid #f3b4b4;padding:8px 12px;border-radius:6px}
.code{font:700 26px/1.3 ui-monospace,Menlo,monospace;letter-spacing:2px;background:#fff;border:2px dashed #1d4ed8;padding:12px;text-align:center;border-radius:10px}
.small,footer{font-size:14px;color:#4a5878}
@media (prefers-color-scheme:dark){body{background:#0f172a;color:#e5e9f2}.pack,.code{background:#16213a;border-color:#2c3b5c}code{background:#1e2b47}a,.brand{color:#7aa2ff}.small,footer{color:#9aa8c4}form input,form select{background:#16213a;color:#e5e9f2;border-color:#2c3b5c}}