/* ==========================================================================
   THE SKIN QUIZ: "עור חי שמגיב לתשובות" (Oct 2026, the concept the owner chose)
   ==========================================================================
   #quizPage is a focused flow above the header (pearl-v6.css 4b). app.js builds one stage in #quizBody: the step
   (.qx-main) and the living skin (.qx-skin, QuizSkin in app.js) beside it on a wide screen, as a band at the top on a
   phone. One question per screen, the answers as large cards, the result as "פרופיל העור שלכם" with the clinic.
   Loads after pearl-v6.css and treatments.css. Every selector here starts at #quizBody, so the older quiz rules in
   style.css, premium-v4.css and pearl-v6.css (some with !important) never reach the new markup; .qopt stays on the
   answers for the tests and keeps nothing of its old look. */

#quizBody{max-width:none!important;margin:0!important;padding:0!important;--qx-bar:71px;--qx-g:clamp(16px,3vw,44px);--qx-ink:var(--ed-ink,#0F1E2E);
  --qx-mute:var(--ed-muted,#566676);--qx-line:var(--ed-line,rgba(15,30,46,.12));--qx-pearl:var(--ed-ivory,#F1F5F8);--qx-accent:var(--ed-bronze,#2F5F86);
  --qx-ease:var(--ed-ease,cubic-bezier(.22,1,.36,1))}

/* ---------- the stage: the step on the start side, the skin beside it ---------- */
#quizBody .qx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(28px,4vw,72px);align-items:start;
  max-width:1400px;margin:0 auto;padding:20px var(--qx-g) 0}
#quizBody .qx-main{min-width:0;min-height:calc(100svh - var(--qx-bar) - 20px);display:flex;flex-direction:column;justify-content:center;padding:28px 0 56px}
#quizBody .qx[data-step="result"] .qx-main{justify-content:flex-start;padding-top:clamp(20px,4vh,48px)}

/* ---------- the living skin ---------- */
#quizBody .qx-skin{position:sticky;top:calc(var(--qx-bar) + max(20px,(100svh - var(--qx-bar) - 900px) / 2));height:calc(100svh - var(--qx-bar) - 40px);
  min-height:420px;max-height:900px;margin:0;overflow:hidden;border-radius:26px;background:#EAF0F5;isolation:isolate;contain:layout paint;
  box-shadow:0 30px 70px -40px rgba(15,30,46,.35)}
#quizBody .qx-skin svg{position:absolute;inset:0;display:block;width:100%;height:100%;will-change:transform}   /* four layers: one repaints without the others */
#quizBody .qx-skin__fib,#quizBody .qx-skin__fx,#quizBody .qx-skin__air{pointer-events:none}
#quizBody .qx-skin::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(15,30,46,.06),inset 0 -60px 80px -60px rgba(15,30,46,.16)}
#quizBody .qx-skin__cap{position:absolute;inset-inline-start:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px);margin:0;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#3B4A59;font:400 .76rem/1.35 var(--ed-sans);letter-spacing:0}
/* the slow life of the air: the light breathes, bubbles float, sparkles turn on and off */
#quizBody .qx-beam{animation:qxBeam 9s ease-in-out var(--d,0s) infinite}
@keyframes qxBeam{0%,100%{opacity:calc(var(--o,.5) * .45)}50%{opacity:var(--o,.5)}}
#quizBody .qx-bub{animation:qxFloat var(--t,9s) ease-in-out var(--d,0s) infinite}
@keyframes qxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
#quizBody .qx-spark{animation:qxTw 4.6s ease-in-out var(--d,0s) infinite}
@keyframes qxTw{0%,100%{opacity:.12}50%{opacity:.95}}
#quizBody .qx-skin__air.is-moment .qx-spark{animation-duration:1.4s}
/* an answer taken: a soft light passes over the surface */
#quizBody .qx-pulse{opacity:0;transform-box:fill-box;transform-origin:center}
#quizBody .qx-pulse.on{animation:qxPulse .9s ease-out}
@keyframes qxPulse{0%{opacity:0;transform:scale(.4)}25%{opacity:.8}100%{opacity:0;transform:scale(1.3)}}
#quizBody .qx-skin.is-off *{animation-play-state:paused!important}

