.box-lab{padding:22px;border:1px solid #cbd5e1;border-radius:20px;background:#f5f7ff;margin:28px 0;color:#1e293b}.box-lab h2{margin:4px 0 12px;font-size:1.4375rem}.box-lab p{margin:12px 0}.lab-kicker{font-size:0.75rem;text-transform:uppercase;letter-spacing:.09em;color:#4f46e5;font-weight:700}.box-lab button,.box-lab input{font:inherit;font-size:0.9375rem;min-height:44px;min-width:44px;border:1px solid #c7d2fe;border-radius:12px;background:white;color:#1e293b;padding:10px 12px}.box-lab button{cursor:pointer}.box-lab button[aria-pressed=true]{color:#fff;background:#3730a3;border-color:#3730a3}.box-lab button:disabled{opacity:.45;cursor:default}.box-lab :focus-visible{outline:3px solid #4338ca;outline-offset:3px}.box-pairs,.box-actions,.box-views{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.box-pairs button{flex:1 1 140px}.box-actions button,.box-views button{flex:1 1 110px}.box-field{display:grid;gap:6px;max-width:280px;font-size:0.9375rem}.box-field span,.box-note{font-size:0.875rem;color:#475569}.box-check{display:flex;align-items:center;gap:10px;min-height:44px;margin-top:16px;font-size:0.9375rem}.box-check input{min-width:24px;width:24px;min-height:24px;height:24px;accent-color:#3730a3;padding:0;flex:none}.box-readout{padding:14px;background:#e0e7ff;border-radius:12px;font-variant-numeric:tabular-nums}.q3d-stage{position:relative;border:1px solid #d9e1ed;border-radius:14px;background:white;width:100%;min-width:0;overflow:hidden}.q3d-static svg{display:block;width:100%;height:auto}.q3d-webgl{height:360px;width:100%;touch-action:none}.q3d-webgl canvas{display:block;width:100%;height:100%}.q3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.q3d-labels>svg{position:absolute;inset:0}.q3d-labels span{position:absolute;white-space:nowrap;font:600 .9375rem/1.2 system-ui;color:#1e293b;text-shadow:1px 1px white,-1px -1px white,0 0 3px white;padding:1px 2px}.box-lab [hidden]{display:none!important}@media(max-width:600px){.box-lab{padding:14px;border-radius:16px}.q3d-webgl{height:300px}.box-lab h2{font-size:1.3125rem}.box-lab button{font-size:0.875rem}.box-pairs button{flex-basis:100%}}@media(prefers-reduced-motion:reduce){.box-lab *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

[data-box-lab]:not([data-box-ready]) .box-actions,[data-box-lab]:not([data-box-ready]) .box-pairs,[data-box-lab]:not([data-box-ready]) .box-views,[data-box-lab]:not([data-box-ready]) .box-field,[data-box-lab]:not([data-box-ready]) .box-check{display:none}

.box-lab *{box-sizing:border-box}.box-height-control{display:grid;grid-template-columns:minmax(140px,240px) minmax(160px,1fr);gap:12px 20px;padding:16px;background:#fff;border:1px solid #d8e1ef;border-radius:14px}.box-range-field{display:flex;flex-direction:column;justify-content:center;gap:8px;min-width:0;font-size:0.9375rem}.box-lab input[type=range]{min-height:44px;width:100%;min-width:0;padding:0;border:0;background:transparent;accent-color:#3730a3;cursor:pointer;touch-action:pan-y}.box-range-note{grid-column:1/-1;font-size:0.875rem;color:#475569;margin:0!important}.box-lab button[aria-disabled=true]{opacity:.5}.box-net-dimensions{display:flex;flex-wrap:wrap;gap:8px 18px;background:#fff;border:1px solid #d9e1ed;border-radius:12px;padding:12px;margin-top:12px;font-size:0.9375rem}.box-net-dimensions>span{max-width:100%;overflow-x:auto;white-space:nowrap}.box-comparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}.box-comparison>p{grid-column:1/-1;margin:0!important;font-weight:600}.box-candidate{display:flex;flex-direction:column;gap:8px;padding:13px 10px;border:1px solid #cbd5e1;border-radius:12px;background:#fff;min-width:0}.box-candidate strong{font-size:0.875rem;font-weight:600;line-height:1.4;min-height:40px}.box-candidate>span{max-width:100%;overflow-x:auto;font-variant-numeric:tabular-nums}.box-candidate small{font-size:0.8125rem;line-height:1.4;color:#475569}.box-candidate.is-shortest{border-color:#719f8e;background:#eef8f2}.box-candidate.is-shortest small{color:#2a6650;font-weight:600}.box-candidate.is-selected{box-shadow:inset 0 3px #3730a3}.box-number{font-variant-numeric:tabular-nums;white-space:nowrap}.box-readout{overflow-x:auto;max-width:100%}.box-candidate-formula .katex{font-size:1em}
@media(max-width:600px){.box-height-control{grid-template-columns:minmax(0,1fr);padding:12px;gap:10px}.box-field{max-width:none}.box-comparison{grid-template-columns:minmax(0,1fr)}.box-candidate{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px}.box-candidate strong{grid-column:1/-1;min-height:0}.box-candidate small{grid-column:1/-1}.box-net-dimensions{font-size:0.9375rem;padding:10px}}
[data-box-lab]:not([data-box-ready]) .box-height-control,[data-box-lab]:not([data-box-ready]) .box-net-dimensions,[data-box-lab]:not([data-box-ready]) .box-comparison{display:none}

/* Readable whole expressions at the narrow Safari viewport. */
.box-selected-length{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:6px 0}.box-selected-length>span{white-space:nowrap}.box-height-readout{display:block}.box-net-dimensions .katex+.katex{margin-left:.12em}
@media(max-width:600px){.box-candidate{grid-template-columns:minmax(0,1fr)}.box-candidate>span{overflow:visible}.box-candidate-formula{white-space:nowrap}}

.box-net-dimensions>span{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;overflow:visible;white-space:normal}.box-dimension-value{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
@media(max-width:600px){.box-net-dimensions>span{display:flex;flex-basis:100%;flex-direction:column;align-items:flex-start}}

/* The focus indicator stays inside the clipped 3D canvas. */
.box-lab .q3d-webgl:focus-visible{outline-offset:-5px;outline-width:3px;box-shadow:inset 0 0 0 5px #fff}
.box-lab .box-readout:empty{display:none}
.box-lab .box-candidate>span{overflow:visible}

/* v6: the static fallback must not promise controls that are unavailable. */
[data-box-lab]:not([data-box-ready]) [data-box-live-intro],
[data-box-lab]:not([data-box-ready]) .box-readout,
[data-box-lab]:not([data-box-ready]) .box-note,
[data-box-lab]:not([data-box-ready]) [data-box-status]{display:none}
.box-lab .katex{white-space:nowrap}