:root{color-scheme:dark;--ink:#efeee7;--muted:#aaa99f;--copper:#d8aa7b;--line:rgba(229,228,211,.10);--ease:cubic-bezier(.2,.65,.3,1);--scene-ease:cubic-bezier(.45,0,.55,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}body{background:#121413;min-height:100vh;display:grid;place-items:center;color:var(--ink);padding:50px 40px;font-size:16px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.35}button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--copper);outline-offset:5px}button:active:not(:disabled){transform:scale(.98)}button{transition:background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}button:hover:not(:disabled){background-color:rgba(225,212,188,.09)}h1,h2,p{margin:0}h2{font-size:18px;font-weight:400}.symbols{position:absolute;width:0;height:0;overflow:hidden}.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.panel{width:1280px;height:800px;max-width:100%;background:#222422;border-radius:24px;position:relative;overflow:hidden;padding:0 40px;box-shadow:0 20px 55px #0003,0 2px 7px #0004;border:1px solid #47494055;isolation:isolate;--light:0.68;--curtain:.6}.ambient-surface{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,#796047 0%,#3c3f39 57%,#383d37 100%);opacity:calc(.04 + var(--light)*.53);transition:opacity .45s var(--scene-ease)}.topbar{height:94px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand>svg{width:29px;height:29px;fill:none;stroke:#d3c8b1;stroke-width:1.3}.brand>span:first-of-type{font-family:"Songti SC",SimSun,serif;font-size:25px;letter-spacing:4px}.brand-divider{width:1px;height:18px;background:var(--line);margin:0 7px}.home-name{font-size:15px;color:#c2c1b7}.top-meta{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:14px}.connection{display:flex;align-items:center;gap:8px}.connection i{width:5px;height:5px;border-radius:50%;background:#a5b9a0}.top-meta time{font:400 21px "Helvetica Neue",Arial,sans-serif;color:#dfdfd5;letter-spacing:.6px}.environment{height:402px;display:grid;grid-template-columns:minmax(0,1fr) 342px;gap:25px;padding-top:24px}.room-view{position:relative;min-width:0}.room-heading{position:relative;z-index:1;display:flex;justify-content:space-between;padding:5px 23px 0 0;pointer-events:none}.room-heading h1{font-size:36px;font-weight:400;letter-spacing:2px;margin-bottom:8px}.room-heading p{font-size:14px;color:var(--muted)}.room-number{padding-top:10px;font-size:13px;color:#8b8f82;font-family:"Helvetica Neue",sans-serif}.room-number span{margin:0 6px;color:#666f62}.room-art{position:absolute;width:100%;height:382px;top:1px;left:0;overflow:visible}.room-base{filter:brightness(calc(.7 + var(--light)*.48 + var(--curtain)*.13));transition:filter .45s var(--scene-ease)}.room-darken{opacity:calc(.15 - var(--light)*.15);transition:opacity .45s var(--scene-ease)}.lamp-glow,.lamp-bulb{opacity:var(--light);transition:opacity .45s var(--scene-ease)}.daylight{opacity:calc(var(--curtain)*1.15);transition:opacity .45s var(--scene-ease)}#curtain-left{transform:translateX(calc(var(--curtain)*-89px));transition:transform .45s var(--scene-ease)}#curtain-right{transform:translateX(calc(var(--curtain)*89px));transition:transform .45s var(--scene-ease)}.room-foot{position:absolute;bottom:22px;left:0;right:31px;display:flex;align-items:center;justify-content:space-between;font-size:14px;color:#adad9f}.room-foot>span:first-child{display:flex;align-items:center;gap:8px}.room-foot i{width:6px;height:6px;background:var(--copper);border-radius:50%}.room-foot>span:last-child{color:#a0a99b}.climate{padding-left:29px;border-left:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;height:40px}.power-button{border:0;background:#444b44;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#d1d7c5}.power-button .icon{width:19px;height:19px}.dial-wrap{position:relative}.dial{height:253px;position:relative;touch-action:none;cursor:grab;border-radius:50%;max-width:296px}.dial:active{cursor:grabbing}.dial-svg{position:absolute;width:100%;height:100%;inset:0;overflow:visible}.dial-track,.dial-progress{fill:none;stroke-width:1.6;stroke-linecap:round;transform:translateY(-1px)}.dial-track{stroke:#676b5d}.dial-progress{stroke:#cba47d}#dial-knob{fill:#ead3ab;stroke:#85775f;stroke-width:4;filter:drop-shadow(0 0 5px #caa57c44)}.dial-center{position:absolute;inset:51px 0 45px;display:flex;flex-direction:column;align-items:center;pointer-events:none}.target-label{font-size:14px;color:var(--muted)}.temperature{font:300 68px/1.15 "Helvetica Neue",Arial,sans-serif;letter-spacing:-3px;margin-left:15px;font-variant-numeric:tabular-nums}.degree{font-size:43px;vertical-align:top;position:relative;top:8px;letter-spacing:0}.climate-mode{display:flex;align-items:center;gap:6px;font-size:14px;color:#c5cbb8;margin-top:2px}.climate-mode .icon{width:15px;height:15px}.dial-min,.dial-max{position:absolute;bottom:19px;font:14px "Helvetica Neue",Arial,sans-serif;color:#979c8b}.dial-min{left:51px}.dial-max{right:48px}.temperature-actions{display:flex;align-items:center;justify-content:space-between;margin:-5px 34px 0}.round-button{width:44px;height:44px;border:1px solid #6d726044;border-radius:50%;background:transparent;display:grid;place-items:center}.round-button .icon{width:20px;height:20px}.temperature-actions>span{font-size:14px;color:#b8bcad;min-width:100px;text-align:center}.climate-details{display:flex;align-items:center;justify-content:center;gap:26px;margin-top:15px;font-size:14px;color:#a3a998}.climate-details>span{display:flex;align-items:center;gap:9px}.climate-details b{font-size:15px;font-weight:400;color:#d4d7c9}.climate-details b span{font-size:12px;margin-left:1px}.air-dot{display:block;width:4px;height:4px;background:#abc1a4;border-radius:50%}.controls{height:165px;display:grid;grid-template-columns:1fr 1fr;gap:56px;border-top:1px solid var(--line);padding-top:23px}.control-heading{height:36px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.control-heading label{display:flex;align-items:center;gap:12px;font-size:18px}.control-heading label>.icon{color:#c8c8b8}.control-heading label>span{display:flex;align-items:center;gap:15px}.control-sub{font-size:13px;color:#adb0a5}.value{display:flex;align-items:baseline;gap:4px;font-family:"Helvetica Neue",Arial,sans-serif}.value output{font-size:26px;font-weight:300;font-variant-numeric:tabular-nums}.value>span{font-size:14px;color:#a9ac9c}.value .opening-label{font-size:14px;font-family:inherit;margin-right:8px}.toggle{align-self:center;position:relative;margin-left:16px;width:42px;height:24px;padding:3px;border:0;background:#cfaf83;border-radius:30px}.toggle>span{display:block;width:18px;height:18px;border-radius:50%;background:#31382b;transform:translateX(18px);transition:transform .2s var(--ease)}.toggle[aria-pressed=false]{background:#4e5546}.toggle[aria-pressed=false]>span{background:#b4bcaa;transform:translateX(0)}.range-wrap{position:relative;height:42px;--pct:68%;--fill:#bd9972}.curtain-control .range-wrap{--pct:60%;--fill:#aab1a5}.range-wrap input{appearance:none;-webkit-appearance:none;width:100%;height:42px;position:absolute;inset:0;margin:0;background:transparent;cursor:ew-resize;outline:none;touch-action:pan-y}.range-wrap:before{content:"";position:absolute;inset:7px 0;border-radius:8px;background:linear-gradient(to right,var(--fill) 0 var(--pct),#424941 var(--pct) 100%);opacity:.9;box-shadow:inset 0 1px 2px #131a1466;pointer-events:none}.range-wrap input::-webkit-slider-runnable-track{height:42px;background:transparent}.range-wrap input::-moz-range-track{height:42px;background:transparent}.range-wrap input::-webkit-slider-thumb{appearance:none;width:28px;height:42px;background:transparent;border:0}.range-wrap input::-moz-range-thumb{width:28px;height:42px;background:transparent;border:0}.range-wrap:has(input:focus-visible){outline:2px solid var(--copper);outline-offset:4px;border-radius:8px}.range-handle{position:absolute;left:clamp(0px,calc(var(--pct) - 14px),calc(100% - 28px));width:28px;height:40px;top:1px;background:#e2cfb1;box-shadow:0 2px 6px #10170c66,inset 0 1px 0 #f6e6ce;border-radius:7px;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:3px}.curtain-control .range-handle{background:#d0d7cb;box-shadow:0 2px 6px #10170c66,inset 0 1px 0 #e0e6d3}.range-handle i{height:10px;width:1px;background:#75664e66}.range-labels{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#aeb1a5;margin-top:7px}.control-note{color:#a7ab9f;font-size:14px}.scenes{padding-top:5px}.scenes-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.scenes-heading h2{font-size:14px;color:#bebfb1}.scenes-heading>span{font-size:12px;color:#a4ab9d}.scene-options{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.scene{height:80px;display:flex;align-items:center;text-align:left;border:1px solid #69705b33;border-radius:13px;background:#383d3766;padding:0 21px;gap:15px}.scene>.icon{width:25px;height:25px;color:#b9c2ae}.scene>span:not(.scene-check){display:flex;flex-direction:column;gap:6px}.scene b{font-size:17px;font-weight:400}.scene small{font-size:14px;color:#a9afa3}.scene-check{width:20px;height:20px;display:grid;place-items:center;border:1px solid transparent;border-radius:50%;margin-left:auto;flex-shrink:0}.scene-check .icon{width:13px;height:13px;opacity:0}.scene.selected{background:#ab8d6830;border-color:#b7986755}.scene.selected>.icon{color:var(--copper)}.scene.selected b{color:#e6d3b3}.scene.selected small{color:#c1b8a7}.scene.selected .scene-check{background:#d2b183;border-color:#d2b183;color:#2d3326}.scene.selected .scene-check .icon{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.panel.adjusting .room-base,.panel.adjusting .room-darken,.panel.adjusting .lamp-glow,.panel.adjusting .lamp-bulb,.panel.adjusting .daylight,.panel.adjusting #curtain-left,.panel.adjusting #curtain-right,.panel.adjusting .ambient-surface{transition:none}.panel.ac-off .dial-progress,.panel.ac-off #dial-knob{opacity:.25}.panel.ac-off .temperature{color:#929a86}.panel.ac-off .power-button{background:#373e30;color:#859078}::selection{background:#b89262;color:#171d13}
@media(max-width:1100px) and (min-width:761px){body{padding:24px}.panel{height:auto;min-height:800px;padding:0 28px 28px}.environment{grid-template-columns:minmax(0,1fr) 290px;gap:16px}.room-art{top:32px}.climate{padding-left:20px}.controls{gap:32px}.scene{padding:0 14px;gap:10px}.scene small{font-size:11px}.control-sub{display:none}.top-meta{gap:18px}}
@media(max-width:760px){body{display:block;padding:0;background:#22261f}.panel{width:100%;height:auto;min-height:100dvh;border:0;border-radius:0;padding:0 22px 30px;display:flex;flex-direction:column;overflow:hidden}.topbar{height:80px;flex-shrink:0}.brand{gap:7px}.brand>span:first-of-type{font-size:22px}.brand-divider,.home-name,.connection,.date{display:none}.top-meta time{font-size:18px}.environment{display:contents}.room-view{height:305px;padding-top:22px}.room-heading{padding:0}.room-heading h1{font-size:30px}.room-art{top:48px;left:-30px;width:calc(100% + 60px);height:265px}.room-number{font-size:12px}.room-foot{bottom:6px;right:0;font-size:14px}.scenes{order:2;padding-top:17px}.scenes-heading{display:none}.scene-options{gap:8px}.scene{height:68px;justify-content:center;padding:0 8px;gap:8px;border-radius:11px}.scene>.icon{width:20px;height:20px}.scene b{font-size:15px}.scene small,.scene-check{display:none}.controls{order:3;height:auto;display:flex;flex-direction:column;gap:26px;margin-top:24px;padding-top:24px;padding-bottom:24px}.control-sub{font-size:12px}.control-heading{margin-bottom:8px}.control-heading label{font-size:17px}.climate{order:4;border-left:0;border-top:1px solid var(--line);padding:23px 0 0}.dial{margin:auto}.temperature-actions{max-width:250px;margin:-5px auto 0}.climate-details{margin-top:22px}.range-labels,.control-note{font-size:12px}.room-foot>span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Reading-size and touch refinements. */
.toggle::before{content:"";position:absolute;inset:-10px -3px}.temperature .fraction{font-size:.64em;letter-spacing:-2px}.temperature{margin-left:10px}.scene small{font-size:14px}.control-note{font-size:13px}.climate-details{margin-top:11px}.room-number{display:none}.scenes-heading h2{font-size:14px}.range-handle{left:calc(var(--position, .68) * (100% - 28px))}.curtain-control .range-handle{left:calc(var(--position, .6) * (100% - 28px))}.range-wrap:before{background:linear-gradient(to right,var(--fill) 0 calc(14px + var(--position, .68) * (100% - 28px)),#424941 calc(14px + var(--position, .68) * (100% - 28px)) 100%)}
@media(min-width:1101px) and (max-width:1359px){body{padding:0}.panel{border-radius:0}}
@media(max-width:760px){.dial{height:265px}.dial-center{inset:55px 0 45px}.scene small{display:none}.scene{gap:8px}.climate-details{margin-top:22px}.room-number{display:none}}

.room-foot{display:none}.curtain-control .control-note{visibility:hidden}.climate-mode{min-height:18px}.dial[aria-disabled=true]{cursor:default}.dial-center{inset:56px 0 45px}
@media(max-width:760px){.room-art{height:275px}.room-view{height:292px}.dial-center{inset:55px 0 45px}}

.scene .scene-compact{display:none}.room-heading p{min-height:20px}.panel.is-switching .room-heading p{color:#d7c7ad}
@media(max-width:760px){.scene{height:82px;position:relative;align-items:flex-start;padding-top:14px}.scene>span:not(.scene-check){padding-bottom:20px}.scene .scene-details{display:none}.scene .scene-compact{display:block;position:absolute;left:3px;right:3px;bottom:12px;text-align:center;font-size:12px;line-height:1.2;color:#b4b8aa}.scene.selected .scene-compact{color:#d2c5ad}}
