:root{
  color-scheme:dark;
  --bg:#0c0806;--surface:#1a120e;--surface-2:#2e1e15;--ink:#faf2e6;--muted:#ccb592;
  --line:rgba(224,186,118,.24);--line-soft:rgba(224,186,118,.08);--glass:rgba(16,11,8,.84);
  --accent:#e0ba76;--accent-2:#f2dcb0;--dark-ink:#0c0806;
  --button-bg:#e0ba76;--button-hover:#ebc98c;--button-ink:#140d09;
  --danger:#e0968e;--header-bg:rgba(14,9,7,.94);--panel-bg:#140e0a;--card-bg:rgba(26,18,14,.97);
  --card-hover:#3a261c;--field-bg:rgba(247,239,228,.05);--footer-bg:#080504;
  --hero-ink:#fff7ec;--footer-muted:#b49a7c;--shadow:rgba(0,0,0,.62);
  --header:4.75rem;--max:77.5rem;
  --display:system-ui,sans-serif;--text:system-ui,sans-serif;
  --gutter:2.5rem;--gutter-sm:1.5rem;--gutter-xs:1.125rem;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:110%;background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--text);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),var(--line-soft) calc(25% - 1px),var(--line-soft) 25%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
.container{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}

/* ---------- шапка, как на сайте ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header);border-bottom:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));background:var(--header-bg);backdrop-filter:blur(18px) saturate(1.12)}
.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:.7rem;min-width:max-content}
.brand img{height:42px;width:auto}
.brand__text{font-family:var(--display);font-size:clamp(.68rem,.95vw,.82rem);font-weight:500;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:var(--accent);white-space:nowrap}

/* ---------- кнопки, как на сайте ---------- */
.btn{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:10px;padding:14px 26px;border:1px solid var(--line);border-radius:0;background:var(--field-bg);color:var(--ink);cursor:pointer;font-size:.69rem;font-weight:700;letter-spacing:.1em;text-align:center;text-transform:uppercase;transition:.2s}
.btn:hover,.btn:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
.btn--accent{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--button-hover) 55%,#fff) 0%,var(--button-bg) 42%,color-mix(in srgb,var(--button-bg) 82%,#000) 100%);color:var(--button-ink);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 28%,transparent),0 10px 28px color-mix(in srgb,var(--button-bg) 28%,transparent);letter-spacing:.12em}
.btn--accent:hover,.btn--accent:focus-visible{border-color:transparent;background:linear-gradient(180deg,color-mix(in srgb,var(--button-hover) 70%,#fff) 0%,var(--button-hover) 48%,var(--button-bg) 100%);color:var(--button-ink)}
.btn[disabled]{opacity:.38;cursor:not-allowed;box-shadow:none}
.btn--ghost{background:transparent}

.kicker{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--accent);font-size:.67rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase}
.kicker::before{content:"";width:48px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}

/* ---------- первый экран ---------- */
.intro{position:relative;isolation:isolate;padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,72px);border-bottom:1px solid var(--line)}
.intro__bg{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,5,3,.80) 0%,rgba(8,5,3,.55) 40%,rgba(8,5,3,.98) 100%),
  linear-gradient(90deg,rgba(8,5,3,.92),rgba(8,5,3,.2) 75%),
  radial-gradient(ellipse at top right,#50321d,transparent 64%),var(--surface);
  filter:saturate(.74) sepia(.1) contrast(1.05)}
.intro h1{max-width:980px;margin:0 0 18px;font-family:var(--display);font-size:clamp(1.6rem,3.8vw,3.1rem);font-weight:400;line-height:1.16;letter-spacing:-.025em;text-transform:uppercase;text-wrap:balance;color:var(--hero-ink)}
.intro__lead{max-width:660px;margin:0 0 36px;color:var(--muted);font-size:.9rem}

.facts{display:flex;flex-wrap:wrap;gap:1px;max-width:980px;margin-top:28px;border:1px solid var(--line);background:var(--line)}
.fact{flex:1 1 200px;padding:14px 16px;background:rgba(12,8,5,.86);font-size:.7rem;line-height:1.45;color:var(--muted)}
.fact strong{display:block;margin-bottom:3px;color:var(--hero-ink);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase}

