:root{--ink:#14203e;--accent:#2457ff;--line:#e4e9f4}
body{background:radial-gradient(ellipse at 95% 0%,#e8efff 0,transparent 45%),#f9fbff;color:var(--ink);grid-template-rows:72px minmax(0,1fr) 28px}
header{width:min(100%,640px);padding:0 24px}
.brand{display:flex;align-items:center;padding:0;border:0;background:none;line-height:1;border-radius:8px}
.brand img{display:block;width:132px;height:44px;object-fit:contain}
.exam-label{font-family:SnapshotSans,sans-serif;font-weight:700;color:#71809c;letter-spacing:.015em}
main{padding-top:16px;padding-bottom:20px}
.home{gap:44px}
.home h1{font-size:clamp(36px,8.8vw,50px);line-height:1.38;letter-spacing:-.06em;background:none;color:var(--ink);font-weight:800}
.home .actions{padding-bottom:28px}
.exam-switch{border:0;background:#eaf0fc;border-radius:16px;padding:5px;margin-bottom:28px;gap:3px}
.exam-switch button{border-radius:12px;padding:10px 20px;font-size:14px;color:#72819b;min-height:40px}
.exam-switch button.active{color:var(--accent);box-shadow:0 2px 6px #1738780a}
.primary{min-height:56px;border-radius:18px;background:linear-gradient(110deg,#2144ec,#2457ff 70%,#407aff);box-shadow:0 8px 24px #2457ff20;letter-spacing:0;font-size:17px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease}
.primary:hover{background:linear-gradient(110deg,#1c3edb,#204ff0 70%,#356cef);box-shadow:0 10px 28px #2457ff30}
.primary:active{transform:scale(.98)}
.muted,.meta,.pager{font-family:SnapshotSans,"Hiragino Kaku Gothic ProN",sans-serif;font-size:13px;font-weight:700;color:#7a879f}
.bar{height:5px;gap:4px;margin-top:14px}
.bar span{height:5px;background:#e5eaf5}
.bar span.done{background:var(--accent)}
.bar span.current{background:#9eb5ff}
.question{color:var(--ink);font-weight:700;line-height:1.5}
.options{gap:10px}
.option{border:1px solid var(--line);background:#fff;border-radius:18px;padding:14px 16px;gap:14px;min-height:54px;color:#223052;box-shadow:0 2px 3px #16295402}
.option:hover:not(:disabled){border-color:#b4c5ff;background:#f5f8ff}
.letter{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#f0f4fc;color:#7186b0;flex-shrink:0;font-family:SnapshotSans,sans-serif;font-size:12px}
.option.selected .letter{background:#2457ff;color:white}
.result-body{gap:20px}
.result-hero{border-radius:28px;background:linear-gradient(135deg,#2040c9 0%,#2457ff 65%,#4386ff 100%);padding:26px;box-shadow:0 12px 36px #2457ff1c;position:relative;isolation:isolate;overflow:hidden}
.result-hero:before{content:"";position:absolute;width:210px;height:210px;border:1px solid #ffffff16;border-radius:50%;right:-96px;top:-96px;z-index:-1;box-shadow:0 0 0 32px #ffffff04,0 0 0 64px #ffffff03}
.hero-top{font-family:SnapshotSans,sans-serif;font-weight:700;color:#dce7ff}
.result-title{font-weight:800;margin:22px 0 8px;font-size:22px}
.score{font-size:clamp(56px,12vw,74px);font-weight:800;line-height:1.1}
.hero-note{font-size:11px;color:#dce6ff;margin-top:14px}
.stats{gap:24px;padding:0 6px}
.stat b{font-family:SnapshotSans,sans-serif;font-weight:800;font-size:32px;color:var(--ink)}
.stat b small{color:#8590a4}
.percentile{background:white;border:1px solid var(--line);border-radius:20px;padding:16px 20px}
.rank-label,.rank-pending{color:#7a879f;font-size:12px}
.rank-number{color:#223052;margin-top:4px}
.rank-number b{color:var(--accent)}
.result-links .secondary{font-size:13px;font-weight:700;color:#72819b}
.review-actions button{background:white;border-radius:16px;color:var(--accent)}
.review-content p{color:#223052}
footer{font-size:10px;color:#909bb0;letter-spacing:.01em}
@media(max-height:700px){body{grid-template-rows:56px minmax(0,1fr) 24px}main{padding-top:8px;padding-bottom:12px}.home{gap:28px}.home .actions{padding-bottom:0}.exam-switch{margin-bottom:20px}.option{padding:9px 14px;min-height:44px;border-radius:14px;font-size:15px}.options{gap:7px}.result-body{gap:12px}.result-hero{padding:20px;border-radius:22px}.result-title{margin-top:12px;font-size:19px}.score{font-size:52px}.hero-note{margin-top:10px}.stat b{font-size:26px}.percentile{padding:11px 16px}.primary{min-height:48px;border-radius:15px}}
@media(max-width:350px){header{padding:0 18px}main{padding-left:18px;padding-right:18px}.home h1{font-size:34px}.score{font-size:46px}.rank-pending{font-size:10px}}
@media(orientation:landscape) and (max-height:600px){body{grid-template-rows:44px minmax(0,1fr) 20px}.brand img{width:108px;height:36px}header{width:min(100%,900px)}main{padding-top:6px;padding-bottom:8px}.home{gap:24px}.home h1{font-size:36px}.home .actions{padding-bottom:0}.exam-switch{margin-bottom:12px}.exam-switch button{min-height:32px;padding:5px 16px}.option{min-height:36px;padding:5px 12px;font-size:14px;border-radius:12px}.letter{width:24px;height:24px}.options{gap:6px}.quiz-body{padding-bottom:0}.primary{min-height:42px;padding:8px 14px}.result-body{gap:8px}.result-hero{padding:12px 18px;border-radius:18px}.result-title{font-size:18px;margin:6px 0}.score{font-size:38px}.hero-note{font-size:10px;margin-top:5px}.stats{gap:16px}.stat b{font-size:22px}.percentile{padding:6px 12px;border-radius:12px}.rank-number{margin-top:0}.rank-number b{font-size:22px}.result-links{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.primary,.option{transition:none}}