/* KlipTok v158 · Galaxia musical (visor + escuchador) */
html,body.gx-page{margin:0;min-height:100%;background:#050318}
body.gx-page{min-height:100vh;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:#eee9ff;overflow-x:hidden;background:linear-gradient(180deg,#0b0426,#1d0b52 60%,#2a0f5c) fixed}
.gx-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1.2rem;padding-top:calc(.7rem + env(safe-area-inset-top,0px))}
.gx-logo,.gx-bar nav a{color:#fff;text-decoration:none;font-weight:800;font-size:.9rem;padding:.35rem .9rem;border-radius:999px;background:rgba(255,255,255,.14)}
.gx-bar nav{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.gx-bar a:hover{background:rgba(255,255,255,.3)}
.gx-top{text-align:center;padding:.4rem 1rem 1rem}
.gx-title{margin:.1rem 0 .3rem;font:900 clamp(2.2rem,8vw,5rem)/1 "Arial Black",system-ui,sans-serif;text-transform:uppercase;background:linear-gradient(90deg,#4fd6ff,#b46cff,#ff5cc8,#ffb35c);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 18px rgba(150,90,255,.55))}
.gx-sub{margin:0;opacity:.85}
#gx-host{max-width:1240px;margin:1rem auto 0;width:calc(100% - 1.6rem);padding:.5rem;border-radius:30px;background:linear-gradient(180deg,#7a5cff,#e040c8 55%,#4fd6ff);box-shadow:0 0 34px rgba(150,90,255,.55),0 18px 40px rgba(0,0,0,.5);box-sizing:border-box}
.gx-app{border-radius:24px;background:#03031a;overflow:hidden;position:relative}
.gx-view{position:relative;height:min(62vh,620px);min-height:320px}
.gx-view canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gx-hud{position:absolute;left:0;right:0;top:10px;text-align:center;font-size:.8rem;opacity:.85;text-shadow:0 0 6px #000;pointer-events:none;padding:0 .5rem}
.gx-bands{position:absolute;left:12px;right:12px;bottom:10px;display:flex;gap:6px;height:34px;align-items:flex-end;pointer-events:none}
.gx-bands i{flex:1;border-radius:6px 6px 0 0;min-height:4px;transition:height .08s,opacity .2s}
.gx-ctl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;padding:.8rem;background:rgba(10,8,40,.9)}
.gx-ctl button,.gx-ctl label.gx-file{border:0;cursor:pointer;color:#fff;font:700 .85rem system-ui;padding:.55rem .9rem;border-radius:999px;background:#2a2468;box-shadow:inset 0 0 0 1px #5a4cc0}
.gx-ctl button:hover,.gx-ctl label.gx-file:hover{background:#3d34a0}
.gx-ctl button.on{background:#7a3cf0;box-shadow:0 0 12px #9a6cff}
.gx-ctl input[type=file]{display:none}
.gx-ctl input[type=range]{accent-color:#b46cff;width:min(160px,40vw)}
.gx-seek{width:100%;display:flex;align-items:center;gap:.6rem;font-size:.75rem;padding:0 .8rem .8rem;background:rgba(10,8,40,.9)}
.gx-seek input{flex:1;accent-color:#ff5cc8}
.gx-foot{text-align:center;padding:2rem 1rem calc(1.6rem + env(safe-area-inset-bottom,0px));opacity:.85}
.gx-foot nav{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:.6rem}
.gx-foot a{color:#cdbfff}
@media(max-width:640px){.gx-ctl button,.gx-ctl label.gx-file{padding:.5rem .7rem;font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.gx-bands i{transition:none}}