/* Ajustes de identidade para o nome completo. */
.hero-title {
  font-size: clamp(82px, 9.2vw, 134px);
  line-height: .76;
  max-width: 1080px;
}

@media (max-width: 800px) {
  .hero-title {
    font-size: 56px;
    line-height: .78;
  }
}

/* Fliperama em layout aberto */
.hero { height: 900px; }

.arcade-stage {
  position: absolute;
  z-index: 3;
  top: 720px;
  left: 50%;
  width: min(1240px, calc(100vw - 48px));
  transform: translateX(-50%);
}

.arcade-stage.reveal { transform: translate(-50%, 30px); }
.arcade-stage.reveal.visible { transform: translate(-50%, 0); }

.arcade-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 24px;
}

.arcade-copy > span {
  color: var(--acid);
  font-size: 9px;
  letter-spacing: .17em;
}

.arcade-copy > span b { color: #fff; margin-left: 8px; }

.arcade-copy h2 {
  margin: 10px 0 5px;
  font-size: 40px;
  letter-spacing: -.055em;
}

.arcade-copy p {
  margin: 0;
  color: #888;
  font-size: 12px;
}

.arcade-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.arcade-actions button {
  min-width: 110px;
  padding: 12px 18px;
  border-radius: 5px;
  background: #745cff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.arcade-stage > .game-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.arcade-stage > .game-picker button {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  min-height: 58px;
  padding: 10px 12px;
}

.arcade-stage > .game-picker button small {
  color: #555;
  font-size: 8px;
  letter-spacing: .1em;
}

.arcade-stage > .game-picker button.active small { color: #08080899; }

.arcade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 18px;
  align-items: stretch;
}

.arcade-layout .pixel-arena {
  min-height: 0;
  height: 560px;
  border: 1px solid #2d2d2d;
  border-radius: 14px;
}

.arcade-layout .game-scoreboard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0 20px 18px;
  border-left: 1px solid #2d2d2d;
  color: #777;
  font-size: 10px;
}

.arcade-layout .game-scoreboard strong {
  color: #eee;
  font-size: 11px;
}

.arcade-layout .game-scoreboard label {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #292929;
}

.arcade-layout .game-scoreboard label b { font-weight: 400; }

.arcade-help {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  color: #777;
  font-size: 10px;
}

.arcade-help kbd {
  padding: 5px 7px;
  border: 1px solid #444;
  border-radius: 4px;
  color: #eee;
  font: inherit;
}

.arcade-help small { margin-left: auto; color: #555; }

@media (max-width: 800px) {
  .hero { height: 760px; }
  .arcade-stage { top: 585px; width: calc(100vw - 24px); }
  .arcade-intro { align-items: center; margin-bottom: 14px; gap: 12px; }
  .arcade-copy h2 { margin-top: 6px; font-size: 27px; }
  .arcade-copy p { max-width: 220px; font-size: 9px; }
  .arcade-actions button { min-width: 76px; padding: 10px; font-size: 9px; }
  .arcade-stage > .game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .arcade-stage > .game-picker button {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    min-height: 42px;
    padding: 5px 7px;
    text-align: left;
    font-size: 8px;
  }
  .arcade-stage > .game-picker button:last-child { grid-column: 1 / -1; }
  .arcade-stage > .game-picker button i { margin: 0; }
  .arcade-layout { grid-template-columns: 1fr; gap: 8px; }
  .arcade-layout .pixel-arena { height: 390px; min-height: 390px; border-radius: 9px; }
  .arcade-layout .game-scoreboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 12px;
    padding: 10px 0 0;
    border-left: 0;
    font-size: 8px;
  }
  .arcade-layout .game-scoreboard > strong { grid-column: 1 / -1; }
  .arcade-layout .game-scoreboard label { padding-bottom: 6px; }
  .arcade-layout .game-scoreboard .score-meter { display: none; }
  .arcade-help { padding-top: 10px; font-size: 8px; }
  .arcade-help small { display: none; }
}

/* Fliperama */
.studio-window.pixel-game {
  transform: translateX(-50%) !important;
}

.pixel-game .window-body {
  grid-template-columns: 190px 1fr 210px;
}

.game-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #555;
  box-shadow: 0 0 0 transparent;
  transition: .25s ease;
}

.game-status-dot.live {
  background: var(--acid);
  box-shadow: 0 0 14px var(--acid);
  animation: game-pulse 1s ease-in-out infinite;
}

.game-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.game-options > strong {
  color: #fff;
  font-size: 17px;
  line-height: 1.05;
}

.game-options > p {
  margin: 0 0 12px;
  line-height: 1.45;
  color: #858585;
}

.option-label {
  color: #555;
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.game-options .difficulty-picker {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
}

.game-options .game-picker {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
}

.game-picker button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid #2d2d2d;
  border-radius: 5px;
  background: #151515;
  color: #888;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.game-picker button i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #383838;
  border-radius: 3px;
  color: #ddd;
  font-style: normal;
  font-size: 12px;
}

.game-picker button:hover {
  color: #fff;
  border-color: #555;
  transform: translateX(2px);
}

.game-picker button.active {
  color: #080808;
  border-color: var(--acid);
  background: var(--acid);
}

.game-picker button.active i {
  color: #080808;
  border-color: #08080855;
}

.difficulty-picker button {
  padding: 9px 10px;
  border: 1px solid #2d2d2d;
  border-radius: 4px;
  background: #151515;
  color: #777;
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.difficulty-picker button:hover,
.difficulty-picker button.active {
  color: #0a0a0a;
  border-color: var(--acid);
  background: var(--acid);
}

.difficulty-picker button:disabled {
  cursor: not-allowed;
  opacity: .45;
}

.game-options .game-tip {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 16px;
  border-top: 1px solid #292929;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  gap: 7px;
}

.game-tip kbd {
  width: max-content;
  padding: 4px 6px;
  border: 1px solid #444;
  border-radius: 3px;
  color: #ddd;
  font: inherit;
  font-size: 8px;
}

.pixel-arena {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: radial-gradient(circle at 50% 50%, #171717 0, #0a0a0a 72%);
  isolation: isolate;
  touch-action: manipulation;
}

.arcade-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.arcade-canvas:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: -3px;
}

.arcade-touch {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 12px;
  display: none;
  grid-template-columns: repeat(4, 38px) 48px;
  gap: 5px;
  transform: translateX(-50%);
}

.arcade-touch button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #ffffff42;
  border-radius: 6px;
  background: #0d0d0dcc;
  color: #fff;
  font-size: 16px;
  touch-action: none;
  user-select: none;
}

.arcade-touch .arcade-fire {
  width: 48px;
  color: var(--acid);
  border-color: #d7ff4570;
}

.arena-grid {
  position: absolute;
  inset: 0;
  opacity: .4;
  background-image: linear-gradient(#252525 1px, transparent 1px), linear-gradient(90deg, #252525 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at center, #000, transparent 82%);
}

.arena-hud {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  letter-spacing: .13em;
  color: #555;
}

.arena-hud b {
  color: #fff;
  margin-left: 5px;
}

.pixel-target {
  --target-size: 48px;
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: var(--target-size);
  height: var(--target-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--acid);
  box-shadow: 0 0 8px #d7ff45, 0 0 32px #d7ff4588, inset 0 0 0 8px #fff4;
  transform: translate(-50%, -50%) scale(0);
  cursor: crosshair;
  opacity: 0;
  transition: left .1s var(--ease), top .1s var(--ease), transform .12s var(--ease), opacity .1s;
}

.pixel-target::before,
.pixel-target::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #090909;
}

.pixel-target::before { width: 48%; height: 2px; }
.pixel-target::after { width: 2px; height: 48%; }

.pixel-target.active {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: target-breathe .7s ease-in-out infinite alternate;
}

.game-overlay {
  position: absolute;
  z-index: 10;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 35px;
  text-align: center;
  background: radial-gradient(circle at center, #121212dd, #080808f4 70%);
  transition: opacity .35s ease, visibility .35s ease;
}

.game-overlay.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.game-overlay > span {
  color: var(--acid);
  font-size: 8px;
  letter-spacing: .2em;
}

.game-overlay h2 {
  margin: 16px 0 10px;
  font-size: clamp(32px, 4vw, 55px);
  line-height: .92;
  letter-spacing: -.06em;
}

.game-overlay p {
  max-width: 350px;
  margin: 0 0 22px;
  color: #858585;
  font-size: 12px;
}

.game-overlay button {
  padding: 12px 15px;
  border-radius: 4px;
  background: #f4f4ef;
  color: #080808;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.game-overlay button i { margin-left: 18px; font-style: normal; }

.game-scoreboard label span {
  color: #f1f1ed;
  font-variant-numeric: tabular-nums;
}

.score-meter {
  height: 4px;
  margin-top: -8px;
  overflow: hidden;
  border-radius: 10px;
  background: #292929;
}

.game-scoreboard .score-meter {
  display: block;
  margin-bottom: 0;
}

.score-meter span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--acid);
  box-shadow: 0 0 10px var(--acid);
  transition: width .2s ease;
}

.pixel-particle {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--particle-color, var(--acid));
  pointer-events: none;
  animation: particle-burst .55s ease-out forwards;
}

.combo-pop {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -.05em;
  opacity: 0;
  pointer-events: none;
}

.combo-pop.show { animation: combo-rise .55s var(--ease); }
.sr-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

@keyframes game-pulse { 50% { opacity: .35; } }
@keyframes target-breathe { to { transform: translate(-50%, -50%) scale(1.1); } }
@keyframes particle-burst { to { transform: translate(var(--dx), var(--dy)) rotate(180deg) scale(0); opacity: 0; } }
@keyframes combo-rise { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -55px) scale(1.15); } }

