:root { color-scheme: light; --ink:#17202a; --muted:#637083; --line:#d9e0ea; --panel:#f7f9fc; --accent:#0f766e; --warn:#9a5b00; --bad:#9f1239; --blue:#1d4ed8; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:#fff; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { min-height:56px; display:flex; align-items:center; gap:18px; padding:0 24px; border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:10; }
.brand { font-weight:720; letter-spacing:0; color:#0f172a; }
.nav { display:flex; gap:12px; flex-wrap:wrap; }
.nav a { font-size:14px; color:#334155; padding:7px 9px; border-radius:6px; }
.nav a:hover { background:#eef3f8; text-decoration:none; }
.shell { max-width:1180px; margin:0 auto; padding:28px 24px 48px; }
.hero { padding:24px 0 22px; display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:start; border-bottom:1px solid var(--line); }
h1 { font-size:34px; line-height:1.1; margin:0 0 12px; letter-spacing:0; }
h2 { font-size:22px; margin:26px 0 12px; letter-spacing:0; }
h3 { font-size:17px; margin:22px 0 8px; letter-spacing:0; }
p { line-height:1.62; }
.lede { color:#475569; font-size:16px; max-width:760px; }
.grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.card { border:1px solid var(--line); border-radius:8px; padding:18px; background:#fff; }
.card h2, .card h3 { margin-top:0; }
.stats { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; }
.stat { border:1px solid var(--line); border-radius:7px; padding:12px; background:var(--panel); }
.stat b { display:block; font-size:24px; color:#0f172a; }
.stat span { display:block; margin-top:3px; color:var(--muted); font-size:13px; }
.badge { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; color:#334155; background:#f8fafc; }
.badge.ok { border-color:#99d6c6; color:#075c55; background:#edfdf8; }
.badge.warn { border-color:#e8c575; color:var(--warn); background:#fff8e8; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 12px; border-radius:7px; border:1px solid #aeb8c6; color:#0f172a; background:#fff; font-weight:620; }
.button.primary { background:#0f766e; color:#fff; border-color:#0f766e; }
.button:hover { text-decoration:none; filter:brightness(.98); }
.table { width:100%; border-collapse:collapse; margin-top:12px; font-size:14px; }
.table th, .table td { text-align:left; border-bottom:1px solid var(--line); padding:10px 8px; vertical-align:top; }
.table th { color:#475569; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
.notice { border:1px solid #e8c575; background:#fff8e8; color:#5f3b00; border-radius:8px; padding:12px 14px; margin:16px 0; }
.viewer { display:grid; grid-template-columns: 292px minmax(0,1fr); min-height: calc(100vh - 57px); }
.sidebar { border-right:1px solid var(--line); background:#f8fafc; padding:16px; position:sticky; top:57px; height:calc(100vh - 57px); overflow:auto; }
.search { width:100%; border:1px solid #cbd5e1; border-radius:7px; padding:9px 10px; font-size:14px; background:#fff; }
.page-list { display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.page-list button { text-align:left; border:0; background:transparent; padding:8px 9px; border-radius:6px; font:inherit; cursor:pointer; color:#334155; }
.page-list button.active, .page-list button:hover { background:#e8eef7; color:#0f172a; }
.content { padding:26px 34px 64px; max-width:980px; }
.prose { line-height:1.62; }
.prose pre { overflow:auto; border:1px solid var(--line); border-radius:8px; padding:12px; background:#0f172a; color:#e2e8f0; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.92em; }
.prose :not(pre)>code { background:#eef2f7; color:#1f2937; padding:1px 4px; border-radius:4px; }
.prose table { border-collapse:collapse; width:100%; display:block; overflow:auto; }
.prose th, .prose td { border:1px solid var(--line); padding:8px; }
.prose blockquote { border-left:3px solid #94a3b8; margin-left:0; padding-left:14px; color:#475569; }
.compare-frame { display:grid; grid-template-columns:1fr 1fr; height:calc(100vh - 57px); }
.pane { min-width:0; border-right:1px solid var(--line); display:flex; flex-direction:column; }
.pane header { height:42px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px; border-bottom:1px solid var(--line); background:#f8fafc; font-size:14px; }
.pane iframe { flex:1; width:100%; border:0; }
@media (max-width: 820px) { .hero, .grid, .viewer, .compare-frame { grid-template-columns:1fr; } .sidebar { position:relative; top:0; height:auto; } .content { padding:22px 18px 48px; } .compare-frame { height:auto; } .pane { height:70vh; } }