:root{--quiz-scale:1;--display:"TT Runs",Montserrat,Arial,sans-serif;--body:Montserrat,Arial,sans-serif;--mobile-max:480px;color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;background:#eee5e1;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 16px/1.3 var(--body);color:#2f1201}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid #b05252;outline-offset:2px}
.mobile-viewport,.overlay-viewport{width:100%;max-width:var(--mobile-max);margin-inline:auto}
.mobile-shell,#layers{width:360px;zoom:var(--quiz-scale)}
.mobile-shell{position:relative;min-height:calc(100svh / var(--quiz-scale));background:#fff;outline:none;isolation:isolate}
.overlay-viewport{position:fixed;inset:0;z-index:50;pointer-events:none}
#layers{position:relative;height:calc(100dvh / var(--quiz-scale));pointer-events:none}
#layers>*{pointer-events:auto}
.quiz-page{background:var(--stage-bg);min-height:calc(100svh / var(--quiz-scale))}
.quiz-footer{padding:32px 10px max(20px,env(safe-area-inset-bottom))}
.quiz-next{border:0;border-radius:100px;background:var(--next-bg);color:var(--next-color);width:100%;min-height:49px;position:relative;display:flex;align-items:center;justify-content:center;padding:8px 47px;font:600 16px/1.3 var(--display);text-transform:uppercase}
.quiz-next img{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:37px;height:37px}
.quiz-next:disabled{opacity:.7;cursor:progress}
.quiz-error{background:#fff3ef;color:#702528;font:500 14px/1.45 var(--body);padding:12px 14px;border-radius:12px;margin:0 0 12px}
.quiz-error:empty,[hidden]{display:none!important}
#notice{position:fixed;z-index:100;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),450px);padding:12px 16px;border-radius:14px;color:#fff;background:#403933;font:500 14px/1.45 var(--body);box-shadow:0 4px 20px #0002}
#answers{position:relative}
.quiz-next-label{display:block;max-width:100%;min-height:21px}
.choice-mark{display:block;position:relative;width:25px;height:25px;flex:none}
.choice-mark img{position:absolute;inset:0;display:block;width:25px;height:25px;transition:opacity .2s ease}
.mark-on,[aria-pressed=true] .mark-off{opacity:0}
[aria-pressed=true] .mark-on{opacity:1}
[data-choice]{transition:color .18s ease,background-color .18s ease,border-color .18s ease}
/* A full-width shell paints the closed pill. Its open-state corners use fixed
   slices, so the fill reaches both edges at every intermediate panel height. */
.accordion{width:100%;min-width:0;position:relative;isolation:isolate;border-radius:31px;background-color:var(--accordion-fill,#403933)}
.accordion::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-image:var(--accordion-shape) 31 fill / 31px / 0 stretch;opacity:0;transition:opacity 260ms ease}
.accordion[data-open="true"]::before{opacity:1}
.accordion-trigger{display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:10px;align-items:center;width:100%;min-height:62px;margin:0;padding:13px;border:0;border-radius:31px;background:transparent;color:inherit;text-align:left;appearance:none;cursor:pointer}
.accordion-trigger img:last-child{transition:transform 260ms cubic-bezier(.22,.68,.2,1)}
.accordion-panel{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:0fr;transition:grid-template-rows 280ms cubic-bezier(.22,.68,.2,1)}
.accordion-trigger[aria-expanded="true"]+.accordion-panel{grid-template-rows:1fr}
.accordion-clip{min-height:0;min-width:0;overflow:hidden}

.sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Dissolve directly from the previous frame into the next, including a stage change
   from the bottom of a long questionnaire to the top of the following stage. */
::view-transition-old(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){animation:quiz-dissolve 280ms cubic-bezier(.22,.68,.2,1) both;mix-blend-mode:normal}
@keyframes quiz-dissolve{from{opacity:0}to{opacity:1}}
