/* Landscape tablet proportions and the supplied Yubii interface palette. */
.demo-media-player{position:absolute;z-index:18;left:20px;bottom:20px;width:min(392px,calc(100% - 40px));padding:10px;background:#fff;border:1px solid #dce5ec;border-radius:12px;box-shadow:0 10px 40px #0005;color:#344451}
.demo-media-player[hidden],.demo-alarm-sound[hidden]{display:none!important}
.demo-media-player header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px}.demo-media-player header button{font-size:24px;border:0;background:transparent;color:#344451;cursor:pointer}
.demo-media-player iframe{width:100%;height:220px;border:0;display:block;min-width:200px;min-height:200px}
.demo-media-actions{display:flex;gap:8px;align-items:center;margin:10px 0}.demo-media-actions button{padding:8px;border:1px solid #dce5ec;border-radius:6px;background:#f1f6fc;color:#345674;cursor:pointer}.demo-media-actions label{font-size:12px;flex:1}.demo-media-actions input{display:block;width:100%;accent-color:#4c86e2}.demo-media-player p,.demo-media-player a{font-size:12px;line-height:1.4;margin:5px 0}.demo-media-player a{color:#356baf}
.demo-alarm-sound{position:absolute;z-index:22;left:50%;top:78px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;background:#ba2430;color:#fff;padding:12px 18px;border-radius:9px;box-shadow:0 8px 25px #0003;font-size:14px}.demo-alarm-sound button{border:1px solid white;background:white;color:#a21f29;padding:10px;border-radius:5px;cursor:pointer;white-space:nowrap}
@media(max-width:520px){.demo-media-player{left:12px;bottom:12px;width:calc(100% - 24px)}.demo-alarm-sound{top:64px;width:calc(100% - 24px);font-size:12px;padding:8px}}
.three-device-panel:has(.reference-yubii){width:min(760px,60vw);top:70px;bottom:30px;max-height:720px;padding:12px;border-radius:22px}
.three-device-panel.is-expanded:has(.reference-yubii){width:calc(100% - 48px);max-height:none;top:18px;bottom:18px}
.reference-yubii{display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:12px;font-family:Arial,Helvetica,sans-serif;color:#505050;font-weight:400}
.reference-yubii *{box-sizing:border-box}
.reference-yubii [hidden]{display:none!important}
.reference-yubii button{font-family:inherit;cursor:pointer;font-weight:400}
.reference-yubii button:focus-visible{outline:3px solid #295fb0;outline-offset:2px}
.reference-yubii .yubii-statusbar{flex:none;padding:7px 48px 6px 12px;color:#333;font-size:12px}
.reference-yubii .yubii-appbar{flex:none;position:relative;min-height:46px;padding:6px 12px;gap:10px;color:#555}
.reference-yubii .yubii-logo{flex:1;justify-content:space-between}
.reference-yubii .yubii-logo strong{font-size:18px;font-weight:400;color:inherit;letter-spacing:0;text-align:center;flex:1}
.reference-yubii .yubii-logo>.ref-house{display:block;background:none;color:inherit;font-size:32px;width:32px;height:auto}
.reference-yubii .yubii-appbar>button{background:transparent;color:inherit;width:30px;height:30px;font-size:24px}
.reference-yubii[data-ref-tab=favorites] .yubii-appbar,.reference-yubii[data-ref-tab=favorites] .yubii-statusbar{background:#4c86e2;color:#fff}
.ref-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:18px;scrollbar-width:thin}
.reference-yubii h2{font-size:18px;font-weight:400;text-align:center;line-height:1.4;margin:16px 8px 22px;color:#505050}
.reference-yubii h3{font-size:14px;font-weight:400;margin:20px 10px 10px;color:#555}
.ref-summary{background:#4c86e2;color:white;padding:8px 10px 15px}
.ref-summary>small{font-size:12px}
.ref-summary>[data-summary]{display:flex;overflow:auto;gap:14px;margin-top:12px}
.ref-summary button{flex:1;min-width:84px;background:transparent;border:0;color:inherit;padding:0;text-align:center}
.ref-summary button>span{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:88px;border-radius:50%;background:#ffffff12;font-size:31px;padding:8px 3px}
.ref-summary strong{font-weight:400;font-size:13px;margin-top:5px;line-height:1.3}
.ref-summary button>small{display:block;margin-top:8px;font-size:12px}
.ref-bottom{display:flex;flex:none;min-height:59px;border-top:1px solid #f1f2f4;background:#fff;z-index:2}
.ref-bottom button{flex:1;border:0;background:white;color:#9a9da3;font-size:12px;padding:5px}
.ref-bottom button>span{display:block;height:30px;font-size:29px;line-height:30px}
.ref-bottom button.active{color:#5088cd}
.ref-strip{display:flex;overflow:auto;gap:8px;padding:2px 10px 9px}
.ref-strip button{display:flex;align-items:center;gap:9px;flex:0 0 150px;min-height:46px;border:1px solid #e4eaf0;border-radius:6px;background:white;box-shadow:0 5px 8px #1422350c;padding:8px;font-size:22px;color:#555;text-align:left}
.ref-strip button span{font-size:13px}
.reference-yubii .demo-device-filter{padding:4px 10px;grid-template-columns:1fr 1fr;gap:8px}
.reference-yubii .demo-device-filter p{grid-column:1/-1}
.reference-yubii .demo-device-filter input,.reference-yubii .demo-device-filter select{border-color:#e0e3e8;border-radius:18px;font-family:inherit;font-weight:400;color:#6488aa}
.reference-yubii .three-device-list{display:block!important;padding:0 10px}
.reference-yubii .three-device-group{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}
.reference-yubii .three-device-group-title{width:100%;font-weight:400;font-size:14px;color:#555;margin-bottom:0}
.reference-yubii .three-device-button{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;gap:7px;flex:0 0 112px;min-height:130px;width:112px;border:1px solid #e5eaf0;border-radius:6px;background:#fff;box-shadow:0 5px 9px #13213912;padding:26px 5px 8px;text-align:center;color:#555}
.reference-yubii .three-device-button.is-selected{border-color:#7fa6ce;background:#f7faff}
.reference-yubii .three-device-icon{display:block;width:auto;height:29px;background:transparent;border:0;border-radius:0;color:#283642;font-size:26px;line-height:29px}
.reference-yubii .three-device-copy strong{font-size:12px;font-weight:400;line-height:1.4;color:#555;display:block}
.reference-yubii .three-device-copy small{font-size:12px;font-weight:400;color:#668daf;margin-top:8px;display:block}
.reference-yubii .three-device-state{position:absolute;top:5px;right:5px;left:5px;text-align:right;color:#668daf!important;font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none}
.ref-home-heading{padding:10px 18px;color:#668daf;border-bottom:1px solid #dedede;font-size:13px}
.ref-whole{display:block;width:calc(100% - 20px);margin:10px;border:0;border-bottom:1px solid #ddd;background:#fff;padding:12px 0;text-align:left;color:#555;font-size:17px}
.ref-whole span{float:right;color:#668daf;font-size:25px}
.ref-room-grid{display:flex;flex-wrap:wrap;gap:10px;padding:8px 10px}
.ref-room-grid button{display:flex;flex-direction:column;align-items:center;gap:12px;min-width:112px;min-height:128px;padding:14px 8px;border:1px solid #dedede;background:#fff;border-radius:4px;box-shadow:0 5px 8px #0001;color:#555;font-size:14px}
.ref-room-grid button>span{font-size:32px}.ref-room-grid small{font-size:12px;color:#668daf}
.ref-split{display:grid;grid-template-columns:33% 1fr;min-height:400px}
.ref-split>aside{border-right:1px solid #f0f0f0;padding:12px 8px}
.ref-split>aside h2{text-align:left;color:#648cb3;margin-top:24px;font-size:20px}
.ref-split-body{padding:0 10px 16px;min-width:0}
.ref-split aside button{display:flex;width:100%;align-items:center;gap:8px;min-height:57px;padding:12px 10px;border:1px solid #e5eaf0;border-radius:6px;background:#fff;box-shadow:0 5px 8px #1621310c;color:#555;text-align:left;font-size:15px;margin-bottom:10px}
.ref-split aside button>span{color:#668daf;font-size:23px}.ref-split aside button>span:last-child{margin-left:auto}
.ref-split aside button.active{background:#e0ebff}
.ref-split [data-scene-categories] button{border:0;border-bottom:1px solid #eee;border-radius:0;box-shadow:none;color:#668daf;margin:0}
.ref-search{width:100%;border:1px solid #ddd;border-radius:22px;padding:10px 14px;font:14px Arial;margin-bottom:16px}
.reference-yubii .three-scenes{display:block!important;padding:0}
.reference-yubii .three-scenes>div{display:flex;flex-direction:column;gap:8px}
.reference-yubii .three-scenes [data-scene]{display:flex;align-items:center;gap:10px;text-align:left;min-height:60px;border:1px solid #e5eaf0;border-radius:6px;box-shadow:0 5px 8px #1621310c;background:#fff;color:#555;padding:8px;font-size:16px}
.reference-yubii .three-scenes [data-scene].is-active{background:#e0ebff}
.reference-yubii .three-scenes small{color:#969ba4;font-size:12px;margin-top:4px}
.ref-scene-icon{font-size:26px}.ref-play{display:grid;place-items:center;margin-left:auto;background:#4c86e2;color:white;width:28px;height:28px;flex:none;border-radius:50%;font-size:13px}
.ref-demo-label{font-size:12px;color:#668daf;margin:0 8px 28px}
.ref-system-row{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0;min-height:65px;background:#fff;border:1px solid #e5eaf0;border-radius:6px;box-shadow:0 5px 8px #1621310c;padding:10px;color:#555;font-size:14px;text-align:left}
.ref-system-row>[data-live]{margin-left:auto;color:#668daf;font-size:13px}.ref-system-icon{font-size:25px}
.ref-alarm-circle{display:flex;flex-direction:column;align-items:center;justify-content:center;width:130px;height:130px;border:1px solid #7f9959;outline:1px solid #7f9959;outline-offset:9px;border-radius:50%;background:#fff;font-size:40px;margin:30px auto;color:#555}
.ref-alarm-circle small{font-size:13px;margin-top:10px}
.ref-energy{text-align:center;padding:8px 10px 20px;background:#f8f9fd}.ref-energy>span{font-size:45px}.ref-energy strong{color:#cd6975;font-weight:400}.ref-energy p{font-size:13px;line-height:1.5}
.reference-yubii .three-selected{position:absolute;z-index:8;top:75px;right:14px;width:min(340px,calc(100% - 28px));max-height:calc(100% - 150px);overflow:auto;margin:0;padding:24px 18px;background:white;border:1px solid #dbe6f0;box-shadow:0 12px 60px #21395344;border-radius:8px}
.ref-detail-close{position:absolute;right:6px;top:4px;background:none;border:0;color:#668daf;font-size:26px}
.ref-detail-action{width:100%;margin-top:16px;padding:12px;border:0;background:#4c86e2;color:#fff;border-radius:5px;font-size:15px}
.ref-detail-action:disabled{background:#e5eaf0;color:#777;cursor:default}
.reference-yubii [data-device-adjustments] input{accent-color:#4c86e2}
.reference-yubii .demo-automation-lab{padding:0}.reference-yubii .demo-automation-lab button{border:1px solid #dce5ec;border-radius:5px;background:white;color:#668daf;padding:10px;font-size:13px}
@media(max-width:900px){.three-device-panel:has(.reference-yubii){width:calc(100% - 24px);right:12px;top:64px;bottom:18px;max-height:none}.ref-split{grid-template-columns:30% 1fr}}
@media(max-width:520px){.ref-split{grid-template-columns:1fr}.ref-split>aside{padding:4px;border-right:0}.ref-split>aside h2,.ref-demo-label{display:none}.ref-split aside [data-more-menu],.ref-split aside [data-scene-categories]{display:flex;overflow:auto;gap:5px}.ref-split aside button{width:auto;min-width:110px;font-size:13px;min-height:40px}.ref-split aside button>span:last-child{display:none}.reference-yubii .three-device-button{flex-basis:calc(33.333% - 6px);width:calc(33.333% - 6px)}.reference-yubii .yubii-logo strong{font-size:15px}.ref-summary button{min-width:78px}}