#tgr-wavelength-254-explained{background:#f7f8f8;color:#151b1e;font-family:Instrument,Arial,sans-serif;padding:24px;max-width:780px;margin:0 auto}
    #tgr-wavelength-254-explained *{box-sizing:border-box}
    #tgr-wavelength-254-explained .spectrum-heading{font-size:15px;line-height:1.5;font-weight:500;margin:0 0 16px}
    #tgr-wavelength-254-explained .wave-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
    #tgr-wavelength-254-explained .wave-reading{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
    #tgr-wavelength-254-explained .wave-reading output{font-size:44px;font-weight:400;letter-spacing:-.055em;line-height:1.1;font-variant-numeric:tabular-nums}
    #tgr-wavelength-254-explained .wave-unit{font-size:18px;color:#566267}
    #tgr-wavelength-254-explained .wave-band{font-size:14px;color:#0078a8;margin-left:8px}
    #tgr-wavelength-254-explained .view-control{font-size:13px;color:#566267;display:grid;gap:5px;justify-items:end}
    #tgr-wavelength-254-explained select{font:400 14px/1.5 Instrument,Arial,sans-serif;color:#151b1e;background:transparent;border:0;border-bottom:1px solid #bac6cc;min-height:36px;padding:0 22px 5px 0;max-width:100%}
    #tgr-wavelength-254-explained .wave-context{display:grid;margin:10px 0 6px;font-size:15px;line-height:1.6;color:#566267}
    #tgr-wavelength-254-explained .wave-context span{grid-area:1/1}
    #tgr-wavelength-254-explained .wave-reserve{visibility:hidden}
    #tgr-wavelength-254-explained .spectrum{position:relative;width:100%;height:155px;margin-top:12px}
    #tgr-wavelength-254-explained .spectrum svg{display:block;width:100%;height:155px;overflow:visible}
    #tgr-wavelength-254-explained svg text{font-family:Instrument,Arial,sans-serif;font-size:12px;fill:#566267;font-weight:400}
    #tgr-wavelength-254-explained .range{position:absolute;top:2px;left:0;margin:0;width:100%;height:44px;appearance:none;background:transparent;cursor:ew-resize}
    #tgr-wavelength-254-explained .range::-webkit-slider-runnable-track{height:2px;background:transparent}
    #tgr-wavelength-254-explained .range::-webkit-slider-thumb{appearance:none;width:26px;height:26px;margin-top:-12px;border:2px solid #0078a8;border-radius:50%;background:#f7f8f8;box-shadow:0 0 0 4px #f7f8f860}
    #tgr-wavelength-254-explained .range::-moz-range-track{height:2px;background:transparent}
    #tgr-wavelength-254-explained .range::-moz-range-thumb{width:22px;height:22px;border:2px solid #0078a8;border-radius:50%;background:#f7f8f8;box-shadow:0 0 0 4px #f7f8f860}
    #tgr-wavelength-254-explained .wave-presets{display:flex;gap:26px;align-items:stretch;margin:5px 0 20px}
    #tgr-wavelength-254-explained .wave-presets button{font:400 14px/1.4 Instrument,Arial,sans-serif;padding:8px 0 10px;min-height:52px;border:0;border-bottom:2px solid transparent;color:#566267;background:none;text-align:left;cursor:pointer}
    #tgr-wavelength-254-explained .wave-presets button span{display:block;color:#151b1e;margin-bottom:3px}
    #tgr-wavelength-254-explained .wave-presets button[aria-pressed="true"]{border-color:#0078a8;color:#0078a8}
    #tgr-wavelength-254-explained .wave-note{font-size:15px;line-height:1.65;color:#566267;margin:0;max-width:66ch}
    #tgr-wavelength-254-explained a{color:#0078a8;text-decoration:underline;text-underline-offset:3px}
    #wavelength .wave-details{margin-top:24px;border-top:1px solid #d8dfe2;font-size:14px;line-height:1.65;color:#566267}
    #wavelength .wave-details summary{cursor:pointer;min-height:44px;padding:15px 0 8px;color:#151b1e}
    #wavelength .wave-details p{margin:12px 0}
    #tgr-wavelength-254-explained .crest-figure{margin:24px 0 0;padding-top:18px;border-top:1px solid #d8dfe2}
    #tgr-wavelength-254-explained .crest-figure h3{font-size:15px;line-height:1.5;font-weight:500;margin:0 0 14px}
    #tgr-wavelength-254-explained .crest-figure svg{display:block;width:100%;height:112px}
    #tgr-wavelength-254-explained .crest-figure figcaption{font-size:14px;line-height:1.65;color:#566267;margin:4px 0 0;max-width:66ch}
    #tgr-wavelength-254-explained .sr-only-wave{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    @media(max-width:480px){#tgr-wavelength-254-explained{padding:20px 16px}#tgr-wavelength-254-explained .wave-top{gap:16px}#tgr-wavelength-254-explained .wave-reading output{font-size:38px}#tgr-wavelength-254-explained .wave-reading{gap:6px;flex-wrap:wrap}#tgr-wavelength-254-explained .wave-band{flex-basis:100%;margin:0}#tgr-wavelength-254-explained .wave-presets{gap:22px}#tgr-wavelength-254-explained .wave-presets button{font-size:13px}#tgr-wavelength-254-explained select{min-height:44px;font-size:13px}#tgr-wavelength-254-explained .wave-context{margin-top:12px}}

#tgr-wavelength-254-explained{width:100%;min-width:0}
#tgr-wavelength-254-explained .wave-quantity{display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap;flex-shrink:0}
#tgr-wavelength-254-explained :is(button,input,select,summary):focus-visible{outline:2px solid #0078a8;outline-offset:4px}

