:root {
  --bg:#f4f6f8; --panel:#ffffff; --ink:#17212b; --muted:#63707c; --line:#d9e0e6;
  --accent:#244e5a; --accent2:#2b7a78; --soft:#edf6f5; --yes:#1d7a4d; --no:#b64532; --unc:#8a6a00;
}
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:var(--bg); color:var(--ink); line-height:1.5; }
header { background:var(--accent); color:#fff; padding:22px 26px; }
header h1 { margin:0 0 6px; font-size:24px; }
header p { margin:0; opacity:.9; max-width:1000px; }
.app { display:grid; grid-template-columns:290px minmax(0,1fr); min-height:calc(100vh - 100px); }
aside { background:#fff; border-right:1px solid var(--line); padding:16px; position:sticky; top:0; height:100vh; overflow:auto; }
main { padding:20px; max-width:1280px; }
.search { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; }
.mod { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:15px 0 6px; }
.navbtn { width:100%; text-align:left; border:1px solid var(--line); border-radius:8px; background:#fff; padding:9px 10px; margin:4px 0; cursor:pointer; }
.navbtn:hover { background:#f7fafb; }
.navbtn.active { border-color:var(--accent2); background:var(--soft); font-weight:700; }
.card { background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; }
.kicker { color:var(--muted); font-size:13px; }
h2 { margin:4px 0 10px; font-size:23px; }
h3 { margin:18px 0 8px; font-size:16px; }
.definition { font-size:17px; padding:12px 14px; background:#f7fafb; border-left:4px solid var(--accent2); border-radius:6px; }
.inspect { display:flex; gap:7px; flex-wrap:wrap; margin:10px 0; }
.tag { font-size:12px; background:#eef1f4; border-radius:999px; padding:4px 8px; }
.steps { counter-reset:step; padding-left:0; list-style:none; }
.steps li { counter-increment:step; margin:7px 0; padding:8px 10px 8px 42px; background:#fafbfc; border:1px solid var(--line); border-radius:8px; position:relative; }
.steps li:before { content:counter(step); position:absolute; left:10px; top:7px; width:23px; height:23px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rule { border:1px solid var(--line); border-radius:10px; padding:11px; }
.rule.yes b { color:var(--yes); } .rule.no b { color:var(--no); } .rule.unc b { color:var(--unc); }
.examples { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.ex { border:1px solid var(--line); border-radius:10px; padding:11px; }
.ex strong { display:block; margin-bottom:4px; }
.pass strong { color:var(--yes); } .fail strong { color:var(--no); }
.border strong { color:var(--unc); }
.notice { background:#fff8db; border:1px solid #ead58f; border-radius:10px; padding:12px; }
.glossary { display:grid; grid-template-columns:160px 1fr; gap:6px 14px; font-size:14px; }
.glossary b { color:var(--accent); }
.topbar { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.topbar button { border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 11px; cursor:pointer; }
.topbar button:hover { background:#f7fafb; }
.topbar button.tabbtn.active { border-color:var(--accent2); background:var(--soft); font-weight:700; }
.compare-table-wrap { overflow-x:auto; }
.compare-table { width:100%; border-collapse:collapse; font-size:14px; }
.compare-table th, .compare-table td { border:1px solid var(--line); padding:10px 11px; text-align:left; vertical-align:top; }
.compare-table th { background:#edf3f5; color:var(--accent); }
.compare-table td:first-child { min-width:150px; font-weight:700; white-space:nowrap; }
.compare-table td:last-child { min-width:210px; }
.compare-note { background:var(--soft); border-left:4px solid var(--accent2); border-radius:6px; padding:12px 14px; margin:14px 0; }
.compare-example { background:#fafbfc; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:10px 0; }
.compare-example h3 { margin-top:0; }
.compare-example p:last-child { margin-bottom:0; }
.question-example { white-space:pre-line; line-height:1.5; }
.compare-group { border:1px solid var(--line); border-radius:10px; margin:10px 0; background:#fff; }
.compare-group summary { cursor:pointer; padding:12px 14px; color:var(--accent); font-weight:700; }
.compare-group[open] summary { background:#f7fafb; border-bottom:1px solid var(--line); }
.compare-group > p, .compare-group > ul, .compare-group > h4 { margin-left:14px; margin-right:14px; }
.compare-group h4 { margin-bottom:4px; color:var(--accent); }
.app.compare-view { grid-template-columns:minmax(0,1fr); }
.app.compare-view aside { display:none; }
@media(max-width:900px) {
  .app { grid-template-columns:1fr; }
  aside { position:relative; height:auto; border-right:0; border-bottom:1px solid var(--line); }
  .grid3, .examples { grid-template-columns:1fr; }
}

.manual-hidden{display:none!important}.manual-gap-large{margin-top:14px}.manual-gap{margin-top:10px}