/* Pages de démo : la vraie home d'azote.tv en fond + panneau d'étude */
@font-face{font-family:"Disket Mono";src:url("../assets/fonts/DisketMono.woff2") format("woff2");font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:#000;overflow:hidden}
.site{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}

.az-panel{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:10000;
  display:flex;align-items:center;gap:6px;padding:6px;max-width:calc(100vw - 20px);
  background:rgba(0,0,0,.82);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);
  color:#f2f2f2;font:11px/1 "Disket Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;
  opacity:.5;transition:opacity .25s}
.az-panel:hover,.az-panel:focus-within{opacity:1}
.az-panel button,.az-panel .az-back{cursor:pointer;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;
  border:1px solid rgba(255,255,255,.22);padding:7px 9px;text-decoration:none;white-space:nowrap}
.az-panel button:hover,.az-panel .az-back:hover{background:#fff;color:#000}
.az-panel button.on{background:#0340F4;border-color:#0340F4;color:#fff}
.az-name{padding:0 6px;white-space:nowrap}
.az-scrub{position:relative;width:min(340px,30vw);height:24px;display:flex;align-items:center}
.az-scrub input{width:100%;accent-color:#0340F4;cursor:pointer}
.az-scrub i{position:absolute;top:1px;width:1px;height:7px;background:#fff;opacity:.6;pointer-events:none}
.az-t{min-width:118px;text-align:center;opacity:.8;font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .az-name,.az-t,.az-panel [data-a=prev],.az-panel [data-a=next]{display:none}
  .az-scrub{width:34vw}
}