:root {
  --paper: #f3f6ef;
  --card: #ffffff;
  --ink: #102820;
  --ink-2: #294a40;
  --muted: #647970;
  --line: rgba(16, 40, 32, 0.14);
  --mint: #b9f6d7;
  --mint-strong: #62dca5;
  --lime: #dff46e;
  --coral: #ffb69f;
  --navy: #102820;
  --error: #a83e2c;
  --shell: 1160px;
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--paper); }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 18%, rgba(185, 246, 215, .55), rgba(185, 246, 215, 0) 27%),
    var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #2dbb7c; outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  transform: translateY(-150%);
  padding: 10px 14px;
  border-radius: 10px;
  color: white;
  background: var(--navy);
}
.skip-link:focus { transform: translateY(0); }

.quiz-shell { width: min(var(--shell), calc(100% - 40px)); margin: 0 auto; }

.quiz-header {
  min-height: 72px;
  border-bottom: 1px solid var(--line);
  background: rgba(243, 246, 239, .84);
  backdrop-filter: blur(18px);
}

.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; letter-spacing: -.03em; }
.brand img { width: 36px; height: 36px; border: 1px solid rgba(16,40,32,.18); border-radius: 50%; object-fit: cover; }
.brand strong { font-weight: 850; }.brand span { color: var(--muted); }.brand span strong{color:var(--ink)}
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink-2); font-size: 13px; font-weight: 720; }
.back-link span { font-size: 18px; }

.quiz-main { min-height: calc(100vh - 147px); padding: 70px 0 86px; }
.quiz-layout { display: grid; grid-template-columns: .78fr 1.22fr; align-items: start; gap: 80px; }

.quiz-context { position: sticky; top: 48px; padding: 25px 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 20px; color: #3e7465; font-size: 11px; font-weight: 830; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { width: 25px; height: 2px; border-radius: 3px; background: var(--mint-strong); }
h1 { margin: 0 0 22px; font-size: clamp(42px, 5.2vw, 66px); line-height: .99; letter-spacing: -.062em; }
.quiz-context > p:not(.eyebrow) { max-width: 520px; margin: 0; color: var(--ink-2); font-size: 16px; }
.privacy-note { display: grid; grid-template-columns: 38px 1fr; gap: 12px; margin-top: 30px; padding: 16px; border: 1px solid rgba(16,40,32,.09); border-radius: 17px; background: rgba(255,255,255,.56); }
.privacy-note > span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #0f6041; background: var(--mint); font-weight: 900; }
.privacy-note div { display: grid; gap: 2px; }.privacy-note strong{font-size:12px}.privacy-note small{color:var(--muted);font-size:10px}
.context-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }.context-meta span{padding:7px 9px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:9px;font-weight:750}

