:root { --teal:#53c4c8; --navy:#0d385b; --button:#104467; --ink:#203341; --mist:#f1faf9; }
* { box-sizing: border-box; }
body { margin:0; color:var(--ink); background:linear-gradient(145deg,#effafa,#fff 55%); font-family:"Noto Sans",system-ui,sans-serif; }
.shell { width:min(100% - 32px,720px); margin:0 auto; padding:34px 0 60px; }
.brand { color:var(--navy); font-weight:700; font-size:1.2rem; letter-spacing:.02em; margin:0 0 24px 4px; }
.card { background:#fff; box-shadow:0 12px 40px #0d385b18; border-radius:24px; padding:clamp(24px,5vw,48px); min-height:380px; }
h1 { color:var(--navy); font-size:clamp(2.25rem,7vw,3rem); font-weight:400; line-height:1.15; margin:0 0 18px; }
h2 { color:var(--navy); font-size:clamp(1.45rem,4vw,2rem); font-weight:500; line-height:1.3; margin:0 0 28px; }
p { line-height:1.65; margin:0 0 16px; } .small { color:#51606b; font-size:.9rem; } .progress { color:#63747c; font-size:.92rem; margin-bottom:14px; }
.options { display:grid; gap:12px; margin:18px 0 26px; }
.option { display:flex; align-items:flex-start; gap:12px; width:100%; cursor:pointer; color:var(--button); font:inherit; text-align:left; background:#fff; border:1px solid #c8e7e8; border-radius:32px; padding:15px 18px; transition:.15s ease; }
.option:hover,.option:focus-visible { border-color:var(--teal); background:var(--mist); outline:none; }.option.selected { background:var(--teal); border-color:var(--teal); color:var(--button); }.letter { font-weight:700; min-width:1.25rem; }
.actions { display:flex; justify-content:space-between; gap:12px; align-items:center; }.button { border:0; border-radius:32px; background:var(--teal); color:var(--button); cursor:pointer; font:700 1rem inherit; padding:14px 24px; text-decoration:none; display:inline-block; }.button:disabled { opacity:.45; cursor:not-allowed; }.button.secondary { background:transparent; border:1px solid #a6dadd; }
.fields { display:grid; gap:16px; }.field { display:grid; gap:7px; color:var(--navy); font-weight:600; }.field input,.field select { border:1px solid #c8e7e8; border-radius:10px; padding:13px; font:400 1rem inherit; color:var(--ink); background:#fff; }.consent { display:flex; gap:10px; align-items:flex-start; font-weight:400; color:var(--ink); line-height:1.45; }.error { background:#fff2f1; color:#922f26; border-radius:10px; padding:12px; margin-bottom:16px; }.hidden { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.result-score { color:var(--teal); font-size:1.25rem; font-weight:700; }.result .button { margin-top:8px; }
@media (max-width:480px) { .shell{width:min(100% - 20px,720px);padding-top:16px}.card{border-radius:18px;padding:24px 18px}.actions{flex-wrap:wrap}.actions .button:last-child{margin-left:auto} }