.smart-garage{border-top:1px solid var(--line);background:radial-gradient(ellipse at 65% 40%,#29332140,transparent 65%)}
.sg-heading{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:end;margin-bottom:48px}.sg-heading>p{max-width:470px;color:var(--muted);font-size:.97rem}.sg-heading h2{font-size:clamp(2.4rem,4vw,3.8rem)}
.sg-explorer{display:grid;grid-template-columns:minmax(240px,.65fr) minmax(0,1.6fr);gap:34px;align-items:start}.sg-scenarios{display:flex;flex-direction:column;border-top:1px solid var(--line)}.sg-scenario{display:flex;gap:15px;align-items:center;min-height:81px;padding:19px 15px;border:0;border-bottom:1px solid var(--line);background:transparent;color:#aab29f;text-align:left;line-height:1.55;font-size:.87rem;transition:background .2s,color .2s}.sg-scenario>span:nth-child(2){flex:1}.sg-number{font: .64rem var(--mono);color:#7b886c;align-self:flex-start;padding-top:5px}.sg-arrow{font-size:1.05rem;color:#6d785f}.sg-scenario[aria-pressed=true]{background:#2c3525;color:#e1edcf;box-shadow:inset 3px 0 var(--accent)}.sg-scenario[aria-pressed=true] .sg-number,.sg-scenario[aria-pressed=true] .sg-arrow{color:var(--accent)}.sg-scenario:hover{background:#242c20;color:var(--text)}
.sg-player{min-width:0;border:1px solid #566347;border-radius:8px;background:linear-gradient(130deg,#222b1c,#171e13);overflow:hidden;box-shadow:0 25px 70px #0003}.sg-toolbar{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid #4f5c3f66}.sg-toolbar .micro{display:flex;align-items:center;gap:6px;font-size:.62rem;color:#bbcba5}.sg-status-dot{display:inline-block;width:6px;height:6px;background:#c4e3a1;border-radius:50%;box-shadow:0 0 10px #c4e3a155;margin-right:4px}.sg-count{font:.63rem var(--mono);color:#899878}.sg-canvas{position:relative;background:radial-gradient(ellipse at 26% 65%,#45533420,transparent 75%)}.sg-drawing{width:100%;height:auto;overflow:hidden}.sg-svg-label{font:12px var(--font);fill:#a8b698}.sg-building-mark{font:10px var(--mono);letter-spacing:1.7px;fill:#c8d9b3}.sg-phone-title,.sg-ups-state{font:12px var(--font);fill:#c6d5b5}.sg-room-light{opacity:.12;transition:opacity .5s}.sg-canvas[data-lights=true] .sg-room-light{opacity:1}.sg-vehicle{transform:translateX(688px);transition:transform 2s cubic-bezier(.45,0,.25,1)}.sg-canvas[data-car=parked] .sg-vehicle{transform:translateX(202px)}.sg-canvas[data-car=threshold] .sg-vehicle{transform:translateX(375px)}.sg-canvas[data-car=driveway] .sg-vehicle{transform:translateX(515px)}.sg-shutter{transform:translateY(0);transition:transform 2.8s ease-in-out}.sg-canvas[data-door=open] .sg-shutter,.sg-canvas[data-door=opening] .sg-shutter,.sg-canvas[data-door=reopening] .sg-shutter{transform:translateY(-182px)}.sg-canvas[data-door=closing] .sg-shutter{transform:translateY(-100px)}.sg-canvas[data-door=stopped] .sg-shutter{transform:translateY(-100px);transition:none}.sg-boom{transform-origin:627px 278px;transition:transform 1.8s ease-in-out}.sg-canvas[data-gate=open] .sg-boom,.sg-canvas[data-gate=opening] .sg-boom{transform:rotate(-88deg)}.sg-laser-ray{opacity:.2;transition:opacity .3s}.sg-canvas[data-laser=occupied] .sg-laser-ray{opacity:1;stroke-dasharray:3 3}.sg-doorway-ray{opacity:.45}.sg-canvas[data-beam=blocked] .sg-doorway-ray{stroke:#ff784e;stroke-width:4;opacity:1;animation:sg-beam .7s ease-in-out infinite}.sg-presence-cone{opacity:0;transition:opacity .4s}.sg-canvas[data-presence=detected] .sg-presence-cone{opacity:1}.sg-person{transform:translateX(290px);opacity:0;transition:transform 1.8s ease-in-out,opacity .4s}.sg-canvas[data-person=inside] .sg-person{opacity:1;transform:translateX(306px)}.sg-canvas[data-person=keypad] .sg-person{opacity:1;transform:translateX(449px)}.sg-canvas[data-person=threshold] .sg-person{opacity:1;transform:translateX(392px)}.sg-canvas[data-person=outside] .sg-person{opacity:1;transform:translateX(545px)}.sg-pin{opacity:0}.sg-canvas[data-keypad=true] .sg-pin{opacity:1}.sg-canvas[data-keypad=true] .sg-keypad{filter:drop-shadow(0 0 9px #d3ed9a)}.sg-location-link{opacity:0}.sg-canvas[data-signal=true] .sg-location-link{opacity:1;animation:sg-flow 2s linear infinite}.sg-phone-panel{opacity:.4;transition:opacity .4s}.sg-canvas[data-signal=true] .sg-phone-panel,.sg-canvas[data-alert=true] .sg-phone-panel{opacity:1}.sg-car-tracker{opacity:0}.sg-canvas[data-tracker=gps] .sg-car-tracker{opacity:1}.sg-alert-mark{opacity:0}.sg-canvas[data-alert=true] .sg-alert-mark{opacity:1}.sg-canvas[data-alert=true] .sg-phone-lines{transform:translateX(23px) scaleX(.95);transform-origin:565px 100px}.sg-canvas[data-alert=true] .sg-phone-panel>rect:first-child{stroke:#ff916b}.sg-smoke-cloud{opacity:0}.sg-canvas[data-smoke=true] .sg-smoke-cloud{opacity:.8;animation:sg-smoke 2.6s ease-in-out infinite alternate}.sg-power-wire,.sg-power-bolt{opacity:.18}.sg-canvas[data-power=battery] .sg-power-wire,.sg-canvas[data-power=battery] .sg-power-bolt{opacity:1;stroke:#ff916b}.sg-canvas[data-power=battery] .sg-power-wire{animation:sg-flow 1s linear infinite}.sg-canvas[data-power=standby] .sg-battery-unit>rect{stroke:#d2e7b4}.sg-canvas[data-security=disarmed] .sg-security-badge{opacity:.35}.sg-canvas[data-security=alarm] .sg-security-badge{filter:drop-shadow(0 0 7px #ff784e)}.sg-canvas[data-security=alarm] .sg-security-badge path{stroke:#ff784e}.sg-canvas[data-door=open] .sg-indicator-green{fill:#d2e7b4}.sg-canvas[data-door=opening] .sg-indicator-green,.sg-canvas[data-door=closing] .sg-indicator-green{fill:#f4c279;animation:sg-beam .6s infinite}.sg-canvas[data-beam=blocked] .sg-indicator-red,.sg-canvas[data-security=alarm] .sg-indicator-red,.sg-canvas[data-door=reopening] .sg-indicator-red{fill:#ff784e;animation:sg-beam .6s infinite}.sg-canvas[data-focus=laser] .sg-laser-sensor,.sg-canvas[data-focus=beam] .sg-doorway,.sg-canvas[data-focus=presence] .sg-presence-sensor,.sg-canvas[data-focus=smoke] .sg-smoke-sensor,.sg-canvas[data-focus=power] .sg-battery-unit,.sg-canvas[data-focus=gate] .sg-gate{filter:drop-shadow(0 0 6px #c8e0a666)}
.sg-readouts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#414d3566;border-top:1px solid #4f5c3f66;border-bottom:1px solid #4f5c3f66}.sg-readout{background:#1c2518;padding:12px 18px;min-width:0}.sg-readout>span{display:block;color:#8fa27a;font-size:.63rem;margin-bottom:5px}.sg-readout strong{display:flex;align-items:center;gap:7px;color:#d2dfc1;font-weight:500;font-size:.73rem}.sg-readout strong:before{content:'';width:5px;height:5px;background:#849c6b;border-radius:50%;flex-shrink:0}.sg-readout[data-value=blocked] strong,.sg-readout[data-value=alarm] strong,.sg-readout[data-value=battery] strong{color:#ffaf90}.sg-readout[data-value=blocked] strong:before,.sg-readout[data-value=alarm] strong:before{background:var(--accent)}.sg-readout.sg-active{background:#303d26}.sg-story{padding:26px}.sg-story h3{font-size:1.3rem;line-height:1.45;color:#e0ebd3}.sg-story [data-description]>p{font-size:.82rem;color:#a8b79a;margin-top:12px;line-height:1.75}.sg-variants{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.sg-variants button{border:1px solid #4e6040;border-radius:3px;padding:7px 11px;background:transparent;color:#aebf9c;font-size:.66rem;min-height:34px}.sg-variants button[aria-pressed=true]{background:#35462a;color:#e2f0d4;border-color:#9bb67d}.sg-phase{display:flex;gap:17px;align-items:flex-start;padding:22px 0 18px;margin-top:20px;border-top:1px solid #4e604066;min-height:121px}.sg-phase-index{font-size:.6rem;color:var(--accent);flex-shrink:0;padding-top:4px}.sg-phase h4{font-size:.86rem;font-weight:500;margin:0 0 6px;color:#e4ebdb}.sg-phase p{font-size:.74rem;color:#9dae8d;line-height:1.65}.sg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.sg-steps button{display:flex;align-items:baseline;gap:8px;background:#161e12;border:1px solid #3e4b32;border-radius:3px;padding:10px;color:#91a37f;text-align:left;font-size:.62rem;line-height:1.5;min-height:48px}.sg-steps button span:first-child{font: .56rem var(--mono);color:#657e53}.sg-steps button[aria-pressed=true]{border-color:var(--accent);background:#322d20;color:#f3d3bf}.sg-steps button[aria-pressed=true] span:first-child{color:var(--accent)}.sg-steps button.sg-done{border-color:#718658;color:#bed4a6}.sg-controls{display:flex;align-items:center;gap:14px;margin-top:19px}.sg-controls button{background:transparent;border:1px solid #61744f;border-radius:3px;color:#d4e2c2;min-width:38px;min-height:38px;font-size:1rem}.sg-controls>div{display:flex;gap:6px}.sg-controls .sg-play{display:flex;gap:9px;align-items:center;justify-content:center;padding:8px 13px;font-size:.73rem;min-width:100px;background:#d2e7b4;color:#182211;border-color:#d2e7b4}.sg-controls button:disabled{opacity:.35;cursor:default}.sg-progress-label{margin-left:auto;color:#80946d;font-size:.6rem}.sg-demo-note{font-size:.61rem;color:#7f936c;margin-top:17px}.sg-custom{display:flex;justify-content:space-between;align-items:center;gap:35px;border-top:1px solid #46513b;border-bottom:1px solid #46513b;padding:28px 0;margin-top:37px}.sg-custom .micro{color:#d2e7b4;font-size:.77rem}.sg-custom p{max-width:610px;color:var(--muted);font-size:.84rem;margin-top:10px}.sg-custom .button{font-size:.78rem;flex-shrink:0;max-width:43%;line-height:1.6}.sg-footnote{font-size:.66rem;color:#7c8772;margin-top:18px;max-width:900px}.sg-static *{animation-play-state:paused!important}.sg-static .sg-vehicle,.sg-static .sg-person,.sg-static .sg-shutter,.sg-static .sg-boom{transition:none}
@keyframes sg-flow{to{stroke-dashoffset:-44}}@keyframes sg-beam{50%{opacity:.35}}@keyframes sg-smoke{to{transform:translateY(-10px);opacity:.4}}
@media(min-width:1150px){.sg-scenarios{position:sticky;top:30px}}
@media(max-width:1100px){.sg-explorer{grid-template-columns:230px minmax(0,1fr);gap:20px}.sg-scenario{font-size:.78rem;padding:17px 12px;gap:11px}.sg-story{padding:20px}.sg-heading{gap:35px}.sg-heading>p{font-size:.9rem}.sg-readout{padding:11px 13px}.sg-steps button{font-size:.58rem}}
@media(max-width:850px){.sg-heading{grid-template-columns:1fr;gap:24px}.sg-heading>p{max-width:650px}.sg-explorer{grid-template-columns:1fr;gap:20px}.sg-scenarios{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;border:0}.sg-scenario{border:1px solid var(--line);border-radius:3px;min-height:60px;font-size:.82rem}.sg-scenario:last-child{grid-column:1/-1}.sg-scenario[aria-pressed=true]{border-color:#7b8963}.sg-player{width:100%}.sg-custom{align-items:flex-start}.sg-custom .button{max-width:44%;padding:15px;font-size:.72rem}}
@media(max-width:540px){.sg-heading{margin-bottom:28px}.sg-heading h2{font-size:2.3rem}.sg-scenario{font-size:.73rem;padding:12px 10px;gap:8px;min-height:66px}.sg-arrow{display:none}.sg-number{font-size:.56rem}.sg-toolbar{padding:14px}.sg-toolbar .micro{font-size:.52rem}.sg-count{font-size:.54rem}.sg-drawing{width:100%;min-width:0;margin:0}.sg-svg-label{font-size:13px}.sg-readout{padding:10px}.sg-readout>span{font-size:.57rem}.sg-readout strong{font-size:.64rem;gap:5px}.sg-story{padding:18px 15px}.sg-story h3{font-size:1.1rem}.sg-story [data-description]>p{font-size:.78rem}.sg-phase{gap:10px;min-height:146px}.sg-phase-index{font-size:.53rem}.sg-phase h4{font-size:.79rem}.sg-phase p{font-size:.7rem}.sg-steps{grid-template-columns:repeat(2,1fr)}.sg-steps button{font-size:.6rem;min-height:47px;padding:8px}.sg-controls{gap:9px}.sg-controls .sg-play{min-width:86px;padding:8px;font-size:.69rem}.sg-controls button{min-width:35px}.sg-progress-label{font-size:.53rem}.sg-custom{flex-direction:column;gap:22px}.sg-custom .button{max-width:100%;font-size:.78rem}.sg-footnote{font-size:.63rem}html[lang=hy] .sg-heading h2{font-size:2rem}.sg-variants button{font-size:.63rem}}
@media(prefers-reduced-motion:reduce){.sg-canvas *{animation:none!important;transition:none!important}}
.motion-paused .sg-canvas *{animation:none!important;transition:none!important}

.sg-player>.sg-controls{margin:0;padding:12px 24px;border-bottom:1px solid #4f5c3f66}.sg-player>.sg-phase{margin:0 24px;min-height:100px}.sg-player>.sg-steps{margin:0 24px 20px}.sg-story{border-top:1px solid #4f5c3f66}.sg-story .sg-demo-note{margin-top:18px}
@media(min-width:1100px){.sg-readouts{grid-template-columns:repeat(6,1fr)}.sg-readout{padding:12px 10px}.sg-readout>span{min-height:22px;line-height:1.5}}
@media(max-width:540px){.sg-player>.sg-controls{padding:12px 15px}.sg-player>.sg-phase{margin:0 15px;min-height:126px}.sg-player>.sg-steps{margin:0 15px 18px}}

.sg-reset *{transition:none!important}