:root{--ink:#1f2a44;--blue:#2f5fd0;--grid:#cfe0f5;--paper:#fdfdf8;--yel:#fff3b0;--red:#c0392b}
*{box-sizing:border-box}
body{margin:0;font:17px/1.65 "Inter","Segoe UI",Arial,sans-serif;color:var(--ink);background-color:var(--paper);
background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--blue);color:#fff;border-bottom:4px solid var(--yel)}
.top a{color:#fff;text-decoration:none}.logo{font-weight:800;font-size:20px}
.top nav{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}.top nav a.on,.top nav a:hover{text-decoration:underline}
main{max-width:1040px;margin:0 auto;padding:24px 16px}
.hero{padding:40px 24px;background:#fff;border:3px solid var(--ink);border-radius:6px;box-shadow:6px 6px 0 var(--yel);margin-bottom:28px}
h1{font-size:clamp(26px,4.5vw,40px);line-height:1.2;margin:0 0 12px}h2{margin-top:32px;font-size:24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card{background:#fff;border:2px solid var(--ink);border-radius:6px;padding:16px;color:inherit;text-decoration:none;box-shadow:4px 4px 0 var(--blue)}
.card h2{margin:0 0 8px;font-size:19px;color:var(--blue)}.card p{margin:0;font-size:15px}.card:hover{transform:translate(-2px,-2px)}
.wrap{background:#fff;border:2px solid var(--ink);border-radius:6px;max-width:860px;margin:24px auto;padding:20px 22px}
.hero+.grid+.wrap{max-width:1040px}
.latest{display:block;padding:14px;border-left:6px solid var(--blue);background:#f1f6ff;color:inherit;text-decoration:none}.latest span{display:block;font-size:15px}
.crumb{font-size:14px;margin-bottom:8px}.crumb a{color:var(--blue)}.meta{color:#667;font-size:14px}
.answer{background:var(--yel);padding:14px 16px;border-left:6px solid var(--ink);border-radius:4px}
.example{font-style:italic;background:#f4f7fb;padding:10px 14px;border-radius:4px}
.box{padding:12px 16px;margin:16px 0;border-radius:6px;border:2px solid}.box h3{margin:0 0 4px;font-size:17px}.box p{margin:0}
.ref{border-color:var(--blue);background:#eef4ff}.imp{border-color:var(--red);background:#fff1ef}
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{border:1px solid var(--ink);padding:8px;vertical-align:top;text-align:left}th{background:var(--blue);color:#fff}
.tcap{margin-bottom:6px}
.btn{display:inline-block;background:var(--blue);color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none;font-weight:700}
.prompt{background:#f4f7fb;border:1px dashed var(--ink);padding:10px 14px;font-size:15px}
footer{text-align:center;padding:24px 16px;font-size:14px;color:#556}
@media print{body{background:#fff;font-size:11.5pt;line-height:1.45}.top,footer,.btn,.crumb{display:none}.wrap{border:0;margin:0;padding:0;max-width:none}h2{break-after:avoid}.box,tr{break-inside:avoid}}
.hero-img{width:100%;height:auto;border-radius:6px;border:2px solid var(--ink);margin:8px 0 16px}
.toc{background:#f4f7fb;border:1px solid var(--grid);border-radius:6px;padding:10px 16px;margin:16px 0}.toc ol{margin:6px 0 0;padding-left:20px}.toc a{color:var(--blue)}
html{scroll-behavior:smooth}
.toc ol{list-style:none;padding-left:0}