.viewport28{color:#edf4e8;background:#10221f;border:1px solid #31574d;border-radius:16px;margin:1rem 0;overflow:hidden}.viewport28-toolbar{background:#183b33;flex-wrap:wrap;gap:6px;padding:10px;display:flex}.viewport28-toolbar button{color:#f4f7ec;min-height:38px;font:inherit;cursor:pointer;background:#244c40;border:1px solid #5b776b;border-radius:6px;padding:7px 11px;font-size:12px}.viewport28-toolbar button[aria-pressed=true]{color:#1b3a31;background:#d4e8b2}.viewport28 canvas{touch-action:none;width:100%;height:clamp(320px,48vw,550px);display:block}.viewport28 .viewport28-caption{color:#c5dacb;margin:0;padding:12px 15px;font-size:12px;line-height:1.6}.viewport28-legend{align-items:center;gap:12px;padding:0 15px 15px;font:11px monospace;display:flex}.viewport28-legend i{background:linear-gradient(90deg,#1f6e6b,#59ad9b,#e8d47d,#d46333);border-radius:5px;flex:1;height:10px}.viewport28 details{border-top:1px solid #31574d;padding:14px}.viewport28 summary{cursor:pointer}.viewport28 select{color:#183b33;background:#f7faf5;border-radius:6px;max-width:100%;margin:10px 0;padding:9px}.viewport28 svg{width:100%;max-height:420px;display:block}.viewport28 :focus-visible{outline-offset:3px;outline:3px solid #f2cf76}@media (prefers-reduced-motion:reduce){.viewport28 *{transition:none!important}}.viewport28 [hidden]{display:none!important}