/* The loading explainer has a real cutaway scene, separate from the quantity controls. */
.capacity{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:42px;align-items:center}
.capacity-intro h2{font-size:clamp(32px,3.8vw,51px);line-height:1.18;max-width:430px}
html[dir=rtl] .capacity-intro h2{line-height:1.45}
.capacity-intro>p:not(.eyebrow){margin-block:20px;font-size:14px;line-height:1.9;max-width:430px}
.container-planner{padding:25px;border:1px solid #cee6f3;border-radius:22px;background:linear-gradient(150deg,#f6fcff,#eaf7fd);min-width:0;max-width:none;width:100%}
.container-planner .planner-head{padding-bottom:17px;margin-bottom:3px;font-size:12px}
.container-planner .vehicle-controls{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
.container-planner .vehicle-row{grid-template-columns:31px minmax(0,1fr) auto;gap:9px;padding-block:16px;min-width:0}
.container-planner .vehicle-type-icon{width:31px;height:39px;border-radius:9px}
.container-planner .vehicle-type-icon svg{width:23px;height:23px}
.container-planner .vehicle-row strong{font-size:12px;line-height:1.5;display:block}
.container-planner .vehicle-row small{font-size:.75rem;line-height:1.6;display:block;margin-top:3px;max-width:140px}
.container-planner .counter{gap:5px}
.container-planner .counter button{width:27px;height:27px;min-width:27px;font-size:17px}
.container-planner .counter output{width:16px;min-width:16px;font-size:12px;text-align:center}
.container-planner .load-summary{margin-block:17px 10px;padding-top:0;display:flex;align-items:center;flex-wrap:nowrap;gap:12px;min-width:0}
.container-planner .load-caption{font-size:.75rem;letter-spacing:0;margin:0;width:auto}
.container-planner #unit-count{font-size:15px;margin-inline-start:auto;white-space:nowrap;direction:inherit;unicode-bidi:plaintext;letter-spacing:0}
.container-planner #reset-load{font-size:.75rem;position:static;margin:0;text-decoration:underline;text-underline-offset:3px}
.load-progress{height:4px;border-radius:4px;background:#d6ebf5;overflow:hidden;margin-bottom:14px}
.load-progress>span{display:block;width:0;height:100%;background:#119bd8;transition:width .3s}
.cutaway-viewport{position:relative;isolation:isolate;width:100%;aspect-ratio:2.1;min-height:230px;border-radius:15px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#fff 5%,#ecf7fc 65%,#dceef8 100%);border:1px solid #d3e9f4;direction:ltr}
.cutaway-viewport canvas,.cutaway-viewport>svg,.cutaway-fallback{position:absolute;inset:0;width:100%;height:100%;display:block}
.cutaway-viewport canvas,.cutaway-viewport>svg{z-index:1;touch-action:pan-y;cursor:grab}
.cutaway-viewport canvas:active{cursor:grabbing}
.cutaway-fallback svg{display:block;width:100%;height:100%}
.cutaway-viewport[data-render-mode=webgl] .cutaway-fallback,.cutaway-viewport[data-render-mode=svg] .cutaway-fallback{visibility:hidden}
.cutaway-viewport[data-render-mode=photographic] .cutaway-fallback{visibility:hidden}
.photo-scene-content{position:absolute;inset:0;z-index:1;width:100%;height:100%;direction:ltr}
.photo-container-scene{width:100%;height:100%;display:block;overflow:visible}
.photo-scene-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse,#fff,#eaf5fb);font-size:.75rem;color:#7797a8}
.photo-vehicle{transition:filter .2s}
.photo-vehicle:hover{filter:drop-shadow(0 0 4px #8ed5ef)}
.steel-chain{opacity:.98}
.steel-chain ellipse{stroke-linecap:round}
.cutaway-viewport[data-render-mode=photographic]{cursor:default;background:radial-gradient(ellipse at 50% 40%,#fff,#eaf6fc 75%)}
.cutaway-viewport .cutaway-badge{position:absolute;z-index:2;inset-block-start:12px;inset-inline-start:12px;border:1px solid #d9eaf4;border-radius:20px;padding:5px 10px;font-size:.75rem;letter-spacing:1px;color:#39758f;background:#ffffffd9;pointer-events:none}
.cutaway-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;flex-wrap:wrap}
.cutaway-views{display:flex;gap:4px;background:#dff0fa;padding:3px;border-radius:8px}
.cutaway-views button{font-size:.75rem;padding:6px 10px;border-radius:5px;min-height:30px}
.cutaway-views button[aria-pressed=true]{background:#fff;color:#087dab;box-shadow:0 2px 5px #10648e10}
.cutaway-hint{font-size:.75rem;color:#6d94a8;display:flex;gap:5px;align-items:center}
.load-presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:17px}
.load-presets button{font-size:.75rem;line-height:1.5;padding:7px 10px;border:1px solid #c9e2f0;border-radius:7px;background:#ffffffb5;color:#34748e;transition:border-color .2s,background .2s}
.load-presets button:hover,.load-presets button[aria-pressed=true]{border-color:#60b9df;background:#fff;color:#057eb6}
.container-planner .capacity-status{font-size:.75rem;line-height:1.8;margin-top:15px;min-height:22px}
.container-planner .planner-note{font-size:.75rem;line-height:1.8;margin-top:8px;color:#7293a4}
@media(max-width:1150px){.capacity{grid-template-columns:1fr 1.5fr;gap:28px}.container-planner{padding:20px}.container-planner .vehicle-controls{grid-template-columns:1fr}.container-planner .vehicle-row{padding-block:12px;grid-template-columns:36px minmax(0,1fr) auto}.container-planner .vehicle-row small{max-width:none}.container-planner .vehicle-row strong{font-size:13px}.container-planner .counter{gap:9px}.cutaway-viewport{aspect-ratio:1.8;min-height:220px}}
@media(max-width:760px){.capacity{grid-template-columns:1fr;gap:24px}.capacity-intro h2,.capacity-intro>p:not(.eyebrow){max-width:600px}.container-planner .vehicle-controls{grid-template-columns:1fr 1fr}.container-planner .vehicle-row{grid-template-columns:minmax(0,1fr) auto}.container-planner .vehicle-type-icon{display:none}.container-planner .vehicle-row small{font-size:.75rem}.container-planner .vehicle-row strong{font-size:12px}.container-planner .counter{gap:4px}.container-planner .counter button{width:25px;height:25px;min-width:25px}.cutaway-viewport{aspect-ratio:1.85;min-height:220px}}
@media(max-width:420px){.container-planner{padding:17px;border-radius:17px}.container-planner .vehicle-controls{grid-template-columns:1fr}.container-planner .vehicle-row{grid-template-columns:31px minmax(0,1fr) auto;padding-block:12px}.container-planner .vehicle-type-icon{display:flex}.container-planner .vehicle-row small{font-size:.75rem}.container-planner .counter{gap:9px}.cutaway-viewport{min-height:195px;aspect-ratio:1.48;margin-inline:-9px;width:calc(100% + 18px)}.cutaway-hint{font-size:.75rem}.load-presets button{font-size:.75rem}.container-planner .load-caption{font-size:.75rem}.container-planner #unit-count{font-size:13px}}
@media(prefers-reduced-motion:reduce){.load-progress>span{transition:none}}
.container-planner .vehicle-row:has(.vehicle-photo-thumb){grid-template-columns:64px minmax(0,1fr) auto}
.container-planner .vehicle-photo-thumb{display:flex;width:64px;height:44px;border:0;border-radius:0;background:transparent;align-items:center;justify-content:center}
.container-planner .vehicle-photo-thumb svg{width:64px!important;height:42px!important}
.vehicle-photo-skeleton{width:56px;height:18px;border-radius:7px;background:linear-gradient(110deg,#dcebf2,#edf7fb,#dcebf2)}
@media(max-width:420px){.container-planner .vehicle-row:has(.vehicle-photo-thumb){grid-template-columns:54px minmax(0,1fr) auto}.container-planner .vehicle-photo-thumb{width:54px}.container-planner .vehicle-photo-thumb svg{width:54px!important}}