/* ---------- tokens ---------- */
:root {
  --bg: #fafaf9;
  --fg: #1c1917;
  --muted: #78716c;
  --line: #e7e5e4;
  --card: #ffffff;
  --accent: #2563eb;
  --accent-fg: #ffffff;
  --radius: 10px;
  --max: 46rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0c0a09; --fg: #e7e5e4; --muted: #a8a29e; --line: #292524; --card: #1c1917; --accent: #60a5fa; --accent-fg: #0c0a09;
  }
}
:root[data-theme="dark"] {
  --bg: #0c0a09; --fg: #e7e5e4; --muted: #a8a29e; --line: #292524; --card: #1c1917; --accent: #60a5fa; --accent-fg: #0c0a09;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.6 var(--font); font-feature-settings: "kern", "liga";
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
svg.icon-fill { fill: currentColor; stroke: none; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5rem; }
h1 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .9rem; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: 1.25rem; }
main.wrap { flex: 1; padding-block: 2rem 3rem; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: .5rem; z-index: 10; }

/* ---------- header / footer ---------- */
.site-header { width: 100%;
  max-width: var(--max); margin: 0 auto; padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { font-weight: 700; color: var(--fg); display: inline-flex; align-items: baseline; gap: .5rem; min-width: 0; }
.brand-hidden { visibility: hidden; }
.brand-dot { color: var(--muted); font-weight: 400; }
.brand:hover { text-decoration: none; }
.brand-sub { font-weight: 400; font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header nav { display: flex; align-items: center; gap: 1rem; }
.site-header nav a { color: var(--muted); }
.site-header nav a[aria-current="page"], .site-header nav a:hover { color: var(--fg); text-decoration: none; }
#theme-toggle { background: none; border: 1px solid var(--line); color: var(--fg); border-radius: 999px; width: 2rem; height: 2rem; cursor: pointer; font-size: 1rem; line-height: 1; }
.site-footer { border-top: 1px solid var(--line); padding-block: 1.5rem; }

/* ---------- socials ---------- */
.socials { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.socials a { color: var(--muted); display: inline-flex; align-items: center; gap: .35rem; }
.socials a:hover { color: var(--fg); text-decoration: none; }
.socials.inline { margin-top: 1rem; }

/* ---------- hero ---------- */
.hero { margin-bottom: 2.5rem; }
.tagline { font-size: 1.15rem; color: var(--muted); margin: 0 0 .75rem; }
.intro p { margin: 0 0 .5rem; }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: 2.5rem; }
.stat {
  display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg);
}
.stat:hover { text-decoration: none; border-color: var(--accent); }
.stat-icon { color: var(--muted); }
.stat-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: .8rem; color: var(--muted); }
.stat-updated { grid-column: 1 / -1; margin: 0; font-size: .75rem; color: var(--muted); text-align: right; }

