/*
Theme Name: Blank
Author: You
Description: Minimal personal theme.
Version: 1.5
*/

/* ----------------------------------------
   VARIABLES & GLOBAL RESET
----------------------------------------- */

/* Theme tokens. data-theme is set on <html> before first paint by the inline
   script in functions.php (system setting, or the visitor's saved choice from
   the nav toggle). Each light value is exactly the colour it replaced, so light
   mode looks as it did before tokenising. --hb-glass and --hb-line are RGB
   triplets so every use keeps its own alpha: rgb(var(--hb-glass) / 0.72).
   Accent colours stay literal: the blue-indigo gradients suit both themes. */
:root {
  color-scheme: light;
  --hb-bg: #ffffff;
  --hb-bg-alt: #f5f5f7;
  --hb-fill: #e8e8ed;
  --hb-fill-tint: #eef0f8;
  --hb-text: #1d1d1f;
  --hb-text-alt: #1a1a1a;
  --hb-text-strong: #374151;
  --hb-text-2: #6e6e73;
  --hb-text-2-alt: #555555;
  --hb-text-2-cool: #6b7280;
  --hb-text-hover: #666666;
  --hb-text-3: #86868b;
  --hb-text-3-cool: #9ca3af;
  --hb-placeholder: #aeaeb2;
  --hb-hairline: #d0d0d5;
  --hb-hairline-soft: #e5e5ea;
  --hb-hairline-strong: #c0c0c5;
  --hb-hairline-grey: #e0e0e0;
  --hb-border: #eceefa;
  --hb-border-cool: #e2e5ee;
  --hb-border-soft: #e5e7f5;
  --hb-border-strong: #c7cbe0;
  --hb-tint: #f5f6ff;
  --hb-tint-strong: #eef0ff;
  --hb-tint-ink: #3730a3;
  --hb-indigo-line: #c7d2fe;
  --hb-indigo-text: #4f46e5;
  --hb-map-bg-1: #f4f8ff;
  --hb-map-bg-2: #f7f5ff;
  --hb-map-bg-3: #fbfbff;
  --hb-glass: 255 255 255;
  --hb-line: 0 0 0;

  /* older names, still used in a few rules */
  --text-main: var(--hb-text-alt);
  --text-muted: var(--hb-text-2-alt);
  --border-subtle: var(--hb-hairline-grey);
  --bg-main: var(--hb-bg);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --hb-bg: #0b0b10;
  --hb-bg-alt: #131319;
  --hb-fill: #1e1f29;
  --hb-fill-tint: #1b1c28;
  --hb-text: #f5f5f7;
  --hb-text-alt: #f5f5f7;
  --hb-text-strong: #e5e7eb;
  --hb-text-2: #a1a1aa;
  --hb-text-2-alt: #a1a1aa;
  --hb-text-2-cool: #9ca3af;
  --hb-text-hover: #c4c4cc;
  --hb-text-3: #8b8b95;
  --hb-text-3-cool: #7b8191;
  --hb-placeholder: #63636d;
  --hb-hairline: #2e2f3a;
  --hb-hairline-soft: #26262f;
  --hb-hairline-strong: #3a3a45;
  --hb-hairline-grey: #2a2a33;
  --hb-border: #262838;
  --hb-border-cool: #262838;
  --hb-border-soft: #222433;
  --hb-border-strong: #3a3d55;
  --hb-tint: #171828;
  --hb-tint-strong: #22244a;
  --hb-tint-ink: #c7d2fe;
  --hb-indigo-line: #3b3f6e;
  --hb-indigo-text: #a5b4fc;
  --hb-map-bg-1: #0f1220;
  --hb-map-bg-2: #12111d;
  --hb-map-bg-3: #0d0d14;
  --hb-glass: 24 24 32;
  --hb-line: 255 255 255;
}

/* The white "glossy" divider lines glow harshly on a dark page; keep a hint. */
:root[data-theme="dark"] :is(.hb-bio, .hb-career, .hb-projects-section, .hb-about-achievements,
  .hb-contact-main, .hb-project-coming-soon)::before,
:root[data-theme="dark"] :is(.hb-bio, .hb-career, .hb-projects-section, .hb-about-achievements,
  .hb-contact-main, .hb-project-coming-soon)::after {
  opacity: 0.2;
}

