/* CASTRO DEV — adaptado do Zangetsu Studio (© 2026 Sayandeep, MIT).
   A paleta vermelha virou Quincy: o azul assume o papel do vermelho como cor de destaque. */

:root {
  --bar: 0px; /* altura da barra do navegador do celular enquanto ela aparece (ver @supports abaixo) */
  --ink: #030509;       /* preto profundo, levemente frio */
  --paper: #f3f6fa;     /* branco intenso, frio */
  --red: #1f5cff;       /* azul Quincy: ocupa o lugar do vermelho original */
  --red-deep: #0a2a8f;
  --glacial: #a6dbff;
  --grey: #8a93a3;      /* cinza frio */

  /* Swap --display for a local Bleach-style font: add an @font-face and put its name first. */
  --display: "Big Shoulders Display", "Oswald", Impact, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --brush: "Yuji Syuku", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --gutter: clamp(16px, 3vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--paper); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.line { display: block; overflow: hidden; padding-top: .14em; margin-top: -.06em; }
.line > span { display: block; will-change: transform; }

/* film grain: só no gráfico Alto (camada de tela cheia composta a cada quadro: sem placa de vídeo custava 30%) */
html:not([data-gfx="alto"]) .grain { display: none; }
.grain {
  position: fixed; inset: -50%;
  z-index: 90; pointer-events: none; opacity: .09;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); }
  80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* cursor */
/* só no PC: a mira da flecha no lugar da seta do sistema (no celular nada aparece) */
.cursor { position: fixed; left: 0; top: 0; z-index: 2147483647; pointer-events: none; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: none; will-change: transform; }
.cursor svg { width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--paper); stroke-width: 1.4; stroke-linecap: round;
  filter: drop-shadow(0 0 1px rgba(3, 5, 9, .9)) drop-shadow(0 0 4px rgba(31, 92, 255, .7)); transition: transform .2s; }
.cursor .dot { fill: var(--glacial); stroke: none; }
.cursor.is-hover svg { transform: scale(1.45) rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  html.has-aim, html.has-aim * { cursor: none !important; }
  html.has-aim .cursor { display: block; }
}

/* LOADER */
.loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink);
  display: grid; place-items: center;
}
.loader-kanji {
  font-family: var(--brush);
  font-size: clamp(140px, 30vw, 320px);
  line-height: 1;
  color: var(--paper);
  clip-path: inset(0 0 100% 0);
}
.loader-meta {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 48px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: .22em;
}
.loader-count { font-family: var(--display); font-weight: 900; font-size: 40px; letter-spacing: 0; line-height: .8; }
.loader-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #1a1a1a; }
.loader-bar i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left; transform: scaleX(0); }

/* NAV */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--gutter);
  color: var(--paper);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  transition: color .3s;
}
.nav.is-dark { color: var(--ink); }
.nav-logo { font-family: var(--display); font-weight: 900; font-size: 20px; letter-spacing: .04em; display: flex; align-items: baseline; gap: 8px; }
.nav-logo b { font-family: var(--brush); font-weight: 400; font-size: 18px; }
.nav-logo span { font-family: var(--mono); font-weight: 400; font-size: 10px; letter-spacing: .3em; opacity: .7; }
.nav-links { display: flex; gap: 28px; }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s;
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* media slots: hidden until assets/scenes.json supplies a clip */
.scene-media { position: absolute; inset: 0; display: none; pointer-events: none; }
.scene-media.is-on { display: block; }
.scene-media canvas, .scene-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.has-media > .art, .has-media .art { display: none; }

/* 01 HERO */
.hero {
  position: relative; height: 100vh; height: 100lvh; min-height: 560px;
  overflow: hidden; background: var(--ink);
}
.hero-art { position: absolute; inset: 0; display: grid; place-items: center; }
.hero-ink {
  position: relative; height: 96vh; width: auto; margin-top: 4vh;
  mix-blend-mode: screen; transform-origin: 50% 40%; will-change: transform;
  -webkit-mask: radial-gradient(ellipse 52% 50% at 50% 50%, #000 70%, transparent 100%);
          mask: radial-gradient(ellipse 52% 50% at 50% 50%, #000 70%, transparent 100%);
}
.moon {
  position: absolute; left: 50%; top: 46%;
  width: min(62vh, 76vw); aspect-ratio: 1; border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(circle at 45% 40%, #7aa6ff 0%, var(--red) 45%, var(--red-deep) 100%);
  box-shadow: 0 0 120px 10px rgba(31, 92, 255, .4), 0 0 260px 40px rgba(166, 219, 255, .12);
}
.hero-kanji {
  position: absolute; right: var(--gutter); top: 58%;
  writing-mode: vertical-rl;
  font-family: var(--brush); font-size: clamp(40px, 7vw, 96px);
  color: var(--paper); opacity: .9; letter-spacing: .1em;
}

.hero-title {
  position: absolute; inset: 0; pointer-events: none;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(56px, 11vw, 184px); line-height: .86; letter-spacing: -.01em;
  text-transform: uppercase;
}
.hero-l, .hero-r { position: absolute; top: 18vh; display: block; }
.hero-l { left: var(--gutter); }
.hero-r { right: var(--gutter); text-align: right; }
.hero-r .line:last-child span, .hero-l .line:last-child span { color: var(--paper); }
.hero-sub {
  position: absolute; left: var(--gutter); bottom: calc(40px + var(--bar)); max-width: 360px;
  font-size: 12px; color: var(--grey); letter-spacing: .04em;
}
.hero-sub b { color: var(--paper); font-weight: 500; letter-spacing: .2em; font-size: 11px; }
.hero-sub em { font-family: var(--display); font-style: normal; font-weight: 900; font-size: 18px; color: var(--red); letter-spacing: .04em; }
.hero-cue {
  position: absolute; right: var(--gutter); bottom: calc(40px + var(--bar));
  display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .22em;
}
/* o mesmo aviso da entrada, menor: mouse com a rodinha descendo no PC, dedo subindo no celular */
.hero-cue .ls-track { zoom: .6; }
.hero-flash { position: absolute; inset: 0; background: var(--ink); opacity: 0; pointer-events: none; }

@media (max-width: 760px) {
  .hero-l, .hero-r { top: 13vh; }
  .hero-r { top: auto; bottom: calc(22vh + var(--bar)); }
  .hero-kanji { display: none; }
  .hero-sub { bottom: calc(24px + var(--bar)); max-width: 220px; font-size: 11px; }
  .hero-cue { bottom: calc(24px + var(--bar)); }
  .hero-cue span:last-child { display: none; }
}

/* 02 DESCENT */
.descent { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }
.reiatsu { position: absolute; inset: 0; width: 100%; height: 100%; }
.descent-inner { position: absolute; inset: 0; display: grid; place-items: center; }
.descent-art { position: absolute; inset: 0; display: grid; place-items: center; }
.blade {
  position: absolute; left: 50%; top: 4vh; width: auto; height: 74vh;
  translate: -50% 0; filter: drop-shadow(0 0 18px rgba(255,255,255,.35));
}
.shock {
  position: absolute; left: 50%; top: 78vh; width: 60vw; aspect-ratio: 4 / 1;
  translate: -50% -50%; border: 2px solid var(--paper); border-radius: 50%;
  opacity: 0; transform: scale(0);
}
.descent-text { position: absolute; left: var(--gutter); bottom: calc(9vh + var(--bar)); z-index: 2; }
.descent-kanji { font-family: var(--brush); font-size: clamp(80px, 14vw, 200px); line-height: 1; display: flex; gap: .05em; }
.descent-kanji span { display: inline-block; opacity: 0; }
.descent-cap { margin-top: 12px; font-size: 12px; letter-spacing: .2em; color: var(--grey); }
.descent-cap em { font-family: var(--serif); font-size: 20px; letter-spacing: 0; color: var(--paper); }

/* 03 THE CUT */
.frame { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--red); }
.frame-gap { position: absolute; inset: 0; width: 100%; height: 100%; }
.frame-half { position: absolute; inset: 0; will-change: transform; }
.frame-half.a { clip-path: polygon(0 0, 100% 0, 100% 28.1%, 0 77.75%); }
.frame-half.b { clip-path: polygon(0 77.75%, 100% 28.1%, 100% 100%, 0 100%); }
.frame-content {
  position: absolute; inset: 0;
  background: var(--red);
}
.frame-label { position: absolute; top: 90px; left: var(--gutter); font-size: 11px; letter-spacing: .22em; }
.frame-kanji {
  position: absolute; right: 4vw; top: 50%; translate: 0 -54%;
  font-family: var(--brush); font-size: min(70vh, 62vw); line-height: 1; color: var(--ink); opacity: .14;
}
.frame-ink {
  position: absolute; right: 6vw; bottom: 0; height: 94vh; width: auto;
  -webkit-mask: linear-gradient(#000 80%, transparent);
          mask: linear-gradient(#000 80%, transparent);
}
.frame-title {
  position: absolute; left: var(--gutter); bottom: calc(15vh + var(--bar));
  font-family: var(--display); font-weight: 900; font-size: clamp(48px, 8.4vw, 148px);
  line-height: .84; color: var(--paper);
}
.slash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* o brilho é uma faixa mais larga e transparente: o drop-shadow de tela cheia era refeito a cada quadro do corte */
.slash-stroke { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); }

/* 04 HIT */
.hit { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--red); }
.speedlines {
  position: absolute; inset: -40%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(5,5,5,.55) 0deg .6deg, transparent .6deg 3.2deg, rgba(5,5,5,.25) 3.2deg 3.6deg, transparent 3.6deg 6deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 18%, #000 52%);
          mask: radial-gradient(circle at 50% 50%, transparent 18%, #000 52%);
  opacity: 0;
}
.hit-kanji {
  position: absolute; right: -2vw; top: 50%; translate: 0 -50%;
  font-family: var(--brush); font-size: min(90vh, 80vw); line-height: 1;
  color: transparent; -webkit-text-stroke: 2px rgba(5,5,5,.6); display: none;
}
.hit-ink {
  position: absolute; right: 3vw; top: 50%; translate: 0 -50%; height: 100vh; width: auto;
  transform-origin: 70% 50%; will-change: transform, opacity;
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%);
          mask: linear-gradient(90deg, transparent, #000 18%);
}
.hit-type { position: absolute; left: var(--gutter); top: 50%; translate: 0 -50%; font-family: var(--display); font-weight: 900; line-height: .8; }
.hit-ours { display: block; font-size: clamp(18px, 2.4vw, 40px); letter-spacing: .04em; margin: 0 0 .3em .4vw; }
.hit-big { display: flex; font-size: clamp(110px, 21vw, 360px); letter-spacing: -.02em; text-shadow: .03em .03em 0 var(--ink); }
.hit-big span { display: inline-block; transform-origin: 50% 80%; }
.hit-cap { position: absolute; right: var(--gutter); bottom: calc(9vh + var(--bar)); max-width: 300px; font-size: 12px; letter-spacing: .04em; }
.hit-invert { position: absolute; inset: 0; background: rgba(240, 246, 255, .9); mix-blend-mode: normal; /* o "difference" invertia o azul em laranja */ opacity: 0; visibility: hidden; pointer-events: none; }
.wipe { position: absolute; inset: 0; pointer-events: none; }
.wipe i { position: absolute; inset: -10% -60%; }
.wipe .w1 { background: var(--paper); }
.wipe .w2 { background: var(--ink); }
.wipe .w3 { background: var(--paper); }

/* 05 MANIFESTO */
.manifesto { position: relative; background: var(--paper); color: var(--ink); padding: 18vh var(--gutter) 14vh; }
.manifesto-title {
  margin-top: 28px;
  font-family: var(--display); font-weight: 900; font-size: clamp(56px, 11vw, 200px); line-height: .84;
}
.manifesto-title em { font-style: normal; color: var(--red); }
.manifesto-cols {
  margin-top: 8vh; display: grid; grid-template-columns: 1fr 1fr; gap: 6vw;
  padding-top: 28px; border-top: 1px solid var(--ink);
}
.manifesto-cols p { max-width: 460px; font-size: 14px; }
.poem { font-family: var(--serif); font-style: italic; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.2; }
.stats { margin-top: 10vh; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.stats div { padding: 24px 16px 0 0; }
.stats b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 6vw, 96px); line-height: 1; }
.stats span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #5c5853; }
@media (max-width: 760px) {
  .manifesto-cols { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 24px; }
}

/* 06 WORK */
.work { position: relative; background: var(--paper); color: var(--ink); padding: 6vh var(--gutter) 16vh; }
.work-head { display: flex; justify-content: space-between; padding-bottom: 20px; }
.work-list { list-style: none; border-top: 1px solid var(--ink); }
.work-list li {
  position: relative; display: grid; grid-template-columns: 70px 1fr auto 80px; align-items: center; gap: 20px;
  padding: 26px 0; border-bottom: 1px solid var(--ink); cursor: pointer; overflow: hidden;
}
.work-list li::before {
  content: ""; position: absolute; inset: 0; background: var(--red);
  transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.7,0,.2,1);
}
.work-list li:hover::before { transform: scaleY(1); transform-origin: top; }
.work-list li > span { position: relative; transition: color .3s, transform .45s cubic-bezier(.7,0,.2,1); }
.work-list li:hover > span { color: var(--paper); }
.work-list li:hover .t { transform: translateX(16px); }
.work-list .n { font-family: var(--display); font-weight: 700; font-size: 22px; }
.work-list .t { font-family: var(--display); font-weight: 900; font-size: clamp(30px, 5vw, 76px); line-height: .9; }
.work-list .d { font-size: 12px; max-width: 240px; color: #5c5853; }
.work-list .k { font-family: var(--brush); font-size: 34px; text-align: right; }
@media (max-width: 760px) {
  .work-list li { grid-template-columns: 40px 1fr 50px; }
  .work-list .d { display: none; }
}
.work-preview {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 300px; aspect-ratio: 3 / 4; margin: -200px 0 0 -150px;
  overflow: hidden; clip-path: inset(50% 0 50% 0);
}
.wp-inner { position: absolute; inset: 0; background: var(--paper); }
.wp-inner img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (hover: none) { .work-preview { display: none; } }

/* MARQUEE */
.marquee { position: relative; overflow: hidden; background: var(--red); color: var(--paper); padding: 18px 0; border-block: 2px solid var(--ink); }
.marquee.alt { background: var(--ink); color: transparent; -webkit-text-stroke: 1px var(--paper); border-color: var(--red); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track span {
  flex: none; padding: 0 .6em; font-family: var(--display); font-weight: 900;
  font-size: clamp(40px, 6vw, 96px); line-height: 1; white-space: nowrap;
}
.marquee-track span::after { content: "✦"; margin-left: 1.2em; font-size: .4em; vertical-align: middle; -webkit-text-stroke: 0; color: var(--ink); }
.marquee.alt .marquee-track span::after { color: var(--red); }

/* 07 ROSTER */
.roster { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--paper); color: var(--ink); }
.roster-head { position: absolute; left: var(--gutter); top: 96px; z-index: 2; max-width: 360px; }
.roster-head h2 { margin: 14px 0; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 7vw, 120px); line-height: .84; }
.roster-head p { font-size: 12px; color: #5c5853; }
.roster-count { position: absolute; right: var(--gutter); top: 96px; font-family: var(--display); font-weight: 900; display: flex; align-items: baseline; gap: 6px; }
.roster-count b { font-size: clamp(48px, 6vw, 96px); line-height: 1; color: var(--red); }
.roster-count span { font-size: 22px; }
.deck { position: absolute; inset: 0; }
.card {
  position: absolute; left: 50%; top: 58%;
  width: clamp(150px, 15vw, 240px); margin-left: calc(clamp(150px, 15vw, 240px) / -2);
  translate: 0 -50%;
  background: var(--paper); border: 2px solid var(--ink); padding: 8px 8px 12px;
  box-shadow: 6px 6px 0 var(--ink);
  transform-origin: 50% 120%;
  will-change: transform;
}
.card-art { aspect-ratio: 640 / 738; overflow: hidden; border: 1px solid var(--ink); }
.card-art img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.card-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 9px; letter-spacing: .16em; }
.card-meta b { font-family: var(--brush); font-weight: 400; font-size: 15px; letter-spacing: 0; color: var(--red); white-space: nowrap; }
.card h3 { margin-top: 4px; font-family: var(--display); font-weight: 900; font-size: clamp(16px, 1.5vw, 24px); line-height: .95; }
.card p { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.1; color: #3a3733; }
@media (max-width: 760px) {
  .roster-head { max-width: 60vw; }
  .roster-head p { display: none; }
  .card { width: 38vw; margin-left: -19vw; top: 64%; }
}

/* 08 HOLLOW */
.hollow { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }
.hollow-a, .hollow-b { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; will-change: transform; }
.hollow-b { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
.hollow-edge { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hollow-text {
  position: absolute; right: var(--gutter); bottom: calc(8vh + var(--bar)); z-index: 2; text-align: right;
  background: var(--ink); color: var(--paper); padding: 22px 26px; border-left: 4px solid var(--red);
}
.hollow-kanji { font-family: var(--brush); font-size: clamp(64px, 9vw, 140px); line-height: 1; color: var(--red); display: flex; justify-content: flex-end; }
.hollow-kanji span { display: inline-block; }
.hollow-text .eyebrow { display: block; margin: 10px 0 8px; color: var(--grey); }
.hollow-text p { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 30px); line-height: 1.15; }

/* 09 VERSUS */
.versus { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--red); }
.vs-half { position: absolute; inset: 0; overflow: hidden; will-change: transform; }
.vs-half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.vs-half.l { clip-path: polygon(0 0, 58% 0, 42% 100%, 0 100%); }
.vs-half.r { clip-path: polygon(58% 0, 100% 0, 100% 100%, 42% 100%); }
.vs-flash { position: absolute; inset: 0; background: var(--paper); opacity: 0; pointer-events: none; }
.vs-word {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex;
  font-family: var(--display); font-weight: 900; font-size: clamp(120px, 22vw, 360px); line-height: .8;
  color: var(--red); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: .04em .04em 0 var(--ink);
}
.vs-word span { display: inline-block; will-change: transform, opacity; }
.vs-name { position: absolute; z-index: 2; background: var(--ink); color: var(--paper); padding: 14px 18px; }
.vs-name b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3.6vw, 60px); line-height: .86; }
.vs-name .eyebrow { color: var(--red); }
.vs-name.l { left: var(--gutter); bottom: calc(8vh + var(--bar)); }
.vs-name.r { right: var(--gutter); top: 96px; text-align: right; }