/* ---------- project grid & cards ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head h2 { display: flex; align-items: center; gap: .4rem; }
.more { font-size: .9rem; white-space: nowrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-bottom: 2.5rem; }
.card {
  display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg);
  transition: border-color .15s, transform .15s;
}
.card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); }
.card p { margin: 0; color: var(--muted); font-size: .92rem; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.card-head h3 { margin: 0; }

/* ---------- tags & badges ---------- */
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li, .tags li a { font-size: .75rem; color: var(--muted); font-family: var(--mono); }
.tags li::before { content: "#"; }
.tags.big li { font-size: 1rem; }
.badge { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge-live { border-color: #16a34a; color: #16a34a; }
.badge-beta { border-color: #d97706; color: #d97706; }
.badge-archived { opacity: .6; }

/* ---------- project page ---------- */
.project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lede { color: var(--muted); font-size: 1.1rem; margin: 0; }
.actions { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.btn {
  display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .9rem; border-radius: 8px;
  background: var(--accent); color: var(--accent-fg); font-weight: 600; font-size: .9rem;
}
.btn:hover { text-decoration: none; filter: brightness(1.1); }
.actions li:not(:first-child) .btn { background: var(--card); color: var(--fg); border: 1px solid var(--line); }
.shot { margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.project-foot { border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

/* ---------- prose ---------- */
.prose { max-width: 65ch; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; }
.prose h2 { margin-top: 2rem; }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--card); border: 1px solid var(--line); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose blockquote { margin: 0 0 1rem; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }
.prose table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: .4rem .6rem; text-align: left; }

/* ---------- small screens ---------- */
@media (max-width: 480px) {
  .site-header { flex-wrap: wrap; }
  .site-header nav { gap: .7rem; font-size: .95rem; }
  .brand-sub, .brand-dot { display: none; }
  .project-head { flex-direction: column; }
  .section-head { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ---------- repo cards ---------- */
.card.repo h3 { display: flex; align-items: center; gap: .35rem; }
.stars { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.repo-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .8rem; margin-top: auto; }
.lang { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); }
.dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--muted); display: inline-block; }
.lang-python { background: #3572A5; } .lang-kotlin { background: #A97BFF; } .lang-rust { background: #dea584; }
.lang-typescript { background: #3178c6; } .lang-javascript { background: #f1e05a; } .lang-go { background: #00ADD8; }
.lang-cpp { background: #f34b7d; } .lang-c { background: #555; } .lang-java { background: #b07219; } .lang-shell { background: #89e051; }
.section-head h2 small { font-weight: 400; font-size: .85rem; margin-left: .25rem; }

/* ---------- CV ---------- */
.cv-head { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: center; margin-bottom: 1.5rem; }
.cv-avatar { width: 6rem; height: 6rem; border-radius: 50%; border: 1px solid var(--line); grid-row: span 2; }
.cv-id h1 { margin-bottom: .15rem; }
.cv-id p { margin: 0; }
.cv-actions { grid-column: 2; margin: 0; }
.cv-actions .btn { background: var(--card); color: var(--fg); border: 1px solid var(--line); font-weight: 500; }
.cv-actions .btn:hover { border-color: var(--accent); filter: none; }
.cv-intro { margin-bottom: 1.5rem; }
.cv-section { margin-top: 2.25rem; }
.cv-section h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin-bottom: 1.25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 9.25rem; top: .75rem; bottom: .75rem; width: 2px; background: var(--line); }
.tl-group { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.75rem; padding-bottom: 1.75rem; position: relative; }
.tl-group:last-child { padding-bottom: .25rem; }
.tl-group::before {
  content: ""; position: absolute; left: calc(9.25rem - 4px); top: 1.2rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--muted);
}
.tl-group.current::before { background: var(--accent); border-color: var(--accent); }
.tl-when { font-size: .85rem; color: var(--muted); text-align: right; padding-top: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-body { display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 1rem; background: transparent; border: 1px solid var(--line); border-radius: var(--radius); }
.tl-logo { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 9px; object-fit: contain; }
.tl-logo-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-weight: 700; }
.tl-text { min-width: 0; flex: 1; }
.tl-org { margin: 0 0 .1rem; font-size: 1rem; line-height: 1.3; }
.tl-org a { color: var(--fg); }
.tl-roles { list-style: none; margin: 0; padding: 0; }
.tl-role { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .2rem 0; line-height: 1.4; }
.tl-role + .tl-role { border-top: 1px dashed var(--line); }
.tl-title { font-weight: 400; color: var(--fg); }
.tl-dates { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.awards { list-style: none; margin: 0; padding: 0; }
.awards li { padding: .45rem 0; border-bottom: 1px solid var(--line); display: flex; gap: 1rem; }
.awards li:last-child { border-bottom: 0; }
.awards .muted { min-width: 3rem; font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .cv-head { grid-template-columns: auto 1fr; }
  .cv-avatar { width: 4.5rem; height: 4.5rem; grid-row: auto; }
  .cv-actions { grid-column: 1 / -1; }
  .timeline::before { left: .25rem; }
  .tl-group { grid-template-columns: 1fr; gap: .35rem; padding-left: 1.25rem; }
  .tl-group::before { left: calc(.25rem - 4px); top: .15rem; }
  .tl-when { text-align: left; padding-top: 0; }
  .tl-body { padding: .65rem .75rem; }
  .tl-logo { width: 2.5rem; height: 2.5rem; }
  .tl-role { flex-direction: column; gap: 0; }
}

/* ---------- products ---------- */
.product-head { display: flex; gap: .75rem; align-items: center; }
.product-head-text { flex: 1; min-width: 0; }
.product-head .badge { align-self: flex-start; }
.product-head h3 { margin: 0; }
.product-icon { flex: none; width: 3.5rem; height: 3.5rem; border-radius: 22%; }
.product-icon.big { width: 6rem; height: 6rem; }
.product-stats { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .85rem; margin-top: auto; }
.product-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.product-page-head { align-items: center; }
.product-page-head > div { flex: 1; }
.stats.compact { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); margin-bottom: 1.5rem; }
.stat-value.small { font-size: 1rem; }

/* ---------- app page ---------- */
.app-hero { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.app-icon { flex: none; width: 7rem; height: 7rem; border-radius: 24%; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.app-hero-text { min-width: 0; }
.eyebrow { margin: 0 0 .25rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.app-hero h1 { margin-bottom: .25rem; }
.app-hero .lede { margin-bottom: .9rem; }
.app-hero .actions { margin-bottom: 0; }

.facts { list-style: none; margin: 0 0 1.75rem; padding: .9rem 0; display: flex; flex-wrap: wrap; gap: .5rem 2.25rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts li { display: flex; flex-direction: column; }
.facts strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.facts span { font-size: .78rem; color: var(--muted); }

/* carousel: hidden scrollbar, snap, arrows, dots */
.carousel { position: relative; margin: 0 0 2rem; }
.car-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none; padding: .25rem .25rem 0; outline: none;
}
.car-track::-webkit-scrollbar { display: none; }
.car-slide { flex: none; margin: 0; scroll-snap-align: start; }
.car-slide img { height: 26rem; width: auto; border-radius: 18px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0,0,0,.10); display: block; }
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--fg);
  font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.car-btn.prev { left: -.75rem; } .car-btn.next { right: -.75rem; }
.car-btn:disabled { opacity: .35; cursor: default; }
.car-dots { display: flex; justify-content: center; gap: .4rem; margin-top: .9rem; }
.car-dots button { width: .5rem; height: .5rem; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: width .2s, background .2s; }
.car-dots button[aria-selected="true"] { width: 1.25rem; border-radius: 999px; background: var(--accent); }

/* structured description */
.app-body { max-width: 65ch; }
.app-intro { font-size: 1.05rem; margin: 0 0 1rem; }
.app-section { margin-top: 2rem; }
.app-section h2, .callout h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 .9rem; display: flex; align-items: center; gap: .4rem; }
.features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: .6rem; }
.features > li { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 10px; font-size: .93rem; align-self: start; }
.feat-sub { margin: .35rem 0 0; padding-left: 1rem; font-size: .85rem; color: var(--muted); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.checklist li { display: flex; gap: .6rem; align-items: flex-start; }
.checklist svg { flex: none; color: var(--accent); margin-top: .25rem; }
.callout { margin-top: 2rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); }
.callout p { margin: 0 0 .6rem; font-size: .95rem; } .callout p:last-child { margin: 0; }
.footnotes { margin: 1.5rem 0 0; padding-left: 1.2rem; font-size: .78rem; color: var(--muted); }
.feat sup, .checklist sup, .callout sup { font-size: .65em; color: var(--muted); margin-left: .1em; }
.footnotes li { margin-bottom: .15rem; }

@media (max-width: 600px) {
  .app-hero { gap: 1rem; }
  .app-icon { width: 4.5rem; height: 4.5rem; }
  .facts { gap: .5rem 1.5rem; }
  .car-slide img { height: 20rem; }
  .car-btn { display: none; }
  .car-track { padding-inline: 0; }
}

/* ---------- breadcrumbs ---------- */
.crumbs { margin: -0.5rem 0 1.25rem; font-size: .85rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crumbs li { display: flex; align-items: center; gap: .35rem; color: var(--muted); }
.crumbs li + li::before { content: "/"; color: var(--line); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--fg); text-decoration: none; }
.crumbs [aria-current] { color: var(--fg); }

/* ---------- project extras ---------- */
.card-logo { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 6px; vertical-align: -0.3em; margin-right: .4rem; }
.features strong { display: block; margin-bottom: .15rem; }
.app-section pre { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; overflow-x: auto; font-family: var(--mono); font-size: .88rem; line-height: 1.5; }
.shot { margin: 0 0 1.75rem; }
.shot img { border-radius: var(--radius); border: 1px solid var(--line); }
.shot figcaption { font-size: .8rem; margin-top: .4rem; text-align: center; }

/* ---------- contribution map ---------- */
.stat-wide { grid-column: span 2; justify-content: space-between; }
.contrib { width: 100%; height: auto; display: block; margin: .35rem 0; fill: none; stroke: none; }
.contrib rect { stroke: none; }
.contrib .c0 { fill: var(--line); }
.contrib .c1 { fill: var(--accent); opacity: .3; }
.contrib .c2 { fill: var(--accent); opacity: .55; }
.contrib .c3 { fill: var(--accent); opacity: .8; }
.contrib .c4 { fill: var(--accent); opacity: 1; }
@media (max-width: 480px) { .stat-wide { grid-column: 1 / -1; } }

/* ---------- skills tags on /about/ ---------- */
.tags.skills { gap: .5rem; margin-bottom: 1.5rem; }
.tags.skills li { font-size: .85rem; padding: .25rem .6rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); }
.tags.skills li::before { color: var(--muted); }