.wo-demo{container-type:inline-size;margin-block:40px}.wo-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;padding:24px;border:1px solid #dce7eb;border-radius:18px;background:#fff;align-items:center}.wo-stage{height:390px;display:flex;align-items:center;justify-content:center;position:relative;background:radial-gradient(#fff,#edf5f8);border-radius:14px;perspective:900px;overflow:hidden}.wo-model{width:220px;height:285px;position:relative;border:14px solid #e4e9eb;box-shadow:0 5px 16px #244c5920,inset 0 0 0 2px #8b9da5;transform-style:preserve-3d;box-sizing:border-box}.wo-opening{position:absolute;inset:0;background:#f9fcfd}.wo-sash,.wo-fixed{position:absolute;inset:3px;border:12px solid #f5f6f7;box-shadow:0 0 0 1px #9eacb2,inset 0 0 0 2px #4d626a;background:#cfe3e9;box-sizing:border-box;transform-style:preserve-3d}.wo-sash span,.wo-fixed span{position:absolute;inset:2px;background:linear-gradient(120deg,#c9e2eb,#f0f8fa 45%,#d3e6ec);border:2px solid #dfe6e9}.wo-sash{transition:transform .65s ease;transform-origin:right center}.wo-fixed{display:none}.wo-model[data-kind=casement].is-open .wo-sash{transform:rotateY(55deg)}.wo-model[data-kind=awning] .wo-sash{transform-origin:center top}.wo-model[data-kind=awning].is-open .wo-sash{transform:rotateX(32deg)}.wo-model[data-kind=slider]{width:290px;height:220px;overflow:hidden;transform-style:flat}.wo-model[data-kind=slider] .wo-sash{right:auto;width:calc(50% - 3px);z-index:1;transform-style:flat}.wo-model[data-kind=slider] .wo-fixed{display:block;left:50%;z-index:2;transform-style:flat}.wo-model[data-kind=slider].is-open .wo-sash{transform:translateX(85%)}.wo-model[data-kind=hung]{overflow:hidden;transform-style:flat}.wo-model[data-kind=hung] .wo-fixed{display:block;bottom:50%;z-index:2;transform-style:flat}.wo-model[data-kind=hung] .wo-sash{top:50%;z-index:1;transform-style:flat}.wo-model[data-kind=hung].is-open .wo-sash{transform:translateY(-85%)}.wo-view{position:absolute;bottom:15px;font-size:12px;color:#526e78}.wo-controls label{display:block;font-weight:600;margin-bottom:8px}.wo-controls select{width:100%;padding:12px;border:1px solid #bdcfd6;border-radius:8px;background:#fff;color:#123e4a;font:inherit;min-height:46px}.wo-buttons{display:flex;gap:8px;margin:18px 0}.wo-buttons button{flex:1;min-height:46px;border:1px solid #c6dce2;border-radius:8px;background:#f3f8f9;color:#123e4a;font:inherit;font-weight:600;cursor:pointer}.wo-buttons button[aria-pressed=true]{background:#007f95;color:#fff}.wo-buttons button:disabled{cursor:default;opacity:.45}.wo-buttons button:focus-visible,.wo-controls select:focus-visible{outline:3px solid #00a7c2;outline-offset:3px}.wo-description h3{font-size:24px}.wo-description p{line-height:1.65}.wo-note{font-size:12px!important;color:#607780;line-height:1.6!important}.wo-description{min-height:175px}[data-operation-status]{font-size:13px;font-weight:600;color:#007f95}
@container(max-width:650px){.wo-layout{grid-template-columns:1fr;padding:16px;gap:18px}.wo-stage{height:340px}.wo-description{min-height:0}.wo-model[data-kind=slider]{width:min(290px,90%)}}
@media(prefers-reduced-motion:reduce){.wo-sash{transition:none}}
.wo-model[data-kind=inward].is-open .wo-sash{transform:rotateY(-55deg)}