:root { color-scheme:light; --ink:#182b35; --sub:#49606b; --navy:#173c4b; --teal:#0b6957; --line:#d9e6e9; --paper:#f2f7f8 }
* { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 system-ui,"Yu Gothic",Meiryo,sans-serif }
.wrap { width:min(1080px,calc(100% - 32px)); margin:auto }
.mast { background:var(--navy); color:white; padding:15px 0 }
.bar,.mast nav { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px }
.bar { justify-content:space-between }
.mast a { color:white }
.brand { text-decoration:none; font-weight:800 }
.brand span { display:inline-grid; place-items:center; width:35px; height:35px; margin-right:5px; border-radius:50%; background:#ccefe6; color:#124b40 }
a { color:var(--teal); text-underline-offset:3px }
a:focus-visible,summary:focus-visible { outline:3px solid #b86119; outline-offset:4px }
.intro { padding:30px 0 23px }
p,h1,h2 { margin:0 }
h1 { font-size:clamp(1.75rem,5vw,2.8rem); line-height:1.25; margin:5px 0 9px }
h2 { font-size:1.3rem; margin:3px 0 10px }
.kicker { color:var(--teal); font-weight:800; font-size:.79rem; letter-spacing:.09em }
.grid { display:grid; grid-template-columns:1.15fr 1fr; gap:16px }
.card { padding:21px; background:white; border:1px solid var(--line); border-radius:17px; min-width:0 }
.prediction { border-top:4px solid var(--teal) }
.section,.notice { margin-top:16px }
.notice { background:#fff3de; padding:12px; border-radius:8px; margin-bottom:16px }
.empty,.muted,footer { color:var(--sub) }
.empty { background:#f3f7f7; padding:12px; border-radius:8px }
.balls { display:flex; flex-wrap:wrap; gap:6px; padding:0; margin:10px 0; list-style:none }
.balls li { display:grid; place-items:center; width:36px; height:36px; background:#e1f3ed; border-radius:50%; color:#17443c; font-weight:750; font-variant-numeric:tabular-nums }
.balls .bonus { background:#fff0d5; color:#713e17 }
.ticket { border-bottom:1px solid var(--line); padding:8px 0; font-size:.92rem }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:14px 0 }
.metrics div { background:#eff6f6; border-radius:10px; padding:10px 12px }
.metrics span,.metrics strong { display:block }
.metrics span { font-size:.85rem }
.metrics strong { font-size:1.25rem; font-variant-numeric:tabular-nums }
details { margin-top:10px; border:1px solid var(--line); border-radius:9px; padding:9px 11px }
summary { cursor:pointer; font-weight:700; padding:4px 0 }
details p { margin-top:8px }
.evidence { list-style:none; display:flex; flex-wrap:wrap; gap:5px; margin:7px 0; padding:0 }
.evidence li { padding:3px 7px; border-radius:5px; background:#eff6f6 }
.pagination,footer { margin-top:14px }
footer { padding-bottom:28px; font-size:.85rem }
@media(max-width:680px) { .grid { grid-template-columns:1fr } .card { padding:15px } .metrics { grid-template-columns:1fr } }.checker { margin-top:18px; display:grid; gap:7px }
.checker input,.checker button { min-height:44px; border-radius:8px; font:inherit; padding:7px 10px }
.checker input { width:100%; border:1px solid #8299a3 }
.checker button { justify-self:start; background:var(--teal); color:white; border:0; cursor:pointer; font-weight:700 }