/* Preview only: one connected explanation board, with natural page scrolling. */
.zx-intro{max-width:850px;padding-block:12px 28px}.zx-intro h1{font-size:clamp(32px,4vw,48px)}
.zx-lede{font-size:18px;line-height:1.8;max-width:70ch}.zx-tools{margin-block-start:14px}
.zx-walk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-rows:auto 1fr auto;gap:0;background:#FFFEFA;border:1px solid #e1d9cf;border-radius:24px;box-shadow:0 14px 42px -30px #17374740;scroll-margin-block-start:calc(var(--hdr) + 12px);isolation:isolate}
.zx-walk>.zx-dots{grid-column:1/-1;grid-row:1;position:relative;top:auto;margin:0;padding:12px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;width:100%;max-width:100%;border:0;border-block-end:1px solid #e6ded4;border-radius:24px 24px 0 0;background:#f4f0e9;box-sizing:border-box;backdrop-filter:none}
.zx-dots button{box-sizing:border-box;justify-content:center;min-height:48px;padding:7px 8px;border-radius:12px;color:#52666c;white-space:nowrap;font-size:15px;gap:8px;transition:background .18s,color .18s}
.zx-dots button:hover{background:#ebe3dc}.zx-dots button[aria-current=step]{background:#7b3546;color:#fff;box-shadow:0 3px 10px #7b35461a}.zx-dots button span{width:25px;height:25px;flex:none}
.zx-stage-wrap{grid-column:2;grid-row:2;position:sticky;top:calc(var(--hdr) + 12px);align-self:start;padding:20px;background:transparent;border:0;min-width:0}
.zx-stage{height:430px;min-height:430px;max-height:none;position:relative;top:auto;border-radius:18px;border:1px solid #dbe3df;background:radial-gradient(ellipse at 50% 10%,#fff 20%,#eef4f1 100%)}
.zx-steps{grid-column:1;grid-row:2;min-width:0;padding:28px 26px 20px;border-inline-end:1px solid #e6ded4}
.zx-walk .zx-step,.zx-walk .zx-step:last-of-type{padding:0;min-height:0;opacity:1;scroll-margin-block-start:calc(var(--hdr) + 20px)}
.zx-step h2{font-size:clamp(23px,2.25vw,30px);line-height:1.55;margin-block:6px 16px}.zx-step p{font-size:17px;line-height:1.8;margin-block:0 14px}.zx-step .zx-step-n{color:#7b3546;font-size:14px;font-weight:700;margin:0}.zx-step .zx-note{font-size:14px;color:#627477}
.zx-related{border-block-start:1px solid #e5dfd6;padding-block-start:10px;margin-block-start:18px}.zx-related summary{font-size:15px;font-weight:700;cursor:pointer;color:#7b3546;min-height:40px;display:list-item;list-style-position:inside}.zx-related ul{padding-block-start:7px}.zx-related a{font-size:14px;line-height:1.8}
.zx-srcline a{font-size:15px}.zx-rounds{gap:6px}.zx-rounds button{padding-inline:11px;font-size:14px;border-width:1px}.zx-step .zx-round-text{font-size:15px;border-inline-start:3px solid #7b3546;padding-inline-start:12px;background:#f7f0f0;padding-block:10px}
.zx-walk>.zr-scene-nav{grid-column:1/-1;grid-row:3;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;margin:0;border-block-start:1px solid #e6ded4;background:#FFFEFA;border-radius:0 0 24px 24px;gap:12px}
.zr-scene-nav button{min-height:46px;font-size:15px;padding-inline:18px}.zx-progress-label{font-size:14px;color:#657578;white-space:nowrap}
.zx-step .zm-gist{padding:14px;background:#f4f0e9;border-radius:14px}.zx-step .zm-gist h2{font-size:20px}.zx-step .zm-gist p{font-size:15px}.zx-step .zm-btn{font-size:14px;padding:8px 12px}
@media(min-width:761px) and (max-width:980px){.zx-walk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.zx-stage-wrap{order:initial;grid-column:2;grid-row:2;padding:14px}.zx-steps{order:initial;grid-column:1;grid-row:2;padding:22px 18px}.zx-gate{width:92px}.zx-arch{width:60px;height:74px}.zx-stage{height:390px;min-height:390px}.zx-steps :is(a,button,input,[tabindex]){scroll-margin-block-start:calc(var(--hdr) + 18px)}}
@media(max-width:760px){
 .zx-lesson-visible :is(.zm-dock,.zr-ask-launch,.zm-totop-row){visibility:hidden!important;pointer-events:none}
 .zx-intro{padding-block:8px 20px}.zx-intro h1{font-size:32px}.zx-lede{font-size:16px}.zx-tools{margin-block-start:10px}
 .zx-walk{display:flex;flex-direction:column;border-radius:18px;gap:0;scroll-margin-block-start:calc(var(--hdr) + 6px)}
 .zx-walk>.zx-dots{order:0;grid-template-columns:repeat(5,minmax(0,1fr));border-radius:18px 18px 0 0;padding:7px 5px;gap:2px}
 .zx-dots button{display:flex;flex-direction:column;gap:3px;min-height:57px;padding:4px 1px;border-radius:10px;font-size:12px}.zx-dots button span{width:22px;height:22px;font-size:11px}
 .zx-stage-wrap{order:1;align-self:stretch;position:sticky;top:var(--hdr);z-index:8;padding:8px;background:#FFFEFA;border-block-end:1px solid #e6ded4}
 .zx-stage{height:250px;min-height:250px;max-height:none;border-radius:13px}.zx-stage-title{top:11px;inset-inline-start:14px;font-size:13px}.zx-gate{width:80px}.zx-arch{width:54px;height:66px}.zx-gate b{font-size:14px}.zx-gate small{font-size:11px}.zx-gate-info{padding:6px 10px;width:90%;border-radius:10px}.zx-gate-info b{font-size:13px}.zx-gate-info span{font-size:12px}.zx-pool{font-size:12px;bottom:9px;inset-inline:8px}.zx-apply b{font-size:14px}.zx-apply li{padding-block:6px}.zx-nom-tag{font-size:10px}
 .zx-steps{order:2;padding:18px 18px 12px;border:0}.zx-step h2{font-size:23px;line-height:1.55;margin-block:4px 10px}.zx-step p{font-size:16px;line-height:1.75;margin-block-end:11px}.zx-step .zx-step-n{font-size:12px}
 .zx-walk>.zr-scene-nav{order:3;padding:12px 10px;border-radius:0 0 18px 18px;gap:6px}.zr-scene-nav button{font-size:13px;padding-inline:10px}.zx-progress-label{font-size:11px}
 .zx-steps :is(a,button,input,[tabindex]){scroll-margin-block-start:calc(var(--hdr) + 290px)}.zx-walk .zx-step{scroll-margin-block-start:calc(var(--hdr) + 290px)}
 .zx-related{margin-block-start:10px}.zx-srcline a{font-size:14px}
}
@media(max-width:360px){.zx-progress-label{display:none}}
@media(max-width:760px) and (max-height:650px){.zx-stage-wrap{position:relative;top:auto}.zx-steps :is(a,button,input,[tabindex]){scroll-margin-block-start:calc(var(--hdr) + 15px)}}
@media(prefers-reduced-motion:reduce){.zx-walk *{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.zx-walk{display:block;border:0}.zx-walk>.zx-dots,.zx-stage-wrap,.zr-scene-nav{display:none!important}.zx-steps{padding:0;border:0}.zx-walk .zx-step[hidden]{display:block!important}}
/* Short landscape phones: keep the diagram and text unobstructed. */
@media(max-width:980px) and (max-height:650px){
 .zx-lesson-visible :is(.zm-dock,.zr-ask-launch,.zm-totop-row){visibility:hidden!important;pointer-events:none}
 .zx-stage-wrap{position:relative;top:auto}
}
/* Keep bottom step actions above the sticky illustration as the lesson ends. */
.zx-walk>.zr-scene-nav{position:relative;z-index:9}