@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root{
  --tl-navy: #2b506c;
  --tl-navy-2:#142a4b;
  --tl-ink:  #0b1220;
  --tl-slate:#64748b;
  --tl-line: rgba(255,255,255,.12);
  --tl-gold: #d4af37;
  --tl-bg:   #0b1324;
  --tl-card: rgba(255,255,255,.06);
  --tl-card2:rgba(255,255,255,.04);
}

.tl-body{
  background: radial-gradient(1200px 600px at 20% 0%, var(--tl-navy-2), var(--tl-bg));
  color:#e9eef7
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


.traits-columns {
  column-count: 2;
  column-gap: 1rem;
}

@media (max-width: 768px) {
  .traits-columns {
    column-count: 1;
  }
}

.trait-item {
  break-inside: avoid;
}


.tl-header{
  position: sticky;
  top:0;
  z-index:100;
  background: rgba(10,18,34,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--tl-line);
}

.tl-nav .navbar-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}

.main {
    font-size: 14px;
    color: #666666 !important;
}

  .acct-row{
    padding: .45rem .75rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
  .acct-row:last-child{ border-bottom: 0; }

  .acct-indent{
    position: relative;
    padding-left: .75rem;
    margin-left: .75rem;
    border-left: 0px solid rgba(0,0,0,.08);
  }

  .acct-name{ font-weight: 600; }
  .acct-meta{ font-size: .85rem; color: #6c757d; }
  .acct-badge{ font-variant-numeric: tabular-nums; font-size: 12pt;}

.tl-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.06em;
  background: linear-gradient(135deg, rgba(212,175,55,.22), rgba(255,255,255,.06));
  border:1px solid rgba(212,175,55,.25);
  color:#fff;
}

.tl-mark-sm{ width:32px; height:32px; border-radius:10px; font-size:.85rem; }

.tl-name{
  font-weight:800;
  letter-spacing:.18em;
  font-size: .95rem;
}

.tl-link{
  color: rgba(233,238,247,.88) !important;
  border-radius: 10px;
  padding: .5rem .75rem !important;
}
.tl-link:hover{
  background: rgba(255,255,255,.06);
  color:#fff !important;
}

.tl-btn-ghost{
  border-color: rgba(255,255,255,.25) !important;
  color:#fff !important;
}
.tl-btn-ghost:hover{ background: rgba(255,255,255,.08); }

.tl-btn-gold{
  border: 0 !important;
  font-weight: 700;
}

.tl-hero{
  padding: 4.5rem 0 3rem;
}

.tl-kicker{
  color: rgba(233,238,247,.78);
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size:.85rem;
  margin-bottom:.6rem;
}

.tl-hero-title{
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 850;
  letter-spacing: .02em;
  line-height: 1.05;
}

.tl-hero-sub{
  color: rgba(233,238,247,.82);
  font-size: 1.05rem;
  max-width: 52ch;
}

.tl-btn-primary{
  background: #2b506c;
  border: 0;
  color: #1b1b1b;
  font-weight: 800;
  padding: .75rem 1.05rem;
  border-radius: 12px;
}
.tl-btn-primary:hover{ filter: brightness(1.02); }

.tl-btn-secondary{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 700;
  padding: .75rem 1.05rem;
  border-radius: 12px;
}
.tl-btn-secondary:hover{ background: rgba(255,255,255,.12); }

.tl-hero-metrics{
  display:flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.tl-metric{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: .9rem 1rem;
  min-width: 160px;
}
.tl-metric-num{ font-weight: 900; letter-spacing:.08em; }
.tl-metric-label{ color: rgba(233,238,247,.75); font-size:.9rem; }

.tl-card-stack{ display:grid; gap: 1rem; }
.tl-card{
  background: var(--tl-card);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.1rem 1.1rem;
}
.tl-card-muted{ background: var(--tl-card2); }

.tl-card-title{
  font-weight: 850;
  letter-spacing:.04em;
  margin-bottom:.6rem;
}

.tl-list{ margin: 0 0 .7rem 1.1rem; color: rgba(233,238,247,.85); }
.tl-card-link{
  color: rgba(212,175,55,.95);
  text-decoration: none;
  font-weight: 800;
}
.tl-card-link:hover{ text-decoration: underline; }

.tl-btn-small{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  border-radius: 12px;
  padding: .65rem .9rem;
  font-weight: 700;
}

.tl-section{ padding: 2.5rem 0; }
.tl-section-alt{
  background: rgba(255,255,255,.03);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.tl-tile{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 1.1rem;
  height: 100%;
}
.tl-tile-icon{ font-size: 1.4rem; }
.tl-tile-title{ font-weight: 900; margin-top:.5rem; }
.tl-tile-text{ color: rgba(233,238,247,.78); margin:.4rem 0 .7rem; }
.tl-tile-link{
  text-decoration:none;
  color: rgba(212,175,55,.95);
  font-weight: 850;
}
.tl-tile-link:hover{ text-decoration: underline; }

.tl-h2{ font-weight: 900; margin:0; }
.tl-muted{ color: rgba(233,238,247,.68); }

.tl-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 1.1rem;
  height: 100%;
}
.tl-panel-title{ font-weight: 900; margin-bottom:.6rem; }
.tl-feed{
  list-style: none;
  padding: 0;
  margin: 0 0 .8rem 0;
  display:grid;
  gap: .55rem;
  color: rgba(233,238,247,.85);
}

.tl-badge{
  display:inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .08em;
  margin-right: .35rem;
}
.tl-badge-gold{ background: rgba(212,175,55,.18); border:1px solid rgba(212,175,55,.35); }
.tl-badge-silver{ background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); }
.tl-badge-blue{ background: rgba(96,165,250,.14); border:1px solid rgba(96,165,250,.30); }
.tl-badge-slate{ background: rgba(148,163,184,.14); border:1px solid rgba(148,163,184,.25); }

.tl-panel-link, .tl-footlink{
  color: rgba(233,238,247,.78);
  text-decoration:none;
  font-weight: 750;
}
.tl-panel-link:hover, .tl-footlink:hover{ color:#fff; text-decoration: underline; }

.tl-footer{
  padding: 2rem 0;
  border-top: 1px solid rgba(255,255,255,.10);
}
.tl-footbrand{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}