/* Mouse quiz. Loaded only on /quiz/ with recommend.css, which supplies the .pcard product card.
   Two screens, both built from .quiz-panel (the card a question or the results summary sits in) and
   .quiz-option (the selection card used for every answer, the no-preference answer included, every
   hand size and every loosen button). Motion lives here, never in the markup: a step change slides the
   old question out and the new one in while the panel's height eases, a picked card springs and draws
   its tick, each illustration moves when its card is hovered or picked, and the results rise in order.
   Everything animated is a transform or opacity (plus the one panel height), and reduced motion turns
   it all off. Timing comes from the site tokens: --fast, --base, --ease-out and --spring. */
.quiz{width:100%;max-width:720px;margin:0 auto}
.quiz-progress{font-size:13px;color:var(--muted);margin:0}
/* Filled buttons use the darker accent so white text passes AA; the design track's token wins once it lands. */
.quiz .button.primary{background:var(--accent-fill,#c93d1a)}
.quiz .button.primary:hover{background:color-mix(in srgb,var(--accent-fill,#c93d1a) 86%,black)}

/* ---------- Static intro (server-rendered, above the panel) ---------- */
.document-page .quiz-intro{margin:0 0 16px;text-align:center}
.document-page .quiz-intro h1{font-size:clamp(28px,4.4vw,38px);margin:0}

/* ---------- Panel ---------- */
.quiz-panel{--pad:28px;position:relative;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);border-radius:16px;padding:var(--pad);overflow:hidden}
.quiz-panel.is-sizing{transition:height .32s var(--ease-out)}
.quiz-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px}
/* The bar is decoration; "Step 3 of 7" beside it carries the meaning for anyone not looking at it. */
.quiz-bar{flex:1 1 auto;max-width:200px;height:5px;border-radius:999px;background:var(--line);overflow:hidden}
.quiz-bar span{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.quiz-count{margin:0;font-size:13.5px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.document-page .quiz-title{font-family:var(--display);font-size:clamp(27px,4.6vw,34px);line-height:1.08;margin:0;outline:none}
/* Headings take focus for screen readers after a step change; they are not controls, so no ring. */
.quiz .quiz-title[tabindex="-1"]:focus{outline:none}
.document-page .quiz-note{font-size:14px;color:var(--muted);margin:9px 0 0;max-width:58ch}

/* ---------- Step transitions ----------
   The new stage slides in from the side the reader is moving toward; a copy of the old one, absolutely
   positioned where it stood, slides out the other way and is removed when its animation ends. */
.quiz-stage{animation:quiz-enter .36s var(--ease-out) both}
.quiz-stage.from-back{animation-name:quiz-enter-back}
.quiz-stage.is-leaving{position:absolute;left:var(--pad);right:var(--pad);pointer-events:none;animation:quiz-exit-left .22s var(--ease-out) both}
.quiz-stage.is-leaving.exit-right{animation-name:quiz-exit-right}
@keyframes quiz-enter{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes quiz-enter-back{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes quiz-exit-left{to{opacity:0;transform:translateX(-28px)}}
@keyframes quiz-exit-right{to{opacity:0;transform:translateX(28px)}}

/* ---------- Hand hero ---------- */
.quiz-hero{margin:18px 0 0;text-align:center;color:var(--muted)}
.quiz-hero svg{display:block;margin:0 auto;height:clamp(140px,36vw,176px);width:auto;max-width:100%}
.document-page .quiz-hero-caption{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
/* The measurement draws itself when the question opens: the crease first, then the dimension line. */
.hero-crease{stroke-dasharray:5 5;animation:quiz-dash .9s var(--ease-out) both}
.hero-dim path{stroke-dasharray:200;stroke-dashoffset:200;animation:quiz-draw .8s var(--ease-out) .25s forwards}
@keyframes quiz-draw{to{stroke-dashoffset:0}}
@keyframes quiz-dash{from{opacity:0}to{opacity:1}}

/* ---------- Unit toggle ---------- */
.quiz-units{display:flex;gap:2px;width:max-content;margin:14px 0 0 auto;padding:3px;border-radius:999px;background:var(--surface-2)}
.quiz-unit{min-width:54px;min-height:40px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:background var(--fast),color var(--fast)}
.quiz-unit:hover{color:var(--ink)}
.quiz-unit.is-picked{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(20,22,26,.12)}

/* ---------- Selection cards ----------
   Three columns on a wide screen (four for the size chips), two on a phone. The no-preference card is
   last and spans the columns its row has left (quiz.js sets --span-wide and --span-narrow), so it is
   either one card among the others or a full row of its own, never a hole. */
.quiz-options{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:10px;margin:18px 0 0}
.quiz-options[data-cols="4"]{--cols:4}
.quiz-options[data-cols="2"]{--cols:2}
.quiz-option.is-any{grid-column:span var(--span-wide,1)}
/* A loosen grid has no "any" card: an odd card last would leave a hole, so it takes the row. */
.quiz-loosen .quiz-options .quiz-option:last-child:nth-child(3n+1){grid-column:1/-1}
.quiz-option{
 --quiz-paper:var(--surface);
 position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
 min-height:96px;padding:16px 12px 14px;border-radius:12px;text-align:center;color:var(--ink);background:var(--quiz-paper);
 box-shadow:inset 0 0 0 1px var(--line-strong);cursor:pointer;-webkit-tap-highlight-color:transparent;
 transition:background var(--fast),box-shadow var(--fast),color var(--fast),transform .18s var(--ease-out)
}
.quiz-option:hover{--quiz-paper:var(--surface-2);transform:translateY(-1px)}
.quiz-option:active{transform:scale(.96);transition-duration:.06s}
.quiz-option:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.quiz-option.is-picked{--quiz-paper:color-mix(in srgb,var(--accent) 10%,var(--surface));box-shadow:inset 0 0 0 2px var(--accent)}
.quiz-option.is-landing{animation:quiz-land .5s var(--spring)}
@keyframes quiz-land{0%{transform:scale(.96)}60%{transform:scale(1.03)}100%{transform:none}}
/* Key numbers are a pointer-and-keyboard affordance; touch screens never see them. */
.quiz-key{position:absolute;top:8px;left:9px;min-width:18px;height:18px;padding:0 5px;border-radius:5px;font:600 11px/18px var(--body);color:var(--muted);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.quiz-option.is-picked .quiz-key{color:var(--accent);background:transparent}
@media (hover:none),(pointer:coarse),(max-width:600px){.quiz-key{display:none}}
.quiz-slot{display:grid;place-items:center;min-height:56px;margin-bottom:6px;color:var(--muted);transition:color var(--fast)}
.quiz-option:hover .quiz-slot{color:var(--ink)}
.quiz-option.is-picked .quiz-slot{color:var(--accent)}
.quiz-art{height:56px;width:auto;overflow:visible}
.quiz-art.wide{height:78px}
.quiz-art.tall{height:74px}
.quiz-figure{font-family:var(--display);font-size:36px;font-weight:700;line-height:1;letter-spacing:-.015em;color:var(--ink)}
.quiz-option.is-picked .quiz-figure{color:var(--accent)}
.quiz-text{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.quiz-label{font-size:16px;font-weight:600;line-height:1.25}
.quiz-sub{font-size:13px;line-height:1.35;color:var(--muted);max-width:26ch}
/* The tick: a filled dot that springs in, then draws its stroke. */
.quiz-tick{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;animation:quiz-tick .4s var(--spring) both}
.quiz-tick svg{width:14px;height:14px;stroke-dasharray:20;stroke-dashoffset:20;animation:quiz-tick-draw .28s var(--ease-out) .1s forwards}
@keyframes quiz-tick{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes quiz-tick-draw{to{stroke-dashoffset:0}}
.quiz-switch{margin:12px 0 0;text-align:center}
.quiz-switch .text-button{min-height:40px;padding:0 10px}

/* The no-preference card: the same size and hit area as the others, muted and dashed so it reads as
   "skip this". When it has a row to itself (quiz.js adds row-wide / row-narrow per width) the picture
   sits beside the words instead of above them, so the wide card stays short. */
.quiz-option.is-any{--quiz-paper:color-mix(in srgb,var(--surface-2) 55%,var(--surface));box-shadow:none;border:1.5px dashed var(--line-strong)}
.quiz-option.is-any:hover{--quiz-paper:var(--surface-2);border-color:var(--ink)}
.quiz-option.is-any.is-picked{--quiz-paper:color-mix(in srgb,var(--accent) 10%,var(--surface));border-style:solid;border-color:var(--accent);box-shadow:inset 0 0 0 .5px var(--accent)}
.quiz-option.is-any:focus-visible{border-color:var(--accent);box-shadow:inset 0 0 0 .5px var(--accent)}
.quiz-option.is-any.row-wide{flex-direction:row;gap:14px;padding:14px 16px;min-height:72px}
.quiz-option.is-any.row-wide .quiz-slot{min-height:0;margin:0;flex:none}
.quiz-option.is-any.row-wide .quiz-art{height:40px}
.quiz-option.is-any.row-wide .quiz-text{align-items:flex-start;text-align:left}

/* ---------- Illustration motion: each drawing does its one thing while the card is hovered or picked ---------- */
.quiz-option:is(:hover,.is-picked) .sig path:nth-child(1){animation:quiz-sig 1.4s ease-in-out infinite .3s}
.quiz-option:is(:hover,.is-picked) .sig path:nth-child(2){animation:quiz-sig 1.4s ease-in-out infinite .15s}
.quiz-option:is(:hover,.is-picked) .sig circle{animation:quiz-sig 1.4s ease-in-out infinite}
@keyframes quiz-sig{0%,100%{opacity:.35}50%{opacity:1}}
.quiz-option:is(:hover,.is-picked) .cable{animation:quiz-sway 1.6s ease-in-out infinite}
@keyframes quiz-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.hand{transform-origin:120px 40px}
.thumb{transform-origin:78px 50px}
.quiz-option:is(:hover,.is-picked) .hand{animation:quiz-curl 1.4s ease-in-out infinite}
.quiz-option:is(:hover,.is-picked) .thumb{animation:quiz-thumb 1.4s ease-in-out infinite}
@keyframes quiz-curl{0%,100%{transform:rotate(0)}50%{transform:rotate(2.5deg)}}
@keyframes quiz-thumb{0%,100%{transform:rotate(0)}50%{transform:rotate(-4deg)}}
.quiz-option:is(:hover,.is-picked) .axis{animation:quiz-axis 1.2s linear infinite}
@keyframes quiz-axis{to{stroke-dashoffset:-14}}
.quiz-option:is(:hover,.is-picked) .float{animation:quiz-float 1.6s ease-in-out infinite}
@keyframes quiz-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.quiz-option:is(:hover,.is-picked) .tool{animation:quiz-twist 1.2s ease-in-out infinite}
@keyframes quiz-twist{0%,100%{transform:rotate(0)}50%{transform:rotate(-10deg)}}
/* "Any": the three shells take turns lifting off the desk. */
.quiz-option:is(:hover,.is-picked) .trio>g{animation:quiz-float 1.5s ease-in-out infinite}
.quiz-option:is(:hover,.is-picked) .trio>g:nth-child(2){animation-delay:.2s}
.quiz-option:is(:hover,.is-picked) .trio>g:nth-child(3){animation-delay:.4s}
.quiz-option .quiz-figure{transition:transform .3s var(--spring)}
.quiz-option:is(:hover,.is-picked) .quiz-figure{transform:scale(1.06)}

/* ---------- Panel footer: real buttons, Back on the left, Next on the right ---------- */
.quiz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.quiz-foot .button{min-height:44px;padding:0 18px;gap:8px}
.quiz-foot .button .ui-icon{width:16px;height:16px}

/* ---------- Results ---------- */
.quiz-answers{list-style:none;padding:0!important;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.quiz-answers li{max-width:none}
.quiz-answers .quiz-chip{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:40px;font-size:13.5px;font-weight:500;line-height:1.2;padding:8px 13px;border-radius:999px;background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background var(--fast),box-shadow var(--fast),transform .12s var(--ease-out)}
.quiz-answers .quiz-chip:hover{background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--ink)}
.quiz-answers .quiz-chip:active{transform:scale(.97)}
.quiz-answers .quiz-chip.is-any{color:var(--muted);box-shadow:none;border:1.5px dashed var(--line-strong);padding:7px 12px}
.quiz-answers .quiz-chip.is-any:hover{color:var(--ink);border-color:var(--ink)}
.quiz-answers .quiz-chip.is-relaxed{text-decoration:line-through;color:var(--muted)}
.quiz-answers .quiz-chip .ui-icon{width:12px;height:12px;flex-basis:12px;color:var(--muted)}
.document-page .quiz-fit{color:var(--muted);max-width:66ch;font-size:14px;margin:14px 0 0}
.document-page .quiz-relaxed{display:flex;gap:8px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:14px;line-height:1.45}
.quiz-relaxed .ui-icon{flex:0 0 16px;width:16px;height:16px;margin-top:3px;color:var(--accent)}
.quiz-loosen{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.document-page .quiz-loosen p{margin:0;font-size:14px;color:var(--muted)}

/* The reveal: the summary first, then the best fit rising and settling, the runners-up after it, then
   the actions. Photos fade in over their skeleton once they have loaded (media.js marks them ready). */
.quiz-summary{animation:quiz-rise .4s var(--ease-out) both}
.quiz-picks{margin:14px 0 0}
.quiz-pick,.quiz-runner{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;animation:quiz-rise .5s var(--ease-out) both}
.quiz-pick{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);border:1.5px solid var(--accent);animation:quiz-hero .6s var(--spring) .1s both}
.quiz-runners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:12px 0 0}
.quiz-runner:nth-child(1){animation-delay:.28s}
.quiz-runner:nth-child(2){animation-delay:.38s}
.quiz-picks .quiz-disclosure,.quiz-picks .quiz-next,.quiz-more-wrap,.quiz-foot-note{animation:quiz-rise .4s var(--ease-out) .5s both}
@keyframes quiz-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes quiz-hero{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
.quiz-pick-photo .pimg.is-ready,.quiz-runner-photo .pimg.is-ready{animation:quiz-photo .45s var(--ease-out) both}
@keyframes quiz-photo{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.document-page .quiz-pick-label{position:absolute;top:12px;left:12px;z-index:1;margin:0;font-size:12px;font-weight:600;line-height:1;padding:6px 9px;border-radius:999px;background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.quiz-pick .quiz-pick-label{background:var(--accent-fill,#c93d1a);color:#fff;box-shadow:none}
.quiz-pick-photo,.quiz-runner-photo{display:grid;place-items:center;background:var(--photo-plate,var(--photo));padding:28px;min-height:240px}
.quiz-pick-photo img{width:100%;max-width:240px;max-height:240px;object-fit:contain}
.quiz-runner-photo{min-height:150px;padding:16px 16px 12px}
.quiz-runner-photo img{width:100%;max-width:150px;max-height:130px;object-fit:contain}
.quiz-pick-body{padding:22px 24px 22px;display:flex;flex-direction:column;gap:8px;min-width:0}
.quiz-runner-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:7px;min-width:0}
.document-page .quiz-pick-name{font-family:var(--display);font-size:clamp(28px,4vw,36px);line-height:1;margin:0;overflow-wrap:anywhere}
.document-page .quiz-runner-name{font-family:var(--display);font-size:24px;line-height:1.05;margin:0;overflow-wrap:anywhere}
.quiz-seal{display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:100%;font-size:12.5px;font-weight:600;padding:4px 9px 4px 5px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
.quiz-seal img{width:18px;height:18px;border-radius:50%}
.quiz-why{list-style:none;padding:0!important;margin:4px 0 0;display:grid;gap:5px;font-size:14.5px;line-height:1.4}
.quiz-why li{display:flex;gap:8px;align-items:flex-start;max-width:none}
.quiz-why .ui-icon{flex:0 0 16px;width:16px;height:16px;margin-top:3px;color:var(--accent)}
.quiz-runner .quiz-why{font-size:13.5px}
.quiz-pick-body .pcard-specs,.quiz-runner-body .pcard-specs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:2px 0 0;padding:0}
.quiz-pick-body .pcard-specs li,.quiz-runner-body .pcard-specs li{flex:0 1 auto;max-width:100%}
.quiz-pick-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:auto 0 0;padding-top:10px}
.quiz-pick-actions .button{text-decoration:none;gap:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.quiz-pick-actions .button .ui-icon{width:15px;height:15px}
.quiz-video{display:inline-flex;align-items:center;gap:5px;min-height:40px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;padding:6px 4px}
.quiz-video:hover{color:var(--ink)}
.quiz-video .ui-icon{width:15px;height:15px;fill:currentColor}
.document-page .quiz-disclosure{margin:12px 0 0;font-size:12px;color:var(--muted)}
.quiz-next{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.quiz-next .button{text-decoration:none;gap:6px}
.quiz-next .button .ui-icon{width:15px;height:15px}
.document-page .quiz-foot-note{margin:22px 0 10px;font-size:13px}

/* More matches: closed by default so the three picks stay the answer. */
.quiz-more-wrap{margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.quiz-more-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--display);font-size:22px;font-weight:700;color:var(--ink);padding:4px 0}
.quiz-more-toggle .ui-icon{width:18px;height:18px;transition:transform var(--base) var(--ease-out)}
.quiz-more-toggle[aria-expanded="true"] .ui-icon{transform:rotate(90deg)}
.quiz-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0 12px}
.quiz-sort{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.quiz-sort select{width:auto;min-height:36px;padding:6px 32px 6px 10px;font-size:14px}
.quiz-results{list-style:none;padding:0!important;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.quiz-results li{max-width:none}
.quiz-card .pcard-brand .status-badge,.quiz-pick .status-badge,.quiz-runner .status-badge{margin-left:6px;vertical-align:1px}
.quiz-card .pcard-actions .button{gap:5px}
.quiz-card .quiz-seal{font-size:11.5px;padding:3px 8px 3px 4px}
.quiz-card .quiz-seal img{width:15px;height:15px}
.quiz-more{margin:16px 0 0;text-align:center}
/* Cards sit in a grid here, not the finder's carousel, so the spec chips and actions need their own row rules. */
.quiz-card .pcard-name{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.1;margin:0;overflow-wrap:anywhere}
.quiz-card .pcard-specs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:auto 0 0;padding:12px 0 0}
.quiz-card .pcard-specs li{flex:0 1 auto;min-width:0;max-width:100%}
.quiz-card .pcard-actions{flex-wrap:wrap}
.quiz-card .pcard-actions .button{flex:1 1 40%}

@media(max-width:700px){
 .quiz-pick{grid-template-columns:1fr}
 .quiz-pick-photo{min-height:200px;padding:36px 24px 20px}
 .quiz-pick-photo img{max-width:200px;max-height:200px}
}
@media(max-width:600px){
 .quiz-panel{--pad:18px}
 .quiz-panel-head{margin-bottom:14px}
 .quiz-options{--cols:2!important;gap:8px}
 .quiz-option.is-any{grid-column:span var(--span-narrow,1)}
 .quiz-loosen .quiz-options .quiz-option:last-child:nth-child(3n+1){grid-column:auto}
 .quiz-loosen .quiz-options .quiz-option:last-child:nth-child(odd){grid-column:1/-1}
 .quiz-bar{max-width:130px}
 .quiz-option{padding:14px 10px 12px;min-height:88px}
 .quiz-option.is-any.row-wide:not(.row-narrow){flex-direction:column;gap:2px;padding:14px 10px 12px;min-height:88px}
 .quiz-option.is-any.row-wide:not(.row-narrow) .quiz-slot{min-height:56px;margin-bottom:6px}
 .quiz-option.is-any.row-wide:not(.row-narrow) .quiz-art{height:56px}
 .quiz-option.is-any.row-wide:not(.row-narrow) .quiz-text{align-items:center;text-align:center}
 .quiz-option.is-any.row-narrow{flex-direction:row;gap:12px;padding:12px 14px;min-height:64px}
 .quiz-option.is-any.row-narrow .quiz-slot{min-height:0;margin:0;flex:none}
 .quiz-option.is-any.row-narrow .quiz-art{height:40px}
 .quiz-option.is-any.row-narrow .quiz-text{align-items:flex-start;text-align:left}
 .quiz-figure{font-size:31px}
 .quiz-label{font-size:15.5px}
 .quiz-sub{font-size:12.5px}
 .quiz-foot .button{flex:1 1 auto;min-height:48px}
 .quiz-runners{grid-template-columns:1fr}
 .quiz-runner{display:grid;grid-template-columns:120px minmax(0,1fr)}
 .quiz-runner-photo{min-height:0;padding:34px 10px 12px}
 .quiz-runner-photo img{max-width:100px}
 .quiz-pick-body{padding:18px 18px 20px}
 .quiz-results{grid-template-columns:repeat(2,minmax(0,1fr))}
 .quiz-next .button{flex:1 1 auto;min-height:44px}
}
@media(prefers-reduced-motion:reduce){
 .quiz-option,.quiz-bar span,.quiz-more-toggle .ui-icon,.quiz-panel.is-sizing,.quiz-answers .quiz-chip,.quiz-option .quiz-figure{transition:none}
 .quiz-option:active,.quiz-option:hover,.quiz-answers .quiz-chip:active,.quiz-option:is(:hover,.is-picked) .quiz-figure{transform:none}
 .quiz-stage,.quiz-option.is-landing,.quiz-tick,.quiz-tick svg,.quiz-summary,.quiz-pick,.quiz-runner,.hero-crease,.hero-dim path,
 .quiz-picks .quiz-disclosure,.quiz-picks .quiz-next,.quiz-more-wrap,.quiz-foot-note,.quiz-pick-photo .pimg.is-ready,.quiz-runner-photo .pimg.is-ready,
 .quiz-option:is(:hover,.is-picked) :is(.sig path,.sig circle,.cable,.hand,.thumb,.axis,.float,.tool,.trio>g){animation:none}
 .quiz-tick svg{stroke-dashoffset:0}
 .hero-dim path{stroke-dashoffset:0}
}