.scenario-showcase{--scenario-brand: #196472;--scenario-brand-soft: #e8f4f7;--scenario-ink: #171b1c;--scenario-muted: #687174;--scenario-line: #dfe5e6;--scenario-surface: #ffffff;--scenario-duration: #9ee4ec;display:block;background:#f5f6f6;color:var(--scenario-ink)}.scenario-showcase__inner{width:100%;max-width:1560px;margin-inline:auto;padding-inline:32px}.scenario-showcase .section-header{margin-block-end:42px}.scenario-showcase__layout{display:grid;grid-template-columns:226px minmax(0,1fr);gap:20px;align-items:start}.scenario-showcase__products{display:flex;flex-direction:column;gap:10px;padding-block-start:65px}.scenario-showcase__product{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:12px;min-height:92px;padding:11px;border:1.5px solid transparent;border-radius:15px;background:var(--scenario-surface);color:var(--scenario-ink);text-align:start;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.scenario-showcase__product:hover{border-color:color-mix(in srgb,var(--scenario-brand) 35%,transparent)}.scenario-showcase__product.is-active{border-color:var(--scenario-brand);background:var(--scenario-brand-soft);box-shadow:0 6px 18px #1964721c}.scenario-showcase__product:focus-visible,.scenario-showcase__tab:focus-visible{outline:3px solid color-mix(in srgb,var(--scenario-brand) 42%,white);outline-offset:2px}.scenario-showcase__product-media{display:grid;place-items:center;width:68px;height:68px;overflow:hidden;border-radius:10px;background:#f3f5f5;color:var(--scenario-muted)}.scenario-showcase__product-media img,.scenario-showcase__product-media svg{width:100%;height:100%;object-fit:contain}.scenario-showcase__product-copy{min-width:0}.scenario-showcase__product-copy strong,.scenario-showcase__product-copy span{display:block}.scenario-showcase__product-copy strong{margin-block-end:5px;font-size:17px;line-height:1.2}.scenario-showcase__product-copy span{color:var(--scenario-brand);font-size:13px;font-weight:700;line-height:1.3}.scenario-showcase__content{overflow:hidden;border:1px solid var(--scenario-line);border-radius:18px;background:var(--scenario-surface);box-shadow:0 16px 50px #18282b17}.scenario-showcase__tabs{display:flex;height:65px;border-block-end:1px solid var(--scenario-line);background:#fafbfb}.scenario-showcase__tab{display:flex;flex:1;align-items:center;justify-content:center;gap:10px;border:0;border-block-end:3px solid transparent;background:transparent;color:#767e80;font-size:16px;font-weight:700;cursor:pointer}.scenario-showcase__tab.is-active{border-block-end-color:var(--scenario-brand);background:var(--scenario-surface);color:var(--scenario-brand)}.scenario-showcase__tab-icon,.scenario-showcase__tab-icon svg{display:block;width:22px;height:22px}.scenario-showcase__stage{position:relative;width:100%;background:#202627}.scenario-showcase__visual{position:relative;width:100%;aspect-ratio:9 / 5;overflow:hidden;background:#202627;isolation:isolate}.scenario-showcase__scene-picture,.scenario-showcase__scene-image{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;width:100%;height:100%}.scenario-showcase__scene-picture{display:block}.scenario-showcase__scene-image{object-fit:contain}.scenario-showcase__placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;z-index:1;color:#d2d8d9;font-size:15px}.scenario-showcase__placeholder[hidden]{display:none}.scenario-showcase__lines,.scenario-showcase__mobile-lines,.scenario-showcase__annotations,.scenario-showcase__hotspots{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;width:100%;height:100%;pointer-events:none}.scenario-showcase__lines line{stroke:#ffffffeb;stroke-width:1.4}.scenario-showcase__lines circle{fill:#fff;stroke:var(--scenario-brand);stroke-width:1.5}.scenario-showcase__annotation{position:absolute;display:inline-flex;box-sizing:border-box;width:max-content;align-items:baseline;flex-wrap:wrap;gap:7px;max-width:min(280px,calc(100% - 20px));padding:7px 10px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:#081012cc;color:#fff;font-size:clamp(12px,1vw,15px);font-weight:700;line-height:1.25;overflow-wrap:anywhere;white-space:normal;text-shadow:0 1px 4px rgba(0,0,0,.45);transform:translateY(-50%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.scenario-showcase__annotation-value{color:var(--scenario-duration)}.scenario-showcase__hotspots,.scenario-showcase__mobile-lines,.scenario-showcase__legend{display:none}.scenario-showcase__summary{position:absolute;inset-inline:18px;inset-block-end:16px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:52px;padding:10px 14px;border:1px solid rgba(255,255,255,.24);border-radius:11px;background:#070f11d1;color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.scenario-showcase__summary-copy{display:flex;align-items:baseline;gap:8px;min-width:0;font-size:14px}.scenario-showcase__summary-copy strong{color:var(--scenario-duration);font-size:18px;white-space:nowrap}.scenario-showcase__summary-specs{display:flex;gap:12px;color:#dce8ea;font-size:13px;font-weight:700;white-space:nowrap}@media screen and (max-width:768px){.scenario-showcase__inner{padding-inline:0}.scenario-showcase .section-header{margin-block-end:24px;padding-inline:20px}.scenario-showcase__layout{display:flex;flex-direction:column;gap:16px}.scenario-showcase__products{display:grid;width:100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 16px 6px;overflow:visible}.scenario-showcase__product{width:100%;min-width:0;grid-template-columns:52px minmax(0,1fr);gap:8px;min-height:76px;padding:8px;border-color:var(--scenario-line);border-radius:13px}.scenario-showcase__product-media{width:52px;height:52px}.scenario-showcase__product-copy strong{margin-block-end:3px;font-size:14px}.scenario-showcase__product-copy span{font-size:10px}.scenario-showcase__content{width:calc(100% - 24px);margin-inline:12px;border-radius:16px}.scenario-showcase__tabs{height:54px}.scenario-showcase__tab{gap:8px;font-size:15px}.scenario-showcase__tab-icon,.scenario-showcase__tab-icon svg{width:20px;height:20px}.scenario-showcase__visual{aspect-ratio:1122 / 1402}.scenario-showcase__lines,.scenario-showcase__annotations{display:none}.scenario-showcase__hotspots{display:block;z-index:3}.scenario-showcase__mobile-lines{display:block}.scenario-showcase__mobile-lines polyline{fill:none;stroke:#ffffffeb;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.scenario-showcase__hotspot{position:absolute;display:grid;place-items:center;width:30px;height:30px;border:2px solid #ffffff;border-radius:50%;background:#378f9dd6;color:#fff;font-size:12px;font-weight:800;line-height:1;transform:translate(-50%,-50%);box-shadow:0 4px 12px #00000059}.scenario-showcase__summary{position:relative;inset:auto;min-height:42px;padding:9px 12px;border-inline:0;border-radius:0}.scenario-showcase__summary-copy{display:block;font-size:10px;line-height:1.25}.scenario-showcase__summary-copy span,.scenario-showcase__summary-copy strong{display:block}.scenario-showcase__summary-copy strong{margin-block-start:2px;font-size:12px}.scenario-showcase__summary-specs{gap:8px;font-size:10px}.scenario-showcase__legend{display:block;padding:16px 14px 18px}.scenario-showcase__legend-heading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-block-end:12px}.scenario-showcase__legend-heading h3{margin:0;font-size:15px;line-height:1.3}.scenario-showcase__legend-heading>span{color:var(--scenario-muted);font-size:11px}.scenario-showcase__legend-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.scenario-showcase__legend-item{display:grid;grid-template-columns:25px minmax(0,1fr);align-items:center;gap:8px;min-height:56px;padding:8px;border:1px solid var(--scenario-line);border-radius:10px;background:#fbfcfc}.scenario-showcase__legend-number{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--scenario-brand);color:#fff;font-size:11px;font-weight:800}.scenario-showcase__legend-name,.scenario-showcase__legend-value{display:block}.scenario-showcase__legend-name{color:var(--scenario-ink);font-size:12px;font-weight:700;line-height:1.25}.scenario-showcase__legend-value{margin-block-start:3px;color:var(--scenario-brand);font-size:13px;line-height:1.2}.scenario-showcase__legend-disclaimer{margin:12px 2px 0;color:var(--scenario-muted);font-size:10px;line-height:1.45}}@media(prefers-reduced-motion:reduce){.scenario-showcase__product{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/18/assets/scenario-showcase.css.map */