/* Interactive, state-driven room illustration and touchpanel layout. */
.gui-layout{display:block}
.gui-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:end;margin-bottom:44px;max-width:none}
.gui-copy h2{margin:0}
.gui-copy-description{max-width:540px}
.gui-copy-description .gui-intro{max-width:none;margin:0 0 12px}
.gui-copy-description .gui-note{margin:0}
.gui-demo-area{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:24px;align-items:start}
.touch-device{width:100%;max-width:none;container-type:inline-size;container-name:touchpanel}
.room-preview{min-width:0;margin:0;padding:22px;background:#fff;border:1px solid #d9e4db;border-radius:16px;box-shadow:0 20px 55px rgba(52,76,59,.08)}
.room-preview-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:14px}
.room-preview-heading div{display:flex;flex-direction:column;gap:6px}
.room-preview-heading div>span{font-size:9px;font-weight:800;letter-spacing:.13em;color:#71867b}
.room-preview-heading strong{font-size:20px;letter-spacing:-.035em;color:#253c31}
.room-preview-badge{display:inline-flex;align-items:center;color:#53786a;background:#edf6f0;border:1px solid #d3e7d8;border-radius:20px;font-size:9px;font-weight:800;letter-spacing:.08em;padding:7px 9px}
.room-preview-badge i{width:6px;height:6px;margin-right:6px;background:#60b99b;border-radius:50%}
.room-illustration{display:block;width:100%;height:auto;border-radius:10px;background:#edf2ed}
.room-illustration [data-room-camera-head]{transition:transform .3s ease}
.room-preview-readouts{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.room-preview-readouts span{font-size:10px;font-weight:700;color:#4e655a;background:#eff5f0;border:1px solid #e0eae1;border-radius:6px;padding:7px 8px;line-height:1.3}
.room-preview-note{font-size:10px;line-height:1.55;color:#778b80;margin:13px 0 0}
.tp-input-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.tp-inputs .tp-input-heading .tp-label{margin:0;line-height:1.4}
.tp-tv-toggle,.tp-sharing-stop,.tp-tracking button{font:750 10px/1.2 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.tp-tv-toggle{flex:none;border:1px solid #5d9278;background:#284b3b;color:#dbf8e7;border-radius:6px;padding:7px 8px}
.tp-tv-toggle[aria-pressed="false"]{background:#2a3730;border-color:#62746a;color:#bdcac1}
.tp-source span{white-space:normal;text-align:center;line-height:1.2}
.tp-sharing-stop{margin-top:9px;padding:8px 9px;width:100%;border:1px solid #587565;border-radius:6px;color:#d7ebdc;background:#263d31}
.tp-sharing-stop[hidden]{display:none}
.tp-ptz-layout{gap:16px}
.tp-ptz-zoom{min-width:0;flex:1}
.tp-tracking{display:flex;align-items:flex-start;flex-direction:column;gap:5px;margin-top:9px;color:#d2e5d8;font-size:10px;line-height:1.25;font-weight:700}
.tp-tracking button{min-width:52px;padding:6px 9px;border:1px solid #556e5f;border-radius:6px;background:#293d32;color:#bdcec3}
.tp-tracking button[aria-pressed="true"]{background:#2d624c;border-color:#79c9a3;color:#effff4}
.tp-presets-label{margin:13px 0 8px}
.tp-camera-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tp-camera-presets button{min-width:0;min-height:35px;padding:7px 3px;color:#d1e1d6;background:#233a2e;border:1px solid #456651;border-radius:7px;font:700 10px/1.15 Inter,ui-sans-serif,system-ui,sans-serif;cursor:pointer}
.tp-camera-presets button:hover{border-color:#81c9b0}
.tp-camera-presets button.is-selected{background:#294b3d;border-color:#7ed6bc;color:#f3fff8;box-shadow:inset 0 0 0 1px rgba(126,214,188,.2)}
.tp-ptz-feedback{margin-top:9px}
.tp-blinds-control .tp-environment-buttons{grid-template-columns:repeat(3,minmax(0,1fr))}
.tp-scenes .tp-env-button{min-height:40px;line-height:1.2}
.tp-loading{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(9,20,16,.72);font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.tp-loading[hidden]{display:none}
.tp-loading:focus{outline:none}
.tp-loading-card{width:min(340px,100%);padding:30px 28px;text-align:center;color:#ecf8ef;background:#192d24;border:1px solid #4b715d;border-radius:15px;box-shadow:0 25px 75px rgba(0,0,0,.35)}
.tp-loading-ring{display:block;width:38px;height:38px;margin:0 auto 18px;border:3px solid #3f6250;border-top-color:#9de8ca;border-radius:50%;animation:tp-loading-spin 1s linear infinite}
.tp-loading-eyebrow{display:block;margin-bottom:8px;color:#9ccdb7;font-size:9px;font-weight:800;letter-spacing:.13em}
.tp-loading-card strong{display:block;font-size:20px;letter-spacing:-.025em}
.tp-loading-card p{margin:8px 0 19px;color:#abc4b5;font-size:12px;line-height:1.5}
.tp-loading-meter{height:8px;overflow:hidden;border-radius:10px;background:#344d40}
.tp-loading-meter span{display:block;width:0;height:100%;border-radius:inherit;background:#8ddcbb}
.tp-loading-percent{display:block;margin-top:10px;color:#dbf9e9;font-size:13px;font-weight:800}
@keyframes tp-loading-spin{to{transform:rotate(360deg)}}
@container touchpanel (min-width:625px){
 .tp-controls.is-vc .tp-control-columns{grid-template-columns:minmax(0,1fr) minmax(212px,1.16fr) minmax(0,1fr);gap:9px;margin-top:15px}
 .tp-controls.is-vc .tp-secondary{display:contents}
 .tp-controls.is-vc .tp-lower,.tp-controls.is-vc .tp-camera,.tp-controls.is-vc .tp-environment{padding:10px}
 .tp-controls.is-vc .tp-source{min-height:55px;gap:5px}
 .tp-controls.is-vc .tp-source svg{width:17px;height:17px}
 .tp-controls.is-vc .tp-source span{font-size:9px}
 .tp-controls.is-vc .tp-audio .tp-label,.tp-controls.is-vc .tp-microphone .tp-label{margin-top:12px}
 .tp-controls.is-vc .tp-volume-row{gap:5px}
 .tp-controls.is-vc .tp-volume-button{width:32px;height:34px}
 .tp-controls.is-vc .tp-mute{padding:8px 5px;margin-top:7px;font-size:10px}
 .tp-controls.is-vc .tp-camera-title{margin-bottom:7px}
 .tp-controls.is-vc .tp-ptz-layout{gap:6px}
 .tp-controls.is-vc .tp-ptz-pad{grid-template-columns:repeat(3,35px);grid-template-rows:repeat(3,35px);gap:3px}
 .tp-controls.is-vc .tp-ptz-button{width:35px;height:35px;font-size:15px}
 .tp-controls.is-vc .tp-zoom-controls{gap:4px}
 .tp-controls.is-vc .tp-tracking{margin-top:7px;font-size:9px}
 .tp-controls.is-vc .tp-tracking button{min-width:48px;padding:5px 7px}
 .tp-controls.is-vc .tp-presets-label{margin:9px 0 6px}
 .tp-controls.is-vc .tp-camera-presets{gap:4px}
 .tp-controls.is-vc .tp-camera-presets button{font-size:9px;min-height:36px}
 .tp-controls.is-vc .tp-environment-heading{margin-bottom:11px}
 .tp-controls.is-vc .tp-environment-heading span{display:none}
 .tp-controls.is-vc .tp-environment-buttons{gap:4px}
 .tp-controls.is-vc .tp-env-button{font-size:10px;padding:7px 2px}
 .tp-controls.is-vc .tp-scenes{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tp-controls.is-vc .tp-scenes .tp-env-button{font-size:10px;min-height:36px}
 .tp-controls.is-vc .tp-scenes .tp-env-button:last-child{grid-column:1 / -1}
 .tp-controls.is-vc .tp-scenes-label{margin-top:11px}
 .tp-controls.is-vc .tp-blinds-control{margin-top:11px;padding-top:10px}
 .tp-controls.is-vc .tp-feedback{margin-top:13px;padding-top:12px}
}
@media(min-width:931px){.brand img{width:295px}}
@media(min-width:761px) and (max-width:930px){.brand img{width:230px}}
.footer-brand img{width:245px}
@media(min-width:1101px){.room-preview{position:sticky;top:18px}}
@media(max-width:1100px){.gui-demo-area{grid-template-columns:1fr;gap:20px}.room-preview{max-width:none}.room-illustration{max-height:430px}.touch-device{max-width:none}}
@media(max-width:760px){.brand img{width:235px}.footer-brand img{width:220px}.gui-copy{grid-template-columns:1fr;gap:22px;margin-bottom:28px}.room-preview{padding:17px}.room-preview-heading strong{font-size:18px}}
@media(max-width:480px){.room-preview{padding:13px;border-radius:12px}.room-preview-readouts{gap:5px}.room-preview-readouts span{font-size:9px;padding:6px}.tp-blinds-control .tp-environment-buttons{gap:4px}.tp-tv-toggle{font-size:9px}.tp-scenes .tp-env-button{font-size:9px}.tp-ptz-layout{gap:16px}}
@media(max-width:370px){.brand img{width:205px}}
@media(prefers-reduced-motion:reduce){.room-illustration [data-room-camera-head]{transition:none}.tp-loading-ring{animation:none}}