:root{--bg:#080e18;--blue:#64d5ff;--muted:#899db6;--line:rgba(160,199,228,.13)}body{background:radial-gradient(ellipse at 12% 0%,#13283c 0,transparent 42%),radial-gradient(ellipse at 95% 70%,#1a1b32 0,transparent 40%),#080e18;background-attachment:fixed}.shell{max-width:1320px}header{height:96px}.brand{font-weight:600}.intro{padding-top:39px;padding-bottom:26px}.intro h1{font-weight:450;font-size:clamp(29px,4vw,43px)}.intro p{font-size:12px}.summary{margin-bottom:20px}.home-bar{margin-bottom:18px}.view-switch{background:#050b1499;padding:5px;border-color:#91caff18;box-shadow:inset 0 2px 6px #0004}.view-switch button{position:relative;transition:color .25s,background .25s,box-shadow .25s,transform .2s}.view-switch .active{color:#e5f7ff;background:linear-gradient(135deg,#254662,#19364c);box-shadow:0 3px 8px #0005,inset 0 1px #98c8e930}.view-switch button:active{transform:scale(.97)}.room-rail{display:flex;gap:13px;overflow-x:auto;scroll-snap-type:x proximity;margin:0 -4px 32px;padding:5px 4px 12px;scrollbar-width:thin;scrollbar-color:#344b62 transparent}.room-tile{position:relative;text-align:left;flex:1 0 160px;min-width:160px;max-width:250px;scroll-snap-align:start;border:1px solid #a3c8e51c;border-radius:21px;padding:19px;background:linear-gradient(145deg,#22334455,#111d2855);box-shadow:inset 0 1px #cce9ff07;transition:background .3s,border-color .3s,transform .2s,box-shadow .3s}.room-tile:hover{border-color:#9bd9ff55;transform:translateY(-2px)}.room-tile.selected{background:linear-gradient(140deg,#285b795c,#1231497a);border-color:#63ceff77;box-shadow:0 7px 25px #0002,inset 0 1px #c8eeff20}.room-tile.selected:after{content:'';position:absolute;left:21px;right:21px;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#64d5ff,transparent)}.room-icon{font-size:23px;color:#81a9c7}.room-metric{float:right;font-size:25px;color:#d3edff;font-weight:350;font-variant-numeric:tabular-nums}.room-title{display:block;font-size:13px;font-weight:550;margin-top:17px;white-space:normal;overflow-wrap:anywhere}.room-devices{display:block;font-size:9px;color:var(--muted);margin-top:7px}.section-head{margin-bottom:19px}.section-head h2{font-size:23px}.section-count{background:#ffffff05;border:1px solid var(--line);border-radius:20px;padding:5px 10px;font-size:9px}.grid{gap:22px}.card{border-radius:28px;padding:25px 28px 18px;background:linear-gradient(135deg,#263b4d70,#152230a8 45%,#101925e8);box-shadow:inset 0 1px #d4edff12,0 20px 45px #0004}.card.running{background:radial-gradient(ellipse at 75% 5%,#2f9bcf1a,transparent 50%),linear-gradient(135deg,#293f5070,#152230a8 45%,#101925e8);border-color:#6fd8ff45}.card.heating{--blue:#ffc38c;background:radial-gradient(ellipse at 75% 5%,#cf83321c,transparent 50%),linear-gradient(135deg,#403a3070,#252323a8 45%,#151b24e8)}.room-assignment{margin-bottom:20px}.room-assignment select{border-radius:20px;padding:7px 12px;background:#07152365}.model{font-size:8px;letter-spacing:2px}.room-name{font-size:23px;letter-spacing:-.5px}.room-temp{margin-top:8px}.power{width:55px;height:55px;font-size:29px;border:1px solid #c8e4ff20;background:linear-gradient(150deg,#8296aa1a,#1c293a44);box-shadow:inset 0 1px #fff1;transition:transform .2s,background .4s,box-shadow .4s}.power:not(:disabled):active{transform:scale(.9)}.running .power{background:linear-gradient(140deg,#b9efff,var(--blue) 60%,#58a9d3);box-shadow:0 0 28px #62d4ff3b,inset 0 1px #ffffff99}.heating.running .power{background:linear-gradient(140deg,#fff0da,#ffc38c 60%,#dc9662);box-shadow:0 0 28px #ffc38c33}.visual{height:185px;padding-top:45px}.ac{height:78px;width:80%;border-radius:15px 15px 21px 21px;box-shadow:0 22px 22px #0006,inset 0 2px 2px #fff}.artcool .ac{background:linear-gradient(165deg,#72838a 0%,#24313c 21%,#162029 45%,#3b4d5a 72%,#101820);border-color:#96b4c53b}.air-stream{top:123px}.target{font-size:80px;font-weight:300}.degree{font-size:24px}.temperature-controls{gap:18px}.slider{height:15px;background:linear-gradient(90deg,#3476e8,var(--blue) var(--fill,50%),#879aaf15 var(--fill,50%));box-shadow:inset 0 2px 4px #0005}.slider::-webkit-slider-thumb{width:29px;height:29px;border:3px solid #eefaff;box-shadow:0 3px 8px #0006,0 0 18px #8ecfff35;transition:transform .15s,box-shadow .15s}.slider:active::-webkit-slider-thumb{transform:scale(1.17);box-shadow:0 4px 12px #0007,0 0 23px #8ecfff55}.slider::-moz-range-thumb{width:26px;height:26px;border:2px solid #eefaff;box-shadow:0 3px 8px #0006}.minus,.plus{width:45px;height:45px;background:linear-gradient(150deg,#a9bed013,#4e677006);box-shadow:inset 0 1px #fff1;transition:transform .15s}.minus:active,.plus:active{transform:scale(.9)}.control{border-radius:17px;background:linear-gradient(150deg,#a2c7e60b,#a2c7e604);padding:17px}.control select{font-size:13px}.quick-controls{gap:12px}.detail-trigger{display:block;width:100%;border:0;border-top:1px solid var(--line);margin-top:15px;padding:16px 0 1px;background:none;color:#9bb6ce;font-size:10px;letter-spacing:.4px;text-align:center}.detail-trigger:hover{color:#e0f5ff}.card .extras{overflow:hidden}.card .extras[open] .extra-fields{animation:panelIn .22s ease-out}.blind-card{background:radial-gradient(ellipse at 90% 0,#d2b47b0b,transparent 55%),linear-gradient(135deg,#29384680,#172430b8 50%,#111b28);--blue:#e2c594}.blind-sliders .slider{background:linear-gradient(90deg,#a58457,var(--blue) var(--fill,50%),#879aaf15 var(--fill,50%))}.blind-symbol{width:48px;height:48px;border:1px solid #dec29828;border-radius:15px;display:grid;place-items:center;background:#dec29809;font-size:29px}.blind-visual{height:182px;margin:30px auto 22px;width:68%}.window-sky{background:linear-gradient(130deg,#6790a57a,#162837 70%),linear-gradient(#e9d5a81a,#0000)}.window-frame{border-color:#4b5b68;box-shadow:0 22px 28px #0007,inset 0 0 0 2px #8ea1aa66}.slat-pack i{flex-basis:12px;background:linear-gradient(#cbd2d3,#8898a3 65%,#596f80);border-bottom-color:#243743}.blind-readouts strong{font-size:38px}.blind-buttons button{padding:15px 7px;transition:transform .15s,background .15s}.blind-buttons button:active{transform:scale(.96);background:#ffffff0d}.group-controls .quiet{border-radius:11px;min-height:36px}.device-dialog{padding:17px 18px 20px;background:#0c1725;border:1px solid #7898b24d;border-radius:29px;width:560px;max-width:calc(100vw - 24px);max-height:92dvh;overflow:auto;box-shadow:0 25px 100px #000a;color:var(--text)}.device-dialog::backdrop{background:#020915b8;backdrop-filter:blur(9px)}.sheet-handle{height:4px;width:38px;background:#62788c66;margin:0 auto 13px;border-radius:3px}.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:0 7px 13px;color:var(--muted);font-size:9px;letter-spacing:2px}.sheet-close{border:1px solid var(--line);border-radius:50%;width:35px;height:35px;background:#ffffff05;font-size:15px}.device-dialog[open]{animation:sheetIn .3s cubic-bezier(.2,.7,.2,1)}.device-dialog .card{margin:0;box-shadow:none;animation:none}.device-dialog .detail-trigger{display:none}.device-dialog .extras .extra-fields{grid-template-columns:1fr 1fr}.room-dialog[open]{animation:sheetIn .23s ease-out}.room-dialog .primary{min-height:48px}.quiet:active{transform:scale(.97)}#toast{background:#182c40eb;backdrop-filter:blur(20px);border-color:#7bb9df42;animation:toastIn .2s ease-out;padding:17px 24px;border-radius:18px}footer{margin-top:33px}.room-tile:focus-visible{outline-offset:0}@keyframes sheetIn{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}@keyframes panelIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}@keyframes toastIn{from{opacity:0;margin-bottom:-8px}to{opacity:1;margin-bottom:0}}@media(min-width:1050px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.card{padding:23px 22px 16px}.room-name{font-size:20px;max-width:210px}.target{font-size:73px}.visual{height:170px}.ac{height:70px;width:85%}.air-stream{top:115px}.quick-controls{gap:9px}.control{padding:14px}.blind-visual{height:163px;width:73%}.temperature-controls{gap:12px}.minus,.plus{width:39px;height:39px}.device-dialog .room-name{font-size:25px}.device-dialog .ac{width:80%;height:78px}.device-dialog .visual{height:185px}.device-dialog .air-stream{top:123px}}@media(max-width:740px){.shell{padding:0 17px}.intro{padding-top:29px}.intro h1{font-size:31px}.room-rail{gap:10px;margin-bottom:23px}.room-tile{flex:0 0 151px;min-width:151px;padding:17px}.room-title{font-size:12px}.room-devices{font-size:9px}.room-metric{font-size:24px}.card{padding:24px 24px 17px}.home-bar{gap:8px}.home-bar>.quiet{font-size:9px}.view-switch button{padding:11px 12px}.device-dialog{position:fixed;top:auto;bottom:0;margin:0;width:100vw;max-width:100vw;max-height:94dvh;border-radius:27px 27px 0 0;padding-bottom:max(20px,env(safe-area-inset-bottom));border-bottom:0}.device-dialog .card{padding:21px;border-radius:22px}.sheet-close{width:42px;height:42px}.blind-visual{height:179px}.detail-trigger{min-height:39px}.group-controls .quiet{min-height:40px}.room-assignment select{min-height:35px}.quiet{min-height:38px}.power{width:56px;height:56px}}@media(prefers-reduced-motion:reduce){.room-tile,.slider::-webkit-slider-thumb{transition:none}.device-dialog[open],.room-dialog[open],#toast{animation:none}}
/* Approved Atmos concept — native, lightweight device illustrations. */
header{border-bottom:1px solid #95bce71a}.brand{letter-spacing:-1.5px}.intro h1{font-weight:600;letter-spacing:-1.4px}.intro .eyebrow{color:#7f9cb6}.intro p{color:#a2b7ca}.room-tile{border-radius:16px}.room-tile.selected{border-color:#64bdffb3;box-shadow:inset 0 0 24px #359eff15,0 0 18px #248eff12}.view-switch .active{background:linear-gradient(135deg,#2366a566,#10305b);box-shadow:inset 0 0 0 1px #55b4ff70,0 0 15px #247afa15}.card{border-color:#91b8d43b;background:linear-gradient(135deg,#122334,#091420 78%)}.card.running{background:radial-gradient(ellipse at 65% 25%,#0e639724,transparent 60%),linear-gradient(135deg,#132a3e,#091420 78%)}.card-head{gap:12px}.model{line-height:1.7}.visual{height:210px;padding-top:40px}.ac{width:94%;height:102px}.artcool .ac{border-radius:13px 13px 23px 23px;border:1px solid #bacbd54d;background:linear-gradient(150deg,#84939e 0%,#364554 6%,#080f18 34%,#121e2c 64%,#02070e 100%);box-shadow:inset 0 2px 2px #e1edf778,inset 6px 0 4px #b7c4ce22,inset -6px 0 4px #d9bf7a30,0 20px 28px #0009}.artcool .ac-shine{background:linear-gradient(145deg,#d6e1eb38 0%,#bbcddd15 43%,transparent 43.5%);inset:3px 5px 15px;border-radius:9px;border:1px solid #c7ddf41a}.artcool .ac-brand{font-size:8px;color:#a2afbf;top:22px}.artcool .ac-display{top:auto;bottom:21px;font-size:10px}.artcool .vent{left:5%;right:5%;bottom:6px;background:linear-gradient(#02050a,#162638);border-bottom-color:#7da9b8;height:8px}.artcool.running .vent{height:13px;box-shadow:0 4px 8px #53c8ff33}.air-stream{top:140px;left:17%;right:17%;height:75px;transform:perspective(90px) rotateX(12deg)}.air-stream i{width:3px;border-radius:50%;filter:blur(.7px);box-shadow:0 0 12px 3px #5fceff20}.temperature{justify-content:center;position:relative;gap:20px}.target{font-size:70px;letter-spacing:-3px;font-weight:450}.degree{color:#d9e6ef}.target-label{text-align:left;font-size:7px;letter-spacing:1.2px}.temperature-controls .slider{height:11px}.control{background:linear-gradient(140deg,#19334b88,#0a1521);border-color:#a1c9e62e;min-height:82px}.control label{color:#aabfce;font-size:11px}.control select{font-size:14px}.room-assignment{opacity:.8;margin-bottom:18px}.room-assignment select{max-width:74%}.blind-card{--blue:#f3ce89;background:radial-gradient(ellipse at 60% 35%,#a8752020,transparent 50%),linear-gradient(135deg,#142331,#0a1420 80%)}.blind-visual{width:86%;height:215px;margin:27px auto 23px}.window-sky{overflow:hidden;background:radial-gradient(ellipse at 63% 59%,#ffe7aa 0%,#e9b878 12%,transparent 38%),linear-gradient(#626e78,#c09d77 48%,#aa8852 68%,#23332e);box-shadow:inset 0 0 22px 9px #0008}.window-sky:before{content:'';position:absolute;inset:40% 0 0;background:radial-gradient(ellipse at 10% 45%,#182a26 0 16%,transparent 17%),radial-gradient(ellipse at 23% 52%,#283831 0 17%,transparent 18%),radial-gradient(ellipse at 91% 29%,#182a26 0 19%,transparent 20%),radial-gradient(ellipse at 76% 61%,#374735 0 18%,transparent 19%),linear-gradient(0deg,#182621 0,transparent 65%);filter:blur(2px)}.window-sky:after{content:'';position:absolute;bottom:0;left:20%;width:3px;height:48%;background:#1e2924;box-shadow:140px -15px #1e2924;transform:rotate(-4deg)}.window-frame{border:7px solid #3f3a31;border-radius:3px;box-shadow:0 12px 25px #0009,inset 0 0 0 2px #b79b654d,0 0 0 1px #bba27422}.window-frame:after{background:linear-gradient(90deg,#262b29,#756c53,#242a28);width:4px}.window-sill{background:linear-gradient(#a59370,#292d2c);height:6px;bottom:-3px;left:-3px;right:-3px}.slat-pack{left:7px;right:7px;top:7px;max-height:calc(100% - 14px);border-bottom:3px solid #d1b175;filter:drop-shadow(0 5px 4px #0008)}.slat-pack i{flex-basis:10px;background:linear-gradient(#3e3424 0%,#9f8150 15%,#e4c184 43%,#b08b50 63%,#4d3c25 94%);border-bottom:1px solid #1c1e1c;box-shadow:0 2px 3px #0009;transform-origin:center}.slat-pack:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 17%,#29271799 17.5%,#e9c68966 18%,transparent 18.5%,transparent 81%,#29271799 81.5%,#e9c68966 82%,transparent 82.5%)}.blind-sliders .slider{height:11px;background:linear-gradient(90deg,#c19451,var(--blue) var(--fill,50%),#879aaf15 var(--fill,50%))}.blind-sliders .slider::-webkit-slider-thumb{border-color:#fff9ed;box-shadow:0 2px 9px #0008,0 0 13px #f9c67933}.blind-readouts strong{font-size:34px;font-weight:450;letter-spacing:-1px}.blind-sliders small{font-size:9px;line-height:1.5}.blind-buttons button{min-height:52px;border-color:#8fa9ba3b;background:linear-gradient(145deg,#23334266,#101a26);font-size:12px}.blind-buttons button:hover{border-color:#f2ce8966}.device-dialog{background:linear-gradient(145deg,#172838,#081321);border-color:#98badb66}.device-dialog .card{border:0;background:none;padding-top:10px}.device-dialog .room-assignment{display:none}.device-dialog .visual{height:210px}.device-dialog .ac{height:102px;width:94%}.device-dialog .air-stream{top:140px}.device-dialog .blind-visual{width:82%;height:260px}.device-dialog .blind-readouts strong{font-size:39px}.device-dialog .sheet-head{font-size:10px}.device-dialog .sheet-close{border:0;background:transparent;font-size:20px}.device-dialog .sheet-handle{background:#7c93b26b;width:44px}.device-dialog .slider{height:12px}.device-dialog .blind-buttons button{min-height:58px}
@media(min-width:1100px){.device-section[data-room-id]>.grid{grid-template-columns:1.25fr 1fr 1fr}.device-section[data-room-id] .blind-visual{height:210px}.room-tile{max-width:none;min-width:150px}.room-name{font-size:22px}.visual{height:210px}.air-stream{top:140px}.ac{height:102px}.card{padding:25px 23px 18px}}
@media(max-width:740px){.intro h1{font-size:30px}.room-tile{flex-basis:151px;min-width:151px}.room-title{font-size:13px}.room-devices{font-size:10px}.room-name{font-size:24px}.card{padding:23px 22px 17px}.visual{height:203px}.ac{height:95px}.air-stream{top:132px}.target{font-size:74px}.blind-visual{height:224px;width:85%}.blind-readouts strong{font-size:36px}.blind-sliders label{font-size:13px}.blind-sliders small{font-size:10px}.detail-trigger{font-size:12px;min-height:44px}.group-controls .quiet{min-height:44px}.power{width:56px;height:56px}.device-dialog{padding-left:12px;padding-right:12px}.device-dialog .blind-visual{height:230px}.device-dialog .card{padding-left:14px;padding-right:14px}}
/* Four device cards per row on desktop, including room groups. */
@media(min-width:1200px){
 .shell{max-width:1680px}
 .device-section>.grid,.device-section[data-room-id]>.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
 .device-section>.grid>.card{min-width:0;padding:23px 18px 17px}
 .device-section .card-head>div{min-width:0}
 .device-section .room-name{max-width:100%;font-size:20px}
 .device-section .power{width:47px;height:47px;font-size:26px}
 .device-section .temperature{gap:12px}
 .device-section .target{font-size:64px}
 .device-section .degree{font-size:21px;margin-left:5px}
 .device-section .temperature-controls{gap:10px}
 .device-section .control{padding:12px}
 .device-section .blind-readouts strong{font-size:30px}
 .device-section .blind-sliders small{float:none;display:block;margin-top:5px}
 .device-section .blind-buttons button{font-size:10px}
}