/* ---------- the steps ---------- */
#quizBody .qx-step{max-width:620px;width:100%}
#quizBody .qx-step.is-fwd{animation:qxIn .55s var(--qx-ease) backwards;--dx:-28px}
#quizBody .qx-step.is-back{animation:qxIn .55s var(--qx-ease) backwards;--dx:28px}
@keyframes qxIn{from{opacity:0;transform:translateX(var(--dx,0))}}
#quizBody .qx-eyebrow,#quizBody .qx-kicker{margin:0 0 14px;max-width:none;font:400 .8rem/1.3 var(--ed-sans);color:var(--qx-mute)}
#quizBody .qx-eyebrow span{font-family:var(--ed-latin);letter-spacing:.14em;text-transform:uppercase;font-size:.74rem}
#quizBody #qTitle:focus,#quizBody #qTitle:focus-visible{outline:none}   /* the step's title takes the focus to be read out; it is not a control */
#quizBody .qx-h1,#quizBody .qx-h2{margin:0;max-width:none;font-family:var(--ed-serif)!important;font-weight:200!important;color:var(--qx-ink)!important;
  letter-spacing:0;text-wrap:balance}
#quizBody .qx-h1{font-size:clamp(2.35rem,1.35rem + 2.9vw,4rem)!important;line-height:1.06!important}
#quizBody .qx-h2{font-size:clamp(1.9rem,1.1rem + 2.1vw,3.05rem)!important;line-height:1.12!important}
#quizBody .qx-lead{margin:20px 0 0;max-width:44ch;font-size:clamp(1rem,.92rem + .3vw,1.16rem);line-height:1.8;font-weight:300;color:#24323F}

/* the intro: the four questions, as a short path */
#quizBody .qx-path{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:560px;margin:30px 0 0;padding:0}
#quizBody .qx-path li{padding-top:12px;border-top:1px solid var(--qx-ink);font-size:.9rem;line-height:1.35;color:var(--qx-ink)}
#quizBody .qx-path b{display:block;margin-bottom:6px;font:400 .74rem/1 var(--ed-latin);letter-spacing:.1em;color:var(--qx-mute)}
#quizBody .qx-note{margin:20px 0 0;font-size:.92rem;line-height:1.6;color:var(--qx-mute)}
#quizBody .qx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:30px}
#quizBody .qx-start{min-width:220px;min-height:52px;font-size:.95rem}
#quizBody .qx-link{min-height:44px;padding:0 2px;border:0;background:none;color:var(--qx-ink);font:500 .9rem/1.2 var(--ed-sans);cursor:pointer;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em;text-decoration-color:rgba(15,30,46,.35)}
#quizBody .qx-link:hover{color:var(--qx-accent);text-decoration-color:currentColor}
#quizBody .qx-live{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:.86rem;line-height:1.5;color:var(--qx-mute)}
#quizBody .qx-live i{flex:none;width:8px;height:8px;border-radius:50%;background:#E0707C;animation:qxLive 2.4s ease-out infinite}
@keyframes qxLive{0%{box-shadow:0 0 0 0 rgba(224,112,124,.45)}70%,100%{box-shadow:0 0 0 9px rgba(224,112,124,0)}}

