body{margin:0}
#app{max-width:520px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:20px 18px 28px;display:flex;flex-direction:column}
.screen{flex:1;display:flex;flex-direction:column;animation:in .35s ease both}
@keyframes in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h1{font-size:30px;line-height:1.12;margin:0 0 14px;letter-spacing:-.02em}
h2{font-size:23px;line-height:1.2;margin:18px 0 22px;letter-spacing:-.01em}
.sub{color:var(--mute);font-size:17px;margin:0 0 20px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);padding:9px 14px;border-radius:99px;font-size:14px;color:var(--ink);align-self:flex-start}
.hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:28px 0}
.top{display:flex;align-items:center;gap:12px}
.back{background:var(--card);border:1px solid var(--line);color:var(--ink);width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer;flex:none}
.bar{flex:1;height:8px;background:var(--card2);border-radius:8px;overflow:hidden}
.bar b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));border-radius:8px;transition:width .45s ease}
.cnt{font-size:13px;color:var(--mute);min-width:34px;text-align:right}
.opts{display:grid;gap:12px}
.opt{width:100%;text-align:left;background:var(--card);border:1.5px solid var(--line);color:var(--ink);border-radius:16px;padding:18px 16px;font-size:17px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:14px;transition:border-color .2s,background .2s,transform .15s;animation:in .4s ease both}
.opt:active{transform:scale(.98)}
.opt .l{flex:none;width:30px;height:30px;border-radius:9px;background:var(--card2);color:var(--mute);display:grid;place-items:center;font-size:13px;font-weight:800}
.opt.sel{border-color:var(--blue2);background:var(--tint)}
.opt.sel .l{background:var(--blue);color:#fff}
@media(hover:hover){.opt:hover{border-color:#55555f}}
.badge{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.08em;padding:8px 14px;border-radius:99px;margin-bottom:14px}
.r-red{--c:var(--risk)}.r-yel{--c:var(--yel)}.r-grn{--c:var(--grn)}
.badge{color:var(--c);border:1.5px solid var(--c);background:color-mix(in srgb,var(--c) 12%,transparent)}
.meter{height:10px;background:var(--card2);border-radius:10px;overflow:hidden;margin:6px 0 4px}
.meter b{display:block;height:100%;width:0;background:var(--c);border-radius:10px;transition:width 1s .2s ease}
.ml{display:flex;justify-content:space-between;font-size:12px;color:var(--mute);margin-bottom:18px}
.pts{display:grid;gap:10px;margin:8px 0 18px;padding:0;list-style:none}
.pts li{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--c);border-radius:12px;padding:14px;font-size:15px;color:var(--ink);animation:in .5s ease both}
.sec{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:14px 0 8px}
.msg{background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line);border-radius:16px;padding:16px;margin:4px 0 22px;font-size:16px}
.cta q{display:block;font-size:20px;font-weight:800;text-align:center;margin:6px 0 14px;quotes:none}
.again{background:none;border:0;color:var(--mute);font-size:14px;text-decoration:underline;margin:16px auto 0;cursor:pointer}
.again{display:block}.cta .btn{margin:0}
.opt,.pts li,.msg,.pill,.back{box-shadow:var(--sh)}.opt:hover{border-color:var(--blue)}
.hero{text-align:center;align-items:center}.hero .sub{max-width:420px}.pill{align-self:center}
.screen>.brand{margin-top:2px}h2{text-align:center}.top+h2{margin-top:26px}
.meter{background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(34,38,45,.10) calc(10% - 1px) 10%),var(--card2);height:12px}
.r-grn,.r-yel,.r-red{text-align:center}.pts{text-align:left}.ml{text-align:left}
.badge{margin-top:4px}
@media(min-width:700px){body{display:grid;place-items:center;padding:36px 0}#app{width:520px;min-height:0;background:var(--card);border:1px solid var(--line);border-radius:28px;box-shadow:var(--sh2);padding:40px 36px}}