.topbar { display: flex; align-items: center; justify-content: space-between; padding-block: 20px; }
.brand { font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.icon-btn { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; transition: background var(--t-fast) var(--ease); }
.icon-btn:hover { background: var(--surface-2); }

.hero { padding-block: clamp(32px, 9vw, 96px) 32px; text-align: center; }
.hero h1 { font-size: clamp(2.25rem, 6.5vw, 4rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.sub { margin: var(--space-5) auto 0; max-width: 680px; color: var(--ink-2); font-size: clamp(1.0625rem, 2.6vw, 1.1875rem); text-wrap: balance; }

.scan { margin: 36px auto 0; max-width: 680px; text-align: left; }
.scan-field { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px; box-shadow: var(--shadow); }
.scan-field input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 18px; font-size: 1rem; min-height: 48px; outline: none; }
.scan-field:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.btn { min-height: 48px; padding: 0 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: transform var(--t-fast) var(--ease), opacity var(--t-fast); }
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
.scan-options { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; justify-content: center; margin-top: clamp(32px, 6vw, 44px); }
.seg { display: inline-flex; border: 1px solid var(--line); background: var(--surface-2); border-radius: 999px; padding: 4px; margin: 0; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 500; color: var(--ink-2); transition: background var(--t-fast), color var(--t-fast); }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.limit { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.limit select { min-height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-s); padding: 0 12px; font-size: 1rem; }
.link { min-height: 44px; border: 0; background: transparent; color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.field-error { margin-top: 12px; color: var(--bad); text-align: center; font-weight: 500; }

.results { padding-block: 24px 80px; outline: none; }
.results:empty { padding-block: 0; }
.loading { max-width: 760px; margin-inline: auto; }
.steps { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 28px; }
.steps li { padding: 8px 16px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: 0.9375rem; transition: background var(--t) var(--ease), color var(--t); }
.steps li.is-done { color: var(--good); }
.steps li.is-now { background: var(--accent); color: var(--accent-ink); }
.skeletons { display: grid; gap: 16px; }
.skeleton { border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton-ring { height: 140px; }
.skeleton-card { height: 120px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.error { max-width: 520px; margin: 24px auto; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 40px 28px; box-shadow: var(--shadow); }
.error h2 { font-size: 1.5rem; letter-spacing: -0.02em; outline: none; }
.error p { margin: 10px 0 24px; color: var(--ink-2); }

.report { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .report { gap: 40px; } }
.report-head { display: flex; align-items: center; gap: var(--space-5) var(--space-6); flex-wrap: wrap; }
.report-meta { min-width: 0; flex: 1 1 240px; }
.report-meta h2 { font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1.15; letter-spacing: -0.025em; outline: none; max-width: 24ch; }
.url { overflow-wrap: anywhere; margin-top: var(--space-2); line-height: 1.5; }
.notice, .banner { overflow-wrap: anywhere; background: var(--info-bg); color: var(--ink); border-radius: var(--radius-s); padding: var(--space-4) 20px; }

.ring { position: relative; width: 140px; height: 140px; flex: none; }
.ring svg { width: 100%; height: 100%; }
.ring-track { stroke: var(--surface-2); }
.ring-good .ring-bar { stroke: var(--good); }
.ring-warn .ring-bar { stroke: var(--warn); }
.ring-bad .ring-bar { stroke: var(--bad); }
.ring-none .ring-bar { stroke: var(--ink-2); }
.ring-num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; }

.fixes h3, .table-section h3 { font-size: 1.375rem; letter-spacing: -0.02em; margin-bottom: 20px; }
.fix-list { display: grid; gap: var(--space-3); }
.fix { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); }
.fix summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 20px; min-height: 52px; cursor: pointer; list-style: none; }
.fix summary::-webkit-details-marker { display: none; }
.fix-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.fix p, .fix .url-list { padding: 0 20px 18px; color: var(--ink-2); }
.fix .url-list { display: grid; gap: var(--space-2); font-size: 0.9375rem; overflow-wrap: anywhere; }
.count { color: var(--ink-2); font-size: 0.9375rem; }
.more { margin-top: var(--space-3); }
.more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--accent); font-weight: 500; }
.all-good { background: var(--good-bg); color: var(--good); padding: 16px 20px; border-radius: var(--radius-s); font-weight: 500; }

.pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.pill-good { background: var(--good-bg); color: var(--good); }
.pill-warn { background: var(--warn-bg); color: var(--warn); }
.pill-bad { background: var(--bad-bg); color: var(--bad); }
.pill-info { background: var(--info-bg); color: var(--info); }

.bento { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .bento { gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .card-wide { grid-column: span 2; } .card { padding: 28px; } }
@media (min-width: 1100px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .card-wide { grid-column: span 3; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); min-width: 0; }
.card h3 { font-size: 1.0625rem; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
.card .lead { font-size: 1.125rem; font-weight: 600; margin-bottom: var(--space-4); }
.card .note { overflow-wrap: anywhere; margin-top: var(--space-4); color: var(--ink-2); }
.facts { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.facts div { min-width: 0; display: flex; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--line); padding-bottom: var(--space-3); }
.facts dt { color: var(--ink-2); }
.facts dt { flex: none; }
.facts dd { min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-width: 0; max-width: 100%; overflow-wrap: anywhere; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); border: 1px solid transparent; font-size: 0.9375rem; min-height: 36px; }
button.chip { min-height: 44px; }
button.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

.meter { margin-top: var(--space-4); }
.meter-row { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: 0.9375rem; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w, 0); border-radius: 999px; background: var(--good); transition: width var(--t) var(--ease); }
.bar-warn i { background: var(--warn); }
.bar-bad i { background: var(--bad); }

.bots { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); }
.bot { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); background: var(--surface-2); }
.bot > span:nth-child(2) { min-width: 0; }
.bot small { display: block; color: var(--ink-2); }
.bot-ico { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; font-weight: 700; flex: none; }
.is-ok .bot-ico { background: var(--good-bg); color: var(--good); }
.is-no .bot-ico { background: var(--bad-bg); color: var(--bad); }

.tiles { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); }
.tile-n { display: block; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px; }
.tile-good .tile-n { color: var(--good); }
.tile-warn .tile-n { color: var(--warn); }
.tile-bad .tile-n { color: var(--bad); }
.tile-l { color: var(--ink-2); }

.table-tools { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-3); align-items: center; margin-bottom: var(--space-5); }
.table-section #count { margin: 0 0 var(--space-4); padding-inline: var(--space-1); }
.table-tools input[type="search"] { flex: 1 1 220px; min-height: 44px; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 0 18px; font-size: 1rem; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 719px) { th, td { padding: 14px var(--space-4); } }
td .pill { margin-block: var(--space-1); }
th { background: var(--surface-2); font-size: 0.875rem; }
.th-btn { background: none; border: 0; padding: 0; font-weight: 600; min-height: 44px; }
th[aria-sort="ascending"] .th-btn::after { content: " ↑"; }
th[aria-sort="descending"] .th-btn::after { content: " ↓"; }
.cell-url { max-width: 320px; }
.row-open { background: none; border: 0; padding: 0; min-height: 44px; text-align: left; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.cell-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

dialog { width: min(960px, 100% - 24px); max-width: calc(100vw - 24px); overflow-x: hidden; max-height: 92dvh; border: 0; border-radius: var(--radius-l); padding: 0; background: var(--bg); color: var(--ink); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35); }
dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
dialog .close { position: sticky; top: 0; margin: 12px 12px 0 auto; display: grid; }
#drawer-body { padding: 0 clamp(20px, 4vw, 32px) clamp(24px, 4vw, 32px); }

.foot { padding-block: 0 48px; }
.foot-inner { max-width: 960px; margin-inline: auto; padding-top: var(--space-7); border-top: 1px solid var(--line); display: grid; justify-items: center; gap: var(--space-3); text-align: center; min-width: 0; }
.foot-inner .muted { max-width: 52ch; overflow-wrap: anywhere; text-wrap: balance; }
.foot-links { margin-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); justify-content: center; }
.foot-links a { min-height: 44px; min-width: 44px; padding-inline: 4px; justify-content: center; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease); }
.foot-links a:hover { color: var(--accent); }
.foot .brand { min-height: 44px; display: inline-flex; align-items: center; }

.demo, .spec, .flow, .faq { min-width: 0; overflow-wrap: anywhere; }
.spec h2, .limits h2, .faq h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }

