@font-face { font-family:'DM Sans'; src:url('assets/dm-sans-400.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('assets/dm-sans-500.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('assets/dm-sans-600.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('assets/dm-sans-700.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
  --ink:#142b49;
  --body:#465468;
  --muted:#6a7788;
  --accent:#2d598a;
  --dark:#17365f;
  --navy:#0f2745;
  --tint:#edf2f8;
  --paper:#ffffff;
  --surface:#f4f7fb;
  --line:#dbe3ed;
  --gold:#b1864c;
  --teal:#24766d;
  --red:#a8423b;
  --ace:#b57e33;
  --ahe:#4f82b6;
  --hyper:#2e887b;
  --dsh:#9c5d63;
  --max:1180px;
  --radius:18px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'DM Sans','Aptos','Segoe UI',sans-serif;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,select { font:inherit; }
button,a,summary,select { -webkit-tap-highlight-color:transparent; }
button,summary,select { cursor:pointer; }
button { color:inherit; border:1px solid var(--line); background:#fff; }
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible { outline:3px solid #b08237; outline-offset:4px; }
img { display:block; max-width:100%; }
h1,h2,h3,h4,p,figure,dl,dd { margin:0; }
h1,h2 { font-family:var(--serif); font-weight:600; letter-spacing:-.045em; }
h2 { font-size:clamp(36px,4.1vw,52px); line-height:1.08; }
h2 em { font-style:normal; font-weight:400; color:var(--accent); }
h3 { font-size:21px; line-height:1.35; letter-spacing:-.025em; }
h4 { font-size:17px; line-height:1.35; }
p { color:var(--body); }
strong,b { font-weight:700; }
code { font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace; font-size:.88em; background:#eef3f9; border:1px solid #dfe7f1; border-radius:4px; padding:.1em .35em; color:#28486e; }
sub { line-height:0; }
.wrap { width:min(var(--max),calc(100% - 80px)); margin-inline:auto; }
.section { padding:94px 0; }
.section-heading { display:grid; grid-template-columns:1fr .82fr; gap:74px; align-items:end; margin-bottom:42px; }
.section-heading > p { max-width:510px; font-size:16px; line-height:1.78; padding-bottom:3px; }
.eyebrow { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.18em; color:var(--accent); margin-bottom:16px; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none!important; }
.skip-link { position:fixed; top:8px; left:8px; transform:translateY(-160%); padding:12px 18px; background:#fff; z-index:200; }
.skip-link:focus { transform:translateY(0); }

.site-header { height:76px; position:sticky; top:0; z-index:40; background:rgba(255,255,255,.96); border-bottom:1px solid var(--line); backdrop-filter:blur(14px); }
.nav-shell { height:100%; width:min(1280px,calc(100% - 64px)); margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; gap:10px; align-items:center; text-decoration:none; font-weight:700; font-size:18px; letter-spacing:-.055em; white-space:nowrap; }
.brand-light { font-weight:500; }
.brand img { flex-shrink:0; }
nav { display:flex; gap:26px; height:100%; align-items:center; }
nav a { font-size:13px; font-weight:500; text-decoration:none; color:#526276; border-bottom:2px solid transparent; padding:25px 0 22px; }
nav a:hover,nav a.active { color:var(--accent); border-bottom-color:var(--accent); }
nav .nav-paper { color:var(--dark); font-weight:700; }
.menu-toggle { display:none; padding:7px 12px; border-radius:6px; font-size:14px; }

.hero { background:radial-gradient(ellipse at 50% -12%,#dfeaf8 0%,#f4f7fb 48%,var(--paper) 82%); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; width:540px; height:540px; border:1px solid #d8e4f3; border-radius:50%; left:-320px; top:110px; opacity:.55; pointer-events:none; }
.hero::after { content:""; position:absolute; width:420px; height:420px; border:1px solid #d8e4f3; border-radius:50%; right:-250px; top:230px; opacity:.5; pointer-events:none; }
.hero-inner { text-align:center; padding:76px 0 58px; position:relative; z-index:1; }
.hero .eyebrow { letter-spacing:.13em; display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:24px; }
.live-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px #dce7f5; }
.hero h1 { font-size:clamp(64px,9vw,112px); letter-spacing:-.075em; line-height:.9; color:var(--dark); }
.hero h1 > span { display:block; }
.hero .hero-title-second { font-size:.72em; letter-spacing:-.055em; color:#406ea5; margin-top:.12em; }
.title-period { color:var(--gold); }
.hero-subtitle { font-size:clamp(23px,2.4vw,31px); font-weight:500; line-height:1.4; letter-spacing:-.025em; max-width:820px; margin:27px auto 0; color:var(--ink); text-wrap:balance; }
.hero-description { font-size:16px; line-height:1.8; max-width:730px; margin:18px auto 0; text-wrap:balance; }
.hero-actions { display:flex; gap:12px; justify-content:center; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; border-radius:7px; padding:12px 23px; font-size:14px; font-weight:700; text-decoration:none; transition:background .16s,transform .16s; }
.button:hover { transform:translateY(-2px); }
.button.primary { background:var(--dark); color:#fff; border:1px solid var(--dark); }
.button.primary:hover { background:var(--navy); }
.button.secondary { background:rgba(255,255,255,.65); border:1px solid #c9d6e6; }
.button.secondary:hover { background:#fff; }
.hero-affiliation { font-size:12px; margin-top:25px; color:var(--muted); }
.hero-affiliation span { margin:0 7px; color:#9aa9bb; }
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); padding:25px 0 30px; gap:18px; position:relative; z-index:1; }
.stats > div { text-align:center; border-right:1px solid var(--line); }
.stats > div:last-child { border-right:0; }
.stats strong { font-family:var(--serif); font-size:39px; line-height:1.25; display:block; font-weight:400; color:var(--ink); }
.stats span { display:block; font-size:11px; color:var(--muted); margin-top:4px; letter-spacing:.02em; }
.overview { padding-top:80px; }

.innovation-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.innovation-card { border:1px solid var(--line); border-radius:12px; padding:26px 25px 28px; background:linear-gradient(180deg,#fff,#fbfcfe); position:relative; }
.innovation-card::before { content:""; position:absolute; top:0; left:25px; right:25px; height:2px; background:linear-gradient(90deg,#afc7e4,transparent); }
.card-index { display:block; color:#8ba2bf; font-size:11px; font-weight:700; letter-spacing:.12em; margin-bottom:30px; }
.innovation-card h3 { margin-bottom:10px; }
.innovation-card p { font-size:14px; line-height:1.72; }
.paper-figure { background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-top:32px; box-shadow:0 10px 38px rgba(20,43,73,.04); }
.figure-link { display:block; position:relative; text-decoration:none; cursor:zoom-in; padding:16px; }
.figure-link > img { width:100%; height:auto; border-radius:6px; }
.figure-zoom { position:absolute; right:28px; bottom:26px; padding:7px 11px; border:1px solid #cbd8e8; border-radius:5px; background:rgba(255,255,255,.94); color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:0; transform:translateY(4px); transition:.18s; }
.figure-link:hover .figure-zoom,.figure-link:focus-visible .figure-zoom { opacity:1; transform:none; }
figcaption { border-top:1px solid var(--line); padding:14px 22px; color:var(--muted); font-size:12px; line-height:1.7; background:#f8faff; }
.evidence-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-top:30px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.evidence-strip > div { padding:24px 24px 23px 0; border-right:1px solid var(--line); }
.evidence-strip > div:not(:first-child) { padding-left:24px; }
.evidence-strip > div:last-child { border-right:0; }
.evidence-strip strong { display:block; font-family:var(--serif); font-size:38px; font-weight:400; line-height:1; color:var(--ink); }
.evidence-strip strong span { font-size:20px; color:#8498b2; }
.evidence-strip p { font-size:12px; line-height:1.65; margin-top:9px; }

.results-section { background:#f3f6fa; border-block:1px solid var(--line); }
.hci-definition { display:grid; grid-template-columns:1.1fr .9fr; gap:34px; align-items:center; padding:22px 26px; margin-bottom:26px; border:1px solid #d4e0ee; border-radius:12px; background:rgba(255,255,255,.56); }
.formula-label { display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; color:var(--accent); margin-bottom:8px; }
.hci-definition code { display:inline-block; background:transparent; border:0; padding:0; font-size:20px; color:var(--dark); }
.hci-definition p { font-size:12px; line-height:1.7; }
.results-panel { background:#fff; border:1px solid #d6e0ed; border-radius:var(--radius); padding:24px 28px 22px; box-shadow:0 8px 30px rgba(23,54,95,.045); }
.leaderboard-toolbar { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:15px; }
.level-controls { display:flex; gap:7px; flex-wrap:wrap; }
.level-button { padding:8px 12px 7px; border-radius:6px; background:#fff; font-size:12px; font-weight:700; color:#506278; }
.level-button span { display:block; font-size:9px; line-height:1.4; font-weight:500; color:#8796a8; }
.level-button:hover { border-color:#9bb5d3; }
.level-button.is-active { background:var(--dark); border-color:var(--dark); color:#fff; }
.level-button.is-active span { color:#c7d8ec; }
.method-filter { display:flex; align-items:center; gap:9px; font-size:11px; font-weight:700; color:var(--muted); white-space:nowrap; }
.method-filter select { padding:8px 30px 8px 10px; border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--ink); font-size:11px; }
.leaderboard-status { font-size:11px; color:var(--muted); margin:0 0 14px; }
.table-scroll { max-width:100%; overflow:auto; scrollbar-width:thin; }
.table-scroll:focus-visible { outline-offset:2px; }
table { border-collapse:collapse; width:100%; font-size:13px; color:var(--body); }
th { font-size:10px; font-weight:700; text-align:left; letter-spacing:.045em; color:var(--muted); text-transform:uppercase; white-space:nowrap; border-bottom:1px solid var(--line); padding:11px 9px; }
td { padding:13px 9px; border-bottom:1px solid #e9eef5; }
tbody tr:last-child td,tbody tr:last-child th { border-bottom:0; }
tbody tr:hover { background:#f7faff; }
.leaderboard { min-width:820px; table-layout:fixed; }
.leaderboard th:nth-child(1) { width:42px; }
.leaderboard th:nth-child(2) { width:136px; }
.leaderboard th:nth-child(3) { width:150px; }
.leaderboard th:nth-child(n+4) { width:123px; }
.leaderboard thead th { vertical-align:top; }
.leaderboard thead .rank-col { padding-left:4px; }
.leaderboard .hci-heading span { display:block; font-size:9px; line-height:1.4; margin-top:3px; font-weight:400; text-transform:none; letter-spacing:0; color:#8997a9; }
.leaderboard .hci-heading.is-active { color:var(--dark); background:#edf3fa; border-radius:5px 5px 0 0; }
.leaderboard .hci-heading[aria-sort="descending"]::after { content:" ↓"; color:var(--accent); }
.leaderboard th.is-active,.leaderboard th.best { background:#f1f5fa; }
.leaderboard .rank { color:#8392a5; font-size:11px; font-variant-numeric:tabular-nums; }
.leaderboard .game-cell { color:var(--ink); font-size:14px; text-transform:none; letter-spacing:0; }
.leaderboard th.game-cell small,.leaderboard .method-cell small { display:block; margin-top:2px; font-size:9px; line-height:1.5; font-weight:400; text-transform:none; letter-spacing:.03em; color:#8b98a9; }
.leaderboard .method-cell { padding:12px 9px; font-size:12px; text-transform:none; letter-spacing:0; white-space:normal; }
.leaderboard .method-cell strong { color:#29405f; font-weight:700; }
.hci { position:relative; text-align:right; font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.hci span { font-size:9px; font-weight:500; margin-left:2px; }
.hci.positive { color:var(--teal); }
.hci.negative { color:var(--red); }
.hci.neutral { color:#607187; }
.hci.na { color:#a1adbb; font-weight:500; }
.hci.best { background:#f2f7fb; box-shadow:inset 0 0 0 1px #e4edf5; }
.best-dot { width:4px; height:4px; background:var(--gold); border-radius:50%; display:inline-block; margin-left:5px; vertical-align:middle; }
.table-note { font-size:11px; line-height:1.65; color:var(--muted); border-top:1px solid var(--line); padding-top:14px; margin-top:12px; }

.direct-comparison { margin-top:34px; border:1px solid #d6e0ed; border-radius:var(--radius); background:#fff; padding:28px 30px 25px; }
.comparison-heading { display:grid; grid-template-columns:1fr .78fr; gap:42px; align-items:end; padding-bottom:20px; border-bottom:1px solid var(--line); }
.comparison-heading h3 { font-size:23px; }
.comparison-heading > p { font-size:12px; line-height:1.7; }
.comparison-grid { display:grid; grid-template-columns:1fr 1fr; gap:38px; padding-top:25px; }
.bar-panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; }
.bar-panel-head span { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); }
.bar-panel-head h4 { font-size:18px; }
.bar-list { display:grid; gap:18px; }
.bar-row { display:grid; grid-template-columns:155px 1fr 76px; align-items:center; gap:12px; }
.bar-label { font-size:11px; font-weight:700; line-height:1.4; color:#334b68; }
.bar-label span { display:block; font-size:9px; font-weight:400; color:#8492a4; margin-top:2px; }
.bar-track { height:20px; background:#eef2f7; border-radius:3px; overflow:visible; position:relative; }
.bar-fill { display:block; height:100%; width:var(--value); min-width:2px; background:linear-gradient(90deg,#9db4ce,#6f8fb3); border-radius:3px; }
.bar-fill.ace { background:linear-gradient(90deg,#e0bd85,var(--ace)); }
.bar-fill.ahe { background:linear-gradient(90deg,#96bce0,var(--ahe)); }
.bar-fill.hyper { background:linear-gradient(90deg,#85c4bb,var(--hyper)); }
.bar-row > strong { font-size:14px; text-align:right; font-variant-numeric:tabular-nums; color:#324b6a; white-space:nowrap; }
.initial-marker { position:absolute; top:-4px; bottom:-4px; left:var(--initial); width:1px; border-left:1px dashed #74859a; z-index:2; }
.initial-marker::before { content:""; position:absolute; top:-1px; left:-3px; width:5px; height:5px; border:1px solid #74859a; border-radius:50%; background:#fff; }
.delta { display:block; font-size:9px; font-style:normal; font-weight:700; margin-top:2px; }
.delta.up { color:var(--teal); }
.delta.down { color:var(--red); }
.axis { display:flex; justify-content:space-between; margin:14px 76px 0 167px; padding-top:6px; border-top:1px solid #ccd8e6; color:#94a0af; font-size:9px; }
.comparison-note { margin-top:24px; padding:16px 18px; background:#f3f7fb; border-left:3px solid var(--accent); border-radius:0 6px 6px 0; font-size:12px; line-height:1.7; }

.cases-section { border-top:1px solid var(--line); }
.case-principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:34px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--line); }
.case-principles article { background:#fff; padding:25px 24px 27px; }
.case-principles article > span { display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--accent); margin-bottom:22px; }
.case-principles h3 { font-size:18px; margin-bottom:9px; }
.case-principles p { font-size:13px; line-height:1.7; }
.case-matrix-shell { margin-top:40px; }
.case-matrix-heading { display:grid; grid-template-columns:1fr .8fr; gap:48px; align-items:end; margin-bottom:20px; }
.case-matrix-heading h3 { font-size:25px; }
.case-matrix-heading > p { font-size:12px; line-height:1.7; }
.case-scroll { border:1px solid var(--line); border-radius:10px; }
.case-matrix { min-width:1100px; table-layout:fixed; }
.case-matrix th:nth-child(1) { width:220px; }
.case-matrix th:nth-child(n+2) { width:220px; }
.case-matrix thead th { padding:15px 14px; background:#f3f6fb; font-size:11px; color:#3c5573; vertical-align:bottom; }
.case-matrix thead th:first-child { color:var(--muted); }
.case-matrix tbody th { padding:18px 14px; border-bottom:1px solid #e9eef5; border-right:1px solid #edf1f6; text-transform:none; white-space:normal; letter-spacing:0; vertical-align:top; }
.case-matrix tbody th strong { display:block; font-size:12px; color:var(--dark); margin-bottom:3px; }
.case-matrix tbody th span { display:block; font-size:10px; line-height:1.55; font-weight:400; color:var(--muted); }
.case-matrix td { padding:18px 14px; border-right:1px solid #edf1f6; font-size:11px; line-height:1.65; vertical-align:top; }
.case-matrix td:last-child { border-right:0; }
.method-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle; }
.method-dot.ace { background:var(--ace); }
.method-dot.ahe { background:var(--ahe); }
.method-dot.hyper { background:var(--hyper); }
.method-dot.dsh { background:var(--dsh); }

.method-section { background:#f3f6fa; border-block:1px solid var(--line); }
.ladder { display:grid; grid-template-columns:repeat(5,1fr); gap:9px; margin-top:30px; }
.ladder article { position:relative; min-height:145px; padding:20px 18px; border:1px solid #d1ddeb; border-radius:8px; background:linear-gradient(180deg,#fff,#f8fafd); }
.ladder article::after { content:""; position:absolute; top:24px; right:-9px; width:9px; border-top:1px solid #b5c6db; }
.ladder article:last-child::after { display:none; }
.ladder article > span { display:inline-block; font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.08em; margin-bottom:24px; }
.ladder h4 { font-size:15px; margin-bottom:6px; }
.ladder p { font-size:11px; line-height:1.6; }
.method-flow { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:42px; padding-top:29px; border-top:1px solid #cfdae8; }
.method-flow article { position:relative; }
.flow-number { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; color:#8195ad; margin-bottom:8px; }
.method-flow h3 { font-size:19px; margin-bottom:8px; }
.method-flow p { font-size:12px; line-height:1.72; }
.method-flow code { font-size:10px; }
.method-details { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:38px; }
.method-detail-card { background:#fff; border:1px solid #d5e0ed; border-radius:11px; padding:25px 24px; }
.method-detail-card .eyebrow { margin-bottom:12px; font-size:9px; }
.method-detail-card h3 { font-size:18px; margin-bottom:9px; }
.method-detail-card p { font-size:12px; line-height:1.72; }
.audit-panel { display:grid; grid-template-columns:1fr 1.08fr; gap:50px; align-items:center; margin-top:30px; padding:30px 32px; border-radius:12px; background:var(--dark); color:#fff; }
.audit-panel .eyebrow { color:#93b4d9; margin-bottom:10px; }
.audit-panel h3 { color:#fff; font-size:21px; margin-bottom:9px; }
.audit-panel p { color:#c1d1e4; font-size:12px; line-height:1.7; }
.audit-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.audit-stats > div { border-left:1px solid #3a577b; padding-left:14px; }
.audit-stats dt { font-size:9px; color:#a9bed6; line-height:1.4; min-height:27px; }
.audit-stats dd { font-family:var(--serif); font-size:27px; line-height:1.2; color:#fff; }

.contributors-section { background:#fff; }
.author-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.author-card { display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:start; min-height:132px; padding:20px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#fff,#fbfcfe); }
.author-initials { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#edf3fa; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.03em; }
.author-card h3 { font-size:17px; margin:3px 0 5px; }
.author-card p { font-size:10px; line-height:1.5; color:var(--muted); }
.author-card p span { color:var(--accent); font-weight:700; }
.author-card a { display:inline-block; margin-top:13px; font-size:10px; font-weight:700; color:var(--accent); text-decoration:none; border-bottom:1px solid #b7cbe2; padding-bottom:1px; }
.author-card a:hover { color:var(--dark); border-color:var(--dark); }
.affiliations { display:flex; flex-wrap:wrap; gap:10px 22px; padding-top:24px; margin-top:30px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.affiliations b { display:inline-grid; place-items:center; width:19px; height:19px; margin-right:6px; border-radius:50%; background:#eef3f9; color:var(--accent); font-size:9px; }

footer { padding:32px 0; border-top:1px solid var(--line); background:#fbfcfe; }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.footer-inner > p { font-size:11px; color:var(--muted); }
.footer-inner p span { margin:0 6px; color:#a1adbb; }
.footer-links { display:flex; gap:22px; }
.footer-links a { font-size:11px; color:var(--muted); text-decoration:none; }
.footer-links a:hover { color:var(--accent); text-decoration:underline; }

#figure-dialog { width:calc(100vw - 40px); max-width:1600px; height:calc(100dvh - 40px); max-height:none; border:1px solid #bbcce1; border-radius:12px; padding:0; color:var(--ink); background:#fff; overflow:hidden; }
#figure-dialog[open] { display:flex; flex-direction:column; }
#figure-dialog::backdrop { background:rgba(15,39,69,.78); backdrop-filter:blur(3px); }
.dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; background:#f3f6fb; border-bottom:1px solid var(--line); font-size:13px; flex:none; }
.dialog-toolbar button { padding:5px 11px; border-radius:5px; font-size:12px; }
.zoom-controls { display:flex; align-items:center; gap:8px; }
.zoom-controls > span { font-size:10px; min-width:34px; text-align:center; color:var(--muted); }
.figure-viewport { flex:1; overflow:auto; padding:18px; min-height:0; overscroll-behavior:contain; background:#fff; }
.figure-viewport img { display:block; margin:0 auto; max-width:none; object-fit:contain; }
.figure-viewport img.fit { width:100%; height:100%; }
#figure-caption { font-size:11px; padding:12px 18px; border-top:1px solid var(--line); background:#f8faff; flex:none; max-height:20vh; overflow:auto; color:var(--muted); }
body.modal-open { overflow:hidden; }

@media (max-width:1040px) {
  .wrap { width:calc(100% - 48px); }
  .nav-shell { width:calc(100% - 40px); }
  nav { gap:20px; }
  .section { padding:72px 0; }
  .section-heading { gap:38px; }
  .innovation-grid { gap:14px; }
  .innovation-card { padding:23px 20px; }
  .comparison-grid { gap:24px; }
  .bar-row { grid-template-columns:130px 1fr 72px; gap:9px; }
  .axis { margin-left:139px; margin-right:72px; }
  .method-flow { gap:18px; }
  .audit-panel { grid-template-columns:1fr; gap:24px; }
  .author-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:800px) {
  html { scroll-padding-top:82px; }
  .wrap { width:calc(100% - 36px); }
  .site-header { height:64px; }
  .nav-shell { width:calc(100% - 32px); }
  .brand { font-size:17px; }
  .brand img { width:32px; height:32px; }
  .menu-toggle { display:block; }
  .js-enabled nav { display:none; }
  .js-enabled nav.open { display:flex; }
  nav { position:absolute; top:63px; left:0; right:0; background:var(--paper); height:auto; padding:16px 22px; border-bottom:1px solid var(--line); gap:0; flex-wrap:wrap; justify-content:center; box-shadow:0 12px 24px rgba(20,43,73,.08); }
  nav a { padding:9px 12px; font-size:12px; }
  body:not(.js-enabled) .site-header { height:auto; min-height:64px; }
  body:not(.js-enabled) .nav-shell { padding:12px 0; flex-wrap:wrap; }
  body:not(.js-enabled) nav { position:static; display:flex; width:100%; background:transparent; box-shadow:none; border:0; padding:0; }
  .hero-inner { padding:56px 0 40px; }
  .hero .eyebrow { font-size:9px; letter-spacing:.09em; margin-bottom:20px; }
  .hero h1 { font-size:clamp(36px,9.6vw,72px); }
  .hero .hero-title-second { font-size:.67em; }
  .hero-subtitle { font-size:21px; max-width:480px; margin-top:22px; }
  .hero-description { font-size:14px; line-height:1.75; max-width:460px; margin-top:16px; }
  .hero-actions { margin-top:24px; }
  .button { padding:10px 15px; font-size:12px; gap:17px; }
  .hero-affiliation { font-size:10px; line-height:1.9; margin-top:20px; }
  .stats { grid-template-columns:repeat(2,1fr); gap:22px 10px; padding:24px 0; }
  .stats > div:nth-child(2) { border-right:0; }
  .stats strong { font-size:34px; }
  .stats span { font-size:10px; }
  .section { padding:56px 0; }
  .section-heading { grid-template-columns:1fr; gap:18px; margin-bottom:28px; }
  .section-heading > p { font-size:14px; line-height:1.76; }
  h2 { font-size:36px; }
  .eyebrow { font-size:9px; margin-bottom:12px; }
  .innovation-grid { grid-template-columns:1fr; gap:11px; }
  .card-index { margin-bottom:16px; }
  .paper-figure { margin-top:24px; border-radius:10px; }
  .figure-link { padding:7px; }
  .figure-zoom { display:none; }
  figcaption { font-size:10px; padding:11px 13px; }
  .evidence-strip { grid-template-columns:repeat(2,1fr); margin-top:22px; }
  .evidence-strip > div { padding:20px 16px 20px 0; }
  .evidence-strip > div:not(:first-child) { padding-left:16px; }
  .evidence-strip > div:nth-child(2) { border-right:0; }
  .evidence-strip > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .evidence-strip strong { font-size:32px; }
  .evidence-strip p { font-size:10px; }
  .hci-definition { grid-template-columns:1fr; gap:12px; padding:18px; }
  .hci-definition code { font-size:17px; }
  .results-panel { padding:18px 14px; border-radius:12px; }
  .leaderboard-toolbar { align-items:flex-start; flex-direction:column; gap:12px; }
  .level-controls { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; }
  .level-button { padding:7px 5px; font-size:10px; }
  .level-button span { font-size:8px; }
  .method-filter { align-self:stretch; justify-content:space-between; }
  .method-filter select { flex:1; max-width:180px; }
  .leaderboard { min-width:790px; }
  .table-note { font-size:10px; }
  .direct-comparison { padding:22px 17px; margin-top:24px; border-radius:12px; }
  .comparison-heading { grid-template-columns:1fr; gap:12px; }
  .comparison-heading h3 { font-size:20px; }
  .comparison-grid { grid-template-columns:1fr; gap:32px; }
  .bar-row { grid-template-columns:125px 1fr 68px; }
  .axis { margin-left:134px; margin-right:68px; }
  .bar-label { font-size:10px; }
  .bar-panel-head h4 { font-size:16px; }
  .case-principles { grid-template-columns:1fr; margin-top:24px; }
  .case-principles article { padding:20px; }
  .case-principles article > span { margin-bottom:12px; }
  .case-matrix-heading { grid-template-columns:1fr; gap:12px; margin-bottom:16px; }
  .case-matrix-heading h3 { font-size:21px; }
  .case-matrix { min-width:1020px; }
  .case-matrix tbody th { position:sticky; left:0; z-index:2; background:#fff; }
  .case-matrix thead th:first-child { position:sticky; left:0; z-index:3; }
  .ladder { grid-template-columns:repeat(2,1fr); }
  .ladder article { min-height:130px; }
  .ladder article::after { display:none; }
  .method-flow { grid-template-columns:1fr 1fr; gap:22px; margin-top:32px; }
  .method-details { grid-template-columns:1fr; gap:12px; margin-top:30px; }
  .audit-panel { padding:24px 20px; }
  .audit-stats { grid-template-columns:repeat(2,1fr); gap:17px 12px; }
  .audit-stats > div { min-height:60px; }
  .author-grid { grid-template-columns:1fr; }
  .affiliations { gap:9px 15px; }
  .footer-inner { align-items:flex-start; flex-direction:column; gap:12px; }
  #figure-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); }
  .dialog-toolbar { padding:9px 11px; }
  .dialog-toolbar strong { font-size:11px; }
  #figure-caption { font-size:10px; }
}

@media (max-width:480px) {
  .wrap { width:calc(100% - 28px); }
  .hero::before,.hero::after { display:none; }
  .hero h1 { font-size:clamp(34px,9.6vw,46px); }
  .hero-subtitle { font-size:19px; }
  .hero-actions { flex-direction:column; align-items:stretch; max-width:260px; margin-inline:auto; }
  .button { justify-content:space-between; }
  .hero-affiliation span { display:none; }
  .hero-affiliation { max-width:280px; margin-inline:auto; }
  .stats > div { border-right:0; }
  .evidence-strip { grid-template-columns:1fr; }
  .evidence-strip > div { border-right:0; border-bottom:1px solid var(--line); padding:17px 0!important; }
  .evidence-strip > div:last-child { border-bottom:0; }
  .bar-row { grid-template-columns:105px 1fr 60px; gap:7px; }
  .axis { margin-left:112px; margin-right:60px; }
  .bar-label span { font-size:8px; }
  .bar-list { gap:14px; }
  .method-flow { grid-template-columns:1fr; }
  .ladder { grid-template-columns:1fr; }
  .ladder article { min-height:0; }
  .author-card { grid-template-columns:38px 1fr; padding:17px 15px; }
  .author-initials { width:38px; height:38px; }
  .dialog-toolbar { flex-wrap:wrap; }
  .zoom-controls { gap:5px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

.leaderboard-toolbar {
  display: flex;
  flex-direction: column;   /* method 单独占一行 */
  gap: 12px;
}

.level-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* G0-G4 刚好占满一行 */
  gap: 8px;
  width: 100%;
}

.level-button {
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  align-items: start;
  gap: 6px;
  padding: 8px 6px;          /* 左右 padding 调小，给图更多宽度 */
  text-align: center;
  box-sizing: border-box;
  min-width: 0;
}


.level-icon {
  width: 100%;               /* 图宽接近按钮块宽度 */
  max-width: 100%;
  height: auto;
  max-height: 120px;         /* 防止过高，按需调整 */
  object-fit: contain;
  display: block;
}

.method-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.case-library { margin-top:34px; border:1px solid #d6e0ed; border-radius:var(--radius); background:#fff; padding:28px 30px 25px; }
.case-library-heading { display:grid; grid-template-columns:1fr .78fr; gap:42px; align-items:end; padding-bottom:20px; border-bottom:1px solid var(--line); }
.case-library-heading h3 { font-size:23px; }
.case-library-heading h3 em { font-style:normal; color:var(--accent); }
.case-library-heading > p { font-size:12px; line-height:1.7; }
.case-library-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding-top:24px; }
.case-card { display:flex; flex-direction:column; min-width:0; padding:19px 20px 18px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#fff,#fafcff); }
.case-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.case-card-title { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.case-card-title h4 { font-size:15px; letter-spacing:-.01em; color:var(--dark); }
.case-capability { padding:2px 7px; border:1px solid #d5e1ef; border-radius:999px; background:#f3f7fb; color:#61758e; font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; line-height:1.7; }
.case-difficulty { flex:none; display:inline-grid; place-items:center; min-width:32px; padding:3px 7px; border:1px solid #d2dfed; border-radius:5px; background:#eef4fb; color:#365b85; font-size:9px; font-weight:700; letter-spacing:.05em; }
.case-difficulty[data-difficulty="5"] { border-color:var(--dark); background:var(--dark); color:#fff; }
.case-id { margin-top:10px; font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace; font-size:9px; line-height:1.55; color:#7f8fa3; overflow-wrap:anywhere; }
.case-takeaway { margin:8px 0 13px; font-size:11.5px; line-height:1.65; color:var(--body); }
.case-json { flex:1; margin:0; padding:13px 14px; border:1px solid #dfe7f1; border-radius:7px; background:#f6f9fc; color:#28486e; font-family:'SFMono-Regular',Consolas,'Liberation Mono',monospace; font-size:10px; line-height:1.62; overflow:auto; scrollbar-width:thin; }
.case-json:focus-visible { outline-offset:2px; }
.case-json code { display:block; padding:0; border:0; background:none; color:inherit; font:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.case-library-source { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:10px; line-height:1.65; color:var(--muted); }
.case-library-source a { color:var(--accent); font-weight:700; text-decoration:none; border-bottom:1px solid #b7cbe2; }
.case-library-source a:hover { color:var(--dark); border-color:var(--dark); }

@media (max-width:1040px) {
  .case-library-heading { grid-template-columns:1fr .65fr; gap:28px; }
  .case-library-grid { gap:12px; }
  .case-card { padding:17px; }
}

@media (max-width:800px) {
  .case-library { padding:22px 17px; margin-top:24px; border-radius:12px; }
  .case-library-heading { grid-template-columns:1fr; gap:12px; }
  .case-library-heading h3 { font-size:20px; }
  .case-library-grid { grid-template-columns:1fr; gap:12px; padding-top:20px; }
  .case-card { padding:18px; }
}

@media (max-width:480px) {
  .case-library-grid { gap:10px; }
  .case-card { padding:16px 14px; }
  .case-takeaway { font-size:11px; }
  .case-json { padding:11px 12px; font-size:9px; }
}