* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; background: #05070d; color: #eaf2ff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; overflow: hidden; }
#webgl, #squares { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#webgl { z-index: 0; } #squares { z-index: 6; pointer-events: none; }

#controls { position: fixed; top: 14px; right: 14px; z-index: 10;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#controls button { cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  border: 0; border-radius: 14px; padding: 12px 16px; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); box-shadow: 0 6px 24px rgba(0,0,0,.35),
  inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter: blur(8px); }
#controls .ico { font-size: 18px; } #controls button[aria-pressed="false"] { opacity: .92; }

#mediaBar{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; margin-left:8px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: 0 6px 24px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.15); backdrop-filter: blur(8px); }
#mediaBar #time{ font: 700 12px/1 system-ui; opacity:.95; }
#mediaBar input[type="range"]{ -webkit-appearance:none; appearance:none; height:8px; border-radius:999px; background:#4b5563; outline:none; }
#seek{ width:min(34vw, 360px); } #vol{ width:120px; }
#mediaBar input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%;
  background:#00e1ff; box-shadow:0 0 0 2px rgba(0,0,0,.15); cursor:pointer; }
#mediaBar input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#00e1ff; border:0; cursor:pointer; }
#seek{ background: linear-gradient(to right, #00e1ff var(--played,0%), #4b5563 var(--played,0%)) no-repeat,
                   linear-gradient(to right, #9ca3af var(--buffered,0%), transparent var(--buffered,0%)) no-repeat, #4b5563;
        background-size: 100% 100%, 100% 100%, 100% 100%; }
.vol-wrap{ display:flex; align-items:center; gap:6px; } .vol-wrap .vol-ico{ font-size:14px; }

#right-rail { position: fixed; right: 2vw; bottom: 4vh; z-index: 8; display: flex; flex-direction: column; align-items: flex-end; gap: 16px; pointer-events: none; }
#dancer{ width: min(26vmin, 260px); aspect-ratio: 3 / 4; pointer-events: none; position: relative; right: 0;
  background: url("./assets/dancer.gif") center / contain no-repeat;
  -webkit-mask-image: url("./assets/dancer.gif"); mask-image: url("./assets/dancer.gif");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-mode: luminance; mask-mode: luminance; }
@supports not (mask-image: url("")) { #dancer{ background: none; }
  #dancer::before{ content: ""; position: absolute; inset: 0; background: url("./assets/dancer.gif") center / contain no-repeat;
    mix-blend-mode: screen; filter: brightness(1.05) contrast(1.1); pointer-events: none; } }
#btnSEI { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: #04101e;
  padding: 16px 18px; border-radius: 18px; background: linear-gradient(135deg, #c7cbd0 0%, #d6e4ae 100%);
  box-shadow: 0 14px 34px rgba(0, 180, 255, .38); border: 1px solid rgba(255,255,255,.35); }
#btnSEI .sei-mark { height: 60px; width: auto; } #btnSEI .sei-text { display: flex; flex-direction: column; line-height: 1.05; }
#btnSEI strong { font-size: 20px; font-weight: 900; } #btnSEI small  { font-size: 14px; opacity: .95; }
:focus-visible { outline: 2px dashed #00e1ff; outline-offset: 4px; }