/* One application page: title + fact table on the left, the molecule on the right. */
main.app{padding-block:28px 48px}
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); text-decoration:none; margin-right:6px}
a.crumb:hover{color:var(--ink)}
.grid{display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr); gap:48px; align-items:start; margin-top:14px}
.card h1{margin:0 0 22px; font-weight:500; font-size:clamp(26px, 2.6vw, 34px); line-height:1.1; letter-spacing:-.025em}
table{border-collapse:collapse; width:100%; font-size:14px; line-height:1.4}
th{font-family:var(--mono); font-weight:400; font-size:11.5px; color:var(--mute); text-align:left; vertical-align:top; padding:7px 18px 7px 0; white-space:nowrap}
td{color:var(--ink2); padding:7px 0; vertical-align:top}
tr+tr th, tr+tr td{border-top:1px solid var(--rule)}
tr.g0 th, tr.g0 td{border-top:1.5px solid var(--ink)} tr.g0:first-child th, tr.g0:first-child td{border-top:0}
th.grp{font-family:var(--font); font-weight:600; font-size:13px; color:var(--ink); padding-right:16px}
td[rowspan], th[rowspan]{border-top:1.5px solid var(--ink)}
.chip{display:inline-block; font-weight:600; font-size:11px; line-height:1; padding:4px 8px; border-radius:99px; margin-right:4px; vertical-align:1px; color:#fff}
.chip.ok{background:#00A651} .chip.mid{background:#E0A800; color:var(--ink)} .chip.hard{background:#E10600} .chip.xhard{background:#1A1A1A}
.chip.low{background:#fff; color:var(--ink2); box-shadow:inset 0 0 0 1px var(--rule)} .chip.tag{background:#F0F1F4; color:var(--ink)}
a.ask{color:var(--blue); font-weight:500; text-decoration:none} a.ask:hover{text-decoration:underline}
.mol{margin:0; position:sticky; top:24px}
.mol canvas{display:block; width:100%; aspect-ratio:1; border-radius:28px; background:var(--bg)}
body.light .mol canvas{background:#F6F7F9}
.mol figcaption{margin-top:10px; font-size:12.5px; color:var(--mute); text-align:center}
.pn{display:flex; justify-content:space-between; gap:16px; margin-top:40px; padding-top:18px; border-top:1px solid var(--rule)}
.pn a{font-size:14px; color:var(--ink); text-decoration:none} .pn a:hover{color:var(--blue)}
@media (max-width:900px){ .grid{grid-template-columns:1fr; gap:24px} .mol{position:static; width:80%; margin:0 auto} table{font-size:13px} }