:root{--ink:#24403a;--soft:#5f7a73;--line:#cfe6dc;--card:#ffffff;--accent:#1fa37a;--accent2:#7ad3b0;color-scheme:light}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;color:var(--ink);font:15px/1.8 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;background:linear-gradient(160deg,#e8f7ef,#f4fbf7 40%,#eaf4fb)}
.shell{max-width:560px;margin:auto;padding:14px 14px 40px}
a{color:#16805f}button{font:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:3px solid #7ad3b0;outline-offset:2px}
.top{display:flex;align-items:center;justify-content:space-between;padding:6px 2px}.top a{font-size:13px;text-decoration:none}.top b{font-size:15px;letter-spacing:.08em;color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px 18px;margin-top:12px;box-shadow:0 10px 24px #1b6a5114}
.intro{text-align:center}.intro h1{margin:4px 0 2px;font-size:30px;line-height:1.35}.intro h1 small{display:block;font-size:13px;letter-spacing:.2em;color:var(--accent)}
.intro p{margin:8px 0;color:var(--soft)}
.parade{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:14px 0}.parade svg{width:100%;height:auto;display:block}
.start{display:block;width:100%;border:0;border-radius:16px;padding:15px;font-size:18px;font-weight:900;color:#fff;background:linear-gradient(90deg,#1fa37a,#35b6a0);box-shadow:0 6px 0 #147a5b;letter-spacing:.1em}
.start:active{transform:translateY(3px);box-shadow:0 3px 0 #147a5b}
.q .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--soft);font-weight:700}
.bar{height:8px;border-radius:6px;background:#e3f1ea;margin:8px 0 18px;overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#7ad3b0,#1fa37a);transition:width .3s}
.q h2{font-size:21px;line-height:1.6;margin:0 0 18px;min-height:3.2em;text-align:center}
.q .choices{display:grid;gap:10px}
.q .choices button{display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:#fbfefd;border-radius:14px;padding:12px 14px;font-weight:700;color:var(--ink);text-align:left;transition:transform .1s,border-color .1s}
.q .choices button:hover{border-color:#7ad3b0}.q .choices button:active{transform:scale(.98)}
.q .choices button i{flex:none;width:18px;height:18px;border-radius:50%;border:3px solid currentColor}
.q .choices button:nth-child(1) i{background:#1fa37a;border-color:#1fa37a}.q .choices button:nth-child(2) i{border-color:#1fa37a}.q .choices button:nth-child(3) i{border-color:#e39a4a}.q .choices button:nth-child(4) i{background:#e39a4a;border-color:#e39a4a}
.q .back{margin-top:14px;border:0;background:none;color:var(--soft);font-size:13px}
.slide{animation:slide .25s ease-out}@keyframes slide{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.res{text-align:center}.res .art{width:200px;height:200px;margin:4px auto 0}.res .art svg{width:100%;height:100%;filter:drop-shadow(0 8px 14px #1b6a5126)}
.res .lead{margin:0;color:var(--soft);font-weight:700}.res h2{margin:4px 0 0;font-size:28px}.res .catch{margin:2px 0 0;color:var(--accent);font-weight:800}
.pop .art{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.axes{display:grid;gap:10px;margin-top:4px}.axis{display:grid;grid-template-columns:5.2em 1fr 5.2em;align-items:center;gap:8px;font-size:13px;font-weight:700}
.axis span:first-child{text-align:right}.axis .track{position:relative;height:14px;border-radius:8px;background:#eef6f2}.axis .track i{position:absolute;top:0;bottom:0;border-radius:8px;background:linear-gradient(90deg,#7ad3b0,#1fa37a);transition:all .7s}
.axis .track b{position:absolute;top:-20px;font-size:11px;color:var(--accent);transform:translateX(-50%)}.axis .on{color:var(--accent)}
.card h3{margin:0 0 6px;font-size:16px;color:var(--accent)}.card p{margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chips span{background:#e8f7ef;border-radius:20px;padding:3px 12px;font-weight:700;font-size:14px}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pair{border:1px solid var(--line);border-radius:16px;padding:10px;text-align:center;background:#fbfefd;color:var(--ink)}.pair svg{width:84px;height:84px}.pair small{display:block;color:var(--soft);font-weight:700}.pair b{display:block}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.actions button{border:2px solid var(--accent);background:#fff;color:var(--accent);border-radius:14px;padding:11px;font-weight:800}.actions #share{background:var(--accent);color:#fff}
.zukan{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.zukan button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:6px 4px;color:var(--ink);font-size:12px;font-weight:700}.zukan svg{width:100%;height:auto;display:block;border-radius:12px}.zukan .me{border-color:var(--accent);box-shadow:0 0 0 2px #7ad3b066}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#24403a;color:#fff;border-radius:20px;padding:8px 16px;font-size:14px;z-index:9}
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin-top:22px;font-size:13px}
@media(max-width:420px){.parade{grid-template-columns:repeat(4,1fr)}.q h2{font-size:19px}.axis{grid-template-columns:4.6em 1fr 4.6em;font-size:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}