:root{
  --bg:#f6f5fb; --card:#fff; --ink:#26232e; --sub:#5c576e;
  --accent:#6a5acd; --accent2:#8f7ff0; --line:#ddd8ee; --good:#2e7d52; --warn:#a15c00;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
.site-header{padding:28px 16px 8px;max-width:880px;margin:0 auto;text-align:center}
.site-header h1{margin:0 0 6px;font-size:1.7rem}
.tagline{color:var(--sub);margin:0 0 12px}
.notice{background:#fff7e6;border:1px solid #f0d9a0;border-radius:10px;padding:10px 14px;font-size:.88rem;text-align:left}
main{max-width:880px;margin:0 auto;padding:16px}
.view.hidden{display:none}
.card-list{display:grid;gap:14px}
@media(min-width:680px){.card-list{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h2{margin-top:0;font-size:1.15rem}
.small{font-size:.82rem;color:var(--sub)}
.info-box{margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.info-box h3{margin-top:0}
.btn{appearance:none;border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:999px;padding:10px 20px;font-size:1rem;cursor:pointer}
.btn:hover{background:var(--accent2)}
.btn.ghost{background:transparent;color:var(--accent);border-color:var(--line);padding:6px 14px;font-size:.9rem}
.btn.secondary{background:#fff;color:var(--accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.progress{color:var(--sub);font-size:.9rem}
.qbox{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.qbox h3{margin-top:0}
.options{display:grid;gap:10px;margin-top:12px}
.option{display:block;width:100%;text-align:left;background:#fbfaff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:1rem;cursor:pointer}
.option:hover{border-color:var(--accent)}
.option.selected{background:#ece8ff;border-color:var(--accent)}
.nav-row{display:flex;justify-content:space-between;margin-top:16px;gap:10px}
.result-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px}
.result-card h2{margin-top:0}
.rank{font-size:1.6rem;font-weight:700;color:var(--accent)}
.explain{border-top:1px dashed var(--line);margin-top:14px;padding-top:10px}
.explain li{margin-bottom:10px}
.correct{color:var(--good);font-weight:700}
.wrong{color:#b03030;font-weight:700}
.share-box{margin-top:16px;background:#fbfaff;border:1px solid var(--line);border-radius:10px;padding:12px}
.share-box textarea{width:100%;min-height:84px;border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit}
.copy-msg{font-size:.85rem;color:var(--good)}
.person-label{font-weight:700;color:var(--accent);margin-top:18px}
.site-footer{max-width:880px;margin:0 auto;padding:8px 16px 32px;color:var(--sub);font-size:.82rem}
table.compat{border-collapse:collapse;margin-top:8px}
table.compat td,table.compat th{border:1px solid var(--line);padding:6px 10px;font-size:.9rem}
.report-card{margin-top:18px}
.report-section{border-top:1px dashed var(--line);margin-top:14px;padding-top:10px}
.report-section h4{margin:12px 0 4px;color:var(--accent)}
.locked-note{color:var(--warn);background:#fff7e6;border:1px solid #f0d9a0;border-radius:8px;padding:8px 12px;font-size:.9rem}
.teaser-note{font-size:.95rem}
.teaser-heads{margin:4px 0 10px;padding-left:1.3em;color:var(--sub);font-size:.88rem}
.teaser-heads li{margin-bottom:2px}
.buy-note{background:#fff7e6;border:1px solid #f0d9a0;border-radius:8px;padding:8px 12px;font-size:.9rem}
.unlock-box{margin-top:16px;background:#fbfaff;border:1px solid var(--line);border-radius:10px;padding:12px}
.code-input{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;margin-right:8px;max-width:220px;width:60%}
.timer-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.timer{font-weight:700;font-size:1.05rem;color:var(--accent);font-variant-numeric:tabular-nums}
.timer-warn{color:#b03030}
.pbar{background:#ece8ff;border-radius:999px;height:10px;overflow:hidden;margin-bottom:12px}
.pbar-fill{background:var(--accent);height:100%;transition:width .3s}
.matrix-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:420px;margin:0 auto 16px}
.matrix-cell{background:#fbfaff;border:1px solid var(--line);border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:6px}
.matrix-cell svg{width:100%;height:100%}
.matrix-missing{font-size:2rem;font-weight:700;color:var(--accent);background:#ece8ff;border-style:dashed}
.matrix-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:560px;margin:0 auto}
@media(max-width:520px){.matrix-options{grid-template-columns:repeat(2,1fr)}}
.matrix-option{position:relative;background:#fbfaff;border:1px solid var(--line);border-radius:10px;padding:6px;cursor:pointer;aspect-ratio:1}
.matrix-option:hover{border-color:var(--accent)}
.matrix-option.selected{background:#ece8ff;border-color:var(--accent)}
.matrix-option svg{width:100%;height:100%}
.opt-num{position:absolute;top:2px;left:6px;font-size:.75rem;font-weight:700;color:var(--accent)}
.domain-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.domain-name{flex:0 0 6.5em;font-weight:700}
.domain-bar{flex:1;background:#ece8ff;border-radius:999px;height:12px;overflow:hidden}
.domain-fill{display:block;background:var(--accent);height:100%}
.domain-val{flex:0 0 8em;font-size:.9rem;color:var(--sub)}
.cert-card{margin-top:18px}
.cert-out{margin-top:14px;display:grid;gap:10px;justify-items:start}
.cert-canvas{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line)}