/* Switching themes shouldn't replay every element's hover transition at once. */
.hb-theme-switching,
.hb-theme-switching *,
.hb-theme-switching *::before,
.hb-theme-switching *::after {
  transition: none !important;
}

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

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

/* ----------------------------------------
   LAYOUT WRAPPER
----------------------------------------- */

.hb-site {
  min-height: 100vh;
  background: var(--bg-main);
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------
   NAVBAR
----------------------------------------- */

.hb-nav {
  width: 100%;
  background: rgb(var(--hb-glass) / 0.55);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  padding: 26px 40px;
  display: flex;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  border-bottom: 1px solid rgb(var(--hb-glass) / 0.4);
  box-shadow: 0 2px 24px rgb(var(--hb-glass) / 0.3), 0 1px 6px rgba(0, 0, 0, 0.06);
  transition:
    padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.4s ease,
    box-shadow 0.4s ease;
}

.hb-nav-home-link {
  margin-right: clamp(16px, 2.5vw, 40px);
}

.hb-nav.shrink {
  padding: 16px 40px;
  background: rgb(var(--hb-glass) / 0.72);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  box-shadow: 0 4px 30px rgb(var(--hb-glass) / 0.25), 0 2px 10px rgba(0, 0, 0, 0.07);
}

.hb-nav-links {
  display: flex;
  gap: clamp(20px, 5vw, 64px);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.hb-nav-links a {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--hb-text-alt);
  font-weight: 400;
  letter-spacing: -0.04em;
  text-decoration: none;
  font-size: clamp(13px, 1.6vw, 20px);
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.hb-nav:not(.shrink) .hb-nav-links {
  transform: scale(1.2);
}

.hb-nav.shrink .hb-nav-links {
  transform: scale(1.0);
}

.hb-nav-links a:hover {
  color: var(--hb-text-hover);
  transform: translateY(-2px);
}

/* ----------------------------------------
   MAIN CONTENT
----------------------------------------- */

.hb-content {
  padding-top: 120px;            /* matches tall navbar */
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------
   GENERIC PAGE CONTENT
----------------------------------------- */

.hb-generic {
  max-width: 800px;
  margin: 40px auto 64px auto;
  padding: 0 16px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ----------------------------------------
   FOOTER
----------------------------------------- */

.hb-footer {
  padding: 16px 40px 22px;
  color: var(--hb-text-hover);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgb(var(--hb-glass) / 0.5);
  background: rgb(var(--hb-glass) / 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 -2px 24px rgb(var(--hb-glass) / 0.4), 0 -1px 6px rgba(0, 0, 0, 0.04);
}

.hb-footer-left {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.hb-footer-right {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.hb-footer a {
  color: var(--hb-text-alt);
  text-decoration: none;
}

.hb-footer a:hover {
  text-decoration: underline;
}

/* ----------------------------------------
   PROJECT DETAIL PAGES (shared)
----------------------------------------- */

.hb-project-detail-page {
  padding-top: 120px;
}

.hb-project-detail-hero {
  text-align: center;
  padding: 40px 20px 32px;
  background: var(--hb-bg);
}

.hb-project-back {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: var(--hb-text-3);
  text-decoration: none;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  transition: color 0.2s;
}

.hb-project-back:hover {
  color: #38bdf8;
}

.hb-project-detail-tag {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hb-text-3);
  margin-top: 16px;
  margin-bottom: 20px;
}

.hb-project-detail-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(40px, 5.5vw, 60px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 20px;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hb-project-detail-hero .hb-project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.hb-project-detail-hero .hb-project-tags span {
  padding: 5px 14px;
  background: rgba(56, 189, 248, 0.08);
  color: #38bdf8;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  letter-spacing: 0.01em;
}

/* Coming soon section */
.hb-project-coming-soon {
  position: relative;
  background: rgb(var(--hb-glass) / 0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  padding: clamp(64px, 10vw, 120px) 20px;
}

.hb-project-coming-soon::before,
.hb-project-coming-soon::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgb(var(--hb-glass) / 0.95) 30%,
    rgba(200, 230, 255, 0.9) 50%,
    rgb(var(--hb-glass) / 0.95) 70%,
    transparent);
  box-shadow: 0 0 10px rgba(180, 220, 255, 0.6);
}
.hb-project-coming-soon::before { top: 0; }
.hb-project-coming-soon::after  { bottom: 0; }

.hb-coming-soon-inner {
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.hb-coming-soon-icon {
  font-size: 48px;
  margin-bottom: 20px;
}

.hb-coming-soon-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--hb-text);
  margin-bottom: 10px;
}

.hb-coming-soon-sub {
  font-size: 15px;
  color: var(--hb-text-3);
  letter-spacing: -0.01em;
}

/* ----------------------------------------
   PROJECT DETAIL — BERKELEY CONTENT
----------------------------------------- */

/* Stats strip */
.hb-pd-stats {
  background: var(--hb-bg-alt);
  padding: 40px 24px;
}
.hb-pd-stats-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.hb-pd-stat-num {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 300;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
  padding-bottom: 4px;
  margin-bottom: 16px;
}
.hb-pd-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hb-text-3);
}

/* Sections */
.hb-pd-section {
  padding: clamp(48px, 7vw, 88px) clamp(24px, 8vw, 120px);
  background: var(--hb-bg);
}
.hb-pd-section--alt {
  background: var(--hb-bg-alt);
}
.hb-pd-section-inner {
  max-width: 860px;
  margin: 0 auto;
}
.hb-pd-section-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--hb-text);
  margin-bottom: 20px;
}
.hb-pd-subsection-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hb-text-3);
  margin: 40px 0 16px;
}
.hb-pd-body {
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.75;
  color: var(--hb-text-2);
  letter-spacing: -0.01em;
}

