:root{font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color:#273c35;background:#e8eae5;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{ -webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #bb8750;outline-offset:4px}button{transition:background .2s,transform .2s}button:hover{background:#dce3da}button:active{transform:scale(.97)}#app{height:100dvh;min-height:650px;position:relative;overflow:hidden}#viewport{position:absolute;inset:0}canvas{display:block;touch-action:none}header{position:absolute;top:0;left:0;right:0;height:96px;display:flex;align-items:center;padding:0 38px;gap:22px;border-bottom:1px solid #30403612;background:linear-gradient(#f2f3eff0,#f2f3ef40)}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;font-size:25px;letter-spacing:4px}.brand-mark{font-size:36px;width:48px;height:48px;border:1px solid #7a8978;border-radius:50%;text-align:center;line-height:41px}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:5px}.header-center{margin:auto;font-size:14px}.header-center span{margin:0 18px;color:#a0a69e}.quiet{font-size:14px;padding:10px}.local{font-size:12px;border:1px solid #bac4b7;padding:7px 11px;border-radius:20px}.left{position:absolute;top:133px;left:38px;width:200px;pointer-events:none}.left>*{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:2px;color:#7f8b7d;font-weight:600}h1{font-size:32px;font-family:Georgia,"Microsoft YaHei",serif;font-weight:500;letter-spacing:2px;margin:16px 0 10px}.intro{font-size:12px;color:#758175;margin-bottom:34px}nav{display:grid;gap:7px}nav button{text-align:left;display:flex;align-items:center;gap:15px;width:170px;padding:13px 15px;border-radius:10px;font-size:14px}nav button .room-icon{font-size:19px;width:24px;text-align:center;color:#829180}nav button.active{background:#2e443a;color:#fff;box-shadow:0 5px 15px #2e443a20}nav button.active .room-icon{color:#d2c19c}nav button small{margin-left:auto;font-size:11px;opacity:.65}.summary{margin-top:35px;border-top:1px solid #36482e20;width:168px;padding-top:24px;display:flex;gap:12px;align-items:center}.summary>span{font-size:34px;font-family:Georgia}.summary div{font-size:12px}.summary small{display:block;font-size:10px;color:#8c978b;margin-top:6px}.panel{position:absolute;right:30px;top:125px;width:278px;background:#f8f9f3e8;backdrop-filter:blur(24px);border:1px solid #ffffffc0;border-radius:19px;box-shadow:0 16px 50px #324b3610;padding:23px 20px 0;max-height:calc(100% - 224px);display:flex;flex-direction:column}.panel-heading{display:flex;align-items:center;justify-content:space-between}.panel h2{font-size:20px;font-weight:500;margin:10px 0 20px}.count{font-size:12px;background:#e4e9dd;border-radius:50%;padding:7px 9px}.tabs{display:flex;background:#e8ece2;padding:4px;border-radius:9px;margin-bottom:13px}.tabs button{flex:1;font-size:12px;padding:8px;border-radius:6px}.tabs .active{background:#fff;box-shadow:0 2px 5px #253a2310}#device-list{overflow:auto;min-height:50px;scrollbar-width:thin;max-height:370px}.device-row{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 3px;border-bottom:1px solid #4051310c;border-radius:5px}.device-row.selected{background:#e8eddf}.device-icon{width:35px;height:35px;border-radius:10px;background:#e9ede4;display:grid;place-items:center;font-size:19px}.device-row.on .device-icon{background:#eee5c9;color:#8b703e}.device-text{flex:1;font-size:13px}.device-text small{display:block;font-size:10px;margin-top:5px;color:#8c9685}.indicator{width:7px;height:7px;border-radius:50%;background:#c8cec3;margin-right:7px}.on .indicator{background:#b69955;box-shadow:0 0 0 4px #b6995514}.panel-footer{font-size:10px;color:#87917f;text-align:center;padding:17px 0}.scene-bar{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);background:#f9faf5e8;box-shadow:0 12px 36px #2d432517;border:1px solid #fff;border-radius:14px;padding:8px;display:flex;align-items:center;white-space:nowrap;backdrop-filter:blur(16px)}.scene-label{font-size:11px;padding:0 14px;color:#8a927e;border-right:1px solid #dce0d5;margin-right:8px}.scene-bar button{font-size:13px;padding:13px 18px;border-radius:9px}.scene-bar .active{background:#31483e;color:#f6f6ef}.view-tools{position:absolute;bottom:174px;left:50%;transform:translateX(-50%);display:flex;align-items:center;padding:4px 7px;background:#f6f8f0e8;border:1px solid white;border-radius:12px;gap:4px}.view-tools button{min-width:36px;height:35px;font-size:21px;border-radius:7px}.view-tools span{height:18px;width:1px;background:#d9dfd1;margin:0 3px}.view-tools #walls{font-size:11px;padding:0 10px}.view-tools .active{color:#587b49;background:#e3eadb}footer{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:22px 38px;font-size:11px;color:#7b8877;border-top:1px solid #3c503814;background:#f0f2eaa0}footer b{font-weight:500;color:#465d42}footer i{display:inline-block;width:6px;height:6px;background:#9baf70;border-radius:50%;margin-right:7px}footer button{font-size:11px}#detail{border-top:1px solid #ccd5c2;padding-top:14px;margin-top:12px;overflow:auto;flex-shrink:0;max-height:310px}.detail-top{display:flex;justify-content:space-between;align-items:center;font-size:14px}.detail-top button{font-size:18px}.switch{width:42px;height:24px;border-radius:20px;background:#bfc7b7;padding:3px;position:relative}.switch:after{content:'';display:block;width:18px;height:18px;border-radius:50%;background:white;transition:transform .2s}.switch.on{background:#607b52}.switch.on:after{transform:translateX(18px)}.control-line{display:flex;justify-content:space-between;align-items:center;margin:14px 0;font-size:12px}.control-line output{color:#8c764b}input[type=range]{width:100%;accent-color:#768c5d;height:20px}.modes{display:flex;gap:5px;margin:10px 0}.modes button{flex:1;padding:9px 2px;font-size:11px;border:1px solid #d4dccb;border-radius:7px}.modes .active{background:#dfe7d4}.detail-note{font-size:11px;color:#829079;line-height:1.7;margin:10px 0}.panel:has(#detail:not([hidden])) #device-list{max-height:130px}#tooltip{position:absolute;display:none;pointer-events:none;border-radius:8px;background:#263d33e8;color:#fff;padding:9px 14px;font-size:12px;box-shadow:0 4px 15px #24362f30}#toast{position:absolute;left:50%;top:107px;transform:translate(-50%,-8px);background:#31473e;color:#fff;font-size:13px;border-radius:20px;padding:11px 20px;opacity:0;pointer-events:none;transition:.25s}#toast.show{opacity:1;transform:translate(-50%,0)}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e8eae5;z-index:10;font-size:18px}dialog{border:1px solid #fff;border-radius:20px;padding:26px;background:#f5f6ef;color:#304237;width:min(1000px,92vw);max-height:86dvh;box-shadow:0 20px 100px #102a3250}dialog::backdrop{background:#1e302866;backdrop-filter:blur(8px)}.dialog-head{display:flex;align-items:center;justify-content:space-between}.dialog-head h2{font-weight:500}.dialog-head button{font-size:22px}dialog p{font-size:14px;line-height:1.9;color:#71806c}.references{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px}.references figure{margin:0}.references img{width:100%;border-radius:10px}.references figcaption{text-align:center;font-size:12px;margin:10px}#help-dialog{max-width:520px}@media(min-width:1600px){.left{left:55px}.panel{right:45px;width:300px}}@media(max-width:1100px){.left{left:20px;width:150px}h1{font-size:25px}.intro{font-size:11px}nav button{width:143px;padding:11px}.panel{right:16px;width:246px;padding:18px 15px 0}.scene-label{display:none}.scene-bar button{padding:12px 15px}header{padding:0 23px}.summary{width:140px}}@media(max-width:760px){#app{min-height:620px}header{height:74px;padding:0 18px;gap:9px}.brand{font-size:21px;gap:8px}.brand small{font-size:8px}.brand-mark{width:37px;height:37px;line-height:33px;font-size:28px}.header-center{display:none}.quiet{margin-left:auto;font-size:12px;padding:6px}.local{font-size:10px;padding:6px}.left{top:87px;left:15px;right:15px;width:auto}.left .eyebrow,h1,.intro,.summary{display:none}nav{display:flex;overflow:auto;gap:4px}nav button{flex-shrink:0;width:auto;font-size:11px;gap:5px;padding:9px 12px;background:#f5f7eee0}nav button .room-icon{font-size:15px;width:18px}nav small{display:none}.panel{top:auto;bottom:117px;left:12px;right:12px;width:auto;max-height:244px;padding:12px 14px 0;border-radius:15px}.panel-heading .eyebrow,.count,.tabs,.panel-footer{display:none}.panel h2{font-size:14px;margin:0 0 8px}#device-list{display:flex;gap:7px;max-height:79px;overflow:auto;flex-shrink:0}.device-row{width:140px;min-width:140px;padding:8px;border:1px solid #dfe5d4;gap:7px}.device-text{font-size:11px}.device-text small{font-size:9px}.device-icon{width:28px;height:28px}.indicator{width:5px;height:5px;margin:0}.panel:has(#detail:not([hidden])) #device-list{display:none}#detail{margin:0;padding-top:4px;max-height:175px;flex-shrink:1}.control-line{margin:7px 0}.detail-note{margin:5px 0}.scene-bar{bottom:60px;width:calc(100% - 24px);justify-content:space-around;padding:5px}.scene-bar button{padding:11px 12px;font-size:12px}.view-tools{bottom:auto;top:135px;left:auto;right:13px;transform:none;gap:0}.view-tools button{min-width:30px;height:30px;font-size:18px}.view-tools #walls{font-size:10px}.view-tools span{margin:0 2px}footer{padding:16px 17px;font-size:10px}.gesture{display:none}#toast{top:180px;max-width:90%;white-space:nowrap;font-size:11px}.references{grid-template-columns:1fr}}
h1{width:220px;font-size:30px;letter-spacing:1px}
@media (min-width:761px) and (max-width:1100px){#viewport{inset:100px 190px 170px 125px}}
@media(max-width:760px){#viewport{inset:122px 0 273px}.panel{padding-bottom:12px}}
@media(prefers-reduced-motion:reduce){button,#toast{transition:none}}
input[type=range]{margin:0;min-width:0}#detail{overflow-x:hidden}.control-line{font-size:14px}
@media(max-width:760px){nav,#device-list{scrollbar-width:none}nav::-webkit-scrollbar,#device-list::-webkit-scrollbar{display:none}#detail{max-height:190px}.detail-note{display:none}.device-text{font-size:12px}}