:root{
  --surface:#ffffff;
  --text:#0a0a0a;
  --border:rgba(0,0,0,.18);
  --ring:rgba(85,230,165,.45);
  --muted:#3f3f46;
  --muted-strong:#27272a;
}
.dark:root{
  --surface:#0a0a0a;
  --text:#fafafa;
  --border:rgba(255,255,255,.08);
  --muted:#d4d4d8;
  --muted-strong:#f4f4f5;
}
.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-200,
:root:not(.dark) .text-zinc-300,
:root:not(.dark) .text-zinc-400,
:root:not(.dark) .text-zinc-400\/90,
:root:not(.dark) .text-zinc-400\/80,
:root:not(.dark) .text-zinc-500,
:root:not(.dark) .text-zinc-500\/90,
:root:not(.dark) .text-zinc-500\/80,
:root:not(.dark) .text-zinc-500\/70{ color:var(--muted)!important }
:root:not(.dark) .text-zinc-600,
:root:not(.dark) .text-zinc-600\/90,
:root:not(.dark) .text-zinc-700,
:root:not(.dark) .text-zinc-700\/80,
:root:not(.dark) .text-zinc-800\/60{ color:var(--muted-strong)!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) }

/* === Scoped brand scrollbar (subtle) === */
/* Apply with .brand-scroll on specific overflow containers only */
.brand-scroll::-webkit-scrollbar {
  height: 6px;                 /* horizontal rails only */
  width: 6px;                  /* in case of vertical use */
  background: transparent;
}
.brand-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.brand-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #55e6a5, #ff6347);
  border-radius: 9999px;
  opacity: .6;                 /* dial back intensity */
  transition: opacity .2s ease, box-shadow .2s ease;
}
.brand-scroll:hover::-webkit-scrollbar-thumb {
  opacity: .85;                /* gentle lift on hover */
  box-shadow: 0 0 4px rgba(85,230,165,.2), 0 0 4px rgba(255,99,71,.15);
}

/* Firefox (scoped) */
.brand-scroll {
  scrollbar-width: thin;
  scrollbar-color: #55e6a5 transparent;
  overscroll-behavior-x: contain; /* stop parent from also scrolling */
}

/* Prevent page-level horizontal scrollbar altogether */
html, body { overflow-x: hidden; }

/* Upcoming scroller */
.upcoming-wrap{
  position:relative;
  margin:0 -1.25rem;
  padding:0 1.25rem 2.25rem;
  overflow:hidden;
  --edge-size:64px;
}
.upcoming-wrap::before,
.upcoming-wrap::after{
  content:"";
  position:absolute;
  top:0;
  bottom:2.25rem;
  width:var(--edge-size);
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:2;
}
.upcoming-wrap::before{
  left:0;
  background:linear-gradient(90deg,rgba(10,10,10,.75),rgba(10,10,10,0));
  opacity:.6;
}
.upcoming-wrap::after{
  right:0;
  background:linear-gradient(270deg,rgba(10,10,10,.75),rgba(10,10,10,0));
  opacity:.6;
}
:root:not(.dark) .upcoming-wrap::before{
  background:linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,0));
}
:root:not(.dark) .upcoming-wrap::after{
  background:linear-gradient(270deg,rgba(255,255,255,.8),rgba(255,255,255,0));
}
.upcoming-wrap.is-start::before{ opacity:0; }
.upcoming-wrap.is-end::after{ opacity:0; }

.upcoming-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,1fr);
  gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:1.5rem;
  padding:0 1rem 1.25rem;
  margin:0;
  list-style:none;
  cursor:grab;
  mask-image:linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 10%,black 90%,transparent 100%);
}
.upcoming-track.is-dragging{ cursor:grabbing; }
.upcoming-track::-webkit-scrollbar{ height:6px; }
.upcoming-track::-webkit-scrollbar-thumb{ border-radius:9999px; }
.upcoming-card{ scroll-snap-align:start; min-width:0; }