/* Device stack */
.hb-pd-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hb-pd-layer {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: rgb(var(--hb-glass) / 0.6);
  border: 1px solid rgb(var(--hb-line) / 0.05);
  border-radius: 12px;
  backdrop-filter: blur(8px);
}
.hb-pd-layer-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.hb-pd-layer-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--hb-text);
  letter-spacing: -0.01em;
}
.hb-pd-layer-desc {
  display: block;
  font-size: 12px;
  color: var(--hb-text-3);
  margin-top: 2px;
}

/* Figure grids */
.hb-pd-figures {
  display: grid;
  gap: 20px;
  margin-top: 28px;
}
.hb-pd-figures--3 {
  grid-template-columns: repeat(3, 1fr);
}
.hb-pd-figure {
  margin: 0;
}
.hb-pd-img-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--hb-fill);
  position: relative;
}
.hb-pd-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hb-pd-img-wrap.hb-pd-img-missing::after {
  content: 'Image coming soon';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--hb-text-3);
  font-style: italic;
}
.hb-pd-figure figcaption {
  margin-top: 10px;
  font-size: 12px;
  color: var(--hb-text-3);
  text-align: center;
  letter-spacing: 0.01em;
}

/* Findings */
.hb-pd-findings {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hb-pd-finding {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.hb-pd-finding-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  margin-top: 7px;
}
.hb-pd-finding p {
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.7;
  color: var(--hb-text-2);
}
.hb-pd-finding strong {
  color: var(--hb-text);
  font-weight: 600;
}

/* Future plans */
.hb-pd-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 8px;
}
.hb-pd-plan {
  background: rgb(var(--hb-glass) / 0.7);
  border: 1px solid rgb(var(--hb-line) / 0.06);
  border-radius: 18px;
  padding: 28px 24px;
  backdrop-filter: blur(12px);
}
.hb-pd-plan-num {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 10px;
}
.hb-pd-plan h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--hb-text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.hb-pd-plan p {
  font-size: 13px;
  line-height: 1.65;
  color: var(--hb-text-2);
}

/* Responsive */
@media (max-width: 768px) {
  .hb-pd-stats-inner   { grid-template-columns: repeat(2, 1fr); }
  .hb-pd-figures--3    { grid-template-columns: 1fr; }
  .hb-pd-plans         { grid-template-columns: 1fr; }
  .hb-pd-section       { padding: 40px 20px; }
}

/* ----------------------------------------
   RESPONSIVE (GLOBAL)
----------------------------------------- */

