.backorder-story{margin-top:36px;padding:26px;border:1px solid #64764f;border-radius:22px;background:radial-gradient(ellipse at center,#26382a,#101c14)}.bo-heading{display:flex;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid #5d704644;color:#d7c18a;font-size:11px;letter-spacing:.08em}.bo-heading span:last-child{color:#b4c2a7;letter-spacing:0}.bo-canvas svg{display:block;width:100%;height:auto;margin:20px 0;font-family:Arial,sans-serif}.bo-panel{fill:#1c3023;stroke:#53694b;stroke-width:1.5;transition:fill .4s,stroke .4s,filter .4s}.bo-order>.bo-panel{stroke:#c6ae70;fill:#24382a}.bo-title{font-size:22px;font-weight:600;fill:#f0f0dc}.bo-small{font-size:14px;fill:#c8d6b8}.bo-label{font-size:11px;letter-spacing:.65px;fill:#d5c38b}.bo-paths{fill:none;stroke:#80966d;stroke-opacity:.4;stroke-width:2;marker-end:url(#bo-arrow)}.bo-unit-slot{fill:none;stroke:#6e805b;stroke-dasharray:3 3;opacity:.45}.bo-unit rect{fill:#d8c18a;transition:fill .4s}.bo-unit{filter:drop-shadow(0 3px 5px #0005)}.bo-receipt{opacity:0;transition:opacity .4s,transform .6s;transform:translateY(10px)}.backorder-story[data-stage="1"] .bo-unit:nth-of-type(-n+6) rect{fill:#b8d49a}.bo-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #63734b;padding-top:20px}.bo-controls p{margin:0;color:#e1d7b6;font-size:16px;line-height:1.5}.bo-controls>div{display:flex;gap:10px;flex-shrink:0}.bo-controls button{padding:11px 18px;border:1px solid #839464;border-radius:25px;background:#263a28;color:#eceddd;cursor:pointer}.bo-controls button:focus-visible,.bo-canvas:focus-visible{outline:2px solid #e3c988;outline-offset:4px}.bo-note{font-size:12px;line-height:1.6;color:#a9b79b;margin:20px 0 0}.bo-scroll{display:none;color:#c5cda9;font-size:12px}.backorder-story[data-stage="3"] .bo-receipt,.backorder-story[data-stage="4"] .bo-receipt{opacity:1;transform:translateY(0)}.backorder-story[data-stage="3"] .bo-stock>.bo-panel,.backorder-story[data-stage="4"] .bo-stock>.bo-panel{stroke:#d8c18a;fill:#33432c;filter:drop-shadow(0 0 8px #d8c18a22)}.backorder-story.bo-first-shipped .bo-shipment-one>.bo-panel,.backorder-story.bo-complete .bo-shipment-two>.bo-panel{stroke:#8dcfc6;fill:#203b34}.backorder-story.bo-complete .bo-order>.bo-panel{stroke:#b7d99d;filter:drop-shadow(0 0 10px #9ebf7833)}@media(max-width:650px){.backorder-story{padding:16px}.bo-heading,.bo-controls{flex-direction:column;align-items:flex-start}.bo-controls p{font-size:14px}.bo-canvas{overflow-x:auto}.bo-canvas svg{min-width:700px}.bo-scroll{display:block}}@media(prefers-reduced-motion:reduce){.backorder-story *{transition:none!important}}
.bo-scene-heading{border-bottom:1px solid #5d704644;padding-bottom:20px;min-height:150px}.bo-scene-heading>span{font-size:11px;letter-spacing:.12em;color:#d7c18a}.bo-scene-heading h3{font-size:clamp(26px,3vw,38px);color:#efeedf;margin:16px 0 10px}.bo-scene-heading p{font-size:17px;color:#bcc7af;margin:0;line-height:1.6}.bo-count{font-size:42px;font-weight:700;fill:#e8d59e}.bo-summary .bo-label{font-size:10px;letter-spacing:.2px}.bo-controls>span{color:#c5cfb7;font-size:14px}.bo-products>g{filter:drop-shadow(0 4px 5px #0004)}[data-bo-delivery]{opacity:0;transition:opacity .5s}.bo-summary>rect:first-child{transition:stroke .4s}.backorder-story[data-stage="6"] .bo-summary>rect:first-child{stroke:#a9d49e;stroke-width:2}@media(max-width:650px){.bo-scene-heading{min-height:210px}.bo-scene-heading p{font-size:15px}}

/* Small arrival and completion cues keep the physical story easy to follow. */
[data-bo-confirmation]{transition:opacity .25s;filter:drop-shadow(0 0 15px #8fbd8d22)}
[data-bo-progress]{transition:width .5s ease}
[data-bo-carton]{filter:drop-shadow(0 8px 9px #0004)}
.backorder-story[data-stage="2"] [data-bo-owed]{fill:#e5c384}
.backorder-story[data-stage="6"] [data-bo-shipped],.backorder-story[data-stage="6"] [data-bo-owed]{fill:#b8dfb5}