/* ═══════════════════════════════════════
   NANO page — neon battle theme
   layered on top of style.css
═══════════════════════════════════════ */

:root{
  --nano-bg:    #04040c;
  --nano-bg2:   #07071a;
  --nano-bg3:   #0a0a20;
  --nano-red:   #ff3b5c;
  --nano-cyan:  #00e8ff;
  --nano-amber: #ffae42;
  --nano-purple:#b36bff;
  --nano-green: #6effa5;
  --nano-yellow:#ffe84a;
  --nano-magenta:#ff4fd0;
}

body.nano-body{background:#020208;overflow-x:hidden}

/* ── BACKGROUND VIZ CANVAS (fullpage) ── */
#viz-canvas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;mix-blend-mode:screen}
#bg-canvas{opacity:.35}

/* ── NAV override ── */
.nav-nano{background:rgba(4,4,12,.72);backdrop-filter:blur(18px);border-bottom:1px solid rgba(0,232,255,.08)}
.nano-nav-actions{display:flex;align-items:center;gap:.6rem}
.nano-back{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--nano-cyan)!important;border-color:rgba(0,232,255,.3)!important}
.nano-back:hover{background:rgba(0,232,255,.08);box-shadow:0 0 14px rgba(0,232,255,.3)!important}
.nano-back span:first-child{transition:transform .25s}
.nano-back:hover span:first-child{transform:translateX(-4px)}

/* ══════════════ NANO HERO ══════════════ */
.nano-hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;padding-top:80px;z-index:2}
.nano-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(0,232,255,calc(.055 + var(--beat-pulse,0) * .15)) 1px,transparent 1px),linear-gradient(90deg,rgba(0,232,255,calc(.055 + var(--beat-pulse,0) * .15)) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 90% at 30% 50%,#000 15%,transparent 85%);animation:gridShift 14s linear infinite}
@keyframes gridShift{from{background-position:0 0}to{background-position:60px 60px}}
.nano-hero-scanlines{position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.015) 3px,rgba(255,255,255,.015) 4px);pointer-events:none;animation:scanShift 8s linear infinite}
@keyframes scanShift{from{background-position:0 0}to{background-position:0 100px}}
.nano-hero-glow{position:absolute;top:40%;left:20%;width:800px;height:800px;background:radial-gradient(circle,rgba(255,59,92,.1) 0%,rgba(0,232,255,.06) 30%,transparent 65%);transform:translate(-50%,-50%);animation:nanoGlow 9s ease-in-out infinite;pointer-events:none}
@keyframes nanoGlow{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}

.nano-hero-inner{position:relative;z-index:3;max-width:1340px;margin:0 auto;padding:4rem 2.5rem;display:grid;grid-template-columns:1.2fr .8fr;gap:5rem;align-items:center;width:100%}
.nano-hero-left{animation:fadeUp .9s .1s ease both}
.nano-tag{display:inline-flex;align-items:center;gap:.6rem;font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.25em;color:var(--nano-cyan);background:rgba(0,232,255,.08);border:1px solid rgba(0,232,255,.3);padding:.45rem 1rem;border-radius:2px;margin-bottom:2rem;text-transform:uppercase}
.nano-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--nano-cyan);box-shadow:0 0 8px var(--nano-cyan);animation:dotPulse 1.5s ease-in-out infinite}

.nano-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(6rem,14vw,13rem);letter-spacing:.06em;line-height:.88;margin-bottom:.5rem;position:relative}
.nano-title-glitch{position:relative;color:#fff;display:inline-block;background:linear-gradient(180deg,#fff 0%,#fff 55%,rgba(0,232,255,.6) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 calc(30px + var(--beat-pulse,0) * 40px) rgba(0,232,255,calc(.35 + var(--beat-pulse,0) * .5)));transform:scale(calc(1 + var(--beat-pulse,0) * .02));transition:transform .08s,filter .08s}
.nano-title-glitch::before,.nano-title-glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%;-webkit-text-fill-color:initial;background:none;-webkit-background-clip:initial;background-clip:initial}
.nano-title-glitch::before{color:var(--nano-red);animation:glitch1 3.4s steps(1) infinite;mix-blend-mode:screen;opacity:.7}
.nano-title-glitch::after{color:var(--nano-cyan);animation:glitch2 2.8s steps(1) infinite;mix-blend-mode:screen;opacity:.7}
@keyframes glitch1{0%,92%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}93%{transform:translate(-3px,1px);clip-path:inset(20% 0 55% 0)}95%{transform:translate(2px,-1px);clip-path:inset(60% 0 15% 0)}97%{transform:translate(-2px,2px);clip-path:inset(40% 0 40% 0)}}
@keyframes glitch2{0%,90%,100%{transform:translate(0);clip-path:inset(0 0 100% 0)}91%{transform:translate(3px,-1px);clip-path:inset(10% 0 70% 0)}94%{transform:translate(-2px,1px);clip-path:inset(50% 0 25% 0)}96%{transform:translate(1px,-2px);clip-path:inset(70% 0 10% 0)}}

