@font-face{font-family:'Baloo 2';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/baloo-600.woff2?v=0bc5672a) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(../assets/fonts/baloo-700.woff2?v=cbf228c3) format('woff2')}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(../assets/fonts/baloo-800.woff2?v=694f2e10) format('woff2')}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/pixelify-600.woff2?v=875a6b09) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(../assets/fonts/chakra-600.woff2?v=cd2df683) format('woff2')}
:root{
  --creme-1:#fffbe0; --creme-2:#ffe98a; --ouro:#ffc93c; --laranja:#ff7a12; --brasa:#e0360a;
  --marinho:#0a2d55; --marinho-2:#08203d; --ceu:#1f8fdd; --gelo:#dff2ff; --neve:#ffffff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:#06172c; color:#fff;
  font-family:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- palco ---------- */
.stage{
  position:relative; width:100%; height:100svh; min-height:480px; overflow:hidden;
  container-type:size; container-name:stage; isolation:isolate;
  background:#1f8fdd; --u:min(1vw,1.72vh);
}
.screen{ position:absolute; inset:0; --u:min(1cqw,1.72cqh); --ul:var(--u); }
/* --ul: "u pela largura", só para o que no retrato tem folga horizontal (rodapé, som, esferas).
   Com a barra do navegador aberta, a altura útil do celular cai (390×844 vira 390×662
   no Safari) e --u encolhe pela altura; o menu precisa disso, o resto não. Teto de 1,25 × --u.
   Em tela cheia, --ul = --u. */
@container stage (aspect-ratio < 1){ .screen{ --u:min(1.9cqw,0.92cqh); --ul:min(1.9cqw, calc(var(--u) * 1.25)); } }

/* ---------- fundo ---------- */
.sky{
  position:absolute; inset:-2%; background:url("../assets/img/fundo.webp?v=70a7b92b") center 74%/cover no-repeat;
  transform:scale(1.03); animation:drift 52s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes drift{ from{transform:scale(1.03) translate3d(-.8%,.25%,0)} to{transform:scale(1.03) translate3d(.8%,-.45%,0)} }
.grade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 68% at 24% 20%, rgba(255,255,255,.13), transparent 62%),
    linear-gradient(180deg, rgba(8,58,120,.28) 0%, transparent 24%);
}

/* ---------- mar de nuvens ---------- */
.mar{ position:absolute; left:0; right:0; z-index:2; pointer-events:none; overflow:hidden; contain:paint }
.camada{ position:absolute; inset:0; will-change:transform }
.faixa{
  position:absolute; left:0; bottom:0; width:200%; height:100%;
  background:url("../assets/img/nuvens.webp?v=90dfe874") repeat-x left bottom;
  background-size:50% 100%;
  will-change:transform;
}
/* o tile ocupa metade do elemento, então -50% é exatamente um período: loop sem salto */
@keyframes correr{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} }
@keyframes subir{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-1.6%,0)} }
@keyframes subirLento{ 0%,100%{transform:translate3d(0,.6%,0)} 50%{transform:translate3d(0,-1%,0)} }

.mar--longe{ bottom:22%; height:18%; opacity:.42 }
.mar--longe .camada{ animation:subirLento 71s ease-in-out infinite }
.mar--longe .faixa{ animation:correr 230s linear infinite }

.mar--meio{ bottom:12%; height:26%; opacity:.78 }
.mar--meio .camada{ animation:subir 53s ease-in-out infinite }
.mar--meio .faixa{ animation:correr 142s linear infinite; animation-delay:-38s }

.mar--perto{ bottom:0; height:38%; }
.mar--perto .camada{ animation:subir 41s ease-in-out infinite reverse }
.mar--perto .faixa{ animation:correr 86s linear infinite; animation-delay:-17s }
.mar--perto::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg, transparent, rgba(228,241,255,.62) 55%, rgba(220,237,253,.92));
}

