.mock-aplicativo{--tela:#121212;--borda:#ffffff1a;--apagado:#f1f1f161;--acento:var(--color-secondary)}.mock-aplicativo .janela{opacity:.7;border:1px solid var(--borda);background:#1b1b1b;border-radius:16px;width:880px;height:600px;position:absolute;overflow:hidden;box-shadow:0 40px 120px #0009}.mock-aplicativo .janela .barra{align-items:center;gap:7px;height:36px;padding:0 14px;display:flex}.mock-aplicativo .janela .barra i{background:#ffffff2e;border-radius:50%;width:11px;height:11px}.mock-aplicativo .editor{background:var(--tela);flex-direction:column;font-size:13px;display:flex;position:absolute;inset:36px 0 0}.mock-aplicativo .editor header{border-bottom:1px solid var(--borda);flex-shrink:0;align-items:center;gap:14px;height:56px;padding:0 20px;display:flex}.mock-aplicativo .editor header .nome{flex:1}.mock-aplicativo .editor header b{font-size:15px;font-weight:600;display:block}.mock-aplicativo .editor header span{color:var(--apagado);font-size:12px}.mock-aplicativo .editor .botao{color:#f1f1f19e;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500}.mock-aplicativo .editor .botao.principal{background:var(--acento);color:#fff;font-weight:600}.mock-aplicativo .colunas{flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid}.mock-aplicativo .ver{flex-direction:column;min-height:0;display:flex}.mock-aplicativo .abas{border-bottom:1px solid #ffffff0d;gap:6px;padding:8px 18px 0;display:flex}.mock-aplicativo .abas span{color:var(--apagado);border-bottom:2px solid #0000;margin-bottom:-1px;padding:7px 10px;font-size:12px}.mock-aplicativo .abas span.ativa{color:var(--color-base-content);border-color:var(--acento);font-weight:500}.mock-aplicativo .desvios{flex:1;padding:18px 28px;font-size:14px;line-height:1.75;overflow:hidden}.mock-aplicativo .desvios .w{vertical-align:top;border-radius:4px;flex-direction:column;align-items:flex-start;display:inline-flex}.mock-aplicativo .desvios .w small{color:var(--apagado);font-size:11px;line-height:1.2}.mock-aplicativo .desvios .tocando{background:#a855f738}.mock-aplicativo .desvios .aprox{color:var(--color-warning)}.mock-aplicativo .desvios .nao{color:#f1f1f14d}.mock-aplicativo .desvios .extra{color:#38bdf8cc;font-size:12px}.mock-aplicativo .desvios .vazia{height:14px}.mock-aplicativo .desvios .vezes{color:var(--apagado);margin-left:6px;font-size:11px}.mock-aplicativo .tocador{border-top:1px solid #ffffff0d;align-items:center;gap:12px;padding:10px 24px;display:flex}.mock-aplicativo .tocador .play{background:#ffffff1a;border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.mock-aplicativo .tocador .tempo{color:var(--apagado);font-variant-numeric:tabular-nums;font-size:11px}.mock-aplicativo .tocador .trilha{background:#ffffff1f;border-radius:2px;flex:1;height:4px;position:relative}.mock-aplicativo .tocador .trilha:before{content:"";background:#f1f1f19e;border-radius:2px;position:absolute;inset:0 66% 0 0}.mock-aplicativo .texto-cifra{border-left:1px solid var(--borda);background:#ffffff06;flex-direction:column;min-height:0;display:flex}.mock-aplicativo .texto-cifra .topo{color:var(--apagado);justify-content:space-between;padding:14px 24px 4px;font-size:11px;display:flex}.mock-aplicativo .texto-cifra pre{padding:8px 24px;font-size:11.5px;line-height:1.65;overflow:hidden}.mock-aplicativo .celular{background:#1a1a1a;border:2px solid #ffffff24;border-radius:56px;width:380px;height:720px;padding:9px;position:absolute;box-shadow:0 30px 90px #000c,inset 0 0 0 9px #050505}.mock-aplicativo .celular .tela{background:var(--tela);border-radius:48px;width:100%;height:100%;position:relative;overflow:hidden}.mock-aplicativo .celular .ilha{z-index:3;background:#000;border-radius:18px;width:110px;height:32px;position:absolute;top:14px;left:50%;transform:translate(-50%)}.mock-aplicativo .celular .barra-de-status{z-index:3;justify-content:space-between;align-items:center;font-size:15px;font-weight:600;display:flex;position:absolute;top:20px;left:40px;right:36px}.mock-aplicativo .celular .cabecalho{z-index:2;background:var(--tela);border-bottom:1px solid var(--borda);justify-content:space-between;align-items:flex-end;padding:66px 22px 12px;display:flex;position:absolute;top:0;left:0;right:0}.mock-aplicativo .celular .cabecalho b{font-size:16px;font-weight:600;display:block}.mock-aplicativo .celular .cabecalho span{color:var(--apagado);font-size:13px}.mock-aplicativo .ouvindo{color:var(--acento);align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.mock-aplicativo .ouvindo i{background:var(--acento);border-radius:50%;width:8px;height:8px;animation:1.4s ease-in-out infinite pulso-ouvindo;box-shadow:0 0 0 5px #a855f72e}.mock-aplicativo .celular .area-da-cifra{position:absolute;inset:118px 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 0,#000 60px);mask-image:linear-gradient(#0000 0,#000 60px)}.mock-aplicativo .celular .cifra{white-space:pre;padding:0 16px 0 22px;line-height:1.5;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.mock-aplicativo .celular .secao{margin-top:.8em}.mock-aplicativo .celular .palavra{border-radius:.2em;transition:background .12s,color .12s}.mock-aplicativo .celular .palavra.cantada{background:var(--color-base-content);color:var(--color-base-100)}.mock-aplicativo .acorde{color:var(--acento);font-weight:600}.mock-aplicativo .titulo-da-secao{color:var(--apagado)}@keyframes pulso-ouvindo{50%{box-shadow:0 0 0 9px #0000}}.progresso-da-troca-automatica{height:0;animation:linear forwards progresso-da-troca-automatica}@keyframes progresso-da-troca-automatica{to{height:100%}}.simulacao-do-instant .legenda{vertical-align:middle;width:22px;height:3px;margin-right:8px;display:inline-block}.simulacao-do-instant .notebook{width:628px;position:absolute;top:0;left:36px}.simulacao-do-instant .notebook .moldura{background:#1a1a1a;border:2px solid #ffffff24;border-radius:18px 18px 6px 6px;height:400px;padding:14px;box-shadow:0 30px 90px #000c}.simulacao-do-instant .notebook .tela{background:#121212;border-radius:6px;width:100%;height:100%;position:relative;overflow:hidden}.simulacao-do-instant .notebook .base{background:linear-gradient(#2a2a2a,#161616);border:1px solid #ffffff1a;border-radius:2px 2px 14px 14px;height:20px;margin:0 -34px}.simulacao-do-instant .notebook .cabecalho{z-index:2;background:#121212;border-bottom:1px solid #ffffff1a;padding:16px 26px 12px;position:absolute;top:0;left:0;right:0}.simulacao-do-instant .notebook .cabecalho b{font-size:16px;font-weight:600;display:block}.simulacao-do-instant .notebook .cabecalho span{color:#f1f1f180;font-size:13px}.simulacao-do-instant .notebook .area-da-letra{position:absolute;inset:62px 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(#0000 0,#000 40px);mask-image:linear-gradient(#0000 0,#000 40px)}.simulacao-do-instant .letra{white-space:nowrap;padding:40px 28px 0;font-size:26px;line-height:1.3;transition:transform .45s cubic-bezier(.2,.7,.2,1)}.simulacao-do-instant .inicio-de-estrofe{margin-top:24px}.simulacao-do-instant .palavra{border-radius:4px;padding:0 1px;transition:background .12s,color .12s,box-shadow .12s}.simulacao-do-instant .palavra.mostrada{background:var(--color-secondary);color:#fff}.simulacao-do-instant .palavra.cantada{box-shadow:0 0 0 2px #f1f1f1}