.quiz-card { min-height: 650px; padding: 34px; border: 1px solid rgba(16,40,32,.11); border-radius: 30px; background: var(--card); box-shadow: 0 25px 70px rgba(17,53,41,.12); }
.quiz-progress { margin-bottom: 35px; }
.progress-copy { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 760; letter-spacing: .04em; text-transform: uppercase; }.progress-copy strong{color:#2b765b}
.progress-track { height: 7px; overflow: hidden; border-radius: 999px; background: #e7ede7; }
.progress-track i { display: block; width: 10%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#4cd192,var(--mint-strong)); transition: width 260ms ease; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { display: block; width: 100%; margin: 0; padding: 0; font-size: clamp(27px,3.2vw,38px); font-weight: 850; line-height: 1.12; letter-spacing: -.043em; }
.question-hint { margin: 12px 0 25px; color: var(--muted); font-size: 12px; }
.options { display: grid; gap: 10px; }
.options label { position: relative; display: grid; grid-template-columns: 35px 1fr; align-items: center; gap: 13px; min-height: 78px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 16px; background: #fbfcf9; cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease; }
.options label:hover { transform: translateY(-1px); border-color: rgba(34,132,91,.45); background: #f6fbf6; }
.options label:has(input:checked) { border-color: #3dc284; background: #edfbf3; box-shadow: inset 0 0 0 1px #3dc284; }
.options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.option-key { display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: white; font-size: 11px; font-weight: 850; }
.options label:has(input:checked) .option-key { color: #0d5135; border-color: var(--mint-strong); background: var(--mint); }
.options label > span:last-child { display: grid; gap: 2px; }.options strong{font-size:13px}.options small{color:var(--muted);font-size:10px}
.validation-message { margin: 14px 0 0; color: var(--error); font-size: 11px; font-weight: 700; }

.quiz-controls { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 11px 19px; border: 1px solid transparent; border-radius: 13px; cursor: pointer; font-size: 13px; font-weight: 800; transition: transform 150ms ease, background-color 150ms ease, border-color 150ms ease; }
.button:hover { transform: translateY(-1px); }.button:active{transform:translateY(0)}
.button-primary { color: #09271d; border-color: var(--mint-strong); background: var(--mint-strong); box-shadow: 0 10px 24px rgba(56,194,130,.18); }.button-primary:hover{background:#78e8b7}
.button-ghost { color: var(--ink-2); border-color: var(--line); background: white; }.button-ghost:hover{border-color:rgba(16,40,32,.3)}.button:disabled{cursor:not-allowed;opacity:.4;transform:none}

.result { animation: resultIn 380ms ease both; }
@keyframes resultIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
.result-kicker { margin: 0 0 12px; color: #2b7b5b; font-size: 11px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.result h2 { margin: 0 0 16px; font-size: clamp(35px,4.3vw,53px); line-height: 1.02; letter-spacing: -.055em; }
.result-lead { margin: 0 0 25px; color: var(--ink-2); font-size: 15px; }
.result-fit { padding: 18px; border-radius: 17px; color: #e9fff3; background: var(--navy); font-size: 12px; }.result-fit strong{display:block;margin-bottom:5px;color:var(--mint);font-size:13px}
.answer-summary { margin-top: 19px; padding: 19px; border: 1px solid var(--line); border-radius: 17px; background: #fbfcf9; }
.summary-head { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.summary-head strong{font-size:12px}.summary-head span{color:var(--muted);font-size:9px}
.answer-summary ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }.answer-summary li{position:relative;padding-left:14px;color:var(--muted);font-size:10px}.answer-summary li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--mint-strong)}
.result-next { display: grid; margin-top: 22px; padding: 23px; border-radius: 19px; background: #edf5ed; }.result-next p{margin:0 0 15px;color:var(--ink-2);font-size:12px}.result-cta{width:100%}.result-next small{margin-top:9px;color:var(--muted);font-size:9px;text-align:center}
.restart-link { display: block; min-height: 44px; margin: 13px auto 0; padding: 8px 10px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }

.quiz-footer { min-height: 75px; border-top: 1px solid var(--line); color: var(--muted); background: #e8eee5; font-size: 10px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 75px; }.footer-inner div{display:flex;gap:18px}.footer-inner a:hover{color:var(--ink)}

@media (max-width: 900px) {
  .quiz-main { padding-top: 44px; }
  .quiz-layout { grid-template-columns: 1fr; gap: 32px; }
  .quiz-context { position: static; padding: 0; }
  .quiz-context h1 { max-width: 740px; }
  .quiz-context > p:not(.eyebrow) { max-width: 730px; }
  .privacy-note { max-width: 560px; }
  .quiz-card { min-height: 620px; }
}

@media (max-width: 600px) {
  .quiz-shell { width: min(100% - 24px, var(--shell)); }
  .quiz-header, .header-inner { min-height: 64px; }.brand img{width:33px;height:33px}.back-link{justify-content:center;min-width:44px;font-size:0}.back-link span{font-size:22px}
  .quiz-main { padding: 34px 0 55px; }
  h1 { font-size: clamp(39px,13vw,53px); }
  .quiz-context > p:not(.eyebrow) { font-size: 14px; }
  .privacy-note { margin-top: 22px; }
  .context-meta { display: none; }
  .quiz-card { min-height: 610px; padding: 22px 16px; border-radius: 23px; }
  .quiz-progress { margin-bottom: 28px; }
  legend { font-size: 27px; }
  .question-hint { margin-bottom: 19px; }
  .options label { grid-template-columns: 32px 1fr; min-height: 75px; padding: 11px; }.option-key{width:32px;height:32px}.options strong{font-size:12px}.options small{font-size:9px}
  .quiz-controls { margin: 23px -4px -6px; padding: 15px 4px 6px; }.quiz-controls .button{min-width:118px}
  .answer-summary ul { grid-template-columns: 1fr; }.summary-head{display:grid;gap:2px}
  .result-next { padding: 19px 15px; }
  .footer-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding: 17px 0; }.footer-inner div{display:grid;width:100%;gap:0}.footer-inner a{display:flex;align-items:center;min-height:44px}
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}