:root{color-scheme:dark;--ink:#131126;--panel:#211b40;--purple:#7655d9;--pink:#ff668f;--yellow:#ffdd68;--mint:#79edc6}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}body{color:#fff;background:radial-gradient(circle at 20% 10%,#3b2365 0,transparent 35%),radial-gradient(circle at 80% 90%,#17465b 0,transparent 30%),#0d0b1d}button,a{font:inherit}a{color:inherit}
header{display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:auto;padding:22px 24px;color:#d8d1ed;font:700 12px monospace;letter-spacing:.12em}header a{text-decoration:none}main{display:grid;place-items:center;min-height:calc(100vh - 130px);padding:20px 18px 60px}.panel{width:min(720px,100%);text-align:center}.panel[hidden]{display:none}.eyebrow{margin:0 0 12px;color:var(--mint);font:800 12px monospace;letter-spacing:.18em}
.start h1,.result>h1{margin:0;font:900 clamp(52px,11vw,94px)/.9 Arial,sans-serif;letter-spacing:-.07em;text-shadow:5px 5px 0 #000}.start h1 em{color:var(--yellow);font-style:normal}.mascot{display:grid;place-items:center;width:112px;height:112px;margin:30px auto 20px;border:4px solid #fff;border-radius:36% 64% 58% 42%;background:linear-gradient(145deg,var(--pink),var(--purple));font:900 70px/1 monospace;transform:rotate(-5deg);box-shadow:8px 8px 0 #000}.lead{font-size:clamp(20px,4vw,29px);font-weight:900}.note{color:#c8c0d9;line-height:1.7}
.primary,.share{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 24px;border:2px solid #fff;border-radius:8px;background:var(--purple);color:#fff;font-weight:900;text-decoration:none;box-shadow:5px 5px 0 #000;cursor:pointer}.primary:hover,.share:hover{filter:brightness(1.15)}.status{display:flex;justify-content:space-between;margin-bottom:8px;color:#d8d1e8;font:800 13px monospace}.progress{height:8px;margin-bottom:34px;border:1px solid #746b96;background:#0b0918}.progress span{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--pink),var(--yellow));transition:width .25s}.category{display:inline-block;margin:0 0 18px;padding:6px 10px;border:1px solid var(--mint);border-radius:99px;color:var(--mint);font:700 11px monospace;letter-spacing:.1em}.quiz h2{min-height:3em;margin:0 0 28px;font-size:clamp(23px,5vw,35px);line-height:1.5}.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}.choice{min-height:76px;padding:14px;border:2px solid #70668d;border-radius:9px;background:#211b40;color:#fff;font-weight:800;line-height:1.5;cursor:pointer;box-shadow:4px 4px 0 #000}.choice:hover{border-color:var(--yellow)}.choice:disabled{cursor:default;opacity:.72}.choice.correct{border-color:var(--mint);background:#174839}.choice.wrong{border-color:var(--pink);background:#55203a}.feedback{margin-top:22px;padding:22px;border:1px solid #766d92;border-radius:10px;background:#17132ce8}.feedback[hidden]{display:none}.feedback strong{display:block;color:var(--yellow);font-size:25px}.feedback p{margin:12px auto 20px;color:#ddd6e8;line-height:1.8}.result-score{display:flex;align-items:baseline;justify-content:center;gap:18px;margin:35px auto}.result-score strong{font:900 clamp(46px,10vw,76px) monospace;color:var(--yellow)}.result-score span{font:800 24px monospace;color:var(--mint)}.result h2{font-size:clamp(25px,5vw,38px)}.result>p:not(.eyebrow){color:#d8d1e4;line-height:1.8}.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:28px}.share{background:#111}footer{padding:18px 20px 30px;text-align:center;color:#9d94af;font-size:12px}
button:focus-visible,a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}@media(max-width:600px){header{padding:16px}.choices{grid-template-columns:1fr}.choice{min-height:62px}.quiz h2{min-height:0}.result-score{display:block}.result-score span{display:block;margin-top:8px}}