/* Native canvas layout. System monospace keeps animation independent of fonts. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/vendor/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
.type-field-host { position: relative; isolation: isolate; overflow: clip; }
.type-field-host > .container,
.type-field-host > .container-narrow,
.type-field-host > .utility-hero-content,
.type-field-host > .terminal { position: relative; z-index: 1; }
.type-field-host > .type-field {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  opacity: .8;
  mask-image: linear-gradient(90deg, #00000008, #00000020 62%, #000000b0 82%, #000);
}
.type-field .shader-frame { width: 100%; height: 100%; }
.type-field .typography-vortex-component {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: #151515;
}
.type-field canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* Keep long headings and the illustration legible above the moving field. */
.home-hero.type-field-host > .type-field { opacity: .95; }
.type-field-host.page-hero::after,
.type-field-host.report-hero::before,
.type-field-host.sb-hero::before { opacity: .32; }
.type-field-host.sb-hero::after { animation: none; opacity: 0; }
.privacy-hero .legal-updated { margin-bottom: 20px; font-size: .8rem; color: #b9afca; }
.legal-page.legal-body { padding-top: 64px; }
.not-found.type-field-host,
.ctf-page { background: radial-gradient(ellipse at 88% 12%, #9b8cff24, transparent 48%), linear-gradient(125deg, #15151c, #1b1825); }
.ctf-page.type-field-host { height: auto; min-height: 100vh; }
.ctf-page.type-field-host > .type-field { opacity: .45; }
@media (max-width: 860px) {
  .type-field-host > .type-field { opacity: .62; mask-image: linear-gradient(90deg, #00000010, #00000038 65%, #00000078); }
  .home-hero.type-field-host > .type-field { opacity: .72; }
}
@media (forced-colors: active) { .type-field { display: none; } }
@media print { .type-field { display: none !important; } }