/* A visual explanation, with ordinary HTML as its essential content. */
.bp-ease .bp-introduction{padding-bottom:36px}
.bp-explore-intro{display:flex;gap:60px;justify-content:space-between;align-items:end}
.bp-explore-intro h1{font-size:clamp(42px,4.3vw,60px);line-height:1.12;max-width:15ch;margin:17px 0 0;text-wrap:balance}
.bp-explore-intro>p{max-width:36ch;font-size:17px;margin:0}
.bp-exploration{padding-bottom:65px}.bp-choices{scroll-margin-top:12px}
.bp-choice-heading{display:flex;align-items:baseline;gap:30px;justify-content:space-between;margin-bottom:20px}
.bp-choice-heading h2{font-size:31px;margin:0;line-height:1.2}.bp-choice-heading p{font-size:13px;margin:0;max-width:50ch}
.bp-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bp-option{color:var(--blue);font:500 16px/1.5 var(--sans);min-height:126px;padding:24px 20px;text-align:left;background:color-mix(in srgb,var(--blue) 4%,var(--ivory));border:1px solid var(--line);border-radius:8px;cursor:pointer;position:relative;transition:background .18s,border-color .18s,transform .18s}
.bp-option span{display:block;font:400 24px/1 var(--serif);margin-bottom:15px;opacity:.8}.bp-option:hover{border-color:var(--blue);transform:translateY(-2px)}
.bp-option[aria-pressed=true]{background:var(--blue);color:var(--ivory);border-color:var(--blue)}
.bp-context{margin:0 0 28px;padding:0;scroll-margin-top:12px}.bp-context h3{font:500 17px/1.5 var(--sans);margin:0 0 14px}.bp-context>div{display:flex;gap:12px;flex-wrap:wrap}
.bp-context button,.bp-story-controls button,.bp-restart{font:500 14px/1.5 var(--sans);color:var(--blue);min-height:48px;padding:12px 17px;border:1px solid var(--line);border-radius:5px;background:var(--ivory);cursor:pointer;transition:background .18s,border-color .18s}
.bp-context button[aria-pressed=true]{background:var(--blue);color:var(--ivory);border-color:var(--blue)}
.bp-context button:hover,.bp-story-controls button:hover{border-color:var(--blue);background:color-mix(in srgb,var(--blue) 7%,var(--ivory))}
.bp-result{margin-top:32px;padding-top:28px;border-top:1px solid var(--line);scroll-margin-top:12px}
.bp-result-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.bp-result-heading p{font-size:14px;margin:0}.bp-result-heading p>span{display:block;font-size:13px;margin-top:5px}
.bp-restart{background:none;white-space:nowrap;text-decoration:underline;text-underline-offset:5px;border:0}
.bp-workspace{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.bp-story-position{display:flex;gap:6px;margin-bottom:16px}.bp-story-position span{height:3px;width:36px;background:color-mix(in srgb,var(--blue) 20%,var(--ivory));transition:background .2s}.bp-story-position .is-current{background:var(--blue)}
.bp-ease #bp-story-progress{font-size:13px;margin:0 0 18px}
.bp-ease #bp-story-title{font-size:38px;line-height:1.16;max-width:18ch;margin:0 0 22px}
.bp-story-copy{min-height:290px}.bp-story-copy #bp-story-copy{font-size:16px;line-height:1.8;max-width:40ch}
.bp-story-controls{display:flex;gap:10px;align-items:center;margin-top:25px;flex-wrap:wrap}.bp-story-controls button:disabled{opacity:.45;cursor:default}
.bp-story-controls #bp-next,.bp-story-controls #bp-finish{background:var(--blue);color:var(--ivory);border-color:var(--blue);min-height:50px;font-size:14px;padding:13px 17px;text-decoration:none;border-radius:5px}
.bp-visual{border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--blue) 4%,var(--ivory));margin:0;overflow:hidden;perspective:1000px}
.bp-visual-scene{height:380px;position:relative;transform-style:preserve-3d;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .2s}
.bp-plane{position:absolute;left:50%;width:68%;min-height:90px;padding:18px 22px;background:var(--ivory);border:1px solid var(--line);border-radius:8px;box-shadow:0 9px 20px #345c780c;transition:transform .38s,top .38s,width .38s,left .38s;transform:translateX(-50%);top:38px}
.bp-plane h3{font:500 14px/1.4 var(--sans);letter-spacing:0;margin:0 0 7px}.bp-plane p{font:400 21px/1.35 var(--serif);margin:0}
.bp-plane:nth-child(2){top:149px;transform:translateX(-46%) rotateY(-5deg)}.bp-plane:nth-child(3){top:260px;transform:translateX(-42%) rotateY(-8deg)}
.bp-visual[data-step="1"] .bp-plane{left:42%;width:66%;transform:translateX(-50%);top:23px}.bp-visual[data-step="1"] .bp-plane:nth-child(2){left:51%;top:145px}.bp-visual[data-step="1"] .bp-plane:nth-child(3){left:59%;top:267px}
.bp-visual[data-step="1"] .bp-plane:not(:last-child):after{content:'';position:absolute;left:57%;top:100%;height:33px;border-left:1px solid var(--blue);transform:rotate(-23deg);transform-origin:top}
.bp-visual[data-step="2"] .bp-plane{left:50%;width:78%;transform:translateX(-50%)}
.bp-visual figcaption{border-top:1px solid var(--line);padding:17px 22px;font:400 13px/1.6 var(--sans);min-height:72px}
.bp-ease .bp-learning-note{font-size:13px;line-height:1.7;max-width:75ch;margin:24px 0 0}
.bp-definition .bp-definition-photo{width:100%;max-height:360px;object-fit:cover;object-position:50% 27%;border-radius:9px;margin:0}
.bp-definition .bp-definition-layout{grid-template-columns:.55fr 1fr;gap:65px}.bp-definition .bp-definition-layout p{margin-top:25px}
[data-bp-exploration] [hidden]{display:none!important}
@media(max-width:1050px){.bp-explore-intro{gap:35px}.bp-explore-intro h1{font-size:48px}.bp-options{grid-template-columns:repeat(2,minmax(0,1fr))}.bp-option{min-height:108px}.bp-workspace{gap:28px}.bp-ease #bp-story-title{font-size:34px}.bp-plane{width:82%;padding:17px}.bp-plane p{font-size:19px}}
@media(max-width:760px){.bp-explore-intro{display:block}.bp-explore-intro h1{font-size:42px;max-width:15ch}.bp-explore-intro>p{font-size:16px;max-width:37ch;margin-top:23px}.bp-ease .bp-introduction{padding-bottom:32px}.bp-choice-heading{display:block}.bp-choice-heading h2{font-size:28px}.bp-choice-heading p{margin-top:12px;max-width:39ch}.bp-options{gap:10px}.bp-option{font-size:14px;min-height:132px;padding:17px 15px}.bp-option span{font-size:22px;margin-bottom:11px}.bp-context>div{display:grid;grid-template-columns:1fr 1fr}.bp-context button{text-align:left;font-size:14px}.bp-context{padding-top:0}.bp-result{scroll-margin-top:12px}.bp-result-heading{align-items:start;gap:10px}.bp-result-heading p{font-size:13px;max-width:25ch}.bp-restart{font-size:13px;white-space:normal;max-width:105px;padding:8px 0}.bp-workspace{display:flex;flex-direction:column;gap:25px;align-items:stretch}.bp-story{display:contents}.bp-story-copy{min-height:0;order:0}.bp-story-position{margin-bottom:13px}.bp-ease #bp-story-title{font-size:32px;max-width:22ch;margin-bottom:17px}.bp-story-copy>p{font-size:16px;max-width:40ch}.bp-visual{order:1}.bp-story-controls{order:2;margin:0;display:grid;grid-template-columns:auto 1fr;align-items:stretch}.bp-story-controls #bp-next,.bp-story-controls #bp-finish{font-size:14px;text-align:center;display:flex;align-items:center;justify-content:center}.bp-visual-scene{height:350px}.bp-plane{width:77%;top:25px;padding:15px 17px;min-height:88px}.bp-plane:nth-child(2){top:131px}.bp-plane:nth-child(3){top:237px}.bp-visual[data-step="1"] .bp-plane{width:76%;left:46%;top:19px}.bp-visual[data-step="1"] .bp-plane:nth-child(2){left:50%;top:126px}.bp-visual[data-step="1"] .bp-plane:nth-child(3){left:54%;top:233px}.bp-visual[data-step="1"] .bp-plane:not(:last-child):after{height:21px}.bp-plane h3{font-size:14px}.bp-plane p{font-size:20px}.bp-visual figcaption{min-height:64px;padding:13px 16px}.bp-exploration{padding-bottom:40px}.bp-definition .bp-definition-layout{grid-template-columns:1fr;gap:28px}.bp-definition .bp-definition-photo{height:260px;max-height:none;object-position:50% 27%}.bp-definition .bp-definition-layout p{margin-top:21px}}
@media(prefers-reduced-motion:reduce){.bp-plane,.bp-visual-scene,.bp-option,.bp-story-position span,.bp-context button,.bp-story-controls button{transition:none;transform:translateX(-50%)}.bp-visual-scene,.bp-option,.bp-story-position span,.bp-context button,.bp-story-controls button{transform:none}}
.bp-still .bp-plane,.bp-still .bp-visual-scene,.bp-still .bp-option{transition:none}.bp-still .bp-visual-scene{transform:none}

/* On a phone, read the visual first. Flow layout keeps every label clear at any text size. */
@media(max-width:760px){
 .bp-workspace{display:grid;grid-template-columns:1fr;gap:20px}
 .bp-story-copy,.bp-story-copy>[aria-live]{display:contents}
 .bp-story-position{display:none}.bp-ease #bp-story-progress{order:0;margin:0}
 .bp-ease #bp-story-title{order:1;margin:0;font-size:30px}
 .bp-visual{order:2}.bp-story-copy #bp-story-copy{order:3;margin:0;font-size:16px}
 .bp-story-controls{order:4}
 .bp-visual-scene{height:auto;min-height:300px;display:grid;gap:16px;padding:22px 18px;transform:none}
 .bp-plane,.bp-visual[data-step] .bp-plane{position:relative;left:auto;top:auto;width:100%;transform:none;min-height:86px;padding:14px 16px}
 .bp-visual[data-step] .bp-plane:nth-child(2),.bp-visual[data-step] .bp-plane:nth-child(3){left:auto;top:auto;transform:none}
 .bp-visual[data-step="1"] .bp-plane:not(:last-child):after{height:17px;left:50%;transform:none}
 .bp-plane p{font-size:20px}.bp-result-heading{margin-bottom:20px}
}