:root { --bg:#fff; --fg:#111827; --muted:#4b5563; --line:#d1d5db; --soft:#f3f4f6; --accent:#1d4ed8; --accent-soft:#e8efff;
  --ok:#166534; --ok-soft:#e7f6ec; --warn:#92400e; --warn-soft:#fff4d6; --bad:#991b1b; --bad-soft:#fdecec; --radius:14px; }
* { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body { margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--fg); background:var(--bg); line-height:1.5; padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
h1 { font-size:1.6rem; margin:.4rem 0 .6rem; line-height:1.25 } h2 { font-size:1.25rem; margin:1.4rem 0 .5rem } h3 { font-size:1.05rem; margin:.2rem 0 .3rem }
p { margin:.4rem 0 } a { color:var(--accent) } .muted { color:var(--muted) } small { font-size:.85rem }
.skip { position:absolute; left:-999px } .skip:focus { left:8px; top:8px; background:#fff; padding:8px; z-index:9 }
.topbar { position:sticky; top:0; z-index:5; background:#fff; }
.product-name { margin:0; padding: calc(.4rem + env(safe-area-inset-top)) 1rem .15rem; text-align:center; font-weight:750; font-size:1rem; line-height:1.25; }
.notice { background:#fff8e1; border-bottom:2px solid #f2c94c; padding:.5rem 1rem; font-size:.9rem; text-align:center }
.demo-flag { background:#111827; color:#fff; text-align:center; font-weight:700; letter-spacing:.04em; padding:.3rem; font-size:.85rem }
main { max-width: 960px; margin:0 auto; padding: .75rem 1rem 1.5rem; outline:none }
.tabs { position:fixed; bottom:0; left:0; right:0; display:flex; background:#fff; border-top:1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index:5 }
.tabs a { flex:1; min-height:68px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-decoration:none; color:var(--muted); font-size:.85rem; font-weight:600 }
.tabs a .ico { font-size:1.4rem; line-height:1 } .tabs a[aria-current="page"] { color:var(--accent) } .tabs a[aria-current="page"] .ico { transform: scale(1.1) }
.card { border:1px solid var(--line); border-radius:var(--radius); padding:1rem; margin:.75rem 0; background:#fff }
.grid2 { display:grid; grid-template-columns: 1fr; gap:.75rem } @media (min-width: 720px) { .grid2 { grid-template-columns: 1fr 1fr } }
.stats { display:grid; grid-template-columns: repeat(2, 1fr); gap:.6rem } @media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr) } }
.stat { background:var(--soft); border-radius:12px; padding:.7rem .8rem } .stat b { display:block; font-size:1.6rem; line-height:1.2 } .stat span { color:var(--muted); font-size:.85rem }
button, .btn { font: inherit; font-weight:650; min-height:56px; padding:.7rem 1.1rem; border-radius:12px; border:2px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; text-decoration:none }
button.secondary, .btn.secondary { background:#fff; color:var(--accent) } button.ghost { background:transparent; border-color:var(--line); color:var(--fg) }
button.danger { background:#fff; color:var(--bad); border-color:var(--bad) } button:disabled { opacity:.5; cursor:not-allowed }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 4px solid #f59e0b; outline-offset:2px }
.full { width:100% } .row { display:flex; gap:.6rem; flex-wrap:wrap } .row > * { flex:1 1 200px }
label { font-weight:650; display:block; margin:.8rem 0 .3rem } .hint { font-weight:400; color:var(--muted); font-size:.9rem; display:block }
input, select { font:inherit; width:100%; min-height:56px; padding:.6rem .8rem; border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--fg) }
fieldset { border:1px solid var(--line); border-radius:var(--radius); margin:.9rem 0; padding:.6rem .9rem 1rem }
legend { font-weight:700; font-size:1.05rem; padding:0 .3rem }
.opt { display:flex; align-items:center; gap:.8rem; min-height:56px; padding:.5rem .8rem; border:2px solid var(--line); border-radius:12px; margin:.4rem 0; font-weight:500; cursor:pointer }
.opt input { width:28px; min-height:28px; height:28px; flex:0 0 28px; accent-color: var(--accent) }
.opt:has(input:checked) { border-color:var(--accent); background:var(--accent-soft) } .opt .sc { margin-left:auto; font-weight:700; color:var(--muted); white-space:nowrap }
.list { list-style:none; padding:0; margin:0 } .list li { border-bottom:1px solid var(--line); padding:.6rem 0 }
.list summary { flex-wrap: wrap; gap: .25rem .5rem }
.tile { display:flex; align-items:center; gap:.8rem; min-height:72px; padding:.8rem 1rem; border:2px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--fg); margin:.6rem 0 }
.tile b { display:block } .tile span { color:var(--muted); font-size:.9rem } .tile .go { margin-left:auto; font-size:1.4rem; color:var(--accent) }
.pill { display:inline-block; border-radius:999px; padding:.15rem .65rem; font-size:.85rem; font-weight:700; border:1px solid transparent }
.st-fits { background:var(--ok-soft); color:var(--ok) } .st-pending, .st-unknown, .st-edge { background:var(--soft); color:#374151; border-color:var(--line) } .st-no { background:#fff; color:var(--muted); border-color:var(--line) }
.alert { border-left:6px solid var(--warn); background:var(--warn-soft); padding:.7rem .9rem; border-radius:10px; margin:.6rem 0 }
.alert.urgent { border-color:var(--bad); background:var(--bad-soft) } .alert.info { border-color:var(--accent); background:var(--accent-soft) }
.crit { list-style:none; padding:0; margin:.4rem 0 } .crit li { display:flex; gap:.6rem; padding:.35rem 0; border-top:1px dashed var(--line) }
.crit .m { width:1.6rem; flex:0 0 1.6rem; font-weight:800; text-align:center } .m.pass { color:var(--ok) } .m.fail { color:var(--bad) } .m.unknown, .m.pending, .m.soft { color:var(--muted) }
.quote { font-size:.85rem; color:var(--muted); font-style:italic }
details { border:1px solid var(--line); border-radius:12px; padding:.2rem .8rem; margin:.6rem 0 } summary { min-height:48px; display:flex; align-items:center; cursor:pointer; font-weight:650 }
.chart { margin:.3rem 0 } .chart svg { width:100%; max-width:760px; height:auto; display:block }
.grid { stroke:#e5e7eb } .axis { font-size:12.5px; fill:#4b5563 } .ref { stroke:#b45309; stroke-dasharray:6 5; stroke-width:1.5 } .reflabel { font-size:11.5px; fill:#92400e }
.line { stroke-width:3 } .line.s0 { stroke:#1d4ed8 } .line.s1 { stroke:#be185d } .dot.s0 { fill:#1d4ed8 } .dot.s1 { fill:#be185d } .proj { stroke:#1d4ed8; stroke-dasharray:4 6; stroke-width:2.5; opacity:.7 }
.legend { display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--muted) } .sw { display:inline-block; width:18px; height:4px; margin-right:6px; vertical-align:middle; background:#1d4ed8 } .sw.s1 { background:#be185d } .sw.proj { background: repeating-linear-gradient(90deg,#1d4ed8 0 4px, transparent 4px 8px) }
.tap-target { width:100%; min-height:min(56vh, 420px); border-radius:24px; font-size:1.6rem; touch-action: manipulation; user-select:none; -webkit-user-select:none }
.tap-target.live { background:#0f766e; border-color:#0f766e }
.big-num { font-size:2.4rem; font-weight:800; text-align:center; margin:.4rem 0 }
.passage { font-size:1.3rem; line-height:1.7; background:var(--soft); padding:1rem; border-radius:12px }
.tag { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b21a8; background:#f3e8ff; border-radius:6px; padding:.1rem .4rem; vertical-align:middle }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0) }
.stack > * + * { margin-top:.6rem } .center { text-align:center }
@media (min-width: 1024px) { html { font-size: 18px } main { padding-top: 1.25rem } }

.page-foot { text-align:center; margin: 1.6rem 0 .4rem }
.screen-end { display:flex; flex-wrap:wrap; justify-content:center; gap:.15rem .35rem; text-align:center; margin:1.5rem 0 .2rem }
.about-link, .about-back, .privacy-link, .privacy-back, .how-link, .how-back { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:.35rem .9rem; font-weight:650; text-underline-offset:.18em }
u.privacy-underline { text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }
.about-photo { margin:1.35rem auto 1.35rem; width:min(176px, 52vw); }
.about-photo img { display:block; width:100%; aspect-ratio:3 / 4; height:auto; object-fit:cover; object-position:center 36%; margin:0 auto; border-radius:50%; border:4px solid #fff; box-shadow:0 4px 12px rgba(17,24,39,.12); }
.about-photo figcaption { margin:1.15rem 0 0; text-align:center; font-family:Georgia, "Palatino Linotype", Palatino, serif; font-size:1.2rem; font-weight:500; letter-spacing:.02em; }
@media (min-width: 900px) and (max-height: 900px) {
  .about-photo { width:148px; margin-top:1.15rem; }
}
@media (min-width: 900px) and (max-height: 780px) {
  .about-photo { width:116px; }
}
.home-intro { margin: .35rem 0 .6rem; }
.home-intro p { margin: .75rem 0; font-weight: 400; }
.disclaimer-box { background:#fff8e1; border:2px solid #f2c94c; border-radius:14px; padding:1rem; margin:.75rem 0 }
.confirm-site { margin:.4rem 0 }
.raw-crit { white-space:pre-wrap; font-size:.85rem; line-height:1.45; background:var(--soft); padding:.8rem; border-radius:10px; overflow:auto; max-height:320px }
.disclaimer-note { margin-top:.6rem }
.home-screen-help summary { min-height:56px; justify-content:space-between; list-style:none }
.home-screen-help summary::-webkit-details-marker { display:none }
.home-screen-help summary::after { content:""; width:.55rem; height:.55rem; margin-left:.8rem; border-right:3px solid currentColor; border-bottom:3px solid currentColor; transform:rotate(45deg); flex:0 0 auto }
.home-screen-help[open] summary::after { transform:rotate(-135deg); margin-top:.35rem }
.home-screen-help .help-body { padding:0 .15rem .85rem }
.home-screen-help h2 { font-size:1.15rem; margin:.9rem 0 .3rem }
.home-screen-help h3 { font-size:1.02rem; margin:.7rem 0 .2rem }
.home-screen-help ol { margin:.2rem 0 .7rem; padding-left:1.35rem }
.home-screen-help li { margin:.4rem 0 }