:root {
  --bg: #05070C; --ink: #F1ECE4; --ink-2: #CFC8BE; --muted: #8F93A0;
  --line: rgba(255,255,255,.10); --copper: #E9A178; --mint: #86E3C9;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Darcula */
  --t-prompt: #86E3C9;
  --t-cmd: #E9E4DB;
  --t-kw: #CC7832;
  --t-str: #7FB56B;
  --t-num: #6897BB;
  --t-fn: #FFC66D;
  --t-out: #A9B0BC;
  --t-hi: #E9A178;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
#field { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.grain {
  position: fixed; inset: 0; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 85% 70% at 50% 40%, transparent 32%, rgba(0,0,0,.66) 100%); }

.brand {
  position: fixed; top: 24px; left: 28px; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.brand__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper);
  animation: beat 3.2s ease-out infinite; }
@keyframes beat {
  0% { box-shadow: 0 0 0 0 rgba(233,161,120,.45); }
  70% { box-shadow: 0 0 0 12px rgba(233,161,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,161,120,0); }
}

.stage {
  position: relative; z-index: 2; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 76px 24px 88px; text-align: center;
}

.halo {
  position: fixed; left: 50%; top: 50%; translate: -50% -50%;
  width: min(720px, 92vw); aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(233,161,120,.15), rgba(134,227,201,.11), rgba(233,161,120,.15));
  filter: blur(72px); opacity: .5; animation: spin 28s linear infinite; z-index: -1;
  pointer-events: none;
}
@keyframes spin { to { rotate: 360deg; } }

.intro { max-width: 760px; }
.eyebrow { margin: 0 0 14px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--copper); }

.headline {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em;
  color: #F6E1CB; text-shadow: 0 0 46px rgba(233,161,120,.14);
}
.headline .word { display: inline-block; white-space: nowrap; }
.headline .ch { display: inline-block; }
.headline.anim .ch {
  opacity: 0; transform: translateY(.4em);
  transition: opacity .7s cubic-bezier(.19,1,.22,1), transform .7s cubic-bezier(.19,1,.22,1);
  transition-delay: var(--d, 0ms);
}
.headline.anim .ch.in { opacity: 1; transform: none; }

/* ---------- janela ---------- */
.window {
  position: relative; width: min(720px, 94vw); text-align: left;
  border-radius: 12px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26,26,32,.78), rgba(14,14,18,.72));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 50px 120px -55px rgba(0,0,0,.98), 0 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter: blur(26px) saturate(130%); -webkit-backdrop-filter: blur(26px) saturate(130%);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.window::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.06), transparent 62%);
  opacity: 0; transition: opacity .4s ease;
}
.window:hover::before { opacity: 1; }

.titlebar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.dots { display: flex; gap: 7px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dots i:nth-child(1) { background: #FF5F57; }
.dots i:nth-child(2) { background: #FEBC2E; }
.dots i:nth-child(3) { background: #28C840; }
.title {
  flex: 1; text-align: center; font-family: var(--mono); font-size: 11.5px;
  color: rgba(241,236,228,.48); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.spacer { width: 44px; }

.screen {
  padding: 20px 22px 22px; font-family: var(--mono); font-size: 13.5px; line-height: 1.85;
  color: var(--t-out); position: relative;
  overflow: hidden; /* a altura é travada por JS antes de digitar */
}
.line { white-space: pre-wrap; word-break: break-word; }
.line + .line { margin-top: 2px; }
.gap { height: 10px; }

.t-p  { color: var(--t-prompt); }
.t-p2 { color: var(--mint); opacity: .55; }
.t-cmd { color: var(--t-cmd); }
.t-kw  { color: var(--t-kw); }
.t-str { color: var(--t-str); }
.t-num { color: var(--t-num); }
.t-fn  { color: var(--t-fn); }
.t-out { color: var(--t-out); }
.t-hi  { color: var(--t-hi); font-weight: 500; text-shadow: 0 0 22px rgba(233,161,120,.35); }

.line.out { animation: fadein .35s ease both; }
@keyframes fadein { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

.cursor {
  display: inline-block; width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: var(--mint); box-shadow: 0 0 14px rgba(134,227,201,.55);
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.screen-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42px; pointer-events: none;
  background: linear-gradient(to top, rgba(14,14,18,.85), transparent);
  opacity: .5;
}

.caption { margin: 0; max-width: 52ch; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.meta {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  animation: beat 2.4s ease-out infinite; }

.marquee {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(to top, rgba(5,7,12,.92), transparent);
  padding: 16px 0 20px; pointer-events: none;
}
.marquee__track {
  display: flex; gap: 22px; width: max-content;
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(241,236,228,.3);
  animation: slide 30s linear infinite;
}
@keyframes slide { to { transform: translateX(-50%); } }

@media (max-height: 780px) {
  .stage { gap: 16px; padding: 64px 24px 72px; }
  .headline { font-size: clamp(1.8rem, 4.4vw, 2.8rem); }
  .screen { font-size: 12.5px; line-height: 1.7; padding: 14px 18px 16px; }
  .caption { display: none; }
}

@media (max-width: 620px) {
  .stage { gap: 20px; padding: 84px 18px 86px; }
  .screen { font-size: 12px; min-height: 210px; padding: 16px 16px 18px; }
  .title { font-size: 10.5px; }
  .marquee { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .halo, .marquee__track, .brand__dot, .pulse { animation: none !important; }
  .headline.anim .ch { opacity: 1; transform: none; transition: none; }
  .cursor { animation: none; }
}