:root{
  --bg:#020617;
  --bg-card:#020817;
  --bg-soft:#020617;
  --fg:#e5e7eb;
  --fg-strong:#f9fafb;
  --fg-sub:#9ca3af;
  --border:#1f2933;
  --accent:#38bdf8;
  --accent-soft:rgba(56,189,248,.25);
  --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:radial-gradient(circle at top,#0b1120 0,#020617 45%,#020617 100%);
  color:var(--fg);
  font-family:var(--font);
}

body{ min-height:100vh; }

.app{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:24px 12px 32px;
}

.app-inner{
  width:100%;
  max-width:1200px;
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:10px 16px 14px;
  margin-bottom:12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.9);
  background:rgba(15,23,42,.85);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 35px rgba(0,0,0,.55);
}

.logo-wrap{
  display:flex;
  flex-direction:column;
  gap:3px;
}

.logo{
  font-weight:800;
  letter-spacing:.04em;
  font-size:18px;
  color:var(--fg-strong);
}

.logo-sub{
  font-size:12px;
  color:var(--fg-sub);
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}

.nav-right > ul{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-right a{
  padding:6px 12px;
  border-radius:999px;
  text-decoration:none;
  color:var(--fg-sub);
  border:1px solid transparent;
  display:inline-block;
}

.nav-right a:hover{
  color:var(--fg-strong);
  border-color:rgba(55,65,81,.9);
  background:rgba(15,23,42,.9);
}

.nav-right .current-menu-item > a,
.nav-right a[aria-current="page"],
.nav-link--active{
  border-color:rgba(56,189,248,.95);
  background:rgba(15,23,42,.95);
  color:var(--fg-strong);
}

/* LAYOUT */
.layout{
  display:grid;
  grid-template-columns:minmax(0,3fr) minmax(0,1.3fr);
  gap:18px;
  align-items:flex-start;
}

/* CARDS */
.card{
  background:radial-gradient(circle at top left,#020b1f 0,#020617 45%,#020617 100%);
  border-radius:18px;
  border:1px solid rgba(15,23,42,.95);
  box-shadow:
    0 20px 45px rgba(0,0,0,.75),
    0 0 0 1px rgba(15,23,42,.9);
  padding:18px 18px 18px;
  margin-bottom:16px;
}

.card--soft{
  background:rgba(15,23,42,.9);
}

.card-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.card-title{
  font-size:15px;
  font-weight:700;
  color:var(--fg-strong);
}

.card-sub{
  font-size:12px;
  color:var(--fg-sub);
  margin-top:3px;
}

/* HERO */
.hero-tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(55,65,81,.9);
  font-size:13px;
  color:var(--fg-sub);
  margin-bottom:10px;
}

.hero-title{
  font-size:24px;
  font-weight:800;
  margin:0 0 6px;
  color:var(--fg-strong);
  letter-spacing:-0.01em;
}

.hero-title .accent{ color:var(--accent); }

.hero-sub{
  font-size:14px;
  color:var(--fg-strong);
  margin:0 0 8px;
  line-height:1.6;
}

.hero-desc{
  font-size:13px;
  color:var(--fg-sub);
  line-height:1.7;
  margin:0;
}

/* LONGFORM (Why I built this) */
.longform p{
  margin:0 0 10px;
  font-size:13px;
  line-height:1.8;
  color:var(--fg-sub);
}

.longform p:first-child{
  color:rgba(229,231,235,.92);
}

/* START HERE cards */
.where-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin-top:10px;
}

.where-card{
  display:flex;
  gap:10px;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(55,65,81,.9);
  background:rgba(15,23,42,.9);
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background .18s ease-out, border-color .18s ease-out, transform .18s ease-out;
}

.where-card:hover{
  background:rgba(2,6,23,.55);
  border-color:rgba(56,189,248,.35);
  transform:translateY(-1px);
}

.where-icon{
  width:26px;
  height:26px;
  border-radius:999px;
  background:rgba(30,64,175,.8);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
}

.where-main{
  font-size:13px;
  font-weight:600;
  margin-bottom:3px;
}

.where-desc{
  font-size:12px;
  color:var(--fg-sub);
  line-height:1.6;
}

.cover-note{
  margin-top:12px;
  font-size:12px;
  color:var(--fg-sub);
}

/* SIDEBAR */
.sidebar-section{ margin-bottom:16px; }

.sidebar-title{
  font-size:13px;
  font-weight:600;
  margin-bottom:4px;
}

.sidebar-sub{
  font-size:11px;
  color:var(--fg-sub);
  margin-bottom:8px;
}

/* Recent posts list */
.post-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.post-item-title{
  font-size:13px;
  font-weight:600;
}

.post-item-link{
  color:var(--fg-strong);
  text-decoration:none;
}

.post-item-link:hover{ text-decoration:underline; }

.post-item-meta{
  font-size:11px;
  color:var(--fg-sub);
}

/* FOOTER */
.footer{
  margin-top:18px;
  padding:12px 4px 0;
  border-top:1px solid rgba(15,23,42,.9);
  font-size:11px;
  color:var(--fg-sub);
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  justify-content:space-between;
}

/* RESPONSIVE */
@media (max-width:900px){
  .layout{ grid-template-columns:1fr; }
  .header{
    flex-direction:column;
    align-items:flex-start;
    border-radius:18px;
  }
}

@media (max-width:600px){
  .card{ padding:14px 12px 14px; }
  .hero-title{ font-size:20px; }
  .nav-right a{ padding:8px 14px; }
  .hero-desc{ font-size:12px; line-height:1.65; }
}

/* SSR blocks for bots + onboarding */
#ymx-hub-root .hub-ssr{
  background:#0f1724;
  border:1px solid var(--br);
  border-radius:16px;
  padding:16px;
  margin-bottom:16px;
}
#ymx-hub-root .hub-ssr__title{
  margin:0 0 8px 0;
  font-size:20px;
  font-weight:900;
  color:#eaf2ff;
}
#ymx-hub-root .hub-ssr__lead{
  margin:0 0 8px 0;
  font-size:13px;
  line-height:1.75;
  color:#cfe0ff;
}
#ymx-hub-root .hub-ssr__links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
#ymx-hub-root .hub-ssr__link{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #1f3a5f;
  background:#132840;
  color:#cfe0ff;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}
#ymx-hub-root .hub-ssr__noscript{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px dashed #2a3a52;
  background:#0d1626;
  color:#9fb0c3;
  font-size:12px;
}
#ymx-hub-root .hub-notes p{
  margin:0 0 10px 0;
  font-size:13px;
  line-height:1.8;
  color:#cfe0ff;
}
#ymx-hub-root .hub-notes__links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:10px 0 12px 0;
}
#ymx-hub-root .hub-notes__link{
  color:#cfe0ff;
  text-decoration:none;
  border-bottom:1px solid rgba(207,224,255,.35);
  font-size:12px;
  font-weight:800;
}
#ymx-hub-root .hub-notes__link:hover{
  border-bottom-color:rgba(207,224,255,.85);
}
#ymx-hub-root .hub-notes__disclaimer{
  margin-top:8px;
  font-size:12px;
  color:#9fb0c3;
}
@media (max-width: 520px){
  #ymx-hub-root .hub-ssr__title{ font-size:18px; }
}