/* Progressive enhancement: every scene remains readable when JavaScript is off. */
.ex{--ex-blue:#2a55e0;--ex-navy:#0e1630;--ex-paper:#f4f4f1;--ex-line:#dbe3f4;--ex-muted:#45516a;--ex-progress:0%;margin:0;min-width:0;color:var(--ex-navy);font-family:inherit}
.ex,.ex *{box-sizing:border-box}
.ex button{font:inherit;cursor:pointer}
.ex button:focus-visible,.ex [tabindex="0"]:focus-visible{outline:3px solid var(--ex-blue);outline-offset:4px}
.ex-caption{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:20px}
.ex-eyebrow{font-size:12px;font-weight:750;line-height:1.4;letter-spacing:.11em;text-transform:uppercase}
.ex-illustration{font-size:11px;line-height:1.5;color:var(--ex-muted);max-width:19em}
.ex-tabs,.ex-controls,.ex-progress,.ex-status{display:none}
.ex--ready .ex-tabs,.ex--ready .ex-controls{display:flex}
.ex--ready .ex-progress,.ex--ready .ex-status{display:block}
.ex-screen{min-width:0}
.ex-scene{position:relative;margin:0;padding:28px;background:#fff;border:1px solid var(--ex-line);overflow:hidden}
.ex:not(.ex--ready) .ex-scene+.ex-scene{margin-top:12px}
.ex--ready .ex-screen{display:grid}
.ex--ready .ex-scene{grid-area:1/1;align-self:stretch}
.ex--ready .ex-scene[hidden]{display:block!important;visibility:hidden;pointer-events:none}
.ex--ready .ex-scene:not([hidden]){animation:ex-enter .26s ease-out both}
.ex-scene-kicker{font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--ex-muted);line-height:1.4;margin:0 0 22px}
.ex-scene-heading{font-size:clamp(21px,2.4vw,29px);line-height:1.16;letter-spacing:-.035em;margin:0 0 22px;font-weight:700;max-width:26ch}
.ex-scene-note{font-size:13px;line-height:1.5;margin:20px 0 0;color:var(--ex-muted);max-width:38ch}
.ex-tabs{gap:4px;align-items:stretch}
.ex-tabs button{border:0;background:transparent;color:inherit;min-width:0;min-height:48px;padding:10px;text-align:left;font-size:12px;font-weight:650;line-height:1.35;display:flex;align-items:center;gap:8px}
.ex-tabs button:hover{background:#edf1fc}
.ex-tabs button[aria-selected="true"]{background:var(--ex-navy);color:#fff}
.ex-tab-number{font-variant-numeric:tabular-nums;font-size:10px;opacity:.7;letter-spacing:.02em}
.ex-controls{gap:12px;align-items:center;justify-content:space-between;margin-top:16px}
.ex-play,.ex-reset{min-height:44px;border:0;display:inline-flex;justify-content:center;align-items:center;gap:10px;padding:10px 14px;font-size:12px!important;font-weight:700!important;line-height:1.4;text-align:left}
.ex-play{background:var(--ex-navy);color:white}
.ex-play:hover{background:#253354}
.ex-play:disabled{opacity:.7;cursor:default}
.ex-reset{color:var(--ex-navy);background:transparent;text-decoration:underline;text-underline-offset:4px}
.ex-reset:hover{background:#e9eefc}
.ex-play-icon{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid currentColor;flex-shrink:0}
.ex--playing .ex-play-icon{width:8px;height:10px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor}
.ex-progress{height:3px;margin-top:14px;background:#dbe2f2;overflow:hidden}
.ex-progress span{display:block;height:100%;width:var(--ex-progress);background:var(--ex-blue)}
.ex-status{font-size:11px;line-height:1.5;min-height:2.8em;margin:10px 0 0;color:var(--ex-muted)}
.ex--home{background:#eaf0ff;padding:24px}
.ex--home .ex-caption{flex-direction:column;gap:5px}
.ex--home .ex-illustration{max-width:none}
.ex--home .ex-tabs{margin-bottom:12px}
.ex--home .ex-tabs button{flex:1;flex-direction:column;align-items:flex-start;gap:4px;padding:9px 10px}
.ex--home.ex--ready .ex-scene{min-height:340px}
.ex-question{font-size:clamp(25px,2.65vw,37px);font-weight:650;line-height:1.18;letter-spacing:-.04em;margin:0;max-width:18ch}
.ex-question span{color:var(--ex-blue)}
.ex-question-tail{width:28px;height:28px;border-left:2px solid #b9c9f8;border-bottom:2px solid #b9c9f8;transform:skewY(-30deg);margin:20px 0 10px 6px}
.ex-options{display:grid;gap:10px}
.ex-option{display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px;align-items:center;padding:10px 12px;background:#f4f6fb;border:1px solid #e1e7f3}
.ex-option-mark{height:28px;width:28px;display:grid;place-items:center;background:#e5ebfb;color:var(--ex-blue);font-size:11px;font-weight:750}
.ex-option strong{font-size:12px;line-height:1.4;display:block}
.ex-answer-line{display:block;height:4px;width:78%;background:#d0d9eb;margin-top:7px}
.ex-answer-line--short{width:53%}
.ex-checks{padding:0;margin:0;list-style:none;display:grid;gap:0}
.ex-checks li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;padding:13px 0;border-top:1px solid var(--ex-line)}
.ex-checks li>span{font-size:11px;color:var(--ex-blue);font-weight:700;line-height:1.8}
.ex-checks strong{display:block;font-size:16px;font-weight:700;line-height:1.4}
.ex-checks small{display:block;font-size:12px;color:var(--ex-muted);line-height:1.5;margin-top:2px}
.ex-record{border:1px solid var(--ex-line);background:#f6f8fd;padding:16px}
.ex-record-title{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.5;font-weight:700;margin:0 0 12px}
.ex-record-dot{width:7px;height:7px;background:var(--ex-blue);border-radius:50%;flex-shrink:0}
.ex-record dl{padding:0;margin:0;display:grid;gap:10px}
.ex-record dl>div{display:grid;grid-template-columns:54px minmax(0,1fr);gap:7px;font-size:11px;line-height:1.5}
.ex-record dt{margin:0;color:var(--ex-muted)}
.ex-record dd{margin:0;font-weight:600}
.ex-ending{font-size:clamp(25px,2.55vw,35px);font-weight:700;line-height:1.12;letter-spacing:-.04em;margin:24px 0 0;color:var(--ex-blue)}
.ex--method{padding:32px;background:var(--ex-paper)}
.ex--method .ex-caption{margin-bottom:28px}
.ex--method .ex-caption h2{font-size:clamp(28px,3.2vw,43px);line-height:1.09;letter-spacing:-.045em;max-width:21ch;margin:10px 0 0}
.ex--method.ex--ready .ex-method-layout{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.7fr);gap:24px}
.ex--method .ex-tabs{flex-direction:column;gap:4px}
.ex--method .ex-tabs button{padding:14px 16px;gap:12px;font-size:13px;min-height:54px}
.ex--method .ex-tabs button[aria-selected="true"]{background:var(--ex-blue)}
.ex--method .ex-scene{padding:32px;min-height:368px}
.ex--method .ex-scene-kicker{position:relative;padding-right:64px;margin-bottom:28px}
.ex--method .ex-scene-heading{font-size:clamp(26px,3.1vw,39px);max-width:20ch;position:relative;margin-bottom:20px}
.ex-large-number{position:absolute;top:14px;right:24px;font-size:86px;letter-spacing:-.06em;line-height:1;font-weight:700;color:#e2e9fb;font-variant-numeric:tabular-nums}
.ex-method-copy{position:relative;max-width:55ch;font-size:15px;line-height:1.65;margin:0;color:var(--ex-muted)}
.ex-artifact{display:flex;align-items:flex-start;gap:10px;flex-direction:column;border-top:1px solid var(--ex-line);padding-top:18px;margin-top:26px}
.ex-artifact span{font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--ex-muted)}
.ex-artifact strong{font-size:14px;line-height:1.4;font-weight:700;color:var(--ex-blue)}
.ex--method .ex-progress{margin-top:22px}
.ex--method .ex-controls{justify-content:flex-start;gap:14px}
.ex--method .ex-play{background:var(--ex-blue)}
.ex--method .ex-play:hover{background:#2347c2}
.ex--method .ex-status{min-height:0}
@keyframes ex-enter{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:650px){
  .ex--home{padding:18px}
  .ex--home .ex-scene{padding:22px}
  .ex--home.ex--ready .ex-scene{min-height:328px}
  .ex--home .ex-tabs button{font-size:11px;padding:8px 7px}
  .ex-question{font-size:29px}
  .ex--method{padding:20px}
  .ex--method .ex-caption{flex-direction:column;gap:14px}
  .ex--method.ex--ready .ex-method-layout{display:block}
  .ex--method.ex--ready .ex-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px;gap:6px}
  .ex--method .ex-tabs button{font-size:12px;min-height:54px;padding:10px;gap:8px}
  .ex--method .ex-scene{padding:24px;min-height:412px}
  .ex--method .ex-scene-heading{font-size:29px}
  .ex--method .ex-scene-kicker{padding-right:42px;max-width:26ch}
  .ex-large-number{font-size:68px;right:18px;top:18px}
  .ex-method-copy{font-size:14px}
  .ex--method .ex-artifact{margin-top:22px}
}
@media(max-width:370px){.ex--home{padding:14px}.ex--home .ex-scene{padding:18px}.ex--method{padding:16px}.ex--method .ex-scene{padding:20px;min-height:446px}.ex-controls{gap:6px}.ex-play,.ex-reset{padding:9px 10px}.ex-question{font-size:26px}}
@media(prefers-reduced-motion:reduce){.ex--ready .ex-scene:not([hidden]){animation:none}.ex *{scroll-behavior:auto!important;transition:none!important}}