.nano-genre{font-family:'JetBrains Mono',monospace;font-size:.88rem;font-weight:700;letter-spacing:.3em;color:var(--nano-red);margin-bottom:1.5rem;text-shadow:0 0 10px rgba(255,59,92,.4)}
.nano-sub{color:var(--gray);font-size:1.05rem;line-height:1.7;max-width:540px;margin-bottom:2.5rem}

.nano-specs{display:flex;gap:3rem;border-top:1px solid rgba(0,232,255,.12);padding-top:1.8rem}
.nano-spec{display:flex;flex-direction:column;gap:.4rem}
.nano-spec-k{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--gray);text-transform:uppercase}
.nano-spec-v{font-family:'Bebas Neue',sans-serif;font-size:2rem;color:#fff;letter-spacing:.05em;line-height:1}

/* hero right — icon frame */
.nano-hero-right{display:flex;justify-content:center;animation:fadeUp .9s .25s ease both}
.nano-icon-frame{position:relative;width:360px;height:360px;display:flex;align-items:center;justify-content:center}
.nano-icon-corner{position:absolute;width:28px;height:28px;border:2px solid var(--nano-cyan);box-shadow:0 0 12px rgba(0,232,255,.4)}
.nano-icon-corner.tl{top:0;left:0;border-right:none;border-bottom:none}
.nano-icon-corner.tr{top:0;right:0;border-left:none;border-bottom:none}
.nano-icon-corner.bl{bottom:0;left:0;border-right:none;border-top:none}
.nano-icon-corner.br{bottom:0;right:0;border-left:none;border-top:none}
.nano-icon-img{width:220px;height:220px;border-radius:28px;object-fit:cover;box-shadow:0 0 calc(60px + var(--beat-pulse,0) * 80px) rgba(0,232,255,calc(.3 + var(--beat-pulse,0) * .5)),0 20px 60px rgba(0,0,0,.7);z-index:2;animation:iconFloat 5s ease-in-out infinite}
@keyframes iconFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1deg)}}
.nano-icon-ring{position:absolute;width:300px;height:300px;border:1px solid rgba(0,232,255,.25);border-radius:50%;animation:spin 24s linear infinite}
.nano-icon-ring-2{width:340px;height:340px;border-color:rgba(255,59,92,.15);border-style:dashed;animation:spin 34s linear reverse infinite}

@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* ══════════════ TABS ══════════════ */
.nano-tabs-wrap{position:sticky;top:66px;z-index:50;background:rgba(4,4,12,.92);backdrop-filter:blur(20px);border-top:1px solid rgba(0,232,255,.1);border-bottom:1px solid rgba(0,232,255,.1)}
.nano-tabs{max-width:1340px;margin:0 auto;padding:0 2.5rem;display:flex;gap:0;position:relative}
.nano-tab{background:transparent;border:none;color:var(--gray);font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:1.3rem 2rem;cursor:pointer;transition:color .25s;position:relative}
.nano-tab:hover{color:#fff}
.nano-tab.active{color:var(--nano-cyan);text-shadow:0 0 12px rgba(0,232,255,.4)}
.nano-tab-indicator{position:absolute;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--nano-cyan),var(--nano-red));box-shadow:0 0 10px var(--nano-cyan);transition:left .45s cubic-bezier(.7,0,.3,1),width .45s cubic-bezier(.7,0,.3,1);left:0;width:0}