@media (max-width: 800px) {
  .pixel-game .window-body { grid-template-columns: 78px 1fr; }
  .game-options { padding: 9px !important; gap: 8px; }
  .game-options > div:first-child, .game-options > p, .option-label, .game-tip { display: none; }
  .game-options > strong { font-size: 10px; }
  .game-picker { gap: 4px; }
  .game-picker button {
    grid-template-columns: 1fr;
    min-height: 42px;
    padding: 5px 2px;
    text-align: center;
    font-size: 7px;
  }
  .game-picker button i { margin: 0 auto; width: 20px; height: 20px; font-size: 10px; }
  .game-picker button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .difficulty-picker button { padding: 7px 4px; font-size: 7px; text-align: center; }
  .pixel-arena { min-height: 362px; }
  .arcade-touch { display: grid; }
  .arena-hud { top: 10px; left: 10px; right: 10px; }
  .game-overlay { padding: 14px; }
  .game-overlay h2 { font-size: 27px; }
  .game-overlay p { font-size: 9px; margin-bottom: 13px; }
  .game-overlay button { padding: 9px; font-size: 8px; }
  .pixel-target { --target-size: 44px; }
}

/* Canais de contato */
.contact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contact-card.social-card,
.contact-card.social-card.email {
  --social-color: #888;
  grid-row: auto;
  height: 320px;
  background: #101010;
  isolation: isolate;
}

.social-card.instagram { --social-color: #d94cff; }
.social-card.email { --social-color: #7d5cff; }
.social-card.tiktok { --social-color: #25f4ee; }
.social-card.whatsapp { --social-color: #25d366; }

.social-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  left: 50%;
  top: 48%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--social-color) 52%, transparent), transparent 68%);
  filter: blur(20px);
  opacity: .28;
  transform: translate(-50%, -50%) scale(.8);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}

.social-card:hover::before {
  opacity: .65;
  transform: translate(-50%, -50%) scale(1.2);
}

.social-card .social-logo {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
  color: #f8f8f4;
  transform: translate(-50%, -50%);
  transition: transform .45s var(--ease), color .3s ease;
}

.social-card:hover .social-logo {
  color: var(--social-color);
  transform: translate(-50%, -50%) scale(1.12) rotate(-4deg);
}

.social-logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.social-logo svg .solid {
  fill: currentColor;
  stroke: none;
}

.social-card strong {
  max-width: calc(100% - 50px);
  overflow-wrap: anywhere;
}

.social-card i {
  transition: transform .3s var(--ease);
}

.social-card:hover i {
  transform: translate(4px, -4px);
}

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .contact-card.social-card,
  .contact-grid .contact-card.social-card.email,
  .contact-grid .contact-card.social-card:last-child {
    grid-column: auto;
    height: 220px;
  }
  .social-card .social-logo { width: 68px; height: 68px; }
}

/* Assinatura cursiva */
.signature {
  font-family: "Mrs Saint Delafield", "Segoe Script", cursive;
  font-style: normal;
  font-size: clamp(92px, 10vw, 142px);
  font-weight: 400;
  line-height: .8;
  letter-spacing: .025em;
  transform: rotate(-7deg);
  text-shadow: 0 0 28px #ffffff12;
}

.signature::after {
  width: 115%;
  margin-left: -8%;
  margin-top: 7px;
  background: linear-gradient(90deg, transparent, #aaa 18%, #777 75%, transparent);
  transform: rotate(-4deg);
}

@media (max-width: 800px) {
  .signature {
    font-size: 66px;
    white-space: nowrap;
    transform: rotate(-6deg);
  }
  .signature::after {
    width: 108%;
    margin-left: -4%;
  }
}

/* Galeria de memórias */
.memory-gallery {
  padding-top: 70px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 265px;
  gap: 12px;
}

.gallery-item {
  position: relative;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2b2b2b;
  border-radius: 18px;
  background: #111;
  color: #fff;
  cursor: zoom-in;
  text-align: left;
  isolation: isolate;
}

.gallery-item.gallery-wide { grid-column: span 2; }
.gallery-item.gallery-tall { grid-row: span 2; }
.gallery-item.gallery-portrait { grid-row: span 2; }

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, transparent 48%, #000c 100%);
  transition: background .45s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.82) contrast(1.04);
  transition: transform .8s var(--ease), filter .45s ease;
}

.gallery-item.gallery-portrait img { object-position: 48% center; }
.gallery-item.gallery-tall img { object-position: center 38%; }

.gallery-item > span {
  position: absolute;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  transform: translateY(4px);
  transition: transform .4s var(--ease);
}

.gallery-item b {
  font-size: 17px;
  letter-spacing: -.025em;
}

.gallery-item small {
  color: #aaa;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.055);
  filter: saturate(1) contrast(1.02);
}

.gallery-item:hover > span,
.gallery-item:focus-visible > span {
  transform: none;
}

.gallery-item:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
}

.gallery-lightbox {
  width: min(1120px, calc(100vw - 36px));
  height: min(820px, calc(100vh - 36px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #383838;
  border-radius: 18px;
  background: #080808;
  color: #fff;
}

.gallery-lightbox::backdrop {
  background: #000e;
  backdrop-filter: blur(16px);
}

.gallery-lightbox figure {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 28px 74px 22px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 16px;
}

.gallery-lightbox figure img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  border-radius: 9px;
  background: #0d0d0d;
}

.gallery-lightbox figcaption {
  display: flex;
  justify-content: space-between;
  color: #ddd;
  font-size: 14px;
}

.gallery-lightbox figcaption small {
  color: #777;
  font-size: 10px;
  letter-spacing: .13em;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid #454545;
  border-radius: 50%;
  background: #111d;
  color: #fff;
  cursor: pointer;
  transition: .25s ease;
}

.lightbox-close {
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  font-size: 25px;
}

.lightbox-nav {
  top: 50%;
  width: 42px;
  height: 42px;
  transform: translateY(-50%);
}

.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-close:hover,
.lightbox-nav:hover {
  border-color: #fff;
  background: #fff;
  color: #000;
}

@media (max-width: 800px) {
  .memory-gallery { padding-top: 30px; }
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 180px;
    gap: 8px;
  }
  .gallery-item { border-radius: 12px; }
  .gallery-item.gallery-wide { grid-column: span 2; }
  .gallery-item.gallery-portrait { grid-row: span 2; }
  .gallery-item.gallery-tall { grid-row: span 2; }
  .gallery-item > span { left: 12px; right: 12px; bottom: 11px; }
  .gallery-item b { font-size: 13px; }
  .gallery-lightbox figure { padding: 58px 15px 20px; }
  .gallery-lightbox figure img { border-radius: 5px; }
  .lightbox-nav { top: auto; bottom: 13px; transform: none; }
  .lightbox-prev { left: 50%; margin-left: -52px; }
  .lightbox-next { right: 50%; margin-right: -52px; }
  .gallery-lightbox figcaption { padding-bottom: 54px; }
}

/* Biografia */
.about {
  padding-top: 125px;
}

