:root { --ink:#13253a; --muted:#5d6b7c; --blue:#2F5BEA; --line:#e3e9f1; --soft:#f4f7fb; }
* { box-sizing:border-box; }
body { margin:0; font-family:'Segoe UI', Roboto, Arial, sans-serif; color:var(--ink); background:#fff; line-height:1.65; }
a { color:var(--blue); }
.top { border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:5; }
.top-in, main, .foot-in { width:min(100% - 32px, 860px); margin:0 auto; }
.top-in { display:flex; align-items:center; gap:18px; min-height:62px; }
.brand { display:flex; align-items:center; gap:8px; font-weight:800; font-size:1.25rem; color:var(--ink); text-decoration:none; }
.brand img { width:28px; height:28px; }
.top nav { margin-left:auto; display:flex; gap:16px; font-weight:600; }
.top nav a { color:var(--ink); text-decoration:none; }
main { padding:28px 0 40px; }
h1 { font-size:2rem; line-height:1.25; margin:8px 0 6px; }
h2 { font-size:1.3rem; margin:28px 0 8px; }
.lead { color:var(--muted); font-size:1.08rem; }
.crumbs { font-size:.9rem; color:var(--muted); }
table { border-collapse:collapse; width:100%; margin:12px 0; font-size:.96rem; }
th, td { border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top; }
th { background:var(--soft); }
.note { background:#fff8e6; border:1px solid #f3dfa8; border-radius:10px; padding:10px 14px; }
.formula { background:var(--soft); border-radius:10px; padding:12px 14px; font-weight:700; text-align:center; }
.hi { margin-top:36px; padding-top:18px; border-top:2px solid var(--line); }
.app-box { margin:30px 0; padding:18px; border-radius:14px; background:linear-gradient(90deg,#eef2ff,#f5efff); }
.app-box a.btn { display:inline-block; margin-top:6px; padding:9px 16px; border-radius:10px; background:var(--blue); color:#fff; font-weight:700; text-decoration:none; }
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; margin-top:18px; }
.card { border:1px solid var(--line); border-radius:14px; padding:16px; text-decoration:none; color:var(--ink); background:#fff; }
.card:hover { border-color:var(--blue); box-shadow:0 6px 20px rgba(47,91,234,.08); }
.card h3 { margin:0 0 6px; font-size:1.08rem; }
.card p { margin:0; color:var(--muted); font-size:.94rem; }
.related { margin-top:30px; }
footer { border-top:1px solid var(--line); background:var(--soft); }
.foot-in { display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding:20px 0; font-size:.9rem; color:var(--muted); }
.foot-in a { color:var(--muted); margin-right:14px; }
@media (max-width:620px) { h1 { font-size:1.6rem; } .top nav { gap:10px; font-size:.92rem; } }