.wave-navigation{display:grid;gap:8px;min-width:0}
.navigation-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.navigation-bar button{border:1px solid var(--border-color);border-radius:7px;background:var(--bg-primary);color:var(--text-primary);min-height:34px;padding:5px 10px;font:600 .8rem Inter,system-ui;cursor:pointer}
.navigation-bar button:hover{border-color:var(--accent-hover);background:var(--accent-light)}
.navigation-bar .zoom-symbol{font-size:1.15rem;min-width:36px;line-height:1}
.navigation-bar output{margin-left:auto;font: .75rem ui-monospace,monospace;color:var(--text-secondary);white-space:nowrap}
.navigator{height:44px;position:relative;overflow:hidden;border:1px solid var(--border-color);border-radius:7px;background:var(--accent-light);touch-action:none;cursor:pointer;isolation:isolate}
#navigatorWave{height:100%;border-radius:0;pointer-events:none;background:transparent}
.nav-viewport{position:absolute;top:0;bottom:0;left:0;width:100%;border:2px solid var(--accent-hover);background:var(--accent-light);box-shadow:0 0 0 2000px rgba(0,0,0,.16);cursor:grab;touch-action:none}
.nav-viewport:active{cursor:grabbing}
.nav-edge{position:absolute;top:0;bottom:0;width:12px;min-height:0;border:0;border-radius:2px;background:var(--accent-hover);padding:0;cursor:ew-resize;touch-action:none;color:var(--bg-primary)}
.nav-edge::after{content:'';position:absolute;height:14px;top:50%;left:5px;transform:translateY(-50%);border-left:2px solid currentColor}
#navLeft{left:-2px}#navRight{right:-2px}
#timeRuler{height:24px;background:transparent;border-radius:0;touch-action:auto}
#timeRuler+#wave{margin-top:-6px}
.navigation-hint{font-size:.72rem;color:var(--text-secondary)}
#wave.is-panning{cursor:grabbing}
@media(max-width:560px){.navigation-bar{gap:5px}.navigation-bar button{min-height:40px;padding:5px 8px}.navigation-bar output{margin-left:0;flex-basis:100%}.navigator{height:44px}.navigation-hint{font-size:.7rem}}

.export-navigation select{font-size:.8rem;padding:6px;min-height:34px;max-width:120px;border-radius:7px}.export-navigation output{flex-basis:100%;margin-left:0}#exportTimeline{cursor:grab;touch-action:none}#exportTimeline:active{cursor:grabbing}#exportScroll{height:8px;margin:4px 0 10px}#exportTimeline text[fill="#1f2937"]{fill:#1f2937}