@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&family=Suez+One&display=swap');
:root{--ink:#17211d;--muted:#65736c;--cream:#f7f5ee;--paper:#fff;--green:#176b4d;--green2:#dff3e9;--line:#dfe5df;--orange:#ff8a56;--shadow:0 18px 50px #203b2b18}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:Heebo,Arial,sans-serif;min-height:100vh}.topbar{height:78px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 24px}.brand{color:var(--ink);font-size:22px;font-weight:800;text-decoration:none;display:flex;gap:10px;align-items:center}.brand span{display:grid;place-items:center;background:var(--green);color:white;border-radius:50% 40% 50% 45%;height:34px;width:34px;transform:rotate(-7deg)}.shell{max-width:1120px;margin:0 auto;padding:46px 24px 80px}.hero{text-align:center;margin:36px auto 52px}.hero h1{font-size:clamp(42px,7vw,76px);line-height:1;margin:10px}.hero p{color:var(--muted);font-size:20px}.eyebrow{font-size:12px!important;letter-spacing:.16em;color:var(--green)!important;font-weight:800}.quiz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:24px}.quiz-card{background:var(--paper);border:1px solid #fff;border-radius:24px;box-shadow:var(--shadow);padding:24px;display:grid;grid-template-columns:100px 1fr;gap:22px;transition:.2s}.quiz-card:hover{transform:translateY(-4px)}.logo-wrap{background:var(--green2);width:100px;height:100px;border-radius:20px;display:grid;place-items:center;overflow:hidden}.quiz-logo{width:74px;height:74px;object-fit:contain}.quiz-card h2{margin:0;font-size:25px}.quiz-card p{color:var(--muted);min-height:48px;margin:5px 0 12px}.card-meta{display:flex;gap:8px;margin-bottom:16px}.card-meta span{background:#f0f3ef;padding:4px 9px;border-radius:20px;font-size:12px;color:var(--muted)}.primary{background:var(--green);color:#fff;border:0;border-radius:12px;padding:11px 18px;font-family:inherit;font-size:15px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}.primary b{font-size:20px}.ghost{border:1px solid var(--line);background:transparent;border-radius:20px;padding:7px 14px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}.quiz-stage{max-width:820px;margin:auto}.progress-head{display:grid;grid-template-columns:35px 65px 1fr;align-items:center;gap:15px;margin-bottom:18px;direction:ltr}.progress-head a{font-size:28px;text-decoration:none;color:var(--muted)}.progress-head span{font-size:13px;color:var(--muted)}.progress{height:7px;background:#e5e9e5;border-radius:5px;overflow:hidden}.progress i{height:100%;display:block;background:var(--green);border-radius:5px;transition:.3s}.question-card{background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.question-image{display:block;width:100%;height:auto;aspect-ratio:886/591;object-fit:cover}.question-body{padding:34px 42px 40px}.question-body h1{font-size:38px;margin:5px 0 25px}.options{display:grid;gap:11px}.option{width:100%;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:12px;display:grid;grid-template-columns:36px 1fr 24px;align-items:center;text-align:start;font-family:inherit;font-size:19px;font-weight:600;line-height:1.45;color:var(--ink);cursor:pointer}.option>span{height:31px;width:31px;display:grid;place-items:center;background:#f0f3ef;border-radius:9px}.option i{opacity:0;color:var(--green)}.option.selected{border-color:var(--green);background:#f4fbf7}.option.selected span{background:var(--green);color:#fff}.option.selected i{opacity:1}.wide{width:100%;margin-top:9px;padding:14px}.hint{height:21px;margin:8px 0;color:#b64e2f;font-size:13px}.result-card{max-width:620px;margin:35px auto;text-align:center;background:#fff;padding:55px;border-radius:30px;box-shadow:var(--shadow);position:relative;overflow:hidden}.result-logo{width:86px;height:86px;object-fit:contain}.score{display:flex;align-items:baseline;justify-content:center;gap:10px}.score strong{font-size:92px;line-height:1;color:var(--green)}.score span{color:var(--muted)}.result-card h1{font-size:25px}.result-actions{display:flex;justify-content:center;gap:20px;align-items:center;margin-top:28px}.result-actions a{color:var(--green);font-weight:700}.confetti{position:absolute;font-size:120px;color:var(--orange);opacity:.12;left:-20px;top:-25px}.empty,.loading{text-align:center;padding:80px;color:var(--muted)}footer{text-align:center;padding:25px;color:#89938e;font-size:13px}@media(max-width:600px){.shell{padding:22px 15px 60px}.hero{margin:20px auto 35px}.quiz-card{grid-template-columns:75px 1fr}.logo-wrap{width:75px;height:75px}.question-body{padding:25px 20px}.question-body h1{font-size:27px}.option{font-size:17px}.result-card{padding:40px 20px}.score strong{font-size:75px}}

h1, h2, h3, h4, h5, h6, .brand {
  font-family: "Suez One", Heebo, Arial, sans-serif;
  font-weight: 400;
}

.question-body h1 {
  font-size: 38px;
  line-height: 1.3;
}

.display-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-toggle {
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--ink);
  font-size: 21px;
  line-height: 1;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef4f0;
  --muted: #a8b5ad;
  --cream: #111714;
  --paper: #1b2420;
  --green: #62c99d;
  --green2: #203d31;
  --line: #37453e;
  --orange: #ff9c70;
  --shadow: 0 18px 50px #0007;
  --correct: #62c99d;
}