.upcoming-progress{
  position:absolute;
  left:1.5rem;
  right:1.5rem;
  bottom:1rem;
  height:2px;
  background:linear-gradient(90deg,rgba(85,230,165,.18),rgba(255,99,71,.18));
  border-radius:999px;
  overflow:hidden;
}
.upcoming-progress-bar{
  --progress:0;
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,#55e6a5,#ff6347);
  transform-origin:left;
  transform:scaleX(var(--progress));
  transition:transform .18s ease;
}
@media (prefers-reduced-motion: reduce){
  .upcoming-track{ scroll-behavior:auto; }
  .upcoming-progress-bar{ transition:none; }
}

/* 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;
  grid-auto-rows: 1fr;
}
.cb > li{
  display:flex;
}
.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);
  height: 100%;
}
.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:var(--r,0px);
  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); }
#activity .section-head{ margin-bottom:.75rem }
#activity .stat-pill{ grid-template-columns:auto auto; column-gap:.4rem }
#activity .stat-pill .label{ font-size:.72rem }
#activity .stat-pill .value{ line-height:1 }
.activity-divider{ margin:.75rem 0 1rem; height:1px; background:linear-gradient(90deg, transparent, var(--border), transparent) }
#activity .oss-card{ border-color:color-mix(in oklab, var(--border) 92%, transparent) }
#activity .oss-card:hover{ border-color:rgba(85,230,165,.55) }
#activity .oss-grid{ gap:.75rem }
#activity .oss-meta{ color:color-mix(in oklab, var(--text) 55%, var(--surface) 45%) }
.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-1,
.clamp-2{ display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden }
.clamp-1{ -webkit-line-clamp:1 }
.clamp-2{ -webkit-line-clamp:2 }
  .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 } }

/* Contributions grid */
.contribs-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  margin-top:1rem;
}
.contribs-skeleton{ opacity:.6; }
.contrib-card{
  display:block;
  border-radius:12px;
  padding:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .15s ease, border-color .2s ease, background .2s ease;
}
.contrib-card:hover,
.contrib-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
}
.contrib-title{
  font-weight:600;
  line-height:1.35;
  margin:8px 0;
}
.contrib-meta{
  opacity:.7;
  font-size:.9rem;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* OSS micro-cards */
.oss-grid{ display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:.6rem }
@media(min-width:640px){ .oss-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:768px){ .oss-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media(min-width:1280px){ .oss-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }

.oss-card{
  display:flex; flex-direction:column; gap:.55rem;
  padding:.85rem; border:1px solid var(--border); border-radius:var(--r);
  background:color-mix(in oklab,var(--surface) 98%,var(--text) 2%);
  transition:border-color .18s ease, transform .18s ease;
  text-decoration:none; color:inherit;
}
.dark .oss-card{ background:linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.06)) }
.oss-card:hover{ border-color:rgba(85,230,165,.55); transform:translateY(-1px) }
.oss-card:focus-visible{ outline:2px solid rgba(85,230,165,.55); outline-offset:3px; border-color:rgba(85,230,165,.55) }

