.tool-spectrum { padding:3rem 0; border-top:1px solid var(--line); }
.spectrum-heading { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:end; margin-bottom:1.7rem; }
.spectrum-heading h2 { margin-top:.7rem; font-size:clamp(2.2rem,3.4vw,3.3rem); }
.spectrum-heading > p { max-width:29rem; color:var(--muted); font-size:.94rem; }
.spectrum-figure { margin:0; padding:0; background:#fff; }
.spectrum-chart { --spectrum-cap-x:104px; --spectrum-cap-y:40px; position:relative; width:100%; height:440px; }
.spectrum-axes { position:absolute; inset:0; z-index:0; pointer-events:none; }
.spectrum-axis { position:absolute; display:block; background:#7d8982; }
.spectrum-axis-x { top:50%; left:var(--spectrum-cap-x); right:var(--spectrum-cap-x); height:1px; }
.spectrum-axis-y { left:50%; top:var(--spectrum-cap-y); bottom:var(--spectrum-cap-y); width:1px; }
.spectrum-axis::before,.spectrum-axis::after { content:''; position:absolute; display:block; background:#7d8982; }
.spectrum-axis-x::before { left:-1px; top:50%; width:7px; height:9px; transform:translateY(-50%); clip-path:polygon(0 50%,100% 0,100% 100%); }
.spectrum-axis-x::after { right:-1px; top:50%; width:7px; height:9px; transform:translateY(-50%); clip-path:polygon(100% 50%,0 0,0 100%); }
.spectrum-axis-y::before { top:-1px; left:50%; width:9px; height:7px; transform:translateX(-50%); clip-path:polygon(50% 0,100% 100%,0 100%); }
.spectrum-axis-y::after { bottom:-1px; left:50%; width:9px; height:7px; transform:translateX(-50%); clip-path:polygon(50% 100%,0 0,100% 0); }
.spectrum-axis-label { position:absolute; display:block; color:#435047; font-size:.74rem; font-weight:650; line-height:1.3; text-align:center; }
.spectrum-axis-top,.spectrum-axis-bottom { left:50%; width:9rem; transform:translateX(-50%); }
.spectrum-axis-top { top:0; }
.spectrum-axis-bottom { bottom:0; }
.spectrum-axis-left,.spectrum-axis-right { top:50%; width:calc(var(--spectrum-cap-x) - 12px); transform:translateY(-50%); }
.spectrum-axis-left { left:0; }
.spectrum-axis-right { right:0; }
.spectrum-tool { position:absolute; z-index:1; display:grid; place-items:center; width:44px; height:44px; transform:translate(-50%,-50%); border:1px solid #e3e8eb; border-radius:50%; background:#fff; box-shadow:0 2px 8px #293d4808; cursor:pointer; }
.spectrum-tool img { width:26px; height:26px; object-fit:contain; }
.spectrum-tool:hover,.spectrum-tool[aria-pressed="true"] { border-color:#7c9384; box-shadow:0 0 0 3px #eef3ef; z-index:2; }
.spectrum-tool:focus-visible { outline:2px solid #293e30; outline-offset:3px; z-index:3; }
.spectrum-tooltip { display:none; position:absolute; bottom:calc(100% + 7px); left:50%; width:max-content; max-width:8rem; transform:translateX(-50%); padding:.35rem .6rem; border:1px solid var(--line); border-radius:.3rem; background:#fff; color:var(--ink); font-size:.7rem; text-align:center; pointer-events:none; box-shadow:0 3px 12px #243e5110; }
.spectrum-tool[data-tooltip-align="left"] .spectrum-tooltip { left:0; transform:none; }
.spectrum-tool[data-tooltip-align="right"] .spectrum-tooltip { left:auto; right:0; transform:none; }
.spectrum-tool[data-tooltip-side="bottom"] .spectrum-tooltip { top:calc(100% + 7px); bottom:auto; }
.spectrum-tool:hover .spectrum-tooltip,.spectrum-tool:focus-visible .spectrum-tooltip { display:block; }
.spectrum-detail { min-height:3rem; margin-top:1.4rem; color:var(--muted); font-size:.86rem; line-height:1.6; }
.spectrum-detail strong { color:var(--ink); font-weight:600; }
.spectrum-figure figcaption { margin-top:.6rem; color:var(--muted); font-size:.72rem; line-height:1.5; }
.no-js .tool-spectrum { display:none; }
@media(max-width:700px) {
  .tool-spectrum { padding:2.3rem 0; }
  .spectrum-heading { grid-template-columns:1fr; gap:1rem; }
  .spectrum-chart { --spectrum-cap-x:72px; height:580px; }
  .spectrum-axis-label { font-size:.7rem; }
  .spectrum-detail { min-height:5rem; }
}
@media(max-width:380px) {
  .spectrum-chart { height:640px; }
}