/* Information pages use the reference's narrow, left-aligned reading column.
   The real water renderer remains visible behind these transparent sections. */
body[data-view='page'] #app{padding:0;isolation:auto}
body[data-view='page'] .info-page{position:relative;width:min(600px,48vw);margin:0 0 0 clamp(20px,2.2vw,32px);padding:122px 0 112px;color:#05090f;font:500 13px/1.72 var(--mono);background:none}
body[data-view='page'] .info-header{margin:0 0 68px;max-width:none}
body[data-view='page'] .info-header>.eyebrow{margin:0 0 13px;color:#64737b;font:500 10.5px/1.4 var(--mono);letter-spacing:.18em}
body[data-view='page'] .info-page h1{margin:0 0 18px;max-width:none;font:800 clamp(38px,4.4vw,62px)/1 var(--sans);letter-spacing:-.04em;color:#05090f}
body[data-view='page'] .info-page .lede{margin:0;color:#1b303b;font:500 13.5px/1.65 var(--mono);max-width:47ch}
body[data-view='page'] .info-section{padding:0;margin:0 0 58px;border:0;scroll-margin-top:90px}
body[data-view='page'] .info-section>.eyebrow{margin:0 0 9px;font:500 10px/1.4 var(--mono);letter-spacing:.16em;color:#65767e}
body[data-view='page'] .info-section h2{margin:0 0 20px;font:800 clamp(25px,2.6vw,36px)/1.08 var(--sans);letter-spacing:-.035em;color:#05090f;max-width:none}
body[data-view='page'] .info-section h3{font:750 19px/1.2 var(--sans);letter-spacing:-.02em;color:#10212b}
body[data-view='page'] .info-section p,body[data-view='page'] .info-section li{color:#1c303a;font:500 13px/1.75 var(--mono);margin:0 0 18px}
body[data-view='page'] .info-section .info-statement{padding:15px 20px;border-radius:12px;background:rgba(125,151,162,.11);max-width:52ch;color:#263a44}
body[data-view='page'] .info-page .info-facts{margin:22px 0 26px;border-top:1px solid rgba(34,65,79,.14)}
body[data-view='page'] .info-facts>div{grid-template-columns: minmax(115px,.85fr) minmax(0,1.5fr);gap:18px;padding:15px 0;border-color:rgba(34,65,79,.14)}
body[data-view='page'] .info-facts dt{color:#5a6f78;font:500 10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.09em}
body[data-view='page'] .info-facts dd{color:#142b36;font:500 12px/1.65 var(--mono)}
body[data-view='page'] .info-page .info-note{padding:20px 22px;border-radius:16px;background:rgba(125,151,162,.11)}
body[data-view='page'] .info-page .info-source{font:500 10px/1.7 var(--mono);color:#607580}
body[data-view='page'] .info-pill{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:11px 20px;border:1px solid rgba(26,56,70,.18)!important;border-radius:999px;color:#132a36!important;text-decoration:none!important;font:500 10.5px/1.25 var(--mono);letter-spacing:.12em;background:rgba(223,235,240,.5);transition:background .2s,transform .2s}
body[data-view='page'] .info-pill:hover{background:#162f3b;color:#f0f7f9!important;transform:translateY(-2px)}
.info-page-footer{display:flex;gap:12px;flex-wrap:wrap;padding:20px 0 0;border-top:1px solid rgba(26,56,70,.16)}
body[data-view='page'] .info-diagram{margin:22px 0 24px;color:#253e49}
body[data-view='page'] .info-diagram figcaption{margin:12px 2px 0;text-align:left;max-width:42ch;color:#071923;font:800 clamp(17px,1.6vw,20px)/1.3 var(--sans);letter-spacing:-.02em}
.guide-glass{position:relative;height:auto;aspect-ratio:600/220;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,rgba(246,251,253,.33),rgba(167,190,201,.14));box-shadow:inset 0 0 0 1px rgba(114,147,161,.13);isolation:isolate}
.guide-glass>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.guide-bubble{position:absolute;width:12%;aspect-ratio:1;border-radius:50%;top:32%;background:radial-gradient(ellipse at 30% 22%,#fff 0 2%,rgba(255,255,255,.7) 3%,transparent 6%),radial-gradient(ellipse at 56% 10%,rgba(255,255,255,.92) 0 2%,transparent 6%),radial-gradient(ellipse at 51% 44%,rgba(255,255,255,.13) 0 48%,rgba(166,192,201,.35) 62%,rgba(236,246,250,.72) 73%,rgba(107,138,155,.4) 80%,rgba(255,255,255,.2) 87%);box-shadow:inset 2px 1px 3px rgba(255,255,255,.85),inset -4px -5px 8px rgba(74,112,131,.18),0 1px 2px rgba(90,122,137,.13);border:1px solid rgba(89,122,140,.23);z-index:2;animation:guide-float 5s ease-in-out infinite}
.guide-bubble>i{position:absolute;inset:9%;border:1px solid rgba(255,255,255,.45);border-right-color:transparent;border-bottom-color:rgba(111,143,159,.16);border-radius:50%;transform:rotate(-25deg)}
.bubble-sol{left:19%;animation-delay:-.7s}
.bubble-rh{right:19%;animation-delay:-2.6s}
.guide-label{position:absolute;text-align:center;font:500 clamp(6px,.73vw,10px)/1.5 var(--mono);letter-spacing:.12em;color:#506a77;z-index:3}
.guide-label-sol{left:5%;width:40%;bottom:13%}
.guide-label-rh{right:5%;width:40%;bottom:13%}
.guide-label-center{top:12%;left:10%;width:80%;font-size:clamp(6px,.68vw,9px);color:#607d89;letter-spacing:.17em}
.guide-arc{fill:none;stroke:#617d8c;stroke-width:1;stroke-opacity:.45;stroke-dasharray:3 6;animation:guide-flow 12s linear infinite}
.guide-bead{fill:#b4d7e3;stroke:#688b9d;stroke-width:.5;animation:guide-bead 5s ease-in-out infinite}
.guide-ring{position:absolute;left:25%;top:49%;width:24%;aspect-ratio:1;border:1px solid rgba(95,128,146,.23);border-radius:50%;transform:translate(-50%,-50%) scale(.4);animation:guide-ring 5s ease-in-out infinite}
.bubble-plan{left:19%;top:31%}
.bubble-plan span{position:absolute;inset:0;display:grid;place-items:center;font:600 clamp(20px,2.4vw,30px)/1 var(--mono);color:#618492;opacity:.7}
.guide-plan-note{position:absolute;left:68%;top:27%;width:15%;height:45%;padding:5% 3% 0;border:1px solid rgba(83,121,141,.2);border-radius:9px;background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(160,190,202,.13));box-shadow:0 4px 14px rgba(80,120,140,.05);animation:guide-float 5s -2.5s ease-in-out infinite}
.guide-plan-note i{display:block;width:100%;height:2px;margin:0 0 5px;background:rgba(79,121,142,.29)}
.guide-plan-note i:nth-child(2){width:70%}.guide-plan-note i:nth-child(3){width:85%}
.guide-plan-note small{position:absolute;left:0;right:0;bottom:13%;font:500 clamp(5px,.6vw,8px)/1 var(--mono);color:#537b8d;text-align:center;letter-spacing:.05em}
.guide-track{fill:none;stroke:#6f8f9d;stroke-width:1;stroke-dasharray:2 8;stroke-opacity:.5;animation:guide-flow 8s linear infinite}
.guide-grid{fill:none;stroke:#7d9ca9;stroke-width:.7;stroke-opacity:.16}
.guide-price{fill:none;stroke-width:2;stroke-linecap:round;stroke-dasharray:650;animation:guide-chart 8s ease-in-out infinite alternate}
.price-a{stroke:#7895ab}.price-b{stroke:#aba48d;animation-delay:-2s}
.guide-market .guide-label-center{top:auto;bottom:9%}
body[data-view='page'] .info-grid{margin:20px 0 0;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid rgba(34,65,79,.14)}
body[data-view='page'] .info-grid .metric{padding:16px 18px 22px 0}
body[data-view='page'] .info-grid .metric .metric-value{display:block;font:800 58px/1 var(--sans);letter-spacing:-.05em;color:#071923;margin:0 0 14px}
body[data-view='page'] .info-grid .metric h2{font:700 15px/1.2 var(--sans);letter-spacing:-.02em;margin:0 0 9px}
body[data-view='page'] .info-grid .metric p{font:500 10px/1.6 var(--mono);color:#5e7580;margin:0}
body[data-view='page'] .info-record h3{font:700 16px/1.3 var(--sans);margin:0}
body[data-view='page'] .info-record p{font:500 10px/1.5 var(--mono);margin:4px 0 0}
body[data-view='page'] .record-state{color:#677d87;white-space:nowrap}
@keyframes guide-float{0%,100%{transform:translateY(4px) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
@keyframes guide-flow{to{stroke-dashoffset:-90}}
@keyframes guide-bead{0%,100%{opacity:.2;transform:translateX(-65px)}50%{opacity:1;transform:translateX(65px)}}
@keyframes guide-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:.75}80%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
@keyframes guide-chart{0%,10%{stroke-dashoffset:650;opacity:.3}60%,100%{stroke-dashoffset:0;opacity:1}}
@media(max-width:900px){body[data-view='page'] .info-page{width:min(560px,65vw);padding-top:112px}.guide-label{font-size:8px}.guide-label-center{font-size:7px}}
@media(max-width:640px){body[data-view='page'] .info-page{width:auto;margin:0 20px;padding-top:112px}body[data-view='page'] .info-header{margin-bottom:48px}body[data-view='page'] .info-page h1{font-size:39px}body[data-view='page'] .info-section h2{font-size:28px}body[data-view='page'] .info-section{margin-bottom:42px}body[data-view='page'] .info-section p,body[data-view='page'] .info-section li{font-size:12px;line-height:1.75}body[data-view='page'] .info-facts>div{grid-template-columns:1fr;gap:6px}body[data-view='page'] .info-grid .metric .metric-value{font-size:44px}body[data-view='page'] .info-grid .metric h2{font-size:13px}body[data-view='page'] .info-grid .metric p{font-size:9px}.guide-label{font-size:6px}.guide-label-center{font-size:6px}.guide-bubble span{font-size:21px}.guide-plan-note small{font-size:5px}}
@media(prefers-reduced-motion:reduce){.guide-glass *{animation:none!important}.guide-price{stroke-dashoffset:0}.guide-ring{display:none}.info-pill{transition:none!important}}