/* ============================================
   AI Era — Layout
   ============================================ */

/* ----- Navigation ----- */
nav{
  position:fixed;left:0;right:0;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px var(--space-xl);
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,rgba(3,3,5,.82),rgba(3,3,5,.48));
  backdrop-filter:blur(16px);
}
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:700;font-size:1.12rem;letter-spacing:-.45px;
}
.logo span{color:var(--indigo)}

.logo-mark{
  width:22px;height:22px;
  border:1px solid rgba(165,180,252,.7);
  border-radius:7px;
  display:grid;place-items:center;position:relative;
  box-shadow:inset 0 0 14px rgba(129,140,248,.12),0 0 18px rgba(99,102,241,.09);
}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;background:#a5b4fc}
.logo-mark:before{width:10px;height:1px}
.logo-mark:after{height:10px;width:1px}


.nav-status{
  font-family:var(--font-mono);font-size:.67rem;color:#a5b4fc;
  border:1px solid rgba(129,140,248,.22);
  background:rgba(129,140,248,.07);
  padding:7px 11px;border-radius:var(--radius-pill);
}

/* ----- Intro Section ----- */
.intro{
  position:fixed;left:var(--space-xl);top:112px;
  z-index:18;max-width:365px;pointer-events:none;
}

/* ----- Labels Container ----- */
#labels{position:fixed;inset:0;z-index:12;pointer-events:none}

/* ----- Controls bar ----- */
.controls{
  position:fixed;left:var(--space-xl);bottom:32px;z-index:20;
  display:flex;align-items:center;gap:9px;
}