/* ---------- personagens ---------- */
.char{ position:absolute; z-index:4; pointer-events:none; user-select:none; will-change:transform; }
/* a sombra já vem desenhada no arquivo; a margem negativa devolve o enquadramento original */
.char img{ display:block; width:118%; height:auto; margin:-9% 0 0 -9% }   /* height:auto: o <img> tem width/height (espaço reservado antes de baixar) */
/* top 12.5% (era 5%): o Gohan de capa (12/10) tem a ponta da capa alta, que encostava no botão Som
   no alto do voo. Medido de 1280x720 a 1920x1080: a capa passa a pelo menos 6px do botão */
/* largura em --u (era 29% da tela): em tela larga e baixa (1366x660) ele crescia pela largura e
   pousava nas cabeças da turma da nave; em 16:9 o tamanho é o mesmo de antes */
.char--voa{ right:1%; top:12.5%; width:calc(var(--u)*29); animation:voar 9.5s ease-in-out infinite }
.char--nave{ right:2.5%; bottom:24%; width:20%; animation:planar 11s ease-in-out infinite }
@keyframes voar{
  0%,100%{ transform:translate3d(0,0,0) rotate(0) }
  35%{ transform:translate3d(calc(var(--u)*-.9),calc(var(--u)*-1.7),0) rotate(-1.2deg) }
  70%{ transform:translate3d(calc(var(--u)*.5),calc(var(--u)*.7),0) rotate(.6deg) }
}
@keyframes planar{
  0%,100%{ transform:translate3d(0,0,0) rotate(-.5deg) }
  50%{ transform:translate3d(calc(var(--u)*-.6),calc(var(--u)*-1.9),0) rotate(.7deg) }
}

