/* The interactive interior owns the entire first viewport. */
.solution-intro.has-immersive-3d { position:relative;display:block;min-height:0;overflow:hidden; }
.solution-intro.has-immersive-3d > .intro-copy,.three-experience + .visual-lab { display:none; }
.three-experience { position:relative;width:100%;height:calc(100svh - 82px);min-height:540px;overflow:hidden;isolation:isolate;background:#e8e7e2;font-family:Manrope,sans-serif; }
.three-stage { position:absolute;inset:0;overflow:hidden; }
.three-canvas { display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:grab;transition:opacity .15s; }
.three-canvas:active { cursor:grabbing; }
.three-canvas.is-hovering-device { cursor:pointer; }
.is-changing-room .three-canvas { opacity:.12; }
.three-experience button { font-family:inherit; }
.three-experience button:focus-visible { outline:3px solid #087cbf;outline-offset:3px; }
.three-experience [hidden] { display:none !important; }
.three-loading { position:absolute;z-index:30;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;background:#eeefed;color:#002e5a;transition:opacity .4s,visibility .4s; }
.three-loading span { width:32px;height:32px;border:2px solid #bbc9d5;border-top-color:#004a93;border-radius:50%;animation:threeSpin .9s linear infinite; }
.three-loading strong { font-size:18px; }
.three-loading small { font-size:14px;color:#64717a; }
.three-loading.is-hidden { opacity:0;visibility:hidden;pointer-events:none; }
.three-error { position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(430px,90%);padding:24px;color:#002e5a;background:white;text-align:center; }
.three-error button { border:0;background:#004a93;color:white;padding:12px 20px;cursor:pointer; }
.three-topline { position:absolute;z-index:6;top:20px;left:24px;display:flex;align-items:center;gap:9px;padding:11px 15px;background:rgba(255,255,255,.92);box-shadow:0 3px 18px #0000000d;border-radius:8px;color:#44535c;font-size:12px;letter-spacing:.025em; }
.three-topline strong { color:#002e5a;font-size:14px; }
.three-online { display:none; }
.three-toolbar { position:absolute;z-index:7;top:20px;right:24px;display:flex;gap:4px;padding:4px;background:rgba(255,255,255,.94);border-radius:9px;box-shadow:0 3px 18px #0000000d; }
.three-tool { min-height:38px;padding:8px 12px;border:0;border-radius:6px;background:transparent;color:#40515d;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer; }
.three-tool:hover,.three-tool.is-active { background:#004a93;color:white; }
.three-room-nav { position:absolute;z-index:7;left:24px;top:83px;display:flex;align-items:center;gap:10px;max-width:calc(100% - 48px);padding:5px;background:rgba(255,255,255,.94);border-radius:9px; }
.three-room-nav > span { font-size:12px;color:#6b7882;padding:0 7px; }
.three-room-nav > div { display:flex;gap:4px; }
.three-room-nav button { border:0;border-radius:5px;min-height:36px;padding:8px 12px;color:#46555f;background:transparent;font-size:14px;white-space:nowrap;cursor:pointer; }
.three-room-nav button.is-active,.three-room-nav button:hover { color:#fff;background:#004a93; }
.three-guide { position:absolute;z-index:6;bottom:94px;left:24px;max-width:260px;padding:10px 12px;background:rgba(255,255,255,.92);border-radius:8px;color:#60717b;font-size:13px;line-height:1.55;pointer-events:none; }
.three-guide strong { color:#30434e; }
.three-scene-dock { position:absolute;z-index:7;bottom:23px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;border-radius:10px;background:rgba(255,255,255,.96);box-shadow:0 4px 22px #00000014; }
.three-scene-dock > span { padding:0 12px;font-size:12px;color:#637581;white-space:nowrap; }
.three-scene-dock button { border:0;border-radius:6px;padding:10px 14px;font-size:14px;color:#3c505d;background:transparent;cursor:pointer; }
.three-scene-dock button:hover,.three-scene-dock button.is-active { background:#004a93;color:white; }
.three-move-pad { display:none;position:absolute;z-index:8;bottom:23px;left:24px;gap:4px; }
.is-walking .three-move-pad { display:flex; }
.three-move-pad button { width:43px;height:43px;border:1px solid #d6dcdf;border-radius:8px;background:rgba(255,255,255,.95);color:#002e5a;font:24px/1 Manrope,sans-serif;cursor:pointer;touch-action:none;user-select:none; }
.three-move-pad button:hover,.three-move-pad button.is-pressed { background:#004a93;color:white; }
.three-device-hints { position:absolute;z-index:7;bottom:27px;right:24px;min-height:40px;border:0;border-radius:7px;padding:9px 13px;background:#ffffffeb;color:#334e60;font-size:13px;cursor:pointer; }
.three-markers { position:absolute;z-index:5;inset:0;pointer-events:none; }
.three-marker { position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:25px;height:25px;padding:0 5px;border:1.5px solid #fff;border-radius:50%;color:#fff;background:#004a93d9;box-shadow:0 2px 8px #0003;font-size:11px;font-weight:700;pointer-events:auto;cursor:pointer; }
.three-marker:hover { transform:translate(-50%,-50%) scale(1.15);background:#087cbf; }
.three-tooltip { display:none;position:fixed;z-index:100;max-width:230px;pointer-events:none;transform:translate(12px,12px);padding:9px 12px;border-radius:7px;color:#fff;background:#002e5af5;font-size:13px;line-height:1.4; }
.three-tooltip.is-visible { display:block; }
.three-toast { position:absolute;z-index:15;bottom:91px;left:50%;width:max-content;max-width:calc(100% - 36px);padding:11px 16px;border-radius:8px;background:#002e5af5;color:#fff;font-size:14px;text-align:center;opacity:0;transform:translate(-50%,8px);transition:.2s;pointer-events:none; }
.three-toast.is-visible { opacity:1;transform:translate(-50%,0); }
.three-crosshair { display:none; }

/* The tablet remains available at the side, with the scene visible around it. */
.three-mobile-panel-toggle { position:absolute;z-index:12;top:50%;right:24px;display:flex;align-items:center;gap:8px;min-height:46px;padding:7px 13px 7px 7px;border:1px solid #dce6ed;border-radius:12px;background:#fffffff5;color:#004a93;box-shadow:0 6px 24px #0002;font-size:13px;font-weight:800;cursor:pointer; }
.three-mobile-panel-toggle > span { display:grid;place-items:center;width:31px;height:31px;border-radius:8px;color:white;background:#004a93;font-size:18px; }
.three-device-panel { position:absolute;z-index:13;top:86px;bottom:84px;right:24px;width:345px;max-height:750px;padding:10px;border:2px solid #41484b;border-radius:27px;background:#11171b;box-shadow:0 12px 45px #0004;transform:translateX(calc(100% + 32px));visibility:hidden;transition:transform .25s,visibility .25s; }
.is-panel-open .three-device-panel { transform:translateX(0);visibility:visible; }
.is-panel-open .three-mobile-panel-toggle { visibility:hidden; }
.three-panel-close { position:absolute;top:18px;right:15px;z-index:7;width:32px;height:32px;border:0;border-radius:50%;color:#385366;background:#eff4f8;font-size:25px;cursor:pointer; }
.tablet-camera { position:absolute;top:3px;left:50%;width:4px;height:4px;border-radius:50%;background:#3e505a; }
.tablet-homebar { position:absolute;bottom:4px;left:39%;width:22%;height:3px;border-radius:3px;background:#697174; }
.yubii-screen { position:relative;height:100%;overflow:auto;overscroll-behavior:contain;border-radius:16px;background:#f1f5f7;color:#263b4a;scrollbar-width:thin; }
.yubii-statusbar { display:flex;justify-content:space-between;padding:10px 48px 4px 15px;font-size:12px;color:#5b6c78;background:white; }
.yubii-appbar { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:white; }
.yubii-logo { display:flex;align-items:center;gap:9px; }
.yubii-logo > span { display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#004a93;color:white;font-size:24px; }
.yubii-logo strong { display:block;font-size:20px;line-height:1.05;letter-spacing:.04em;color:#004a93; }
.yubii-logo small { font-size:12px;letter-spacing:.18em;color:#087cbf; }
.yubii-appbar > button { width:36px;height:36px;border:0;border-radius:50%;background:#f1f6f9;color:#004a93;font-size:24px;cursor:pointer; }
.yubii-appbar > button.is-syncing { animation:threeSpin .7s linear; }
.yubii-tabs { position:sticky;top:0;z-index:5;display:flex;padding:5px;background:#eaf0f4; }
.yubii-tabs button { flex:1;min-height:39px;border:0;border-radius:7px;background:transparent;color:#617788;font-size:14px;cursor:pointer; }
.yubii-tabs button.is-active { background:white;color:#004a93;box-shadow:0 2px 8px #00000008; }
.three-panel-head { padding:16px; }
.three-remote { color:#517082;font-size:11px;letter-spacing:.025em; }
.three-panel-head h2 { margin:8px 0;font-size:20px;color:#233e50; }
.three-panel-head p { margin:0;font-size:13px;line-height:1.6;color:#6d808e; }
.three-scenes { padding:0 15px 10px; }
.three-scenes > span { display:block;margin:0 0 8px;font-size:11px;letter-spacing:.025em;color:#648196; }
.three-scenes > div { display:grid;grid-template-columns:1fr 1fr;gap:6px; }
.three-scenes button { border:1px solid #dce5ec;border-radius:8px;padding:10px 7px;background:white;color:#3e596b;font-size:14px;cursor:pointer; }
.three-scenes button:hover,.three-scenes button.is-active { background:#004a93;color:white; }
.three-scenes small { display:block;margin:9px 0 0;color:#5c7485;font-size:12px;line-height:1.4; }
.three-selected { margin:6px 15px 16px;padding:12px;border:1px solid #d6e6f0;border-radius:11px;background:white; }
.three-selected-label { display:block;color:#7a8e9c;font-size:11px; }
.three-selected strong { display:block;margin:6px 0;font-size:16px; }
.three-selected-status { font-size:13px;color:#087cbf; }
.three-selected p { margin:7px 0 0;font-size:12px;line-height:1.5;color:#6c8391; }
.three-device-list { padding:0 12px 16px; }
.three-device-group { margin-top:15px; }
.three-device-group-title { display:block;font-size:11px;letter-spacing:.02em;color:#718c9e;margin:0 0 7px; }
.three-device-button { display:grid;grid-template-columns:30px minmax(0,1fr);position:relative;align-items:center;gap:8px;width:100%;min-height:64px;padding:9px 11px;margin:7px 0 0;border:1px solid #e0e8ed;border-radius:11px;background:white;color:#284556;text-align:left;cursor:pointer; }
.three-device-button:hover,.three-device-button.is-selected { border-color:#087cbf; }
.three-device-icon { display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#004a93;color:white;font-size:12px;font-weight:700; }
.three-device-copy strong { display:block;font-size:14px;line-height:1.3; }
.three-device-copy small { display:block;font-size:11px;line-height:1.4;color:#8196a3; }
.three-device-state { grid-column:2;font-size:12px;line-height:1;color:#087cbf; }
.three-device-state.is-off { color:#778c99; }
.three-experience:fullscreen { width:100vw;height:100svh;min-height:0; }
@keyframes threeSpin { to {transform:rotate(360deg)} }
@media (max-width:1150px) {
 .three-topline { max-width:27%;padding:10px;font-size:0; }
 .three-topline strong { font-size:14px; }
 .three-tool { padding:8px 9px;font-size:13px; }
 .three-guide { max-width:220px;font-size:12px; }
 .three-scene-dock > span { display:none; }
 .three-device-hints { bottom:81px; }
}
@media (max-width:800px) {
 .three-experience { height:calc(100svh - 72px);min-height:480px; }
 .three-topline { top:12px;left:12px;max-width:calc(100% - 24px);padding:8px 12px; }
 .three-toolbar { top:58px;left:12px;right:12px;overflow-x:auto;border-radius:7px;scrollbar-width:none; }
 .three-tool { min-height:34px;flex-shrink:0; }
 .three-room-nav { top:112px;left:12px;max-width:calc(100% - 24px);overflow-x:auto;scrollbar-width:none; }
 .three-room-nav > span { display:none; }
 .three-room-nav button { min-height:32px;padding:7px 10px;font-size:13px; }
 .three-guide { display:none; }
 .three-scene-dock { bottom:12px;left:12px;right:12px;transform:none;justify-content:center; }
 .three-scene-dock button { flex:1;padding:9px 11px; }
 .three-move-pad { bottom:76px;left:12px; }
 .three-move-pad button { width:39px;height:42px; }
 .three-device-hints { bottom:77px;right:12px;font-size:12px;padding:9px; }
 .three-mobile-panel-toggle { top:168px;right:12px;padding:6px 9px 6px 6px;min-height:41px;font-size:12px; }
 .three-device-panel { top:14px;bottom:14px;right:12px;width:min(345px,calc(100% - 24px));max-height:none; }
 .three-toast { bottom:128px;font-size:13px; }
 .is-panel-open .three-device-hints,.is-panel-open .three-markers { visibility:hidden; }
}
@media (max-width:980px) and (max-height:560px) and (orientation:landscape) {
 .three-experience { height:calc(100svh - 72px);min-height:300px; }
 .three-topline { display:none; }
 .three-toolbar { top:10px;left:auto;right:12px; }
 .three-room-nav { top:59px; }
 .three-scene-dock { left:auto;width:auto;right:12px; }
 .three-move-pad { bottom:12px; }
 .three-mobile-panel-toggle { top:118px; }
 .three-device-hints { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 .three-canvas,.three-loading,.three-device-panel,.three-toast { transition:none; }
 .three-loading span { animation:none; }
}

/* A broad catalog remains inside the tablet; the interior stays clear. */
.three-lighting-demo {position:absolute;z-index:7;top:140px;left:24px;display:grid;gap:3px;padding:8px;border-radius:9px;background:#fffffff0;box-shadow:0 3px 18px #0001;color:#345267;}
.three-lighting-demo > div {display:flex;align-items:center;gap:4px;}
.three-lighting-demo span {width:70px;padding-left:4px;font-size:12px;}
.three-lighting-demo button {min-height:32px;padding:7px 10px;border:0;border-radius:5px;background:transparent;color:#345267;font-size:13px;cursor:pointer;}
.three-lighting-demo button:hover,.three-lighting-demo button.is-active {color:white;background:#004a93;}
.demo-count {font-weight:800;color:#004a93 !important;margin-top:12px !important;}
.yubii-screen:not([data-tab="scenes"]) .three-scenes {display:none;}
.yubii-screen[data-tab="scenes"] .three-selected,.yubii-screen[data-tab="scenes"] .demo-device-filter,.yubii-screen[data-tab="scenes"] .three-device-list {display:none;}
.yubii-screen:not([data-tab="home"]) .three-panel-head {display:none;}
.yubii-screen[data-tab="scenes"] .three-scenes {padding-top:16px;}
.demo-compatibility {margin-top:12px;font-size:12px;line-height:1.5;}
.demo-compatibility summary {cursor:pointer;color:#004a93;font-size:13px;}
.demo-compatibility p {font-size:12px;margin:8px 0;}
.demo-compatibility a {color:#004a93;}
.demo-device-filter {padding:0 15px;display:grid;gap:8px;}
.demo-device-filter label,[data-device-adjustments] label {display:block;font-size:13px;color:#526d7e;}
.demo-device-filter input,.demo-device-filter select {display:block;width:100%;margin-top:4px;min-height:40px;padding:8px;border:1px solid #cfdae2;border-radius:7px;background:white;color:#213f55;font:14px Manrope,sans-serif;}
.demo-device-filter p {margin:0;font-size:12px;color:#6f8596;}
.three-device-copy small {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;}
[data-device-adjustments] label {margin-top:12px;}
[data-device-adjustments] output {float:right;color:#004a93;font-weight:700;}
[data-device-adjustments] input[type=range] {display:block;width:100%;margin:12px 0;accent-color:#004a93;}
[data-device-adjustments] button {padding:8px;border:1px solid #ccdbe6;border-radius:6px;background:#f1f6fa;color:#004a93;font-size:13px;cursor:pointer;}
.demo-colors {display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.demo-colors button {width:31px;height:31px;padding:0;background:var(--swatch);border:2px solid #7d91a0;border-radius:50%;}
.demo-automation-lab {padding:14px 0 4px;}
.demo-automation-lab h3 {font-size:16px;margin:12px 0 6px;color:#284457;}
.demo-automation-lab p,.demo-automation-lab label {font-size:13px;line-height:1.5;color:#60798b;}
.demo-automation-lab input {accent-color:#004a93;}
.demo-events {display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;}
.demo-events button {flex:1 0 43%;font-size:13px;}
.demo-automation-lab ol {padding-left:18px;margin:12px 0;}
.demo-automation-lab li {font-size:12px;line-height:1.6;color:#426074;border-bottom:1px solid #e0e8ee;padding:7px 0;}
@media(max-width:800px){
 .three-lighting-demo {top:auto;bottom:137px;left:12px;padding:5px;}
 .three-lighting-demo span {width:58px;font-size:11px;}
 .three-lighting-demo button {font-size:12px;padding:6px 8px;}
 .is-panel-open .three-lighting-demo {visibility:hidden;}
 .three-toast {bottom:225px;}
}
@media(max-width:980px) and (max-height:560px) and (orientation:landscape){
 .three-lighting-demo {top:112px;bottom:auto;left:12px;}
}