/* a question: where you are, the question, the answers as cards */
#quizBody .qx-prog{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(14px,2.6vh,26px)}
#quizBody .qx-prog__t{font-size:.86rem;color:var(--qx-mute)}
#quizBody .qx-prog__bar{display:flex;gap:6px}
#quizBody .qx-prog__bar i{display:block;width:34px;height:4px;border-radius:2px;background:var(--ed-sand,#E3E9EF);transition:background .45s var(--qx-ease)}
#quizBody .qx-prog__bar i.is-done{background:var(--qx-ink)}
#quizBody .qx-prog__bar i.is-now{background:var(--qx-accent)}
#quizBody .qx-hint{margin:12px 0 0;font-size:.98rem;line-height:1.6;color:var(--qx-mute)}
#quizBody .qx-opts{display:grid;gap:10px;margin-top:clamp(18px,3.4vh,32px)}
#quizBody .qopt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;min-height:68px;margin:0;
  padding:14px 18px!important;text-align:start;border:1px solid var(--qx-line)!important;border-radius:16px!important;background:#FFFFFF!important;
  color:var(--qx-ink)!important;font:400 1.05rem/1.4 var(--ed-sans)!important;letter-spacing:0;box-shadow:0 1px 2px rgba(15,30,46,.04)!important;cursor:pointer;
  -webkit-backdrop-filter:none;backdrop-filter:none;transform:none;
  transition:border-color .2s ease,box-shadow .3s var(--qx-ease),transform .3s var(--qx-ease),background-color .2s ease;
  animation:qxUp .5s var(--qx-ease) backwards;animation-delay:calc(70ms + var(--i,0) * 55ms)}
@keyframes qxUp{from{opacity:0;transform:translateY(10px)}}
#quizBody .qopt::after{content:none!important}
#quizBody .qopt:hover{border-color:rgba(15,30,46,.42)!important;box-shadow:0 14px 30px -16px rgba(15,30,46,.32)!important;transform:translateY(-1px);background:#FFFFFF!important}
#quizBody .qopt:active{transform:scale(.985);transition-duration:.08s}
#quizBody .qopt:focus-visible{outline:2px solid var(--qx-ink);outline-offset:3px;border-color:var(--qx-ink)!important;background:#FFFFFF!important}
#quizBody .qopt__mark{position:relative;flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(15,30,46,.3);transition:border-color .2s,background-color .2s}
#quizBody .qopt__mark::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--qx-ink);transform:scale(0);transition:transform .3s var(--qx-ease)}
#quizBody .qopt:hover .qopt__mark,#quizBody .qopt:focus-visible .qopt__mark{border-color:var(--qx-ink)}
#quizBody .qopt:hover .qopt__mark::after,#quizBody .qopt:focus-visible .qopt__mark::after{transform:scale(.55);opacity:.35}
#quizBody .qopt[aria-pressed="true"]{border-color:var(--qx-ink)!important;background:var(--qx-pearl)!important}
#quizBody .qopt[aria-pressed="true"] .qopt__mark{border-color:var(--qx-ink);background:var(--qx-ink)}
#quizBody .qopt[aria-pressed="true"] .qopt__mark::after{background:#FFFFFF;transform:scale(1);opacity:1}
#quizBody .qopt__t{min-width:0;text-wrap:pretty}
#quizBody .qx-go{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#quizBody .qopt .qx-go{opacity:0;transform:translateX(8px);transition:opacity .2s,transform .3s var(--qx-ease)}
#quizBody .qopt:hover .qx-go,#quizBody .qopt:focus-visible .qx-go{opacity:1;transform:none}
#quizBody .qback{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:16px 0 0;padding:0 4px;border:0;background:none;
  color:var(--qx-mute)!important;font:400 .92rem/1.2 var(--ed-sans);cursor:pointer}
#quizBody .qback:hover{color:var(--qx-ink)!important;text-decoration:none}
#quizBody .qx-backic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the result: "פרופיל העור שלכם" ---------- */
#quizBody .qx-res{max-width:680px}
#quizBody .qx-rv{transition:opacity .7s var(--qx-ease),transform .7s var(--qx-ease);transition-delay:calc(var(--n,0) * 90ms)}
#quizBody .qx-res.is-moment .qx-rv{opacity:0;transform:translateY(14px);transition:none;pointer-events:none}
#quizBody .qx-sec{margin-top:clamp(26px,4vw,40px)}
#quizBody .qx-h3{margin:0 0 14px;max-width:none;font:400 1.16rem/1.4 var(--ed-sans)!important;letter-spacing:0;color:var(--qx-ink)!important}
#quizBody .qx-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
#quizBody .qx-chips li{display:inline-flex;align-items:baseline;gap:7px;padding:9px 15px;border-radius:999px;background:var(--qx-pearl);font-size:.9rem;line-height:1.3}
#quizBody .qx-chips span{color:var(--qx-mute)}
#quizBody .qx-chips b{font-weight:500;color:var(--qx-ink)}
#quizBody .qx-intro2{margin:0 0 14px;max-width:none;font-size:1rem;line-height:1.6;color:var(--qx-mute)}
/* the formula */
#quizBody .qx-formula{display:grid;grid-template-columns:minmax(104px,150px) minmax(0,1fr);gap:clamp(16px,2.6vw,28px);align-items:center;
  padding:clamp(14px,2.4vw,24px);border:1px solid var(--qx-line);border-radius:20px;background:#FFFFFF;box-shadow:0 20px 50px -36px rgba(15,30,46,.4)}
