.volume-diagram{position:relative}.volume-canvas{display:block;width:100%;height:320px;touch-action:pan-y pinch-zoom;cursor:default}.volume-controls{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;min-height:44px}.volume-hint{font:400 14px/1.5 var(--font);color:#8fb89b}.volume-control{background:#102b19;border:1px solid #508260;color:#c3eed0;min-height:44px;padding:10px 14px;font-size:14px}.volume-control:hover{background:#234b30}.volume-control[hidden]{display:none}.volume-diagram .diagram-phases{margin-top:8px;flex-wrap:wrap;justify-content:flex-start;gap:9px 22px;font-size:12px}.volume-diagram .diagram-meta{font-size:12px}
@media(max-width:760px){.volume-canvas{height:265px}.volume-controls{align-items:flex-start;flex-direction:column;gap:8px}.volume-hint{font-size:14px}.volume-control{width:100%}.volume-diagram .diagram-meta{font-size:11px}.volume-diagram .diagram-phases{font-size:12px;gap:8px 15px}}
@media(prefers-reduced-motion:reduce){.volume-control{transition:none}}