.demo-body{position:relative;isolation:isolate;min-height:100svh;background:var(--night)}.demo-scene,.demo-scene img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.demo-scene img{object-fit:cover;object-position:50% 50%}.demo-body:before{position:absolute;content:"";inset:0;z-index:-1;background:linear-gradient(90deg,#07101b10,#07101b30)}.demo-nav{padding:16px 26px;display:flex;align-items:center;gap:28px}.demo-nav img{display:block;width:195px;height:55px;object-fit:contain}.demo-nav>span{font-size:17px;font-weight:600;text-shadow:0 2px 5px #000}.demo-nav>.button{margin-left:auto;font-size:14px;min-height:42px}.demo-stage{display:flex;justify-content:flex-end;align-items:flex-start;padding:0 24px 34px;min-height:0}.cfd-device{width:550px;max-width:100%;padding:18px;border-radius:18px;background:linear-gradient(140deg,#1c2c3bef,#08131af5);box-shadow:0 20px 70px #0005}.device-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:16px}.device-head h1{font-size:22px;margin:0;letter-spacing:-.035em;white-space:nowrap}.pills{display:flex;gap:6px}.pills span{font-size:9px;border-radius:20px;background:#244254;padding:3px 8px;color:#b9e6fa;white-space:nowrap}.pills span:first-child{background:#167b53;color:white}.cfd-device .tabs{padding:0;border:1px solid #7592a566;border-radius:11px;margin-bottom:16px}.tabs button{width:50%;display:flex;gap:9px;align-items:center;justify-content:center;padding:9px;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--muted);cursor:pointer;font-size:14px;min-height:40px}.tabs button[aria-selected=true]{background:#087c53b3;border-color:var(--green);color:white;box-shadow:0 0 16px #3dbb6a25}.tabs .ico{width:20px;height:20px}.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.zone{display:flex;align-items:center;gap:10px;padding:12px 10px;background:#ffffff08;border:1px solid #8299aa66;color:var(--white);border-radius:10px;min-height:65px;text-align:left;cursor:pointer}.zone .ico{width:27px;height:27px;color:var(--muted)}.zone strong{font-size:12px;font-weight:600;white-space:nowrap}.zone small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.ring{width:20px;height:20px;border:2px solid #7490a3;border-radius:50%;margin-left:auto;flex:none}.zone[aria-checked=true]{border-color:#49e995;background:#167c5033;box-shadow:inset 0 0 16px #3dbb6a30,0 0 10px #3dbb6a20}.zone[aria-checked=true] .ico,.zone[aria-checked=true] small{color:#65f2aa}.zone[aria-checked=true] .ring{border-color:#50e8a0;border-top-color:#305e58}.cfd-device .actions{margin:14px 0 12px}.cfd-device .button{border-radius:10px;min-height:43px;font-size:13px}.cfd-device .primary{background:#42df91}.cfd-device .outline{background:#33495b44;border-color:#7e98aa66}.cfd-device .actions .ico{width:19px;height:19px}.schedule-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}.schedule-tiles>div{display:flex;align-items:center;gap:16px;background:#ffffff09;border:1px solid var(--line);border-radius:10px;padding:9px 15px}.schedule-tiles span{color:var(--muted);font-size:12px;line-height:1.4}.schedule-tiles strong{display:block;color:var(--white);font-size:15px;font-weight:600}.schedule-tiles .ico{color:#cadbe6}.week-label{margin:10px 0 6px;font-size:13px}.week{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.week>div{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 2px;border:1px solid var(--line);background:#ffffff08;border-radius:9px;font-size:11px}.week .ico{width:19px;height:19px;color:#63e5a4}.week small{font-size:10px;white-space:nowrap}.season{display:flex;align-items:center;gap:18px;font-size:13px;margin:14px 0 0;white-space:nowrap}.season input{accent-color:#6de5a8;min-width:0;flex:1;width:100%;cursor:pointer}.season output{min-width:40px;text-align:right;font-weight:650;font-size:16px}.duration{font-size:10px;color:var(--muted);margin:2px 0 9px}.local-row{display:flex;gap:15px;align-items:center;padding:10px 12px;border:1px solid var(--line);background:#19374644;border-radius:10px;font-size:12px}.local-row small{display:block;color:var(--muted);font-size:11px}.alert-box{border:1px solid #7d9bad70;border-radius:10px;padding:10px 14px;margin-top:12px;background:#1a334333;display:flex;flex-direction:column;line-height:1.45;min-height:84px}.status-label{font-size:11px;color:var(--aqua);margin-bottom:3px}.alert-box strong{font-size:14px;font-weight:550}.alert-box small{font-size:11px;color:var(--muted);margin-top:3px}.alert-box.danger{border-color:var(--red);background:#9c263520}.alert-box.danger .status-label{color:var(--red)}.earlier{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted);padding:9px 12px;border:1px solid var(--line);border-radius:9px;margin-top:10px}.earlier span{color:var(--white)}.alert-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.alert-buttons button{font-size:11px;min-height:40px;border:1px solid #7e98aa66;background:#ffffff08;color:var(--white);border-radius:9px;cursor:pointer;padding:6px}.alert-buttons button:hover,.zone:hover{background:#ffffff13}.notifications{display:flex;justify-content:space-between;gap:7px;align-items:center;margin-top:18px;font-size:12px}.notifications button{display:flex;gap:7px;align-items:center;border:0;padding:5px 0;background:transparent;color:var(--white);font-size:11px;cursor:pointer;min-height:38px}.check{display:grid;place-items:center;width:20px;height:20px;border:1px solid #7592a5;border-radius:5px}.notifications [aria-checked=true] .check{background:#43e898;color:#082319;border-color:#43e898}.notifications [aria-checked=true] .check:after{content:"✓";font-weight:bold}.example{display:block;background:transparent;border:0;color:var(--aqua);text-decoration:underline;text-underline-offset:3px;font-size:11px;margin:7px 0 0 auto;padding:5px;cursor:pointer;min-height:30px}.caption{position:absolute;left:24px;bottom:24px;max-width:620px;width:calc(100% - 620px);padding:14px 18px;background:#14232edb;border:1px solid #bdd6e34a;border-radius:16px;backdrop-filter:blur(16px);font-size:12px;line-height:1.5}.caption strong{font-weight:550}.caption p{color:#d2dce2;font-size:11px;margin-top:4px}#pool-panel{padding:24px 2px 28px;min-height:650px}#pool-panel h2{font-size:30px}.pool-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.pool-stats>div{border:1px solid var(--line);border-radius:10px;padding:14px;font-size:12px;color:var(--muted)}.pool-stats strong{display:block;color:var(--aqua);font-size:19px;margin-top:10px}#pool-panel p{color:var(--muted);font-size:15px;margin-bottom:25px}dialog{background:var(--slate);color:var(--white);border:1px solid #91d9d777;border-radius:20px;max-width:450px;width:calc(100% - 32px);padding:24px}dialog::backdrop{background:#020b12ba;backdrop-filter:blur(7px)}dialog h2{font-size:32px;margin-top:20px}dialog p{margin:15px 0}dialog small{color:var(--muted);display:block}dialog form{margin-top:24px}
@media(min-width:1700px){.demo-stage{padding-right:5vw}.cfd-device{width:570px}.demo-nav{padding-inline:4vw}}@media(max-width:1000px){.demo-nav>span{display:none}.caption{position:static;margin:0 24px 24px;max-width:none;width:calc(100% - 48px)}.demo-stage{padding-top:20px}.cfd-device{width:550px}.demo-body{padding-bottom:1px}}@media(max-width:650px){.demo-scene{height:290px}.demo-scene img{object-position:50% 48%}.demo-nav{padding:14px 18px;gap:12px}.demo-nav img{width:145px;height:48px}.demo-nav>.button{font-size:12px;padding:8px 17px;min-height:40px}.demo-stage{padding:175px 0 0}.cfd-device{width:100%;border-radius:22px 22px 0 0;padding:18px 15px 20px;border-inline:0}.device-head{align-items:flex-start;flex-direction:column;gap:9px}.device-head h1{font-size:23px}.pills span{font-size:9px}.zones{grid-template-columns:repeat(2,1fr);gap:9px}.zone{min-height:70px}.zone strong{font-size:12px}.week{gap:4px}.week small{font-size:8px}.season{gap:12px;font-size:12px}.schedule-tiles{gap:9px}.schedule-tiles>div{padding:10px;gap:10px}.schedule-tiles strong{font-size:13px}.alert-buttons{grid-template-columns:repeat(3,1fr)}.alert-buttons button{min-height:44px}.notifications{flex-wrap:wrap;justify-content:flex-start;column-gap:17px}.notifications>span{width:100%}.notifications button{font-size:12px;min-height:44px}.caption{margin:0;width:100%;border-radius:0;border-inline:0;padding:20px 17px;background:var(--night)}.earlier{flex-direction:column;gap:2px}.season input{min-height:34px}.pool-stats{gap:7px}.pool-stats>div{padding:10px 6px}.pool-stats strong{font-size:15px}}