#quizBody .qx-formula__img{aspect-ratio:4/5;border-radius:14px;background:#FEFEFE;overflow:hidden}
#quizBody .qx-formula__img img{width:100%;height:100%;object-fit:contain}
#quizBody .qx-formula__series{margin:0;font-size:.84rem;color:var(--qx-accent)}
#quizBody .qx-formula__name{margin:4px 0 0;max-width:none;font:300 clamp(1.5rem,1.1rem + 1vw,2rem)/1.1 var(--ed-latin)!important;letter-spacing:.005em;color:var(--qx-ink)!important}
#quizBody .qx-formula__step{margin:8px 0 0;font-size:.84rem;line-height:1.5;color:var(--qx-mute)}
#quizBody .qx-formula__desc{margin:8px 0 0;font-size:.95rem;line-height:1.65;color:#24323F}
#quizBody .qx-formula__buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:16px}
#quizBody .qx-price{margin-inline-end:4px;font:400 1.35rem/1 var(--ed-latin);color:var(--qx-ink);font-variant-numeric:tabular-nums}
#quizBody .qx-formula__buy .btn{min-height:48px;padding-inline:22px}
/* why */
#quizBody .qx-why ul{list-style:none;display:grid;gap:12px;margin:0;padding:0}
#quizBody .qx-why li{position:relative;max-width:none;padding-inline-start:22px;font-size:1rem;line-height:1.75;color:#24323F}
#quizBody .qx-why li::before{content:"";position:absolute;inset-inline-start:2px;top:.72em;width:8px;height:8px;border-radius:50%;background:var(--qx-accent);opacity:.75}
/* the kit */
#quizBody .qx-kit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 20px;padding:22px 24px;border-radius:20px;background:var(--qx-ink);color:#E7EDF2}
#quizBody .qx-kit__t h3{margin:0;max-width:none;font:500 1.06rem/1.4 var(--ed-sans)!important;letter-spacing:0;color:#FFFFFF!important}
#quizBody .qx-kit__t p{margin:6px 0 0;font-size:.86rem;line-height:1.5;color:#AAB7C4}
#quizBody .qx-kit__price{display:flex;align-items:baseline;gap:10px;margin:0;max-width:none}
#quizBody .qx-kit__price b{font:400 1.5rem/1 var(--ed-latin);color:#FFFFFF}
#quizBody .qx-kit__price s{font:400 .95rem/1 var(--ed-latin);color:#AAB7C4}
#quizBody .qx-kit .btn{grid-column:1/-1;justify-self:start;min-height:48px;background:#FFFFFF!important;color:var(--qx-ink)!important;border-color:#FFFFFF!important}
#quizBody .qx-kit .btn:hover{background:#DCE8F2!important;border-color:#DCE8F2!important}
#quizBody .qx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* or one by one */
#quizBody .qx-extras ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
#quizBody .qx-extra{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 14px;border:1px solid var(--qx-line);border-radius:16px;background:#FFFFFF}
#quizBody .qx-extra img{width:52px;height:64px;object-fit:contain;border-radius:8px;background:#FEFEFE}
#quizBody .qx-extra__t{min-width:0}
#quizBody .qx-extra__t b{display:block;font:500 .98rem/1.3 var(--ed-latin);color:var(--qx-ink)}
#quizBody .qx-extra__t span{display:block;margin-top:3px;font-size:.8rem;line-height:1.45;color:var(--qx-mute)}
#quizBody .qx-extra__p{font:400 1rem/1 var(--ed-latin);color:var(--qx-ink);font-variant-numeric:tabular-nums}
#quizBody .qx-extra .add{min-height:44px;padding:0 18px!important;border:1px solid var(--qx-ink)!important;border-radius:999px!important;background:transparent!important;
  color:var(--qx-ink)!important;font:500 .86rem/1 var(--ed-sans)!important;letter-spacing:0!important;cursor:pointer;transition:background-color .2s,color .2s}