/* ══════════════ PANELS ══════════════ */
.nano-panel{display:none;position:relative;z-index:2;animation:panelIn .5s ease}
.nano-panel.active{display:block}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.nano-panel-inner{max-width:1340px;margin:0 auto;padding:5rem 2.5rem 6rem}
.nano-panel-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:3rem;border-bottom:1px solid rgba(0,232,255,.1);padding-bottom:1.5rem}
.nano-panel-num{font-family:'JetBrains Mono',monospace;font-size:.85rem;font-weight:700;letter-spacing:.2em;color:var(--nano-cyan)}
.nano-panel-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4.2vw,3.4rem);letter-spacing:.06em;color:#fff;line-height:1}

/* ── OVERVIEW ── */
.nano-over-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}
.nano-over-card{position:relative;padding:2rem 1.8rem;background:linear-gradient(155deg,rgba(0,232,255,.04),rgba(255,59,92,.03));border:1px solid rgba(0,232,255,.12);border-radius:8px;transition:transform .3s,border-color .3s,box-shadow .3s;overflow:hidden}
.nano-over-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,var(--nano-cyan),transparent);opacity:.6}
.nano-over-card:hover{transform:translateY(-5px);border-color:rgba(0,232,255,.4);box-shadow:0 10px 40px rgba(0,232,255,.1)}
.nano-over-icon{font-size:1.8rem;color:var(--nano-cyan);margin-bottom:1rem;text-shadow:0 0 14px rgba(0,232,255,.5)}
.nano-over-card h3{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:.08em;color:#fff;margin-bottom:.6rem}
.nano-over-card p{color:var(--gray);font-size:.9rem;line-height:1.65}

.nano-soon{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:4rem;font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.3em;color:rgba(255,255,255,.3);text-transform:uppercase}
.nano-soon-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,232,255,.3),transparent)}

/* ── CHARACTERS ── */
.nano-char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}
.nano-char-card{position:relative;aspect-ratio:3/4;border:1px solid rgba(0,232,255,.12);border-radius:8px;background:linear-gradient(160deg,rgba(0,232,255,.03),rgba(255,59,92,.02));display:flex;flex-direction:column;justify-content:space-between;padding:1.3rem;overflow:hidden;transition:all .3s}
.nano-char-card:hover{border-color:rgba(0,232,255,.35);transform:translateY(-4px);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.nano-char-card::after{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent 0,transparent 8px,rgba(0,232,255,.02) 8px,rgba(0,232,255,.02) 9px);pointer-events:none}
.nano-char-num{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.22em;color:var(--nano-cyan)}
.nano-char-name{font-family:'Bebas Neue',sans-serif;font-size:3.2rem;letter-spacing:.08em;color:rgba(255,255,255,.15);line-height:.9}
.nano-char-locked{font-family:'JetBrains Mono',monospace;font-size:.6rem;font-weight:700;letter-spacing:.25em;color:var(--nano-red);background:rgba(255,59,92,.08);border:1px solid rgba(255,59,92,.25);padding:.3rem .6rem;align-self:flex-start;border-radius:2px}

/* ══════════════ MUSIC PANEL ══════════════ */
.nano-music-lede{color:var(--gray);font-size:1rem;max-width:640px;margin-bottom:3rem;line-height:1.65}

/* stage */
.nano-stage{position:relative;width:100%;aspect-ratio:16/9;max-height:560px;border:1px solid rgba(0,232,255,.15);border-radius:14px;overflow:hidden;margin-bottom:3rem;background:radial-gradient(ellipse at center,rgba(0,0,0,.4) 0%,#020208 75%)}
.nano-stage-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,232,255,.08) 0%,transparent 55%);transition:background .7s;pointer-events:none;z-index:1}
.nano-stage.playing .nano-stage-bg{animation:stagePulse 2s ease-in-out infinite}
@keyframes stagePulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}

