/* The steps explain themselves: no player buttons or live-status ornaments. */
.bd31{--bd31-ink:#163b2f;--bd31-paper:#f6f4e9;--bd31-mint:#a3dcc8;--bd31-gold:#e8b83d;color:var(--bd31-ink);padding:clamp(56px,8vw,112px) max(20px,calc((100% - 1240px)/2));background:#e7eedf;position:relative;isolation:isolate;overflow:hidden}
.bd31 *{box-sizing:border-box}
.bd31-intro{max-width:880px;margin:0 auto 34px;text-align:center}
.bd31-eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.bd31 h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(49px,6.5vw,91px);line-height:1.02;letter-spacing:-.025em;margin:0}
.bd31 h2 span{color:#577656}
.bd31-lead{font-size:clamp(17px,1.65vw,21px);line-height:1.55;max-width:570px;margin:23px auto 0}
.bd31-workbench{border:1px solid #163b2f24;border-radius:30px;background:var(--bd31-paper);box-shadow:0 22px 70px #23452c10;overflow:hidden}
.bd31-scene{position:relative;background:#eff1e5;overflow:hidden}
.bd31-scene-label{position:absolute;left:clamp(18px,3vw,36px);top:23px;font-size:12px;font-weight:700;z-index:1}
.bd31-illustration{display:block;width:100%;height:auto;max-height:605px;margin:auto}
.bd31-drawing-note{font:18px 'DM Sans',Arial,sans-serif;font-style:italic;letter-spacing:-.2px}
.bd31-scene-footer{position:absolute;bottom:21px;left:clamp(18px,3vw,36px);right:clamp(18px,3vw,36px);display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:#5f725e}
.bd31-mini-tag{border:1px solid #163b2f30;border-radius:30px;padding:7px 11px;font-weight:700}
.bd31-caption{padding:26px clamp(20px,3vw,38px) 28px;min-height:164px;border-top:1px solid #163b2f15}
.bd31-step-kicker{font-size:11px;letter-spacing:.12em;font-weight:800;margin:0 0 7px;color:#70816a}
.bd31-caption h3{font-size:clamp(25px,3vw,36px);font-weight:700;line-height:1.13;margin:0 0 8px;letter-spacing:-.035em;font-family:'DM Sans',Arial,sans-serif;text-transform:none}
.bd31-caption p[data-bd31-copy]{font-size:17px;line-height:1.5;margin:0;max-width:650px}
.bd31-stages{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:#163b2f19;border-top:1px solid #163b2f19;list-style:none;margin:0;padding:0}
.bd31-stages li{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:78px;background:var(--bd31-paper);color:#5c705d;padding:16px 10px;font-size:13px;font-weight:700;line-height:1.3;transition:background-color 180ms,color 180ms}
.bd31-stages li>span{font-size:11px;font-weight:600;flex-shrink:0;color:#74866f}
.bd31-stages li[aria-current="step"]{background:#d8e7cf;color:var(--bd31-ink)}
.bd31-stages li[aria-current="step"]>span{color:var(--bd31-ink)}
.bd31-stages li[aria-current="step"]::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;background:#537350;border-radius:0 0 3px 3px}
.bd31-note{font-size:12px;line-height:1.5;max-width:690px;margin:18px auto 0;text-align:center;color:#60725d}
/* Each moving SVG object uses a wrapper, and only transforms/opacity animate. */
.bd31-shade,.bd31-prep,.bd31-sculpt,.bd31-curing,.bd31-polish,.bd31-finish-spark,.bd31-finish-line,.bd31-edge-finish,.bd31-material,.bd31-bonding-sheen{opacity:0}.bd31-prep,.bd31-sculpt,.bd31-curing,.bd31-polish,.bd31-finish-spark,.bd31-shade{transform-box:fill-box;transform-origin:center}.bd31-chip-callout{opacity:1}.bd31[data-stage="0"] .bd31-shade{opacity:1}.bd31[data-stage="1"] .bd31-prep,.bd31[data-stage="1"] .bd31-bonding-sheen{opacity:1}.bd31[data-stage="2"] .bd31-sculpt{opacity:1}.bd31[data-stage="3"] .bd31-curing{opacity:1}.bd31[data-stage="4"] .bd31-polish,.bd31[data-stage="4"] .bd31-finish-line{opacity:1}.bd31[data-stage="2"] .bd31-material,.bd31[data-stage="3"] .bd31-material,.bd31[data-stage="4"] .bd31-material,.bd31[data-stage="4"] .bd31-edge-finish{opacity:1}.bd31[data-stage="2"] .bd31-chip-callout,.bd31[data-stage="3"] .bd31-chip-callout,.bd31[data-stage="4"] .bd31-chip-callout{opacity:0}
.bd31[data-sequence="true"][data-stage="0"] .bd31-shade{animation:bd31-shade 2.3s cubic-bezier(.25,1,.5,1) both}.bd31[data-sequence="true"][data-stage="1"] .bd31-prep{animation:bd31-prepare 2.1s cubic-bezier(.25,1,.5,1) both}.bd31[data-sequence="true"][data-stage="2"] .bd31-sculpt{animation:bd31-sculpt 3.9s linear both}.bd31[data-sequence="true"][data-stage="2"] .bd31-material{animation:bd31-material 3.9s ease both}.bd31[data-sequence="true"][data-stage="3"] .bd31-curing{animation:bd31-cure-entry 2.9s cubic-bezier(.25,1,.5,1) both}.bd31[data-sequence="true"][data-stage="3"] .bd31-illumination{animation:bd31-light 2.9s linear both}.bd31[data-sequence="true"][data-stage="4"] .bd31-polish{animation:bd31-polish 3.4s linear both}.bd31[data-sequence="true"][data-stage="4"] .bd31-finish-spark{animation:bd31-spark 3.4s ease both}
.bd31[data-suspended="true"] *{animation-play-state:paused!important}
@keyframes bd31-shade{0%{transform:translateY(22px);opacity:0}20%,80%{transform:translateY(0);opacity:1}100%{transform:translateY(12px);opacity:0}}
@keyframes bd31-prepare{0%{transform:translate(45px,30px) rotate(6deg);opacity:0}22%{transform:translate(0,0) rotate(0);opacity:1}72%{transform:translate(-6px,-8px) rotate(-5deg);opacity:1}100%{transform:translate(40px,25px) rotate(5deg);opacity:0}}
@keyframes bd31-sculpt{0%{transform:translate(70px,-35px) rotate(-9deg);opacity:0}15%{transform:translate(0,0) rotate(0);opacity:1}29%{transform:translate(-5px,5px) rotate(-1deg)}42%{transform:translate(4px,-3px) rotate(1deg)}55%{transform:translate(-4px,3px) rotate(-1deg)}69%{transform:translate(3px,-2px) rotate(1deg)}83%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(65px,-35px) rotate(-8deg);opacity:0}}
@keyframes bd31-material{0%,20%{opacity:0}75%,100%{opacity:1}}
@keyframes bd31-cure-entry{0%{transform:translate(50px,-40px) rotate(-5deg);opacity:0}19%,83%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(50px,-40px) rotate(-5deg);opacity:0}}
@keyframes bd31-light{0%,24%{opacity:0}34%,74%{opacity:1}84%,100%{opacity:0}}
@keyframes bd31-polish{0%{transform:translate(65px,-15px);opacity:0}17%{transform:translate(0,0);opacity:1}29%{transform:translate(-4px,3px)}41%{transform:translate(4px,-2px)}53%{transform:translate(-3px,2px)}64%{transform:translate(3px,-2px);opacity:1}80%,100%{transform:translate(65px,-15px);opacity:0}}
@keyframes bd31-spark{0%,65%{transform:scale(.2);opacity:0}82%{transform:scale(1);opacity:1}100%{transform:scale(.7);opacity:.8}}
/* Reset the drawing beneath a short fade, so the chip does not jump back into place. */
.bd31[data-loop-phase="out"] .bd31-illustration,.bd31[data-loop-phase="out"] .bd31-caption>div{animation:bd33-loop-out 300ms ease-in-out both}
.bd31[data-loop-phase="in"] .bd31-illustration,.bd31[data-loop-phase="in"] .bd31-caption>div{animation:bd33-loop-in 300ms ease-in-out both}
@keyframes bd33-loop-out{from{opacity:1}to{opacity:0}}
@keyframes bd33-loop-in{from{opacity:0}to{opacity:1}}
html.motion-off .bd31 *,html.page-hidden .bd31 *{animation-play-state:paused!important}
@media(max-width:800px){.bd31-stages li{flex-direction:column;gap:8px;font-size:12px;min-height:82px;padding:13px 6px}.bd31-illustration{width:115%;max-width:none;margin-left:-7.5%;max-height:none}.bd31-caption p[data-bd31-copy]{font-size:16px}.bd31-drawing-note{font-size:16px}}
@media(max-width:520px){.bd31{padding:50px 14px}.bd31-intro{margin-bottom:26px}.bd31 h2{font-size:52px}.bd31-lead{font-size:17px;margin-top:18px;max-width:315px}.bd31-workbench{border-radius:22px}.bd31-scene-label{top:18px;font-size:10px;left:17px}.bd31-illustration{width:145%;margin-left:-22.5%;margin-top:30px;margin-bottom:32px}.bd31-scene-footer{font-size:9px;left:16px;right:16px;bottom:16px}.bd31-mini-tag{padding:5px 8px}.bd31-caption{padding:23px 20px 20px;min-height:178px}.bd31-caption h3{font-size:29px}.bd31-caption p[data-bd31-copy]{min-height:48px}.bd31-stages{grid-template-columns:repeat(6,minmax(0,1fr))}.bd31-stages li{grid-column:span 2;font-size:12px;line-height:1.3;min-height:72px;padding:12px 6px;gap:8px}.bd31-stages li:nth-child(n+4){grid-column:span 3}.bd31-stages li[aria-current="step"]::before{left:10px;right:10px}.bd31-note{font-size:11px;max-width:290px}.bd31-chip-callout.bd31-drawing-note,.bd31-finish-line.bd31-drawing-note{display:none}}
@media(prefers-reduced-motion:reduce){.bd31 *{animation:none!important;transition:none!important}.bd31[data-stage="4"] .bd31-polish{opacity:0}.bd31[data-stage="4"] .bd31-finish-spark{opacity:.8;transform:scale(.7)}}
@media(max-width:360px){.bd31 h2{font-size:43px}.bd31-lead{font-size:16px}}
