.explainer{background:var(--soft)}.explainer-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:center}.explainer-heading{max-width:540px}.explainer-heading h2{font-size:clamp(2rem,3.8vw,3.8rem)}.explainer-copy{margin-top:26px}.explainer-hint{font-size:.85rem;margin-top:18px}.explainer-player{min-width:0;width:100%}.explainer-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#080d0a;border-radius:4px}.explainer-controls{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}.explainer-toggle{display:inline-flex;align-items:center;gap:12px;padding:10px 0;min-height:44px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.8rem;white-space:nowrap}.explainer-toggle:hover{color:#327920}.explainer-toggle [data-play-icon]{font-size:1rem}.explainer-volume{display:flex;gap:10px;align-items:center;color:var(--muted)}.explainer-volume svg{width:20px;height:20px;flex-shrink:0}.explainer-volume output{font-size:.7rem;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}.explainer-volume input[type=range]{--volume:70%;appearance:none;-webkit-appearance:none;cursor:pointer;width:110px;height:44px;padding:0;border:0;background:transparent;margin:0}.explainer-volume input::-webkit-slider-runnable-track{height:4px;border-radius:8px;background:linear-gradient(to right,var(--green) var(--volume),var(--line) var(--volume))}.explainer-volume input::-moz-range-track{height:4px;border-radius:8px;background:var(--line)}.explainer-volume input::-moz-range-progress{height:4px;background:var(--green)}.explainer-volume input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;height:14px;width:14px;margin-top:-5px;border:2px solid var(--paper);border-radius:50%;background:var(--green);box-shadow:0 0 0 1px #60c33f}.explainer-volume input::-moz-range-thumb{height:12px;width:12px;border:2px solid var(--paper);border-radius:50%;background:var(--green)}.explainer-video::-webkit-media-controls{display:none!important}.explainer-status{font-size:.9rem;margin-top:12px}.explainer-status:empty{display:none}html[data-theme=dark] .explainer-toggle:hover{color:#9fdc87}@media(max-width:850px){.explainer-layout{grid-template-columns:1fr;gap:32px}.explainer-heading{max-width:650px}}@media(max-width:450px){.explainer-controls{gap:8px;flex-wrap:wrap}.explainer-volume{gap:7px}.explainer-volume input[type=range]{width:90px}}