:root {
  /* `only` stops phone browsers (Chrome Android, Samsung Internet) from force-darkening the light theme */
  color-scheme: only light;
  --bg: #f6f7f9;
  --paper: #ffffff;
  --paper-2: #f1f2f5;
  --surface-solid: #ffffff;
  --border: rgba(16, 19, 28, 0.08);
  --border-hi: rgba(16, 19, 28, 0.14);
  --text: #0e1116;
  --text-2: #484e5a;
  --text-dim: #6a7180;
  --accent: #2563eb;
  --accent-2: #0d9488;
  --accent-soft: rgba(37, 99, 235, 0.08);
  --accent-glow: rgba(37, 99, 235, 0.22);
  --accent-muted: rgba(13, 148, 136, 0.07);
  --grad: linear-gradient(100deg, #2563eb 0%, #0891b2 55%, #0d9488 100%);
  --shadow: 0 1px 2px rgba(16, 19, 28, 0.04), 0 1px 1px rgba(16, 19, 28, 0.02);
  --shadow-lg: 0 16px 40px -12px rgba(16, 19, 28, 0.18), 0 2px 6px rgba(16, 19, 28, 0.05);
  --glow-1: rgba(59, 130, 246, 0.13);
  --glow-2: rgba(20, 184, 166, 0.10);
  --grid-line: rgba(16, 19, 28, 0.045);
  --backdrop: rgba(10, 12, 16, 0.45);
  --r: 14px;
  --r-lg: 20px;
  --mono: 'IBM Plex Mono', 'Noto Sans KR', ui-monospace, monospace;
  --display: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --topbar-h: 56px;

  /* Shared card surface, no blur. */
  --glass-bg: var(--paper);
  --glass-border: 1px solid var(--border);
}
/* Light by default; dark only when the visitor picks it (topbar toggle, stored per browser). */
:root[data-theme="dark"] {
  color-scheme: only dark;
  --bg: #1c1f26;
  --paper: #252931;
  --paper-2: #2c3039;
  --surface-solid: #252931;
  --border: rgba(255, 255, 255, 0.09);
  --border-hi: rgba(255, 255, 255, 0.16);
  --text: #eef0f4;
  --text-2: #b6bcc8;
  --text-dim: #8e95a3;
  --accent: #60a5fa;
  --accent-2: #3fd3bd;
  --accent-soft: rgba(96, 165, 250, 0.12);
  --accent-glow: rgba(96, 165, 250, 0.24);
  --accent-muted: rgba(63, 211, 189, 0.09);
  --grad: linear-gradient(100deg, #60a5fa 0%, #22d3ee 55%, #3fd3bd 100%);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 16px 40px -14px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.18);
  --glow-1: rgba(59, 130, 246, 0.14);
  --glow-2: rgba(45, 212, 191, 0.08);
  --grid-line: rgba(255, 255, 255, 0.04);
  --backdrop: rgba(10, 12, 16, 0.55);
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
/* in-page nav swaps the view with a short cross-fade (View Transitions) instead of scrolling */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.14s; }
#top, #repos, #journey, section[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); }

html { scrollbar-width: thin; scrollbar-color: var(--border-hi) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--border-hi) 80%, transparent);
  border-radius: 999px;
  border: 1px solid var(--bg);
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--accent) 85%, black);
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: transparent; }

::selection { background: var(--accent-soft); color: var(--text); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 6px;
}

body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, "Segoe UI", Pretendard, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
  min-height: 100dvh;
}

/* ── mesh tint: static corner wash, own layer so it isn't dimmed by .paper-grain's opacity ── */
.mesh-tint {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 12% -5%, var(--glow-1), transparent 70%),
    radial-gradient(ellipse 50% 40% at 95% 10%, var(--glow-2), transparent 70%);
}
.mesh-tint::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 720px;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 30%, transparent 75%);
}

/* ── paper grain: fixed noise layer, replaces the old video background ── */
.paper-grain {
  display: none;
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.15 0 0 0 0 0.12 0 0 0 0 0.09 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  opacity: 0.34;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce), (max-width: 560px) {
  .paper-grain { opacity: 0.22; }
}

.accent-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100;
  background: var(--accent);
  opacity: 0.9;
}

/* Shared opaque card surface. */
.glass {
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--shadow);
}

/* ── Topbar ── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  padding: 6px 1.5rem;
  padding-top: max(6px, env(safe-area-inset-top, 0px));
  padding-left: max(1.5rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.5rem, env(safe-area-inset-right, 0px));
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
  transition: border-color 0.25s, box-shadow 0.25s;
}
html.is-scrolled .topbar {
  border-bottom-color: var(--border-hi);
  box-shadow: 0 6px 24px -12px rgba(16, 19, 28, 0.18);
}
.topbar-inner {
  max-width: calc(1320px - 3rem);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-cluster {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--text);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 700;
  font-size: 14px;
  font-family: var(--display);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.brand:hover .brand-mark {
  transform: rotate(-4deg);
  box-shadow: 0 3px 10px var(--accent-glow);
}
.brand-name {
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
  font-weight: 600;
}

.topnav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 70%, transparent);
  border: 1px solid var(--border);
  min-width: 0;
  flex-shrink: 1;
}
.topnav a {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: color 0.2s, background 0.2s, transform 0.2s;
}
.topnav a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.theme-toggle {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.topnav a.nav-cta {
  color: var(--bg);
  font-weight: 600;
  background: var(--text);
}
.topnav a.nav-cta:hover {
  filter: brightness(1.08);
}

/* ── Layout ── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 2rem;
}

/* ── Hero ── */
.hero {
  position: relative;
  margin-bottom: 2rem;
  text-align: left;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  margin: 0 0 1.4rem;
  padding: 0.3rem 0.8rem 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: none;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-2);
}

h1 {
  font-family: var(--display);
  font-size: clamp(2.3rem, 5.2vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  margin: 0 0 0.9rem;
  line-height: 1.06;
}
h1 .name-line {
  display: block;
  color: var(--text);
  margin-bottom: 0.1em;
}
h1 .hl {
  display: block;
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.06em;
}

.tagline {
  display: block;
  color: var(--text-2);
  font-size: 1.02rem;
  font-weight: 400;
  margin: 0 0 1.3rem;
  max-width: 34em;
  line-height: 1.6;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-bottom: 2.2rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 0.65rem 1.15rem;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, border-color 0.2s, filter 0.2s;
}
.btn-arrow {
  font-size: 12px;
  opacity: 0.8;
  transition: transform 0.25s var(--ease);
}
.btn-primary {
  color: var(--bg);
  background: var(--text);
  box-shadow: var(--shadow-lg);
}
.btn-ghost {
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--border-hi);
}
@media (hover: hover) {
  .btn-primary:hover {
    filter: none;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -10px var(--accent-glow), var(--shadow-lg);
  }
  .btn-primary:hover .btn-arrow { transform: translateY(3px); }
  .btn-ghost:hover {
    border-color: var(--border-hi);
    background: var(--paper-2);
    transform: translateY(-2px);
  }
  .btn-ghost:hover .btn-arrow { transform: translateY(3px); }
  .btn:active { transform: translateY(0) scale(0.98); }
}

/* hero stats */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.stat-card {
  position: relative;
  padding: 0.7rem 0.75rem;
  border-radius: var(--r);
  background: var(--glass-bg);
  border: var(--glass-border);
  box-shadow: var(--shadow);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
@media (hover: hover) {
  .stat-card:hover {
    border-color: var(--border-hi);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
  }
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.stat-label {
  display: block;
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--text-dim);
  letter-spacing: 0;
  font-weight: 500;
}

.skill-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
}
.skill-strip span {
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.36rem 0.75rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s var(--ease);
}
@media (hover: hover) {
  .skill-strip span:hover {
    color: var(--accent-2);
    border-color: var(--accent-2);
    background: var(--accent-muted);
    transform: translateY(-2px);
  }
}

.exp-note {
  position: relative;
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 0.9rem 1rem 0.9rem 1.15rem;
  border-radius: var(--r);
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.exp-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.learning-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r);
  margin-bottom: 3.8rem;
  position: relative;
}
.learning-note .li-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-muted);
  border: 1px solid var(--border);
}
.learning-note .li-icon svg {
  width: 18px;
  height: 18px;
  color: var(--accent-2);
}
.learning-note .li-body p {
  margin: 0 0 0.5rem;
  color: var(--text-2);
  font-size: 0.85rem;
  line-height: 1.6;
}
.learning-note .li-body p b {
  color: var(--text);
  font-weight: 600;
}
.learning-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.learning-tags span {
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-2);
  background: var(--paper);
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.25s var(--ease);
}
@media (hover: hover) {
  .learning-tags span:hover {
    color: var(--accent-2);
    border-color: var(--accent-2);
    background: var(--accent-muted);
    transform: translateY(-2px);
  }
}

/* sections */
section { margin-bottom: 1.75rem; }
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.9rem;
}
h2 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
h2::before {
  display: none;
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
  background: var(--accent);
}
.section-sub {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-dim);
}

#journey .section-head h2::before {
  background: var(--accent-2);
}

/* repo cards */
.repo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.repo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.2s;
  overflow: hidden;
}
.repo-thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  transition: transform 0.4s var(--ease);
}
.repo-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.7rem 0.85rem;
}
.repo-card:focus,
.repo-card:focus-visible,
.tl-item:focus,
.tl-item:focus-visible {
  outline: none;
}
@media (hover: hover) {
  .repo-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
  }
  .repo-card:hover .repo-thumb { transform: scale(1.05); }
  .repo-card:hover .repo-head svg { color: var(--accent); }
  .repo-card:hover .repo-live {
    border-color: var(--accent-2);
  }
  .repo-card:hover .repo-tags span {
    border-color: var(--accent);
    color: var(--accent);
  }
  .repo-card:active { transform: translateY(-1px); }
}

.repo-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.repo-head svg,
.repo-head .icon-gh {
  width: 15px;
  height: 15px;
  color: var(--text-dim);
  flex-shrink: 0;
  transition: color 0.25s;
}
.repo-head h3 {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 650;
  flex: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.repo-live {
  font-family: var(--mono);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent-2);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.42rem;
  border-radius: 999px;
  background: var(--accent-muted);
  border: 1px solid var(--border);
  flex-shrink: 0;
  transition: border-color 0.25s;
}
.repo-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
}
.repo-desc {
  margin: 0 0 0.55rem;
  color: var(--text-2);
  font-size: 0.79rem;
  line-height: 1.5;
  min-height: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
}
.repo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: auto;
}
.repo-tags span {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  background: var(--paper);
  color: var(--text-2);
  font-weight: 500;
  border: 1px solid var(--border);
  transition: border-color 0.2s, color 0.2s;
}

