/* DCX Audio · design system · texturas (DS-1)
 * GERADO por fonte/gerar-textures.py (editar la). Depende de tokens.css.
 *
 * Ideia: cada material e uma pilha de camadas fisicas, como as pecas do 404 (alojamento,
 * borda, superficie): fundo de cor + camada escura (multiply: fibra, mancha, sujeira) +
 * camada clara (screen: grao claro, estria de luz, poeira). As camadas sao SVG feTurbulence
 * ladrilhaveis em data URI, sem arquivo externo.
 *
 * Intensidade: --tex-intensity (0 = liso, 1 = padrao, 1.6 = maximo). Vale para tudo, pode ser
 * trocada por elemento. --tx-desloc muda a origem dos ladrilhos (use .tx-v2/.tx-v3 para que
 * dois cartoes vizinhos nao fiquem iguais).
 *
 * Uso: <div class="tx tx-papel">...</div>   modificadores: .tx-desgaste .tx-poeira .tx-reticula
 *      tinta de serigrafia em texto/logo/bloco: .tx-tinta (e .tx-registro para titulo grande)
 *      componentes: .tx-tecla (elastomero, estados .down/.lit), .tx-visor (LED), .tx-lcd
 *      capa de cassete (DS-5): .tx-capa (cartao preto), .tx-faixa (faixa cinza), .tx-prata,
 *      .tx-dobra (+ .tx-dobra-h; posicao em --dobra)
 *
 * ONDE NAO USAR
 *   - atras de texto corrido ou abaixo de 16px: no maximo papel com --tex-intensity <= .6;
 *     manual e documentacao ficam em .tx-papel leve ou liso
 *   - .tx-tinta (falhas) e .tx-registro so em titulo >= 32px, numeral e logo; nunca em texto
 *     de leitura, link, botao de interface ou campo de formulario
 *   - .tx-reticula so em bloco de cor ou imagem, nunca atras de texto
 *   - nada de textura em foco de teclado, estados de erro, graficos de dados e tabelas
 *   - a face das maquinas ja tem acabamento proprio: nao aplicar por cima dos paineis
 *   - impressao, alto contraste e "reduzir transparencia" desligam tudo (fim do arquivo)
 */
