/* Critical: above-fold paint */
body { background: #0a192f; color: #8892b0 }
[data-theme="light"] body { background: #f8f9fc; color: #555770 }

/* ── Design System ─────────────────────────────────────────────────
   Navy dark theme, single teal accent, cursor glow, generous spacing.
   Inspired by brittanychiang.com + Apple minimalism.
   ─────────────────────────────────────────────────────────────────── */

:root, [data-theme="dark"] {
  --bg:      #0a192f;
  --bg-alt:  #112240;
  --bg-glow: #233554;
  --accent:  #64ffda;
  --t-bright:#e6f1ff;
  --t-head:  #ccd6f6;
  --t-body:  #8892b0;
  --t-muted: #495670;
  --border:  rgba(100,255,218,.1);
  --border-h:rgba(100,255,218,.25);
  --shadow:  rgba(2,12,27,.7);
  --snow:    220,230,255;

  --sans: 'Inter','Ubuntu',system-ui,-apple-system,sans-serif;
  --mono: 'JetBrains Mono','Fira Code','Consolas',monospace;

  --ease: cubic-bezier(.645,.045,.355,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

[data-theme="light"] {
  --bg:      #f8f9fc;
  --bg-alt:  #ffffff;
  --bg-glow: #eef1f6;
  --accent:  #0a7e6a;
  --t-bright:#1a1a2e;
  --t-head:  #2d2d44;
  --t-body:  #555770;
  --t-muted: #9ca3b8;
  --border:  rgba(10,126,106,.1);
  --border-h:rgba(10,126,106,.2);
  --shadow:  rgba(0,0,0,.08);
  --snow:    160,180,210;
}

/* ── Reset ────────────────────────────────────────────────────────── */
@font-face { font-family:'Ubuntu'; src:url(/assets/ubuntu.ttf)format("truetype"); font-display:swap }
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }

body {
  font: 400 18px/1.6 var(--sans);
  color: var(--t-body);
  background: var(--bg);
  min-height: 100dvh;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}

::selection { background: rgba(100,255,218,.15); color: var(--t-bright) }
[data-theme="light"] ::selection { background: rgba(10,126,106,.12) }

::-webkit-scrollbar { width:6px }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius:3px }

/* ── Cursor glow (the wow factor) ─────────────────────────────────── */
.glow-overlay {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(100,255,218,.04), transparent 40%);
  transition: background .3s ease;
}
[data-theme="light"] .glow-overlay {
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(10,126,106,.03), transparent 40%);
}

/* ── Canvas ───────────────────────────────────────────────────────── */
.sf-wrap { position:fixed; inset:0; z-index:50; pointer-events:none }
.sf-canvas { width:100%; height:100%; pointer-events:none }

/* ── Nav ──────────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100; height: 64px;
  display: flex; align-items: center;
  padding: 0 clamp(24px,5vw,50px);
  background: rgba(10,25,47,.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 10px 30px -10px var(--shadow);
  transition: transform .3s var(--ease), background-color .4s ease;
}
[data-theme="light"] .nav { background: rgba(248,249,252,.9) }

.nav.hidden { transform: translateY(-100%) }

.brand {
  font: 700 1.1rem var(--mono);
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 1px;
  margin-right: auto;
}

.links { display:flex; gap:4px; list-style:none }
.link {
  font: 500 13px/1 var(--mono);
  color: var(--t-body);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 4px;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.link:hover, .link[aria-current="page"] { color: var(--accent) }
.link::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.link { position: relative }
.link:hover::after { transform: scaleX(1) }
.link[aria-current="page"]::after, .link.scroll-active::after {
  background: linear-gradient(90deg, var(--accent), #818cf8, #f472b6, var(--accent));
  background-size: 300% 100%;
  animation: gradientShift 3s ease infinite;
  height: 2px;
  transform: scaleX(1);
}
.link .num { color: var(--accent); font-size: 12px; margin-right: 4px }

.nav-r { display:flex; align-items:center; gap:6px; margin-left:16px }
.langs { position:relative }
.lang-current { font:600 12px var(--mono); color:var(--accent); cursor:pointer; padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:transparent; transition:border-color .2s; display:flex; align-items:center; gap:4px }
.lang-current:hover { border-color:var(--accent) }
.lang-current::after { content:'\25BE'; font-size:10px; color:var(--t-muted) }
.lang-dropdown { position:absolute; top:100%; right:0; margin-top:4px; background:var(--bg-alt); border:1px solid var(--border); border-radius:4px; overflow:hidden; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity .2s,transform .2s; z-index:110; min-width:60px; box-shadow:0 8px 24px var(--shadow) }
.langs.open .lang-dropdown { opacity:1; transform:none; pointer-events:auto }
.pill { display:block; padding:8px 14px; font:500 12px var(--mono); color:var(--t-body); text-decoration:none; transition:background .2s,color .2s; border:none; cursor:pointer; background:transparent; width:100%; text-align:left }
.pill:hover { background:rgba(100,255,218,.05); color:var(--accent) }
.pill.on { color:var(--accent); background:rgba(100,255,218,.07) }

.icon-btn {
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--t-body);
  font: 600 12px var(--mono);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: all .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent) }
[data-theme="light"] .icon-btn { border-color: rgba(10,126,106,.15); color: #555770 }
[data-theme="light"] .icon-btn:hover { border-color: #0a7e6a; color: #0a7e6a }
.menu-btn { display:none }

/* ── Layout ───────────────────────────────────────────────────────── */
.wrap {
  position: relative; z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(24px,10vw,150px);
}

/* ── Sections ─────────────────────────────────────────────────────── */
.section {
  padding: 60px 0;
  margin-bottom: 0;
}
.section-title + .section { padding-top: 0 }

.section-title {
  font: 700 clamp(22px,3vw,28px)/1.1 var(--sans);
  color: var(--t-head);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.section-title.vis { opacity: 1; transform: none }
.section-title .num {
  font: 500 clamp(16px,2vw,20px) var(--mono);
  color: var(--accent);
}
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  margin-left: 16px;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 0 40px;
}

.hero-greeting {
  font: 500 clamp(14px,2vw,16px) var(--mono);
  color: var(--accent);
  margin-bottom: 20px;
  min-height: 1.6em;
  overflow: hidden;
}
.hero-greeting .greet-text {
  display: inline-block;
  transition: transform .45s var(--ease-out), opacity .45s var(--ease-out);
}
.hero-greeting .greet-text.out { transform: translateY(-110%); opacity: 0 }
.hero-greeting .greet-text.entering { transform: translateY(110%); opacity: 0 }

.hero-name {
  font: 700 clamp(36px,7vw,72px)/1.05 var(--sans);
  color: var(--t-bright);
  letter-spacing: -1px;
  min-height: 1.1em;
}

.hero-tagline {
  font: 700 clamp(32px,6vw,64px)/1.1 var(--sans);
  color: var(--t-head);
  letter-spacing: -0.5px;
  margin-top: 4px;
  min-height: 1.2em;
}

.hero-body {
  max-width: 540px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 1.6;
}

.hero-cta {
  display: inline-block;
  margin-top: 40px;
  padding: 14px 28px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  font: 500 14px var(--mono);
  color: var(--accent);
  text-decoration: none;
  transition: all .25s var(--ease);
}
.hero-cta:hover { background: rgba(100,255,218,.07) }

.hero-socials {
  display: flex; gap: 16px; margin-top: 24px;
}
.hero-social {
  color: var(--t-muted);
  transition: color .2s, transform .2s;
  display: flex; align-items: center;
}
.hero-social:hover { color: var(--accent); transform: translateY(-2px) }
.hero-social svg { width: 20px; height: 20px; transition: transform .3s var(--ease-out) }

/* Profile image (smaller, right side on desktop) */
.hero-row { display: flex; align-items: center; gap: 48px }
.hero-text { flex: 1 }
.avatar-wrap {
  position: relative;
  width: 200px; height: 200px;
  flex-shrink: 0;
}
.avatar-ring {
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  transform: translate(8px, 8px);
  transition: transform .3s var(--ease);
}
.avatar-wrap:hover .avatar-ring { transform: translate(4px, 4px) }
.avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  filter: grayscale(20%);
  transition: filter .3s var(--ease);
}
.avatar-wrap:hover .avatar { filter: grayscale(0); transform: scale(1.03); box-shadow: 0 12px 40px rgba(100,255,218,.15) }

