/* AirSong como extensão do francodes.dev (18/10). Camada de skin sobre o music.css: fontes do site,
   gradiente fúcsia→roxo, eyebrows em mono/emerald, glows e cards glassy. Não altera layout/estrutura. */

:root{
  --fc-fuchsia:#d946ef; --fc-purple:#9333ea; --fc-emerald:#34d399;
  --fc-slate-950:#020617; --fc-slate-900:#0f172a; --fc-text:#e2e8f0; --fc-muted:#94a3b8;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-sans:'Sora',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}

/* ---- tipografia do site ---- */
body,button,input,select,textarea,p,li,a,aside .intro{font-family:var(--font-sans)}
h1,h2,h3,.brand span,.heading h1,aside h2{font-family:var(--font-display);letter-spacing:-.02em}
.eyebrow,.pill,kbd,.stage-title,.stage-watermark,.hand-bank-labels,.instrument-footer,
.side-description,small,.note-display,#status,.settings label,.brand small,summary span,
.spark,.dot+* ,#mode-label{font-family:var(--font-mono)}

/* ---- fundo slate + glows flutuantes (assinatura do site) ---- */
body{background:var(--fc-slate-950)!important;color:var(--fc-text)}
body::before,body::after{content:"";position:fixed;z-index:-1;width:60vmax;height:60vmax;border-radius:50%;
  filter:blur(90px);opacity:.14;pointer-events:none}
body::before{top:-20vmax;left:-10vmax;background:radial-gradient(circle,var(--fc-fuchsia),transparent 60%)}
body::after{bottom:-25vmax;right:-15vmax;background:radial-gradient(circle,var(--fc-purple),transparent 60%)}

/* ---- headings com brilho fúcsia + ênfase em fúcsia ---- */
.heading h1,aside h2{color:#fff;text-shadow:0 0 28px rgba(217,70,239,.28)}
.heading h1 em,aside h2 em,aside h2 span,.welcome h2 span{color:var(--fc-fuchsia);font-style:normal}

/* ---- eyebrow / kicker: mono, emerald, caixa-alta (igual ao [ // ] do site) ---- */
.eyebrow{color:var(--fc-emerald)!important;text-transform:uppercase;letter-spacing:.22em;font-size:11px}
.eyebrow span{background:var(--fc-emerald)}
.pill{border:1px solid rgba(217,70,239,.35);background:rgba(217,70,239,.08);color:#f0abfc;letter-spacing:.14em}

/* ---- botão primário: gradiente fúcsia→roxo com glow (a assinatura) ---- */
.primary{background:linear-gradient(90deg,var(--fc-fuchsia),var(--fc-purple))!important;border:none!important;
  color:#fff!important;box-shadow:0 14px 34px -12px rgba(217,70,239,.5);font-weight:600;transition:transform .15s}
.primary:hover{transform:translateY(-2px)}

/* ---- botões secundários/ghost ---- */
.secondary,.small-button{border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.03)!important;
  color:var(--fc-text)!important;transition:border-color .15s}
.secondary:hover,.small-button:hover{border-color:rgba(217,70,239,.5)!important}
.text-button{color:var(--fc-fuchsia)!important}
a{color:var(--fc-fuchsia)}
nav a{color:var(--fc-muted)}nav a:hover{color:#fff}

/* ---- cards glassy (instrumento, aside, privacy, settings) ---- */
.instrument,aside,.privacy,.piano-details,.settings{border:1px solid rgba(255,255,255,.1)!important;
  background:rgba(15,23,42,.55)!important;backdrop-filter:blur(8px);border-radius:18px}
.stage{border-radius:16px}
.privacy{border-color:rgba(52,211,153,.3)!important;background:rgba(52,211,153,.06)!important}
.privacy strong{color:var(--fc-emerald)}

/* ---- teclas/notas + detalhes com fúcsia/emerald ---- */
.note-keys>*{border-color:rgba(217,70,239,.25)}
kbd{border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(255,255,255,.04);color:var(--fc-text)}
.dot{background:var(--fc-emerald)!important}
.spark,.brand-symbol i{color:var(--fc-fuchsia)}
select{border:1px solid rgba(255,255,255,.14);background:rgba(2,6,23,.6);color:var(--fc-text);border-radius:10px}
input[type=range]{accent-color:var(--fc-fuchsia)}
.stage-watermark{color:rgba(148,163,184,.5);letter-spacing:.2em}
footer{color:var(--fc-muted)}

/* ---- teclas de NOTA em card escuro glassy (o piano branco/preto real NÃO muda) ---- */
.note-keys{background:transparent!important;padding:0!important}
.note-key{background:rgba(15,23,42,.6)!important;border:1px solid rgba(255,255,255,.1)!important;
  border-radius:14px!important;color:var(--fc-text)!important;backdrop-filter:blur(6px)}
.note-key .key-top,.note-key>span,.note-key>div{background:transparent!important}
.note-key strong,.note-key b,.note-key .big,.note-key .nota{color:#fff!important}
.note-key small,.note-key .finger,.note-key .dedo{color:var(--fc-muted)!important}

/* ---- barras/rotulos auxiliares em tom slate (tira o creme restante) ---- */
.instrument-footer,.hand-bank-labels{background:rgba(2,6,23,.5)!important;color:var(--fc-muted)!important;
  border-color:rgba(255,255,255,.08)!important}
.piano-details>summary{background:rgba(2,6,23,.4)!important;color:var(--fc-text)!important}
.key-top{background:transparent!important}

/* ---- símbolos com PROFUNDIDADE (3D) — sem cara de IA (troquei sparkle por nota musical) ---- */
.spark,.stage-watermark,footer{letter-spacing:.14em}
.spark{display:inline-block;background:linear-gradient(135deg,#d946ef,#9333ea 55%,#34d399);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 5px rgba(217,70,239,.55));font-size:1.15em}
/* o ícone da marca (barrinhas de equalizador) ganha volume: gradiente + sombra projetada */
.brand-symbol{background:linear-gradient(145deg,#1b1033,#0f172a)!important;border:1px solid rgba(217,70,239,.3);
  border-radius:12px;box-shadow:0 8px 22px -8px rgba(217,70,239,.55),inset 0 1px 0 rgba(255,255,255,.08);
  transform:perspective(400px) rotateX(8deg)}
.brand-symbol i{background:linear-gradient(180deg,#f0abfc,#d946ef)!important;box-shadow:0 0 8px rgba(217,70,239,.7)}

/* ---- botão VOLTAR do AirDraw pro AirSong ---- */
.voltar-airsong{display:inline-flex;align-items:center;gap:6px;margin-left:18px;padding:8px 15px;border-radius:11px;
  border:1px solid rgba(217,70,239,.35);background:rgba(217,70,239,.08);font-family:var(--font-mono);font-size:12px;
  color:#f0abfc;text-decoration:none;letter-spacing:.04em;transition:background .15s,border-color .15s,transform .15s}
.voltar-airsong:hover{background:rgba(217,70,239,.18);border-color:rgba(217,70,239,.65);transform:translateX(-2px)}

/* ---- MOVIMENTO: glows derivando no fundo + marca flutuando (sensação de "ar") ---- */
@keyframes fc-ar-1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(7vw,-6vh) scale(1.15)}66%{transform:translate(-5vw,5vh) scale(.92)}}
@keyframes fc-ar-2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-8vw,7vh) scale(1.12)}}
@keyframes fc-float{0%,100%{transform:perspective(400px) rotateX(8deg) translateY(0)}50%{transform:perspective(400px) rotateX(8deg) translateY(-5px)}}
@keyframes fc-pulse{0%,100%{opacity:.5}50%{opacity:1}}
body::before{animation:fc-ar-1 28s ease-in-out infinite}
body::after{animation:fc-ar-2 34s ease-in-out infinite}
.brand-symbol{animation:fc-float 5s ease-in-out infinite}
.eyebrow span,.dot{animation:fc-pulse 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){body::before,body::after,.brand-symbol,.eyebrow span,.dot{animation:none}}

/* ---- 3D: palco elevado + profundidade (o parallax3d.js inclina ao mover o ponteiro) ---- */
.workspace{perspective:1600px}
#stage{transform-style:preserve-3d;transition:transform .2s ease-out;will-change:transform;
  box-shadow:0 45px 100px -45px rgba(217,70,239,.4),0 14px 36px -14px rgba(0,0,0,.65)}
/* corrige o seletor que ficou claro */
select{background:rgba(2,6,23,.78)!important;color:var(--fc-text)!important;border:1px solid rgba(255,255,255,.14)!important}

/* ---- 3D: esqueleto das mãos SALTA pra fora da tela (dentro do #stage com perspectiva) ---- */
#visual{transform:translateZ(55px);filter:drop-shadow(0 18px 30px rgba(217,70,239,.45))}
.camera-shade{transform:translateZ(1px)}

/* ---- lateral "COMO TOCAR" mais bonita e organizada ---- */
aside{padding:26px!important}
.guide-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
aside ol{display:grid;gap:4px;margin:22px 0}
aside ol li{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:14px;transition:background .15s}
aside ol li:hover{background:rgba(217,70,239,.05)}
aside ol li>span{flex-shrink:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;
  border:1px solid rgba(217,70,239,.4);background:linear-gradient(145deg,rgba(217,70,239,.16),rgba(147,51,234,.1));
  font-family:var(--font-mono);font-size:13px;font-weight:600;color:#f0abfc;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
aside ol li strong{display:block;color:#fff;font-family:var(--font-display);font-size:15px;margin-bottom:3px}
aside ol li p{color:var(--fc-muted);font-size:13px;line-height:1.5;margin:0}
/* grupo de ajustes num bloco separado e respirado */
.settings{padding:20px!important;display:grid;gap:18px;margin-top:8px;border-radius:16px!important;
  border-top:1px solid rgba(217,70,239,.2)!important}
.settings label{display:grid;gap:8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;color:var(--fc-muted);text-transform:uppercase}
.settings select{width:100%;padding:11px 13px}
.volume-label{gap:10px!important}

/* ---- seção de privacidade & segurança (reforça a confiança p/ liberar a câmera) ---- */
.privacy-security{display:block!important;margin-top:18px;padding:16px 16px 17px!important;border-radius:16px!important;
  background:linear-gradient(160deg,rgba(16,185,129,.09),rgba(2,6,23,.55))!important;
  border:1px solid rgba(16,185,129,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.privacy-security>svg,.privacy-security>.privacy-icon{display:none!important}
.privacy-security .privacy-head{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.privacy-security .privacy-head strong{font-family:var(--font-display);font-size:14px;color:#fff;letter-spacing:.01em}
.privacy-shield{width:19px;height:19px;flex-shrink:0;color:#34d399;filter:drop-shadow(0 0 8px rgba(16,185,129,.5))}
.privacy-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.privacy-list li{display:block!important;margin:0!important;position:relative;padding-left:20px;font-size:12.5px;line-height:1.5;color:var(--fc-muted)}
.privacy-list li b{color:var(--fc-text);font-weight:600}
.privacy-list li::before{content:"";position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:50%;
  background:#34d399;box-shadow:0 0 7px rgba(16,185,129,.7)}