:root {
  --tex-intensity: 1;
  --tx-fibras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .07' numOctaves='2' seed='7' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.07 .55' numOctaves='2' seed='19' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='lighten'/%3E%3CfeColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.25 0 0 0 0 0.13 3.2 0 0 0 -2.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-grao-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.34 0 0 0 0 0.25 0 0 0 0 0.13 4.5 0 0 0 -2.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 0.97 0 0 0 0 0.9 -4.5 0 0 0 1.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-manchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='23' stitchTiles='stitch' result='n1'/%3E%3CfeColorMatrix in='n1' result='m1' values='0 0 0 0 0.52 0 0 0 0 0.31 0 0 0 0 0.13 2.6 0 0 0 -1.74'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.08' numOctaves='2' seed='5' stitchTiles='stitch' result='n2'/%3E%3CfeColorMatrix in='n2' result='m2' values='0 0 0 0 0.52 0 0 0 0 0.31 0 0 0 0 0.13 7 0 0 0 -5.25'/%3E%3CfeMerge%3E%3CfeMergeNode in='m1'/%3E%3CfeMergeNode in='m2'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-verge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpattern id='p' width='240' height='3' patternUnits='userSpaceOnUse'%3E%3Crect width='240' height='1' fill='%235a4526' fill-opacity='.15'/%3E%3C/pattern%3E%3Cfilter id='d' filterUnits='userSpaceOnUse' x='-12' y='-12' width='264' height='264'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 .25' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='1.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23d)'%3E%3Crect x='-12' y='-12' width='264' height='264' fill='url(%23p)'/%3E%3Crect x='40' y='-12' width='1.4' height='264' fill='%235a4526' fill-opacity='.09'/%3E%3Crect x='160' y='-12' width='1.4' height='264' fill='%235a4526' fill-opacity='.09'/%3E%3C/g%3E%3C/svg%3E");
  --tx-mancha-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .011' numOctaves='3' seed='31' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0 0 0 -0.42'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-falha-tinta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55 .4' numOctaves='3' seed='41' stitchTiles='stitch' result='a'/%3E%3CfeColorMatrix in='a' result='x' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -14 0 0 0 10.3'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035' numOctaves='3' seed='8' stitchTiles='stitch' result='b'/%3E%3CfeColorMatrix in='b' result='y' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -9 0 0 0 6.9'/%3E%3CfeComposite in='x' in2='y' operator='in'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-escovado-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='120'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0011 .6' numOctaves='2' seed='13' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.11 0 0 0 0 0.12 1.3 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-escovado-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='120'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0011 .6' numOctaves='2' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -1.5 0 0 0 0.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-riscos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0016 .9' numOctaves='1' seed='3' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .0016' numOctaves='1' seed='9' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='lighten'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 26 0 0 0 -19.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-fosco-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.11 0 0 0 0 0.12 3.2 0 0 0 -1.82'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-fosco-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='1' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -3.2 0 0 0 1.38'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-vidro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' seed='52' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 2.4 0 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-poeira-clara: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='1' seed='61' stitchTiles='stitch' result='a'/%3E%3CfeColorMatrix in='a' result='p' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 34 0 0 0 -25.6'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .3' numOctaves='2' seed='6' stitchTiles='stitch' result='b'/%3E%3CfeColorMatrix in='b' result='q' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 22 0 0 0 -17.2'/%3E%3CfeMerge%3E%3CfeMergeNode in='p'/%3E%3CfeMergeNode in='q'/%3E%3C/feMerge%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .91 0 0 0 0 .86 0 0 0 .8 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-poeira-escura: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='1' seed='61' stitchTiles='stitch' result='a'/%3E%3CfeColorMatrix in='a' result='p' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 34 0 0 0 -25.6'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.06 .3' numOctaves='2' seed='6' stitchTiles='stitch' result='b'/%3E%3CfeColorMatrix in='b' result='q' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 22 0 0 0 -17.2'/%3E%3CfeMerge%3E%3CfeMergeNode in='p'/%3E%3CfeMergeNode in='q'/%3E%3C/feMerge%3E%3CfeColorMatrix values='0 0 0 0 .30 0 0 0 0 .26 0 0 0 0 .20 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-poeira-fina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='1' seed='61' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .91 0 0 0 0 .86 34 0 0 0 -25.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-sujeira: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055' numOctaves='3' seed='90' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.24 0 0 0 0 0.19 0 0 0 0 0.11 1.9 0 0 0 -0.92'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-reticula: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23000'/%3E%3C/radialGradient%3E%3Cpattern id='p' width='5.65685' height='5.65685' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='6' height='6'/%3E%3Ccircle cx='2.82843' cy='2.82843' r='2.82843' fill='url(%23g)'/%3E%3C/pattern%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='2' seed='12' stitchTiles='stitch' result='n'/%3E%3CfeComposite in='SourceGraphic' in2='n' operator='arithmetic' k2='1' k3='.9' k4='-.47'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .11 0 0 0 0 .11 14 0 0 0 -7'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23p)' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-mosqueado-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .03' numOctaves='4' seed='73' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='2' seed='11' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.38 0 0 0 0 0.34 1.15 0 0 0 -0.56'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tx-mosqueado-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .03' numOctaves='4' seed='73' stitchTiles='stitch' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.22' numOctaves='2' seed='11' stitchTiles='stitch' result='b'/%3E%3CfeBlend in='a' in2='b' mode='multiply'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.15 0 0 0 0 0.12 -1.7 0 0 0 0.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- motor de camadas */
.tx { position: relative; isolation: isolate; }
.tx::before, .tx::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  opacity: calc(var(--tex-intensity) * .625);
}
/* escuras: e1..e3 do material, e4 impressao, e5 desgaste */
.tx::before {
  background-image: var(--tx-e6, none), var(--tx-e5, none), var(--tx-e4, none), var(--tx-e3, none), var(--tx-e2, none), var(--tx-e1, none);
  background-size: var(--tx-e6s, 100% 100%), var(--tx-e5s, auto), var(--tx-e4s, auto), var(--tx-e3s, auto), var(--tx-e2s, auto), var(--tx-e1s, auto);
  background-position: 0 0, var(--tx-desloc, 0 0), var(--tx-desloc, 0 0), var(--tx-desloc, 0 0), var(--tx-desloc, 0 0), var(--tx-desloc, 0 0);
  mix-blend-mode: multiply;
  box-shadow: var(--tx-borda-gasta, 0 0 0 transparent), var(--tx-borda, 0 0 0 transparent);
}
/* claras: c1..c2 do material, c3 riscos, c4 poeira */
.tx::after {
  background-image: var(--tx-c5, none), var(--tx-c4, none), var(--tx-c3, none), var(--tx-c2, none), var(--tx-c1, none);
  background-size: var(--tx-c5s, 100% 100%), var(--tx-c4s, auto), var(--tx-c3s, auto), var(--tx-c2s, auto), var(--tx-c1s, auto);
  background-position: 0 0, var(--tx-desloc, 0 0), var(--tx-desloc, 0 0), var(--tx-desloc, 0 0), var(--tx-desloc, 0 0);
  mix-blend-mode: screen;
}
.tx-v2 { --tx-desloc: 137px 61px; }
.tx-v3 { --tx-desloc: 311px 197px; }

