/* "Listen with visualizer": the meters, centered, with a band above for the lyrics and a slim bar below.
   Black by default; the viewer can switch to white (kept per browser). Meter colours come from the cover art. */
:root{--vz-bg:#000;--vz-fg:#ececec;--vz-dim:#7a7a7a;--vz-faint:#2a2a2a;--vz-line:#1c1c1c}
:root[data-vz="light"]{--vz-bg:#fff;--vz-fg:#111;--vz-dim:#8a8a8a;--vz-faint:#d9d9d9;--vz-line:#e6e6e6}
html,body.vz{height:100%;background:var(--vz-bg);color:var(--vz-fg);overflow:hidden}
body.vz{--strip:104px;--bar:60px;--side:clamp(12px,4vw,56px);font:400 13px/1 ui-monospace,"SF Mono",Menlo,Consolas,monospace;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
.vz-frame{position:relative;height:100dvh;display:grid;grid-template-rows:var(--strip) minmax(0,1fr) var(--bar);padding:env(safe-area-inset-top,0px) var(--side) env(safe-area-inset-bottom,0px)}

/* lyrics ride the band above the waveform, full screen width */
.vz-strip{position:relative;margin:0 calc(-1 * var(--side))}
.vz-strip canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* the meters: waveform + L/R square, then spectrum, then spectrogram, on one hairline grid */
.vz-quad{position:relative;justify-self:center;width:100%;max-width:1480px;height:100%;display:grid;
  grid-template-columns:minmax(0,1fr) var(--sq,160px);grid-template-rows:minmax(0,2fr) minmax(0,3fr) minmax(0,5fr);
  grid-template-areas:"wave lr" "spec spec" "gram gram";gap:1px;background:var(--vz-line);border:1px solid var(--vz-line)}
.vz-cell{position:relative;margin:0;background:var(--vz-bg);min-width:0;min-height:0;transition:background .3s}
.vz-cell[data-m="waveform"]{grid-area:wave}
.vz-cell[data-m="stereo"]{grid-area:lr}
.vz-cell[data-m="spectrum"]{grid-area:spec}
.vz-cell[data-m="spectrogram"]{grid-area:gram}
.vz-cell canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vz-l{position:absolute;left:10px;top:9px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--vz-dim);pointer-events:none}
.vz-play{position:absolute;left:50%;top:calc(var(--strip) + (100% - var(--strip) - var(--bar)) / 2);transform:translate(-50%,-50%);z-index:5;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;border:1px solid var(--vz-fg);background:var(--vz-bg);color:var(--vz-fg);cursor:pointer;font:500 16px/1 var(--font-ui);transition:opacity .4s}
.vz-play svg{width:14px;height:14px}
.vz.started .vz-play{opacity:0;pointer-events:none}

/* bottom bar: progress line, title, time, background switch */
.vz-bar{position:relative;display:flex;align-items:center;gap:16px;min-width:0}
.vz-progress{position:absolute;left:0;right:0;top:0;height:14px;cursor:pointer}
.vz-progress::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--vz-faint)}
.vz-progress i{position:absolute;left:0;top:6px;height:1px;width:0;background:var(--vz-fg)}
.vz-back{display:inline-flex;align-items:center;gap:10px;min-width:0;padding-top:8px;color:var(--vz-fg);text-decoration:none;font:400 20px/1 var(--font-title)}
.vz-back .arr{width:16px;height:16px;flex:none;transform:rotate(180deg);color:var(--vz-dim)}
.vz-back span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vz-meta{margin-left:auto;padding-top:8px;display:flex;gap:8px;align-items:center;color:var(--vz-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.vz-brand{letter-spacing:.14em;margin-right:12px;font-size:11px}
.vz-pp{width:36px;height:36px;margin-right:4px;display:grid;place-items:center;border:1px solid var(--vz-faint);border-radius:50%;background:none;color:var(--vz-fg);cursor:pointer;flex:none}
.vz-pp svg{width:12px;height:12px}
.vz-pp .pause,.vz.playing .vz-pp .play{display:none}
.vz.playing .vz-pp .pause{display:block}
.vz-sep{opacity:.6}
.vz-theme{width:44px;height:44px;margin-top:8px;display:grid;place-items:center;border:0;background:none;cursor:pointer;color:var(--vz-fg);flex:none}
.vz-theme i{width:16px;height:16px;border-radius:50%;border:1.5px solid currentColor;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}

@media (max-width:760px){
  body.vz{--strip:112px;--bar:56px}
  .vz-back{font-size:17px}
  .vz-brand{display:none}
  .vz-l{left:6px;top:6px;font-size:9px}
}

/* ── harmonic fingerprint: one image, centered, with the same bar below ── */
.fp-frame{grid-template-rows:minmax(0,1fr) var(--bar)}
.fp-stage{display:grid;place-items:center;min-height:0;min-width:0;padding-top:12px}
.fp-img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border:1px solid var(--vz-line)}
.vz-link{display:inline-flex;align-items:center;gap:6px;padding-top:8px;color:var(--vz-dim);text-decoration:none;font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.vz-link .arr{width:12px;height:12px}
.vz-link:hover,.vz-dl:hover{color:var(--vz-fg)}
.vz-dl{color:inherit;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:11px}
@media (max-width:760px){.vz-link{display:none}}

/* ── fingerprint view: overview waveform over the whole-track image, one playhead through both, tap to seek ── */
.vz-fp{display:grid;place-items:center;min-height:0;min-width:0}
.vz-fp[hidden],.vz-view[hidden],.vz-link[hidden]{display:none}
body[data-view="fingerprint"] .vz-quad{display:none}
.vz-fp-col{position:relative;display:grid;grid-template-rows:var(--fpw,72px) minmax(0,1fr);gap:1px;width:100%;max-width:100%;background:var(--vz-line);border:1px solid var(--vz-line);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.vz-fp-wave{display:block;width:100%;height:100%;background:var(--vz-bg)}
.vz-fp-img{position:relative;background:var(--vz-bg);min-height:0}
.vz-fp-img{overflow:hidden}
.vz-fp-img img{display:block;width:100%;height:auto;pointer-events:none}
/* a phone turns the one image a quarter clockwise: time runs down, low notes sit at the left */
.vz-fp-col[data-orient="portrait"] .vz-fp-img img{position:absolute;top:0;left:0;width:var(--ih);height:var(--iw);max-width:none;transform-origin:0 0;transform:translateX(var(--iw)) rotate(90deg)}
.fp-axes{position:absolute;inset:0;pointer-events:none;font:400 10px/1 ui-monospace,Menlo,monospace;color:#d8d8d8;opacity:.85}
.fp-axes i{position:absolute;background:rgba(255,255,255,.22)}
.fp-axes b{position:absolute;font-weight:400;text-shadow:0 0 3px #000}
@media (max-width:760px){.fp-axes{font-size:9px}}
.vz-fp-head{position:absolute;top:0;bottom:0;left:0;width:0;border-left:1px solid var(--vz-fg);pointer-events:none;box-shadow:0 0 0 1px color-mix(in srgb,var(--vz-bg) 60%,transparent)}
/* portrait (phones): the waveform is a strip down the left, the image runs down the screen, the playhead is a horizontal bar */
.vz-fp-col[data-orient="portrait"]{grid-template-columns:var(--fpw,48px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:100%}
.vz-fp-col[data-orient="portrait"] .vz-fp-img{height:100%}
.vz-fp-col[data-orient="portrait"] .vz-fp-head{top:0;bottom:auto;left:0;right:0;width:auto;height:0;border-left:0;border-top:1px solid var(--vz-fg)}
.vz-view{display:inline-flex;margin-left:12px;padding-top:8px;gap:2px}
.vz-view button{height:28px;padding:0 12px;border:1px solid var(--vz-faint);background:none;color:var(--vz-dim);font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.vz-view button:first-child{border-radius:999px 0 0 999px}
.vz-view button:last-child{border-radius:0 999px 999px 0;margin-left:-1px}
.vz-view button[aria-pressed="true"]{background:var(--vz-fg);color:var(--vz-bg);border-color:var(--vz-fg)}
@media (max-width:760px){.vz-bar{gap:8px}.vz-back span{display:none}.vz-meta{gap:4px}.vz-sep,[data-vz-dur]{display:none}.vz-pp{width:32px;height:32px}.vz-theme{width:36px}.vz-fp-col{--fpw:48px}.vz-view{margin-left:0}.vz-view button{padding:0 10px}body[data-view="fingerprint"]{--strip:56px}}
/* a project's song picker: a native select (the phone's own wheel), styled to sit in the bar */
.vz-pick{position:relative;display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:280px;padding-top:8px;color:var(--vz-fg)}
.vz-pick select{appearance:none;-webkit-appearance:none;min-width:0;max-width:100%;height:28px;padding:0 26px 0 12px;border:1px solid var(--vz-faint);border-radius:999px;background:none;color:inherit;font:500 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;text-overflow:ellipsis;cursor:pointer}
.vz-pick select:focus-visible{outline:2px solid var(--vz-fg);outline-offset:2px}
.vz-pick option{background:var(--vz-bg);color:var(--vz-fg);text-transform:none}
.vz-pick .chev{position:absolute;right:11px;top:calc(50% + 4px);width:6px;height:6px;border:solid var(--vz-dim);border-width:0 1.5px 1.5px 0;transform:translate(0,-70%) rotate(45deg);pointer-events:none}
@media (max-width:760px){.vz-frame:has(.vz-pick){--bar:100px}.vz-bar:has(.vz-pick){flex-wrap:wrap;align-content:center;row-gap:4px}.vz-pick{order:-1;flex:1 0 100%;max-width:none}.vz-pick select{width:100%}}