/* "Scientific context & sources" now sits in the section's copy column rather than
   inside the widget, so the details rules are scoped to #wavelength (which covers
   both places) and carry their own link colour, which the widget used to supply.
   The UV bands take the slot the crest figure vacated under the spectrum, reusing
   its hairline-and-18px-above treatment; the band label is the only new rule, on
   the ink colour and 500 weight the sheet already uses for headings. */
#wavelength .wave-details a{color:var(--link);text-decoration:underline;text-underline-offset:3px}
#wavelength .uv-bands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;padding-top:18px;border-top:1px solid #d8dfe2;font-size:14px;line-height:1.65;color:#566267}
#wavelength .uv-bands b{display:block;color:#151b1e;font-weight:500;margin-bottom:3px}
#wavelength .wavelength-copy .spectrum-heading{font-size:1.5rem;line-height:1.2;letter-spacing:-.025em;margin:0 0 20px}
@media(max-width:780px){#wavelength .wavelength-copy .spectrum-heading{margin-bottom:15px}}
/* The second rect in each band group is the hatch overlay; it only shows on hover. */
#wavelength .spectrum [data-band-swatch] rect+rect{opacity:0;transition:opacity .18s var(--ease)}
#wavelength .spectrum [data-band-swatch]:hover rect+rect{opacity:1}
@media(prefers-reduced-motion:reduce){#wavelength .spectrum [data-band-swatch] rect+rect{transition:none}}
@media(max-width:480px){#wavelength .uv-bands{grid-template-columns:minmax(0,1fr);gap:18px}}
/* Hairline per band rather than one rule across the grid, matching
   .industry-challenges: the line breaks at the column gaps, and when the grid
   collapses to one column each band keeps its own. No border-bottom anywhere
   in here, so this needs no breakpoint of its own. */
#wavelength .uv-bands{border-top:0;padding-top:0}
#wavelength .uv-bands li{border-top:1px solid #d8dfe2;padding-top:18px}

/* Dark variant of the opening section, matching Technology's first section. The explorer's
   light palette maps onto the dark instrument palette used under "The limitations of UV-C":
   ink -> #f6fafc, muted -> #aebac0, rules -> #324048, accent #0078a8 -> #79d9eb. The spectrum
   is drawn by wavelength.js with inline colours, so its strokes and labels are matched by value. */
#wavelength.dark #tgr-wavelength-254-explained{background:transparent;color:#f6fafc}
#wavelength.dark #tgr-wavelength-254-explained .wave-unit,#wavelength.dark #tgr-wavelength-254-explained .view-control,#wavelength.dark #tgr-wavelength-254-explained .wave-context,#wavelength.dark #tgr-wavelength-254-explained .wave-note,#wavelength.dark #tgr-wavelength-254-explained .crest-figure figcaption{color:#aebac0}
#wavelength.dark #tgr-wavelength-254-explained .wave-band,#wavelength.dark #tgr-wavelength-254-explained a{color:#79d9eb}
#wavelength.dark #tgr-wavelength-254-explained select{color:#f6fafc;border-bottom-color:#4a5b63;color-scheme:dark}
#wavelength.dark #tgr-wavelength-254-explained .wave-presets button{color:#aebac0}
#wavelength.dark #tgr-wavelength-254-explained .wave-presets button span{color:#f6fafc}
#wavelength.dark #tgr-wavelength-254-explained .wave-presets button[aria-pressed="true"]{border-color:#79d9eb;color:#79d9eb}
#wavelength.dark #tgr-wavelength-254-explained .range::-webkit-slider-thumb{border-color:#79d9eb;background:var(--dark);box-shadow:0 0 0 4px #10171b60}
#wavelength.dark #tgr-wavelength-254-explained .range::-moz-range-thumb{border-color:#79d9eb;background:var(--dark);box-shadow:0 0 0 4px #10171b60}
#wavelength.dark #tgr-wavelength-254-explained :is(button,input,select,summary):focus-visible{outline-color:#79d9eb}
#wavelength.dark #tgr-wavelength-254-explained svg text{fill:#d2dce0!important}
#wavelength.dark #tgr-wavelength-254-explained svg text[style*="#0078a8"]{fill:#79d9eb!important}
#wavelength.dark #tgr-wavelength-254-explained svg text[style*="#151b1e"]{fill:#f6fafc!important}
#wavelength.dark #tgr-wavelength-254-explained svg [stroke="#9daeb5"]{stroke:#8ea1a9}
#wavelength.dark #tgr-wavelength-254-explained svg [stroke="#d8dfe2"]{stroke:#324048}
#wavelength.dark #tgr-wavelength-254-explained svg [stroke="#566267"]{stroke:#8a9aa2}
#wavelength.dark #tgr-wavelength-254-explained svg [stroke="#0078a8"]{stroke:#79d9eb}
#wavelength.dark #tgr-wavelength-254-explained svg [fill="#d9e8ed"]{fill:#245767}
#wavelength.dark #tgr-wavelength-254-explained svg [fill="#dce0e7"]{fill:#344560}
#wavelength.dark #tgr-wavelength-254-explained svg [fill="#e5e0e9"]{fill:#463a5e}
#wavelength.dark .uv-bands{color:#aebac0}
#wavelength.dark .uv-bands li{border-top-color:#324048}
#wavelength.dark .uv-bands b{color:#f6fafc}
#wavelength.dark .wave-details{border-top-color:#324048;color:#aebac0}
#wavelength.dark .wave-details summary{color:#f6fafc}
#wavelength.dark .wave-details a{color:#70cff5}
#wavelength.dark #tgr-wavelength-254-explained svg rect[stroke="#0078a8"]{fill-opacity:.42}