/* cada .tx zera as camadas: um material dentro de outro nao herda as camadas do de fora */
.tx {
  --tx-e1: none; --tx-e2: none; --tx-e3: none; --tx-e4: none; --tx-e5: none; --tx-e6: none;
  --tx-c1: none; --tx-c2: none; --tx-c3: none; --tx-c4: none; --tx-c5: none;
  --tx-borda: 0 0 0 transparent; --tx-borda-gasta: 0 0 0 transparent;
}

/* ---------------------------------------------------------------- papel envelhecido */
.tx-papel {
  background-color: var(--dcx-branco); color: var(--dcx-preto);
  --tx-e1: var(--tx-fibras); --tx-e1s: 260px; --tx-e2: var(--tx-grao-escuro); --tx-e2s: 180px; --tx-e3: var(--tx-manchas); --tx-e3s: 600px;
  --tx-c1: var(--tx-grao-claro); --tx-c1s: 180px;
  /* borda amarelada: a folha oxida primeiro pelas beiradas */
  --tx-borda: inset 0 0 0 1px rgba(120, 85, 30, .10), inset 0 0 28px rgba(150, 105, 40, .22), inset 0 0 4px rgba(120, 80, 25, .18);
}
/* cartao: papel mais grosso, vergê aparente, mais oxidado */
.tx-cartao {
  background-color: var(--dcx-branco-creme); color: var(--dcx-preto);
  --tx-e1: var(--tx-fibras); --tx-e1s: 260px; --tx-e2: var(--tx-verge); --tx-e2s: 240px; --tx-e3: var(--tx-manchas); --tx-e3s: 600px;
  --tx-c1: var(--tx-grao-claro); --tx-c1s: 180px;
  --tx-borda: inset 0 0 0 1px rgba(110, 75, 25, .16), inset 0 0 40px rgba(150, 100, 35, .30), inset 0 0 6px rgba(110, 70, 20, .22);
  box-shadow: var(--dcx-sombra-cartao);
}
/* serigrafia em bloco de cor (cartaz, faixa): densidade irregular da tinta + grao */
.tx-serigrafia {
  --tx-e1: var(--tx-mancha-tinta); --tx-e1s: 420px; --tx-e2: var(--tx-grao-escuro); --tx-e2s: 180px;
  --tx-c1: var(--tx-grao-claro); --tx-c1s: 180px;
}
/* tinta de serigrafia em texto grande, numeral ou logo: falhas onde a tela nao passou tinta */
.tx-tinta {
  -webkit-mask-image: var(--tx-falha-tinta), linear-gradient(rgb(0 0 0 / calc(1 - var(--tex-intensity) * .625)), rgb(0 0 0 / calc(1 - var(--tex-intensity) * .625)));
  -webkit-mask-size: 260px, 100% 100%;
  -webkit-mask-composite: source-over;
  mask-image: var(--tx-falha-tinta), linear-gradient(rgb(0 0 0 / calc(1 - var(--tex-intensity) * .625)), rgb(0 0 0 / calc(1 - var(--tex-intensity) * .625)));
  mask-size: 260px, 100% 100%;
  mask-composite: add;
  mask-position: var(--tx-desloc, 0 0), 0 0;
}
/* registro desalinhado: segunda passada de tinta meio pixel fora (so titulo grande) */
.tx-registro { text-shadow: calc(var(--tex-intensity) * .9px) calc(var(--tex-intensity) * .5px) 0 var(--tx-registro-cor, rgb(118 35 43 / .55)); }