/* ── loading state ── */
.nano-stage-loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;background:rgba(2,2,10,.65);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s}
.nano-stage.loading .nano-stage-loader{opacity:1;pointer-events:auto}
.nano-loader-ring{width:54px;height:54px;border:2px solid rgba(0,232,255,.15);border-top-color:var(--active-color,var(--nano-cyan));border-right-color:var(--active-color,var(--nano-cyan));border-radius:50%;animation:spin 1s linear infinite;box-shadow:0 0 24px rgba(0,232,255,.25);margin-bottom:1.1rem}
.nano-loader-text{font-family:'JetBrains Mono',monospace;font-size:.7rem;font-weight:700;letter-spacing:.35em;color:var(--active-color,var(--nano-cyan));text-transform:uppercase;text-shadow:0 0 10px currentColor}
.nano-loader-text::after{content:'';animation:loadDots 1.4s steps(4,end) infinite}
@keyframes loadDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* play button shows loading too */
.nano-stage.loading .nano-player-play{pointer-events:none;opacity:.6}
.nano-stage.loading .nano-player-play::after{content:'';position:absolute;inset:-2px;border:2px solid transparent;border-top-color:var(--active-color,var(--nano-cyan));border-radius:50%;animation:spin .9s linear infinite}
.nano-player-play{position:relative}

.nano-stage-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2;pointer-events:none}
.nano-ring{position:absolute;border:1px solid rgba(0,232,255,.2);border-radius:50%;aspect-ratio:1;width:42%;animation:ringPulse 4s ease-in-out infinite;transform:scale(calc(1 + var(--beat-pulse,0) * .08));transition:transform .08s}
.nano-ring:nth-child(2){width:55%;animation-delay:1s;border-color:rgba(255,59,92,.12)}
.nano-ring:nth-child(3){width:68%;animation-delay:2s;border-style:dashed;border-color:rgba(179,107,255,.1)}
@keyframes ringPulse{0%,100%{opacity:.4}50%{opacity:.8}}

#spectrum{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

.nano-stage-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:4;padding:2rem;text-align:center}
.nano-stage-mood{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.35em;color:var(--nano-cyan);margin-bottom:1rem;text-transform:uppercase;text-shadow:0 0 12px currentColor;transition:color .5s,text-shadow .5s}
.nano-stage-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,5vw,4.2rem);letter-spacing:.06em;color:#fff;line-height:1;margin-bottom:.5rem;transition:text-shadow .5s}
.nano-stage.playing .nano-stage-title{text-shadow:0 0 25px var(--nano-cyan)}
.nano-stage-sub{font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.25em;color:var(--gray);text-transform:uppercase;margin-bottom:2rem}

.nano-player{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.5rem}
.nano-player-btn{width:44px;height:44px;border-radius:50%;border:1px solid rgba(0,232,255,.3);background:rgba(0,232,255,.05);color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;font-family:inherit}
.nano-player-btn:hover{border-color:var(--nano-cyan);background:rgba(0,232,255,.15);box-shadow:0 0 18px rgba(0,232,255,.4)}
.nano-player-play{width:60px;height:60px;font-size:1.3rem;background:linear-gradient(135deg,rgba(0,232,255,.2),rgba(255,59,92,.15));border-color:var(--nano-cyan);box-shadow:0 0 24px rgba(0,232,255,.3)}
.nano-player-play:hover{box-shadow:0 0 32px rgba(0,232,255,.6)}

