/* Roadmap Legacy · a galáxia de um projeto (v1.0) */
:root {
  --space: #0A0820;
  --space-2: #120E35;
  --gold: #FDB703;
  --gold-route: #FFC21A;
  --ink: #F4F2FF;
  --ink-2: #B9B4D8;
  --ink-3: #8A84B3;
  --line: rgba(255, 255, 255, .1);
  --panel: #110D2E;
  --panel-2: #191440;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--space);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.star { color: var(--gold); }

/* ---------- Topo ---------- */
.topbar {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px clamp(16px, 3.33vw, 64px);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.topbar__brand em { font-style: normal; font-weight: 500; color: var(--gold); }
.topbar__nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.topbar__nav button {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .04);
  transition: border-color .2s, background .2s, color .2s;
}
.topbar__nav button:hover, .topbar__nav button:focus-visible { border-color: rgba(253, 183, 3, .6); color: var(--gold); outline: none; }

/* ---------- Galáxia ---------- */
.galaxy { position: relative; overflow: hidden; }
.galaxy__sky {
  position: absolute; inset: -64px 0 0; pointer-events: none;
  background:
    radial-gradient(30% 35% at 15% 58%, rgba(88, 52, 200, .45), transparent 70%),
    radial-gradient(36% 38% at 52% 22%, rgba(110, 50, 190, .38), transparent 70%),
    radial-gradient(32% 38% at 81% 68%, rgba(40, 70, 190, .42), transparent 70%),
    radial-gradient(28% 26% at 43% 88%, rgba(150, 70, 40, .30), transparent 70%),
    radial-gradient(22% 26% at 86% 20%, rgba(150, 40, 120, .28), transparent 70%),
    linear-gradient(180deg, #0B0924 0%, #0E0B2C 50%, #0A0820 100%);
}
.galaxy__stars { position: absolute; inset: 0; pointer-events: none; }
.st {
  position: absolute; width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff; opacity: var(--o);
  animation: twinkle var(--t) ease-in-out infinite alternate;
}
.st--big { box-shadow: 0 0 6px 1px rgba(255, 220, 140, .7); background: #FFE6A8; }
@keyframes twinkle { to { opacity: .1; } }

.galaxy__stage {
  position: relative; margin: 0 auto; max-width: 1920px;
  container-type: inline-size;
}

.galaxy__intro {
  position: absolute; z-index: 3; left: 3.33cqw; top: 1.2cqw; max-width: 40cqw;
}
.eyebrow { font-size: max(10px, .6cqw); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.galaxy__intro h1 { margin-top: .5cqw; font-size: max(32px, 2.6cqw); line-height: 1.05; font-weight: 700; letter-spacing: -.03em; }
.galaxy__lead { margin-top: 1cqw; font-size: max(13px, .78cqw); line-height: 1.55; color: var(--ink-2); max-width: 31cqw; }
.galaxy__hint { margin-top: 1.1cqw; display: inline-flex; align-items: center; gap: 10px; font-size: max(12px, .7cqw); font-weight: 600; color: var(--ink); padding: 8px 14px; border-radius: 999px; background: rgba(253, 183, 3, .1); border: 1px solid rgba(253, 183, 3, .35); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(253, 183, 3, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(253, 183, 3, 0); } 100% { box-shadow: 0 0 0 0 rgba(253, 183, 3, 0); } }

.legend {
  position: absolute; z-index: 3; right: 2cqw; top: .6cqw; white-space: nowrap;
  padding: max(14px, .6cqw) max(16px, .65cqw);
  border-radius: 14px; border: 1px solid var(--line);
  background: rgba(17, 13, 46, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: max(11px, .55cqw); line-height: 1.5; color: var(--ink-2);
}
.legend p { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.legend .legend__t { margin: 0 0 6px; font-weight: 700; color: var(--gold); font-size: max(12px, .7cqw); }
.legend i { flex: none; display: inline-block; }
.legend__route { width: 16px; height: 3px; border-radius: 2px; background: var(--gold-route); box-shadow: 0 0 6px var(--gold-route); }
.legend__sat { width: 8px; height: 8px; margin: 0 4px; border-radius: 50%; background: #E8E6FF; box-shadow: 0 0 6px #9C8CFF; }
.legend__loop { width: 16px; border-top: 2px dashed rgba(255, 255, 255, .55); }
.legend .star { width: 16px; text-align: center; }

.field { position: relative; width: 100%; container-type: inline-size; }
.route { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route path { fill: none; stroke-linecap: round; }
.route__glow { stroke: var(--gold-route); opacity: .35; }
.route__line { stroke: var(--gold-route); filter: drop-shadow(0 0 4px rgba(255, 194, 26, .8)); }
.route__spark { stroke: #FFF6D6; stroke-dasharray: 22 978; animation: spark 9s linear infinite; filter: drop-shadow(0 0 6px #fff); }
@keyframes spark { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
.route__loop { stroke: rgba(255, 255, 255, .45); stroke-dasharray: 14 14; }
.loop-label {
  position: absolute; transform: translate(-50%, 0); white-space: nowrap;
  font-size: max(11px, .65cqw); font-weight: 600; color: var(--ink-2);
}

/* ---------- Planeta ---------- */
.pl { position: absolute; width: 0; height: 0; z-index: 2; }
.pl:hover, .pl:focus-within { z-index: 4; }
.pl__orbit {
  position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, .1);
  pointer-events: none;
}
.pl__sway { position: absolute; inset: 0; animation: sway 11s ease-in-out var(--delay) infinite alternate; }
@keyframes sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1)); }
.sat__in { position: absolute; left: 0; top: 0; width: 0; height: 0; animation: sway 11s ease-in-out var(--delay) infinite alternate-reverse; }
.sat__dot {
  position: absolute; left: -.23cqw; top: -.23cqw; width: .46cqw; height: .46cqw; min-width: 7px; min-height: 7px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #C9C3FF 60%, #8A7CFF);
  box-shadow: 0 0 .5cqw rgba(170, 150, 255, .9);
}
.sat__lbl {
  position: absolute; bottom: .55cqw; white-space: nowrap; text-shadow: 0 1px 6px rgba(10, 8, 32, .95);
  font-size: max(10px, .55cqw); font-weight: 500; color: var(--ink-2); line-height: 1.2;
}
.sat--c .sat__lbl { left: 0; transform: translateX(-50%); }
.sat--l .sat__lbl { right: .2cqw; }
.sat--ml .sat__lbl { right: -.1cqw; }
.sat--r .sat__lbl { left: .2cqw; }
.sat--mr .sat__lbl { left: -.1cqw; }

.pl__body {
  position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2);
  width: var(--d); height: var(--d); border-radius: 50%;
  animation: float 6s ease-in-out var(--delay) infinite alternate;
  -webkit-tap-highlight-color: transparent;
}
@keyframes float { from { translate: 0 -.18cqw; } to { translate: 0 .18cqw; } }
.pl__halo {
  position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--glow) 45%, transparent) 0%, transparent 68%);
  transition: transform .4s ease, opacity .4s ease; opacity: .8;
}
.pl__sphere {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 62% 64%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .25) 7%, transparent 16%),
    radial-gradient(circle at 34% 28%, var(--c1) 0%, var(--c2) 45%, var(--c3) 100%);
  box-shadow:
    inset -1.2cqw -1.4cqw 2.4cqw rgba(0, 0, 0, .35),
    inset .4cqw .5cqw 1.2cqw rgba(255, 255, 255, .18),
    0 0 2.4cqw color-mix(in srgb, var(--glow) 55%, transparent);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease;
}
.pl__num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-weight: 800; font-size: calc(var(--d) * .3); letter-spacing: .02em; color: #fff;
  text-shadow: 0 .15cqw .6cqw rgba(0, 0, 0, .35);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}
