@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(./bricolage-grotesque-vietnamese-wght-normal-BUzh504Q.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(./bricolage-grotesque-latin-ext-wght-normal-CcLUaPy7.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Bricolage Grotesque Variable;font-style:normal;font-display:swap;font-weight:200 800;src:url(./bricolage-grotesque-latin-wght-normal-DLoelf7F.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{color-scheme:light;--sun: #eeb868;--steel: #456990;--teal: #49beaa;--mint: #49dcb1;--coral: #e2856e;--color-generation: #eeb868;--color-consumption: #456990;--color-battery: #49beaa;--color-grid-import: #e2856e;--color-export: #49dcb1;--color-now-marker: #1b2b3c;--ink-generation: #a56f12;--ink-consumption: #456990;--ink-battery: #23907d;--ink-import: #b9563d;--ink-export: #1f8e73;--color-ink: #1b2b3c;--color-ink-muted: #5b7089;--color-rule: rgba(69, 105, 144, .16);--color-rule-strong: rgba(69, 105, 144, .32);--color-grid-line: rgba(69, 105, 144, .12);--color-surface: rgba(255, 255, 255, .88);--color-surface-edge: rgba(255, 255, 255, .9);--color-field: #ffffff;--shadow-surface: 0 24px 48px -24px rgba(27, 43, 60, .35), 0 1px 0 rgba(255, 255, 255, .6) inset;--shadow-annual: 0 24px 48px -20px rgba(69, 105, 144, .6);--radius-surface: 20px;--radius-field: 10px;--gap: 16px;--masthead-h: 108px;--today-w: clamp(660px, 50vw, 760px);--annual-w: clamp(600px, 48vw, 700px);--chart-h: clamp(160px, 21vh, 210px);--focus-ring: 3px solid var(--coral)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:Bricolage Grotesque Variable,Bricolage Grotesque,system-ui,sans-serif;font-variation-settings:"opsz" 14,"wdth" 100;font-size:15px;line-height:1.35;color:var(--color-ink);background:linear-gradient(180deg,#d9e6f2,#eef3f7 55%,#e9f4f0);-webkit-font-smoothing:antialiased}h1,h2,h3,p,dl,dd,fieldset{margin:0;padding:0}fieldset{border:none;min-width:0}button{font:inherit;color:inherit}input{font:inherit}.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}:focus-visible{outline:var(--focus-ring);outline-offset:2px}[hidden]{display:none!important}.section-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}#app{position:relative;min-height:100vh;min-height:100dvh}html,body{overflow-x:hidden}#scene{position:fixed;inset:0;z-index:0;background:transparent}.masthead{position:fixed;inset:0 0 auto;z-index:30;height:var(--masthead-h);padding:18px clamp(16px,3vw,32px) 0;pointer-events:none;background:linear-gradient(180deg,#eef3f7d9,#eef3f700)}.masthead__title{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variation-settings:"opsz" 96,"wdth" 100}.masthead__strapline{margin-top:6px;font-size:.92rem;color:var(--color-ink-muted);max-width:36ch}.today{z-index:10;--now-w: minmax(250px, 1fr);background:var(--color-surface);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--color-surface-edge);border-radius:var(--radius-surface);box-shadow:var(--shadow-surface);display:grid;grid-template-columns:var(--now-w) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"header header" "now now" "day house" "chart chart";min-width:0;overflow:hidden}.today__header{grid-area:header;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px 10px;border-bottom:1px solid var(--color-rule-strong)}.today__text{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-width:0;flex:1 1 auto}.today__title{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;line-height:1;font-variation-settings:"opsz" 96,"wdth" 100}.today__meta{font-size:.82rem;color:var(--color-ink-muted)}.today__reset{flex:0 0 auto;border:1px solid var(--steel);background:transparent;color:var(--steel);border-radius:999px;padding:6px 14px;font-size:.8rem;font-weight:600;cursor:pointer}.today__reset:hover{background:var(--steel);color:#fff}.today__now{grid-area:now;padding:10px 20px 9px;border-bottom:1px solid var(--color-rule-strong);min-width:0}.today__day{grid-area:day;padding:12px 18px 8px 20px;border-right:1px solid var(--color-rule);min-width:0;overflow-y:auto;overscroll-behavior:contain;container-type:inline-size}.today__house{grid-area:house;padding:12px 20px 8px 18px;min-width:0;overflow-y:auto;overscroll-behavior:contain;container-type:inline-size}.today__chart{grid-area:chart;padding:12px 20px 14px;border-top:1px solid var(--color-rule-strong);height:var(--chart-h);min-width:0}.results{z-index:40;display:flex;flex-direction:column;gap:8px;min-width:0}.annual{background:var(--steel);color:#fff;border-radius:var(--radius-surface);box-shadow:var(--shadow-annual);padding:14px 20px 12px;min-width:0;display:grid;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"title lead grid" "footer footer footer";column-gap:22px;align-items:start}@media(min-width:760px){.today{position:fixed;left:var(--gap);top:calc(var(--masthead-h) + var(--gap));bottom:var(--gap);width:var(--today-w)}.results{position:fixed;right:var(--gap);top:12px;width:var(--annual-w);max-height:calc(100vh - 24px);overflow-y:auto}}@media(max-width:759.98px){#app{display:flex;flex-direction:column;min-height:0;min-width:0}.masthead{position:static;height:auto;background:none;pointer-events:auto;padding:16px 16px 14px}#scene{position:relative;inset:auto;width:100%;height:44vh;flex:0 0 auto}.results{order:1;margin:12px 12px 0}.today{order:2;margin:12px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto;grid-template-areas:"header" "now" "day" "house" "chart"}.annual{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "lead" "grid" "footer"}.today__day{border-right:none;border-bottom:1px solid var(--color-rule)}.today__day,.today__house{overflow:visible;padding-left:18px;padding-right:18px}.today__chart{height:300px}}.readouts{display:flex;align-items:stretch;gap:0 14px;min-width:0}.readouts .section-title{margin:0;align-self:center;flex:0 0 auto;padding-right:4px}.readout{display:flex;flex-direction:column;gap:0;padding:0 0 0 18px;border-left:1px solid var(--color-rule);min-width:0}.readout--battery{flex:0 1 150px}.readout__label{font-size:.78rem;color:var(--color-ink-muted);max-width:12ch;flex:0 1 auto}.readout__value{font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96,"wdth" 100;white-space:nowrap}.readout__value--small{font-size:1rem;line-height:1.3}.readout--generation .readout__value{color:var(--ink-generation)}.readout--consumption .readout__value{color:var(--ink-consumption)}.readout--grid .readout__value{color:var(--color-ink-muted)}.readout--grid.readout--grid-import .readout__value{color:var(--ink-import)}.readout--grid.readout--grid-export .readout__value{color:var(--ink-export)}.readout--battery .readout__value{color:var(--ink-battery)}.readout--sun{margin-left:auto;align-self:center;text-align:right;font-size:.76rem;color:var(--color-ink-muted);max-width:12ch;flex:0 1 auto}.battery-bar{display:block;width:100%;height:6px;border-radius:999px;background:#45699024;overflow:hidden;margin-top:4px}.battery-bar__fill{display:block;height:100%;background:var(--teal);border-radius:inherit;transition:width .3s ease}@media(max-width:759.98px){.readouts{flex-wrap:wrap;gap:10px 18px}.readouts .section-title{flex-basis:100%}.readout--sun{margin-left:0;text-align:left;max-width:none;flex-basis:100%}}.annual__title{grid-area:title;font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:#ffffffd9;padding-top:4px}.annual__lead{grid-area:lead;padding-right:22px;border-right:1px solid rgba(255,255,255,.25)}.annual__lead .annual__value{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;line-height:.95;color:var(--sun);font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96,"wdth" 100}.annual__lead .annual__label{font-size:.82rem;margin-top:4px;white-space:nowrap}.annual__grid{grid-area:grid;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 16px;padding-top:2px}.annual__tile .annual__value{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96,"wdth" 100}.annual__tile .annual__label{font-size:.76rem;color:#ffffffc7;margin-top:3px}.annual__footer{grid-area:footer;display:flex;flex-wrap:wrap;gap:2px 16px;align-items:baseline;min-width:0}.annual__caption{flex:1 1 100%;min-width:0;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.25);font-size:.74rem;color:#ffffffc7}.methods-note{flex:1 1 100%;font-size:.76rem;color:#ffffffc7}.methods-note summary{cursor:pointer;font-weight:600;color:#fff}.methods-list{margin:8px 0 0;padding-left:16px;columns:2;column-gap:20px}.methods-list li{margin-bottom:4px;break-inside:avoid}@media(max-width:759.98px){.annual__lead{padding:8px 0;border-right:none}.annual__grid{padding:10px 0 0;border-top:1px solid rgba(255,255,255,.25)}.methods-list{columns:1}}.payback{background:var(--steel);color:#fff;border-radius:var(--radius-surface);box-shadow:var(--shadow-annual);padding:14px 20px 12px;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"title title" "text chart";gap:4px 22px;align-items:start}.payback__title{grid-area:title;font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:#ffffffd9}.payback__text{grid-area:text;min-width:0;width:270px}.payback__lead{font-size:1.05rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--sun)}.payback__sub{margin-top:2px;font-size:.82rem;color:#ffffffd9}.payback__chart{grid-area:chart;min-width:0;align-self:stretch}.payback-chart{display:block;width:100%;height:100%;min-height:96px;overflow:visible}.payback-chart__below{fill:var(--coral);opacity:.55}.payback-chart__above{fill:var(--mint);opacity:.55}.payback-chart__zero{stroke:#ffffff8c;stroke-width:1}.payback-chart__line{fill:none;stroke:#fff;stroke-width:1.75;stroke-linejoin:round}.payback-chart__marker{fill:var(--sun);stroke:var(--steel);stroke-width:1.5}.payback-chart__marker-label{font-size:10px;font-weight:700;fill:var(--sun)}.payback-chart__axis text{font-size:9px;fill:#ffffffb3}.cost-field{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.25)}.cost-field__label,.usage-field__label{display:block;font-size:.78rem;font-weight:600;margin-bottom:4px}.cost-field__row,.usage-field__row{display:flex;align-items:center;gap:6px}.cost-field__unit,.usage-field__unit{font-size:.82rem}.cost-field__input,.usage-field__input{width:6.5em;padding:4px 8px;border-radius:var(--radius-field);border:1px solid var(--color-rule-strong);background:var(--color-field);color:var(--color-ink);font-variant-numeric:tabular-nums;font-weight:600}.cost-field__reset{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:600;cursor:pointer}.cost-field__reset:hover{background:#ffffff26}.cost-field__hint{margin-top:4px;font-size:.72rem;color:#ffffffbf}.usage-field{margin-top:8px}@media(max-width:759.98px){.payback{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "text" "chart"}.payback__text{width:auto}}.controls__group{padding:8px 0;border-top:1px solid var(--color-rule);min-width:0}.controls__group-label,.segmented__legend{display:block;font-size:.82rem;font-weight:600;margin-bottom:6px}.controls__caption,.controls__hint{font-size:.76rem;color:var(--color-ink-muted);margin-top:5px}.controls__range{width:100%;accent-color:var(--steel);margin:4px 0 0}.controls__group--time .controls__range{accent-color:var(--sun)}.controls__group--battery .controls__range{accent-color:var(--teal)}.range-ticks{display:flex;justify-content:space-between;font-size:.7rem;color:var(--color-ink-muted);margin-top:2px}.section-title+.controls__group,.section-title+.segmented{border-top:none;padding-top:0}.section-title--day{margin-top:0}.today__day .segmented__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.today__day .segmented__option span{width:100%;justify-content:center;padding:4px 6px;font-size:.8rem}@container (min-width: 250px){.today__day .segmented__row{grid-template-columns:repeat(4,minmax(0,1fr))}}.panels-row{display:flex;align-items:center;gap:8px}.stepper-btn{width:28px;height:28px;flex:0 0 auto;border-radius:999px;border:1px solid var(--color-rule-strong);background:var(--color-field);color:var(--steel);font-size:1.1rem;line-height:1;cursor:pointer}.stepper-btn:disabled{opacity:.35;cursor:not-allowed}.stepper-btn:not(:disabled):hover{background:var(--steel);border-color:var(--steel);color:#fff}.panels-count{font-weight:600;font-variant-numeric:tabular-nums;font-size:.9rem}.segmented{padding:7px 0;border-top:1px solid var(--color-rule);min-width:0}.segmented__legend{float:left;width:100%;padding:0}.segmented__row{clear:both}.segmented__row{display:flex;flex-wrap:wrap;gap:6px}.segmented__option{position:relative}.segmented__input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.segmented__option span{display:inline-flex;align-items:center;padding:5px 12px;border-radius:999px;border:1px solid var(--color-rule-strong);background:var(--color-field);font-size:.82rem;font-weight:500;transition:background .15s ease,color .15s ease,border-color .15s ease}.segmented__option:hover span{border-color:var(--steel)}.segmented__input:checked+span{background:var(--steel);border-color:var(--steel);color:#fff}.segmented__input:focus-visible+span{outline:var(--focus-ring);outline-offset:2px}.dial{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"face range" "face label";align-items:center;column-gap:14px;row-gap:4px;min-width:0;width:100%}.dial__svg{grid-area:face;width:104px;aspect-ratio:1;touch-action:none;cursor:grab}.dial__svg:active{cursor:grabbing}.dial__ring{fill:var(--color-field);stroke:var(--color-rule-strong);stroke-width:1.5}.dial__tick{stroke:var(--color-rule-strong);stroke-width:1.5}.dial__tick--major{stroke:var(--steel);stroke-width:2.5}.dial__letter{font-size:14px;font-weight:700;fill:var(--steel)}.dial__needle{transition:transform .15s ease}.dial__roof{fill:var(--sun)}.dial__body{fill:var(--color-ink)}.dial__stem{stroke:var(--color-rule-strong);stroke-width:2}.dial__hub{fill:var(--color-ink)}.dial__range-row{grid-area:range;width:100%;min-width:0;align-self:end}.dial__range{width:100%;accent-color:var(--steel);margin:0}.dial__label{grid-area:label;font-size:.78rem;font-weight:600;text-align:left;color:var(--color-ink-muted);align-self:start}.controls__group--toggle{padding:8px 0;border-top:1px solid var(--color-rule)}.switch{display:flex;align-items:center;gap:10px;cursor:pointer;position:relative}.switch__input{position:absolute;opacity:0;width:1px;height:1px;margin:0}.switch__track{flex:0 0 auto;width:34px;height:20px;border-radius:999px;background:var(--color-rule-strong);position:relative;transition:background .15s ease}.switch__track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s ease}.switch__input:checked+.switch__track{background:var(--teal)}.switch__input:checked+.switch__track:after{transform:translate(14px)}.switch__input:focus-visible+.switch__track{outline:var(--focus-ring);outline-offset:2px}.switch__label{font-size:.82rem;font-weight:600}.switch-body{padding:4px 0 0 44px}.switch-body .usage-field{margin-top:4px}.switch-body .segmented{padding:8px 0 0;border-top:none}.switch-body .segmented__legend{margin-bottom:4px}.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.field-row .usage-field__input{width:4.5em}.controls__caption--strong{color:var(--color-ink)}.today__house .segmented__option span{padding:4px 9px;font-size:.8rem}.today__house .segmented__row{gap:5px}.today__chart{display:flex;flex-direction:column}.today__chart .section-title{margin-bottom:6px}.chart-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.72rem;color:var(--color-ink-muted);margin-bottom:4px}.chart-legend__item{display:inline-flex;align-items:center;gap:5px}.chart-legend__swatch{width:10px;height:10px;border-radius:3px;display:inline-block}.chart-legend__swatch--line{height:2px;border-radius:1px}.chart-legend__swatch--dashed{height:2px;border-radius:1px;background-image:linear-gradient(90deg,currentColor 60%,transparent 40%)}.chart-plot{flex:1 1 auto;min-height:0;min-width:0;contain:inline-size;overflow:hidden}.chart-plot .u-legend{display:none}.uplot,.uplot *,.uplot *:before,.uplot *:after{box-sizing:border-box}.uplot{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5;width:min-content}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{position:relative;user-select:none}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{display:block;position:relative;width:100%;height:100%}.u-axis{position:absolute}.u-legend{font-size:14px;margin:auto;text-align:center}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{background:#00000012;position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}.u-hz .u-cursor-x,.u-vt .u-cursor-y{height:100%;border-right:1px dashed #607D8B}.u-hz .u-cursor-y,.u-vt .u-cursor-x{width:100%;border-bottom:1px dashed #607D8B}.u-cursor-pt{position:absolute;top:0;left:0;border-radius:50%;border:0 solid;pointer-events:none;will-change:transform;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}