:root{
  --bg:#0a0a0a; --surface:#151515; --raised:#1f1f1f; --line:#3d3d3d;
  --text:#f5f5f5; --muted:#a6a6a6; --accent:#ffffff;
  --active:#80bcff; --success:#8ce0b0; --error:#ffaaa5; --waiting:#f2d08b;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  min-height:100vh; display:flex; flex-direction:column; line-height:1.5;
}
.top{display:flex;align-items:center;gap:14px;padding:18px 24px;border-bottom:1px solid var(--line)}
.logo{height:32px;width:auto}
.mark{color:var(--muted);font-size:14px;letter-spacing:.04em;text-transform:uppercase}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:32px 24px 64px}
.screen.hidden{display:none}
h1{font-size:30px;line-height:1.2;margin:0 0 16px;font-weight:600}
h2.question{font-size:23px;line-height:1.3;margin:16px 0 20px;font-weight:600}
h3{font-size:17px;margin:0 0 8px;font-weight:600}
.lead{color:var(--muted);font-size:17px}
.facts{list-style:none;padding:0;margin:22px 0 28px;color:var(--muted)}
.facts li{padding:8px 0 8px 22px;position:relative;border-bottom:1px solid var(--raised)}
.facts li::before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;background:var(--accent)}
button{font:inherit;cursor:pointer;border-radius:12px;padding:13px 22px;border:1px solid var(--line);background:transparent;color:var(--text);transition:.15s}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:#0a0a0a;border-color:var(--accent);font-weight:600}
button.primary:hover{background:#d8d8d8}
button.ghost{color:var(--muted);padding:9px 16px;font-size:14px}
button.ghost:hover{color:var(--text)}
.progress{height:4px;background:var(--raised);border-radius:2px;overflow:hidden;margin-top:8px}
#progress-bar{height:100%;width:0;background:var(--active);transition:width .25s}
.counter{color:var(--muted);font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:14px 0 0}
.options{display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.option{
  display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--line);padding:16px 18px;
}
.option:hover{background:var(--raised);border-color:var(--accent)}
.option .num{color:var(--muted);font-size:13px;min-width:16px;padding-top:3px}
.option.picked{border-color:var(--active);background:var(--raised)}
.axes{display:flex;flex-direction:column;gap:9px;margin:8px 0 30px}
.axis{display:grid;grid-template-columns:170px 1fr 44px;align-items:center;gap:12px;font-size:14px}
.axis .name{color:var(--muted)}
.axis .track{background:var(--raised);height:8px;border-radius:4px;overflow:hidden}
.axis .fill{height:100%;background:var(--accent)}
.axis .val{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.roles{display:flex;flex-direction:column;gap:16px;margin-bottom:28px}
.role{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.role.first{border-color:var(--active)}
.role .rank{color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.role h3{margin:6px 0 10px;font-size:21px}
.role p.why{color:var(--text);margin:0 0 14px}
.role .step{background:var(--bg);border:1px solid var(--raised);border-radius:10px;padding:13px 15px;margin-bottom:14px;font-size:15px}
.role .step b{color:var(--success)}
.courses{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.courses li{display:flex;flex-direction:column;gap:3px}
.courses a{color:var(--active);text-decoration:none;font-size:15px;border-bottom:1px solid transparent}
.courses a:hover{border-color:var(--active)}
.courses .meta{color:var(--muted);font-size:13px}
.honest{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--waiting);border-radius:12px;padding:18px 20px;margin-bottom:24px}
.honest p{margin:0;color:var(--muted);font-size:15px}
.bottom{display:flex;justify-content:space-between;gap:12px;padding:18px 24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
@media(max-width:560px){
  h1{font-size:25px} h2.question{font-size:20px}
  .axis{grid-template-columns:120px 1fr 38px;font-size:13px}
  main{padding:24px 16px 48px}
}