#volumeViewer{position:absolute;inset:0;z-index:5;display:none;background:#111722;overflow:hidden}#volumeViewer.active{display:block}.vol-grid{position:absolute;inset:8px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:7px}.vol-pane{position:relative;min-width:0;min-height:0;overflow:hidden;background:#05080d;border:1px solid #516079;border-radius:11px;box-shadow:inset 0 0 0 1px #ffffff08}.vol-pane img{width:100%;height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none;image-rendering:auto}.vol-pane canvas{width:100%;height:100%;display:block}#volumeOverviewCanvas{position:absolute;inset:0;min-width:1px;min-height:1px}.vol-label{position:absolute;left:8px;top:7px;z-index:4;padding:4px 7px;border-radius:7px;background:#0b1019cc;color:#e8eef8;font-size:10px;letter-spacing:.06em;text-transform:uppercase;pointer-events:none}.vol-value{position:absolute;right:8px;bottom:7px;z-index:4;padding:4px 7px;border-radius:7px;background:#0b1019cc;color:#cbd7e8;font-size:10px;font-variant-numeric:tabular-nums;pointer-events:none}.cross-v,.cross-h{position:absolute;z-index:3;background:#fff9;box-shadow:0 0 0 1px #0008;pointer-events:none}.cross-v{top:0;bottom:0;width:1px}.cross-h{left:0;right:0;height:1px}.vol-pane.maximized{position:fixed;z-index:100;inset:58px 8px 8px}.vol-close{position:absolute;right:14px;top:14px;z-index:10;background:#111a28dd;color:#fff;border-color:#60718c}.vol-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#d9e2ef;background:#101722cc;z-index:9}.vol-help{position:absolute;left:14px;bottom:14px;z-index:10;padding:6px 9px;border-radius:9px;background:#101722d9;color:#bcc9db;font-size:10px;pointer-events:none}.volume-controls .inline{display:grid;grid-template-columns:1fr 1fr;gap:7px}.volume-controls .inline button{width:100%;border-radius:9px}.volume-controls input[type=range]{min-width:0}.volume-controls .range-row{display:grid;grid-template-columns:105px 1fr 50px;gap:8px;align-items:center;margin:8px 0}.volume-controls .range-row label{color:var(--mut)}.volume-controls .range-row output{text-align:right;color:#126d5f;font-variant-numeric:tabular-nums}.volume-status{margin-top:8px;padding:8px;border-radius:9px;background:#f4f7fb;border:1px solid #d7dee9;color:#536175;font-size:11px}@media(max-width:760px){.vol-grid{grid-template-columns:1fr;grid-template-rows:repeat(4,1fr)}.vol-pane.maximized{inset:54px 5px 5px}.vol-help{display:none}}