:root{color-scheme:dark;--bg:#0c1116;--panel:#131b23;--line:#ffffff12;--text:#f1f4f6;--muted:#97a6b5;--solar:#efc477;--car:#76dfd0;--blue:#8ab6ed;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.45;font-variant-numeric:tabular-nums}button{font:inherit}button:focus-visible,summary:focus-visible{outline:2px solid var(--car);outline-offset:5px}.symbols{position:absolute;width:0;height:0;overflow:hidden}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.shell{width:100%;max-width:none;margin:0;padding:clamp(16px,2vw,30px) clamp(14px,2vw,40px) 20px}.masthead{display:flex;justify-content:space-between;align-items:center;padding:0 0 30px;gap:20px}.brand{display:flex;align-items:center;gap:13px}.brand-mark{display:grid;place-items:center;width:42px;height:48px;border:1px solid #efc47750;border-radius:11px;color:var(--solar);background:#efc47708}.brand-mark svg{width:25px;height:25px}.wordmark{font-size:17px;font-weight:700;letter-spacing:3px}.brand-sub{color:var(--muted);font-size:13px;letter-spacing:.5px;margin-top:1px}.toolbar{display:flex;align-items:center;gap:10px}.sync{display:flex;gap:9px;align-items:center;margin-right:12px}.sync strong{display:block;font-size:14px;font-weight:500}.sync span:not(.status-light){display:block;color:var(--muted);font-size:12px;margin-top:2px}.status-light{height:7px;width:7px;border-radius:50%;background:#8e99a5}.status-light.ok{background:var(--car);box-shadow:0 0 12px #76dfd040}.status-light.warning{background:var(--solar)}.icon-button{display:grid;place-items:center;background:#ffffff04;border:1px solid var(--line);border-radius:10px;width:39px;height:39px;color:var(--muted);cursor:pointer}.icon-button:hover{background:#ffffff0d;color:white}.icon-button svg{height:18px;width:18px}.dashboard{display:grid;grid-template-columns:1fr 1fr;gap:22px}.panel{min-width:0;border:1px solid var(--line);border-radius:22px;padding:29px 29px 0;background:var(--panel);overflow:hidden;display:flex;flex-direction:column}.solar-panel{background:radial-gradient(ellipse at 10% 0%,#efc47709,transparent 48%),var(--panel)}.car-panel{background:radial-gradient(ellipse at 90% 0%,#76dfd008,transparent 48%),var(--panel)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:12px;letter-spacing:2px;font-weight:600;margin:0 0 8px}h1{font-size:clamp(23px,2.15vw,33px);line-height:1.15;letter-spacing:-1px;font-weight:550;margin:0}.period{color:var(--muted)}.provider{text-align:right;font-size:12px;letter-spacing:1.5px;color:var(--muted);line-height:1.7}.provider b{color:#d2dbe2;letter-spacing:.2px;font-weight:500}.solar-ink{color:var(--solar)}.car-ink{color:var(--car)}.hero-numbers{display:flex;justify-content:space-between;align-items:flex-end;margin-top:32px;gap:20px}.metric-label{display:block;color:var(--muted);font-size:14px;line-height:1.5}.hero-value{display:flex;gap:8px;align-items:baseline;font-size:clamp(44px,4.2vw,67px);font-weight:450;letter-spacing:-2px;line-height:1.25}.hero-value small{font-size:20px;font-weight:400;letter-spacing:0}.secondary-hero{padding-bottom:9px;text-align:right}.secondary-hero strong{font-size:29px;font-weight:500}.secondary-hero div>span{margin-left:6px;color:var(--muted);font-size:15px}.energy-map{height:290px;position:relative;width:100%;max-width:560px;margin:7px auto 1px;container-type:inline-size}.flow-canvas{position:absolute;width:100%;height:100%;inset:0}.flow-base{stroke:#2a3641;stroke-width:2}.flow{stroke-width:3;stroke-dasharray:3 12;opacity:0}.flow.active{opacity:1;animation:flow 1.4s linear infinite}.flow.reverse{animation-direction:reverse}.solar-flow,.home-flow{stroke:var(--solar)}.grid-flow{stroke:var(--blue)}.hub{fill:#1c2730;stroke:#394653}.hub-bolt{fill:#83919e;stroke:none}.node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:9px;transform:translateX(-50%)}.sun-node{left:50%;top:5px}.home-node{left:18.46%;top:198px}.grid-node{left:81.54%;top:198px}.node-icon{display:grid;place-items:center;border:1px solid #ffffff17;background:#18222b;border-radius:16px;width:56px;height:56px;box-shadow:0 5px 22px #00000020}.node-icon svg{width:28px;height:28px}.sun-node .node-icon{color:var(--solar);border-color:#efc47740;background:#24251f}.home-node .node-icon{color:#e4e8ec}.grid-node .node-icon{color:var(--blue)}.node-caption{font-size:11px;letter-spacing:1.2px;color:var(--muted);white-space:nowrap}.flow-label{position:absolute;left:50%;top:178px;transform:translateX(-50%);font-size:12px;text-align:center;color:var(--muted);max-width:40%;line-height:1.5}.grid-balance{display:grid;grid-template-columns:1fr 1fr;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);gap:15px}.grid-balance>div+div{padding-left:20px;border-left:1px solid var(--line)}.grid-balance strong{display:block;font-size:23px;font-weight:500;margin-top:3px}.grid-balance strong small{font-size:14px;color:var(--muted);font-weight:400}.tiny-arrow{display:inline-block;font-size:17px;margin-right:5px}.out{color:var(--solar)}.in{color:var(--blue)}.section-line{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0 15px}.section-line h2{font-size:15px;font-weight:500;margin:0}.section-line>span{font-size:12px;color:var(--muted)}.daily-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.daily-grid strong{font-size:25px;font-weight:500;display:block;margin-top:4px}.daily-grid small{font-size:12px;font-weight:400;color:var(--muted);margin-left:5px}.autonomy{margin-top:22px}.autonomy>div:first-child{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.autonomy strong{font-size:15px;color:var(--solar);font-weight:500}.track{height:5px;background:#ffffff0b;border-radius:5px;overflow:hidden}.track span{height:100%;display:block;background:var(--solar);width:0;transition:width 1s}.chart-block{margin-top:4px}.chart-block .section-line{margin-top:24px;margin-bottom:14px}.legend{display:flex;gap:7px;align-items:center;white-space:nowrap}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:4px}.solar-key{background:var(--solar)}.home-key{background:var(--blue)}.car-key{background:var(--car)}.chart-container{height:130px;position:relative}.chart-container svg{width:100%;height:100%;overflow:visible}.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;margin:0;color:#8a9aa9;font-size:13px;padding:0 16px}.chart-times{display:flex;justify-content:space-between;color:#8191a0;font-size:11px;gap:5px;margin-top:6px}.details{margin-top:25px;border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#bec9d3;padding:18px 0}summary::-webkit-details-marker{display:none}summary>span{font-size:21px;color:var(--muted);font-weight:300}details[open] summary>span{transform:rotate(45deg)}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 18px;padding:0 0 22px}.detail-grid .detail-item{border-top:1px solid var(--line);padding-top:10px;min-width:0}.detail-item span{display:block;font-size:12px;color:var(--muted)}.detail-item strong{display:block;font-size:15px;font-weight:500;margin-top:3px;overflow-wrap:anywhere}.detail-group{grid-column:1/-1;margin:12px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--solar)}.source-footer{margin-top:auto;margin-left:-29px;margin-right:-29px;border-top:1px solid var(--line);padding:13px 29px;background:#0000000c;display:flex;justify-content:space-between;gap:8px;color:#8999a8;font-size:11px}.car-top{display:flex;justify-content:space-between;align-items:center;margin-top:29px;gap:10px}.charge-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #ffffff12;background:#ffffff04;color:#bfccd6;border-radius:30px;font-size:13px}.charge-badge.charging{border-color:#76dfd039;background:#76dfd00b;color:var(--car)}.charge-badge svg{width:15px;height:15px}.quiet-label{font-size:12px;color:var(--muted)}.car-scene{position:relative;height:302px;margin:0 -10px}.soc-display{position:relative;z-index:1;padding-top:25px;padding-left:10px}.soc-display>div{line-height:1.05}.soc-display strong{font-size:clamp(68px,6.3vw,96px);font-weight:400;letter-spacing:-5px}.soc-display>div>span{font-size:27px;color:var(--muted);margin-left:7px}.car-image{position:absolute;width:103%;height:auto;right:-2%;bottom:11px;filter:drop-shadow(0 18px 15px #0000005c);pointer-events:none}.charge-wire{position:absolute;bottom:3px;left:23%;right:23%;height:22px;display:flex;align-items:center;gap:8px;color:#46535e}.charge-wire>svg{width:16px;height:16px;flex-shrink:0}.charge-wire>span{width:100%;height:2px;background:#2d3b44}.charge-wire.active{color:var(--car)}.charge-wire.active>span{background:repeating-linear-gradient(90deg,var(--car) 0 7px,transparent 7px 15px);background-size:30px 2px;animation:wire 1s linear infinite}.battery-block{margin-top:15px}.battery-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:10px;gap:10px}.battery-track{height:15px;background:#ffffff08;border-radius:4px;position:relative;overflow:hidden}.battery-track:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 2px),var(--panel) calc(10% - 2px) 10%)}#battery-fill{height:100%;width:0;background:var(--car);transition:width 1s;opacity:.85}#battery-target{position:absolute;top:0;bottom:0;border-left:2px solid white;left:100%;z-index:2;opacity:.7}.battery-scale{display:flex;justify-content:space-between;font-size:11px;color:#758797;margin-top:6px}.car-metrics{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:26px 0 23px}.car-metrics>div+div{padding-left:22px;border-left:1px solid var(--line)}.car-metrics strong{font-size:37px;font-weight:450;display:block;letter-spacing:-1px;line-height:1.45}.car-metrics small{font-size:15px;color:var(--muted);margin-left:7px;letter-spacing:0;font-weight:400}.charge-message{display:flex;align-items:center;gap:13px;background:#76dfd006;border:1px solid #76dfd012;border-radius:12px;padding:16px;min-height:82px}.charge-message-icon{color:var(--car);width:26px;flex-shrink:0}.charge-message-icon svg{width:25px;height:25px}.charge-message strong{font-size:14px;font-weight:500}.charge-message p{font-size:12px;color:var(--muted);margin:4px 0 0}.car-chart-block{margin-top:auto;padding-top:9px}.page-footer{display:flex;justify-content:space-between;gap:15px;padding:22px 4px 0;color:#748697;font-size:12px}.notice{border:1px solid #efc47736;color:#e5c990;background:#efc47708;padding:12px 18px;font-size:14px;border-radius:10px;margin-bottom:20px}.notice[hidden]{display:none}@keyframes flow{to{stroke-dashoffset:-30}}@keyframes wire{to{background-position:30px 0}}@media(min-width:1600px){.shell{padding-top:38px}}@media(max-width:1100px){.shell{padding:22px 22px 18px}.panel{padding:23px 22px 0}.dashboard{gap:16px}h1{font-size:25px}.hero-value{font-size:48px}.provider{font-size:11px}.source-footer{margin-left:-22px;margin-right:-22px;padding:13px 22px;flex-wrap:wrap}.energy-map{height:265px}.flow-canvas{transform:scaleY(.91);transform-origin:top}.home-node,.grid-node{top:177px}.flow-label{top:156px}.sun-node{top:0}.car-scene{height:277px}.node-icon{height:49px;width:49px}.node-caption{font-size:10px}.car-metrics strong{font-size:32px}.daily-grid strong{font-size:22px}.daily-grid small{display:block;margin:0}.legend{font-size:11px!important}.section-line h2{font-size:14px}.sync{margin-right:0}}@media(max-width:760px){.shell{padding:20px 14px}.masthead{padding-bottom:23px;align-items:flex-start}.brand-mark{display:none}.wordmark{font-size:15px;letter-spacing:2px}.brand-sub{font-size:12px}.sync strong{font-size:12px}.sync span:not(.status-light){font-size:10px}.icon-button{width:34px;height:34px}#fullscreen{display:none}.toolbar{gap:6px}.dashboard{grid-template-columns:1fr;gap:18px}.panel{padding:25px 23px 0}.source-footer{margin-left:-23px;margin-right:-23px;padding:13px 23px}.hero-value{font-size:61px}.energy-map{height:290px;max-width:520px}.flow-canvas{transform:none}.home-node,.grid-node{top:198px}.flow-label{top:176px}.node-icon{width:56px;height:56px}.car-scene{height:310px}.soc-display strong{font-size:84px}.daily-grid small{display:inline;margin-left:4px}.page-footer{flex-direction:column;text-align:center;gap:5px}.car-chart-block{padding-top:0}.car-image{max-height:240px;object-fit:contain}h1{font-size:28px}.sync{max-width:155px}.car-metrics strong{font-size:38px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media(min-width:761px) and (max-width:940px){.provider{display:none}.metric-label{font-size:13px}.secondary-hero strong{font-size:24px}.hero-value{font-size:42px}.panel{padding-left:18px;padding-right:18px}.source-footer{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}.car-scene{height:280px}.car-top .quiet-label{display:none}}

[hidden]{display:none!important}.node-caption{font-size:12px}.chart-times,.battery-scale{font-size:12px}

/* Keep battery and vehicle in separate rows at every screen size. */
.car-scene{height:auto;display:flex;flex-direction:column;margin:0 -10px}
.soc-display{padding-top:20px;padding-bottom:8px}
.soc-display strong{font-size:clamp(58px,5vw,76px);letter-spacing:-3px}
.soc-display>div>span{font-size:24px}
.car-image{position:relative;display:block;right:auto;bottom:auto;width:100%;height:auto;max-height:none;object-fit:contain}
.charge-wire{position:relative;bottom:auto;left:auto;right:auto;width:54%;margin:0 auto 5px;flex-shrink:0}
.next-sync{padding:0 14px;border-left:1px solid #ffffff18;min-width:125px}
.next-sync>span{display:block;color:var(--muted);font-size:11px}
.next-sync strong{display:block;font-size:19px;font-weight:500;color:var(--mint,#76dfd0);font-variant-numeric:tabular-nums;line-height:1.5}
@media(max-width:1100px){.masthead{flex-wrap:wrap}.toolbar{flex-wrap:wrap}.next-sync{padding:0 10px}}
@media(max-width:760px){.toolbar{width:100%;gap:8px}.sync{margin-right:auto;max-width:none}.next-sync{min-width:112px;padding:0 8px}.next-sync>span{font-size:10px}.next-sync strong{font-size:17px}.soc-display strong{font-size:64px}}

/* A centered one-second pulse leaves the layout and battery label in place. */
.car-image{transform-origin:50% 50%}
.car-image.is-charging{animation:car-charge-pulse 1s ease-in-out infinite;filter:brightness(1.24) saturate(1.15) drop-shadow(0 0 10px #70baffaa) drop-shadow(0 0 24px #408fff70) drop-shadow(0 18px 15px #0000005c)}
@keyframes car-charge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Animate each supplier independently, only while fresh readings show input. */
.grid-node .node-icon{color:#ed8585;border-color:#ed858540;background:#2a2025}
.grid-flow{stroke:#ed8585}
.node-icon.is-supplying{animation:supply-pulse 1s ease-in-out infinite}
.sun-node .node-icon.is-supplying{box-shadow:0 0 20px #efc47765;border-color:#efc47790}
.grid-node .node-icon.is-supplying{box-shadow:0 0 20px #ed858565;border-color:#ed858590}
@keyframes supply-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Fill wide displays without stretching the vehicle beyond a useful height. */
.dashboard{grid-template-columns:repeat(2,minmax(0,1fr))}
.car-image{max-height:clamp(190px,24vh,320px);align-self:center}
.masthead,.toolbar{flex-wrap:wrap}
.source-footer{flex-wrap:wrap}
@media(min-width:1600px){.panel{padding-top:24px}.masthead{padding-bottom:24px}}
@media(max-width:760px){.dashboard{grid-template-columns:minmax(0,1fr)}.car-image{max-height:260px}.panel-head,.section-line{flex-wrap:wrap}.hero-numbers{gap:10px}.hero-value{font-size:clamp(38px,10vw,61px)}.secondary-hero strong{font-size:clamp(22px,6vw,29px)}.node-caption{font-size:10px;letter-spacing:.6px}.car-metrics strong{font-size:clamp(28px,8vw,38px)}}

/* Reduce both vehicle dimensions and its layout height by 20% on tablets and larger screens. */
@media(min-width:761px){.car-image{width:80%;max-height:clamp(152px,19.2vh,256px)}}