@font-face{font-family:Sora;src:url('assets/fonts/Sora-Variable.ttf') format('truetype');font-style:normal;font-weight:100 800;font-display:optional}
:root{--fig-font:Sora,Arial,sans-serif;--fig-ease:cubic-bezier(.22,.75,.2,1);--sans:var(--fig-font)}
body,button,input,select,summary,h1,h2,h3,.brand,.inventory-values strong,.chart-label{font-family:var(--fig-font);font-optical-sizing:auto}
body{font-weight:400}.eyebrow{font-size:13px;letter-spacing:.07em;line-height:1.6}.text-link{font-size:15px}
a,button,summary{transition:color 180ms ease,background 180ms ease,border-color 180ms ease,opacity 180ms ease,transform 240ms var(--fig-ease)}.text-link:hover,.text-link:focus-visible{transform:translateY(-2px)}.battery-figure a{view-transition-name:battery-scene;overflow:hidden;background:#0f111b}.battery-figure img{transition:transform 650ms var(--fig-ease)}.battery-figure a:hover img,.battery-figure a:focus-visible img{transform:scale(1.018)}.brand{view-transition-name:fig-brand}footer .brand{view-transition-name:none}.viewport{view-transition-name:battery-scene}.selection{transition:opacity 220ms ease}.scene-label{transition:background 180ms ease,color 180ms ease,box-shadow 180ms ease}.mode-switch button{transition:background 220ms var(--fig-ease),color 220ms ease}.explanation>#view-copy{font-size:17px}.selection>p:not(.eyebrow){font-size:15px}.scene-label small,.electrode-roles strong span{font-size:13px}.small,#progress-help,.camera-controls,.speed-control label,.scene-key .key-hint{font-size:13px}.formula{font-family:var(--fig-font)}
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:520ms;animation-timing-function:var(--fig-ease)}
::view-transition-old(root){animation:fig-out 180ms ease both}
::view-transition-new(root){animation:fig-in 320ms ease both}
::view-transition-old(battery-scene),::view-transition-new(battery-scene){height:100%;width:100%;object-fit:cover;mix-blend-mode:normal}
::view-transition-old(battery-scene){animation:fig-out 360ms ease both}
::view-transition-new(battery-scene){animation:fig-in 500ms ease both}
@keyframes fig-out{to{opacity:0}}@keyframes fig-in{from{opacity:0}to{opacity:1}}

@media(max-width:700px){.scene-label{font-size:13px}.scene-label small{font-size:12px}.eyebrow{font-size:12px}.lesson-title h1{font-size:32px}.section-intro>p:last-child:not(.eyebrow){font-size:17px}}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}.battery-figure a:hover img,.battery-figure a:focus-visible img,.text-link:hover,.text-link:focus-visible{transform:none}}