.photoactivity{background:#0b1424;border-block:1px solid #2b3c55;padding:65px 0 55px}
.photoactivity-heading{max-width:58em;margin-bottom:38px}
.photoactivity-heading h2{font-size:37px;line-height:1.65;margin:12px 0 20px}
.photoactivity-heading p{font-size:19px;line-height:1.95}
.photoactivity-grid{display:grid;grid-template-columns:1fr 1fr;gap:38px}
.photoactivity-grid figure{border-top:1px solid #3e5676;padding-top:21px;min-width:0}
.photoactivity-grid h3{font-size:25px;line-height:1.7;margin-bottom:14px}
.photoactivity svg{display:block;width:100%;height:auto}
.photoactivity svg text{font-family:'Times New Roman','Yu Mincho',serif;font-size:20px;fill:#bdd0e5}
.photoactivity figcaption p{font-size:18px;line-height:1.95}
.photo-p{fill:#b8a2e418;stroke:#b8a2e4;stroke-width:1}
.photo-n{fill:#0091fc1a;stroke:#0091fc;stroke-width:1}
.photo-depletion{fill:#26cdd914;stroke:#7bebdd;stroke-dasharray:3 4;stroke-width:.7}
.photo-contact{fill:#a9b9cf24;stroke:#a9b9cf;stroke-width:1}
.photo-photons{fill:none;stroke:#7bebdd;stroke-width:1.1;stroke-dasharray:5 4}
.photo-circuit,.photo-load{fill:none;stroke:#8ba5c5;stroke-width:1.2}
.photo-field{fill:none;stroke:#e0d8f4;stroke-width:1.1}
.photo-electron-route,.photo-hole-route{fill:none;stroke-width:.6;stroke-dasharray:3 5;opacity:.5}
.photo-electron-route{stroke:#26cdd9}
.photo-hole-route{stroke:#dcd8f1}
.photo-electrolyte{fill:#26cdd907;stroke:#527f9c;stroke-width:1}
.photo-catalyst{fill:#26cdd94a;stroke:#26cdd9;stroke-width:.8}
.photo-carrier{fill:#26cdd9;stroke:#26cdd9;stroke-width:1}
.solar-hole,.pec-hole{fill:#0b1424;stroke:#dcd8f1;stroke-width:1.7}
.photo-bubble{fill:none;stroke:#7bebdd;stroke-width:1}
.photoactivity-key{font-size:16px;margin-top:25px;color:#acc4dd}
.photoactivity-connection{border-top:1px solid #2b3c55;padding-top:27px;margin-top:28px;max-width:62em}
.photoactivity-connection h3{font-size:25px;margin-bottom:13px}
.photoactivity-connection p{font-size:18px;line-height:1.9;margin-bottom:17px}
.photoactivity-connection a{font-size:18px;text-decoration:underline;text-underline-offset:5px}
.photoactivity-sources{font-size:15px;line-height:1.9;margin-top:25px}
.solar-electron{transform:translate(260px,183px)}
.solar-hole{transform:translate(260px,195px)}
.pec-electron{transform:translate(172px,180px)}
.pec-hole{transform:translate(172px,195px)}
@media(prefers-reduced-motion:no-preference){
 .solar-electron{animation:solar-electron-flow 9s linear infinite}
 .solar-hole{animation:solar-hole-flow 9s linear infinite}
 .pec-electron{animation:pec-electron-flow 8s linear infinite}
 .pec-hole{animation:pec-hole-flow 8s linear infinite}
 .photo-carrier.carrier-1{animation-delay:-3s}.photo-carrier.carrier-2{animation-delay:-6s}
 .photo-bubble{animation:photo-bubble-rise 7s ease-out infinite}.photo-bubble.bubble-2{animation-delay:-3.5s}
 @keyframes solar-electron-flow{0%{opacity:0;transform:translate(260px,183px)}5%{opacity:1}30%{transform:translate(416px,183px)}50%{transform:translate(416px,321px)}82%{transform:translate(104px,321px);opacity:1}99%,100%{transform:translate(104px,183px);opacity:0}}
 @keyframes solar-hole-flow{0%,4%{opacity:0;transform:translate(260px,195px)}7%{opacity:1}42%{opacity:1;transform:translate(110px,195px)}46%,100%{opacity:0;transform:translate(110px,195px)}}
 @keyframes pec-electron-flow{0%{opacity:0;transform:translate(172px,180px)}5%{opacity:1}45%{opacity:1;transform:translate(273px,180px)}50%,100%{opacity:0;transform:translate(273px,180px)}}
 @keyframes pec-hole-flow{0%{opacity:0;transform:translate(172px,195px)}5%{opacity:1}45%{opacity:1;transform:translate(94px,195px)}50%,100%{opacity:0;transform:translate(94px,195px)}}
 @keyframes photo-bubble-rise{0%{opacity:0;transform:translateY(12px)}30%,65%{opacity:.8}100%{opacity:0;transform:translateY(-30px)}}
}
.motion-paused .photo-carrier,.document-hidden .photo-carrier,.motion-paused .photo-bubble,.document-hidden .photo-bubble{animation-play-state:paused!important}
@media(max-width:850px){.photoactivity-grid{grid-template-columns:1fr;gap:40px}.photoactivity-heading h2{font-size:31px}}
@media(max-width:600px){.photoactivity{padding-top:45px}.photoactivity-heading h2{font-size:27px}.photoactivity-heading p{font-size:18px}.photoactivity-grid h3{font-size:23px}}

.photoactivity{position:relative;isolation:isolate;overflow:hidden}
.photoactivity>.wrap{position:relative;z-index:1}
.sunlight-background{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.43;mask-image:linear-gradient(180deg,transparent,#000 10%,#000 82%,transparent)}
.sunlight-background svg{position:absolute;width:max(100%,1150px);max-width:none;height:auto;top:0;left:50%;transform:translateX(-50%)}
.sunlight-incoming path,.spectrum-zero{stroke:#fff9e5;fill:none;stroke-width:1.3;opacity:.55}
.sunlight-incoming path+path{stroke-width:.6;opacity:.22}
.spectrum-grating{fill:none;stroke:#b9cbe3;stroke-width:.8;opacity:.8}
.spectrum-ray{fill:none;stroke:var(--ray-colour);stroke-width:1.2;opacity:.38}
.spectrum-background-labels{opacity:.65}.photoactivity .spectrum-background-labels text{font-size:17px;fill:#c5d3e5}
.photoactivity-heading{background:radial-gradient(ellipse at 20% 35%,#0b1424ee 0%,#0b1424c4 50%,#0b142400 78%)}
.photoactivity-grid svg{background:radial-gradient(ellipse,#0b1424e8 25%,#0b1424aa 55%,transparent 76%)}
.photoactivity-connection{background:linear-gradient(90deg,#0b1424dc,#0b1424b3,transparent)}
.spectrum-note{margin-top:26px;font-size:17px;color:#a9bfd8;max-width:62em}.spectrum-note summary{cursor:pointer;width:fit-content}.spectrum-note>p{font-size:17px;margin-top:18px;line-height:1.9}.spectrum-credit{font-size:14px!important}.spectrum-credit a{text-decoration:underline;text-underline-offset:4px}
@media(prefers-reduced-motion:no-preference){
 .spectrum-ray{stroke-dasharray:24 176;animation:spectrum-propagation 12s linear var(--ray-delay) infinite}
 .sunlight-incoming path:first-child,.spectrum-zero{stroke-dasharray:30 170;animation:spectrum-propagation 12s linear infinite}
 .sunlight-glow{animation:sunlight-breath 14s ease-in-out infinite alternate;transform-origin:45px 450px}
 @keyframes spectrum-propagation{to{stroke-dashoffset:-200}}
 @keyframes sunlight-breath{from{opacity:.6;transform:scale(.95)}to{opacity:1;transform:scale(1.05)}}
}
.motion-paused .sunlight-background *,.document-hidden .sunlight-background *,.photoactivity-offscreen .sunlight-background *{animation-play-state:paused!important}
@media(max-width:600px){.sunlight-background{opacity:.4}.sunlight-background svg{width:1050px;left:42%;top:130px}.photoactivity-heading{background:#0b142499}}
@media(prefers-reduced-motion:reduce){.sunlight-background *{animation:none!important}.spectrum-ray{stroke-dasharray:none}}

.photoactivity-process{max-width:62em;padding:25px 0 30px;border-top:1px solid #3e5676;margin:0 0 22px}.photoactivity-process h3{font-size:25px;line-height:1.7;margin:0 0 13px}.photoactivity-process p{font-size:18px;line-height:1.95}