/* ── Card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-alt);
  border-radius: 4px;
  padding: 28px 28px;
  border: 1px solid transparent;
  box-shadow: 0 10px 30px -15px var(--shadow);
  transition: all .25s var(--ease), background-color .4s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: var(--border);
  box-shadow: 0 20px 30px -15px var(--shadow);
}
[data-theme="light"] .card { border-color: rgba(10,126,106,.06); box-shadow: 0 4px 20px rgba(0,0,0,.04) }
[data-theme="light"] .card:hover { border-color: rgba(10,126,106,.15); box-shadow: 0 12px 30px rgba(0,0,0,.08) }

/* ── Markdown ─────────────────────────────────────────────────────── */
.md h4 { color: var(--t-bright); font-size: 18px; font-weight: 600; margin: 24px 0 8px }
.md h4:first-child { margin-top: 0 }
.md p { margin-bottom: 10px }
.md ul { padding-left: 20px; margin-bottom: 12px }
.md li { margin-bottom: 6px; padding-left: 4px }
.md li::marker { color: var(--accent) }
.md strong { color: var(--t-bright); font-weight: 600 }
.md a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity .2s;
}
.md a:hover { opacity: .7 }
.md hr {
  border: none; height: 1px;
  background: var(--border);
  margin: 28px 0;
}
.md code {
  font: 500 .85em var(--mono);
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(100,255,218,.07);
  color: var(--accent);
}
.md pre {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
  margin: 12px 0;
  overflow-x: auto;
}
.md pre code { background:none; padding:0; color:var(--t-body) }

/* ── Blog ─────────────────────────────────────────────────────────── */
.posts { list-style:none; padding:0 }
.post-row {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:16px 0;
  border-bottom: 1px solid var(--border);
}
.post-row:last-child { border-bottom:none }
.post-row a { color:var(--t-bright); font-weight:600; text-decoration:none; transition:color .2s }
.post-row a:hover { color:var(--accent) }
.post-date { color:var(--t-muted); font:500 13px var(--mono); white-space:nowrap }

