@font-face{font-family:SUIT;font-weight:400;src:url(/assets/fonts/suit/SUIT-Regular.woff2) format("woff2");font-display:swap}@font-face{font-family:SUIT;font-weight:500;src:url(/assets/fonts/suit/SUIT-Medium.woff2) format("woff2");font-display:swap}@font-face{font-family:SUIT;font-weight:600;src:url(/assets/fonts/suit/SUIT-SemiBold.woff2) format("woff2");font-display:swap}@font-face{font-family:SUIT;font-weight:700;src:url(/assets/fonts/suit/SUIT-Bold.woff2) format("woff2");font-display:swap}:root{--shadow-color: 220 3% 15%;--shadow-strength: 1%;--shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));--shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));--shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));--inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));--inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%))}.highlight{position:relative}.highlight:before{background-color:#5c7cfa66;content:"";position:absolute;width:calc(100% + 4px);height:40%;left:-2px;bottom:0;z-index:-1;-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}.highlight.warning:before{background-color:#f08c0066}.highlight.danger:before{background-color:#e0313166}body{background-color:#fcfcfc}body{font-family:SUIT,sans-serif;color:#212529;word-break:keep-all}body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}body>.frame{position:relative;max-width:100vw}@media (min-width: 576px){body>.frame{max-width:576px}}body>.frame>.content{margin-top:120px}a{color:#000;text-decoration:none}section{padding:0 1em;margin:4em 0}section>.header{margin-bottom:2em;font-size:1.2rem;font-weight:600}header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:0 1em;position:fixed;top:0;width:100%;background-color:#fff6;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid #f1f3f5}header .backdrop{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:60px;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}header .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;gap:8px}header .container .title{font-size:1.2rem;font-weight:700}header .container .sub{font-size:.9rem;color:#868e96}section.reserved{text-align:center;margin-top:9em;margin-bottom:8em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}section.reserved .section{margin-bottom:8px}section.reserved .section .current{font-size:.9rem;color:#868e96;margin-bottom:2px}section.reserved .energy .number{font-size:2rem;font-weight:700}section.reserved .energy .wh{margin-left:2px;font-size:1.2rem;font-weight:700}section.reserved .check{margin:2em 0}section.reserved .check .container{margin:.6em 0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:6px}section.reserved .check .container .circle{border-radius:50%;width:20px;height:20px;background-color:#5c7cfa}section.reserved .check .container .circle svg{width:1em;height:1em;margin-top:2px;margin-left:2px;display:inline-block}section.reserved .start-stop{margin-top:4em}section.graph{margin-bottom:0}section.compare{margin-top:2em}section.compare .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin:1em;font-size:1rem}section.compare .container .header{color:#495057}section.compare .container .value .number{font-weight:700;font-size:1.4rem}section.compare .container .value .wh{color:#868e96;font-weight:600}section.devices select{margin-bottom:2em}section.devices .container{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:1.4em 1em}section.devices .header-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:12px;margin-bottom:2em}section.devices .header-container .header{font-size:1.2rem;font-weight:600}section.devices .card{text-align:left;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;background-color:#f8f9fa;border:1px solid #dee2e6;padding:1.2em 1em;border-radius:18px;aspect-ratio:1.4;position:relative;overflow:hidden;-webkit-box-shadow:var(--shadow-2);box-shadow:var(--shadow-2);cursor:pointer;-webkit-transition:background-color .1s,border .1s;transition:background-color .1s,border .1s}section.devices .card:active{-webkit-animation:press .1s;animation:press .1s}@-webkit-keyframes press{0%{-webkit-transform:scale(100%) translateY(0);transform:scale(1) translateY(0)}25%{-webkit-transform:scale(98%) translateY(4px);transform:scale(98%) translateY(4px)}to{-webkit-transform:scale(100%) translateY(0);transform:scale(1) translateY(0)}}@keyframes press{0%{-webkit-transform:scale(100%) translateY(0);transform:scale(1) translateY(0)}25%{-webkit-transform:scale(98%) translateY(4px);transform:scale(98%) translateY(4px)}to{-webkit-transform:scale(100%) translateY(0);transform:scale(1) translateY(0)}}section.devices .card.active{color:#228be6;background-color:#edf2ff;border:1px solid #91a7ff}section.devices .card:not(.active) .name{color:#868e96}section.devices .card .name{font-weight:700;font-size:1.2rem;margin-bottom:6px}section.devices .card .status{color:#868e96;font-size:.8rem}section.devices .card .icon{position:absolute;right:-4px;bottom:-12px;width:50%}section.devices .card .icon img{width:100%}section.devices .card:not(.active) .icon img{-webkit-filter:grayscale(80%);filter:grayscale(80%)}section.devices .card:not(.active) .spending{color:#868e96}section.devices .card .spending .number{font-weight:600}section.devices .card .spending .wh{font-size:.7rem}section.more{margin:8em 0}section.more .container{min-height:200px;margin:0 1em}section.more .container .box{color:#f8f9fa;padding:2.4em 1.8em;width:100%;height:100%;border-radius:14px;background-color:#212529;-webkit-box-shadow:0px 0px 80px 2px #495057;box-shadow:0 0 80px 2px #495057}section.more .container .box .sub{color:#adb5bd}section.more .container .box .title{font-size:1.8rem;margin:.6em 0;font-weight:700;line-height:140%}section.more .container .box .button-box{margin-top:3.5em}section.more .container .box .button-box a.button{background-color:#f8f9fa;margin:4em 0;padding:.5em 1.2em;border-radius:4px;font-weight:700;-webkit-transition:background-color .1s;transition:background-color .1s}section.more .container .box .button-box a.button:hover{background-color:#e9ecef}footer .container{color:#868e96;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:3em 0;padding:0 3em;gap:10px}footer .container a{display:block;color:#868e96;border-bottom:1px dashed #000}