#quizBody .qx-extra .add:hover{background:var(--qx-ink)!important;color:#FFFFFF!important}
/* in the clinic */
#quizBody .qx-clinic{padding:clamp(20px,3vw,30px);border-radius:22px;background:var(--qx-pearl)}
#quizBody .qx-clinic .qx-h3{font-family:var(--ed-serif)!important;font-weight:200!important;font-size:clamp(1.7rem,1.2rem + 1.2vw,2.3rem)!important;line-height:1.1;margin-bottom:8px}
#quizBody .qx-clinic__lead{margin:0;max-width:none;font-size:.98rem;line-height:1.6;color:var(--qx-mute)}
#quizBody .qx-treats{list-style:none;display:grid;gap:10px;margin:18px 0 0;padding:0}
#quizBody .qx-treat{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:44px;padding:10px 16px 10px 14px;border:1px solid var(--qx-line);
  border-radius:16px;background:#FFFFFF;color:var(--qx-ink);text-decoration:none;transition:border-color .2s,box-shadow .3s var(--qx-ease),transform .3s var(--qx-ease)}
#quizBody .qx-treat:hover{border-color:rgba(15,30,46,.42);box-shadow:0 14px 30px -18px rgba(15,30,46,.35);transform:translateY(-1px)}
#quizBody .qx-treat:focus-visible{outline:2px solid var(--qx-ink);outline-offset:3px}
#quizBody .qx-treat img{width:64px;height:64px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(15,30,46,.08)}
#quizBody .qx-treat__t{min-width:0}
#quizBody .qx-treat__t b{display:block;font:500 1.02rem/1.3 var(--ed-sans)}
#quizBody .qx-treat__t b.is-lat{font-family:var(--ed-latin)}
#quizBody .qx-treat__t span{display:block;margin-top:3px;font-size:.86rem;line-height:1.5;color:var(--qx-mute)}
#quizBody .qx-treat .qx-go{color:var(--qx-mute);transition:transform .3s var(--qx-ease),color .2s}
#quizBody .qx-treat:hover .qx-go{color:var(--qx-ink);transform:translateX(-4px)}
#quizBody .qx-book{margin-top:20px;min-height:50px;padding-inline:26px;text-decoration:none}
#quizBody .qx-fine{margin:12px 0 0;max-width:none;font-size:.84rem;line-height:1.6;color:var(--qx-mute)}
#quizBody .qx-again{padding-bottom:8px}
#quizBody .qx-again .btn{min-height:48px;padding-inline:24px}