/* ---------------------------------------------------------------- metal escovado (aluminio do 404) */
.tx-metal {
  background-color: var(--dcx-aluminio-2);
  background-image:
    /* faixa de reflexo larga e irregular, ao longo da escovacao */
    linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .16) 18%, rgb(255 255 255 / .04) 31%, rgb(255 255 255 / 0) 46%, rgb(0 0 0 / .05) 78%, rgb(0 0 0 / .1) 100%),
    linear-gradient(155.9deg, var(--dcx-aluminio-1) 9%, var(--dcx-aluminio-2) 113%);
  color: var(--dcx-marinho);
  --tx-e1: var(--tx-escovado-escuro); --tx-e1s: 640px 120px; --tx-e2: var(--tx-fosco-escuro); --tx-e2s: 160px;
  --tx-c1: var(--tx-escovado-claro); --tx-c1s: 640px 120px; --tx-c2: var(--tx-riscos); --tx-c2s: 700px;
  --tx-borda: inset 0 1px 0 rgb(255 255 255 / .55), inset 0 -1px 0 rgb(20 24 30 / .25);
}
/* metal girado (tampa de knob, botao redondo): aneis de torno + dois reflexos opostos */
.tx-metal-girado {
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0) 0 .7px, rgb(255 255 255 / .09) .9px, rgb(0 0 0 / .06) 1.4px, rgb(255 255 255 / 0) 1.9px),
    conic-gradient(from 18deg, #9a9ea6, #e6e9ee 8%, #a7abb2 19%, #8d9199 31%, #b9bdc4 44%, #9a9ea6 50%, #eef0f3 58%, #a3a7ae 69%, #8b8f97 81%, #c3c6cc 92%, #9a9ea6);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), inset 0 -1px 1px rgb(0 0 0 / .35), var(--dcx-sombra-alojamento);
  --tx-c2: var(--tx-riscos); --tx-c2s: 700px;
}

/* ---------------------------------------------------------------- plastico injetado (tecla de funcao) */
.tx-plastico {
  background-color: var(--dcx-elastomero-1);
  background-image: linear-gradient(to bottom, var(--dcx-elastomero-1), var(--dcx-elastomero-2));
  --tx-e1: var(--tx-fosco-escuro); --tx-e1s: 160px;
  --tx-c1: var(--tx-fosco-claro); --tx-c1s: 160px;
  --tx-borda: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 -2px 2px -1px rgb(0 0 0 / .18);
}

/* ---------------------------------------------------------------- modificadores */
/* desgaste: sujeira em nuvens + escurecimento onde o dedo e a mesa encostam (base) + riscos */
.tx-desgaste {
  --tx-e5: var(--tx-sujeira); --tx-e5s: 620px; --tx-c3: var(--tx-riscos); --tx-c3s: 700px;
  --tx-borda-gasta: inset 0 -10px 14px -10px rgba(45, 32, 12, .45), inset 0 0 0 1px rgba(45, 32, 12, .12);
}
.tx-poeira { --tx-c4: var(--tx-poeira-clara); --tx-c4s: 520px; }
.tx-papel.tx-poeira, .tx-cartao.tx-poeira { --tx-e4: var(--tx-poeira-escura); --tx-e4s: 520px; --tx-c4: none; }
.tx-reticula { --tx-e4: var(--tx-reticula); --tx-e4s: 240px; }

/* ---------------------------------------------------------------- tecla de elastomero (pecas do 404)
 * <button class="tx-tecla" style="--w:64px;--h:42px"><i class="a"></i><i class="b"></i><i class="s"></i><span>REC</span></button>
 * a = alojamento, b = borda do elastomero, s = superficie moldada. .down = pressionado, .lit = aceso */