.demo { padding-top: clamp(64px, 9vw, 96px); }
.demo h2 { font-size: clamp(2rem, 5.5vw, 3.5rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 700; max-width: 18ch; text-wrap: balance; }
.demo-lead { margin-top: 16px; max-width: 48ch; color: var(--ink-2); font-size: 1.375rem; line-height: 1.4; }
.demo-window { margin-top: clamp(28px, 5vw, 48px); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.demo-view { position: relative; height: clamp(520px, 70vw, 640px); overflow: hidden; padding: clamp(20px, 4vw, 40px); pointer-events: none; -webkit-mask-image: linear-gradient(to bottom, var(--ink) 65%, transparent); mask-image: linear-gradient(to bottom, var(--ink) 65%, transparent); }
.demo-fallback { padding-block: 32px; }
.demo-actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }

.spec { padding-top: clamp(80px, 12vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.spec-list li { padding-block: var(--space-5); border-top: 1px solid var(--line); display: grid; gap: var(--space-2); min-width: 0; }
.spec-list li:last-child { border-bottom: 1px solid var(--line); }
.spec-list h3 { font-size: 1.0625rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; }
.spec-list p { max-width: 65ch; color: var(--ink-2); }

.flow { padding-top: clamp(96px, 16vw, 140px); }
.flow h2 { margin-bottom: clamp(20px, 3vw, 32px); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
.flow-steps { display: grid; gap: 0.25em; margin-left: clamp(0px, 9vw, 128px); font-size: clamp(1.75rem, 5vw, 3.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; }
.flow-steps li { max-width: 22ch; color: var(--ink-2); text-wrap: balance; }
.flow-steps li:last-child { color: var(--ink); }

.limits { margin-top: clamp(96px, 16vw, 140px); padding-block: clamp(56px, 8vw, 96px); background: var(--ink); color: var(--bg); box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax); display: grid; }
.limits-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; min-width: 0; }
.limits-body { min-width: 0; }
.limits-body p { max-width: 65ch; padding-block: var(--space-5); color: color-mix(in srgb, var(--bg) 82%, var(--ink)); }
.limits-body p:first-child { padding-top: 0; }
.limits-body p + p { border-top: 1px solid color-mix(in srgb, var(--bg) 20%, transparent); }

.faq { padding-block: clamp(80px, 12vw, 120px) clamp(64px, 9vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.faq-list { border-top: 1px solid var(--line); min-width: 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { min-height: 56px; padding: 18px var(--space-1); display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; border-radius: var(--radius-s); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-item summary:hover h3 { color: var(--accent); }
.faq-item h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; min-width: 0; transition: color var(--t-fast) var(--ease); }
.faq-item p { max-width: 65ch; padding: 0 var(--space-1) var(--space-5); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); }
@media (min-width: 900px) {
  .spec, .faq, .limits-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
  .spec h2 { position: sticky; top: 24px; }
  .spec-list li { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-5); }
}

.cta { padding-bottom: clamp(64px, 9vw, 96px); min-width: 0; }
.cta-inner { display: grid; justify-items: start; gap: var(--space-5); padding: clamp(28px, 6vw, 64px); border: 1px solid var(--line); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
.cta h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }
.cta p { margin-top: var(--space-3); max-width: 48ch; text-wrap: balance; color: var(--ink-2); font-size: 1.125rem; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-7); } }

.report-head .export-row { margin-left: auto; }
.export-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.seg-wrap { flex-wrap: wrap; border-radius: var(--radius-s); }
.seg-wrap span { padding: 0 14px; }
.intro { margin-bottom: var(--space-4); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

.serp-switch { margin-bottom: 20px; }
.serp-stage { margin-bottom: 20px; }
.serp-view { background: var(--g-bg); border: 1px solid var(--g-line); border-radius: var(--radius-s); padding: 20px; font-family: Arial, Helvetica, sans-serif; margin-bottom: var(--space-4); min-width: 0; }
.serp-desktop { max-width: 652px; }
.serp-mobile { max-width: 360px; }
.serp-site-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.serp-fav { width: 28px; height: 28px; border-radius: 50%; background: var(--g-line); color: var(--g-site); display: grid; place-items: center; font-size: 0.8125rem; font-weight: 700; flex: none; }
.serp-site { display: grid; min-width: 0; }
.serp-site-name { color: var(--g-site); font-size: 0.875rem; line-height: 1.3; overflow-wrap: anywhere; }
.serp-url { color: var(--g-url); font-size: 0.75rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.serp-title { color: var(--g-title); font-size: 1.25rem; line-height: 1.3; font-weight: 400; margin-bottom: 4px; overflow-wrap: anywhere; }
.serp-mobile .serp-title { font-size: 1.125rem; }
.serp-desc { color: var(--g-desc); font-size: 0.875rem; line-height: 1.58; overflow-wrap: anywhere; }
.is-empty { font-style: italic; }
@supports selector(:has(a)) {
  .card-serp .serp-mobile { display: none; }
  .card-serp:has(input[value="mobile"]:checked) .serp-desktop { display: none; }
  .card-serp:has(input[value="mobile"]:checked) .serp-mobile { display: block; }
}

.social-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); margin-bottom: 20px; }
@media (min-width: 720px) { .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.social-item { min-width: 0; }
.social-h { font-size: 0.9375rem; color: var(--ink-2); margin-bottom: var(--space-3); }
.social-card { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; background: var(--surface-2); max-width: 520px; }
.social-x { border-radius: var(--radius); }
.social-media { position: relative; background: var(--surface); aspect-ratio: 1.91 / 1; display: grid; place-items: center; }
.social-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.social-ph { color: var(--ink-2); font-size: 0.875rem; padding: 12px; text-align: center; }
.social-media[data-state="image"] .social-ph { display: none; }
.social-media:not([data-state="image"]) img { display: none; }
.social-media[data-state="none"] .ph-failed, .social-media[data-state="failed"] .ph-none { display: none; }
.social-text { display: grid; gap: var(--space-1); padding: var(--space-4) 20px; min-width: 0; }
.social-domain { color: var(--ink-2); font-size: 0.8125rem; overflow-wrap: anywhere; }
.social-title, .social-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.social-title { font-size: 1rem; line-height: 1.3; }
.social-desc { color: var(--ink-2); font-size: 0.875rem; }
.social-x-large .social-desc { display: none; }
.social-x-small { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: stretch; }
.social-x-small .social-media { aspect-ratio: 1 / 1; }
.social-x-small .social-ph { font-size: 0.75rem; padding: 6px; }
.social-notes h4 { font-size: 1rem; margin-bottom: var(--space-3); }
.notes { display: grid; gap: var(--space-3); }
.notes li { display: flex; gap: var(--space-3); align-items: baseline; overflow-wrap: anywhere; }
.notes li span[aria-hidden] { color: var(--warn); font-weight: 700; }
.notes.tips { margin-top: var(--space-3); }
.notes.tips li { display: list-item; list-style: disc inside; }
.card-social .more { margin-top: var(--space-4); }

.outline { margin-bottom: var(--space-5); }
.outline h4 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: 1rem; margin-bottom: var(--space-3); }
.outline .count { font-weight: 500; }
.outline ul { display: grid; gap: var(--space-2); border-left: 1px solid var(--line); padding-left: var(--space-4); }
.outline li { overflow-wrap: anywhere; }
.outline-2 { margin-left: 16px; }
.outline-3 { margin-left: 32px; }

.kw .seg { margin-bottom: var(--space-4); }
.kw-legend { margin-bottom: var(--space-4); font-size: 0.9375rem; }
.kw-table { min-width: 560px; }
.kv { min-width: 0; }
.kw-table tbody th { background: transparent; font-size: inherit; font-weight: 500; overflow-wrap: anywhere; }
.table-wrap:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@supports selector(:has(a)) {
  .kw-panel { display: none; }
  .kw:has(input[value="top"]:checked) .kw-panel[data-set="top"],
  .kw:has(input[value="1"]:checked) .kw-panel[data-set="1"],
  .kw:has(input[value="2"]:checked) .kw-panel[data-set="2"],
  .kw:has(input[value="3"]:checked) .kw-panel[data-set="3"],
  .kw:has(input[value="4"]:checked) .kw-panel[data-set="4"] { display: block; }
}
.kw-panel .more { margin-top: var(--space-4); }
.kw-cloud-h { font-size: 1rem; margin: var(--space-6) 0 var(--space-4); }
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.cloud-w { padding: 4px 12px; border-radius: 999px; background: var(--surface-2); color: var(--ink); line-height: 1.2; overflow-wrap: anywhere; }
.cloud-w[data-size="1"] { font-size: 0.8125rem; font-weight: 400; }
.cloud-w[data-size="2"] { font-size: 0.9375rem; font-weight: 500; }
.cloud-w[data-size="3"] { font-size: 1.0625rem; font-weight: 500; }
.cloud-w[data-size="4"] { font-size: 1.25rem; font-weight: 600; }
.cloud-w[data-size="5"] { font-size: 1.5rem; font-weight: 700; }
.cloud-w[data-size="6"] { font-size: 1.875rem; font-weight: 700; }

.meet-group + .meet-group { margin-top: var(--space-6); }
.meet-group h4 { font-size: 1rem; margin-bottom: var(--space-3); }
.kv-wrap { border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.kv { width: 100%; }
.kv th { width: 35%; vertical-align: top; font-weight: 600; font-size: 0.9375rem; }
.kv td { overflow-wrap: anywhere; vertical-align: top; line-height: 1.6; padding-top: var(--space-5); }
.kv td > .chips, .kv td > .samples { margin-top: var(--space-3); }
@supports selector(:has(a)) { .kv td:has(> .chips) > .pill { margin-left: var(--space-1); } }
.kv tbody tr:last-child th, .kv tbody tr:last-child td { border-bottom: 0; }
.tip summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; }
.tip summary::-webkit-details-marker { display: none; }
.tip-ico { width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--ink-2); color: var(--ink-2); display: grid; place-items: center; font-size: 0.75rem; flex: none; }
.tip[open] .tip-ico { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
p.tip-text { color: var(--ink-2); font-weight: 400; padding-bottom: var(--space-3); }
.samples { display: grid; gap: var(--space-1); margin-top: var(--space-2); font-size: 0.875rem; color: var(--ink-2); overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .kv, .kv tbody, .kv tr, .kv th, .kv td { display: block; width: 100%; }
  .kv th { border-bottom: 0; padding: 14px var(--space-4) 0; }
  .kv td { padding: var(--space-2) var(--space-4) 14px; }
}

.panels { display: grid; gap: 20px; }
.panel-card { --tone: var(--info); --tone-bg: var(--info-bg); background: var(--tone-bg); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line)); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); min-width: 0; }
.panel-card h3 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); font-size: 1.125rem; letter-spacing: -0.01em; margin-bottom: var(--space-3); }
.panel-card h3::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--tone); }
.tone-bad { --tone: var(--bad); --tone-bg: var(--bad-bg); }
.tone-warn { --tone: var(--warn); --tone-bg: var(--warn-bg); }
.tone-info { --tone: var(--info); --tone-bg: var(--info-bg); }
.tone-good { --tone: var(--good); --tone-bg: var(--good-bg); }
.issue-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.issue-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); overflow-wrap: anywhere; }
.issue-sub { color: var(--ink-2); font-size: 0.9375rem; flex-basis: 100%; }
.issue-row .issue-sub { flex-basis: auto; }
.issue-2 .issue-sub { flex-basis: 100%; }
.diff-sec h4 { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9375rem; margin: var(--space-5) 0 var(--space-2); }

.tiles-3 { grid-template-columns: minmax(0, 1fr); }
.tiles-3 .tile { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 20px; }
.tiles-3 .tile-n { margin-bottom: 0; }
@media (min-width: 560px) {
  .tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles-3 .tile { display: block; padding: var(--space-5); }
  .tiles-3 .tile-n { margin-bottom: 6px; }
}
.tile-good { background: var(--good-bg); }
.tile-warn { background: var(--warn-bg); }
.tile-bad { background: var(--bad-bg); }
.tile-info { background: var(--info-bg); }
.tile-info .tile-n { color: var(--info); }
.tile-l { overflow-wrap: anywhere; }
.took { margin-top: var(--space-2); font-size: 0.9375rem; }
.sample-note { margin-bottom: 16px; }

.dens { display: grid; grid-template-columns: auto minmax(48px, 80px); align-items: center; justify-content: end; gap: var(--space-3); }
.dens-n { text-align: right; }
.bar-accent i { background: var(--accent); }
.found { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--info-bg); color: var(--info); font-size: 0.8125rem; font-weight: 600; }