/* ---------- cabeçalho ---------- */
.head{ position:absolute; left:2.4%; top:3%; display:flex; align-items:center; gap:calc(var(--u)*1.2); z-index:6 }
.crest{ width:calc(var(--u)*7); height:auto; filter:drop-shadow(0 calc(var(--u)*.35) calc(var(--u)*.5) rgba(3,25,50,.6)); animation:pulseCrest 4.5s ease-in-out infinite }
@keyframes pulseCrest{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.045)} }
.title{
  position:relative; margin:0; font-size:calc(var(--u)*5.2); font-weight:800; font-style:italic;
  letter-spacing:.005em; line-height:.98;
  background:linear-gradient(180deg,#ffe25e 6%,#ff8a12 48%,#ef3d05 72%,#ffb44a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title::before{
  content:attr(data-text); position:absolute; inset:0; z-index:-1;
  -webkit-text-stroke:calc(var(--u)*.72) #fff6cf; color:transparent;
  filter:drop-shadow(0 calc(var(--u)*.28) 0 rgba(10,40,80,.85)) drop-shadow(0 calc(var(--u)*.7) calc(var(--u)*.6) rgba(6,30,60,.45));
}
.title::after{
  content:attr(data-text); position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  background-size:280% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:glint 6.5s ease-in-out infinite;
}
@keyframes glint{ 0%,70%{background-position:170% 0} 90%,100%{background-position:-170% 0} }

/* ---------- menu ---------- */
/* os sete itens à vista (pedido do cliente, 12/10/2026: o desktop mostrava 6 e rolava o
   sétimo, como a referência, e "O Studio" parecia faltar). O espaço do menu até a barra de
   esferas é o mesmo de antes, dividido em 7 linhas em vez de 6 */
.menu{ position:absolute; left:0; right:0; top:16%; z-index:3;
  --rowh:min(calc((69.2cqh - var(--u) * 7.9) / 7), calc(var(--u) * 6.4)) }
.viewport{ position:relative; height:calc(var(--rowh) * var(--vis, 7)); overflow:hidden }
.list{ list-style:none; margin:0; padding:0; transform:translateY(calc(var(--off,0) * var(--rowh) * -1)); transition:transform .28s cubic-bezier(.3,.9,.35,1) }
.row{
  position:relative; display:flex; align-items:center; gap:calc(var(--u)*1.1);
  width:100%; height:var(--rowh); padding:0 0 0 2.4%;
  background:none; border:0; font:inherit; color:inherit; text-align:left; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* nenhuma faixa atrás dos itens: só o texto, escalonado em arco */
.row{ padding-left:calc(11.5% + var(--ind, 0) * 1%); transition:padding-left .26s cubic-bezier(.3,.9,.35,1) }
.row__ball{
  width:calc(var(--rowh) * .74); height:auto; flex:none;
  filter:drop-shadow(0 0 calc(var(--u)*.14) rgba(255,255,255,.6)) drop-shadow(0 calc(var(--u)*.12) calc(var(--u)*.18) rgba(4,25,50,.55));
  transition:filter .22s ease, transform .22s ease;
}
.row__label{
  font-size:calc(var(--u)*2.75); font-weight:700; font-style:italic; line-height:1;
  color:#f2faff; transition:font-size .22s ease, color .22s ease;
  text-shadow:
    calc(var(--u)*.11) 0 0 var(--marinho), calc(var(--u)*-.11) 0 0 var(--marinho),
    0 calc(var(--u)*.11) 0 var(--marinho), 0 calc(var(--u)*-.11) 0 var(--marinho),
    calc(var(--u)*.08) calc(var(--u)*.08) 0 var(--marinho), calc(var(--u)*-.08) calc(var(--u)*.08) 0 var(--marinho),
    calc(var(--u)*.08) calc(var(--u)*-.08) 0 var(--marinho), calc(var(--u)*-.08) calc(var(--u)*-.08) 0 var(--marinho),
    0 calc(var(--u)*.34) calc(var(--u)*.45) rgba(4,25,50,.6);
}
/* itens nas pontas da janela recuam de foco */
.row[data-borda="1"]{ opacity:.52 }
.row[data-borda="1"] .row__label{ color:#cfe4f2 }
.row[data-borda="1"] .row__ball{ filter:brightness(.7) }

/* item selecionado: dourado, maior, com o fio que corre até a nuvem */
.row.on .row__ball{ filter:drop-shadow(0 calc(var(--u)*.2) calc(var(--u)*.3) rgba(120,60,0,.55)); transform:scale(1.3) }
.row.on .row__label{
  font-size:calc(var(--u)*3.25);
  background:linear-gradient(180deg,#fff3a8 4%,#ffd23f 40%,#ff9d12 74%,#ffcf5c 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
  filter:
    drop-shadow(calc(var(--u)*.1) 0 0 #fff) drop-shadow(calc(var(--u)*-.1) 0 0 #fff)
    drop-shadow(0 calc(var(--u)*.1) 0 #fff) drop-shadow(0 calc(var(--u)*-.1) 0 #fff)
    drop-shadow(0 calc(var(--u)*.16) 0 rgba(120,62,0,.75))
    drop-shadow(0 calc(var(--u)*.4) calc(var(--u)*.5) rgba(6,30,60,.55));
}

/* o fio dourado: atravessa por trás do texto e termina na nuvem */
.fio{
  /* uma única cópia da arte, inteira: border-image mantém a ponta e a nuvem no
     tamanho natural e estica só o trecho reto do meio. Sem emenda, sem recorte. */
  --fioH:calc(var(--u)*6.2);
  position:absolute; left:0; right:44%; z-index:0; pointer-events:none;
  height:var(--fioH);
  top:calc(var(--topo, 0px) + var(--rowh) * 1.02);
  translate:0 -50%;
  transition:top .28s cubic-bezier(.3,.9,.35,1);
  opacity:0;
  border-style:solid;
  border-width:0 calc(var(--fioH) * 1.3139) 0 calc(var(--fioH) * .0973);
  border-image-source:url("../assets/img/fio.webp?v=9d503b8c");
  border-image-slice:0 540 0 40 fill;   /* 540px = a nuvem, 40px = a ponta arredondada */
  border-image-repeat:stretch;
}
.fio.pronto{ opacity:1 }

.row:focus{ outline:none }
.row:focus-visible .row__ball{ transform:scale(1.32) }
.row:focus-visible .row__label{ filter:drop-shadow(0 0 calc(var(--u)*1.1) rgba(255,232,150,.9)) }
.row.on:focus-visible .row__label{ filter:
    drop-shadow(calc(var(--u)*.1) 0 0 #fff) drop-shadow(calc(var(--u)*-.1) 0 0 #fff)
    drop-shadow(0 calc(var(--u)*.1) 0 #fff) drop-shadow(0 calc(var(--u)*-.1) 0 #fff)
    drop-shadow(0 calc(var(--u)*.16) 0 rgba(120,62,0,.75))
    drop-shadow(0 0 calc(var(--u)*1.2) rgba(255,255,255,.8)) }
.row.fire{ animation:fire .34s ease-out }
@keyframes fire{ 0%{filter:brightness(1)} 25%{filter:brightness(1.9) saturate(1.3)} 100%{filter:brightness(1)} }

/* setas */
.chev{
  position:absolute; left:28%; width:calc(var(--u)*4.4); height:calc(var(--u)*2.6);
  background:none; border:0; padding:0; cursor:pointer; z-index:4;
  filter:drop-shadow(0 calc(var(--u)*.16) 0 rgba(10,40,80,.85));
}
.chev svg{ width:100%; height:100%; display:block }
.chev--up{ top:calc(var(--u)*-1.2); animation:nudgeUp 1.5s ease-in-out infinite }
.chev--down{ bottom:calc(var(--u)*-2.4); animation:nudgeDown 1.5s ease-in-out infinite }
.chev[disabled]{ opacity:.25; animation:none; cursor:default }
@keyframes nudgeUp{ 0%,100%{transform:translateY(0);opacity:.95} 50%{transform:translateY(calc(var(--u)*-.45));opacity:.6} }
@keyframes nudgeDown{ 0%,100%{transform:translateY(0);opacity:.95} 50%{transform:translateY(calc(var(--u)*.45));opacity:.6} }

/* ---------- barra de esferas ---------- */
/* A caixa é só a parte visível da arte. O arquivo (1100×375) tem 14% de vazio à esquerda,
   11% à direita, 34% em cima e 29% embaixo (alfa > 24); com a caixa no arquivo inteiro, uma
   barra de 260px mostrava esferas de 22px. A imagem passa da caixa e as margens negativas
   devolvem o enquadramento, como nos personagens — a arte não é cortada.
   Margens em % da largura da caixa: imagem 133,49% (1/.7491), altura dela 45,51%.
   Encaixada na linha do rodapé (18%), 2u para dentro do painel: assim o topo fica abaixo da
   seta de baixo do menu e a barra pode passar dos 28% de largura onde a seta mora. Apoiada
   em cima da linha, como era, ela não passava de 24,6u. Com 29u, cada esfera tem ~3,3u,
   perto de 0,85 do ícone do menu; a legenda continua a mais de 3u abaixo. */
.balls{ position:absolute; left:2.4%; bottom:calc(18% - var(--u) * 2); width:calc(var(--u)*29); z-index:6 }
.balls img{ width:133.49%; height:auto; max-width:none; margin:-15.29% 0 -13.11% -18.69%; display:block; filter:drop-shadow(0 calc(var(--u)*.35) calc(var(--u)*.5) rgba(4,25,50,.5)) }
.halo{
  /* centros das esferas em % da caixa visível: (x − 14%) / 74,91% e (y − 33,6%) / 37,6% */
  position:absolute; top:51.06%; width:10.28%; aspect-ratio:1; border-radius:50%;
  left:calc(20.93% + var(--i) * 11.774%); translate:-50% -50%;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,215,90,.6) 45%, transparent 72%);
  opacity:0; transition:opacity .25s ease; pointer-events:none; mix-blend-mode:screen;
}
.halo.on{ opacity:1; animation:haloPulse 1.6s ease-in-out infinite }
@keyframes haloPulse{ 0%,100%{transform:scale(1);opacity:.75} 50%{transform:scale(1.5);opacity:1} }

/* ---------- rodapé / HUD ---------- */
/* o painel tem o canto superior direito chanfrado: o contorno vermelho
   e o recorte do fundo seguem exatamente o mesmo caminho */
.hud{
  position:absolute; left:0; right:0; bottom:0; z-index:5;
  min-height:18%; padding:calc(var(--u)*4.6) 21% calc(var(--u)*.7) 3%;
  display:flex; align-items:center; gap:calc(var(--u)*2);
  background:none;
}
.hud__painel{
  position:absolute; inset:0; z-index:-1;
  clip-path:polygon(0 0, 72.6% 0, 83.2% 57%, 100% 57%, 100% 100%, 0 100%);
  background:
    radial-gradient(circle, rgba(178,72,6,.19) 32%, transparent 34%) 0 0 / calc(var(--u)*1.15) calc(var(--u)*1.15),
    linear-gradient(174deg, #f3ae63 0%, #ed9a45 32%, #e78e37 70%, #e1832b 100%);
  box-shadow:0 calc(var(--u)*-.4) calc(var(--u)*1.2) rgba(120,52,6,.18) inset;
}
.hud__traco{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; overflow:visible }
.hud__traco .vermelho{ fill:none; stroke:#d8261f; stroke-width:3.4; vector-effect:non-scaling-stroke }
.so-alto{ display:none }
.hud__traco .claro{ fill:none; stroke:rgba(255,255,255,.85); stroke-width:2; vector-effect:non-scaling-stroke }

.desc{
  margin:0; flex:1 1 auto; max-width:64ch;
  font-family:"Pixelify Sans","Baloo 2",monospace;
  font-size:calc(var(--u)*2.05); font-weight:600; line-height:1.18; letter-spacing:.02em; color:#fff;
  /* contorno e sombra duros, sem desfoque: pixel não tem borda suave. Em em (.12u e .3u
     sobre a letra de 2.05u), para acompanhar a letra maior do retrato */
  text-shadow:
    .0585em 0 0 #5e2304, -.0585em 0 0 #5e2304,
    0 .0585em 0 #5e2304, 0 -.0585em 0 #5e2304,
    .0585em .0585em 0 #5e2304, -.0585em .0585em 0 #5e2304,
    .0585em -.0585em 0 #5e2304, -.0585em -.0585em 0 #5e2304,
    0 .1463em 0 rgba(94,35,4,.45);
}
.hint{
  margin:calc(var(--u)*.55) 0 0;
  font-family:"Pixelify Sans","Baloo 2",monospace;
  font-size:calc(var(--u)*1.3); font-weight:600; letter-spacing:.06em; color:#6e2b05;
}
.hint--toque{ display:none }
@media (hover:none) and (pointer:coarse){ .hint--tecla{ display:none } .hint--toque{ display:inline } }
.px-seta{ height:.8em; width:auto; vertical-align:-.05em; shape-rendering:crispEdges; fill:currentColor }

.sound{
  position:absolute; right:1.6%; top:3.6%; z-index:6; display:flex; align-items:center; gap:calc(var(--u)*.5);
  padding:calc(var(--u)*.55) calc(var(--u)*1.1); cursor:pointer;
  font-family:"Chakra Petch",system-ui,sans-serif; font-size:calc(var(--u)*1.2); font-weight:600; letter-spacing:.06em;
  color:#eaf8ff; background:rgba(8,40,78,.55); border:calc(var(--u)*.14) solid rgba(160,225,255,.6);
  border-radius:calc(var(--u)*.5); backdrop-filter:blur(calc(var(--u)*.3));
}
.sound svg{ width:calc(var(--u)*1.7); height:calc(var(--u)*1.7) }
.sound[aria-pressed="false"]{ color:#8fb4d2; border-color:rgba(160,225,255,.28) }
.sound[aria-pressed="false"] .wave{ opacity:.25 }
.sound.tocando .wave{ animation:onda 1.4s ease-in-out infinite }
@keyframes onda{ 0%,100%{opacity:1} 50%{opacity:.35} }

/* ---------- retrato estreito ---------- */
@container stage (aspect-ratio < 0.95){
  /* mesma leitura do desktop e do jogo: título no alto, personagem voando,
     menu logo abaixo à esquerda, nave sobre as nuvens à direita, esferas
     apoiadas no rodapé à esquerda. Só empilha o que no desktop fica lado a lado. */
/* Trocar pela arte vertical quando ela chegar: assets/img/fundo-mobile.webp
     e background-position:center. Especificação das faixas no CLAUDE.md, seção 5.1. */
  .sky{ background-image:url("../assets/img/fundo.webp?v=70a7b92b"); background-position:29% 82% }

  .head{ left:4%; top:2.4% }
  .crest{ width:calc(var(--u)*6.4) }
  .title{ font-size:calc(var(--u)*4.3) }
  /* era 1.05u: no iPhone com Safari dava letra de 6px e 18px de altura, impossível de tocar */
  .sound{ min-height:calc(var(--ul)*4.4); padding:0 calc(var(--ul)*1.2); gap:calc(var(--ul)*.55);
    font-size:calc(var(--ul)*1.5); border-width:calc(var(--ul)*.16); border-radius:calc(var(--ul)*.6) }
  .sound svg{ width:calc(var(--ul)*2.1); height:calc(var(--ul)*2.1) }

  /* Gohan de capa (12/10): top 11% (era 9.5%) para a capa não encostar no botão Som; 30u (era 33)
     para os pés não descerem até a seta e o primeiro item do menu; right 3% (era -4%): a arte é
     mais comprida que a antiga e as botas saíam da tela */
  .char--voa{ width:calc(var(--u)*30); top:11%; right:3% }
  /* a largura da nave mora no .screen porque a barra de esferas, irmã dela, também precisa dela */
  .screen{ --naveW:min(calc(var(--u) * 19.5), 16cqh) }
  .char--nave{ width:var(--naveW); right:3%; bottom:18% }

  .mar--longe{ bottom:31%; height:12% }
  .mar--meio{ bottom:23%; height:17% }
  .mar--perto{ bottom:0; height:31% }

  .menu{ top:22.5%; --rowh:min(calc(var(--u) * 6), calc((59cqh - var(--u) * 24) / 7)) }
  .chev{ left:44% }
  .row{ padding-left:calc(7% + var(--ind, 0) * .6%) }
  .row__label{ font-size:calc(var(--u)*2.7) }
  .row.on .row__label{ font-size:calc(var(--u)*3) }
  /* mesmo conceito do desktop: comprimento fixo, com a nuvem logo depois do item mais longo
     ("Mentoria e Produtos", 27,4u selecionado) e a mesma folga de 2,6u. Medido em --u, como
     o texto: em % da largura (era right:6%), a base esticava em celular de tela baixa, onde
     --u encolhe pela altura e o texto diminui, mas a largura não.
     Início do texto = recuo da linha (7%) + ícone (rowh × .74) + vão (1,1u). Trocou o nome de
     um item? Remedir a largura do mais longo. */
  .fio{ --fioH:calc(var(--u)*6); right:auto;
    width:calc(7% + var(--rowh) * .74 + var(--u) * (1.1 + 27.4 + 2.6) + var(--fioH) * 1.3139) }

  /* base em 17% + 2,55u: onde a barra visível ficava no retrato validado. Até 32ul, mas sempre
     antes da nave, que divide a mesma altura: 4% de recuo + barra + folga ≤ 100% − 3% − nave */
  .balls{ width:min(calc(var(--ul) * 32), calc(87% - var(--naveW))); left:4%; bottom:calc(17% + var(--u) * 2.55) }

  .so-largo{ display:none } .so-alto{ display:block }
  .hud{ min-height:18.5%; padding:calc(var(--u)*3.4) 5% calc(var(--u)*1.6) 5%; flex-wrap:wrap; gap:calc(var(--u)*1.2) }
  .hud__painel{ clip-path:polygon(0 0, 66% 0, 79.8% 24%, 100% 24%, 100% 100%, 0 100%) }
  .desc{ font-size:calc(var(--ul)*2.3); max-width:100% }
  .hint{ font-size:calc(var(--ul)*1.6); margin-top:calc(var(--ul)*.7) }
}

@media (prefers-reduced-motion:reduce){
  .sky,.char,.chev,.halo.on,.title::after,.crest,.faixa,.camada{ animation:none !important }
  .list{ transition:none }
}