@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap'); :root{ /* AS SEIS FERRAMENTAS FALAM UMA COR SÓ: o verde clássico da marca. Até 01/09/2026 cada uma tinha a sua (Timer ouro, Music índigo, Prática jade), e o app parecia seis aplicativos diferentes num só. Agora o VERDE é o ambiente: rótulos, bordas, ícones, brilhos. E o OURO ficou reservado ao que se aperta, então ele passou a significar uma coisa só: aqui se age. Salvar, iniciar, enviar. Duas exceções, e as duas porque ali a cor CARREGA SENTIDO, não decora: as sete cores dos chakras e as quatro fases do anel do Dojo Breath. */ --acento:#2C6E3F; --acento-claro:#5FA97A; --floresta:#0D1A10; --creme:#FBF8F0; --ouro:#C9A94F; --ouro-claro:#dcc070; --ouro-escuro:#8b6f47; --pergaminho:#F5F1E8; --serif:Georgia,"Times New Roman",serif; --sans:'Jost',Helvetica,Arial,sans-serif; /* Quanto a barra fixa de baixo ocupa DE VERDADE. Ela mede ~52px e ainda soma env(safe-area-inset-bottom) no próprio padding, que no iPhone com barra de gestos vale uns 34px. As telas reservavam 92px fixos e esqueciam a área segura: no iPhone a barra subia por cima das últimas linhas da fila, e a música de baixo não recebia o toque. Reservar por token faz esse cálculo existir num lugar só. */ --dock:calc(96px + env(safe-area-inset-bottom)); } /* ===== UMA COR SÓ PARA AS SEIS FERRAMENTAS ===== Cada ferramenta tinha a sua: Timer âmbar, Music índigo, Sessão jade. Vistas uma de cada vez pareciam identidade; vistas em seguida, no mesmo app, pareciam seis aplicativos diferentes. Agora o brilho de entrada é o mesmo verde em todas, e o que distingue uma da outra é o que ela faz. */ .sec-timer, .sec-music, .sec-sessao{background:radial-gradient(120% 42% at 50% -8%,rgba(44,110,63,.16),transparent 60%)} /* O --music marcava "você está no Music" (chip ligado, aba). Continua existindo como nome, e agora aponta para o mesmo verde: assim nenhuma regra que o usa precisou mudar. */ .sec-music{--music:var(--acento)} /* fundos com fill escuro pedem texto claro */ .sec-sessao .s-opt.on{color:var(--creme)} *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation} body{background:var(--floresta);color:var(--creme);font-family:var(--serif);-webkit-font-smoothing:antialiased;accent-color:var(--acento);transition:background .35s ease;touch-action:manipulation;overscroll-behavior:none;-webkit-tap-highlight-color:transparent} @keyframes ossFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} .view:not([hidden]){animation:ossFade .28s ease} /* evita zoom automático do iOS ao focar campos de texto (precisa ser >=16px) */ input[type="text"],input[type="password"],input[type="search"],input[type="number"]{font-size:16px} /* gate */ #oss-gate{position:fixed;inset:0;background:var(--floresta);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;font-family:var(--sans)} .oss-gate-card{max-width:360px;width:100%;text-align:center;border:1px solid rgba(44,110,63,.18);padding:48px 36px} .oss-gate-logo{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--acento)} .oss-gate-sub{font-size:.62rem;letter-spacing:3px;text-transform:uppercase;color:rgba(251,248,240,.45);margin:6px 0 34px} #oss-gate-form{display:flex;flex-direction:column;gap:12px} #oss-gate-input{background:transparent;border:1px solid rgba(245,241,232,.2);padding:14px;color:var(--creme);text-align:center;letter-spacing:1px;outline:none;font-family:var(--sans)} #oss-gate-input:focus{border-color:var(--acento)} #oss-gate-form button{background:#2C6E3F;color:var(--creme);border:none;padding:14px;font-family:var(--sans);font-weight:700;letter-spacing:3px;text-transform:uppercase;font-size:.7rem;cursor:pointer} .oss-gate-error{color:#C4522A;font-size:.7rem;margin-top:12px;opacity:0} .oss-gate-error.visible{opacity:1} /* app shell */ #app{max-width:520px;margin:0 auto;min-height:100vh;padding:calc(28px + env(safe-area-inset-top)) 22px var(--dock)} .view{display:block} .view[hidden]{display:none} #tabbar{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:center;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(13,26,16,.92);border-top:1px solid rgba(44,110,63,.2);backdrop-filter:blur(8px)} .tab{font-family:var(--sans);font-size:.7rem;text-transform:uppercase;letter-spacing:2px;font-weight:600;color:rgba(251,248,240,.6);background:none;border:none;padding:8px 16px;cursor:pointer} .tab.active{color:var(--floresta);background:var(--acento);border-radius:999px} /* aba ativa recebe a cor da seção (reforça onde você está) */ body[data-sec="music"] .tab.active{background:#8fabea} body[data-sec="sessao"] .tab.active{background:var(--acento)} .tab:disabled{opacity:.35;cursor:default} /* O BOTÃO FLUTUANTE DO GONGO SAIU EM 01/09/2026. Ele era um círculo de 60px preso no canto de baixo direito e ficava por cima da grade de pads da Mesa: o professor ia tocar o shaker 8 ou o 16 e acertava o gongo. Vai voltar, com outro lugar. O código inteiro está no git, neste commit: procure por gongo-btn (aqui) e b-sino-fab (no Dojo). */ /* botão de refresh — bem sutil, canto superior esquerdo */ #refresh-btn{ position:fixed;left:12px;top:calc(10px + env(safe-area-inset-top)); width:30px;height:30px;border-radius:50%;border:none;cursor:pointer;z-index:60; display:flex;align-items:center;justify-content:center; background:transparent;color:rgba(251,248,240,.32); transition:color .2s,transform .1s;-webkit-tap-highlight-color:transparent; } #refresh-btn svg{width:16px;height:16px} #refresh-btn:active{transform:scale(.9)} #refresh-btn.girando{color:var(--acento)} #refresh-btn.girando svg{animation:girar .8s linear infinite} @keyframes girar{to{transform:rotate(360deg)}} /* timer */ .t-head{text-align:center;margin-bottom:18px;position:relative} /* ícone do diário (canto superior direito, só na Meditação) */ .t-diario-btn{position:absolute;right:0;top:-2px;width:38px;height:38px;border:1px solid rgba(44,110,63,.3);border-radius:50%;background:transparent;color:var(--acento-claro);display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s} .t-diario-btn[hidden]{display:none} .t-diario-btn:active{transform:scale(.92)} .t-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:4px;font-size:.6rem;font-weight:600;color:var(--acento)} .t-title{font-family:var(--serif);font-weight:300;font-size:2rem;margin-top:8px} .t-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px} .t-mode{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.64rem;font-weight:600;padding:12px;border:1px solid rgba(44,110,63,.3);color:rgba(251,248,240,.7);background:none;cursor:pointer} .t-mode.active{background:var(--acento);color:var(--floresta);border-color:var(--acento)} /* (Breathwork fora do ar: com 4 modos o grid 2x2 fica simetrico, sem full-width. Se recolocar o Breathwork, o 5o botao fica sozinho na ultima linha e volta o grid-column:1/-1 nele.) */ .t-clock{text-align:center;margin:12px 0 22px} .t-time{font-family:var(--serif);font-weight:300;font-size:4.2rem;letter-spacing:2px} .t-phase{font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.7rem;color:var(--acento-claro);min-height:1em;margin-top:4px} /* Cronômetro total da aula (Yin): tempo real decorrido, nunca para */ .t-total{font-family:var(--sans);text-transform:uppercase;letter-spacing:2.5px;font-size:.62rem;color:rgba(251,248,240,.45);margin-top:8px} /* Espera Yin: fase segurada em 00:00 até o professor dar ▶ */ .t-espera .t-time{color:var(--acento-claro);opacity:.55} .t-espera .t-total{color:var(--acento-claro)} .t-espera .t-pause{background:rgba(44,110,63,.16);border-color:rgba(44,110,63,.75);color:var(--creme);animation:t-espera-pulse 1.6s ease-in-out infinite} @keyframes t-espera-pulse{0%,100%{box-shadow:0 0 0 rgba(44,110,63,0)}50%{box-shadow:0 0 14px rgba(44,110,63,.45)}} .t-seq{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap} .t-seq .s{width:20px;height:4px;border-radius:2px;background:rgba(251,248,240,.16)} .t-seq .s.done{background:var(--acento)} .t-seq .s.now{background:var(--acento-claro);box-shadow:0 0 8px rgba(44,110,63,.6)} .t-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:16px} .t-fields label{display:flex;flex-direction:column;gap:6px;font-family:var(--sans);font-size:.6rem;text-transform:uppercase;letter-spacing:1px;color:rgba(251,248,240,.6);text-align:center} .t-fields input{background:transparent;border:1px solid rgba(44,110,63,.3);color:var(--creme);padding:10px;text-align:center;font-family:var(--sans);font-size:1rem} /* Personalizado: aula por etapas */ .t-aula{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .t-aula-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(44,110,63,.24);padding:11px 14px;cursor:default} .t-aula-nome{font-family:var(--serif);font-size:1.02rem;color:var(--creme)} .t-aula-inp{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.7rem;color:rgba(251,248,240,.55)} .t-aula-inp input{width:58px;background:transparent;border:1px solid rgba(44,110,63,.3);color:var(--creme);padding:8px;text-align:center;font-family:var(--sans);font-size:1rem} .t-aula-inp em{font-style:normal} /* rótulo de seção dentro de um painel de configuração */ .t-secao-label{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:700;color:var(--acento);margin-bottom:9px;text-align:center} /* Yin: nomes das posturas (asanas) */ .t-yin-asanas{margin-top:18px} .t-yin-asanas .t-secao-label{margin-bottom:12px} .t-yin-asanas .t-secao-label em{font-family:var(--serif);text-transform:none;letter-spacing:0;font-style:italic;font-weight:400;color:rgba(251,248,240,.45);font-size:.78rem} .t-asana-row{display:flex;align-items:center;gap:12px;margin-bottom:8px} .t-asana-n{font-family:var(--sans);text-transform:uppercase;letter-spacing:1px;font-size:.6rem;font-weight:700;color:var(--acento);width:26px;flex:none;text-align:right} .t-asana-sel{flex:1;min-width:0;max-width:100%;font-family:var(--sans);font-size:16px;background:rgba(13,26,16,.6);color:var(--creme);border:1px solid rgba(44,110,63,.3);padding:10px 11px;cursor:pointer;text-overflow:ellipsis} .t-presets{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px} .t-preset{font-family:var(--sans);font-size:.72rem;min-width:44px;padding:9px 0;border:1px solid rgba(44,110,63,.28);background:none;color:rgba(251,248,240,.72);cursor:pointer} /* campo de minutos digitado, embutido como última "célula" dos presets */ .t-preset-min{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 12px;border-style:dashed;border-color:rgba(44,110,63,.5)} .t-preset-min input{width:30px;background:transparent;border:none;border-bottom:1px solid rgba(44,110,63,.65);color:var(--creme);font-family:var(--sans);font-size:.95rem;text-align:center;outline:none;-moz-appearance:textfield;padding:0 0 1px} .t-preset-min input::-webkit-outer-spin-button,.t-preset-min input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .t-preset-min em{font-style:normal;font-family:var(--sans);font-size:.58rem;color:rgba(251,248,240,.5)} .t-preset-min:focus-within{border-style:solid;border-color:rgba(44,110,63,.9);background:rgba(44,110,63,.08)} .t-preset-min:focus-within input{border-bottom-color:rgba(44,110,63,1)} .t-custom{display:block;text-align:center;font-family:var(--sans);font-size:.72rem;color:rgba(251,248,240,.7);margin-bottom:14px} .t-custom[hidden]{display:none} .t-sound{text-transform:none} .t-custom input{width:70px;margin-left:8px;background:transparent;border:1px solid rgba(44,110,63,.3);color:var(--creme);padding:8px;text-align:center;font-family:var(--sans)} .t-sounds{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:16px} .t-sounds[hidden]{display:none} .t-sound{font-family:var(--sans);font-size:.68rem;text-transform:capitalize;padding:8px 13px;border-radius:999px;border:1px solid rgba(44,110,63,.22);background:none;color:rgba(251,248,240,.7);cursor:pointer} .t-sound.on{border-color:var(--acento);color:var(--acento-claro)} .t-vibra{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-size:.72rem;color:rgba(251,248,240,.7);margin-bottom:20px} /* O OURO DOS BOTÕES DE AÇÃO. O ambiente das ferramentas é verde; o ouro ficou reservado ao que se aperta para algo acontecer: iniciar, salvar, enviar, tocar. Com uma cor só para isso, o ouro passou a significar "aqui se age" em vez de ser enfeite. O que é ESTADO continua verde de propósito: aba escolhida, modo escolhido, chip ligado. Estado não é ação. */ .t-start{display:block;width:100%;padding:16px;border:none;border-radius:999px;background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));color:var(--floresta);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.78rem;cursor:pointer} /* tela de prática focada (ao dar play): esconde a config, centraliza o cronômetro */ .view.t-rodando:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100dvh - 150px);text-align:center} .t-rodando .t-head, .t-rodando .t-modes, .t-rodando .t-cfg, .t-rodando .t-sounds, .t-rodando .t-vibra, .t-rodando .t-guardados{display:none} .t-rodando .t-clock{margin:0 0 42px} .t-rodando .t-time{font-size:5.2rem} .t-rodando .t-phase{font-size:.92rem;letter-spacing:3px;margin-top:16px} .t-rodando .t-seq{margin-top:22px} .t-start[hidden]{display:none} /* controles durante a prática: Pausar (principal) + encerrar (discreto), centrados */ .t-run{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:300px;margin:0 auto} .t-run[hidden]{display:none} .t-pause{width:100%;padding:16px;border-radius:999px;border:1px solid var(--acento);background:none;color:var(--acento-claro);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.78rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s} .t-pause:active{transform:scale(.99)} .t-next{width:100%;padding:13px;border-radius:999px;border:1px solid rgba(44,110,63,.4);background:none;color:rgba(220,192,112,.92);font-family:var(--sans);font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:.72rem;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s,border-color .2s} .t-next:active{transform:scale(.99)} .t-next[hidden]{display:none} .t-stop{background:none;border:none;color:rgba(251,248,240,.38);font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.6rem;cursor:pointer;padding:6px 12px} .t-stop:active{color:rgba(251,248,240,.6)} /* pausado: relógio esmaecido + selo discreto */ .t-pausado-tag{display:none} .t-pausado .t-pausado-tag{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.6rem;color:rgba(44,110,63,.75);margin-top:12px} .t-pausado .t-time{opacity:.4;transition:opacity .25s} /* roteiro "a seguir" (só na tela de prática) */ .t-proximos{display:none} .t-rodando .t-proximos{display:flex;flex-direction:column;width:100%;max-width:300px;margin:0 auto 34px;min-height:0} .t-prox-h{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.54rem;font-weight:700;color:rgba(44,110,63,.7);text-align:center;margin-bottom:8px} /* lista rolável: mostra tudo que vem, sem estourar a tela */ .t-prox-lista{display:flex;flex-direction:column;gap:7px;overflow-y:auto;max-height:34vh;-webkit-overflow-scrolling:touch;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(44,110,63,.4) transparent} .t-prox-lista::-webkit-scrollbar{width:4px} .t-prox-lista::-webkit-scrollbar-thumb{background:rgba(44,110,63,.4);border-radius:4px} .t-prox-item{flex:0 0 auto} .t-prox-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;border:1px solid rgba(44,110,63,.16);color:rgba(251,248,240,.5)} .t-prox-item.proximo{border-color:rgba(44,110,63,.45);color:var(--creme)} .t-prox-nome{font-family:var(--serif);font-size:.95rem} .t-prox-dur{font-family:var(--sans);font-size:.7rem;letter-spacing:1px;color:rgba(251,248,240,.4)} .t-prox-item.proximo .t-prox-dur{color:var(--acento-claro)} /* ===== DIÁRIO DE MEDITAÇÃO (overlay) ===== */ .t-diario{position:fixed;inset:0;z-index:1000;background:var(--floresta);overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(16px + env(safe-area-inset-top)) 22px calc(40px + env(safe-area-inset-bottom))} .t-diario[hidden]{display:none} .t-diario-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px} .t-diario-titulo{font-family:var(--serif);font-weight:300;font-size:1.5rem;color:var(--creme)} .t-diario-titulo em{font-style:italic;color:var(--acento-claro)} .t-diario-fechar{width:38px;height:38px;border-radius:50%;border:1px solid rgba(44,110,63,.35);background:transparent;color:var(--acento-claro);font-size:1rem;cursor:pointer;flex:none} .t-diario-sugestao{font-family:var(--serif);font-style:italic;color:var(--acento-claro);font-size:.95rem;margin-bottom:14px;padding:12px 14px;border:1px solid rgba(44,110,63,.28);background:rgba(44,110,63,.06)} .t-diario-sugestao[hidden]{display:none} .t-diario-novo{margin-bottom:26px} #t-diario-txt{width:100%;background:rgba(245,241,232,.04);border:1px solid rgba(44,110,63,.28);color:var(--creme);font-family:var(--serif);font-size:1rem;line-height:1.55;padding:14px;outline:none;resize:vertical} #t-diario-txt:focus{border-color:var(--acento)} .t-diario-salvar{display:block;width:100%;margin-top:12px;padding:14px;border:none;border-radius:999px;background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));color:var(--floresta);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.72rem;cursor:pointer} .t-diario-lista{display:flex;flex-direction:column;gap:12px} .t-diario-vazio{font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.45);text-align:center;padding:26px 12px} .t-nota{border:1px solid rgba(44,110,63,.2);border-left:3px solid var(--acento);padding:14px 16px;background:rgba(245,241,232,.03)} .t-nota-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:10px} .t-nota-data{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:.56rem;font-weight:600;color:var(--acento-claro)} .t-nota-del{background:none;border:none;color:rgba(251,248,240,.32);font-size:.85rem;cursor:pointer;padding:2px 6px;flex:none} .t-nota-txt{font-family:var(--serif);font-size:.98rem;color:rgba(251,248,240,.82);line-height:1.6} /* ===== GUARDADOS (Timer) ===== */ .t-guardados{margin-top:34px;border-top:1px solid rgba(44,110,63,.16);padding-top:22px} .t-g-h{font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.6rem;font-weight:700;color:var(--acento);margin-bottom:12px} .t-protos{margin-bottom:24px} .t-protos-lista{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} .t-protos-vazio{font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.4);font-size:.85rem} .t-proto{display:inline-flex;align-items:center;border:1px solid rgba(44,110,63,.28)} .t-proto-load{font-family:var(--serif);font-size:.9rem;color:var(--creme);background:none;border:none;padding:8px 12px;cursor:pointer} .t-proto-del{font-family:var(--sans);font-size:.7rem;color:rgba(251,248,240,.4);background:none;border:none;border-left:1px solid rgba(44,110,63,.2);padding:8px 10px;cursor:pointer} .t-proto-del:hover{color:#C4522A} .t-proto-salvar{display:flex;gap:8px} .t-proto-salvar input{flex:1;background:transparent;border:1px solid rgba(44,110,63,.28);color:var(--creme);padding:10px 12px;font-family:var(--sans);font-size:.82rem;outline:none} .t-proto-salvar input:focus{border-color:var(--acento)} .t-proto-salvar button{font-family:var(--sans);font-size:.66rem;text-transform:uppercase;letter-spacing:1px;font-weight:600;color:var(--floresta);background:var(--ouro-claro);border:none;padding:10px 14px;cursor:pointer} .t-hist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .t-hist-item{text-align:center;border:1px solid rgba(44,110,63,.16);padding:14px 6px} .t-hist-item b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--acento-claro);font-weight:400} .t-hist-item span{font-family:var(--sans);text-transform:uppercase;letter-spacing:1px;font-size:.54rem;color:rgba(251,248,240,.5)} /* ===== MUSIC (escuro premium) ===== O Music é a única tela do app com uma CAPA grande: a faixa vira imagem. Por isso ele é escuro como as outras (era pergaminho claro até 08/2026) — arte iluminada só respira sobre fundo escuro. O ouro é o acento; o índigo da seção sobrou só onde marca "você está no Music" (chip ativo e aba). */ /* ── o Music rola inteiro ─────────────────────────────────────────────── Ele nasceu no molde "uma tela só": overflow:hidden no corpo, o #app travado em 100dvh, e quem rolava era a fila, por dentro. O resto (capa, transporte, chips de categoria, título da fila e o rodapé de músicas salvas) era mobília fixa que descontava dessa única janelinha. Medido no Chrome em 390x844, com as 43 faixas de hoje: Todos janela de 233px para 2020px de lista 5 faixas de 43 Vinyasa janela de 233px para 704px 5 de 15 Breathwork janela de 193px para 234px 4 de 5 e a máscara apagando a última linha à vista em todas. Quanto mais a tela tinha para mostrar, menos ela mostrava. O molde já tinha caído em todas as outras portas deste mesmo player: a Cura Sonora em 10/08/2026, o Dojo Music em 30/08 e o Breathwork em 31/08 (ver o bloco "Music (e Breathwork) rolam inteiros" no beta.css). Aqui ele era o último de pé, e a prova de que estava errado morava no próprio arquivo: o `@media (max-height:700px)` já soltava tudo em aparelho baixo. A tela pequena via a fila inteira; a grande, não. Agora a página rola em qualquer altura, e capa, fila e rodapé andam juntos num só gesto. O #app volta a herdar a regra da casa (min-height:100vh e o respiro do dock); só o respiro de cima segue menor, que é o da capa. */ body[data-sec="music"]{overflow:auto} body[data-sec="music"] #app{padding-top:calc(14px + env(safe-area-inset-top))} body[data-sec="music"] .sec-music:not([hidden]), body[data-sec="music"] .m-card, body[data-sec="music"] .m-body{display:block;min-height:0} /* block mata o gap de 36px do grid: a barra de categorias ficava colada no play. Mesma nota da regra .com-guia .m-body > .m-fila, logo abaixo. */ body[data-sec="music"] .m-fila{margin-top:30px;flex:none;min-height:0;max-height:none;overflow:visible} body[data-sec="music"] .m-list{flex:none;max-height:none;overflow:visible; mask-image:none;-webkit-mask-image:none} /* fora do Music (o painel do Dojo monta o mesmo player) a seção segue coluna */ .sec-music:not([hidden]){display:flex;flex-direction:column;min-height:0} .sec-music.com-guia:not([hidden]),.sec-music.modo-mesa:not([hidden]){display:block} /* Volta pro Dojo Breath quando o aluno entrou por lá. Mesmo desenho do "‹ Dojo Breath" do Pranayama (.r-voltar), pra ser o mesmo botão aos olhos dele nas duas portas. */ .m-voltar{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;padding:6px 12px 6px 8px; border:1px solid rgba(44,110,63,.25);border-radius:999px;background:transparent;color:var(--acento);cursor:pointer; font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:.6rem;font-weight:700} .m-voltar[hidden]{display:none} .m-voltar svg{width:14px;height:14px} .m-voltar:active{transform:scale(.96)} .m-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px;flex:none} .m-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:5px;font-size:.66rem;font-weight:600;color:var(--acento)} /* ===== MUSIC: palco (capa + transporte) + biblioteca ===== */ /* Sem moldura de card: a capa é a única caixa da tela. */ .m-card{background:none;border:none;box-shadow:none;overflow:visible;margin-bottom:0;container-type:inline-size; flex:1;min-height:0;display:flex;flex-direction:column} .com-guia .m-card,.modo-mesa .m-card{display:block;margin-bottom:8px} /* no Music o app alarga (o card decide sozinho quando cabe a biblioteca ao lado) */ body[data-sec="music"] #app{max-width:900px} /* minmax(0,1fr) na 2a linha: é o que autoriza a fila a encolher e rolar (só `1fr` guarda o tamanho do conteúdo e estoura a tela) */ /* O `gap` aqui é vertical: no celular a fila fica EMBAIXO do player, e este número é a distância entre o botão de play e os chips de categoria. Eram 13px, e os dois blocos se encostavam: o polegar mira o próximo/repetir e acerta um chip. São 36 e não 26 por causa do halo do play. Ele tem 74px, quase o dobro dos outros botões, e carrega um brilho dourado que sangra uns dez pixels para fora da borda. Medido no CSS o vão existia; olhado na tela, o brilho encostava no que vinha embaixo. O número tem que contar o brilho, não a caixa. No desktop o gap vira horizontal (duas colunas) e a regra do container abaixo manda. */ .m-body{display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:36px;flex:1;min-height:0} @container (min-width:720px){.m-body{grid-template-columns:1.05fr .95fr;grid-template-rows:minmax(0,1fr);gap:30px;align-items:start}} .com-guia .m-body,.modo-mesa .m-body{display:block} /* O respiro entre o transporte e a fila NÃO pode depender do gap do grid. Em quatro situações o .m-body vira block e o gap de 36px simplesmente some, deixando a barra de categorias encostada no botão de play: no guia, na mesa de cura, em tela baixa, e no painel do Dojo (beta.css). Medido em 29/08/2026 no iPhone: a folga era de ZERO pixel. */ .com-guia .m-body > .m-fila, .modo-mesa .m-body > .m-fila{margin-top:30px} .com-guia .m-stage,.modo-mesa .m-stage{margin-bottom:26px} .m-stage{display:flex;flex-direction:column;gap:10px;min-width:0} /* ── capa da faixa ─────────────────────────────────────────────────────── */ .m-now{display:block} /* --capa-fundo vem do music-capa.js: é o tom da categoria da faixa */ .m-hero{--capa-fundo:#060e09;position:relative;border:1px solid rgba(44,110,63,.18);border-radius:20px;overflow:hidden; background:var(--capa-fundo);box-shadow:0 24px 52px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05); transition:background .6s ease} /* A capa é enfeite; a fila é o que se usa. Ela vinha ocupando quase um quarto da tela (2.1/1 até 23dvh) e empurrava a lista para baixo, deixando duas ou três faixas à vista. Cortada em 40% na altura, a arte continua reconhecível e sobram três linhas de fila. A arte é ancorada pelo topo (xMidYMin no music-capa.js), então quem sai no corte é a água de baixo. ATENÇÃO ao mexer nesta proporção: ela decide QUANTO da arte aparece. A 3.5/1 a faixa mostra os primeiros 114 dos 300 pontos de altura. O sol foi posto no meio desses 114 (cy=55, r=44 em music-capa.js) — apertar mais a faixa volta a cortá-lo, como aconteceu quando ela passou de 2.1/1 para 3.5/1. */ .m-art{position:relative;aspect-ratio:3.5/1;max-height:14dvh;overflow:hidden;background:var(--capa-fundo)} .com-guia .m-art,.modo-mesa .m-art{aspect-ratio:5/4;max-height:none} /* Sem zoom: o scale(1.06) so cortava. A arte e ancorada pelo topo (xMidYMin no music-capa.js), entao quando o cartao achata quem sai e a agua de baixo, nunca a lua. */ .m-art-svg{display:block;width:100%;height:100%; /* o zoom da deriva cresce PRA BAIXO: a partir do centro ele comia o topo da lua sempre que o cartao achatava numa tela mais baixa */ transform-origin:50% 0; animation:artDeriva 34s ease-in-out infinite alternate} .m-art.trocando{animation:artEntra .65s ease} @keyframes artEntra{from{opacity:0}to{opacity:1}} /* deriva mais contida, e sem puxar a arte pra cima (o translate negativo em Y era o outro responsavel pela lua cortada) */ @keyframes artDeriva{from{transform:scale(1.03) translate3d(-1%,0,0)}to{transform:scale(1.07) translate3d(1%,0,0)}} /* a arte não termina numa linha reta: ela se dissolve no corpo da capa */ .m-art::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,transparent 48%,color-mix(in srgb,var(--capa-fundo) 55%,transparent) 82%,var(--capa-fundo) 100%)} /* A lua só respira quando tem som tocando. O ponto de origem tem de ser o CENTRO DO DISCO (LUA.cx, LUA.cy em music-capa.js): escalar em volta de um ponto que não é o centro não faz o sol crescer, faz ele andar. */ .m-art-lua{transform-origin:200px 55px} .tocando-lista .m-art-lua{animation:luaResp 11s ease-in-out infinite} @keyframes luaResp{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.035)}} /* A SEQUÊNCIA no lugar da arte (só Breathwork). A moldura e a cor da categoria continuam: o que sai é a lua, que ali era enfeite, e entra o que o aluno vai fazer. O título fica ao lado do selo do equalizador, que segue ancorado no canto. */ .m-hero.com-sequencia .m-art{display:none} .m-hero.com-sequencia .m-meta{margin-top:0;padding-top:14px; border-top:1px solid rgba(44,110,63,.14)} .m-seq{position:relative;z-index:2;padding:16px 18px 16px; background:radial-gradient(120% 80% at 50% 0%,rgba(44,110,63,.10),transparent 68%)} .m-seq[hidden]{display:none} .m-seq-t{display:block;margin:0 0 12px 54px;min-height:30px;line-height:30px; font-family:var(--sans);text-transform:uppercase;letter-spacing:2.5px; font-size:.58rem;font-weight:700;color:var(--acento)} .m-seq-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .m-seq-p{display:flex;align-items:baseline;gap:10px} .m-seq-n{flex:none;width:19px;height:19px;border-radius:50%;align-self:center; border:1px solid rgba(44,110,63,.45);color:var(--acento-claro);background:rgba(44,110,63,.08); font-family:var(--sans);font-size:.6rem;font-weight:700; display:grid;place-items:center} .m-seq-tx{display:flex;flex-direction:column;gap:1px;min-width:0} .m-seq-tx b{font-family:var(--serif);font-weight:400;font-size:1.02rem;color:var(--creme);line-height:1.15} .m-seq-tx small{font-family:var(--sans);font-size:.72rem;line-height:1.35;color:rgba(251,248,240,.52)} .m-seq-ret{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:13px; padding-top:12px;border-top:1px solid rgba(251,248,240,.07)} .m-seq-ret-lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px; font-size:.55rem;font-weight:700;color:var(--acento);margin-right:3px} /* selo de equalizador no canto da capa */ .m-ic{position:absolute;top:15px;left:15px;z-index:2;height:30px;padding:0 12px;flex:none; border:1px solid rgba(44,110,63,.32);border-radius:999px;color:var(--acento-claro); background:rgba(8,13,9,.5);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px); display:flex;align-items:center;justify-content:center} .m-ic svg{width:16px;height:16px} .m-eq{display:none;align-items:flex-end;gap:3px;height:14px} .m-ic.tocando .m-eq{display:flex} .m-ic.tocando .m-note-ic{display:none} .m-note-ic{display:flex;align-items:center;justify-content:center} .m-eq i{width:2.5px;height:100%;background:currentColor;border-radius:2px;transform-origin:bottom;animation:eqBar .9s ease-in-out infinite} .m-eq i:nth-child(2){animation-delay:-.6s} .m-eq i:nth-child(3){animation-delay:-.3s} .m-eq i:nth-child(4){animation-delay:-.75s} @keyframes eqBar{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}} /* nome da faixa, embaixo da arte e dentro da mesma moldura */ .m-meta{position:relative;z-index:2;text-align:center;padding:0 20px 20px;margin-top:-34px;min-width:0} .m-hero .m-stage-eyebrow{display:none} .m-stage-eyebrow{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:2.5px;font-size:.58rem;font-weight:700;color:var(--acento);margin-bottom:6px} .m-name{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,6cqi,2.05rem);line-height:1.12;color:var(--creme); text-shadow:0 2px 18px rgba(0,0,0,.6)} .m-autor{font-family:var(--sans);font-size:.9rem;color:rgba(251,248,240,.5);margin-top:5px} .m-cat{display:inline-block;margin-top:10px;font-family:var(--sans);text-transform:uppercase;letter-spacing:2.5px; font-size:.6rem;font-weight:600;color:var(--acento-claro);background:rgba(44,110,63,.08); border:1px solid rgba(44,110,63,.42);border-radius:999px;padding:6px 15px} .m-cat[hidden]{display:none} /* ── barra de tempo ────────────────────────────────────────────────────── */ /* o respiro lateral mantém a bolinha dentro da coluna nos extremos (em 00:00 ela ficava metade pra fora) e alinha os tempos com o curso dela */ .m-prog{margin-top:4px;padding:0 7px} .m-bar{height:22px;background:transparent;position:relative;cursor:pointer;touch-action:none;display:flex;align-items:center} .m-bar::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;border-radius:999px;background:rgba(251,248,240,.13)} .m-bar i{position:absolute;left:0;top:50%;transform:translateY(-50%);height:4px;width:0;border-radius:999px;pointer-events:none; background:linear-gradient(90deg,var(--acento),var(--acento-claro));box-shadow:0 0 12px rgba(44,110,63,.45)} .m-bar b{position:absolute;left:0;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;pointer-events:none; background:var(--acento-claro);box-shadow:0 0 0 4px rgba(44,110,63,.15),0 2px 8px rgba(0,0,0,.6)} .m-time{display:flex;justify-content:space-between;font-family:var(--sans);font-size:.73rem;letter-spacing:1px; color:rgba(251,248,240,.42);margin-top:6px;font-variant-numeric:tabular-nums} /* ── transporte ────────────────────────────────────────────────────────── */ .m-controls{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;margin-top:6px} .m-ctrl{width:44px;height:44px;flex:none;border-radius:50%;background:none;border:none;color:rgba(251,248,240,.92); display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent; transition:color .18s,background .18s,transform .1s} .m-ctrl:active{transform:scale(.9)} .m-shuffle,.m-loop{color:var(--acento);opacity:.7} .m-ctrl.on{color:var(--acento-claro);opacity:1;background:rgba(44,110,63,.13);box-shadow:inset 0 0 0 1px rgba(44,110,63,.3)} .m-ctrl.m-play{width:74px;height:74px;color:var(--ouro-claro);border:1.5px solid var(--ouro); background:radial-gradient(circle at 50% 30%,rgba(44,110,63,.22),rgba(10,17,9,.92) 70%); box-shadow:0 16px 36px rgba(0,0,0,.55),0 0 26px rgba(44,110,63,.14),inset 0 1px 0 rgba(255,255,255,.08)} .m-ctrl.m-play svg{width:27px;height:27px} /* ── guia da respiração (Breathwork) ───────────────────────────────────── */ .m-guia{background:rgba(251,248,240,.035);border:1px solid rgba(44,110,63,.20);border-radius:14px;padding:16px 18px} .m-guia[hidden]{display:none} .m-guia-t{display:block;font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.58rem;font-weight:700;color:var(--acento);margin-bottom:10px} .m-fases{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:11px} .m-fases[hidden]{display:none} .m-fase{width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(44,110,63,.5);background:rgba(44,110,63,.07);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px} .m-fase b{font-family:var(--serif);font-weight:400;font-size:.84rem;color:var(--creme);line-height:1} .m-fase small{font-family:var(--sans);font-size:.5rem;letter-spacing:.5px;text-transform:uppercase;color:rgba(251,248,240,.45)} .m-guia-txt{font-family:var(--serif);font-size:.94rem;line-height:1.6;color:rgba(251,248,240,.72);margin:0 0 12px} .m-guia-txt[hidden]{display:none} .m-resps{display:flex;flex-direction:column;gap:6px;margin-bottom:12px} .m-resps[hidden]{display:none} .m-resp{display:flex;align-items:baseline;gap:10px;padding:9px 13px;background:rgba(251,248,240,.04);border:1px solid rgba(44,110,63,.16);border-radius:10px} .m-resp b{font-family:var(--serif);font-weight:400;font-size:1rem;color:var(--creme);line-height:1.1;flex:none;min-width:84px} .m-resp span{font-family:var(--sans);font-size:.75rem;line-height:1.35;letter-spacing:.2px;color:rgba(251,248,240,.55)} .m-ret{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:11px} .m-ret[hidden]{display:none} .m-ret-lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:.55rem;font-weight:700;color:var(--acento);margin-right:3px} .m-ret-pill{font-family:var(--sans);font-size:.73rem;font-weight:600;color:var(--creme);background:rgba(44,110,63,.10);border:1px solid rgba(44,110,63,.4);border-radius:999px;padding:4px 11px} /* ── conversa com o professor, dentro da prática guiada ────────────────── */ /* Fechada, é uma linha só: a tela do Breathwork é tela de prática, e um formulário aberto ali competiria com a sequência e o play. */ .m-coment[hidden]{display:none} .m-coment{margin-top:14px;padding-top:13px;border-top:1px solid rgba(44,110,63,.18)} .c-abrir{display:flex;align-items:center;gap:9px;width:100%;padding:9px 0;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--acento);-webkit-tap-highlight-color:transparent} .c-abrir svg{width:17px;height:17px;flex:none} .c-abrir.on{color:var(--acento-claro)} .c-painel[hidden]{display:none} .c-painel{display:flex;flex-direction:column;gap:12px;padding-top:6px} .c-intro{font-family:var(--sans);font-size:.76rem;line-height:1.5;color:rgba(251,248,240,.55)} .c-lista{display:flex;flex-direction:column;gap:10px} .c-vazio{font-family:var(--sans);font-size:.74rem;color:rgba(251,248,240,.4);font-style:italic} .c-item{position:relative;padding:12px 14px;background:rgba(251,248,240,.04);border:1px solid rgba(44,110,63,.16);border-left:2px solid rgba(44,110,63,.45);border-radius:10px} .c-item.respondido{border-left-color:var(--acento)} .c-pergunta{font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--creme);white-space:pre-wrap;padding-right:62px} .c-data{display:block;font-family:var(--sans);font-size:.62rem;letter-spacing:.4px;color:rgba(251,248,240,.35);margin-top:5px} .c-pendente{display:block;font-family:var(--sans);font-size:.62rem;font-style:italic;color:var(--acento);margin-top:5px} .c-resposta{margin-top:9px;padding-top:9px;border-top:1px dashed rgba(44,110,63,.25);font-family:var(--sans);font-size:.82rem;line-height:1.5;color:var(--creme);white-space:pre-wrap} .c-resposta::before{content:"Edson: ";font-weight:700;color:var(--acento-claro)} .c-apagar{position:absolute;top:9px;right:9px;background:none;border:none;padding:4px 7px;border-radius:6px;cursor:pointer;font-family:var(--sans);font-size:.6rem;letter-spacing:.5px;color:rgba(251,248,240,.35)} .c-apagar.confirma{color:var(--creme);background:rgba(196,82,42,.55)} .c-form{display:flex;flex-direction:column;gap:9px} .c-ident[hidden]{display:none} .c-ident{display:flex;flex-wrap:wrap;gap:8px;padding:11px 12px;background:rgba(251,248,240,.04);border:1px solid rgba(44,110,63,.22);border-radius:10px} .c-ident-dica{flex-basis:100%;font-family:var(--sans);font-size:.68rem;color:rgba(251,248,240,.6)} .c-ident input{flex:1 1 140px;min-width:0} .c-txt,.c-ident input{font-family:var(--sans);font-size:.85rem;color:var(--creme);background:rgba(13,26,16,.35);border:1px solid rgba(44,110,63,.25);border-radius:9px;padding:10px 12px;outline:none;box-sizing:border-box;-webkit-appearance:none} .c-txt{width:100%;resize:vertical;line-height:1.5} .c-txt:focus,.c-ident input:focus{border-color:var(--acento)} .c-txt::placeholder,.c-ident input::placeholder{color:rgba(251,248,240,.3)} .c-linha{display:flex;align-items:center;justify-content:space-between;gap:10px} .c-conta{font-family:var(--sans);font-size:.62rem;color:rgba(251,248,240,.35)} .c-conta.over{color:#e08a63;font-weight:700} .c-enviar{font-family:var(--sans);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--floresta);background:var(--ouro);border:none;border-radius:999px;padding:10px 22px;cursor:pointer} .c-enviar:disabled{opacity:.35;cursor:not-allowed} .c-aviso:empty{display:none} .c-aviso{font-family:var(--sans);font-size:.72rem;line-height:1.45;padding:8px 11px;border-radius:8px} .c-aviso.ok{color:var(--acento-claro);background:rgba(44,110,63,.18)} .c-aviso.erro{color:#e08a63;background:rgba(196,82,42,.16)} /* ── mesa de cura sonora (categoria Sound Healing) ─────────────────────── */ .m-mesa[hidden]{display:none} .m-mesa{display:flex;flex-direction:column;gap:14px} .m-mesa-base{font-family:var(--serif);font-size:1.2rem;font-style:italic;color:var(--creme)} /* na mesa não há faixa nem transporte: quem manda são as bases e os pads */ .sec-music.modo-mesa .m-now, .sec-music.modo-mesa .m-prog, .sec-music.modo-mesa .m-controls, .sec-music.modo-mesa .m-guia, .sec-music.modo-mesa .m-searchbtn, .sec-music.modo-mesa .m-fila-h, .sec-music.modo-mesa .m-search{display:none} .m-efgrupo-lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.56rem;font-weight:700;color:var(--acento)} /* O rótulo da lista dos centros, no mesmo tom dos rótulos de grupo da mesa */ .m-bases-lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px; font-size:.56rem;font-weight:700;color:var(--acento);display:flex;align-items:baseline;gap:9px} .m-bases-lbl em{font-family:var(--serif);font-style:italic;text-transform:none; letter-spacing:.2px;font-size:.72rem;font-weight:400;color:rgba(251,248,240,.35)} .m-bases{display:flex;flex-direction:column;gap:6px} .m-bases[hidden]{display:none} /* O CARTÃO DE CADA CENTRO. A cor do chakra é a única coisa que distingue um drone do outro numa lista de sete, então ela entra em três lugares: a bolha, a borda da esquerda e o fundo de quem está tocando. */ .m-base{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px; padding:12px 14px;border:1px solid rgba(251,248,240,.08);border-left:3px solid var(--chakra,var(--acento)); border-radius:12px;background:rgba(251,248,240,.03);color:rgba(251,248,240,.9); cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent; transition:background .18s,border-color .18s} .m-base-bolha{width:30px;height:30px;border-radius:50%;flex:none;display:block; background:radial-gradient(circle at 34% 30%,color-mix(in oklab,var(--chakra) 82%,white),var(--chakra)); box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)} .m-base-nm{font-family:var(--serif);font-size:1rem;line-height:1.25} .m-base-nm em{display:block;font-family:var(--sans);font-style:normal;font-size:.56rem; letter-spacing:2px;text-transform:uppercase;color:rgba(251,248,240,.42);margin-top:3px} .m-base-faixa{font-family:var(--sans);font-size:.6rem;letter-spacing:1.2px;line-height:1.5; color:rgba(251,248,240,.34);text-align:right} .m-base-loop{display:block;font-style:normal;font-size:.5rem;letter-spacing:2px; text-transform:uppercase;margin-top:3px;opacity:0} .m-base.on{background:color-mix(in oklab,var(--chakra) 16%,transparent);border-color:var(--chakra)} .m-base.on .m-base-faixa{color:var(--chakra)} .m-base.on .m-base-loop{opacity:.8} .m-base.on .m-base-bolha{animation:baseResp 3.4s ease-in-out infinite} @keyframes baseResp{0%,100%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 0 color-mix(in oklab,var(--chakra) 55%,transparent)} 50%{box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 0 0 8px color-mix(in oklab,var(--chakra) 0%,transparent)}} /* baixando/decodificando: o rótulo "carregando…" pisca até o som começar */ .m-base.carregando .m-base-nm{opacity:.65} .m-base.carregando .m-base-loop{opacity:.8;animation:baseCarrega 1s ease-in-out infinite} @keyframes baseCarrega{0%,100%{opacity:.3}50%{opacity:.9}} @media(max-width:520px){ .m-base{grid-template-columns:auto 1fr;gap:11px} .m-base-faixa{grid-column:2;text-align:left;margin-top:2px} .m-base-loop{display:inline;margin:0 0 0 8px} } .m-efvol{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;background:rgba(251,248,240,.04);border:1px solid rgba(44,110,63,.18)} .m-efvol-ic{width:18px;height:18px;color:var(--acento);flex:none;display:block} .m-efvol-ic svg{width:100%;height:100%} .m-efvol-lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:1.5px;font-size:.55rem;font-weight:700;color:rgba(251,248,240,.6);white-space:nowrap} .m-efvol-range{flex:1;height:22px;accent-color:var(--acento);cursor:pointer} .m-efeitos{display:flex;flex-direction:column;gap:16px} /* A CAMA DE FUNDO. Contorno, e não pastilha cheia: o pad cheio quer dizer "aperta e sai som agora"; o contorno quer dizer "liga e fica". A mão precisa saber a diferença sem ler, porque no meio da prática ninguém lê. Quem está ligado ganha o preenchimento, que é o único cheio da fileira. */ .m-fundo{margin-top:22px;padding-top:18px;border-top:1px solid rgba(44,110,63,.22)} .m-fundo-lbl{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px; font-size:.56rem;font-weight:700;color:var(--acento-claro); display:flex;align-items:baseline;gap:9px;margin-bottom:10px} .m-fundo-lbl em{font-family:var(--serif);font-style:italic;text-transform:none; letter-spacing:.2px;font-size:.72rem;font-weight:400;color:rgba(251,248,240,.35)} .m-fundo-grade{display:grid;grid-template-columns:repeat(8,1fr);gap:7px} .m-fundo-b{ aspect-ratio:1;display:flex;align-items:center;justify-content:center; border:1px solid rgba(44,110,63,.42);border-radius:12px;background:none; font-family:var(--serif);font-size:.92rem;color:rgba(251,248,240,.62); cursor:pointer;-webkit-tap-highlight-color:transparent; transition:border-color .2s,color .2s,background .2s; } .m-fundo-b:hover{border-color:var(--acento-claro);color:var(--creme)} .m-fundo-b.on{ background:var(--acento);border-color:var(--acento-claro);color:var(--creme); box-shadow:0 0 18px rgba(44,110,63,.45); } /* baixando/decodificando: a cama tem 0,5 a 1 MB e demora um instante */ .m-fundo-b.carregando{animation:fundoCarrega 1s ease-in-out infinite} @keyframes fundoCarrega{0%,100%{opacity:.4}50%{opacity:1}} .m-efgrupo-lbl{opacity:.85;margin:0 0 8px} .m-efpads{display:grid;grid-template-columns:repeat(8,1fr);gap:7px} /* OS PADS. Isto é uma mesa que o professor toca AO VIVO, com a turma deitada, muitas vezes no escuro. Então o botão não é um quadrado chapado com um número: ele tem volume (luz em cima, sombra embaixo), afunda quando é tocado e ACENDE enquanto o som está no ar. O brilho é a única confirmação que existe no instante entre o toque e o som começar a soar. */ .m-pad{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center; border:none;border-radius:14px;cursor:pointer;overflow:hidden;isolation:isolate; -webkit-tap-highlight-color:transparent; background:linear-gradient(158deg, color-mix(in oklab,var(--pad,var(--acento)) 88%,white) 0%, var(--pad,var(--acento)) 46%, color-mix(in oklab,var(--pad,var(--acento)) 74%,black) 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.34); transition:transform .13s cubic-bezier(.22,.61,.36,1),box-shadow .2s} /* o brilho de vidro que atravessa o alto do pad */ .m-pad::before{content:"";position:absolute;inset:0 0 52% 0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.26),transparent)} .m-pad:active{transform:translateY(1px) scale(.94); box-shadow:inset 0 2px 5px rgba(0,0,0,.34),0 1px 3px rgba(0,0,0,.3)} /* ACESO: enquanto o som está no ar a luz vaza para fora do pad. É o que o professor vê de longe, no escuro da sala. */ .m-pad.tocando{transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 2px color-mix(in oklab,var(--pad,var(--acento)) 70%,transparent), 0 0 26px color-mix(in oklab,var(--pad,var(--acento)) 58%,transparent), 0 6px 16px rgba(0,0,0,.4)} /* o número fica acima da onda e da luz, senão some quando o pad enche */ .m-pad-num{position:relative;z-index:3;font-family:var(--serif);font-weight:400;font-size:1.02rem; line-height:1;color:#0D1A10;text-shadow:0 1px 0 rgba(255,255,255,.22)} .m-pad::after{content:"";position:absolute;inset:0;z-index:2;border-radius:14px; border:2px solid color-mix(in oklab,var(--pad,var(--acento)) 85%,#fff);opacity:0;pointer-events:none} .m-pad.hit::after{animation:padHit .55s ease-out} @keyframes padHit{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}} /* O SOM ESCOANDO. A onda nasce cheia no disparo e baixa conforme o som corre, como areia de ampulheta: pad apagando é som acabando. Encher diria o contrário do que está acontecendo. A altura vem do JS a cada quadro, por isso sem transição. */ .m-pad-prog{position:absolute;left:0;right:0;bottom:0;z-index:1;height:0; background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12)); opacity:0;pointer-events:none;transition:opacity .3s ease} .m-pad.tocando .m-pad-prog{opacity:1} /* o arquivo não tocou e entrou o tom gerado: um ponto discreto no canto, só pra falha nunca ser muda (ver onReserva em healing.js) */ .m-pad.sem-arquivo::before{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;border-radius:50%;background:#E4B363;box-shadow:0 0 5px rgba(228,179,99,.9)} /* ── biblioteca: lupa, filtros e fila ──────────────────────────────────── */ .m-fila{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;background:none;border:none;padding:0} @container (min-width:720px){.m-fila{max-height:calc(100dvh - 190px)}} .m-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain; -webkit-overflow-scrolling:touch;padding-bottom:2px; /* a última linha some por baixo: avisa que a fila continua */ mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 20px),transparent)} .m-list::-webkit-scrollbar{display:none} .com-guia .m-list,.modo-mesa .m-list{overflow:visible;flex:none} /* SEM fio separando o transporte da fila. Ele chegou a existir aqui e saiu no mesmo dia: qualquer linha logo abaixo do play parece encostada nele, porque o halo do botão avança sobre ela. O respiro do `.m-body` faz a separação sozinho, e a fila já se anuncia com o "A seguir" logo abaixo. */ .m-cardtop{display:flex;align-items:center;gap:14px;min-width:0} /* card largo: os chips quebram linha, então a lupa alinha com a 1a linha */ @container (min-width:720px){.m-cardtop{align-items:flex-start}} .m-searchbtn{width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent; border:1px solid rgba(251,248,240,.14);background:rgba(251,248,240,.04);color:rgba(251,248,240,.68); display:flex;align-items:center;justify-content:center;transition:color .18s,border-color .18s,background .18s} .m-searchbtn svg{width:19px;height:19px} .m-searchbtn.on{color:var(--acento-claro);border-color:rgba(44,110,63,.55);background:rgba(44,110,63,.12)} .m-cats{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding:3px 0;min-width:0;scroll-padding-inline:4px} /* Sem esta borda esfumada, um chip cortado no meio da palavra encosta na lupa e parece defeito, não lista que rola. A classe vem do music-ui.js e só aparece do lado onde ainda há chip para ver. */ .m-cats.tem-esq{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px);mask-image:linear-gradient(90deg,transparent 0,#000 18px)} .m-cats.tem-dir{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%)} .m-cats.tem-esq.tem-dir{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)} .m-cats::-webkit-scrollbar{display:none} @container (min-width:720px){.m-cats{flex-wrap:wrap;overflow:visible}} .m-cat-chip{flex:none;font-family:var(--sans);font-size:.78rem;letter-spacing:.2px;cursor:pointer; color:rgba(251,248,240,.72);padding:10px 16px;border-radius:999px; border:1px solid rgba(251,248,240,.14);background:rgba(251,248,240,.03);transition:background .18s,border-color .18s,color .18s} .m-cat-chip em{font-style:normal;font-size:.72em;opacity:.42;margin-left:5px;font-variant-numeric:tabular-nums} /* o chip ativo é o único índigo da tela: é a cor-assinatura do Music */ .m-cat-chip.on{background:var(--music);border-color:var(--music);color:#fff;font-weight:600} .m-cat-chip.on em{opacity:.75} .m-search[hidden]{display:none} .m-search input{width:100%;border-radius:12px;padding:13px 16px;outline:none; background:rgba(251,248,240,.05);border:1px solid rgba(44,110,63,.28); color:var(--creme);font-family:var(--sans);font-size:.88rem} .m-search input::placeholder{color:rgba(251,248,240,.34)} .m-search input:focus{border-color:var(--acento)} .m-fila-h{display:flex;align-items:center;gap:10px;padding:4px 2px 0} .m-fila-t{flex:none;font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.62rem;font-weight:700;color:var(--acento)} .m-fila-ctx{flex:none;font-family:var(--serif);font-style:italic;font-size:.8rem;color:rgba(251,248,240,.35)} .m-fila-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(44,110,63,.3),transparent)} .m-list{display:flex;flex-direction:column;gap:3px} .m-list[hidden]{display:none} /* A linha tem duas áreas de toque: o corpo toca a faixa, o ícone salva no aparelho. Por isso ela é um contêiner, não um botão só. */ .m-track{display:flex;align-items:center;width:100%;border-radius:11px; background:rgba(251,248,240,.032);transition:background .18s} .m-tplay{display:flex;align-items:center;gap:13px;flex:1;min-width:0; padding:12px 6px 12px 15px;border:none;background:none;color:inherit; cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;font:inherit} .m-tsave{flex:none;display:flex;align-items:center;justify-content:center; /* 44px é o alvo mínimo de toque recomendado (Apple HIG e WCAG 2.5.5) */ width:44px;height:44px;margin-right:5px;border:none;background:none;border-radius:50%; color:rgba(251,248,240,.3);cursor:pointer;-webkit-tap-highlight-color:transparent; transition:color .18s,background .18s} .m-tsave:hover{color:rgba(251,248,240,.62);background:rgba(251,248,240,.05)} .m-tsave.salva{color:var(--acento-claro)} .m-tsave.salva:hover{color:var(--acento-claro)} .m-tsave.salvando{color:var(--acento);animation:mSaveGira 1s linear infinite} .m-tsave.salvando:hover{background:none} @keyframes mSaveGira{to{transform:rotate(360deg)}} .m-offline-aviso{margin-top:8px;padding:10px 13px;border-radius:10px; background:rgba(44,110,63,.1);border:1px solid rgba(44,110,63,.25); font-family:var(--sans);font-size:.78rem;line-height:1.45;color:rgba(251,248,240,.8)} .m-offline-aviso[hidden]{display:none} .m-offline-pe{display:flex;align-items:center;gap:10px;margin-top:9px;padding:9px 4px 2px; border-top:1px solid rgba(44,110,63,.14)} .m-offline-pe[hidden]{display:none} .m-offline-txt{flex:1;min-width:0;font-family:var(--sans);font-size:.72rem;letter-spacing:.3px; color:rgba(251,248,240,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-offline-limpar{flex:none;border:none;background:none;cursor:pointer;padding:4px 2px; font-family:var(--sans);font-size:.72rem;letter-spacing:.3px;color:rgba(44,110,63,.72); text-decoration:underline;text-underline-offset:3px;-webkit-tap-highlight-color:transparent} .m-offline-limpar:hover{color:var(--acento)} .m-track.playing{background:rgba(44,110,63,.11);box-shadow:inset 0 0 0 1px rgba(44,110,63,.28)} .m-tn{width:24px;flex:none;display:flex;align-items:center;justify-content:center} .m-tnum{font-family:var(--serif);font-size:1rem;color:rgba(251,248,240,.3);font-variant-numeric:tabular-nums} .m-track.playing .m-tnum{color:var(--acento)} .m-teq{display:none;align-items:flex-end;gap:2px;height:13px} .m-teq i{width:2.5px;height:100%;background:var(--acento-claro);border-radius:2px;transform-origin:bottom;animation:eqBar .9s ease-in-out infinite} .m-teq i:nth-child(2){animation-delay:-.5s} .m-teq i:nth-child(3){animation-delay:-.25s} .tocando-lista .m-track.playing .m-tnum{display:none} .tocando-lista .m-track.playing .m-teq{display:flex} .m-tname{font-family:var(--serif);font-size:1rem;color:rgba(251,248,240,.92);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .m-track.playing .m-tname{color:var(--acento-claro);font-style:italic} .m-tcat{font-family:var(--sans);font-size:.53rem;text-transform:uppercase;letter-spacing:1.2px;color:rgba(251,248,240,.28);flex:none} .m-tdur{font-family:var(--sans);font-size:.76rem;color:rgba(251,248,240,.4);letter-spacing:1px;font-variant-numeric:tabular-nums;flex:none} .m-vazio{padding:22px;text-align:center;font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.45)} /* Aqui morava um `@media (max-height:700px)` que soltava o Music em aparelho baixo: a fila numa tela só sobrava com uma linha e meia, o que é pior do que rolar. O raciocínio estava certo e valia para TODA altura, não só abaixo de 700px. Ele virou a regra da tela (ver "o Music rola inteiro", acima), e o bloco saiu junto com a divergência que criava: em tela baixa a capa vinha em altura cheia e o respiro do play era de 52px; em tela alta, 14dvh e 30px. Agora é o mesmo desenho em qualquer aparelho. */ @media (prefers-reduced-motion:reduce){ .m-art-svg,.tocando-lista .m-art-lua,.m-art.trocando{animation:none} } /* ===== SESSÃO (escuro) ===== */ .s-head{text-align:center;margin-bottom:26px} .s-eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:4px;font-size:.6rem;font-weight:600;color:var(--acento)} .s-title{font-family:var(--serif);font-weight:300;font-size:2rem;margin-top:8px;color:var(--creme)} .s-title em{font-style:italic;color:var(--acento)} .s-lede{font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.6);font-size:.95rem;margin-top:6px} .s-orin{margin:16px auto 0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;border:1px solid rgba(44,110,63,.5);background:radial-gradient(circle at 50% 36%,var(--acento-claro),var(--acento));color:var(--floresta);cursor:pointer;position:relative;box-shadow:0 6px 18px rgba(44,110,63,.32);transition:transform .12s} .s-orin svg{width:30px;height:30px} .s-orin:active{transform:scale(.93)} .s-orin.toca{animation:orinToca .62s ease-out} @keyframes orinToca{0%{box-shadow:0 0 0 0 rgba(44,110,63,.5),0 6px 18px rgba(44,110,63,.32)}100%{box-shadow:0 0 0 24px rgba(44,110,63,0),0 6px 18px rgba(44,110,63,.32)}} .s-clock{text-align:center;margin:10px 0 26px} .s-time{font-family:var(--serif);font-weight:300;font-size:4.6rem;letter-spacing:2px} .s-now{font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.72);font-size:1rem;margin-top:6px;min-height:1.2em} .s-fade{font-family:var(--sans);text-transform:uppercase;letter-spacing:3px;font-size:.66rem;color:var(--acento-claro);min-height:1em;margin-top:8px} .s-step{margin-bottom:18px} .s-k{font-family:var(--sans);text-transform:uppercase;letter-spacing:2px;font-size:.58rem;font-weight:600;color:rgba(220,192,112,.75);margin-bottom:10px} .s-opts{display:flex;flex-wrap:wrap;gap:8px} .s-opt{font-family:var(--sans);font-size:.78rem;padding:11px 16px;border:1px solid rgba(44,110,63,.28);background:rgba(245,241,232,.03);color:rgba(251,248,240,.78);cursor:pointer} .s-opt.on{background:var(--acento);color:var(--floresta);border-color:var(--acento);font-weight:600} .s-empty{font-family:var(--serif);font-style:italic;color:rgba(251,248,240,.5)} .s-start{display:block;width:100%;margin-top:24px;padding:17px;border:none;border-radius:999px;background:linear-gradient(180deg,var(--ouro-claro),var(--ouro));color:var(--floresta);font-family:var(--sans);font-weight:700;text-transform:uppercase;letter-spacing:2px;font-size:.82rem;cursor:pointer;box-shadow:0 12px 28px rgba(201,169,79,.3)} .s-timeline{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:26px;font-family:var(--serif);font-size:.9rem;color:rgba(251,248,240,.66)} .s-timeline b{color:var(--acento);opacity:.6} .s-timeline em{font-style:italic;color:var(--acento-claro)} /* ── Trava de zoom no iOS ──────────────────────────────────────────────── O Safari do iPhone dá zoom automático ao focar um campo com fonte menor que 16px (era o caso dos