.nano-progress{position:relative;width:min(480px,80%);height:6px;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer;margin-bottom:.6rem;touch-action:none}
.nano-progress::before{content:'';position:absolute;inset:-10px 0;cursor:pointer}
.nano-progress-fill{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,var(--nano-cyan),var(--nano-red));border-radius:3px;box-shadow:0 0 10px var(--nano-cyan);pointer-events:none}
.nano-progress-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);left:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--nano-cyan),0 0 0 3px rgba(0,232,255,.15);opacity:.7;transition:opacity .2s,transform .15s;pointer-events:none}
.nano-progress:hover .nano-progress-thumb,.nano-progress.dragging .nano-progress-thumb{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
.nano-time{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.15em;color:var(--gray);display:flex;gap:1.5rem;width:min(480px,80%);justify-content:space-between;margin-bottom:1.2rem}

/* ── VOLUME ── */
.nano-volume{display:flex;align-items:center;gap:.8rem;margin-top:.4rem}
.nano-vol-btn{background:transparent;border:none;color:var(--gray);font-size:1rem;cursor:pointer;padding:.3rem;line-height:1;transition:color .2s,transform .2s}
.nano-vol-btn:hover{color:var(--nano-cyan);transform:scale(1.1)}
.nano-vol-bar{position:relative;width:120px;height:4px;background:rgba(255,255,255,.08);border-radius:2px;cursor:pointer;touch-action:none}
.nano-vol-bar::before{content:'';position:absolute;inset:-10px 0;cursor:pointer}
.nano-vol-fill{position:absolute;top:0;left:0;height:100%;width:80%;background:linear-gradient(90deg,var(--nano-cyan),var(--nano-purple));border-radius:2px;box-shadow:0 0 8px var(--nano-cyan);pointer-events:none}
.nano-vol-thumb{position:absolute;top:50%;transform:translate(-50%,-50%);left:80%;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 0 10px var(--nano-cyan);opacity:.8;transition:opacity .2s,transform .15s;pointer-events:none}
.nano-vol-bar:hover .nano-vol-thumb,.nano-vol-bar.dragging .nano-vol-thumb{opacity:1;transform:translate(-50%,-50%) scale(1.2)}

/* ── TRACKLIST ── */
.nano-tracklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.9rem}
.nano-track{position:relative;display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;background:rgba(10,10,32,.6);border:1px solid rgba(0,232,255,.08);border-radius:8px;cursor:pointer;transition:all .25s;overflow:hidden}
.nano-track::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--track-color,var(--nano-cyan));opacity:0;transition:opacity .25s;box-shadow:0 0 12px var(--track-color,var(--nano-cyan))}
.nano-track:hover{background:rgba(10,10,32,.9);border-color:rgba(0,232,255,.25);transform:translateX(4px)}
.nano-track:hover::before{opacity:1}
.nano-track.active{background:linear-gradient(90deg,rgba(0,232,255,.08),rgba(0,0,0,0) 70%);border-color:var(--track-color,var(--nano-cyan));box-shadow:0 0 24px rgba(0,232,255,.1)}
.nano-track.active::before{opacity:1}

.nano-track-num{font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;letter-spacing:.2em;color:var(--gray);min-width:28px}
.nano-track.active .nano-track-num{color:var(--track-color,var(--nano-cyan))}
.nano-track-icon{width:38px;height:38px;border-radius:6px;background:linear-gradient(135deg,var(--track-color,var(--nano-cyan)),rgba(0,0,0,.3));display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;flex-shrink:0;box-shadow:0 0 12px -4px var(--track-color,var(--nano-cyan))}
.nano-track.playing .nano-track-icon{animation:trackIconPulse 1.2s ease-in-out infinite}
@keyframes trackIconPulse{0%,100%{box-shadow:0 0 12px -4px var(--track-color,var(--nano-cyan))}50%{box-shadow:0 0 24px var(--track-color,var(--nano-cyan))}}
.nano-track.loading .nano-track-title::after{content:' · loading';font-size:.6rem;font-family:'JetBrains Mono',monospace;color:var(--track-color,var(--nano-cyan));letter-spacing:.2em;text-transform:uppercase;opacity:.8}

.nano-track-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;overflow:hidden}
.nano-track-title{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;letter-spacing:.06em;color:#fff;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nano-track-mood{font-family:'JetBrains Mono',monospace;font-size:.62rem;font-weight:700;letter-spacing:.2em;color:var(--track-color,var(--gray));text-transform:uppercase}

.nano-track-bars{display:flex;align-items:flex-end;gap:2px;height:18px}
.nano-track-bars span{display:block;width:2px;height:30%;background:var(--track-color,var(--nano-cyan));opacity:.3;border-radius:1px;transition:opacity .2s}
.nano-track.playing .nano-track-bars span{animation:trackBar .9s ease-in-out infinite;opacity:1}
.nano-track.playing .nano-track-bars span:nth-child(2){animation-delay:.15s}
.nano-track.playing .nano-track-bars span:nth-child(3){animation-delay:.3s}
.nano-track.playing .nano-track-bars span:nth-child(4){animation-delay:.2s}
@keyframes trackBar{0%,100%{height:25%}50%{height:100%}}

.nano-track-dur{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.1em;color:var(--gray);min-width:36px;text-align:right}

/* ══════════════ MINI REMOTE ══════════════ */
.nano-remote{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:500;
  width:320px;padding:1rem 1.1rem;
  background:linear-gradient(160deg,rgba(10,10,28,.95),rgba(4,4,12,.95));
  border:1px solid rgba(0,232,255,.25);
  border-radius:12px;
  backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.6),0 0 40px rgba(0,232,255,.12);
  transform:translateY(120%) scale(.9);opacity:0;pointer-events:none;
  transition:transform .45s cubic-bezier(.2,.9,.3,1.3),opacity .35s;
  overflow:hidden;
}
.nano-remote.show{transform:translateY(0) scale(1);opacity:1;pointer-events:auto}
.nano-remote-glow{position:absolute;inset:-1px;background:linear-gradient(120deg,transparent,var(--active-color,rgba(0,232,255,.3)),transparent);opacity:.15;pointer-events:none;animation:remoteGlow 4s ease-in-out infinite}
@keyframes remoteGlow{0%,100%{opacity:.1}50%{opacity:.25}}
.nano-remote::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--active-color,var(--nano-cyan)),transparent);box-shadow:0 0 10px var(--active-color,var(--nano-cyan))}

