/* Twenty individually art-directed pages. Structure stays steady for one-hand use. */
html[data-quiz-theme]{background:var(--quiz-bg);--blue:var(--quiz-accent);--ink:var(--quiz-title);--hairline:var(--quiz-border)}
html[data-quiz-mode=dark]{color-scheme:dark}html[data-quiz-mode=light]{color-scheme:light}
[data-quiz-theme] body{background:var(--quiz-bg);color:var(--quiz-text)}
[data-quiz-theme] main{position:relative;isolation:isolate}
[data-quiz-theme] .header,[data-quiz-theme] .header nav{border-color:var(--quiz-border);color:var(--quiz-text);background:var(--quiz-bg)}
[data-quiz-theme] .brand,[data-quiz-theme] .brand-mark{color:var(--quiz-accent);border-color:var(--quiz-accent)}
[data-quiz-theme] .quiz h1{color:var(--quiz-title);font-size:25px;line-height:1.65;letter-spacing:.35px}
[data-quiz-theme] .quiz .scene,[data-quiz-theme] .question-counter b{color:var(--quiz-accent)}
[data-quiz-theme] .quiz .scene>span:last-child,[data-quiz-theme] .quiz .hint,[data-quiz-theme] .quiz-footnote,[data-quiz-theme] .question-counter,[data-quiz-theme] .quiz-sound>span{color:var(--quiz-muted)}
[data-quiz-theme] .question-heading{position:relative;padding:0 0 3px}
[data-quiz-theme] .progress{background:var(--quiz-border)}[data-quiz-theme] .progress span{background:var(--quiz-accent)}
[data-quiz-theme] .journey-strip{height:150px;margin:0 0 13px;background:var(--quiz-raised);border-radius:18px 18px 5px 5px;border:1px solid var(--quiz-border);box-shadow:0 6px 25px #0000000b}
[data-quiz-theme] .journey-strip img{object-position:center;filter:none}
[data-quiz-theme] .journey-strip:after{background:linear-gradient(0deg,#071019ee,#071019b3 50%,transparent)}
[data-quiz-theme] .strip-caption strong{font-size:20px;letter-spacing:2px}
[data-quiz-theme] .strip-time{background:#08121cc4;border:1px solid #ffffff80}
[data-quiz-theme] .strip-caption{color:#FFF8EF;text-shadow:0 1px 5px #00000066}
[data-quiz-theme] .quiz .choice-card{background:var(--choice-paper);border-color:var(--quiz-border);box-shadow:0 2px 10px #00000007;min-height:105px}
[data-quiz-theme] .choice-art{color:var(--choice-ink);background:var(--quiz-raised)}
[data-quiz-theme] .choice-caption{color:var(--choice-ink)}
[data-quiz-theme] .choice-sentence{color:var(--quiz-text);font-size:12px;line-height:1.85}
[data-quiz-theme] .quiz .choice-card .option-check{background:var(--quiz-surface);border-color:var(--quiz-muted);color:var(--quiz-title)}
[data-quiz-theme] .quiz .choice-card:has(input:checked){background:var(--choice-paper);border-color:var(--choice-ink);box-shadow:inset 3px 0 0 var(--choice-ink),0 4px 16px #00000012}
[data-quiz-theme] .quiz .choice-card:has(input:checked) .option-check{background:var(--choice-ink);border-color:var(--choice-ink);color:var(--choice-on-ink)}
[data-quiz-theme] .skin-postcard .choice-art{border-color:var(--quiz-raised)}
[data-quiz-theme] .skin-frame .choice-art{outline-color:var(--quiz-surface);border-color:var(--quiz-border)}
[data-quiz-theme] .skin-note .choice-art{background-image:repeating-linear-gradient(0deg,transparent 0 14px,var(--quiz-border) 14px 15px)}
[data-quiz-theme] .quiz .skin-ticket:after{background:var(--quiz-bg);border-color:var(--quiz-border)}
[data-quiz-theme] .quiz .choice-card:before{opacity:.14}
[data-quiz-theme] .quiz-action-wrap{background:var(--quiz-bg);border-top:1px solid var(--quiz-border);margin-top:18px;box-shadow:0 -10px 20px color-mix(in srgb,var(--quiz-bg) 92%,transparent)}
[data-quiz-theme] .primary{background:var(--quiz-accent);border-color:var(--quiz-accent);color:var(--quiz-on-accent);box-shadow:inset 0 1px 0 #ffffff18,0 4px 15px #00000012}
[data-quiz-theme] .secondary,[data-quiz-theme] .motion-toggle,[data-quiz-theme] .sound-toggle{background:var(--quiz-surface);border-color:var(--quiz-border);color:var(--quiz-text);box-shadow:inset 0 1px 0 #ffffff09}
[data-quiz-theme] .primary:disabled,[data-quiz-theme] .secondary:disabled{background:var(--quiz-raised);border-color:var(--quiz-border);color:var(--quiz-muted);box-shadow:none}
[data-quiz-theme] .text-button{color:var(--quiz-accent)}
[data-quiz-theme] .sound-toggle[aria-pressed=true]{background:var(--quiz-raised);border-color:var(--quiz-accent);color:var(--quiz-accent)}
[data-quiz-theme] .sound-toggle:before{background:var(--quiz-muted)}[data-quiz-theme] .sound-toggle[aria-pressed=true]:before{background:var(--quiz-accent);box-shadow:none}
[data-quiz-theme] dialog:not(.journey-overlay){background:var(--quiz-surface);color:var(--quiz-title);border-color:var(--quiz-border)}
[data-quiz-theme] .dialog-copy,[data-quiz-theme] .answer-review button{color:var(--quiz-text)}
[data-quiz-theme] .answer-review small,[data-quiz-theme] .answer-review b{color:var(--quiz-muted)}
[data-quiz-theme] .answer-review li+li{border-color:var(--quiz-border)}
[data-quiz-theme] .icon-button{color:var(--quiz-accent)}
[data-quiz-theme] .inline-status,[data-quiz-theme] .toast{background:var(--quiz-raised);color:var(--quiz-title);border:1px solid var(--quiz-border)}
[data-quiz-theme] :is(button,a,input,summary):focus-visible{outline-color:var(--quiz-accent)}
/* Distinct editorial treatments, tied to each question's scene. */
[data-quiz-style=postcard] .journey-strip{border:7px solid var(--quiz-surface);border-bottom-width:19px;border-radius:3px;transform:rotate(-1deg);margin-bottom:20px}
[data-quiz-style=postcard] .question-heading{border-left:2px solid var(--quiz-border);padding-left:16px}
[data-quiz-style=street] .journey-strip{border-radius:4px 28px 4px 4px}
[data-quiz-style=street] .quiz .scene{border-bottom:1px dashed var(--quiz-border);padding-bottom:10px}
[data-quiz-style=garden] main{background-image:radial-gradient(ellipse at 100% 18%,var(--quiz-raised),transparent 40%)}
[data-quiz-style=garden] .journey-strip{border-radius:55px 12px 55px 12px}
[data-quiz-style=garden] .question-heading{padding:0 8px}
[data-quiz-style=rain] main{background-image:repeating-linear-gradient(108deg,transparent 0 34px,color-mix(in srgb,var(--quiz-border) 15%,transparent) 35px 36px)}
[data-quiz-style=rain] .journey-strip{border-radius:28px 28px 5px 5px;border:1px solid var(--quiz-muted)}
[data-quiz-style=rain] .question-heading{padding:8px 14px 3px;background:var(--quiz-surface);border:1px solid var(--quiz-border);border-radius:12px;margin:12px 0}
[data-quiz-style=window] .journey-strip{border-radius:56px 56px 3px 3px;border:5px double var(--quiz-border)}
[data-quiz-style=window] .question-heading{border-bottom:1px solid var(--quiz-border);margin-bottom:16px}
[data-quiz-style=market] .journey-strip{border-radius:12px;border-top:5px solid var(--quiz-accent)}
[data-quiz-style=market] .quiz .scene>span:first-child{background:var(--quiz-accent);color:var(--quiz-on-accent);padding:5px 10px;transform:rotate(-1deg)}
[data-quiz-style=airmail] .journey-strip{border:5px solid var(--quiz-surface);outline:1px dashed var(--quiz-accent);outline-offset:3px;border-radius:2px;margin:5px 0 18px}
[data-quiz-style=airmail] .question-heading{padding-left:12px;border-left:3px double var(--quiz-border)}
[data-quiz-style=seasons] .journey-strip{border-radius:3px 35px 3px 35px}
[data-quiz-style=seasons] .quiz .scene:before{content:'✦';font-size:18px;color:var(--quiz-accent);margin-right:9px}
[data-quiz-style=gallery] .journey-strip{border:9px solid var(--quiz-surface);outline:1px solid var(--quiz-border);outline-offset:2px;border-radius:0;margin:5px 0 22px}
[data-quiz-style=gallery] .question-heading{text-align:center}[data-quiz-style=gallery] .quiz .scene{justify-content:center;gap:12px}
[data-quiz-style=cinema] .journey-strip{border-block:8px solid var(--quiz-raised);border-radius:3px;height:165px}
[data-quiz-style=cinema] .question-heading{border-left:2px solid var(--quiz-accent);padding-left:14px}
[data-quiz-style=journal] main{background-image:repeating-linear-gradient(0deg,transparent 0 31px,color-mix(in srgb,var(--quiz-border) 14%,transparent) 31px 32px)}
[data-quiz-style=journal] .journey-strip{border:6px solid var(--quiz-surface);border-bottom-width:16px;transform:rotate(.7deg);border-radius:1px}
[data-quiz-style=journal] .quiz .scene{font-family:TokyoSerif,serif}
[data-quiz-style=rooftop] .journey-strip{border-radius:65px 65px 10px 10px;height:165px}
[data-quiz-style=rooftop] .question-heading{text-align:center}
[data-quiz-style=bookshop] .journey-strip{border-left:7px solid var(--quiz-accent);border-radius:2px 15px 15px 2px}
[data-quiz-style=bookshop] .question-heading{padding:8px 13px;border-top:3px double var(--quiz-border);border-bottom:1px solid var(--quiz-border);margin-top:15px}
[data-quiz-style=atelier] .journey-strip{border:1px dashed var(--quiz-accent);padding:6px;background:var(--quiz-surface);border-radius:8px}
[data-quiz-style=atelier] .quiz .scene{letter-spacing:2px}
[data-quiz-style=vinyl] .journey-strip{border-radius:70px 8px 8px 70px;border-left:9px solid var(--quiz-accent)}
[data-quiz-style=vinyl] .question-heading{border-top:1px solid var(--quiz-border);padding-top:7px}
[data-quiz-style=studio] main{background-image:radial-gradient(var(--quiz-border) .6px,transparent .6px);background-size:19px 19px}
[data-quiz-style=studio] .journey-strip{border-radius:8px;box-shadow:6px 6px 0 var(--quiz-raised);margin-bottom:20px}
[data-quiz-style=studio] .question-heading{background:var(--quiz-bg);padding:3px 0}
[data-quiz-style=interior] .journey-strip{border-radius:2px;height:170px;border-bottom:4px solid var(--quiz-accent)}
[data-quiz-style=interior] .question-heading{padding:4px 0 10px;border-bottom:1px solid var(--quiz-border);margin-bottom:17px}
[data-quiz-style=letter] .journey-strip{border-radius:2px;border:7px solid var(--quiz-surface);box-shadow:0 5px 17px #00000016}
[data-quiz-style=letter] .question-heading{border-left:3px double var(--quiz-accent);padding-left:15px;margin-top:16px}
[data-quiz-style=breathing] .journey-strip{border-radius:70px 70px 16px 16px}
[data-quiz-style=breathing] .question-heading{text-align:center;padding-top:10px}
[data-quiz-style=nightletter] main{background-image:radial-gradient(ellipse at 60% 10%,var(--quiz-raised),transparent 45%)}
[data-quiz-style=nightletter] .journey-strip{border-radius:3px;height:170px;border-block:1px solid var(--quiz-accent)}
[data-quiz-style=nightletter] .question-heading{padding-left:15px;border-left:2px solid var(--quiz-accent)}
/* The transition is deliberately legible above every photograph. */
[data-quiz-theme] .journey-overlay{background:var(--journey-light);border:0;color:#FFF8F0}
[data-quiz-theme] .journey-overlay::backdrop{background:#0C1721D9}
[data-quiz-theme] .journey-overlay .sound-toggle{background:#142536D9;color:#FFF8F0;border-color:#ffffff99;box-shadow:none}
[data-quiz-theme] .journey-overlay .sound-toggle:before{background:#FFF8F0}
[data-quiz-theme] .journey-caption h2{color:#FFF8F0}
[data-quiz-theme] .journey-caption{left:18px;right:18px;padding:20px 18px 18px;border-radius:14px;background:#0B1722D9;border:1px solid #ffffff26;backdrop-filter:blur(5px)}
[data-quiz-theme] .journey-caption p,[data-quiz-theme] .journey-chapter,[data-quiz-theme] .journey-foot{color:#F1E9DD}
.journey-overlay.effect-rain .journey-air i{height:55px;width:1px;border-radius:0;background:#DAEEFF99;animation:rain-fall var(--duration) calc(var(--i)*-170ms) linear both}
.journey-overlay.effect-paper .journey-air i{width:12px;height:16px;border-radius:1px;background:#FFEDD799}
.journey-overlay.effect-glow .journey-air i{width:4px;height:4px;border-radius:50%;background:#FFEBC1CC;box-shadow:0 0 18px #FFEBC1;animation:light-drift var(--duration) calc(var(--i)*-170ms) ease-in-out both}
@keyframes rain-fall{from{transform:translate(12px,-200px);opacity:0}20%,80%{opacity:.55}to{transform:translate(-40px,600px);opacity:0}}
@media(hover:hover){[data-quiz-theme] .primary:hover:not(:disabled){background:var(--quiz-accent);border-color:var(--quiz-accent);filter:brightness(1.07)}[data-quiz-theme] .secondary:hover:not(:disabled){background:var(--quiz-raised)}[data-quiz-theme] .quiz .choice-card:hover{border-color:var(--choice-ink)}}
@media(max-width:360px){[data-quiz-theme] .quiz h1{font-size:22px}[data-quiz-theme] .quiz .choice-card{min-height:97px}[data-quiz-theme] .choice-sentence{font-size:11px}}
@media(max-height:760px){[data-quiz-theme] .journey-strip{height:115px}[data-quiz-theme] .quiz h1{font-size:23px}[data-quiz-theme] .quiz .choice-card{min-height:95px}}
@media(max-height:660px){[data-quiz-theme] .journey-strip{display:block;height:100px}[data-quiz-theme] .quiz .hint{display:block}[data-quiz-theme] .strip-caption strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){[data-quiz-theme] .journey-strip{transform:none}}