/* 10 MUGETSU */
.mugetsu { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }

/* beat A: the page */
.mg-page {
  position: absolute; left: 50%; top: 54%; translate: -50% -50%;
  width: min(92vw, 150vh); height: min(78vh, 62vw);
  display: grid; gap: 10px; padding: 12px;
  grid-template-columns: .62fr 1.7fr 1fr;
  grid-template-rows: 1fr 1fr .78fr;
  grid-template-areas: "a1 a1 a2" "a3 a4 a2" "a3 a4 a5";
  background: var(--paper); box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform-origin: 52% 66%; will-change: transform;
}
.mg-panel { position: relative; overflow: hidden; border: 3px solid var(--ink); background: var(--paper); will-change: transform; }
.mg-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a1 { grid-area: a1; } .a1 img { object-position: 50% 35%; }
.a2 { grid-area: a2; } .a2 img { object-position: 50% 20%; }
.a3 { grid-area: a3; } .a3 img { object-position: 30% 40%; }
.a4 { grid-area: a4; } .a4 img { object-position: 50% 30%; }
.a5 { grid-area: a5; } .a5 img { object-position: 60% 30%; }
.mg-box {
  position: absolute; z-index: 2; max-width: 260px; padding: 10px 14px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-family: var(--serif); font-style: italic; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.2; color: var(--ink);
}
.b1 { left: 3%; top: 4%; }
.b2 { left: 22%; top: 46%; }
.b3 { right: 4%; bottom: 6%; background: var(--ink); color: var(--paper); box-shadow: 4px 4px 0 var(--red); }