:root[data-theme="dark"] .quiz-card,
:root[data-theme="dark"] .question-card,
:root[data-theme="dark"] .result-card,
:root[data-theme="dark"] .option {
  background: var(--paper);
  border-color: var(--line);
}

:root[data-theme="dark"] .card-meta span,
:root[data-theme="dark"] .option > span,
:root[data-theme="dark"] .progress {
  background: #29342f;
}

@media (max-width: 600px) {
  .question-body h1 {
    font-size: 27px;
  }
}

:root {
  --correct: #176b4d;
  --sky: #d8edf5;
}

body {
  background-image:
    radial-gradient(circle at 8% 12%, #d8edf594 0 8%, transparent 24%),
    radial-gradient(circle at 92% 28%, #ff8a562e 0 7%, transparent 22%),
    radial-gradient(circle at 50% -8%, #ffd36f38 0 6%, transparent 20%);
  background-attachment: fixed;
}

.quiz-card:nth-child(3n + 2) .logo-wrap {
  background: #fde2d4;
}

.quiz-card:nth-child(3n) .logo-wrap {
  background: var(--sky);
}

.card-actions {
  display: grid;
  gap: 8px;
}

.advanced-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #9d2036;
  border-radius: 12px;
  padding: 10px 17px;
  background: #201719;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.advanced-start b {
  color: #ff5369;
}

.advanced-mode-label {
  display: inline-block;
  margin: 0 0 4px;
  border-radius: 999px;
  padding: 5px 10px;
  background: var(--green2);
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

:root[data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 8% 12%, #21433855 0 8%, transparent 25%),
    radial-gradient(circle at 92% 28%, #6b332744 0 7%, transparent 23%);
}

:root[data-theme="dark"] .quiz-card:nth-child(3n + 2) .logo-wrap {
  background: #493126;
}

:root[data-theme="dark"] .quiz-card:nth-child(3n) .logo-wrap {
  background: #243d49;
}

:root[data-quiz-mode="advanced"] {
  --ink: #1b1113;
  --muted: #755e62;
  --cream: #f3eded;
  --paper: #fffafa;
  --green: #a5162d;
  --green2: #f3d8dd;
  --line: #dfc3c8;
  --orange: #1b1113;
  --shadow: 0 20px 55px #3d071421;
}

:root[data-quiz-mode="advanced"] body {
  background-image:
    linear-gradient(135deg, #1711130a 25%, transparent 25%),
    radial-gradient(circle at 85% 12%, #c51f3b26 0 11%, transparent 29%);
  background-size: 28px 28px, auto;
}

:root[data-quiz-mode="advanced"] .question-card,
:root[data-quiz-mode="advanced"] .result-card {
  border: 1px solid #caaeb3;
}

:root[data-quiz-mode="advanced"] #continue {
  background: #40205f;
}

:root[data-theme="dark"][data-quiz-mode="advanced"] {
  --ink: #fff5f6;
  --muted: #c5aeb2;
  --cream: #0d090a;
  --paper: #191214;
  --green: #ed3c57;
  --green2: #3b171e;
  --line: #4b3035;
  --orange: #f4e9eb;
  --shadow: 0 20px 55px #000a;
}

:root[data-theme="dark"][data-quiz-mode="advanced"] body {
  background-image:
    linear-gradient(135deg, #ffffff08 25%, transparent 25%),
    radial-gradient(circle at 85% 12%, #d61f3e35 0 11%, transparent 30%);
}

footer a { color: inherit; margin-inline-start: 10px; }
.privacy-card { max-width: 760px; margin: auto; background: var(--paper); padding: clamp(24px, 5vw, 52px); border-radius: 24px; box-shadow: var(--shadow); }
.privacy-card h2 { font-size: 20px; margin-top: 28px; }
.privacy-card p { color: var(--muted); line-height: 1.75; }
.privacy-card > a { color: var(--green); font-weight: 700; }