.bl-app {
  
  --tf-chrome: #e7edf8; --tf-ink: #1e1e1e; --tf-primary: #434bc4; --tf-primary-dark: #363da6; --tf-border: #505050; --tf-qbar: #f0f0f0;
  --tf-muted: #595959; --tf-struck: #8e8e8e; --tf-struck-letter: #a7a7a7; --tf-hair: #b2b2b2; --tf-flag: #a62e38;
  --tf-sans: Roboto, "Helvetica Neue", Arial, sans-serif; --tf-serif: "Noto Serif", Georgia, "Times New Roman", serif;
  
  --b-room: #edf1ee; --b-page: #fbfcfa; --b-ink: #21382e; --b-fog: #596a62; --b-lamp: #d0a75e; --b-plum: #a84f74; --b-plum-ink: #8c3e5f;
  --b-edge: #74857d; --b-rule: #d3dcd6; --b-lamp-ink: #7a5a1f; --b-brass: #9a7230; --b-wash: #e3ebe6; --b-lamp-wash: #f6f0e2;
  --b-serif: "Literata", Georgia, serif; --b-ui: "Jost", "Avenir Next", sans-serif;
  --b-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --bl-ratio: 628 / 622; 
  position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: var(--bl-ratio); overflow: hidden;
  width: min(50vw - var(--gutter) - 28px, clamp(640px, 640px + (100vw - 1440px) * 0.2, 820px), 84svh * 628 / 622); 
  background: #fff; color: var(--tf-ink); font-family: var(--tf-sans); line-height: 1.4;
  box-shadow: 0 0 0 0.5px var(--rule), 0 18px 40px -28px rgba(38, 38, 31, 0.35);
  font-optical-sizing: auto;
}
.bl-app[data-look="brand"] { background: var(--b-room); color: var(--b-ink); }
.bl-app noscript img { display: block; width: 100%; height: auto; }
.scene--live { padding: 0 28px 0 var(--edge); justify-items: end; } 
.bl-app button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.bl-app :focus-visible { outline: 1px solid var(--blue, #6f95bd); outline-offset: 2px; }
.bl-screen { grid-area: 1 / 1; min-height: 0; overflow: auto; overscroll-behavior: contain; } 
.bl-screen[hidden] { display: none; }
.bl-in { animation: bl-in 300ms var(--b-ease) both; }
.bl-rise { animation: bl-rise 300ms var(--b-ease) both; } 
@keyframes bl-in { from { opacity: 0; } }
@keyframes bl-rise { from { opacity: 0; transform: translateY(6px); } }
.is-final .bl-in, .is-final .bl-rise { animation: none; }
@media (prefers-reduced-motion: reduce) { .bl-in, .bl-rise { animation: none; } }


.bl-screen--test:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; }
.tf-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 10px 16px 8px; background: var(--tf-chrome); flex: none; }
.tf-title { font-size: 15px; font-weight: 500; line-height: 1.3; }
.tf-dir { font-size: 12.5px; font-weight: 500; margin-top: 6px; }
.tf-head-c { display: grid; justify-items: center; gap: 5px; }
.tf-timer { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tf-hide { font-size: 10.5px; font-weight: 700; border: 1px solid var(--tf-ink); border-radius: 999px; padding: 1px 10px; }
.tf-head-r { justify-self: end; display: flex; gap: 16px; font-size: 12px; font-weight: 500; padding-top: 18px; }
.tf-head-r span:first-child { border-bottom: 2px solid var(--tf-ink); padding-bottom: 2px; }
.tf-dash { height: 2px; flex: none; background: repeating-linear-gradient(90deg, #000 0 27px, #fff 27px 29px); }
.tf-dash--thin { background: repeating-linear-gradient(90deg, #000 0 17px, transparent 17px 19px); }
.tf-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px 14px; overscroll-behavior: contain; }
.tf-passage { font-family: var(--tf-serif); font-size: 15px; line-height: 22.4px; padding-bottom: 16px; margin-bottom: 14px; border-bottom: 2px solid #888; }
.tf-qbar { display: flex; align-items: stretch; background: var(--tf-qbar); height: 30px; }
.tf-num { display: grid; place-items: center; width: 30px; background: var(--tf-ink); color: #fff; font-weight: 500; font-size: 15px; }
.bl-app .tf-mark { display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 13px; font-weight: 500; }
.tf-mark.is-on { --mark-fill: var(--tf-flag); }
.tf-mark.is-on svg { color: var(--tf-flag); }
.tf-stem { font-family: var(--tf-serif); font-size: 15px; line-height: 22.4px; margin: 12px 0 12px; }
.tf-choices { display: grid; gap: 10px; }
.tf-row { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; }
.bl-app .tf-choice { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 8px 12px; border: 1px solid var(--tf-border); border-radius: 10px; text-align: left; position: relative; background: #fff; }
.bl-app .tf-choice:hover { box-shadow: inset 0 0 0 1px var(--tf-border); }
.tf-letter { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--tf-border); font-size: 13px; font-weight: 700; color: var(--tf-border); }
.tf-text { font-family: var(--tf-serif); font-size: 15px; line-height: 1.35; }
.tf-row.is-sel .tf-choice { border: 2px solid var(--tf-primary); padding: 7px 11px; box-shadow: none; }
.tf-row.is-sel .tf-letter { background: var(--tf-primary); border-color: var(--tf-primary); color: #fff; }
.tf-row.is-struck .tf-text { color: var(--tf-struck); }
.tf-row.is-struck .tf-letter { color: var(--tf-struck-letter); border-color: var(--tf-struck-letter); }
.tf-row.is-struck .tf-choice::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 1.5px; background: #000; } 
.bl-app .tf-x { justify-self: center; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.tf-strike-glyph, .bl-strike-glyph { position: relative; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.3px solid var(--tf-ink); font-size: 10.5px; font-weight: 700; }
.bl-strike-glyph::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.3px; background: var(--tf-ink); }
.bl-app .tf-undo { font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; justify-self: center; }
.tf-conf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.tf-conf-q { font-size: 12.5px; color: var(--tf-muted); }
.tf-pills { display: flex; gap: 8px; }
.bl-app .tf-pill { font-size: 12.5px; padding: 4px 12px; border: 1px solid var(--tf-ink); border-radius: 999px; }
.bl-app .tf-pill[aria-checked="true"] { background: var(--tf-primary); border-color: var(--tf-primary); color: #fff; }
.tf-warn { min-height: 1.2em; margin-top: 8px; font-size: 12.5px; color: #b3261e; }
.tf-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 16px; background: var(--tf-chrome); flex: none; }
.tf-you { font-size: 16px; font-weight: 500; }
.tf-qpill { background: var(--tf-ink); color: #fff; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 8px; }
.bl-app .tf-submit { justify-self: end; background: var(--tf-primary); color: #fff; font-size: 14px; font-weight: 700; padding: 0 20px; height: 34px; border-radius: 999px; }
.bl-app .tf-submit:hover { background: var(--tf-primary-dark); }


.bl-app[data-look="brand"] .bl-screen { font-family: var(--b-ui); }
.b-desk { padding: 26px 28px 28px; display: grid; gap: 16px; }
.b-sample { font-size: 13px; color: var(--b-fog); border-left: 2px solid var(--b-lamp); padding-left: 10px; }
.b-kicker { font-size: 13.5px; color: var(--b-fog); }
.b-title { font-family: var(--b-serif); font-weight: 300; font-size: 28px; line-height: 1.15; letter-spacing: -0.005em; color: var(--b-ink); }
.b-title--3 { font-weight: 400; font-size: 21px; line-height: 1.3; }
.b-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.b-lead, .b-read { font-family: var(--b-serif); font-size: 15.5px; line-height: 1.6; color: var(--b-ink); max-width: 46ch; }
.b-fine { font-size: 13px; line-height: 1.5; color: var(--b-fog); }
.b-tag { font-size: 11.5px; letter-spacing: 0.02em; color: var(--b-lamp-ink); background: var(--b-lamp-wash); border-radius: 6px; padding: 2px 8px; white-space: nowrap; font-family: var(--b-ui); font-weight: 400; }

.b-carrel { position: relative; background: var(--b-page); border-radius: 14px 14px 0 0; padding: 26px 24px 22px; display: grid; gap: 12px; }
.b-carrel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: var(--b-ink); border-radius: 14px 14px 0 0; }
.b-carrel::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--b-ink); border-bottom: 0; border-radius: 14px 14px 0 0; pointer-events: none; -webkit-mask: linear-gradient(#000 0, #000 35%, transparent 96%); mask: linear-gradient(#000 0, #000 35%, transparent 96%); }
.b-carrel--lit::before { background: var(--b-lamp); }
.b-verdict { font-family: var(--b-ui); font-size: 15px; font-weight: 500; color: var(--b-ink); }
.b-verdict[data-bl-verdict="wrong"] { color: var(--b-plum-ink); }
.b-headline { font-family: var(--b-serif); font-size: 23px; line-height: 1.28; font-weight: 400; color: var(--b-ink); text-wrap: pretty; }
.b-headline--sm { font-size: 17px; line-height: 1.4; }
.b-next { font-size: 14.5px; line-height: 1.5; color: var(--b-ink); }
.b-next b { font-weight: 500; }
.b-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 4px; }
.b-meta dt, .b-list dt { font-size: 12.5px; color: var(--b-fog); }
.b-meta dd { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.b-meta dd.is-miss { color: var(--b-plum-ink); }
.b-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.bl-app .b-btn { min-height: 42px; padding: 0 20px; border-radius: 10px; background: var(--b-ink); color: var(--b-page); font-size: 15px; font-weight: 500; }
.bl-app .b-btn--sm { min-height: 36px; padding: 0 16px; font-size: 14px; justify-self: start; cursor: default; }
.bl-app .b-quiet { font-size: 14.5px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; color: var(--b-ink); }
.bl-app[data-look="brand"] :focus-visible { outline: 3px solid var(--b-lamp-ink); outline-offset: 2px; }

.bl-start { display: grid; gap: 14px; align-content: start; justify-items: start; padding: 28px; }
.bl-start-kicker { margin: 0; font: 500 0.8125rem/1.4 var(--b-ui); letter-spacing: 0.02em; color: var(--b-fog); }
.bl-start-title { margin: 0 0 6px; font: 400 1.75rem/1.25 var(--b-serif); color: var(--b-ink); }


.b-gate { display: grid; gap: 4px; counter-reset: none; }
.b-stage { display: grid; grid-template-columns: 26px 1fr; gap: 12px; padding: 9px 12px; border-radius: 10px; opacity: 0.38; transition: opacity 280ms var(--b-ease), background-color 280ms var(--b-ease); }
.b-stage.is-on { opacity: 1; background: var(--b-page); box-shadow: inset 0 0 0 1px var(--b-rule); }
.b-stage.is-fail { box-shadow: inset 0 0 0 1.5px var(--b-plum); }
.b-stage.is-skip { opacity: 0.25; }
.b-stage-n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--b-edge); font-size: 12.5px; font-weight: 500; color: var(--b-fog); }
.b-stage.is-on .b-stage-n { background: var(--b-ink); border-color: var(--b-ink); color: var(--b-page); }
.b-stage.is-fail .b-stage-n { background: var(--b-plum); border-color: var(--b-plum); }
.b-stage b { font-weight: 500; font-size: 15px; }
.b-stage p { font-size: 13.5px; line-height: 1.45; color: var(--b-fog); margin-top: 1px; }
.b-solvers { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 2px; }
.b-solvers span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.3px solid var(--b-ink); font-size: 11px; font-weight: 500; color: var(--b-ink); }
.b-solvers span.is-odd { border-color: var(--b-plum); color: var(--b-plum-ink); }
.b-solve-note { color: var(--b-ink); }
.b-outcome { min-height: 1.4em; font-size: 15px; font-weight: 500; opacity: 0; transition: opacity 280ms var(--b-ease); }
.b-outcome.is-on { opacity: 1; }
.b-outcome.is-pass { color: var(--b-ink); }
.b-outcome.is-fail { color: var(--b-plum-ink); }
.is-final .b-stage, .is-final .b-outcome { transition: none; }


.b-track { position: relative; height: 128px; margin: 6px 6px 0; }
.b-line { position: absolute; left: 0; right: 0; top: 56px; height: 2px; background: var(--b-brass); border-radius: 1px; }
.b-quiet-stretch { position: absolute; top: 49px; height: 16px; background: repeating-linear-gradient(90deg, var(--b-rule) 0 3px, transparent 3px 6px); border-radius: 3px; }
.b-quiet-stretch span { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--b-fog); font-style: italic; font-family: var(--b-serif); }
.b-evs { position: absolute; inset: 0; list-style: none; }
.b-ev { position: absolute; top: 50px; width: 0; }
.b-ev-dot { position: absolute; left: -7px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--b-page); border: 2px solid var(--b-ink); }
.b-ev--strike .b-ev-dot, .b-ev--unstrike .b-ev-dot, .b-ev--deselect .b-ev-dot { border-color: var(--b-edge); border-style: dashed; }
.b-ev--confidence .b-ev-dot, .b-ev--mark .b-ev-dot, .b-ev--unmark .b-ev-dot { width: 10px; height: 10px; left: -5px; top: 2px; border-color: var(--b-brass); }
.b-ev--submit .b-ev-dot { background: var(--b-ink); }
.b-ev.is-key .b-ev-dot { border-color: var(--b-plum); background: var(--b-plum); }
.b-ev-label { position: absolute; top: 22px; left: 0; transform: translateX(-50%); white-space: nowrap; font-size: 12px; line-height: 1.25; color: var(--b-ink); text-align: center; }
.b-ev-label time { display: block; color: var(--b-fog); font-variant-numeric: tabular-nums; }
.b-ev[data-row="1"] .b-ev-label { top: 48px; }
.b-ev[data-row="2"] .b-ev-label { top: -34px; }
.b-ev:first-child .b-ev-label { transform: none; left: -6px; text-align: left; }
.b-ev:last-child .b-ev-label { transform: translateX(-100%); left: 6px; text-align: right; }
.b-ends { position: absolute; left: 0; right: 0; bottom: -6px; display: flex; justify-content: space-between; font-size: 11.5px; color: var(--b-fog); font-variant-numeric: tabular-nums; }


.b-card { background: var(--b-page); border-radius: 14px; padding: 24px; display: grid; gap: 14px; box-shadow: 0 0 0 1px var(--b-rule); }
.b-list { display: grid; gap: 0; }
.b-list > div { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 12px; padding: 11px 0; border-top: 1px solid var(--b-rule); }
.b-list dt { font-size: 13.5px; color: var(--b-ink); font-weight: 500; display: grid; gap: 6px; justify-items: start; align-content: start; }
.b-list dd { font-size: 14px; line-height: 1.5; color: var(--b-ink); }
.b-cursor dd { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.bl-app .b-switch { position: relative; width: 38px; height: 22px; border-radius: 11px; background: var(--b-page); box-shadow: inset 0 0 0 1.5px var(--b-edge); flex: none; transition: background-color 180ms var(--b-ease); }
.b-switch span { position: absolute; left: 4px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--b-edge); transition: transform 180ms var(--b-ease), background-color 180ms var(--b-ease); }
.bl-app .b-switch[aria-checked="true"] { background: var(--b-ink); box-shadow: none; }
.b-switch[aria-checked="true"] span { transform: translateX(16px); background: var(--b-page); }
.is-final .b-switch, .is-final .b-switch span { transition: none; }
.b-toggle-note { font-size: 13.5px; line-height: 1.45; color: var(--b-fog); }
.b-suggest { gap: 8px; }
.b-suggest-h { font-family: var(--b-serif); font-size: 21px; line-height: 1.3; }
.b-suggest-why { font-size: 14px; line-height: 1.5; color: var(--b-fog); max-width: 48ch; margin-bottom: 6px; }
.b-alts { list-style: none; display: grid; gap: 0; }
.b-alts li { padding: 10px 2px; border-top: 1px solid var(--b-rule); font-size: 14.5px; }
.b-toggle-row { display: grid; grid-template-columns: auto auto 1fr; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid var(--b-rule); }
.b-toggle-name { font-size: 14px; font-weight: 500; }


.decisions-head { display: grid; gap: 14px; margin-top: 8vh; }
.decision.try .stamp { font-family: var(--display); font-size: 0.8125rem; letter-spacing: 0.03em; color: var(--mid); }
.prose .decision { scroll-margin-top: 30vh; }


.more--built { grid-template-rows: auto; }
.more--built .built-list { grid-row: 1; }

@media (max-width: 899px) { 
  .scene.scene--live { position: static; height: auto; padding: 10px var(--gutter-r) 0 var(--gutter); box-shadow: none; background: none; display: block; }
  .scene--live .bl-app { width: auto; aspect-ratio: auto; display: block; } 
  .bl-screen { overflow: visible; }
  .bl-screen--test:not([hidden]) { overflow: visible; }
  .tf-head { grid-template-columns: 1fr auto; }
  .tf-head-r { display: none; }
  .tf-head-c { justify-self: end; }
  .b-desk { padding: 20px 18px 22px; }
  .b-headline { font-size: 20px; }
  .b-list > div { grid-template-columns: 1fr; gap: 6px; }
}

@media (min-width: 900px) {
  .story--live .prose { padding-top: 0; }
  .decision.try { padding-top: 34svh; min-height: 84svh; align-content: start; }
}

.bl-app [hidden] { display: none !important; }
.scene .bl-app svg { width: auto; height: auto; overflow: visible; flex: none; }
.bl-app dl, .bl-app dd, .bl-app dt, .bl-app ol, .bl-app ul, .bl-app p, .bl-app h3 { margin: 0; padding: 0; }
.bl-app ol, .bl-app ul { list-style: none; }
.bl-app .tf-stem { margin: 12px 0; }

.b-track { height: 120px; --line: 50px; }
.b-track[data-rows="2"] { height: 140px; --line: 70px; }
.b-track[data-rows="3"], .b-track[data-rows="4"] { height: 196px; --line: 96px; }
.b-line { top: calc(var(--line) + 6px); }
.b-quiet-stretch { top: calc(var(--line) - 1px); }
.b-ev { top: var(--line); }
.b-ev[data-row="0"] .b-ev-label { top: 22px; }
.b-ev[data-row="1"] .b-ev-label { top: -36px; }
.b-ev[data-row="2"] .b-ev-label { top: 54px; }
.b-ev[data-row="3"] .b-ev-label { top: -68px; }
.b-ends { bottom: auto; top: calc(var(--line) + 22px); }
.b-ends span { visibility: hidden; }
.b-quiet-stretch span { top: 23px; }
.b-quiet-stretch[data-row="1"] span { top: -28px; }
.b-quiet-stretch[data-row="2"] span { top: 55px; }
.b-quiet-stretch[data-row="3"] span { top: -60px; }