:root{--ink:#1c2430;--ink-soft:#5b6778;--paper:#f7f5f1;--card:#fff;--line:#e4e0d8;--accent:#1f5f4f;--accent-ink:#fff;--accent-soft:#e7f0ec;--danger:#b3441e;--radius:14px;font-size:16px}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.45}.wrap{flex-direction:column;max-width:640px;min-height:100vh;margin:0 auto;padding:0 20px 48px;display:flex}.topbar{background:var(--paper);z-index:5;padding:24px 0 16px;position:sticky;top:0}.brand{align-items:center;gap:10px;margin-bottom:16px;display:flex}.brand-mark{background:var(--accent);width:32px;height:32px;color:var(--accent-ink);border-radius:8px;flex:none;justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.brand-name{font-size:15px;font-weight:600}.brand-name em{color:var(--ink-soft);font-size:12px;font-style:normal;font-weight:400;display:block}.progress-track{background:var(--line);border-radius:999px;height:6px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:999px;width:0%;height:100%;transition:width .25s}.progress-label{color:var(--ink-soft);margin-top:6px;font-size:12px;display:block}.quiz{flex:1;padding-top:8px}.step{animation:.2s fade-in}@keyframes fade-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.step h1{margin:4px 0 6px;font-size:22px}.step .sub{color:var(--ink-soft);margin:0 0 20px;font-size:14px}.options{gap:10px;margin-bottom:20px;display:grid}.option{border:1.5px solid var(--line);border-radius:var(--radius);background:var(--card);cursor:pointer;text-align:left;font:inherit;color:var(--ink);align-items:center;gap:12px;padding:14px 16px;transition:border-color .15s,background .15s;display:flex}.option:hover{border-color:var(--accent)}.option.selected{border-color:var(--accent);background:var(--accent-soft)}.option .tick{border:1.5px solid var(--line);border-radius:50%;flex:none;justify-content:center;align-items:center;width:20px;height:20px;display:flex}.option.selected .tick{border-color:var(--accent);background:var(--accent);color:#fff;font-size:12px}.option .label{font-size:15px;font-weight:500}.option .hint{color:var(--ink-soft);margin-top:2px;font-size:12.5px;font-weight:400;display:block}.field{margin-bottom:16px}.field label{color:var(--ink-soft);margin-bottom:6px;font-size:13px;font-weight:600;display:block}.field input{border:1.5px solid var(--line);background:var(--card);width:100%;color:var(--ink);border-radius:10px;padding:13px 14px;font-family:inherit;font-size:15px}.field input:focus{border-color:var(--accent);outline:none}.field.error input{border-color:var(--danger)}.field .error-msg{color:var(--danger);margin-top:5px;font-size:12.5px;display:none}.field.error .error-msg{display:block}.actions{gap:10px;margin-top:24px;display:flex}.btn{appearance:none;cursor:pointer;box-sizing:border-box;border:none;border-radius:10px;justify-content:center;align-items:center;padding:14px 20px;font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background:var(--accent);color:var(--accent-ink);flex:1}.btn-primary:disabled{background:var(--line);color:var(--ink-soft);cursor:not-allowed}.btn-back{color:var(--ink-soft);border:1.5px solid var(--line);background:0 0}.result{text-align:center;padding:12px 0}.result-badge{letter-spacing:.03em;text-transform:uppercase;border-radius:999px;margin-bottom:16px;padding:6px 14px;font-size:12.5px;font-weight:700;display:inline-block}.result-badge.hot{color:#b3441e;background:#fdece3}.result-badge.warm{color:#92660c;background:#fdf4dc}.result-badge.cold{color:#3a5a8c;background:#eaf1fb}.result h1{margin:0 0 10px;font-size:24px}.result p{color:var(--ink-soft);margin:0 0 20px;font-size:15px}.summary{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px;padding:16px 18px;font-size:13.5px}.summary dt{color:var(--ink-soft);font-weight:600}.summary dd{margin:0 0 10px}.summary dd:last-child{margin-bottom:0}.foot{text-align:center;color:var(--ink-soft);padding-top:24px;font-size:12px}.foot code{background:var(--line);border-radius:4px;padding:1px 5px}@media (width<=420px){.step h1{font-size:20px}.actions{flex-direction:column-reverse}}:root{--accent:#571c2b;--accent-soft:#f4e9ec;--ink:#292526;--ink-soft:#70696b;--paper:#fcfaf7;--line:#ddd6d1;--radius:4px}h1{font-family:Georgia,serif;font-weight:400}.brand-mark{background:#571c2b}.foot{font-size:13px}