/* ---------- a phone and a tablet held upright: the skin as a band at the top, the step under it ---------- */
@media (max-width:999px){
  #quizBody .qx{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 0 calc(40px + env(safe-area-inset-bottom,0px))}
  #quizBody .qx-skin{order:-1;position:sticky;top:var(--qx-bar);z-index:3;width:100%;height:clamp(180px,39svh,460px);min-height:0;max-height:none;border-radius:0 0 24px 24px;
    box-shadow:0 18px 40px -30px rgba(15,30,46,.45)}
  #quizBody .qx[data-step="result"] .qx-skin{position:relative;top:auto}
  #quizBody .qx-main{min-height:0;width:100%;max-width:680px;margin:0 auto;padding:22px var(--qx-g) 0;justify-content:flex-start}
  #quizBody .qx[data-step="result"] .qx-main{padding-top:22px}
  #quizBody .qx-intro .qx-h1{font-size:clamp(2.1rem,1.4rem + 3.4vw,3rem)!important}
  #quizBody .qx-lead{margin-top:14px}
  #quizBody .qx-path{margin-top:22px}
  #quizBody .qx-note{margin-top:16px}
  #quizBody .qx-actions{margin-top:22px}
  #quizBody .qx-live{margin-top:10px}
}
@media (max-width:999px) and (max-height:700px){
  #quizBody .qx-skin{height:clamp(150px,31svh,240px)}
}
@media (max-width:560px){
  #quizBody .qx-path{gap:10px}
  #quizBody .qx-path li{font-size:.84rem}
  #quizBody .qx-start{width:100%}
  #quizBody .qx-actions{flex-direction:column;align-items:stretch}
  #quizBody .qx-link{align-self:center}
  #quizBody .qx-prog__bar i{width:24px}
  #quizBody .qopt{min-height:60px;padding:12px 14px!important;gap:12px;font-size:1rem!important}
  #quizBody .qx-opts{gap:8px}
  #quizBody .qx-formula{grid-template-columns:96px minmax(0,1fr);align-items:start}
  #quizBody .qx-formula__buy{grid-column:1/-1}
  #quizBody .qx-formula__body{display:contents}
  #quizBody .qx-formula__series,#quizBody .qx-formula__name,#quizBody .qx-formula__step{grid-column:2}
  #quizBody .qx-formula__img{grid-row:1/span 3;grid-column:1}
  #quizBody .qx-formula__desc{grid-column:1/-1}
  #quizBody .qx-formula__buy .btn{flex:1 1 auto}
  #quizBody .qx-kit{grid-template-columns:1fr;padding:20px}
  #quizBody .qx-kit .btn{justify-self:stretch}
  #quizBody .qx-extra{grid-template-columns:44px minmax(0,1fr) auto;gap:10px 12px;padding:10px 12px}
  #quizBody .qx-extra img{width:44px;height:56px;grid-row:1/span 2}
  #quizBody .qx-extra__p{grid-column:2;grid-row:2;justify-self:start}
  #quizBody .qx-extra .add{grid-column:3;grid-row:1/span 2}
  #quizBody .qx-treat{grid-template-columns:52px minmax(0,1fr) auto;gap:12px;padding:10px 12px}
  #quizBody .qx-treat img{width:52px;height:52px}
  #quizBody .qx-book{display:flex;width:100%}
  #quizBody .qx-again .btn{width:100%}
}
@media (max-width:360px){
  #quizBody .qx-path{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
  #quizBody .qx-chips li{padding:8px 12px;font-size:.86rem}
  #quizBody .qx-treat .qx-go{display:none}
  #quizBody .qx-treat{grid-template-columns:48px minmax(0,1fr)}
  #quizBody .qx-treat img{width:48px;height:48px}
}
/* a phone held sideways, or any short wide window: side by side again, the skin as tall as the window allows */
@media (min-width:640px) and (max-width:999px) and (orientation:landscape) and (max-height:560px){
  #quizBody .qx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:24px;padding:12px var(--qx-g) 0}
  #quizBody .qx-skin{order:0;position:sticky;top:calc(var(--qx-bar) + 12px);height:calc(100svh - var(--qx-bar) - 24px);border-radius:20px}
  #quizBody .qx[data-step="result"] .qx-skin{position:sticky;top:calc(var(--qx-bar) + 12px)}
  #quizBody .qx-main{padding:12px 0 40px}
}

/* ---------- less motion: every state still changes, nothing travels ---------- */
@media (prefers-reduced-motion:reduce){
  #quizBody .qx-skin *,#quizBody .qx-step,#quizBody .qopt,#quizBody .qx-live i{animation:none!important}
  #quizBody .qx-rv,#quizBody .qopt,#quizBody .qx-treat,#quizBody .qopt .qx-go,#quizBody .qx-prog__bar i{transition:none!important}
  #quizBody .qx-res.is-moment .qx-rv{opacity:1;transform:none}
  #quizBody .qopt:hover,#quizBody .qx-treat:hover,#quizBody .qopt:active{transform:none}
}