@media (max-width: 860px) {
  .hb-nav {
    padding: 24px 18px;
  }

  .hb-nav.shrink {
    padding: 12px 18px;
  }

  .hb-footer {
    padding: 14px 18px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .hb-nav {
    padding: 18px 12px;
  }

  .hb-nav.shrink {
    padding: 10px 12px;
  }

  .hb-nav-links {
    gap: 14px;
  }

  .hb-nav:not(.shrink) .hb-nav-links {
    transform: scale(1.05);
  }
}

/* ── Accessibility ── */
.hb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nav layout: "Hua Studio" mark (home) on the left, links on the right.
   All links are always shown so they never shift between pages. */
/* overrides the centered layout above.
   Space under the links (and mark) for the dot, so text + dot sit centred. */
.hb-nav-links {
  position: relative;
  padding-bottom: 18px;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.hb-nav-mark {
  margin-bottom: 18px;
  transition: margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shrunk: the dot tucks in closer to the text */
.hb-nav.shrink .hb-nav-links {
  padding-bottom: 12px;
}

.hb-nav.shrink .hb-nav-mark {
  margin-bottom: 12px;
}

.hb-nav {
  justify-content: space-between;
  align-items: center;
}

.hb-nav-mark {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(16px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hb-text-alt);
  text-decoration: none;
  white-space: nowrap;
}

.hb-nav-mark span {
  font-weight: 300;
}

.hb-nav:not(.shrink) .hb-nav-links,
.hb-nav.shrink .hb-nav-links {
  transform: none;
}

.hb-nav-links a {
  font-size: clamp(16px, 1.6vw, 21px);
  position: relative;
}

/* Current page: theme gradient text + a small glowing dot */
.hb-nav-links a.is-current {
  background: linear-gradient(90deg, #60a5fa, #818cf8 50%, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 600px) {
  .hb-nav-links {
    gap: 14px;
  }

  .hb-nav-links a {
    font-size: 14px;
    letter-spacing: -0.02em;
  }

  .hb-nav-mark {
    font-size: 14px;
    letter-spacing: 0.16em;
  }
}

@media (max-width: 420px) {
  .hb-nav-mark span {
    display: none;
  }
}

/* ── Sliding nav dot + page transitions (driven by navbar.js) ── */
.hb-nav-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 8px 2px rgba(129, 140, 248, 0.55);
  pointer-events: none;
  opacity: 0;
  margin-top: 5px; /* extra gap below the text while the nav is expanded */
  transition:
    transform 0.45s cubic-bezier(0.65, 0, 0.35, 1),
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.hb-nav.shrink .hb-nav-dot {
  margin-top: 0;
}

.hb-nav-dot.is-ready {
  opacity: 1;
}

.hb-nav-dot.no-anim {
  /* only the sideways slide is switched off; the gap still eases */
  transition:
    margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

main {
  animation: hb-page-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  transition: opacity 0.28s ease, transform 0.28s ease;
}

body.hb-leaving main {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes hb-page-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* Always reserve the scrollbar's space so pages with and without
   a scrollbar line up and the nav doesn't shift between them. */
html {
  overflow-y: scroll;
}

/* "Request CV" button: gradient outline pill in the theme colours */
.hb-cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 10px 22px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hb-text);
  text-decoration: none;
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--hb-bg), var(--hb-bg)) padding-box,
    linear-gradient(90deg, #60a5fa, #818cf8 50%, #c084fc) border-box;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hb-cv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(129, 140, 248, 0.25);
}

/* ── Light/dark toggle (right end of the nav; driven by navbar.js) ── */
.hb-nav-end {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 36px);
}

.hb-theme-toggle {
  /* same bottom space as the links reserve for the dot, so the icon centres on the text */
  margin-bottom: 18px;
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(var(--hb-line) / 0.08);
  background: rgb(var(--hb-glass) / 0.6);
  color: var(--hb-text-alt);
  cursor: pointer;
  transition: margin 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease;
}

.hb-nav.shrink .hb-theme-toggle { margin-bottom: 12px; }
.hb-theme-toggle:hover { border-color: rgba(129, 140, 248, 0.45); transform: translateY(-1px); }
.hb-theme-toggle:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }

.hb-theme-toggle svg { width: 17px; height: 17px; }
.hb-icon-moon { fill: currentColor; }
.hb-icon-sun { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.hb-icon-sun circle { fill: currentColor; stroke: none; }
.hb-icon-sun,
:root[data-theme="dark"] .hb-icon-moon { display: none; }
:root[data-theme="dark"] .hb-icon-sun { display: block; }

@media (max-width: 600px) {
  .hb-nav-end { gap: 10px; }
  .hb-theme-toggle { width: 30px; height: 30px; }
  .hb-theme-toggle svg { width: 15px; height: 15px; }
}