.tx-tecla { position: relative; width: var(--w, 64px); height: var(--h, 42px); margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: 700 11px/.98 var(--dcx-fonte-painel-cond); letter-spacing: -.2px; color: #30312f; -webkit-tap-highlight-color: transparent; }
.tx-tecla > i { position: absolute; display: block; box-sizing: border-box; isolation: isolate; }
.tx-tecla .a { inset: 0; border-radius: var(--dcx-r-4); background: var(--dcx-alojamento); box-shadow: var(--dcx-sombra-alojamento); }
.tx-tecla .b { left: 2px; top: 2px; width: calc(var(--w, 64px) - 4px); height: calc(var(--h, 42px) - 5px); border-radius: var(--dcx-r-3); background: var(--dcx-elastomero-borda); border: 1px solid #0d100e; }
.tx-tecla .s { left: 4px; top: 3px; width: calc(var(--w, 64px) - 8px); height: calc(var(--h, 42px) - 7px); border-radius: var(--dcx-r-2); border: .6px solid #b9bdc1; background: linear-gradient(to bottom, var(--dcx-elastomero-1), var(--dcx-elastomero-2)); }
.tx-tecla .a::after, .tx-tecla .s::before, .tx-tecla .s::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; opacity: calc(var(--tex-intensity) * .625); }
/* poeira presa no vao do alojamento */
.tx-tecla .a::after { background: var(--tx-poeira-fina) 0 0 / 360px; background-position: var(--tx-desloc, 0 0); mix-blend-mode: screen; z-index: 0; }
/* silicone fosco: micro pontilhado escuro e claro */
.tx-tecla .s::before { background: var(--tx-fosco-escuro) 0 0 / 160px; mix-blend-mode: multiply; z-index: 0; }
.tx-tecla .s::after { background: var(--tx-fosco-claro) 0 0 / 160px; mix-blend-mode: screen; z-index: 0; }
.tx-tecla > span { position: absolute; left: 50%; top: calc((var(--h, 42px) - 4px) / 2); transform: translate(-50%, -50%); white-space: nowrap; text-align: center; z-index: 1; pointer-events: none; }
.tx-tecla.lit .b { background: var(--dcx-vinho); }
.tx-tecla.lit .s { border-color: #f38c91; background: linear-gradient(to bottom, var(--dcx-rosa), var(--dcx-rosa-sombra)); }
.tx-tecla.lit > span { color: var(--dcx-vinho-tinta); }
.tx-tecla.down .a { box-shadow: none; }
.tx-tecla.down .s { box-shadow: var(--dcx-sombra-moldada); }
.tx-tecla.down > span { transform: translate(-50%, calc(-50% + .5px)); }
.tx-tecla:focus-visible { outline: 2px solid var(--dcx-marinho); outline-offset: 3px; border-radius: var(--dcx-r-4); }

/* ---------------------------------------------------------------- visor LED de 7 segmentos (cores do 404)
 * <div class="tx-visor"><div class="vidro"> svg com .sg / .sg.on </div></div> */
.tx-visor { position: relative; display: inline-block; padding: 2px; background: #191a17; border: 2px solid #3f4038; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); }
.tx-visor .vidro { position: relative; isolation: isolate; padding: 10px 11px 8px; background: linear-gradient(to bottom, #201c14, #281c17 60%, #3d211c); overflow: hidden; }
.tx-visor .vidro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tx-vidro) 0 0 / 200px; mix-blend-mode: multiply; opacity: calc(var(--tex-intensity) * .625); }
/* reflexo no vidro (faixa diagonal de janela) e poeira por cima do vidro */
.tx-visor .vidro::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--tex-intensity) * .625);
  background: var(--tx-poeira-fina) 0 0 / 360px,
    linear-gradient(104deg, rgb(255 240 220 / 0) 0 21%, rgb(255 240 220 / .10) 21% 24%, rgb(255 240 220 / .05) 24% 33%, rgb(255 240 220 / 0) 33% 100%),
    linear-gradient(to bottom, rgb(255 255 255 / .07), rgb(255 255 255 / 0) 2px); }
.tx-visor svg { display: block; overflow: visible; }
.tx-visor .sg { fill: var(--dcx-segmento-apagado); }
.tx-visor .sg.on { fill: var(--dcx-vermelho-display); filter: drop-shadow(var(--dcx-brilho-led)) drop-shadow(0 0 7px rgb(245 57 37 / calc(var(--tex-intensity) * .22))); }

/* LED redondo (peak, rec): apagado mostra a cor do plastico vermelho, aceso tem brilho e halo */
.tx-led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #6a3a32 0 18%, var(--dcx-segmento-apagado) 55%, #2a1612 100%); box-shadow: inset 0 1px 1px rgb(0 0 0 / .5), 0 0 0 1.5px #191a17, 0 1px 0 1.5px rgb(255 255 255 / .12); }
.tx-led.on { background: radial-gradient(circle at 38% 32%, #fff3e6 0 9%, #ff7a5c 24%, var(--dcx-vermelho-display) 55%, #a8200f 100%); box-shadow: 0 0 0 1.5px #191a17, 0 0 6px 1px rgb(245 57 37 / .6), 0 0 16px 3px rgb(245 57 37 / calc(var(--tex-intensity) * .2)); }

/* LCD reflexivo apagado (sem luz de fundo): matriz de pontos e vidro. Cor provisoria a partir do
 * cinza de painel; a cor certa do LCD de cada maquina vem do core/css/base.css (card DS-3) */
.tx-lcd { position: relative; isolation: isolate; overflow: hidden; background: color-mix(in srgb, var(--dcx-cinza-painel) 70%, #6f7a5e); color: rgb(20 24 16 / .82); box-shadow: inset 0 2px 3px rgb(0 0 0 / .45), inset 0 0 0 2px #191a17; }
.tx-lcd::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--tex-intensity) * .625); mix-blend-mode: multiply;
  background: repeating-linear-gradient(90deg, rgb(0 0 0 / .14) 0 .5px, transparent .5px 3px), repeating-linear-gradient(0deg, rgb(0 0 0 / .14) 0 .5px, transparent .5px 3px), var(--tx-vidro) 0 0 / 200px; }
.tx-lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: calc(var(--tex-intensity) * .625);
  background: linear-gradient(104deg, rgb(255 255 255 / 0) 0 58%, rgb(255 255 255 / .12) 58% 61%, rgb(255 255 255 / 0) 61%), var(--tx-poeira-fina) 0 0 / 360px; }

/* ---------------------------------------------------------------- capa de cassete (DS-5)
 * cartao preto impresso: tinta preta mosqueada (o cartao aparece em nuvens), grao claro de impressao,
 * cantos e arestas gastos (a prata e o preto saem primeiro nas quinas) */
.tx-capa {
  background-color: var(--dcx-capa); color: var(--dcx-prata);
  --tx-e1: var(--tx-grao-escuro); --tx-e1s: 180px;
  --tx-c1: var(--tx-mosqueado-claro); --tx-c1s: 480px; --tx-c2: var(--tx-poeira-fina); --tx-c2s: 360px;
  --tx-borda: inset 0 0 0 1px rgb(255 248 230 / .05), inset 0 0 36px rgb(190 180 160 / .07), inset 0 0 3px rgb(220 210 190 / .10);
}
/* faixa cinza larga: tinta cinza chapada, mosqueado escuro onde o rodo carregou mais */
.tx-faixa {
  background-color: var(--dcx-faixa); color: var(--dcx-faixa-tinta);
  background-image: linear-gradient(180deg, var(--dcx-faixa-clara), var(--dcx-faixa) 38%, color-mix(in srgb, var(--dcx-faixa) 92%, #000));
  --tx-e1: var(--tx-mosqueado-escuro); --tx-e1s: 480px; --tx-e2: var(--tx-grao-escuro); --tx-e2s: 180px;
  --tx-c1: var(--tx-grao-claro); --tx-c1s: 180px;
}
/* tinta prata sobre preto (palavra-marca, numeral, ficha): falhas + mosqueado na propria letra */
.tx-prata { color: var(--dcx-prata-clara); }
/* dobra do cartao: vinco escuro + aresta clara numa posicao (--dobra-x ou --dobra-y, em %) */
.tx-dobra {
  --tx-e6: linear-gradient(var(--dobra-ang, 90deg), transparent calc(var(--dobra, 62%) - 9px), rgb(0 0 0 / .16) calc(var(--dobra, 62%) - 1px), rgb(0 0 0 / .42) var(--dobra, 62%), transparent calc(var(--dobra, 62%) + .6px));
  --tx-c5: linear-gradient(var(--dobra-ang, 90deg), transparent calc(var(--dobra, 62%) + .4px), rgb(255 246 226 / .30) calc(var(--dobra, 62%) + 1px), rgb(255 246 226 / .07) calc(var(--dobra, 62%) + 3px), transparent calc(var(--dobra, 62%) + 14px));
}
.tx-dobra-h { --dobra-ang: 180deg; }

/* ---------------------------------------------------------------- desligar */
@media print { :root { --tex-intensity: 0; } }
@media (prefers-contrast: more) { :root { --tex-intensity: 0; } .tx-registro { text-shadow: none; } }
@media (prefers-reduced-transparency: reduce) { :root { --tex-intensity: .4; } }