.about-card {
  position: relative;
  min-height: 570px;
  padding: 42px;
  overflow: hidden;
  border: 1px solid #303030;
  border-radius: 22px;
  background:
    radial-gradient(circle at 85% 18%, #d7ff4518, transparent 27%),
    linear-gradient(135deg, #151515, #0b0b0b 68%);
}

.about-card::before,
.about-card::after {
  content: "";
  position: absolute;
  border: 1px solid #ffffff0e;
  border-radius: 50%;
  pointer-events: none;
}

.about-card::before {
  width: 540px;
  height: 540px;
  right: -180px;
  top: -270px;
}

.about-card::after {
  width: 340px;
  height: 340px;
  right: -80px;
  top: -170px;
}

.about-route {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 24px;
  border-bottom: 1px solid #303030;
  scrollbar-width: none;
}

.about-route::-webkit-scrollbar { display: none; }

.about-route span {
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid #343434;
  border-radius: 999px;
  color: #aaa;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.about-route i {
  flex: 0 0 auto;
  color: #555;
  font-style: normal;
}

.about-route .current-city {
  border-color: var(--acid);
  background: var(--acid);
  color: #090909;
}

.about-copy {
  max-width: 790px;
  margin-top: 82px;
}

.about-kicker {
  color: var(--acid);
  font-size: 9px;
  letter-spacing: .18em;
}

.about-copy p {
  margin: 20px 0 0;
  color: #ddd;
  font-size: clamp(25px, 3.1vw, 43px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.about-copy p + p {
  max-width: 700px;
  color: #8d8d8d;
  font-size: clamp(17px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.025em;
}

.about-stamp {
  position: absolute;
  right: 38px;
  bottom: 38px;
  width: 118px;
  height: 118px;
  display: grid;
  place-content: center;
  gap: 5px;
  border: 1px solid #4a4a4a;
  border-radius: 50%;
  text-align: center;
  transform: rotate(8deg);
}

.about-stamp b { color: #fff; font-size: 31px; letter-spacing: -.07em; }
.about-stamp span { color: #777; font-size: 7px; letter-spacing: .14em; }

@media (max-width: 800px) {
  .about { padding-top: 65px; }
  .about-card { min-height: 590px; padding: 22px 18px; border-radius: 15px; }
  .about-route { gap: 6px; margin-right: -18px; padding-bottom: 18px; }
  .about-route span { padding: 6px 8px; font-size: 7px; }
  .about-copy { margin-top: 48px; }
  .about-copy p { font-size: 25px; }
  .about-copy p + p { font-size: 18px; }
  .about-stamp { right: 18px; bottom: 18px; width: 86px; height: 86px; }
  .about-stamp b { font-size: 24px; }
}

/* Navegação imersiva e sistema de movimento */
body {
  --pointer-x: 50vw;
  --pointer-y: 50vh;
}

.site-spotlight {
  position: fixed;
  z-index: 1;
  left: var(--pointer-x);
  top: var(--pointer-y);
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, #d7ff450a, transparent 68%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.site-header {
  transition: height .45s var(--ease), background .45s ease, transform .45s var(--ease);
}

.site-header.compact {
  height: 58px;
  background: #0b0b0be8;
}

.site-header.hidden-nav { transform: translateY(-110%); }

.desktop-nav {
  gap: 5px;
  padding: 5px;
  border: 1px solid #ffffff0e;
  border-radius: 999px;
  background: #ffffff05;
}

.desktop-nav a {
  position: relative;
  padding: 8px 14px;
  overflow: hidden;
  border-radius: 999px;
}

.desktop-nav a::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--acid);
  transform: scale(.25);
  opacity: 0;
  border-radius: inherit;
  transition: transform .45s var(--ease), opacity .25s ease;
}

.desktop-nav a.active { color: #090909; }
.desktop-nav a.active::before { transform: scale(1); opacity: 1; }

.nav-explore {
  position: absolute;
  right: max(32px, calc((100% - 1120px)/2));
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 7px 8px 7px 14px;
  border: 1px solid #3a3a3a;
  border-radius: 999px;
  background: #141414;
  color: #ddd;
  cursor: pointer;
}

.nav-explore span { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.nav-explore i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #eee; color: #080808; font-style: normal; font-size: 17px; transition: transform .5s var(--ease); }
.nav-explore:hover i { transform: rotate(180deg); }

.section-rail {
  position: fixed;
  z-index: 72;
  right: 17px;
  top: 50%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  transform: translateY(-50%);
}

.section-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #777;
}

.section-rail a span {
  padding: 5px 8px;
  border-radius: 4px;
  background: #0b0b0bd9;
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateX(8px);
  transition: .28s var(--ease);
}

.section-rail a i {
  width: 6px;
  height: 6px;
  border: 1px solid #777;
  border-radius: 50%;
  transition: .3s var(--ease);
}

.section-rail a:hover span,
.section-rail a.active span { opacity: 1; transform: none; }
.section-rail a.active { color: var(--acid); }
.section-rail a.active i { height: 24px; border-radius: 8px; border-color: var(--acid); background: var(--acid); box-shadow: 0 0 14px #d7ff4560; }

.chapter-indicator {
  position: fixed;
  z-index: 60;
  left: 22px;
  bottom: 20px;
  display: flex;
  align-items: end;
  gap: 9px;
  pointer-events: none;
  mix-blend-mode: difference;
}

.chapter-indicator b { font-size: 32px; line-height: .8; letter-spacing: -.08em; }
.chapter-indicator span { color: #aaa; font-size: 7px; letter-spacing: .16em; }

.experience-menu {
  position: fixed;
  z-index: 125;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 28px max(32px, calc((100vw - 1160px)/2));
  overflow: hidden;
  background: #090909f8;
  backdrop-filter: blur(26px);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease), visibility .8s;
}

.experience-menu.open { clip-path: inset(0); visibility: visible; }
.experience-menu::before { content: ""; position: absolute; inset: 0; opacity: .32; background-image: linear-gradient(#222 1px, transparent 1px), linear-gradient(90deg, #222 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(circle at 60% 45%, #000, transparent 72%); }
.experience-menu header,.experience-menu footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; color: #777; font-size: 9px; letter-spacing: .15em; }
.experience-menu footer { min-height: 0; padding: 0; flex-direction: row; gap: 0; }
.experience-menu header button { display: flex; align-items: center; gap: 12px; padding: 5px 5px 5px 13px; border: 1px solid #3b3b3b; border-radius: 999px; background: #111; color: #ddd; cursor: pointer; }
.experience-menu header button i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #090909; font-style: normal; font-size: 20px; }
.experience-menu nav { position: relative; z-index: 2; align-self: center; width: min(950px, 100%); }
.experience-menu nav a { display: grid; grid-template-columns: 55px 1fr auto; align-items: center; min-height: 82px; border-bottom: 1px solid #303030; transition: padding .45s var(--ease), color .3s ease; }
.experience-menu nav a:first-child { border-top: 1px solid #303030; }
.experience-menu nav a small { color: #5f5f5f; font-size: 9px; }
.experience-menu nav a strong { font-size: clamp(40px, 6vw, 76px); line-height: .9; letter-spacing: -.065em; font-weight: 500; transition: transform .5s var(--ease); }
.experience-menu nav a span { color: #777; font-size: 10px; opacity: 0; transform: translateX(-15px); transition: .4s var(--ease); }
.experience-menu nav a:hover { padding-left: 18px; color: var(--acid); }
.experience-menu nav a:hover strong { transform: skewX(-8deg); }
.experience-menu nav a:hover span { opacity: 1; transform: none; }
.experience-menu nav a[data-page-link="JOGOS"] { color: var(--acid); }
.experience-menu nav a[data-page-link="JOGOS"] small { color: var(--acid); }
.desktop-nav .games-nav-link { color: var(--acid); }
.experience-orbit { position: absolute; border: 1px solid #ffffff12; border-radius: 50%; pointer-events: none; animation: experience-float 12s ease-in-out infinite alternate; }
.orbit-one { width: 650px; height: 650px; right: -160px; top: -260px; }
.orbit-two { width: 370px; height: 370px; left: -100px; bottom: -180px; animation-delay: -5s; }

.nav-transition {
  position: fixed;
  z-index: 160;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  pointer-events: none;
  visibility: hidden;
}

.nav-transition .transition-panel { background: var(--acid); transform: translateY(101%); transition: transform .55s var(--ease); }
.nav-transition .transition-panel:nth-child(2) { transition-delay: .06s; background: #c9ed42; }
.nav-transition .transition-panel:nth-child(3) { transition-delay: .12s; background: #bde13b; }
.nav-transition > span { position: absolute; z-index: 2; left: 50%; top: 50%; color: #090909; font-size: clamp(36px, 8vw, 104px); font-weight: 700; letter-spacing: -.07em; transform: translate(-50%, -35%) scale(.85); opacity: 0; transition: .35s .22s var(--ease); }
.nav-transition.entering { visibility: visible; }
.nav-transition.entering .transition-panel { transform: none; }
.nav-transition.entering > span { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.nav-transition.leaving .transition-panel { transform: translateY(-101%); }
.nav-transition.leaving > span { opacity: 0; transform: translate(-50%, -65%) scale(1.1); }

.cursor-dot,
.cursor-ring {
  position: fixed;
  z-index: 210;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}
.cursor-dot { width: 6px; height: 6px; background: var(--acid); transform: translate(-50%, -50%); box-shadow: 0 0 12px var(--acid); }
.cursor-ring { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid #ffffff80; transform: translate(-50%, -50%); transition: width .25s var(--ease), height .25s var(--ease), background .25s ease, border-color .25s ease; }
.cursor-ring span { color: #090909; font-size: 7px; font-weight: 700; letter-spacing: .08em; opacity: 0; }
body.cursor-ready .cursor-dot,body.cursor-ready .cursor-ring { opacity: 1; }
body.cursor-active .cursor-ring { width: 70px; height: 70px; border-color: var(--acid); background: var(--acid); }
body.cursor-active .cursor-ring span { opacity: 1; }

[data-tilt] { transform-style: preserve-3d; will-change: transform; transition: transform .45s var(--ease); }
.motion-word { display: inline-block; opacity: 0; transform: translateY(1.1em) rotate(3deg); transition: opacity .65s ease, transform .75s var(--ease); transition-delay: calc(var(--word-index) * 35ms); }
.motion-ready .motion-word { opacity: 1; transform: none; }
.section-heading::after { content: ""; position: absolute; left: 0; top: 0; width: 0; height: 4px; background: var(--acid); transition: width 1.1s var(--ease); }
.section-heading.motion-ready::after { width: 100%; }

@keyframes experience-float { to { transform: translate(35px, 25px) rotate(18deg); } }

@media (pointer: fine) {
  body,a,button { cursor: none; }
}

@media (max-width: 800px) {
  .nav-explore,.section-rail,.chapter-indicator,.cursor-dot,.cursor-ring,.site-spotlight { display: none; }
  .experience-menu { padding: 20px 18px; }
  .experience-menu nav a { grid-template-columns: 34px 1fr; min-height: 78px; }
  .experience-menu nav a strong { font-size: 42px; }
  .experience-menu nav a span { display: none; }
  .experience-menu footer { font-size: 7px; }
  .mobile-menu { background: radial-gradient(circle at 80% 20%, #d7ff4515, transparent 35%), #0b0b0b; }
  .mobile-menu nav a { overflow: hidden; transition: padding .35s var(--ease), color .25s; }
  .mobile-menu nav a { opacity: 0; transform: translateY(28px); }
  .mobile-menu.open nav a { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .65s var(--ease), padding .35s var(--ease), color .25s; }
  .mobile-menu.open nav a:nth-child(1) { transition-delay: .14s; }
  .mobile-menu.open nav a:nth-child(2) { transition-delay: .2s; }
  .mobile-menu.open nav a:nth-child(3) { transition-delay: .26s; }
  .mobile-menu.open nav a:nth-child(4) { transition-delay: .32s; }
  .mobile-menu nav a:hover { padding-left: 10px; color: var(--acid); }
  .nav-transition > span { max-width: 85vw; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-transition { display: none; }
  .experience-orbit,.site-spotlight,.cursor-dot,.cursor-ring { display: none; }
  .motion-word { opacity: 1; transform: none; }
}

/* Laboratório criativo */
.creative-lab { padding-top: 170px; }
.creative-lab .section-heading h2 em { color: var(--acid); font-family: "Instrument Serif", serif; font-weight: 400; }
.lab-console {
  --lab-x: 0;
  --lab-y: 0;
  --lab-duration: 7s;
  overflow: hidden;
  border: 1px solid #343434;
  border-radius: 18px;
  background: #0c0d0c;
  box-shadow: 0 45px 120px #0009;
}
.lab-topbar {
  height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 17px;
  border-bottom: 1px solid #292a29;
  color: #8a8b87;
  font-size: 8px;
  letter-spacing: .16em;
}
.lab-lights { display: flex; gap: 7px; }
.lab-lights i { width: 8px; height: 8px; border-radius: 50%; background: #3b3d3a; }
.lab-live { justify-self: end; display: flex; align-items: center; gap: 7px; color: #b4b5b1; }
.lab-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 11px var(--acid); animation: lab-pulse 1.5s ease-in-out infinite; }
.lab-workspace { display: grid; grid-template-columns: 220px 1fr; min-height: 610px; }
.lab-selector { display: flex; flex-direction: column; padding: 25px 18px; border-right: 1px solid #292a29; }
.lab-selector > span { margin-bottom: 30px; color: #62635f; font-size: 8px; letter-spacing: .17em; }
.lab-selector button {
  position: relative;
  display: grid;
  grid-template-columns: 29px 1fr auto;
  align-items: center;
  width: 100%;
  padding: 16px 7px;
  border-bottom: 1px solid #292a29;
  border-radius: 0;
  background: transparent;
  color: #747570;
  text-align: left;
  transition: color .3s ease, padding .4s var(--ease), background .3s ease;
}
.lab-selector button:first-of-type { border-top: 1px solid #292a29; }
.lab-selector button small { font-size: 8px; }
.lab-selector button b { font-size: 12px; font-weight: 500; }
.lab-selector button i { opacity: 0; font-style: normal; transform: translateX(-8px); transition: .35s var(--ease); }
.lab-selector button:hover { color: #e8e9e4; padding-left: 12px; }
.lab-selector button.active { color: #090a09; background: var(--acid); padding-inline: 12px; }
.lab-selector button.active i { opacity: 1; transform: none; }
.lab-selector > p { margin: auto 5px 0; color: #686965; font-size: 9px; line-height: 1.55; }
.lab-canvas {
  position: relative;
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  background: #0a0b0a;
  touch-action: none;
}
.lab-canvas::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
  border: 1px solid #ffffff08;
  box-shadow: inset 0 0 100px #0008;
}
.lab-grid {
  position: absolute;
  inset: 0;
  opacity: .62;
  background-image: linear-gradient(#1d241e 1px, transparent 1px), linear-gradient(90deg, #1d241e 1px, transparent 1px);
  background-size: 46px 46px;
  transform: translate(calc(var(--lab-x) * -6px), calc(var(--lab-y) * -6px)) scale(1.05);
  transition: transform .18s ease-out;
  mask-image: radial-gradient(circle at calc(50% + var(--lab-x) * 18%), calc(50% + var(--lab-y) * 18%), #000, transparent 88%);
}
.lab-scene { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: scale(.94); filter: blur(10px); transition: opacity .55s ease, transform .65s var(--ease), filter .5s ease, visibility .55s; }
[data-lab-mode="type"] [data-lab-scene="type"],
[data-lab-mode="particles"] [data-lab-scene="particles"],
[data-lab-mode="color"] [data-lab-scene="color"] { opacity: 1; visibility: visible; transform: none; filter: none; }
.lab-scene > small { position: absolute; left: 24px; bottom: 22px; color: #777b74; font-size: 8px; letter-spacing: .17em; }
.lab-coordinate { position: absolute; right: 24px; top: 22px; color: #687069; font-size: 8px; letter-spacing: .12em; }
.lab-word-stack { position: relative; width: 100%; height: 250px; display: grid; place-items: center; transform: translate(calc(var(--lab-x) * 28px), calc(var(--lab-y) * 24px)) rotate(calc(var(--lab-x) * 2deg)); transition: transform .12s ease-out; }
.lab-word-stack strong { position: absolute; max-width: 90%; overflow: hidden; color: #f2f3ed; font-size: clamp(58px, 9.5vw, 138px); line-height: .78; letter-spacing: -.09em; white-space: nowrap; transform: translate(calc(var(--lab-x) * 10px), calc(var(--lab-y) * 10px)); }
.lab-word-stack strong:nth-child(2) { color: #7961ff; mix-blend-mode: screen; transform: translate(calc(-18px + var(--lab-x) * -28px), calc(23px + var(--lab-y) * 20px)) skewX(calc(var(--lab-y) * -7deg)); opacity: .72; }
.lab-word-stack strong:nth-child(3) { color: var(--acid); mix-blend-mode: screen; transform: translate(calc(18px + var(--lab-x) * 32px), calc(-23px + var(--lab-y) * -24px)) skewX(calc(var(--lab-x) * 7deg)); opacity: .72; }
.lab-particles { position: absolute; inset: 0; }
.lab-particle { position: absolute; left: var(--px); top: var(--py); width: var(--size); height: var(--size); border: 1px solid color-mix(in srgb, var(--acid), white 20%); border-radius: var(--radius); background: color-mix(in srgb, var(--acid), transparent 78%); box-shadow: 0 0 16px #d7ff4530; transform: translate(calc(var(--lab-x) * var(--depth)), calc(var(--lab-y) * var(--depth))) rotate(var(--rotation)); animation: lab-drift var(--lab-duration) ease-in-out var(--delay) infinite alternate; }
.lab-particle:nth-child(3n) { border-color: #806cff; background: #806cff24; box-shadow: 0 0 17px #806cff34; }
.lab-particle:nth-child(4n) { border-radius: 50%; }
.lab-magnet { position: relative; z-index: 2; width: 118px; height: 118px; display: grid; place-items: center; border: 1px solid #d7ff4566; border-radius: 50%; background: #10130f88; box-shadow: 0 0 0 28px #d7ff4506, 0 0 0 65px #d7ff4503, 0 0 60px #d7ff451b; transform: translate(calc(var(--lab-x) * 80px), calc(var(--lab-y) * 70px)); transition: transform .16s ease-out; }
.lab-magnet::before,.lab-magnet::after { content: ""; position: absolute; inset: -18px; border: 1px dashed #d7ff4540; border-radius: 50%; animation: lab-spin 12s linear infinite; }
.lab-magnet::after { inset: -46px; border-color: #806cff35; animation-direction: reverse; animation-duration: 18s; }
.lab-magnet i { width: 8px; height: 8px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 18px var(--acid); }
.lab-magnet span { position: absolute; top: calc(50% + 18px); color: #d6ff45; font-size: 7px; letter-spacing: .2em; }
.lab-color-scene { overflow: hidden; background: #090a09; }
.color-orb { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; filter: blur(3px); mix-blend-mode: screen; transition: background 1s ease, transform .18s ease-out; animation: lab-breathe var(--lab-duration) ease-in-out infinite alternate; }
.color-orb-a { left: -8%; top: -12%; background: var(--lab-c1, #7c5cff); transform: translate(calc(var(--lab-x) * 45px), calc(var(--lab-y) * 30px)); }
.color-orb-b { right: -7%; top: 5%; background: var(--lab-c2, #d7ff45); transform: translate(calc(var(--lab-x) * -55px), calc(var(--lab-y) * 45px)); animation-delay: -2s; }
.color-orb-c { left: 29%; bottom: -38%; background: var(--lab-c3, #ff5b72); transform: translate(calc(var(--lab-x) * 25px), calc(var(--lab-y) * -55px)); animation-delay: -4s; }
.lab-color-scene strong { position: relative; z-index: 3; max-width: 80%; color: white; font-size: clamp(54px, 8vw, 108px); line-height: .78; letter-spacing: -.08em; text-align: center; mix-blend-mode: difference; }
.lab-controls { min-height: 90px; display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: center; gap: 28px; padding: 15px 18px; border-top: 1px solid #292a29; }
.lab-controls label { display: grid; gap: 8px; }
.lab-controls label span { color: #666862; font-size: 7px; letter-spacing: .17em; }
.lab-text-control input { width: 100%; border: 0; border-bottom: 1px solid #343634; border-radius: 0; outline: 0; background: transparent; color: #f0f1ed; font: 500 18px/1.2 "DM Sans", sans-serif; text-transform: uppercase; }
.lab-text-control input:focus { border-color: var(--acid); }
.lab-range-control input { width: 100%; accent-color: var(--acid); }
.lab-shuffle { display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 14px; border: 1px solid #383a37; border-radius: 999px; color: #d4d5d0; font-size: 9px; }
.lab-shuffle { background: #121312; }
.lab-shuffle i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: #080908; font-style: normal; font-size: 18px; transition: transform .55s var(--ease); }
.lab-shuffle:hover i { transform: rotate(220deg); }
.lab-console.is-shuffling .lab-canvas { animation: lab-flash .55s var(--ease); }

@keyframes lab-pulse { 50% { opacity: .35; transform: scale(.7); } }
@keyframes lab-spin { to { transform: rotate(360deg); } }
@keyframes lab-drift { to { margin-top: 22px; transform: translate(calc(var(--lab-x) * var(--depth) * -1), calc(var(--lab-y) * var(--depth) * -1)) rotate(calc(var(--rotation) + 70deg)); } }
@keyframes lab-breathe { to { scale: 1.12; filter: blur(12px); } }
@keyframes lab-flash { 45% { filter: brightness(1.8) saturate(1.5); transform: scale(.985); } }

@media (max-width: 800px) {
  .creative-lab { padding-top: 110px; }
  .lab-console { border-radius: 12px; }
  .lab-topbar { height: 44px; padding: 0 12px; }
  .lab-workspace { grid-template-columns: 1fr; min-height: 540px; }
  .lab-selector { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 10px; border-right: 0; border-bottom: 1px solid #292a29; }
  .lab-selector > span,.lab-selector > p { display: none; }
  .lab-selector button,.lab-selector button:first-of-type { display: flex; justify-content: center; min-height: 43px; padding: 8px 4px; border: 1px solid #292a29; border-radius: 4px; text-align: center; }
  .lab-selector button small,.lab-selector button i { display: none; }
  .lab-selector button b { font-size: 9px; }
  .lab-selector button:hover,.lab-selector button.active { padding: 8px 4px; }
  .lab-canvas { min-height: 450px; }
  .lab-word-stack strong { font-size: clamp(42px, 16vw, 70px); }
  .lab-scene > small { left: 14px; bottom: 14px; font-size: 6px; }
  .lab-coordinate { right: 14px; top: 14px; font-size: 6px; }
  .lab-controls { grid-template-columns: 1fr auto; gap: 14px; min-height: 86px; padding: 12px; }
  .lab-range-control { display: none !important; }
  .lab-text-control input { font-size: 14px; }
  .lab-shuffle span { display: none; }
  .lab-shuffle { padding: 5px; border: 0; }
  .lab-shuffle i { width: 38px; height: 38px; }
  .experience-menu nav a { min-height: 65px; }
  .experience-menu nav a strong { font-size: 36px; }
  .mobile-menu.open nav a:nth-child(5) { transition-delay: .38s; }
  .mobile-menu.open nav a:nth-child(6) { transition-delay: .44s; }
}

/* Ferramentas do novo laboratório */
[data-lab-mode="piano"] [data-lab-scene="piano"],
[data-lab-mode="draw"] [data-lab-scene="draw"],
[data-lab-mode="beats"] [data-lab-scene="beats"],
[data-lab-mode="ascii"] [data-lab-scene="ascii"],
[data-lab-mode="pixel"] [data-lab-scene="pixel"],
[data-lab-mode="visualizer"] [data-lab-scene="visualizer"],
[data-lab-mode="glitch"] [data-lab-scene="glitch"] { opacity: 1; visibility: visible; transform: none; filter: none; }

.lab-piano-scene {
  grid-template-columns: minmax(190px, .65fr) 1.6fr;
  align-items: center;
  gap: 35px;
  padding: 55px 46px 46px;
}
.piano-copy { align-self: center; }
.piano-copy > span { color: var(--acid); font-size: 8px; letter-spacing: .18em; }
.piano-copy h3 { margin: 18px 0 16px; font-size: clamp(40px, 5vw, 68px); line-height: .82; letter-spacing: -.07em; }
.piano-copy h3 em { color: var(--acid); font-family: "Instrument Serif", serif; font-weight: 400; }
.piano-copy p { max-width: 190px; color: #777a75; font-size: 10px; line-height: 1.55; }
.piano-wrap { position: relative; width: 100%; padding: 17px 17px 19px; border: 1px solid #30332f; border-radius: 11px; background: #101210; box-shadow: 0 25px 60px #0009; transform: perspective(900px) rotateX(2deg); }
.piano-display { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border: 1px solid #2d322b; border-radius: 5px 5px 2px 2px; background: #090b09; color: var(--acid); font: 500 10px/1 "DM Sans", sans-serif; letter-spacing: .16em; }
.piano-display i { width: 90px; height: 18px; opacity: .65; background: repeating-linear-gradient(90deg, var(--acid) 0 2px, transparent 2px 6px); transform: scaleY(.35); transition: transform .18s ease; }
.piano-display i.playing { animation: piano-wave .5s ease-out; }
.piano-keys { position: relative; height: 225px; display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 10px; }
.piano-key { position: relative; border: 1px solid #bfc0ba; border-radius: 0 0 5px 5px; transition: background .08s ease, transform .08s ease, box-shadow .08s ease; }
.piano-key.white { z-index: 1; min-width: 0; background: linear-gradient(90deg, #d9dad4, #f8f8f3 48%, #d7d8d2); color: #151615; box-shadow: inset 0 -13px 18px #7773; }
.piano-key.black { position: absolute; z-index: 3; left: calc(var(--key) * 14.2857% - 4.2%); top: 0; width: 8.4%; height: 62%; border-color: #050605; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #080908, #2a2c29 55%, #080908); color: #d7d8d3; box-shadow: 0 9px 10px #0008, inset 0 -7px 5px #000; }
.piano-key span { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); font-size: 8px; font-weight: 700; opacity: .46; }
.piano-key.black span { bottom: 9px; }
.piano-key:hover,.piano-key.is-playing { background: var(--acid); transform: translateY(3px); box-shadow: inset 0 -4px 9px #53631355; }
.piano-key.black:hover,.piano-key.black.is-playing { background: linear-gradient(#c7ef36, #718c10); }

.lab-draw-scene { display: block; cursor: crosshair; }
.lab-draw-scene canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; touch-action: none; }
.draw-placeholder { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #747872; pointer-events: none; transition: opacity .35s ease; }
.draw-placeholder.hidden { opacity: 0; }
.draw-placeholder i { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 10px; border: 1px solid #3b4039; border-radius: 50%; color: var(--acid); font-style: normal; font-size: 20px; }
.draw-placeholder strong { color: #c5c7c1; font-size: 17px; font-weight: 500; }
.draw-placeholder span { font-size: 9px; }

.lab-type-scene { overflow: hidden; }
.type-ruler { position: absolute; right: 24px; top: 22px; color: #656a63; font-size: 8px; letter-spacing: .16em; }
.type-stage { position: relative; width: 90%; height: 280px; display: grid; place-items: center; }
.type-stage strong { position: absolute; max-width: 100%; overflow: hidden; color: #eff0ea; font-size: clamp(62px, 10vw, 142px); line-height: .8; font-weight: var(--type-weight, 600); letter-spacing: var(--type-spacing, -.06em); white-space: nowrap; transform: skewX(var(--type-slant, 0deg)); transition: font-weight .18s ease, letter-spacing .18s ease, transform .18s ease; }
.type-stage [data-type-shadow] { color: transparent; -webkit-text-stroke: 1px var(--acid); transform: translate(16px, 20px) skewX(var(--type-slant, 0deg)); opacity: .52; }
.type-specimen { position: absolute; left: 24px; right: 24px; top: 22px; display: flex; justify-content: space-between; color: #676b65; font-size: 8px; letter-spacing: .14em; }

.lab-controls { display: block; min-height: 90px; padding: 0; }
.lab-tool-controls { min-height: 90px; display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: 28px; padding: 14px 18px; }
.lab-tool-controls[hidden] { display: none !important; }
.lab-tool-controls > div,.lab-tool-controls label { display: grid; gap: 8px; }
.lab-tool-controls span { color: #686b65; font-size: 7px; letter-spacing: .17em; }
.lab-tool-controls b { color: #d8d9d4; font-size: 11px; font-weight: 500; letter-spacing: .11em; }
.lab-tool-controls input[type="range"] { width: 100%; accent-color: var(--acid); }
.lab-action { display: flex; align-items: center; gap: 18px; padding: 7px 7px 7px 14px; border: 1px solid #383a37; border-radius: 999px; background: #121312; color: #d4d5d0; font-size: 9px; }
.lab-action i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: #080908; font-style: normal; font-size: 17px; transition: transform .4s var(--ease); }
.lab-action:hover i { transform: rotate(12deg) scale(1.08); }
.draw-controls { grid-template-columns: 110px 1fr auto; }
.draw-color input { width: 54px; height: 28px; padding: 0; border: 0; background: transparent; }
.draw-controls { grid-template-columns: 100px 1fr auto auto; }
.draw-eraser.active { border-color: var(--acid); color: var(--acid); }
.draw-eraser.active i { background: #f2f2ed; }

.lab-poster-scene { grid-template-columns: 1fr; place-items: center; padding: 28px; }
.poster-board { position: relative; width: min(300px, 58%); aspect-ratio: 4 / 5; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; background: #d7ff45; color: #090a09; box-shadow: 0 30px 70px #000b; transition: background .45s ease, border-radius .45s var(--ease), transform .45s var(--ease); }
.poster-board::after { content: ""; position: absolute; inset: 8px; border: 1px solid currentColor; opacity: .28; pointer-events: none; }
.poster-board > *:not(.poster-art) { position: relative; z-index: 2; }
.poster-board .poster-kicker { align-self: flex-end; font-size: 7px; letter-spacing: .15em; }
.poster-board strong { margin: auto 0; font-size: clamp(38px, 5.2vw, 67px); line-height: .77; letter-spacing: -.09em; }
.poster-board p { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.poster-board > small { font-size: 6px; letter-spacing: .14em; }
.poster-art { position: absolute; inset: 0; pointer-events: none; }
.poster-art i { position: absolute; border: 2px solid currentColor; border-radius: 50%; opacity: .24; }
.poster-art i:nth-child(1) { width: 210px; height: 210px; right: -85px; top: 45px; }
.poster-art i:nth-child(2) { width: 105px; height: 105px; right: -20px; top: 98px; }
.poster-art i:nth-child(3) { width: 250px; height: 1px; left: -40px; bottom: 92px; border-width: 1px 0 0; border-radius: 0; transform: rotate(-22deg); }
.poster-style-bold { border-radius: 50% 50% 5px 5px; transform: rotate(-2deg); }
.poster-style-bold strong { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.055em; }
.poster-style-cut { border-radius: 0; transform: skewX(-2deg); }
.poster-style-cut strong { transform: rotate(-7deg); text-shadow: 12px 12px 0 #0002; }
.poster-style-minimal { padding: 35px; }
.poster-style-minimal strong { font-size: clamp(31px, 4.5vw, 55px); letter-spacing: -.055em; }
.poster-meta { position: absolute; right: 20px; top: 20px; display: grid; gap: 5px; color: #737770; text-align: right; }
.poster-meta span { font-size: 6px; letter-spacing: .16em; }
.poster-meta b { color: #a4a7a0; font-size: 8px; }
.poster-controls { grid-template-columns: 1.2fr 1.2fr 80px auto; }

.lab-beats-scene { padding: 34px 38px 43px; }
.mpc-machine { width: min(620px, 96%); padding: 19px; border: 1px solid #363a35; border-radius: 16px; background: linear-gradient(145deg,#252824,#101210); box-shadow: 0 35px 75px #000b, inset 0 1px #ffffff12; }
.mpc-header { height: 58px; display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; gap: 12px; color: #8a8e86; font-size: 8px; letter-spacing: .14em; }
.mpc-screen { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px; border: 1px solid #394133; border-radius: 3px; background: #0a0e08; color: var(--acid); }
.mpc-screen b { font-size: 9px; }
.mpc-screen small { font-size: 7px; }
.mpc-header > i { justify-self: end; width: 9px; height: 9px; border-radius: 50%; background: #41443f; box-shadow: 0 0 0 5px #111; }
.mpc-header > i.active { background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.mpc-pads { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 17px; }
.mpc-pads button { aspect-ratio: 1.2; display: flex; flex-direction: column; justify-content: space-between; padding: 11px; border: 1px solid #494c47; border-radius: 7px; background: linear-gradient(145deg,#3d403b,#20231f); color: #b7bab3; text-align: left; box-shadow: 0 7px 10px #0008; transition: .08s; }
.mpc-pads button b { font-size: 9px; letter-spacing: .1em; }
.mpc-pads button span { align-self: flex-end; color: #70746d; font-size: 8px; }
.mpc-pads button:hover,.mpc-pads button.is-playing { border-color: var(--pad-color, var(--acid)); background: var(--pad-color, var(--acid)); color: #090a09; transform: translateY(3px); box-shadow: 0 0 25px color-mix(in srgb,var(--pad-color, var(--acid)),transparent 50%); }
.mpc-pads button:nth-child(2n) { --pad-color: #7d64ff; }
.mpc-pads button:nth-child(3n) { --pad-color: #ff626f; }
.mpc-pads button:nth-child(4n) { --pad-color: #52d9ff; }
.beat-steps { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.beat-step { height: 22px; border: 1px solid #414440; border-radius: 3px; background: #191b18; color: #747771; font-size: 7px; }
.beat-step.on { border-color: var(--acid); background: #d7ff4525; color: var(--acid); }
.beat-step.current { background: var(--acid); color: #080908; box-shadow: 0 0 14px #d7ff4566; }
.beats-controls { grid-template-columns: 1.15fr .8fr .8fr auto auto; gap: 15px; }

.mpc-pads button { aspect-ratio: 1.75; }
.beat-banks { display: flex; align-items: center; gap: 6px; margin: 3px 0 10px; }
.beat-banks span { margin-right: auto; color: #747872; font-size: 7px; letter-spacing: .14em; }
.beat-banks button { width: 28px; height: 22px; border: 1px solid #414540; border-radius: 3px; color: #858982; font-size: 8px; }
.beat-banks button.active { border-color: var(--acid); background: var(--acid); color: #090a09; }
.beat-steps { grid-template-columns: 48px repeat(8,1fr); gap: 4px 6px; }
.beat-track { display: contents; }
.beat-track-label { display: flex; align-items: center; color: #777b74; font-size: 7px; letter-spacing: .1em; }
.beat-step { height: 18px; }
.beats-controls { grid-template-columns: .8fr .8fr auto auto auto auto; gap: 10px; }

.lab-dj-scene { padding: 35px 34px 45px; }
.dj-console { width: min(760px, 96%); display: grid; grid-template-columns: 1fr .55fr 1fr; gap: 13px; align-items: center; padding: 19px; border: 1px solid #363a35; border-radius: 16px; background: linear-gradient(145deg,#272a26,#111311); box-shadow: 0 32px 80px #000b; }
.dj-deck { display: grid; place-items: center; gap: 13px; padding: 14px; border: 1px solid #3a3d38; border-radius: 10px; background: #111310; }
.dj-deck > span { justify-self: start; color: #777b74; font-size: 7px; letter-spacing: .13em; }
.dj-platter { position: relative; width: min(190px, 90%); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #3e433c; border-radius: 50%; background: repeating-radial-gradient(circle,#111 0 4px,#292c28 5px 6px); box-shadow: 0 15px 30px #000a; }
.dj-platter::before { content: ""; position: absolute; inset: 14%; border: 1px solid #d7ff4540; border-radius: 50%; }
.dj-platter i { width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--acid); box-shadow: 0 0 23px #d7ff4550; }
.dj-platter b { position: absolute; color: #090a09; font-size: 8px; }
.dj-deck.playing .dj-platter { animation: dj-spin 2s linear infinite; }
.dj-deck button { padding: 8px 14px; border: 1px solid #454944; border-radius: 999px; color: #aaa; font-size: 8px; letter-spacing: .12em; }
.dj-deck.playing button { border-color: var(--acid); color: var(--acid); }
.dj-mixer { display: grid; place-items: center; gap: 14px; color: #777b74; }
.dj-levels { height: 150px; display: flex; align-items: end; gap: 5px; }
.dj-levels i { width: 5px; height: 20%; background: var(--acid); box-shadow: 0 0 8px #d7ff4550; animation: dj-level .65s ease-in-out calc(var(--i, 0) * -.08s) infinite alternate; }
.dj-levels i:nth-child(2){--i:1;height:54%}.dj-levels i:nth-child(3){--i:2;height:82%}.dj-levels i:nth-child(4){--i:3;height:66%}.dj-levels i:nth-child(5){--i:4;height:43%}.dj-levels i:nth-child(6){--i:5;height:76%}
.dj-mixer strong { color: #d3d5cf; font-size: 9px; letter-spacing: .12em; }
.dj-mixer > span { font-size: 6px; letter-spacing: .16em; }
.dj-controls { grid-template-columns: 1fr 1.2fr 1fr auto; }

.lab-wallpaper-scene { padding: 24px 28px 42px; }
.lab-wallpaper-scene canvas { width: min(760px, 94%); aspect-ratio: 16 / 10; border: 1px solid #3a3e38; border-radius: 6px; background: #0b0c0b; box-shadow: 0 28px 65px #000b; }
.wallpaper-stamp { position: absolute; right: 40px; top: 34px; display: grid; justify-items: end; color: white; mix-blend-mode: difference; }
.wallpaper-stamp span { font-size: 8px; letter-spacing: .16em; }
.wallpaper-stamp b { margin-top: 4px; font-size: 6px; letter-spacing: .12em; }
.wallpaper-controls { grid-template-columns: 75px 75px 1fr auto auto; }

.lab-ascii-scene { padding: 24px 28px 42px; }
.ascii-frame { position: relative; width: min(700px, 92%); height: 485px; overflow: hidden; display: grid; place-items: center; border: 1px solid #33402e; border-radius: 6px; background: #050805; box-shadow: inset 0 0 80px #000; }
.ascii-frame pre { margin: 0; color: var(--acid); font: 7px/.68 Consolas, monospace; letter-spacing: 0; white-space: pre; text-align: center; text-shadow: 0 0 6px #d7ff4530; }
.ascii-scan { position: absolute; inset: 0; pointer-events: none; opacity: .15; background: repeating-linear-gradient(transparent 0 3px,#d7ff45 4px); }
.ascii-caption { position: absolute; right: 42px; top: 36px; display: grid; justify-items: end; color: var(--acid); font-size: 7px; letter-spacing: .14em; }
.ascii-caption b { margin-top: 5px; color: #82877e; font-size: 6px; }
.ascii-controls { grid-template-columns: 1.25fr 1fr 1fr auto; }
.file-control input { max-width: 230px; color: #999; font-size: 8px; }
.file-control input::file-selector-button { margin-right: 9px; padding: 6px 9px; border: 1px solid #3a3d38; border-radius: 3px; background: #151714; color: #bbb; font-size: 8px; }

.lab-pixel-scene { padding: 26px 28px 44px; }
.pixel-editor { width: min(480px, 78%); aspect-ratio: 1; padding: 10px; border: 1px solid #3a3e38; border-radius: 8px; background: #141613; box-shadow: 0 25px 65px #000b; }
.pixel-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(16,1fr); grid-template-rows: repeat(16,1fr); border: 1px solid #343a31; background: #0a0c09; touch-action: none; }
.pixel-cell { border: 1px solid #1d211c; background: transparent; padding: 0; }
.pixel-cell:hover { box-shadow: inset 0 0 0 1px var(--acid); }
.pixel-coordinates { position: absolute; right: 25px; top: 24px; display: grid; justify-items: end; gap: 5px; color: #656a63; font-size: 7px; letter-spacing: .14em; }
.pixel-coordinates b { color: var(--acid); font-size: 7px; }
.pixel-controls { grid-template-columns: 80px auto auto auto auto; justify-content: space-between; }
.pixel-controls .active { border-color: var(--acid); color: var(--acid); }

.lab-visualizer-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visualizer-title { position: relative; z-index: 2; display: grid; justify-items: center; color: #fff; pointer-events: none; mix-blend-mode: difference; }
.visualizer-title span { font-size: 8px; letter-spacing: .18em; }
.visualizer-title strong { margin-top: 8px; font-size: clamp(36px,6vw,80px); letter-spacing: -.07em; }
.visualizer-controls { grid-template-columns: 1fr 1fr 75px auto auto; }

.lab-glitch-scene { padding: 26px 30px 44px; }
.glitch-frame { --glitch: .42; --glitch-speed: .5s; position: relative; width: min(720px, 92%); height: 470px; overflow: hidden; display: grid; place-items: center; border: 1px solid #3c403a; background: radial-gradient(circle at 50% 45%,#20251e,#070807 68%); box-shadow: 0 30px 75px #000c; isolation: isolate; }
.glitch-frame::before,.glitch-frame::after { content: ""; position: absolute; inset: calc(10% + var(--glitch) * 4%); border: 1px solid var(--glitch-color,var(--acid)); opacity: calc(.15 + var(--glitch) * .5); transform: translate(calc(var(--glitch) * 22px),calc(var(--glitch) * -12px)); animation: glitch-jump var(--glitch-speed) steps(2,end) infinite; }
.glitch-frame::after { transform: translate(calc(var(--glitch) * -19px),calc(var(--glitch) * 17px)); border-color: #765cff; animation-direction: reverse; }
.glitch-frame > strong { position: relative; z-index: 3; color: var(--glitch-color,var(--acid)); font-size: clamp(68px,10vw,142px); line-height: .7; letter-spacing: -.09em; text-align: center; text-shadow: calc(var(--glitch) * 18px) 0 #ff285c,calc(var(--glitch) * -18px) 0 #24c8ff; transform: skewX(calc(var(--glitch) * -9deg)); animation: glitch-text var(--glitch-speed) steps(2,end) infinite; }
.glitch-frame > span { position: absolute; z-index: 4; left: 18px; bottom: 16px; color: #858a82; font-size: 7px; letter-spacing: .16em; }
.glitch-noise { position: absolute; z-index: 2; inset: 0; opacity: calc(var(--glitch) * .34); background: repeating-linear-gradient(0deg,transparent 0 4px,var(--glitch-color,var(--acid)) 5px 6px); mix-blend-mode: screen; animation: glitch-scan var(--glitch-speed) linear infinite; }
.glitch-channel { position: absolute; z-index: 1; width: 43%; height: 8px; opacity: calc(var(--glitch) * .7); background: #ff285c; top: 28%; left: -3%; transform: translateX(calc(var(--glitch) * 60px)); }
.glitch-blue { top: 69%; left: auto; right: -3%; background: #24c8ff; transform: translateX(calc(var(--glitch) * -60px)); }
.glitch-readout { position: absolute; right: 32px; top: 28px; z-index: 5; display: grid; justify-items: end; color: #6e736b; font-size: 7px; letter-spacing: .14em; }
.glitch-readout b { margin-top: 5px; color: var(--acid); font-size: 7px; }
.glitch-controls { grid-template-columns: 1.25fr 1fr 1fr 70px auto; }
.glitch-frame.glitch-hit { animation: glitch-hit .5s steps(3,end); }
@keyframes glitch-jump { 50% { clip-path: inset(28% 0 46%); translate: 12px -4px; } }
@keyframes glitch-text { 20% { clip-path: inset(10% 0 68%); translate: -8px 0; } 60% { clip-path: inset(66% 0 8%); translate: 10px 0; } }
@keyframes glitch-scan { to { background-position: 0 36px; } }
@keyframes glitch-hit { 30% { filter: invert(1) saturate(3); transform: translateX(-11px); } 65% { filter: hue-rotate(120deg); transform: translateX(9px); } }

@keyframes dj-spin { to { transform: rotate(360deg); } }
@keyframes dj-level { to { height: 95%; filter: hue-rotate(45deg); } }

@keyframes piano-wave { 35% { transform: scaleY(1); } 100% { transform: scaleY(.35); } }

@media (max-width: 800px) {
  .lab-piano-scene { grid-template-columns: 1fr; align-content: center; gap: 22px; padding: 22px 12px 30px; }
  .piano-copy h3 { margin: 8px 0; font-size: 36px; }
  .piano-copy p { display: none; }
  .piano-wrap { padding: 10px; transform: none; }
  .piano-display { height: 38px; }
  .piano-keys { height: 180px; }
  .piano-key span { font-size: 7px; }
  .type-stage strong { font-size: clamp(44px, 16vw, 74px); }
  .type-specimen { top: 14px; left: 14px; right: 14px; }
  .lab-tool-controls { min-height: 82px; grid-template-columns: 1fr auto; gap: 12px; padding: 11px; }
  .piano-controls > div { display: none; }
  .draw-controls { grid-template-columns: 70px 1fr auto; }
  .draw-controls { grid-template-columns: 58px 1fr auto auto; }
  .poster-board { width: min(270px, 74%); }
  .poster-controls { grid-template-columns: 1fr 1fr auto; gap: 8px; }
  .poster-controls .lab-text-control:nth-child(2) { display: none; }
  .poster-meta { display: none; }
  .lab-beats-scene { padding: 18px 10px 28px; }
  .mpc-machine { width: 100%; padding: 11px; border-radius: 10px; }
  .mpc-header { height: 45px; }
  .mpc-pads { gap: 6px; }
  .mpc-pads button { padding: 7px; }
  .mpc-pads button b { font-size: 7px; }
  .beats-controls { grid-template-columns: 1fr 1fr repeat(4,auto); gap: 6px; }
  .beats-controls .lab-action span { display: none; }
  .lab-selector button b { font-size: 7px; }
  .lab-selector button { min-height: 38px; }
  .dj-console { grid-template-columns: 1fr 1fr; width: 100%; padding: 9px; gap: 7px; }
  .dj-mixer { position: absolute; left: 50%; z-index: 3; transform: translateX(-50%); }
  .dj-levels { display: none; }
  .dj-mixer strong { padding: 6px 9px; border-radius: 999px; background: #090a09; color: var(--acid); }
  .dj-mixer > span { display: none; }
  .dj-deck { padding: 8px; }
  .dj-platter { width: 94%; }
  .dj-controls { grid-template-columns: 1fr 1fr auto; }
  .dj-controls label:nth-child(3) { display: none; }
  .lab-wallpaper-scene,.lab-ascii-scene,.lab-pixel-scene { padding: 15px 9px 30px; }
  .lab-wallpaper-scene canvas { width: 100%; }
  .wallpaper-controls { grid-template-columns: 58px 58px 1fr auto auto; gap: 7px; }
  .wallpaper-controls label:nth-child(3) { display: none; }
  .ascii-frame { width: 100%; height: 390px; }
  .ascii-frame pre { font-size: 4px; }
  .ascii-controls { grid-template-columns: 1.4fr 1fr auto; }
  .ascii-controls label:nth-child(3) { display: none; }
  .file-control input { max-width: 135px; }
  .pixel-editor { width: min(390px,95%); }
  .pixel-controls { grid-template-columns: 58px repeat(4,auto); gap: 6px; }
  .visualizer-controls { grid-template-columns: 1fr 60px auto auto; }
  .visualizer-controls label:nth-child(2) { display: none; }
  .lab-glitch-scene { padding: 14px 9px 30px; }
  .glitch-frame { width: 100%; height: 405px; }
  .glitch-frame > strong { font-size: 76px; }
  .glitch-controls { grid-template-columns: 1fr 1fr 58px auto; }
  .glitch-controls label:nth-child(3) { display: none; }
  .lab-action span { display: none; }
  .lab-action { padding: 5px; border: 0; }
  .lab-action i { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .piano-display i,.piano-key { animation: none !important; transition: none !important; }
}

/* Convite para a página de jogos */
.games-invite {
  position: relative;
  min-height: 390px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  overflow: hidden;
  margin-top: 35px;
  padding: 65px 70px;
  border: 1px solid #343634;
  border-radius: 20px;
  background: radial-gradient(circle at 82% 50%,#d7ff4520,transparent 30%),linear-gradient(135deg,#111311,#090a09);
  box-shadow: 0 35px 100px #0008;
}
.games-invite::before { content: "PLAY"; position: absolute; right: -18px; bottom: -55px; color: #ffffff05; font-size: clamp(130px,18vw,250px); font-weight: 700; letter-spacing: -.09em; pointer-events: none; }
.games-invite-copy { position: relative; z-index: 2; }
.games-invite-copy > span { color: var(--acid); font-size: 8px; letter-spacing: .17em; }
.games-invite-copy h2 { max-width: 700px; margin: 22px 0 0; font-size: clamp(50px,6.8vw,88px); line-height: .84; letter-spacing: -.07em; font-weight: 600; }
.games-invite-button { position: relative; z-index: 3; flex: 0 0 auto; width: 155px; height: 155px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: #090a09; box-shadow: 0 0 0 16px #d7ff4508,0 0 60px #d7ff4528; transition: transform .45s var(--ease),box-shadow .45s ease; }
.games-invite-button span { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.games-invite-button i { position: absolute; right: 33px; top: 30px; font-style: normal; font-size: 18px; }
.games-invite-button:hover { transform: rotate(-8deg) scale(1.07); box-shadow: 0 0 0 25px #d7ff450b,0 0 90px #d7ff4545; }
.games-invite-orbit { position: absolute; right: 43px; top: 50%; width: 250px; height: 250px; transform: translateY(-50%); border: 1px solid #d7ff4518; border-radius: 50%; animation: invite-orbit 13s linear infinite; }
.games-invite-orbit i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }
.games-invite-orbit i:nth-child(1){left:10%;top:22%}.games-invite-orbit i:nth-child(2){right:4%;top:48%}.games-invite-orbit i:nth-child(3){left:35%;bottom:1%}
@keyframes invite-orbit { to { transform: translateY(-50%) rotate(360deg); } }

@media (max-width:800px) {
  .games-invite { width: calc(100vw - 32px); min-height: 410px; margin-top: 20px; padding: 38px 24px; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 15px; }
  .games-invite-copy h2 { font-size: 48px; }
  .games-invite-button { width: 112px; height: 112px; align-self: flex-end; }
  .games-invite-button i { right: 23px; top: 20px; }
  .games-invite-orbit { width: 180px; height: 180px; right: -15px; bottom: -40px; top: auto; transform: none; }
}

/* Página independente de jogos */
.games-body {
  min-height: 100vh;
  background: #070807;
}

.games-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 18%, #7d5cff18, transparent 30%),
    radial-gradient(circle at 82% 72%, #d7ff4510, transparent 34%);
}

.games-page {
  position: relative;
  min-height: 100vh;
  padding: 128px 0 80px;
  overflow: hidden;
}

.games-page::before {
  content: "ARCADE";
  position: absolute;
  right: -2vw;
  top: 65px;
  color: #ffffff05;
  font-size: clamp(120px, 24vw, 350px);
  font-weight: 700;
  letter-spacing: -.09em;
  pointer-events: none;
}

.games-page-intro {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100vw - 48px));
  margin: 0 auto 70px;
  display: grid;
  grid-template-columns: 85px 1.3fr 1fr;
  gap: 25px;
  align-items: end;
}

.games-page-intro > span { color: var(--acid); font-size: 10px; letter-spacing: .16em; }
.games-page-intro h1 { margin: 0; font-size: clamp(72px, 11vw, 155px); line-height: .72; letter-spacing: -.085em; }
.games-page-intro p { margin: 0 0 5px; color: #969693; font-size: 19px; line-height: 1.35; }
.games-page-intro p b { display: block; margin-bottom: 8px; color: #fff; font-size: 9px; letter-spacing: .16em; }

.games-page .arcade-stage {
  position: relative;
  z-index: 2;
  top: auto;
  left: auto;
  width: min(1240px, calc(100vw - 48px));
  margin: 0 auto;
  transform: none;
  animation: arcade-page-in 1s .15s var(--ease) both;
}

.games-page .arcade-layout .pixel-arena { height: min(620px, 68vh); }
.games-page .arcade-copy h2 { font-size: 46px; }
.games-back { color: var(--acid) !important; }
.games-body .chapter-indicator { display: none; }
.games-footer { width: min(1240px, calc(100vw - 48px)); min-height: 0; margin: 55px auto 0; padding: 25px 0 0; flex-direction: row; justify-content: space-between; border-top: 1px solid #292929; color: #777; font-size: 9px; letter-spacing: .1em; }
.games-footer a { position: static; }

@keyframes arcade-page-in {
  from { opacity: 0; transform: translateY(55px) scale(.97); filter: blur(12px); }
  to { opacity: 1; transform: none; filter: none; }
}

@media (max-width: 800px) {
  .games-page { padding: 90px 0 50px; }
  .games-page-intro { width: calc(100vw - 24px); grid-template-columns: 1fr; gap: 15px; margin-bottom: 35px; }
  .games-page-intro > span { font-size: 8px; }
  .games-page-intro h1 { font-size: 68px; line-height: .84; padding-bottom: .1em; }
  .games-page-intro p { position: relative; z-index: 2; max-width: 330px; margin-top: 2px; font-size: 14px; }
  .games-page .arcade-stage { width: calc(100vw - 24px); }
  .games-page .arcade-layout .pixel-arena { height: 410px; }
  .games-footer { width: calc(100vw - 24px); flex-direction: column; align-items: flex-start; gap: 15px; }
}

/* Revisão móvel: leitura, laboratório e controles do fliperama */
.game-fullscreen-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #3b3d39;
  background: #111310 !important;
  color: #e9eae5 !important;
}
.game-fullscreen-trigger i { color: var(--acid); font-style: normal; font-size: 16px; }
.game-fullscreen-exit {
  position: absolute;
  z-index: 30;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  display: none;
  align-items: center;
  gap: 9px;
  padding: 8px 9px 8px 13px;
  border: 1px solid #ffffff4a;
  border-radius: 999px;
  background: #090a09e8;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.game-fullscreen-exit i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: var(--acid); color: #070807; font-style: normal; font-size: 17px; }
.arcade-joystick {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: radial-gradient(circle, #292c26 0 21%, #10120f 22% 49%, #252823 50% 52%, #0b0c0b 53%);
  border: 1px solid #ffffff42;
  box-shadow: inset 0 0 28px #000, 0 10px 28px #000a;
  touch-action: none;
  user-select: none;
}
.joystick-ring { position: absolute; inset: 15px; border: 1px dashed #d7ff4538; border-radius: 50%; pointer-events: none; }
.joystick-knob { position: absolute; z-index: 2; left: 50%; top: 50%; width: 55px; height: 55px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #efffb3, var(--acid) 42%, #87a321); box-shadow: 0 8px 18px #000b, 0 0 23px #d7ff4533; transform: translate(-50%,-50%); transition: transform .08s linear; pointer-events: none; }
.joystick-knob i { position: absolute; inset: 12px; border: 1px solid #090a0940; border-radius: 50%; }
.arcade-joystick.active .joystick-knob { transition: none; }
.arcade-touch .arcade-fire { width: 78px; height: 78px; display: grid; place-items: center; align-self: end; border-radius: 50%; background: radial-gradient(circle at 35% 28%,#fd9274,#e64e2d 52%,#732315); box-shadow: inset 0 0 0 5px #ffffff12,0 9px 25px #000b; color: #fff; }
.arcade-touch .arcade-fire i { font-style: normal; font-size: 20px; line-height: 1; }
.arcade-touch .arcade-fire span { font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.rotate-device-hint { display: none; }

@media (max-width: 800px) {
  html,body { max-width: 100%; overflow-x: clip; }
  .shell { width: calc(100vw - 28px); }
  .hero { height: 470px; }
  .hero-copy { padding-top: 92px; }
  .hero-title { max-width: 100%; font-size: clamp(43px,14.4vw,58px); overflow-wrap: anywhere; }
  .hero-intro { max-width: 92%; font-size: 18px; }
  .section { padding-block: 82px; }
  .work.section { padding-top: 42px; }
  .section-heading { grid-template-columns: 28px minmax(0,1fr); gap: 0 8px; margin-bottom: 48px; }
  .section-heading h2 { min-width: 0; font-size: clamp(36px,12vw,46px); overflow-wrap: anywhere; }
  .section-heading p { min-width: 0; font-size: 16px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .about-card { min-height: 0; padding-bottom: 122px; }
  .about-copy { margin-top: 38px; }
  .about-copy p { font-size: 23px; }
  .about-copy p + p { font-size: 16px; line-height: 1.3; }
  .creative-lab { padding-top: 90px; }
  .lab-topbar { grid-template-columns: auto minmax(0,1fr) auto; gap: 8px; }
  .lab-topbar > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
  .lab-selector { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .lab-selector button { min-width: 0; }
  .lab-selector button b { overflow-wrap: anywhere; line-height: 1.15; }
  .lab-workspace { min-height: 0; }
  .lab-canvas { min-height: 420px; }
  .lab-tool-controls,.draw-controls,.beats-controls,.ascii-controls,.pixel-controls,.visualizer-controls { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; align-items: center; }
  .lab-tool-controls > div,.lab-tool-controls > label { grid-column: span 2; min-width: 0; }
  .lab-tool-controls .lab-action { justify-self: center; }
  .beats-controls .lab-action,.pixel-controls .lab-action,.visualizer-controls .lab-action { justify-self: center; }
  .file-control input { width: 100%; max-width: 100%; font-size: 9px; }
  .ascii-frame { height: 330px; }
  .games-invite { min-height: 430px; padding: 34px 20px; gap: 28px; }
  .games-invite-copy h2 { max-width: 100%; font-size: clamp(39px,12.5vw,49px); overflow-wrap: anywhere; }
  .games-invite-button { align-self: flex-start; margin-left: auto; }
  .contact-grid { gap: 9px; }
  .contact-card.social-card strong { max-width: calc(100% - 35px); font-size: 14px; }
  .signature { max-width: calc(100vw - 34px); font-size: clamp(47px,17vw,66px); white-space: normal; text-align: center; overflow-wrap: anywhere; }

  .games-page { padding-top: 76px; }
  .games-page-intro h1 { font-size: clamp(58px,20vw,72px); }
  .games-page-intro p { max-width: 100%; }
  .arcade-intro { align-items: flex-end; flex-wrap: wrap; }
  .arcade-copy { min-width: 0; flex: 1 1 170px; }
  .arcade-copy p { max-width: 100%; }
  .arcade-actions { flex: 1 1 100%; justify-content: flex-end; }
  .arcade-actions button { min-width: 0; min-height: 42px; }
  .game-fullscreen-trigger { margin-right: auto; }
  .arcade-stage > .game-picker { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .arcade-stage > .game-picker::-webkit-scrollbar { display: none; }
  .arcade-stage > .game-picker button,.arcade-stage > .game-picker button:last-child { flex: 0 0 142px; grid-column: auto; scroll-snap-align: start; }
  .games-page .arcade-layout .pixel-arena,.arcade-layout .pixel-arena { height: min(455px,68vh); min-height: 390px; }
  .arcade-touch { left: 14px; right: 14px; bottom: 13px; display: flex; align-items: flex-end; justify-content: space-between; transform: none; pointer-events: none; }
  .arcade-touch > * { pointer-events: auto; }
  .arena-hud { padding-right: 0; }
  .game-overlay { padding-bottom: 150px; }
  .game-overlay h2 { font-size: 32px; }
  .game-overlay p { max-width: 260px; font-size: 10px; }
  .arcade-layout .game-scoreboard { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .arcade-layout .game-scoreboard > strong { grid-column: 1/-1; }
  .arcade-help kbd { display: none; }
}

@media (max-width: 370px) {
  .hero { height: 560px; }
  .hero-title { font-size: 43px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .gallery-item.gallery-wide,.gallery-item.gallery-portrait,.gallery-item.gallery-tall { grid-column: auto; grid-row: auto; }
  .lab-selector { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lab-tool-controls,.draw-controls,.beats-controls,.ascii-controls,.pixel-controls,.visualizer-controls { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .games-invite-copy h2 { font-size: 39px; }
  .contact-grid .contact-card.social-card,.contact-grid .contact-card.social-card.email { height: 195px; }
}

/* O modo cinema permanece utilizável mesmo quando o navegador não oferece a API de tela cheia. */
body.game-cinema-mode { overflow: hidden !important; overscroll-behavior: none; background: #050605; }
body.game-cinema-mode .pixel-arena {
  position: fixed !important;
  z-index: 9999 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
body.game-cinema-mode .game-fullscreen-exit,
.pixel-arena:fullscreen .game-fullscreen-exit,
.pixel-arena:-webkit-full-screen .game-fullscreen-exit { display: inline-flex; z-index: 60; }
body.game-cinema-mode .arena-hud { top: max(14px,env(safe-area-inset-top)); left: max(18px,env(safe-area-inset-left)); right: max(95px,calc(env(safe-area-inset-right) + 95px)); }
body.game-cinema-mode .arcade-touch,
.pixel-arena.is-game-fullscreen .arcade-touch,
.pixel-arena:fullscreen .arcade-touch,
.pixel-arena:-webkit-full-screen .arcade-touch {
  z-index: 50 !important;
  left: max(18px,env(safe-area-inset-left)) !important;
  right: max(18px,env(safe-area-inset-right)) !important;
  bottom: max(15px,env(safe-area-inset-bottom)) !important;
  display: flex !important;
  align-items: flex-end;
  justify-content: space-between;
  transform: none !important;
  pointer-events: none;
  visibility: visible !important;
  opacity: 1 !important;
}
body.game-cinema-mode .arcade-touch > *,
.pixel-arena.is-game-fullscreen .arcade-touch > *,
.pixel-arena:fullscreen .arcade-touch > *,
.pixel-arena:-webkit-full-screen .arcade-touch > * { pointer-events: auto; }
body.game-cinema-mode .arcade-joystick,
body.game-cinema-mode .arcade-fire,
.pixel-arena:fullscreen .arcade-joystick,
.pixel-arena:fullscreen .arcade-fire,
.pixel-arena:-webkit-full-screen .arcade-joystick,
.pixel-arena:-webkit-full-screen .arcade-fire { display: grid !important; visibility: visible !important; opacity: 1 !important; }
body.game-cinema-mode .game-overlay { padding: 30px 150px; }

@media (orientation: portrait) and (max-width: 800px) {
  body.game-cinema-mode .rotate-device-hint { position: absolute; z-index: 28; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background: #080a08f2; text-align: center; }
  body.game-cinema-mode .rotate-device-hint i { color: var(--acid); font-style: normal; font-size: 54px; animation: rotate-phone 1.7s ease-in-out infinite; }
  body.game-cinema-mode .rotate-device-hint strong { margin-top: 10px; font-size: 24px; }
  body.game-cinema-mode .rotate-device-hint span { max-width: 250px; margin-top: 8px; color: #8d9089; font-size: 12px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.game-cinema-mode .arcade-joystick { width: min(27vh,112px); height: min(27vh,112px); }
  body.game-cinema-mode .arcade-touch .arcade-fire { width: min(20vh,78px); height: min(20vh,78px); }
  body.game-cinema-mode .game-overlay { padding: 22px 150px 22px; }
  body.game-cinema-mode .game-overlay h2 { margin-block: 8px; font-size: clamp(25px,7vh,40px); }
  body.game-cinema-mode .game-overlay p { margin-bottom: 12px; }
}

@keyframes rotate-phone { 50% { transform: rotate(90deg) scale(1.08); } }