:root{color-scheme:dark;font-family:Inter,Arial,sans-serif;background:#0b1015;color:#edf1f4}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #99e3b2;outline-offset:4px}header{height:76px;border-bottom:1px solid #263039;display:flex;align-items:center;padding:0 34px;gap:28px}.brand{font-size:18px;letter-spacing:3px;font-weight:700;display:flex;align-items:center;gap:7px}.thin{font-weight:400;color:#85939e}.logo{display:grid;place-items:center;width:34px;height:34px;background:#b3e4b1;color:#0b1015;transform:skew(-10deg);border-radius:7px;letter-spacing:0}.demo{font-size:13px;color:#d5b86a;border:1px solid #49402b;padding:7px 11px;border-radius:20px}.time{margin-left:auto;color:#7d8a95;font-size:14px}main{display:grid;grid-template-columns:minmax(0,1fr) 340px;max-width:1800px;margin:auto}.workspace{padding:30px 30px 0;min-width:0}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}small{font-size:12px}.heading small{color:#83949f;letter-spacing:2px}h1{font-size:27px;margin:9px 0;font-weight:500}h1 span{color:#7a8b98}button{border:1px solid #34414b;background:#19232b;color:#d2dce3;border-radius:6px;padding:8px 12px}.tabs{display:flex;background:#151d24;border:1px solid #29343d;border-radius:8px;padding:4px;gap:3px}.tabs button{border:0;background:none;min-width:46px}.tabs .active{background:#c0eab9;color:#182319}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}.metrics article{border:1px solid #29333b;border-radius:9px;background:#121a21;padding:17px}.metrics span{font-size:14px;color:#a0afb9}.metrics strong{display:block;font-size:30px;font-weight:500;margin:12px 0}.metrics em{font-style:normal;font-size:15px;color:#8ea0ac}.metrics small{color:#697d8b}#scene{height:clamp(400px,53vh,700px);position:relative;background:radial-gradient(ellipse at center,#202e3a,#101820);border:1px solid #2b3944;border-radius:12px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}.scene-label{position:absolute;top:23px;left:23px;font-size:13px;letter-spacing:1px;pointer-events:none}.scene-label small{display:block;color:#8396a4;margin:8px 0 0 17px;letter-spacing:0}.dot{display:inline-block;width:7px;height:7px;background:#a2dda6;border-radius:50%;margin-right:7px}.scene-tools{position:absolute;right:17px;top:18px;display:flex;gap:7px}.scene-tools button{background:#111c26cc;font-size:13px}.legend{position:absolute;left:23px;bottom:48px;display:flex;gap:10px;font-size:12px;color:#94a5b0;align-items:center}.legend i{width:7px;height:7px;border-radius:2px;background:#ead797}.legend i:nth-of-type(2){background:#82c6df}.legend i:nth-of-type(3){background:#8994ea}.help{position:absolute;bottom:19px;left:23px;font-size:12px;color:#718a9a;pointer-events:none}.bottom{display:flex;justify-content:space-between;padding:20px 2px;font-size:12px;color:#a3b2bb}.muted{color:#657985}.signature{font-style:italic;color:#bba476;white-space:nowrap}aside{border-left:1px solid #263039;background:#10171d;padding:29px 20px}.aside-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.aside-title h2{font-size:20px;font-weight:500;margin:0}.aside-title span{color:#697e8c;font-size:12px}.device{padding:18px 16px;border:1px solid #2a353e;border-radius:9px;margin-bottom:13px;background:#141e26}.device.selected{border-color:#87b993;background:#19272b}.device-head{display:flex;align-items:center;gap:12px}.icon{color:#b9d8c2;font-size:25px;width:25px;text-align:center}.device-head h3{margin:0 0 5px;font-size:15px;font-weight:500}.device-head small{color:#7d939f}.toggle{padding:0;margin-left:auto;min-width:34px;width:34px;height:20px;border-radius:20px;background:#35424b;position:relative;border:0}.toggle:after{content:'';position:absolute;top:3px;left:3px;background:#ebf4eb;width:14px;height:14px;border-radius:50%;transition:left .2s}.toggle.on{background:#92c8a0}.toggle.on:after{left:17px}.range-title{display:flex;justify-content:space-between;margin:22px 0 9px;font-size:13px;color:#8da3b0}.range-title b{color:#d2e9d9;font-weight:500}input[type=range]{width:100%;accent-color:#b7e4bf;height:5px;cursor:pointer}.range-ends{display:flex;justify-content:space-between;font-size:12px;color:#607c8b;margin-top:8px}.water-status{font-size:13px;color:#96afbd;margin:20px 0 12px}.water-button{width:100%;font-size:13px;background:#243945;border-color:#3a5666}.water-note{display:block;color:#698591;font-size:12px;line-height:1.5;margin-top:8px}.target{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#91a8b6;margin-top:22px}.target div{display:flex;align-items:center;gap:8px}.target button{padding:3px 7px}.target b{font-weight:500;color:#d9e4e9}.selection{padding:15px 4px;color:#6d8b9c}.selection small{letter-spacing:1.5px}.selection strong{display:block;font-size:16px;color:#b7cbd7;margin:10px 0}.selection span{font-size:13px;line-height:1.6}#fallback{position:absolute;top:40%;padding:30px;color:#dae2e8;text-align:center}@media(max-width:1100px){main{grid-template-columns:minmax(0,1fr) 300px}.workspace{padding:25px 20px 0}.metrics article{padding:12px}.metrics strong{font-size:25px}.scene-tools{top:70px}}@media(max-width:800px){header{padding:0 18px;height:66px;gap:15px}.time{display:none}.brand{font-size:14px;letter-spacing:2px}.demo{font-size:12px}main{display:block}.workspace{padding:22px 16px 0}h1{font-size:23px}.metrics{grid-template-columns:repeat(2,1fr)}.metrics article{padding:14px}.metrics strong{margin:8px 0}#scene{height:440px}aside{border-left:0;border-top:1px solid #263039;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:22px 16px}.aside-title,.selection{grid-column:1/-1}.device{margin:0}.device-head{gap:7px}.target{display:block}.target div{margin-top:10px}.muted{display:none}.help{max-width:85%;line-height:1.5;bottom:13px}.legend{bottom:54px}}@media(max-width:450px){aside{grid-template-columns:1fr}.device{padding:18px}.demo{border:0;padding:0;font-size:11px}.heading small{font-size:11px}.scene-label{left:16px}.scene-tools{right:12px}.legend{left:16px}.help{left:16px}}

.photos-open{width:100%;margin:5px 0 10px;background:#243945;border-color:#3a5666;font-size:14px}#plant-photos{padding:16px;border:1px solid #425664;border-radius:12px;background:#101a22;color:#e9eff3;width:min(650px,94vw);max-height:94dvh}#plant-photos::backdrop{background:#040a10d9}.photo-header,.photo-footer{display:flex;align-items:center;justify-content:space-between;gap:15px}.photo-header{margin-bottom:12px}.photo-header h2{font-size:17px;font-weight:500;margin:0}.photo-header button,.photo-footer button{font-size:14px}#plant-photo{display:block;width:100%;height:calc(88dvh - 130px);object-fit:contain;background:#080e13}.photo-footer{margin-top:12px}.photo-footer span{font-size:14px;color:#a9bdca}@media(max-width:800px){.photos-open{grid-column:1/-1}} 

/* Independent desktop control-panel scrolling. */
@media(min-width:801px){aside{position:sticky;top:0;align-self:start;height:min(780px,calc(100dvh - 76px));overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:#526d7c #10171d;scrollbar-gutter:stable}aside::-webkit-scrollbar{width:8px}aside::-webkit-scrollbar-track{background:#10171d}aside::-webkit-scrollbar-thumb{background:#526d7c;border-radius:8px;border:2px solid #10171d}aside:focus-visible{outline:2px solid #99e3b2;outline-offset:-3px}}

.water-duration-label{font-size:14px;color:#91a8b6;margin:14px 0 8px}.water-duration{display:flex;gap:7px;margin-bottom:12px}.water-duration button{flex:1;min-height:38px;padding:8px 5px;font-size:14px}.water-duration button.active{background:#b7e4bf;color:#182319;border-color:#b7e4bf}.water-duration button:disabled{opacity:.65;cursor:default}.water-button:disabled{opacity:.65;cursor:default}

.vacuum-actions{display:flex;gap:8px;margin-top:9px}.vacuum-actions button{flex:1;font-size:14px;padding:9px 6px}.vacuum-actions button:disabled{opacity:.45;cursor:default}

.sensor-popover{position:absolute;z-index:4;width:236px;max-width:calc(100% - 16px);padding:14px;background:#101d25f5;border:1px solid #8cbaa1;border-radius:10px;box-shadow:0 10px 30px #0006}.sensor-popover[hidden]{display:none}.sensor-popover-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}.sensor-popover h3{margin:0;font-size:14px;font-weight:500}.sensor-popover-heading button{padding:2px 7px;font-size:20px;line-height:1.1}.sensor-reading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:9px 0;font-size:14px;color:#a7bdc9}.sensor-reading strong{font-size:18px;color:#e8f3eb;font-weight:500}.sensor-popover small{display:block;margin-top:13px;color:#8198a6;font-size:12px;line-height:1.5}.sensor-shortcuts{display:flex;gap:8px;margin-top:10px}.sensor-shortcuts button{font-size:14px}.sensor-shortcuts button[aria-expanded=true]{border-color:#8cbaa1;background:#233831}