/* journey timeline */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.tl-item {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1rem 0.7rem 2.3rem;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background 0.25s, transform 0.25s var(--ease);
}
.tl-thumb {
  flex-shrink: 0;
  width: 128px;
  height: auto;
  aspect-ratio: 8 / 5;
  object-fit: cover;
  object-position: top;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  transition: transform 0.4s var(--ease);
}
@media (hover: hover) {
  .tl-item:hover {
    border-color: var(--border-hi);
    background: var(--paper);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
  }
  .tl-item:hover .tl-thumb { transform: scale(1.06); }
  .tl-item:hover h3 .go {
    color: var(--accent-2);
    transform: translate(3px, -2px);
  }
  .tl-item:active { background: var(--paper-2); }
}
.tl-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.tl-date {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
}
.tl-ver {
  font-family: var(--mono);
  font-size: 0.58rem;
  color: var(--accent-2);
  padding: 0.06rem 0.4rem;
  background: var(--accent-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.tl-body { flex: 1; min-width: 0; }
.tl-body h3 {
  margin: 0 0 0.25rem;
  font-size: 0.92rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-body h3 .go {
  font-size: 0.76rem;
  color: var(--text-dim);
  font-weight: 400;
  display: inline-block;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease), color 0.2s;
}
.tl-body p {
  margin: 0;
  color: var(--text-2);
  font-size: 0.79rem;
  line-height: 1.42;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* footer */
footer {
  color: var(--text-dim);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid var(--border);
  border-radius: var(--r);
}
footer .flinks {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
footer a {
  color: var(--text-dim);
  text-decoration: none;
  padding: 0.38rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
footer a:hover {
  color: var(--accent-2);
  border-color: var(--border);
  background: var(--accent-muted);
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .hero-stats { grid-template-columns: 1fr; }
  .stat-card { display: flex; align-items: baseline; gap: 0.75rem; }
  .stat-num { margin-bottom: 0; }
}

@media (max-width: 560px) {
  footer {
    flex-direction: column;
    gap: 0.7rem;
    text-align: center;
  }
  .brand-name { display: none; }
  .brand-cluster { gap: 8px; }
  .topbar {
    padding: 6px 0.9rem;
    padding-top: max(6px, env(safe-area-inset-top, 0px));
    padding-left: max(0.9rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.9rem, env(safe-area-inset-right, 0px));
  }
  .topnav a {
    padding: 6px 9px;
    font-size: 12px;
    min-height: 36px;
  }
  /* Projects/Journey duplicate the hero CTAs right below the fold —
     drop them here so GitHub + Resume stay visible in the pill */
  .topnav .topnav-anchor { display: none; }
  .wrap {
    padding: 3rem 1.15rem 3.5rem;
    padding-bottom: max(3.5rem, env(safe-area-inset-bottom, 0px) + 2rem);
    padding-left: max(1.15rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.15rem, env(safe-area-inset-right, 0px));
  }
  .exp-note,
  .learning-note { margin-bottom: 2rem; }
  .repo-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
  .hero-cta .btn {
    flex: 1;
    justify-content: center;
    min-height: 44px;
  }
  h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); }
  dialog.modal-frame {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    margin: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .repo-card,
  .stat-card,
  .tl-item,
  .btn,
  .skill-strip span,
  .learning-tags span {
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s !important;
  }
  .repo-card:hover,
  .stat-card:hover,
  .tl-item:hover,
  .btn:hover,
  .skill-strip span:hover,
  .learning-tags span:hover {
    transform: none !important;
  }
}

/* modal */
dialog.modal-frame {
  display: none;
  width: min(1100px, 94vw);
  height: 94vh;
  margin: auto;
  padding: 0;
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--border-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  flex-direction: column;
  overflow: hidden;
}
dialog.modal-frame[open] {
  display: flex;
  animation: modalIn 0.25s var(--ease);
}
dialog.modal-frame::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.05rem;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}
.modal-title {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.modal-actions a {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--accent-2);
  text-decoration: none;
  padding: 0.35rem 0.7rem;
  border-radius: 9px;
  border: 1px solid var(--border-hi);
  transition: background 0.15s, border-color 0.15s;
}
.modal-actions a:hover {
  background: var(--accent-muted);
  border-color: var(--accent-2);
}
.modal-close {
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.modal-close svg { width: 13px; height: 13px; }
.modal-close:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.modal-frame iframe {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--surface-solid);
}

.reveal-section {
  padding: 0 12px;
  margin-left: -12px;
  margin-right: -12px;
}
.reveal-section h2,
.reveal-section .section-sub {
  opacity: 1;
  transition: opacity 0.45s ease;
}
/* card reveal: settles into place like a photo being set down — one-shot, not continuous.
   NOTE: this selector out-specifies the base .repo-card/.tl-item rule, so its `transition`
   shorthand is what actually governs hover (border-color/box-shadow/background) too — every
   property that needs to ease on hover must be listed here, or it silently snaps instead. */
.reveal-section .repo-card,
.reveal-section .tl-item {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.18s var(--ease-out),
    box-shadow 0.28s var(--ease),
    border-color 0.2s var(--ease),
    background 0.25s var(--ease);
}
.reveal-section.in-view h2,
.reveal-section.in-view .section-sub {
  opacity: 1;
}
.reveal-section.in-view .repo-card,
.reveal-section.in-view .tl-item {
  opacity: 1;
  transform: none;
}
.reveal-section.in-view h2,
.reveal-section.in-view .section-sub { transition-delay: 0s; }
.reveal-section.in-view .repo-card,
.reveal-section.in-view .tl-item {
  transition-delay: calc(0.05s + var(--reveal-i, 0) * 0.04s), calc(0.05s + var(--reveal-i, 0) * 0.04s), 0s, 0s, 0s;
}
/* .reveal-section.in-view .tl-item (0,3,0) out-specifies plain .tl-item:hover
   (0,2,0), so the hover lift needs to be pinned at equal-or-higher specificity
   here or it silently gets reset by the rest-state transform above. */
@media (hover: hover) {
  .reveal-section.in-view .tl-item:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-section h2,
  .reveal-section .section-sub,
  .reveal-section .repo-card,
  .reveal-section .tl-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Project overview: use the desktop width, keep narrow screens readable. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 2rem; align-items: center; }
.hero-badge { grid-column: 1 / -1; justify-self: start; margin-bottom: 1rem; }
.hero-cta { margin-bottom: 0; }
.hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.context-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-bottom: 1.75rem; }
.context-grid > * { margin: 0; min-width: 0; }
.section-sub a, .repo-head a { color: inherit; text-decoration: none; }
.repo-card { cursor: pointer; }
.repo-head a::after { content: ""; position: absolute; inset: 0; cursor: pointer; }
.repo-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
.repo-actions { position: relative; z-index: 1; }
.section-sub a:hover, .repo-head a:hover { color: var(--accent); }
.repo-head h3 { white-space: normal; overflow-wrap: anywhere; }
.repo-thumb { height: 104px; aspect-ratio: auto; }
.repo-desc { display: block; overflow: visible; }
.repo-actions { margin-top: auto; }
.repo-actions { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.85rem; border-top: 1px solid var(--border); }
.repo-actions a { color: var(--accent); font-size: 0.75rem; font-weight: 600; text-decoration: none; padding: 0.25rem 0; }
.repo-actions a:hover { background: var(--accent-soft); }
.project-map { display: grid; grid-template-columns: 80px repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.project-map button { font: inherit; text-align: left; color: var(--text-2); background: var(--paper); border: 1px solid var(--border-hi); border-radius: var(--r); padding: 0.65rem 0.8rem; cursor: pointer; }
.project-map button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.map-label { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; }
.map-all { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; }
.map-all strong { font-size: 1.5rem; }
.map-track { display: block; height: 4px; margin: 0.65rem 0; background: var(--border); border-radius: 4px; }
.map-track > span { display: block; height: 100%; width: var(--share); background: var(--accent-2); border-radius: inherit; }
.map-flow { display: block; font-size: 0.72rem; word-break: keep-all; }
.project-result { color: var(--text-dim); font-size: 0.75rem; margin: 0.7rem 0 1rem; }
.prism-feature { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; gap: 1rem 1.25rem; padding: 1rem 1.15rem; border-radius: var(--r-lg); border-top: 3px solid var(--accent); }
.feature-label { color: var(--accent); font: 600 0.7rem var(--mono); }
.prism-feature h3 { margin: 0.4rem 0; font-size: 1.15rem; letter-spacing: -0.03em; }
.prism-feature p { font-size: 0.83rem; color: var(--text-2); line-height: 1.6; margin: 0 0 0.5rem; word-break: keep-all; }
.feature-link { display: inline-block; color: var(--accent); font-size: 0.85rem; font-weight: 600; text-decoration: none; padding: 0.4rem 0; }
.feature-link:hover { color: var(--text); }
.prism-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.prism-flow li { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.flow-number { font: 500 0.8rem var(--mono); color: var(--accent); }
.prism-flow strong { display: block; font-size: 0.85rem; }
.prism-flow div > span { display: block; font-size: 0.75rem; color: var(--text-dim); word-break: keep-all; }
.prism-facts { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.prism-facts li { padding: 0.5rem 0.65rem; border-left: 2px solid var(--accent-2); background: var(--accent-muted); border-radius: 0 8px 8px 0; }
.prism-facts strong { display: block; font-size: 1.05rem; color: var(--text); }
.prism-facts span { display: block; font-size: 0.72rem; color: var(--text-dim); word-break: keep-all; }
/* PRISM data flow: connectors draw left→right once when the section enters view. */
.prism-pipeline { grid-column: 1 / -1; list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.9rem; counter-reset: pipe; }
.prism-pipeline li { position: relative; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--paper); counter-increment: pipe; }
.prism-pipeline li::before { content: "0" counter(pipe); display: block; font: 500 0.66rem var(--mono); color: var(--accent); margin-bottom: 0.15rem; }
.prism-pipeline li + li::after { content: ""; position: absolute; top: 50%; right: calc(100% + 1px); width: calc(0.9rem - 2px); height: 2px; background: var(--accent-2); transform-origin: left center; }
.prism-pipeline strong { display: block; font-size: 0.82rem; }
.prism-pipeline span { display: block; font-size: 0.7rem; color: var(--text-dim); line-height: 1.45; word-break: keep-all; }

/* PRISM showcase: tab list + browser-frame stage, slides stacked and cross-faded. */
.prism-showcase { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 3.1fr); gap: 0.9rem; align-items: start; }
.showcase-tabs { display: grid; gap: 0.4rem; }
.showcase-head { grid-column: 1 / -1; margin: 1.2rem 0 -0.2rem; font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.showcase-head span { font-size: 0.78rem; font-weight: 500; color: var(--text-dim); }
.showcase-tabs button { position: relative; overflow: hidden; display: block; width: 100%; text-align: left; font: inherit; color: var(--text-2); background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.75rem; cursor: pointer; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); }
.showcase-tabs button:hover { border-color: var(--border-hi); color: var(--text); }
.showcase-tabs button[aria-selected="true"] { border-color: var(--accent-2); background: var(--accent-muted); color: var(--text); }
.showcase-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.showcase-tabs strong { display: block; font-size: 0.84rem; }
.showcase-tabs span { display: block; font-size: 0.7rem; color: var(--text-dim); word-break: keep-all; }
.tab-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent-2); transform: scaleX(0); transform-origin: left center; }
.prism-showcase.is-playing [aria-selected="true"] .tab-progress { animation: showcase-progress var(--showcase-ms, 4800ms) linear forwards; }
@keyframes showcase-progress { to { transform: scaleX(1); } }
.showcase-stage { margin: 0; border-radius: 14px; overflow: hidden; background: #17181b; border: 1px solid var(--border-hi); box-shadow: var(--shadow-lg), 0 30px 60px -30px var(--accent-glow); }
.showcase-chrome { display: flex; align-items: center; gap: 0.75rem; height: 34px; padding: 0 0.8rem; background: #222327; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.showcase-dots { display: flex; gap: 6px; }
.showcase-dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a3b40; }
.showcase-dots i:first-child { background: #d5674f; }
.showcase-dots i:nth-child(2) { background: #d9a441; }
.showcase-dots i:nth-child(3) { background: #5aa287; }
.showcase-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 0.7rem var(--mono); color: #8d8f96; }
.showcase-url b { color: #e6e3dc; font-weight: 500; }
.showcase-badge { font-size: 0.66rem; color: #9fd3c2; border: 1px solid rgba(159, 211, 194, 0.3); border-radius: 999px; padding: 0.1rem 0.5rem; white-space: nowrap; }
.showcase-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.showcase-slide { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 0.45s var(--ease); pointer-events: none; }
.showcase-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.showcase-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.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; }

/* collection feed: an HTML table styled like the ERP; rows drop in one by one each time the tab opens (finite) */
.showcase-feed { display: flex; flex-direction: column; background: #1b1c20; color: #d9dbe0; font-size: 12px; overflow: hidden; }
.feed-head { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.feed-src { font: 600 0.72rem var(--mono); color: #e9eaee; }
.feed-state { position: relative; font-size: 0.72rem; color: #8f95a3; }
.feed-run::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #2dd4bf; vertical-align: 1px; }
.feed-done { display: none; color: #5eead4; }
.feed-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #2dd4bf; transform: scaleX(1); transform-origin: left center; opacity: 0; }
.feed-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.feed-table th { text-align: left; font-weight: 500; font-size: 0.68rem; color: #8f95a3; padding: 0.5rem 0.6rem; background: #202228; border-bottom: 1px solid rgba(255, 255, 255, 0.06); white-space: nowrap; }
.feed-table td { padding: 0.42rem 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.feed-table th:nth-child(1) { width: 11%; } .feed-table th:nth-child(2) { width: 17%; } .feed-table th:nth-child(3) { width: 11%; }
.feed-table th:nth-child(5) { width: 6%; } .feed-table th:nth-child(6) { width: 10%; } .feed-table th:nth-child(7) { width: 11%; } .feed-table th:nth-child(8) { width: 10%; }
.feed-time, .feed-no { font-family: var(--mono); font-size: 0.68rem; color: #a5abb8; }
.feed-ch { font-size: 0.66rem; padding: 0.1rem 0.4rem; border-radius: 5px; background: rgba(255, 255, 255, 0.06); color: #c9ccd4; }
.feed-item { color: #eef0f3; }
.feed-item small { margin-left: 0.4rem; color: #7f8592; font-size: 0.66rem; }
.feed-qty { text-align: right; padding-right: 1rem !important; font-family: var(--mono); }
.feed-amt i { display: inline-block; height: 9px; max-width: 100%; border-radius: 4px; background: rgba(148, 163, 184, 0.3); vertical-align: middle; }
.feed-pay { color: #a5abb8; font-size: 0.68rem; }
.feed-st { font-size: 0.66rem; padding: 0.1rem 0.45rem; border-radius: 999px; }
.feed-st--prep { color: #93c5fd; background: rgba(59, 130, 246, 0.14); }
.feed-st--ship { color: #5eead4; background: rgba(45, 212, 191, 0.12); }
.feed-st--cancel { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }
.showcase-feed.is-streaming tbody tr { animation: feed-row 0.32s var(--ease-out) both; animation-delay: calc(var(--i) * 170ms + 150ms); }
.showcase-feed.is-streaming .feed-bar { opacity: 1; transform: scaleX(0); animation: feed-bar calc(var(--rows) * 170ms + 300ms) linear forwards, feed-fade 0.3s ease calc(var(--rows) * 170ms + 400ms) forwards; }
.showcase-feed.is-streaming .feed-run { animation: feed-hide 0s linear calc(var(--rows) * 170ms + 350ms) forwards; }
.showcase-feed.is-streaming .feed-done { display: inline; position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; animation: feed-show 0.3s ease calc(var(--rows) * 170ms + 350ms) forwards; }
.showcase-feed:not(.is-streaming) .feed-run { display: none; }
.showcase-feed:not(.is-streaming) .feed-done { display: inline; }
@keyframes feed-row { from { opacity: 0; transform: translateY(-6px); background: rgba(45, 212, 191, 0.14); } 60% { background: rgba(45, 212, 191, 0.08); } to { opacity: 1; transform: none; background: transparent; } }
@keyframes feed-bar { to { transform: scaleX(1); } }
@keyframes feed-fade { to { opacity: 0; } }
@keyframes feed-hide { to { visibility: hidden; } }
@keyframes feed-show { to { opacity: 1; } }
@media (max-width: 720px) {
  .showcase-feed { font-size: 10px; }
  .feed-table th:nth-child(2), .feed-table td:nth-child(2), .feed-table th:nth-child(6), .feed-table td:nth-child(6), .feed-table th:nth-child(7), .feed-table td:nth-child(7) { display: none; }
  .feed-table th:nth-child(1) { width: 22%; } .feed-table th:nth-child(3) { width: 22%; } .feed-table th:nth-child(5) { width: 10%; } .feed-table th:nth-child(8) { width: 20%; }
  .feed-table td, .feed-table th { padding: 0.25rem 0.4rem; }
  .feed-item small { display: none; }
}

/* one-shot entrance, only for sections that start below the fold (JS adds .will-reveal), so F5 never flashes:
   stage tips up from a slight 3D angle, pipeline connectors draw in sequence */
.reveal-section.will-reveal .showcase-stage { opacity: 0; transform: translateY(24px); }
.reveal-section.will-reveal .showcase-tabs button, .reveal-section.will-reveal .prism-pipeline li { opacity: 0; transform: translateY(10px); }
.reveal-section.will-reveal .prism-pipeline li + li::after { transform: scaleX(0); }
.reveal-section.in-view .showcase-stage { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out) 0.15s, transform 1s var(--ease-out) 0.15s; }
.reveal-section.in-view .showcase-tabs button, .reveal-section.in-view .prism-pipeline li { opacity: 1; transform: none; transition: opacity 0.45s var(--ease-out) calc(var(--reveal-i, 0) * 0.07s), transform 0.45s var(--ease-out) calc(var(--reveal-i, 0) * 0.07s), border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); }
.reveal-section.will-reveal.in-view .prism-pipeline li + li::after { transform: scaleX(1); transition: transform 0.35s var(--ease-out) calc(0.12s + var(--reveal-i, 0) * 0.07s); }
@media (prefers-reduced-motion: reduce) {
  .reveal-section.will-reveal .showcase-stage, .reveal-section.will-reveal .showcase-tabs button, .reveal-section.will-reveal .prism-pipeline li { opacity: 1; transform: none; transition: none; }
  .reveal-section.will-reveal .prism-pipeline li + li::after { transform: none; }
  .showcase-slide { transition: none; }
}
.prism-detail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.75rem; }
.prism-block { padding: 0.75rem 0.85rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.prism-detail h4 { margin: 0 0 0.5rem; font-size: 0.85rem; }
.prism-detail ul { margin: 0; padding-left: 1rem; display: grid; gap: 0.3rem; font-size: 0.76rem; line-height: 1.55; color: var(--text-2); word-break: keep-all; }
.prism-detail b { color: var(--text); margin-right: 0.2rem; }
.prism-feature .prism-next { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--text-dim); }
.prism-stack { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.6rem; align-items: baseline; }
.prism-stack dt { font: 600 0.68rem var(--mono); color: var(--accent); }
.prism-stack dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.prism-stack dd span { font-size: 0.7rem; padding: 0.1rem 0.45rem; border: 1px solid var(--border); border-radius: 999px; background: var(--paper); color: var(--text-2); }
.journey-records-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 1.15rem 0 0.7rem; }
.journey-note { display: flex; align-items: center; gap: 0.55rem; font-size: 0.95rem; font-weight: 700; color: var(--text); margin: 0; }
.journey-note::before { content: ""; width: 3px; height: 16px; border-radius: 2px; background: var(--accent-2); flex-shrink: 0; }
.journey-records-count { font-size: 0.68rem; color: var(--accent-2); background: var(--accent-muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.18rem 0.55rem; white-space: nowrap; }
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.timeline::before, .tl-item::before { display: none; }
.tl-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0.7rem; padding: 0.75rem; }
.tl-thumb { width: 72px; height: 54px; aspect-ratio: auto; }
.tl-body h3 { display: block; font-size: 0.83rem; white-space: normal; overflow: visible; }
.tl-body p { font-size: 0.76rem; line-height: 1.5; }
.tl-meta { flex-wrap: wrap; }
[hidden] { display: none !important; }
@media (min-width: 1050px) {
  .repo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  h1 { font-size: 2.6rem; }
}
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) 270px; gap: 0 1.5rem; }
  .repo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prism-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prism-block:last-child { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hero { display: block; }
  .hero-cta { margin-bottom: 0.85rem; }
  .hero-stats .stat-card { display: block; }
  .hero-stats .stat-num { margin-bottom: 0.25rem; }
  .context-grid { grid-template-columns: 1fr; }
  .project-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prism-feature { grid-template-columns: 1fr; gap: 0.75rem; padding: 0.9rem; }
  .prism-detail { grid-template-columns: 1fr; }
  .prism-pipeline { grid-template-columns: 1fr; gap: 0.5rem; }
  .prism-pipeline li + li::after { top: auto; bottom: 100%; right: auto; left: 1.2rem; width: 2px; height: 0.5rem; transform-origin: center top; }
  .prism-showcase { grid-template-columns: 1fr; }
  .showcase-tabs { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; margin: 0 -0.9rem; padding: 0 0.9rem 2px; }
  .showcase-tabs button { flex: 0 0 auto; width: auto; padding: 0.45rem 0.7rem; }
  .showcase-tabs span, .showcase-badge { display: none; }
}
@media (max-width: 560px) {
  .repo-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .repo-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .repo-thumb { grid-row: 1 / -1; width: 96px; height: 100%; min-height: 140px; object-fit: contain; object-position: center; border-bottom: 0; border-right: 1px solid var(--border); }
  .repo-body { min-width: 0; }
  .repo-actions { grid-column: 2; gap: 0.5rem; }
}


/* ── Modern pass 2: category colours, clearer card edges, accent buttons, small visuals ── */
:root {
  --bg: #f2f3f7;
  --border: rgba(16, 19, 28, 0.075);
  --card-shadow: 0 1px 2px rgba(16, 19, 28, 0.04), 0 6px 20px -10px rgba(16, 19, 28, 0.14);
  --btn-grad: linear-gradient(135deg, #2563eb 0%, #0891b2 100%);
  --btn-glow: 0 8px 22px -8px rgba(37, 99, 235, 0.5);
  --cat-ai: #3b82f6;
  --cat-automation: #0d9488;
  --cat-utility: #e08a0b;
}
:root[data-theme="dark"] {
  --bg: #1c1f26;
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  --btn-grad: linear-gradient(135deg, #3b82f6 0%, #0891b2 100%);
  --btn-glow: 0 8px 22px -8px rgba(59, 130, 246, 0.45);
  --cat-ai: #60a5fa;
  --cat-automation: #3fd3bd;
  --cat-utility: #f5b041;
}
.glass, .stat-card, .prism-block, .showcase-tabs button, .prism-pipeline li, .project-map button { box-shadow: var(--card-shadow); }

/* accent buttons instead of near-black */
.btn-primary, .topnav a.nav-cta { color: #fff; background: var(--btn-grad); box-shadow: var(--btn-glow); }
.topnav a.nav-cta:hover { filter: brightness(1.06); }
@media (hover: hover) {
  .btn-primary:hover { box-shadow: 0 12px 28px -8px rgba(37, 99, 235, 0.55); }
}

/* hero stats: gradient figures on a tinted card */
.stat-num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* project categories: one colour each, used by the map, cards and the overview ring */
.repo-card[data-category="ai"], .project-map [data-filter="ai"] { --cat: var(--cat-ai); }
.repo-card[data-category="automation"], .project-map [data-filter="automation"] { --cat: var(--cat-automation); }
.repo-card[data-category="utility"], .project-map [data-filter="utility"] { --cat: var(--cat-utility); }
.repo-card::before { content: ""; position: absolute; z-index: 1; inset: 0 0 auto; height: 3px; background: var(--cat, var(--accent)); }
@media (hover: hover) {
  .repo-card:hover { border-color: color-mix(in srgb, var(--cat, var(--accent)) 55%, transparent); }
  .repo-card:hover .repo-head svg { color: var(--cat, var(--accent)); }
}
.project-map .map-track > span { background: var(--cat, var(--accent-2)); }
.project-map button[data-filter]:not(.map-all)[aria-pressed="true"] { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 9%, var(--paper)); color: var(--text); }
.project-map .map-label strong { color: var(--cat, var(--accent)); }
.map-all { position: relative; }
.map-all strong { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 1.15rem;
  background:
    radial-gradient(closest-side, var(--paper) 72%, transparent 73%),
    conic-gradient(var(--cat-ai) 0 42.9%, var(--cat-automation) 0 71.4%, var(--cat-utility) 0 100%); }
.project-map button.map-all[aria-pressed="true"] strong { background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 7%, var(--paper)) 72%, transparent 73%),
    conic-gradient(var(--cat-ai) 0 42.9%, var(--cat-automation) 0 71.4%, var(--cat-utility) 0 100%); }

/* feature panel: gradient rule instead of a flat bar */
.prism-feature { border-top: 0; position: relative; overflow: hidden; }
.prism-feature::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--grad); }
.prism-facts li { border-left-color: transparent; background: var(--paper-2); border-radius: 10px; }
.prism-facts strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.2rem; }

/* ── PRISM detail cards: titled panels with separated rows instead of plain bullet lists ── */
.prism-detail { gap: 0.9rem; }
.prism-block { padding: 1rem 1.1rem 1.05rem; background: var(--paper); border-radius: var(--r); }
.prism-detail h4 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.7rem; font-size: 0.92rem; letter-spacing: -0.01em; }
.prism-detail h4::before { content: ""; width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: color-mix(in srgb, var(--blk) 14%, transparent) var(--icon) center / 15px no-repeat; }
.prism-block:nth-child(1) { --blk: var(--accent); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.prism-block:nth-child(2) { --blk: var(--cat-automation); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d9488' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E"); }
.prism-block:nth-child(3) { --blk: var(--cat-utility); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e08a0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }
.prism-detail ul { list-style: none; padding: 0; gap: 0; font-size: 0.78rem; }
.prism-detail li { position: relative; padding: 0.5rem 0 0.5rem 1.05rem; border-top: 1px solid var(--border); }
.prism-detail li:first-child { border-top: 0; padding-top: 0.15rem; }
.prism-detail li::before { content: ""; position: absolute; left: 0; top: 1.02em; width: 6px; height: 6px; border-radius: 50%; background: var(--blk); opacity: 0.85; }
.prism-detail li:first-child::before { top: 0.67em; }
.prism-detail li b { display: block; margin: 0 0 0.1rem; font-size: 0.8rem; color: var(--text); }
.prism-feature .prism-next { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--paper-2); font-size: 0.72rem; color: var(--text-2); }
.prism-feature .prism-next::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cat-utility); }
.prism-stack { gap: 0.55rem 0.7rem; }
.prism-stack dt { display: flex; align-items: center; gap: 0.4rem; padding-top: 0.2rem; font: 600 0.7rem var(--display); color: var(--text-2); }
.prism-stack dt::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--blk); }
.prism-stack dd span { padding: 0.18rem 0.55rem; border: 0; border-radius: 7px; background: var(--paper-2); color: var(--text); font-size: 0.72rem; }


/* ── Hover: soft lift and colour, no underlines; transform/opacity only so it stays on the compositor ── */
.repo-actions a { margin: 0 -0.45rem; padding: 0.25rem 0.45rem; border-radius: 7px; transition: background 0.18s var(--ease), color 0.18s var(--ease); }
.section-sub a, .repo-head a, .feature-link { transition: color 0.18s var(--ease); }
.prism-block, .stat-card, .tl-item, .showcase-tabs button, .prism-pipeline li, .project-map button { transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .prism-block:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--blk) 40%, var(--border)); }
  .prism-stack dd span { transition: background 0.15s var(--ease), color 0.15s var(--ease); }
  .prism-stack dd span:hover { background: color-mix(in srgb, var(--blk) 14%, var(--paper-2)); }
  .reveal-section.in-view .prism-pipeline li:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-hi); }
  .reveal-section.in-view .showcase-tabs button:hover, .showcase-tabs button:hover { transform: translateX(3px); }
  .project-map button:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  .stat-card:hover { transform: translateY(-3px); }
  .repo-card:hover { transform: translateY(-4px); }
  .showcase-stage:hover .showcase-slide.is-active img { transform: scale(1.012); }
  .showcase-slide img { transition: transform 0.5s var(--ease-out); }
  .skill-strip span:hover, .learning-tags span:hover, .repo-tags span:hover { border-color: var(--accent); color: var(--accent); }
}

/* ── Theme: emerald. One solid accent, no gradients; brighter dark mode ── */
:root {
  --bg: #f5f6f4;
  --paper: #ffffff;
  --paper-2: #eff1ee;
  --surface-solid: #ffffff;
  --border: rgba(24, 24, 27, 0.08);
  --border-hi: rgba(24, 24, 27, 0.14);
  --text: #18181b;
  --text-2: #4a4f4c;
  --text-dim: #6b706c;
  --accent: #059669;
  --accent-2: #047857;
  --accent-soft: rgba(5, 150, 105, 0.08);
  --accent-glow: rgba(5, 150, 105, 0.22);
  --accent-muted: rgba(5, 150, 105, 0.07);
  --grad: linear-gradient(var(--accent), var(--accent));
  --btn-grad: var(--accent);
  --btn-glow: 0 6px 16px -8px rgba(5, 150, 105, 0.5);
  --glow-1: rgba(16, 185, 129, 0.09);
  --glow-2: rgba(120, 113, 108, 0.06);
  --grid-line: rgba(24, 24, 27, 0.04);
  --card-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 4px 14px -8px rgba(24, 24, 27, 0.12);
  --cat-ai: #059669;
  --cat-automation: #4f72a8;
  --cat-utility: #c2851b;
  --stage-bg: #ffffff;
  --stage-chrome: #eef0ed;
  --stage-url: #6b706c;
  --stage-url-b: #18181b;
}
:root[data-theme="dark"] {
  --bg: #232629;
  --paper: #2c3034;
  --paper-2: #33383c;
  --surface-solid: #2c3034;
  --border: rgba(255, 255, 255, 0.10);
  --border-hi: rgba(255, 255, 255, 0.17);
  --text: #f1f3f2;
  --text-2: #c4c9c6;
  --text-dim: #9ba29e;
  --accent: #34d399;
  --accent-2: #6ee7b7;
  --accent-soft: rgba(52, 211, 153, 0.12);
  --accent-glow: rgba(52, 211, 153, 0.22);
  --accent-muted: rgba(52, 211, 153, 0.09);
  --btn-grad: var(--accent);
  --btn-glow: 0 6px 16px -8px rgba(52, 211, 153, 0.45);
  --glow-1: rgba(52, 211, 153, 0.07);
  --glow-2: rgba(255, 255, 255, 0.03);
  --grid-line: rgba(255, 255, 255, 0.045);
  --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), 0 6px 18px -10px rgba(0, 0, 0, 0.4);
  --cat-ai: #34d399;
  --cat-automation: #8fb0e0;
  --cat-utility: #e8b25a;
  --stage-bg: #17181b;
  --stage-chrome: #222327;
  --stage-url: #8d8f96;
  --stage-url-b: #e6e3dc;
}
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .topnav a.nav-cta { color: #0f1a15; }
.brand-mark { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .brand-mark { color: #0f1a15; }
@media (hover: hover) { .btn-primary:hover { box-shadow: 0 8px 20px -8px var(--accent-glow); } }
.prism-feature::before { background: var(--accent); }
.prism-block:nth-child(1) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.prism-block:nth-child(2) { --blk: var(--cat-automation); --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f72a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M17.5 14v7M14 17.5h7'/%3E%3C/svg%3E"); }
.prism-block:nth-child(3) { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2851b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3C/svg%3E"); }

/* showcase follows the page theme: light screenshots and a light browser frame in light mode */
.showcase-stage { background: var(--stage-bg); }
.showcase-chrome { background: var(--stage-chrome); border-bottom-color: var(--border); }
.showcase-url { color: var(--stage-url); }
.showcase-url b { color: var(--stage-url-b); }
.showcase-badge { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.shot-dark { display: none !important; }
:root[data-theme="dark"] .shot-dark { display: block !important; }
:root[data-theme="dark"] .shot-light { display: none !important; }
.showcase-feed { background: #ffffff; color: #3f4441; }
.feed-head { border-bottom-color: rgba(24, 24, 27, 0.08); }
.feed-src { color: #18181b; }
.feed-table th { background: #f4f5f3; color: #6b706c; border-bottom-color: rgba(24, 24, 27, 0.07); }
.feed-table td { border-bottom-color: rgba(24, 24, 27, 0.06); }
.feed-time, .feed-no, .feed-pay { color: #6b706c; }
.feed-ch { background: #eff1ee; color: #4a4f4c; }
.feed-item { color: #18181b; }
.feed-item small { color: #8a8f8b; }
.feed-amt i { background: rgba(100, 116, 139, 0.22); }
.feed-st--prep { color: #1d4ed8; background: rgba(59, 130, 246, 0.1); }
.feed-st--ship { color: #047857; background: rgba(5, 150, 105, 0.1); }
.feed-st--cancel { color: #b91c1c; background: rgba(239, 68, 68, 0.1); }
.feed-run::before, .feed-bar { background: var(--accent); }
.feed-done { color: var(--accent); }
@keyframes feed-row { from { opacity: 0; transform: translateY(-6px); background: var(--accent-soft); } to { opacity: 1; transform: none; background: transparent; } }
:root[data-theme="dark"] .showcase-feed { background: #1b1c20; color: #d9dbe0; }
:root[data-theme="dark"] .feed-head { border-bottom-color: rgba(255, 255, 255, 0.07); }
:root[data-theme="dark"] .feed-src { color: #e9eaee; }
:root[data-theme="dark"] .feed-table th { background: #202228; color: #8f95a3; border-bottom-color: rgba(255, 255, 255, 0.06); }
:root[data-theme="dark"] .feed-table td { border-bottom-color: rgba(255, 255, 255, 0.05); }
:root[data-theme="dark"] .feed-time, :root[data-theme="dark"] .feed-no, :root[data-theme="dark"] .feed-pay { color: #a5abb8; }
:root[data-theme="dark"] .feed-ch { background: rgba(255, 255, 255, 0.06); color: #c9ccd4; }
:root[data-theme="dark"] .feed-item { color: #eef0f3; }
:root[data-theme="dark"] .feed-item small { color: #7f8592; }
:root[data-theme="dark"] .feed-amt i { background: rgba(148, 163, 184, 0.3); }
:root[data-theme="dark"] .feed-st--prep { color: #93c5fd; background: rgba(59, 130, 246, 0.14); }
:root[data-theme="dark"] .feed-st--ship { color: #5eead4; background: rgba(45, 212, 191, 0.12); }
:root[data-theme="dark"] .feed-st--cancel { color: #fca5a5; background: rgba(239, 68, 68, 0.12); }

/* still hover: nothing moves (a lift slips the card out from under the cursor and it bounces);
   feedback is border, shadow and a soft light that follows the pointer (--mx/--my from app.js) */
@media (hover: hover) and (pointer: fine) {
  .prism-block:hover, .stat-card:hover, .project-map button:hover, .entry-card:hover,
  .repo-card:hover, .reveal-section.in-view .tl-item:hover, .reveal-section.in-view .prism-pipeline li:hover,
  .reveal-section.in-view .showcase-tabs button:hover, .showcase-tabs button:hover { transform: none; }
  .showcase-stage:hover .showcase-slide.is-active img, .tl-item:hover .tl-thumb, .tl-item:hover h3 .go { transform: none; }
  .reveal-section.in-view .showcase-tabs button:hover, .showcase-tabs button:hover { background: var(--paper-2); }
}

/* ── Repo cards v3: framed thumbnail, category chip, quiet meta, button-like actions ── */
.repo-grid { gap: 1rem; }
.repo-card { padding: 0.5rem; border-radius: 18px; background: var(--paper); }
.repo-card::before { display: none; }
.repo-card::after { position: absolute; z-index: 2; top: 1rem; left: 1rem; padding: 0.16rem 0.55rem; border-radius: 999px; font: 600 0.66rem var(--display); color: #fff; background: color-mix(in srgb, var(--cat, var(--accent)) 88%, black); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); pointer-events: none; }
.repo-card[data-category="ai"]::after { content: "AI 도구"; }
.repo-card[data-category="automation"]::after { content: "업무 자동화"; }
.repo-card[data-category="utility"]::after { content: "개발 유틸리티"; }
.repo-thumb { border-radius: 12px; border: 1px solid var(--border); aspect-ratio: 16 / 10; }
.repo-body { padding: 0.8rem 0.45rem 0.4rem; }
.repo-head { gap: 0.45rem; }
.repo-head h3 { font-size: 0.98rem; font-weight: 650; letter-spacing: -0.015em; }
.repo-head svg, .repo-head .icon-gh { width: 15px; height: 15px; opacity: 0.55; }
.repo-live { font: 600 0.66rem var(--display); letter-spacing: 0; padding: 0.14rem 0.5rem; border: 0; color: var(--accent); background: var(--accent-soft); }
.repo-live::before { background: currentColor; }
.repo-desc { font-size: 0.82rem; line-height: 1.6; color: var(--text-2); }
.repo-tags span { padding: 0.14rem 0.5rem; border: 0; border-radius: 6px; background: var(--paper-2); color: var(--text-2); font-size: 0.7rem; }
.repo-actions { justify-content: flex-start; gap: 0.4rem; padding: 0.35rem 0.45rem 0.4rem; border-top: 0; }
.repo-actions a { margin: 0; padding: 0.38rem 0.75rem; border-radius: 9px; font-size: 0.75rem; color: var(--text); background: var(--paper-2); }
.repo-actions a:last-child { color: var(--accent); background: var(--accent-soft); }
@media (hover: hover) and (pointer: fine) {
  .repo-card:hover { border-color: var(--border-hi); box-shadow: var(--shadow-lg); }
  .repo-card:hover .repo-thumb { transform: none; }
  .repo-actions a:hover { background: color-mix(in srgb, var(--text) 9%, var(--paper-2)); }
  .repo-actions a:last-child:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
/* phones: stack the card (thumbnail on top) and keep the thumbnail box sized before the image loads (CLS 0) */
@media (max-width: 560px) {
  .repo-card { display: flex; flex-direction: column; padding: 0.4rem; }
  .repo-card::after { top: 0.8rem; left: 0.8rem; font-size: 0.62rem; }
  .repo-thumb { grid-row: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 10px; border: 1px solid var(--border); }
  .repo-actions { grid-column: auto; }
  .repo-actions a { padding: 0.55rem 0.9rem; }
}
@media (pointer: coarse) {
  .theme-toggle { width: 38px; height: 38px; }
}

/* PRISM card shows the real ERP dashboard, light or dark with the page */
.repo-card[data-project="prism-erp"] .repo-thumb { object-position: left top; }

/* ── Multi-page: home entry cards, project tabs, page titles, cross-page fade ── */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.topnav .topnav-page { display: flex; }


.entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.entry-card { position: relative; display: flex; flex-direction: column; padding: 0.5rem; border-radius: 18px; color: inherit; text-decoration: none; background: var(--paper); transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease), border-color 0.2s var(--ease); }
.entry-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; border: 1px solid var(--border); background: var(--paper-2); }
.entry-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.entry-mosaic { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 4px; }
.entry-mosaic img { border-radius: 8px; min-height: 0; }
.entry-mosaic img:first-child { grid-row: 1 / 3; }
.entry-mosaic img:nth-child(4) { display: none; }
.entry-body { display: grid; gap: 0.45rem; padding: 0.95rem 0.6rem 0.6rem; }
.entry-kicker { font-size: 0.72rem; font-weight: 600; color: var(--accent); }
.entry-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.3; }
.entry-desc { font-size: 0.86rem; line-height: 1.6; color: var(--text-2); word-break: keep-all; }
.entry-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.entry-facts span { padding: 0.22rem 0.6rem; border-radius: 8px; background: var(--paper-2); font-size: 0.74rem; color: var(--text-2); }
.entry-facts b { color: var(--text); margin-right: 0.15rem; }
.entry-facts .cat-ai b { color: var(--cat-ai); }
.entry-facts .cat-automation b { color: var(--cat-automation); }
.entry-facts .cat-utility b { color: var(--cat-utility); }
.entry-go { justify-self: start; margin-top: 0.35rem; padding: 0.42rem 0.85rem; border-radius: 9px; font-size: 0.78rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); transition: background 0.18s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .entry-card:hover { box-shadow: var(--shadow-lg); border-color: var(--border-hi); }
  .entry-card:hover .entry-go { background: color-mix(in srgb, var(--accent) 16%, transparent); }
}
.entry-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.project-tabs { display: inline-flex; gap: 4px; margin: 0.5rem 0 1.4rem; padding: 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--border); box-shadow: var(--card-shadow); }
.project-tabs a { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.95rem; border-radius: 9px; font-size: 0.86rem; font-weight: 600; color: var(--text-2); text-decoration: none; transition: background 0.18s var(--ease), color 0.18s var(--ease); }
.project-tabs a span { font-size: 0.7rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--paper-2); color: var(--text-dim); }
.project-tabs a:hover { color: var(--text); background: var(--paper-2); }
.project-tabs a[aria-current="page"] { color: #fff; background: var(--accent); }
.project-tabs a[aria-current="page"] span { background: rgba(255, 255, 255, 0.2); color: #fff; }
:root[data-theme="dark"] .project-tabs a[aria-current="page"], :root[data-theme="dark"] .project-tabs a[aria-current="page"] span { color: #0f1a15; }

.page-section { margin-top: 0; }
h1.page-title { font-size: clamp(1.7rem, 3.6vw, 2.2rem); font-weight: 700; letter-spacing: -0.035em; margin: 0; line-height: 1.2; }
h1.prism-title { margin: 0.4rem 0; font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.3; }
.map-all strong { background:
    radial-gradient(closest-side, var(--paper) 72%, transparent 73%),
    conic-gradient(var(--cat-ai) 0 var(--ring-a, 50%), var(--cat-automation) 0 var(--ring-b, 66.7%), var(--cat-utility) 0 100%); }
.project-map button.map-all[aria-pressed="true"] strong { background:
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 7%, var(--paper)) 72%, transparent 73%),
    conic-gradient(var(--cat-ai) 0 var(--ring-a, 50%), var(--cat-automation) 0 var(--ring-b, 66.7%), var(--cat-utility) 0 100%); }
@media (max-width: 720px) {
  .entry-grid { grid-template-columns: 1fr; }
  .project-tabs { display: flex; }
  .project-tabs a { flex: 1; justify-content: center; }
}

/* career note: same reading rhythm as the PRISM note next to it (lead in bold, stack chips below) */
.exp-note { display: grid; gap: 0.6rem; align-content: start; }
.exp-note p { margin: 0; color: var(--text-2); font-size: 0.85rem; line-height: 1.6; }
.exp-note p b { color: var(--text); font-weight: 600; }

/* ── Unified top nav: the same page links everywhere, current page marked ── */
body[data-page="prism"] .topnav [data-nav="prism"],
body[data-page="projects"] .topnav [data-nav="projects"] { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.entry-grid--one { grid-template-columns: 1fr; }
.entry-grid--one .entry-card { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 0.4rem; }
.entry-grid--one .entry-body { padding: 0.8rem 1.2rem; }
.repo-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.section-sub a { color: var(--accent); font-weight: 600; text-decoration: none; }
#records { margin-top: 2.2rem; }
@media (max-width: 1000px) { .repo-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .entry-grid--one .entry-card { grid-template-columns: 1fr; }
  .entry-grid--one .entry-body { padding: 0.95rem 0.6rem 0.6rem; }
}
@media (max-width: 560px) {
  .repo-grid--three { grid-template-columns: 1fr; }
  .brand-name { display: none; }
  .topnav a { padding: 6px 9px; }
}

/* ── Video page: card gallery, chapter chips ── */
body[data-page="video"] .topnav [data-nav="video"] { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.film-chapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.film-chapters button { display: flex; gap: 6px; align-items: baseline; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--paper); color: var(--text); font: inherit; font-size: 0.74rem; text-align: left; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-chapters button span { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: 600; }
.film-chapters button:hover { border-color: var(--accent); background: var(--accent-soft); }
.film-chapters button[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
/* video gallery: small cards, several per row (like the PRISM marketing gallery) */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: stretch; }
.vcard { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.5rem; border-radius: 16px; background: var(--paper); min-width: 0; }
.vcard-media { border-radius: 11px; overflow: hidden; background: #111; }
.vcard-media video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #111; }
.vcard-dur { position: absolute; right: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; }
.player.is-started .vcard-dur { display: none; }
.vcard .player-play { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.vcard .player-play svg { width: 24px; height: 24px; }
.vcard-body { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0.4rem 0.4rem; min-width: 0; }
.vcard-title { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.vcard-desc { margin: 0; font-size: 0.8rem; line-height: 1.6; min-height: calc(1.6em * 3); color: var(--text-2); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.vcard-tags span { font-size: 0.7rem; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); }
.vcard-more summary { cursor: pointer; font-size: 0.76rem; font-weight: 600; color: var(--accent); width: max-content; }
.vcard-more .film-chapters { margin-top: 0.45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vcard-more .film-chapters button { font-size: 0.74rem; }
.entry-media--play::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: rgba(0, 0, 0, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat; transition: transform 0.2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .entry-card:hover .entry-media--play::after { transform: scale(1.06); } }
.nav-long { display: inline; }
@media (max-width: 480px) { .nav-long { display: none; } }

/* tap-to-play video: a big centred button until playback starts, then native controls */
.player { position: relative; display: block; }
.player-hit { position: absolute; inset: 0; cursor: pointer; }
.player.is-started .player-hit { bottom: 56px; }
.entry-media.player video { display: block; width: 100%; height: 100%; object-fit: cover; background: #111; }
.player-play { position: absolute; inset: 50% auto auto 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; transition: transform 0.18s var(--ease-out), background 0.18s var(--ease); }
.player-play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; }
.player-play:hover { background: var(--accent); transform: scale(1.05); }
.player-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.player.is-started .player-play { display: none; }

/* the two intro cards share one layout: icon, text from the same x, stack chips on the same bottom line */
.context-grid { align-items: stretch; }
.context-grid .learning-note { height: 100%; align-items: stretch; }
.context-grid .li-icon { align-self: flex-start; }
.context-grid .li-body { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.context-grid .li-body p { flex: 1; }
.context-grid .learning-tags { margin-top: 0.4rem; }
.career-note { animation-delay: 0.42s; }

/* ── ERP page header: badges, short title + lede, stat strip, scope list ── */
.prism-feature { gap: 1.4rem 2rem; padding: 1.6rem 1.7rem; }
.prism-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.7rem; }
.prism-badges span { padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; color: var(--text-2); background: var(--paper-2); }
.prism-badges .is-live { color: var(--accent); background: var(--accent-soft); }
.prism-badges .is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
h1.prism-title { margin: 0; font-size: clamp(1.7rem, 3.4vw, 2.3rem); letter-spacing: -0.04em; line-height: 1.15; }
.prism-feature .prism-lede { margin: 0.45rem 0 0.8rem; font-size: 1.02rem; font-weight: 600; color: var(--accent); }
.prism-feature .prism-feature-copy > p:not(.prism-lede) { font-size: 0.88rem; line-height: 1.7; max-width: 62ch; }
.prism-facts { display: flex; gap: 0; margin: 1.1rem 0 0; padding: 0.2rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prism-facts li { flex: 1; padding: 0.75rem 1rem; border: 0; border-left: 1px solid var(--border); border-radius: 0; background: none; }
.prism-facts li:first-child { border-left: 0; padding-left: 0; }
.prism-facts strong { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; }
.prism-facts span { font-size: 0.74rem; margin-top: 0.1rem; }
.prism-scope { align-self: stretch; padding: 1rem 1.1rem; border-radius: var(--r); background: var(--paper-2); }
.prism-scope-title { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-dim); }
.prism-scope ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.prism-scope li { display: flex; gap: 0.75rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--border); }
.prism-scope li:first-child { border-top: 0; padding-top: 0.2rem; }
.prism-scope strong { display: block; font-size: 0.9rem; }
.prism-scope li span:not(.scope-icon) { display: block; font-size: 0.76rem; color: var(--text-dim); }
.scope-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; background: var(--paper); box-shadow: var(--card-shadow); position: relative; }
.scope-icon::after { content: ""; position: absolute; inset: 9px; background: var(--accent); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.scope-design .scope-icon { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3Cpath d='M10 6.5h4a3 3 0 0 1 3 3V14'/%3E%3C/svg%3E"); }
.scope-ui .scope-icon { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.scope-api .scope-icon { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='8' ry='3'/%3E%3Cpath d='M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E"); }
.scope-ops .scope-icon { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 7v6c0 4.4 3.4 7.6 8 8 4.6-.4 8-3.6 8-8V7z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
@media (max-width: 720px) {
  .prism-feature { padding: 1.1rem; }
  .prism-facts li { padding: 0.6rem 0.6rem; }
  .prism-facts strong { font-size: 1.3rem; }
}

/* stack chips inside the intro cards: a size smaller than the skill row above them */
.context-grid .learning-tags { gap: 0.3rem; }
.context-grid .learning-tags span { padding: 0.16rem 0.5rem; font-size: 0.68rem; }
.context-grid .learning-tags span[data-icon]::before { margin-right: 0.3em; }

/* ── Top nav v2: each section has its own colour and icon, utilities split off by a hairline ── */
.topnav { gap: 2px; padding: 4px; }
.topnav a.topnav-page { gap: 0.4rem; padding: 6px 11px; font-weight: 600; letter-spacing: -0.005em; }
.nav-erp { --nav-c: #059669; --nav-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.nav-proj { --nav-c: #3b6fd4; --nav-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 6-6 6 6 6M16 6l6 6-6 6'/%3E%3C/svg%3E"); }
.nav-video { --nav-c: #e0612f; --nav-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='15' height='14' rx='2'/%3E%3Cpath d='m17 10 5-3v10l-5-3z'/%3E%3C/svg%3E"); }
:root[data-theme="dark"] .nav-erp { --nav-c: #34d399; }
:root[data-theme="dark"] .nav-proj { --nav-c: #7fa6f0; }
:root[data-theme="dark"] .nav-video { --nav-c: #f59a6b; }
.nav-ico { width: 14px; height: 14px; flex-shrink: 0; background: var(--nav-c); -webkit-mask: var(--nav-m) center / contain no-repeat; mask: var(--nav-m) center / contain no-repeat; }
.topnav a.topnav-page:hover { color: var(--text); background: color-mix(in srgb, var(--nav-c) 10%, transparent); }
body[data-page="prism"] .topnav .nav-erp,
body[data-page="projects"] .topnav .nav-proj,
body[data-page="video"] .topnav .nav-video { color: var(--nav-c); background: color-mix(in srgb, var(--nav-c) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nav-c) 28%, transparent); }
.nav-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--border-hi); }
.topnav a.nav-gh { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--text-2); }
.topnav a.nav-gh svg { width: 17px; height: 17px; }
.topnav a.nav-cta { margin-left: 2px; padding: 6px 14px; }
@media (max-width: 560px) {
  .nav-sep, .topnav a.nav-gh { display: none; }
  .topnav a.topnav-page { padding: 6px 8px; gap: 0.3rem; }
  .topnav a.nav-cta { padding: 6px 10px; }
}
@media (max-width: 400px) { .nav-ico { display: none; } }

/* tech chips: brand logo in its brand colour; falls back to the text colour where the brand colour would vanish (near-white in light, near-black in dark) */
[data-icon]::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.38em; vertical-align: -0.14em; background: var(--icon-color, currentColor); -webkit-mask: var(--icon-mask) center / contain no-repeat; mask: var(--icon-mask) center / contain no-repeat; }
[data-icon="apacheecharts"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm-.792 5.307c2.192-.025 4.366 1.134 5.43 3.304.909 1.852.878 3.61-.098 5.645-.477.995-.487 1.06-.241 1.578.214.452.727.779 1.221.779.454 0 1.15-.586 1.252-1.054.1-.454-.193-1.118-.607-1.377a10.11 10.11 0 0 1-.393-.255c-.129-.1.42-.38.741-.38.687 0 1.247.526 1.375 1.29.055.333.134.422.44.502.859.222 1.297 1.451.755 2.116-.22.27-.23.271-.305.042-.267-.801-.666-1.12-1.403-1.12-.319 0-.572.128-1.098.556-1.006.82-1.866 1.303-2.907 1.632-1.276.384-2.752.478-4.086.156-2.162-.431-4.232-2.11-5.252-4.257C4.758 11.782 5.135 9 7.033 7.077a5.924 5.924 0 0 1 4.175-1.77Z'/%3E%3C/svg%3E"); --icon-color: #AA344D; }
[data-icon="caddy"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.094.47c-.842 0-1.696.092-2.552.288a11.37 11.37 0 0 0-4.87 2.423 10.632 10.632 0 0 0-2.36 2.826A10.132 10.132 0 0 0 .305 8.582c-.398 1.62-.4 3.336-.043 5.048.085.405.183.809.31 1.212a11.85 11.85 0 0 0 1.662 3.729 3.273 3.273 0 0 0-.086.427 3.323 3.323 0 0 0 2.848 3.71 3.279 3.279 0 0 0 1.947-.346c1.045.51 2.17.864 3.339 1.04a11.66 11.66 0 0 0 4.285-.155 11.566 11.566 0 0 0 4.936-2.485 10.643 10.643 0 0 0 2.352-2.894 11.164 11.164 0 0 0 1.356-4.424 11.214 11.214 0 0 0-.498-4.335c.175-.077.338-.175.486-.293a.444.444 89.992 0 0 .001 0c.402-.322.693-.794.777-1.342a2.146 2.146 0 0 0-1.79-2.434 2.115 2.115 0 0 0-1.205.171c-.038-.043-.078-.086-.113-.13a11.693 11.693 0 0 0-3.476-2.93 13.348 13.348 0 0 0-1.76-.81 13.55 13.55 0 0 0-2.06-.613A12.121 12.121 0 0 0 11.093.47Zm.714.328c.345-.004.688.01 1.028.042a9.892 9.892 0 0 1 2.743.639c.984.39 1.89.958 2.707 1.632.803.662 1.502 1.45 2.091 2.328.026.039.048.08.07.12a2.12 2.12 0 0 0-.435 2.646c-.158.114-.97.692-1.634 1.183-.414.308-.733.557-.733.557l.581.68s.296-.276.665-.638c.572-.562 1.229-1.233 1.395-1.403a2.122 2.122 0 0 0 1.907.677 11.229 11.229 0 0 1-.013 4.046 11.41 11.41 0 0 1-1.475 3.897 12.343 12.343 0 0 1-2.079 2.587c-1.19 1.125-2.633 2.022-4.306 2.531a10.826 10.826 0 0 1-3.973.484 11.04 11.04 0 0 1-3.057-.652 3.304 3.304 0 0 0 1.417-2.294 3.275 3.275 0 0 0-.294-1.842c.18-.162.403-.363.656-.6 1.015-.955 2.353-2.303 2.353-2.303l-.47-.599s-1.63.972-2.801 1.728c-.307.198-.573.378-.777.517a3.273 3.273 0 0 0-1.516-.611c-1.507-.198-2.927.672-3.487 2.017a10.323 10.323 0 0 1-.695-1.078A10.92 10.92 0 0 1 .728 14.8a10.35 10.35 0 0 1-.2-1.212c-.164-1.653.103-3.258.629-4.754a12.95 12.95 0 0 1 1.087-2.288c.57-.968 1.248-1.872 2.069-2.656A11.013 11.013 0 0 1 11.808.797Zm-.147 3.257a3.838 3.838 0 0 0-3.82 3.82v2.36h-.94c-.751 0-1.377.625-1.377 1.377v3.8h1.46v-3.718h9.354v6.264H10.02v1.46h6.4c.751 0 1.377-.625 1.377-1.377v-6.43c0-.751-.626-1.377-1.377-1.377h-.94v-2.36a3.838 3.838 0 0 0-3.82-3.819zm0 1.46a2.371 2.371 0 0 1 2.36 2.36v2.36H9.3v-2.36a2.372 2.372 0 0 1 2.36-2.36zm10.141.392a1.253 1.253 0 0 1 1.296 1.434c-.049.319-.217.59-.453.78-.266.213-.61.318-.968.264a1.253 1.253 0 0 1-1.045-1.42 1.255 1.255 0 0 1 1.17-1.058zM5.384 17.425a2.02 2.02 0 0 1 1.917 1.298c.116.3.159.628.114.967a2.015 2.015 0 0 1-2.249 1.728 2.016 2.016 0 0 1-1.727-2.25 2.017 2.017 0 0 1 1.945-1.743z'/%3E%3C/svg%3E"); --icon-color: #1F88C0; }
[data-icon="cplusplus"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M22.394 6c-.167-.29-.398-.543-.652-.69L12.926.22c-.509-.294-1.34-.294-1.848 0L2.26 5.31c-.508.293-.923 1.013-.923 1.6v10.18c0 .294.104.62.271.91.167.29.398.543.652.69l8.816 5.09c.508.293 1.34.293 1.848 0l8.816-5.09c.254-.147.485-.4.652-.69.167-.29.27-.616.27-.91V6.91c.003-.294-.1-.62-.268-.91zM12 19.11c-3.92 0-7.109-3.19-7.109-7.11 0-3.92 3.19-7.11 7.11-7.11a7.133 7.133 0 016.156 3.553l-3.076 1.78a3.567 3.567 0 00-3.08-1.78A3.56 3.56 0 008.444 12 3.56 3.56 0 0012 15.555a3.57 3.57 0 003.08-1.778l3.078 1.78A7.135 7.135 0 0112 19.11zm7.11-6.715h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79zm2.962 0h-.79v.79h-.79v-.79h-.79v-.79h.79v-.79h.79v.79h.79z'/%3E%3C/svg%3E"); --icon-color: #00599C; }
[data-icon="docker"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.983 11.078h2.119a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.119a.185.185 0 00-.185.185v1.888c0 .102.083.185.185.185m-2.954-5.43h2.118a.186.186 0 00.186-.186V3.574a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m0 2.716h2.118a.187.187 0 00.186-.186V6.29a.186.186 0 00-.186-.185h-2.118a.185.185 0 00-.185.185v1.887c0 .102.082.185.185.186m-2.93 0h2.12a.186.186 0 00.184-.186V6.29a.185.185 0 00-.185-.185H8.1a.185.185 0 00-.185.185v1.887c0 .102.083.185.185.186m-2.964 0h2.119a.186.186 0 00.185-.186V6.29a.185.185 0 00-.185-.185H5.136a.186.186 0 00-.186.185v1.887c0 .102.084.185.186.186m5.893 2.715h2.118a.186.186 0 00.186-.185V9.006a.186.186 0 00-.186-.186h-2.118a.185.185 0 00-.185.185v1.888c0 .102.082.185.185.185m-2.93 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.083.185.185.185m-2.964 0h2.119a.185.185 0 00.185-.185V9.006a.185.185 0 00-.184-.186h-2.12a.186.186 0 00-.186.186v1.887c0 .102.084.185.186.185m-2.92 0h2.12a.185.185 0 00.184-.185V9.006a.185.185 0 00-.184-.186h-2.12a.185.185 0 00-.184.185v1.888c0 .102.082.185.185.185M23.763 9.89c-.065-.051-.672-.51-1.954-.51-.338.001-.676.03-1.01.087-.248-1.7-1.653-2.53-1.716-2.566l-.344-.199-.226.327c-.284.438-.49.922-.612 1.43-.23.97-.09 1.882.403 2.661-.595.332-1.55.413-1.744.42H.751a.751.751 0 00-.75.748 11.376 11.376 0 00.692 4.062c.545 1.428 1.355 2.48 2.41 3.124 1.18.723 3.1 1.137 5.275 1.137.983.003 1.963-.086 2.93-.266a12.248 12.248 0 003.823-1.389c.98-.567 1.86-1.288 2.61-2.136 1.252-1.418 1.998-2.997 2.553-4.4h.221c1.372 0 2.215-.549 2.68-1.009.309-.293.55-.65.707-1.046l.098-.288Z'/%3E%3C/svg%3E"); --icon-color: #2496ED; }
[data-icon="fastapi"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .0387C5.3729.0384.0003 5.3931 0 11.9988c-.001 6.6066 5.372 11.9628 12 11.9625 6.628.0003 12.001-5.3559 12-11.9625-.0003-6.6057-5.3729-11.9604-12-11.96m-.829 5.4153h7.55l-7.5805 5.3284h5.1828L5.279 18.5436q2.9466-6.5444 5.892-13.0896'/%3E%3C/svg%3E"); --icon-color: #009688; }
[data-icon="go"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.811 10.231c-.047 0-.058-.023-.035-.059l.246-.315c.023-.035.081-.058.128-.058h4.172c.046 0 .058.035.035.07l-.199.303c-.023.036-.082.07-.117.07zM.047 11.306c-.047 0-.059-.023-.035-.058l.245-.316c.023-.035.082-.058.129-.058h5.328c.047 0 .07.035.058.07l-.093.28c-.012.047-.058.07-.105.07zm2.828 1.075c-.047 0-.059-.035-.035-.07l.163-.292c.023-.035.07-.07.117-.07h2.337c.047 0 .07.035.07.082l-.023.28c0 .047-.047.082-.082.082zm12.129-2.36c-.736.187-1.239.327-1.963.514-.176.046-.187.058-.34-.117-.174-.199-.303-.327-.548-.444-.737-.362-1.45-.257-2.115.175-.795.514-1.204 1.274-1.192 2.22.011.935.654 1.706 1.577 1.835.795.105 1.46-.175 1.987-.77.105-.13.198-.27.315-.434H10.47c-.245 0-.304-.152-.222-.35.152-.362.432-.97.596-1.274a.315.315 0 01.292-.187h4.253c-.023.316-.023.631-.07.947a4.983 4.983 0 01-.958 2.29c-.841 1.11-1.94 1.8-3.33 1.986-1.145.152-2.209-.07-3.143-.77-.865-.655-1.356-1.52-1.484-2.595-.152-1.274.222-2.419.993-3.424.83-1.086 1.928-1.776 3.272-2.02 1.098-.2 2.15-.07 3.096.571.62.41 1.063.97 1.356 1.648.07.105.023.164-.117.2m3.868 6.461c-1.064-.024-2.034-.328-2.852-1.029a3.665 3.665 0 01-1.262-2.255c-.21-1.32.152-2.489.947-3.529.853-1.122 1.881-1.706 3.272-1.95 1.192-.21 2.314-.095 3.33.595.923.63 1.496 1.484 1.648 2.605.198 1.578-.257 2.863-1.344 3.962-.771.783-1.718 1.273-2.805 1.495-.315.06-.63.07-.934.106zm2.78-4.72c-.011-.153-.011-.27-.034-.387-.21-1.157-1.274-1.81-2.384-1.554-1.087.245-1.788.935-2.045 2.033-.21.912.234 1.835 1.075 2.21.643.28 1.285.244 1.905-.07.923-.48 1.425-1.228 1.484-2.233z'/%3E%3C/svg%3E"); --icon-color: #00ADD8; }
[data-icon="influxdb"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.778 14.482l-2.287-9.959c-.13-.545-.624-1.09-1.169-1.248L9.87.051C9.74 0 9.584 0 9.426 0c-.443 0-.909.18-1.222.443L.716 7.412C.3 7.776.092 8.504.222 9.024l2.445 10.662c.13.545.624 1.092 1.169 1.248l9.775 3.015c.13.051.285.051.443.051.443 0 .91-.18 1.223-.443l8.007-7.435c.418-.39.624-1.092.494-1.64zM10.962 2.417l7.175 2.21c.285.08.285.21 0 .286l-3.77.858c-.285.08-.674-.05-.883-.26l-2.626-2.834c-.235-.232-.184-.336.104-.26zm4.47 12.872c.079.286-.105.444-.39.365l-7.748-2.392c-.285-.079-.338-.313-.13-.52l5.93-5.514c.209-.209.443-.13.52.156zM2.667 8.267l6.293-5.85c.21-.209.545-.18.754.025L12.86 5.85c.209.21.18.545-.026.754l-6.293 5.85c-.21.21-.545.181-.754-.025L2.64 9.024a.536.536 0 01.026-.757zm1.536 9.284L2.54 10.244c-.08-.285.05-.34.234-.13L5.4 12.949c.209.209.285.624.209.909L4.462 17.55c-.079.285-.208.285-.26 0zm9.202 4.264l-8.217-2.522a.547.547 0 01-.364-.675l1.378-4.421a.547.547 0 01.675-.365l8.216 2.522c.285.079.443.39.364.675L14.08 21.45a.553.553 0 01-.674.365zm7.279-5.98L15.2 20.93c-.209.209-.31.13-.234-.155l1.144-3.694c.079-.285.39-.573.674-.624l3.77-.858c.288-.076.339.054.13.234zm.598-1.09l-4.523 1.039a.534.534 0 01-.65-.39l-1.922-8.372a.534.534 0 01.39-.65L19.1 5.335a.534.534 0 01.649.39l1.923 8.371c.079.31-.102.596-.39.65Z'/%3E%3C/svg%3E"); --icon-color: #22ADF6; }
[data-icon="nvidia"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.948 8.798v-1.43a6.7 6.7 0 0 1 .424-.018c3.922-.124 6.493 3.374 6.493 3.374s-2.774 3.851-5.75 3.851c-.398 0-.787-.062-1.158-.185v-4.346c1.528.185 1.837.857 2.747 2.385l2.04-1.714s-1.492-1.952-4-1.952a6.016 6.016 0 0 0-.796.035m0-4.735v2.138l.424-.027c5.45-.185 9.01 4.47 9.01 4.47s-4.08 4.964-8.33 4.964c-.37 0-.733-.035-1.095-.097v1.325c.3.035.61.062.91.062 3.957 0 6.82-2.023 9.593-4.408.459.371 2.34 1.263 2.73 1.652-2.633 2.208-8.772 3.984-12.253 3.984-.335 0-.653-.018-.971-.053v1.864H24V4.063zm0 10.326v1.131c-3.657-.654-4.673-4.46-4.673-4.46s1.758-1.944 4.673-2.262v1.237H8.94c-1.528-.186-2.73 1.245-2.73 1.245s.68 2.412 2.739 3.11M2.456 10.9s2.164-3.197 6.5-3.533V6.201C4.153 6.59 0 10.653 0 10.653s2.35 6.802 8.948 7.42v-1.237c-4.84-.6-6.492-5.936-6.492-5.936z'/%3E%3C/svg%3E"); --icon-color: #76B900; }
[data-icon="openjdk"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.915 0 11.7.215C9.515 2.4 7.47 6.39 6.046 10.483c-1.064 1.024-3.633 2.81-3.711 3.551-.093.87 1.746 2.611 1.55 3.235-.198.625-1.304 1.408-1.014 1.939.1.188.823.011 1.277-.491a13.389 13.389 0 0 0-.017 2.14c.076.906.27 1.668.643 2.232.372.563.956.911 1.667.911.397 0 .727-.114 1.024-.264.298-.149.571-.33.91-.5.68-.34 1.634-.666 3.53-.604 1.903.062 2.872.39 3.559.704.687.314 1.15.664 1.925.664.767 0 1.395-.336 1.807-.9.412-.563.631-1.33.72-2.24.06-.623.055-1.32 0-2.066.454.45 1.117.604 1.213.424.29-.53-.816-1.314-1.013-1.937-.198-.624 1.642-2.366 1.549-3.236-.08-.748-2.707-2.568-3.748-3.586C16.428 6.374 14.308 2.394 12.13.215zm.175 6.038a2.95 2.95 0 0 1 2.943 2.942 2.95 2.95 0 0 1-2.943 2.943A2.95 2.95 0 0 1 9.148 8.98a2.95 2.95 0 0 1 2.942-2.942zM8.685 7.983a3.515 3.515 0 0 0-.145.997c0 1.951 1.6 3.55 3.55 3.55 1.95 0 3.55-1.598 3.55-3.55 0-.329-.046-.648-.132-.951.334.095.64.208.915.336a42.699 42.699 0 0 1 2.042 5.829c.678 2.545 1.01 4.92.846 6.607-.082.844-.29 1.51-.606 1.94-.315.431-.713.651-1.315.651-.593 0-.932-.27-1.673-.61-.741-.338-1.825-.694-3.792-.758-1.974-.064-3.073.293-3.821.669-.375.188-.659.373-.911.5s-.466.2-.752.2c-.53 0-.876-.209-1.16-.64-.285-.43-.474-1.101-.545-1.948-.141-1.693.176-4.069.823-6.614a43.155 43.155 0 0 1 1.934-5.783c.348-.167.749-.31 1.192-.425zm-3.382 4.362a.216.216 0 0 1 .13.031c-.166.56-.323 1.116-.463 1.665a33.849 33.849 0 0 0-.547 2.555 3.9 3.9 0 0 0-.2-.39c-.58-1.012-.914-1.642-1.16-2.08.315-.24 1.679-1.755 2.24-1.781zm13.394.01c.562.027 1.926 1.543 2.24 1.783-.246.438-.58 1.068-1.16 2.08a4.428 4.428 0 0 0-.163.309 32.354 32.354 0 0 0-.562-2.49 40.579 40.579 0 0 0-.482-1.652.216.216 0 0 1 .127-.03z'/%3E%3C/svg%3E"); --icon-color: #000000; }
:root[data-theme="dark"] [data-icon="openjdk"] { --icon-color: currentColor; }
[data-icon="pnpm"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0v7.5h7.5V0zm8.25 0v7.5h7.498V0zm8.25 0v7.5H24V0zM2 2h3.5v3.5H2zm8.25 0h3.498v3.5H10.25zm8.25 0H22v3.5h-3.5zM8.25 8.25v7.5h7.498v-7.5zm8.25 0v7.5H24v-7.5zm2 2H22v3.5h-3.5zM0 16.5V24h7.5v-7.5zm8.25 0V24h7.498v-7.5zm8.25 0V24H24v-7.5z'/%3E%3C/svg%3E"); --icon-color: #F69220; }
[data-icon="postgresql"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5594 14.7228a.5269.5269 0 0 0-.0563-.1191c-.139-.2632-.4768-.3418-1.0074-.2321-1.6533.3411-2.2935.1312-2.5256-.0191 1.342-2.0482 2.445-4.522 3.0411-6.8297.2714-1.0507.7982-3.5237.1222-4.7316a1.5641 1.5641 0 0 0-.1509-.235C21.6931.9086 19.8007.0248 17.5099.0005c-1.4947-.0158-2.7705.3461-3.1161.4794a9.449 9.449 0 0 0-.5159-.0816 8.044 8.044 0 0 0-1.3114-.1278c-1.1822-.0184-2.2038.2642-3.0498.8406-.8573-.3211-4.7888-1.645-7.2219.0788C.9359 2.1526.3086 3.8733.4302 6.3043c.0409.818.5069 3.334 1.2423 5.7436.4598 1.5065.9387 2.7019 1.4334 3.582.553.9942 1.1259 1.5933 1.7143 1.7895.4474.1491 1.1327.1441 1.8581-.7279.8012-.9635 1.5903-1.8258 1.9446-2.2069.4351.2355.9064.3625 1.39.3772a.0569.0569 0 0 0 .0004.0041 11.0312 11.0312 0 0 0-.2472.3054c-.3389.4302-.4094.5197-1.5002.7443-.3102.064-1.1344.2339-1.1464.8115-.0025.1224.0329.2309.0919.3268.2269.4231.9216.6097 1.015.6331 1.3345.3335 2.5044.092 3.3714-.6787-.017 2.231.0775 4.4174.3454 5.0874.2212.5529.7618 1.9045 2.4692 1.9043.2505 0 .5263-.0291.8296-.0941 1.7819-.3821 2.5557-1.1696 2.855-2.9059.1503-.8707.4016-2.8753.5388-4.1012.0169-.0703.0357-.1207.057-.1362.0007-.0005.0697-.0471.4272.0307a.3673.3673 0 0 0 .0443.0068l.2539.0223.0149.001c.8468.0384 1.9114-.1426 2.5312-.4308.6438-.2988 1.8057-1.0323 1.5951-1.6698zM2.371 11.8765c-.7435-2.4358-1.1779-4.8851-1.2123-5.5719-.1086-2.1714.4171-3.6829 1.5623-4.4927 1.8367-1.2986 4.8398-.5408 6.108-.13-.0032.0032-.0066.0061-.0098.0094-2.0238 2.044-1.9758 5.536-1.9708 5.7495-.0002.0823.0066.1989.0162.3593.0348.5873.0996 1.6804-.0735 2.9184-.1609 1.1504.1937 2.2764.9728 3.0892.0806.0841.1648.1631.2518.2374-.3468.3714-1.1004 1.1926-1.9025 2.1576-.5677.6825-.9597.5517-1.0886.5087-.3919-.1307-.813-.5871-1.2381-1.3223-.4796-.839-.9635-2.0317-1.4155-3.5126zm6.0072 5.0871c-.1711-.0428-.3271-.1132-.4322-.1772.0889-.0394.2374-.0902.4833-.1409 1.2833-.2641 1.4815-.4506 1.9143-1.0002.0992-.126.2116-.2687.3673-.4426a.3549.3549 0 0 0 .0737-.1298c.1708-.1513.2724-.1099.4369-.0417.156.0646.3078.26.3695.4752.0291.1016.0619.2945-.0452.4444-.9043 1.2658-2.2216 1.2494-3.1676 1.0128zm2.094-3.988-.0525.141c-.133.3566-.2567.6881-.3334 1.003-.6674-.0021-1.3168-.2872-1.8105-.8024-.6279-.6551-.9131-1.5664-.7825-2.5004.1828-1.3079.1153-2.4468.079-3.0586-.005-.0857-.0095-.1607-.0122-.2199.2957-.2621 1.6659-.9962 2.6429-.7724.4459.1022.7176.4057.8305.928.5846 2.7038.0774 3.8307-.3302 4.7363-.084.1866-.1633.3629-.2311.5454zm7.3637 4.5725c-.0169.1768-.0358.376-.0618.5959l-.146.4383a.3547.3547 0 0 0-.0182.1077c-.0059.4747-.054.6489-.115.8693-.0634.2292-.1353.4891-.1794 1.0575-.11 1.4143-.8782 2.2267-2.4172 2.5565-1.5155.3251-1.7843-.4968-2.0212-1.2217a6.5824 6.5824 0 0 0-.0769-.2266c-.2154-.5858-.1911-1.4119-.1574-2.5551.0165-.5612-.0249-1.9013-.3302-2.6462.0044-.2932.0106-.5909.019-.8918a.3529.3529 0 0 0-.0153-.1126 1.4927 1.4927 0 0 0-.0439-.208c-.1226-.4283-.4213-.7866-.7797-.9351-.1424-.059-.4038-.1672-.7178-.0869.067-.276.1831-.5875.309-.9249l.0529-.142c.0595-.16.134-.3257.213-.5012.4265-.9476 1.0106-2.2453.3766-5.1772-.2374-1.0981-1.0304-1.6343-2.2324-1.5098-.7207.0746-1.3799.3654-1.7088.5321a5.6716 5.6716 0 0 0-.1958.1041c.0918-1.1064.4386-3.1741 1.7357-4.4823a4.0306 4.0306 0 0 1 .3033-.276.3532.3532 0 0 0 .1447-.0644c.7524-.5706 1.6945-.8506 2.802-.8325.4091.0067.8017.0339 1.1742.081 1.939.3544 3.2439 1.4468 4.0359 2.3827.8143.9623 1.2552 1.9315 1.4312 2.4543-1.3232-.1346-2.2234.1268-2.6797.779-.9926 1.4189.543 4.1729 1.2811 5.4964.1353.2426.2522.4522.2889.5413.2403.5825.5515.9713.7787 1.2552.0696.087.1372.1714.1885.245-.4008.1155-1.1208.3825-1.0552 1.717-.0123.1563-.0423.4469-.0834.8148-.0461.2077-.0702.4603-.0994.7662zm.8905-1.6211c-.0405-.8316.2691-.9185.5967-1.0105a2.8566 2.8566 0 0 0 .135-.0406 1.202 1.202 0 0 0 .1342.103c.5703.3765 1.5823.4213 3.0068.1344-.2016.1769-.5189.3994-.9533.6011-.4098.1903-1.0957.333-1.7473.3636-.7197.0336-1.0859-.0807-1.1721-.151zm.5695-9.2712c-.0059.3508-.0542.6692-.1054 1.0017-.055.3576-.112.7274-.1264 1.1762-.0142.4368.0404.8909.0932 1.3301.1066.887.216 1.8003-.2075 2.7014a3.5272 3.5272 0 0 1-.1876-.3856c-.0527-.1276-.1669-.3326-.3251-.6162-.6156-1.1041-2.0574-3.6896-1.3193-4.7446.3795-.5427 1.3408-.5661 2.1781-.463zm.2284 7.0137a12.3762 12.3762 0 0 0-.0853-.1074l-.0355-.0444c.7262-1.1995.5842-2.3862.4578-3.4385-.0519-.4318-.1009-.8396-.0885-1.2226.0129-.4061.0666-.7543.1185-1.0911.0639-.415.1288-.8443.1109-1.3505.0134-.0531.0188-.1158.0118-.1902-.0457-.4855-.5999-1.938-1.7294-3.253-.6076-.7073-1.4896-1.4972-2.6889-2.0395.5251-.1066 1.2328-.2035 2.0244-.1859 2.0515.0456 3.6746.8135 4.8242 2.2824a.908.908 0 0 1 .0667.1002c.7231 1.3556-.2762 6.2751-2.9867 10.5405zm-8.8166-6.1162c-.025.1794-.3089.4225-.6211.4225a.5821.5821 0 0 1-.0809-.0056c-.1873-.026-.3765-.144-.5059-.3156-.0458-.0605-.1203-.178-.1055-.2844.0055-.0401.0261-.0985.0925-.1488.1182-.0894.3518-.1226.6096-.0867.3163.0441.6426.1938.6113.4186zm7.9305-.4114c.0111.0792-.049.201-.1531.3102-.0683.0717-.212.1961-.4079.2232a.5456.5456 0 0 1-.075.0052c-.2935 0-.5414-.2344-.5607-.3717-.024-.1765.2641-.3106.5611-.352.297-.0414.6111.0088.6356.1851z'/%3E%3C/svg%3E"); --icon-color: #4169E1; }
[data-icon="pydantic"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m23.826 17.316-4.23-5.866-6.847-9.496c-.348-.48-1.151-.48-1.497 0l-6.845 9.494-4.233 5.868a.925.925 0 0 0 .46 1.417l11.078 3.626h.002a.92.92 0 0 0 .572 0h.002l11.077-3.626c.28-.092.5-.31.59-.592a.916.916 0 0 0-.13-.825h.002ZM12.001 4.07l4.44 6.158-4.152-1.36c-.032-.01-.066-.008-.098-.016a.8.8 0 0 0-.096-.016c-.032-.004-.062-.016-.094-.016s-.062.012-.094.016a.74.74 0 0 0-.096.016c-.032.006-.066.006-.096.016L7.59 10.221l-.026.008 4.44-6.158h-.002Zm-6.273 8.7 4.834-1.583.516-.168v9.19L2.41 17.372l3.317-4.6Zm7.197 7.437V11.02l5.35 1.752 3.316 4.598-8.666 2.838Z'/%3E%3C/svg%3E"); --icon-color: #E92063; }
[data-icon="python"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z'/%3E%3C/svg%3E"); --icon-color: #3776AB; }
[data-icon="qt"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.693 3.162H3.33L0 6.49v14.348h20.671L24 17.51V3.162zM12.785 18.4l-1.562.728-1.35-2.217c-.196.057-.499.09-.924.09-1.579 0-2.683-.425-3.305-1.276-.622-.85-.932-2.2-.932-4.033 0-1.84.319-3.206.949-4.098.63-.892 1.726-1.341 3.288-1.341 1.562 0 2.658.441 3.28 1.333.63.883.94 2.25.94 4.098 0 1.219-.13 2.2-.384 2.945-.261.752-.679 1.325-1.268 1.718zm4.736-1.587c-.858 0-1.447-.196-1.766-.59-.32-.392-.483-1.136-.483-2.232v-3.534H14.11V9.051h1.162V6.843h1.644V9.05h2.094v1.415h-2.094v3.346c0 .622.05 1.03.14 1.227.09.204.326.303.695.303l1.243-.05.073 1.326c-.67.13-1.186.196-1.546.196zm-8.58-9.08c-.95 0-1.604.311-1.963.94-.352.63-.532 1.629-.532 3.011 0 1.374.172 2.364.515 2.953.344.589 1.006.892 1.98.892.973 0 1.628-.295 1.971-.876.335-.58.507-1.57.507-2.953 0-1.39-.172-2.396-.523-3.026-.352-.63-1.006-.94-1.955-.94Z'/%3E%3C/svg%3E"); --icon-color: #41CD52; }
[data-icon="react"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z'/%3E%3C/svg%3E"); --icon-color: #61DAFB; }
[data-icon="rust"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.8346 11.7033l-1.0073-.6236a13.7268 13.7268 0 00-.0283-.2936l.8656-.8069a.3483.3483 0 00-.1154-.578l-1.1066-.414a8.4958 8.4958 0 00-.087-.2856l.6904-.9587a.3462.3462 0 00-.2257-.5446l-1.1663-.1894a9.3574 9.3574 0 00-.1407-.2622l.49-1.0761a.3437.3437 0 00-.0274-.3361.3486.3486 0 00-.3006-.154l-1.1845.0416a6.7444 6.7444 0 00-.1873-.2268l.2723-1.153a.3472.3472 0 00-.417-.4172l-1.1532.2724a14.0183 14.0183 0 00-.2278-.1873l.0415-1.1845a.3442.3442 0 00-.49-.328l-1.076.491c-.0872-.0476-.1742-.0952-.2623-.1407l-.1903-1.1673A.3483.3483 0 0016.256.955l-.9597.6905a8.4867 8.4867 0 00-.2855-.086l-.414-1.1066a.3483.3483 0 00-.5781-.1154l-.8069.8666a9.2936 9.2936 0 00-.2936-.0284L12.2946.1683a.3462.3462 0 00-.5892 0l-.6236 1.0073a13.7383 13.7383 0 00-.2936.0284L9.9803.3374a.3462.3462 0 00-.578.1154l-.4141 1.1065c-.0962.0274-.1903.0567-.2855.086L7.744.955a.3483.3483 0 00-.5447.2258L7.009 2.348a9.3574 9.3574 0 00-.2622.1407l-1.0762-.491a.3462.3462 0 00-.49.328l.0416 1.1845a7.9826 7.9826 0 00-.2278.1873L3.8413 3.425a.3472.3472 0 00-.4171.4171l.2713 1.1531c-.0628.075-.1255.1509-.1863.2268l-1.1845-.0415a.3462.3462 0 00-.328.49l.491 1.0761a9.167 9.167 0 00-.1407.2622l-1.1662.1894a.3483.3483 0 00-.2258.5446l.6904.9587a13.303 13.303 0 00-.087.2855l-1.1065.414a.3483.3483 0 00-.1155.5781l.8656.807a9.2936 9.2936 0 00-.0283.2935l-1.0073.6236a.3442.3442 0 000 .5892l1.0073.6236c.008.0982.0182.1964.0283.2936l-.8656.8079a.3462.3462 0 00.1155.578l1.1065.4141c.0273.0962.0567.1914.087.2855l-.6904.9587a.3452.3452 0 00.2268.5447l1.1662.1893c.0456.088.0922.1751.1408.2622l-.491 1.0762a.3462.3462 0 00.328.49l1.1834-.0415c.0618.0769.1235.1528.1873.2277l-.2713 1.1541a.3462.3462 0 00.4171.4161l1.153-.2713c.075.0638.151.1255.2279.1863l-.0415 1.1845a.3442.3442 0 00.49.327l1.0761-.49c.087.0486.1741.0951.2622.1407l.1903 1.1662a.3483.3483 0 00.5447.2268l.9587-.6904a9.299 9.299 0 00.2855.087l.414 1.1066a.3452.3452 0 00.5781.1154l.8079-.8656c.0972.0111.1954.0203.2936.0294l.6236 1.0073a.3472.3472 0 00.5892 0l.6236-1.0073c.0982-.0091.1964-.0183.2936-.0294l.8069.8656a.3483.3483 0 00.578-.1154l.4141-1.1066a8.4626 8.4626 0 00.2855-.087l.9587.6904a.3452.3452 0 00.5447-.2268l.1903-1.1662c.088-.0456.1751-.0931.2622-.1407l1.0762.49a.3472.3472 0 00.49-.327l-.0415-1.1845a6.7267 6.7267 0 00.2267-.1863l1.1531.2713a.3472.3472 0 00.4171-.416l-.2713-1.1542c.0628-.0749.1255-.1508.1863-.2278l1.1845.0415a.3442.3442 0 00.328-.49l-.49-1.076c.0475-.0872.0951-.1742.1407-.2623l1.1662-.1893a.3483.3483 0 00.2258-.5447l-.6904-.9587.087-.2855 1.1066-.414a.3462.3462 0 00.1154-.5781l-.8656-.8079c.0101-.0972.0202-.1954.0283-.2936l1.0073-.6236a.3442.3442 0 000-.5892zm-6.7413 8.3551a.7138.7138 0 01.2986-1.396.714.714 0 11-.2997 1.396zm-.3422-2.3142a.649.649 0 00-.7715.5l-.3573 1.6685c-1.1035.501-2.3285.7795-3.6193.7795a8.7368 8.7368 0 01-3.6951-.814l-.3574-1.6684a.648.648 0 00-.7714-.499l-1.473.3158a8.7216 8.7216 0 01-.7613-.898h7.1676c.081 0 .1356-.0141.1356-.088v-2.536c0-.074-.0536-.0881-.1356-.0881h-2.0966v-1.6077h2.2677c.2065 0 1.1065.0587 1.394 1.2088.0901.3533.2875 1.5044.4232 1.8729.1346.413.6833 1.2381 1.2685 1.2381h3.5716a.7492.7492 0 00.1296-.0131 8.7874 8.7874 0 01-.8119.9526zM6.8369 20.024a.714.714 0 11-.2997-1.396.714.714 0 01.2997 1.396zM4.1177 8.9972a.7137.7137 0 11-1.304.5791.7137.7137 0 011.304-.579zm-.8352 1.9813l1.5347-.6824a.65.65 0 00.33-.8585l-.3158-.7147h1.2432v5.6025H3.5669a8.7753 8.7753 0 01-.2834-3.348zm6.7343-.5437V8.7836h2.9601c.153 0 1.0792.1772 1.0792.8697 0 .575-.7107.7815-1.2948.7815zm10.7574 1.4862c0 .2187-.008.4363-.0243.651h-.9c-.09 0-.1265.0586-.1265.1477v.413c0 .973-.5487 1.1846-1.0296 1.2382-.4576.0517-.9648-.1913-1.0275-.4717-.2704-1.5186-.7198-1.8436-1.4305-2.4034.8817-.5599 1.799-1.386 1.799-2.4915 0-1.1936-.819-1.9458-1.3769-2.3153-.7825-.5163-1.6491-.6195-1.883-.6195H5.4682a8.7651 8.7651 0 014.907-2.7699l1.0974 1.151a.648.648 0 00.9182.0213l1.227-1.1743a8.7753 8.7753 0 016.0044 4.2762l-.8403 1.8982a.652.652 0 00.33.8585l1.6178.7188c.0283.2875.0425.577.0425.8717zm-9.3006-9.5993a.7128.7128 0 11.984 1.0316.7137.7137 0 01-.984-1.0316zm8.3389 6.71a.7107.7107 0 01.9395-.3625.7137.7137 0 11-.9405.3635z'/%3E%3C/svg%3E"); --icon-color: #CE422B; }
[data-icon="sqlalchemy"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.8 15.955a44.068 44.068 0 0 1-1.673-.691c-1.736-.757-1.981-.772-2.499-.143-.119.146-.25.236-.287.2-.111-.111.219-.644.617-.993.325-.285.433-.325.791-.285.228.025.985.29 1.682.586 1.573.669 2.034.811 2.635.811.731 0 1.106-.512.876-1.192-.057-.171-.04-.228.074-.228.213 0 .322.797.168 1.255a1.617 1.617 0 0 1-.424.614c-.251.211-.41.257-.879.254a3.853 3.853 0 0 1-1.082-.188h.001Zm.301-2.225c0-.048.179-.134.401-.188l.401-.099.086-1.446c.094-1.599.025-3.172-.148-3.383-.063-.074-.253-.165-.427-.205-.705-.156-.236-.264 1.133-.264 1.368 0 1.803.099 1.152.264-.561.14-.564.148-.564 2.43 0 1.266.046 2.22.111 2.342.092.171.228.207.752.207 1.081 0 1.453-.255 1.747-1.203.088-.284.315-.233.236.054-.037.134-.097.54-.134.91l-.068.669H14.44c-1.286 0-2.339-.04-2.339-.088Zm5.312-.068c0-.086.083-.171.219-.236.183-.086.302-.265.734-1.11.686-1.337 1.767-3.634 1.87-3.978.079-.262.097-.276.392-.31.171-.02.313-.031.316-.025l.527 1.152c.284.628.856 1.824 1.271 2.654.695 1.397.772 1.523 1.005 1.636.142.069.253.174.253.237 0 .099-.122.111-1.175.111-1.056 0-1.175-.012-1.175-.114 0-.068.091-.142.236-.191.134-.043.236-.122.236-.182 0-.057-.139-.432-.31-.834l-.31-.731h-2.35l-.225.495c-.421.928-.43 1.147-.037 1.252.196.054.25.097.227.185-.025.103-.127.117-.867.117-.794.006-.837 0-.837-.128Zm-15.652.025a10.933 10.933 0 0 1-.808-.196l-.549-.154.282-.518.281-.518-.227-.281c-.322-.399-.737-1.272-.74-1.554-.003-.657.851-1.61 1.898-2.122.72-.353 1.291-.362 2.009-.026l.54.253.157-.224c.085-.123.156-.285.156-.356 0-.071.071-.134.157-.134.085 0 .156.023.156.048 0 .063-.629 1.651-.669 1.691-.017.016-.187-.063-.381-.177-.546-.321-1.232-.535-1.764-.549-1.238-.031-1.667 1.178-.794 2.236l.308.373.839-.68c.942-.76 1.05-.777 1.784-.27.825.569.839 1.434.042 2.339-.705.805-1.431 1.027-2.677.819Zm5.984-.165c-.646-.301-1.229-.876-1.565-1.547-.538-1.076-.373-1.765.646-2.695.856-.782 1.556-1.087 2.498-1.087.68 0 .825.037 1.266.307 1.044.646 1.303 1.878.675 3.221-.737 1.577-2.294 2.37-3.52 1.801Zm-3.872-.702c.409-.322.381-.917-.063-1.389-.558-.592-.731-.566-1.713.253-.976.814-.982.783.185 1.155.771.251 1.255.242 1.591-.019Zm6.034-.046c.484-.239.817-1.343.68-2.259-.17-1.13-1.698-1.901-2.819-1.423-1.153.493-1.17 1.804-.037 2.985.791.828 1.471 1.044 2.176.697Zm11.359-1.414c.04-.071-.845-2.003-.928-2.023-.06-.017-.976 1.872-.976 2.014 0 .072 1.861.08 1.904.009Z'/%3E%3C/svg%3E"); --icon-color: #D71F00; }
[data-icon="svelte"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767 4.109 4.109 0 0 1-.703-3.107 3.898 3.898 0 0 1 .134-.522l.105-.321.287.21a7.21 7.21 0 0 0 2.186 1.092l.208.063-.02.208a1.253 1.253 0 0 0 .226.83 1.337 1.337 0 0 0 1.435.533 1.231 1.231 0 0 0 .343-.15l5.59-3.562a1.164 1.164 0 0 0 .524-.778 1.242 1.242 0 0 0-.211-.937 1.338 1.338 0 0 0-1.435-.533 1.23 1.23 0 0 0-.343.15l-2.133 1.36a4.078 4.078 0 0 1-1.135.499 4.44 4.44 0 0 1-4.765-1.766 4.108 4.108 0 0 1-.702-3.108 3.855 3.855 0 0 1 1.742-2.582l5.589-3.563a4.072 4.072 0 0 1 1.135-.499 4.44 4.44 0 0 1 4.765 1.767 4.109 4.109 0 0 1 .703 3.107 3.943 3.943 0 0 1-.134.522l-.105.321-.286-.21a7.204 7.204 0 0 0-2.187-1.093l-.208-.063.02-.207a1.255 1.255 0 0 0-.226-.831 1.337 1.337 0 0 0-1.435-.532 1.231 1.231 0 0 0-.343.15L8.62 9.368a1.162 1.162 0 0 0-.524.778 1.24 1.24 0 0 0 .211.937 1.338 1.338 0 0 0 1.435.533 1.235 1.235 0 0 0 .344-.151l2.132-1.36a4.067 4.067 0 0 1 1.135-.498 4.44 4.44 0 0 1 4.765 1.766 4.108 4.108 0 0 1 .702 3.108 3.857 3.857 0 0 1-1.742 2.583l-5.589 3.562a4.072 4.072 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.412 6.412 0 0 0-2.896 4.295 6.753 6.753 0 0 0 .666 4.336 6.43 6.43 0 0 0-.96 2.396 6.833 6.833 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.41 6.41 0 0 0 2.896-4.295 6.756 6.756 0 0 0-.665-4.336 6.429 6.429 0 0 0 .958-2.396 6.831 6.831 0 0 0-1.167-5.168Z'/%3E%3C/svg%3E"); --icon-color: #FF3E00; }
[data-icon="tailwindcss"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.001%2C4.8c-3.2%2C0-5.2%2C1.6-6%2C4.8c1.2-1.6%2C2.6-2.2%2C4.2-1.8c0.913%2C0.228%2C1.565%2C0.89%2C2.288%2C1.624 C13.666%2C10.618%2C15.027%2C12%2C18.001%2C12c3.2%2C0%2C5.2-1.6%2C6-4.8c-1.2%2C1.6-2.6%2C2.2-4.2%2C1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337%2C6.182%2C14.976%2C4.8%2C12.001%2C4.8z M6.001%2C12c-3.2%2C0-5.2%2C1.6-6%2C4.8c1.2-1.6%2C2.6-2.2%2C4.2-1.8c0.913%2C0.228%2C1.565%2C0.89%2C2.288%2C1.624 c1.177%2C1.194%2C2.538%2C2.576%2C5.512%2C2.576c3.2%2C0%2C5.2-1.6%2C6-4.8c-1.2%2C1.6-2.6%2C2.2-4.2%2C1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337%2C13.382%2C8.976%2C12%2C6.001%2C12z'/%3E%3C/svg%3E"); --icon-color: #06B6D4; }
[data-icon="tanstack"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c6.627 0 9.166 4.102 9.166 12S18.626 24 12 24s-9.166-4.096-9.166-12c0-7.898 2.54-12 9.166-12m3.031 17.485c-.861 0-1.33.234-1.708.423-.327.164-.582.292-1.148.292-.567 0-.822-.128-1.148-.292-.378-.189-.848-.423-1.71-.423-.86 0-1.33.234-1.708.423-.327.164-.581.292-1.148.292v1.251c.862 0 1.331-.234 1.709-.423.326-.163.581-.292 1.148-.292s.821.129 1.148.292c.378.189.847.423 1.709.423.861 0 1.33-.234 1.709-.423.326-.163.58-.292 1.147-.292s.822.129 1.148.292c.378.189.848.423 1.71.423v-1.25c-.565 0-.822-.13-1.149-.293-.377-.189-.847-.423-1.709-.423m.41-12.536c.65-.586 0-1.648-.813-1.328-.45.18-.873.438-1.251.779a4.2 4.2 0 0 0-1.202 1.94 4.2 4.2 0 0 0-1.203-1.94 4.3 4.3 0 0 0-1.25-.779c-.814-.32-1.463.742-.814 1.328l2.385 2.153a4.86 4.86 0 0 0-2.731-.839c-.552 0-1.082.09-1.58.26-.836.284-.604 1.532.275 1.532h3.326a4.2 4.2 0 0 0-2.012.988 4 4 0 0 0-.9 1.165c-.403.776.588 1.529 1.237.948l2.686-2.42-.2 6.656c0 .08-.047.158-.107.223a5 5 0 0 1-.257-.123c-.378-.189-.848-.423-1.71-.423-.861 0-1.33.234-1.708.423-.327.164-.581.292-1.148.292v1.251c.861 0 1.33-.234 1.709-.423.326-.164.58-.292 1.148-.292.566 0 .821.128 1.148.292.377.189.847.423 1.708.423.862 0 1.332-.234 1.71-.423.326-.164.58-.292 1.147-.292s.822.128 1.148.292c.378.189.848.423 1.71.423v-1.25c-.565 0-.822-.13-1.149-.293v-.005c-.378-.19-.847-.424-1.709-.424-.861 0-1.33.235-1.709.424-.097.045-.189.094-.283.131a.34.34 0 0 1-.12-.232l-.2-6.69 2.722 2.457c.65.587 1.64-.166 1.236-.948a4.11 4.11 0 0 0-2.911-2.153h3.326c.882 0 1.108-1.245.275-1.531a4.88 4.88 0 0 0-4.311.578l2.385-2.152z'/%3E%3C/svg%3E"); --icon-color: currentColor; }
:root[data-theme="dark"] [data-icon="tanstack"] { --icon-color: #ECE8D1; }
[data-icon="tauri"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.912 0a8.72 8.72 0 0 0-8.308 6.139c1.05-.515 2.18-.845 3.342-.976 2.415-3.363 7.4-3.412 9.88-.097 2.48 3.315 1.025 8.084-2.883 9.45a6.131 6.131 0 0 1-.3 2.762 8.72 8.72 0 0 0 3.01-1.225A8.72 8.72 0 0 0 13.913 0zm.082 6.451a2.284 2.284 0 1 0-.15 4.566 2.284 2.284 0 0 0 .15-4.566zm-5.629.27a8.72 8.72 0 0 0-3.031 1.235 8.72 8.72 0 1 0 13.06 9.9131 10.173 10.174 0 0 1-3.343.965 6.125 6.125 0 1 1-7.028-9.343 6.114 6.115 0 0 1 .342-2.772zm1.713 6.27a2.284 2.284 0 0 0-2.284 2.283 2.284 2.284 0 0 0 2.284 2.284 2.284 2.284 0 0 0 2.284-2.284 2.284 2.284 0 0 0-2.284-2.284z'/%3E%3C/svg%3E"); --icon-color: #24C8D8; }
[data-icon="typescript"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z'/%3E%3C/svg%3E"); --icon-color: #3178C6; }
[data-icon="ubuntu"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.61.455a3.41 3.41 0 0 0-3.41 3.41 3.41 3.41 0 0 0 3.41 3.41 3.41 3.41 0 0 0 3.41-3.41 3.41 3.41 0 0 0-3.41-3.41zM12.92.8C8.923.777 5.137 2.941 3.148 6.451a4.5 4.5 0 0 1 .26-.007 4.92 4.92 0 0 1 2.585.737A8.316 8.316 0 0 1 12.688 3.6 4.944 4.944 0 0 1 13.723.834 11.008 11.008 0 0 0 12.92.8zm9.226 4.994a4.915 4.915 0 0 1-1.918 2.246 8.36 8.36 0 0 1-.273 8.303 4.89 4.89 0 0 1 1.632 2.54 11.156 11.156 0 0 0 .559-13.089zM3.41 7.932A3.41 3.41 0 0 0 0 11.342a3.41 3.41 0 0 0 3.41 3.409 3.41 3.41 0 0 0 3.41-3.41 3.41 3.41 0 0 0-3.41-3.41zm2.027 7.866a4.908 4.908 0 0 1-2.915.358 11.1 11.1 0 0 0 7.991 6.698 11.234 11.234 0 0 0 2.422.249 4.879 4.879 0 0 1-.999-2.85 8.484 8.484 0 0 1-.836-.136 8.304 8.304 0 0 1-5.663-4.32zm11.405.928a3.41 3.41 0 0 0-3.41 3.41 3.41 3.41 0 0 0 3.41 3.41 3.41 3.41 0 0 0 3.41-3.41 3.41 3.41 0 0 0-3.41-3.41z'/%3E%3C/svg%3E"); --icon-color: #E95420; }
[data-icon="uv"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m0 .1058.0504 11.9496.0403 9.5597c.0055 1.3199 1.08 2.3854 2.4 2.3798l9.5596-.0403 5.9749-.0252.6075-.0026c1.316-.0056 2.3799-1.0963 2.3799-2.4123h1.0946v2.3894L24 23.9042 23.8992.005 12.9056.0513l.0463 9.5245v5.9637h-1.9583L11.04 9.584 10.9936.0594Z'/%3E%3C/svg%3E"); --icon-color: #DE5FE9; }
[data-icon="vite"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.056 23.238a.57.57 0 0 1-1.02-.355v-5.202c0-.63-.512-1.143-1.144-1.143H5.148a.57.57 0 0 1-.464-.903l3.777-5.29c.54-.753 0-1.804-.93-1.804H.57a.574.574 0 0 1-.543-.746.6.6 0 0 1 .08-.157L5.008.78a.57.57 0 0 1 .467-.24h14.589a.57.57 0 0 1 .466.903l-3.778 5.29c-.54.755 0 1.806.93 1.806h5.745c.238 0 .424.138.513.322a.56.56 0 0 1-.063.603z'/%3E%3C/svg%3E"); --icon-color: #9135FF; }
[data-icon="vuedotjs"] { --icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24%2C1.61H14.06L12%2C5.16%2C9.94%2C1.61H0L12%2C22.39ZM12%2C14.08%2C5.16%2C2.23H9.59L12%2C6.41l2.41-4.18h4.43Z'/%3E%3C/svg%3E"); --icon-color: #4FC08D; }


/* pointer spotlight on cards: one gradient layer that fades in on hover, no layout or transform */
.repo-card::before, .entry-card::before {
  content: ""; display: block; position: absolute; z-index: 3; inset: 0; height: auto; border-radius: inherit; pointer-events: none;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--accent) 9%, transparent), transparent 65%);
  opacity: 0; transition: opacity 0.3s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .repo-card:hover::before, .entry-card:hover::before { opacity: 1; }
}

/* below-the-fold cards settle in once, staggered; JS adds .will-reveal only to sections that start off screen,
   so nothing already visible on F5 or a menu click ever fades */
.reveal-section.will-reveal:not(.in-view) .repo-card,
.reveal-section.will-reveal:not(.in-view) .tl-item,
.reveal-section.will-reveal:not(.in-view) .entry-card { opacity: 0; transform: translateY(14px); }
.reveal-section.will-reveal.in-view .repo-card,
.reveal-section.will-reveal.in-view .tl-item,
.reveal-section.will-reveal.in-view .entry-card {
  transition: opacity 0.55s var(--ease-out) calc(var(--reveal-i, 0) * 0.06s), transform 0.7s var(--ease-out) calc(var(--reveal-i, 0) * 0.06s),
    box-shadow 0.28s var(--ease), border-color 0.2s var(--ease), background 0.25s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-section.will-reveal:not(.in-view) .repo-card,
  .reveal-section.will-reveal:not(.in-view) .tl-item,
  .reveal-section.will-reveal:not(.in-view) .entry-card { opacity: 1; transform: none; }
}

/* visual page: section heads, jump chips, link cards, 3D viewer cards */
.vjump { display: flex; gap: 6px; flex-wrap: wrap; }
.vjump a { font-size: 0.78rem; padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2); text-decoration: none; background: var(--paper); }
.vjump a:hover { border-color: var(--accent); color: var(--text); }
.vjump b { color: var(--accent); font-weight: 600; margin-left: 2px; }
.vsec { margin: 2rem 0 0.8rem; font-size: 1.05rem; font-weight: 700; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; scroll-margin-top: 80px; }
.vsec:first-of-type { margin-top: 0.4rem; }
.vsec span { font-size: 0.78rem; font-weight: 500; color: var(--text-dim); }
.vcard--link { color: inherit; text-decoration: none; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); }
.vcard--link:hover { transform: translateY(-2px); }
.vcard--link .vcard-title { display: block; }
.vcard-media { position: relative; display: block; }
.vcard-media > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; }
.m3d { background: #e6e6e7; }
.m3d > img { object-fit: contain; object-position: center; }
.m3d-go { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); border: 0; border-radius: 999px; padding: 6px 14px; background: rgba(17, 18, 20, 0.78); color: #fff; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.m3d-go small { font-weight: 500; opacity: 0.7; margin-left: 4px; }
.m3d-go:hover { background: var(--accent); }
.m3d.is-loading .m3d-go { opacity: 0.6; pointer-events: none; }
.m3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.m3d.is-live > img, .m3d.is-live .m3d-go { visibility: hidden; }