/* ---------- квиз ---------- */
.quiz-wrap{padding:clamp(28px,4vw,56px) 0 clamp(48px,6vw,88px)}
.quiz-grid{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:clamp(24px,3.5vw,48px);align-items:start}
.quiz{border:1px solid var(--line);background:var(--panel-bg);scroll-margin-top:calc(var(--header) + 16px)}
.quiz__top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 26px;border-bottom:1px solid var(--line)}
.quiz__mode{color:var(--accent);font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.quiz__count{color:var(--muted);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.progress{display:block;width:100%;height:3px;appearance:none;border:0;background:var(--line-soft);color:var(--accent)}
.progress::-webkit-progress-bar{background:var(--line-soft)}
.progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.quiz__body{padding:clamp(22px,3vw,40px) 26px 28px}
.q-title{margin:0 0 8px;font-family:var(--display);font-size:clamp(1.1rem,2.1vw,1.6rem);font-weight:400;line-height:1.22;letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.q-hint{margin:0 0 22px;color:var(--muted);font-size:.74rem}
.options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.opt{position:relative;display:flex;align-items:flex-start;gap:14px;min-height:64px;padding:15px 16px;border:1px solid var(--line);background:var(--field-bg);text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s}
.opt:hover{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));background:color-mix(in srgb,var(--accent) 7%,transparent)}
.opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.opt__mark{flex:0 0 18px;width:18px;height:18px;margin-top:2px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));display:grid;place-items:center}
.opt--multi .opt__mark{border-radius:0}
.opt:not(.opt--multi) .opt__mark{border-radius:50%}
.opt__mark::after{content:"";width:8px;height:8px;background:var(--accent);transform:scale(0);transition:transform .15s}
.opt:not(.opt--multi) .opt__mark::after{border-radius:50%}
.opt__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.opt__title{font-size:.8rem;font-weight:600;line-height:1.35}
.opt__desc{color:var(--muted);font-size:.68rem;line-height:1.45}
.opt[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:inset 3px 0 0 var(--accent)}
.opt[aria-pressed="true"] .opt__mark::after{transform:scale(1)}
.opt--unsure .opt__title{color:var(--muted);font-weight:500}
.quiz__nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 26px;border-top:1px solid var(--line)}
.quiz__nav .btn--ghost{padding-inline:18px}

/* боковая колонка */
.aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--header) + 20px)}
.aside-card{padding:22px;border:1px solid var(--line);background:var(--card-bg)}
.aside-list{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.aside-list li{display:grid;grid-template-columns:22px 1fr;gap:8px;font-size:.74rem;line-height:1.45}
.aside-list li::before{content:"+";color:var(--accent);font-weight:300;font-size:1rem;line-height:1.1}
.aside-list span{color:var(--muted);font-size:.68rem}

/* подвал */
.site-footer{padding:40px 0 calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--footer-bg);color:var(--footer-muted);font-size:.68rem;line-height:1.6}

.screen{animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen{animation:none}}

/* ---------- адаптив ---------- */
@media (max-width:1100px){
  .quiz-grid{grid-template-columns:1fr}
  .aside{position:static}

}
@media (max-width:767px){
  :root{--header:4.125rem}
  .container{width:min(100% - var(--gutter-sm)*2,var(--max))}
  .brand img{height:32px}
  .brand__text{font-size:.62rem;letter-spacing:.06em}
  .brand{gap:.55rem}

  .options{grid-template-columns:1fr}
  .quiz{border-inline:0;margin-inline:calc(var(--gutter-sm)*-1)}
  .quiz__top,.quiz__body{padding-inline:var(--gutter-sm)}
  .quiz__nav{position:sticky;bottom:0;z-index:20;padding:12px var(--gutter-sm) calc(12px + env(safe-area-inset-bottom,0px));background:var(--header-bg);backdrop-filter:blur(14px)}
  .quiz__nav .btn{flex:1;min-width:0}
  .quiz__nav .btn--ghost{flex:0 0 auto}

  .intro__lead{font-size:.82rem}
}
@media (max-width:380px){.q-title{font-size:1rem;hyphens:auto;overflow-wrap:anywhere}}
@media (max-width:28.875rem){
  .container{width:min(100% - var(--gutter-xs)*2,var(--max))}
  .quiz{margin-inline:calc(var(--gutter-xs)*-1)}
  .quiz__top,.quiz__body{padding-inline:var(--gutter-xs)}
  .quiz__nav{padding-inline:var(--gutter-xs)}
}

/* Первый экран технической версии */
.intro{padding:clamp(40px,6vw,84px) 0 clamp(32px,4.5vw,60px)}
.intro__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:0 0 30px}
.facts{margin-top:0}
.opt__flag{display:inline-block;margin-left:8px;padding:2px 7px;border:1px solid color-mix(in srgb,var(--accent) 58%,transparent);color:var(--accent-2);font-size:.55rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;vertical-align:2px}
@media (max-width:767px){.intro__actions .btn{width:100%}}

/* Технический просмотр */
.brand:focus-visible,.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.header-status{color:var(--muted);font-size:.65rem;text-align:right}
.preview-status{color:var(--accent-2);font-weight:600}
.preview-end .q-title{margin-bottom:14px;text-transform:none}
.preview-end p:last-child{margin-bottom:0}
.preview-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;padding:0;max-width:46rem}
.preview-list .btn{width:100%;height:100%;justify-content:flex-start;text-align:left}
.quiz__nav .btn--accent{margin-left:auto}
@media (max-width:480px){.preview-list{grid-template-columns:1fr}.header-inner{gap:12px}}