/* beat B: the flood */
.mg-flood { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-strike { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* o raio: só transformações e opacidade (camadas prontas, sem repintar o brilho a cada quadro da queda) */
/* núcleo fino e branco + brilho largo em degradê (sem box-shadow: a sombra em caixa desenhava um tubo de bordas duras);
   os dois somem no alto (máscara), como se o raio viesse de fora da tela */
.ms-beam, .ms-glow { position: absolute; left: 50%; top: -4%; bottom: 22%; width: var(--w); margin-left: calc(var(--w) / -2); transform-origin: 50% 0; transform: scaleY(0); will-change: transform;
  -webkit-mask: linear-gradient(transparent, #000 22%); mask: linear-gradient(transparent, #000 22%); }
.ms-beam { --w: min(4.4vw, 56px); background: linear-gradient(90deg, rgba(166, 219, 255, 0), rgba(166, 219, 255, .85) 28%, #fff 42%, #fff 58%, rgba(166, 219, 255, .85) 72%, rgba(166, 219, 255, 0)); }
.ms-glow { -webkit-mask: linear-gradient(transparent, #000 22%, #000 84%, transparent); mask: linear-gradient(transparent, #000 22%, #000 84%, transparent); /* a ponta de baixo também esmaece enquanto desce */
  --w: min(40vw, 520px); background: linear-gradient(90deg, rgba(31, 92, 255, 0), rgba(31, 92, 255, .16) 30%, rgba(90, 150, 255, .42) 46%, rgba(90, 150, 255, .42) 54%, rgba(31, 92, 255, .16) 70%, rgba(31, 92, 255, 0)); }
/* os raios que estalam no chão no impacto: só opacidade */
.ms-bolts { position: absolute; left: 50%; top: 78%; width: min(70vw, 900px); height: 26vh; translate: -50% -100%; overflow: visible; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.ms-bolts g { opacity: 0; will-change: opacity; }
.ms-bolts g { filter: drop-shadow(0 0 5px #1f5cff) drop-shadow(0 0 2px #a6dbff); } /* só aparece por um instante */
.ms-bolts path { stroke: #fff; stroke-width: 3; vector-effect: non-scaling-stroke; }
.ms-head { --w: min(22vw, 260px); position: absolute; left: 50%; top: -4%; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); border-radius: 50%; opacity: 0; will-change: transform, opacity;
  background: radial-gradient(closest-side, #fff, rgba(207, 230, 255, .85) 30%, rgba(31, 92, 255, .35) 60%, rgba(31, 92, 255, 0)); }
.ms-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 78%, #fff, rgba(166, 219, 255, .6) 30%, rgba(31, 92, 255, 0) 70%); opacity: 0; will-change: opacity; }
.ms-floor { position: absolute; left: -20%; right: -20%; top: 62%; bottom: -10%; background: radial-gradient(ellipse 50% 42% at 50% 38%, rgba(31, 92, 255, .55), rgba(31, 92, 255, .14) 55%, rgba(31, 92, 255, 0) 75%); opacity: 0; will-change: opacity; }
.ms-ring { position: absolute; left: 50%; top: 78%; width: 64vw; aspect-ratio: 6 / 1; translate: -50% -50%; border: 3px solid var(--glacial); border-radius: 50%; box-shadow: 0 0 22px var(--red), inset 0 0 22px var(--red); opacity: 0; will-change: transform, opacity; }
.ms-ring:nth-of-type(6) { width: 96vw; } .ms-ring:nth-of-type(7) { width: 132vw; }
.ms-blocks b { position: absolute; left: 50%; top: 78%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); opacity: 0; will-change: transform, opacity; }
.ms-blocks svg { display: block; width: 100%; height: 100%; overflow: visible; animation: ms-float 3.4s ease-in-out var(--d) infinite alternate; }
@keyframes ms-float { to { transform: translateY(-14px) rotate(12deg); } }
@media (max-width: 760px) { .ms-beam { --w: 9vw; } .ms-glow { --w: 70vw; } .ms-head { --w: 40vw; } .ms-bolts { width: 100vw; } .ms-ring { width: 90vw; } .ms-ring:nth-of-type(6) { width: 130vw; } .ms-ring:nth-of-type(7) { width: 170vw; } }
@media (prefers-reduced-motion: reduce) { .ms-blocks svg { animation: none; } }
.mg-kanji {
  position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 3; display: flex; gap: .04em;
  font-family: var(--brush); font-size: min(40vh, 30vw); line-height: 1; color: var(--paper);
  visibility: hidden; opacity: 0;
}
.mg-kanji span { position: relative; display: inline-block; overflow: hidden; }
.mg-kanji i { position: absolute; inset: -4% -4%; background: var(--ink); transform-origin: 50% 100%; will-change: transform; }
.mg-kanji span:last-child { color: var(--red); }
.mg-nomoon {
  position: absolute; left: 50%; bottom: calc(9vh + var(--bar)); translate: -50% 0; z-index: 3; width: min(90vw, 620px); text-align: center;
  font-size: 12px; letter-spacing: .06em; color: var(--grey); opacity: 0;
}
.mg-nomoon b { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: .08em; color: var(--paper); }
.mg-nomoon em { font-family: var(--serif); font-size: 26px; color: var(--paper); }
.mg-nomoon b, .mg-nomoon em { display: block; }
.mg-nomoon em { margin: 4px 0 14px; padding-bottom: 14px; border-bottom: 1px solid rgba(166, 219, 255, .3); }
.mg-nomoon br { display: none; }

/* beat C: the farewell */

@media (max-width: 760px) {
  .mg-page {
    width: 92vw; height: 68vh; top: 56%;
    grid-template-columns: 1fr 1.4fr; grid-template-rows: .8fr 1.3fr .9fr;
    grid-template-areas: "a1 a1" "a3 a4" "a2 a5";
  }
  /* celular: as legendas ficam empilhadas embaixo da página (por cima dos quadros elas cobriam os logos) */
  .mg-page { height: 58vh; top: 49%; }
  .mg-box { left: 0; right: auto; bottom: auto; max-width: 100%; font-size: 13px; padding: 7px 10px; }
  .b1 { top: calc(100% + 12px); } .b2 { top: calc(100% + 50px); } .b3 { top: calc(100% + 88px); }
}
@media (max-width: 760px) { .hollow-text { left: var(--gutter); } }

/* ARCHIVE + STICKERS: random panels placed by js/main.js */
.archive { position: relative; height: 110vh; min-height: 640px; overflow: hidden; background: var(--paper); color: var(--ink); border-top: 1px solid var(--ink); }
.archive-head { position: absolute; left: var(--gutter); top: 8vh; z-index: 3; max-width: 320px; }
.archive-head p { margin-top: 8px; font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.2; }
.scatter-zone { position: absolute; inset: 0; pointer-events: none; }
.sticker {
  position: absolute; width: var(--w, 220px); padding: 8px 8px 22px; background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 1px rgba(5,5,5,.12);
  pointer-events: auto; transition: rotate .45s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s; will-change: transform;
}
.sticker img { display: block; width: 100%; height: auto; border: 1px solid var(--ink); }
.sticker figcaption { position: absolute; left: 10px; bottom: 5px; font-size: 9px; letter-spacing: .18em; color: #6b6762; }
.sticker::before {
  content: ""; position: absolute; left: 50%; top: -12px; width: 80px; height: 24px; translate: -50% 0; rotate: var(--tape, -4deg);
  background: rgba(31, 92, 255, .78);
}
.sticker:hover { z-index: 5; rotate: 0deg !important; scale: 1.08; box-shadow: 0 20px 50px rgba(0,0,0,.35), 0 0 0 1px rgba(5,5,5,.12); }
.contact-zone { left: 52%; top: 8vh; bottom: auto; height: 60vh; }
.contact-zone .sticker::before { background: rgba(5,5,5,.75); }
.marquee-thumb {
  flex: none; align-self: center; height: 1em; width: auto; margin: 0 .3em; font-size: clamp(40px, 6vw, 96px);
  border: 2px solid var(--ink); background: var(--paper); rotate: var(--r, -3deg);
}
.marquee.alt .marquee-thumb { border-color: var(--paper); }
.loader-panel {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 70vh; width: auto; max-width: 80vw;
  object-fit: contain; opacity: .14; filter: grayscale(1) contrast(1.2); pointer-events: none;
}
@media (max-width: 760px) {
  .sticker { --w: 150px !important; }
  .contact-zone { display: none; }
}

/* STORY: chapter tags, narrator lines, HUD */
.chapter-tag {
  position: absolute; left: var(--gutter); top: 84px; z-index: 3;
  display: flex; flex-direction: column; gap: 2px;
}
.chapter-tag span { font-size: 11px; letter-spacing: .24em; color: var(--red); }
.chapter-tag b { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 2vw, 30px); letter-spacing: .03em; }
.hit .chapter-tag span { color: var(--ink); }
.frame-label { color: var(--paper); }
.frame-narr {
  position: absolute; left: var(--gutter); bottom: calc(3.5vh + var(--bar)); max-width: 520px;
  font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.5vw, 22px); color: var(--paper);
}
.vs-narr {
  position: absolute; left: 50%; bottom: calc(4vh + var(--bar)); translate: -50% 0; z-index: 3; white-space: nowrap;
  font-family: var(--serif); font-style: italic; font-size: clamp(16px, 1.6vw, 24px);
  background: var(--paper); color: var(--ink); padding: 6px 14px;
}
.stamp {
  position: absolute; right: 6%; top: 8%; z-index: 2; padding: 6px 10px;
  border: 3px solid var(--red); color: var(--red); background: rgba(243,246,250,.9);
  font-family: var(--display); font-style: normal; font-weight: 900; font-size: clamp(14px, 1.3vw, 22px); line-height: 1; text-align: center;
  transform: rotate(-12deg) scale(2.4); opacity: 0;
}
.card-art { position: relative; }
.hud {
  position: fixed; left: 50%; top: 62px; translate: -50% 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  color: var(--paper); pointer-events: none; opacity: 0; white-space: nowrap; transition: color .3s;
}
.hud.is-dark { color: var(--ink); }
.hud-ch { font-size: 10px; letter-spacing: .24em; }
.hud-title { font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: .06em; }
.hud-ticks { display: flex; gap: 4px; }
.hud-ticks i { display: block; width: 10px; height: 2px; background: currentColor; opacity: .35; transition: width .3s, opacity .3s; }
.hud-ticks i.on { width: 28px; opacity: 1; }
@media (max-width: 760px) {
  .hud { top: auto; bottom: calc(12px + var(--bar)); }
  .hud-ticks { display: none; }
  .vs-narr { white-space: normal; width: calc(100% - 32px); text-align: center; }
  .chapter-tag { top: 72px; }
  .frame-narr { bottom: calc(2vh + var(--bar)); max-width: 80vw; }
}

/* 11 FRAMES */
.frames { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }
.frames-head {
  position: absolute; left: var(--gutter); right: var(--gutter); top: 84px; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  border-bottom: 1px solid #2a2a2a; padding-bottom: 14px;
}
.frames-head h2 { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 6vw, 96px); line-height: .85; text-align: right; }
.frames-track {
  position: absolute; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 2.4vw;
  padding: 140px var(--gutter) 40px; will-change: transform;
}
.panel { position: relative; flex: none; height: min(62vh, 120vw); aspect-ratio: 3 / 4; }
.panel:nth-child(even) { aspect-ratio: 4 / 5; margin-top: 8vh; }
.panel-art {
  position: absolute; inset: 0; overflow: hidden; border: 3px solid var(--paper);
  background: var(--paper);
}
.panel-art img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; }
.panel figcaption {
  position: absolute; left: 0; right: 0; bottom: -34px;
  display: flex; gap: 14px; font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: .06em;
}
.panel figcaption span { font-family: var(--mono); font-weight: 400; font-size: 11px; color: var(--red); padding-top: 4px; }

/* 12 CONTACT */
.contact { position: relative; background: var(--red); color: var(--paper); padding: 18vh var(--gutter) 0; overflow: hidden; }
.contact-big {
  display: block; margin-top: 28px;
  font-family: var(--display); font-weight: 900; font-size: clamp(56px, 10vw, 180px); line-height: .84;
}
.contact-big em { font-style: normal; color: var(--ink); transition: color .3s; }
.contact-big:hover em { color: var(--paper); }
.contact-row {
  margin-top: 10vh; padding: 20px 0; border-top: 1px solid rgba(242,239,232,.5);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 12px;
}
.contact-word {
  font-family: var(--display); font-weight: 900; font-size: 19.4vw; line-height: .78; white-space: nowrap;
  margin: 2vh calc(var(--gutter) * -1) 0; padding-bottom: calc(2.4vw + env(safe-area-inset-bottom, 0px)); text-align: center; color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* keep the nav + HUD legible over full-bleed art */
.hollow::before, .versus::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 130px; z-index: 2; pointer-events: none;
  background: linear-gradient(rgba(5,5,5,.85), transparent);
}

/* ---------- CASTRO DEV: peças novas ---------- */

/* o castelo 3D ocupa o lugar da arte do herói, com o mesmo blend sobre a lua */
/* o castelo 3D ocupa a tela inteira, sem blend nem máscara (o canvas nunca é esticado: o renderer usa o tamanho real) */
canvas.hero-ink { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; mix-blend-mode: normal; -webkit-mask: none; mask: none; display: block; }
.hero.has-castle .moon-in { display: none; }
.hero.has-castle::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(3,5,9,.55), transparent 28%, transparent 72%, rgba(3,5,9,.55)), linear-gradient(0deg, rgba(3,5,9,.5), transparent 24%); }
canvas.hero-ink[hidden], img.hero-ink[hidden] { display: none; }
.moon-in { position: absolute; inset: 0; transform-origin: 50% 46%; pointer-events: none; }
.reveal-flash { position: absolute; inset: 0; z-index: 5; background: var(--glacial); opacity: 0; pointer-events: none; }

/* logos oficiais: inteiros, sobre preto, sem tratamento de tinta */
.is-logo img, .card.is-logo .card-art img, .panel.is-logo .panel-art img { object-fit: contain; object-position: center; background: #000; }
.panel.is-logo .panel-art img { top: 0; height: 100%; }
.card .card-art { background: #000; }

/* pular a intro: discreto, no canto do loader */
.loader-skip {
  position: absolute; right: var(--gutter); top: 22px; z-index: 2;
  font: 500 11px/1 var(--mono); letter-spacing: .22em; color: var(--paper);
  background: none; border: 0; padding: 10px 0; cursor: pointer; opacity: .7;
}
.loader-skip:hover, .loader-skip:focus-visible { opacity: 1; outline: none; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--red); }

/* som: no lugar do "← ALL UNIVERSES" do original */
.nav-meta { position: relative; }
.nav-sound {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0;
  font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; cursor: pointer;
}
.nav-sound:focus-visible { outline: 1px solid var(--glacial); outline-offset: 4px; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
/* o pulso escala as barras (transform: sem layout a cada quadro) */
.eq i { display: block; width: 2px; height: 11px; background: currentColor; transform-origin: 50% 100%; transform: scaleY(.27); transition: transform .12s ease-out; }
.nav-sound.is-on .eq i { background: var(--glacial); }
.nav-sound.is-on .eq i:nth-child(1) { transform: scaleY(calc(.27 + var(--pulse, 0) * .73)); }
.nav-sound.is-on .eq i:nth-child(2) { transform: scaleY(calc(.45 + var(--pulse, 0) * .55)); }
.nav-sound.is-on .eq i:nth-child(3) { transform: scaleY(calc(.27 + var(--pulse, 0) * .37)); }
.sound-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 16px 18px; background: var(--ink); color: var(--paper);
  border: 1px solid #1d2433; border-left: 4px solid var(--red);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.sound-panel[hidden] { display: none; }
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-status { margin: 6px 0 14px; color: var(--grey); font-size: 10px; }
.sp-pct { color: var(--grey); }
.sound-panel input[type=range] { width: 100%; margin: 8px 0 14px; accent-color: var(--red); }
.sound-panel [role=switch] { position: relative; width: 40px; height: 20px; border: 1px solid var(--paper); background: none; cursor: pointer; }
.sound-panel [role=switch] i { position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: var(--paper); transition: transform .25s; }
.sound-panel [role=switch][aria-checked=true] { border-color: var(--red); background: var(--red); }
.sound-panel [role=switch][aria-checked=true] i { transform: translateX(20px); }
.sp-foot { border-top: 1px solid #1d2433; padding-top: 12px; color: var(--grey); }
.sp-replay { font: inherit; letter-spacing: inherit; color: var(--paper); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); }
.nav.is-dark .sound-panel { color: var(--paper); }

/* flecha de luz nos ataques fortes da trilha */
.pfeil { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 85; pointer-events: none; opacity: 0; filter: drop-shadow(0 0 8px var(--glacial)) drop-shadow(0 0 2px #fff); }
.pfeil polygon { transform-box: fill-box; transform-origin: 0 50%; }

/* BFL Studio: ficha técnica no fim do capítulo */
.contact-narr { margin-top: 4vh; max-width: 460px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.25; }
.contact-row a { text-decoration: underline; text-underline-offset: 4px; }
.vs-name { text-decoration: none; }
.vs-name:hover b { color: var(--glacial); }
@media (max-width: 760px) {
  .nav-logo span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .pfeil { display: none; } }

/* ======================================================================
   CASTRO DEV — capítulos novos (02 processo e anatomia, 03 método e
   bastidores, 04 jogos e apps, 05 estudos de caso). Mesma tipografia
   e paleta do original; cada capítulo tem a sua composição.
   ====================================================================== */

.nav-links a i { font-style: normal; margin-right: 6px; color: var(--red); }
.nav.is-dark .nav-links a i { color: var(--red-deep); }
@media (max-width: 1100px) { .nav-links { gap: 18px; } .nav-links a i { display: none; } }

/* 01: a flecha sozinha, sobre o selo que acende no impacto */
.blade, .seal { will-change: transform; } /* camada própria: o brilho é rasterizado uma vez, não a cada quadro */
.blade { height: 78vh; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 26px rgba(31, 92, 255, .9)) drop-shadow(0 0 70px rgba(31, 92, 255, .45)); z-index: 2; }
.seal {
  position: absolute; left: 50%; top: 80vh; width: min(70vw, 900px); aspect-ratio: 1;
  translate: -50% -50%; scale: 1 .3; opacity: 0;
  filter: drop-shadow(0 0 10px rgba(31, 92, 255, .9));
}
.descent-glow {
  position: absolute; left: 50%; top: 80vh; width: 90vw; aspect-ratio: 3 / 1; translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(166, 219, 255, .55), rgba(31, 92, 255, .25) 45%, transparent);
  opacity: 0; pointer-events: none;
}
.shock { top: 80vh; border-color: var(--glacial); box-shadow: 0 0 24px rgba(31, 92, 255, .6); }

/* 01: a ficha no corte */
.frame-file {
  position: absolute; left: var(--gutter); top: 124px; display: grid; gap: 6px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper);
}
.frame-file div { display: grid; grid-template-columns: 82px auto; gap: 10px; }
.frame-file dt { color: var(--ink); opacity: .75; }
@media (max-width: 760px) { .frame-file { top: 112px; font-size: 10px; } .frame-file div { grid-template-columns: 64px auto; } }

/* 02: o processo (papel) */
.process { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--paper); color: var(--ink); }
.process-head { position: absolute; left: var(--gutter); top: 96px; max-width: 520px; }
.process-head h2 { margin: 14px 0 12px; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 7vw, 118px); line-height: .84; }
.process-head p { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.2; max-width: 420px; }
.process-rail { position: absolute; left: var(--gutter); right: var(--gutter); top: 58vh; height: 2px; background: rgba(3, 5, 9, .15); }
.process-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0); }
.process-arrow { position: absolute; left: 0; top: -11px; width: 120px; height: 24px; translate: -100% 0; }
.process-track {
  position: absolute; left: var(--gutter); right: var(--gutter); top: calc(58vh + 34px);
  list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 18px;
}
.process-track li { opacity: .18; transition: opacity .35s; border-top: 3px solid var(--ink); padding-top: 12px; }
.process-track li.on { opacity: 1; }
.process-track li.cur { border-top-color: var(--red); }
.process-track b { font-family: var(--display); font-size: 15px; color: var(--red); }
.process-track h3 { margin: 4px 0 8px; font-family: var(--display); font-weight: 900; font-size: clamp(18px, 1.7vw, 28px); line-height: .9; }
.process-track p { font-size: 12px; line-height: 1.45; color: #3a3f4a; }
.process-track code { font-family: var(--mono); font-size: 11px; background: rgba(31, 92, 255, .1); padding: 0 3px; }

/* 02: anatomia de um sistema (escuro) */
.stack { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: var(--ink); }
.stack::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 70% at 22% 70%, rgba(31, 92, 255, .14), transparent 70%); }
.stack-head { position: absolute; left: var(--gutter); top: 96px; z-index: 2; }
.stack-head h2 { margin-top: 12px; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 5.4vw, 92px); line-height: .84; }
.stack-diagram { position: absolute; left: var(--gutter); bottom: calc(4vh + var(--bar)); width: min(36vw, 62vh); z-index: 1; overflow: visible; }
.slab { transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.slab-top { fill: #0b1220; stroke: #2a3550; stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.slab-side { fill: #060a12; stroke: #2a3550; stroke-width: 1; }
.slab text { font: 700 15px var(--display); letter-spacing: .2em; fill: var(--grey); text-anchor: middle; transition: fill .4s; }
.slab.on .slab-top { fill: var(--red); stroke: var(--glacial); }
.slab.on text { fill: var(--paper); }
.stack-beam { transform-origin: 50% 0; transform: scaleY(0); filter: drop-shadow(0 0 6px var(--glacial)); }
.stack-layers { position: absolute; left: 46vw; right: var(--gutter); top: 0; bottom: 0; }
.layer { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -46%; visibility: hidden; }
.layer-k { position: absolute; right: 0; top: -40px; font-family: var(--brush); font-size: clamp(90px, 12vw, 190px); line-height: 1; color: var(--red); opacity: .22; pointer-events: none; }
.layer .eyebrow { color: var(--red); }
.layer h3 { margin: 8px 0 14px; font-family: var(--display); font-weight: 900; font-size: clamp(40px, 5vw, 84px); line-height: .86; }
.layer > p { max-width: 560px; font-size: 13px; line-height: 1.6; color: #c4cad6; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 18px; }
.tags li { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border: 1px solid #2a3550; color: var(--paper); }
.code { position: relative; max-width: 640px; background: #070b14; border: 1px solid #1d2433; border-left: 3px solid var(--red); }
.code figcaption { padding: 8px 12px; font-size: 10px; letter-spacing: .12em; color: var(--grey); border-bottom: 1px solid #1d2433; }
.code pre { margin: 0; padding: 12px 14px; overflow: hidden; font: 12px/1.55 var(--mono); color: #d6e0f0; white-space: pre-wrap; word-break: break-word; }
.code b { font-weight: 500; color: var(--glacial); }
.code i { font-style: normal; color: #6f7a8f; }
.stack-count { position: absolute; right: var(--gutter); bottom: calc(4vh + var(--bar)); font-family: var(--display); font-weight: 900; display: flex; align-items: baseline; gap: 6px; }
.stack-count b { font-size: clamp(40px, 5vw, 80px); line-height: 1; color: var(--red); }
.stack-count span { font-size: 20px; }

/* 03: método (a lâmina desce e corta cada etapa) */
.cyber { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: #010205; }
.cyber::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(166, 219, 255, .025) 0 1px, transparent 1px 3px); }
.cy-head { position: absolute; left: var(--gutter); top: 96px; max-width: 34vw; z-index: 2; }
.cy-head .eyebrow { color: var(--red); }
.cy-head h2 { margin: 12px 0; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 5.6vw, 96px); line-height: .84; }
.cy-head p { font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; color: var(--grey); }
.cy-blade { position: absolute; left: 44vw; top: 96px; bottom: calc(5vh + var(--bar)); width: 2px; }
.cy-blade i { position: absolute; inset: 0; background: linear-gradient(#fff, var(--glacial) 40%, var(--red)); transform-origin: 50% 0; transform: scaleY(0); box-shadow: 0 0 12px var(--glacial), 0 0 40px var(--red); }
.cy-steps { position: absolute; left: calc(44vw + 32px); right: var(--gutter); top: 96px; bottom: calc(5vh + var(--bar)); list-style: none; display: grid; grid-template-rows: repeat(8, 1fr); }
.cy-steps li { position: relative; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-content: center; clip-path: inset(0 100% 0 0); }
.cy-steps li::after { content: ""; position: absolute; left: -32px; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--glacial), transparent); opacity: .3; }
.cy-steps b { grid-row: span 2; font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--red); }
.cy-steps h3 { font-family: var(--display); font-weight: 900; font-size: clamp(18px, 1.9vw, 30px); line-height: .95; letter-spacing: .02em; }
.cy-steps p { font-size: 12px; color: #9aa4b6; max-width: 520px; }

/* 03: bastidores */
.lab { position: relative; background: #010205; padding: 12vh var(--gutter) 14vh; border-top: 1px solid #111827; }
.lab h2, .apps h2 { margin: 12px 0 16px; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 104px); line-height: .84; }
.lab .eyebrow, .apps .eyebrow { color: var(--red); }
.lab-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 5vw; align-items: start; }
.lab-intro p, .apps-head p { max-width: 460px; font-size: 13px; line-height: 1.65; color: #b7bfcd; }
.term { background: #04070d; border: 1px solid #1d2433; box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(31, 92, 255, .12); }
.term figcaption { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #1d2433; font-size: 10px; letter-spacing: .1em; color: var(--grey); }
.term figcaption i { width: 9px; height: 9px; border-radius: 50%; background: #2a3550; }
.term figcaption i:nth-child(3) { background: var(--red); }
.term figcaption span { margin-left: 8px; }
.term pre { margin: 0; padding: 16px 18px; overflow: hidden; font: 12px/1.6 var(--mono); color: #cfd8e8; white-space: pre-wrap; word-break: break-all; }
.term s { text-decoration: none; color: #5d6880; }
.term b { font-weight: 500; color: var(--glacial); }
.term .tl { display: block; visibility: hidden; }
.term .tl.on { visibility: visible; }
.net { margin-top: 12vh; }
.net-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; border-bottom: 1px solid #1d2433; padding-bottom: 12px; }
.net-head p { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--grey); }
.net-map { display: block; width: 100%; margin-top: 3vh; overflow: visible; }
.net-wire { stroke: #2a3550; stroke-width: 2; stroke-dasharray: 6 6; fill: none; }
.net-packet { fill: var(--glacial); filter: drop-shadow(0 0 6px var(--glacial)); }
.net-node { cursor: pointer; outline: none; }
.net-node circle { fill: #04070d; stroke: #2a3550; stroke-width: 2; transition: stroke .3s, fill .3s; }
.net-node text { font: 700 15px var(--display); letter-spacing: .18em; fill: var(--grey); text-anchor: middle; transition: fill .3s; }
.net-node text.k { font: 400 26px var(--brush); letter-spacing: 0; fill: var(--paper); }
.net-node.on circle, .net-node:focus-visible circle { stroke: var(--glacial); fill: var(--red-deep); }
.net-node.on text { fill: var(--paper); }
.net-detail { min-height: 3em; margin-top: 8px; font-size: 13px; color: var(--paper); border-left: 3px solid var(--red); padding-left: 12px; max-width: 720px; }
.lab-code { margin-top: 12vh; display: grid; grid-template-columns: 1fr 1fr; gap: 3vw; }
.lab-code .code { max-width: none; }
.ledger { margin-top: 12vh; }
.ledger ul { list-style: none; margin-top: 14px; border-top: 1px solid #1d2433; }
.ledger li { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid #1d2433; }
.ledger h3 { font-family: var(--display); font-weight: 900; font-size: clamp(20px, 2.2vw, 34px); line-height: .9; }
.ledger p { font-size: 12px; color: #9aa4b6; }
.ledger em { font-style: normal; font-size: 10px; letter-spacing: .18em; padding: 4px 8px; border: 1px solid #2a3550; color: var(--grey); white-space: nowrap; }
.ledger em.ok { border-color: var(--red); color: var(--glacial); }
.ledger li.is-open h3 { color: var(--grey); }

/* 04: jogos (a arte oficial revelada pela tinta, cinzas no ar) */
.forge { position: relative; height: 100vh; height: 100lvh; overflow: hidden; background: #050608; }
.fg-art { position: absolute; right: 0; top: 0; bottom: 0; width: 56vw; clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
.fg-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(.85) contrast(1.15) brightness(.85); }
.fg-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050608, transparent 40%), linear-gradient(0deg, #050608 4%, transparent 40%); }
.fg-ash { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fg-kanji { position: absolute; right: 3vw; top: 12vh; font-family: var(--brush); font-size: min(42vh, 30vw); line-height: 1; color: var(--paper); opacity: 0; mix-blend-mode: overlay; }
.fg-title { position: absolute; left: var(--gutter); top: 22vh; font-family: var(--display); font-weight: 900; font-size: clamp(52px, 7.6vw, 132px); line-height: .84; }
.fg-title .line:last-child span { color: var(--red); }
.fg-en { position: absolute; left: var(--gutter); top: calc(22vh + clamp(52px, 7.6vw, 132px) * 1.95); font-size: 11px; letter-spacing: .5em; color: var(--grey); }
.fg-facts { position: absolute; left: var(--gutter); top: calc(22vh + clamp(52px, 7.6vw, 132px) * 1.95 + 34px); display: grid; gap: 6px; font-size: 12px; }
.fg-facts div { display: grid; grid-template-columns: 76px auto; gap: 12px; }
.fg-facts dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); padding-top: 2px; }
.fg-pipe { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(9vh + var(--bar)); list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.fg-pipe li { background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--red); padding: 10px 10px 12px; }
.fg-pipe li:nth-child(odd) { rotate: -1.2deg; } .fg-pipe li:nth-child(even) { rotate: .8deg; }
.fg-pipe b { font-family: var(--display); font-size: 12px; color: var(--red); }
.fg-pipe h3 { font-family: var(--display); font-weight: 900; font-size: clamp(14px, 1.4vw, 22px); line-height: .95; }
.fg-pipe p { margin-top: 4px; font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.1; color: #3a3f4a; }
.fg-note { position: absolute; left: var(--gutter); bottom: calc(3vh + var(--bar)); max-width: 640px; font-size: 11px; color: var(--grey); }

/* 04: apps e ferramentas */
.apps { position: relative; background: var(--ink); padding: 12vh var(--gutter) 14vh; display: grid; grid-template-columns: 1fr 1.2fr; gap: 5vw; align-items: start; }
.apps-list { grid-column: 1 / -1; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; margin-top: 4vh; }
.apps-list li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: start; padding-top: 16px; border-top: 1px solid #1d2433; }
.apps-list img { width: 84px; height: 84px; object-fit: cover; background: #000; border: 1px solid #1d2433; }
.apps-list h3 { font-family: var(--display); font-weight: 900; font-size: 26px; line-height: .9; }
.apps-list p { margin-top: 6px; font-size: 12px; color: #9aa4b6; }

/* 05: estudos de caso na galeria horizontal */
.panel.case { height: calc(100vh - 190px); height: calc(100svh - 190px); aspect-ratio: auto; width: clamp(320px, 46vw, 680px); margin-top: 40px; display: flex; flex-direction: column; }
.panel.case:nth-child(even) { aspect-ratio: auto; margin-top: 40px; }
.panel.case .panel-art { position: relative; inset: auto; flex: 0 0 42%; }
.panel.case figcaption { position: static; margin: 12px 0 8px; }
.case-dl { display: grid; gap: 7px; font-size: 11px; line-height: 1.45; overflow: hidden; }
.case-dl div { display: grid; grid-template-columns: 70px 1fr; gap: 10px; border-top: 1px solid #1d2433; padding-top: 6px; }
.case-dl dt { font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--red); padding-top: 2px; }
.case-dl dd { color: #c4cad6; }

@media (max-width: 760px) {
  .process-head { top: 72px; right: var(--gutter); }
  .process-head h2 { font-size: 46px; }
  .process-head p { font-size: 16px; }
  .process-rail { top: 52vh; }
  .process-arrow { width: 80px; height: 16px; top: -7px; }
  .process-track { top: calc(52vh + 28px); display: block; }
  .process-track li { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
  .process-track li.on { opacity: 0; }
  .process-track li.cur { opacity: 1; }
  .process-track h3 { font-size: 34px; }
  .process-track p { font-size: 14px; }

  .stack-head { top: 72px; }
  .stack-head h2 { font-size: 36px; }
  .stack-diagram { left: auto; right: var(--gutter); top: 64px; bottom: auto; width: 30vw; }
  .stack-layers { left: var(--gutter); top: 170px; }
  .layer { top: 0; translate: none; }
  .layer h3 { font-size: 40px; }
  .layer > p { font-size: 12px; line-height: 1.5; }
  .layer-k { display: none; }
  .tags { margin: 10px 0 12px; }
  .code pre { font-size: 9.5px; padding: 8px 10px; max-height: 30vh; }
  .stack-count { bottom: calc(48px + var(--bar)); }

  .cy-head { top: 72px; max-width: none; right: var(--gutter); }
  .cy-head h2 { font-size: 44px; }
  .cy-head p { display: none; }
  .cy-blade { left: var(--gutter); top: 270px; bottom: calc(60px + var(--bar)); }
  /* celular: as oito etapas em lista (uma por vez deixava a tela vazia); a atual acende e mostra a descrição */
  .cy-steps { left: calc(var(--gutter) + 22px); top: 250px; bottom: calc(40px + var(--bar)); display: grid; grid-template-rows: repeat(8, auto); align-content: space-between; }
  .cy-steps li { position: relative; clip-path: none !important; opacity: .36; transition: opacity .3s; grid-template-columns: 30px 1fr; align-content: start; }
  .cy-steps li::after { display: none; }
  .cy-steps li.cur { opacity: 1; }
  .cy-steps b { font-size: 16px; }
  .cy-steps h3 { font-size: 17px; margin: 0; }
  .cy-steps p { display: none; font-size: 12px; margin-top: 4px; }
  .cy-steps li.cur p { display: block; }

  .lab-grid, .lab-code, .apps { grid-template-columns: 1fr; }
  .term pre { font-size: 10px; padding: 12px; }
  .net-node text { font-size: 22px; }
  .net-node text.k { font-size: 34px; }
  .net-map { margin-left: -6px; width: calc(100% + 12px); }
  .ledger li { grid-template-columns: 1fr; gap: 6px; }
  .ledger em { justify-self: start; }

  .fg-art { left: 0; width: 100%; bottom: auto; height: 44vh; }
  .fg-art::after { background: linear-gradient(0deg, #050608 6%, transparent 60%); }
  .fg-kanji { top: 9vh; }
  .fg-title { top: 34vh; font-size: 44px; }
  .fg-en { top: calc(34vh + 82px); font-size: 9px; letter-spacing: .4em; }
  .fg-facts { top: calc(34vh + 108px); font-size: 11px; gap: 4px; }
  .fg-facts div { grid-template-columns: 62px auto; }
  .fg-pipe { grid-template-columns: repeat(4, 1fr); bottom: calc(56px + var(--bar)); gap: 6px; }
  .fg-pipe li { padding: 6px; box-shadow: 3px 3px 0 var(--red); }
  .fg-pipe h3 { font-size: 11px; }
  .fg-pipe p { display: none; }
  .fg-note { display: none; }

  .apps-list { grid-template-columns: 1fr; }
  .frames-head h2 { font-size: 30px; }
  .panel.case, .panel.case:nth-child(even) { width: 82vw; height: calc(100svh - 230px); margin-top: 80px; }
  .case-dl { font-size: 10.5px; gap: 5px; }
}
@media (max-height: 700px) and (max-width: 760px) {
  .layer > p { display: none; }
  .fg-facts div:nth-child(4) { display: none; }
}
.hero.has-castle::after { z-index: 1; }
.hero.has-castle .hero-title, .hero.has-castle .hero-sub, .hero.has-castle .hero-cue, .hero.has-castle .hero-kanji { z-index: 2; }
.hero.has-castle .hero-flash { z-index: 3; }

/* ---------- correções de qualidade ---------- */
.stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(3, 1fr); } }

/* estudos de caso: a caixa tem a proporção da captura (920×560), sem parallax, a tela inteira aparece */
.panel.case .panel-art { flex: none; aspect-ratio: 920 / 560; height: auto; }
.panel.case .panel-art img { top: 0; height: 100%; object-fit: cover; }
.panel-term { background: #04070d !important; border-color: #2a3550 !important; }
.panel-term pre { position: absolute; inset: 0; margin: 0; padding: 14px; font: 11px/1.6 var(--mono); color: #cfd8e8; white-space: pre-wrap; overflow: hidden; }
.panel-term s { text-decoration: none; color: #5d6880; }
@media (max-width: 760px) { .panel-term pre { font-size: 9.5px; padding: 10px; } }

img.hero-ink { will-change: transform; } /* reserva sem WebGL: composta pela GPU, sem repintar a cada quadro */
.panel.case .panel-art img.fit { object-fit: contain; background: #000; } /* arte oficial quadrada: inteira */
.process-head { max-width: none; right: var(--gutter); } .process-head h2 .line > span { white-space: nowrap; } /* duas linhas em qualquer largura */

/* ======================================================================
   REFINAMENTO: uma navegação só, títulos limpos, Ferramentas, janelas,
   estação de laboratório. Mesma paleta e tipografia.
   ====================================================================== */

/* navegação: uma linha, discreta; o indicador de capítulo fica embaixo, ao centro */
.nav { padding: max(14px, env(safe-area-inset-top)) var(--gutter) 14px; font-size: 10px; letter-spacing: .18em; }
.nav-links { gap: clamp(14px, 1.6vw, 26px); }
.nav-links a { opacity: .78; transition: opacity .2s; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.on { opacity: 1; }
.nav-links a.on::after { transform: scaleX(1); }
.nav-menu { display: none; font: 500 10px/1 var(--mono); letter-spacing: .22em; color: inherit; background: none; border: 1px solid currentColor; padding: 8px 10px; cursor: pointer; }
.hud { top: auto; bottom: calc(max(14px, env(safe-area-inset-bottom)) + var(--bar)); }
@media (max-width: 1180px) and (min-width: 761px) { .nav-links { gap: 12px; letter-spacing: .12em; } .nav-logo span { display: none; } }
@media (max-width: 760px) {
  .nav-menu { display: inline-block; }
  .nav { gap: 12px; }
  .nav-slot { margin-left: auto; }
}
.mmenu {
  position: fixed; inset: 0; z-index: 79; background: rgba(3, 5, 9, .97);
  padding: calc(max(14px, env(safe-area-inset-top)) + 64px) var(--gutter) max(24px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: center; overflow-y: auto;
}
.mmenu[hidden] { display: none; }
.mmenu a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1d2433; }
.mmenu b { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 8vw, 40px); line-height: 1; }
.mmenu i { font-style: normal; font-family: var(--brush); font-size: 18px; color: var(--red); }
body.menu-open .nav { color: var(--paper) !important; }

/* títulos: o nome e, ao lado, o termo japonês discreto */
.chapter-tag { flex-direction: row; align-items: baseline; }
.chapter-tag b i, .eyebrow i, .frame-label i, .mmenu i {
  font-style: normal; font-family: var(--brush); font-weight: 400; letter-spacing: .08em; margin-left: .5em; opacity: .7;
}
.chapter-tag b i { font-size: .62em; color: var(--red); opacity: 1; }
.hit .chapter-tag b i { color: var(--ink); }

/* 04: os apps no celular */
.apps { display: block; }
.apps-head { max-width: 560px; }
.phones { display: flex; gap: clamp(20px, 4vw, 64px); justify-content: center; margin-top: 7vh; }
.phone { width: min(300px, 42vw); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border: 10px solid #0b0f18; border-radius: 34px; box-shadow: 0 0 0 1px #2a3550, 0 30px 80px rgba(31, 92, 255, .18); }
.phone figcaption { margin-top: 14px; font-size: 12px; color: #9aa4b6; }
.phone b { display: block; font-family: var(--display); font-size: 22px; color: var(--paper); margin-bottom: 4px; }

/* 05: FERRAMENTAS — o arco */
.tools { position: relative; background: radial-gradient(70% 60% at 50% 70%, #071124, var(--ink) 70%); padding: 16vh var(--gutter) 14vh; overflow: hidden; }
.tools .chapter-tag { top: 96px; }
.tools-head { position: relative; z-index: 2; max-width: 520px; margin-top: 3vh; }
.tools-head h2 { font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 104px); line-height: .84; }
.tools-head p { margin-top: 14px; font-size: 13px; color: #b7bfcd; max-width: 420px; }
.tool-card { position: relative; z-index: 2; width: min(620px, 100%); margin: 2vh auto 0; padding: 18px 20px; background: rgba(4, 7, 13, .92); border: 1px solid #1d2433; border-top: 3px solid var(--red); }
.tool-cat { font-size: 10px; letter-spacing: .24em; color: var(--red); }
.tool-name { margin: 6px 0 8px; font-family: var(--display); font-weight: 900; font-size: clamp(30px, 3.6vw, 52px); line-height: .9; }
.tool-role { font-size: 13px; color: #d6e0f0; }
.tool-dl { margin-top: 12px; display: grid; gap: 6px; font-size: 12px; }
.tool-dl div { display: grid; grid-template-columns: 90px 1fr; gap: 10px; border-top: 1px solid #1d2433; padding-top: 6px; }
.tool-dl dt { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--grey); padding-top: 2px; }
.built { margin-top: 12vh; }
.built .eyebrow { color: var(--red); }
.built-cards { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; }
.built-card {
  position: relative; display: grid; grid-template-columns: 120px 1fr; grid-template-rows: auto 1fr; column-gap: 20px; align-items: center; text-align: left;
  padding: 20px; background: #04070d; color: var(--paper); border: 1px solid #1d2433; cursor: pointer; overflow: hidden; transition: border-color .3s;
}
.built-card::after { content: "ABRIR ↗"; position: absolute; right: 16px; top: 16px; font: 500 10px var(--mono); letter-spacing: .2em; color: var(--grey); }
.built-card:hover, .built-card:focus-visible { border-color: var(--glacial); outline: none; }
.built-card img { grid-row: span 2; width: 120px; height: 120px; object-fit: contain; background: none; filter: drop-shadow(0 0 14px rgba(31, 92, 255, .25)); }
.built-card b { font-family: var(--display); font-weight: 900; font-size: clamp(36px, 4vw, 64px); line-height: .9; align-self: end; }
.built-card span { font-size: 12px; color: #9aa4b6; align-self: start; }
@media (max-width: 760px) {
  .tools { padding-top: 14vh; }
  .tools .chapter-tag { top: 72px; }
  .tool-card { margin-top: 18px; }
  .built-cards { grid-template-columns: 1fr; }
  .built-card { grid-template-columns: 84px 1fr; }
  .built-card img { width: 84px; height: 84px; }
  .phones { gap: 14px; }
  .phone img { border-width: 6px; border-radius: 22px; }
}

/* janelas de apresentação */
dialog.pres {
  width: min(980px, calc(100vw - 2 * var(--gutter))); max-height: min(88vh, 900px); max-height: min(88svh, 900px);
  margin: auto; padding: 0; border: 1px solid #2a3550; border-top: 3px solid var(--red);
  background: #04070d; color: var(--paper); overflow: hidden;
}
dialog.pres::backdrop { background: rgba(3, 5, 9, .82); backdrop-filter: blur(4px); }
.pres-scroll { max-height: inherit; overflow-y: auto; padding: clamp(20px, 4vw, 48px); overscroll-behavior: contain; }
.pres-close { position: sticky; float: right; top: 0; z-index: 2; margin: 14px 14px 0 0; font: 500 10px var(--mono); letter-spacing: .2em; color: var(--paper); background: #04070d; border: 1px solid #2a3550; padding: 9px 12px; cursor: pointer; }
.pres-close:hover, .pres-close:focus-visible { border-color: var(--glacial); outline: none; }
.pres-hero { display: grid; grid-template-columns: 160px 1fr; gap: 28px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid #1d2433; }
.pres-hero .eyebrow { color: var(--red); }
.pres-hero h2 { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 8vw, 120px); line-height: .84; margin: 6px 0; }
.pres-hero p { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.8vw, 26px); }
.pres-sec { padding: 22px 0; border-bottom: 1px solid #1d2433; }
.pres-sec h3 { font-size: 10px; letter-spacing: .26em; color: var(--red); margin-bottom: 10px; }
.pres-sec p { font-size: 14px; line-height: 1.6; color: #c4cad6; max-width: 720px; }
.pres-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.pres-tags li { font-size: 11px; letter-spacing: .1em; padding: 6px 10px; border: 1px solid #2a3550; }
.pres-work { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: center; }
.pres-work img { width: 240px; height: 240px; object-fit: cover; }
.pres-work b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(28px, 3vw, 44px); line-height: .9; margin-bottom: 8px; }
.pres-flow { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; counter-reset: f; }
.pres-flow li { counter-increment: f; font-family: var(--display); font-weight: 700; font-size: 16px; padding: 8px 12px; background: var(--paper); color: var(--ink); }
.pres-flow li::before { content: counter(f, decimal-leading-zero) " "; color: var(--red); font-size: 11px; }
.pres-arch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.pres-arch div { padding: 14px; border: 1px solid #2a3550; background: linear-gradient(180deg, rgba(31, 92, 255, .16), transparent); }
.pres-arch b { display: block; font-family: var(--display); font-size: 20px; margin-bottom: 6px; }
.pres-arch span { font-size: 12px; color: #9aa4b6; }
@media (max-width: 760px) {
  .pres-hero, .pres-work { grid-template-columns: 1fr; }
  .pres-work img { width: 100%; height: auto; aspect-ratio: 1; }
  .pres-arch { grid-template-columns: 1fr 1fr; }
}

/* 03: a estação de laboratório (janela no estilo do Kali) */
.lab-head { max-width: 640px; }
.lab-head h2 { margin: 12px 0 16px; font-family: var(--display); font-weight: 900; font-size: clamp(44px, 6vw, 104px); line-height: .84; }
.lab-head p { font-size: 13px; line-height: 1.65; color: #b7bfcd; }
.lab-head code { font-family: var(--mono); color: var(--glacial); }
.kali {
  --k-bg: #0b0e14; --k-bar: #11151d; --k-line: #232a38; --k-acc: #367bf0;
  margin-top: 6vh; border: 1px solid var(--k-line); border-radius: 8px; overflow: hidden; background: var(--k-bg);
  box-shadow: 0 40px 120px rgba(31, 92, 255, .18), 0 0 0 1px #000;
  font: 12px/1.55 var(--mono);
}
.k-bar { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--k-bar); border-bottom: 1px solid var(--k-line); font-size: 11px; color: #c9d1e0; }
.k-menu { color: var(--k-acc); font-size: 13px; }
.k-ws { display: flex; gap: 4px; }
.k-ws i { font-style: normal; width: 18px; text-align: center; border-radius: 3px; color: #7d8799; }
.k-ws i.on { background: var(--k-acc); color: #fff; }
.k-title { flex: 1; text-align: center; color: #9aa4b6; }
.k-tray { display: flex; align-items: center; gap: 10px; }
.k-net { width: 10px; height: 10px; border-radius: 50%; background: #33d17a; box-shadow: 0 0 8px #33d17a; }
.k-body { display: grid; grid-template-columns: 220px 1fr; min-height: 520px; }
.k-tree { border-right: 1px solid var(--k-line); padding: 12px 10px; background: #0d1118; }
.k-path { color: var(--k-acc); margin-bottom: 8px; }
.k-tree ul { list-style: none; }
.k-tree ul ul { padding-left: 14px; border-left: 1px solid var(--k-line); margin-left: 4px; }
.k-tree button { font: inherit; color: #c9d1e0; background: none; border: 0; padding: 2px 6px; cursor: pointer; border-radius: 3px; text-align: left; }
.k-tree button:hover, .k-tree button:focus-visible { background: rgba(54, 123, 240, .25); outline: none; }
.k-dir { color: #7aa2f7; padding: 2px 0; }
.k-main { display: flex; flex-direction: column; min-width: 0; }
.k-tabs { display: flex; border-bottom: 1px solid var(--k-line); background: var(--k-bar); }
.k-tabs button { font: inherit; font-size: 11px; color: #9aa4b6; background: none; border: 0; border-right: 1px solid var(--k-line); padding: 9px 16px; cursor: pointer; }
.k-tabs button[aria-selected=true] { color: #fff; background: var(--k-bg); box-shadow: inset 0 2px 0 var(--k-acc); }
.k-pane { flex: 1; display: flex; flex-direction: column; padding: 12px 14px; min-height: 0; }
.k-pane[hidden] { display: none; }
.k-out { flex: 1; min-height: 300px; max-height: 360px; overflow-y: auto; margin: 0; white-space: pre-wrap; word-break: break-word; color: #d3dae6; }
.k-out s { text-decoration: none; color: var(--k-acc); }
.k-out b { color: #7aa2f7; font-weight: 500; }
.k-out .ok { color: #33d17a; }
.k-out .bad { color: #f66151; }
.k-in label { display: flex; align-items: flex-end; gap: 8px; color: var(--k-acc); }
.k-ps { white-space: nowrap; line-height: 1.4; }
.k-in input { flex: 1; min-width: 0; font: inherit; color: #fff; background: none; border: 0; border-bottom: 1px solid var(--k-line); padding: 2px 0; outline: none; caret-color: var(--glacial); }
.k-in input:focus { border-color: var(--k-acc); }
.k-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.k-chips button { font: inherit; font-size: 11px; color: #c9d1e0; background: #141a24; border: 1px solid var(--k-line); border-radius: 4px; padding: 4px 8px; cursor: pointer; }
.k-chips button:hover, .k-chips button:focus-visible { border-color: var(--k-acc); outline: none; }
.k-flow { list-style: none; counter-reset: k; display: grid; gap: 8px; }
.k-flow li { counter-increment: k; display: grid; grid-template-columns: 34px 160px 1fr; gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--k-line); border-radius: 4px; background: #0d1118; }
.k-flow li::before { content: counter(k, decimal-leading-zero); color: var(--k-acc); }
.k-flow b { color: #fff; font-weight: 500; letter-spacing: .08em; }
.k-flow span { color: #9aa4b6; }
.k-pane .net-map { margin-top: 10px; }


.k-code { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-code .code { max-width: none; }
.lab .ledger li { grid-template-columns: minmax(200px, 1fr) 2fr; }
@media (max-width: 900px) {
  .k-body { grid-template-columns: 1fr; }
  .k-tree { border-right: 0; border-bottom: 1px solid var(--k-line); max-height: 150px; overflow-y: auto; }
  .k-code { grid-template-columns: 1fr; }
  .k-flow li { grid-template-columns: 28px 1fr; }
  .k-flow span { grid-column: 2; }
  .k-title { display: none; }
  .kali { font-size: 11px; }
  .k-out { min-height: 240px; max-height: 300px; }
}
/* o menu fixo ganha um fundo em degradê: o conteúdo que rola por baixo não embola com ele */
.nav::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(3, 5, 9, .88), rgba(3, 5, 9, .55) 60%, transparent); transition: opacity .3s; }
.nav.is-dark::before { background: linear-gradient(rgba(243, 246, 250, .92), rgba(243, 246, 250, .6) 60%, transparent); }

/* ---------- referências Quincy (símbolos desenhados em código) ---------- */
.loader-qz { position: absolute; left: 50%; top: 50%; width: min(64vh, 80vw); height: min(64vh, 80vw); translate: -50% -50%; color: var(--red); opacity: .55; pointer-events: none; }
.qb-ring { stroke-dasharray: 1; }
.qz-hl { fill: var(--qz-hl, rgba(255, 255, 255, .3)); }
.dark-qz { position: fixed; left: 50%; top: 50%; width: min(36vh, 50vw); height: min(36vh, 50vw); translate: -50% -50%; z-index: 150; color: var(--glacial); opacity: 0; pointer-events: none; filter: drop-shadow(0 0 12px var(--red)) drop-shadow(0 0 40px rgba(31, 92, 255, .6)); }
.vene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .22; }
.lab { overflow: hidden; } .lab > *:not(.vene) { position: relative; }
.schrift { position: absolute; left: 6px; top: 4px; z-index: 2; font: italic 600 clamp(22px, 2.2vw, 34px)/1 var(--serif); color: var(--paper); text-shadow: 0 0 10px var(--red), 0 0 2px #000; }
@media (max-width: 760px) { .lab .ledger li { grid-template-columns: 1fr; } }
/* a reserva do herói (e a primeira imagem útil) é um quadro real da cena 3D, em tela cheia: sem a lua do CSS */
.hero .moon-in { display: none; }
img.hero-ink { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: 50% 60%; mix-blend-mode: normal; -webkit-mask: none; mask: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3,5,9,.55), transparent 28%, transparent 72%, rgba(3,5,9,.55)), linear-gradient(0deg, rgba(3,5,9,.5), transparent 24%); }
.hero .hero-title, .hero .hero-sub, .hero .hero-cue, .hero .hero-kanji { z-index: 2; }
.hero .hero-flash { z-index: 3; }

/* desempenho: o corte diagonal das metades virou máscara SVG (rasterizada uma vez, composta pela GPU).
   Com clip-path poligonal, cada quadro do movimento repintava a tela inteira: 27 → 45 fps medidos. */
.frame-half, .vs-half { clip-path: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.frame-half.a { clip-path: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,28.1 0,77.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 100,0 100,28.1 0,77.75'/%3E%3C/svg%3E"); }
.frame-half.b { clip-path: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,77.75 100,28.1 100,100 0,100'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,77.75 100,28.1 100,100 0,100'/%3E%3C/svg%3E"); }
.vs-half.l { clip-path: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 58,0 42,100 0,100'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 58,0 42,100 0,100'/%3E%3C/svg%3E"); }
.vs-half.r { clip-path: none; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='58,0 100,0 100,100 42,100'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='58,0 100,0 100,100 42,100'/%3E%3C/svg%3E"); }

/* a flecha e o selo com o brilho já assado na imagem (ver bakeGlow em main.js): sem filtro por quadro */
img.blade, img.seal { filter: none; }
img.blade { height: calc(78vh * 680 / 640); top: calc(4vh - 78vh * 20 / 640); width: auto; }
img.seal { width: min(84vw, 1080px); height: auto; }

/* laboratório: ferramentas que rodam no aparelho (Integridade, Metadados, Cabeçalhos) */
.k-tabs { overflow-x: auto; scrollbar-width: none; }
.k-tabs::-webkit-scrollbar { display: none; }
.k-tabs button { flex: none; }
.k-out .warn, .k-res .warn { color: #f6d32d; }
.k-note { color: #9aa4b6; font-size: 12px; line-height: 1.6; max-width: 640px; margin-bottom: 10px; }
.k-note code { color: #fff; }
.k-drop { position: relative; display: grid; place-items: center; min-height: 92px; border: 1px dashed #3a4558; border-radius: 6px; background: #0d1118; color: #c9d1e0; cursor: pointer; transition: border-color .2s, background .2s; }
.k-drop:hover, .k-drop.over, .k-drop:focus-within { border-color: var(--k-acc); background: rgba(54, 123, 240, .12); }
.k-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.k-drop span::before { content: "⇪ "; color: var(--k-acc); }
.k-field { display: grid; gap: 4px; margin-top: 10px; color: #9aa4b6; font-size: 11px; }
.k-field input, .k-hdr { font: inherit; font-size: 12px; color: #fff; background: #0d1118; border: 1px solid var(--k-line); border-radius: 4px; padding: 8px; outline: none; }
.k-field input:focus, .k-hdr:focus { border-color: var(--k-acc); }
.k-hdr { width: 100%; resize: vertical; margin: 10px 0; line-height: 1.5; }
.k-res { flex: 1; margin: 10px 0 0; min-height: 120px; max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-all; color: #d3dae6; }
.k-res s { text-decoration: none; color: var(--k-acc); }
.k-res b { color: #7aa2f7; font-weight: 500; }
.k-res .ok { color: #33d17a; } .k-res .bad { color: #f66151; }
.k-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.k-acts:first-of-type { margin-top: 0; }
.k-btn { font: inherit; font-size: 11px; letter-spacing: .12em; color: #fff; background: #141a24; border: 1px solid var(--k-acc); border-radius: 4px; padding: 7px 12px; cursor: pointer; text-decoration: none; }
.k-btn:hover, .k-btn:focus-visible { background: rgba(54, 123, 240, .25); outline: none; }
.k-btn[hidden] { display: none; }
.k-run { align-self: flex-start; }

/* celular: o indicador de capítulo ganha fundo próprio e o texto do fim de cada quadro sobe acima dele */
.hud { padding: 6px 12px; background: rgba(3, 5, 9, .72); border: 1px solid rgba(166, 219, 255, .14); transition: color .3s, background .3s; }
.hud.is-dark { background: rgba(243, 246, 250, .82); border-color: rgba(5, 5, 5, .1); }
@media (max-width: 760px) {
  .frame-narr { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 44px + var(--bar)); }
  .frame-title { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 150px + var(--bar)); }
  .archive-head { z-index: 6; right: var(--gutter); max-width: none; padding: 10px 12px; background: rgba(243, 246, 250, .92); }
  .archive-head p { font-size: 17px; }
}
@media (max-width: 900px) { .k-res { white-space: pre; word-break: normal; font-size: 10.5px; } }

/* Quincy: composições novas, uma por lugar */
.contact-voll { position: absolute; right: -4vw; top: 4vh; width: min(110vh, 70vw); aspect-ratio: 3 / 2; height: auto; color: var(--ink); opacity: .13; pointer-events: none; }
@media (max-width: 760px) { .contact-voll { right: -20vw; width: 120vw; top: 2vh; } }
.tools { isolation: isolate; }
.regen { position: absolute; left: 0; top: -180px; width: 100%; height: calc(100% + 360px); z-index: -1; opacity: .16; pointer-events: none; }
.tools.volley .regen { animation: regen .9s cubic-bezier(.2, .7, .3, 1); }
@keyframes regen { to { transform: translate3d(-58px, 180px, 0); } }
@media (prefers-reduced-motion: reduce) { .tools.volley .regen { animation: none; } }

/* janelas: herói em cena, índice, funções e etapas clicáveis */
.pres-hero { position: relative; overflow: hidden; margin: calc(-1 * clamp(20px, 4vw, 48px)); margin-bottom: 0; padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 48px); min-height: 300px; isolation: isolate; }
.pres-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: grayscale(.4) contrast(1.1); }
.pres-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #04070d 22%, rgba(4, 7, 13, .6) 60%, rgba(4, 7, 13, .2)), linear-gradient(0deg, #04070d, transparent 40%); }
.pres-qoru .pres-bg { object-fit: contain; object-position: 90% 50%; opacity: .2; }
.pres-q { position: absolute; right: 2%; top: 50%; translate: 0 -50%; width: min(300px, 40vw); z-index: -1; color: var(--glacial); opacity: .5; filter: drop-shadow(0 0 8px rgba(31, 92, 255, .8)); }
.pres-vakar .pres-q { color: #ff4d5a; filter: drop-shadow(0 0 8px rgba(200, 20, 40, .8)); }
.pres-vakar .pres-hero .eyebrow { color: #ff4d5a; }
img.pres-logo { width: 160px; height: 160px; object-fit: contain; background: rgba(0, 0, 0, .6); }
.pres-idx { position: sticky; top: calc(-1 * clamp(20px, 4vw, 48px)); z-index: 1; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(20px, 4vw, 48px)); padding: 10px clamp(20px, 4vw, 48px); background: rgba(4, 7, 13, .94); border-bottom: 1px solid #1d2433; }
.pres-idx button { flex: none; font: 500 10px var(--mono); letter-spacing: .2em; color: #9aa4b6; background: none; border: 1px solid transparent; padding: 7px 10px; cursor: pointer; }
.pres-idx button:hover, .pres-idx button:focus-visible, .pres-idx button.on { color: var(--paper); border-color: #2a3550; outline: none; }
.pres-feats { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 12px; }
.pres-feats li { padding: 16px; border: 1px solid #2a3550; border-top: 2px solid var(--red); background: #070b14; }
.pres-vakar .pres-feats li { border-top-color: #c81428; }
.pres-feats b { display: block; font-family: var(--display); font-weight: 900; font-size: 22px; line-height: 1; margin-bottom: 8px; }
.pres-feats span { font-size: 12px; line-height: 1.55; color: #9aa4b6; }
.pres-hook { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--paper) !important; margin-bottom: 8px; }
.pres-steps { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: f; }
.pres-steps button { counter-increment: f; font-family: var(--display); font-weight: 700; font-size: 16px; padding: 9px 12px; color: var(--ink); background: var(--paper); border: 0; cursor: pointer; transition: background .2s, color .2s; }
.pres-steps button::before { content: counter(f, decimal-leading-zero) " "; color: var(--red); font-size: 11px; }
.pres-steps button[aria-selected=true], .pres-steps button:focus-visible { background: var(--red); color: var(--paper); outline: none; }
.pres-steps button[aria-selected=true]::before { color: var(--paper); }
.pres-vakar .pres-steps button[aria-selected=true] { background: #c81428; }
.pres-steps.is-arch { display: grid; grid-template-columns: repeat(4, 1fr); }
.pres-steps.is-arch button { text-align: left; padding: 14px; color: var(--paper); background: linear-gradient(180deg, rgba(31, 92, 255, .16), transparent); border: 1px solid #2a3550; }
.pres-steps.is-arch button[aria-selected=true] { background: linear-gradient(180deg, rgba(31, 92, 255, .55), rgba(31, 92, 255, .1)); border-color: var(--glacial); }
.pres-steps.is-arch b { display: block; font-size: 20px; margin: 2px 0 4px; }
.pres-steps.is-arch span { font: 400 12px var(--mono); color: #9aa4b6; }
.pres-step-d { min-height: 3.2em; margin: 12px 0; padding-left: 12px; border-left: 3px solid var(--red); color: var(--paper) !important; }
.pres-vakar .pres-step-d { border-left-color: #c81428; }
@media (max-width: 760px) {
  .pres-hero { min-height: 0; }
  img.pres-logo { width: 88px; height: 88px; }
  .pres-q { width: 46vw; top: 30%; opacity: .35; }
  .pres-steps.is-arch { grid-template-columns: 1fr 1fr; }
}
.pres-close { position: absolute; float: none; right: 14px; top: 14px; margin: 0; }
.pres-hero > div, .pres-hero > .pres-logo { position: relative; z-index: 1; }
.pres-q { z-index: 0; }
.pres-vakar .pres-feats { grid-template-columns: repeat(4, 1fr); }
.contact-voll { opacity: .2; top: 14vh; right: 2vw; }
@media (max-width: 900px) { .pres-vakar .pres-feats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .contact-voll { top: 4vh; right: -20vw; } }
.pres-idx { padding-right: 112px; }

/* VAKAR: as três mecânicas, jogáveis */
.mec-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0 10px; }
.mec-tabs button { display: grid; gap: 4px; text-align: left; padding: 12px 14px; color: var(--paper); background: #070b14; border: 1px solid #2a3550; border-top: 2px solid #3a1a20; cursor: pointer; transition: border-color .2s, background .2s; }
.mec-tabs i { font: 500 10px var(--mono); font-style: normal; color: #ff4d5a; letter-spacing: .2em; }
.mec-tabs b { font-family: var(--display); font-weight: 900; font-size: clamp(18px, 2vw, 26px); line-height: 1; }
.mec-tabs span { font-size: 11px; color: #9aa4b6; }
.mec-tabs button[aria-selected=true] { border-top-color: #c81428; background: linear-gradient(180deg, rgba(200, 20, 40, .22), #070b14); }
.mec-tabs button:focus-visible { outline: 1px solid #ff4d5a; }
.mec-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 62vh; width: 100%; background: #000; border: 1px solid #2a3550; user-select: none; -webkit-user-select: none; outline: none; }
.mec-stage[hidden], .mec-btns[hidden] { display: none; }
.mec-stage:focus-visible { border-color: #ff4d5a; }
.mec-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; pointer-events: none; }
.mec-hud { position: absolute; left: 12px; bottom: 10px; z-index: 3; font: 500 10px var(--mono); letter-spacing: .22em; color: #c9d1e0; background: rgba(4, 7, 13, .78); padding: 6px 9px; border-left: 2px solid #c81428; }
.mec-hud b { color: #fff; font-weight: 500; }
.mec-d { margin-top: 10px; padding-left: 12px; border-left: 3px solid #c81428; color: var(--paper) !important; min-height: 3em; }
/* exploração */
.is-explorar { touch-action: pan-y; cursor: crosshair; }
.mec-fog { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.mec-me { position: absolute; left: 0; top: 0; z-index: 2; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff4e0; box-shadow: 0 0 0 3px rgba(200, 20, 40, .55), 0 0 22px 6px rgba(255, 200, 150, .45); pointer-events: none; }
.is-explorar.found .mec-hud { border-left-color: #33d17a; }
/* puzzle */
.is-puzzle img { filter: brightness(.22) saturate(.6); transition: filter 1.4s ease; }
.is-puzzle.solved img { filter: none; }
.mec-rings { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 88%; width: auto; z-index: 2; overflow: visible; }
.mec-ring { cursor: pointer; transition: rotate .45s cubic-bezier(.3, 1.4, .5, 1); }
.mec-ring circle { fill: none; stroke: #8a95aa; stroke-width: 2; }
.mec-ring circle.hit { stroke: transparent; stroke-width: 26; pointer-events: stroke; }
.mec-ring path { fill: #ff4d5a; }
.mec-ring path.tick { fill: none; stroke: #8a95aa; stroke-width: 1.4; }
.mec-ring:hover circle:not(.hit) { stroke: #fff; }
.mec-qz { color: #ff4d5a; opacity: 0; transition: opacity .8s .3s; }
.solved .mec-ring circle:not(.hit) { stroke: #ffd9b0; filter: drop-shadow(0 0 6px rgba(255, 120, 90, .9)); }
.solved .mec-qz { opacity: 1; }
.solved .mec-rings { opacity: .55; transition: opacity 1.4s .6s; }
.mec-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mec-btns button { font: 500 10px var(--mono); letter-spacing: .16em; color: var(--paper); background: #070b14; border: 1px solid #2a3550; padding: 9px 11px; cursor: pointer; }
.mec-btns button:hover, .mec-btns button:focus-visible { border-color: #ff4d5a; outline: none; }
/* lanterna */
.is-lanterna { touch-action: pan-y; cursor: crosshair; --lx: 50%; --ly: 55%; }
.mec-dim { filter: brightness(.07) saturate(.4); }
.mec-lit { filter: sepia(.25) brightness(1.15); -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0, #000 7%, rgba(0, 0, 0, .55) 14%, transparent 24%); mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0, #000 7%, rgba(0, 0, 0, .55) 14%, transparent 24%); }
@media (max-width: 760px) {
  .mec-tabs { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
  .mec-tabs button { padding: 10px 8px; }
  .mec-tabs span { display: none; }
  .mec-stage { aspect-ratio: 4 / 5; max-height: 58vh; }
  .mec-lit { -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0, #000 11%, rgba(0, 0, 0, .55) 20%, transparent 34%); mask-image: radial-gradient(circle at var(--lx) var(--ly), #000 0, #000 11%, rgba(0, 0, 0, .55) 20%, transparent 34%); }
}

/* Quincy: arco em tinta, Wahrwelt, Sprenger e campo de flechas */
.ink-bow { position: absolute; right: 2vw; top: 4vh; height: 88%; width: auto; z-index: 0; pointer-events: none; overflow: visible; }
.work-head, .work-list { position: relative; z-index: 1; }
.ink-bow path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ib-limb { stroke: var(--ink); stroke-width: 9; opacity: .1; }
.ib-string { stroke: var(--red); stroke-width: 1.6; opacity: .45; }
.ib-arrow { stroke: var(--red); stroke-width: 3; opacity: .55; }
.ib-grip { fill: var(--ink); opacity: .1; }
.wahrwelt { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 26vh; z-index: 0; pointer-events: none; }
.wahrwelt path { fill: #050a14; }
.ww-slits rect { fill: #7fb2ff; opacity: .55; }
.stack { isolation: isolate; } .wahrwelt { z-index: -1; }
.apps { isolation: isolate; }
.sprenger { position: absolute; left: 50%; top: 58%; width: min(92vw, 760px); height: auto; translate: -50% -50%; z-index: -1; pointer-events: none; overflow: visible; }
.sprenger path, .sprenger polygon { fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-line { stroke: #2f6bff; stroke-width: 1; opacity: .5; }
.sp-star { opacity: .25; }
.sp-blade { stroke: #a6dbff; stroke-width: 1.6; }
.sp-guard { stroke: #a6dbff; stroke-width: 2.4; }
.apps.sp-on .sprenger path, .apps.sp-on .sprenger polygon { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1); }
.apps.sp-on .sprenger .sp-blade, .apps.sp-on .sprenger .sp-guard { transition-delay: .9s; }
.pfeil-field { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22vh; z-index: 0; pointer-events: none; opacity: .7; }
.pfeil-field g path { fill: none; stroke: #a6dbff; stroke-width: 1.8; stroke-linecap: round; }
.pfeil-field g path.fl { stroke: #2f6bff; stroke-width: 1.4; }
.pf-ground { fill: #1f5cff; opacity: .35; }
.frames { isolation: isolate; } .pfeil-field { z-index: -1; }
@media (max-width: 760px) {
  .ink-bow { right: -18vw; opacity: .7; }
  .wahrwelt { height: 18vh; }
  .sprenger { top: 62%; width: 128vw; }
  .pfeil-field { height: 14vh; }
}
@media (prefers-reduced-motion: reduce) { .ink-bow path, .sprenger path, .sprenger polygon { stroke-dashoffset: 0; } }
/* fluxo e requisição: clicáveis */
.k-flow li { grid-template-columns: 34px 1fr; padding: 0 0 0 10px; }
.k-flow li::before { align-self: center; }
.k-flow button { display: grid; grid-template-columns: 160px 1fr; gap: 10px; align-items: baseline; width: 100%; padding: 8px 10px 8px 0; font: inherit; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; }
.k-flow li:has(button.on), .k-flow li:hover { border-color: var(--k-acc); background: #111a2a; }
.k-flow button:focus-visible { outline: 1px solid var(--k-acc); }
.k-why { margin-top: 10px; padding-left: 10px; border-left: 2px solid var(--k-acc); color: #d3dae6; min-height: 2.6em; }
.k-req { margin-top: 12px; }
.k-req [aria-selected=true] { background: var(--k-acc); }
.k-trace { min-height: 110px; }
@media (max-width: 900px) { .k-flow li { grid-template-columns: 28px 1fr; } .k-flow button { grid-template-columns: 1fr; gap: 2px; } }
.work, .apps { overflow-x: clip; } /* o arco e o Sprenger passam da borda no celular: sem rolagem horizontal */

/* ===== revisão final: intro e Sobre mim ===== */
/* Bryan Castro: flecha e selo do tamanho da composição; texto à esquerda, legível */
.descent .blade, .descent img.blade { left: 66%; height: 50vh; top: 12vh; }
.descent img.blade { height: calc(50vh * 680 / 640); top: calc(12vh - 50vh * 20 / 640); }
.descent .seal, .descent img.seal { left: 66%; top: 63vh; width: min(42vw, 560px); }
.descent .descent-glow, .descent .shock { left: 66%; top: 63vh; width: 48vw; }
.descent-text { bottom: auto; top: 50%; translate: 0 -50%; max-width: 40vw; }
.descent-kanji { font-size: clamp(64px, 9vw, 150px); color: var(--paper); }
.descent-cap { margin-top: 18px; display: grid; gap: 10px; color: var(--paper); }
.descent-cap b { font-weight: 500; font-size: 12px; letter-spacing: .24em; color: var(--glacial); }
.descent-cap em { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; }
@media (max-width: 760px) {
  .descent .blade, .descent img.blade, .descent .seal, .descent img.seal, .descent .descent-glow, .descent .shock { left: 50%; }
  .descent .blade { height: 36vh; top: 11vh; }
  .descent img.blade { height: calc(36vh * 680 / 640); top: calc(11vh - 36vh * 20 / 640); }
  .descent .seal, .descent img.seal { top: 47vh; width: 78vw; }
  .descent .descent-glow, .descent .shock { top: 47vh; width: 90vw; }
  .descent-text { top: auto; bottom: calc(7vh + var(--bar)); translate: none; max-width: none; right: var(--gutter); }
  .descent-cap em { font-size: 19px; }
}
/* Sobre mim: título e narração no triângulo de cima, ficha e arco no de baixo; nada atravessa o corte */
.frame-copy { position: absolute; left: var(--gutter); top: 17vh; width: min(42vw, 640px); display: grid; gap: 2.2vh; z-index: 2; }
.frame .frame-copy .frame-title { position: static; font-size: clamp(44px, 6.2vw, 112px); }
.frame .frame-copy .frame-narr { position: static; max-width: none; font-size: clamp(17px, 1.5vw, 23px); line-height: 1.35; color: var(--paper); }
.frame .frame-file { top: auto; bottom: calc(6vh + var(--bar)); z-index: 2; font-size: 12px; color: var(--paper); }
.frame .frame-file dt { color: var(--ink); opacity: 1; font-weight: 500; }
.frame .frame-ink { right: 5vw; height: 50vh; bottom: 0; }
.frame .frame-kanji { opacity: .1; }
@media (max-width: 760px) {
  .frame-copy { top: 13vh; width: 76vw; gap: 1.6vh; }
  .frame .frame-copy .frame-title { font-size: 44px; }
  .frame .frame-copy .frame-narr { font-size: 17px; }
  .frame .frame-file { bottom: calc(6vh + var(--bar)); font-size: 11px; }
  .frame .frame-file div { grid-template-columns: 70px auto; }
  .frame .frame-ink { right: -6vw; height: 36vh; opacity: .55; }
}
/* O que eu faço: quatro colunas editoriais, sem prévia no hover */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.wk { padding: 28px 24px 8px 0; display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; }
.wk + .wk { padding-left: 24px; border-left: 1px solid rgba(5, 5, 5, .16); }
.wk header { display: flex; justify-content: space-between; align-items: baseline; }
.wk .n { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--red); }
.wk .k { font-family: var(--brush); font-size: 34px; }
.wk h3 { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 2.6vw, 44px); line-height: .92; }
.wk ul { list-style: none; display: grid; gap: 10px; align-content: start; }
.wk li { font-size: 13px; line-height: 1.5; padding-left: 14px; position: relative; color: #2b2925; }
.wk li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--red); }
.wk-where { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b6762; border-top: 1px solid rgba(5, 5, 5, .16); padding-top: 10px; }
@media (max-width: 1100px) { .work-grid { grid-template-columns: 1fr 1fr; } .wk:nth-child(3) { padding-left: 0; border-left: 0; } .wk:nth-child(n+3) { border-top: 1px solid rgba(5, 5, 5, .16); } }
@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } .wk, .wk + .wk { padding: 22px 0 10px; border-left: 0; } .wk + .wk { border-top: 1px solid rgba(5, 5, 5, .16); } }
/* Processo: no celular uma etapa por vez, sem a anterior sumindo por cima da nova */
.process-track p { font-size: clamp(12px, .95vw, 15px); }
@media (max-width: 760px) {
  .process-track li { transition: none; visibility: hidden; }
  .process-track li.cur { visibility: visible; animation: step-in .35s cubic-bezier(.2, .8, .2, 1); }
  @keyframes step-in { from { opacity: 0; transform: translateY(12px); } }
}
/* Apps no ar: cada produto com captura real (proporção 390×844) e ficha técnica */
.apps { display: block; }
.apps-head { max-width: 640px; }
.app-list { display: grid; gap: 7vh; margin-top: 6vh; position: relative; z-index: 1; }
.app { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: clamp(24px, 4vw, 64px); align-items: center; max-width: 1080px; }
.app:nth-child(even) { margin-left: auto; }
.app-shot { display: block; border: 1px solid #2a3550; border-radius: 22px; padding: 8px; background: #04070d; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.app-shot img { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 15px; }
.app-sheet header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-bottom: 1px solid #1d2433; padding-bottom: 10px; }
.app-sheet h3 { font-family: var(--display); font-weight: 900; font-size: clamp(32px, 3.6vw, 56px); line-height: .9; }
.app-sheet header span { font-family: var(--brush); font-size: 34px; color: var(--red); }
.app-goal { margin: 16px 0 18px; font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.3; color: var(--paper); }
.app-sheet dl { display: grid; gap: 10px; }
.app-sheet dl div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding-top: 10px; border-top: 1px solid #141b28; }
.app-sheet dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--glacial); padding-top: 2px; }
.app-sheet dd { font-size: 13px; line-height: 1.55; color: #c9d1e0; }
.app-link { display: inline-block; margin-top: 18px; font-size: 11px; letter-spacing: .18em; color: var(--paper); border-bottom: 1px solid var(--red); padding-bottom: 3px; }
.app-link:hover, .app-link:focus-visible { color: var(--glacial); }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; gap: 22px; }
  .app-shot { width: min(72vw, 280px); margin: 0 auto; }
  .app-sheet dl div { grid-template-columns: 92px 1fr; }
}

/* Ferramentas: o Heilig Bogen. Deitado no desktop, em pé no celular; a ficha da ferramenta abaixo */
.tools-body { position: relative; z-index: 2; margin-top: 4vh; }
.bow { position: relative; width: min(1100px, 100%); margin: 0 auto; }
.bow-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bow-limb { fill: none; stroke: #d6e8ff; stroke-width: 3; filter: drop-shadow(0 0 8px var(--red)) drop-shadow(0 0 22px rgba(31, 92, 255, .45)); transition: stroke .3s; }
.bow-string { fill: none; stroke: var(--glacial); stroke-width: 1; opacity: .8; }
.bow-arrow path { fill: #fff; stroke: #fff; stroke-width: 2; stroke-linejoin: round; transition: fill .2s, stroke .2s; }
.ba-flight { fill: none !important; }
.bow-shot { fill: none; stroke: #e8f4ff; stroke-width: 3; stroke-linecap: round; opacity: 0; filter: drop-shadow(0 0 6px var(--glacial)); }
/* energia Quincy só durante o disparo (o filtro animado custa; parado, a flecha é traço puro) */
.bow-arc.charged .bow-arrow path { fill: #bfe3ff; stroke: #bfe3ff; filter: drop-shadow(0 0 7px var(--glacial)) drop-shadow(0 0 16px var(--red)); }
.bow-arc.charged .bow-limb { stroke: #fff; }
.bow-name { font: 500 11px var(--mono); letter-spacing: .4em; fill: var(--grey); text-anchor: middle; }
.bow-tools { position: absolute; inset: 0; }
.bow-tools button {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; white-space: nowrap; color: var(--paper);
  background: #04070d; border: 1px solid #2a3550; padding: 7px 9px; cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.bow-tools button:hover, .bow-tools button:focus-visible { border-color: var(--glacial); outline: none; }
.bow-tools button[aria-selected=true] { background: var(--red); border-color: var(--glacial); box-shadow: 0 0 18px rgba(31, 92, 255, .6); }
.bow-tools button.struck { animation: bow-hit .55s ease-out; }
@keyframes bow-hit { 0% { box-shadow: 0 0 0 0 rgba(166, 219, 255, .9), 0 0 30px rgba(166, 219, 255, .9); } 100% { box-shadow: 0 0 0 14px rgba(166, 219, 255, 0), 0 0 18px rgba(31, 92, 255, .6); } }
.tools .tool-card { width: min(620px, 100%); margin: 1vh auto 0; }
@media (max-width: 760px) {
  .bow { width: min(400px, 100%); margin: 0; }
  /* em pé: o nome começa no ponto do arco e cresce para a direita; alvo de toque com 34 px de altura */
  .bow-tools button { translate: 0 -50%; font-size: 11px; padding: 11px 10px; }
  .bow-name { font-size: 10px; letter-spacing: .3em; }
  .tools .tool-card { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bow-tools button.struck { animation: none; } }

/* janelas: a área de leitura rola sozinha (roda, trackpad, toque, teclado); a página de trás fica parada */
html.pres-open { overflow: hidden; }
dialog.pres { display: none; flex-direction: column; }
dialog.pres[open] { display: flex; }
dialog.pres .pres-scroll { flex: 1 1 auto; min-height: 0; max-height: none; -webkit-overflow-scrolling: touch; scroll-padding-top: 56px; }
dialog.pres .pres-scroll:focus-visible { outline: 1px solid var(--glacial); outline-offset: -2px; }
dialog.pres .pres-scroll > :last-child { margin-bottom: 8px; }
/* VAKAR: o painel interativo é uma moldura própria; QORU: ícones e diagrama por camada */
.mec-panel { margin-top: 14px; padding: 12px; background: #020306; border: 1px solid #3a1a20; border-radius: 6px; }
.mec-panel .mec-tabs { margin-top: 0; }
.pres-feats li { position: relative; }
.qr-ic svg { width: 40px; height: 40px; fill: none; stroke: #4cd964; stroke-width: 2; stroke-linecap: round; margin-bottom: 10px; display: block; }
.qr-vis { margin-top: 14px; padding: 10px; border: 1px solid #1d2433; background: #04070d; }
.qr-vis svg { display: block; width: 100%; height: auto; }
.qr-vis rect { fill: #070b14; stroke: #2a3550; stroke-width: 1.5; }
.qr-vis text { font: 500 13px var(--mono); letter-spacing: .1em; fill: #c9d1e0; text-anchor: middle; }
.qr-vis g.on rect { fill: rgba(76, 217, 100, .14); stroke: #4cd964; }
.qr-vis g.on text { fill: #fff; }
.qr-vis .ar { fill: none; stroke: #4cd964; stroke-width: 1.6; }
/* Trabalhos: cartas menores e mais baixas; o título nunca fica coberto */
.roster-head { z-index: 30; }
.roster-head h2 { font-size: clamp(44px, 5.6vw, 96px); }
.card { top: 66%; width: clamp(128px, 12vw, 200px); margin-left: calc(clamp(128px, 12vw, 200px) / -2); }
.card p { font-size: 13px; }
@media (max-width: 760px) { .card { width: 33vw; margin-left: -16.5vw; top: 70%; } .card p { display: none; } }
/* o Sprenger fica atrás do título, sem cruzar o texto das fichas */
.apps .sprenger { left: auto; right: var(--gutter); top: 6vh; translate: none; width: min(34vw, 420px); opacity: .7; }
@media (max-width: 760px) { .apps .sprenger { width: 62vw; right: -14vw; top: 2vh; opacity: .45; } }

/* BFL Studio, tempo C: preto, branco e cinza. O logo oficial é o protagonista, inteiro e sem nada por cima;
   ao lado, o estúdio, os projetos públicos (imagens reais) e os links, discretos e longe do logo */
.mg-farewell {
  position: absolute; inset: 0; z-index: 4; background: #000; color: #f2f2f2;
  clip-path: inset(100% 0 0 0);
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 96px);
  padding: 92px var(--gutter) 6vh;
}
.fw-art { position: relative; justify-self: center; height: min(78vh, 100%); max-width: 100%; aspect-ratio: 806 / 1036; overflow: hidden; }
.fw-art img, .fw-art canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* o esboço foi desenhado em papel: invertido, vira traço claro sobre o mesmo preto do logo */
.fw-art canvas { filter: invert(1) grayscale(1); }
/* a arte oficial tem uma margem preta larga em volta do logo: amplia dentro da moldura (o fundo é o mesmo preto) */
.fw-art img, .fw-art canvas { transform: scale(1.45); }
.fw-col { display: grid; gap: clamp(16px, 2.4vh, 26px); max-width: 600px; }
.fw-title { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 6.4vw, 120px); line-height: .86; color: #fff; }
.fw-title .line:last-child span { color: #8c8c8c; }
.fw-narr { max-width: 46ch; font-family: var(--serif); font-style: italic; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.3; color: #cfcfcf; }
.fw-work, .fw-divs { list-style: none; }
.fw-work { display: grid; border-bottom: 1px solid #262626; }
.fw-work li { display: grid; grid-template-columns: clamp(96px, 10vw, 150px) 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid #262626; }
.fw-work img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.fw-work li:last-child img { object-position: 50% 30%; }
.fw-work b { display: block; font-family: var(--display); font-weight: 900; font-size: clamp(18px, 1.5vw, 24px); line-height: 1; color: #fff; }
.fw-work span { display: block; margin-top: 6px; font-size: 12px; color: #9a9a9a; }
.fw-divs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fw-divs li { display: grid; grid-template-columns: 34px 1fr; column-gap: 10px; align-items: center; align-content: start; }
.fw-divs img { grid-row: span 2; width: 34px; height: 34px; object-fit: contain; }
.fw-divs b { font-family: var(--display); font-weight: 900; font-size: 16px; line-height: 1; letter-spacing: .04em; }
.fw-divs span { font-size: 10.5px; line-height: 1.3; color: #8c8c8c; }
.fw-links { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.fw-links a { color: #bdbdbd; text-decoration: underline; text-decoration-color: #4a4a4a; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.fw-links a:hover, .fw-links a:focus-visible { color: #fff; text-decoration-color: #fff; outline: none; }
@media (max-width: 760px) {
  /* celular: o logo e o título lado a lado no topo; o resto em coluna, tudo numa tela */
  .mg-farewell { grid-template-columns: 38% 1fr; grid-template-rows: none; align-items: start; align-content: center; column-gap: 16px; row-gap: 18px; padding: 74px var(--gutter) 20px; }
  .fw-art { grid-row: 1; height: auto; width: 100%; justify-self: stretch; }
  .fw-col { display: contents; }
  .fw-title { grid-column: 2; grid-row: 1; align-self: center; font-size: clamp(40px, 12vw, 52px); }
  .fw-narr, .fw-work, .fw-divs, .fw-links { grid-column: 1 / -1; }
  .fw-narr { font-size: 15px; }
  .fw-work li { grid-template-columns: 84px 1fr; gap: 12px; padding: 9px 0; }
  .fw-work b { font-size: 17px; }
  .fw-divs { gap: 8px; }
  .fw-divs li { grid-template-columns: 1fr; row-gap: 6px; }
  .fw-divs img { grid-row: auto; width: 30px; height: 30px; }
  .fw-links { font-size: 10px; }
}
@media (max-width: 760px) and (max-height: 700px) { .fw-narr { display: none; } }

/* loader: só a estrela azul, desenhada pelo traço (pathLength 1) */
.loader-qz { width: min(46vh, 64vw); height: min(46vh, 64vw); opacity: 0; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(31, 92, 255, .16) 30%, transparent 64%); } /* halo pintado uma vez: o drop-shadow era refeito a cada quadro e derrubava a tela de 55 para 10 quadros sem placa de vídeo */
/* guia Quincy: emblema pequeno no canto e um balão curto; some na intro e com as janelas abertas */
.qguide { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
body.is-loading .qguide, html.pres-open .qguide { display: none; }
.qg-mark { pointer-events: auto; width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: rgba(4, 7, 13, .82); border: 1px solid #2a3550; border-radius: 50%; cursor: pointer; color: var(--glacial); }
.qg-mark svg { width: 26px; height: 26px; }
.qg-mark:hover, .qg-mark:focus-visible { border-color: var(--glacial); outline: none; box-shadow: 0 0 14px rgba(31, 92, 255, .6); }
.qg-bubble { position: relative; max-width: 300px; padding: 10px 13px 11px; background: rgba(4, 7, 13, .94); border: 1px solid #2a3550; border-left: 2px solid var(--glacial); font-size: 12.5px; line-height: 1.45; color: #dbe4f3; }
.qg-bubble::before { content: ""; position: absolute; left: -7px; bottom: 12px; width: 10px; height: 10px; background: inherit; border-left: 1px solid #2a3550; border-bottom: 1px solid #2a3550; rotate: 45deg; }
.qg-bubble b { display: block; margin-bottom: 3px; font: 500 9.5px var(--mono); letter-spacing: .26em; color: var(--glacial); }
@media (max-width: 760px) { .qguide { left: 10px; bottom: 10px; } .qg-bubble { max-width: calc(100vw - 80px); font-size: 12px; } .qg-mark { width: 36px; height: 36px; } }
/* laboratório: faixa de modo (o que esta estação pode e não pode) e, no celular, o terminal com a largura toda */
.k-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 7px 14px; border-bottom: 1px solid var(--k-line); background: #0b0f16; font: 500 10px var(--mono); letter-spacing: .18em; color: #7fa8ff; }
.k-status i { width: 7px; height: 7px; border-radius: 50%; background: #4cd964; box-shadow: 0 0 8px #4cd964; }
.k-status span { letter-spacing: .08em; color: #8b95a8; text-transform: lowercase; }
.k-status span::before { content: "/ "; color: #3a4560; }
@media (max-width: 760px) {
  .k-tree { display: none; } /* os arquivos continuam no terminal (ls, cat, comandos sugeridos) */
  .k-tabs { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .k-status { font-size: 9px; padding: 6px 10px; }
}
html.no-hero-guide .qguide { opacity: 0; visibility: hidden; }
.qguide { transition: opacity .3s, visibility .3s; }
.wipe-out { z-index: 20; }
/* Processo: o anel do Zeichen entre o título e a trilha, com o ícone e o número da etapa */
.process-vis { position: absolute; right: calc(var(--gutter) + 2vw); top: 14vh; width: clamp(150px, 24vh, 260px); aspect-ratio: 1; }
.process-vis svg { width: 100%; height: 100%; overflow: visible; }
.pv-track { fill: none; stroke: rgba(3, 5, 9, .1); stroke-width: 1.4; }
.pv-ring { fill: none; stroke: var(--red); stroke-width: 2.2; stroke-dasharray: 1; stroke-dashoffset: 1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.pv-star { color: rgba(3, 5, 9, .08); --qz-hub: transparent; --qz-hl: transparent; }
.pv-ic g { display: none; fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-ic g.on { display: inline; }
.pv-num { position: absolute; right: -6%; bottom: -4%; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vh, 54px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
@media (max-width: 760px) {
  /* no celular o meio da tela ficava vazio: o anel ocupa o espaço entre o título e a trilha */
  .process-vis { right: auto; left: 50%; translate: -50% 0; top: calc(72px + 150px); width: min(46vw, calc(52vh - 72px - 175px)); }
}
/* Sobre mim: a arte é vetor sem fundo próprio (a imagem antiga era um retângulo borrado e aparecia cortada) */
svg.frame-ink { width: auto; aspect-ratio: 3 / 4; mix-blend-mode: normal; -webkit-mask: none; mask: none; filter: drop-shadow(0 0 14px rgba(166, 219, 255, .35)); }
@media (max-width: 760px) { .frame svg.frame-ink { right: 2vw; height: 34vh; opacity: .9; } }
/* loader: legenda da voz embaixo da estrela e, se o navegador bloquear o som, o convite para entrar */
.loader-sub { position: absolute; left: 50%; top: calc(50% + min(23vh, 32vw) + 26px); translate: -50% 0; width: min(560px, 88vw); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.3; color: var(--paper); text-shadow: 0 0 18px rgba(31, 92, 255, .55); }
.loader-enter { position: absolute; left: 50%; top: calc(50% + min(23vh, 32vw) + 26px); translate: -50% 0; font: 500 11px var(--mono); letter-spacing: .3em; color: var(--glacial);
  background: none; border: 1px solid rgba(166, 219, 255, .5); padding: 12px 18px; cursor: pointer; }
.loader-enter:hover, .loader-enter:focus-visible { border-color: var(--glacial); box-shadow: 0 0 16px rgba(31, 92, 255, .6); outline: none; }
/* celular: a ficha fica só com objetivo, stack e estado, para caber inteira no cartão */
@media (max-width: 760px) {
  .case-dl div:nth-child(2), .case-dl div:nth-child(4) { display: none; }
  .panel.case, .panel.case:nth-child(even) { width: 80vw; height: auto; max-height: calc(100svh - 200px); margin-top: 70px; }
}
/* ícones dos links (Instagram e site) */
.ic { width: 1.25em; height: 1.25em; vertical-align: -0.28em; margin-right: .5em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.ic .dot { fill: currentColor; stroke: none; }
.fw-links a, .contact-row a { display: inline-flex; align-items: center; }

/* O ARQUEIRO: o jogo do rodapé */
.game { position: relative; z-index: 2; max-width: 980px; margin: 2vh 0 0; }
/* a entrada do jogo no rodapé: fechado até o JOGAR */
.game-entry { position: relative; z-index: 2; display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; max-width: 760px; margin: 4vh 0 0; padding: clamp(18px, 3vw, 32px); border: 1px solid rgba(255, 255, 255, .3); background: rgba(3, 5, 9, .35); }
.ge-bow { width: clamp(64px, 9vw, 110px); height: auto; color: var(--paper); filter: drop-shadow(0 0 16px rgba(166, 219, 255, .55)); }
.ge-title { font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 68px); line-height: .88; }
.ge-lead { margin: 10px 0 6px; max-width: 46ch; font-size: 14px; line-height: 1.45; color: #dbe4f3; }
.ge-prog { font: 10.5px var(--mono); letter-spacing: .06em; color: var(--glacial); }
.ge-play { margin-top: 16px; font: 600 13px var(--mono); letter-spacing: .3em; color: var(--ink); background: var(--paper); border: 0; padding: 15px 30px; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.ge-play:hover, .ge-play:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--glacial), 0 0 28px rgba(166, 219, 255, .7); transform: translateY(-1px); }
@media (max-width: 760px) { .mg-nomoon { letter-spacing: .01em; font-size: 11px; } .game-entry { grid-template-columns: 1fr; } .ge-bow { width: 56px; } .ge-play { width: 100%; } }
/* a janela do jogo: tela cheia, escura */
dialog.gm-dlg { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 56px 12px 12px; border: 0; background: #02050b; color: var(--paper); display: none; align-items: center; justify-content: center; overflow: auto; }
dialog.gm-dlg[open] { display: flex; }
dialog.gm-dlg::backdrop { background: #02050b; }
.gm-dlg .game { width: min(100%, (100dvh - 150px) * 16 / 9); max-width: 1280px; margin: 0; }
.gm-close { position: fixed; right: 12px; top: 12px; z-index: 3; font: 500 10px var(--mono); letter-spacing: .2em; color: var(--paper); background: #04070d; border: 1px solid #2a3550; padding: 10px 14px; cursor: pointer; }
.gm-close:hover, .gm-close:focus-visible { border-color: var(--glacial); outline: none; }
.gm-pad button small { display: block; margin-top: 4px; font-size: 8.5px; letter-spacing: .12em; opacity: .6; }
.gm-score { margin-top: 8px; font: 12px var(--mono); color: #cfd8e8; } .gm-score b { font-size: 20px; color: var(--paper); } .gm-score i { font-style: normal; color: var(--glacial); }
.gm-over button s { text-decoration: none; float: right; color: #8b95a8; }
.gm-screen { position: relative; aspect-ratio: 16 / 9; background: #02050b; border: 1px solid rgba(255, 255, 255, .25); box-shadow: 0 30px 80px rgba(3, 5, 9, .45); overflow: hidden; }
.gm-screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: manipulation; }
.gm-over { position: absolute; inset: 0; overflow: auto; padding: clamp(14px, 3vw, 30px); background: linear-gradient(90deg, rgba(2, 5, 11, .92), rgba(2, 5, 11, .62)); color: var(--paper); }
.gm-over[hidden] { display: none; }
.gm-over h3 { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 4.4vw, 56px); line-height: .9; }
.gm-lead { margin: 8px 0 14px; max-width: 52ch; font-size: 13px; line-height: 1.45; color: #cfd8e8; }
.gm-lead b { color: var(--glacial); }
.gm-cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; }
.gm-k { display: block; margin: 0 0 6px; font: 500 9.5px var(--mono); letter-spacing: .24em; color: var(--glacial); }
.gm-phases, .gm-outs { display: grid; gap: 5px; margin-bottom: 12px; }
.gm-outs { grid-template-columns: 1fr 1fr; }
.gm-over button { font: 500 11px var(--mono); letter-spacing: .08em; text-align: left; color: var(--paper); background: rgba(4, 7, 13, .8); border: 1px solid #2a3550; padding: 8px 10px; cursor: pointer; }
.gm-over button b { display: inline-block; width: 1.6em; color: var(--glacial); }
.gm-over button i { font-style: normal; color: #4cd964; }
.gm-over button:hover:not(:disabled), .gm-over button:focus-visible { border-color: var(--glacial); outline: none; }
.gm-over button:disabled { opacity: .35; cursor: not-allowed; }
.gm-over button[aria-pressed=true] { background: var(--red); border-color: var(--glacial); }
.gm-abil { list-style: none; display: grid; gap: 4px; font-size: 11px; color: #6c7890; }
.gm-abil li.on { color: #dbe4f3; }
.gm-abil b { color: inherit; font: 600 10px var(--mono); letter-spacing: .1em; }
.gm-abil li.on b { color: var(--glacial); }
.gm-help { margin-top: 10px; font: 10px var(--mono); color: #8b95a8; }
.gm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.gm-pad { display: none; gap: 10px; margin-top: 10px; }
.gm-pad button { flex: 1; font: 600 13px var(--mono); letter-spacing: .2em; color: var(--paper); background: rgba(3, 5, 9, .55); border: 1px solid rgba(255, 255, 255, .45); padding: 16px 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.gm-pad button:active { background: var(--ink); border-color: var(--glacial); }
@media (pointer: coarse), (max-width: 760px) { .gm-pad { display: flex; } }
@media (max-width: 760px) {
  .gm-screen { aspect-ratio: 4 / 3.6; }
  .gm-cols { grid-template-columns: 1fr; gap: 6px; }
  .gm-lead { font-size: 12px; margin-bottom: 10px; }
}
.contact .contact-zone { display: none; } /* o jogo ocupa o rodapé: sem as fotos soltas por cima */
/* VAKAR: o topo é a demonstração gravada das mecânicas desta janela */
video.pres-bg { object-fit: cover; }
.pres-demo { position: absolute; left: 14px; bottom: 10px; z-index: 2; font: 500 9px var(--mono); letter-spacing: .22em; color: rgba(255, 255, 255, .7); }
.pres-work-short { display: block; }
/* QORU: o celular que mostra cada camada */
.qr-phone { width: 210px; height: 380px; margin: 16px auto 0; padding: 14px 10px; border: 2px solid #3a4560; border-radius: 30px; background: #05080f; box-shadow: 0 20px 50px rgba(0, 0, 0, .5), inset 0 0 0 4px #0b0f18; }
.qr-screen { height: 100%; border-radius: 18px; background: #0d1220; padding: 12px 10px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; font: 11px var(--mono); color: #c9d1e0; }
.qs-bar { font: 600 11px var(--mono); letter-spacing: .2em; color: #4cd964; padding-bottom: 6px; border-bottom: 1px solid #1d2433; }
.qs-card { height: 62px; border-radius: 10px; background: linear-gradient(135deg, #16213a, #0f172a); border: 1px solid #22304e; }
.qs-card.short { height: 40px; }
.qs-nav { margin-top: auto; display: flex; justify-content: space-around; padding-top: 8px; border-top: 1px solid #1d2433; }
.qs-nav i { width: 18px; height: 18px; border-radius: 50%; background: #22304e; }
.qs-nav i:first-child { background: #4cd964; }
.qs-field { display: grid; gap: 4px; padding: 8px; border-radius: 8px; border: 1px solid #22304e; background: #0a0f1a; }
.qs-field span { font-size: 9px; color: #6c7890; }
.qs-type { min-height: 1.2em; color: #fff; font-weight: 500; }
.qs-type::after { content: "|"; color: #4cd964; animation: qs-blink 1s steps(1) infinite; }
@keyframes qs-blink { 50% { opacity: 0; } }
.qs-msg { min-height: 1.2em; font-size: 10px; }
.qs-msg.bad { color: #ff6b7a; } .qs-msg.ok { color: #4cd964; }
.qs-btn { padding: 10px; border-radius: 8px; text-align: center; background: #4cd964; color: #04140a; font-weight: 600; letter-spacing: .14em; }
.qs-rows, .qs-ship { list-style: none; display: grid; gap: 6px; }
.qs-rows li { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: #0a0f1a; border: 1px solid #1d2433; }
.qs-rows i { font-style: normal; color: #6c7890; } .qs-rows span { height: 6px; border-radius: 3px; background: #22304e; } .qs-rows b { font-weight: 500; color: #4cd964; font-size: 9px; }
.qs-ship li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: #0a0f1a; border: 1px solid #1d2433; text-transform: uppercase; letter-spacing: .14em; }
.qs-ship i { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #3a4560; }
.qs-ship li.ok i { background: #4cd964; border-color: #4cd964; }
.qs-url { margin-top: auto; text-align: center; color: #4cd964; }
/* o vídeo da VAKAR aparece inteiro (a imagem antiga era escurecida de propósito) */
.pres-vakar video.pres-bg { opacity: .95; filter: none; -webkit-mask: linear-gradient(#000 65%, transparent); mask: linear-gradient(#000 65%, transparent); }
@media (max-width: 760px) {
  .frame svg.frame-ink { top: 41%; bottom: auto; height: 24vh; }
  .pres-idx { padding-right: 100px; } /* o FECHAR fica no canto, sem cobrir o índice */
}

/* o som: a estrela no topo da página (absoluta, sai da tela com a rolagem), no lugar do antigo SOM */
.top-sound { position: absolute; top: 14px; right: var(--gutter); z-index: 85; color: var(--glacial); }
body.is-loading .top-sound { visibility: hidden; }
.top-sound .nav-sound { padding: 4px; }
.snd-qz { width: 34px; height: 34px; filter: drop-shadow(0 0 8px rgba(31, 92, 255, .8)); transform: scale(calc(.92 + var(--pulse, 0) * .16)); transition: transform .12s ease-out, opacity .2s; opacity: .5; }
.nav-sound.is-on .snd-qz { opacity: 1; }
.nav-sound:hover .snd-qz { opacity: 1; }
.top-sound .sound-panel { color: var(--paper); }

/* a entrada: o anel de luz que se abre do centro enquanto o loader some */
/* anel pequeno (40vmax) escalado 4× pela GPU: o de 160vmax era uma textura de 2300 px de lado e travava 1,4 s
   o quadro da entrada sem placa de vídeo; com will-change o navegador não redesenha ao escalar (fica só mais macio) */
.loader-ring { position: fixed; left: calc(50% - 20vmax); top: calc(50% - 20vmax); width: 40vmax; height: 40vmax; z-index: 201; pointer-events: none; opacity: 0; transform: scale(0);
  border: 1px solid var(--glacial); border-radius: 50%; box-shadow: 0 0 4px var(--red), inset 0 0 4px var(--red); will-change: transform, opacity; }
body.is-loading .loader { will-change: opacity; }
body:not(.is-loading) .loader-ring { display: none; }
.nav-slot { width: 42px; height: 42px; flex: none; }
@supports (height: 100lvh) { :root { --bar: calc(100lvh - 100dvh); } }

/* O Arqueiro: menu com o caminho das fases */
.gm-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.gm-over .gm-play { font: 700 12px var(--mono); letter-spacing: .24em; text-align: center; color: var(--ink); background: var(--paper); border: 0; padding: 12px 20px; }
.gm-over .gm-play:hover, .gm-over .gm-play:focus-visible { box-shadow: 0 0 0 2px var(--glacial), 0 0 22px rgba(166, 219, 255, .7); }
.gm-route { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 16px 0 14px; }
.gm-route::before { content: ""; position: absolute; left: 10%; right: 10%; top: 17px; height: 2px; background: linear-gradient(90deg, var(--glacial), #2a3550); }
.gm-over .gm-node { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0; background: none; border: 0; text-align: center; }
.gm-over .gm-node b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 700 13px var(--mono); color: var(--paper); background: #04070d; border: 2px solid #2a3550; }
.gm-node span { font: 500 9px/1.2 var(--mono); letter-spacing: .08em; color: #8b95a8; }
.gm-node s { text-decoration: none; font: 9px var(--mono); color: var(--glacial); }
.gm-node.done b { background: var(--red); border-color: var(--glacial); }
.gm-node.next b { border-color: var(--glacial); box-shadow: 0 0 0 4px rgba(166, 219, 255, .18), 0 0 18px rgba(31, 92, 255, .8); animation: gm-pulse 1.6s ease-in-out infinite; }
.gm-node.next span, .gm-node.done span { color: var(--paper); }
.gm-over .gm-node:hover:not(:disabled) b, .gm-over .gm-node:focus-visible b { border-color: var(--paper); }
@keyframes gm-pulse { 50% { box-shadow: 0 0 0 8px rgba(166, 219, 255, .05), 0 0 26px rgba(31, 92, 255, 1); } }
.gm-outs { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-over .gm-sw { display: flex; width: 44px; height: 26px; padding: 3px; gap: 2px; }
.gm-sw i { flex: 1; border: 1px solid rgba(255, 255, 255, .15); }
.gm-over .gm-sw[aria-pressed=true] { background: none; border-color: var(--paper); box-shadow: 0 0 0 1px var(--glacial); }
.gm-abil li { display: grid; gap: 1px; }
.gm-abil span { font-size: 10.5px; }
@media (prefers-reduced-motion: reduce) { .gm-node.next b { animation: none; } }
@media (max-width: 760px) { .gm-route::before { top: 15px; } .gm-over .gm-node b { width: 32px; height: 32px; } .gm-node span { font-size: 8px; } .gm-help { display: none; } }

/* ENTRETENIMENTO: a seção do jogo, antes do contato */
.fun { position: relative; background: var(--ink); color: var(--paper); padding: 16vh var(--gutter) 14vh; overflow: hidden; }
.fun .eyebrow { color: var(--glacial); }
.fun .game-entry { margin-top: 3vh; border-color: rgba(166, 219, 255, .3); background: rgba(31, 92, 255, .06); }
/* CONTATO: o Instagram pessoal em destaque */
.contact-ig { position: relative; z-index: 2; display: flex; width: fit-content; align-items: center; gap: .3em; margin-top: 3vh; font-family: var(--display); font-weight: 900; font-size: clamp(38px, 8vw, 120px); line-height: .95; color: var(--paper); text-decoration: none; }
.contact-ig .ic { width: .7em; height: .7em; margin-right: .1em; vertical-align: 0; stroke-width: 2.2; }
.contact-ig:hover, .contact-ig:focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; }
.contact-lead { position: relative; z-index: 2; margin-top: 14px; max-width: 46ch; font-size: 15px; line-height: 1.45; color: #e3ebf8; }

/* O Arqueiro: tela título e opções */
.gm-title { display: grid; align-content: center; min-height: 100%; }
.gm-sub { margin: 6px 0 18px; font: 11px var(--mono); letter-spacing: .14em; color: var(--glacial); }
.gm-main { display: grid; gap: 8px; width: min(300px, 100%); }
.gm-over .gm-main button { font: 700 13px var(--mono); letter-spacing: .26em; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.gm-over .gm-main button:first-child { color: var(--ink); background: var(--paper); border-color: var(--paper); }
.gm-main small { font: 9.5px var(--mono); letter-spacing: .08em; opacity: .7; }
.gm-over .gm-back { padding: 8px 12px; }
.gm-cfg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 14px; }
.gm-cfg .gm-k { margin-top: 4px; }
.gm-cfg .gm-row { margin-bottom: 12px; }
.gm-over .gm-opt[aria-pressed=true] { background: var(--red); border-color: var(--glacial); }
.gm-note { font-size: 11px; line-height: 1.5; color: #9aa4b6; margin-top: 6px; }
.gm-over .gm-ok { color: var(--ink); background: var(--paper); border-color: var(--paper); }
@media (max-width: 760px) { .gm-cfg { grid-template-columns: 1fr; gap: 4px; } .gm-over .gm-main button { padding: 12px 14px; } }

/* a vitrine do jogo: a demonstração rodando, com borda acesa e o JOGAR pulsando */
.fun .game-entry { grid-template-columns: minmax(300px, 1.25fr) 1fr; max-width: 1100px; gap: clamp(18px, 3vw, 44px); padding: clamp(14px, 2vw, 22px); box-shadow: 0 0 0 1px rgba(166, 219, 255, .25), 0 0 60px rgba(31, 92, 255, .25); animation: ge-glow 2.4s ease-in-out infinite alternate; }
@keyframes ge-glow { to { box-shadow: 0 0 0 1px rgba(166, 219, 255, .55), 0 0 90px rgba(31, 92, 255, .45); } }
.ge-demo { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid rgba(166, 219, 255, .5); background: #02050b; cursor: pointer; overflow: hidden; }
.ge-demo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ge-demo:focus-visible { outline: 2px solid var(--glacial); outline-offset: 3px; }
.ge-tag { display: inline-block; margin-bottom: 10px; font: 700 10px var(--mono); letter-spacing: .3em; color: var(--ink); background: var(--glacial); padding: 5px 9px; }
@media (max-width: 760px) { .fun .game-entry { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fun .game-entry { animation: none; } }

/* fim da voz: o dedo desliza para cima e a entrada (com a música) espera esse gesto */
.loader { touch-action: none; }
.loader-swipe { position: absolute; left: 50%; bottom: calc(5vh + env(safe-area-inset-bottom, 0px)); translate: -50% 0; display: grid; justify-items: center; gap: 12px;
  font: 500 11px var(--mono); letter-spacing: .32em; color: var(--glacial); text-align: center; pointer-events: none; }
.loader-swipe[hidden] { display: none; }
.ls-track { position: relative; width: 44px; height: 92px; }
.ls-track::before { content: ""; position: absolute; left: 50%; top: 4px; bottom: 30px; width: 2px; translate: -50% 0; background: linear-gradient(transparent, rgba(166, 219, 255, .7)); transform-origin: bottom; animation: ls-trail 1.7s cubic-bezier(.5, 0, .2, 1) infinite; }
.ls-track svg { position: absolute; left: 50%; bottom: 0; width: 34px; height: 46px; translate: -50% 0; fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(31, 92, 255, .9)); animation: ls-swipe 1.7s cubic-bezier(.5, 0, .2, 1) infinite; }
.ls-mouse { display: none; }
@keyframes ls-swipe { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(-44px); opacity: 1; } 100% { transform: translateY(-50px); opacity: 0; } }
@keyframes ls-trail { 0%, 15% { transform: scaleY(0); opacity: 0; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@media (pointer: fine) {
  .ls-hand { display: none; } .ls-mouse { display: block; }
  .ls-track::before { display: none; }
  /* (.ls-track .ls-mouse: o seletor do dedo, .ls-track svg, ganhava e o mouse inteiro subia) */
  .ls-track .ls-mouse { animation: none; bottom: 14px; height: 52px; }
  .ls-mouse .wheel { animation: ls-wheel 1.5s ease-in-out infinite; }
  .ls-mouse .chev { animation: ls-chev 1.5s ease-in-out infinite; }
}
@keyframes ls-wheel { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(8px); opacity: 0; } 100% { opacity: 0; } }
@keyframes ls-chev { 0%, 30% { transform: translateY(-3px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(4px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ls-track::before, .ls-track svg, .ls-mouse .wheel, .ls-mouse .chev { animation: none; } }

/* VAKAR: as mecânicas só pegam o dedo depois de DESVENDAR; ligadas, a janela não rola até DESCER */
.mec-stage:not(.is-on) { pointer-events: none; }
.mec-stage.is-on { touch-action: none; }
.mec-play, .mec-exit { pointer-events: auto; position: absolute; z-index: 5; font: 600 11px var(--mono); letter-spacing: .24em; color: var(--paper); cursor: pointer; }
.mec-play { left: 50%; top: 50%; translate: -50% -50%; padding: 14px 20px; background: rgba(3, 5, 9, .78); border: 1px solid rgba(166, 219, 255, .7); box-shadow: 0 0 22px rgba(31, 92, 255, .55); white-space: nowrap; }
.mec-stage:not(.is-on)::after { content: ""; position: absolute; inset: 0; z-index: 4; background: rgba(3, 5, 9, .35); pointer-events: none; }
.mec-stage.is-on .mec-play, .mec-stage:not(.is-on) .mec-exit { display: none; }
.mec-exit { right: 10px; top: 10px; padding: 10px 14px; background: rgba(3, 5, 9, .8); border: 1px solid rgba(255, 255, 255, .5); }
.pres-scroll.is-locked { overflow: hidden !important; touch-action: none; }

/* gráficos do castelo: cinco botões em grade no painel do som */
.sp-gfx { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid rgba(242, 239, 232, .2); }
.sp-gfx > span { font-size: 10px; letter-spacing: .24em; }
.sp-gfx div { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; }
.sp-gfx button { font: 500 9px var(--mono); letter-spacing: .12em; color: var(--paper); background: none; border: 1px solid rgba(242, 239, 232, .35); padding: 7px 4px; cursor: pointer; white-space: nowrap; }
.sp-gfx button[aria-pressed=true] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sp-gfx-now { font-size: 9px; letter-spacing: .14em; color: var(--glacial); min-height: 1em; }
/* menu do jogo (pedido: "menu embolado"): um painel só, no centro, com fundo firme; opções em linhas; letra maior no PC */
.gm-over { display: grid; align-content: safe center; padding-inline: max(clamp(14px, 3vw, 30px), (100% - 640px) / 2); background: rgba(2, 5, 11, .9); }
.gm-over > .gm-title { min-height: 0; }
.gm-cfg { grid-template-columns: none; gap: 0; margin-top: 12px; }
.gm-line { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid #1d2433; }
.gm-line .gm-k, .gm-cfg .gm-line .gm-row, .gm-line .gm-note { margin: 0; }
.gm-line .gm-outs { margin-bottom: 6px; }
@media (max-width: 760px) {
  .gm-line { grid-template-columns: 84px 1fr; gap: 4px 10px; padding: 7px 0; }
  .gm-over .gm-sw { width: 34px; height: 22px; }
  .gm-over .gm-cfg button { padding: 7px 9px; }
  .gm-cfg .gm-note { font-size: 10.5px; }
  .gm-node:not(.next) span { display: none; } /* no celular só o nome da próxima fase: os cinco se encavalavam */
  .gm-route { margin: 12px 0 10px; }
}
@media (min-width: 900px) {
  .gm-over button { font-size: 12.5px; padding: 10px 14px; }
  .gm-over .gm-main { width: min(360px, 100%); }
  .gm-over .gm-main button { font-size: 14px; padding: 16px 18px; }
  .gm-k { font-size: 11px; }
  .gm-sub { font-size: 12.5px; }
  .gm-note, .gm-abil span { font-size: 12.5px; }
  .gm-abil b { font-size: 11.5px; }
  .gm-node span { font-size: 10.5px; }
}
/* o relâmpago (pedido: "melhora o raio"): canal recortado de cima até o chão, com ramos, piscando por cima do
   feixe; uma descarga piloto antes de o feixe descer. Sem filtro: o brilho é um traço azul largo por baixo do branco */
.ms-zap { position: absolute; left: 50%; top: -4%; height: 82%; width: min(48vw, 620px); translate: -50% 0; overflow: visible; fill: none; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.ms-zap g { opacity: 0; will-change: opacity; }
.ms-zap path { stroke: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; }
.ms-zap path.zg { stroke: rgba(80, 150, 255, .55); stroke-width: 20; }
.ms-bolts { width: min(92vw, 1200px); height: 34vh; }
@media (max-width: 760px) { .ms-zap { width: 90vw; } }
@media (prefers-reduced-motion: reduce) { .ms-zap { display: none; } }