.nano-remote-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;position:relative;z-index:2}
.nano-remote-eq{display:flex;align-items:flex-end;gap:2px;height:18px;flex-shrink:0}
.nano-remote-eq span{display:block;width:3px;height:30%;background:var(--active-color,var(--nano-cyan));border-radius:1px;opacity:.45;box-shadow:0 0 calc(var(--beat-pulse,0) * 8px) var(--active-color,var(--nano-cyan))}
.nano-remote.playing .nano-remote-eq span{animation:remoteEq 1s ease-in-out infinite;opacity:1}
.nano-remote.playing .nano-remote-eq span:nth-child(2){animation-delay:.12s}
.nano-remote.playing .nano-remote-eq span:nth-child(3){animation-delay:.28s}
.nano-remote.playing .nano-remote-eq span:nth-child(4){animation-delay:.18s}
@keyframes remoteEq{0%,100%{height:25%}50%{height:100%}}

.nano-remote-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.15rem;overflow:hidden}
.nano-remote-mood{font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:700;letter-spacing:.28em;color:var(--active-color,var(--nano-cyan));text-transform:uppercase;text-shadow:0 0 8px currentColor}
.nano-remote-title{font-family:'Bebas Neue',sans-serif;font-size:1.15rem;letter-spacing:.05em;color:#fff;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.nano-remote-close{background:transparent;border:none;color:var(--gray);font-size:.8rem;cursor:pointer;padding:.25rem .4rem;line-height:1;border-radius:4px;transition:all .2s}
.nano-remote-close:hover{color:#fff;background:rgba(255,255,255,.06)}

.nano-remote-progress{position:relative;width:100%;height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-bottom:.75rem;overflow:hidden}
.nano-remote-fill{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,var(--active-color,var(--nano-cyan)),rgba(255,255,255,.3));border-radius:2px;box-shadow:0 0 8px var(--active-color,var(--nano-cyan))}

.nano-remote-ctrls{display:flex;align-items:center;gap:.55rem;position:relative;z-index:2}
.nano-remote-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,232,255,.2);background:rgba(0,232,255,.04);color:#fff;font-size:.78rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:inherit}
.nano-remote-btn:hover{border-color:var(--active-color,var(--nano-cyan));background:rgba(0,232,255,.12);box-shadow:0 0 12px rgba(0,232,255,.3)}
.nano-remote-play{width:40px;height:40px;font-size:.95rem;background:linear-gradient(135deg,rgba(0,232,255,.2),rgba(255,59,92,.12));border-color:var(--active-color,var(--nano-cyan));box-shadow:0 0 16px rgba(0,232,255,.25)}
.nano-remote-jump{margin-left:auto;font-size:.85rem}

/* responsive */
@media(max-width:960px){
  .nano-hero-inner{grid-template-columns:1fr;gap:3rem;padding:2.5rem 1.5rem}
  .nano-hero-right{order:-1}
  .nano-icon-frame{width:260px;height:260px}
  .nano-icon-img{width:160px;height:160px}
  .nano-icon-ring{width:220px;height:220px}
  .nano-icon-ring-2{width:250px;height:250px}
  .nano-specs{gap:1.5rem;flex-wrap:wrap}
  .nano-tabs{padding:0 1.2rem;overflow-x:auto;scrollbar-width:none}
  .nano-tabs::-webkit-scrollbar{display:none}
  .nano-tab{padding:1.1rem 1.2rem;white-space:nowrap}
  .nano-panel-inner{padding:3rem 1.5rem 4rem}
  .nano-stage{aspect-ratio:4/3}
  .nano-remote{right:.75rem;left:.75rem;bottom:.75rem;width:auto}
}