.oss-head{ display:flex; gap:.55rem; align-items:center; min-width:0 }
.oss-ava{ width:32px; height:32px; border-radius:9999px; background:#111; overflow:hidden; flex:0 0 32px; object-fit:cover; box-shadow:0 0 0 1px rgba(0,0,0,.12) }
.dark .oss-ava{ box-shadow:0 0 0 1px rgba(255,255,255,.08) }
.oss-dot{ width:6px; height:6px; border-radius:9999px; margin-left:auto; opacity:.9; flex:0 0 6px }
.oss-repo{ font-weight:600; line-height:1.2; font-size:.88rem }
.oss-title{ margin-top:.1rem; color:color-mix(in oklab,var(--text) 70%,var(--surface) 30%); line-height:1.3; font-size:.8rem }

.oss-pill{
  align-self:flex-start; margin-top:.2rem;
  font-size:.66rem; text-transform:uppercase; letter-spacing:.08em;
  padding:.18rem .45rem; border-radius:9999px; border:1px solid var(--border);
  color:color-mix(in oklab,var(--text) 68%,var(--surface) 32%);
  background:color-mix(in oklab,var(--surface) 96%,var(--text) 4%);
}

.oss-meta{
  display:flex; gap:.5rem; align-items:center; margin-top:.15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.7rem; color:color-mix(in oklab,var(--text) 58%,var(--surface) 42%);
}
.oss-meta .sep{ opacity:.45 }
.oss-sha{ opacity:.8 }

.tetris-loader{ display:grid; grid-template-columns:repeat(4,10px); gap:3px }
.tetris-loader span{
  width:10px; height:10px; border-radius:3px;
  background:linear-gradient(135deg,#55e6a5,rgba(85,230,165,.45));
  animation:tetrisBounce 1.2s ease-in-out infinite;
}
.tetris-loader span:nth-child(2){ animation-delay:.1s }
.tetris-loader span:nth-child(3){ animation-delay:.2s }
.tetris-loader span:nth-child(4){ animation-delay:.3s }
.tetris-loader span:nth-child(5){ animation-delay:.4s }
.tetris-loader span:nth-child(6){ animation-delay:.5s }
.tetris-loader span:nth-child(7){ animation-delay:.6s }
.tetris-loader span:nth-child(8){ animation-delay:.7s }
.tetris-loader span:nth-child(9){ animation-delay:.8s }
.tetris-loader span:nth-child(10){ animation-delay:.9s }
.tetris-loader span:nth-child(11){ animation-delay:1s }
.tetris-loader span:nth-child(12){ animation-delay:1.1s }

@keyframes tetrisBounce{
  0%,100%{ transform:translateY(0); opacity:.85 }
  50%{ transform:translateY(-4px); opacity:1 }
}

/* Projects tabs */
.tab-list{
  display:inline-flex;
  gap:0.75rem;
  border-bottom:1px solid var(--border);
  padding-bottom:0.4rem;
}

.tab-btn{
  position:relative;
  padding:0.25rem 0.5rem;
  background:transparent;
  border:0;
  color:color-mix(in oklab,var(--text) 75%,var(--surface) 25%);
  font-size:0.9rem;
  font-weight:500;
  cursor:pointer;
}

.tab-btn::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-0.45rem;
  height:2px;
  background:#55e6a5;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.tab-btn[aria-selected="true"]{
  color:#55e6a5;
}

.tab-btn[aria-selected="true"]::after{
  transform:scaleX(1);
}

.tab-hidden{ display:none; }

/* Writing layout helper */
.writing-grid{ align-items:stretch; }
@media (min-width:768px){
  .writing-grid{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); }
}

/* Writing: make post anchors equal height columns */
#writing #blogList > a.post-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

#writing #blogList > a.post-card .p-4{
  display:flex;
  flex-direction:column;
  flex:1;
}

#writing #blogList > a.post-card .p-4 > *:last-child{
  margin-top:auto;
}

/* Writing: sticky sidebar card accent (match post top bar) */
.writing-book{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:100%;
}
.writing-book.sticky{
  position:sticky;
}
.writing-book::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,#55e6a5,transparent 60%);
  opacity:.9;
  border-top-left-radius:var(--r);
  border-top-right-radius:var(--r);
}

.writing-book .book-cta{
  align-self:flex-start;
  background:color-mix(in oklab,var(--surface) 85%,transparent);
}

/* Sticky offset for short viewports */
@media (max-height:740px){
  .writing-book{ top:12px; }
}

/* Contact collapsible */
#humanChallenge{
  overflow:hidden;
  max-height:420px;
  transition:max-height .32s ease, opacity .24s ease, padding .32s ease, margin .32s ease, border-color .32s ease;
}

#humanChallenge.is-collapsed{
  max-height:0;
  opacity:0;
  pointer-events:none;
  padding-block:0;
  margin-bottom:0;
  border-color:transparent;
}

@media (prefers-reduced-motion: reduce){
  .tab-btn::after{ transition:none; }
  #humanChallenge{ transition:none; }
}