.pl__ring { position: absolute; left: -32%; right: -32%; top: 22%; bottom: 22%; transform: rotate(-8deg); pointer-events: none; }
.pl__ring i { position: absolute; inset: 0; border-radius: 50%; border: max(2px, .22cqw) solid color-mix(in srgb, var(--c1) 85%, #fff); box-shadow: 0 0 .5cqw color-mix(in srgb, var(--glow) 70%, transparent); }
.pl__ring--back i { clip-path: inset(0 0 50% 0); opacity: .75; }
.pl__ring--front i { clip-path: inset(50% 0 0 0); }

.pl__body:hover .pl__sphere, .pl__body:focus-visible .pl__sphere { transform: scale(1.08); box-shadow: inset -1.2cqw -1.4cqw 2.4cqw rgba(0, 0, 0, .3), inset .4cqw .5cqw 1.2cqw rgba(255, 255, 255, .22), 0 0 4cqw var(--glow); }
.pl__body:hover .pl__halo, .pl__body:focus-visible .pl__halo { transform: scale(1.2); opacity: 1; }
.pl__body:hover .pl__num, .pl__body:focus-visible .pl__num { transform: scale(1.08); }
.pl__body:focus-visible { outline: 2px solid var(--gold); outline-offset: 1cqw; }

.pl__label {
  position: absolute; left: 0; top: calc(var(--d) / 2 + .7cqw); transform: translateX(-50%);
  text-align: center; white-space: nowrap; pointer-events: none;
}
.pl__label { text-shadow: 0 1px 8px rgba(10, 8, 32, .95), 0 0 2px rgba(10, 8, 32, .9); }
.pl__label strong { display: block; font-size: max(15px, 1.12cqw); font-weight: 600; letter-spacing: -.01em; }
.pl__label span { display: block; margin-top: .1cqw; font-size: max(11px, .62cqw); color: var(--ink-2); }

.pl__cases {
  position: absolute; left: 0; top: calc(var(--d) / 2 + 3.15cqw); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .3cqw;
}
.pl--top .pl__cases { top: auto; bottom: calc(var(--r) + 1.4cqw); flex-direction: column-reverse; }
.chip {
  display: inline-block; white-space: nowrap;
  padding: .2cqw .45cqw; border-radius: 999px;
  border: 1px solid rgba(253, 183, 3, .7); background: rgba(20, 14, 40, .7);
  font-size: max(10px, .5cqw); color: var(--ink-2); line-height: 1.5;
}
.chip b { color: var(--gold); font-weight: 700; }

/* Abaixo de 1700px os selos aparecem ao passar o mouse no planeta, pra não sobrepor os vizinhos */
@container (max-width: 1699px) {
  .pl__cases { opacity: 0; transform: translateX(-50%) translateY(6px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
  .pl:hover .pl__cases, .pl:focus-within .pl__cases { opacity: 1; transform: translateX(-50%); }
  .chip { font-size: 11px; padding: 3px 10px; background: rgba(20, 14, 40, .92); }
}

/* ---------- Rodapé ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  padding: 18px clamp(16px, 3.33vw, 64px) 24px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3);
}

/* ---------- Painel de detalhes ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 20; background: rgba(5, 4, 18, .55);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease;
}
.scrim.is-on { opacity: 1; }
.panel {
  position: fixed; z-index: 21; top: 0; right: 0; bottom: 0; width: min(640px, 100vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 30%);
  border-left: 1px solid var(--line);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .45);
  transform: translateX(104%); transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.panel.is-on { transform: none; }
.panel::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; pointer-events: none;
  background: radial-gradient(70% 100% at 15% 0%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%);
}
.panel__head { position: relative; display: flex; align-items: center; gap: 18px; padding: 28px 28px 20px; border-bottom: 1px solid var(--line); }
.panel__orb {
  flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 24px;
  background:
    radial-gradient(circle at 62% 64%, rgba(255, 255, 255, .8) 0, transparent 14%),
    radial-gradient(circle at 34% 28%, var(--c1), var(--c2) 45%, var(--c3));
  box-shadow: inset -8px -10px 18px rgba(0, 0, 0, .35), 0 0 28px color-mix(in srgb, var(--glow) 60%, transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.panel__orb[hidden] { display: none; }
.panel__titles { flex: 1; min-width: 0; }
.panel__kicker { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.panel__head h2 { margin-top: 2px; font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.panel__sub { margin-top: 2px; font-size: 14px; color: var(--ink-2); }
.panel__close {
  flex: none; align-self: flex-start; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); font-size: 15px; color: var(--ink-2);
  transition: border-color .2s, color .2s;
}
.panel__close:hover, .panel__close:focus-visible { border-color: var(--gold); color: var(--gold); outline: none; }
.panel__body { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 28px 32px; outline: none; }
.panel__nav { display: flex; justify-content: space-between; gap: 10px; padding: 14px 28px; border-top: 1px solid var(--line); background: var(--panel); }
.panel__nav[hidden] { display: none; }
.panel__nav button { padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); border: 1px solid var(--line); max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel__nav button:hover, .panel__nav button:focus-visible { color: var(--gold); border-color: rgba(253, 183, 3, .6); outline: none; }
.panel__nav #nextBtn { margin-left: auto; }
.panel__nav button[hidden] { display: none; }

.block { padding: 22px 0; border-bottom: 1px solid var(--line); }
.block:last-child { border-bottom: 0; }
.block__t { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.sats, .cases { display: flex; flex-wrap: wrap; gap: 8px; }
.satchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); font-size: 13px; font-weight: 500; }
.satchip i { width: 7px; height: 7px; border-radius: 50%; background: #E8E6FF; box-shadow: 0 0 6px #9C8CFF; }
.cases .chip { padding: 6px 12px; font-size: 13px; white-space: normal; }

/* Conteúdo vindo do doc */
.doc { font-size: 14.5px; line-height: 1.65; color: #DAD6F2; }
.doc > * + * { margin-top: 12px; }
.doc p + p { margin-top: 10px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc h3, .doc h4 { color: var(--ink); font-weight: 600; letter-spacing: -.01em; }
.doc h3 { font-size: 17px; margin-top: 22px; }
.doc h4 { font-size: 15px; margin-top: 20px; color: var(--gold); }
.doc ul, .doc ol { padding-left: 20px; }
.doc li + li { margin-top: 6px; }
.doc li::marker { color: var(--gold); }
.doc li ul, .doc li ol { margin-top: 6px; }
.doc blockquote { padding: 12px 16px; border-left: 3px solid var(--gold); background: rgba(255, 255, 255, .04); border-radius: 0 10px 10px 0; color: var(--ink-2); }
.doc .tbl { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.doc th, .doc td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 120px; }
.doc th { font-weight: 600; color: var(--ink); background: rgba(255, 255, 255, .05); white-space: nowrap; }
.doc tr:last-child td { border-bottom: 0; }
.doc .ia { padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(253, 183, 3, .35); background: linear-gradient(135deg, rgba(253, 183, 3, .08), rgba(253, 183, 3, .02)); }
.doc .ia__t strong { color: var(--gold); }
.doc .ia ul { margin-top: 8px; }

.more { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.more + .more { margin-top: 10px; }
.more summary {
  list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative;
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 400; color: var(--gold); transition: transform .2s; }
.more[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.more summary:hover, .more summary:focus-visible { color: var(--gold); outline: none; }
.more__in { padding: 0 16px 16px; }

/* ---------- Celular ---------- */
@media (max-width: 899px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 14px; }
  .topbar__nav { justify-content: flex-start; }
  .galaxy__stage { padding: 8px 16px 0; }
  .galaxy__intro { position: static; max-width: none; }
  .eyebrow { font-size: 10px; }
  .galaxy__intro h1 { font-size: 32px; margin-top: 8px; }
  .galaxy__lead { font-size: 14px; max-width: none; margin-top: 10px; }
  .galaxy__hint { margin-top: 14px; font-size: 12px; }
  .legend { position: static; width: auto; min-width: 0; margin-top: 16px; font-size: 12px; }
  .legend .legend__t { font-size: 12px; }
  .field { margin: 40px -16px 0; width: calc(100% + 32px); }
  .pl__label strong { font-size: 16px; }
  .pl__label span { font-size: 12px; }
  .pl__label { top: calc(var(--d) / 2 + 10px); }
  .sat__lbl { font-size: 11px; bottom: 7px; }
  .sat__dot { left: -4px; top: -4px; }
  .pl__cases { display: none !important; }
  .loop-label { font-size: 12px; }
  .panel {
    top: auto; left: 0; width: 100%; height: 90vh; height: 90dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 20px 20px 0 0;
    transform: translateY(104%);
  }
  .panel__head { padding: 22px 16px 16px; gap: 14px; }
  .panel__head::before { content: ""; position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(255, 255, 255, .2); }
  .panel__orb { width: 56px; height: 56px; font-size: 19px; }
  .panel__head h2 { font-size: 22px; }
  .panel__body { padding: 4px 16px 24px; }
  .panel__nav { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =================== v1.1 · playbook, login e X-wing =================== */
.topbar__rumo { border-color: rgba(253, 183, 3, .45) !important; color: var(--gold); }
.topbar__auth { display: inline-flex; align-items: center; gap: 6px; }
.is-legacy .topbar__auth { background: rgba(253, 183, 3, .14) !important; border-color: rgba(253, 183, 3, .6) !important; color: var(--gold); }

.lead { margin: 18px 0 4px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.doc a, .lead a, .chip a, .iacard a { color: var(--gold); text-decoration: underline; text-decoration-color: rgba(253, 183, 3, .45); text-underline-offset: 3px; }
.doc a:hover, .lead a:hover, .chip a:hover, .iacard a:hover { text-decoration-color: var(--gold); }
.cl__ig { font-size: 9px; font-weight: 700; letter-spacing: .06em; padding: 1px 4px; border-radius: 4px; border: 1px solid rgba(253, 183, 3, .5); vertical-align: 2px; text-decoration: none; display: inline-block; }
.doc small { font-size: 11.5px; }

.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.tag--claude { background: rgba(217, 119, 87, .18); color: #F2A285; border: 1px solid rgba(217, 119, 87, .45); }
.tag--gpt { background: rgba(16, 163, 127, .16); color: #5FD9B5; border: 1px solid rgba(16, 163, 127, .45); }
.tag--prompt { background: rgba(156, 134, 255, .16); color: #C2B5FF; border: 1px solid rgba(156, 134, 255, .45); }
.tag--tool { background: rgba(74, 163, 255, .14); color: #8CC4FF; border: 1px solid rgba(74, 163, 255, .4); }
.tag--warn { background: rgba(255, 255, 255, .06); color: var(--ink-2); border: 1px dashed rgba(255, 255, 255, .3); }

.iacard { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.iacard + .iacard { margin-top: 12px; }
.iacard__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.iacard__h h4 { flex-basis: 100%; margin-top: 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.iacard__q { margin-top: 8px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.iacard__q strong { color: var(--ink); font-weight: 600; }
.iacard__p { margin-top: 10px; padding-left: 20px; font-size: 13.5px; line-height: 1.55; color: #DAD6F2; }
.iacard__p li + li { margin-top: 5px; }
.iacard__p li::marker { color: var(--gold); font-weight: 600; }
.iacard__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 14px; border-radius: 10px;
  font-size: 13px; font-weight: 600; text-decoration: none !important; color: #1A1200 !important; background: var(--gold);
}
.iacard__link:hover { filter: brightness(1.08); }
.prompt { margin-top: 12px; border-radius: 10px; border: 1px solid rgba(156, 134, 255, .3); background: rgba(10, 8, 32, .6); position: relative; }
.prompt summary { list-style: none; cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; color: #C2B5FF; }
.prompt summary::-webkit-details-marker { display: none; }
.prompt summary::before { content: "▸ "; }
.prompt[open] summary::before { content: "▾ "; }
.prompt pre {
  margin: 0; padding: 4px 14px 14px; max-height: 420px; overflow: auto;
  font: 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #E6E3F7; white-space: pre-wrap; word-break: break-word;
}
.prompt__copy {
  position: absolute; right: 8px; top: 6px; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600;
  background: rgba(156, 134, 255, .2); border: 1px solid rgba(156, 134, 255, .45); color: #E6E1FF;
}
.prompt:not([open]) .prompt__copy { display: none; }
.prompt__copy:hover { background: rgba(156, 134, 255, .35); }

.lockcard {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 14px;
  border: 1px dashed rgba(253, 183, 3, .45); background: rgba(253, 183, 3, .05);
}
.lockcard__i { font-size: 22px; line-height: 1; }
.lockcard__t { font-weight: 700; color: var(--gold); font-size: 14px; }
.lockcard p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lockcard p + p { margin-top: 4px; }
.btn-gold { display: inline-block; margin-top: 12px; padding: 11px 18px; border-radius: 10px; font-weight: 700; font-size: 14px; background: var(--gold); color: #1A1200; }
.btn-gold:hover, .btn-gold:focus-visible { filter: brightness(1.08); outline: none; }
.btn-gold:disabled { opacity: .6; cursor: wait; }
.btn-sm { padding: 8px 14px; font-size: 13px; }

.doc blockquote.msg { margin-top: 8px; background: rgba(37, 211, 102, .06); border-left-color: #25D366; }
.doc blockquote.msg p + p { margin-top: 6px; }

.rumo { display: grid; gap: 8px; margin-top: 14px; }
.rumo__i {
  display: block; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03); transition: border-color .2s, background .2s;
}
.rumo__i:hover, .rumo__i:focus-visible { border-color: var(--glow); background: color-mix(in srgb, var(--glow) 10%, transparent); outline: none; }
.rumo__s { display: block; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.rumo__d { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2); }
.rumo__d b { color: var(--glow); filter: brightness(1.4); }

.lib__h { margin: 22px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.lib__h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.lib__h:first-child { margin-top: 4px; }

/* Login */
.scrim--login { z-index: 30; }
.login {
  position: fixed; z-index: 31; left: 50%; top: 50%; width: min(400px, calc(100vw - 32px));
  transform: translate(-50%, -46%); opacity: 0; transition: opacity .25s ease, transform .25s ease;
  padding: 32px 28px 28px; border-radius: 20px; border: 1px solid rgba(253, 183, 3, .3);
  background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  text-align: center;
}
.login.is-on { opacity: 1; transform: translate(-50%, -50%); }
.login__close { position: absolute; right: 14px; top: 14px; }
.login h2 { margin-top: 12px; font-size: 24px; font-weight: 700; }
.login > p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.login form { margin-top: 18px; text-align: left; }
.login label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.login label + label { margin-top: 12px; }
.login input {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px; border-radius: 10px; font: inherit; font-size: 15px;
  color: var(--ink); background: rgba(255, 255, 255, .05); border: 1px solid var(--line);
}
.login input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(253, 183, 3, .2); }
.login__erro { min-height: 20px; margin-top: 10px; font-size: 13px; color: #FF8C8C; }
.login .btn-gold { width: 100%; margin-top: 4px; }

/* X-wing */
.xwing { position: fixed; left: 0; top: 0; z-index: 15; width: 56px; height: 56px; pointer-events: none; opacity: 0; transition: opacity .2s; will-change: transform; filter: drop-shadow(0 0 8px rgba(160, 190, 255, .75)); }
.xwing.is-on { opacity: 1; }
.has-xwing .galaxy, .has-xwing .galaxy .pl__body { cursor: none; }
.xwing__fire { transform-origin: 32px 54px; animation: thrust .12s ease-in-out infinite alternate; }
@keyframes thrust { from { opacity: .65; transform: scaleY(.8); } to { opacity: 1; transform: scaleY(1.15); } }
.xwing.is-aim { filter: drop-shadow(0 0 10px rgba(255, 90, 90, .8)); }
.xwing.is-fire svg { animation: recoil .18s ease-out; }
@keyframes recoil { 40% { transform: translateY(4px) scale(.94); } }