/* ── Social links grid ─────────────────────────────────────────────── */
.md ul {
  list-style: none;
  padding: 0;
}
.md li {
  padding-left: 0;
}
/* Only on contact page: turn list into grid of link cards */
.contact-grid ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  column-gap: 16px;
  padding: 0;
  list-style: none;
}
.contact-grid li {
  margin: 0;
  padding: 0;
}
.contact-grid a {
  display: block;
  padding: 16px 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  font: 500 14px var(--mono);
  color: var(--t-body) !important;
  text-decoration: none;
  transition: all .25s var(--ease);
}
.contact-grid a:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px -10px var(--shadow);
}
.contact-grid a[href*="github"]:hover{border-color:#6e40c9;color:#6e40c9!important}
.contact-grid a[href*="linkedin"]:hover{border-color:#0a66c2;color:#0a66c2!important}
.contact-grid a[href*="t.me"]:hover{border-color:#26a5e4;color:#26a5e4!important}
.contact-grid a[href*="youtube"]:hover{border-color:#ff0000;color:#ff0000!important}
.contact-grid a[href*="twitter"]:hover{border-color:#1da1f2;color:#1da1f2!important}
.contact-grid a[href*="twitch"]:hover{border-color:#9146ff;color:#9146ff!important}
.contact-grid a[href*="instagram"]:hover{border-color:#e4405f;color:#e4405f!important}
.contact-grid a[href*="ko-fi"]:hover{border-color:#ff5e5b;color:#ff5e5b!important}
.kofi-link{color:var(--t-muted);text-decoration:none;transition:color .2s}
.kofi-link:hover{color:#ff5e5b}

/* ── Page header ──────────────────────────────────────────────────── */
.ph { padding: 120px 0 32px }
.ph h1 {
  font: 700 clamp(28px,4vw,40px)/1.1 var(--sans);
  color: var(--t-head);
  margin-bottom: 12px;
}
.ph .blog-card-meta { margin-bottom: 8px }
.ph .blog-card-tags { margin-top: 4px }
.print-btn {
  margin-top: 12px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: transparent;
  color: var(--t-muted);
  font: 500 13px var(--mono);
  cursor: pointer;
  transition: all .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.print-btn:hover { color: var(--accent); border-color: var(--accent) }

/* ── 404 ──────────────────────────────────────────────────────────── */
.e404 { text-align:center; padding:120px 0 }
.e404-code {
  font: 800 clamp(80px,15vw,140px)/1 var(--sans);
  color: var(--t-head);
}
.e404-path { color:var(--t-muted); font:500 14px var(--mono); margin:8px 0 12px }
.e404-msg { color:var(--t-body); font:400 16px var(--sans); margin-bottom:32px }
.btn {
  display:inline-block; padding:12px 24px;
  border:1px solid var(--accent); border-radius:4px;
  font:500 14px var(--mono); color:var(--accent);
  text-decoration:none; transition:all .25s var(--ease);
}
.btn:hover { background:rgba(100,255,218,.07) }

/* ── Prev/Next navigation ─────────────────────────────────────────── */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 48px 0 24px;
  border-top: 1px solid var(--border);
  margin-top: 48px;
}
.page-nav a {
  font: 500 14px var(--mono);
  color: var(--t-body);
  text-decoration: none;
  padding: 10px 20px;
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all .25s var(--ease);
  display: flex;
  align-items: center;
  gap: 8px;
}
.page-nav a:hover { color: var(--accent); border-color: var(--accent) }
.page-nav .arrow { font-size: 18px; line-height: 1 }
.page-nav .spacer { flex: 1 }

/* ── Footer ───────────────────────────────────────────────────────── */
.ft {
  position:relative; z-index:2;
  text-align:center;
  padding: 24px;
  font: 400 12px var(--mono);
  color: var(--t-muted);
}

/* ── Reading progress bar ─────────────────────────────────────────── */
.reading-bar {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 0%;
  background: var(--accent);
  z-index: 101;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Blog grid ───────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  padding: 24px;
  cursor: pointer;
  transition: all .25s var(--ease), opacity .3s ease, max-height .3s ease;
  overflow: hidden;
}
.blog-card { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), max-height .6s var(--ease-out), padding .5s ease, margin .5s ease }
.blog-card.filtered-out { opacity:0; transform:scale(0.95) translateY(-8px); max-height:0; padding:0!important; margin:0!important; border:none!important; overflow:hidden; pointer-events:none }
.blog-grid { transition: gap .3s ease }
.blog-card-title {
  font: 600 18px/1.3 var(--sans);
  color: var(--t-bright);
  margin: 12px 0 6px;
  transition: color .2s;
}
.blog-card:hover .blog-card-title { color: var(--accent) }
.blog-card-meta {
  font: 400 13px var(--mono);
  color: var(--t-muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}
.blog-card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px }
.tag {
  font: 500 11px var(--mono);
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.blog-card-excerpt {
  font: 400 14px/1.5 var(--sans);
  color: var(--t-body);
  margin: 6px 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* ── #22: Reading time progress bar in blog cards ─────────────── */
.blog-card { position: relative; overflow: hidden }
.blog-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  width: calc(var(--read-pct, 0) * 1%);
  background: var(--accent);
  opacity: .5;
  border-radius: 0 2px 0 0;
  transition: width .4s var(--ease);
}
.blog-card:hover::after { opacity: .85 }
.post-hero-img { margin: -20px 0 24px; border-radius: 12px; overflow: hidden; max-height: 400px }
.post-hero-img img { width: 100%; height: auto; display: block; object-fit: cover; max-height: 400px }
.blog-post { max-width: 700px }
.blog-post.section { padding-top: 24px; padding-bottom: 24px }
.blog-meta-row1, .blog-meta-row2 { margin-bottom: 4px }
.ph h1 { margin-bottom: 8px }
.related-posts { margin-top: 16px }
.post-nav { margin-top: 8px }
.post-author { margin-top: 16px; margin-bottom: 0 }

/* ── Post prev/next navigation ───────────────────────────────────── */
.post-nav {
  display: flex; gap: 16px; margin: 48px 0 24px;
  max-width: 700px;
}
.post-nav-link {
  flex: 1; padding: 20px;
  border: 1px solid var(--border); border-radius: 4px;
  text-decoration: none; transition: all .25s var(--ease);
  display: flex; flex-direction: column; gap: 6px;
}
.post-nav-link:hover { border-color: var(--accent); background: rgba(100,255,218,.03) }
.post-nav-link.next { text-align: right; margin-left: auto }
.post-nav-dir { font: 500 12px var(--mono); color: var(--accent) }
.post-nav-title { font: 500 15px/1.3 var(--sans); color: var(--t-bright) }
.post-nav-link:hover .post-nav-title { color: var(--accent) }
[data-theme="light"] .post-nav-link { border-color: rgba(10,126,106,.1) }
[data-theme="light"] .post-nav-link:hover { border-color: #0a7e6a; background: rgba(10,126,106,.03) }

/* ── Post author info (#25) ──────────────────────────────────────── */
.post-author {
  display: flex; gap: 16px; align-items: center;
  padding: 20px 24px; margin: 32px 0;
  border: 1px solid var(--border); border-radius: 4px;
  max-width: 700px;
}
.post-author-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0 }
.post-author-name { font: 600 15px var(--sans); color: var(--t-bright) }
.post-author-bio { font: 400 13px var(--sans); color: var(--t-muted); margin-top: 2px }

/* ── Booking confirmation (#34) ──────────────────────────────────── */
.booking-confirmed h3 { color: var(--accent); margin-bottom: 12px }
.booking-summary { margin: 16px 0; padding: 12px 16px; background: var(--bg); border-radius: 4px }
.booking-summary p { margin: 4px 0; font: 400 14px var(--sans); color: var(--t-body) }
.booking-summary strong { color: var(--t-head); font-weight: 600 }

/* ── Table of contents (generated by JS for blog posts) ──────────── */
.toc {
  position: fixed; top: 100px; right: max(20px, calc((100vw - 1200px)/2 - 200px));
  width: 200px; max-height: calc(100vh - 140px); overflow-y: auto;
  font: 400 13px/1.8 var(--sans); z-index: 50;
  opacity: 0; transform: translateX(10px);
  transition: opacity .4s, transform .4s;
}
.toc.vis { opacity: 1; transform: none }
.toc-title { font: 600 11px var(--mono); color: var(--t-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px }
.toc a {
  display: block; color: var(--t-muted); text-decoration: none;
  padding: 2px 0 2px 12px;
  border-left: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.toc a:hover, .toc a.active { color: var(--accent); border-left-color: var(--accent) }
.toc a[data-level="3"] { padding-left: 24px; font-size: 12px }

/* ── Share button ─────────────────────────────────────────────────── */
.share-btn {
  font: 500 13px var(--mono);
  color: var(--t-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  transition: all .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.share-btn:hover { color: var(--accent); border-color: var(--accent) }

/* ── Command palette ─────────────────────────────────────────────── */
.cmd-overlay {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(10,25,47,.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(20vh, 160px);
}
.cmd-overlay.open { display: flex }
.cmd-box {
  width: min(90%, 560px);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 20px 60px var(--shadow);
  overflow: hidden;
}
[data-theme="light"] .cmd-overlay { background: rgba(248,249,252,.85) }
.cmd-input {
  width: 100%;
  padding: 16px 20px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--t-bright);
  font: 400 16px var(--sans);
  outline: none;
}
.cmd-input::placeholder { color: var(--t-muted) }
.cmd-results {
  list-style: none;
  padding: 8px;
  max-height: 320px;
  overflow-y: auto;
}
.cmd-results li {
  margin: 0; padding: 0;
}
.cmd-results a {
  display: block;
  padding: 10px 14px;
  color: var(--t-body);
  text-decoration: none;
  font: 400 14px var(--sans);
  border-radius: 4px;
  transition: all .15s;
}
.cmd-results a:hover, .cmd-results a.active {
  background: rgba(100,255,218,.07);
  color: var(--accent);
}

.visitors {
  color: var(--accent);
  text-decoration: none;
  opacity: .6;
  transition: opacity .2s;
}
.visitors:hover { opacity: 1 }

/* ── Top pages table ──────────────────────────────────────────────── */
.stats-heading { font: 600 18px var(--sans); color: var(--t-head); margin-bottom: 12px }
.world-map-wrap { margin-bottom: 8px }
.top-pages { list-style: none; padding: 0 }
.top-page-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  font: 400 14px var(--mono);
}
.top-page-row:last-child { border-bottom: none }
.top-page-path { color: var(--t-body); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60% }
.map-country { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70% }
.top-page-views { color: var(--accent); font-weight: 600 }

.stats-summary { font:400 15px var(--mono); color:var(--t-body); display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.stats-total { color: var(--t-body) }
.stats-mom { color: var(--accent); font-weight:500 }
}
/* Tighter stats page layout */
.stats-ph { padding-bottom: 16px }
.stats-section { padding: 16px 0 }
.stats-section:first-of-type { padding-top: 8px }

/* ── Chart ────────────────────────────────────────────────────────── */
.chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 240px;
  padding: 16px 0 48px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.chart-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  position: relative;
  animation: barIn .5s var(--ease-out) both;
}
.chart-bar {
  width: 100%;
  min-height: 3px;
  background: linear-gradient(to top, var(--accent), rgba(100,255,218,.5));
  border-radius: 6px 6px 0 0;
  position: relative;
  transition: opacity .2s, filter .2s;
  opacity: .7;
}
[data-theme="light"] .chart-bar {
  background: linear-gradient(to top, #0d9b80, rgba(13,155,128,.4));
  opacity: .8;
}
.chart-bar[style*="height: 0%"] { opacity: .15 }
.chart-col:hover .chart-bar { opacity: 1 }
.chart-val {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 10px var(--mono);
  color: var(--accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .2s;
}
.chart-col:hover .chart-bar { opacity: 1; filter: brightness(1.2) }
.chart-col:hover .chart-val { opacity: 1 }
.chart-col.weekend .chart-bar { opacity: .3 }
.chart-col.weekend:hover .chart-bar { opacity: .7 }
/* Chart overlays */
.chart-canvas { position:absolute; left:0; right:0; top:0; bottom:48px; pointer-events:none; z-index:2 }
.chart-avg { position:absolute; left:0; right:0; border-top:1px dashed var(--accent); opacity:.3; pointer-events:none; z-index:1 }
.chart-avg::after { content:attr(data-label); position:absolute; right:0; top:-14px; font:400 9px var(--mono); color:var(--accent); opacity:.7 }
[data-theme="light"] .chart-val { color: #0d9b80 }
[data-theme="light"] .chart-avg { border-top-color: #0d9b80 }
[data-theme="light"] .chart-avg::after { color: #0d9b80 }
/* Chart tooltip */
.chart-tip { position:fixed; padding:6px 12px; background:var(--bg-alt); border:1px solid var(--accent); border-radius:6px; font:500 12px var(--mono); color:var(--accent); pointer-events:none; z-index:200; opacity:0; transition:opacity .15s; white-space:nowrap; box-shadow:0 4px 16px var(--shadow) }
.chart-tip.vis { opacity:1 }
/* Sparkline */
.sparkline { display:inline-block; vertical-align:middle; margin-left:8px }
.chart-label {
  position: absolute;
  bottom: -36px;
  font: 400 9px var(--mono);
  color: var(--t-muted);
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: top left;
}
.chart-col:not(:nth-child(5n+1)) .chart-label { display: none }
@media (min-width:600px) {
  .chart-col:not(:nth-child(3n+1)) .chart-label { display: none }
  .chart-col:nth-child(3n+1) .chart-label { display: block }
}
@media (min-width:900px) {
  .chart-col .chart-label { display: block }
}
@keyframes barIn {
  from { transform: scaleY(0); transform-origin: bottom }
  to   { transform: scaleY(1); transform-origin: bottom }
}

/* ── Skeleton ─────────────────────────────────────────────────────── */
.skel {
  padding:32px 28px;
  background: linear-gradient(90deg,var(--bg-alt) 25%,var(--bg-glow) 50%,var(--bg-alt) 75%);
  background-size:200% 100%;
  animation: shimmer 1.5s ease infinite;
}
.skel-line {
  height:14px; margin-bottom:14px; border-radius:3px;
  background: linear-gradient(90deg,var(--bg-alt) 25%,var(--bg-glow) 50%,var(--bg-alt) 75%);
  background-size:200% 100%;
  animation: shimmer 1.5s ease infinite;
}
.w60{width:60%}.w80{width:80%}.w50{width:50%}

/* ── Scroll reveal ────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.reveal.vis { opacity:1; transform:none }
.reveal.d1 { transition-delay:.1s }

/* ── Hero stagger ─────────────────────────────────────────────────── */
.stagger { opacity:0; transform:translateY(16px); animation: fadeUp .5s ease forwards }
.stagger.s1 { animation-delay:.1s }
.stagger.s2 { animation-delay:.2s }
.stagger.s3 { animation-delay:.3s }
.stagger.s4 { animation-delay:.4s }
.stagger.s5 { animation-delay:.5s }

/* ── Back-to-top ──────────────────────────────────────────────────── */
.btt {
  position:fixed; bottom:20px; right:20px;
  width:36px; height:36px; border-radius:4px;
  border:1px solid var(--border-h); background:var(--bg-alt);
  color:var(--t-body); font:14px var(--mono);
  cursor:pointer; z-index:90;
  opacity:0; pointer-events:none;
  transition: all .3s var(--ease);
  -webkit-tap-highlight-color:transparent;
  box-shadow: 0 2px 8px var(--shadow);
}
.btt.vis { opacity:1; pointer-events:auto }
.btt:hover { color:var(--accent); border-color:var(--accent) }
[data-theme="light"] .btt { background: #fff; border-color: rgba(10,126,106,.15); box-shadow: 0 2px 10px rgba(0,0,0,.08) }
[data-theme="light"] .btt:hover { border-color: #0a7e6a; color: #0a7e6a }

/* ── Accessibility ────────────────────────────────────────────────── */
*:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.skip {
  position:absolute; top:-100%; left:24px;
  padding:8px 16px; background:var(--accent); color:var(--bg);
  font:600 14px var(--mono); text-decoration:none;
  border-radius:0 0 4px 4px; z-index:200;
}
.skip:focus { top:0 }

/* ── Grain texture overlay ────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
}
[data-theme="light"] .grain { opacity: .02 }

/* ── Card hover glow (follows cursor within card) ────────────────── */
.card {
  --card-mx: 50%; --card-my: 50%;
}
.card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(400px circle at var(--card-mx) var(--card-my), rgba(100,255,218,.06), transparent 40%);
  transition: opacity .3s;
  pointer-events: none;
}
.card:hover::after { opacity: 1 }
[data-theme="light"] .card::after {
  background: radial-gradient(400px circle at var(--card-mx) var(--card-my), rgba(10,126,106,.05), transparent 40%);
}

/* ── Timeline (work experience) ──────────────────────────────────── */
.timeline .md { position: relative; padding-left: 28px }
.timeline .md::before {
  content: '';
  position: absolute;
  left: 6px; top: 4px; bottom: 4px;
  width: 1px;
  background: var(--border);
}
.timeline .md h4 { position: relative }
.timeline .md h4::before {
  content: '';
  position: absolute;
  left: -22px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg);
  box-sizing: border-box;
}
.timeline .md hr { margin-left: -28px; width: calc(100% + 28px) }

/* ── #5: Color picker buttons ─────────────────────────────────────── */
.color-btn{width:28px!important;height:28px!important;padding:0!important;border-radius:50%!important;min-width:0}
.color-btn.active{box-shadow:0 0 0 3px var(--bg),0 0 0 5px currentColor}

/* ── #41: Animated gradient hero name ─────────────────────────────── */
.hero-name{background:linear-gradient(90deg,var(--accent),#818cf8,#f472b6,var(--accent));background-size:300% 100%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:fadeUp .5s ease forwards,gradientShift 6s ease infinite}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ── #42: Card tilt on hover ──────────────────────────────────────── */
.card{transform-style:preserve-3d;perspective:800px}

/* ── #44: Custom cursor ───────────────────────────────────────────── */
.custom-cursor{position:fixed;width:20px;height:20px;border-radius:50%;border:2px solid var(--accent);pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .15s,height .15s;mix-blend-mode:difference}

/* ── #52: Animated stat counters ──────────────────────────────────── */
.stat-animate{display:inline-block;transition:all .3s}

/* ── #54: Border gradient on CTA ──────────────────────────────────── */
.hero-cta{position:relative;overflow:hidden}
/* CTA: clean hover, no gradient overflow */
/* removed gradient hover */

/* ── #53: Frosted nav on scroll ───────────────────────────────────── */
.nav.scrolled{background:rgba(10,25,47,.95)!important;box-shadow:0 4px 30px var(--shadow)}
[data-theme="light"] .nav.scrolled{background:rgba(248,249,252,.95)!important}

/* ── #59: Zen mode ────────────────────────────────────────────────── */
[data-mode="zen"] .nav,[data-mode="zen"] .ft,[data-mode="zen"] .sf-wrap,
[data-mode="zen"] .glow-overlay,[data-mode="zen"] .grain,
[data-mode="zen"] .reading-bar{display:none!important}
[data-mode="zen"] .wrap{padding-top:40px}

/* ── #60: Compact mode ────────────────────────────────────────────── */
[data-mode="compact"] .section{padding:32px 0}
[data-mode="compact"] .hero{min-height:auto;padding:60px 0 20px}
[data-mode="compact"] .ph{padding:80px 0 16px}
[data-mode="compact"] .card{padding:16px}
[data-mode="compact"] .md h4{margin:12px 0 6px}

/* ── #96: Retro mode ──────────────────────────────────────────────── */
[data-mode="retro"]{--bg:#000!important;--bg-alt:#111!important;--accent:#0f0!important;--t-bright:#0f0!important;--t-head:#0c0!important;--t-body:#090!important;--t-muted:#060!important;--border:rgba(0,255,0,.15)!important;font-family:'Courier New',monospace!important;image-rendering:pixelated}
[data-mode="retro"] .nav{background:rgba(0,0,0,.95)!important;border-bottom-color:rgba(0,255,0,.2)!important}
[data-mode="retro"] .hero-name{background:none!important;-webkit-text-fill-color:#0f0!important;color:#0f0!important;animation:none!important;text-shadow:0 0 10px #0f0}
[data-mode="retro"] *{border-radius:0!important}
[data-mode="retro"] .avatar{filter:grayscale(100%) contrast(1.5)!important;border-radius:0!important}
[data-mode="retro"] .profile-ring,[data-mode="retro"] .avatar-ring{display:none}

/* ── #75: Prefetch on hover ───────────────────────────────────────── */
/* Handled in JS */


/* ── #70: Trending badge ──────────────────────────────────────────── */
.trending-badge{display:inline-block;font:600 10px var(--mono);color:#ff6090;border:1px solid #ff6090;border-radius:3px;padding:1px 6px;margin-left:8px;vertical-align:middle}

/* ── #57: Loading skeleton shapes ─────────────────────────────────── */
.skel-hero{height:200px;border-radius:8px;margin-bottom:24px;background:linear-gradient(90deg,var(--bg-alt) 25%,var(--bg-glow) 50%,var(--bg-alt) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}
.skel-card{height:120px;border-radius:4px;margin-bottom:16px;background:linear-gradient(90deg,var(--bg-alt) 25%,var(--bg-glow) 50%,var(--bg-alt) 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite}

/* ── #80: Resource priority hints (in HTML head via Rust) ─────────── */

/* ── #11: CTA arrow animation ─────────────────────────────────────── */
.hero-cta::after{content:' \2192';display:inline-block;transition:transform .2s}
.hero-cta:hover::after{transform:translateX(4px)}

/* ── #12: Avatar breathing ────────────────────────────────────────── */
.avatar{animation:breathe 4s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
.avatar:hover{animation:none}

/* ── #9: Wave separator ───────────────────────────────────────────── */
.hero::after{content:'';display:block;height:40px;margin-top:40px;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q300 0 600 20 T1200 20 V40 H0Z' fill='%230a192f' opacity='.15'/%3E%3C/svg%3E") center/cover no-repeat}
[data-theme="light"] .hero::after{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 Q300 0 600 20 T1200 20 V40 H0Z' fill='%23f8f9fc' opacity='.15'/%3E%3C/svg%3E")}

/* ── #17: Gradient HR separators ──────────────────────────────────── */
.timeline .md hr{background:linear-gradient(90deg,transparent,var(--accent),transparent)!important;height:1px;opacity:.3}

/* ── #15: Timeline dot pulse on reveal ────────────────────────────── */
.reveal.vis .md h4::before{animation:dotPulse .6s ease}
@keyframes dotPulse{0%{transform:scale(0);opacity:0}60%{transform:scale(1.5)}100%{transform:scale(1);opacity:1}}

/* ── #26: Social card left border ─────────────────────────────────── */
.contact-grid a{border-left:3px solid transparent}
.contact-grid a[href*="github"]{border-left-color:#6e40c930}
.contact-grid a[href*="linkedin"]{border-left-color:#0a66c230}
.contact-grid a[href*="t.me"]{border-left-color:#26a5e430}
.contact-grid a[href*="youtube"]{border-left-color:#ff000030}
.contact-grid a[href*="twitter"]{border-left-color:#1da1f230}
.contact-grid a[href*="twitch"]{border-left-color:#9146ff30}
.contact-grid a[href*="instagram"]{border-left-color:#e4405f30}
.contact-grid a[href*="ko-fi"]{border-left-color:#ff5e5b30}

/* ── #39: Snake high score ────────────────────────────────────────── */
.snake-hi{font:500 11px var(--mono);color:var(--accent);text-align:center;margin-top:4px}

/* ── #43: Scroll percentage indicator ─────────────────────────────── */
.reading-bar{height:3px!important}

/* ── #44: Thicker reading bar ─────────────────────────────────────── */

/* ── #24: RSS button style ────────────────────────────────────────── */
.rss-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--border);border-radius:4px;font:500 12px var(--mono);color:var(--t-muted);text-decoration:none;transition:all .2s}
.rss-btn:hover{color:#f26522;border-color:#f26522}

/* ── View Transitions (page transitions) ─────────────────────────── */
@view-transition { navigation: auto }
::view-transition-old(root) {
  animation: .2s ease-out both fadeOut;
}
::view-transition-new(root) {
  animation: .3s ease-out both fadeIn;
}
@keyframes fadeOut { to { opacity: 0 } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

/* ── 404 glitch effect ────────────────────────────────────────────── */
.e404-code {
  position: relative;
  animation: glitch 4s infinite linear;
}
.e404-code::before,
.e404-code::after {
  content: '404';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: hidden;
}
.e404-code::before {
  color: var(--accent);
  animation: glitch-top 3s infinite linear;
  clip-path: inset(0 0 65% 0);
}
.e404-code::after {
  color: #ff6090;
  animation: glitch-bot 2.5s infinite linear;
  clip-path: inset(60% 0 0 0);
}
@keyframes glitch {
  0%,90%,100% { text-shadow: none; transform: none }
  91% { text-shadow: -3px 0 var(--accent), 3px 0 #ff6090; transform: skewX(-1deg) }
  92% { text-shadow: 3px 0 var(--accent), -3px 0 #ff6090; transform: skewX(1deg) }
  93% { text-shadow: -2px 0 #ff6090, 2px 0 var(--accent); transform: skewX(-0.5deg) }
  94% { text-shadow: none; transform: none }
  96% { text-shadow: 4px 0 var(--accent), -4px 0 #ff6090; transform: translate(2px,-1px) }
  97% { text-shadow: -4px 0 #ff6090, 4px 0 var(--accent); transform: translate(-2px,1px) }
  98% { text-shadow: 2px 0 var(--accent); transform: none }
}
@keyframes glitch-top {
  0%,88%,100% { transform: none; opacity: .8 }
  89% { transform: translate(-6px, -2px) skewX(-8deg); opacity: 1 }
  90% { transform: translate(6px, 1px) skewX(6deg); opacity: .9 }
  91% { transform: translate(-3px, 0) skewX(-3deg); opacity: 1 }
  92% { transform: none; opacity: .8 }
  95% { transform: translate(4px, -1px); opacity: 1 }
  96% { transform: translate(-2px, 2px) skewX(2deg); opacity: .9 }
  97% { transform: none; opacity: .8 }
}
@keyframes glitch-bot {
  0%,85%,100% { transform: none; opacity: .8 }
  86% { transform: translate(5px, 2px) skewX(10deg); opacity: 1 }
  87% { transform: translate(-5px, -1px) skewX(-6deg); opacity: .9 }
  88% { transform: translate(3px, 0); opacity: 1 }
  89% { transform: none; opacity: .8 }
  93% { transform: translate(-4px, 1px) skewX(-4deg); opacity: 1 }
  94% { transform: translate(2px, -2px) skewX(3deg); opacity: .9 }
  95% { transform: none; opacity: .8 }
}

/* ── Snowflake counter toast ─────────────────────────────────────── */
.snow-counter {
  position: fixed;
  bottom: 20px; left: 20px;
  font: 500 12px var(--mono);
  color: var(--t-muted);
  z-index: 90;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.snow-counter.vis { opacity: 1 }

/* ── Keyboard hint ───────────────────────────────────────────────── */
.kbd-hint {
  position: fixed;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font: 400 11px var(--mono);
  color: var(--t-muted);
  opacity: 0;
  z-index: 200;
  pointer-events: none;
  transition: opacity .5s;
  text-align: center;
  background: var(--bg-alt);
  padding: 12px 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 2;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px var(--shadow);
  white-space: nowrap;
}
.kbd-hint.vis { opacity: .95 }
.kbd-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 10px;
  margin: 0 2px;
  color: var(--accent);
}

/* ── Konami overlay ──────────────────────────────────────────────── */
.konami-overlay {
  position: fixed; inset: 0;
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,25,47,.95);
  opacity: 0; pointer-events: none;
  transition: opacity .4s;
}
.konami-overlay.active { opacity: 1; pointer-events: auto }
.konami-msg {
  text-align: center;
  font: 700 clamp(24px,5vw,48px) var(--sans);
  color: var(--accent);
  animation: konamiPulse 1s ease-in-out infinite alternate;
}
.konami-sub { font: 400 14px var(--mono); color: var(--t-body); margin-top: 16px }
@keyframes konamiPulse { from { transform: scale(1) } to { transform: scale(1.05) } }

/* ── #53: Booking grid ─────────────────────────────────────────────── */
.booking-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 5px;
  margin-bottom: 24px;
}
.booking-day-header {
  grid-column: 1 / -1;
  font: 600 14px var(--sans);
  color: var(--t-bright);
  padding: 12px 0 4px;
  border-top: 1px solid var(--border);
  margin-top: 8px;
}
.booking-day-header:first-child { border-top: none; margin-top: 0 }
.booking-slot {
  padding: 10px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--t-body);
  font: 400 12px var(--mono);
  cursor: pointer;
  transition: all .2s var(--ease);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.booking-slot:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px) }
.booking-slot.selected { border-color: var(--accent); color: var(--accent); background: rgba(100,255,218,.1); box-shadow: 0 0 12px rgba(100,255,218,.15) }
.booking-date { display: block; font-weight: 600; font-size: 13px; margin-bottom: 3px; color: var(--t-bright) }
.booking-time { display: block; font-size: 11px; color: var(--t-muted) }
.booking-confirm { display: flex; gap: 8px; margin-top: 16px; align-items: center }
@media (max-width:480px) { .booking-grid { grid-template-columns: repeat(3, 1fr) } }

/* ── #91: World map + visitor countries ────────────────────────────── */
.world-map-wrap {
  margin: 0 auto 16px;
  max-width: 900px;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  min-height: 200px;
  aspect-ratio: 2/1;
  position: relative;
}
@media(max-width:768px) { .world-map-wrap { min-height: 150px; border-radius: 8px } }
@media(max-width:480px) { .world-map-wrap { min-height: 120px; border-radius: 4px } }
.map-tooltip {
  position: absolute;
  padding: 10px 16px;
  background: rgba(13,27,42,.95);
  border: 1px solid var(--accent);
  border-radius: 8px;
  font: 400 13px var(--mono);
  color: var(--t-bright);
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  white-space: nowrap;
  line-height: 1.6;
  backdrop-filter: blur(8px);
}
[data-theme="light"] .map-tooltip { background: rgba(255,255,255,.95); box-shadow: 0 8px 32px rgba(0,0,0,.1) }
.map-tooltip strong { color: var(--accent); font-weight: 600; font-size: 14px }

.map-list { max-width: 640px }
.map-row {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font: 400 14px var(--mono);
}
.map-row:last-child { border-bottom: none }
.map-country { width: 140px; color: var(--t-bright); flex-shrink: 0; font-weight: 500 }
.map-bar-wrap { flex: 1; height: 10px; background: var(--bg-alt); border-radius: 5px; overflow: hidden }
.map-bar { height: 100%; background: var(--accent); border-radius: 5px; transition: width .8s var(--ease-out); min-width: 3px; opacity: .8 }
.map-row:hover .map-bar { opacity: 1 }
.map-count { width: 50px; text-align: right; color: var(--accent); font: 600 13px var(--mono) }

/* ── #72: Uptime dots ─────────────────────────────────────────────── */
.uptime-grid {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-top: 16px;
}
.uptime-dot {
  width: 16px; height: 16px;
  border-radius: 3px;
  transition: transform .2s;
  cursor: default;
}
.uptime-dot:hover { transform: scale(1.3) }
.uptime-dot.up { background: var(--accent) }
.uptime-dot.down { background: #ff6090 }

/* ── #16: Snake game on 404 ────────────────────────────────────────── */
.snake-wrap {
  margin: 24px auto 0;
  max-width: 320px;
}
.snake-canvas {
  width: min(320px, 90vw); height: min(320px, 90vw);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-alt);
  display: block;
  margin: 0 auto;
  touch-action: none;
}
.snake-score {
  font: 500 13px var(--mono);
  color: var(--t-muted);
  text-align: center;
  margin-top: 8px;
}
.snake-start {
  font: 500 13px var(--mono);
  color: var(--accent);
  text-align: center;
  margin-top: 8px;
  cursor: pointer;
}

/* ── #42: Post reactions ──────────────────────────────────────────── */
.reactions {
  display: flex;
  gap: 8px;
  margin: 16px 0 0;
  flex-wrap: wrap;
  max-width: 700px;
}
.reaction-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--bg-alt);
  font: 500 14px var(--sans);
  color: var(--t-body);
  cursor: pointer;
  transition: all .2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.reaction-btn:hover { border-color: var(--accent); transform: scale(1.05) }
.reaction-btn:active { transform: scale(0.95) }
.reaction-btn.reacted { border-color: var(--accent); background: rgba(100,255,218,.1) }
.reaction-icon { display:flex; align-items:center; color:var(--t-muted); transition:color .2s }
.reaction-icon svg { width:18px; height:18px }
.reaction-btn:hover .reaction-icon, .reaction-btn.reacted .reaction-icon { color:var(--accent) }
.reaction-btn.reacted .reaction-icon svg { fill:var(--accent); stroke:var(--accent) }
.reaction-count { font: 600 13px var(--mono); color: var(--t-muted); min-width: 12px }
.reaction-btn.reacted .reaction-count { color: var(--accent) }

/* ── #92: Guestbook ───────────────────────────────────────────────── */
.guestbook-form {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.guestbook-input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--t-bright);
  font: 400 14px var(--sans);
  outline: none;
  transition: border-color .25s;
}
.guestbook-input:focus { border-color: var(--accent) }
.guestbook-input::placeholder { color: var(--t-muted) }
.guestbook-submit {
  padding: 10px 20px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  font: 500 13px var(--mono);
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.guestbook-submit:hover { background: rgba(100,255,218,.07) }
.guestbook-entries { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px }
.guestbook-entry {
  padding: 12px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px 12px 12px 2px;
  font: 400 14px var(--sans);
  color: var(--t-body);
  max-width: 80%;
  animation: fadeUp .3s ease both;
}
.guestbook-date { display: block; font: 400 11px var(--mono); color: var(--t-muted); margin-top: 6px }
/* ── #36: Guestbook like button ───────────────────────────────────── */
.guestbook-like {
  display: inline-flex; align-items: center; gap: 4px;
  background: transparent; border: 1px solid var(--border); border-radius: 12px;
  padding: 2px 10px; margin-top: 6px;
  font: 400 12px var(--sans); color: var(--t-muted);
  cursor: pointer; transition: all .2s var(--ease);
}
.guestbook-like:hover { border-color: var(--border-h); color: var(--t-body) }
.guestbook-like.liked { border-color: #ff6b8a; color: #ff6b8a; cursor: default }
.guestbook-like-count { font: 500 11px var(--mono) }

/* ── Code syntax highlighting ─────────────────────────────────────── */
.md pre code .kw { color: var(--accent) }
.md pre code .str { color: #e6db74 }
.md pre code .num { color: #ae81ff }
.md pre code .cm { color: var(--t-muted); font-style: italic }
.md pre code .fn { color: #a6e22e }

/* ── Settings panel (Ctrl+,) ──────────────────────────────────────── */
.settings-overlay {
  position: fixed; inset: 0; z-index: 201;
  background: rgba(10,25,47,0);
  backdrop-filter: blur(0px);
  justify-content: flex-end;
  pointer-events: none;
  transition: background .3s, backdrop-filter .3s;
  display: flex;
}
.settings-overlay.open { background: rgba(10,25,47,.7); backdrop-filter: blur(6px); pointer-events: auto }
.settings-panel {
  width: min(90%, 360px); height: 100%;
  background: var(--bg-alt); border-left: 1px solid var(--border);
  padding: 28px 22px; overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}
.settings-overlay.open .settings-panel { transform: translateX(0) }
.settings-section {
  font: 600 11px var(--mono);
  color: var(--t-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.settings-section:first-of-type { border-top: none; margin-top: 0 }
[data-theme="light"] .settings-overlay.open { background: rgba(248,249,252,.75) }
[data-theme="light"] .settings-panel { background: #fff; border-left-color: rgba(10,126,106,.1); box-shadow: -4px 0 20px rgba(0,0,0,.08) }
[data-theme="light"] .settings-btn { border-color: rgba(10,126,106,.15); color: #555770 }
[data-theme="light"] .settings-btn:hover { border-color: #0a7e6a; color: #0a7e6a }
[data-theme="light"] .settings-btn.active { border-color: #0a7e6a; color: #0a7e6a; background: rgba(10,126,106,.06) }
.settings-title { font: 700 18px var(--sans); color: var(--t-bright); margin-bottom: 24px }
.settings-group { margin-bottom: 20px }
.settings-label { font: 500 13px var(--mono); color: var(--t-muted); margin-bottom: 8px; display: block }
.settings-row { display: flex; gap: 8px; flex-wrap: wrap }
.settings-btn {
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 4px;
  background: transparent; color: var(--t-body); font: 500 12px var(--mono);
  cursor: pointer; transition: all .2s;
}
.settings-btn:hover { border-color: var(--accent); color: var(--accent) }
.settings-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(100,255,218,.07) }

/* ── QR code ──────────────────────────────────────────────────────── */
.qr-wrap { text-align: center; margin-top: 24px; padding-top: 0!important }
.qr-wrap canvas { border-radius: 8px; border: 1px solid var(--border) }
.qr-wrap img { border-radius: 8px }
[data-theme="light"] .qr-wrap img { filter: invert(1) }
.qr-label { font: 400 12px var(--mono); color: var(--t-muted); margin-top: 8px }

/* ── Settings gear icon ───────────────────────────────────────────── */
.gear-btn {
  position: fixed; bottom: 20px; left: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border-h); background: var(--bg-alt);
  color: var(--t-body); font-size: 16px; cursor: pointer;
  z-index: 90; opacity: 0; transition: opacity .5s, color .2s, box-shadow .2s;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px var(--shadow);
}
.gear-btn.vis { opacity: .6; animation: fadeIn 2s ease }
.gear-btn:hover { opacity: 1; color: var(--accent); box-shadow: 0 2px 12px var(--shadow) }
[data-theme="light"] .gear-btn { border-color: rgba(10,126,106,.2); background: #fff; color: #555770; box-shadow: 0 2px 10px rgba(0,0,0,.1) }
[data-theme="light"] .gear-btn.vis { opacity: .7 }
[data-theme="light"] .gear-btn:hover { opacity: 1; color: #0a7e6a; border-color: #0a7e6a }

/* ── Guestbook avatars ────────────────────────────────────────────── */
.gb-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 12px var(--sans); color: #fff;
  flex-shrink: 0; margin-right: 10px; float: left;
}

/* ── Uptime timeline ──────────────────────────────────────────────── */
.uptime-grid {
  display: flex; gap: 3px; flex-wrap: wrap; margin-top: 16px;
}
.uptime-dot {
  width: 18px; height: 18px; border-radius: 4px;
  transition: transform .15s; cursor: default;
  position: relative;
}
.uptime-dot:hover { transform: scale(1.4) }
.uptime-dot.up { background: var(--accent) }
.uptime-dot.down { background: #ff6090 }
.uptime-dot:hover::after {
  content: attr(title);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  padding: 4px 8px; background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 4px; font: 400 11px var(--mono); color: var(--t-body);
  white-space: nowrap; pointer-events: none; margin-bottom: 4px;
}

/* ── #83: Page load time ──────────────────────────────────────────── */
.load-time { color: var(--accent); opacity: .4 }

/* ── #27: AMOLED dark-dark mode ───────────────────────────────────── */
[data-amoled="true"] {
  --bg: #000 !important;
  --bg-alt: #0a0a0a !important;
  --bg-glow: #111 !important;
  --shadow: rgba(0,0,0,.95) !important;
}
[data-amoled="true"] .nav { background: rgba(0,0,0,.9) !important }
[data-amoled="true"] .grain { opacity: 0 !important }
[data-amoled="true"] .glow-overlay { opacity: .7 }

/* ── #78: Share icons ─────────────────────────────────────────────── */
.share-links { display: inline-flex; gap: 6px; margin-left: 8px }
.share-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 4px;
  border: 1px solid var(--border);
  font: 700 11px var(--sans);
  color: var(--t-muted);
  text-decoration: none;
  transition: all .25s var(--ease);
}
.share-icon:hover { color: var(--accent); border-color: var(--accent) }

/* ── #97: Fun facts ───────────────────────────────────────────────── */
.fun-fact {
  text-align: center;
  font: 400 13px var(--mono);
  color: var(--t-muted);
  padding: 12px 24px;
  opacity: 0;
  transition: opacity 1s ease;
}

/* ── Keyframes ────────────────────────────────────────────────────── */
@keyframes fadeUp { to { opacity:1; transform:none } }
/* Section reveal stagger */
.card.reveal-stagger, .blog-card.reveal-stagger { opacity:0; transform:translateY(16px) }
.card.revealed, .blog-card.revealed { animation: fadeUp .5s var(--ease-out) forwards }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── Lightbox (#5) ────────────────────────────────────────────────── */
.lightbox { position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;cursor:zoom-out }
.lightbox.vis { opacity:1 }
.lightbox img { max-width:90vw;max-height:90vh;border-radius:4px;box-shadow:0 20px 60px rgba(0,0,0,.5);object-fit:contain }

/* ── Focus mode (#16) ─────────────────────────────────────────────── */
/* Focus mode — smooth transitions in BOTH directions */
.wrap { transition: max-width .5s var(--ease-out), padding .5s var(--ease-out) }
[data-focus="true"] .nav { transform:translateY(-100%); transition:transform .5s var(--ease) }
[data-focus="true"] .ft { opacity:0; transform:translateY(40px); transition:opacity .5s ease, transform .5s ease }
[data-focus="true"] .sf-wrap,
[data-focus="true"] .glow-overlay,
[data-focus="true"] .gear-btn,
[data-focus="true"] .btt,
[data-focus="true"] .reading-bar { opacity:0; transition:opacity .5s ease }
[data-focus="true"] .page-nav,
[data-focus="true"] .post-nav,
[data-focus="true"] .post-author,
[data-focus="true"] .hero-socials { opacity:0; transition:opacity .4s ease }
[data-focus="true"] .wrap { max-width:700px; margin:0 auto; padding:40px 24px 0 }
[data-focus="true"] .ft { height:0; overflow:hidden; padding:0; margin:0 }
[data-focus="true"] .fun-fact { display:none }
[data-focus="true"] .blog-post { max-width:100% }
.focus-btn{position:fixed;bottom:64px;right:20px;z-index:100;padding:6px 14px;border:1px solid var(--border);border-radius:20px;background:var(--bg-alt);color:var(--t-muted);font:500 12px var(--mono);cursor:pointer;transition:all .3s var(--ease);box-shadow:0 2px 8px var(--shadow)}
.focus-btn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Hero social brand colors on hover (#18) ──────────────────────── */
.hero-social[title="Telegram"]:hover { color: #26a5e4 }
.hero-social[title="YouTube"]:hover { color: #ff0000 }
.hero-social[title="LinkedIn"]:hover { color: #0a66c2 }
.hero-social[title="Telegram"]:hover svg,
.hero-social[title="YouTube"]:hover svg,
.hero-social[title="LinkedIn"]:hover svg { transform: translateY(-3px) }


/* ── Preloader (#20) ──────────────────────────────────────────────── */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .5s,transform .5s}
.preloader.out{opacity:0;transform:translateY(-100%);pointer-events:none}
.preloader-text{font:700 clamp(48px,10vw,96px) var(--mono);color:var(--accent);animation:preloaderPulse 1s ease infinite alternate}
@keyframes preloaderPulse{from{opacity:.3;transform:scale(.95)}to{opacity:1;transform:scale(1)}}

/* ── Achievement toast (#13) ──────────────────────────────────────── */
.achievement-toast{position:fixed;bottom:80px;right:20px;background:var(--bg-alt);border:1px solid var(--accent);border-radius:8px;padding:12px 20px;font:500 13px var(--mono);color:var(--accent);z-index:200;transform:translateX(120%);transition:transform .4s var(--ease-out);box-shadow:0 8px 32px var(--shadow)}
.achievement-toast.vis{transform:none}
.achievement-toast .badge-icon{font-size:18px;margin-right:8px}

/* ── Bookmark button (#4) ─────────────────────────────────────────── */
.bookmark-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:transparent;color:var(--t-muted);cursor:pointer;font-size:16px;z-index:5;transition:color .2s,transform .2s;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;overflow:hidden}
.bookmark-btn:hover,.bookmark-btn.saved{color:var(--accent)}
.bookmark-btn.saved{transform:scale(1.1)}
.blog-filter{display:flex;gap:8px;margin-bottom:16px}
.blog-filter-btn{padding:4px 12px;border:1px solid var(--border);border-radius:4px;background:transparent;color:var(--t-body);font:500 12px var(--mono);cursor:pointer;transition:all .2s}
.blog-filter-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(100,255,218,.07)}

/* ── Scroll spy active nav link ───────────────────────────────────── */
.link.scroll-active { color: var(--accent) }

/* ── RSS link style ───────────────────────────────────────────────── */
.rss-link{color:var(--t-muted);text-decoration:none;transition:color .2s}
.rss-link:hover{color:var(--accent)}

/* ── Blog archive ────────────────────────────────────────────────── */
.tag-cloud { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px }
.archive-year { margin-bottom:24px }
.archive-year-title, .archive-month-title { cursor:pointer; list-style:none; user-select:none }
.archive-year-title::-webkit-details-marker, .archive-month-title::-webkit-details-marker { display:none }
.archive-year-title { font:700 28px var(--sans); color:var(--t-head); padding:8px 0; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.archive-year-title::after { content:'\25BE'; font-size:14px; color:var(--t-muted); transition:transform .2s }
.archive-year[open] > .archive-year-title::after { transform:rotate(180deg) }
.archive-month { margin:8px 0 0 16px }
.archive-month-title { font:600 16px var(--sans); color:var(--accent); padding:6px 0; display:flex; align-items:center; justify-content:space-between }
.archive-month-title::after { content:'\25BE'; font-size:12px; color:var(--t-muted); transition:transform .2s }
.archive-month[open] > .archive-month-title::after { transform:rotate(180deg) }
.archive-post { display:flex; gap:16px; padding:10px 0; text-decoration:none; border-bottom:1px solid rgba(100,255,218,.05); transition:all .2s }
.archive-post:hover { padding-left:8px }
.archive-date { font:400 13px var(--mono); color:var(--t-muted); flex-shrink:0; width:90px }
.archive-title { font:500 15px var(--sans); color:var(--t-bright); transition:color .2s }
.archive-post:hover .archive-title { color:var(--accent) }

/* ── Related posts ───────────────────────────────────────────────── */
.related-posts { max-width:700px; margin:32px 0; padding:20px 24px; border:1px solid var(--border); border-radius:4px }
.related-title { font:600 14px var(--mono); color:var(--t-muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:12px }
.related-link { display:block; padding:8px 0; font:500 15px var(--sans); color:var(--t-bright); text-decoration:none; transition:color .2s; border-bottom:1px solid rgba(100,255,218,.05) }
.related-link:last-child { border-bottom:none }
.related-link:hover { color:var(--accent); padding-left:8px }

/* ── Contact form ────────────────────────────────────────────────── */
.contact-card { max-width:600px; margin:0 auto; padding:28px; border:1px solid var(--border); border-radius:8px; background:var(--bg-alt); box-shadow:0 4px 20px var(--shadow) }
.contact-form { display:flex; flex-direction:column; gap:12px }
.contact-form-footer { display:flex; justify-content:space-between; align-items:center }
.contact-char-count { font:400 12px var(--mono); color:var(--t-muted) }
.contact-submit { padding:10px 28px; border:1px solid var(--accent); border-radius:4px; background:transparent; color:var(--accent); font:500 14px var(--mono); cursor:pointer; transition:all .25s var(--ease) }
.contact-submit:hover { background:rgba(100,255,218,.07) }
.contact-success { text-align:center; padding:24px }
.contact-check { display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; border:2px solid var(--accent); color:var(--accent); font-size:24px; margin-bottom:12px }
.contact-success p { font:500 16px var(--sans); color:var(--t-bright) }
[data-theme="light"] .contact-card { background:#fff; border-color:rgba(10,126,106,.08) }
.contact-textarea {
  width:100%; padding:16px; border:1px solid var(--border); border-radius:8px;
  background:var(--bg); color:var(--t-body); font:400 15px var(--sans);
  resize:vertical; min-height:120px; transition:border-color .3s, box-shadow .3s;
}
.contact-textarea:focus { outline:none; border-color:var(--accent); box-shadow: 0 0 0 3px rgba(100,255,218,.1) }
[data-theme="light"] .contact-textarea { background:#fff; border-color:rgba(10,126,106,.15) }
[data-theme="light"] .contact-textarea:focus { border-color:#0a7e6a; box-shadow: 0 0 0 3px rgba(10,126,106,.08) }

/* ── Skills radar chart ──────────────────────────────────────────── */
.skills-row { display:flex; gap:32px; align-items:flex-start }
.skills-text { flex:1 }
.skills-radar { flex-shrink:0; width:280px; height:280px }
@media(max-width:768px) { .skills-row { flex-direction:column } .skills-radar { width:100%;max-width:300px;align-self:center } }

/* ── #2: Typing cursor blink ─────────────────────────────────────── */
.type-cursor { animation: cursorBlink 1s step-end infinite; font-weight: 100; color: var(--accent); margin-left: 2px }
@keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── Theme transition overlay ────────────────────────────────────── */
.theme-flash { position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:1;transition:opacity .3s ease }

/* ── Copy code button ────────────────────────────────────────────── */
.md pre { position: relative }
.code-copy { position:absolute;top:8px;right:8px;padding:4px 10px;border:1px solid var(--border);border-radius:4px;background:var(--bg-alt);color:var(--t-muted);font:500 11px var(--mono);cursor:pointer;opacity:0;transition:opacity .2s,color .2s }
.md pre:hover .code-copy { opacity: 1 }
.code-copy:hover { color:var(--accent);border-color:var(--accent) }

/* ── #10: Card stagger reveal ────────────────────────────────────── */
.card-reveal { opacity:0; transform:translateY(20px); animation: fadeUp .5s var(--ease-out) forwards }

/* ── Contact form shake ──────────────────────────────────────────── */
@keyframes formShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-6px)} 40%,80%{transform:translateX(6px)} }
.contact-form.shake { animation: formShake .4s ease }

/* ── #18: Privacy banner ─────────────────────────────────────────── */
.privacy-banner { position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--bg-alt);border-top:1px solid var(--border);padding:12px 24px;font:400 13px var(--sans);color:var(--t-body);display:flex;align-items:center;justify-content:center;gap:16px;transform:translateY(0);transition:transform .4s var(--ease) }
.privacy-banner.hide { transform:translateY(100%) }
.privacy-banner button { padding:6px 16px;border:1px solid var(--accent);border-radius:4px;background:transparent;color:var(--accent);font:500 12px var(--mono);cursor:pointer;transition:background .2s }
.privacy-banner button:hover { background:rgba(100,255,218,.07) }

/* ── Reading time remaining indicator ────────────────────────────── */
.read-remaining { position:fixed;bottom:60px;left:50%;transform:translateX(-50%);font:400 12px var(--mono);color:var(--t-muted);background:var(--bg-alt);border:1px solid var(--border);border-radius:20px;padding:4px 14px;z-index:80;opacity:0;transition:opacity .3s;pointer-events:none }
.read-remaining.vis { opacity:.7 }

/* ── Blog series navigation ──────────────────────────────────────── */
.series-nav { max-width:700px;margin:24px 0;padding:12px 16px;border-left:3px solid var(--accent);background:rgba(100,255,218,.03);border-radius:0 4px 4px 0 }
.series-nav-title { font:600 12px var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px }
.series-nav a { display:block;font:400 14px var(--sans);color:var(--t-body);text-decoration:none;padding:4px 0;transition:color .2s }
.series-nav a:hover { color:var(--accent) }
.series-nav a.current { color:var(--accent);font-weight:600 }

/* ── #14: Accessibility — skip link focus ────────────────────────── */
.skip:focus { position:fixed;top:10px;left:10px;z-index:9999;padding:12px 20px;background:var(--bg-alt);color:var(--accent);border:2px solid var(--accent);border-radius:4px;font:600 14px var(--mono);text-decoration:none;outline:none }

/* ── #7: Share preview toast ──────────────────────────────────────── */
.share-toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-alt);border:1px solid var(--accent);border-radius:8px;padding:10px 20px;font:500 13px var(--mono);color:var(--accent);z-index:200;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;white-space:nowrap }
.share-toast.vis { opacity:1;transform:translateX(-50%) translateY(0) }

/* ── Offline indicator ───────────────────────────────────────────── */
.offline-bar { position:fixed;top:0;left:0;right:0;z-index:999;background:#ff6090;color:#fff;text-align:center;padding:8px;font:500 13px var(--mono);transform:translateY(-100%);transition:transform .4s var(--ease) }
.offline-bar.vis { transform:none }

/* ── "Was this helpful?" widget ──────────────────────────────────── */
.helpful { max-width:700px; margin:24px 0; text-align:center; padding:16px; border:1px solid var(--border); border-radius:4px }
.helpful-title { font:500 14px var(--sans); color:var(--t-body); margin-bottom:12px }
.helpful-btn { padding:8px 20px; border:1px solid var(--border); border-radius:4px; background:transparent; color:var(--t-body); font:500 13px var(--mono); cursor:pointer; transition:all .2s; margin:0 6px }
.helpful-btn:hover { border-color:var(--accent); color:var(--accent) }
.helpful-thanks { font:500 14px var(--sans); color:var(--accent) }

/* ── Print — beautiful resume format ──────────────────────────────── */
@media print {
  /* Hide non-resume elements */
  .nav,.sf-wrap,.ft,.btt,.glow-overlay,.icon-btn,.menu-btn,.langs,
  .print-btn,.hero-cta,.hero-hint,.avatar-ring,.page-nav,.skip,
  .hero-socials,.gear-btn,.settings-overlay,.toc,.post-nav,.reactions,
  .post-author,.grain,.reading-bar,.snake-wrap,.guestbook-form,
  .custom-cursor,.cmd-overlay,.related-posts,.blog-filter,.bookmark-btn,
  .focus-btn,.chart-tip,.chart-canvas,.chart-avg,.helpful,.privacy-banner,
  .offline-bar,.share-links { display:none!important }

  /* Reset everything */
  * { color:#1a1a1a!important; text-shadow:none!important }
  body { background:#fff!important; color:#1a1a1a!important; font:400 10.5pt/1.45 'Georgia','Times New Roman',serif }
  .wrap { max-width:100%; padding:0 20px; margin:0 }
  .hero { min-height:auto!important; padding:0!important; margin-bottom:16pt }
  .hero-row { gap:20px!important }
  .hero-text { flex:1 }

  /* Name as resume header */
  .hero-name { font:700 22pt/1 'Helvetica Neue','Arial',sans-serif!important; color:#000!important;
    -webkit-text-fill-color:#000!important; background:none!important; margin-bottom:4pt; letter-spacing:0 }
  .hero-tagline { font:400 11pt/1.3 'Georgia',serif!important; color:#444!important;
    -webkit-text-fill-color:#444!important; background:none!important; margin-top:2pt }
  .hero-greeting { display:none }
  .hero-body { font-size:9.5pt; line-height:1.4; max-width:100%; margin-top:8pt; color:#333!important }
  .hero-body p { margin-bottom:4pt }

  /* Avatar in print — small, top-right */
  .avatar-wrap { width:80px!important; height:80px!important }
  .avatar { width:80px!important; height:80px!important; filter:none!important; border:1px solid #ddd!important; border-radius:4px!important }

  /* Section titles */
  .section-title { font:700 12pt/1 'Helvetica Neue','Arial',sans-serif!important;
    color:#000!important; -webkit-text-fill-color:#000!important; background:none!important;
    border-bottom:1.5pt solid #000; padding-bottom:3pt; margin:14pt 0 8pt; page-break-after:avoid }
  .section-title .num { color:#666!important; font-size:10pt }
  .section-title::after { display:none }

  /* Cards — no decoration */
  .card { background:none!important; border:none!important; padding:0!important;
    box-shadow:none!important; border-radius:0!important }

  /* Sections */
  .section { padding:0!important; margin:0 }

  /* Page header for subpages */
  .ph { padding:0!important }
  .ph h1 { font:700 18pt/1 'Helvetica Neue','Arial',sans-serif!important;
    color:#000!important; -webkit-text-fill-color:#000!important; background:none!important;
    border-bottom:1.5pt solid #000; padding-bottom:4pt; margin-bottom:10pt }

  /* Markdown in print */
  .md h4 { font:600 10.5pt/1.2 'Helvetica Neue','Arial',sans-serif!important;
    color:#000!important; margin:10pt 0 3pt; page-break-after:avoid }
  .md h4:first-child { margin-top:0 }
  .md p { font-size:9.5pt; margin-bottom:3pt; color:#333!important }
  .md ul { margin:2pt 0 6pt; padding-left:14pt }
  .md li { font-size:9.5pt; margin-bottom:2pt; color:#333!important }
  .md li::marker { color:#666!important }
  .md strong { color:#000!important }
  .md a { color:#06c!important; text-decoration:underline }
  .md hr { border:none; height:.5pt; background:#ccc; margin:8pt 0 }
  .md code { font-size:9pt; background:#f0f0f0!important; color:#333!important; padding:1px 3px; border-radius:2px }
  .md pre { background:#f8f8f8!important; border:1px solid #e0e0e0!important; padding:8pt; font-size:8.5pt }

  /* Blog posts in print */
  .posts { padding:0 }
  .post-row { padding:6pt 0 }
  .post-row a { color:#000!important }
  .post-date { color:#666!important }

  /* Force visibility */
  .reveal,.stagger { opacity:1!important; transform:none!important; animation:none!important }

  /* Page breaks */
  .section { page-break-inside:avoid }
  h4 { page-break-after:avoid }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none }
  .stagger { opacity: 1; transform: none }
  .chart-col { animation: none }
  .hero { min-height: auto }
}

/* ── View transitions (#42) ───────────────────────────────────────── */
@view-transition { navigation: auto }
::view-transition-old(root) { animation: fadeOut .2s ease }
::view-transition-new(root) { animation: fadeUp .3s ease }
@keyframes fadeOut { to { opacity:0; transform:translateY(-8px) } }

/* ── Responsive: tablet ───────────────────────────────────────────── */
@media (max-width:768px) {
  .nav { padding:0 16px; height:56px }
  .menu-btn { display:flex }
  .links {
    display:none; position:absolute;
    top:56px; left:0; right:0;
    background:var(--bg-alt);
    border-bottom:1px solid var(--border);
    flex-direction:column; padding:16px;
    box-shadow:0 10px 30px var(--shadow);
  }
  [data-theme="light"] .links { background:#fff; box-shadow:0 10px 30px rgba(0,0,0,.08) }
  .links.open { display:flex }
  .link { padding:12px 16px; font-size:15px }
  .pill { padding:6px 12px; font-size:13px }
  .wrap { padding:0 24px }
  .hero { min-height:auto; padding:120px 0 60px }
  .hero-row { flex-direction:column-reverse; gap:32px; align-items:flex-start }
  .avatar-wrap,.avatar { width:160px; height:160px }
  .section { padding:60px 0 }
  .card { padding:20px }
  .ph { padding:80px 0 24px }
  .e404-code { font-size:80px }
  .toc { display:none!important }
  .post-nav { flex-direction:column }
}

/* ── Responsive: phone ────────────────────────────────────────────── */
@media (max-width:480px) {
  body { font-size:16px }
  .brand { font-size:.95rem }
  .avatar-wrap,.avatar { width:120px; height:120px }
  .hero-name { font-size:28px }
  .hero-tagline { font-size:24px }
  .card { padding:16px }
  .section { padding:48px 0 }
  .e404-code { font-size:60px }
}