:root { --ink:#20241f; --muted:#687068; --paper:#f8f6ef; --green:#195c45; --mint:#cce8c9; --yellow:#f5cd58; --line:#d9ddd2; --red:#a64336; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:radial-gradient(circle at 14% 10%, #e7f1df 0 12%, transparent 35%), var(--paper); font-family:"Noto Sans JP", sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(#bfc8b9 1px, transparent 1px),linear-gradient(90deg,#bfc8b9 1px,transparent 1px); background-size:30px 30px; mask-image:linear-gradient(140deg,#0000 25%,#000 100%); }
.shell { position:relative; width:min(800px, calc(100% - 32px)); margin:0 auto; min-height:100vh; display:grid; align-items:center; }
.screen { width:100%; animation:enter .4s ease-out; }.hidden { display:none!important; }
.eyebrow { color:var(--green); font:700 12px/1 "DM Mono",monospace; letter-spacing:.16em; }.start-screen { max-width:680px; padding:60px 0; }
.hero-mark { width:64px; height:64px; display:grid; place-items:center; margin:25px 0; border-radius:20px; background:var(--yellow); font:700 43px/1 Outfit,sans-serif; transform:rotate(-8deg); box-shadow:7px 7px 0 var(--ink); }
h1 { margin:0; font:700 clamp(38px,7vw,68px)/1.15 Outfit,"Noto Sans JP",sans-serif; letter-spacing:-.04em; } h1 em { color:var(--green); font-style:normal; }
.lead { color:var(--muted); font-size:16px; line-height:1.9; margin:25px 0 0; }.route { display:flex; align-items:center; gap:11px; margin:36px 0 28px; color:var(--muted); font-size:13px; font-weight:600; }.route i { width:28px; height:1px; background:var(--line); }
.time-selector { width:min(100%, 470px); margin:0 0 28px; padding:0; border:0; }.time-selector legend { margin-bottom:10px; color:var(--muted); font-size:13px; font-weight:700; }.time-options { display:flex; flex-wrap:wrap; gap:8px; }.time-options label { position:relative; cursor:pointer; }.time-options input { position:absolute; opacity:0; }.time-options span { display:block; min-width:67px; padding:9px 11px; border:1.5px solid var(--line); border-radius:8px; background:#fffef9; color:var(--muted); text-align:center; font:700 13px "Noto Sans JP",sans-serif; transition:background .15s,border-color .15s,color .15s; }.time-options input:checked + span { border-color:var(--green); background:var(--mint); color:var(--green); }.time-options input:focus-visible + span { outline:3px solid #8bb9a4; outline-offset:2px; }
button { border:0; font:700 15px "Noto Sans JP",sans-serif; cursor:pointer; transition:transform .15s, box-shadow .15s; }.primary-button { color:white; background:var(--green); padding:17px 21px; border-radius:12px; box-shadow:4px 4px 0 #123f30; }.primary-button span,.next-button span { font-size:20px; margin-left:14px; }.primary-button:hover,.next-button:hover { transform:translate(2px,2px); box-shadow:1px 1px 0 #123f30; }.hint { color:#8b9189; font-size:12px; margin-top:19px; }
.quiz-screen { padding:46px 0; }.quiz-header { display:grid; grid-template-columns:132px 1fr 55px 82px; gap:20px; align-items:end; }.quiz-header strong { display:block; margin-top:5px; font:600 22px Outfit,sans-serif; }.progress-track { height:5px; border-radius:10px; background:#dfe4da; margin-bottom:5px; overflow:hidden; }.progress-bar { height:100%; width:0; background:var(--green); transition:width .35s; }.score-pill { text-align:right; color:var(--muted); font-size:12px; }.score-pill b { display:block; color:var(--green); font:700 22px Outfit,sans-serif; }.timer { min-width:82px; padding:7px 9px; text-align:right; border:1px solid var(--line); border-radius:8px; background:#fffef9; color:var(--muted); font:700 10px "DM Mono",monospace; letter-spacing:.06em; }.timer b { margin-left:5px; color:var(--green); font:700 22px/1 Outfit,sans-serif; letter-spacing:0; }.timer small { font:600 10px "Noto Sans JP",sans-serif; }.timer.unlimited b { font-size:16px; }.timer.urgent { border-color:#e2a69f; background:#fff0ed; }.timer.urgent b { color:var(--red); }
.question-intro { margin-top:75px; }.question-intro span { display:inline-block; padding:5px 9px; border-radius:5px; background:var(--mint); color:var(--green); font:700 11px "DM Mono",monospace; }.question-intro p { margin:14px 0 0; font-weight:600; }.expression { margin:20px 0 8px; font:600 clamp(30px,5vw,47px)/1.35 Outfit,"Noto Sans JP",sans-serif; letter-spacing:.02em; }.math sup { font-size:.55em; vertical-align:super; }.reverse-note { margin:0 0 25px; color:var(--muted); font-size:13px; }
.choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.choice { min-height:76px; padding:13px 17px; display:flex; align-items:center; gap:13px; text-align:left; color:var(--ink); background:#fffefa; border:1.5px solid var(--line); border-radius:12px; }.choice:hover:not(:disabled) { border-color:var(--green); background:#f2f8ef; transform:translateY(-2px); }.choice:disabled { cursor:default; }.choice-key { flex:0 0 28px; height:28px; display:grid; place-items:center; border-radius:50%; background:#eef0ea; color:var(--muted); font:700 12px "DM Mono",monospace; }.choice-math { font:600 20px Outfit,"Noto Sans JP",sans-serif; }.choice.correct { border-color:var(--green); background:#e1f1dd; }.choice.correct .choice-key { color:#fff; background:var(--green); }.choice.wrong { border-color:#c9776d; background:#fae8e3; }.choice.wrong .choice-key { color:#fff; background:var(--red); }
.feedback { margin-top:24px; padding:17px 18px; display:grid; grid-template-columns:42px 1fr auto; gap:13px; align-items:center; background:white; border:1px solid var(--line); border-radius:14px; }.feedback-icon { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font:700 21px Outfit,sans-serif; }.feedback.correct-feedback { border-color:#a9cfaa; }.feedback.correct-feedback .feedback-icon { color:white; background:var(--green); }.feedback.wrong-feedback { border-color:#e4b0a7; }.feedback.wrong-feedback .feedback-icon { color:white; background:var(--red); }.feedback h2 { margin:0 0 4px; font-size:15px; }.feedback p { margin:0; color:var(--muted); font-size:13px; line-height:1.55; }.next-button { white-space:nowrap; padding:11px 14px; color:white; background:var(--green); border-radius:9px; box-shadow:3px 3px 0 #123f30; }
.result-screen { max-width:580px; text-align:center; padding:50px 0; }.result-ring { width:154px; height:154px; display:flex; align-items:baseline; justify-content:center; padding-top:47px; margin:27px auto; border:12px solid var(--yellow); border-radius:50%; background:#fffef8; box-shadow:6px 6px 0 var(--ink); }.result-ring span { font:700 58px/.8 Outfit,sans-serif; }.result-ring small { margin-left:5px; font:600 17px Outfit,sans-serif; color:var(--muted); }.result-screen h1 { font-size:37px; }.result-stats { display:flex; justify-content:center; gap:1px; margin:30px auto; background:var(--line); border-radius:12px; overflow:hidden; max-width:460px; }.result-stats div { flex:1; padding:13px 8px; background:#fffef9; }.result-stats span { display:block; color:var(--muted); font-size:11px; }.result-stats b { display:block; white-space:nowrap; font:700 20px Outfit,sans-serif; }
@keyframes enter { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:translateY(0) } }
@media (max-width:560px) { .time-options { gap:7px; }.time-options span { min-width:62px; padding:9px 8px; }.quiz-header { grid-template-columns:1fr 1fr; gap:12px; }.progress-track { grid-column:1 / -1; grid-row:2; }.score-pill { grid-column:1; grid-row:3; text-align:left; }.timer { grid-column:2; grid-row:3; justify-self:end; }.question-intro { margin-top:45px; }.choices { grid-template-columns:1fr; }.feedback { grid-template-columns:38px 1fr; }.next-button { grid-column:1 / -1; }.shell { width:min(100% - 28px,800px); }.result-stats b { font-size:17px; } }