/* Page-specific interactions that extend the Studio design. */
.diagram-open{position:relative;width:100%;display:block;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:4px}.diagram-open:focus-visible{outline-offset:3px}.diagram-zoom{position:absolute;right:12px;bottom:12px;width:36px;height:36px;display:grid;place-items:center;background:#f7f4eced;border:1px solid #ddd9cc;border-radius:50%;color:#354536;font-size:20px;opacity:0;transition:opacity .18s}.diagram-open:hover .diagram-zoom,.diagram-open:focus-visible .diagram-zoom{opacity:1}.diagram-dialog{padding:0;border:1px solid #56654c;border-radius:8px;background:#0e281e;width:min(1440px,calc(100vw - 48px));max-width:none;max-height:94dvh;overflow:auto}.diagram-dialog::backdrop{background:#131c15ba;backdrop-filter:blur(5px)}.diagram-dialog img{display:block;width:100%;height:auto;max-height:91dvh;object-fit:contain}.diagram-close{position:absolute;right:10px;top:10px;z-index:2;width:44px;height:44px;display:grid;place-items:center;border:1px solid #ccd6c7;border-radius:50%;background:#f5f2e5ef;font-size:27px;color:#243725}.detail-body ul{padding-left:19px;margin:0;display:grid;gap:8px}.future-symbol{font-size:37px;color:#64735c}.future-demo p span{display:inline-block;font:12px/1.6 Arial,Helvetica,sans-serif;color:#6f7666;margin-top:11px}.future-grid .future-demo{aspect-ratio:auto;min-height:205px}.compare-range{touch-action:pan-y}.compare-range:focus-visible{outline:none}.feature-switcher .feature-tab:focus-visible{outline-offset:-4px}.comparison-player:fullscreen .layer{max-width:none}.player-status{max-width:calc(100% - 32px)}
@media(max-width:639px){.future-grid{grid-template-columns:1fr 1fr;gap:15px}.future-grid .future-demo{min-height:170px;padding:18px 8px}.future-demo p{font-size:17px}.diagram-zoom{opacity:1;width:32px;height:32px}.diagram-dialog{width:calc(100vw - 20px)}}

/* At endpoints, center the grip on the frame edge and clip its outer half. */
.compare-stage.split-start .divider::after { transform: translate(-50%, -50%); }
.compare-stage.split-end .divider::after { transform: translate(-50%, -50%); }

.compare-stage.split-start .white-tag, .compare-stage.split-end .render-tag { opacity: 0; }