:root{--paper:#f6f0da;--ink:#323c29;--olive:#627645;--pale:#e6ebc7;--gold:#efbc45;--orange:#c66836;--line:#cbd0b0}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:active{transform:translateY(1px)}button{touch-action:manipulation}.page{max-width:1440px;margin:auto;padding:0 3.3vw}.masthead{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #a7b18d}.back{color:inherit;font-size:15px;text-decoration:none;white-space:nowrap}.info-button{border:0;background:transparent;min-height:44px;font-size:14px;white-space:nowrap}.intro{padding:32px 0 26px;display:flex;align-items:center;justify-content:space-between;gap:24px}.eyebrow{margin:0 0 12px;font-size:15px;letter-spacing:.12em;color:var(--olive)}h1{margin:0;font-size:clamp(32px,3.8vw,59px);letter-spacing:-.045em;font-weight:800;line-height:1.1}h1 span{color:var(--orange)}.instruction{font-size:17px;line-height:1.8;color:var(--olive);margin:0 12px 0 0;padding-left:30px;border-left:1px solid #bac2a5}.experiment{border:1px solid #bbc4a0;border-radius:22px;overflow:hidden;background:#edf0d8;box-shadow:0 12px 30px #6c78440a}.scene-top{height:49px;display:flex;align-items:center;gap:9px;padding:0 23px;font-size:13px;border-bottom:1px solid #d7dcc0;background:#f4f4df}.live-dot{width:7px;height:7px;border-radius:50%;background:#678646;box-shadow:0 0 0 4px #66824614}.time-scale{color:#7a856a;font-size:11px;margin-left:auto}.scene-top button{border:0;background:none;min-width:72px;min-height:44px;font-size:12px}.scene{height:425px;position:relative;overflow:hidden;background:linear-gradient(180deg,#f7f3d6 0%,#f3f0d4 56%,#dfe7bf 56%,#e6ebcc 100%)}.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.wire-base,.wire-flow,.grid-base,.grid-flow{fill:none;stroke-linejoin:round;stroke-linecap:round}.wire-base{stroke:#b6c298;stroke-width:9}.wire-flow{stroke:#748d4e;stroke-width:4;stroke-dasharray:3 17;animation:flow 1.5s linear infinite}.battery-flow{stroke:#bb8a32}.grid-base{stroke:#d7b695;stroke-width:7}.grid-flow{stroke:#c57545;stroke-width:3;stroke-dasharray:2 12;animation:flow 1.2s linear infinite}.flow-off{opacity:0}.reversed{animation-direction:reverse}.paused .wire-flow,.paused .grid-flow,.paused .fan-blades{animation-play-state:paused}@keyframes flow{to{stroke-dashoffset:-40}}.sun{position:absolute;transform:translate(-50%,-50%);width:82px;height:82px;text-align:center;transition:opacity .3s}.sun-core{width:60px;height:60px;background:#f2c650;border-radius:50%;position:absolute;top:11px;left:11px;box-shadow:0 0 0 10px #e7c35b22,0 0 0 24px #e7c35b0b}.sun-core:before{content:"";position:absolute;inset:-13px;background:repeating-conic-gradient(from 0deg,#d7a529 0 3deg,transparent 3deg 45deg);border-radius:50%;mask:radial-gradient(transparent 61%,black 63%);-webkit-mask:radial-gradient(transparent 61%,black 63%)}.sun span{position:absolute;left:0;right:0;top:83px;font-size:11px;color:#967a32}.cloud{position:absolute;z-index:7;width:155px;height:100px;border:0;background:none;padding:0;transform:translate(-50%,-50%);touch-action:none;cursor:grab;filter:drop-shadow(0 7px 4px #5e664c15)}.cloud:active{cursor:grabbing;transform:translate(-50%,-50%) scale(1.035)}.cloud svg{display:block;width:100%;height:74px;overflow:visible}.cloud path{fill:#fffef1;stroke:#a9b398;stroke-width:1.6;stroke-dasharray:4 3}.cloud span{display:block;font-size:12px;font-weight:600;margin-top:-9px;color:#536447;background:#f8f7e7de;border-radius:20px;padding:3px 5px;position:relative}.solar-object,.battery-object{position:absolute;text-align:center;transform:translate(-50%,-50%);width:155px}.solar-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:5px;background:#455c43;border:3px solid #354631;border-radius:5px;transform:perspective(180px) rotateX(18deg) rotate(-8deg);height:83px;width:136px;margin:auto;box-shadow:5px 6px 0 #9baa79}.solar-panel i{background:linear-gradient(125deg,#718a5a,#506d49);border:1px solid #98ac7f88}.panel-stand{height:18px;width:70px;margin:-2px auto 5px;border-bottom:4px solid #82966a;border-left:5px solid #82966a;border-right:5px solid #82966a;transform:skew(-9deg)}.solar-object>span{font-size:13px;display:block}.solar-object>strong{font-size:25px;display:block;margin-top:6px}.solar-object small{font-size:12px;font-weight:400}.battery-object{width:150px;z-index:2}.object-name{display:block;font-size:13px;margin-bottom:10px}.battery-vessel{width:83px;height:103px;margin:0 auto 9px;position:relative;border:2px solid #6e7b4f;border-radius:50% / 13%;background:#edf0d7;overflow:hidden;box-shadow:7px 8px 0 #8e9e6525}.battery-vessel:before{content:"";position:absolute;z-index:3;top:-1px;left:-1px;right:-1px;height:18px;border-radius:50%;background:#e8ebcc;border-bottom:2px solid #7d8a56}.battery-fill{position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(90deg,#9bac64,#c3cb7c 57%,#9bac64);border-top:3px solid #82944c;transition:height .12s}.battery-vessel>span{position:absolute;left:0;right:0;top:38px;z-index:4;text-align:center;font-size:25px;font-weight:700}.battery-vessel small{font-size:12px}.battery-vessel .battery-bolt{top:69px;font-size:24px;font-weight:400;opacity:.7}.battery-object>strong{font-size:18px;display:block;white-space:nowrap}.battery-object small{font-size:12px;font-weight:400}.battery-state{display:block;min-height:19px;font-size:11px;color:#697747;margin-top:5px}.battery-controls{position:absolute;display:flex;gap:5px;transform:translate(-50%,-50%);z-index:4}.battery-controls button{display:flex;align-items:center;gap:5px;justify-content:center;border:1px solid #9aa87a;border-radius:50px;background:#f8f6df;min-height:45px;min-width:85px;padding:6px 10px;font-size:12px;box-shadow:0 4px 0 #83925c22}.battery-controls b{font-size:21px;line-height:1;font-weight:400}.battery-controls button[aria-pressed="true"]{background:#52683d;color:#fffbe7;border-color:#52683d}.device{position:absolute;transform:translate(-50%,-50%);border:0;background:transparent;text-align:center;width:108px;padding:3px 0 8px;border-radius:15px;z-index:3;transition:background .2s}.device:active{transform:translate(-50%,-48%)}.device:hover{background:#fff9d642}.device>svg{width:82px;height:76px;overflow:visible;filter:drop-shadow(3px 5px 0 #59713e12)}.roof{fill:#6d8250;stroke:#455c37;stroke-width:2}.building{fill:#eeeac4;stroke:#71865a;stroke-width:2}.window{fill:#7c8860;transition:fill .2s}.on .window{fill:#f3c44e}.fan-ring{fill:#e2e8bc;stroke:#71865a;stroke-width:2}.fan-blades{transform-origin:45px 37px;fill:#6f844c}.on .fan-blades{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.device-title{display:block;font-size:13px;margin-top:3px}.device>strong{display:block;font-size:19px;margin:3px 0 6px}.device small{font-size:11px;font-weight:400}.switch-label{display:inline-flex;gap:5px;align-items:center;font-size:10px;border:1px solid #a8b58c;padding:5px 8px;border-radius:20px;background:#f1f1d8}.switch-label i{height:7px;width:7px;border-radius:50%;background:#aeb79b}.on .switch-label i{background:#637c3e}.device:not(.on) svg{opacity:.55}.external-label{position:absolute;font-size:11px;color:#9b6b43;transform:translateY(-50%)}.external-label>span,.external-label>strong{display:block}.external-label>strong{font-size:13px;margin-top:3px}.line-note{position:absolute;bottom:12px;right:20px;font-size:10px;color:#809063}.balance-strip{border-top:1px solid #bfc9a4;background:#f4f3dd;display:flex;align-items:center;gap:20px;padding:18px 28px;min-height:90px}.power-number{min-width:130px}.power-number>span{display:block;font-size:11px;color:#6d7e57;margin-bottom:5px}.power-number strong{font-size:27px;font-weight:600;white-space:nowrap}.power-number small{font-size:12px;font-weight:400}.demand{text-align:right}.balance-state{display:flex;gap:13px;align-items:center;margin:auto;min-width:240px}.state-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#e5eac5;font-size:25px;color:#687a48;flex-shrink:0}.balance-state strong{display:block;font-size:16px;margin-bottom:6px}.balance-state div>span{display:block;font-size:11px;color:#78845d}.balance-state.shortage .state-icon{color:#ad6033;background:#efdfb9}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px 0 13px}.toolbar button{min-height:44px;border:1px solid #acb593;border-radius:25px;background:transparent;padding:9px 19px;font-size:13px}.toolbar button[aria-pressed="true"]{background:#617542;border-color:#617542;color:#fff9dc}.toolbar>span{font-size:12px;color:#75805e;margin-left:auto}.energy-caption{display:flex;gap:24px;font-size:12px;color:#7c8668;padding:4px 0 20px}.energy-caption>span{display:flex;align-items:center;gap:6px}.energy-caption i{width:8px;height:8px;background:#768a50;border-radius:50%;display:inline-block}.energy-caption .legend-energy{background:#bdc879;border-radius:2px}.dayline{display:flex;align-items:center;gap:10px;font-size:10px;color:#72825a;padding:0 0 12px}.dayline[hidden]{display:none}.dayline>div{height:5px;background:#dce2bc;flex:1;border-radius:8px;overflow:hidden}.dayline i{display:block;height:100%;background:#8b9b54;width:0}footer{display:flex;justify-content:space-between;font-size:11px;color:#8b927a;padding:20px 0 25px;border-top:1px solid #d7dbc1}dialog{background:var(--paper);color:var(--ink);border:1px solid #acb593;border-radius:20px;padding:35px;width:min(660px,calc(100% - 28px));max-height:85vh}dialog::backdrop{background:#253b2b75;backdrop-filter:blur(5px)}.close-info{position:absolute;right:18px;top:14px;width:44px;height:44px;border:0;background:none;font-size:28px}dialog h2{font-size:29px;line-height:1.35;margin:15px 0 20px}dialog h3{font-size:16px;margin:26px 0 10px}dialog p{font-size:14px;line-height:1.9;color:#63724e}dialog .eyebrow{font-size:12px}.formula{font-size:16px;line-height:1.8;background:#e4e9c8;padding:18px;border-radius:12px}.boundary{border-left:2px solid #aeb982;padding-left:14px}.source-link{display:inline-block;min-height:44px;line-height:44px;font-size:13px;color:#6c7f45}dialog .smallprint{font-size:11px;color:#8a9474}
@media(min-width:1250px){.scene{height:445px}.intro{padding:34px 0 30px}}
@media(max-width:760px){.page{padding:0 18px}.masthead{height:56px;gap:8px}.back{font-size:12px}.info-button{font-size:12px;padding:0;min-width:72px}.intro{padding:22px 0 20px}.eyebrow{font-size:12px;margin-bottom:9px}h1{font-size:35px}.instruction{display:none}.experiment{border-radius:17px}.scene-top{height:43px;padding:0 12px;gap:6px;font-size:11px}.time-scale{font-size:9px}.scene-top button{min-width:55px;padding:0;font-size:11px}.scene{height:440px;background:linear-gradient(180deg,#f7f3d6 0%,#f3f0d4 45%,#dfe7bf 45%,#e6ebcc 100%)}.cloud{width:123px;height:84px}.cloud svg{height:66px}.cloud span{font-size:10px;margin-top:-12px;padding:2px}.sun{width:66px;height:66px}.sun-core{width:47px;height:47px;top:10px;left:10px}.sun span{top:69px;font-size:10px}.solar-object{width:132px}.solar-panel{width:109px;height:67px;gap:2px;padding:4px}.panel-stand{width:54px;height:15px;margin-bottom:4px}.solar-object>span{font-size:11px}.solar-object>strong{font-size:23px;margin-top:4px}.battery-object{width:130px}.object-name{font-size:11px;margin-bottom:7px}.battery-vessel{width:66px;height:80px;margin-bottom:6px}.battery-vessel>span{font-size:21px;top:29px}.battery-vessel .battery-bolt{top:53px;font-size:21px}.battery-object>strong{font-size:15px}.battery-object small{font-size:10px}.battery-state{font-size:10px;margin-top:3px}.battery-controls{gap:3px}.battery-controls button{min-width:65px;min-height:44px;font-size:10px;padding:5px 7px;gap:2px;box-shadow:0 3px 0 #83925c22}.battery-controls b{font-size:18px}.device{width:90px;padding:0 0 5px}.device>svg{width:65px;height:60px}.device-title{font-size:11px;margin-top:0}.device>strong{font-size:17px;margin:2px 0 5px}.switch-label{font-size:9px;padding:4px 6px;gap:3px}.external-label{font-size:9px}.external-label>strong{font-size:10px}.line-note{bottom:9px;font-size:9px;right:13px}.balance-strip{padding:13px 12px;gap:6px;flex-wrap:wrap;min-height:104px}.power-number{min-width:auto;flex:1}.power-number>span{font-size:10px;margin-bottom:3px}.power-number strong{font-size:21px}.power-number small{font-size:10px}.balance-state{order:3;width:100%;min-width:0;border-top:1px solid #dce1c4;padding-top:10px;margin-top:4px;gap:9px}.state-icon{width:30px;height:30px;font-size:19px}.balance-state strong{font-size:13px;margin-bottom:4px}.balance-state div>span{font-size:10px}.toolbar{gap:7px;padding:14px 0 10px}.toolbar button{font-size:11px;padding:7px 11px;min-height:44px}.toolbar>span{width:100%;margin:3px 0 0;min-height:17px;font-size:11px}.energy-caption{font-size:10px;gap:16px;padding-top:6px;padding-bottom:16px}footer{font-size:9px;padding:16px 0 20px}dialog{padding:26px 22px}dialog h2{font-size:26px}}
@media(max-width:385px){.page{padding:0 12px}.back{font-size:11px}h1{font-size:32px}.info-button{font-size:11px;min-width:66px}.time-scale{font-size:8px}.scene-top{padding:0 10px}.toolbar button{padding:7px 9px;font-size:10px}}
.scene{transition:background .7s}.scene.night{background:linear-gradient(180deg,#b8c6ae 0%,#d3dcc1 56%,#c7d3ad 56%,#dce3c4 100%)}.scene.night .sun-core{box-shadow:0 0 0 10px #edf1d51a,0 0 0 24px #edf1d50b}.scene.night .sun-core:before{display:none}
@media(prefers-reduced-motion:reduce){.wire-flow,.grid-flow,.fan-blades{animation:none!important}.battery-fill,.scene{transition:none}}
@media(max-width:760px){.battery-controls{width:201px;gap:3px}.battery-controls button{width:65px;min-width:65px;min-height:44px;padding:5px 3px;gap:1px;flex:0 0 65px;font-size:10px;white-space:nowrap}.battery-controls button span{white-space:nowrap}.battery-controls b{font-size:17px;flex-shrink:0}}