.wl-tape{container-type:inline-size;position:relative;padding:10px;background:var(--wl-navy-deep);color:var(--wl-text);font-family:var(--wl-font-body);outline:none;box-shadow:0 8px 28px #0006}.wl-tape.is-focused{box-shadow:0 0 0 2px var(--wl-gold),0 8px 28px #0006}.wl-tape.is-recording{box-shadow:0 0 0 2px var(--wl-rec),0 8px 28px #0006}.wl-tape button{border:0;border-radius:0;color:var(--wl-text);background:var(--wl-navy-lift);font:600 11px var(--wl-font-body);padding:7px 8px;touch-action:manipulation;-webkit-user-select:none;user-select:none}.wl-tape button:hover{background:var(--wl-navy-panel)}.wl-tape button:focus-visible{outline:2px solid var(--wl-gold);outline-offset:-2px}.wl-tape button:disabled{opacity:.45}.wl-tape button[aria-pressed=true]{background:var(--wl-gold);color:var(--wl-navy-deep)}.wl-tape .wl-tape-rec[aria-pressed=true]{background:var(--wl-rec);color:var(--wl-text)}.wl-tape-header{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-height:30px}.wl-tape-title{color:var(--wl-gold);font:30px/1 var(--wl-font-title);white-space:nowrap}.wl-tape-status{margin-left:auto;display:flex;gap:8px;align-items:baseline;font:10px var(--wl-font-mono);color:var(--wl-muted);white-space:nowrap;overflow:hidden}.wl-tape-status b{color:var(--wl-text);font-weight:400}.wl-tape-status .is-rec{color:var(--wl-rec)}.wl-tape-status .is-play{color:var(--wl-gold)}.wl-tape-header>button{padding:0;width:26px;height:26px;font-size:16px;flex-shrink:0}.wl-tape-screen{position:relative;background:var(--wl-navy-backdrop);overflow:hidden;touch-action:none;cursor:crosshair}.wl-tape-screen canvas{display:block;width:100%;height:100%}.wl-tape-screen p{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;display:grid;place-items:center;color:var(--wl-muted);font-size:13px;pointer-events:none}.wl-tape-meter{height:3px;background:var(--wl-navy-backdrop);margin-top:2px}.wl-tape-meter span{display:block;height:100%;width:0;background:var(--wl-rec)}.wl-tape-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.wl-tape-row>button{flex:1 1 44px}.wl-tape-row>.wl-tape-wide{flex:2 1 80px}.wl-tape-row>.wl-tape-gap{flex:0 0 4px}.wl-tape-tracks>button{flex:1 1 40px;display:flex;justify-content:space-between;font-family:var(--wl-font-mono)}.wl-tape-tracks>button.is-muted{opacity:.55}.wl-tape-tracks>button small{font-size:10px;opacity:.8}.wl-tape-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px}.wl-tape-tools label{display:flex;align-items:center;gap:6px;font:10px var(--wl-font-mono);color:var(--wl-muted)}.wl-tape-tools input{width:72px;accent-color:var(--wl-gold)}.wl-tape-error{font-size:12px;color:var(--wl-gold);margin:8px 0 0}.wl-tape-help{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;padding:10px;overflow:auto;background:var(--wl-navy-deep)}.wl-tape-help header{display:flex;justify-content:space-between;align-items:center}.wl-tape-help h2{margin:0;color:var(--wl-gold);font:24px/1 var(--wl-font-title)}.wl-tape-help h3{margin:12px 0 4px;color:var(--wl-muted);font:10px var(--wl-font-mono)}.wl-tape-help p{margin:6px 0;font-size:12px;line-height:1.45}.wl-tape-help dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:3px 10px}.wl-tape-help dl>div{display:flex;justify-content:space-between;gap:8px;padding:4px 5px;background:var(--wl-navy-backdrop);font-size:11px}.wl-tape-help dt,.wl-tape-help dd{margin:0}.wl-tape-help kbd{font:10px var(--wl-font-mono);color:var(--wl-gold)}@container (max-width:340px){.wl-tape-title{font-size:24px}.wl-tape-status .wl-tape-extra{display:none}}