.hardware-showcase.hw52{position:relative;overflow:visible;background:#fafcf9;border:1px solid #d9e4df;border-radius:20px;font-family:IBM Plex Sans Arabic,sans-serif;box-shadow:none;padding:28px 16px 18px}.hw52 :is(button,summary){font:inherit}.hw52 :is(button,a):focus-visible{outline:2px solid #268a9c;outline-offset:4px}.hw52 .hw52-heading{text-align:center;position:relative;z-index:1;padding:0 12px}.hw52 .hw52-kicker{font-size:9px;letter-spacing:2px;color:#8a9e94}.hw52 .hw52-heading h2{font-size:28px;font-weight:500;line-height:1.6;margin:9px 0 6px;color:#174650}.hw52 .hw52-heading p{font-size:13px;line-height:1.9;color:#6b8278;margin:0}.hw52 .hw52-canvas{--stage-height:420px;position:relative;height:var(--stage-height);isolation:isolate;perspective:1100px;transition:height .65s cubic-bezier(.2,.65,.25,1);margin-top:12px}.hw52 .hw52-canvas.is-exploded{--stage-height:610px}.hw52 .hw52-reference{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}.hw52 .hw52-reference image{pointer-events:none}.hw52 .hw52-assembled{position:absolute;top:10px;bottom:10px;width:min(660px,90%);left:50%;transform:translateX(-50%) translateY(0) scale(1);opacity:1;pointer-events:none;transition:transform .65s cubic-bezier(.2,.65,.25,1),opacity .4s ease}.hw52 .is-exploded .hw52-assembled{opacity:0;transform:translateX(-50%) translateY(20px) scale(.92) rotateX(4deg)}.hw52 .hw52-image-box{position:absolute;top:18px;left:50%;width:min(88%,calc((var(--stage-height) - 36px)*.69411765));aspect-ratio:590/850;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(40px) scale(.9) rotateX(6deg);pointer-events:none;transition:opacity .4s ease,transform .7s cubic-bezier(.2,.65,.25,1),visibility 0s .7s}.hw52 .is-exploded .hw52-image-box{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1) rotateX(0);pointer-events:auto;transition-delay:.1s,0s,0s}.hw52 .hw52-highlight{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.hw52 .hw52-highlight rect{fill:#27889a0a;stroke:#27889a;stroke-width:1.7;stroke-dasharray:6 6;animation:hw52-highlight-enter .2s ease-out}.hw52 .hw52-hotspot{position:absolute;width:44px;height:44px;border:0;background:transparent;padding:0;display:grid;place-items:center;transform:translate(-50%,-50%);border-radius:50%;cursor:pointer;opacity:0;transition:opacity .22s ease;transition-delay:0s;z-index:2}.hw52 .is-exploded .hw52-hotspot{opacity:1;transition-delay:var(--reveal-delay)}.hw52 .hw52-hotspot>span{display:block;width:13px;height:13px;background:#fcfffd;border:2px solid #2a8da0;border-radius:50%;box-shadow:0 0 0 4px #ffffffa3;transition:background .15s,box-shadow .15s}.hw52 .hw52-hotspot:hover>span{background:#96d3d8;box-shadow:0 0 0 5px #e9f7f4cc}.hw52 .hw52-hotspot.is-selected>span{background:#267e90;border-color:#fff;box-shadow:0 0 0 2px #267e90,0 0 0 6px #e9f7f4dd}.hw52 .hw52-hotspot:active{transform:translate(-50%,-50%)}.hw52 .hardware-component-detail.hw52-card{position:absolute;z-index:5;width:260px;max-width:calc(100vw - 64px);min-height:0;border:1px solid #cedfd7;border-radius:11px;background:#fffffff5;box-shadow:0 10px 32px #173e4312;margin:0;padding:16px;opacity:0;visibility:hidden;pointer-events:none;transform:translate(18px,-50%);transition:opacity .18s,visibility 0s .18s;text-align:right;direction:rtl}.hw52 .hw52-card[data-side=left]{transform:translate(calc(-100% - 18px),-50%)}.hw52 .hw52-card.is-open{opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}.hw52 .hw52-card-copy{animation:hw52-copy-enter .2s ease-out}.hw52 .hw52-card h3{font-size:16px;font-weight:500;color:#174650;line-height:1.7;margin:0 0 6px;-webkit-padding-end:22px;padding-inline-end:22px}.hw52 .hw52-card p{font-size:12px;line-height:1.9;color:#607c71;margin:0;overflow-wrap:anywhere}.hw52 .hw52-card-close{position:absolute;inset-inline-end:3px;top:3px;min-width:36px;min-height:36px;border:0;background:transparent;color:#67857a;display:grid;place-items:center;border-radius:7px}.hw52 .hw52-card-close:hover{background:#eef4ef}.hw52 .hw52-controls{gap:24px;position:relative;z-index:1;margin:4px auto 0;flex-wrap:wrap}.hw52 .hw52-controls,.hw52 .hw52-explore{display:flex;align-items:center;justify-content:center}.hw52 .hw52-explore{gap:12px;min-height:48px;padding:11px 24px;border:1px solid #1e5a65;border-radius:9px;background:#194c57;color:#f3f8f4;font-size:13px;transition:background .18s,box-shadow .18s}.hw52 .hw52-explore:hover{background:#246571;box-shadow:0 4px 12px #153e4312}.hw52 .hw52-explore.secondary{background:transparent;color:#386d70;border-color:#cbdcd4}.hw52 .hw52-index-trigger{display:flex;gap:7px;align-items:center;justify-content:center;min-height:44px;padding:8px 6px;border:0;background:transparent;color:#6d877b;font-size:12px}.hw52 .hw52-index-trigger:hover{color:#246571}.hw52 .hw52-disclosure{font-size:10px!important;line-height:1.9;color:#899c91;text-align:center;padding:0 12px;margin:18px 0 0}.hw52-index-dialog{font-family:IBM Plex Sans Arabic,sans-serif;width:360px;max-width:calc(100% - 32px);max-height:min(570px,85dvh);padding:18px;border-radius:16px}.hw52-index-dialog .dialog-head{margin-bottom:8px;padding-bottom:12px}.hw52-index-dialog .dialog-head h2{font-size:18px}.hw52-component-index{display:grid;grid-gap:0;gap:0}.hw52-component-index>button{display:flex;justify-content:space-between;align-items:center;text-align:start;gap:8px;min-height:44px;border:0;border-bottom:1px solid #e4ece6;padding:9px 5px;background:transparent;font:13px IBM Plex Sans Arabic,sans-serif;color:#315a51}.hw52-component-index>button:last-child{border:0}.hw52-component-index>button:hover{background:#edf5ef}.hw52-component-index small{font-size:10px;color:#809688}@keyframes hw52-copy-enter{0%{opacity:.5;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes hw52-highlight-enter{0%{opacity:0}to{opacity:1}}@media(max-width:760px){.hardware-showcase.hw52{padding:22px 8px 16px}.hw52 .hw52-heading h2{font-size:23px}.hw52 .hw52-heading p{font-size:12px}.hw52 .hw52-canvas{--stage-height:270px;margin-top:10px}.hw52 .hw52-canvas.is-exploded{--stage-height:480px;margin-bottom:122px}.hw52 .hw52-assembled{width:94%}.hw52 .hw52-image-box{width:min(90%,calc((var(--stage-height) - 36px)*.69411765))}.hw52 .hardware-component-detail.hw52-card{left:50%!important;top:calc(100% + 12px)!important;transform:translateX(-50%);width:calc(100% + 8px);max-width:none;min-height:94px;box-shadow:none;background:#f4f8f2;border-color:#dce7df;padding:14px 16px}.hw52 .hw52-card h3{font-size:15px}.hw52 .hw52-card p{font-size:12px}.hw52 .hw52-card-close{min-width:44px;min-height:44px}.hw52 .hw52-controls{gap:14px}.hw52 .hw52-explore{font-size:12px;padding:10px 16px}.hw52 .hw52-index-trigger{font-size:11px}.hw52 .hw52-disclosure{font-size:9px!important;margin-top:14px}.hw52-index-dialog{margin:auto auto calc(12px + env(safe-area-inset-bottom));max-height:80dvh}}@container(max-width:300px){.hw52 .hw52-heading h2{font-size:20px}.hw52 .hw52-canvas{--stage-height:230px}.hw52 .hw52-canvas.is-exploded{--stage-height:400px;margin-bottom:160px}.hw52 .hw52-controls{gap:6px}.hw52 .hw52-explore{padding:8px 10px}.hw52 .hw52-explore>svg:first-child{display:none}.hw52 .hardware-component-detail.hw52-card{width:calc(100% + 8px);max-width:none}.hw52 .hw52-disclosure{padding:0 4px}}@media(prefers-reduced-motion:reduce){.hw52 .hw52-assembled,.hw52 .hw52-canvas,.hw52 .hw52-card,.hw52 .hw52-hotspot,.hw52 .hw52-hotspot>span,.hw52 .hw52-image-box{transition:none!important;transition-delay:0s!important}.hw52 .hw52-card-copy,.hw52 .hw52-highlight rect{animation:none!important}}@media(max-width:760px){.hw52 .hw52-card h3{-webkit-padding-end:32px;padding-inline-end:32px}}