:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --text: #18202a;
  --muted: #5e6b78;
  --border: #dbe3ec;
  --accent: #1f6feb;
  --accentSoft: #eaf2ff;
  --shadow: 0 8px 24px rgba(16, 24, 40, 0.06);
  --radius: 14px;
  --font-scale: 1;
  --font-family-base: Arial, Helvetica, sans-serif;
  --font-weight-base: 400;
  --line-height-base: 1.5;
  --letter-spacing-base: 0;
}

/* Historical gap technologies: 1963 Cu2S/CdS and 1988 GaInP/GaAs. */
.pv-cu2s-cds-ar-layer,
.pv-gainp-gaas-ar-layer {
  fill: color-mix(in srgb, #dff4fa 72%, var(--surface));
  stroke: color-mix(in srgb, #5b9daf 62%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-grid-layer,
.pv-gainp-gaas-grid-layer,
.pv-gainp-gaas-rear-layer {
  fill: color-mix(in srgb, #525b68 93%, var(--surface));
  stroke: color-mix(in srgb, #202731 85%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-absorber-layer {
  fill: color-mix(in srgb, #8f552e 91%, var(--surface));
  stroke: color-mix(in srgb, #57301a 84%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-junction-layer {
  fill: color-mix(in srgb, #ebbf67 68%, var(--surface));
  stroke: color-mix(in srgb, #a67823 70%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-cds-layer {
  fill: color-mix(in srgb, #f2df67 64%, var(--surface));
  stroke: color-mix(in srgb, #a88e1f 68%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-zinc-layer {
  fill: color-mix(in srgb, #b7c0ca 74%, var(--surface));
  stroke: color-mix(in srgb, #68737f 70%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-copper-layer {
  fill: color-mix(in srgb, #ad5f34 92%, var(--surface));
  stroke: color-mix(in srgb, #69351c 84%, var(--border));
  stroke-width: 1.5;
}

.pv-gainp-gaas-top-layer {
  fill: color-mix(in srgb, #3b867f 92%, var(--surface));
  stroke: color-mix(in srgb, #20544f 84%, var(--border));
  stroke-width: 1.5;
}

.pv-gainp-gaas-tunnel-layer {
  fill: color-mix(in srgb, #e1a35a 66%, var(--surface));
  stroke: color-mix(in srgb, #975e23 70%, var(--border));
  stroke-width: 1.5;
}

.pv-gainp-gaas-bottom-layer {
  fill: color-mix(in srgb, #69509a 92%, var(--surface));
  stroke: color-mix(in srgb, #3e2c64 84%, var(--border));
  stroke-width: 1.5;
}

.pv-gainp-gaas-bsf-layer {
  fill: color-mix(in srgb, #a8c6e6 64%, var(--surface));
  stroke: color-mix(in srgb, #537da8 68%, var(--border));
  stroke-width: 1.5;
}

.pv-gainp-gaas-substrate-layer {
  fill: color-mix(in srgb, #c9b9df 68%, var(--surface));
  stroke: color-mix(in srgb, #756092 68%, var(--border));
  stroke-width: 1.5;
}

.pv-cu2s-cds-dark-label,
.pv-gainp-gaas-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.46);
  stroke-width: 3px;
  paint-order: stroke fill;
}

.pv-cu2s-cds-stack-svg .pv-svg-layer-label,
.pv-cu2s-cds-stack-svg .pv-svg-small-label,
.pv-gainp-gaas-stack-svg .pv-svg-layer-label,
.pv-gainp-gaas-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 88%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-cu2s-cds-stack-svg .pv-cu2s-cds-dark-label,
.pv-gainp-gaas-stack-svg .pv-gainp-gaas-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.46);
}

.pv-simple-stack-layer--cu2s-cds-ar,
.pv-simple-stack-layer--gainp-gaas-ar {
  height: 6px;
  border: 1px solid #5b9daf;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #dff4fa 74%, var(--surface));
}

.pv-simple-stack-layer--cu2s-cds-grid,
.pv-simple-stack-layer--gainp-gaas-grid,
.pv-simple-stack-layer--gainp-gaas-rear {
  height: 7px;
  background: color-mix(in srgb, #525b68 93%, var(--surface));
}

.pv-simple-stack-layer--cu2s-cds-absorber {
  height: 17px;
  background: color-mix(in srgb, #8f552e 91%, var(--surface));
}

.pv-simple-stack-layer--cu2s-cds-junction {
  height: 7px;
  background: color-mix(in srgb, #ebbf67 72%, var(--surface));
}

.pv-simple-stack-layer--cu2s-cds-cds {
  height: 27px;
  background: color-mix(in srgb, #f2df67 68%, var(--surface));
}

.pv-simple-stack-layer--cu2s-cds-zinc {
  height: 7px;
  background: color-mix(in srgb, #b7c0ca 78%, var(--surface));
}

.pv-simple-stack-layer--cu2s-cds-copper {
  height: 10px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #ad5f34 92%, var(--surface));
}

.pv-simple-stack-layer--gainp-gaas-top {
  height: 22px;
  background: color-mix(in srgb, #3b867f 92%, var(--surface));
}

.pv-simple-stack-layer--gainp-gaas-tunnel {
  height: 7px;
  background: color-mix(in srgb, #e1a35a 72%, var(--surface));
}

.pv-simple-stack-layer--gainp-gaas-bottom {
  height: 25px;
  background: color-mix(in srgb, #69509a 92%, var(--surface));
}

.pv-simple-stack-layer--gainp-gaas-bsf {
  height: 6px;
  background: color-mix(in srgb, #a8c6e6 70%, var(--surface));
}

.pv-simple-stack-layer--gainp-gaas-substrate {
  height: 11px;
  background: color-mix(in srgb, #c9b9df 72%, var(--surface));
}

.pv-light-equations {
  display: grid;
  gap: 7px;
  margin: 18px 0;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accentSoft) 58%, var(--surface));
}

.pv-light-equations p {
  margin: 0;
}

.pv-light-section-title,
.pv-light-case-title,
.pv-light-spectrum-label,
.pv-light-material {
  fill: var(--text);
  font-weight: 800;
}

.pv-light-section-title {
  font-size: 17px;
}

.pv-light-case-title {
  font-size: 15px;
}

.pv-light-spectrum-label {
  font-size: 14px;
}

.pv-light-spectrum-label--white {
  fill: #ffffff;
  paint-order: stroke fill;
  stroke: rgba(18, 24, 34, 0.34);
  stroke-width: 2.5px;
}

.pv-light-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 48%, transparent);
  stroke-width: 2;
}

.pv-light-spectrum-uv {
  fill: #7651a8;
  stroke: #503376;
  stroke-width: 1.5;
}

.pv-light-spectrum-ir {
  fill: color-mix(in srgb, #efb35f 72%, var(--surface));
  stroke: color-mix(in srgb, #a86822 72%, var(--border));
  stroke-width: 1.5;
}

.pv-light-case-card,
.pv-light-threshold-box {
  fill: color-mix(in srgb, var(--bg) 48%, var(--surface));
  stroke: var(--border);
  stroke-width: 1.5;
}

.pv-light-case-card--useful {
  fill: color-mix(in srgb, #dff2e2 62%, var(--surface));
  stroke: color-mix(in srgb, #4f9760 56%, var(--border));
}

.pv-light-case-card--heat {
  fill: color-mix(in srgb, #f9e4cd 60%, var(--surface));
  stroke: color-mix(in srgb, #c57a2d 56%, var(--border));
}

.pv-light-threshold-box {
  fill: color-mix(in srgb, var(--accentSoft) 45%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 25%, var(--border));
}

.pv-light-band-line {
  stroke: var(--text);
  stroke-width: 2.2;
}

.pv-light-band-label {
  fill: var(--muted);
  font-size: 11px;
}

.pv-light-transmitted-photon {
  fill: none;
  stroke: #c98614;
  stroke-width: 3;
  stroke-dasharray: 7 6;
}

.pv-light-excitation {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
}

.pv-light-thermalisation {
  fill: none;
  stroke: #df6534;
  stroke-width: 2.8;
  stroke-dasharray: 6 5;
}

.pv-light-material {
  font-size: 14px;
}

.pv-light-material-value {
  fill: var(--muted);
  font-size: 13px;
}

.pv-light-primer-svg .pv-svg-small-label,
.pv-light-primer-svg .pv-light-material-value,
.pv-light-primer-svg .pv-light-band-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 88%, transparent);
  stroke-width: 2px;
  stroke-linejoin: round;
}

* {
  box-sizing: border-box;
}

html {
  font-size: calc(16px * var(--font-scale));
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-base);
  background: var(--bg);
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.wrap {
  width: min(1600px, calc(100% - 48px));
  margin: 0 auto;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
}

.header-row h1 {
  margin: 0;
  font-size: 1.3rem;
}

nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

nav a {
  text-decoration: none;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 10px;
}

nav a.active,
nav a:hover {
  background: var(--accentSoft);
  color: var(--accent);
}

.nav-menu {
  position: relative;
  z-index: 30;
}

.nav-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.nav-menu-trigger::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
  transition: transform 0.16s ease;
}

.nav-menu:hover .nav-menu-trigger::after,
.nav-menu:focus-within .nav-menu-trigger::after {
  transform: translateY(1px) rotate(180deg);
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 80;
  display: grid;
  min-width: 190px;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}

.nav-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 7px;
}

.nav-menu:hover .nav-submenu,
.nav-menu:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

nav .nav-submenu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text);
  white-space: nowrap;
}

nav .nav-submenu a:hover,
nav .nav-submenu a:focus-visible,
nav .nav-submenu a.active {
  background: var(--accentSoft);
  color: var(--accent);
  outline: none;
}

.nav-submenu-note {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.accessibility-menu {
  position: relative;
}

.accessibility-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
}

.accessibility-trigger-label {
  font-weight: 600;
}

.accessibility-trigger:hover,
.accessibility-trigger[aria-expanded="true"] {
  background: var(--accentSoft);
  color: var(--accent);
}

.accessibility-current {
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
}

.accessibility-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
}

.accessibility-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  min-width: 280px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.accessibility-section + .accessibility-section {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.accessibility-section-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.accessibility-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
}

.accessibility-option:hover,
.accessibility-option.active {
  background: var(--accentSoft);
  color: var(--accent);
}

.accessibility-option.active::after {
  content: "Selected";
  font-size: 0.78rem;
  font-weight: 700;
}

.accessibility-inline-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.accessibility-inline-options-stack .accessibility-option-inline {
  min-width: calc(50% - 4px);
}

.accessibility-option-inline {
  flex: 1 1 0;
  justify-content: center;
  text-align: center;
}

.accessibility-size-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.accessibility-size-button {
  min-width: 48px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.accessibility-size-button:hover:not([disabled]) {
  background: var(--accentSoft);
  color: var(--accent);
}

.accessibility-size-button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.accessibility-size-readout {
  min-width: 58px;
  text-align: center;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--text);
}

main {
  padding: 22px 0 36px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
  margin-bottom: 18px;
}

.photovoltaics-page {
  min-height: calc(100vh - 78px);
}

.photovoltaics-hero {
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 88% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
    var(--surface);
}

.photovoltaics-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.photovoltaics-hero h2 {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 1;
}

.photovoltaics-hero > p:last-child {
  max-width: 820px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
}

.photovoltaics-history {
  display: block;
  padding: clamp(24px, 3vw, 40px);
  overflow: visible;
}

.photovoltaics-history-heading {
  margin-bottom: 18px;
}

.photovoltaics-history-heading .photovoltaics-eyebrow {
  margin-bottom: 4px;
}

.photovoltaics-history-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2.25rem);
}

.photovoltaics-history-layout {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 2vw, 30px);
}

.photovoltaics-background-tabs {
  display: flex;
  position: relative;
  z-index: 4;
  flex-direction: column;
  align-items: flex-start;
  width: 100px;
  gap: 8px;
}

.photovoltaics-background-tab {
  display: grid;
  position: relative;
  width: 100px;
  min-height: 44px;
  padding: 0 36px 0 14px;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 7px 22px 22px 7px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--text) 8%, transparent);
  transition: width 0.24s cubic-bezier(0.2, 0.76, 0.22, 1), border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.photovoltaics-background-tab::after {
  content: "";
  position: absolute;
  right: 17px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.24s ease, opacity 0.16s ease;
}

.photovoltaics-background-tab-short,
.photovoltaics-background-tab-long {
  grid-area: 1 / 1;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.14s ease, transform 0.24s ease;
}

.photovoltaics-background-tab-short {
  opacity: 1;
  transform: translateX(0);
}

.photovoltaics-background-tab-long {
  opacity: 0;
  transform: translateX(-10px);
}

.photovoltaics-background-tab:hover,
.photovoltaics-background-tab:focus-visible {
  z-index: 6;
  width: min(410px, calc(100vw - 160px));
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accentSoft) 56%, var(--surface));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 18%, transparent);
}

.photovoltaics-background-tab:hover::after,
.photovoltaics-background-tab:focus-visible::after {
  opacity: 1;
  transform: translateX(4px) rotate(45deg);
}

.photovoltaics-background-tab:hover .photovoltaics-background-tab-short,
.photovoltaics-background-tab:focus-visible .photovoltaics-background-tab-short {
  opacity: 0;
  transform: translateX(10px);
}

.photovoltaics-background-tab:hover .photovoltaics-background-tab-long,
.photovoltaics-background-tab:focus-visible .photovoltaics-background-tab-long {
  opacity: 1;
  transform: translateX(0);
}

.photovoltaics-background-tab:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.photovoltaics-background-tab.is-active,
.photovoltaics-background-tab[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

.photovoltaics-background-tab.is-active:hover,
.photovoltaics-background-tab.is-active:focus-visible,
.photovoltaics-background-tab[aria-selected="true"]:hover,
.photovoltaics-background-tab[aria-selected="true"]:focus-visible {
  background: var(--accent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 34%, transparent);
}

[data-pv-background-panel][hidden] {
  display: none;
}

.photovoltaics-history-content {
  display: grid;
  position: relative;
  z-index: 1;
  min-width: 0;
  gap: 14px;
}

@media (min-width: 761px) {
  .photovoltaics-history-content.is-sticky {
    position: sticky;
    top: 16px;
    align-self: start;
  }
}

.photovoltaics-history-topic {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 62%, var(--surface));
}

.photovoltaics-history-topic h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
}

.photovoltaics-history-topic p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

.photovoltaics-history-topic--definition {
  padding: clamp(18px, 2.2vw, 30px);
}

.photovoltaics-definition-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.72fr) minmax(600px, 1.28fr);
  align-items: center;
  gap: clamp(22px, 3vw, 46px);
}

.photovoltaics-definition-copy h3 {
  margin-bottom: 12px;
  font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.photovoltaics-history-topic .photovoltaics-definition-lead {
  margin-bottom: 12px;
  color: var(--text);
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  font-weight: 700;
  line-height: 1.5;
}

.photovoltaics-definition-copy p + p {
  margin-top: 12px;
}

.photovoltaics-technology-date {
  margin-bottom: 7px !important;
  color: var(--accent) !important;
  font-size: 0.78rem !important;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.photovoltaics-source-note {
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
}

.photovoltaics-source-note a {
  color: var(--accent);
  text-underline-offset: 2px;
}

.pv-module-intro-grid {
  align-items: start;
}

.pv-module-intro-figure {
  align-self: center;
}

.pv-module-intro-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.55;
  text-align: center;
}

.pv-module-complete-overview {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 14px;
  overflow: visible;
}

.pv-complete-illumination {
  pointer-events: none;
}

.pv-complete-sun-halo {
  fill: rgb(255 224 112 / 20%);
  filter: blur(5px);
}

.pv-complete-sun-disc {
  fill: #f8cb4d;
  stroke: #b97908;
  stroke-width: 2.4;
}

.pv-complete-sun-rays {
  fill: none;
  stroke: #c98208;
  stroke-linecap: round;
  stroke-width: 3.2;
}

.pv-complete-photon-rays {
  fill: none;
  stroke: #cf8707;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.pv-complete-photon-head {
  fill: #cf8707;
}

.pv-native-complete-sun,
.pv-native-complete-rays {
  pointer-events: none;
}

.pv-native-complete-sun .pv-native-complete-sun-halo {
  fill: rgb(250 204 62 / 16%);
  stroke: none;
}

/* One continuous visual window: assembled module first, exploded stack below. */
.pv-module-unified-window {
  width: 100%;
  overflow: hidden;
  border: 1.4px solid var(--border);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 96%, #eaf2ff);
}

.pv-module-unified-window > svg {
  display: block;
  width: 100%;
  height: auto;
}

.pv-module-unified-window > .pv-module-complete-overview {
  margin: 0;
}

.pv-module-unified-window > .pv-module-exploded-view {
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
}

.pv-module-unified-window > .pv-modern-module-svg.pv-module-exploded-view {
  background: transparent;
}

.pv-module-unified-window > .pv-module-complete-overview .pv-complete-board,
.pv-module-unified-window > .pv-module-exploded-view .pv-svg-board {
  display: none;
}

/* Native and generated assembled views share the exact 2026 sun treatment. */
svg.photovoltaic-effect-svg .pv-standard-sun .pv-standard-sun-halo {
  fill: rgb(255 224 112 / 20%);
  filter: blur(5px);
  stroke: none;
  stroke-width: 0;
}

svg.photovoltaic-effect-svg .pv-standard-sun .pv-standard-sun-disc {
  fill: #f8cb4d;
  stroke: #b97908;
  stroke-width: 2.4px;
}

svg.photovoltaic-effect-svg .pv-standard-sun .pv-standard-sun-spokes {
  fill: none;
  stroke: #c98208;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2px;
}

svg.photovoltaic-effect-svg .pv-standard-photon-rays > .pv-standard-photon-path {
  fill: none;
  stroke: #cf8707;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8px;
}

svg.photovoltaic-effect-svg .pv-svg-arrow-photon,
svg.photovoltaic-effect-svg .pv-photon-arrowhead,
svg.photovoltaic-effect-svg [class$="-photon-head"] {
  fill: #cf8707;
}

.pv-complete-board {
  fill: color-mix(in srgb, var(--surface) 96%, #eaf2ff);
  stroke: var(--border);
  stroke-width: 1.4;
}

.pv-complete-heading {
  fill: #164f96;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.7px;
}

.pv-complete-record-name {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 760;
}

.pv-complete-instruction {
  fill: #2463cf;
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 730;
}

.pv-complete-control {
  cursor: pointer;
  outline: none;
}

.pv-complete-whole-control {
  cursor: pointer;
  outline: none;
}

.pv-complete-whole-control:hover .pv-svg-layer-shape,
.pv-complete-whole-control:focus-visible .pv-svg-layer-shape {
  filter: brightness(1.08) drop-shadow(0 0 4px rgb(27 99 213 / 38%));
}

.pv-complete-whole-control:focus-visible .pv-complete-frame,
.pv-complete-whole-control:focus-visible [class*="complete-frame"],
.pv-complete-whole-control:focus-visible .pv-module-2008-frame,
.pv-complete-whole-control:focus-visible .pv-module-2009-roll-module {
  stroke: #1765db;
  stroke-width: 3px;
}

.pv-complete-control:hover .pv-svg-layer-shape,
.pv-complete-control:focus-visible .pv-svg-layer-shape {
  filter: brightness(1.12) drop-shadow(0 0 4px rgb(27 99 213 / 45%));
  stroke: #1765db;
  stroke-width: 2.7px;
}

.pv-complete-cover-overlay {
  fill: rgb(210 243 252 / 30%);
  fill-opacity: 0.38;
  stroke: rgb(112 183 205 / 76%);
  stroke-width: 1.1;
  pointer-events: none;
}

.pv-complete-cover-highlight {
  fill: none;
  pointer-events: none;
  stroke: rgb(255 255 255 / 78%);
  stroke-linecap: round;
  stroke-width: 1.25;
}

.pv-complete-cover-strip {
  fill: rgb(213 244 252 / 88%);
  stroke: #58a8c0;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-complete-exposed-face {
  fill: rgb(255 255 255 / 3%);
  stroke: #f3c54c;
  stroke-dasharray: 7 5;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-complete-rear-layer {
  fill: #d9dee4;
  stroke: #5e6975;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-complete-rear-layer--transparent {
  fill: #c8eef5;
  fill-opacity: 0.58;
}

.pv-complete-support {
  fill: #707d89;
  stroke: #303b46;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-complete-output-lead {
  fill: none;
  stroke: #283541;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.pv-complete-part-label {
  fill: #f7fbff;
  font-family: var(--font-family-base);
  font-size: 9.25px;
  font-weight: 780;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgb(18 38 64 / 88%);
  stroke-width: 2.2px;
}

.pv-complete-part-label--top,
.pv-complete-part-label--rear,
.pv-complete-part-label--support {
  fill: #172534;
  stroke: rgb(255 255 255 / 92%);
}

.pv-complete-part-label--exposed {
  fill: #f9fcff;
  stroke: rgb(21 47 83 / 94%);
}

.pv-complete-surface {
  fill: #2d66b6;
  stroke: #153f78;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-complete-surface--space,
.pv-complete-surface--protected {
  fill: #2857a0;
}

.pv-complete-surface--thin-film,
.pv-complete-surface--tiles {
  fill: #176f78;
  stroke: #0f4c54;
}

.pv-complete-surface--flexible,
.pv-complete-surface--ribbon {
  fill: #366ba6;
}

.pv-complete-surface--shingle {
  fill: #263c52;
  stroke: #142434;
}

.pv-complete-surface--abc {
  fill: #182f50;
}

.pv-complete-surface--tandem {
  fill: #6656a6;
  stroke: #433477;
}

.pv-complete-surface--matrix {
  fill: #dce8f3;
  stroke: #5f7285;
}

.pv-complete-laminate-edge {
  fill: #18477d;
  stroke: #173b63;
  stroke-width: 1.5;
}

.pv-complete-frame {
  fill: #67727d;
  stroke: #303a44;
  stroke-linejoin: round;
  stroke-width: 2.4;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 18%));
}

.pv-complete-frame--dark {
  fill: #343b43;
  stroke: #171d23;
}

.pv-complete-rubber-belt {
  fill: #171d22;
  stroke: #050708;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-complete-insulated-gasket {
  fill: #c58a2d;
  stroke: #855714;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-complete-edge-seal {
  fill: rgb(105 126 139 / 40%);
  stroke: #4f6978;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

[data-pv-assembled-module="2025"] .pv-complete-surface {
  fill: #a75673;
  stroke: #713348;
}

.pv-complete-edge-closure {
  fill: rgb(91 112 94 / 36%);
  stroke: #3f5b49;
  stroke-linejoin: round;
  stroke-width: 1.55;
}

.pv-complete-hinge-bracket {
  fill: #697581;
  stroke: #2f3b47;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-complete-hinge-pin {
  fill: #c8d0d8;
  stroke: #2f3b47;
  stroke-width: 1.4;
}

.pv-complete-hinge-lock {
  fill: #aeb9c3;
  stroke: #34414d;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

[data-pv-assembled-module="1959"] .pv-complete-rear-layer {
  fill: #263746;
  stroke: #111e29;
  stroke-width: 2.2;
}

[data-pv-assembled-module="1962"] .pv-complete-frame {
  fill: #aeb3b8;
  stroke: #686e74;
}

[data-pv-assembled-module="1962"] .pv-complete-rear-layer {
  fill: #d7cfb5;
  stroke: #8b8165;
}

[data-pv-assembled-module="1963"] .pv-complete-edge-seal {
  fill: rgb(175 126 70 / 58%);
  stroke: #79512d;
}

.pv-complete-support--plate {
  fill: #628b69;
  stroke: #355b3d;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-complete-support--shingle {
  fill: #263c52;
  stroke: #142434;
  stroke-width: 1.4;
}

.pv-complete-c-rail {
  fill: #74808a;
  stroke: #303b45;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-complete-c-rail-web {
  fill: #4b5863;
  stroke: #27333d;
  stroke-linejoin: round;
  stroke-width: 1.25;
}

.pv-complete-c-rail-return {
  fill: #aeb8c0;
  stroke: #38434d;
  stroke-linejoin: round;
  stroke-width: 1.1;
}

[data-pv-assembled-module="1992"] .pv-complete-thin-film-lines--dense {
  opacity: 0.96;
  stroke: #c9f4f6;
  stroke-width: 0.78;
}

[data-pv-assembled-module="2021"] .pv-complete-surface,
[data-pv-assembled-module="2023"] .pv-complete-surface {
  fill: #285d9f;
  stroke: #173f70;
}

[data-pv-assembled-module="2021"] .pv-complete-cell-grid,
[data-pv-assembled-module="2023"] .pv-complete-cell-grid {
  stroke: rgb(238 248 255 / 96%);
  stroke-width: 1.28;
}

.pv-complete-cell-grid,
.pv-complete-flex-grid,
.pv-complete-tandem-grid,
.pv-complete-abc-seams {
  fill: none;
  stroke: rgb(225 241 255 / 90%);
  stroke-width: 1.15;
}

.pv-complete-thin-film-lines {
  fill: none;
  stroke: rgb(205 244 232 / 86%);
  stroke-width: 1.15;
}

.pv-complete-thin-film-lines--dense {
  stroke-width: 0.42;
}

.pv-complete-cell-circle {
  fill: #234f9a;
  stroke: #dcecff;
  stroke-width: 1.15;
}

.pv-complete-tile-seams {
  fill: none;
  stroke: #f1d79c;
  stroke-width: 3.2;
}

.pv-complete-shingle-lines {
  fill: none;
  stroke: rgb(194 211 226 / 62%);
  stroke-width: 1.4;
}

.pv-complete-shingle-cell {
  fill: #2c5fa9;
  stroke: rgb(222 238 255 / 92%);
  stroke-width: 0.8;
}

.pv-complete-triple-edge {
  fill: none;
  pointer-events: none;
  stroke-width: 2.2;
}

.pv-complete-triple-edge--top {
  stroke: #bb80d1;
}

.pv-complete-triple-edge--middle {
  stroke: #7d9ed4;
}

.pv-complete-triple-edge--bottom {
  stroke: #4e69a5;
}

.pv-complete-tandem-highlight {
  fill: none;
  stroke: #d8bef5;
  stroke-width: 3;
}

.pv-complete-matrix-cell {
  fill: #4854a9;
  stroke: #f0f5ff;
  stroke-width: 0.8;
}

.pv-complete-surface-note {
  fill: #f5f8ff;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 760;
  paint-order: stroke;
  stroke: #182f50;
  stroke-width: 2px;
}

.pv-complete-flex-outline {
  fill: none;
  stroke: #173b63;
  stroke-width: 2.2;
}

.pv-complete-rear-box {
  fill: #3e4a56;
  stroke: #202a34;
  stroke-width: 1.6;
}

.pv-complete-rear-box-text {
  fill: #f4f7fa;
  font-family: var(--font-family-base);
  font-size: 9.25px;
  font-weight: 750;
}

.pv-complete-output-label {
  fill: #203246;
  font-family: var(--font-family-base);
  font-size: 9.5px;
  font-weight: 760;
  paint-order: stroke;
  pointer-events: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 2px;
}

.pv-complete-output-label--light {
  fill: #f7fbff;
  stroke: rgb(27 42 58 / 88%);
}

.pv-complete-terminal {
  fill: #f8fbff;
  stroke: #273646;
  stroke-width: 2;
}

.pv-complete-output-land {
  fill: #d4a13f;
  stroke: #77561c;
  stroke-width: 1.5;
}

.pv-complete-output-plate {
  fill: #586675;
  stroke: #263442;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.pv-complete-integrated-routing {
  fill: none;
  stroke: #f0bd38;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.pv-complete-electrode-strip {
  fill: #d7a63f;
  stroke: #77561c;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-complete-electrode-plane {
  fill: #4e5964;
  fill-opacity: 0.82;
  stroke: #28333d;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-complete-scribe-triplets {
  fill: none;
  stroke-linecap: round;
  stroke-width: 0.85;
}

.pv-complete-scribe-triplets--p1 {
  stroke: rgb(246 224 231 / 88%);
}

.pv-complete-scribe-triplets--p2 {
  stroke: rgb(255 255 255 / 94%);
}

.pv-complete-scribe-triplets--p3 {
  stroke: rgb(91 37 61 / 78%);
}

.pv-complete-space-mount {
  fill: none;
  stroke: #3f4d5c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-complete-caption {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 650;
}

.pv-native-complete-visual {
  pointer-events: none;
}

.pv-native-complete-hit--cells {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.pv-native-complete-glass-sheen {
  fill: none;
  stroke: rgb(111 211 235 / 82%);
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
}

.pv-native-complete-top-hit {
  fill: none;
  stroke: transparent;
  stroke-linejoin: round;
  stroke-width: 22;
  pointer-events: stroke;
}

.pv-native-complete-top-focus {
  fill: none;
  stroke: transparent;
  stroke-linejoin: round;
  stroke-width: 2;
  pointer-events: none;
}

.pv-native-complete-frame-hit {
  fill: rgb(77 90 104 / 0.1%);
  stroke: transparent;
  stroke-width: 1;
  pointer-events: fill;
}

.pv-native-complete-receiver-plate {
  fill: #657482;
  stroke: #2f3c49;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-native-complete-microcells {
  fill: none;
  stroke: #5f3fa8;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  stroke-width: 5;
  pointer-events: none;
}

.pv-native-complete-control--cells:hover .pv-native-complete-hit,
.pv-native-complete-control--cells:focus-visible .pv-native-complete-hit {
  fill: rgb(26 103 219 / 9%);
  stroke: #1765db;
  stroke-width: 2.2px;
}

.pv-module-2009-assembled-barrier {
  fill: rgb(190 236 246 / 30%);
  stroke: #6bc4d7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.pv-assembled-transparent-cover {
  fill-opacity: 0.32 !important;
  pointer-events: none;
  stroke: rgb(83 177 204 / 82%) !important;
  stroke-linejoin: round;
  stroke-width: 1.7px !important;
}

.pv-native-complete-control text {
  display: none;
}

.pv-assembled-exact-grid {
  opacity: 0.82;
  stroke-width: 0.52px !important;
}

.pv-assembled-centre-split {
  opacity: 1;
  stroke-width: 2.2px !important;
}

.pv-assembled-receiver-cues {
  fill: #6845a7;
  opacity: 0.9;
  pointer-events: none;
  stroke: #2f255e;
  stroke-width: 0.55px;
}

.pv-module-2008-panel-tubes--complete {
  filter: drop-shadow(0 1px 0 rgb(15 23 42 / 18%));
}

.pv-module-2008-panel-tubes--complete .pv-module-2008-panel-tube-shell {
  opacity: 0.82;
  stroke-width: 10px;
}

.pv-module-2008-panel-tubes--complete .pv-module-2008-panel-tube-core {
  stroke-width: 4.5px;
}

.pv-module-reference-note {
  margin: 12px 0 0 !important;
  text-align: left;
}

.pv-module-frame-isometric {
  fill: url(#pvModuleAluminiumTop);
  stroke: #4b5563;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / 18%));
}

.pv-module-frame-lip {
  fill: url(#pvModuleAluminiumEdge);
  stroke: #46515d;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-frame-lip--side {
  fill: #66717d;
}

.pv-module-frame-gasket {
  fill: none;
  stroke: #28323c;
  stroke-linejoin: round;
  stroke-width: 4.5;
}

.pv-module-frame-mitres path {
  fill: none;
  stroke: #626d78;
  stroke-width: 1.4;
}

.pv-module-frame-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 72%);
  stroke-linecap: round;
  stroke-width: 1.4;
}

.pv-module-frame {
  fill: color-mix(in srgb, var(--text) 11%, var(--surface));
  stroke: color-mix(in srgb, var(--text) 65%, var(--surface));
  stroke-width: 9;
}

.pv-module-glass {
  fill: color-mix(in srgb, #bde8f5 52%, var(--surface));
  stroke: #4f9db3;
  stroke-width: 2;
  filter: drop-shadow(0 2px 1px rgb(20 94 117 / 12%));
}

.pv-module-glass-side {
  fill: color-mix(in srgb, #79c4dc 70%, var(--surface));
  stroke: #4f9db3;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-encapsulant {
  fill: color-mix(in srgb, #e9f3ca 64%, var(--surface));
  stroke: #93aa52;
  stroke-width: 1.5;
  opacity: 0.92;
}

.pv-module-cell-field {
  fill: color-mix(in srgb, #173f8a 88%, var(--surface));
  stroke: #0f2859;
  stroke-width: 2;
  filter: drop-shadow(0 2px 1px rgb(15 40 89 / 15%));
}

.pv-module-cell-string rect {
  fill: #2458aa;
  stroke: #b8d8ff;
  stroke-width: 1.5;
}

.pv-module-cell-string polygon {
  fill: #2c61b4;
  stroke: #b8d8ff;
  stroke-linejoin: round;
  stroke-width: 1.2;
}

.pv-module-cell-string path {
  fill: none;
  stroke: #f1f5f9;
  stroke-width: 2.2;
  opacity: 0.92;
}

.pv-module-backsheet {
  fill: color-mix(in srgb, #dce3ea 80%, var(--surface));
  stroke: color-mix(in srgb, var(--text) 65%, var(--surface));
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / 12%));
}

.pv-module-backsheet-side {
  fill: color-mix(in srgb, #aeb9c5 72%, var(--surface));
  stroke: color-mix(in srgb, var(--text) 65%, var(--surface));
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-layer-thickness {
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-layer-thickness--glass {
  fill: color-mix(in srgb, #89c8dc 70%, var(--surface));
  stroke: #4f9db3;
}

.pv-module-layer-thickness--backsheet {
  fill: color-mix(in srgb, #aeb9c5 72%, var(--surface));
  stroke: color-mix(in srgb, var(--text) 65%, var(--surface));
}

.pv-module-junction-box {
  fill: color-mix(in srgb, var(--text) 82%, var(--surface));
  stroke: var(--text);
  stroke-width: 2;
}

.pv-module-cable,
.pv-module-callout {
  fill: none;
  stroke: var(--text);
  stroke-width: 3;
}

.pv-module-photon-ray {
  fill: none;
  stroke: #d18b00;
  stroke-linecap: round;
  stroke-width: 4;
  filter: drop-shadow(0 0 1px var(--surface));
}

.pv-module-ray-label {
  fill: #9a6700;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 700;
}

[data-pv-module-background-panel][hidden] {
  display: none;
}

.pv-module-1950-panel {
  fill: #24354b;
  stroke: #111c2b;
  stroke-linejoin: round;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 18%));
}

.pv-module-1950-cells rect {
  fill: #355f9f;
  stroke: #d7e8ff;
  stroke-width: 1.2;
}

.pv-module-1950-interconnects path {
  fill: none;
  stroke: #e2b85c;
  stroke-width: 1.8;
}

.pv-module-1950-select-prompt {
  fill: var(--accent);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 800;
}

.pv-module-1950-output-wire {
  fill: none;
  stroke: var(--text);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-1950-wire-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 800;
}

.pv-module-1950-transmitter {
  fill: color-mix(in srgb, var(--text) 82%, var(--surface));
  stroke: var(--text);
  stroke-width: 2;
}

.pv-module-1950-terminal {
  fill: #f2c94c;
  stroke: #604b05;
  stroke-width: 1.5;
}

.pv-module-1950-transmitter-sub {
  fill: color-mix(in srgb, #ffffff 76%, transparent);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 700;
}

.pv-module-layer-label--light.pv-svg-layer-label {
  fill: #ffffff;
}

.pv-svg-layer-control:hover .pv-module-layer-label--light,
.pv-svg-layer-control:focus-visible .pv-module-layer-label--light {
  fill: #ffffff;
}

.pv-module-1950-explode {
  fill: none;
  stroke: #7c8a99;
  stroke-dasharray: 6 6;
  stroke-width: 1.8;
}

.pv-module-1950-insulator {
  fill: color-mix(in srgb, #d5a65c 58%, var(--surface));
  stroke: #9c6c28;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.pv-module-1950-insulator-edge {
  fill: #b98236;
  stroke: #80551c;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-1950-shell {
  fill: url(#pvModule1950Shell);
  stroke: #53606d;
  stroke-linejoin: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / 14%));
}

.pv-module-1950-shell-edge {
  fill: #64717e;
  stroke: #44505c;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-1950-metric-band {
  fill: color-mix(in srgb, var(--accent) 7%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 28%, var(--border));
  stroke-width: 1.5;
}

.pv-module-1950-metric-title,
.pv-module-1950-metric {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 800;
}

.pv-module-1950-metric-title {
  font-size: 18px;
}

.pv-module-1950-metric {
  font-size: 16px;
}

.pv-module-simple-component-badge {
  display: inline-flex;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 999px;
  background: var(--accentSoft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.pv-module-1959-ghost-paddle {
  fill: color-mix(in srgb, var(--accent) 5%, transparent);
  stroke: color-mix(in srgb, var(--accent) 52%, var(--muted));
  stroke-dasharray: 8 6;
  stroke-width: 2;
}

.pv-module-1959-ghost-boom {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 52%, var(--muted));
  stroke-dasharray: 7 5;
  stroke-width: 2;
}

.pv-module-1959-paddle {
  fill: #697681;
  stroke: #303b46;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 18%));
}

.pv-module-1959-cell-field {
  fill: #315fa9;
  stroke: #163668;
  stroke-width: 2;
}

.pv-module-1959-explode-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-dasharray: 5 7;
  stroke-width: 1.4;
}

.pv-module-1959-cell-grid {
  fill: none;
  stroke: #c9ddff;
  stroke-width: 1.35;
}

.pv-module-1959-layer-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 72%);
  stroke-width: 2.4px;
}

.pv-module-1959-layer-text.pv-module-layer-label--light {
  fill: #fff;
  stroke: rgb(15 45 91 / 70%);
}

.pv-module-1959-interconnect-plane {
  fill: #f8edc8;
  stroke: #9a7219;
  stroke-width: 2;
}

.pv-module-1959-interconnect {
  fill: none;
  stroke: #b37908;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-1959-insulator {
  fill: #d9f1f2;
  stroke: #4e9bad;
  stroke-width: 2;
}

.pv-module-1959-substrate {
  fill: #65727e;
  stroke: #303b46;
  stroke-width: 2;
}

.pv-module-1959-substrate-edge {
  fill: #3f4a55;
  stroke: #26313c;
  stroke-width: 1.5;
}

.pv-module-1959-bracket {
  fill: #5d6974;
  stroke: #26313c;
  stroke-width: 2;
}

.pv-module-1959-lock {
  fill: none;
  stroke: #bc7915;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.pv-module-1959-connector {
  fill: #344151;
  stroke: #17202b;
  stroke-width: 2;
}

.pv-module-1959-terminal {
  fill: #f3c241;
  stroke: #76500d;
  stroke-width: 1.5;
}

.pv-module-1959-direct-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 800;
}

.pv-module-1959-boom {
  fill: none;
  stroke: #586570;
  stroke-linecap: round;
  stroke-width: 10;
}

.pv-module-1959-hinge {
  fill: #d6a13d;
  stroke: #6f4a0c;
  stroke-width: 2.2;
}

.pv-module-1959-body {
  fill: url(#pvModule1959Body);
  stroke: #44515d;
  stroke-width: 2.3;
  filter: drop-shadow(0 3px 3px rgb(15 23 42 / 18%));
}

.pv-module-1959-body-ring {
  fill: none;
  stroke: rgb(255 255 255 / 55%);
  stroke-width: 1.8;
}

.pv-module-1959-body-title {
  fill: #25313d;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 800;
}

.pv-module-1959-harness {
  fill: none;
  stroke: #d18b00;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-1959-harness--return {
  stroke: #2672d8;
}

.pv-module-1959-battery {
  fill: #344151;
  stroke: #17202b;
  stroke-width: 2;
}

.pv-module-1959-metric {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 800;
}

.pv-module-1962-explode-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-dasharray: 5 7;
  stroke-width: 1.4;
}

.pv-module-1962-sapphire {
  fill: url(#pvModule1962Sapphire);
  stroke: #4aa6bf;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1962-sapphire-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 86%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1962-frame {
  fill: #c4cad2;
  stroke: #555f6b;
  stroke-linejoin: round;
  stroke-width: 2;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / 12%));
}

.pv-module-1962-seal {
  fill: none;
  stroke: #b8780a;
  stroke-dasharray: 5 3;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.pv-module-1962-cell {
  fill: #315fa9;
  stroke: #163668;
  stroke-width: 1.5;
  filter: drop-shadow(1px 2px 1px rgb(15 23 42 / 16%));
}

.pv-module-1962-cell-bus {
  fill: none;
  stroke: #d8bd68;
  stroke-width: 1.8;
}

.pv-module-1962-compliant-link {
  fill: none;
  stroke: #a9b2bc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 7;
}

.pv-module-1962-expansion-pad {
  fill: #a17b45;
  stroke: #5e4728;
  stroke-width: 1.2;
}

.pv-module-1962-ceramic {
  fill: #eee9dc;
  stroke: #8b806a;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1962-ceramic-metallisation {
  fill: #d8cfb9;
  stroke: #97845e;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.pv-module-1962-ceramic-edge {
  fill: #b8ae99;
  stroke: #716957;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-1962-ceramic-edge--front {
  fill: #bdb29c;
}

.pv-module-1962-ceramic-edge--side {
  fill: #a69b85;
}

.pv-module-1962-layer-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 76%);
  stroke-width: 2.5px;
}

.pv-module-1963-explode-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-dasharray: 5 7;
  stroke-width: 1.4;
}

.pv-module-1963-cover {
  fill: url(#pvModule1963Cover);
  stroke: #c99853;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1963-cover-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 88%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1963-frame {
  fill: #e3c891;
  stroke: #8d6733;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-1963-seal {
  fill: none;
  stroke: #7d5531;
  stroke-dasharray: 5 3;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.pv-module-1963-cell-bed {
  fill: #d8c99f;
  stroke: #8b7646;
  stroke-width: 2;
}

.pv-module-1963-cell {
  fill: #21206f;
  stroke: #0e174c;
  stroke-width: 1.4;
  filter: drop-shadow(1px 2px 1px rgb(15 23 42 / 18%));
}

.pv-module-1963-interconnect-plane {
  fill: #f4ead0;
  stroke: #a88442;
  stroke-width: 2;
}

.pv-module-1963-interconnect {
  fill: none;
  stroke: #b47718;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.pv-module-1963-interconnect--contact {
  stroke-width: 2;
}

.pv-module-1963-interconnect--bus {
  stroke-width: 3.4;
}

.pv-module-1963-terminal {
  fill: #d6a13d;
  stroke: #70480a;
  stroke-width: 1.5;
}

.pv-module-1963-carrier {
  fill: #e6e0ce;
  stroke: #8e8369;
  stroke-width: 2;
}

.pv-module-1963-rear {
  fill: #7b7468;
  stroke: #48423a;
  stroke-width: 2;
}

.pv-module-1963-rear-edge {
  fill: #554f47;
  stroke: #38332e;
  stroke-width: 1.5;
}

.pv-module-1963-lead {
  fill: none;
  stroke: #272f39;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-1963-feedthrough {
  fill: #d6a13d;
  stroke: #49300b;
  stroke-width: 1.5;
}

.pv-module-1963-layer-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 78%);
  stroke-width: 2.5px;
}

.pv-module-1973-explode-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-dasharray: 5 7;
  stroke-width: 1.4;
}

.pv-module-1973-silicone {
  fill: url(#pvModule1973Silicone);
  stroke: #62a4bf;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1973-silicone-edge {
  fill: rgb(148 205 227 / 64%);
  stroke: #4f91ad;
  stroke-width: 1.5;
}

.pv-module-1973-silicone-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 90%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1973-cell-bed {
  fill: #dcecf3;
  stroke: #7599a8;
  stroke-width: 2;
}

.pv-module-1973-cell {
  fill: #2758a7;
  stroke: #16366d;
  stroke-width: 1.6;
  filter: drop-shadow(1px 2px 1px rgb(15 23 42 / 20%));
}

.pv-module-1973-interconnect-plane {
  fill: #f7f0d8;
  stroke: #a98a4d;
  stroke-width: 2;
}

.pv-module-1973-interconnect {
  fill: none;
  stroke: #ba7918;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-1973-terminal {
  fill: #e0a72f;
  stroke: #664307;
  stroke-width: 1.5;
}

.pv-module-1973-board {
  fill: #7caa89;
  stroke: #3c704d;
  stroke-width: 2;
}

.pv-module-1973-board-edge {
  fill: #4d795b;
  stroke: #31583d;
  stroke-width: 1.5;
}

.pv-module-1973-rear-potting {
  fill: rgb(154 210 230 / 70%);
  stroke: #4f91ad;
  stroke-width: 2;
}

.pv-module-1973-rear-potting-edge {
  fill: #76b7cf;
  stroke: #407e95;
  stroke-width: 1.5;
}

.pv-module-1973-strain-relief {
  fill: #3c4652;
  stroke: #1f2933;
  stroke-width: 2;
}

.pv-module-1973-lead {
  fill: none;
  stroke: #252e38;
  stroke-linecap: round;
  stroke-width: 3.5;
}

.pv-module-1973-lead-end {
  fill: var(--surface);
  stroke: #252e38;
  stroke-width: 2.5;
}

.pv-module-1973-layer-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 82%);
  stroke-width: 2.5px;
}

.pv-module-1973-note-band {
  fill: color-mix(in srgb, #d8ebf3 54%, var(--surface));
  stroke: #9dbdca;
  stroke-width: 1.2;
}

.pv-module-1973-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 750;
}

.pv-module-1976-explode-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-dasharray: 5 7;
  stroke-width: 1.4;
}

.pv-module-1976-frame {
  fill: #929ca7;
  stroke: #414c58;
  stroke-linejoin: round;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-1976-frame-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 76%);
  stroke-linecap: round;
  stroke-width: 2;
}

.pv-module-1976-glass {
  fill: url(#pvModule1976Glass);
  stroke: #589db8;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1976-glass--rear {
  opacity: 0.88;
}

.pv-module-1976-glass-edge {
  fill: #82bfd5;
  stroke: #3e829c;
  stroke-width: 1.4;
}

.pv-module-1976-glass-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1976-resin {
  fill: url(#pvModule1976Resin);
  stroke: #b79d48;
  stroke-width: 1.8;
}

.pv-module-1976-resin--rear {
  opacity: 0.78;
}

.pv-module-1976-cell-bed {
  fill: #d8e6eb;
  stroke: #688995;
  stroke-width: 1.8;
}

.pv-module-1976-cell-row ellipse {
  fill: #284c87;
  stroke: #122e5e;
  stroke-width: 1.1;
  filter: drop-shadow(0 1px 1px rgb(15 23 42 / 24%));
  transition: filter 150ms ease, stroke-width 150ms ease;
}

.pv-svg-layer-control:hover .pv-module-1976-cell-row ellipse,
.pv-svg-layer-control:focus-visible .pv-module-1976-cell-row ellipse {
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgb(37 99 235 / 38%));
}

.pv-module-1976-interconnect-plane {
  fill: #f4ecd3;
  stroke: #a88641;
  stroke-width: 1.8;
}

.pv-module-1976-interconnect {
  fill: none;
  stroke: #bc7a13;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.7;
}

.pv-module-1976-terminal {
  fill: #e3aa36;
  stroke: #674407;
  stroke-width: 1.4;
}

.pv-module-1976-edge-belt {
  fill: #3f4851;
  stroke: #171e25;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.pv-module-1976-cable-collar {
  fill: #3d4650;
  stroke: #1f2730;
  stroke-width: 2;
}

.pv-module-1976-cable {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1976-cable--negative {
  stroke: #1f2933;
}

.pv-module-1976-cable--positive {
  stroke: #c63b32;
}

.pv-module-1976-layer-text,
.pv-module-1976-cable-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 84%);
  stroke-width: 2.6px;
}

.pv-module-1977-explode-guide {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 55%, transparent);
  stroke-dasharray: 5 7;
  stroke-width: 1.4;
}

.pv-module-1977-frame {
  fill: #818c98;
  stroke: #36414c;
  stroke-linejoin: round;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-1977-frame-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 76%);
  stroke-linecap: round;
  stroke-width: 2;
}

.pv-module-1977-glass {
  fill: url(#pvModule1977Glass);
  stroke: #4d96b3;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1977-glass-edge {
  fill: #7fbad0;
  stroke: #387c96;
  stroke-width: 1.4;
}

.pv-module-1977-glass-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1977-pvb {
  fill: url(#pvModule1977Pvb);
  stroke: #b68820;
  stroke-width: 1.8;
}

.pv-module-1977-pvb--rear {
  opacity: 0.82;
}

.pv-module-1977-cell-bed {
  fill: #d8e5ec;
  stroke: #627f8d;
  stroke-width: 1.8;
}

.pv-module-1977-cell-field ellipse,
.pv-module-1977-cell-field use {
  fill: #28579d;
  stroke: #153565;
  stroke-width: 0.85;
  filter: drop-shadow(0 1px 1px rgb(15 23 42 / 22%));
  transition: filter 150ms ease, stroke-width 150ms ease;
}

.pv-svg-layer-control:hover .pv-module-1977-cell-field ellipse,
.pv-svg-layer-control:hover .pv-module-1977-cell-field use,
.pv-svg-layer-control:focus-visible .pv-module-1977-cell-field ellipse,
.pv-svg-layer-control:focus-visible .pv-module-1977-cell-field use {
  stroke: var(--accent);
  stroke-width: 1.45;
  filter: drop-shadow(0 0 4px rgb(37 99 235 / 38%));
}

.pv-module-1977-mesh-plane {
  fill: #f5eed9;
  stroke: #a08753;
  stroke-width: 1.8;
}

.pv-module-1977-mesh {
  fill: none;
  stroke: #ad7219;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pv-module-1977-cross-tie {
  fill: none;
  stroke: #d09a31;
  stroke-dasharray: 5 4;
  stroke-width: 1.5;
}

.pv-module-1977-mylar {
  fill: #f2f4f1;
  stroke: #7a8790;
  stroke-width: 1.9;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1977-mylar-edge {
  fill: #c8ced0;
  stroke: #657078;
  stroke-width: 1.3;
}

.pv-module-1977-terminal-block {
  fill: #454f5a;
  stroke: #202934;
  stroke-width: 2;
}

.pv-module-1977-terminal {
  fill: #d9a52d;
  stroke: #5f430b;
  stroke-width: 1.5;
}

.pv-module-1977-terminal-polarity {
  fill: #15202a;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 900;
}

.pv-module-1977-layer-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 86%);
  stroke-width: 2.6px;
}

.pv-module-1977-note-band {
  fill: color-mix(in srgb, #e9f0f2 65%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1977-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 750;
}

.pv-module-1981-glass {
  fill: url(#pvModule1981Glass);
  stroke: #4592ad;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-1981-glass-edge {
  fill: #77b6cb;
  stroke: #337890;
  stroke-width: 1.4;
}

.pv-module-1981-glass-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1981-eva {
  fill: url(#pvModule1981Eva);
  stroke: #bd912b;
  stroke-width: 1.8;
}

.pv-module-1981-eva--rear {
  opacity: 0.84;
}

.pv-module-1981-cell-bed {
  fill: #2557a0;
  stroke: #173969;
  stroke-width: 1.9;
}

.pv-module-1981-cell-field {
  fill: none;
  stroke: #d7ebff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

.pv-module-1981-interconnect-plane {
  fill: #f1ead5;
  stroke: #9d8244;
  stroke-width: 1.8;
}

.pv-module-1981-copper-straps {
  fill: none;
  stroke: #b87320;
  stroke-linecap: round;
  stroke-width: 2.3;
}

.pv-module-1981-mesh-ties {
  fill: none;
  stroke: #d09a31;
  stroke-linecap: round;
  stroke-width: 3.2;
}

.pv-module-1981-backsheet {
  fill: #f4f1e8;
  stroke: #65717d;
  stroke-width: 1.9;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1981-backsheet-polyester {
  fill: #d6e2ee;
  stroke: #758493;
  stroke-width: 1;
}

.pv-module-1981-backsheet-foil {
  fill: #aeb8c2;
  stroke: #68737d;
  stroke-width: 1;
}

.pv-module-1981-backsheet-tedlar {
  fill: #eef0e8;
  stroke: #72796b;
  stroke-width: 1;
}

.pv-module-1981-junction-box {
  fill: #424c58;
  stroke: #1f2934;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgb(15 23 42 / 18%));
}

.pv-module-1981-junction-contact {
  fill: #d9a52d;
  stroke: #67490c;
  stroke-width: 1.5;
}

.pv-module-1981-junction-polarity {
  fill: #17212b;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 900;
}

.pv-module-1981-output-lead {
  fill: none;
  stroke: #1f2937;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1981-plug {
  fill: #dfe5ea;
  stroke: #1f2937;
  stroke-width: 2;
}

.pv-module-1981-layer-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 88%);
  stroke-width: 2.7px;
}

.pv-module-1981-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1981-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 750;
}

.pv-module-1984-glass {
  fill: url(#pvModule1984Glass);
  stroke: #4592ad;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-1984-glass-edge {
  fill: #77b6cb;
  stroke: #337890;
  stroke-width: 1.4;
}

.pv-module-1984-glass-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 92%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1984-eva {
  fill: url(#pvModule1984Eva);
  stroke: #b98a23;
  stroke-width: 1.8;
}

.pv-module-1984-eva--rear {
  opacity: 0.84;
}

.pv-module-1984-submodule-bed {
  fill: #24767d;
  stroke: #154e55;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-1984-submodule-seams {
  fill: none;
  stroke: #fff8de;
  stroke-width: 4.5;
}

.pv-module-1984-cell-stripes {
  fill: none;
  stroke: rgb(220 250 247 / 80%);
  stroke-width: 1.15;
}

.pv-module-1984-circuit-plane {
  fill: #f4edd8;
  stroke: #9d8244;
  stroke-width: 1.8;
}

.pv-module-1984-long-bus {
  fill: none;
  stroke: #a65f13;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1984-ribbon {
  fill: none;
  stroke: #ce8b2f;
  stroke-linecap: round;
  stroke-width: 2.6;
}

.pv-module-1984-tedlar {
  fill: #f0f1eb;
  stroke: #68737d;
  stroke-width: 1.9;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1984-tedlar-edge {
  fill: #cbd1d2;
  stroke: #6d777a;
  stroke-width: 1.2;
}

.pv-module-1984-frame {
  fill: #727d89;
  stroke: #303a45;
  stroke-linejoin: round;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-1984-edge-gasket {
  fill: #262f38;
  stroke: #e2a52b;
  stroke-width: 2;
}

.pv-module-1984-junction-box {
  fill: #424c58;
  stroke: #1f2934;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgb(15 23 42 / 18%));
}

.pv-module-1984-diode {
  fill: #f2b83c;
  stroke: #f2b83c;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pv-module-1984-output-lead {
  fill: none;
  stroke: #202a35;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1984-plug {
  fill: #dfe5ea;
  stroke: #202a35;
  stroke-width: 2;
}

.pv-module-1984-layer-text,
.pv-module-1984-jbox-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 88%);
  stroke-width: 2.7px;
}

.pv-module-1984-layer-text--light,
.pv-module-1984-jbox-text {
  fill: #fff;
  paint-order: normal;
  stroke: none;
}

.pv-module-1984-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1984-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 750;
}

.pv-module-1992-glass,
.pv-module-1992-rear-glass {
  fill: url(#pvModule1992Glass);
  stroke: #438ca6;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-1992-glass-edge,
.pv-module-1992-rear-glass-edge {
  fill: #76b4c7;
  stroke: #33778d;
  stroke-width: 1.4;
}

.pv-module-1992-glass-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 94%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1992-tco {
  fill: rgb(94 203 212 / 72%);
  stroke: #187884;
  stroke-width: 1.9;
}

.pv-module-1992-cds {
  fill: #f4e690;
  stroke: #b9a638;
  stroke-width: 1.9;
}

.pv-module-1992-cdte {
  fill: url(#pvModule1992CdTe);
  stroke: #572230;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1992-metal {
  fill: #aeb8c4;
  stroke: #475362;
  stroke-width: 2;
}

.pv-module-1992-pattern-plane {
  fill: #38444f;
  stroke: #202a33;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 14%));
}

.pv-module-1992-perimeter-delete {
  fill: none;
  stroke: #f2d584;
  stroke-linejoin: round;
  stroke-width: 5;
}

.pv-module-1992-cell-stripes {
  fill: none;
  stroke: rgb(217 238 242 / 88%);
  stroke-width: 1.35;
}

.pv-module-1992-scribe-key {
  fill: rgb(255 255 255 / 90%);
  stroke: #17212b;
  stroke-width: 1;
}

.pv-module-1992-scribe {
  fill: none;
  stroke-width: 3;
}

.pv-module-1992-scribe--p1 {
  stroke: #167b86;
}

.pv-module-1992-scribe--p2 {
  stroke: #b48c13;
}

.pv-module-1992-scribe--p3 {
  stroke: #8d3440;
}

.pv-module-1992-scribe-label {
  fill: #17212b;
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 800;
}

.pv-module-1992-eva {
  fill: url(#pvModule1992Eva);
  stroke: #bb8b25;
  stroke-width: 1.8;
}

.pv-module-1992-lead-hole {
  fill: #33404c;
  stroke: #f7fbff;
  stroke-width: 2;
}

.pv-module-1992-lead {
  fill: none;
  stroke: #b67c27;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1992-junction-box {
  fill: #3f4a56;
  stroke: #202a35;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgb(15 23 42 / 18%));
}

.pv-module-1992-diode {
  fill: #f2b83c;
  stroke: #f2b83c;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pv-module-1992-output-lead {
  fill: none;
  stroke: #202a35;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1992-plug {
  fill: #dfe5ea;
  stroke: #202a35;
  stroke-width: 2;
}

.pv-module-1992-layer-text,
.pv-module-1992-jbox-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 2.8px;
}

.pv-module-1992-layer-text--light,
.pv-module-1992-jbox-text {
  fill: #fff;
  paint-order: normal;
  stroke: none;
}

.pv-module-1992-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1992-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-1997-tefzel {
  fill: url(#pvModule1997Tefzel);
  stroke: #4191a8;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1997-film-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 94%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1997-eva {
  fill: url(#pvModule1997Eva);
  stroke: #b98b28;
  stroke-width: 1.8;
}

.pv-module-1997-lacquer {
  fill: rgb(230 248 250 / 78%);
  stroke: #4a8795;
  stroke-width: 1.7;
}

.pv-module-1997-grid {
  fill: none;
  stroke: #b87326;
  stroke-linecap: round;
  stroke-width: 2.6;
}

.pv-module-1997-tco {
  fill: rgb(82 195 205 / 76%);
  stroke: #197784;
  stroke-width: 1.9;
}

.pv-module-1997-junction {
  stroke-width: 1.6;
}

.pv-module-1997-junction--top {
  fill: #cfa8de;
  stroke: #81599a;
}

.pv-module-1997-junction--middle {
  fill: #8aa8d7;
  stroke: #4f6f9f;
}

.pv-module-1997-junction--bottom {
  fill: #526aa3;
  stroke: #344979;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1997-junction-text {
  fill: #17212b;
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 86%);
  stroke-width: 2.5px;
}

.pv-module-1997-reflector {
  fill: #c6d1d8;
  stroke: #687681;
  stroke-width: 2;
}

.pv-module-1997-reflector-texture {
  fill: none;
  stroke: #f7fbff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.pv-module-1997-steel {
  fill: url(#pvModule1997Steel);
  stroke: #49545f;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-1997-slab-seams {
  fill: none;
  stroke: #4d5a65;
  stroke-width: 2;
}

.pv-module-1997-circuit-plane {
  fill: #edf0e9;
  stroke: #747f75;
  stroke-width: 1.8;
}

.pv-module-1997-bus {
  fill: none;
  stroke: #b87326;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.2;
}

.pv-module-1997-lead {
  fill: none;
  stroke: #b87326;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1997-junction-box {
  fill: #3f4a56;
  stroke: #202a35;
  stroke-width: 2;
  filter: drop-shadow(0 2px 2px rgb(15 23 42 / 18%));
}

.pv-module-1997-output-lead {
  fill: none;
  stroke: #202a35;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-1997-plug {
  fill: #dfe5ea;
  stroke: #202a35;
  stroke-width: 2;
}

.pv-module-1997-layer-text,
.pv-module-1997-jbox-text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 2.7px;
}

.pv-module-1997-jbox-text {
  fill: #fff;
  paint-order: normal;
  stroke: none;
}

.pv-module-1997-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1997-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-1998-front-film {
  fill: url(#pvModule1998FrontFilm);
  stroke: #3d91a8;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1998-film-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 95%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1998-eva {
  fill: rgb(244 207 104 / 60%);
  stroke: #ae7c18;
  stroke-width: 1.8;
}

.pv-module-1998-grid-plane {
  fill: rgb(221 245 247 / 78%);
  stroke: #4a8795;
  stroke-width: 1.7;
}

.pv-module-1998-grid {
  fill: none;
  stroke: #bf7423;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.8;
}

.pv-module-1998-junction {
  stroke-width: 1.55;
}

.pv-module-1998-junction--top {
  fill: #d5afd9;
  stroke: #875d91;
}

.pv-module-1998-junction--middle {
  fill: #879fce;
  stroke: #536c9e;
}

.pv-module-1998-junction--bottom {
  fill: #435b91;
  stroke: #293e6a;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-1998-junction-text {
  fill: #17212b;
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 2.7px;
}

.pv-module-1998-stainless {
  fill: url(#pvModule1998Steel);
  stroke: #48545e;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 14%));
}

.pv-module-1998-cell-seams {
  fill: none;
  stroke: #4b5965;
  stroke-width: 1.7;
}

.pv-module-1998-shingle-face {
  fill: url(#pvModule1998Shingle);
  stroke: #102235;
  stroke-width: 2;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 18%));
}

.pv-module-1998-emboss-lines {
  fill: none;
  stroke: #718398;
  stroke-width: 1.9;
}

.pv-module-1998-shingle-text {
  fill: #fff;
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
}

.pv-module-1998-headlap {
  fill: #68727c;
  stroke: #303a44;
  stroke-width: 2;
}

.pv-module-1998-nailing-line {
  fill: none;
  stroke: #e8edf2;
  stroke-dasharray: 7 5;
  stroke-width: 1.6;
}

.pv-module-1998-fastener {
  fill: #dfe5e9;
  stroke: #26313c;
  stroke-width: 1.4;
}

.pv-module-1998-layer-text,
.pv-module-1998-lead-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 2.7px;
}

.pv-module-1998-lead {
  fill: none;
  stroke: #1f2933;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-1998-lead--positive {
  stroke: #b65c2c;
}

.pv-module-1998-connector {
  fill: #dce3e8;
  stroke: #1f2933;
  stroke-width: 2;
}

.pv-module-1998-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1998-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-1999-frame {
  fill: #59636e;
  stroke: #2f3943;
  stroke-width: 2.4;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 18%));
}

.pv-module-1999-cover-glass {
  fill: url(#pvModule1999Glass);
  stroke: #3d91a8;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 10%));
}

.pv-module-1999-glass-highlight {
  fill: none;
  stroke: rgb(255 255 255 / 95%);
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-1999-eva {
  fill: rgb(246 211 112 / 62%);
  stroke: #ad7c1a;
  stroke-width: 1.8;
}

.pv-module-1999-zno {
  fill: rgb(89 206 214 / 76%);
  stroke: #187985;
  stroke-width: 1.8;
}

.pv-module-1999-cds {
  fill: #f4db67;
  stroke: #9f8521;
  stroke-width: 1.7;
}

.pv-module-1999-cis {
  fill: url(#pvModule1999CIS);
  stroke: #713a55;
  stroke-width: 1.9;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-1999-mo {
  fill: url(#pvModule1999Mo);
  stroke: #48535e;
  stroke-width: 1.9;
}

.pv-module-1999-barrier-line {
  fill: none;
  stroke: #8a63a7;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-1999-substrate {
  fill: rgb(195 220 229 / 74%);
  stroke: #668c9c;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-1999-scribe-plane {
  fill: #294c75;
  stroke: #173652;
  stroke-width: 2;
}

.pv-module-1999-cell-stripes {
  fill: none;
  stroke: #a8d3df;
  stroke-width: 1.3;
}

.pv-module-1999-p1,
.pv-module-1999-p2,
.pv-module-1999-p3 {
  fill: none;
  stroke-width: 3;
}

.pv-module-1999-p1 {
  stroke: #f6c748;
}

.pv-module-1999-p2 {
  stroke: #f07352;
}

.pv-module-1999-p3 {
  stroke: #65d09d;
}

.pv-module-1999-tpat {
  fill: #d5dbe1;
  stroke: #68747f;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-1999-output {
  fill: none;
  stroke: #222d38;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-1999-jbox {
  fill: #424e5b;
  stroke: #202a35;
  stroke-width: 2;
}

.pv-module-1999-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-1999-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-2000-frame {
  fill: url(#pvModule2000Aluminium);
  stroke: #39444f;
  stroke-width: 2.3;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 18%));
}

.pv-module-2000-frame-edge {
  fill: #56616d;
  stroke: #303a44;
  stroke-width: 1.8;
}

.pv-module-2000-glass {
  fill: url(#pvModule2000Glass);
  stroke: #3a92aa;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-2000-glass-edge {
  fill: #79bdcf;
  stroke: #3a92aa;
  stroke-width: 1.3;
}

.pv-module-2000-encapsulant,
.pv-module-2000-rear-encapsulant {
  fill: rgb(246 218 124 / 62%);
  stroke: #b18a2d;
  stroke-width: 1.7;
}

.pv-module-2000-rear-encapsulant {
  fill: rgb(239 208 105 / 46%);
}

.pv-module-2000-rear-glass {
  fill-opacity: 0.88;
}

.pv-module-2000-cells {
  fill: #285da8;
  stroke: #173c76;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 14%));
}

.pv-module-2000-cell-grid {
  fill: none;
  stroke: #c1ddf4;
  stroke-linecap: round;
  stroke-width: 1.3;
}

.pv-module-2000-dc-box {
  fill: #3f4b58;
  stroke: #202b36;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-2000-diodes rect {
  fill: #f1c84d;
  stroke: #a26d06;
  stroke-width: 1;
}

.pv-module-2000-dc-link,
.pv-module-2000-power-flow {
  fill: none;
  stroke: #d37718;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2000-flow-arrow {
  fill: #d37718;
}

.pv-module-2000-flow-label,
.pv-module-2000-section-label {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-2000-section-label {
  font-size: 12px;
}

.pv-module-2000-enclosure-lid {
  fill: url(#pvModule2000Aluminium);
  stroke: #3c4853;
  stroke-width: 2;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 16%));
}

.pv-module-2000-enclosure {
  fill: #58636e;
  stroke: #29343f;
  stroke-width: 2.5;
}

.pv-module-2000-buck {
  fill: #f3c779;
  stroke: #9c6815;
  stroke-width: 2;
}

.pv-module-2000-hbridge {
  fill: #70589c;
  stroke: #433269;
  stroke-width: 2;
}

.pv-module-2000-control {
  fill: #326ea8;
  stroke: #1e4871;
  stroke-width: 2;
}

.pv-module-2000-grid-output {
  fill: #e7edf1;
  stroke: #50606e;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-2000-ac-cable {
  fill: none;
  stroke: #202b36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.pv-module-2000-ac-terminal {
  fill: var(--surface);
  stroke: #202b36;
  stroke-width: 2.4;
}

.pv-module-2000-dark-text,
.pv-module-2000-light-text,
.pv-module-2000-block-title,
.pv-module-2000-ac-label {
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 2.7px;
}

.pv-module-2000-dark-text,
.pv-module-2000-block-title,
.pv-module-2000-ac-label {
  fill: #17212b;
}

.pv-module-2000-light-text {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(13 24 38 / 82%);
}

.pv-module-2000-block-sub,
.pv-module-2000-light-sub {
  fill: #25313d;
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 700;
}

.pv-module-2000-light-sub {
  fill: #fff;
}

.pv-module-2000-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-2000-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-2001-glass {
  fill: url(#pvModule2001Glass);
  stroke: #3c92a8;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-2001-glass-edge {
  fill: #79bdcb;
  stroke: #3c92a8;
  stroke-width: 1.3;
}

.pv-module-2001-tco {
  fill: rgb(79 199 210 / 72%);
  stroke: #1c7c88;
  stroke-width: 1.9;
}

.pv-module-2001-buffer {
  fill: #f2dc72;
  stroke: #a28a25;
  stroke-width: 1.8;
}

.pv-module-2001-cds-line {
  fill: none;
  stroke: #d28b16;
  stroke-linecap: round;
  stroke-width: 3.2;
}

.pv-module-2001-cdte {
  fill: url(#pvModule2001CdTe);
  stroke: #713238;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-2001-metal {
  fill: url(#pvModule2001Metal);
  stroke: #47535f;
  stroke-width: 1.9;
}

.pv-module-2001-ifl {
  fill: none;
  stroke: #634d8f;
  stroke-linecap: round;
  stroke-width: 3.1;
}

.pv-module-2001-scribe-plane {
  fill: #294f75;
  stroke: #173752;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 14%));
}

.pv-module-2001-stripes {
  fill: none;
  stroke: #aed7df;
  stroke-width: 1.25;
}

.pv-module-2001-p1,
.pv-module-2001-p2,
.pv-module-2001-p3 {
  fill: none;
  stroke-width: 3;
}

.pv-module-2001-p1 {
  stroke: #f6c94b;
}

.pv-module-2001-p2 {
  stroke: #f17155;
}

.pv-module-2001-p3 {
  stroke: #62d09b;
}

.pv-module-2001-eva {
  fill: rgb(247 214 111 / 62%);
  stroke: #ae7e1c;
  stroke-width: 1.8;
}

.pv-module-2001-c-rail {
  fill: #737f8b;
  stroke: #303b46;
  stroke-linejoin: round;
  stroke-width: 2.3;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 17%));
}

.pv-module-2001-c-rail-web {
  fill: #56636f;
  stroke: #303b46;
  stroke-linejoin: round;
  stroke-width: 2.1;
}

.pv-module-2001-c-rail-return {
  fill: #b5bec6;
  stroke: #303b46;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-module-2001-rear-feed {
  fill: none;
  stroke: #c07818;
  stroke-dasharray: 5 4;
  stroke-width: 2.5;
}

.pv-module-2001-cord-plate {
  fill: #414e5b;
  stroke: #202b36;
  stroke-width: 2.3;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-2001-cord-sub {
  fill: #e8edf2;
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 700;
}

.pv-module-2001-output {
  fill: none;
  stroke: #202b36;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2001-connector {
  fill: #dce4ea;
  stroke: #202b36;
  stroke-width: 2;
}

.pv-module-2001-output-label,
.pv-module-2001-rail-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 94%);
  stroke-width: 2.8px;
}

.pv-module-2001-note-band {
  fill: color-mix(in srgb, #e8eef0 68%, var(--surface));
  stroke: #9cadb4;
  stroke-width: 1.1;
}

.pv-module-2001-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 750;
}

.pv-module-2002-glass {
  fill: url(#pvModule2002Glass);
  stroke: #3b91a7;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-2002-glass-edge {
  fill: #78bdcb;
  stroke: #3b91a7;
  stroke-width: 1.3;
}

.pv-module-2002-encapsulant {
  fill: rgb(246 217 117 / 57%);
  stroke: #b18427;
  stroke-width: 1.8;
}

.pv-module-2002-cell-plane {
  fill: url(#pvModule2002Ribbon);
  stroke: #173f72;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 14%));
}

.pv-module-2002-cell-seams {
  fill: none;
  stroke: #b9d9f1;
  stroke-width: 1.4;
}

.pv-module-2002-edge-string {
  fill: none;
  stroke: #f4c246;
  stroke-linecap: round;
  stroke-width: 6;
  paint-order: stroke;
}

.pv-module-2002-front-grid {
  fill: none;
  stroke: #e7eff7;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-2002-wrap-plane {
  fill: #455867;
  stroke: #263743;
  stroke-width: 2;
}

.pv-module-2002-wrap-path {
  fill: none;
  stroke: #e8c15f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.3;
}

.pv-module-2002-adhesive-plane {
  fill: #44545f;
  stroke: #263640;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-2002-adhesive-bars {
  fill: none;
  stroke: #d7a534;
  stroke-linecap: round;
  stroke-width: 5;
}

.pv-module-2002-current-path {
  fill: none;
  stroke: #eb5a2d;
  stroke-dasharray: 8 5;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.pv-module-2002-current-marker {
  fill: #eb5a2d;
}

.pv-module-2002-current-label {
  fill: #cf471f;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 800;
}

.pv-module-2002-backskin {
  fill: #c6d0bb;
  stroke: #66785e;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-2002-backskin-edge {
  fill: #879780;
  stroke: #66785e;
  stroke-width: 1.3;
}

.pv-module-2002-edge-closure {
  fill: #7e9080;
  stroke: #475a4c;
  stroke-linejoin: round;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 15%));
}

.pv-module-2002-output {
  fill: none;
  stroke: #26333f;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2002-output-pad {
  fill: #d4a638;
  stroke: #684f17;
  stroke-width: 2;
}

.pv-module-2002-output-sign,
.pv-module-2002-output-label,
.pv-module-2002-edge-label,
.pv-module-2002-grid-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 95%);
  stroke-width: 3px;
}

.pv-module-2002-output-sign {
  font-size: 15px;
  stroke-width: 2px;
}

.pv-module-2002-note-band {
  fill: color-mix(in srgb, #e6eeea 70%, var(--surface));
  stroke: #87998f;
  stroke-width: 1.1;
}

.pv-module-2002-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.3px;
  font-weight: 750;
}

.pv-module-2004-frame {
  fill: #343a43;
  stroke: #151b22;
  stroke-linejoin: round;
  stroke-width: 2.4;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 22%));
}

.pv-module-2004-frame-edge {
  fill: #151b22;
  stroke: #0d1117;
  stroke-width: 1.5;
}

.pv-module-2004-glass {
  fill: url(#pvModule2004Glass);
  stroke: #3b91a7;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-2004-glass-edge {
  fill: #79becd;
  stroke: #3b91a7;
  stroke-width: 1.3;
}

.pv-module-2004-encapsulant {
  fill: rgb(244 218 124 / 52%);
  stroke: #af8529;
  stroke-width: 1.8;
}

.pv-module-2004-cell-plane {
  fill: url(#pvModule2004Cell);
  stroke: #0c1b2d;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-2004-cell-grid {
  fill: none;
  stroke: #7598bc;
  stroke-width: 1.15;
}

.pv-module-2004-rear-plane {
  fill: #c8d0d8;
  stroke: #596775;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-2004-rear-p,
.pv-module-2004-rear-n {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2004-rear-p {
  stroke: #bd5264;
}

.pv-module-2004-rear-n {
  stroke: #386eb3;
}

.pv-module-2004-contact-sign {
  font-size: 11px;
  font-weight: 850;
}

.pv-module-2004-interconnect-plane {
  fill: rgb(226 234 239 / 68%);
  stroke: #7b8996;
  stroke-dasharray: 4 3;
  stroke-width: 1.7;
}

.pv-module-2004-interconnect {
  fill: none;
  stroke: #c57d25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4.2;
}

.pv-module-2004-backsheet {
  fill: #20262c;
  stroke: #0f1419;
  stroke-width: 2.1;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 18%));
}

.pv-module-2004-backsheet-edge {
  fill: #11161b;
  stroke: #0a0e12;
  stroke-width: 1.3;
}

.pv-module-2004-rear-feed {
  fill: none;
  stroke: #b36e22;
  stroke-dasharray: 5 4;
  stroke-width: 2.5;
}

.pv-module-2004-jbox {
  fill: #343c45;
  stroke: #161d24;
  stroke-width: 2.3;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 18%));
}

.pv-module-2004-diode {
  fill: #e2ad36;
  stroke: #765615;
  stroke-width: 1.3;
}

.pv-module-2004-diode-label {
  fill: #2a2519;
  font-family: var(--font-family-base);
  font-size: 9.5px;
  font-weight: 850;
}

.pv-module-2004-jbox-sub {
  fill: #e8edf2;
  font-family: var(--font-family-base);
  font-size: 10.4px;
  font-weight: 700;
}

.pv-module-2004-output {
  fill: none;
  stroke: #202a34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2004-connector {
  fill: #dce4e9;
  stroke: #202a34;
  stroke-width: 2;
}

.pv-module-2004-output-sign,
.pv-module-2004-output-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 850;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 96%);
  stroke-width: 3px;
}

.pv-module-2004-output-sign {
  font-size: 14px;
  stroke-width: 2px;
}

.pv-module-2004-note-band {
  fill: color-mix(in srgb, #e6ebef 72%, var(--surface));
  stroke: #8896a2;
  stroke-width: 1.1;
}

.pv-module-2004-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.2px;
  font-weight: 750;
}

.pv-module-2005-glass {
  fill: url(#pvModule2005Glass);
  stroke: #3d91a6;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-2005-glass-edge {
  fill: #7dbfce;
  stroke: #3d91a6;
  stroke-width: 1.3;
}

.pv-module-2005-tco {
  fill: url(#pvModule2005Tco);
  stroke: #247e7a;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-2005-texture {
  fill: none;
  stroke: #176c69;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2005-top-cell {
  fill: url(#pvModule2005TopCell);
  stroke: #513269;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 15%));
}

.pv-module-2005-bottom-cell {
  fill: url(#pvModule2005BottomCell);
  stroke: #183d77;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 15%));
}

.pv-module-2005-junction {
  fill: #ead8a0;
  stroke: #9d7726;
  stroke-width: 1.8;
}

.pv-module-2005-junction-lines {
  fill: none;
  stroke: #af8327;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.pv-module-2005-back-electrode {
  fill: #555f6c;
  stroke: #202a34;
  stroke-width: 2.1;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-2005-circuit-plane {
  fill: rgb(225 234 239 / 76%);
  stroke: #768896;
  stroke-width: 1.8;
}

.pv-module-2005-scribes {
  fill: none;
  stroke: #8c5e28;
  stroke-width: 2.2;
}

.pv-module-2005-current {
  fill: none;
  stroke: #2563eb;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2005-current-label {
  fill: #2158c5;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 800;
}

.pv-module-2005-rear-cover {
  fill: #d9dee3;
  stroke: #6d7883;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-2005-rear-cover-edge {
  fill: #abb4bd;
  stroke: #6d7883;
  stroke-width: 1.3;
}

.pv-module-2005-terminal-feed {
  fill: none;
  stroke: #38434d;
  stroke-width: 3;
}

.pv-module-2005-terminal {
  fill: #414b56;
  stroke: #18212a;
  stroke-width: 2;
}

.pv-module-2005-light-sub {
  fill: #f2f5f8;
  font-family: var(--font-family-base);
  font-size: 10.8px;
  font-weight: 650;
}

.pv-module-2005-note-band {
  fill: color-mix(in srgb, #e4eceb 72%, var(--surface));
  stroke: #82938d;
  stroke-width: 1.1;
}

.pv-module-2005-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10.6px;
  font-weight: 750;
}

.pv-module-2007-glass {
  fill: url(#pvModule2007Glass);
  stroke: #3d91a6;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 12%));
}

.pv-module-2007-glass-edge {
  fill: #7dbfce;
  stroke: #3d91a6;
  stroke-width: 1.3;
}

.pv-module-2007-tco {
  fill: #8ed6cb;
  stroke: #247e7a;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 11%));
}

.pv-module-2007-texture {
  fill: none;
  stroke: #176c69;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2007-upper-cell {
  fill: url(#pvModule2007TopCell);
  stroke: #513269;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 15%));
}

.pv-module-2007-middle-cell {
  fill: url(#pvModule2007MiddleCell);
  stroke: #6f315d;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 15%));
}

.pv-module-2007-bottom-cell {
  fill: url(#pvModule2007BottomCell);
  stroke: #183d77;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 15%));
}

.pv-module-2007-junction {
  fill: #ead8a0;
  stroke: #9d7726;
  stroke-width: 1.8;
}

.pv-module-2007-junction-lines {
  fill: none;
  stroke: #af8327;
  stroke-linecap: round;
  stroke-width: 1.7;
}

.pv-module-2007-back-electrode {
  fill: #555f6c;
  stroke: #202a34;
  stroke-width: 2.1;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 16%));
}

.pv-module-2007-circuit-plane {
  fill: rgb(225 234 239 / 76%);
  stroke: #768896;
  stroke-width: 1.8;
}

.pv-module-2007-scribes {
  fill: none;
  stroke: #8c5e28;
  stroke-width: 2.2;
}

.pv-module-2007-current {
  fill: none;
  stroke: #2563eb;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2007-current-label {
  fill: #2158c5;
  font-family: var(--font-family-base);
  font-size: 10.6px;
  font-weight: 800;
}

.pv-module-2007-rear-cover {
  fill: #d9dee3;
  stroke: #6d7883;
  stroke-width: 2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 13%));
}

.pv-module-2007-rear-cover-edge {
  fill: #abb4bd;
  stroke: #6d7883;
  stroke-width: 1.3;
}

.pv-module-2007-terminal-feed {
  fill: none;
  stroke: #38434d;
  stroke-width: 3;
}

.pv-module-2007-terminal {
  fill: #414b56;
  stroke: #18212a;
  stroke-width: 2;
}

.pv-module-2007-light-sub {
  fill: #f2f5f8;
  font-family: var(--font-family-base);
  font-size: 10.8px;
  font-weight: 650;
}

.pv-module-2007-note-band {
  fill: color-mix(in srgb, #e4eceb 72%, var(--surface));
  stroke: #82938d;
  stroke-width: 1.1;
}

.pv-module-2007-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10.2px;
  font-weight: 750;
}

.pv-module-2008-frame {
  fill: #3f4752;
  stroke: #161d26;
  stroke-linejoin: round;
  stroke-width: 4;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 22%));
}

.pv-module-2008-frame-label,
.pv-module-2008-system-label,
.pv-module-2008-long-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 800;
}

.pv-module-2008-panel-tubes {
  fill: none;
  stroke-linecap: round;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / 26%));
}

.pv-module-2008-panel-tube-shell {
  stroke: #9ed9e4;
  stroke-width: 10;
}

.pv-module-2008-panel-tube-core {
  stroke: #4f395d;
  stroke-width: 6;
}

.pv-svg-layer-control:hover .pv-module-2008-panel-tube-core,
.pv-svg-layer-control:focus-visible .pv-module-2008-panel-tube-core {
  stroke: var(--accent);
}

.pv-module-2008-array-note {
  fill: #fff;
  font-size: 11.8px;
  paint-order: stroke;
  stroke: rgb(15 23 42 / 92%);
  stroke-width: 3px;
}

.pv-module-2008-array-sub {
  fill: #eef8fb;
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgb(15 23 42 / 90%);
  stroke-width: 2.6px;
}

.pv-module-2008-mount {
  fill: none;
  stroke: #5f6c77;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 9;
}

.pv-module-2008-harness {
  fill: none;
  stroke: #1f2937;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2008-connector {
  fill: #26323d;
  stroke: #111827;
  stroke-width: 2;
}

.pv-module-2008-section-title {
  fill: #285b8f;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.pv-module-2008-long-glass {
  fill: url(#pvModule2008OuterGlass);
  stroke: #4798ac;
  stroke-width: 2;
}

.pv-module-2008-long-fluid {
  fill: rgb(112 210 221 / 34%);
  stroke: #4ab7c3;
  stroke-width: 1.5;
}

.pv-module-2008-endcap {
  fill: #59636e;
  stroke: #202a34;
  stroke-width: 2.5;
}

.pv-module-2008-endpin {
  fill: none;
  stroke: #26323d;
  stroke-width: 5;
}

.pv-module-2008-long-active {
  fill: url(#pvModule2008Cigs);
  stroke: #21182b;
  stroke-width: 2;
}

.pv-module-2008-long-scribes {
  fill: none;
  stroke: #d9bd63;
  stroke-width: 1.3;
}

.pv-module-2008-current {
  fill: none;
  stroke: #4f8cff;
  stroke-linecap: round;
  stroke-width: 3.5;
}

.pv-module-2008-long-active-label {
  fill: #fff;
  font-size: 10.7px;
  paint-order: stroke;
  stroke: rgb(20 15 29 / 92%);
  stroke-width: 2.8px;
}

.pv-module-2008-cutaway-ray {
  fill: none;
  stroke: #d28a0d;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2008-cutaway-ray-label {
  fill: #8c5a08;
  font-family: var(--font-family-base);
  font-size: 10.8px;
  font-weight: 750;
}

.pv-module-2008-ring-outer,
.pv-module-2008-ring-fluid,
.pv-module-2008-ring-sleeve,
.pv-module-2008-ring-tco,
.pv-module-2008-ring-cds,
.pv-module-2008-ring-cigs,
.pv-module-2008-ring-mo,
.pv-module-2008-ring-inner-glass {
  fill: none;
}

.pv-module-2008-ring-outer {
  stroke: url(#pvModule2008OuterGlass);
  stroke-width: 17;
  filter: drop-shadow(0 3px 3px rgb(15 23 42 / 15%));
}

.pv-module-2008-ring-fluid {
  stroke: rgb(93 202 218 / 58%);
  stroke-width: 23;
}

.pv-module-2008-ring-sleeve {
  stroke: rgb(218 241 245 / 94%);
  stroke-width: 8;
}

.pv-module-2008-ring-tco {
  stroke: #38a89d;
  stroke-width: 10;
}

.pv-module-2008-ring-cds {
  stroke: #f2d65c;
  stroke-width: 6;
}

.pv-module-2008-ring-cigs {
  stroke: #5a3458;
  stroke-width: 21;
}

.pv-module-2008-ring-mo {
  stroke: #7b838d;
  stroke-width: 11;
}

.pv-module-2008-ring-inner-glass {
  stroke: #b9dae3;
  stroke-width: 15;
}

.pv-module-2008-hollow {
  fill: color-mix(in srgb, var(--surface) 88%, #dbe9ec);
  stroke: #5c7881;
  stroke-width: 1.5;
}

.pv-module-2008-hollow-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.pv-module-2008-hollow-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 700;
}

.pv-module-2008-cutaway-callout {
  fill: none;
  stroke: #657481;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-2008-cutaway-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.pv-module-2008-cutaway-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10.6px;
  font-weight: 650;
}

.pv-module-2008-note-band {
  fill: color-mix(in srgb, #dfeff0 72%, var(--surface));
  stroke: #78959a;
  stroke-width: 1.1;
}

.pv-module-2008-note,
.pv-module-2008-note-scope {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10.3px;
  font-weight: 750;
}

.pv-module-2008-note-scope {
  fill: var(--muted);
  font-size: 9.8px;
  font-weight: 650;
}

.pv-module-2009-roll-module {
  fill: url(#pvModule2009ActiveSurface);
  stroke: #152332;
  stroke-linejoin: round;
  stroke-width: 3;
  filter: drop-shadow(0 5px 4px rgb(15 23 42 / 24%));
}

.pv-module-2009-roll-highlight {
  fill: none;
  stroke: #7fb4ca;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2009-surface-label {
  fill: #fff;
  font-size: 14px;
  font-weight: 850;
  paint-order: stroke;
  stroke: rgb(15 23 42 / 90%);
  stroke-width: 3px;
}

.pv-module-2009-surface-sub {
  fill: #e7f5fa;
  font-family: var(--font-family-base);
  font-size: 10.8px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgb(15 23 42 / 84%);
  stroke-width: 2.4px;
}

.pv-module-2009-surface-scribes {
  fill: none;
  stroke: #99d3df;
  stroke-width: 1.5;
}

.pv-module-2009-electron-path {
  fill: none;
  stroke: #4b8dff;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2009-electron-label {
  fill: #dceaff;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 800;
  paint-order: stroke;
  stroke: rgb(17 35 52 / 88%);
  stroke-width: 2.5px;
}

.pv-module-2009-lead {
  fill: none;
  stroke: #253343;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2009-terminal {
  fill: #303c49;
  stroke: #111827;
  stroke-width: 2;
}

.pv-module-2009-terminal-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.pv-module-2009-section-title {
  fill: #285b8f;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.pv-module-2009-layer-front,
.pv-module-2009-layer-tco,
.pv-module-2009-layer-window,
.pv-module-2009-layer-cigs,
.pv-module-2009-layer-mo,
.pv-module-2009-layer-polyimide,
.pv-module-2009-layer-rear {
  stroke-linejoin: round;
  stroke-width: 1.7;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 14%));
}

.pv-module-2009-layer-front {
  fill: url(#pvModule2009FrontBarrier);
  stroke: #4193a4;
}

.pv-module-2009-layer-tco {
  fill: #78c7bb;
  stroke: #327f78;
}

.pv-module-2009-layer-window {
  fill: #edd86b;
  stroke: #ab8e20;
}

.pv-module-2009-layer-cigs {
  fill: url(#pvModule2009Cigs);
  stroke: #2c1d33;
}

.pv-module-2009-layer-mo {
  fill: #808996;
  stroke: #4d5662;
}

.pv-module-2009-layer-polyimide {
  fill: #d8a253;
  stroke: #9c6827;
}

.pv-module-2009-layer-rear {
  fill: #d7dfe7;
  stroke: #778492;
}

.pv-module-2009-callout {
  fill: none;
  stroke: #677886;
  stroke-linecap: round;
  stroke-width: 1.4;
}

.pv-module-2009-layer-label {
  fill: var(--text);
  font-size: 11.5px;
  font-weight: 850;
}

.pv-module-2009-layer-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 9.7px;
  font-weight: 650;
}

.pv-module-2009-detail-frame {
  fill: color-mix(in srgb, var(--surface) 93%, #dbe9ee);
  stroke: #8aa0ae;
  stroke-width: 1.4;
}

.pv-module-2009-detail-tco {
  fill: #78c7bb;
}

.pv-module-2009-detail-window {
  fill: #edd86b;
}

.pv-module-2009-detail-cigs {
  fill: #53365b;
}

.pv-module-2009-detail-mo {
  fill: #808996;
}

.pv-module-2009-detail-poly {
  fill: #d8a253;
}

.pv-module-2009-isolation-scribe {
  fill: none;
  stroke: #edf2f6;
  stroke-width: 11;
}

.pv-module-2009-via {
  fill: none;
  stroke: #d49023;
  stroke-width: 8;
}

.pv-module-2009-grid {
  fill: none;
  stroke: #d49023;
  stroke-linecap: round;
  stroke-width: 5;
}

.pv-module-2009-detail-cell,
.pv-module-2009-detail-label,
.pv-module-2009-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 750;
}

.pv-module-2009-detail-cell {
  font-size: 10.5px;
}

.pv-module-2009-detail-label {
  font-size: 9.7px;
}

.pv-module-2009-note-band {
  fill: color-mix(in srgb, #e2eef0 74%, var(--surface));
  stroke: #78959a;
  stroke-width: 1.1;
}

.pv-module-2009-note {
  font-size: 9.8px;
}

.pv-module-2010-frame {
  fill: #4d5965;
  stroke: #202a34;
  stroke-linejoin: round;
  stroke-width: 3;
  filter: drop-shadow(0 4px 3px rgb(15 23 42 / 18%));
}

.pv-module-2010-glass {
  fill: url(#pvModule2010Glass);
  stroke: #338ca5;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2010-cell-field {
  fill: #245db1;
  stroke: #163d78;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-2010-cell-grid {
  fill: none;
  stroke: #c7ddff;
  stroke-width: 1.15;
}

.pv-module-2010-surface-label {
  fill: var(--text);
  font-size: 13px;
  font-weight: 850;
}

.pv-module-2010-surface-sub,
.pv-module-2010-housing-note,
.pv-module-2010-block-sub,
.pv-module-2010-flow-sub,
.pv-module-2010-note,
.pv-module-2010-note-scope {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-weight: 650;
}

.pv-module-2010-surface-sub {
  font-size: 10.7px;
}

.pv-module-2010-jbox {
  fill: #414d59;
  stroke: #202936;
  stroke-width: 2.2;
  filter: drop-shadow(0 3px 2px rgb(15 23 42 / 18%));
}

.pv-module-2010-jbox-title.pv-svg-layer-label,
.pv-module-2010-housing-title.pv-svg-layer-label {
  fill: #fff;
  font-size: 12px;
  font-weight: 850;
  paint-order: stroke;
  stroke: rgb(15 23 42 / 84%);
  stroke-width: 2.4px;
}

.pv-module-2010-diode-row {
  fill: #f4c94d;
  stroke: #f4c94d;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.pv-module-2010-input-lead,
.pv-module-2010-output-lead {
  fill: none;
  stroke: #202a34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2010-input-plug,
.pv-module-2010-output-plug {
  fill: #303b47;
  stroke: #111827;
  stroke-width: 1.7;
}

.pv-module-2010-wire-label,
.pv-module-2010-output-label {
  fill: var(--text);
  font-size: 11px;
  font-weight: 850;
}

.pv-module-2010-housing {
  fill: url(#pvModule2010Housing);
  stroke: #202b36;
  stroke-width: 3;
  filter: drop-shadow(0 5px 4px rgb(15 23 42 / 22%));
}

.pv-module-2010-board {
  fill: color-mix(in srgb, #d5e8dd 84%, var(--surface));
  stroke: #6b8b77;
  stroke-width: 1.5;
}

.pv-module-2010-housing-note {
  fill: #eef4f8;
  font-size: 9.8px;
  paint-order: stroke;
  stroke: rgb(30 42 53 / 78%);
  stroke-width: 2px;
}

.pv-module-2010-block {
  stroke-linejoin: round;
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 1px rgb(15 23 42 / 12%));
}

.pv-module-2010-block--sense {
  fill: #dcecff;
  stroke: #5f84bb;
}

.pv-module-2010-block--control {
  fill: #e8dff6;
  stroke: #8267aa;
}

.pv-module-2010-block--power {
  fill: #f4dfc0;
  stroke: #ae7331;
}

.pv-module-2010-block--passive {
  fill: #f7edbd;
  stroke: #a48b24;
}

.pv-module-2010-block--comms {
  fill: #d8efe8;
  stroke: #4b907c;
}

.pv-module-2010-block-title {
  fill: #17212b;
  font-size: 11px;
  font-weight: 850;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 86%);
  stroke-width: 2.3px;
}

.pv-module-2010-block-sub {
  fill: #314354;
  font-size: 9.5px;
}

.pv-module-2010-power-path {
  fill: none;
  stroke: #2468e8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2010-signal-path {
  fill: none;
  stroke: #7a57a6;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2010-signal-marker {
  fill: #7a57a6;
  stroke: none;
}

.pv-module-2010-pwm-wave {
  fill: none;
  stroke: #68438f;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 2;
}

.pv-module-2010-switch-symbol,
.pv-module-2010-inductor,
.pv-module-2010-capacitor,
.pv-module-2010-radio-wave {
  fill: none;
  stroke: #273545;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.3;
}

.pv-module-2010-switch-symbol circle {
  fill: #273545;
  stroke: none;
}

.pv-module-2010-output-lead {
  stroke: #2468e8;
}

.pv-module-2010-section-title,
.pv-module-2010-note-title {
  fill: #285b8f;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.pv-module-2010-flow-box {
  fill: color-mix(in srgb, var(--surface) 91%, #dce9f6);
  stroke: #8294a6;
  stroke-width: 1.5;
}

.pv-module-2010-flow-box--active {
  fill: color-mix(in srgb, #dceaff 76%, var(--surface));
  stroke: #4074c8;
}

.pv-module-2010-flow-box--inverter {
  fill: color-mix(in srgb, #e4e9ee 80%, var(--surface));
  stroke: #596b7b;
}

.pv-module-2010-flow-title {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 11.5px;
  font-weight: 850;
}

.pv-module-2010-flow-sub {
  font-size: 9.8px;
}

.pv-module-2010-mini-axes {
  fill: none;
  stroke: #677786;
  stroke-width: 1.2;
}

.pv-module-2010-pv-curve {
  fill: none;
  stroke: #2267d8;
  stroke-linecap: round;
  stroke-width: 2.3;
}

.pv-module-2010-mpp-dot {
  fill: #e95d2a;
  stroke: #fff;
  stroke-width: 1.3;
}

.pv-module-2010-flow-arrow {
  fill: none;
  stroke: #2468e8;
  stroke-linecap: round;
  stroke-width: 3.5;
}

.pv-module-2010-inverter-wave {
  fill: none;
  stroke: #2a6fe8;
  stroke-linecap: round;
  stroke-width: 2.2;
}

.pv-module-2010-note-band {
  fill: color-mix(in srgb, #e5eef7 78%, var(--surface));
  stroke: #7890a8;
  stroke-width: 1.1;
}

.pv-module-2010-note {
  fill: var(--text);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2010-note-scope {
  font-size: 9.6px;
}

.pv-module-2011-frame,
.pv-module-2011-frame-outline {
  fill: #4d5864;
  stroke: #202a34;
  stroke-width: 3;
  stroke-linejoin: round;
}

.pv-module-2011-svg .pv-sun-symbol circle {
  fill: #f7ca50;
  stroke: #b57908;
  stroke-width: 3;
}

.pv-module-2011-svg .pv-sun-symbol path {
  fill: none;
  stroke: #c78208;
  stroke-width: 4;
  stroke-linecap: round;
}

.pv-module-2011-svg .pv-sun-symbol text {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 760;
}

.pv-module-2011-svg .pv-photon-rays path {
  fill: none;
  stroke: #c78208;
  stroke-width: 3;
  stroke-linecap: round;
}

.pv-module-2011-svg .pv-photon-rays text {
  fill: #9a6507;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 700;
}

.pv-module-2011-svg #pvModule2011PhotonArrow path,
.pv-module-2011-svg [id$="pvModule2011PhotonArrow"] path {
  fill: #c78208;
}

.pv-module-2011-svg #pvModule2011ElectronArrow path,
.pv-module-2011-svg [id$="pvModule2011ElectronArrow"] path {
  fill: #2f6fe8;
}

.pv-module-2011-svg #pvModule2011HoleArrow path,
.pv-module-2011-svg [id$="pvModule2011HoleArrow"] path {
  fill: #e66a31;
}

.pv-module-2011-module-glass {
  fill: url(#pvModule2011Glass);
  stroke: #2f8ba8;
  stroke-width: 1.8;
}

.pv-module-2011-module-cells,
.pv-module-2011-layer--cells {
  fill: url(#pvModule2011Cell);
  stroke: #173e7b;
  stroke-width: 1.8;
}

.pv-module-2011-module-grid,
.pv-module-2011-cell-boundaries {
  fill: none;
  stroke: #c6dcff;
  stroke-width: 1.1;
}

.pv-module-2011-surface-label,
.pv-module-2011-layer-label,
.pv-module-2011-ribbon-label,
.pv-module-2011-cell-label,
.pv-module-2011-layer-heading,
.pv-module-2011-jbox-label,
.pv-module-2011-cross-label,
.pv-module-2011-base-label,
.pv-module-2011-contact-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2.4px;
  stroke-linejoin: round;
}

.pv-module-2011-cell-label.pv-svg-layer-label,
.pv-module-2011-ribbon-label.pv-svg-layer-label,
.pv-module-2011-jbox-label.pv-svg-layer-label {
  fill: #fff;
  stroke: #17314e;
}

.pv-module-2011-layer-heading.pv-svg-layer-label {
  fill: var(--text);
  font-size: 12px;
  stroke: var(--surface);
}

.pv-module-2011-surface-sub,
.pv-module-2011-section-sub,
.pv-module-2011-callout-sub,
.pv-module-2011-cross-sub,
.pv-module-2011-base-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 11px;
}

.pv-module-2011-section-title {
  fill: #235b91;
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.04em;
}

.pv-module-2011-layer {
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 14%));
}

.pv-module-2011-layer--glass {
  fill: url(#pvModule2011Glass);
  stroke: #3c9ab5;
}

.pv-module-2011-layer--eva {
  fill: #eff5cd;
  fill-opacity: 0.92;
  stroke: #90a83f;
}

.pv-module-2011-layer--ribbon-bed {
  fill: #edf1f5;
  stroke: #7b8997;
}

.pv-module-2011-layer--backsheet {
  fill: #e1e6ec;
  stroke: #6e7c8a;
}

.pv-module-2011-fine-fingers {
  fill: none;
  stroke: #dfeaff;
  stroke-width: 0.9;
}

.pv-module-2011-finish-line {
  fill: none;
  stroke: #6d7d8e;
  stroke-width: 1.2;
}

.pv-module-2011-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 750;
}

.pv-module-2011-callout-sub {
  font-size: 9.5px;
}

.pv-module-2011-ribbon {
  fill: none;
  stroke: #cf7c17;
  stroke-width: 4;
  stroke-linecap: round;
}

.pv-module-2011-solder-dots {
  fill: #efbd43;
  stroke: #925d12;
  stroke-width: 0.8;
}

.pv-module-2011-jbox {
  fill: #3e4a56;
  stroke: #1f2933;
  stroke-width: 2;
}

.pv-module-2011-lead {
  fill: none;
  stroke: #202a34;
  stroke-width: 3;
}

.pv-module-2011-plug {
  fill: #f8fafc;
  stroke: #202a34;
  stroke-width: 2;
}

.pv-module-2011-front-fingers,
.pv-module-2011-finger-branches {
  fill: #bbbfc6;
  stroke: #505862;
  stroke-width: 1.3;
}

.pv-module-2011-finger-branches {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.pv-module-2011-arc {
  fill: #68b7c5;
  stroke: #287d8b;
  stroke-width: 1;
}

.pv-module-2011-emitter {
  fill: #bcd5f8;
  stroke: #4f79ad;
  stroke-width: 1;
}

.pv-module-2011-base {
  fill: #f4cbb7;
  stroke: #b87655;
  stroke-width: 1.4;
}

.pv-module-2011-via-isolation {
  fill: #f7f9fb;
  fill-opacity: 0.9;
  stroke: #8e9aa7;
  stroke-dasharray: 4 3;
  stroke-width: 1.2;
}

.pv-module-2011-via,
.pv-module-2011-via-top {
  fill: #b9bdc4;
  stroke: #454d56;
  stroke-width: 1.5;
}

.pv-module-2011-rear-al {
  fill: #aeb4bc;
  stroke: #5c6670;
  stroke-width: 1.2;
}

.pv-module-2011-emitter-pad {
  fill: #d9dde2;
  stroke: #505862;
  stroke-width: 1.3;
}

.pv-module-2011-base-pad {
  fill: #d29c46;
  stroke: #805c25;
  stroke-width: 1.3;
}

.pv-module-2011-electron-path,
.pv-module-2011-hole-path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
}

.pv-module-2011-electron-path {
  stroke: #2f6fe8;
}

.pv-module-2011-hole-path {
  stroke: #e66a31;
}

.pv-module-2011-electron-label,
.pv-module-2011-hole-label {
  font-family: var(--font-family-base);
  font-size: 9.5px;
  font-weight: 780;
}

.pv-module-2011-electron-label {
  fill: #2f6fe8;
}

.pv-module-2011-hole-label {
  fill: #c94c1e;
}

.pv-module-2011-note-band {
  fill: color-mix(in srgb, #e8f0f7 84%, var(--surface));
  stroke: #6f8ba4;
  stroke-width: 1;
}

.pv-module-2011-note {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10.5px;
  font-weight: 760;
}

.pv-module-2012-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2012-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2012-sun text,
.pv-module-2012-layer-heading,
.pv-module-2012-surface-label,
.pv-module-2012-jbox-label,
.pv-module-2012-enlarged-label,
.pv-module-2012-band-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2012-sun text {
  font-size: 13px;
}

.pv-module-2012-direct-rays path,
.pv-module-2012-channel-ray {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2012-direct-rays text {
  fill: #966105;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2012-photon-head {
  fill: #c78208;
}

.pv-module-2012-electron-head {
  fill: #2f6fe8;
}

.pv-module-2012-heat-head {
  fill: #e46a2e;
}

.pv-module-2012-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2012-section-sub,
.pv-module-2012-surface-sub,
.pv-module-2012-callout-sub,
.pv-module-2012-enlarged-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2012-frame {
  fill: url(#pvModule2012Steel);
  stroke: #202b35;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2012-complete-lens,
.pv-module-2012-primary,
.pv-module-2012-enlarged-primary {
  fill: url(#pvModule2012LensGlass);
  stroke: #318da8;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2012-complete-grid,
.pv-module-2012-lens-grid {
  fill: none;
  stroke: #448fa6;
  stroke-width: 0.85;
}

.pv-module-2012-lens-ridges {
  fill: none;
  stroke: #6bb5c9;
  stroke-width: 1.1;
}

.pv-module-2012-surface-label {
  font-size: 12px;
}

.pv-module-2012-layer-heading {
  font-size: 11.5px;
}

.pv-module-2012-layer,
.pv-module-2012-cell-plane,
.pv-module-2012-backplane,
.pv-module-2012-rear-shell {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
}

.pv-module-2012-cavity-frame,
.pv-module-2012-spacer-side {
  fill: #596672;
  stroke: #27343e;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-2012-spacer-side {
  fill: #404d58;
}

.pv-module-2012-optic-plane {
  fill: #e8f6fa;
  fill-opacity: 0.55;
  stroke: #6b9dab;
  stroke-width: 1.3;
}

.pv-module-2012-ball-array ellipse,
.pv-module-2012-enlarged-ball {
  fill: #dff5fb;
  stroke: #3289a4;
  stroke-width: 1.5;
}

.pv-module-2012-cell-plane {
  fill: #eef1f5;
  stroke: #798897;
  stroke-width: 1.5;
}

.pv-module-2012-microcell-chip {
  fill: #55368c;
  stroke: #251a4c;
  stroke-width: 1;
}

.pv-module-2012-microcell-highlight {
  fill: #9b86db;
  stroke: none;
}

.pv-module-2012-backplane,
.pv-module-2012-enlarged-receiver {
  fill: #d7dde4;
  stroke: #687786;
  stroke-width: 1.6;
}

.pv-module-2012-traces {
  fill: none;
  stroke: #c97715;
  stroke-linecap: round;
  stroke-width: 2.3;
}

.pv-module-2012-contact-pads circle {
  fill: #f1bf42;
  stroke: #925b0b;
  stroke-width: 0.8;
}

.pv-module-2012-callout-line,
.pv-module-2012-enlarged-leader {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2012-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2012-callout-sub {
  font-size: 9px;
}

.pv-module-2012-rear-shell {
  fill: #4b5864;
  stroke: #25313b;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-module-2012-rear-apron {
  fill: #36434e;
  stroke: #25313b;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-2012-rear-rail {
  fill: #7b8791;
  stroke: #2b3741;
  stroke-linejoin: round;
  stroke-width: 1.3;
}

.pv-module-2012-jbox {
  fill: #3d4854;
  stroke: #202a34;
  stroke-width: 2;
}

.pv-module-2012-jbox-label {
  fill: #fff;
  font-size: 11px;
  stroke: #26333f;
}

.pv-module-2012-vent {
  fill: #dae2e8;
  stroke: #202a34;
  stroke-width: 1.5;
}

.pv-module-2012-vent-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 9px;
  font-weight: 750;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
}

.pv-module-2012-vent-leader {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2012-lead {
  fill: none;
  stroke: #202a34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2012-plug {
  fill: #f8fafc;
  stroke: #202a34;
  stroke-width: 2;
}

.pv-module-2012-enlarged-primary {
  fill-opacity: 0.82;
}

.pv-module-2012-enlarged-label {
  font-size: 10.5px;
}

.pv-module-2012-enlarged-sub {
  font-size: 9.5px;
}

.pv-module-2012-junction {
  stroke: #4b3970;
  stroke-width: 0.8;
}

.pv-module-2012-junction--high {
  fill: #d9d2f2;
}

.pv-module-2012-junction--middle {
  fill: #9f8bd6;
}

.pv-module-2012-junction--low {
  fill: #5b3f98;
}

.pv-module-2012-band-label {
  font-size: 8.5px;
  stroke-width: 2px;
}

.pv-module-2012-electron-path,
.pv-module-2012-heat-path {
  fill: none;
  stroke-linecap: round;
  stroke-width: 3.5;
}

.pv-module-2012-electron-path {
  stroke: #2f6fe8;
}

.pv-module-2012-heat-path {
  stroke: #e46a2e;
}

.pv-module-2012-output-label,
.pv-module-2012-heat-label {
  font-family: var(--font-family-base);
  font-size: 9.5px;
  font-weight: 780;
}

.pv-module-2012-output-label {
  fill: #2f6fe8;
}

.pv-module-2012-heat-label {
  fill: #c65021;
}

.pv-module-2014-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2014-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2014-sun text,
.pv-module-2014-surface-label,
.pv-module-2014-layer-heading,
.pv-module-2014-cell-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2014-sun text {
  font-size: 13px;
}

.pv-module-2014-rays path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2014-rays text {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2014-photon-head {
  fill: #c78208;
}

.pv-module-2014-electron-head {
  fill: #2f6fe8;
}

.pv-module-2014-hole-head {
  fill: #e45f2d;
}

.pv-module-2014-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2014-section-sub,
.pv-module-2014-surface-sub,
.pv-module-2014-callout-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2014-complete-glass,
.pv-module-2014-glass,
.pv-module-2014-cross-glass {
  fill: url(#pvModule2014Glass);
  stroke: #318da8;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.pv-module-2014-complete-active {
  fill: url(#pvModule2014Perovskite);
  stroke: #432953;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-2014-complete-cell-lines {
  fill: none;
  stroke: #e8cfef;
  stroke-width: 1.8;
}

.pv-module-2014-complete-scribes {
  fill: none;
  stroke: #e2b74e;
  stroke-width: 3.2;
}

.pv-module-2014-terminal,
.pv-module-2014-output-terminal {
  fill: #f8fafc;
  stroke: #222c37;
  stroke-width: 2;
}

.pv-module-2014-surface-label {
  font-size: 12px;
}

.pv-module-2014-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2014-fto,
.pv-module-2014-cross-fto,
.pv-module-2014-key-fto {
  fill: #8ed1da;
  fill-opacity: 0.86;
  stroke: #277d89;
  stroke-width: 1.3;
}

.pv-module-2014-fto-lines {
  fill: none;
  stroke: #ecb840;
  stroke-width: 2.4;
}

.pv-module-2014-compact,
.pv-module-2014-cross-compact,
.pv-module-2014-key-tio2 {
  fill: #bdd9f4;
  stroke: #527fa7;
}

.pv-module-2014-mesoporous,
.pv-module-2014-cross-meso {
  fill: #d8e9f8;
  stroke: #668fac;
}

.pv-module-2014-mesoporous-dots circle {
  fill: #f6fbff;
  stroke: #628da9;
  stroke-width: 1;
}

.pv-module-2014-absorber,
.pv-module-2014-cross-absorber,
.pv-module-2014-key-perovskite {
  fill: url(#pvModule2014Perovskite);
  stroke: #4a305c;
}

.pv-module-2014-grain-lines {
  fill: none;
  stroke: #d7bbdf;
  stroke-width: 1.2;
}

.pv-module-2014-htm,
.pv-module-2014-cross-htm,
.pv-module-2014-key-htm {
  fill: #efb0c4;
  stroke: #a45471;
}

.pv-module-2014-gold,
.pv-module-2014-cross-gold,
.pv-module-2014-key-gold {
  fill: #e6b83e;
  stroke: #956910;
}

.pv-module-2014-layer-heading {
  font-size: 11.5px;
}

.pv-module-2014-layer-heading--light.pv-svg-layer-label {
  fill: #fff;
  stroke: #4c305d;
  stroke-width: 1.8px;
}

.pv-module-2014-gold-lines {
  fill: none;
  stroke: #fff2b4;
  stroke-width: 2.2;
}

.pv-module-2014-callout-line {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2014-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2014-callout-sub {
  font-size: 9px;
}

.pv-module-2014-output-lead {
  fill: none;
  stroke: #202a34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2014-cross-fto,
.pv-module-2014-cross-compact,
.pv-module-2014-cross-meso,
.pv-module-2014-cross-absorber,
.pv-module-2014-cross-htm,
.pv-module-2014-cross-gold {
  stroke-width: 1;
}

.pv-module-2014-scribe-zone {
  fill: #fff;
  fill-opacity: 0.75;
  stroke: #d0613b;
  stroke-dasharray: 4 3;
  stroke-width: 1;
}

.pv-module-2014-p-label {
  fill: #cf4e2d;
  font-family: var(--font-family-base);
  font-size: 12px;
  font-weight: 850;
}

.pv-module-2014-p-leader {
  fill: none;
  stroke: #cf4e2d;
  stroke-dasharray: 4 3;
  stroke-width: 1.3;
}

.pv-module-2014-cell-label {
  font-size: 10px;
}

.pv-module-2014-electron-path,
.pv-module-2014-hole-path,
.pv-module-2014-series-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.5;
}

.pv-module-2014-electron-path,
.pv-module-2014-series-path {
  stroke: #2f6fe8;
}

.pv-module-2014-hole-path {
  stroke: #e45f2d;
}

.pv-module-2014-electron-label,
.pv-module-2014-hole-label,
.pv-module-2014-series-label {
  font-family: var(--font-family-base);
  font-size: 9px;
  font-weight: 790;
}

.pv-module-2014-electron-label,
.pv-module-2014-series-label {
  fill: #2f6fe8;
}

.pv-module-2014-hole-label {
  fill: #ce4e22;
}

.pv-module-2014-cross-key rect {
  stroke-width: 1;
}

.pv-module-2014-key-glass {
  fill: #d9f1f7;
  stroke: #318da8;
}

.pv-module-2014-cross-key text,
.pv-module-2014-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 9px;
}

.pv-module-2014-scope-note {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 730;
}

.pv-module-2015-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2015-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2015-sun text,
.pv-module-2015-surface-label,
.pv-module-2015-layer-heading,
.pv-module-2015-card-title {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2015-sun text {
  font-size: 13px;
}

.pv-module-2015-rays path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2015-rays text {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2015-photon-head {
  fill: #c78208;
}

.pv-module-2015-electron-head {
  fill: #2f6fe8;
}

.pv-module-2015-hole-head {
  fill: #e45f2d;
}

.pv-module-2015-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2015-section-sub,
.pv-module-2015-surface-sub,
.pv-module-2015-callout-sub,
.pv-module-2015-card-sub,
.pv-module-2015-card-warning,
.pv-module-2015-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2015-complete-pet,
.pv-module-2015-pet,
.pv-module-2015-cross-pet,
.pv-module-2015-bend-sheet {
  fill: url(#pvModule2015Pet);
  stroke: #318da8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.pv-module-2015-complete-active {
  fill: url(#pvModule2015Perovskite);
  stroke: #432953;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-2015-complete-cells {
  fill: none;
  stroke: #e9d3ef;
  stroke-width: 1.8;
}

.pv-module-2015-complete-scribes {
  fill: none;
  stroke: #e2b74e;
  stroke-width: 3.2;
}

.pv-module-2015-terminal,
.pv-module-2015-output-terminal {
  fill: #f8fafc;
  stroke: #222c37;
  stroke-width: 2;
}

.pv-module-2015-surface-label {
  font-size: 12px;
}

.pv-module-2015-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2015-ito,
.pv-module-2015-cross-ito {
  fill: #8ed1da;
  fill-opacity: 0.88;
  stroke: #277d89;
  stroke-width: 1.3;
}

.pv-module-2015-stripe-lines {
  fill: none;
  stroke: #ecb840;
  stroke-width: 2.4;
}

.pv-module-2015-compact {
  fill: #b8d8f4;
  stroke: #527fa7;
}

.pv-module-2015-mesoporous {
  fill: #d8e9f8;
  stroke: #668fac;
}

.pv-module-2015-mesoporous-dots circle {
  fill: #f6fbff;
  stroke: #628da9;
  stroke-width: 1;
}

.pv-module-2015-absorber,
.pv-module-2015-cross-active {
  fill: url(#pvModule2015Perovskite);
  stroke: #4a305c;
}

.pv-module-2015-grain-lines {
  fill: none;
  stroke: #d7bbdf;
  stroke-width: 1.2;
}

.pv-module-2015-htm {
  fill: #efb0c4;
  stroke: #a45471;
}

.pv-module-2015-gold,
.pv-module-2015-cross-gold {
  fill: #e6b83e;
  stroke: #956910;
}

.pv-module-2015-layer-heading {
  font-size: 11.5px;
}

.pv-module-2015-layer-heading--light.pv-svg-layer-label {
  fill: #fff;
  stroke: #4c305d;
  stroke-width: 1.8px;
}

.pv-module-2015-gold-lines {
  fill: none;
  stroke: #fff2b4;
  stroke-width: 2.2;
}

.pv-module-2015-callout-line {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2015-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2015-callout-sub {
  font-size: 9px;
}

.pv-module-2015-output-lead {
  fill: none;
  stroke: #202a34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2015-evidence-card {
  fill: #f8fbff;
  stroke: #b9cadb;
  stroke-width: 1.4;
}

.pv-module-2015-card-title {
  font-size: 10.5px;
}

.pv-module-2015-cross-pet,
.pv-module-2015-cross-ito,
.pv-module-2015-cross-active,
.pv-module-2015-cross-gold {
  stroke-width: 1.15;
}

.pv-module-2015-series-path {
  fill: none;
  stroke: #2f6fe8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2015-p-label,
.pv-module-2015-radius-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 9px;
  font-weight: 720;
}

.pv-module-2015-bend-sheet {
  fill: none;
  stroke-width: 9;
}

.pv-module-2015-bend-axis {
  fill: none;
  stroke: #8999aa;
  stroke-dasharray: 5 4;
  stroke-width: 1.4;
}

.pv-module-2015-radius-line,
.pv-module-2015-radius-head {
  fill: none;
  stroke: #cf4e2d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pv-module-2015-card-warning {
  fill: #a5452b;
  font-size: 8.5px;
  font-weight: 760;
}

.pv-module-2015-scope-note {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 730;
}

.pv-module-2016-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2016-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2016-sun text,
.pv-module-2016-surface-label,
.pv-module-2016-layer-heading,
.pv-module-2016-card-title {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2016-sun text {
  font-size: 13px;
}

.pv-module-2016-rays path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2016-rays text {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2016-photon-head {
  fill: #c78208;
}

.pv-module-2016-electron-head {
  fill: #2f6fe8;
}

.pv-module-2016-hole-head {
  fill: #e45f2d;
}

.pv-module-2016-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2016-section-sub,
.pv-module-2016-surface-sub,
.pv-module-2016-callout-sub,
.pv-module-2016-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2016-complete-glass,
.pv-module-2016-glass,
.pv-module-2016-cross-glass {
  fill: url(#pvModule2016Glass);
  stroke: #318da8;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.pv-module-2016-complete-active {
  fill: url(#pvModule2016Active);
  stroke: #53224f;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-module-2016-complete-cells {
  fill: none;
  stroke: #f0d6e7;
  stroke-width: 1.8;
}

.pv-module-2016-complete-scr {
  fill: none;
  stroke: #f0c64d;
  stroke-width: 3.1;
}

.pv-module-2016-terminal,
.pv-module-2016-output-terminal {
  fill: #f8fafc;
  stroke: #222c37;
  stroke-width: 2;
}

.pv-module-2016-surface-label {
  font-size: 12px;
}

.pv-module-2016-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2016-ito,
.pv-module-2016-cross-ito {
  fill: #83d0d9;
  fill-opacity: 0.9;
  stroke: #277d89;
}

.pv-module-2016-ito-lines {
  fill: none;
  stroke: #f6f8fa;
  stroke-width: 4;
}

.pv-module-2016-zno,
.pv-module-2016-cross-zno {
  fill: #c8e7f2;
  stroke: #4c8ca7;
}

.pv-module-2016-active,
.pv-module-2016-cross-active {
  fill: url(#pvModule2016Active);
  stroke: #55224e;
}

.pv-module-2016-active-lines {
  fill: none;
  stroke: #f4e7f0;
  stroke-width: 4;
}

.pv-module-2016-blend-dots circle {
  fill: #f0b74b;
  stroke: #8a5b10;
  stroke-width: 0.9;
}

.pv-module-2016-moo3,
.pv-module-2016-cross-moo3 {
  fill: #f1dfaa;
  stroke: #a67e22;
}

.pv-module-2016-silver,
.pv-module-2016-cross-silver {
  fill: #aeb9c5;
  stroke: #566575;
}

.pv-module-2016-silver-lines {
  fill: none;
  stroke: #fff;
  stroke-width: 4;
}

.pv-module-2016-layer-heading {
  font-size: 11.5px;
}

.pv-module-2016-layer-heading--light.pv-svg-layer-label {
  fill: #fff;
  stroke: #54224e;
  stroke-width: 1.8px;
}

.pv-module-2016-callout-line {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2016-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2016-callout-sub {
  font-size: 9px;
}

.pv-module-2016-output-lead {
  fill: none;
  stroke: #202a34;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2016-detail-card {
  fill: #f8fbff;
  stroke: #b9cadb;
  stroke-width: 1.4;
}

.pv-module-2016-interconnect-hit,
.pv-module-2016-print-card {
  fill: #fff;
  fill-opacity: 0.7;
  stroke: #d4dfeb;
  stroke-width: 1;
}

.pv-module-2016-card-title {
  font-size: 10.5px;
}

.pv-module-2016-cross-glass,
.pv-module-2016-cross-ito,
.pv-module-2016-cross-zno,
.pv-module-2016-cross-active,
.pv-module-2016-cross-moo3,
.pv-module-2016-cross-silver {
  stroke-width: 1.1;
}

.pv-module-2016-scr-zone {
  fill: #f7d45d;
  fill-opacity: 0.24;
  stroke: #d69016;
  stroke-dasharray: 4 3;
  stroke-width: 1.4;
}

.pv-module-2016-scr-label {
  fill: #b76808;
  font-family: var(--font-family-base);
  font-size: 11px;
  font-weight: 850;
}

.pv-module-2016-scr-leader {
  fill: none;
  stroke: #b76808;
  stroke-width: 1.2;
}

.pv-module-2016-electron-path,
.pv-module-2016-hole-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2016-electron-path {
  stroke: #2f6fe8;
}

.pv-module-2016-hole-path {
  stroke: #e45f2d;
}

.pv-module-2016-recombination-node {
  fill: #f6cf55;
  stroke: #9c6810;
  stroke-width: 1.5;
}

.pv-module-2016-charge-label,
.pv-module-2016-cross-label,
.pv-module-2016-print-label,
.pv-module-2016-print-sub,
.pv-module-2016-print-result-text {
  font-family: var(--font-family-base);
}

.pv-module-2016-charge-label {
  font-size: 8.5px;
  font-weight: 750;
}

.pv-module-2016-charge-label--electron {
  fill: #2f6fe8;
}

.pv-module-2016-charge-label--hole {
  fill: #cf4e2d;
}

.pv-module-2016-cross-label {
  fill: var(--text);
  font-size: 9px;
  font-weight: 720;
}

.pv-module-2016-print-continuous {
  fill: #dff3f6;
  stroke: #388b9a;
}

.pv-module-2016-print-patterned {
  fill: #f3dbe8;
  stroke: #a84b77;
}

.pv-module-2016-print-result {
  fill: #e7f3db;
  stroke: #659a37;
}

.pv-module-2016-print-label {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 820;
}

.pv-module-2016-print-sub {
  fill: var(--muted);
  font-size: 8.5px;
}

.pv-module-2016-print-flow {
  fill: none;
  stroke: #2f6fe8;
  stroke-width: 2;
}

.pv-module-2016-print-result-text {
  fill: #356820;
  font-size: 9px;
  font-weight: 800;
}

.pv-module-2016-scope-note {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 730;
}

.pv-module-2017-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2017-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2017-sun text,
.pv-module-2017-surface-label,
.pv-module-2017-layer-heading,
.pv-module-2017-card-title,
.pv-module-2017-jbox-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2017-sun text {
  font-size: 13px;
}

.pv-module-2017-rays path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2017-rays text {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2017-photon-head {
  fill: #c78208;
}

.pv-module-2017-electron-head {
  fill: #2f6fe8;
}

.pv-module-2017-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2017-section-sub,
.pv-module-2017-surface-sub,
.pv-module-2017-callout-sub,
.pv-module-2017-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2017-complete-frame,
.pv-module-2017-frame {
  fill: #555f6c;
  stroke: #26313d;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2017-complete-field,
.pv-module-2017-cell-field,
.pv-module-2017-strip {
  fill: url(#pvModule2017Cell);
  stroke: #0d2b62;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-2017-complete-rows,
.pv-module-2017-field-rows {
  fill: none;
  stroke: #90b8ea;
  stroke-width: 1.1;
}

.pv-module-2017-complete-tiles,
.pv-module-2017-field-tiles {
  fill: none;
  stroke: #d4e4fb;
  stroke-width: 1.2;
}

.pv-module-2017-complete-rows.pv-assembled-shingle-rows {
  fill: rgb(38 91 159 / 62%);
  stroke: #8db9ec;
  stroke-linejoin: round;
  stroke-width: 1.15;
}

.pv-module-2017-complete-tiles.pv-assembled-shingle-seams {
  stroke: #e5f0ff;
  stroke-linecap: round;
  stroke-width: 1.45;
}

.pv-assembled-sun-halo {
  fill: rgb(255 224 112 / 24%);
  filter: blur(5px);
  pointer-events: none;
  stroke: none;
}

.pv-assembled-illumination-rays > path {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-module-2017-surface-label {
  font-size: 12px;
}

.pv-module-2017-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2017-glass {
  fill: url(#pvModule2017Glass);
  stroke: #318da8;
}

.pv-module-2017-encapsulant {
  fill: #edf6cf;
  fill-opacity: 0.92;
  stroke: #8ba243;
}

.pv-module-2017-backsheet {
  fill: #dce3e9;
  stroke: #697887;
}

.pv-module-2017-layer-heading {
  font-size: 11.5px;
}

.pv-module-2017-layer-heading--light.pv-svg-layer-label {
  fill: #fff;
  stroke: #102d68;
  stroke-width: 1.8px;
}

.pv-module-2017-callout-line {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2017-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2017-callout-sub {
  font-size: 9px;
}

.pv-module-2017-rear-bus,
.pv-module-2017-cable {
  fill: none;
  stroke: #26313d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2017-junction-box {
  fill: #414b57;
  stroke: #1e2730;
  stroke-width: 1.8;
}

.pv-module-2017-diode {
  fill: #f2bf32;
  stroke: #8b6104;
  stroke-width: 1.2;
}

.pv-module-2017-connector {
  fill: #fff;
  stroke: #26313d;
  stroke-width: 2;
}

.pv-module-2017-jbox-label {
  font-size: 10.5px;
}

.pv-module-2017-detail-card {
  fill: #f8fbff;
  stroke: #b9cadb;
  stroke-width: 1.4;
}

.pv-module-2017-joint-hit,
.pv-module-2017-circuit-hit {
  fill: #fff;
  fill-opacity: 0.7;
  stroke: #d4dfeb;
  stroke-width: 1;
}

.pv-module-2017-card-title {
  font-size: 10.5px;
}

.pv-module-2017-strip--one {
  fill: #17458f;
}

.pv-module-2017-strip--two {
  fill: #1b55a3;
}

.pv-module-2017-strip--three {
  fill: #235fb0;
}

.pv-module-2017-strip--four {
  fill: #2d69bb;
}

.pv-module-2017-front-metallisation {
  fill: none;
  stroke: #dcecff;
  stroke-width: 2;
}

.pv-module-2017-eca-joints {
  fill: none;
  stroke: #efad28;
  stroke-linecap: round;
  stroke-width: 6;
}

.pv-module-2017-series-arrow {
  fill: none;
  stroke: #2f6fe8;
  stroke-width: 2.8;
}

.pv-module-2017-series-label,
.pv-module-2017-joint-label,
.pv-module-2017-circuit-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 9px;
  font-weight: 720;
}

.pv-module-2017-joint-label {
  fill: #8a5c08;
}

.pv-module-2017-circuit-rail {
  fill: none;
  stroke: #26313d;
  stroke-width: 3;
}

.pv-module-2017-circuit-row {
  fill: none;
  stroke: #2863b7;
  stroke-width: 3.5;
}

.pv-module-2017-circuit-segments {
  fill: none;
  stroke: #d9e8fb;
  stroke-width: 1.3;
}

.pv-module-2017-scope-note {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 730;
}

.pv-module-2018-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2018-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2018-sun text,
.pv-module-2018-surface-label,
.pv-module-2018-layer-heading,
.pv-module-2018-card-title,
.pv-module-2018-jbox-label,
.pv-module-2018-cell-layer-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2018-sun text {
  font-size: 13px;
}

.pv-module-2018-rays path,
.pv-module-2018-front-photons {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2018-rays text {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2018-photon-head {
  fill: #c78208;
}

.pv-module-2018-rear-photon-head {
  fill: #0799a8;
}

.pv-module-2018-electron-head {
  fill: #2f6fe8;
}

.pv-module-2018-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2018-section-sub,
.pv-module-2018-surface-sub,
.pv-module-2018-callout-sub,
.pv-module-2018-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2018-complete-frame,
.pv-module-2018-frame {
  fill: #555f6c;
  stroke: #26313d;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2018-complete-field,
.pv-module-2018-cell-field {
  fill: url(#pvModule2018Cell);
  stroke: #0d2b62;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-2018-complete-grid,
.pv-module-2018-field-grid {
  fill: none;
  stroke: #d7e8ff;
  stroke-width: 1.15;
}

.pv-module-2018-centre-split,
.pv-module-2018-field-split {
  fill: none;
  stroke: #f4c84c;
  stroke-width: 3;
}

.pv-module-2018-surface-label {
  font-size: 12px;
}

.pv-module-2018-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2018-glass,
.pv-module-2018-rear-glass {
  fill: url(#pvModule2018Glass);
  stroke: #318da8;
}

.pv-module-2018-rear-glass {
  fill-opacity: 0.78;
}

.pv-module-2018-encapsulant {
  fill: #edf6cf;
  fill-opacity: 0.88;
  stroke: #8ba243;
}

.pv-module-2018-layer-heading {
  font-size: 11.5px;
}

.pv-module-2018-layer-heading--light.pv-svg-layer-label,
.pv-module-2018-cell-layer-label--light.pv-svg-layer-label {
  fill: #fff;
  stroke: #102d68;
  stroke-width: 1.8px;
}

.pv-module-2018-callout-line {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2018-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2018-callout-sub {
  font-size: 9px;
}

.pv-module-2018-rear-light > path:first-child {
  fill: none;
  stroke: #7e7464;
  stroke-width: 2;
}

.pv-module-2018-rear-light > path:not(:first-child),
.pv-module-2018-rear-photons {
  fill: none;
  stroke: #0799a8;
  stroke-linecap: round;
  stroke-width: 2.4;
}

.pv-module-2018-rear-light text,
.pv-module-2018-optical-label {
  fill: #087f8b;
  font-family: var(--font-family-base);
  font-size: 9.5px;
  font-weight: 760;
}

.pv-module-2018-centre-bus,
.pv-module-2018-cable {
  fill: none;
  stroke: #26313d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.pv-module-2018-junction-box {
  fill: #414b57;
  stroke: #1e2730;
  stroke-width: 1.8;
}

.pv-module-2018-diode,
.pv-module-2018-bypass-symbol {
  fill: #f2bf32;
  stroke: #8b6104;
  stroke-width: 1.2;
}

.pv-module-2018-connector {
  fill: #fff;
  stroke: #26313d;
  stroke-width: 2;
}

.pv-module-2018-jbox-label,
.pv-module-2018-card-title {
  font-size: 10.5px;
}

.pv-module-2018-card-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 720;
}

.pv-module-2018-detail-card {
  fill: #f8fbff;
  stroke: #b9cadb;
  stroke-width: 1.4;
}

.pv-module-2018-cell-front-grid {
  fill: #c7cdd4;
  stroke: #626c78;
}

.pv-module-2018-cell-arc {
  fill: #55b8c2;
  stroke: #197f8a;
}

.pv-module-2018-cell-emitter {
  fill: #b7d4fb;
  stroke: #507eb7;
}

.pv-module-2018-cell-base {
  fill: #d69b76;
  stroke: #955538;
}

.pv-module-2018-cell-rear-passivation {
  fill: #ded0ef;
  stroke: #846aa8;
}

.pv-module-2018-cell-rear-grid {
  fill: none;
  stroke: #b67420;
  stroke-linecap: square;
  stroke-width: 6;
}

.pv-module-2018-cell-layer-label {
  font-size: 9.3px;
}

.pv-module-2018-cell-layer-label--light,
.pv-module-2018-cell-layer-sub--light {
  fill: #fff;
  stroke: #7e412d;
}

.pv-module-2018-cell-layer-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
}

.pv-module-2018-circuit-node {
  fill: none;
  stroke: #26313d;
  stroke-width: 2.8;
}

.pv-module-2018-circuit-string {
  fill: none;
  stroke: #2863b7;
  stroke-width: 4;
}

.pv-module-2018-circuit-cells {
  fill: none;
  stroke: #d9e8fb;
  stroke-width: 1.4;
}

.pv-module-2018-bypass-path {
  fill: none;
  stroke: #c87818;
  stroke-width: 2.2;
}

.pv-module-2018-output-arrow {
  fill: none;
  stroke: #2f6fe8;
  stroke-width: 2.6;
}

.pv-module-2018-circuit-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 720;
}

.pv-module-2018-scope-note {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 730;
}

.pv-module-2019-sun circle {
  fill: #f7ca50;
  stroke: #a86c05;
  stroke-width: 3;
}

.pv-module-2019-sun path {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-module-2019-sun text,
.pv-module-2019-surface-label,
.pv-module-2019-layer-heading,
.pv-module-2019-card-title,
.pv-module-2019-jbox-label,
.pv-module-2019-cell-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.5px;
}

.pv-module-2019-sun text {
  font-size: 13px;
}

.pv-module-2019-rays path,
.pv-module-2019-front-photon {
  fill: none;
  stroke: #c78208;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2019-rays text {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 720;
}

.pv-module-2019-photon-head {
  fill: #c78208;
}

.pv-module-2019-electron-head {
  fill: #2f6fe8;
}

.pv-module-2019-hole-head {
  fill: #e46b31;
}

.pv-module-2019-section-title {
  fill: #245c91;
  font-family: var(--font-family-base);
  font-size: 12.5px;
  font-weight: 850;
  letter-spacing: 0.045em;
}

.pv-module-2019-section-sub,
.pv-module-2019-surface-sub,
.pv-module-2019-callout-sub,
.pv-module-2019-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 10px;
}

.pv-module-2019-complete-frame,
.pv-module-2019-frame {
  fill: #353b43;
  stroke: #151b22;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2019-complete-field,
.pv-module-2019-cell-field,
.pv-module-2019-wire-cell {
  fill: url(#pvModule2019Cell);
  stroke: #071a3d;
  stroke-linejoin: round;
  stroke-width: 1.4;
}

.pv-module-2019-wire-cell--next {
  fill: #173c73;
}

.pv-module-2019-complete-grid,
.pv-module-2019-field-grid {
  fill: none;
  stroke: #d7e8ff;
  stroke-width: 1.15;
}

.pv-module-2019-centre-split,
.pv-module-2019-field-split {
  fill: none;
  stroke: #f4c84c;
  stroke-width: 3;
}

.pv-module-2019-field-wires {
  fill: none;
  stroke: #edf6ff;
  stroke-opacity: 0.78;
  stroke-width: 0.9;
}

.pv-module-2019-surface-label {
  font-size: 12px;
}

.pv-module-2019-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2019-glass {
  fill: url(#pvModule2019Glass);
  stroke: #318da8;
}

.pv-module-2019-encapsulant {
  fill: #edf6cf;
  fill-opacity: 0.9;
  stroke: #8ba243;
}

.pv-module-2019-backsheet {
  fill: #e9ecef;
  stroke: #667586;
}

.pv-module-2019-layer-heading {
  font-size: 11.5px;
}

.pv-module-2019-layer-heading--light.pv-svg-layer-label {
  fill: #fff;
  stroke: #071a3d;
  stroke-width: 1.8px;
}

.pv-module-2019-callout-line {
  fill: none;
  stroke: #758697;
  stroke-width: 1.2;
}

.pv-module-2019-callout {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 10px;
  font-weight: 750;
}

.pv-module-2019-callout-sub {
  font-size: 9px;
}

.pv-module-2019-support-bars,
.pv-module-2019-cable {
  fill: none;
  stroke: #29333e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2019-support-bars {
  stroke: #5a6470;
  stroke-width: 9;
}

.pv-module-2019-junction-box {
  fill: #414b57;
  stroke: #1e2730;
  stroke-width: 1.8;
}

.pv-module-2019-diode,
.pv-module-2019-bypass-symbol {
  fill: #f2bf32;
  stroke: #8b6104;
  stroke-width: 1.2;
}

.pv-module-2019-connector {
  fill: #fff;
  stroke: #26313d;
  stroke-width: 2;
}

.pv-module-2019-jbox-label,
.pv-module-2019-card-title {
  font-size: 10.5px;
}

.pv-module-2019-card-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 720;
}

.pv-module-2019-detail-card,
.pv-module-2019-circuit-card {
  fill: #f8fbff;
  stroke: #b9cadb;
  stroke-width: 1.4;
}

.pv-module-2019-optical-label {
  fill: #946005;
  font-family: var(--font-family-base);
  font-size: 9px;
  font-weight: 750;
}

.pv-module-2019-cell-wire {
  fill: none;
  stroke: #bfc7d0;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2019-cell-tco {
  fill: #65c5ce;
  stroke: #197f8a;
}

.pv-module-2019-cell-p {
  fill: #eaa1b3;
  stroke: #a44d67;
}

.pv-module-2019-cell-n {
  fill: #9cc6f0;
  stroke: #4f7da8;
}

.pv-module-2019-cell-intrinsic {
  fill: #dce8f1;
  stroke: #79909f;
}

.pv-module-2019-cell-wafer {
  fill: #765da7;
  stroke: #483778;
}

.pv-module-2019-cell-label {
  font-size: 8.7px;
}

.pv-module-2019-cell-label--light,
.pv-module-2019-cell-sub--light {
  fill: #fff;
  stroke: #483778;
}

.pv-module-2019-cell-sub {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 700;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
}

.pv-module-2019-hole-flow {
  fill: none;
  stroke: #e46b31;
  stroke-width: 2.8;
}

.pv-module-2019-electron-flow,
.pv-module-2019-wire-current {
  fill: none;
  stroke: #2f6fe8;
  stroke-width: 2.8;
}

.pv-module-2019-wire-foil {
  fill: #dceaf1;
  fill-opacity: 0.84;
  stroke: #6d8b9c;
}

.pv-module-2019-wire-foil--rear {
  fill: #e7edf2;
}

.pv-module-2019-round-wires {
  fill: none;
  stroke: #b8bec7;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-module-2019-wire-fingers {
  fill: none;
  stroke: #d8e7f8;
  stroke-width: 2;
}

.pv-module-2019-wire-label,
.pv-module-2019-circuit-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 720;
}

.pv-module-2019-circuit-node {
  fill: none;
  stroke: #26313d;
  stroke-width: 2.8;
}

.pv-module-2019-circuit-string {
  fill: none;
  stroke: #2863b7;
  stroke-width: 4;
}

.pv-module-2019-circuit-cells {
  fill: none;
  stroke: #d9e8fb;
  stroke-width: 1.4;
}

.pv-module-2019-bypass-path {
  fill: none;
  stroke: #c87818;
  stroke-width: 2.2;
}

.pv-module-2019-scope-note {
  fill: var(--text);
  font-size: 9.5px;
  font-weight: 730;
}

.pv-module-2020-photon-head {
  fill: #c78208;
}

.pv-module-2020-electron-head {
  fill: #2f6fe8;
}

.pv-module-2020-complete-frame,
.pv-module-2020-frame {
  fill: #3d444c;
  stroke: #171d24;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-module-2020-complete-field,
.pv-module-2020-cell-field,
.pv-module-2020-wafer,
.pv-module-2020-half-cell,
.pv-module-2020-ribbon-cell {
  fill: url(#pvModule2020Cell);
  stroke: #081d48;
  stroke-width: 1.5;
}

.pv-module-2020-complete-grid,
.pv-module-2020-field-grid,
.pv-module-2020-wafer-grid {
  fill: none;
  stroke: #d7e9ff;
  stroke-width: 1.05;
}

.pv-module-2020-complete-split,
.pv-module-2020-field-split {
  fill: none;
  stroke: #f4c84c;
  stroke-width: 3;
}

.pv-module-2020-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 15%));
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.pv-module-2020-glass {
  fill: url(#pvModule2020Glass);
  stroke: #318da8;
}

.pv-module-2020-rear-glass {
  fill-opacity: 0.76;
}

.pv-module-2020-encapsulant {
  fill: #edf6cf;
  fill-opacity: 0.9;
  stroke: #8ba243;
}

.pv-module-2020-field-grid {
  stroke-width: 1.05;
}

.pv-module-2020-field-mbb {
  fill: none;
  stroke: #f4f8ff;
  stroke-opacity: 0.8;
  stroke-width: 0.85;
}

.pv-module-2020-junction-box {
  fill: #414b57;
  stroke: #1e2730;
  stroke-width: 1.8;
}

.pv-module-2020-diode {
  fill: #f2bf32;
  stroke: #8b6104;
  stroke-width: 1.2;
}

.pv-module-2020-cable {
  fill: none;
  stroke: #29333e;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-module-2020-connector {
  fill: #fff;
  stroke: #26313d;
  stroke-width: 2;
}

.pv-module-2020-detail-card {
  fill: #f8fbff;
  stroke: #b9cadb;
  stroke-width: 1.4;
}

.pv-module-2020-card-title,
.pv-module-2020-detail-label,
.pv-module-2020-stack-label,
.pv-module-2020-boundary-main {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-weight: 780;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 2.4px;
}

.pv-module-2020-card-title {
  font-size: 10.5px;
}

.pv-module-2020-card-sub,
.pv-module-2020-stack-sub,
.pv-module-2020-boundary-sub,
.pv-module-2020-scope-note {
  fill: var(--muted);
  font-family: var(--font-family-base);
  font-size: 8.5px;
  font-weight: 710;
}

.pv-module-2020-detail-label {
  font-size: 8.5px;
}

.pv-module-2020-cut-line {
  fill: none;
  stroke: #f2bf32;
  stroke-dasharray: 7 5;
  stroke-width: 3;
}

.pv-module-2020-dimension,
.pv-module-2020-gap-dimension {
  fill: none;
  stroke: #5e7082;
  stroke-width: 1.4;
}

.pv-module-2020-format-arrow,
.pv-module-2020-current {
  fill: none;
  stroke: #2f6fe8;
  stroke-width: 3;
}

.pv-module-2020-stack-front {
  fill: #5bb8cf;
  stroke: #287f96;
}

.pv-module-2020-stack-emitter {
  fill: #aacdf1;
  stroke: #4f7da8;
}

.pv-module-2020-stack-base {
  fill: #c88f5e;
  stroke: #87562f;
}

.pv-module-2020-stack-rear-passivation {
  fill: #d8c5ed;
  stroke: #8065a8;
}

.pv-module-2020-stack-rear-grid {
  fill: none;
  stroke: #b68a24;
  stroke-width: 6;
}

.pv-module-2020-stack-label {
  font-size: 8.2px;
}

.pv-module-2020-stack-label--light {
  fill: #fff;
  stroke: #69401f;
}

.pv-module-2020-stack-sub {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 2px;
}

.pv-module-2020-segmented-ribbon {
  fill: none;
  stroke: #cf8a0c;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 6;
}

.pv-module-2020-ribbon-light,
.pv-module-2020-ribbon-reflection {
  fill: none;
  stroke: #c78208;
  stroke-width: 2.4;
}

.pv-module-2020-boundary {
  fill: #eef5fb;
  stroke: #8ba4b9;
  stroke-width: 1.3;
}

.pv-module-2020-boundary-main {
  font-size: 10px;
}

.pv-module-2020-boundary-sub {
  font-size: 8.3px;
}

.pv-module-2020-scope-note {
  fill: var(--text);
  font-size: 9.2px;
  font-weight: 730;
}

.pv-module-callout {
  stroke: var(--muted);
  stroke-width: 1.5;
}

.pv-module-rear-connection {
  fill: none;
  stroke: #c97918;
  stroke-dasharray: 5 4;
  stroke-width: 2.5;
}

.pv-module-bypass-diodes rect {
  fill: #f2c94c;
  stroke: #9a6700;
  stroke-width: 1;
}

.pv-module-connector {
  fill: var(--surface);
  stroke: var(--text);
  stroke-width: 2.5;
}

.pv-module-terminal {
  fill: var(--surface);
  stroke: var(--text);
  stroke-width: 3;
}

.pv-module-layer-label,
.pv-module-small-label,
.pv-module-callout-label,
.pv-module-callout-sub {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-module-layer-label {
  font-size: 15px;
  font-weight: 800;
}

.pv-module-layer-label--light {
  fill: #ffffff;
}

.pv-module-small-label,
.pv-module-callout-label {
  font-size: 14.5px;
}

.pv-module-callout-label {
  font-weight: 800;
}

.pv-module-callout-sub {
  fill: var(--muted);
  font-size: 12.5px;
}

.pv-module-small-label {
  fill: #ffffff;
}

.photovoltaic-effect-figure {
  min-width: 0;
  margin: 0;
}

.photovoltaic-effect-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text);
}

.pv-svg-board {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 2;
}

.pv-svg-panel-title,
.pv-svg-label,
.pv-svg-small-label,
.pv-svg-layer-label,
.pv-svg-formula-label,
.pv-svg-field-label,
.pv-svg-fixed-charge,
.pv-svg-electron-flow-label,
.pv-svg-conventional-flow-label,
.pv-svg-terminal-label,
.pv-svg-voltage-label,
.pv-svg-band-label {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-svg-panel-title {
  font-size: 19px;
  font-weight: 800;
}

.pv-svg-interaction-hint {
  fill: var(--accent);
  font-family: var(--font-family-base);
  font-size: 13px;
  font-weight: 700;
}

.pv-svg-sun {
  fill: #f7c948;
  stroke: #9a6700;
  stroke-width: 3;
}

.pv-svg-sun-rays {
  fill: none;
  stroke: #d18b00;
  stroke-linecap: round;
  stroke-width: 5;
}

.pv-svg-photon {
  fill: none;
  stroke: #d18b00;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-svg-arrow-photon {
  fill: #d18b00;
}

.pv-svg-contact,
.pv-svg-grid-contact {
  fill: color-mix(in srgb, var(--text) 82%, var(--surface));
}

.pv-svg-front-bus {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 82%, var(--surface));
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.pv-svg-callout-line {
  fill: none;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.pv-svg-ar-coating {
  fill: color-mix(in srgb, #13958f 58%, var(--surface));
  stroke: #137a75;
  stroke-width: 1;
}

.pv-svg-n-layer {
  fill: color-mix(in srgb, var(--accent) 22%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 60%, var(--border));
  stroke-width: 1.5;
}

.pv-svg-depletion-layer {
  fill: color-mix(in srgb, #7557b8 16%, var(--surface));
  stroke: color-mix(in srgb, #7557b8 56%, var(--border));
  stroke-width: 1.5;
}

.pv-svg-p-layer {
  fill: color-mix(in srgb, #e36d2f 22%, var(--surface));
  stroke: color-mix(in srgb, #e36d2f 65%, var(--border));
  stroke-width: 1.5;
}

.pv-gaas-window-layer {
  fill: color-mix(in srgb, #f2c94c 34%, var(--surface));
  stroke: color-mix(in srgb, #9a6700 62%, var(--border));
  stroke-width: 1.5;
}

.pv-gaas-base-layer {
  fill: color-mix(in srgb, #c85f9d 20%, var(--surface));
  stroke: color-mix(in srgb, #9b3d75 62%, var(--border));
  stroke-width: 1.5;
}

.pv-gaas-bsf-layer {
  fill: color-mix(in srgb, #35a870 24%, var(--surface));
  stroke: color-mix(in srgb, #1f7e50 62%, var(--border));
  stroke-width: 1.5;
}

.pv-opv-substrate-layer {
  fill: color-mix(in srgb, #8ed8e8 23%, var(--surface));
  stroke: color-mix(in srgb, #27899f 58%, var(--border));
  stroke-width: 1.5;
}

.pv-opv-transparent-electrode {
  fill: color-mix(in srgb, #54b9cc 36%, var(--surface));
  stroke: color-mix(in srgb, #1a7890 66%, var(--border));
  stroke-width: 1.5;
}

.pv-opv-hole-layer {
  fill: color-mix(in srgb, #e36d2f 24%, var(--surface));
  stroke: color-mix(in srgb, #c84f1c 62%, var(--border));
  stroke-width: 1.5;
}

.pv-opv-active-layer {
  fill: color-mix(in srgb, #7357b8 18%, var(--surface));
  stroke: color-mix(in srgb, #7357b8 64%, var(--border));
  stroke-width: 1.5;
}

.pv-opv-donor-network,
.pv-opv-acceptor-network {
  fill: none;
  stroke-linecap: round;
  stroke-width: 12;
  opacity: 0.72;
  pointer-events: none;
}

.pv-opv-donor-network {
  stroke: #df6d34;
}

.pv-opv-acceptor-network {
  stroke: #5c6fca;
}

.pv-opv-layer-label-backdrop {
  fill: color-mix(in srgb, var(--surface) 91%, transparent);
  stroke: color-mix(in srgb, var(--border) 75%, transparent);
  stroke-width: 1;
  pointer-events: none;
}

.pv-opv-electron-layer {
  fill: color-mix(in srgb, var(--accent) 22%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 62%, var(--border));
  stroke-width: 1.5;
}

.pv-opv-encapsulation-layer {
  fill: color-mix(in srgb, #aeb7c4 22%, var(--surface));
  stroke: color-mix(in srgb, #687486 58%, var(--border));
  stroke-width: 2;
  stroke-dasharray: 7 4;
}

.pv-opv-exciton {
  fill: #8b62c7;
  stroke: #5d3b92;
  stroke-width: 2;
}

.pv-cdte-glass-layer {
  fill: color-mix(in srgb, #a5dbea 24%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-cdte-tco-layer {
  fill: color-mix(in srgb, #4bb7c4 34%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-cdte-buffer-layer {
  fill: color-mix(in srgb, #b7d96c 30%, var(--surface));
  stroke: color-mix(in srgb, #6f9230 60%, var(--border));
  stroke-width: 1.5;
}

.pv-cdte-window-layer {
  fill: color-mix(in srgb, #f0d44d 38%, var(--surface));
  stroke: color-mix(in srgb, #a88400 64%, var(--border));
  stroke-width: 1.5;
}

.pv-cdte-absorber-layer {
  fill: color-mix(in srgb, #a85a91 26%, var(--surface));
  stroke: color-mix(in srgb, #7d386a 66%, var(--border));
  stroke-width: 1.5;
}

.pv-cdte-back-interface {
  fill: color-mix(in srgb, #d67b3f 30%, var(--surface));
  stroke: color-mix(in srgb, #a84f19 62%, var(--border));
  stroke-width: 1.5;
}

.pv-asi-glass-layer {
  fill: color-mix(in srgb, #a5dbea 24%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-asi-front-tco {
  fill: color-mix(in srgb, #4bb7c4 34%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-asi-p-layer {
  fill: color-mix(in srgb, #e36d2f 25%, var(--surface));
  stroke: color-mix(in srgb, #c84f1c 62%, var(--border));
  stroke-width: 1.5;
}

.pv-asi-intrinsic-layer {
  fill: color-mix(in srgb, #7557b8 18%, var(--surface));
  stroke: color-mix(in srgb, #7557b8 62%, var(--border));
  stroke-width: 1.5;
}

.pv-asi-n-layer {
  fill: color-mix(in srgb, var(--accent) 22%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 62%, var(--border));
  stroke-width: 1.5;
}

.pv-asi-rear-tco {
  fill: color-mix(in srgb, #8bc66b 30%, var(--surface));
  stroke: color-mix(in srgb, #4f9131 62%, var(--border));
  stroke-width: 1.5;
}

.pv-cigs-azo-layer {
  fill: color-mix(in srgb, #54b9cc 34%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-cigs-zno-layer {
  fill: color-mix(in srgb, #9ad7df 27%, var(--surface));
  stroke: color-mix(in srgb, #3a96a2 58%, var(--border));
  stroke-width: 1.5;
}

.pv-cigs-buffer-layer {
  fill: color-mix(in srgb, #f0d44d 36%, var(--surface));
  stroke: color-mix(in srgb, #a88400 62%, var(--border));
  stroke-width: 1.5;
}

.pv-cigs-absorber-layer {
  fill: color-mix(in srgb, #c66d45 25%, var(--surface));
  stroke: color-mix(in srgb, #934622 64%, var(--border));
  stroke-width: 1.5;
}

.pv-cigs-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-fto-layer {
  fill: color-mix(in srgb, #54b9cc 38%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-tio2-layer {
  fill: color-mix(in srgb, #d8e8f5 52%, var(--surface));
  stroke: color-mix(in srgb, #668ba9 62%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-pore-pattern {
  fill: none;
  stroke: color-mix(in srgb, #668ba9 64%, var(--text));
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.38;
  pointer-events: none;
}

.pv-dssc-dye-layer {
  fill: color-mix(in srgb, #bd3f91 18%, var(--surface));
  stroke: color-mix(in srgb, #a12878 68%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-dye-dot {
  fill: #bd3f91;
  stroke: color-mix(in srgb, #7d195e 78%, var(--text));
  stroke-width: 1.5;
  pointer-events: none;
}

.pv-dssc-electrolyte-layer {
  fill: color-mix(in srgb, #f0c94b 21%, var(--surface));
  stroke: color-mix(in srgb, #a37d00 60%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-catalyst-layer {
  fill: color-mix(in srgb, #4c5360 87%, var(--surface));
  stroke: color-mix(in srgb, #222936 72%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-counter-layer {
  fill: color-mix(in srgb, #9bc9d5 28%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 58%, var(--border));
  stroke-width: 1.5;
}

.pv-dssc-redox-path {
  fill: none;
  stroke: #d85b2b;
  stroke-width: 3;
  stroke-dasharray: 6 5;
}

.pv-quantum-dot-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-tco-layer {
  fill: color-mix(in srgb, #54b9cc 38%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-tio2-layer {
  fill: color-mix(in srgb, #d8e8f5 52%, var(--surface));
  stroke: color-mix(in srgb, #668ba9 62%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-pore-pattern {
  fill: none;
  stroke: color-mix(in srgb, #668ba9 64%, var(--text));
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.38;
  pointer-events: none;
}

.pv-quantum-dot-sensitizer-layer {
  fill: color-mix(in srgb, #6558c8 18%, var(--surface));
  stroke: color-mix(in srgb, #4b3bab 68%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-particle {
  fill: #6558c8;
  stroke: color-mix(in srgb, #30267e 78%, var(--text));
  stroke-width: 1.5;
  pointer-events: none;
}

.pv-quantum-dot-electrolyte-layer {
  fill: color-mix(in srgb, #72c5a1 23%, var(--surface));
  stroke: color-mix(in srgb, #23805d 62%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-catalyst-layer {
  fill: color-mix(in srgb, #4c5360 87%, var(--surface));
  stroke: color-mix(in srgb, #222936 72%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-counter-layer {
  fill: color-mix(in srgb, #9bc9d5 28%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 58%, var(--border));
  stroke-width: 1.5;
}

.pv-quantum-dot-redox-path {
  fill: none;
  stroke: #d85b2b;
  stroke-width: 3;
  stroke-dasharray: 6 5;
}

.pv-quantum-dot-photon-paths,
.pv-quantum-dot-stack-svg .pv-svg-electron-path,
.pv-quantum-dot-stack-svg .pv-svg-hole-path,
.pv-quantum-dot-stack-svg .pv-svg-electron-flow,
.pv-quantum-dot-stack-svg .pv-quantum-dot-redox-path {
  pointer-events: none;
}

.pv-quantum-dot-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-quantum-dot-stack-svg .pv-svg-layer-label,
.pv-quantum-dot-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-quantum-dot-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-quantum-dot-stack-svg .pv-svg-contact-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-perovskite-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-fto-layer {
  fill: color-mix(in srgb, #54b9cc 38%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-compact-etl-layer {
  fill: color-mix(in srgb, #9cc9ee 42%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-mesoporous-layer {
  fill: color-mix(in srgb, #c7b6df 30%, var(--surface));
  stroke: color-mix(in srgb, #735a9a 58%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-pore-pattern {
  fill: none;
  stroke: color-mix(in srgb, #668ba9 64%, var(--text));
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.38;
  pointer-events: none;
}

.pv-perovskite-pore-fill {
  fill: #8d3d72;
  stroke: color-mix(in srgb, #542043 78%, var(--text));
  stroke-width: 1.3;
  pointer-events: none;
}

.pv-perovskite-absorber-layer {
  fill: color-mix(in srgb, #8d3d72 88%, var(--surface));
  stroke: color-mix(in srgb, #542043 80%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-htl-layer {
  fill: color-mix(in srgb, #e3a59c 42%, var(--surface));
  stroke: color-mix(in srgb, #a85d52 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-rear-metal-layer {
  fill: color-mix(in srgb, #d3a52c 78%, var(--surface));
  stroke: color-mix(in srgb, #8b6710 76%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-dark-label {
  fill: #ffffff;
}

.pv-perovskite-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-perovskite-photon-paths,
.pv-perovskite-stack-svg .pv-svg-electron-path,
.pv-perovskite-stack-svg .pv-svg-hole-path,
.pv-perovskite-stack-svg .pv-svg-electron-flow {
  pointer-events: none;
}

.pv-perovskite-stack-svg .pv-svg-layer-label,
.pv-perovskite-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-perovskite-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-perovskite-stack-svg .pv-svg-contact-label,
.pv-perovskite-stack-svg .pv-perovskite-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-perovskite-silicon-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-front-tco-layer {
  fill: color-mix(in srgb, #54b9cc 38%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-top-htl-layer {
  fill: color-mix(in srgb, #e3a59c 42%, var(--surface));
  stroke: color-mix(in srgb, #a85d52 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-perovskite-layer {
  fill: color-mix(in srgb, #8d3d72 88%, var(--surface));
  stroke: color-mix(in srgb, #542043 80%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-top-etl-layer {
  fill: color-mix(in srgb, #9cc9ee 44%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-interconnect-layer {
  fill: color-mix(in srgb, #326f73 86%, var(--surface));
  stroke: color-mix(in srgb, #17484b 78%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-bottom-cell-layer {
  fill: color-mix(in srgb, #7998e8 26%, var(--surface));
  stroke: color-mix(in srgb, #304fba 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-rear-selective-layer {
  fill: color-mix(in srgb, #8f79c6 30%, var(--surface));
  stroke: color-mix(in srgb, #5d4398 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-rear-metal-layer {
  fill: color-mix(in srgb, #3f4652 88%, var(--surface));
  stroke: color-mix(in srgb, #1f2630 78%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-dark-label {
  fill: #ffffff;
}

.pv-perovskite-silicon-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-perovskite-silicon-photon-paths,
.pv-perovskite-silicon-stack-svg .pv-svg-electron-path,
.pv-perovskite-silicon-stack-svg .pv-svg-hole-path,
.pv-perovskite-silicon-stack-svg .pv-svg-electron-flow {
  pointer-events: none;
}

.pv-perovskite-silicon-stack-svg .pv-svg-layer-label,
.pv-perovskite-silicon-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-perovskite-silicon-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-perovskite-silicon-stack-svg .pv-svg-contact-label,
.pv-perovskite-silicon-stack-svg .pv-perovskite-silicon-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-all-perovskite-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-front-ito-layer {
  fill: color-mix(in srgb, #54b9cc 40%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-niox-layer {
  fill: color-mix(in srgb, #b58ac8 40%, var(--surface));
  stroke: color-mix(in srgb, #76518d 66%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-wide-absorber-layer {
  fill: color-mix(in srgb, #a33b72 88%, var(--surface));
  stroke: color-mix(in srgb, #612044 82%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-pcbm-layer {
  fill: color-mix(in srgb, #83b8e5 42%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 66%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-interconnect-layer {
  fill: color-mix(in srgb, #326f73 86%, var(--surface));
  stroke: color-mix(in srgb, #17484b 78%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-pedot-layer {
  fill: color-mix(in srgb, #de8a99 42%, var(--surface));
  stroke: color-mix(in srgb, #9f4c5c 66%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-narrow-absorber-layer {
  fill: color-mix(in srgb, #6e4f91 88%, var(--surface));
  stroke: color-mix(in srgb, #3f2a59 82%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-c60-bcp-layer {
  fill: color-mix(in srgb, #9cc9ee 44%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 64%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-rear-metal-layer {
  fill: color-mix(in srgb, #3f4652 88%, var(--surface));
  stroke: color-mix(in srgb, #1f2630 78%, var(--border));
  stroke-width: 1.5;
}

.pv-all-perovskite-dark-label {
  fill: #ffffff;
}

.pv-all-perovskite-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-all-perovskite-photon-paths,
.pv-all-perovskite-stack-svg .pv-svg-electron-path,
.pv-all-perovskite-stack-svg .pv-svg-hole-path,
.pv-all-perovskite-stack-svg .pv-svg-electron-flow {
  pointer-events: none;
}

.pv-all-perovskite-stack-svg .pv-svg-layer-label,
.pv-all-perovskite-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-all-perovskite-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-all-perovskite-stack-svg .pv-svg-contact-label,
.pv-all-perovskite-stack-svg .pv-all-perovskite-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-perovskite-cqd-glass-layer {
  fill: color-mix(in srgb, #a5dbea 22%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 55%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-front-tco-layer {
  fill: color-mix(in srgb, #54b9cc 40%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-compact-tio2-layer {
  fill: color-mix(in srgb, #9cc9ee 46%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-mesoporous-tio2-layer {
  fill: color-mix(in srgb, #bed8ec 45%, var(--surface));
  stroke: color-mix(in srgb, #5d8cad 62%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-perovskite-layer {
  fill: color-mix(in srgb, #8d3d72 88%, var(--surface));
  stroke: color-mix(in srgb, #542043 80%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-ptaa-layer {
  fill: color-mix(in srgb, #e3a59c 44%, var(--surface));
  stroke: color-mix(in srgb, #a85d52 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-interconnect-layer {
  fill: color-mix(in srgb, #806b49 88%, var(--surface));
  stroke: color-mix(in srgb, #4f3d22 78%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-zno-layer {
  fill: color-mix(in srgb, #a7cfdf 48%, var(--surface));
  stroke: color-mix(in srgb, #4e8ea7 62%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-pbs-layer {
  fill: color-mix(in srgb, #51486e 90%, var(--surface));
  stroke: color-mix(in srgb, #2f2944 82%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-rear-moox-layer {
  fill: color-mix(in srgb, #d9b65d 46%, var(--surface));
  stroke: color-mix(in srgb, #a2781c 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-rear-gold-layer {
  fill: color-mix(in srgb, #9c7419 90%, var(--surface));
  stroke: color-mix(in srgb, #604509 82%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cqd-dark-label {
  fill: #ffffff;
}

.pv-perovskite-cqd-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-perovskite-cqd-photon-paths,
.pv-perovskite-cqd-stack-svg .pv-svg-electron-path,
.pv-perovskite-cqd-stack-svg .pv-svg-hole-path,
.pv-perovskite-cqd-stack-svg .pv-svg-electron-flow {
  pointer-events: none;
}

.pv-perovskite-cqd-stack-svg .pv-svg-layer-label,
.pv-perovskite-cqd-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-perovskite-cqd-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-perovskite-cqd-stack-svg .pv-svg-contact-label,
.pv-perovskite-cqd-stack-svg .pv-perovskite-cqd-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-perovskite-cigs-mgf2-layer {
  fill: color-mix(in srgb, #dff3f6 58%, var(--surface));
  stroke: color-mix(in srgb, #67aebb 62%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-grid-layer {
  fill: color-mix(in srgb, #4b535e 90%, var(--surface));
  stroke: color-mix(in srgb, #202731 82%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-azo-layer,
.pv-perovskite-cigs-middle-azo-layer {
  fill: color-mix(in srgb, #49b6c8 46%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-middle-azo-layer {
  fill: color-mix(in srgb, #326f73 88%, var(--surface));
  stroke: color-mix(in srgb, #16484c 82%, var(--border));
}

.pv-perovskite-cigs-zno-layer,
.pv-perovskite-cigs-izno-layer {
  fill: color-mix(in srgb, #a7cfdf 52%, var(--surface));
  stroke: color-mix(in srgb, #4e8ea7 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-pcbm-layer {
  fill: color-mix(in srgb, #9cc9ee 50%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-perovskite-layer {
  fill: color-mix(in srgb, #8d3d72 88%, var(--surface));
  stroke: color-mix(in srgb, #542043 80%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-ptaa-layer {
  fill: color-mix(in srgb, #e3a59c 46%, var(--surface));
  stroke: color-mix(in srgb, #a85d52 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-cds-layer {
  fill: color-mix(in srgb, #f1d66b 58%, var(--surface));
  stroke: color-mix(in srgb, #a88c25 68%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-cigs-layer {
  fill: color-mix(in srgb, #994f6a 90%, var(--surface));
  stroke: color-mix(in srgb, #5b2639 82%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-mo-layer {
  fill: color-mix(in srgb, #434a55 92%, var(--surface));
  stroke: color-mix(in srgb, #202731 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-polyimide-layer {
  fill: color-mix(in srgb, #e49a39 42%, var(--surface));
  stroke: color-mix(in srgb, #a56415 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-cigs-dark-label {
  fill: #ffffff;
}

.pv-perovskite-cigs-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-perovskite-cigs-photon-paths,
.pv-perovskite-cigs-stack-svg .pv-svg-electron-path,
.pv-perovskite-cigs-stack-svg .pv-svg-hole-path,
.pv-perovskite-cigs-stack-svg .pv-svg-electron-flow {
  pointer-events: none;
}

.pv-perovskite-cigs-stack-svg .pv-svg-layer-label,
.pv-perovskite-cigs-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-perovskite-cigs-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-perovskite-cigs-stack-svg .pv-svg-contact-label,
.pv-perovskite-cigs-stack-svg .pv-perovskite-cigs-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-triple-perovskite-glass-layer {
  fill: color-mix(in srgb, #a5dbea 24%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 56%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-ito-layer {
  fill: color-mix(in srgb, #54b9cc 44%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 66%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-ptaa-layer {
  fill: color-mix(in srgb, #e3a59c 48%, var(--surface));
  stroke: color-mix(in srgb, #a85d52 65%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-wide-layer {
  fill: color-mix(in srgb, #a33b72 90%, var(--surface));
  stroke: color-mix(in srgb, #612043 82%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-middle-layer {
  fill: color-mix(in srgb, #7d4e91 90%, var(--surface));
  stroke: color-mix(in srgb, #452554 82%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-narrow-layer {
  fill: color-mix(in srgb, #51486e 92%, var(--surface));
  stroke: color-mix(in srgb, #2f2944 84%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-c60-layer {
  fill: color-mix(in srgb, #9cc9ee 50%, var(--surface));
  stroke: color-mix(in srgb, #3f78aa 65%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-sno2-layer {
  fill: color-mix(in srgb, #b8d8e8 52%, var(--surface));
  stroke: color-mix(in srgb, #4e8ea7 64%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-gold-layer {
  fill: color-mix(in srgb, #9c7419 90%, var(--surface));
  stroke: color-mix(in srgb, #604509 82%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-pedot-layer {
  fill: color-mix(in srgb, #c94d6e 54%, var(--surface));
  stroke: color-mix(in srgb, #8f2947 67%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-bcp-layer {
  fill: color-mix(in srgb, #b7a9df 48%, var(--surface));
  stroke: color-mix(in srgb, #6c5aa2 65%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-silver-layer {
  fill: color-mix(in srgb, #4b535e 92%, var(--surface));
  stroke: color-mix(in srgb, #202731 84%, var(--border));
  stroke-width: 1.5;
}

.pv-triple-perovskite-dark-label {
  fill: #ffffff;
}

.pv-triple-perovskite-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-triple-perovskite-photon-paths,
.pv-triple-perovskite-stack-svg .pv-svg-electron-path,
.pv-triple-perovskite-stack-svg .pv-svg-hole-path,
.pv-triple-perovskite-stack-svg .pv-svg-electron-flow,
.pv-triple-perovskite-stack-svg .pv-svg-conventional-flow {
  pointer-events: none;
}

.pv-triple-perovskite-stack-svg .pv-svg-layer-label,
.pv-triple-perovskite-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-triple-perovskite-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-triple-perovskite-stack-svg .pv-svg-contact-label,
.pv-triple-perovskite-stack-svg .pv-triple-perovskite-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-perovskite-organic-mgf2-layer {
  fill: color-mix(in srgb, #dff4fa 62%, var(--surface));
  stroke: color-mix(in srgb, #58a5ba 54%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-glass-layer {
  fill: color-mix(in srgb, #a5dbea 24%, var(--surface));
  stroke: color-mix(in srgb, #3b8fa5 56%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-ito-layer {
  fill: color-mix(in srgb, #54b9cc 44%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-meo2pacz-layer {
  fill: color-mix(in srgb, #e6ae9b 54%, var(--surface));
  stroke: color-mix(in srgb, #aa644f 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-perovskite-layer {
  fill: color-mix(in srgb, #9c3f74 90%, var(--surface));
  stroke: color-mix(in srgb, #5f2247 82%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-peai-layer {
  fill: color-mix(in srgb, #d6b8e8 54%, var(--surface));
  stroke: color-mix(in srgb, #825b9c 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-pc61bm-layer {
  fill: color-mix(in srgb, #93c7ec 54%, var(--surface));
  stroke: color-mix(in srgb, #3975a6 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-azo-layer {
  fill: color-mix(in srgb, #b7dce7 56%, var(--surface));
  stroke: color-mix(in srgb, #4d8fa4 64%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-snox-layer {
  fill: color-mix(in srgb, #8fc3d5 54%, var(--surface));
  stroke: color-mix(in srgb, #397d94 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-inox-layer {
  fill: color-mix(in srgb, #237c83 88%, var(--surface));
  stroke: color-mix(in srgb, #155055 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-moox-layer {
  fill: color-mix(in srgb, #db9b55 58%, var(--surface));
  stroke: color-mix(in srgb, #955e22 67%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-bhj-layer {
  fill: color-mix(in srgb, #69476f 92%, var(--surface));
  stroke: color-mix(in srgb, #39263e 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-c60-layer {
  fill: color-mix(in srgb, #8fb8e1 54%, var(--surface));
  stroke: color-mix(in srgb, #416d9c 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-bcp-layer {
  fill: color-mix(in srgb, #b9abdf 52%, var(--surface));
  stroke: color-mix(in srgb, #6b5a9d 65%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-silver-layer {
  fill: color-mix(in srgb, #4b535e 92%, var(--surface));
  stroke: color-mix(in srgb, #202731 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-organic-dark-label,
.pv-perovskite-organic-stack-svg .pv-svg-contact-label {
  fill: #ffffff;
}

.pv-perovskite-organic-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-perovskite-organic-photon-paths,
.pv-perovskite-organic-stack-svg .pv-svg-electron-path,
.pv-perovskite-organic-stack-svg .pv-svg-hole-path,
.pv-perovskite-organic-stack-svg .pv-svg-electron-flow,
.pv-perovskite-organic-stack-svg .pv-svg-conventional-flow {
  pointer-events: none;
}

.pv-perovskite-organic-stack-svg .pv-svg-layer-label,
.pv-perovskite-organic-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-perovskite-organic-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-perovskite-organic-stack-svg .pv-svg-contact-label,
.pv-perovskite-organic-stack-svg .pv-perovskite-organic-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-perovskite-silicon-triple-mgf2-layer {
  fill: color-mix(in srgb, #dff4fa 64%, var(--surface));
  stroke: color-mix(in srgb, #58a5ba 54%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-gold-layer {
  fill: color-mix(in srgb, #a87b16 94%, var(--surface));
  stroke: color-mix(in srgb, #604509 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-izo-layer {
  fill: color-mix(in srgb, #55bdca 48%, var(--surface));
  stroke: color-mix(in srgb, #187f8b 68%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-snox-layer {
  fill: color-mix(in srgb, #9dcbdc 56%, var(--surface));
  stroke: color-mix(in srgb, #417e96 65%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-c60-layer {
  fill: color-mix(in srgb, #8fb8e1 56%, var(--surface));
  stroke: color-mix(in srgb, #416d9c 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-lif-layer {
  fill: color-mix(in srgb, #d9d4f3 62%, var(--surface));
  stroke: color-mix(in srgb, #776bad 62%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-wide-layer {
  fill: color-mix(in srgb, #a23e73 90%, var(--surface));
  stroke: color-mix(in srgb, #612043 82%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-2pacz-layer {
  fill: color-mix(in srgb, #e7ad9a 58%, var(--surface));
  stroke: color-mix(in srgb, #a45f4c 65%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-niox-layer {
  fill: color-mix(in srgb, #91c28d 54%, var(--surface));
  stroke: color-mix(in srgb, #4f8550 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-ito-layer {
  fill: color-mix(in srgb, #4aaab9 62%, var(--surface));
  stroke: color-mix(in srgb, #176e78 72%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-middle-layer {
  fill: color-mix(in srgb, #714f8e 92%, var(--surface));
  stroke: color-mix(in srgb, #422b57 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-npolo-layer {
  fill: color-mix(in srgb, #7898c9 58%, var(--surface));
  stroke: color-mix(in srgb, #3f6091 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-silicon-layer {
  fill: color-mix(in srgb, #485a9b 92%, var(--surface));
  stroke: color-mix(in srgb, #26356c 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-ppolo-layer {
  fill: color-mix(in srgb, #c6948b 58%, var(--surface));
  stroke: color-mix(in srgb, #8b554d 66%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-aluminium-layer {
  fill: color-mix(in srgb, #4e5662 92%, var(--surface));
  stroke: color-mix(in srgb, #222933 84%, var(--border));
  stroke-width: 1.5;
}

.pv-perovskite-silicon-triple-dark-label,
.pv-perovskite-silicon-triple-stack-svg .pv-svg-contact-label {
  fill: #ffffff;
}

.pv-perovskite-silicon-triple-process-label,
.pv-perovskite-silicon-triple-side-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-perovskite-silicon-triple-photon-paths,
.pv-perovskite-silicon-triple-stack-svg .pv-svg-electron-path,
.pv-perovskite-silicon-triple-stack-svg .pv-svg-hole-path,
.pv-perovskite-silicon-triple-stack-svg .pv-svg-electron-flow,
.pv-perovskite-silicon-triple-stack-svg .pv-svg-conventional-flow {
  pointer-events: none;
}

.pv-perovskite-silicon-triple-stack-svg .pv-svg-layer-label,
.pv-perovskite-silicon-triple-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-perovskite-silicon-triple-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-perovskite-silicon-triple-stack-svg .pv-svg-contact-label,
.pv-perovskite-silicon-triple-stack-svg .pv-perovskite-silicon-triple-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-quadruple-perovskite-fto-layer {
  fill: color-mix(in srgb, #9ad9e5 48%, var(--surface));
  stroke: color-mix(in srgb, #368da0 68%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-sam-layer {
  fill: color-mix(in srgb, #efc0a6 62%, var(--surface));
  stroke: color-mix(in srgb, #a66a4a 66%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-wbg-one-layer {
  fill: color-mix(in srgb, #bf385f 92%, var(--surface));
  stroke: color-mix(in srgb, #742039 84%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-wbg-two-layer {
  fill: color-mix(in srgb, #a1447e 92%, var(--surface));
  stroke: color-mix(in srgb, #62264c 84%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-mbg-layer {
  fill: color-mix(in srgb, #70508f 92%, var(--surface));
  stroke: color-mix(in srgb, #422b57 84%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-nbg-layer {
  fill: color-mix(in srgb, #494c75 94%, var(--surface));
  stroke: color-mix(in srgb, #292b4b 86%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-pcbm-layer {
  fill: color-mix(in srgb, #a7c7e8 58%, var(--surface));
  stroke: color-mix(in srgb, #4874a0 66%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-interconnect-layer {
  fill: color-mix(in srgb, #3c9dab 68%, var(--surface));
  stroke: color-mix(in srgb, #176873 78%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-niox-sam-layer {
  fill: color-mix(in srgb, #91c28d 56%, var(--surface));
  stroke: color-mix(in srgb, #4d8350 68%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-c60-layer {
  fill: color-mix(in srgb, #8fb8e1 58%, var(--surface));
  stroke: color-mix(in srgb, #416d9c 68%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-pedot-layer {
  fill: color-mix(in srgb, #d06c8c 60%, var(--surface));
  stroke: color-mix(in srgb, #8e3c59 68%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-snox-layer {
  fill: color-mix(in srgb, #9dcbdc 58%, var(--surface));
  stroke: color-mix(in srgb, #417e96 66%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-silver-layer {
  fill: color-mix(in srgb, #4b535e 94%, var(--surface));
  stroke: color-mix(in srgb, #202731 86%, var(--border));
  stroke-width: 1.5;
}

.pv-quadruple-perovskite-dark-label,
.pv-quadruple-perovskite-stack-svg .pv-svg-contact-label {
  fill: #ffffff;
}

.pv-quadruple-perovskite-process-label {
  fill: var(--text);
  font-weight: 650;
}

.pv-quadruple-perovskite-photon-paths,
.pv-quadruple-perovskite-stack-svg .pv-svg-electron-path,
.pv-quadruple-perovskite-stack-svg .pv-svg-hole-path,
.pv-quadruple-perovskite-stack-svg .pv-svg-electron-flow,
.pv-quadruple-perovskite-stack-svg .pv-svg-conventional-flow {
  pointer-events: none;
}

.pv-quadruple-perovskite-stack-svg .pv-svg-layer-label,
.pv-quadruple-perovskite-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-quadruple-perovskite-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-quadruple-perovskite-stack-svg .pv-svg-contact-label,
.pv-quadruple-perovskite-stack-svg .pv-quadruple-perovskite-dark-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.42);
}

.pv-memsol-glass-layer {
  fill: color-mix(in srgb, #d9eef3 68%, var(--surface));
  stroke: color-mix(in srgb, #6595a1 64%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-tco-layer {
  fill: color-mix(in srgb, #72bfd0 62%, var(--surface));
  stroke: color-mix(in srgb, #26798c 72%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-hole-layer {
  fill: color-mix(in srgb, #eaa48e 65%, var(--surface));
  stroke: color-mix(in srgb, #a24e3b 68%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-perovskite-layer {
  fill: color-mix(in srgb, #ca5264 88%, var(--surface));
  stroke: color-mix(in srgb, #7a2638 82%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-pz2hi-layer {
  fill: color-mix(in srgb, #b9a474 72%, var(--surface));
  stroke: color-mix(in srgb, #756135 70%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-electron-layer {
  fill: color-mix(in srgb, #59616f 91%, var(--surface));
  stroke: color-mix(in srgb, #242b35 84%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-gold-layer {
  fill: color-mix(in srgb, #e2ad27 90%, var(--surface));
  stroke: color-mix(in srgb, #8a6512 82%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-sio-layer {
  fill: color-mix(in srgb, #76c7a8 69%, var(--surface));
  stroke: color-mix(in srgb, #2f8063 70%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-silver-layer {
  fill: color-mix(in srgb, #aab1ba 78%, var(--surface));
  stroke: color-mix(in srgb, #56606d 72%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-pl177-layer {
  fill: color-mix(in srgb, #b9df91 76%, var(--surface));
  stroke: color-mix(in srgb, #64863e 68%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-photon-path {
  fill: none;
  stroke: #c98614;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.pv-memsol-divider {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 45%, transparent);
  stroke-width: 1.6;
  stroke-dasharray: 7 6;
}

.pv-memsol-section-label {
  fill: var(--text);
  font-weight: 700;
}

.pv-memsol-bypass-path {
  fill: none;
  stroke: #a52b74;
  stroke-width: 4;
  stroke-dasharray: 8 6;
}

.pv-memsol-bypass-label {
  fill: color-mix(in srgb, #a52b74 78%, var(--text));
  font-weight: 700;
}

.pv-memsol-state-card {
  fill: color-mix(in srgb, #cce8ef 35%, var(--surface));
  stroke: color-mix(in srgb, #4f8997 55%, var(--border));
  stroke-width: 1.5;
}

.pv-memsol-state-card--active {
  fill: color-mix(in srgb, #eed6e5 42%, var(--surface));
  stroke: color-mix(in srgb, #a52b74 58%, var(--border));
}

.pv-memsol-photon-path,
.pv-memsol-divider,
.pv-memsol-bypass-path,
.pv-memsol-stack-svg .pv-svg-electron-path,
.pv-memsol-stack-svg .pv-svg-hole-path,
.pv-memsol-stack-svg .pv-svg-electron-flow,
.pv-memsol-stack-svg .pv-svg-conventional-flow {
  pointer-events: none;
}

.pv-memsol-stack-svg .pv-svg-layer-label,
.pv-memsol-stack-svg .pv-svg-small-label {
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--surface) 88%, transparent);
  stroke-width: 2.5px;
  stroke-linejoin: round;
}

.pv-memsol-stack-svg .pv-svg-layer-label {
  stroke-width: 3.5px;
}

.pv-memsol-stack-svg .pv-svg-contact-label {
  fill: #ffffff;
  stroke: rgba(18, 24, 34, 0.46);
}

.pv-svg-label {
  font-size: 17px;
}

.pv-svg-label-strong {
  font-weight: 700;
}

.pv-svg-small-label {
  fill: var(--muted);
  font-size: 14px;
}

.pv-svg-depletion-description {
  font-size: 12px;
}

.pv-svg-layer-label {
  fill: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.pv-svg-contact-label {
  fill: var(--surface);
}

.pv-svg-formula-label {
  font-size: 16px;
  font-style: italic;
  font-weight: 700;
}

.pv-svg-fixed-charge {
  fill: color-mix(in srgb, #7557b8 82%, var(--text));
  font-size: 13px;
  font-weight: 800;
}

.pv-svg-field-path {
  fill: none;
  stroke: var(--muted);
  stroke-width: 3;
}

.pv-svg-arrow-field {
  fill: var(--muted);
}

.pv-svg-field-label {
  fill: var(--muted);
  font-size: 16px;
  font-style: italic;
  font-weight: 800;
}

.pv-svg-voltage-label {
  font-size: 18px;
  font-style: italic;
  font-weight: 800;
}

.pv-svg-electron,
.pv-svg-arrow-electron {
  fill: var(--accent);
}

.pv-svg-hole,
.pv-svg-arrow-hole {
  fill: #e36d2f;
}

.pv-svg-charge-label {
  fill: #ffffff;
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 800;
}

.pv-svg-electron-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
}

.pv-svg-hole-path {
  fill: none;
  stroke: #e36d2f;
  stroke-width: 4;
}

.pv-svg-circuit {
  fill: none;
  stroke: var(--text);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-svg-load-resistor {
  fill: none;
  stroke: var(--text);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pv-svg-electron-flow {
  fill: none;
  stroke: var(--accent);
  stroke-linecap: butt;
  stroke-width: 4;
  pointer-events: none;
}

.pv-svg-conventional-flow {
  fill: none;
  stroke: #e36d2f;
  stroke-dasharray: 7 5;
  stroke-linecap: butt;
  stroke-width: 3;
  pointer-events: none;
}

.pv-svg-electron-flow-label,
.pv-svg-conventional-flow-label,
.pv-svg-terminal-label {
  font-size: 13px;
  font-weight: 800;
}

.pv-svg-electron-flow-label {
  fill: var(--accent);
}

.pv-svg-conventional-flow-label {
  fill: #c84f1c;
}

.pv-svg-voltage-bracket {
  fill: none;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-svg-energy-inset {
  fill: color-mix(in srgb, var(--bg) 74%, var(--surface));
  stroke: var(--border);
  stroke-width: 1.5;
}

.pv-svg-band-line,
.pv-svg-bandgap-bracket {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
}

.pv-svg-band-label {
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
}

.pv-svg-photon-energy {
  fill: none;
  stroke: #d18b00;
  stroke-width: 3;
}

.pv-svg-layer-control {
  cursor: pointer;
  outline: none;
}

.pv-svg-layer-control .pv-svg-layer-shape {
  transition: filter 0.16s ease, stroke 0.16s ease, stroke-width 0.16s ease;
}

.pv-svg-layer-control:hover .pv-svg-layer-shape,
.pv-svg-layer-control:focus-visible .pv-svg-layer-shape {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 62%, transparent));
  stroke: var(--accent);
  stroke-width: 3px;
}

.pv-svg-layer-control:hover .pv-svg-layer-label,
.pv-svg-layer-control:focus-visible .pv-svg-layer-label {
  fill: var(--accent);
  text-decoration: underline;
}

.pv-svg-layer-control:hover .pv-svg-contact-label,
.pv-svg-layer-control:focus-visible .pv-svg-contact-label {
  fill: var(--surface);
}

.photovoltaic-effect-figure figcaption {
  max-width: 860px;
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
  text-align: center;
}

.pv-layer-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: var(--text);
  box-shadow: 0 24px 70px rgba(16, 24, 40, 0.28);
}

body.pv-layer-dialog-open {
  overflow: hidden;
}

.pv-layer-dialog[data-active-layer="front-grid"],
.pv-layer-dialog[data-active-layer="anti-reflection-coating"],
.pv-layer-dialog[data-active-layer="n-type-emitter"],
.pv-layer-dialog[data-active-layer="depletion-region"],
.pv-layer-dialog[data-active-layer="p-type-base"],
.pv-layer-dialog[data-active-layer="rear-metal-contact"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="gaas-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="opv-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="cdte-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="asi-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="cigs-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="dssc-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="quantum-dot-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="perovskite-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="all-perovskite-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="perovskite-cqd-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="vanguard-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="explorer6-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="telstar-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="sharp1963-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="spc1973-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="bpx1976-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="spectrolab1977-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="mobil1981-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="hughes1984-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="sci1992-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="unisolar1997-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="shr1998-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="ssi1999-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="sunsine2000-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="firstsolar2001-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="evergreen2002-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="sunpower2004-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="sharp2005-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="sharp2007-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="solyndra2008-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="ascent2009-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="elps2011-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="semprius2012-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="perovskite2014-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="flexperovskite2015-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="printedorganic2016-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="shingled2017-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="halfcut2018-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="hjt2019-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="m10perc2020-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-layer-dialog[data-active-layer^="assembled-"] {
  width: min(1040px, calc(100vw - 32px));
}

.pv-module-1998-shingle-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(9 22 36 / 82%);
  stroke-width: 2.5px;
}

.pv-module-1999-dark-text.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 90%);
  stroke-width: 2.6px;
}

.pv-module-1999-light-text.pv-svg-layer-label,
.pv-module-1999-jbox-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(12 25 39 / 82%);
  stroke-width: 2.5px;
}

.pv-module-2000-dark-text.pv-svg-layer-label,
.pv-module-2000-block-title.pv-svg-layer-label,
.pv-module-2000-ac-label.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 2.7px;
}

.pv-module-2000-light-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(13 24 38 / 82%);
  stroke-width: 2.7px;
}

.pv-module-2001-dark-text.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 2.7px;
}

.pv-module-2001-light-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(13 24 38 / 84%);
  stroke-width: 2.7px;
}

.pv-module-2002-dark-text.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 92%);
  stroke-width: 2.7px;
}

.pv-module-2002-light-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(13 24 38 / 84%);
  stroke-width: 2.7px;
}

.pv-module-2004-dark-text.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 93%);
  stroke-width: 2.7px;
}

.pv-module-2004-light-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(9 18 28 / 86%);
  stroke-width: 2.7px;
}

.pv-module-2005-dark-text.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 93%);
  stroke-width: 2.7px;
}

.pv-module-2005-light-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(9 18 28 / 86%);
  stroke-width: 2.7px;
}

.pv-module-2007-dark-text.pv-svg-layer-label {
  fill: #17212b;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 93%);
  stroke-width: 2.7px;
}

.pv-module-2007-light-text.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(9 18 28 / 86%);
  stroke-width: 2.7px;
}

.pv-module-2008-array-note.pv-svg-layer-label,
.pv-module-2008-long-active-label.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(12 18 28 / 94%);
  stroke-width: 2.8px;
}

.pv-module-2009-surface-label.pv-svg-layer-label {
  fill: #fff;
  paint-order: stroke;
  stroke: rgb(12 18 28 / 94%);
  stroke-width: 2.8px;
}

.pv-layer-dialog::backdrop {
  background: rgba(10, 18, 30, 0.62);
  backdrop-filter: blur(3px);
}

.pv-layer-dialog-panel {
  max-height: calc(100vh - 48px);
  padding: 28px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.pv-layer-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.pv-layer-dialog-header h2 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.2;
}

.pv-layer-dialog-close {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 1.65rem;
  line-height: 1;
}

.pv-layer-dialog-close:hover,
.pv-layer-dialog-close:focus-visible {
  border-color: var(--accent);
  background: var(--accentSoft);
  color: var(--accent);
  outline: none;
}

.pv-layer-dialog-panel > p {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.7;
}

.pv-layer-dialog-summary {
  max-width: 820px;
}

.pv-layer-detail-switch {
  display: grid;
  grid-template-columns: auto minmax(420px, 620px);
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 58%, var(--surface));
}

.pv-layer-detail-switch-label {
  padding-left: 6px;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 800;
}

.pv-layer-detail-switch-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.pv-layer-detail-switch-options button {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 2px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.pv-layer-detail-switch-options button:hover,
.pv-layer-detail-switch-options button:focus-visible {
  border-color: var(--accent);
  background: var(--accentSoft);
  outline: none;
}

.pv-layer-detail-switch-options button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}

.pv-layer-detail-switch-options strong,
.pv-layer-detail-switch-options small {
  display: block;
}

.pv-layer-detail-switch-options strong {
  font-size: 0.9rem;
}

.pv-layer-detail-switch-options small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.pv-layer-detail-switch-options button[aria-pressed="true"] small {
  color: color-mix(in srgb, #ffffff 82%, transparent);
}

.pv-layer-dialog-details {
  margin-top: 22px;
}

.pv-layer-dialog-future {
  margin-top: 22px;
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--accent) 42%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accentSoft) 55%, var(--surface));
  color: var(--muted);
  font-size: 0.92rem;
}

.pv-front-grid-content,
.pv-arc-content,
.pv-emitter-content,
.pv-depletion-content,
.pv-base-content,
.pv-rear-contact-content {
  display: grid;
  gap: 26px;
}

.pv-simple-content {
  display: grid;
  gap: 22px;
}

.pv-simple-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(240px, 0.5fr);
  align-items: stretch;
  gap: 16px;
}

.pv-simple-hero > div:first-child,
.pv-simple-location-card {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pv-simple-hero > div:first-child {
  background: color-mix(in srgb, var(--accentSoft) 48%, var(--surface));
}

.pv-simple-hero h3 {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.25;
}

.pv-simple-hero > div:first-child > p:last-child {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.7;
}

.pv-simple-location-card {
  display: grid;
  align-content: start;
  background: color-mix(in srgb, var(--bg) 52%, var(--surface));
}

.pv-simple-location-card h4,
.pv-simple-location-card p {
  margin: 0;
}

.pv-simple-location-card h4 {
  color: var(--text);
  font-size: 0.95rem;
}

.pv-simple-location-card p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.pv-simple-cell-stack {
  display: grid;
  width: min(100%, 230px);
  margin: 16px auto 0;
  filter: drop-shadow(0 6px 9px rgba(16, 24, 40, 0.08));
}

.pv-simple-stack-layer {
  display: block;
  opacity: 0.32;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.pv-simple-stack-layer.is-active {
  z-index: 2;
  opacity: 1;
  outline: 3px solid color-mix(in srgb, var(--accent) 74%, #ffffff);
  outline-offset: 2px;
  transform: scaleX(1.035);
}

.pv-simple-stack-layer--front {
  height: 12px;
  margin-inline: 12%;
  border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--text) 86%, var(--surface)) 13px 20px);
}

.pv-simple-stack-layer--coating {
  height: 10px;
  background: #168c84;
}

.pv-simple-stack-layer--emitter {
  height: 27px;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--border));
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
}

.pv-simple-stack-layer--junction {
  height: 18px;
  border-inline: 1px solid color-mix(in srgb, #7557b8 68%, var(--border));
  background: color-mix(in srgb, #7557b8 28%, var(--surface));
}

.pv-simple-stack-layer--base {
  height: 70px;
  border: 1px solid color-mix(in srgb, #e36d2f 68%, var(--border));
  background: color-mix(in srgb, #e36d2f 28%, var(--surface));
}

.pv-simple-stack-layer--rear {
  height: 17px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-simple-stack-layer--gaas-window {
  height: 15px;
  border: 1px solid color-mix(in srgb, #9a6700 62%, var(--border));
  background: color-mix(in srgb, #f2c94c 38%, var(--surface));
}

.pv-simple-stack-layer--gaas-emitter {
  height: 25px;
  border: 1px solid color-mix(in srgb, var(--accent) 68%, var(--border));
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
}

.pv-simple-stack-layer--gaas-junction {
  height: 18px;
  border-inline: 1px solid color-mix(in srgb, #7557b8 68%, var(--border));
  background: color-mix(in srgb, #7557b8 28%, var(--surface));
}

.pv-simple-stack-layer--gaas-base {
  height: 56px;
  border: 1px solid color-mix(in srgb, #9b3d75 62%, var(--border));
  background: color-mix(in srgb, #c85f9d 28%, var(--surface));
}

.pv-simple-stack-layer--gaas-bsf {
  height: 15px;
  border: 1px solid color-mix(in srgb, #1f7e50 62%, var(--border));
  background: color-mix(in srgb, #35a870 30%, var(--surface));
}

.pv-simple-stack-layer--opv-substrate {
  height: 24px;
  border: 1px solid #27899f;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #8ed8e8 30%, var(--surface));
}

.pv-simple-stack-layer--opv-transparent-electrode {
  height: 12px;
  background: color-mix(in srgb, #54b9cc 46%, var(--surface));
}

.pv-simple-stack-layer--opv-hole {
  height: 14px;
  background: color-mix(in srgb, #e36d2f 35%, var(--surface));
}

.pv-simple-stack-layer--opv-active {
  height: 62px;
  background: repeating-linear-gradient(110deg, color-mix(in srgb, #df6d34 48%, var(--surface)) 0 10px, color-mix(in srgb, #5c6fca 40%, var(--surface)) 10px 20px);
}

.pv-simple-stack-layer--opv-electron {
  height: 14px;
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
}

.pv-simple-stack-layer--opv-metal {
  height: 14px;
  background: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-simple-stack-layer--opv-encapsulation {
  height: 17px;
  border: 1px dashed #687486;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #aeb7c4 28%, var(--surface));
}

.pv-simple-stack-layer--cdte-glass {
  height: 26px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--cdte-tco {
  height: 12px;
  background: color-mix(in srgb, #4bb7c4 46%, var(--surface));
}

.pv-simple-stack-layer--cdte-buffer {
  height: 10px;
  background: color-mix(in srgb, #b7d96c 44%, var(--surface));
}

.pv-simple-stack-layer--cdte-window {
  height: 16px;
  background: color-mix(in srgb, #f0d44d 48%, var(--surface));
}

.pv-simple-stack-layer--cdte-absorber {
  height: 68px;
  background: color-mix(in srgb, #a85a91 34%, var(--surface));
}

.pv-simple-stack-layer--cdte-back-interface {
  height: 13px;
  background: color-mix(in srgb, #d67b3f 42%, var(--surface));
}

.pv-simple-stack-layer--cdte-rear {
  height: 16px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-simple-stack-layer--asi-glass {
  height: 26px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--asi-front-tco {
  height: 14px;
  background: color-mix(in srgb, #4bb7c4 46%, var(--surface));
}

.pv-simple-stack-layer--asi-p {
  height: 13px;
  background: color-mix(in srgb, #e36d2f 36%, var(--surface));
}

.pv-simple-stack-layer--asi-intrinsic {
  height: 68px;
  background: color-mix(in srgb, #7557b8 28%, var(--surface));
}

.pv-simple-stack-layer--asi-n {
  height: 13px;
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
}

.pv-simple-stack-layer--asi-rear-tco {
  height: 11px;
  background: color-mix(in srgb, #8bc66b 42%, var(--surface));
}

.pv-simple-stack-layer--asi-rear-metal {
  height: 16px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-simple-stack-layer--cigs-front-grid {
  height: 12px;
  margin-inline: 12%;
  border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(90deg, transparent 0 13px, color-mix(in srgb, var(--text) 86%, var(--surface)) 13px 20px);
}

.pv-simple-stack-layer--cigs-azo {
  height: 16px;
  background: color-mix(in srgb, #54b9cc 44%, var(--surface));
}

.pv-simple-stack-layer--cigs-zno {
  height: 12px;
  background: color-mix(in srgb, #9ad7df 38%, var(--surface));
}

.pv-simple-stack-layer--cigs-buffer {
  height: 13px;
  background: color-mix(in srgb, #f0d44d 46%, var(--surface));
}

.pv-simple-stack-layer--cigs-absorber {
  height: 68px;
  background: color-mix(in srgb, #c66d45 34%, var(--surface));
}

.pv-simple-stack-layer--cigs-molybdenum {
  height: 15px;
  background: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-simple-stack-layer--cigs-glass {
  height: 24px;
  border: 1px solid #3b8fa5;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--dssc-front-glass {
  height: 24px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--dssc-front-fto {
  height: 13px;
  background: color-mix(in srgb, #54b9cc 48%, var(--surface));
}

.pv-simple-stack-layer--dssc-tio2 {
  height: 50px;
  background:
    radial-gradient(circle at 20% 35%, color-mix(in srgb, #668ba9 60%, var(--surface)) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 65%, color-mix(in srgb, #668ba9 60%, var(--surface)) 0 3px, transparent 4px),
    color-mix(in srgb, #d8e8f5 58%, var(--surface));
  background-size: 18px 18px;
}

.pv-simple-stack-layer--dssc-dye {
  height: 13px;
  background: color-mix(in srgb, #bd3f91 44%, var(--surface));
}

.pv-simple-stack-layer--dssc-electrolyte {
  height: 32px;
  background: color-mix(in srgb, #f0c94b 34%, var(--surface));
}

.pv-simple-stack-layer--dssc-catalyst {
  height: 11px;
  background: color-mix(in srgb, #4c5360 86%, var(--surface));
}

.pv-simple-stack-layer--dssc-counter-electrode {
  height: 24px;
  border: 1px solid #3b8fa5;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #9bc9d5 34%, var(--surface));
}

.pv-simple-stack-layer--quantum-dot-front-glass {
  height: 24px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--quantum-dot-front-tco {
  height: 13px;
  background: color-mix(in srgb, #54b9cc 48%, var(--surface));
}

.pv-simple-stack-layer--quantum-dot-tio2 {
  height: 50px;
  background:
    radial-gradient(circle at 20% 35%, color-mix(in srgb, #668ba9 60%, var(--surface)) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 65%, color-mix(in srgb, #668ba9 60%, var(--surface)) 0 3px, transparent 4px),
    color-mix(in srgb, #d8e8f5 58%, var(--surface));
  background-size: 18px 18px;
}

.pv-simple-stack-layer--quantum-dot-sensitizer {
  height: 14px;
  background:
    radial-gradient(circle at 18% 50%, #6558c8 0 4px, transparent 5px),
    radial-gradient(circle at 52% 50%, #6558c8 0 3px, transparent 4px),
    radial-gradient(circle at 82% 50%, #6558c8 0 5px, transparent 6px),
    color-mix(in srgb, #6558c8 18%, var(--surface));
}

.pv-simple-stack-layer--quantum-dot-electrolyte {
  height: 32px;
  background: color-mix(in srgb, #72c5a1 34%, var(--surface));
}

.pv-simple-stack-layer--quantum-dot-catalyst {
  height: 11px;
  background: color-mix(in srgb, #4c5360 86%, var(--surface));
}

.pv-simple-stack-layer--quantum-dot-counter-electrode {
  height: 24px;
  border: 1px solid #3b8fa5;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #9bc9d5 34%, var(--surface));
}

.pv-simple-stack-layer--perovskite-glass {
  height: 24px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--perovskite-fto {
  height: 13px;
  background: color-mix(in srgb, #54b9cc 48%, var(--surface));
}

.pv-simple-stack-layer--perovskite-compact-etl {
  height: 12px;
  background: color-mix(in srgb, #9cc9ee 50%, var(--surface));
}

.pv-simple-stack-layer--perovskite-mesoporous {
  height: 42px;
  background:
    radial-gradient(circle at 20% 35%, #8d3d72 0 3px, transparent 4px),
    radial-gradient(circle at 62% 65%, #8d3d72 0 3px, transparent 4px),
    color-mix(in srgb, #c7b6df 42%, var(--surface));
  background-size: 18px 18px;
}

.pv-simple-stack-layer--perovskite-absorber {
  height: 38px;
  background: color-mix(in srgb, #8d3d72 82%, var(--surface));
}

.pv-simple-stack-layer--perovskite-htl {
  height: 22px;
  background: color-mix(in srgb, #e3a59c 52%, var(--surface));
}

.pv-simple-stack-layer--perovskite-rear-metal {
  height: 16px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #d3a52c 82%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-glass {
  height: 18px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-front-tco {
  height: 10px;
  background: color-mix(in srgb, #54b9cc 48%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-top-htl {
  height: 10px;
  background: color-mix(in srgb, #e3a59c 52%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-perovskite {
  height: 34px;
  background: color-mix(in srgb, #8d3d72 82%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-top-etl {
  height: 10px;
  background: color-mix(in srgb, #9cc9ee 52%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-interconnect {
  height: 12px;
  background: color-mix(in srgb, #326f73 84%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-bottom-cell {
  height: 46px;
  background: color-mix(in srgb, #7998e8 38%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-rear-selective {
  height: 10px;
  background: color-mix(in srgb, #8f79c6 42%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-rear-metal {
  height: 13px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #3f4652 88%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-glass {
  height: 16px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-front-ito {
  height: 9px;
  background: color-mix(in srgb, #54b9cc 48%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-niox {
  height: 9px;
  background: color-mix(in srgb, #b58ac8 48%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-wide-absorber {
  height: 28px;
  background: color-mix(in srgb, #a33b72 84%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-pcbm {
  height: 9px;
  background: color-mix(in srgb, #83b8e5 50%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-interconnect {
  height: 12px;
  background: color-mix(in srgb, #326f73 84%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-pedot {
  height: 9px;
  background: color-mix(in srgb, #de8a99 50%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-narrow-absorber {
  height: 34px;
  background: color-mix(in srgb, #6e4f91 84%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-c60-bcp {
  height: 9px;
  background: color-mix(in srgb, #9cc9ee 52%, var(--surface));
}

.pv-simple-stack-layer--all-perovskite-rear-metal {
  height: 12px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #3f4652 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-glass {
  height: 15px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-front-tco {
  height: 8px;
  background: color-mix(in srgb, #54b9cc 48%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-compact-tio2 {
  height: 8px;
  background: color-mix(in srgb, #9cc9ee 54%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-mesoporous-tio2 {
  height: 13px;
  background: color-mix(in srgb, #bed8ec 54%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-perovskite {
  height: 28px;
  background: color-mix(in srgb, #8d3d72 84%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-ptaa {
  height: 8px;
  background: color-mix(in srgb, #e3a59c 52%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-interconnect {
  height: 11px;
  background: color-mix(in srgb, #806b49 86%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-zno {
  height: 8px;
  background: color-mix(in srgb, #a7cfdf 56%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-pbs {
  height: 34px;
  background: color-mix(in srgb, #51486e 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-rear-moox {
  height: 8px;
  background: color-mix(in srgb, #d9b65d 54%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cqd-rear-gold {
  height: 12px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #9c7419 90%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-mgf2 {
  height: 7px;
  border: 1px solid #67aebb;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #dff3f6 68%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-front-grid {
  height: 7px;
  background: color-mix(in srgb, #4b535e 90%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-front-azo,
.pv-simple-stack-layer--perovskite-cigs-middle-azo {
  height: 7px;
  background: color-mix(in srgb, #49b6c8 54%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-zno-np,
.pv-simple-stack-layer--perovskite-cigs-izno {
  height: 7px;
  background: color-mix(in srgb, #a7cfdf 58%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-pcbm {
  height: 7px;
  background: color-mix(in srgb, #9cc9ee 56%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-perovskite {
  height: 25px;
  background: color-mix(in srgb, #8d3d72 86%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-ptaa {
  height: 7px;
  background: color-mix(in srgb, #e3a59c 54%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-middle-azo {
  background: color-mix(in srgb, #326f73 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-cds {
  height: 7px;
  background: color-mix(in srgb, #f1d66b 64%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-cigs {
  height: 31px;
  background: color-mix(in srgb, #994f6a 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-molybdenum {
  height: 8px;
  background: color-mix(in srgb, #434a55 92%, var(--surface));
}

.pv-simple-stack-layer--perovskite-cigs-polyimide {
  height: 12px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #e49a39 52%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-glass {
  height: 8px;
  border: 1px solid #3b8fa5;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-ito {
  height: 6px;
  background: color-mix(in srgb, #54b9cc 52%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-front-ptaa,
.pv-simple-stack-layer--triple-perovskite-middle-ptaa {
  height: 6px;
  background: color-mix(in srgb, #e3a59c 56%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-wide-absorber {
  height: 18px;
  background: color-mix(in srgb, #a33b72 88%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-middle-absorber {
  height: 18px;
  background: color-mix(in srgb, #7d4e91 88%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-narrow-absorber {
  height: 23px;
  background: color-mix(in srgb, #51486e 90%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-c60-one,
.pv-simple-stack-layer--triple-perovskite-c60-two,
.pv-simple-stack-layer--triple-perovskite-rear-c60 {
  height: 5px;
  background: color-mix(in srgb, #9cc9ee 58%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-sno2-one,
.pv-simple-stack-layer--triple-perovskite-sno2-two {
  height: 5px;
  background: color-mix(in srgb, #b8d8e8 60%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-gold-one,
.pv-simple-stack-layer--triple-perovskite-gold-two {
  height: 4px;
  background: color-mix(in srgb, #9c7419 90%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-pedot-one,
.pv-simple-stack-layer--triple-perovskite-pedot-two {
  height: 5px;
  background: color-mix(in srgb, #c94d6e 62%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-bcp {
  height: 5px;
  background: color-mix(in srgb, #b7a9df 56%, var(--surface));
}

.pv-simple-stack-layer--triple-perovskite-silver {
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #4b535e 92%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-mgf2 {
  height: 5px;
  border: 1px solid #58a5ba;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #dff4fa 66%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-glass {
  height: 8px;
  background: color-mix(in srgb, #a5dbea 32%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-ito {
  height: 6px;
  background: color-mix(in srgb, #54b9cc 52%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-meo2pacz {
  height: 4px;
  background: color-mix(in srgb, #e6ae9b 60%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-perovskite {
  height: 22px;
  background: color-mix(in srgb, #9c3f74 90%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-peai {
  height: 4px;
  background: color-mix(in srgb, #d6b8e8 62%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-pc61bm {
  height: 6px;
  background: color-mix(in srgb, #93c7ec 62%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-azo {
  height: 5px;
  background: color-mix(in srgb, #b7dce7 64%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-snox {
  height: 5px;
  background: color-mix(in srgb, #8fc3d5 62%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-inox {
  height: 4px;
  background: color-mix(in srgb, #237c83 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-moox {
  height: 5px;
  background: color-mix(in srgb, #db9b55 64%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-bhj {
  height: 27px;
  background: color-mix(in srgb, #69476f 92%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-c60 {
  height: 5px;
  background: color-mix(in srgb, #8fb8e1 62%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-bcp {
  height: 4px;
  background: color-mix(in srgb, #b9abdf 60%, var(--surface));
}

.pv-simple-stack-layer--perovskite-organic-silver {
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #4b535e 92%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-mgf2 {
  height: 5px;
  border: 1px solid #75a9bc;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #e9f5f8 76%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-gold {
  height: 4px;
  background: color-mix(in srgb, #c49320 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-izo,
.pv-simple-stack-layer--perovskite-silicon-triple-upper-ito,
.pv-simple-stack-layer--perovskite-silicon-triple-lower-ito {
  height: 5px;
  background: color-mix(in srgb, #55b7c9 58%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-top-snox,
.pv-simple-stack-layer--perovskite-silicon-triple-middle-snox {
  height: 5px;
  background: color-mix(in srgb, #b8d8e8 64%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-top-c60,
.pv-simple-stack-layer--perovskite-silicon-triple-middle-c60 {
  height: 5px;
  background: color-mix(in srgb, #89b9e2 68%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-lif {
  height: 4px;
  background: color-mix(in srgb, #d6c8ef 68%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-wide-perovskite {
  height: 17px;
  background: color-mix(in srgb, #b4457f 86%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-top-2pacz,
.pv-simple-stack-layer--perovskite-silicon-triple-middle-2pacz {
  height: 4px;
  background: color-mix(in srgb, #e6a491 64%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-top-niox,
.pv-simple-stack-layer--perovskite-silicon-triple-middle-niox {
  height: 5px;
  background: color-mix(in srgb, #69ae78 70%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-middle-perovskite {
  height: 22px;
  background: color-mix(in srgb, #765398 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-n-polo {
  height: 7px;
  background: color-mix(in srgb, #5b8ed6 74%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-silicon {
  height: 28px;
  background: color-mix(in srgb, #446ea9 88%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-p-polo {
  height: 7px;
  background: color-mix(in srgb, #d89478 72%, var(--surface));
}

.pv-simple-stack-layer--perovskite-silicon-triple-aluminium {
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #4b535e 92%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-fto {
  height: 8px;
  border: 1px solid #438fa2;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #9ad9e5 50%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-front-sam {
  height: 4px;
  background: color-mix(in srgb, #efc0a6 66%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-wbg-one {
  height: 15px;
  background: color-mix(in srgb, #bf385f 90%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-wbg-two {
  height: 18px;
  background: color-mix(in srgb, #a1447e 90%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-mbg {
  height: 22px;
  background: color-mix(in srgb, #70508f 90%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-nbg {
  height: 27px;
  background: color-mix(in srgb, #494c75 92%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-pcbm-one,
.pv-simple-stack-layer--quadruple-perovskite-pcbm-two {
  height: 5px;
  background: color-mix(in srgb, #a7c7e8 62%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-interconnect-one,
.pv-simple-stack-layer--quadruple-perovskite-interconnect-two,
.pv-simple-stack-layer--quadruple-perovskite-interconnect-three {
  height: 6px;
  background: color-mix(in srgb, #3c9dab 72%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-niox-sam-one,
.pv-simple-stack-layer--quadruple-perovskite-niox-sam-two {
  height: 5px;
  background: color-mix(in srgb, #91c28d 66%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-c60-middle,
.pv-simple-stack-layer--quadruple-perovskite-rear-c60 {
  height: 5px;
  background: color-mix(in srgb, #8fb8e1 64%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-pedot {
  height: 5px;
  background: color-mix(in srgb, #d06c8c 66%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-rear-snox {
  height: 5px;
  background: color-mix(in srgb, #9dcbdc 64%, var(--surface));
}

.pv-simple-stack-layer--quadruple-perovskite-silver {
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #4b535e 92%, var(--surface));
}

.pv-simple-stack-layer--memsol-glass {
  height: 8px;
  border: 1px solid #6595a1;
  border-radius: 3px 3px 0 0;
  background: color-mix(in srgb, #d9eef3 70%, var(--surface));
}

.pv-simple-stack-layer--memsol-tco {
  height: 7px;
  background: color-mix(in srgb, #72bfd0 68%, var(--surface));
}

.pv-simple-stack-layer--memsol-hole-contact {
  height: 9px;
  background: color-mix(in srgb, #eaa48e 72%, var(--surface));
}

.pv-simple-stack-layer--memsol-transition-sio,
.pv-simple-stack-layer--memsol-lower-sio,
.pv-simple-stack-layer--memsol-upper-sio {
  height: 7px;
  background: color-mix(in srgb, #76c7a8 76%, var(--surface));
}

.pv-simple-stack-layer--memsol-silver-pl177 {
  height: 9px;
  background: linear-gradient(180deg, #aab1ba 0 48%, #b9df91 48% 100%);
}

.pv-simple-stack-layer--memsol-perovskite {
  height: 28px;
  background: color-mix(in srgb, #ca5264 90%, var(--surface));
}

.pv-simple-stack-layer--memsol-pz2hi {
  height: 5px;
  background: color-mix(in srgb, #b9a474 76%, var(--surface));
}

.pv-simple-stack-layer--memsol-electron-contact {
  height: 10px;
  background: color-mix(in srgb, #59616f 91%, var(--surface));
}

.pv-simple-stack-layer--memsol-gold {
  height: 8px;
  border-radius: 0 0 3px 3px;
  background: color-mix(in srgb, #e2ad27 92%, var(--surface));
}

.pv-simple-job-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pv-simple-job-grid article {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
}

.pv-simple-job-grid article > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
}

.pv-simple-job-grid h4,
.pv-simple-job-grid p {
  margin: 0;
}

.pv-simple-job-grid h4 {
  margin-top: 10px;
  color: var(--text);
  font-size: 0.96rem;
}

.pv-simple-job-grid p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.58;
}

.pv-simple-bottom-line {
  padding: 18px 20px;
  border-left: 5px solid #168c84;
  border-radius: 10px;
  background: color-mix(in srgb, #168c84 8%, var(--surface));
}

.pv-simple-bottom-line h3,
.pv-simple-bottom-line p {
  margin: 0;
}

.pv-simple-bottom-line h3 {
  color: var(--text);
  font-size: 1rem;
}

.pv-simple-bottom-line p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.pv-simple-next {
  padding: 15px 17px;
  border: 1px dashed color-mix(in srgb, var(--accent) 46%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accentSoft) 52%, var(--surface));
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.pv-simple-next strong,
.pv-simple-next em {
  color: var(--text);
}

.pv-structured-advanced-content {
  display: grid;
  gap: 26px;
}

.pv-layer-key-point {
  padding: 20px 22px;
  border-left: 5px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accentSoft) 62%, var(--surface));
}

.pv-layer-kicker {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pv-layer-key-point h3,
.pv-layer-section h3,
.pv-layer-sources h3 {
  margin: 0;
  color: var(--text);
  font-size: 1.08rem;
  line-height: 1.35;
}

.pv-layer-key-point > p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.pv-layer-section {
  min-width: 0;
}

.pv-layer-section > h3,
.pv-layer-sources > h3 {
  margin-bottom: 12px;
}

.pv-grid-current-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pv-grid-current-path li {
  position: relative;
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 58%, var(--surface));
}

.pv-grid-current-path li > span {
  display: grid;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
}

.pv-grid-current-path strong,
.pv-grid-current-path small {
  display: block;
}

.pv-grid-current-path strong {
  color: var(--text);
  font-size: 0.9rem;
}

.pv-grid-current-path small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pv-layer-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
  align-items: stretch;
  gap: 18px;
}

.pv-front-grid-figure {
  min-width: 0;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
}

.pv-front-grid-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

.pv-front-grid-figure figcaption {
  margin: 8px 4px 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.pv-arc-overview-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(250px, 0.55fr);
}

.pv-arc-diagram-air {
  fill: color-mix(in srgb, var(--accentSoft) 38%, var(--surface));
}

.pv-arc-diagram-silicon {
  fill: color-mix(in srgb, #e36d2f 22%, var(--surface));
  stroke: color-mix(in srgb, #e36d2f 72%, var(--text));
  stroke-linejoin: round;
  stroke-width: 2;
}

.pv-arc-diagram-coating {
  fill: none;
  stroke: #168c84;
  stroke-linejoin: round;
  stroke-width: 8;
}

.pv-arc-incident-ray,
.pv-arc-transmitted-ray,
.pv-arc-reflected-ray {
  fill: none;
  stroke-linecap: round;
}

.pv-arc-incident-ray,
.pv-arc-transmitted-ray {
  stroke: #d18b00;
  stroke-width: 5;
}

.pv-arc-transmitted-ray--reduced {
  stroke-width: 2.5;
}

.pv-arc-reflected-ray {
  stroke: #e36d2f;
}

.pv-arc-reflected-ray--strong {
  stroke-width: 5;
}

.pv-arc-reflected-ray--weak {
  stroke-dasharray: 5 4;
  stroke-width: 2.5;
}

.pv-arc-arrow-photon {
  fill: #d18b00;
}

.pv-arc-arrow-reflection {
  fill: #e36d2f;
}

.pv-arc-diagram-divider {
  stroke: var(--border);
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.pv-arc-diagram-callout {
  fill: none;
  stroke: #168c84;
  stroke-width: 1.5;
}

.pv-arc-diagram-title,
.pv-arc-diagram-label,
.pv-arc-diagram-region-label,
.pv-arc-diagram-silicon-label,
.pv-arc-diagram-caption,
.pv-arc-diagram-ray-label {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-arc-diagram-title {
  font-size: 15px;
  font-weight: 800;
}

.pv-arc-diagram-label,
.pv-arc-diagram-silicon-label,
.pv-arc-diagram-ray-label {
  font-size: 12px;
  font-weight: 700;
}

.pv-arc-diagram-label {
  fill: #14766f;
}

.pv-arc-diagram-region-label,
.pv-arc-diagram-caption {
  fill: var(--muted);
  font-size: 11px;
}

.pv-arc-diagram-ray-label--reflection {
  fill: #c84f1c;
}

.pv-arc-equation-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accentSoft) 42%, var(--surface));
}

.pv-arc-equation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: var(--text);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.pv-arc-equation strong {
  color: var(--accent);
}

.pv-arc-equation sub {
  font-size: 0.56em;
}

.pv-arc-equation-definitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pv-arc-equation-definitions span {
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.pv-arc-equation-definitions strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 0.9rem;
}

.pv-emitter-overview-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.45fr);
}

.pv-emitter-grid-contact {
  fill: color-mix(in srgb, var(--text) 82%, var(--surface));
}

.pv-emitter-ar-layer {
  fill: color-mix(in srgb, #13958f 58%, var(--surface));
  stroke: #137a75;
  stroke-width: 1;
}

.pv-emitter-n-layer {
  fill: color-mix(in srgb, var(--accent) 22%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 68%, var(--border));
  stroke-width: 1.5;
}

.pv-emitter-depletion-layer {
  fill: color-mix(in srgb, #7557b8 16%, var(--surface));
  stroke: color-mix(in srgb, #7557b8 64%, var(--border));
  stroke-width: 1.5;
}

.pv-emitter-p-layer {
  fill: color-mix(in srgb, #e36d2f 22%, var(--surface));
  stroke: color-mix(in srgb, #e36d2f 72%, var(--border));
  stroke-width: 1.5;
}

.pv-emitter-diagram-title,
.pv-emitter-layer-label,
.pv-emitter-small-label,
.pv-emitter-fixed-charge,
.pv-emitter-charge-label,
.pv-emitter-profile-axis-label,
.pv-emitter-profile-label,
.pv-emitter-diagram-note {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-emitter-diagram-title {
  font-size: 15px;
  font-weight: 800;
}

.pv-emitter-layer-label {
  font-size: 13px;
  font-weight: 800;
}

.pv-emitter-layer-label--light,
.pv-emitter-charge-label {
  fill: #ffffff;
}

.pv-emitter-small-label,
.pv-emitter-diagram-note {
  fill: var(--muted);
  font-size: 10.5px;
}

.pv-emitter-ar-label {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 700;
}

.pv-emitter-fixed-charge {
  fill: color-mix(in srgb, #7557b8 85%, var(--text));
  font-size: 12px;
  font-weight: 800;
}

.pv-emitter-electron,
.pv-emitter-arrow-electron {
  fill: var(--accent);
}

.pv-emitter-hole,
.pv-emitter-arrow-hole {
  fill: #e36d2f;
}

.pv-emitter-charge-label {
  font-size: 12px;
  font-weight: 800;
}

.pv-emitter-electron-path,
.pv-emitter-hole-path,
.pv-emitter-photon {
  fill: none;
  stroke-linecap: round;
}

.pv-emitter-electron-path {
  stroke: var(--accent);
  stroke-width: 4;
}

.pv-emitter-hole-path {
  stroke: #e36d2f;
  stroke-width: 4;
}

.pv-emitter-photon {
  stroke: #d18b00;
  stroke-width: 3;
}

.pv-emitter-arrow-photon {
  fill: #d18b00;
}

.pv-emitter-diagram-divider {
  stroke: var(--border);
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.pv-emitter-profile-n-zone {
  fill: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.pv-emitter-profile-p-zone {
  fill: color-mix(in srgb, #e36d2f 9%, var(--surface));
}

.pv-emitter-profile-axis {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
}

.pv-emitter-profile-axis-label {
  fill: var(--muted);
  font-size: 10.5px;
}

.pv-emitter-donor-profile {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;
}

.pv-emitter-acceptor-profile {
  fill: none;
  stroke: #c84f1c;
  stroke-width: 3;
}

.pv-emitter-junction-line {
  stroke: color-mix(in srgb, #7557b8 78%, var(--text));
  stroke-dasharray: 5 4;
  stroke-width: 2;
}

.pv-emitter-profile-label {
  font-size: 11.5px;
  font-weight: 700;
}

.pv-emitter-profile-label--donor {
  fill: var(--accent);
}

.pv-emitter-profile-label--acceptor {
  fill: #c84f1c;
}

.pv-emitter-tradeoff-icon--light {
  border: 7px solid #35a7a0;
  box-shadow: 0 0 0 5px color-mix(in srgb, #35a7a0 16%, transparent);
}

.pv-emitter-tradeoff-icon--heavy {
  border: 7px solid #7557b8;
  box-shadow: 0 0 0 5px color-mix(in srgb, #7557b8 16%, transparent);
}

.pv-emitter-selective-card {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: 22px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 54%, var(--surface));
}

.pv-emitter-selective-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.pv-emitter-selective-card p + p {
  margin-top: 8px;
}

.pv-emitter-selective-card strong {
  color: var(--text);
}

.pv-emitter-selective-visual {
  position: relative;
  height: 126px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.pv-emitter-selective-contact,
.pv-emitter-selective-heavy,
.pv-emitter-selective-light,
.pv-emitter-selective-base {
  position: absolute;
  display: block;
}

.pv-emitter-selective-contact {
  z-index: 4;
  top: 12px;
  left: 38%;
  width: 24%;
  height: 25px;
  border-radius: 4px 4px 0 0;
  background: color-mix(in srgb, var(--text) 82%, var(--surface));
}

.pv-emitter-selective-heavy {
  z-index: 3;
  top: 37px;
  left: 32%;
  width: 36%;
  height: 26px;
  border-bottom: 3px solid #7557b8;
  background: color-mix(in srgb, #7557b8 34%, var(--surface));
}

.pv-emitter-selective-light {
  z-index: 2;
  top: 37px;
  right: 6%;
  left: 6%;
  height: 39px;
  border-bottom: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

.pv-emitter-selective-base {
  inset: 76px 6% 10px;
  background: color-mix(in srgb, #e36d2f 22%, var(--surface));
}

.pv-depletion-overview-grid {
  grid-template-columns: minmax(0, 1.58fr) minmax(240px, 0.42fr);
}

.pv-depletion-n-region {
  fill: color-mix(in srgb, var(--accent) 20%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 62%, var(--border));
  stroke-width: 1.5;
}

.pv-depletion-p-region {
  fill: color-mix(in srgb, #e36d2f 20%, var(--surface));
  stroke: color-mix(in srgb, #e36d2f 62%, var(--border));
  stroke-width: 1.5;
}

.pv-depletion-space-charge-n {
  fill: color-mix(in srgb, #7557b8 14%, var(--accentSoft));
  stroke: color-mix(in srgb, #7557b8 62%, var(--border));
  stroke-width: 1.5;
}

.pv-depletion-space-charge-p {
  fill: color-mix(in srgb, #7557b8 14%, #fff0e8);
  stroke: color-mix(in srgb, #7557b8 62%, var(--border));
  stroke-width: 1.5;
}

.pv-depletion-diagram-title,
.pv-depletion-layer-label,
.pv-depletion-small-label,
.pv-depletion-fixed-charge,
.pv-depletion-charge-label,
.pv-depletion-field-label,
.pv-depletion-width-label,
.pv-depletion-band-axis-label,
.pv-depletion-band-label,
.pv-depletion-potential-label,
.pv-depletion-band-zone-label,
.pv-depletion-diagram-note {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-depletion-diagram-title {
  font-size: 15px;
  font-weight: 800;
}

.pv-depletion-layer-label {
  font-size: 13px;
  font-weight: 800;
}

.pv-depletion-small-label,
.pv-depletion-diagram-note {
  fill: var(--muted);
  font-size: 10.5px;
}

.pv-depletion-fixed-charge {
  font-size: 12px;
  font-weight: 800;
}

.pv-depletion-fixed-charge--donor {
  fill: var(--accent);
}

.pv-depletion-fixed-charge--acceptor {
  fill: #c84f1c;
}

.pv-depletion-electron,
.pv-depletion-arrow-electron {
  fill: var(--accent);
}

.pv-depletion-hole,
.pv-depletion-arrow-hole {
  fill: #e36d2f;
}

.pv-depletion-charge-label {
  fill: #ffffff;
  font-size: 12px;
  font-weight: 800;
}

.pv-depletion-electron-path,
.pv-depletion-hole-path,
.pv-depletion-field-path {
  fill: none;
  stroke-linecap: round;
}

.pv-depletion-electron-path {
  stroke: var(--accent);
  stroke-width: 4;
}

.pv-depletion-hole-path {
  stroke: #e36d2f;
  stroke-width: 4;
}

.pv-depletion-field-path {
  stroke: var(--muted);
  stroke-width: 3;
}

.pv-depletion-arrow-field {
  fill: var(--muted);
}

.pv-depletion-field-label {
  fill: var(--muted);
  font-size: 14px;
  font-style: italic;
  font-weight: 800;
}

.pv-depletion-width-bracket,
.pv-depletion-potential-bracket {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}

.pv-depletion-width-label,
.pv-depletion-potential-label {
  fill: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
}

.pv-depletion-diagram-divider {
  stroke: var(--border);
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.pv-depletion-band-zone--n {
  fill: color-mix(in srgb, var(--accent) 9%, var(--surface));
}

.pv-depletion-band-zone--space-charge {
  fill: color-mix(in srgb, #7557b8 12%, var(--surface));
}

.pv-depletion-band-zone--p {
  fill: color-mix(in srgb, #e36d2f 9%, var(--surface));
}

.pv-depletion-band-axis {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
}

.pv-depletion-band-axis-label {
  fill: var(--muted);
  font-size: 10.5px;
}

.pv-depletion-conduction-band,
.pv-depletion-valence-band {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}

.pv-depletion-fermi-level {
  fill: none;
  stroke: #7557b8;
  stroke-dasharray: 6 4;
  stroke-width: 2;
}

.pv-depletion-band-label,
.pv-depletion-potential-label,
.pv-depletion-band-zone-label {
  font-size: 11px;
  font-weight: 800;
}

.pv-depletion-band-label--conduction,
.pv-depletion-band-label--valence {
  fill: var(--accent);
}

.pv-depletion-band-label--fermi {
  fill: #7557b8;
}

.pv-depletion-equation-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, #7557b8 8%, var(--surface));
}

.pv-depletion-equation {
  color: var(--text);
  font-size: clamp(1.05rem, 2.1vw, 1.42rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.pv-depletion-equation > span:first-child {
  margin-right: 8px;
  color: #7557b8;
  font-size: 1.18em;
}

.pv-depletion-equation sub,
.pv-depletion-equation sup,
.pv-depletion-equation-definitions sub {
  font-size: 0.62em;
}

.pv-depletion-equation-definitions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.pv-depletion-equation-definitions span {
  padding: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.pv-depletion-equation-definitions strong {
  display: block;
  margin-bottom: 3px;
  color: var(--text);
  font-size: 0.9rem;
}

.pv-depletion-charge-balance {
  display: grid;
  grid-template-columns: minmax(240px, 0.65fr) minmax(0, 1.35fr);
  gap: 12px;
  margin-top: 12px;
}

.pv-depletion-charge-balance p {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.pv-depletion-charge-balance strong {
  color: var(--text);
}

.pv-depletion-recombination-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, #7557b8 38%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, #7557b8 7%, var(--surface));
}

.pv-depletion-recombination-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.6;
}

.pv-depletion-recombination-card strong {
  color: var(--text);
}

.pv-base-overview-grid {
  grid-template-columns: minmax(0, 1.62fr) minmax(240px, 0.38fr);
}

.pv-base-ar-layer {
  fill: #168c84;
  stroke: #137a75;
  stroke-width: 1;
}

.pv-base-n-layer {
  fill: color-mix(in srgb, var(--accent) 20%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 64%, var(--border));
  stroke-width: 1.5;
}

.pv-base-depletion-layer {
  fill: color-mix(in srgb, #7557b8 15%, var(--surface));
  stroke: color-mix(in srgb, #7557b8 64%, var(--border));
  stroke-width: 1.5;
}

.pv-base-p-layer {
  fill: color-mix(in srgb, #e36d2f 20%, var(--surface));
  stroke: color-mix(in srgb, #e36d2f 68%, var(--border));
  stroke-width: 1.5;
}

.pv-base-rear-contact {
  fill: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-base-diagram-title,
.pv-base-layer-label,
.pv-base-small-label,
.pv-base-charge-label,
.pv-base-photon-label,
.pv-base-path-label,
.pv-base-plot-axis-label,
.pv-base-plot-label,
.pv-base-plot-tick {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-base-diagram-title {
  font-size: 15px;
  font-weight: 800;
}

.pv-base-layer-label {
  font-size: 12.5px;
  font-weight: 800;
}

.pv-base-layer-label--light,
.pv-base-layer-label--contact,
.pv-base-charge-label {
  fill: #ffffff;
}

.pv-base-layer-label--light {
  font-size: 10.5px;
}

.pv-base-layer-label--contact {
  font-size: 11px;
}

.pv-base-small-label,
.pv-base-plot-axis-label,
.pv-base-plot-tick {
  fill: var(--muted);
  font-size: 10.5px;
}

.pv-base-photon,
.pv-base-electron-path,
.pv-base-hole-path,
.pv-base-recombination-cross {
  fill: none;
  stroke-linecap: round;
}

.pv-base-photon {
  stroke: #d18b00;
  stroke-width: 3;
}

.pv-base-photon--short {
  stroke-dasharray: 4 3;
}

.pv-base-arrow-photon {
  fill: #d18b00;
}

.pv-base-photon-label {
  fill: #a66d00;
  font-size: 10.5px;
  font-weight: 700;
}

.pv-base-electron,
.pv-base-arrow-electron {
  fill: var(--accent);
}

.pv-base-hole,
.pv-base-arrow-hole {
  fill: #e36d2f;
}

.pv-base-charge-label {
  font-size: 11px;
  font-weight: 800;
}

.pv-base-electron-path {
  stroke: var(--accent);
  stroke-width: 4;
}

.pv-base-hole-path {
  stroke: #e36d2f;
  stroke-width: 4;
}

.pv-base-path-label {
  font-size: 10.5px;
  font-weight: 700;
}

.pv-base-path-label--electron {
  fill: var(--accent);
}

.pv-base-path-label--hole {
  fill: #c84f1c;
}

.pv-base-recombination-cross {
  stroke: #9b2c2c;
  stroke-width: 3;
}

.pv-base-diagram-divider {
  stroke: var(--border);
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.pv-base-plot-axis {
  fill: none;
  stroke: var(--text);
  stroke-width: 2;
}

.pv-base-plot-grid {
  stroke: color-mix(in srgb, var(--border) 78%, transparent);
  stroke-width: 1;
}

.pv-base-collection-curve {
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}

.pv-base-collection-curve--long {
  stroke: #168c84;
}

.pv-base-collection-curve--short {
  stroke: var(--accent);
}

.pv-base-diffusion-length {
  stroke: color-mix(in srgb, #7557b8 82%, var(--text));
  stroke-dasharray: 6 4;
  stroke-width: 2;
}

.pv-base-plot-label {
  font-size: 11px;
  font-weight: 800;
}

.pv-base-plot-label--long {
  fill: #14766f;
}

.pv-base-plot-label--short {
  fill: var(--accent);
}

.pv-base-equation-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 0.8fr)) minmax(300px, 1.4fr);
  align-items: stretch;
  gap: 12px;
}

.pv-base-equation-card,
.pv-base-equation-definitions {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, #e36d2f 7%, var(--surface));
}

.pv-base-equation-card {
  display: grid;
  align-content: center;
  text-align: center;
}

.pv-base-equation {
  color: #c84f1c;
  font-size: clamp(1.28rem, 2.5vw, 1.75rem);
  font-weight: 800;
  white-space: nowrap;
}

.pv-base-equation sub,
.pv-base-equation-definitions sub {
  font-size: 0.62em;
}

.pv-base-equation-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pv-base-equation-definitions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.pv-base-equation-definitions div {
  padding: 9px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.pv-base-equation-definitions dt,
.pv-base-equation-definitions dd {
  margin: 0;
}

.pv-base-equation-definitions dt {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.pv-base-equation-definitions dd {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.pv-base-tradeoff-icon--absorption {
  border: 7px solid #d18b00;
  box-shadow: 0 0 0 5px color-mix(in srgb, #d18b00 17%, transparent);
}

.pv-base-tradeoff-icon--collection {
  border: 7px solid var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}

.pv-base-doping-card {
  border-color: color-mix(in srgb, #e36d2f 38%, var(--border));
  background: color-mix(in srgb, #e36d2f 7%, var(--surface));
}

.pv-rear-overview-grid {
  grid-template-columns: minmax(0, 1.66fr) minmax(240px, 0.34fr);
}

.pv-rear-base {
  fill: color-mix(in srgb, #e36d2f 19%, var(--surface));
  stroke: color-mix(in srgb, #e36d2f 66%, var(--border));
  stroke-width: 1.5;
}

.pv-rear-bsf,
.pv-rear-local-bsf {
  fill: color-mix(in srgb, #e36d2f 43%, var(--surface));
  stroke: color-mix(in srgb, #c84f1c 78%, var(--border));
  stroke-width: 1.5;
}

.pv-rear-metal,
.pv-rear-contact-opening {
  fill: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-rear-passivation {
  fill: color-mix(in srgb, #168c84 48%, var(--surface));
  stroke: #14766f;
  stroke-width: 1.5;
}

.pv-rear-diagram-title,
.pv-rear-layer-label,
.pv-rear-small-label,
.pv-rear-charge-label,
.pv-rear-path-label,
.pv-rear-callout-label {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-rear-diagram-title {
  font-size: 15px;
  font-weight: 800;
}

.pv-rear-layer-label {
  font-size: 11.5px;
  font-weight: 800;
}

.pv-rear-layer-label--metal,
.pv-rear-small-label--metal,
.pv-rear-charge-label {
  fill: #ffffff;
}

.pv-rear-layer-label--passivation {
  fill: #083f3c;
  font-size: 10.5px;
}

.pv-rear-small-label,
.pv-rear-callout-label {
  fill: var(--muted);
  font-size: 10.5px;
}

.pv-rear-hole,
.pv-rear-arrow-hole {
  fill: #e36d2f;
}

.pv-rear-electron,
.pv-rear-arrow-electron {
  fill: var(--accent);
}

.pv-rear-charge-label {
  font-size: 11px;
  font-weight: 800;
}

.pv-rear-hole-path,
.pv-rear-electron-path,
.pv-rear-photon-path,
.pv-rear-contact-callout {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pv-rear-hole-path {
  stroke: #e36d2f;
  stroke-width: 4;
}

.pv-rear-electron-path {
  stroke: var(--accent);
  stroke-width: 4;
}

.pv-rear-photon-path {
  stroke: #d18b00;
  stroke-width: 3.5;
}

.pv-rear-arrow-photon {
  fill: #d18b00;
}

.pv-rear-path-label {
  font-size: 10.5px;
  font-weight: 700;
}

.pv-rear-path-label--hole {
  fill: #c84f1c;
}

.pv-rear-path-label--electron {
  fill: var(--accent);
}

.pv-rear-path-label--photon {
  fill: #a66d00;
}

.pv-rear-diagram-divider {
  stroke: var(--border);
  stroke-dasharray: 5 5;
  stroke-width: 2;
}

.pv-rear-contact-callout {
  stroke: var(--muted);
  stroke-width: 1.5;
}

.pv-rear-stack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.pv-rear-stack-grid article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
}

.pv-rear-stack-grid h4 {
  margin: 10px 0 6px;
  color: var(--text);
  font-size: 0.94rem;
}

.pv-rear-stack-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.pv-rear-stack-swatch {
  display: block;
  width: 56px;
  height: 14px;
  border-radius: 3px;
}

.pv-rear-stack-swatch--base {
  border: 1px solid #c84f1c;
  background: color-mix(in srgb, #e36d2f 25%, var(--surface));
}

.pv-rear-stack-swatch--field {
  border: 1px solid #14766f;
  background: linear-gradient(90deg, color-mix(in srgb, #e36d2f 46%, var(--surface)) 0 48%, color-mix(in srgb, #168c84 48%, var(--surface)) 48% 100%);
}

.pv-rear-stack-swatch--metal {
  background: color-mix(in srgb, var(--text) 84%, var(--surface));
}

.pv-rear-equation-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 0.8fr)) minmax(300px, 1.4fr);
  align-items: stretch;
  gap: 12px;
}

.pv-rear-equation-card,
.pv-rear-equation-definitions {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, #168c84 7%, var(--surface));
}

.pv-rear-equation-card {
  display: grid;
  align-content: center;
  text-align: center;
}

.pv-rear-equation {
  color: #14766f;
  font-size: clamp(1.28rem, 2.5vw, 1.75rem);
  font-weight: 800;
  white-space: nowrap;
}

.pv-rear-equation sub,
.pv-rear-equation-definitions sub {
  font-size: 0.62em;
}

.pv-rear-equation-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pv-rear-equation-definitions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
}

.pv-rear-equation-definitions div {
  padding: 9px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
}

.pv-rear-equation-definitions dt,
.pv-rear-equation-definitions dd {
  margin: 0;
}

.pv-rear-equation-definitions dt {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.pv-rear-equation-definitions dd {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.pv-rear-tradeoff-icon--conductance {
  border: 7px solid #626b78;
  box-shadow: 0 0 0 5px color-mix(in srgb, #626b78 16%, transparent);
}

.pv-rear-tradeoff-icon--passivation {
  border: 7px solid #168c84;
  box-shadow: 0 0 0 5px color-mix(in srgb, #168c84 17%, transparent);
}

.pv-rear-architecture-table {
  min-width: 760px;
}

.pv-grid-diagram-surface {
  fill: color-mix(in srgb, #166f69 22%, var(--surface));
  stroke: #14766f;
  stroke-width: 2;
}

.pv-grid-diagram-fingers,
.pv-grid-diagram-busbars {
  fill: none;
  stroke: color-mix(in srgb, var(--text) 80%, var(--surface));
  stroke-linecap: round;
}

.pv-grid-diagram-fingers {
  stroke-width: 4;
}

.pv-grid-diagram-busbars {
  stroke-width: 11;
}

.pv-grid-diagram-current {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
}

.pv-grid-diagram-arrowhead {
  fill: var(--accent);
}

.pv-grid-diagram-callout {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.5;
}

.pv-grid-diagram-label,
.pv-grid-diagram-note {
  fill: var(--text);
  font-family: var(--font-family-base);
}

.pv-grid-diagram-label {
  font-size: 14px;
  font-weight: 700;
}

.pv-grid-diagram-label--current {
  fill: var(--accent);
}

.pv-grid-diagram-note {
  fill: var(--muted);
  font-size: 12px;
}

.pv-front-grid-terminology {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pv-front-grid-terminology dl,
.pv-front-grid-terminology dd {
  margin: 0;
}

.pv-front-grid-terminology dl {
  display: grid;
  gap: 14px;
}

.pv-front-grid-terminology dl > div + div {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.pv-front-grid-terminology dt {
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 800;
}

.pv-front-grid-terminology dd {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.pv-grid-tradeoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px minmax(0, 1fr);
  align-items: stretch;
}

.pv-grid-tradeoff article {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.pv-grid-tradeoff article h4,
.pv-layer-fact-grid h4 {
  margin: 10px 0 6px;
  color: var(--text);
  font-size: 0.94rem;
}

.pv-grid-tradeoff article p,
.pv-layer-fact-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.pv-grid-tradeoff-icon {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.pv-grid-tradeoff-icon--light {
  border: 7px solid #f7c948;
  box-shadow: 0 0 0 5px color-mix(in srgb, #f7c948 18%, transparent);
}

.pv-grid-tradeoff-icon--resistance {
  border: 7px solid var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}

.pv-grid-tradeoff-balance {
  position: relative;
  display: grid;
  place-items: center;
}

.pv-grid-tradeoff-balance::before {
  content: "";
  width: 74px;
  height: 3px;
  background: var(--muted);
  transform: rotate(-8deg);
}

.pv-grid-tradeoff-balance span {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
}

.pv-grid-equation {
  margin: 12px 0 0;
  padding: 13px 15px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 72%, var(--surface));
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.55;
}

.pv-grid-equation strong {
  color: var(--text);
}

.pv-layer-fact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pv-layer-fact-grid article {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 50%, var(--surface));
}

.pv-layer-fact-grid h4 {
  margin-top: 0;
}

.pv-layer-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.pv-layer-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.pv-layer-table th,
.pv-layer-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.pv-layer-table thead th {
  background: color-mix(in srgb, var(--accentSoft) 64%, var(--surface));
  color: var(--text);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pv-layer-table tbody th {
  width: 24%;
  color: var(--text);
}

.pv-layer-table tbody td {
  color: var(--muted);
}

.pv-layer-table tbody tr:last-child th,
.pv-layer-table tbody tr:last-child td {
  border-bottom: 0;
}

.pv-layer-scope-note {
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, #d18b00 48%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, #f7c948 12%, var(--surface));
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.pv-layer-scope-note strong {
  color: var(--text);
}

.pv-assembled-technology-details {
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accentSoft) 24%, var(--surface));
}

.pv-assembled-technology-introduction {
  max-width: 850px;
  margin: -2px 0 16px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.pv-assembled-technology-list {
  display: grid;
  gap: 10px;
}

.pv-assembled-technology-detail {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.pv-assembled-technology-detail > summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.pv-assembled-technology-detail > summary::-webkit-details-marker {
  display: none;
}

.pv-assembled-technology-detail > summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
}

.pv-assembled-technology-detail[open] > summary::after {
  content: "−";
}

.pv-assembled-technology-detail > summary:hover,
.pv-assembled-technology-detail > summary:focus-visible {
  background: color-mix(in srgb, var(--accentSoft) 48%, var(--surface));
  outline: none;
}

.pv-assembled-technology-number {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 9px;
  background: var(--accent);
  color: #ffffff;
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.05em;
}

.pv-assembled-technology-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.pv-assembled-technology-heading strong {
  font-size: 0.95rem;
  line-height: 1.35;
}

.pv-assembled-technology-heading > span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pv-assembled-technology-body {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 34%, var(--surface));
}

.pv-assembled-technology-overview,
.pv-assembled-technology-point-grid p,
.pv-assembled-technology-scope {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.6;
}

.pv-assembled-technology-point-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.pv-assembled-technology-point-grid article {
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.pv-assembled-technology-point-grid h5,
.pv-assembled-technology-metrics h5 {
  margin: 0 0 5px;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.35;
}

.pv-assembled-technology-metrics dl {
  display: grid;
  gap: 7px;
  margin: 0;
}

.pv-assembled-technology-metrics dl > div {
  display: grid;
  grid-template-columns: minmax(130px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.76rem;
  line-height: 1.45;
}

.pv-assembled-technology-metrics dt {
  color: var(--text);
  font-weight: 800;
}

.pv-assembled-technology-metrics dd {
  margin: 0;
  color: var(--muted);
}

.pv-assembled-technology-risk {
  color: color-mix(in srgb, #b65f00 78%, var(--text)) !important;
}

.pv-assembled-technology-scope {
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}

.pv-assembled-technology-scope strong {
  color: var(--text);
}

.pv-assembled-technology-figure {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.pv-assembled-technology-figure > .pv-assembled-technology-visual-svg {
  display: block;
  min-width: 0;
  width: 100%;
  height: auto;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
}

.pv-assembled-technology-figure figcaption {
  padding: 12px 15px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.pv-assembled-technology-figure figcaption strong {
  color: var(--text);
}

.pv-layer-sources {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.pv-layer-sources ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}

.pv-layer-sources li {
  color: var(--muted);
  font-size: 0.82rem;
}

.pv-layer-sources a {
  color: var(--accent);
  text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .photovoltaics-history-layout {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  .photovoltaics-background-tabs {
    width: 76px;
  }

  .photovoltaics-background-tab {
    width: 76px;
    min-height: 40px;
    padding-left: 11px;
  }

  .photovoltaics-background-tab:hover,
  .photovoltaics-background-tab:focus-visible {
    width: min(310px, calc(100vw - 86px));
  }

  .pv-grid-current-path,
  .pv-layer-fact-grid,
  .pv-layer-overview-grid,
  .pv-simple-hero,
  .pv-simple-job-grid,
  .pv-assembled-technology-point-grid {
    grid-template-columns: 1fr;
  }

  .pv-assembled-technology-metrics dl > div {
    grid-template-columns: 1fr;
  }

  .pv-layer-detail-switch {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .pv-layer-detail-switch-label {
    padding-left: 0;
  }

  .pv-grid-current-path li {
    min-height: 0;
  }

  .pv-grid-tradeoff {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pv-grid-tradeoff-balance {
    height: 30px;
  }

  .pv-grid-tradeoff-balance::before {
    transform: rotate(0deg);
  }

  .pv-arc-equation-panel,
  .pv-arc-equation-definitions {
    grid-template-columns: 1fr;
  }

  .pv-emitter-selective-card {
    grid-template-columns: 1fr;
  }

  .pv-depletion-equation-panel,
  .pv-depletion-equation-definitions,
  .pv-depletion-charge-balance,
  .pv-depletion-recombination-card,
  .pv-base-equation-panel,
  .pv-base-equation-definitions,
  .pv-rear-stack-grid,
  .pv-rear-equation-panel,
  .pv-rear-equation-definitions {
    grid-template-columns: 1fr;
  }
}

.photovoltaics-entry-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.photovoltaics-entry-card {
  position: relative;
  display: flex;
  min-height: 250px;
  flex-direction: column;
  margin-bottom: 0;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.photovoltaics-entry-card:hover,
.photovoltaics-entry-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px rgba(16, 24, 40, 0.12);
  outline: none;
}

.photovoltaics-entry-number {
  align-self: flex-end;
  color: var(--border);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
}

.photovoltaics-entry-card h2 {
  margin: 24px 0 8px;
  font-size: 1.3rem;
}

.photovoltaics-entry-card p {
  margin: 0 0 24px;
  color: var(--muted);
}

.photovoltaics-entry-action {
  margin-top: auto;
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 1200px) {
  .photovoltaics-definition-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {

  .photovoltaics-entry-grid {
    grid-template-columns: 1fr;
  }

  .photovoltaics-entry-card {
    min-height: 190px;
  }

}

@media (max-width: 560px) {
  .photovoltaic-effect-figure {
    margin-inline: -10px;
  }

  .pv-layer-dialog-panel {
    padding: 20px;
  }

  .pv-layer-detail-switch-options {
    grid-template-columns: 1fr;
  }
}

.search-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.button-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 12px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #bfd3f6;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: none;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  background: #dce9ff;
}

.record-export-menu {
  position: relative;
}

.record-export-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.record-export-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
}

.record-export-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 22;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.record-export-dropdown[hidden] {
  display: none !important;
}

.record-export-option {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.record-export-option:hover,
.record-export-option:focus-visible {
  background: var(--accentSoft);
  color: var(--accent);
}

.record-export-option[disabled] {
  opacity: 0.52;
  cursor: not-allowed;
}

.search-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.search-input-wrap {
  position: relative;
}

.search-group label {
  font-size: 0.92rem;
  color: var(--muted);
}

.search-suggestions {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 300px;
  padding: 10px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
}

.search-suggestions[hidden] {
  display: none;
}

.search-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.search-suggestion:hover,
.search-suggestion.is-active {
  background: #eef4ff;
  border-color: #bfd3f6;
  opacity: 1;
}

.search-suggestion-label {
  font-weight: 600;
  word-break: break-word;
}

.search-suggestion-meta {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}

input,
button {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}

button {
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  border: none;
  white-space: nowrap;
}

button:hover {
  opacity: 0.95;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.filters-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.filters-section h2 {
  grid-column: 1 / -1;
  margin: 0 0 8px 0;
  font-size: 1.1rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.module-filter-header {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.module-filter-header h2 {
  margin: 0;
}

.module-filter-dimension {
  --module-filter-position: 2;
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(88px, 1fr));
  min-width: 306px;
  min-inline-size: 0;
  margin: 0;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  isolation: isolate;
}

.module-filter-dimension[data-mode="type"] {
  --module-filter-position: 0;
}

.module-filter-dimension[data-mode="chemistry"] {
  --module-filter-position: 1;
}

.module-filter-dimension[data-mode="both"] {
  --module-filter-position: 2;
}

.module-filter-dimension::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateX(calc(var(--module-filter-position) * 100%));
  transition: transform 180ms ease;
}

.module-filter-dimension-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 44px;
  place-items: center;
  padding: 8px 12px;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.module-filter-dimension-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.module-filter-dimension-option:has(.module-filter-dimension-input:checked) {
  color: var(--accent);
}

.module-filter-dimension-option:has(.module-filter-dimension-input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: -3px;
}

.checkbox-group.module-filter-options {
  display: grid;
  grid-column: 1 / -1;
  gap: 18px;
}

.module-filter-option-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.module-filter-option-heading {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.module-filter-type-card .category-header,
.module-filter-chemistry-card .category-header {
  min-height: 38px;
}

@media (prefers-reduced-motion: reduce) {
  .module-filter-dimension::before {
    transition: none;
  }
}

@media (max-width: 600px) {
  .module-filter-header {
    align-items: stretch;
    flex-direction: column;
  }

  .module-filter-dimension {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
  }

  .module-filter-dimension-option {
    padding-inline: 6px;
  }

  .module-filter-option-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checkbox-group {
  display: contents;
}

.checkbox-category {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

.symbol-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.category-checkbox {
  cursor: pointer;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  accent-color: var(--accent);
}

.category-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.category-label {
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
}

.subcat-checkbox {
  cursor: pointer;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  flex: 0 0 18px;
  accent-color: var(--accent);
}

.subcat-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.checkbox-item label {
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text);
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay.hidden {
  display: none;
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: 500px;
  width: 90%;
  display: flex;
  flex-direction: column;
}

#filtersModal .modal-content {
  width: min(96vw, 1240px);
  max-width: 1240px;
  max-height: 99vh;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid var(--border);
}

.modal-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.minimize-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0;
  color: var(--muted);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.minimize-btn:hover {
  color: var(--text);
}

.modal-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
}

#filtersModal .modal-body {
  max-height: 93vh;
}

.country-map-modal {
  width: min(94vw, 1120px);
  max-width: 1120px;
  max-height: 92vh;
}

.country-map-body {
  max-height: calc(92vh - 78px);
  padding: 18px;
}

.country-map-modal-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.country-map-filter-toggle {
  min-width: 104px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.country-map-filter-toggle:hover,
.country-map-filter-toggle:focus-visible,
.country-map-filter-toggle.is-active {
  border-color: #bfd3f6;
  background: var(--accentSoft);
}

.country-map-filter-toggle.is-active {
  box-shadow: inset 0 0 0 1px var(--accent);
}

.country-map-shell {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #f7fbff, #eef5ff);
  overflow: hidden;
}

.country-map-summary {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.country-map-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 520px;
}

.country-map-ocean {
  fill: #eef7ff;
}

.country-map-region {
  fill: var(--country-fill);
  stroke: rgba(72, 88, 108, 0.46);
  stroke-width: 0.75;
  cursor: pointer;
  outline: none;
  transition: filter 0.16s ease, stroke-width 0.16s ease;
  vector-effect: non-scaling-stroke;
}

.country-map-region.has-records {
  stroke: #0f5f2d;
  stroke-width: 1.1;
}

.country-map-region:hover,
.country-map-region:focus {
  filter: brightness(1.05) saturate(1.15);
  stroke-width: 3;
}

.country-map-tooltip {
  position: fixed;
  z-index: 1105;
  max-width: 360px;
  padding: 8px 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  pointer-events: none;
  box-shadow: var(--shadow);
}

.country-map-loading {
  display: grid;
  min-height: 420px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #eef7ff;
  color: var(--muted);
  font-weight: 700;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-mode-toggle {
  display: inline-flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}

.filter-mode-button {
  min-width: 112px;
  padding: 9px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.filter-mode-button.is-active,
.filter-mode-button:hover {
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
}

.filter-mode-panel {
  display: grid;
  gap: 14px;
}

.filter-mode-panel.hidden {
  display: none;
}

.advanced-chemistry-panel {
  display: grid;
  gap: 12px;
}

.advanced-chemistry-dropdowns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.advanced-chemistry-note,
.advanced-chemistry-empty {
  margin: 0;
  color: var(--muted);
}

.advanced-chemistry-view-toggle {
  align-self: start;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
}

.advanced-chemistry-view-toggle.is-periodic {
  background: var(--accentSoft);
  border-color: var(--accent);
}

.advanced-chemistry-search-label {
  font-weight: 700;
}

.advanced-chemistry-search {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
}

.advanced-chemistry-list {
  display: grid;
  gap: 10px;
  max-height: 360px;
  padding-right: 4px;
  overflow-y: auto;
}

.advanced-chemistry-list.is-periodic-view {
  max-height: none;
  overflow: visible;
}

.advanced-chemistry-section {
  display: grid;
  gap: 10px;
}

.advanced-chemistry-section + .advanced-chemistry-section {
  margin-top: 2px;
}

.advanced-chemistry-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}

.advanced-chemistry-section-list {
  display: grid;
  gap: 10px;
}

.advanced-chemistry-periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(48px, 1fr));
  gap: 6px;
  padding-bottom: 6px;
}

.periodic-element-button {
  min-height: 54px;
  padding: 6px 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.periodic-element-button.is-available:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.periodic-element-button.is-unavailable {
  background: var(--bg);
  color: var(--muted);
  opacity: 0.45;
  cursor: not-allowed;
}

.periodic-element-button.is-include {
  background: #e6f7ec;
  border-color: #157f3b;
  color: #0b5a26;
}

.periodic-element-button.is-exclude {
  background: #fde8e8;
  border-color: #b42318;
  color: #8e1b12;
}

.periodic-element-symbol {
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1;
}

.periodic-element-name {
  font-size: 0.58rem;
  line-height: 1.15;
}

.advanced-chemistry-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.advanced-chemistry-item-main {
  min-width: 0;
}

.advanced-chemistry-item-label {
  display: block;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.advanced-chemistry-item-meta {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.advanced-chemistry-actions {
  display: inline-flex;
  gap: 8px;
  flex-shrink: 0;
}

.advanced-chemistry-toggle {
  min-width: 78px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.advanced-chemistry-toggle:hover {
  background: var(--accentSoft);
  color: var(--accent);
}

.advanced-chemistry-toggle.is-active {
  border-color: var(--accent);
  background: var(--accentSoft);
  color: var(--accent);
}

.advanced-chemistry-toggle[data-chemistry-mode="exclude"].is-active {
  border-color: #b42318;
  background: #fff1f1;
  color: #b42318;
}

.filter-group label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.checkbox-filter-group label {
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.checkbox-filter-group input[type="checkbox"] {
  cursor: pointer;
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.filter-group select,
.filter-group input {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
  font-family: inherit;
}

.range-inputs {
  display: flex;
  gap: 8px;
  align-items: center;
}

.range-inputs input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.92rem;
}

.range-inputs span {
  color: var(--muted);
  white-space: nowrap;
}

.modal-footer {
  padding: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: center;
}

.modal-footer button {
  padding: 10px 28px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem;
}

.modal-footer button:hover {
  opacity: 0.95;
}

.chart-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 460px;
}

.chart-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: -4px;
}

.chart-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.chart-view-toggle,
.chart-selection-clear {
  min-width: 128px;
  justify-content: center;
  box-shadow: var(--shadow);
}

.chart-selection-clear[disabled] {
  opacity: 0.55;
  box-shadow: none;
}

.graph-state-banner {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: calc(100% - 82px);
  padding: 10px 14px;
  border: 1px solid #bfd3f6;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef4ff, #f7fbff);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
}

.graph-state-banner::before {
  content: "Compared only";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.chart-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
  z-index: 15;
}

.country-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 72px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
  user-select: none;
}

.country-indicator-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.country-indicator-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 16px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.country-indicator-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.country-indicator-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.country-indicator-code {
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.country-map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-width: 82px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.country-map-button:hover,
.country-map-button:focus-visible {
  background: var(--accentSoft);
  border-color: #bfd3f6;
}

.country-map-button-icon {
  width: 28px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.country-map-button-text {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trend-line-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  min-width: 88px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.trend-line-toggle:hover,
.trend-line-toggle:focus-visible,
.trend-line-toggle.is-active {
  border-color: #bfd3f6;
  background: var(--accentSoft);
}

.trend-line-toggle.is-active {
  box-shadow: inset 0 0 0 1px var(--accent), var(--shadow);
}

.trend-line-toggle svg {
  width: 28px;
  height: 18px;
  fill: var(--surface);
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-line-toggle.is-active svg {
  fill: var(--accent);
}

.trend-line-toggle span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chart-symbol-size-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  height: 40px;
}

.chart-symbol-size-label {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.chart-symbol-size-control {
  --chart-symbol-size-position: 1;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(42px, 1fr));
  width: 190px;
  min-width: 0;
  min-inline-size: 0;
  height: 40px;
  margin: 0;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  isolation: isolate;
}

.chart-symbol-size-control[data-size="25"] {
  --chart-symbol-size-position: 0;
}

.chart-symbol-size-control[data-size="50"] {
  --chart-symbol-size-position: 1;
}

.chart-symbol-size-control[data-size="75"] {
  --chart-symbol-size-position: 2;
}

.chart-symbol-size-control[data-size="100"] {
  --chart-symbol-size-position: 3;
}

.chart-symbol-size-control::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 4);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: 9px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: translateX(calc(var(--chart-symbol-size-position) * 100%));
  transition: transform 180ms ease;
}

.chart-symbol-size-option {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  min-height: 32px;
  place-items: center;
  padding: 0 5px;
  border-radius: 9px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.chart-symbol-size-option:hover {
  color: var(--text);
}

.chart-symbol-size-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.chart-symbol-size-option:has(.chart-symbol-size-input:checked) {
  color: var(--accent);
}

.chart-symbol-size-option:has(.chart-symbol-size-input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .chart-symbol-size-control::before {
    transition: none;
  }
}

.export-menu {
  position: relative;
  padding: 8px;
  margin: -8px -8px -8px 0;
}

.export-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: var(--shadow);
}

.export-trigger:hover,
.export-trigger[aria-expanded="true"] {
  background: var(--accentSoft);
}

.export-trigger svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.export-dropdown {
  position: absolute;
  top: 100%;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.export-dropdown[hidden] {
  display: none !important;
}

.export-option {
  width: 100%;
  justify-content: flex-start;
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
}

.export-option:hover,
.export-option:focus-visible {
  background: var(--accentSoft);
  color: var(--accent);
}

.export-trigger.is-busy {
  opacity: 0.75;
  cursor: progress;
}

.export-trigger.is-busy svg {
  animation: export-spin 1s linear infinite;
}

@keyframes export-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.export-resolution-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.34);
}

.export-resolution-modal[hidden] {
  display: none !important;
}

.export-resolution-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.export-resolution-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.card pre {
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f8fafc;
  overflow-x: auto;
}

.card code {
  font-family: Consolas, "Courier New", monospace;
}

.admin-command-list {
  display: grid;
  gap: 14px;
}

.admin-command {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcfe;
}

.admin-command-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.copy-button {
  padding: 8px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  box-shadow: none;
}

.copy-button:hover,
.copy-button:focus-visible {
  background: var(--accentSoft);
}

.copy-button.is-active {
  background: var(--accentSoft);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.admin-command-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.submission-helper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.submission-mode-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: stretch;
}

.submission-mode-card h2 {
  margin-bottom: 8px;
}

.submission-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.submission-mode-option {
  width: 100%;
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  color: var(--text);
  cursor: pointer;
}

.submission-mode-option:hover,
.submission-mode-option:focus-visible,
.submission-mode-option.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accentSoft);
}

.submission-mode-option strong {
  font-size: 1.05rem;
}

.submission-mode-option span {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.chemical-identifier-card {
  display: grid;
  gap: 14px;
}

.chemical-identifier-card.is-collapsed {
  gap: 0;
}

.chemical-identifier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.chemical-identifier-header > .copy-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.chemical-identifier-toggle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.chemical-identifier-toggle:hover,
.chemical-identifier-toggle:focus-visible {
  color: var(--accent);
}

.chemical-identifier-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.chemical-identifier-title-text {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.chemical-identifier-summary {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.chemical-identifier-repo-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chemical-identifier-repo-status {
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
}

.chemical-identifier-repo-status.is-success {
  color: #0f7a32;
}

.chemical-identifier-repo-status.is-error {
  color: #b42318;
}

.chemical-identifier-repo-status.is-pending {
  color: var(--muted);
}

.chemical-identifier-lookup-indicator {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}

.chemical-identifier-lookup-indicator.is-running {
  animation: chemical-lookup-spin 0.8s linear infinite;
}

.chemical-identifier-lookup-indicator.is-complete {
  border-color: #0f7a32;
  background: #0f7a32;
}

.chemical-identifier-lookup-indicator.is-idle {
  border-top-color: var(--border);
}

.chemical-identifier-toggle-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
}

.chemical-identifier-body {
  display: grid;
  gap: 14px;
  padding-top: 12px;
}

.chemical-identifier-body[hidden] {
  display: none;
}

.chemical-identifier-card[hidden] {
  display: none !important;
}

@keyframes chemical-lookup-spin {
  to {
    transform: rotate(360deg);
  }
}

.chemical-identifier-key-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfe;
}

.chemical-identifier-key-row label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.chemical-identifier-key-row input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

.chemical-identifier-status {
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.chemical-identifier-status.is-success {
  color: #0f7a32;
}

.chemical-identifier-status.is-error {
  color: #b42318;
}

.chemical-identifier-panel {
  display: grid;
  gap: 12px;
}

.chemical-identifier-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  background: #fbfcfe;
}

.chemical-identifier-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfe;
}

.chemical-identifier-row-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.chemical-identifier-name-wrap {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chemical-identifier-name {
  overflow-wrap: anywhere;
}

.chemical-identifier-original {
  color: var(--muted);
  font-size: 0.82rem;
}

.chemical-identifier-badge {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accentSoft);
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
}

.chemical-identifier-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.chemical-identifier-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 600;
}

.chemical-identifier-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

.chemical-identifier-cid-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.chemical-identifier-lookup {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.86rem;
  white-space: nowrap;
}

.chemical-identifier-lookup[disabled],
#lookupAllChemicalIdentifiers[disabled] {
  cursor: not-allowed;
  opacity: 0.62;
}

.chemical-identifier-row-status {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.manufacturing-lca-card {
  display: grid;
  gap: 14px;
}

.manufacturing-lca-card[hidden] {
  display: none !important;
}

.lca-status {
  min-height: 1.2em;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.lca-status.is-warning {
  color: #9a6700;
}

.lca-impact-graph {
  display: grid;
  gap: 22px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.lca-chart-section {
  display: grid;
  gap: 10px;
}

.lca-chart-section + .lca-chart-section {
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.lca-chart-section-title {
  margin: 0;
  color: var(--text);
  font-size: 1.06rem;
  font-weight: 800;
  line-height: 1.2;
}

.lca-chart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.34fr);
  gap: 10px;
  align-items: start;
}

.lca-chart-svg-wrap {
  min-width: 0;
  overflow: hidden;
  padding-bottom: 4px;
}

.lca-chart-svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  background: #fff;
}

.lca-chart-axis,
.lca-chart-tick {
  stroke: #111827;
  stroke-width: 1.4;
  shape-rendering: crispEdges;
}

.lca-chart-gridline {
  stroke: #e5e7eb;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.lca-chart-segment {
  stroke: #111827;
  stroke-width: 0.8;
  shape-rendering: crispEdges;
}

.lca-chart-bar-outline {
  fill: none;
  stroke: #111827;
  stroke-width: 1.4;
  shape-rendering: crispEdges;
}

.lca-chart-tick-label,
.lca-chart-category-label {
  fill: #111827;
  font-size: 16px;
}

.lca-chart-axis-title {
  fill: #111827;
  font-size: 21px;
  font-weight: 800;
}

.lca-chart-x-axis-title {
  margin-top: 24px;
  color: #111827;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.lca-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.lca-legend {
  display: grid;
  gap: 4px;
  align-self: start;
  padding: 8px;
  border: 2px solid #111827;
  background: #fff;
}

.lca-legend-column {
  display: grid;
  gap: 8px;
  align-self: start;
}

.lca-legend[hidden] {
  display: none;
}

.lca-legend-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #111827;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.2;
}

.lca-legend-item span {
  width: 28px;
  height: 16px;
  border: 1px solid #4b5563;
  border-radius: 0;
  flex: 0 0 auto;
}

.lca-calculation-toggle {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--accent);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  cursor: pointer;
}

.lca-calculation-toggle:hover,
.lca-calculation-toggle:focus-visible {
  border-color: var(--accent);
}

.lca-calculation-explanation {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfe;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.lca-calculation-explanation[hidden] {
  display: none;
}

.lca-calculation-explanation p,
.lca-calculation-explanation ol {
  margin: 0;
}

.lca-calculation-explanation ol {
  padding-left: 18px;
  margin-top: 6px;
}

.submission-automatic-flow {
  margin-top: 18px;
}

.submission-automatic-flow[hidden] {
  display: none;
}

.submission-automatic-frame {
  width: 100%;
  min-height: 0;
  height: 720px;
  border: 0;
  display: block;
  transition: height 0.18s ease;
}

.submission-output-card {
  margin-top: 18px;
}

.submission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.submission-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.submission-field-wide {
  grid-column: 1 / -1;
}

.submission-field label {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.submission-field input,
.submission-field select,
.submission-field textarea {
  width: 100%;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: var(--text);
}

.submission-field textarea {
  resize: vertical;
}

.submission-field.is-invalid input,
.submission-field.is-invalid select,
.submission-field.is-invalid textarea {
  border-color: #c62828;
  box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.submission-field.needs-attention {
  animation: submission-field-shake 0.42s ease-in-out,
    submission-field-highlight 1.6s ease-out;
}

.submission-help {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.submission-help code {
  font-size: 0.84rem;
}

.submission-meta {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.submission-meta strong {
  color: var(--text);
}

.submission-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}

.submission-error {
  margin: -2px 0 0;
  color: #b42318;
  font-size: 0.82rem;
  line-height: 1.35;
}

.submission-duplicate-check {
  display: grid;
  gap: 6px;
  margin-top: -2px;
}

.submission-duplicate-warning {
  margin: 0;
  color: #b42318;
  font-size: 0.78rem;
  line-height: 1.35;
}

.submission-duplicate-select {
  width: 100%;
  border-color: #f1b6b6;
  background: #fffafa;
  color: var(--text);
  font-size: 0.9rem;
}

.submission-validation {
  min-height: 1.2em;
  margin-top: 12px;
  color: #b42318;
  font-size: 0.9rem;
  font-weight: 600;
}

.submission-validation.is-success {
  color: #0f7a32;
}

@keyframes submission-field-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-6px);
  }

  40% {
    transform: translateX(5px);
  }

  60% {
    transform: translateX(-4px);
  }

  80% {
    transform: translateX(3px);
  }
}

@keyframes submission-field-highlight {
  0% {
    background: rgba(198, 40, 40, 0.14);
  }

  100% {
    background: transparent;
  }
}

.export-resolution-header h3 {
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.export-resolution-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.export-resolution-close {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  box-shadow: none;
}

.export-resolution-close:hover {
  background: var(--accentSoft);
  color: var(--accent);
}

.export-resolution-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.export-resolution-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 150px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 251, 0.94));
  color: var(--text);
  text-align: left;
  box-shadow: none;
}

.export-resolution-option:hover,
.export-resolution-option:focus-visible {
  border-color: var(--accent);
  background: var(--accentSoft);
  color: var(--text);
}

.export-resolution-option[disabled] {
  cursor: wait;
  opacity: 0.72;
}

.export-resolution-label {
  font-size: 1.02rem;
  font-weight: 700;
}

.export-resolution-meta {
  font-size: 0.9rem;
  color: var(--muted);
}

.export-resolution-size {
  margin-top: auto;
  width: 100%;
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--accent);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.export-resolution-note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.chart-canvas-wrap {
  --chart-mobile-min-height: 420px;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.chart-canvas-wrap.is-compared-only {
  border-color: #bfd3f6;
  background: linear-gradient(180deg, rgba(238, 244, 255, 0.42), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(31, 111, 235, 0.04);
}

#efficiencyChart {
  width: 100%;
  height: 100%;
  cursor: grab;
}

#pvCellDevelopmentsChart {
  width: 100%;
  height: 100%;
}

#pvModuleDevelopmentsChart {
  width: 100%;
  height: 100%;
}

.pv-cell-developments-intro h2,
.pv-cell-developments-chart h2,
.pv-module-developments-intro h2,
.pv-module-developments-chart h2 {
  margin: 0;
}

.pv-cell-developments-intro p,
.pv-cell-developments-chart-header p,
.pv-module-developments-intro > p,
.pv-module-developments-chart-header p {
  margin: 6px 0 0;
  color: var(--muted);
}

.pv-cell-developments-source-note,
.pv-module-developments-source-note {
  margin: 10px 0 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel-soft, #f7f9fc);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.pv-development-timeline {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.pv-development-timeline-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.pv-development-timeline-header h3 {
  margin: 0;
  font-size: 1rem;
}

.pv-cell-developments-intro .pv-development-timeline-header p {
  max-width: 920px;
  font-size: 0.88rem;
}

.pv-module-developments-intro .pv-development-timeline-header p {
  max-width: 920px;
  font-size: 0.88rem;
}

.pv-development-timeline-viewport {
  width: 100%;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 72%, var(--surface));
}

.pv-development-timeline-track {
  width: 100%;
  min-width: 0;
  padding: 10px 20px 16px;
}

.pv-development-timeline-axis {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  align-items: stretch;
  height: 72px;
}

.pv-development-timeline-axis::before {
  content: "";
  position: absolute;
  top: 17px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--border);
}

.pv-development-timeline-tick {
  position: relative;
  z-index: 1;
  min-width: 0;
  height: 62px;
  padding: 34px 1px 5px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: clamp(0.6rem, 0.8vw, 0.78rem);
  font-weight: 700;
  white-space: nowrap;
}

.pv-development-timeline-tick:hover,
.pv-development-timeline-tick:focus-visible {
  border-color: var(--accent);
  background: var(--accentSoft);
  color: var(--accent);
  outline: none;
}

.pv-development-timeline-tick.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  box-shadow: var(--shadow);
}

.pv-development-timeline-tick::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 2px;
  height: 15px;
  transform: translateX(-50%);
  background: var(--accent);
}

.pv-development-timeline-tick.is-selected::before {
  background: #ffffff;
}

.pv-development-timeline-milestone-lane {
  min-height: 180px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.pv-development-decade-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.pv-development-decade-kicker,
.pv-development-decade-heading h4,
.pv-development-decade-summary,
.pv-development-trl-note,
.pv-development-crl-note,
.pv-development-technology-card p,
.pv-development-technology-card h5 {
  margin: 0;
}

.pv-development-decade-kicker {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pv-development-decade-heading h4 {
  margin-top: 2px;
  color: var(--text);
  font-size: 1.55rem;
}

.pv-development-trl-key,
.pv-development-crl-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.pv-development-trl-key span,
.pv-development-crl-key span {
  width: auto;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 72%, var(--surface));
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 650;
}

.pv-development-trl-key strong,
.pv-development-crl-key strong {
  color: var(--text);
}

.pv-cell-developments-intro .pv-development-decade-summary,
.pv-module-developments-intro .pv-development-decade-summary {
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.pv-development-technology-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.pv-development-technology-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--trl-colour, var(--accent));
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 40%, var(--surface));
}

.pv-development-technology-card.is-research {
  --trl-colour: #7b61b8;
}

.pv-development-technology-card.is-validation {
  --trl-colour: #c98614;
}

.pv-development-technology-card.is-demonstration {
  --trl-colour: #1976a3;
}

.pv-development-technology-card.is-operational {
  --trl-colour: #18864b;
}

.pv-development-technology-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.pv-development-technology-card-header > div {
  min-width: 0;
}

.pv-development-technology-family {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pv-development-technology-card h5 {
  margin-top: 4px;
  color: var(--text);
  font-size: 0.94rem;
  line-height: 1.28;
  overflow-wrap: anywhere;
}

.pv-development-trl-badge {
  flex: 0 0 auto;
  width: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--trl-colour);
  color: #ffffff;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}

.pv-development-crl-badge {
  flex: 0 0 auto;
  width: auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--trl-colour);
  color: #ffffff;
  font-size: 0.73rem;
  font-weight: 800;
  white-space: nowrap;
}

.pv-development-technology-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.pv-development-technology-meta span {
  width: auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 58%, var(--surface));
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
}

.pv-development-technology-meta .is-introduction {
  background: color-mix(in srgb, var(--accentSoft) 78%, var(--surface));
  color: var(--accent);
}

.pv-development-technology-meta .is-rise {
  background: color-mix(in srgb, #d9f2e4 80%, var(--surface));
  color: #126e3d;
}

.pv-development-trl-meter {
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, var(--surface));
}

.pv-development-trl-meter-fill {
  display: block;
  width: var(--trl-progress);
  height: 100%;
  border-radius: inherit;
  background: var(--trl-colour);
}

.pv-cell-developments-intro .pv-development-trl-stage,
.pv-module-developments-intro .pv-development-crl-stage {
  margin-top: 8px;
  color: var(--trl-colour);
  font-size: 0.74rem;
  font-weight: 800;
}

.pv-cell-developments-intro .pv-development-technology-milestone,
.pv-module-developments-intro .pv-development-technology-milestone {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.pv-cell-developments-intro .pv-development-trl-note,
.pv-module-developments-intro .pv-development-crl-note {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.pv-development-trl-note a,
.pv-development-crl-note a {
  color: var(--accent);
  font-weight: 700;
}

@media (max-width: 600px) {
  .pv-development-timeline-track {
    padding-right: 8px;
    padding-left: 8px;
  }

  .pv-development-timeline-tick {
    font-size: 0.56rem;
  }

  .pv-development-timeline-axis {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
    row-gap: 6px;
  }

  .pv-development-timeline-axis::before {
    display: none;
  }

  .pv-development-timeline-tick {
    height: 46px;
    padding-top: 20px;
  }

  .pv-development-decade-heading {
    flex-direction: column;
  }

  .pv-development-trl-key,
  .pv-development-crl-key {
    justify-content: flex-start;
  }

  .pv-development-technology-list {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 601px) and (max-width: 1050px) {
  .pv-development-technology-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pv-cell-developments-chart-header,
.pv-module-developments-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pv-cell-developments-chart-header > :first-child,
.pv-module-developments-chart-header > :first-child {
  flex: 1 1 420px;
  min-width: 0;
}

.pv-cell-developments-chart-controls,
.pv-module-developments-chart-controls {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.pv-cell-developments-status,
.pv-module-developments-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--accentSoft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.pv-cell-developments-chart .chart-canvas-wrap,
.pv-module-developments-chart .chart-canvas-wrap {
  --chart-mobile-min-height: 720px;
}

.pv-cell-developments-summary,
.pv-module-developments-summary {
  margin: 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accentSoft) 55%, transparent);
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}

.pv-module-legend-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.86rem;
  text-align: left;
  white-space: normal;
}

.pv-module-legend-item:hover,
.pv-module-legend-item:focus-visible {
  border-color: var(--border);
  background: color-mix(in srgb, var(--accentSoft) 62%, transparent);
  outline: none;
}

.pv-module-legend-item.is-hidden {
  color: var(--muted);
  opacity: 0.55;
}

.graph-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: stretch;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.graph-legend-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.graph-legend:empty {
  display: none;
}

.graph-legend-group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.graph-legend-title {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  cursor: default;
}

.graph-legend-items {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.graph-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 8px;
  font-size: 0.9rem;
  line-height: 1.2;
  color: var(--text);
}

.graph-legend-item-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.details-panel h2 {
  margin-top: 0;
}

.details-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 18px;
}

.details-header-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.details-category {
  margin: 0;
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.05;
}

.details-subtitle {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.details-org {
  margin: 0;
  font-size: 0.98rem;
  color: var(--muted);
}

.details-provenance-panel {
  display: flex;
  min-width: 220px;
  max-width: 280px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-left: auto;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, #fbfcff, #f6f9ff);
  box-shadow: var(--shadow);
}

.details-provenance-group {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.details-provenance-label {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.details-provenance-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1;
}

.details-certification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 800;
  line-height: 1;
}

.details-provenance-badge--peer-reviewed {
  background: #e8f1ff;
  border-color: #bfd3f6;
  color: #0d5bd7;
}

.details-provenance-badge--conference {
  background: #f2ebff;
  border-color: #dbc8ff;
  color: #7c3aed;
}

.details-provenance-badge--company-release {
  background: #fff2df;
  border-color: #ffd7a3;
  color: #b45309;
}

.details-provenance-badge--certified {
  background: #e8f8ec;
  border-color: #bde2c6;
  color: #15803d;
}

.details-provenance-badge--internal-preliminary {
  background: #fff0f0;
  border-color: #f6c4c4;
  color: #c2410c;
}

.details-certification-badge--certified {
  background: #e8f8ec;
  border-color: #bde2c6;
  color: #15803d;
}

.details-certification-badge--verified {
  background: #e8f7fb;
  border-color: #b7deeb;
  color: #0f766e;
}

.details-certification-badge--pending {
  background: #fff7e3;
  border-color: #f3dca0;
  color: #b45309;
}

.details-certification-badge--reported {
  background: #fff1e8;
  border-color: #f6cdb7;
  color: #c2410c;
}

.details-certification-badge--not-certified {
  background: #f4f6f8;
  border-color: #d4dce6;
  color: #5b6470;
}

.details-section-title {
  margin: 18px 0 10px;
  font-size: 1rem;
  font-weight: 700;
}

.details-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 16px;
}

.details-secondary-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 540px);
  gap: 24px;
  align-items: start;
}

.details-grid div.key {
  color: var(--muted);
  font-weight: 600;
}

.details-grid div.value a {
  color: var(--accent);
  word-break: break-word;
}

.details-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.details-citation {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcff;
}

.details-citation p {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.details-element-panel {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
}

.details-element-panel.is-expanded {
  width: 100%;
  max-width: 100%;
}

.details-element-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.details-element-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
}

.details-element-note {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.details-element-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 12px;
  font-size: 0.84rem;
  color: var(--muted);
}

.details-element-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.details-element-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.details-element-expand-button {
  width: 42px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.details-element-expand-button svg {
  display: block;
}

.details-element-expand-button:hover,
.details-element-expand-button:focus-visible {
  background: var(--accentSoft);
}

body.has-overlay-modal {
  overflow: hidden;
}

.details-element-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, 0.42);
}

.details-element-modal[hidden] {
  display: none !important;
}

.details-element-modal-dialog {
  width: min(1180px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: auto;
}

.details-element-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.details-element-modal-header h4 {
  margin: 0;
  font-size: 1.1rem;
}

.details-element-modal-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
}

.record-periodic-grid {
  display: grid;
  grid-template-columns: repeat(18, minmax(24px, 1fr));
  gap: 4px;
}

.record-periodic-element {
  min-height: 42px;
  padding: 4px 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--bg);
  color: var(--muted);
}

button.record-periodic-element {
  font: inherit;
  cursor: pointer;
}

button.record-periodic-element:hover,
button.record-periodic-element:focus-visible {
  transform: translateY(-1px);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.record-periodic-element.is-selected {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accentSoft), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.details-element-legend-swatch.is-stack,
.record-periodic-element.is-stack {
  background: #b9f3c9;
  border-color: #14803c;
  color: #065f2c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(20, 128, 60, 0.08);
}

.details-element-legend-swatch.is-electrode,
.record-periodic-element.is-electrode {
  background: #bfd8ff;
  border-color: #1d4ed8;
  color: #163ea8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(29, 78, 216, 0.08);
}

.details-element-legend-swatch.is-both,
.record-periodic-element.is-both {
  background: linear-gradient(135deg, #9ae6b4 0 50%, #a9c8ff 50% 100%);
  border-color: #1d4ed8;
  color: #1f2937;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 1px rgba(29, 78, 216, 0.08);
}

.record-periodic-element-symbol {
  font-size: 0.88rem;
  font-weight: 800;
  line-height: 1;
}

.record-periodic-element-name {
  display: none;
  font-size: 0.48rem;
  line-height: 1.1;
}

.record-periodic-grid.is-expanded,
.details-element-panel.is-expanded .record-periodic-grid {
  grid-template-columns: repeat(18, minmax(34px, 1fr));
  gap: 6px;
}

.record-periodic-grid.is-expanded .record-periodic-element,
.details-element-panel.is-expanded .record-periodic-element {
  min-height: 56px;
  padding: 6px 4px;
}

.record-periodic-grid.is-expanded .record-periodic-element-name,
.details-element-panel.is-expanded .record-periodic-element-name {
  display: block;
}

.record-chemical-identifiers-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.record-chemical-identifiers-panel h5 {
  margin: 0 0 10px;
  font-size: 0.98rem;
  font-weight: 800;
}

.record-chemical-identifier-group {
  display: grid;
  gap: 8px;
}

.record-chemical-identifier-group + .record-chemical-identifier-group {
  margin-top: 14px;
}

.record-chemical-identifier-group h6 {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
}

.record-chemical-identifiers-empty,
.record-chemical-identifiers-missing {
  color: var(--muted);
  font-size: 0.9rem;
}

.record-chemical-identifier-rows {
  display: grid;
  gap: 10px;
}

.record-chemical-identifier-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.45fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfcfe;
}

.record-chemical-identifier-main {
  display: grid;
  gap: 4px;
}

.record-chemical-identifier-main span {
  color: var(--muted);
  font-size: 0.84rem;
}

.record-chemical-identifier-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.record-chemical-identifier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.82rem;
}

.record-chemical-identifier-chip span {
  color: var(--muted);
}

.record-chemical-identifier-chip strong,
.record-chemical-identifier-chip a {
  overflow-wrap: anywhere;
  color: var(--accent);
}

.details-citation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.details-citation-links a {
  color: var(--accent);
  font-weight: 600;
  word-break: break-word;
}

.details-citation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compare-toggle-button.is-active {
  background: var(--accentSoft);
  color: var(--accent);
  border: 1px solid var(--accent);
}

.compare-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.compare-panel-header h2 {
  margin: 0;
}

.compare-panel-note {
  margin: 6px 0 0;
  color: var(--muted);
}

.compare-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compare-count {
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.compare-status {
  min-height: 1.4em;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

.compare-status.is-success {
  color: #0f7a32;
}

.compare-status.is-warning {
  color: #b54708;
}

.compare-launch-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.compare-launch-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.compare-page-back-row {
  margin-top: 16px;
}

.compare-page-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.compare-page-note {
  margin: 0;
  color: var(--muted);
}

.compare-page-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.compare-sort-menu {
  position: relative;
}

.compare-sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.compare-sort-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #dce9ff;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.compare-sort-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: translateY(1px);
}

.compare-sort-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 12;
  width: min(360px, calc(100vw - 56px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
}

.compare-sort-dropdown[hidden] {
  display: none;
}

.compare-sort-dropdown-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
}

.compare-sort-help {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.compare-sort-clear {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.compare-sort-options {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
}

.compare-sort-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  align-items: center;
}

.compare-sort-option-toggle,
.compare-sort-direction {
  border-radius: 10px;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.compare-sort-option-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.compare-sort-option-toggle:hover,
.compare-sort-option-toggle:focus-visible {
  border-color: #d9e3f4;
  background: #f7fbff;
}

.compare-sort-option-toggle.is-selected {
  border-color: #c8daf7;
  background: #eef4ff;
}

.compare-sort-order-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.compare-sort-order-badge.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.compare-sort-option-label {
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.25;
}

.compare-sort-direction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d6dfef;
  background: #f8fbff;
  color: var(--accent);
  font-size: 0.94rem;
  font-weight: 800;
  line-height: 1;
}

.compare-sort-direction:hover,
.compare-sort-direction:focus-visible {
  border-color: #c2d4f4;
  background: #eef4ff;
}

.compare-sort-direction.is-selected {
  border-color: var(--accent);
  background: #dce9ff;
}

.compare-empty-state {
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: #fafbfc;
  color: var(--muted);
}

.compare-empty-state p {
  margin: 0;
}

.compare-empty-state p + p {
  margin-top: 8px;
}

.compare-table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.compare-table {
  width: max(100%, 880px);
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: var(--surface);
}

.compare-table th,
.compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  vertical-align: top;
  text-align: left;
}

.compare-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f9fbff;
}

.compare-table tr:last-child th,
.compare-table tr:last-child td {
  border-bottom: none;
}

.compare-table tr th:last-child,
.compare-table tr td:last-child {
  border-right: none;
}

.compare-axis-corner,
.compare-row-label {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 220px;
  min-width: 220px;
  background: #f9fbff;
}

.compare-axis-corner {
  vertical-align: middle;
  font-size: 0.94rem;
  font-weight: 700;
}

.compare-row-label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.compare-column-cell {
  min-width: 220px;
  width: 220px;
  cursor: grab;
}

.compare-column-cell.is-dragging {
  opacity: 0.58;
}

.compare-column-cell.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -4px;
}

.compare-column-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 124px;
}

.compare-column-badge {
  min-height: 24px;
}

.compare-badge-stack {
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.compare-category-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
}

.compare-category-chip svg,
.compare-category-chip .symbol-icon {
  display: block;
  flex-shrink: 0;
}

.compare-category-chip span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compare-certification-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

.compare-certification-chip--certified {
  background: #e8f8ec;
  border-color: #bde2c6;
  color: #15803d;
}

.compare-certification-chip--verified {
  background: #e8f7fb;
  border-color: #b7deeb;
  color: #0f766e;
}

.compare-certification-chip--pending {
  background: #fff7e3;
  border-color: #f3dca0;
  color: #b45309;
}

.compare-certification-chip--reported {
  background: #fff1e8;
  border-color: #f6cdb7;
  color: #c2410c;
}

.compare-certification-chip--not-certified {
  background: #f4f6f8;
  border-color: #d4dce6;
  color: #5b6470;
}

.compare-remove-button {
  align-self: flex-start;
  padding: 7px 10px;
  background: #eef4ff;
  color: var(--accent);
  border: 1px solid #cad9f7;
}

.compare-column-institution {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.compare-column-identifier {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.compare-column-meta {
  font-size: 0.88rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.compare-cell-link {
  color: var(--accent);
  word-break: break-word;
}

.compare-empty-value {
  color: var(--muted);
  font-style: italic;
}

.note {
  color: var(--muted);
}

@media (max-width: 900px) {
  .wrap {
    width: min(1600px, calc(100% - 32px));
  }

  .chart-canvas-wrap {
    aspect-ratio: auto;
    min-height: var(--chart-mobile-min-height);
  }

  .search-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .button-group {
    width: 100%;
    flex-wrap: wrap;
  }

  .button-group button {
    flex: 1;
    min-width: 150px;
  }

  .record-export-menu {
    width: 100%;
  }

  .record-export-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .record-export-dropdown {
    left: 0;
    right: auto;
    width: min(320px, 100%);
  }

  .export-resolution-options {
    grid-template-columns: 1fr;
  }

  .filters-section {
    grid-template-columns: 1fr;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .details-secondary-layout {
    grid-template-columns: 1fr;
  }

  .compare-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-panel-actions {
    justify-content: flex-start;
  }

  .compare-page-controls {
    flex-direction: column;
    align-items: flex-start;
  }

  .compare-sort-dropdown {
    width: min(360px, calc(100vw - 48px));
  }

  .submission-grid {
    grid-template-columns: 1fr;
  }

  .submission-mode-card,
  .submission-mode-options {
    grid-template-columns: 1fr;
  }

  .chemical-identifier-header,
  .chemical-identifier-row-header,
  .chemical-identifier-key-row {
    flex-direction: column;
    align-items: stretch;
  }

  .chemical-identifier-header > .copy-button {
    width: 100%;
  }

  .chemical-identifier-key-row {
    grid-template-columns: 1fr;
  }

  .chemical-identifier-fields {
    grid-template-columns: 1fr;
  }

  .lca-chart-layout {
    grid-template-columns: 1fr;
  }

  .lca-legend {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  }

  .chemical-identifier-badge {
    width: max-content;
  }

  .record-chemical-identifier-row {
    grid-template-columns: 1fr;
  }

  .submission-field-wide {
    grid-column: auto;
  }
}

@media (max-width: 600px) {
  .header-row {
    flex-direction: column;
    align-items: flex-start;
  }

  nav {
    width: 100%;
  }

  .accessibility-menu {
    width: 100%;
  }

  .accessibility-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .accessibility-dropdown {
    left: 0;
    right: auto;
    width: min(320px, 100%);
  }

  .search-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .filters-section {
    grid-template-columns: 1fr;
  }

  .filter-chip-row {
    position: sticky;
    top: 10px;
    z-index: 6;
    padding-top: 4px;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.96), rgba(245, 247, 251, 0.78));
    backdrop-filter: blur(6px);
  }

  .graph-state-banner {
    max-width: calc(100% - 64px);
  }

  .chart-toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .chart-toolbar-left {
    flex: 1;
  }

  .chart-actions {
    width: 100%;
  }

  .chart-symbol-size-group {
    max-width: 100%;
  }

  .pv-cell-developments-chart-header {
    flex-direction: column;
  }

  .pv-cell-developments-chart-controls {
    width: 100%;
    justify-content: flex-start;
  }

  .chart-view-toggle,
  .chart-selection-clear {
    min-width: 112px;
  }

  .details-header {
    flex-direction: column;
  }

  .details-provenance-panel {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .compare-sort-menu {
    width: 100%;
  }

  .compare-sort-trigger {
    width: 100%;
    justify-content: space-between;
  }

  .compare-sort-dropdown {
    width: min(100%, calc(100vw - 32px));
  }

  .compare-page-back-row {
    position: sticky;
    top: 12px;
    z-index: 4;
    justify-content: flex-start;
    padding: 10px 0 0;
    background: linear-gradient(180deg, rgba(245, 247, 251, 0.96), rgba(245, 247, 251, 0.82));
    backdrop-filter: blur(6px);
  }

  .compare-page-back-row .compare-launch-link {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }
}

.paper-analyzer-page {
  display: grid;
  gap: 18px;
}

.paper-analyzer-page > .card {
  margin-bottom: 0;
}

.embedded-analyzer .site-header {
  display: none;
}

.embedded-analyzer .paper-analyzer-page {
  padding-top: 0;
}

.paper-analyzer-hero {
  background:
    radial-gradient(circle at top right, rgba(31, 111, 235, 0.14), transparent 38%),
    linear-gradient(135deg, rgba(15, 122, 50, 0.06), rgba(31, 111, 235, 0.06));
}

.paper-analyzer-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 122, 50, 0.1);
  color: #0f7a32;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.paper-analyzer-hero h2 {
  margin: 0 0 12px;
  font-size: clamp(1.5rem, 2vw, 2.1rem);
  line-height: 1.2;
}

.paper-analyzer-hero p {
  margin: 0;
  color: var(--muted);
}

.paper-analyzer-pill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.paper-analyzer-pill {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid rgba(31, 111, 235, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
}

.paper-analyzer-pill strong {
  color: var(--text);
}

.paper-analyzer-pill span {
  color: var(--muted);
  font-size: 0.92rem;
}

.paper-analyzer-hero-actions {
  display: flex;
  margin-top: 12px;
}

.paper-analyzer-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.paper-analyzer-section-heading h2,
.paper-analyzer-group-header h3 {
  margin: 0 0 6px;
}

.paper-analyzer-section-heading p,
.paper-analyzer-group-header p {
  margin: 0;
  color: var(--muted);
}

.paper-analyzer-queue-badge {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accentSoft);
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 700;
}

.paper-analyzer-upload-grid,
.paper-analyzer-workspace-grid,
.paper-analyzer-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.paper-analyzer-workspace-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.paper-analyzer-upload-panel,
.paper-analyzer-status-panel,
.paper-analyzer-viewer-card,
.paper-analyzer-mini-card,
.paper-analyzer-group,
.paper-analyzer-acceptance-item {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcfe;
}

.paper-analyzer-stage-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.paper-analyzer-stage-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.paper-analyzer-stage-list li strong,
.paper-analyzer-mini-card strong,
.paper-analyzer-viewer-header strong {
  display: block;
  margin-bottom: 4px;
}

.paper-analyzer-stage-list li span,
.paper-analyzer-mini-card p {
  color: var(--muted);
  font-size: 0.92rem;
}

.paper-analyzer-stage-list li.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

.paper-analyzer-stage-list li.is-complete {
  border-color: rgba(15, 122, 50, 0.25);
  background: rgba(15, 122, 50, 0.06);
}

.paper-analyzer-stage-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accentSoft);
  color: var(--accent);
  font-weight: 700;
}

.paper-analyzer-status-callout,
.paper-analyzer-inline-summary,
.paper-analyzer-alert {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #f4f8ff;
  color: var(--text);
}

.paper-analyzer-inline-summary {
  border: 1px solid rgba(31, 111, 235, 0.14);
}

.paper-analyzer-progress {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(31, 111, 235, 0.14);
  border-radius: 12px;
  background: #fbfcfe;
}

.paper-analyzer-progress-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.paper-analyzer-progress-header strong {
  font-size: 0.95rem;
}

.paper-analyzer-progress-header span {
  color: var(--muted);
  font-size: 0.88rem;
  text-align: right;
}

.paper-analyzer-progress-track {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(31, 111, 235, 0.1);
}

.paper-analyzer-progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1f6feb 0%, #4fa3ff 100%);
  transition: width 180ms ease;
}

.paper-analyzer-progress-detail {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.paper-analyzer-summary-title {
  margin-bottom: 6px;
  font-weight: 700;
}

.paper-analyzer-result-card {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.paper-analyzer-result-card > div,
.paper-analyzer-viewer-meta > div {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.paper-analyzer-result-card strong,
.paper-analyzer-viewer-meta strong {
  font-size: 0.88rem;
  flex: 0 0 140px;
}

.paper-analyzer-result-card span,
.paper-analyzer-viewer-meta span {
  flex: 1 1 220px;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.paper-analyzer-workspace {
  scroll-margin-top: 24px;
}

.paper-analyzer-workspace.is-collapsed {
  padding-bottom: 18px;
}

.paper-analyzer-workspace-heading {
  align-items: center;
}

.paper-analyzer-workspace-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.paper-analyzer-workspace-toggle:hover,
.paper-analyzer-workspace-toggle:focus-visible {
  color: var(--accent);
}

.paper-analyzer-workspace-title {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.2;
}

.paper-analyzer-workspace-toggle-icon {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
}

.paper-analyzer-workspace-body {
  display: block;
}

.paper-analyzer-workspace-body[hidden] {
  display: none;
}

.paper-analyzer-alert-stack {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.paper-analyzer-alert {
  margin-top: 0;
  border: 1px solid rgba(31, 111, 235, 0.14);
}

.paper-analyzer-alert-alt {
  background: rgba(229, 85, 42, 0.08);
  border-color: rgba(229, 85, 42, 0.18);
}

.paper-analyzer-evidence-column,
.paper-analyzer-data-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  width: 100%;
  justify-self: stretch;
}

.paper-analyzer-evidence-column {
  align-self: stretch;
  justify-content: flex-start;
  min-height: 0;
  overflow: visible;
  padding-right: 0;
  box-sizing: border-box;
}

.paper-analyzer-viewer-sticky {
  position: sticky;
  top: var(--paper-analyzer-sticky-offset, 72px);
  width: 100%;
  max-height: calc(100vh - var(--paper-analyzer-sticky-offset, 72px) - 18px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0;
  z-index: 2;
  align-self: start;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
  box-sizing: border-box;
}

.embedded-analyzer .paper-analyzer-viewer-sticky {
  --paper-analyzer-sticky-offset: 64px;
}

.paper-analyzer-viewer-card {
  position: static;
  width: 100%;
  min-height: 0;
  max-height: none;
  overflow: visible;
  padding-right: 0;
  box-sizing: border-box;
}

.paper-analyzer-viewer-primary {
  position: static;
  display: grid;
  gap: 0;
  margin-bottom: 18px;
  background: var(--surface);
}

.paper-analyzer-viewer-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.paper-analyzer-viewer-header span {
  color: var(--muted);
  font-size: 0.92rem;
}

.paper-analyzer-method-tag {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--accentSoft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.paper-analyzer-pdf-frame {
  width: calc(100% - 28px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
}

.paper-analyzer-pdf-canvas {
  position: relative;
  min-height: 0;
  box-sizing: border-box;
  border-radius: 10px;
  background: #eef2f8;
  overflow: auto;
  scrollbar-gutter: stable;
}

.paper-analyzer-pdf-viewer {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 16px 24px;
  min-height: 0;
}

.paper-analyzer-pdf-page {
  --scale-factor: 1;
  --user-unit: 1;
  --total-scale-factor: 1;
  --scale-round-x: 1px;
  --scale-round-y: 1px;
  position: relative;
  flex: 0 0 auto;
  margin: 0 auto;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
}

.paper-analyzer-pdf-canvas-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.paper-analyzer-pdf-surface {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
}

.paper-analyzer-pdf-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(24, 32, 42, 0.02), rgba(24, 32, 42, 0.02)) 0 0 / 100% 100%,
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(219, 227, 236, 0.55) 27px, rgba(219, 227, 236, 0.55) 28px);
  z-index: 1;
}

.paper-analyzer-pdf-empty[hidden],
.paper-analyzer-pdf-viewer[hidden],
.paper-analyzer-overlay-layer[hidden],
.paper-analyzer-highlight-box[hidden],
.paper-analyzer-focus-stage[hidden],
.paper-analyzer-focus-overlay[hidden],
.paper-analyzer-focus-highlight[hidden],
.paper-analyzer-focus-canvas[hidden],
.paper-analyzer-focus-empty[hidden] {
  display: none !important;
}

.paper-analyzer-text-layer {
  --min-font-size: 1;
  --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv: calc(1 / var(--min-font-size));
  position: absolute;
  inset: 0;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  text-align: initial;
  text-size-adjust: none;
  transform-origin: 0 0;
  color-scheme: only light;
  forced-color-adjust: none;
  z-index: 2;
}

.paper-analyzer-text-layer :is(span, br) {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.paper-analyzer-text-layer > :not(.markedContent),
.paper-analyzer-text-layer .markedContent span:not(.markedContent) {
  z-index: 1;
  --font-height: 0;
  font-size: calc(var(--text-scale-factor) * var(--font-height));
  --scale-x: 1;
  --rotate: 0deg;
  transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv, 1));
}

.paper-analyzer-text-layer .markedContent {
  display: contents;
}

.paper-analyzer-text-layer .endOfContent {
  position: absolute;
  inset: 100% 0 0;
  display: block;
  user-select: none;
}

.paper-analyzer-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.paper-analyzer-highlight-box {
  position: absolute;
  z-index: 2;
  border: 3px solid #e1552a;
  border-radius: 10px;
  background: rgba(225, 85, 42, 0.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.paper-analyzer-highlight-box.is-emphasized {
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.18), 0 0 0 6px rgba(255, 255, 255, 0.82);
  transform: scale(1.01);
}

.paper-analyzer-pdf-toolbar {
  display: flex;
  justify-content: flex-end;
  width: calc(100% - 28px);
  margin: 12px auto 0;
}

.paper-analyzer-pdf-link {
  text-decoration: none;
}

.paper-analyzer-focus-card {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.paper-analyzer-details-panel {
  width: calc(100% - 28px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
  overflow: hidden;
}

.paper-analyzer-collapsible-card {
  padding: 0;
  overflow: hidden;
}

.paper-analyzer-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.paper-analyzer-details-summary::-webkit-details-marker {
  display: none;
}

.paper-analyzer-details-summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.1rem;
  color: var(--accent);
}

.paper-analyzer-details-panel[open] .paper-analyzer-details-summary::after,
.paper-analyzer-collapsible-card[open] .paper-analyzer-details-summary::after {
  content: "−";
}

.paper-analyzer-details-body {
  padding: 0 16px 16px;
}

.paper-analyzer-details-panel[open] .paper-analyzer-details-summary::after,
.paper-analyzer-collapsible-card[open] .paper-analyzer-details-summary::after {
  content: "-";
}

.paper-analyzer-collapsible-card .paper-analyzer-details-summary {
  padding: 18px;
}

.paper-analyzer-collapsible-card .paper-analyzer-details-body {
  padding: 0 18px 18px;
}

.paper-analyzer-details-title {
  font-size: 1.2rem;
  line-height: 1.2;
}

.paper-analyzer-details-body .paper-analyzer-focus-card {
  margin-top: 0;
}

.paper-analyzer-focus-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}

.paper-analyzer-focus-header span {
  color: var(--muted);
  font-size: 0.84rem;
  text-align: right;
}

.paper-analyzer-focus-frame {
  position: relative;
  width: calc(100% - 28px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-height: 220px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #f6f8fb);
  overflow: hidden;
}

.paper-analyzer-focus-stage {
  position: relative;
  margin: 0 auto;
}

.paper-analyzer-focus-canvas {
  display: block;
  max-width: 100%;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.paper-analyzer-focus-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.paper-analyzer-focus-highlight {
  position: absolute;
  border: 3px solid #e1552a;
  border-radius: 10px;
  background: rgba(225, 85, 42, 0.12);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88);
}

.paper-analyzer-focus-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  color: var(--muted);
  background:
    linear-gradient(180deg, rgba(24, 32, 42, 0.02), rgba(24, 32, 42, 0.02)) 0 0 / 100% 100%,
    repeating-linear-gradient(180deg, transparent, transparent 27px, rgba(219, 227, 236, 0.42) 27px, rgba(219, 227, 236, 0.42) 28px);
}

.paper-analyzer-viewer-meta {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.paper-analyzer-assessment-card {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(31, 111, 235, 0.06), rgba(31, 111, 235, 0.02)),
    var(--surface);
}

.paper-analyzer-assessment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.paper-analyzer-assessment-header p,
.paper-analyzer-assessment-notes {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.paper-analyzer-assessment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.paper-analyzer-assessment-metric {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(31, 111, 235, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.paper-analyzer-assessment-metric strong {
  font-size: 0.82rem;
}

.paper-analyzer-assessment-metric span {
  font-size: 1rem;
  font-weight: 700;
}

.paper-analyzer-side-by-side {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.paper-analyzer-group-stack {
  display: grid;
  gap: 14px;
}

.paper-analyzer-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}

.paper-analyzer-field-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
}

.paper-analyzer-field-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.12);
}

.paper-analyzer-field-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}

.paper-analyzer-field-title-stack {
  display: grid;
  gap: 8px;
}

.paper-analyzer-confidence {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.paper-analyzer-field-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  gap: 10px;
}

.paper-analyzer-field-inputs input {
  width: 100%;
}

.paper-analyzer-field-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.paper-analyzer-field-meta span,
.paper-analyzer-field-alt {
  font-size: 0.82rem;
  color: var(--muted);
}

.paper-analyzer-field-note {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.45;
}

.paper-analyzer-field-note,
.paper-analyzer-field-alt {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.paper-analyzer-verdict-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(31, 111, 235, 0.1);
  color: var(--accent);
}

.paper-analyzer-verdict-chip.is-strong {
  background: rgba(18, 138, 72, 0.12);
  color: #0f7a40;
}

.paper-analyzer-verdict-chip.is-moderate {
  background: rgba(197, 116, 8, 0.14);
  color: #8e5200;
}

.paper-analyzer-verdict-chip.is-weak,
.paper-analyzer-verdict-chip.is-manual {
  background: rgba(225, 85, 42, 0.12);
  color: #b14622;
}

.paper-analyzer-evidence-button {
  justify-self: start;
}

.paper-analyzer-field-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.paper-analyzer-field-detail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
}

.paper-analyzer-field-detail-toggle[aria-expanded="true"] {
  color: var(--accent);
}

.paper-analyzer-field-details {
  display: grid;
  gap: 10px;
}

.paper-analyzer-field-details[hidden] {
  display: none !important;
}

.paper-analyzer-debug-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface);
  margin-bottom: 16px;
}

.paper-analyzer-debug-panel[hidden] {
  display: none;
}

.paper-analyzer-debug-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin: 12px 0;
}

.paper-analyzer-benchmark-input {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--muted);
}

.paper-analyzer-benchmark-input input {
  max-width: 260px;
}

.paper-analyzer-debug-json {
  width: 100%;
  max-height: 280px;
  overflow: auto;
  margin: 10px 0 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #f7f9fb;
  color: var(--text);
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.paper-analyzer-timeline {
  display: grid;
  gap: 12px;
}

.paper-analyzer-timeline-step {
  padding: 14px;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: #fbfcfe;
}

.paper-analyzer-timeline-step strong {
  display: block;
  margin-bottom: 6px;
}

.paper-analyzer-timeline-step p,
.paper-analyzer-logic-note,
.paper-analyzer-ordered-list li {
  margin: 0;
  color: var(--muted);
}

.paper-analyzer-ordered-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
}

.paper-analyzer-logic-note {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(15, 122, 50, 0.08);
  color: #0f7a32;
}

.paper-analyzer-terminology-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.paper-analyzer-terminology-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fbfcfe;
}

.paper-analyzer-terminology-card > strong {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(31, 111, 235, 0.1);
  color: var(--accent);
}

.paper-analyzer-terminology-stack {
  display: grid;
  gap: 12px;
}

.paper-analyzer-terminology-entry {
  padding-top: 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.paper-analyzer-terminology-entry:first-child {
  padding-top: 0;
  border-top: 0;
}

.paper-analyzer-terminology-entry h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.paper-analyzer-terminology-entry p {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.9rem;
}

.paper-analyzer-modal {
  max-width: 760px;
}

.paper-analyzer-how-modal {
  width: min(94vw, 1180px);
  max-width: 1180px;
  max-height: 92vh;
}

.paper-analyzer-how-modal-body {
  max-height: calc(92vh - 78px);
  gap: 18px;
}

.paper-analyzer-how-modal-body .paper-analyzer-two-column {
  align-items: start;
}

.paper-analyzer-how-modal-body .card {
  margin-bottom: 0;
}

.paper-analyzer-modal-message {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
}

.paper-analyzer-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.paper-analyzer-match-stack {
  display: grid;
  gap: 10px;
}

.paper-analyzer-match-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fbfcfe;
}

.paper-analyzer-match-card span {
  color: var(--muted);
  font-size: 0.9rem;
}

.paper-analyzer-acceptance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.paper-analyzer-acceptance-item strong {
  display: inline-block;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 122, 50, 0.1);
  color: #0f7a32;
  font-size: 0.82rem;
}

.paper-analyzer-acceptance-item p {
  margin: 0;
  color: var(--text);
}

@media (max-width: 900px) {
  .paper-analyzer-upload-grid,
  .paper-analyzer-workspace-grid,
  .paper-analyzer-two-column,
  .paper-analyzer-side-by-side {
    grid-template-columns: 1fr;
  }

  .paper-analyzer-section-heading {
    flex-direction: column;
  }

  .paper-analyzer-evidence-column,
  .paper-analyzer-viewer-sticky {
    position: static;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  .paper-analyzer-pill-grid {
    grid-template-columns: 1fr;
  }

  .paper-analyzer-field-inputs {
    grid-template-columns: 1fr;
  }

  .paper-analyzer-result-card > div,
  .paper-analyzer-viewer-meta > div,
  .paper-analyzer-focus-header {
    flex-direction: column;
  }

  .paper-analyzer-pdf-canvas {
    min-height: 0;
    padding-right: 0;
  }

  .paper-analyzer-pdf-viewer {
    min-height: 0;
  }

}

/* Evidence-backed post-2020 PV-module milestones */
.pv-modern-module-svg {
  background:
    radial-gradient(circle at 12% 15%, rgb(255 245 194 / 48%), transparent 19%),
    linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.pv-modern-svg-title {
  fill: #101a27;
  font-size: 16px;
  font-weight: 820;
}

.pv-modern-svg-help {
  fill: #1e63df;
  font-size: 10px;
  font-weight: 760;
}

.pv-modern-svg-scope {
  fill: #4f5f72;
  font-size: 9px;
}

.pv-modern-section-title {
  fill: #164f96;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0.7px;
}

.pv-modern-sun circle {
  fill: #f9cf55;
  stroke: #a86f00;
  stroke-width: 2.4;
}

.pv-modern-sun path {
  fill: none;
  stroke: #c27d00;
  stroke-linecap: round;
  stroke-width: 3.6;
}

.pv-modern-sun text {
  fill: #17212b;
  font-size: 12px;
  font-weight: 780;
}

.pv-modern-rays path {
  fill: none;
  stroke: #c98308;
  stroke-linecap: round;
  stroke-width: 3;
}

.pv-modern-rays text {
  fill: #a66500;
  font-size: 9px;
  font-weight: 720;
}

.pv-modern-layer {
  filter: drop-shadow(0 2px 1px rgb(31 45 61 / 14%));
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.pv-modern-kind-glass {
  fill: rgb(202 241 249 / 86%);
  stroke: #4098b2;
}

.pv-modern-kind-encapsulant {
  fill: #edf6cf;
  stroke: #8ca744;
}

.pv-modern-kind-barrier {
  fill: #dff2ee;
  stroke: #4c9d8e;
}

.pv-modern-kind-silicon,
.pv-modern-kind-rectcells {
  fill: #2d64b9;
  stroke: #0c356f;
}

.pv-modern-kind-abcfront {
  fill: #182e64;
  stroke: #07152f;
}

.pv-modern-kind-tandemfield {
  fill: #784f9d;
  stroke: #452664;
}

.pv-modern-kind-matrixfield {
  fill: #5e4b9e;
  stroke: #342769;
}

.pv-modern-kind-backsheet {
  fill: #dde3e9;
  stroke: #6d7986;
}

.pv-modern-kind-frame {
  fill: #4c535d;
  stroke: #171c22;
}

.pv-modern-kind-tco {
  fill: #acdce7;
  stroke: #3b899a;
}

.pv-modern-kind-electron {
  fill: #cce1fa;
  stroke: #5d8bbb;
}

.pv-modern-kind-perovskite {
  fill: #b76579;
  stroke: #733346;
}

.pv-modern-kind-hole {
  fill: #efc779;
  stroke: #a8741c;
}

.pv-modern-kind-electrode {
  fill: #4e5560;
  stroke: #1f252e;
}

.pv-modern-layer-title {
  fill: #15202c;
  font-size: 10.5px;
  font-weight: 790;
  paint-order: stroke;
  stroke: rgb(255 255 255 / 86%);
  stroke-width: 2.4px;
}

.pv-modern-callout-line {
  fill: none;
  stroke: #728296;
  stroke-width: 1.2;
}

.pv-modern-callout {
  fill: #334255;
  font-size: 8.6px;
  font-weight: 680;
}

.pv-modern-detail-card {
  fill: #f8fbff;
  stroke: #b9cce1;
  stroke-width: 1.4;
}

.pv-modern-detail-title {
  fill: #142337;
  font-size: 10px;
  font-weight: 800;
}

.pv-modern-detail-sub {
  fill: #53667d;
  font-size: 7.8px;
}

.pv-modern-detail-mini {
  fill: #40536a;
  font-size: 7.5px;
  font-weight: 690;
}

.pv-modern-detail-layer {
  stroke: #506277;
  stroke-width: 0.8;
}

.pv-modern-detail-layer--top {
  fill: #bfe8f1;
}

.pv-modern-detail-layer--perovskite {
  fill: #c36d82;
}

.pv-modern-detail-layer--junction {
  fill: #e5d5ed;
}

.pv-modern-detail-layer--silicon {
  fill: #97b9eb;
}

.pv-modern-detail-layer--contact {
  fill: #4b535d;
}

.pv-modern-wire-cell {
  fill: #2e64b9;
  stroke: #15396f;
  stroke-width: 1.1;
}

.pv-modern-wire {
  fill: none;
  stroke: #d5e9ff;
  stroke-width: 2;
}

.pv-modern-abc-wafer {
  fill: #dcecff;
  stroke: #5d7fa9;
  stroke-width: 1.2;
}

.pv-modern-abc-comb {
  fill: none;
  stroke-width: 5;
}

.pv-modern-abc-comb--p {
  stroke: #cb7730;
}

.pv-modern-abc-comb--n {
  stroke: #3275d5;
}

.pv-modern-dimension-module {
  fill: #316bc0;
  stroke: #12396f;
  stroke-width: 1.6;
}

.pv-modern-dimension-line {
  fill: none;
  stroke: #2f4156;
  stroke-width: 1.2;
}

.pv-modern-scribe-field {
  fill: #b9687d;
  stroke: #6f3344;
  stroke-width: 1.2;
}

.pv-modern-scribe-lines {
  fill: none;
  stroke-width: 2;
}

.pv-modern-scribe-lines--p1 {
  stroke: #f6d05e;
}

.pv-modern-scribe-lines--p2 {
  stroke: #f5f8fc;
}

.pv-modern-scribe-lines--p3 {
  stroke: #2c70d7;
}

.pv-modern-matrix-brick {
  fill: #6e5bb0;
  stroke: #382a77;
  stroke-width: 1;
}

.pv-modern-matrix-route {
  fill: none;
  stroke: #efb332;
  stroke-width: 3;
}

.pv-modern-jbox {
  fill: #454f5c;
  stroke: #202832;
  stroke-width: 1.5;
}

.pv-modern-jbox-cable {
  fill: none;
  stroke: #202832;
  stroke-width: 2.5;
}

.pv-modern-generic-icon {
  fill: #e6edf5;
  stroke: #6b7e94;
  stroke-width: 1.2;
}

.pv-modern-generic-current {
  fill: none;
  stroke: #2f6fe8;
  stroke-width: 3;
}

.pv-modern-layer-control,
.pv-modern-detail-control {
  cursor: pointer;
  outline: none;
}

.pv-modern-layer-control:hover .pv-modern-layer,
.pv-modern-layer-control:focus .pv-modern-layer,
.pv-modern-detail-control:hover .pv-modern-detail-card,
.pv-modern-detail-control:focus .pv-modern-detail-card {
  filter: drop-shadow(0 0 6px rgb(25 98 210 / 45%));
  stroke: #1764d7;
  stroke-width: 2.5;
}

.pv-modern-layer-control:focus-visible .pv-modern-layer,
.pv-modern-detail-control:focus-visible .pv-modern-detail-card {
  outline: none;
  stroke: #0d59ce;
  stroke-dasharray: 5 3;
}

.pv-layer-dialog[data-active-layer^="topcon2021-"],
.pv-layer-dialog[data-active-layer^="abc2022-"],
.pv-layer-dialog[data-active-layer^="rect2023-"],
.pv-layer-dialog[data-active-layer^="tandem2024-"],
.pv-layer-dialog[data-active-layer^="perovskite2025-"],
.pv-layer-dialog[data-active-layer^="matrix2026-"] {
  width: min(1040px, calc(100vw - 32px));
}

@media (max-width: 780px) {
  .pv-modern-module-svg {
    min-width: 720px;
  }
}

/* PV Module Selector */
.pv-module-selector-page {
  max-width: 1440px;
}

.pv-module-selector-intro {
  padding: clamp(26px, 4vw, 54px);
  background:
    radial-gradient(circle at 92% 18%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 36%),
    var(--surface);
}

.pv-module-selector-eyebrow {
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pv-module-selector-intro h2 {
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 3.5rem);
  line-height: 1.05;
}

.pv-module-selector-intro > p:last-child {
  max-width: 850px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 1.06rem;
}

.pv-module-selector-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.pv-module-selector-section-heading h2 {
  margin: 0;
  font-size: 1.45rem;
}

.pv-module-selector-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 16px;
}

.pv-module-selector-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pv-module-selector-field--wide {
  grid-column: span 2;
}

.pv-module-selector-field label {
  color: var(--text);
  font-size: 0.88rem;
  font-weight: 750;
}

.pv-module-selector-field input,
.pv-module-selector-field select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.pv-module-selector-field input:focus,
.pv-module-selector-field select:focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
}

.pv-module-selector-field input::placeholder {
  color: var(--muted);
  opacity: 0.82;
}

.pv-module-selector-status {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 650;
}

.pv-module-selector-archive-link {
  flex: 0 0 auto;
  text-decoration: none;
}

.pv-module-selector-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.pv-module-selector-result {
  display: flex;
  min-width: 0;
  min-height: 100%;
  padding: 17px;
  flex-direction: column;
  border: 1px solid var(--border);
  border-top: 4px solid var(--selector-category-colour, var(--accent));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accentSoft));
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.pv-module-selector-result:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 9%, transparent);
}

.pv-module-selector-result.is-selected {
  border-color: var(--selector-category-colour, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--selector-category-colour, var(--accent)) 18%, transparent);
}

.pv-module-selector-result-header {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.pv-module-selector-symbol {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--selector-category-colour, var(--accent)) 40%, var(--border));
  border-radius: 50%;
  background: var(--surface);
}

.pv-module-selector-symbol svg {
  display: block;
  overflow: visible;
}

.pv-module-selector-result-identity {
  min-width: 0;
}

.pv-module-selector-result-category {
  margin: 0 0 2px;
  color: var(--selector-category-colour, var(--accent));
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.pv-module-selector-result h3 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1.04rem;
  line-height: 1.28;
}

.pv-module-selector-badges {
  display: flex;
  margin: 15px 0 14px;
  gap: 7px;
  flex-wrap: wrap;
}

.pv-module-selector-badges span {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--selector-category-colour, var(--accent)) 11%, var(--surface));
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 750;
}

.pv-module-selector-result-meta {
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  margin: 0 0 18px;
  gap: 7px 10px;
  font-size: 0.84rem;
}

.pv-module-selector-result-meta dt {
  color: var(--muted);
  font-weight: 650;
}

.pv-module-selector-result-meta dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.pv-module-selector-select {
  width: 100%;
  min-height: 42px;
  margin-top: auto;
  padding: 9px 12px;
  border: 1px solid var(--selector-category-colour, var(--accent));
  border-radius: 10px;
  background: transparent;
  color: var(--selector-category-colour, var(--accent));
  font-weight: 800;
  cursor: pointer;
}

.pv-module-selector-select:hover,
.pv-module-selector-select:focus-visible,
.pv-module-selector-select[aria-pressed="true"] {
  background: var(--selector-category-colour, var(--accent));
  color: #ffffff;
}

.pv-module-selector-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--selector-category-colour, var(--accent)) 24%, transparent);
  outline-offset: 2px;
}

.pv-module-selector-empty {
  margin: 0;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--muted);
  text-align: center;
}

.pv-module-selector-more-row {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.pv-module-selector-more-row:empty {
  display: none;
}

.pv-module-selector-detail {
  scroll-margin-top: 18px;
  border-top: 5px solid var(--selector-category-colour, var(--accent));
}

.pv-module-selector-detail-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}

.pv-module-selector-detail-heading h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.1;
}

.pv-module-selector-detail-institution {
  margin: 6px 0 0;
  color: var(--muted);
}

.pv-module-selector-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  gap: 10px;
}

.pv-module-selector-detail-fact {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 95%, var(--accentSoft));
}

.pv-module-selector-detail-fact dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.pv-module-selector-detail-fact dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.pv-module-selector-detail-copy {
  max-width: 1100px;
  margin-top: 20px;
}

.pv-module-selector-detail-copy h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.pv-module-selector-detail-copy p {
  margin: 0;
  color: var(--muted);
}

.pv-module-selector-detail-actions {
  display: flex;
  margin-top: 20px;
  gap: 10px;
  flex-wrap: wrap;
}

.pv-module-selector-detail-actions a {
  text-decoration: none;
}

@media (max-width: 1050px) {
  .pv-module-selector-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pv-module-selector-results {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pv-module-selector-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .pv-module-selector-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .pv-module-selector-section-heading > .copy-button {
    width: 100%;
    text-align: center;
  }

  .pv-module-selector-filter-grid,
  .pv-module-selector-results,
  .pv-module-selector-detail-facts {
    grid-template-columns: 1fr;
  }

  .pv-module-selector-field--wide {
    grid-column: auto;
  }
}

/* Application-led PV technology selector */
.pv-technology-selector-layout {
  display: grid;
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.pv-technology-selector-layout > *,
.pv-technology-result-heading > *,
.pv-technology-summary > *,
.pv-technology-chart-wrap > *,
.pv-technology-shortlist-heading > * {
  min-width: 0;
}

.pv-technology-filter-button-label,
.pv-technology-filter-button-note,
.pv-technology-summary,
.pv-technology-match-reason,
.pv-technology-chart-key,
.pv-technology-pros-cons,
.pv-technology-shortlist-card,
.pv-technology-shortlist-meta,
.pv-technology-method,
.pv-technology-source-links a {
  overflow-wrap: anywhere;
  white-space: normal;
}

.pv-technology-filter-panel {
  align-self: start;
}

.pv-technology-filter-heading h2,
.pv-technology-result-heading h2,
.pv-technology-method h2 {
  margin: 0;
}

.pv-technology-filter-heading > p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.pv-technology-filter-group {
  min-width: 0;
  margin: 20px 0 0;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--border);
}

.pv-technology-filter-group legend {
  display: flex;
  padding: 0;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-size: 0.94rem;
  font-weight: 800;
}

.pv-technology-filter-group legend span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--accentSoft);
  color: var(--accent);
  font-size: 0.75rem;
}

.pv-technology-filter-help {
  margin: 7px 0 10px;
  color: var(--muted);
  font-size: 0.8rem;
}

.pv-technology-filter-buttons {
  display: grid;
  margin-top: 12px;
  gap: 8px;
}

.pv-technology-filter-buttons--compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pv-technology-filter-button {
  display: flex;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.pv-technology-filter-button:hover,
.pv-technology-filter-button:focus-visible {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.pv-technology-filter-button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accentSoft);
  color: var(--accent);
}

.pv-technology-filter-button[aria-pressed="true"]::after {
  content: "Selected";
  margin-top: 4px;
  color: currentColor;
  font-size: 0.67rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pv-technology-filter-button-label {
  font-size: 0.84rem;
  font-weight: 780;
  line-height: 1.2;
}

.pv-technology-filter-button-note {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.25;
}

.pv-technology-location-group {
  overflow: visible;
}

.pv-technology-globe-wrap {
  display: grid;
  margin-top: 12px;
  place-items: center;
}

.pv-technology-globe {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(220px, 88%);
  aspect-ratio: 1;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 3px solid color-mix(in srgb, var(--accent) 60%, #ffffff);
  border-radius: 50%;
  background: #02070d url("../assets/pv-selector-earth-eastern-hemisphere-v2.jpg") center / cover no-repeat;
  box-shadow:
    inset -18px -12px 28px rgba(0, 27, 68, 0.36),
    inset 10px 8px 20px rgba(255, 255, 255, 0.2),
    0 10px 24px rgba(5, 60, 110, 0.22);
}

.pv-technology-globe::after {
  position: absolute;
  z-index: 1;
  inset: 6% 27%;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(5, 64, 112, 0.12);
  content: "";
  pointer-events: none;
}

.pv-technology-location-band {
  position: relative;
  z-index: 2;
  display: grid;
  min-width: 0;
  padding: 4px 14px;
  place-items: center;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42);
  background: rgba(7, 71, 132, 0.08);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.025em;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 28, 65, 0.95);
  white-space: normal;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.pv-technology-location-band:last-child {
  border-bottom: 0;
}

.pv-technology-location-band:hover,
.pv-technology-location-band:focus-visible {
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.72);
}

.pv-technology-location-band[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 42%, rgba(3, 39, 85, 0.28));
  box-shadow: inset 0 0 0 3px #ffffff;
}

.pv-technology-location-band[aria-pressed="true"] span::after {
  content: " · Selected";
  font-size: 0.61rem;
}

.pv-technology-location-summary {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
}

.pv-technology-location-caveat {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.pv-technology-location-credit {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.64rem;
  line-height: 1.35;
}

.pv-technology-location-credit a {
  color: inherit;
}

.pv-technology-reset {
  width: 100%;
  margin-top: 20px;
}

.pv-technology-output-panel {
  min-width: 0;
  border-top: 5px solid var(--technology-colour, var(--accent));
}

.pv-technology-result-heading,
.pv-technology-shortlist-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.pv-technology-result-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.pv-technology-fit-score {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--technology-colour, var(--accent)) 42%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--technology-colour, var(--accent)) 10%, var(--surface));
  color: var(--technology-colour, var(--accent));
  font-size: 0.84rem;
  font-weight: 850;
}

.pv-technology-compare-all {
  max-width: 230px;
  white-space: normal;
  line-height: 1.25;
}

.pv-technology-compare-all[aria-pressed="true"] {
  border-color: var(--technology-colour, var(--accent));
  background: var(--technology-colour, var(--accent));
  color: #ffffff;
}

.pv-technology-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.42fr);
  align-items: end;
  margin-top: 18px;
  padding: 18px;
  gap: 18px;
  border: 1px solid var(--border);
  border-left: 5px solid var(--technology-colour, var(--accent));
  border-radius: 12px;
  background: color-mix(in srgb, var(--technology-colour, var(--accent)) 7%, var(--surface));
}

.pv-technology-readiness {
  margin: 0 0 4px;
  color: var(--technology-colour, var(--accent));
  font-size: 0.73rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.pv-technology-summary h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.1;
}

.pv-technology-summary > div > p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
}

.pv-technology-match-reason {
  margin: 0;
  padding: 12px;
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.pv-technology-chart-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.pv-technology-radar {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 570px;
  overflow: hidden;
}

.pv-technology-radar-stage {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
}

.pv-technology-radar-hover {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 3;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  transform: translateX(-50%);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 850;
  overflow-wrap: anywhere;
  text-align: center;
  pointer-events: none;
}

.pv-radar-grid {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 82%, var(--muted));
  stroke-width: 1;
}

.pv-radar-grid--outer {
  stroke-width: 1.5;
}

.pv-radar-axis {
  stroke: var(--border);
  stroke-width: 1;
}

.pv-radar-label {
  fill: var(--text);
  font-family: var(--font-family-base);
  font-size: 14px;
  font-weight: 750;
}

.pv-radar-data {
  fill: var(--radar-series-colour, var(--technology-colour, var(--accent)));
  stroke: var(--radar-series-colour, var(--technology-colour, var(--accent)));
  stroke-linejoin: round;
  transition: fill-opacity 0.12s ease, stroke-opacity 0.12s ease, stroke-width 0.12s ease, filter 0.12s ease;
  pointer-events: stroke;
  cursor: pointer;
}

.pv-radar-data--selected {
  fill-opacity: 0.18;
  stroke-width: 3;
}

.pv-radar-data--overlay {
  fill-opacity: 0.035;
  stroke-width: 2;
}

.pv-radar-data.is-dimmed {
  fill-opacity: 0.005;
  stroke-opacity: 0.12;
  stroke-width: 1;
}

.pv-radar-data.is-hovered {
  fill-opacity: 0.22;
  stroke-opacity: 1;
  stroke-width: 5;
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--radar-series-colour, var(--accent)) 38%, transparent));
}

.pv-radar-data:focus-visible {
  outline: none;
  stroke-width: 5;
  stroke-dasharray: 7 3;
}

.pv-radar-marker {
  fill: var(--surface);
  stroke: var(--radar-series-colour, var(--technology-colour, var(--accent)));
  stroke-width: 3;
  transition: opacity 0.12s ease;
  pointer-events: none;
}

.pv-radar-marker.is-dimmed {
  opacity: 0.12;
}

.pv-technology-chart-key {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 58%, var(--surface));
}

.pv-technology-chart-key > p {
  margin: 0;
}

.pv-technology-chart-key > p + p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.pv-technology-overlay-legend {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
}

.pv-technology-overlay-title,
.pv-technology-score-heading {
  margin: 0;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.pv-technology-overlay-list {
  display: grid;
  margin-top: 8px;
  gap: 5px;
}

.pv-technology-overlay-item {
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.pv-technology-overlay-item:hover,
.pv-technology-overlay-item:focus-visible,
.pv-technology-overlay-item[aria-pressed="true"] {
  border-color: var(--overlay-colour, var(--accent));
  outline: none;
  background: color-mix(in srgb, var(--overlay-colour, var(--accent)) 8%, var(--surface));
}

.pv-technology-overlay-swatch {
  width: 11px;
  height: 11px;
  border: 2px solid var(--overlay-colour, var(--accent));
  border-radius: 3px;
  background: color-mix(in srgb, var(--overlay-colour, var(--accent)) 24%, transparent);
}

.pv-technology-overlay-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
}

.pv-technology-overlay-item strong {
  color: var(--overlay-colour, var(--accent));
  font-size: 0.7rem;
}

.pv-technology-score-heading {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  text-transform: none;
}

.pv-technology-score-list {
  display: grid;
  margin-top: 9px;
  gap: 8px;
}

.pv-technology-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(62px, 0.85fr) 26px;
  align-items: center;
  gap: 8px;
  font-size: 0.73rem;
}

.pv-technology-score-row > span:first-child {
  color: var(--muted);
}

.pv-technology-score-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--border);
}

.pv-technology-score-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--technology-colour, var(--accent));
}

.pv-technology-score-row strong {
  text-align: right;
}

.pv-technology-pros-cons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.pv-technology-pros-cons section {
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.pv-technology-pros-cons section:first-child {
  border-top: 4px solid #2b8a3e;
  background: color-mix(in srgb, #2b8a3e 5%, var(--surface));
}

.pv-technology-pros-cons section:last-child {
  border-top: 4px solid #c2413b;
  background: color-mix(in srgb, #c2413b 5%, var(--surface));
}

.pv-technology-pros-cons h3 {
  margin: 0;
  font-size: 1rem;
}

.pv-technology-pros-cons ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.pv-technology-pros-cons li {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.88rem;
}

.pv-technology-rank-explanation {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid color-mix(in srgb, var(--technology-colour, var(--accent)) 42%, var(--border));
  border-left: 5px solid var(--technology-colour, var(--accent));
  border-radius: 12px;
  background: color-mix(in srgb, var(--technology-colour, var(--accent)) 5%, var(--surface));
  overflow-wrap: anywhere;
}

.pv-technology-rank-explanation[hidden] {
  display: none;
}

.pv-technology-rank-explanation-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.pv-technology-rank-explanation-heading > * {
  min-width: 0;
}

.pv-technology-rank-explanation h3 {
  margin: 0;
  font-size: 1rem;
}

.pv-technology-rank-summary,
.pv-technology-rank-evidence {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.pv-technology-rank-factors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pv-technology-rank-factors > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.pv-technology-rank-factors strong {
  font-size: 0.78rem;
}

.pv-technology-rank-factors ul {
  margin: 7px 0 0;
  padding-left: 18px;
}

.pv-technology-rank-factors li {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.pv-technology-rank-evidence {
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.pv-technology-sustainability-evidence {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--border);
  border-top: 4px solid #58734b;
  border-radius: 12px;
  background: color-mix(in srgb, #58734b 5%, var(--surface));
  overflow-wrap: anywhere;
}

.pv-technology-sustainability-evidence h3 {
  margin: 0;
  font-size: 1rem;
}

.pv-technology-sustainability-evidence p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.pv-technology-sustainability-evidence .pv-technology-evidence-note {
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
}

.pv-technology-calculation {
  margin-top: 18px;
  padding: 17px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  overflow-wrap: anywhere;
}

.pv-technology-calculation-heading {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.pv-technology-calculation-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.pv-technology-fit-formula-result {
  max-width: 360px;
  margin: 0;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

.pv-technology-formulas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.pv-technology-formulas p {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
}

.pv-technology-formulas strong,
.pv-technology-formulas code {
  display: block;
}

.pv-technology-formulas strong {
  margin-bottom: 4px;
  color: var(--text);
  font-size: 0.76rem;
}

.pv-technology-formulas code {
  color: var(--muted);
  font-family: var(--font-family-base);
  font-size: 0.73rem;
  line-height: 1.4;
  white-space: normal;
}

.pv-technology-calculation-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.pv-technology-calculation-rows {
  display: grid;
  margin-top: 14px;
  gap: 9px;
}

.pv-technology-calculation-row {
  display: grid;
  min-width: 0;
  padding: 11px;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.pv-technology-calculation-metric,
.pv-technology-calculation-evidence {
  min-width: 0;
  grid-column: span 2;
}

.pv-technology-calculation-metric strong,
.pv-technology-calculation-metric span,
.pv-technology-calculation-value strong,
.pv-technology-calculation-value span,
.pv-technology-calculation-evidence span {
  display: block;
  overflow-wrap: anywhere;
}

.pv-technology-calculation-metric > strong {
  color: var(--text);
  font-size: 0.82rem;
}

.pv-technology-calculation-metric > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  line-height: 1.35;
}

.pv-technology-calculation-label {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.pv-technology-calculation-value strong {
  color: var(--text);
  font-size: 0.78rem;
}

.pv-technology-calculation-evidence {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}

.pv-technology-confidence {
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.pv-technology-confidence--high {
  background: color-mix(in srgb, #2b8a3e 14%, var(--surface));
  color: #237333;
}

.pv-technology-confidence--medium {
  background: color-mix(in srgb, #b7791f 16%, var(--surface));
  color: #8a5b16;
}

.pv-technology-confidence--low {
  background: color-mix(in srgb, #c2413b 13%, var(--surface));
  color: #a13733;
}

.pv-technology-shortlist {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.pv-technology-shortlist-heading h3 {
  margin: 0;
}

.pv-technology-shortlist-heading > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.pv-technology-shortlist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.pv-technology-shortlist-card {
  position: relative;
  min-width: 0;
  min-height: 108px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--shortlist-colour, var(--accent));
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  overflow: hidden;
}

.pv-technology-shortlist-card:hover,
.pv-technology-shortlist-card:focus-within,
.pv-technology-shortlist-card.is-selected {
  border-color: var(--shortlist-colour, var(--accent));
  outline: none;
  background: color-mix(in srgb, var(--shortlist-colour, var(--accent)) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--shortlist-colour, var(--accent)) 14%, transparent);
}

.pv-technology-shortlist-card.is-compared {
  border-color: var(--shortlist-colour, var(--accent));
}

.pv-technology-shortlist-select {
  display: flex;
  width: 100%;
  min-height: 104px;
  padding: 13px 94px 13px 13px;
  flex-direction: column;
  align-items: flex-start;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.pv-technology-shortlist-select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--shortlist-colour, var(--accent)) 48%, transparent);
  outline-offset: -3px;
}

.pv-technology-shortlist-select strong {
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.pv-technology-shortlist-compare {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
  cursor: pointer;
  user-select: none;
}

.pv-technology-shortlist-compare:hover,
.pv-technology-shortlist-compare:focus-within {
  border-color: var(--shortlist-colour, var(--accent));
  color: var(--text);
}

.pv-technology-shortlist-compare input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--shortlist-colour, var(--accent));
  cursor: pointer;
}

.pv-technology-shortlist-rank {
  color: var(--shortlist-colour, var(--accent));
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.pv-technology-shortlist-meta {
  margin-top: auto;
  padding-top: 8px;
  color: var(--muted);
  font-size: 0.72rem;
}

.pv-technology-method {
  padding: 0;
  overflow: hidden;
}

.pv-technology-method-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  cursor: pointer;
  list-style: none;
}

.pv-technology-method-summary::-webkit-details-marker {
  display: none;
}

.pv-technology-method-summary > span:first-child {
  min-width: 0;
}

.pv-technology-method-summary::after {
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  flex: 0 0 auto;
  color: var(--accent);
  content: "";
  transform: rotate(45deg);
  transition: transform 160ms ease;
}

.pv-technology-method[open] .pv-technology-method-summary::after {
  transform: rotate(225deg);
}

.pv-technology-method-summary:hover,
.pv-technology-method-summary:focus-visible {
  background: var(--accentSoft);
}

.pv-technology-method-summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 52%, transparent);
  outline-offset: -3px;
}

.pv-technology-method-title {
  display: block;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.pv-technology-method-summary-note {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.pv-technology-method-body {
  padding: 0 18px 18px;
  border-top: 1px solid var(--border);
}

.pv-technology-method-body > p {
  max-width: 1100px;
  margin: 12px 0 0;
  color: var(--muted);
}

.pv-technology-evidence-title {
  margin: 24px 0 0;
  color: var(--text);
  font-size: 1.05rem;
}

.pv-technology-evidence-intro {
  max-width: 1100px;
}

.pv-technology-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: 11px;
  margin-top: 13px;
}

.pv-technology-evidence-grid article {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: color-mix(in srgb, var(--bg) 55%, var(--surface));
  overflow-wrap: anywhere;
}

.pv-technology-evidence-grid h4 {
  margin: 0;
  color: var(--text);
  font-size: 0.92rem;
}

.pv-technology-evidence-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.pv-technology-evidence-grid a {
  color: var(--accent);
  font-weight: 700;
}

.pv-technology-evidence-grid a:hover,
.pv-technology-evidence-grid a:focus-visible {
  text-decoration-thickness: 2px;
}

.pv-technology-evidence-workflow {
  display: grid;
  margin: 13px 0 0;
  padding-left: 22px;
  gap: 8px;
}

.pv-technology-evidence-workflow li {
  padding-left: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.pv-technology-evidence-rule {
  max-width: none;
  padding: 12px;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: var(--accentSoft);
}

.pv-technology-source-links {
  display: flex;
  margin-top: 14px;
  gap: 10px;
  flex-wrap: wrap;
}

.pv-technology-source-links a {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.pv-technology-source-links a:hover,
.pv-technology-source-links a:focus-visible {
  border-color: var(--accent);
  background: var(--accentSoft);
}

@media (max-width: 1180px) {
  .pv-technology-selector-layout {
    grid-template-columns: 1fr;
  }

  .pv-technology-filter-panel {
    position: static;
  }

  .pv-technology-filter-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pv-technology-filter-buttons--compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  .pv-technology-summary,
  .pv-technology-chart-wrap {
    grid-template-columns: 1fr;
  }

  .pv-technology-radar {
    max-height: none;
  }

  .pv-technology-shortlist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .pv-technology-method-summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .pv-technology-method-summary-note {
    width: calc(100% - 26px);
    margin-left: 0;
    white-space: normal;
  }

  .pv-technology-filter-buttons,
  .pv-technology-filter-buttons--compact,
  .pv-technology-pros-cons,
  .pv-technology-rank-factors,
  .pv-technology-shortlist-grid {
    grid-template-columns: 1fr;
  }

  .pv-technology-rank-explanation-heading {
    flex-direction: column;
  }

  .pv-technology-result-heading,
  .pv-technology-shortlist-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .pv-technology-result-actions {
    justify-content: flex-start;
  }

  .pv-technology-fit-score,
  .pv-technology-compare-all {
    align-self: flex-start;
  }

  .pv-technology-chart-wrap {
    margin-inline: 0;
  }

  .pv-technology-fit-formula-result {
    max-width: none;
    text-align: left;
  }

  .pv-technology-formulas,
  .pv-technology-calculation-row {
    grid-template-columns: 1fr;
  }

  .pv-technology-calculation-metric,
  .pv-technology-calculation-evidence {
    grid-column: 1;
  }

  .pv-radar-label {
    font-size: 12px;
  }
}