:root{ --surface:#ffffff; --text:#0a0a0a; --border:rgba(0,0,0,.18); --ring:rgba(85,230,165,.45); --muted:#3f3f46 }
.dark:root{ --surface:#0a0a0a; --text:#fafafa; --border:rgba(255,255,255,.08); --muted:#d4d4d8 }
.border-zinc-800\/60{ border-color:var(--border)!important }
.bg-black\/20{ background-color:color-mix(in oklab,var(--surface) 85%,#000)!important }
.bg-zinc-900\/30{ background-color:color-mix(in oklab,var(--surface) 95%,#000)!important }

:root:not(.dark) .text-zinc-300,:root:not(.dark) .text-zinc-400,:root:not(.dark) .text-zinc-400\/90,:root:not(.dark) .text-zinc-500{ color:var(--muted)!important }
:root:not(.dark) .text-brand{ color:#047857!important }
:root:not(.dark) .hover\:text-brand:hover{ color:#047857!important }

/* Radius system */
html[data-radius="soft"]{ --r:12px }
html[data-radius="sharp"]{ --r:6px }
html[data-radius="square"]{ --r:0px }
.r{ border-radius:var(--r) }

/* Subtle dotted grid with parallax */
.grid-bg{
  background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 14px 14px;
  transform: translateZ(0);
  will-change: background-position;
  mask-image: linear-gradient(to bottom, black, black 75%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, black, black 75%, transparent);
}
.dark .grid-bg{ background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px) }

/* Smooth theme transition */
body{ font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; transition: background-color .25s ease, color .25s ease; background:var(--surface); color:var(--text) }

a{ transition:color .15s ease,border-color .15s ease,background-color .15s ease }
a:not([class]){ text-decoration:underline; text-decoration-color:rgba(85,230,165,.5); text-underline-offset:4px }
a:not([class]):hover{ text-decoration-color:#55e6a5 }
::selection{ background:rgba(85,230,165,.35); color:var(--text) }

/* Focus ring */
.focus-ring:focus{ outline:none; box-shadow:0 0 0 3px var(--ring) }

/* Emphasis */
.grad-brand{ background:linear-gradient(90deg,#55e6a5 0%,#7cfcc0 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.grad-accent{ background:linear-gradient(90deg,#ff7b62 0%,#ff6347 100%); -webkit-background-clip:text; background-clip:text; color:transparent }

/* Cards: glassy, flatter hover */
.card{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient( to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02) );
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.dark .card{
  background: linear-gradient( to bottom, rgba(0,0,0,.20), rgba(0,0,0,.10) );
}
.card:hover{ box-shadow:0 6px 16px rgba(0,0,0,.18),0 0 0 1px rgba(85,230,165,.45); border-color:rgba(85,230,165,.55); transform: translateY(-1px) }
@media (prefers-reduced-motion: reduce){ .card, .card:hover{ transition:none; transform:none; box-shadow:none } }

/* Skip link */
.skip{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
.skip:focus{ left:1rem; top:1rem; width:auto; height:auto; background:var(--surface); color:var(--text);
  padding:.5rem .75rem; border-radius:.5rem; z-index:50; border:1px solid var(--border) }

/* Theme toggle spin */
.spin{ transition: transform .4s ease }
.spin.spin-anim{ transform: rotate(180deg) }

/* Currently building — glassy feature cards */
.cb{ counter-reset: item }
.cb-item{
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid var(--border);
}
.dark .cb-item{ background: linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.10)) }
.cb-item:hover{ border-color: rgba(85,230,165,.55); transform:none; box-shadow:none }
.cb-item::before{
  counter-increment: item;
  content: counter(item);
  position: absolute; inset: -1px auto auto -1px;
  width: 24px; height: 24px; display: grid; place-items: center;
  background: rgba(85,230,165,.3); color: #55e6a5; font-weight: 700; font-size: 12px;
  border-radius:0;
}
.cb-top{
  position:absolute; left:0; right:0; top:0; height:1px;
  background: linear-gradient(90deg, rgba(85,230,165,.7), rgba(255,99,71,.65));
  opacity:.35;
}
@media (prefers-reduced-motion: reduce){
  .cb-item, .cb-item:hover{ transition:none; transform:none; box-shadow:none }
}
/* Now timeline micro interactions */
.now-dot{ transition:box-shadow .2s ease, background-color .2s ease }
.now-dot.active::after{ content:''; position:absolute; inset:-6px; border:1px solid rgba(85,230,165,.6); border-radius:9999px }
.now-dot.active{ animation:nowPulse 2s ease-in-out infinite }
.now-item:hover .now-dot,
.now-item:focus-visible .now-dot{ box-shadow:0 0 0 4px rgba(85,230,165,.45); background-color:#55e6a5 }
.now-item:hover .now-title,
.now-item:focus-visible .now-title{ color:#fff; font-weight:600 }
@media (prefers-reduced-motion: reduce){
  .now-dot, .now-progress, .now-today{ transition:none !important }
}

@keyframes nowPulse{
  0%,100%{ transform:scale(1) }
  50%{ transform:scale(1.3) }
}

/* Line icons matching the logo vibe */
.icon-line{ stroke: currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; fill:none }

/* Stat pills */
.stat-pill{
  display:grid; grid-template-columns:auto 1fr; column-gap:.5rem; align-items:baseline;
  padding:.4rem .6rem; border-radius:8px;
  border:1px solid var(--border); background:color-mix(in oklab,var(--surface) 98%,var(--text) 2%);
}
.dark .stat-pill{ background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.05)) }
.stat-pill .label{ font-size:.75rem; color:color-mix(in oklab,var(--text) 65%,var(--surface) 35%) }
.stat-pill .value{ font-size:1rem; font-weight:600; color:var(--text); }
.section { margin-top: 3.5rem; margin-bottom: 3.5rem; }
.section > * + * { margin-top: 1.25rem; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:.75rem; }
.eyebrow {
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:.78rem;
  color:#55e6a5;
  display:inline-block;
  border-bottom:1px solid rgba(85,230,165,.3);
  padding-bottom:.125rem;
}
.soft-hr { height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }
.t-card { border:1px solid var(--border); border-radius:var(--r); padding:1rem; background:color-mix(in oklab,var(--surface) 98%,var(--text) 2%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition: border-color .18s ease, transform .18s ease; }
.t-card:hover { border-color: rgba(85,230,165,.55); transform: translateY(-1px) scale(1.01); }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .badge{ display:inline-flex; align-items:center; gap:.25rem; padding:0 .4rem; border-radius:6px; border:1px solid var(--border); font-size:.65rem; line-height:1.4; color:color-mix(in oklab,var(--text) 70%,var(--surface) 30%); background:color-mix(in oklab,var(--surface) 96%,var(--text) 4%) }
  .badge svg{ width:.75rem; height:.75rem }

  .post-card{
    --accent:#55e6a5; /* fallback */
    position:relative;
    border-radius:var(--r);
  }
  .post-card::before{
    content:"";
    position:absolute; inset:0 0 auto 0; height:3px;
    background:linear-gradient(90deg,var(--accent),transparent 60%);
    opacity:.9;
  }
  .post-card::after{
    content:"";
    position:absolute; inset:-10% -10% 30% 50%;
    background:radial-gradient(50% 60% at 20% 40%, color-mix(in oklab, var(--accent) 20%, transparent) 0%, transparent 60%);
    filter:blur(16px); pointer-events:none;
  }
  .post-card:hover{
    box-shadow:0 0 0 1px color-mix(in oklab,var(--accent) 35%,transparent),
               0 10px 40px -10px color-mix(in oklab,var(--accent) 35%,transparent);
    transform:translateY(-1px);
    transition:box-shadow .25s,transform .25s;
  }
  .post-card .post-tag{
    border:1px solid color-mix(in oklab,var(--accent) 60%,#0a0a0a);
    color:color-mix(in oklab,var(--accent) 80%,#e5e5e5);
    background:color-mix(in oklab,var(--accent) 10%,transparent);
  }

  /* Tag mapping */
  .post-card[data-tag="guides"]   { --accent:#55e6a5; }
  .post-card[data-tag="tools"]    { --accent:#60a5fa; }
  .post-card[data-tag="seo"]      { --accent:#f59e0b; }
  .post-card[data-tag="wellness"] { --accent:#a78bfa; }
  .post-card[data-tag="news"]     { --accent:#f87171; }

  @media (min-width:640px){ .section{ margin-top:4rem; margin-bottom:4rem } }

/* Tetris loader animation for GitHub contributions */
.tetris-loader{
  display:flex;
  gap:4px;
  justify-content:center;
  align-items:flex-start;
  height:80px;
}
.tetris-loader span{
  width:12px;
  height:12px;
  background:#55e6a5;
  opacity:0;
  animation:tetris-fall 1.2s infinite;
}
.tetris-loader span:nth-child(2){ animation-delay:.15s; }
.tetris-loader span:nth-child(3){ animation-delay:.3s; }
.tetris-loader span:nth-child(4){ animation-delay:.45s; }
@keyframes tetris-fall{
  0%{ transform:translateY(-20px); opacity:0; }
  30%{ opacity:1; }
  80%{ transform:translateY(0); opacity:1; }
  100%{ opacity:0; }
}