/*! UX by Example — © 2026 Chris Daniels. All rights reserved. */
.fst{display:flex;flex-direction:column;gap:var(--space-m);width:100%}.fst__stage-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-l);min-block-size:20rem;display:flex;flex-direction:column;justify-content:center;align-items:stretch;position:relative;overflow:hidden}.fst__view{width:100%;display:flex;flex-direction:column;gap:var(--space-m)}.fst__view[hidden]{display:none!important}.fst__lead{font-size:var(--step-1);line-height:var(--leading-snug);max-inline-size:54ch;margin-block-end:var(--space-s);text-align:center;align-self:center}.fst__view--intro{align-items:center;justify-content:center;text-align:center}.fst__timer-container{width:100%;height:6px;background:var(--surface-2);border-radius:var(--radius-s);overflow:hidden;margin-block-end:var(--space-s)}.fst__timer-bar{height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(1)}.fst__view--exposure.is-active .fst__timer-bar{animation:5s linear forwards fst-timer-anim}@keyframes fst-timer-anim{from{transform:scaleX(1)}to{transform:scaleX(0)}}.fst__mockup{border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--paper);display:flex;flex-direction:column;overflow:hidden;width:100%;max-width:48rem;margin:0 auto}.fst__mockup-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-xs) var(--space-m);border-bottom:1.5px solid var(--line);background:var(--surface)}.fst__mockup-logo{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);color:var(--accent-strong)}.fst__mockup-nav{display:flex;gap:var(--space-s);font-size:var(--step--1);font-weight:600;color:var(--muted)}.fst__mockup-hero{padding:var(--space-xl) var(--space-m);text-align:center;display:flex;flex-direction:column;gap:var(--space-xs);align-items:center}.fst__mockup-title{font-family:var(--font-display);font-size:var(--step-3);font-weight:700;color:var(--ink);line-height:var(--leading-tight);max-width:20ch}.fst__mockup-desc{font-size:var(--step-0);color:var(--muted);max-width:45ch;line-height:var(--leading-body)}.fst__mockup-cta{margin-block-start:var(--space-xs)}.fst__mockup-btn{pointer-events:none;opacity:.9}.fst__view--mask{align-items:center;justify-content:center;text-align:center}.fst__mask-message{font-size:var(--step-1);font-weight:600;color:var(--muted)}.fst__quiz-form{display:flex;flex-direction:column;gap:var(--space-m);max-width:32rem;margin:0 auto;width:100%}.fst__quiz-title{font-family:var(--font-display);font-size:var(--step-2);font-weight:700;color:var(--ink);border-bottom:2px solid var(--surface-2);padding-block-end:var(--space-3xs)}.fst__question-group{display:flex;flex-direction:column;gap:var(--space-2xs)}.fst__question-text{font-weight:600;font-size:var(--step-0);color:var(--ink)}.fst__answers{display:flex;flex-direction:column;gap:var(--space-3xs)}@media (min-width:36rem){.fst__answers{flex-direction:row;gap:var(--space-2xs)}}.fst__answer-option{flex:1;display:flex;align-items:center;gap:var(--space-3xs);padding:var(--space-xs);border:1.5px solid var(--line);border-radius:var(--radius-m);background:var(--paper);font-size:var(--step--1);font-weight:500;cursor:pointer;transition:border-color .12s,background .12s}.fst__answer-option:hover{border-color:var(--accent)}.fst__answer-option input{margin:0;accent-color:var(--accent);cursor:pointer}.fst__submit-btn{align-self:flex-start;margin-block-start:var(--space-s)}.fst__view--results{max-width:32rem;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:var(--space-m);text-align:center}.fst__results-title{font-family:var(--font-display);font-size:var(--step-2);font-weight:700;color:var(--ink)}.fst__score-circle{width:6rem;height:6rem;border-radius:50%;background:var(--accent-soft);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;align-self:center;font-family:var(--font-display);font-size:var(--step-3);font-weight:700;color:var(--accent-strong);margin-block:var(--space-xs)}.fst__verdict{font-size:var(--step-0);line-height:var(--leading-body);color:var(--muted);text-align:start}.fst__breakdown{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-3xs);text-align:start;border-top:1px solid var(--line);padding-block-start:var(--space-s)}.fst__breakdown-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-2xs) var(--space-s);border-radius:var(--radius-s);font-size:var(--step--1);font-weight:600}.fst__breakdown-item--correct{background:var(--status-supported-bg);color:var(--status-supported-fg)}.fst__breakdown-item--wrong{background:var(--status-challenged-bg);color:var(--status-challenged-fg)}.fst__results-actions{display:flex;gap:var(--space-s);justify-content:center;margin-block-start:var(--space-s)}.fst__alt{margin-block-start:var(--space-l);border-block-start:1px solid var(--line);padding-block-start:var(--space-m)}.fst__alt summary{cursor:pointer;font-weight:600;color:var(--accent-strong)}.fst__alt[open] summary{margin-block-end:var(--space-s)}