/* ===== Ken Huang — personal site =====
   Design tokens + components. Light default, [data-theme="dark"] overrides. */

:root {
  --bg:#fafafa; --surface:#ffffff; --panel:#f2f3f5;
  --fg:#101318; --muted:#5a616d; --faint:#8b93a1;
  --border:#e6e8ec; --accent:#2563eb; --accent-soft:#e6effb;
  --chip-bg:#eef0f3; --chip-fg:#3a3f4a; --input-bg:#ffffff;
  --code-str:#3f9a6d;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --display:'Space Grotesk',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
}
html[data-theme="dark"] {
  --bg:#0b0d11; --surface:#12151b; --panel:#161a21;
  --fg:#e9ebef; --muted:#949bab; --faint:#6c7686;
  --border:#222732; --accent:#60a5fa; --accent-soft:#16223c;
  --chip-bg:#161a21; --chip-fg:#c1c6d0; --input-bg:#12151b;
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }

/* ---------- layout ---------- */
.layout { display:grid; grid-template-columns:300px 1fr; min-height:100vh;
  transition:grid-template-columns .28s ease; }

.sidebar {
  position:sticky; top:0; align-self:start; height:100vh; overflow-x:hidden; overflow-y:auto;
  min-width:0; padding:32px 26px; border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:22px; background:var(--surface); }
.brand { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; }
.avatar { width:150px; height:150px; border-radius:999px; overflow:hidden;
  border:3px solid var(--accent-soft); box-shadow:0 4px 14px rgba(0,0,0,.12); }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.brand-name { font-family:var(--display); font-weight:600; font-size:22px; }
.brand-role { font-family:var(--mono); font-size:13px; color:var(--muted); letter-spacing:.4px; margin-top:3px; }

.socials { display:flex; gap:10px; }
.social-btn { width:32px; height:32px; border-radius:8px; border:1px solid var(--border);
  background:var(--panel); color:var(--muted); display:flex; align-items:center; justify-content:center;
  text-decoration:none; transition:color .15s, border-color .15s; }
.social-btn:hover { color:var(--accent); border-color:var(--accent); }

.nav { display:flex; flex-direction:column; gap:2px; margin-top:4px; }
.nav-link { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  color:var(--muted); font-size:16px; text-decoration:none; transition:background .15s, color .15s; }
.nav-link:hover { background:var(--panel); color:var(--fg); }
.nav-link.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav-ic { display:none; width:20px; height:20px; flex-shrink:0; }

.sidebar-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; border-top:1px solid var(--border); }
.copy { font-family:var(--mono); font-size:12.5px; color:var(--faint); }
.theme-toggle { width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:var(--panel); color:var(--muted); cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:14px; line-height:1; }
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); }

.main { padding:52px; min-width:0; }

/* collapsible sidebar */
.sidebar-toggle { position:fixed; top:14px; left:14px; z-index:60; width:34px; height:34px;
  padding:0; border-radius:9px; border:1px solid var(--border); background:var(--surface);
  color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.06); transition:color .15s, border-color .15s, background .15s; }
.sidebar-toggle:hover { color:var(--accent); border-color:var(--accent); }
/* collapsed = thin icon rail (desktop only): uniform bare icons, hover tooltips */
@media (min-width:861px) {
  html.sidebar-collapsed .layout { grid-template-columns:60px 1fr; }
  html.sidebar-collapsed .sidebar { padding:32px 0 22px; align-items:center; overflow:visible; }
  /* reserve just enough top space that the nav lands at its expanded height */
  html.sidebar-collapsed .brand { width:100%; gap:20px; overflow:hidden; }
  html.sidebar-collapsed .avatar { visibility:hidden; height:92px; }
  html.sidebar-collapsed .brand-name,
  html.sidebar-collapsed .brand-role { display:none; }
  html.sidebar-collapsed .socials { flex-direction:column; gap:18px; }
  /* every icon: no chrome, same ~20px size */
  html.sidebar-collapsed .social-btn { width:auto; height:auto; border:none; background:none; }
  html.sidebar-collapsed .social-btn svg { width:20px; height:20px; }
  html.sidebar-collapsed .nav { width:100%; }
  html.sidebar-collapsed .nav-link { justify-content:center; padding:11px 0; gap:0; position:relative; }
  html.sidebar-collapsed .nav-link:hover,
  html.sidebar-collapsed .nav-link.active { background:none; }
  html.sidebar-collapsed .nav-ic { display:block; }
  html.sidebar-collapsed .nav-link .label { display:none; }
  html.sidebar-collapsed .nav-link:hover .label {
    display:block; position:absolute; left:calc(100% - 4px); top:50%; transform:translateY(-50%);
    background:var(--fg); color:var(--surface); padding:5px 10px; border-radius:6px;
    font-size:12.5px; line-height:1; white-space:nowrap; z-index:80; pointer-events:none;
    box-shadow:0 4px 12px rgba(0,0,0,.18); }
  html.sidebar-collapsed .sidebar-foot { justify-content:center; width:100%; }
  html.sidebar-collapsed .copy { display:none; }
  html.sidebar-collapsed .theme-toggle { width:auto; height:auto; border:none; background:none; font-size:20px; }
  html.sidebar-collapsed .sidebar-toggle { left:13px; border:none; background:none; box-shadow:none; }
  html.sidebar-collapsed .sidebar-toggle svg { width:20px; height:20px; }
}

/* ---------- shared bits ---------- */
.eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:1.5px; color:var(--accent);
  text-transform:uppercase; margin-bottom:18px; }
.chip { padding:6px 13px; border-radius:999px; background:var(--chip-bg); color:var(--chip-fg);
  font-size:12.5px; text-decoration:none; display:inline-flex; align-items:center; }
.chip.active { background:var(--accent-soft); color:var(--accent); font-weight:600; }
.chip.clickable { cursor:pointer; user-select:none; }
.search { display:flex; align-items:center; gap:8px; padding:9px 13px; background:var(--input-bg);
  border:1px solid var(--border); border-radius:9px; }
.search span { font-size:13px; color:var(--muted); }
.search input { border:none; background:transparent; outline:none; color:var(--fg);
  font-size:13.5px; font-family:inherit; width:170px; }

/* ---------- home ---------- */
.intro { display:grid; grid-template-columns:1fr 304px; gap:28px;
  align-items:start; margin-top:30px; margin-bottom:8px; }
.intro-copy { min-width:0; margin-right:36px; }
.lead strong { color:var(--accent); font-weight:inherit; }
.hero-globe { display:block; width:280px; height:270px; align-self:start; justify-self:start; margin-top:28px; }
.hero-title { margin:0 0 22px; font-family:var(--display); font-size:clamp(30px, 1.4vw + 24px, 46px);
  line-height:1.14; font-weight:600; letter-spacing:-.02em; max-width:100%; text-wrap:balance; }
.lead { margin:0 0 16px; font-size:clamp(15.5px, 0.35vw + 14.5px, 18px); line-height:1.65;
  color:var(--muted); max-width:100%; text-wrap:pretty; }
.block-label { font-family:var(--mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
  color:var(--faint); margin-bottom:12px; }
.topics { display:flex; flex-wrap:wrap; gap:8px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between;
  padding-top:26px; border-top:1px solid var(--border); margin-bottom:18px; }
.section-head h2 { font-size:13px; font-family:var(--mono); letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); margin:0; font-weight:500; }
.link-accent { font-size:13px; color:var(--accent); text-decoration:none; font-weight:500; }
.teaser { text-decoration:none; color:inherit; display:flex; gap:16px; padding:16px 0;
  border-bottom:1px solid var(--border); transition:opacity .15s; }
.teaser:last-child { border-bottom:none; }
.teaser:hover { opacity:.72; }
.teaser .date { font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap;
  padding-top:3px; min-width:66px; }
.teaser h3 { font-family:var(--display); font-size:17px; font-weight:600; margin:0 0 4px; }
.teaser p { margin:0; font-size:13px; color:var(--muted); }

/* ---------- blog list ---------- */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:22px; flex-wrap:wrap; }
.page-title { margin:0; font-family:var(--display); font-size:30px; line-height:1.1;
  font-weight:600; letter-spacing:-.015em; }
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px;
  padding-bottom:22px; border-bottom:1px solid var(--border); }
.post-row { text-decoration:none; color:inherit; display:flex; gap:18px;
  padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--border); transition:opacity .15s; }
.post-row:hover { opacity:.72; }
.post-row .num { font-family:var(--mono); font-size:14px; color:var(--accent); font-weight:500; padding-top:2px; }
.post-row .meta { display:flex; gap:9px; font-size:12px; color:var(--muted); font-family:var(--mono); }
.post-row h3 { font-family:var(--display); font-size:19px; font-weight:600; margin:8px 0 7px; }
.post-row p { margin:0; font-size:14.5px; line-height:1.55; color:var(--muted); }
.no-results { color:var(--muted); font-size:15px; padding:20px 0; display:none; }

/* ---------- projects ---------- */
.proj-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  margin-bottom:26px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--border); }
.synced { display:flex; align-items:center; gap:7px; padding:6px 12px; border:1px solid var(--border);
  border-radius:999px; font-family:var(--mono); font-size:11.5px; color:var(--muted); white-space:nowrap; }
.synced .dot { width:7px; height:7px; border-radius:999px; background:#2ea043;
  box-shadow:0 0 0 3px rgba(46,160,67,.18); }
.project-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.proj-note { grid-column:1/-1; margin:0; color:var(--muted); font-size:14.5px; }
.proj-note a { color:var(--accent); text-decoration:none; }
.project-card { text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:12px;
  padding:20px; background:var(--surface); border:1px solid var(--border); border-radius:12px;
  transition:border-color .15s, transform .15s; }
.project-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.repo-head { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.repo-head svg { color:var(--muted); flex-shrink:0; }
.repo-name { font-family:var(--display); font-size:15px; font-weight:600; color:var(--accent); }
.badge { padding:1px 8px; border:1px solid var(--border); border-radius:999px; font-size:11px;
  color:var(--muted); font-family:var(--mono); }
.project-card p { margin:0; font-size:13.5px; line-height:1.55; color:var(--muted); flex:1; }
.repo-meta { display:flex; align-items:center; gap:16px; font-size:12.5px; color:var(--muted); font-family:var(--mono); }
.repo-meta .stat { display:flex; align-items:center; gap:5px; }
.repo-meta .lang { display:flex; align-items:center; gap:6px; }
.lang-dot { width:11px; height:11px; border-radius:999px; background:#3572A5; }

/* ---------- article (blog post) ---------- */
.main.reading { display:flex; justify-content:center; }
.article { width:100%; max-width:680px; }
.back-link { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:12.5px;
  color:var(--muted); text-decoration:none; margin-bottom:26px; }
.back-link:hover { color:var(--accent); }
.article .post-meta { display:flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:12px; color:var(--muted); margin-bottom:16px; }
.article .post-meta .cat { color:var(--accent); font-weight:500; }
.article h1 { margin:0 0 20px; font-family:var(--display); font-size:36px; line-height:1.12;
  font-weight:600; letter-spacing:-.02em; }
.byline { display:flex; align-items:center; gap:12px; padding-bottom:26px; margin-bottom:30px;
  border-bottom:1px solid var(--border); }
.byline .av { width:36px; height:36px; border-radius:999px; overflow:hidden; border:1px solid var(--border); }
.byline .av img { width:100%; height:100%; object-fit:cover; display:block; }
.byline .who { display:flex; flex-direction:column; line-height:1.25; }
.byline .who b { font-size:13.5px; font-weight:600; }
.byline .who span { font-size:12px; color:var(--muted); }
.byline .fmt { margin-left:auto; display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border:1px solid var(--border); border-radius:999px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.byline .fmt i { width:6px; height:6px; border-radius:2px; background:var(--accent); display:inline-block; }
.article .prose { font-size:16.5px; line-height:1.72; color:var(--muted); }
.article .prose.first { font-size:18px; line-height:1.7; color:var(--fg); margin:0 0 22px; }
.article .prose { margin:0 0 20px; }
.article h2 { margin:38px 0 14px; font-family:var(--display); font-size:24px; font-weight:600; letter-spacing:-.01em; }
.article strong { color:var(--fg); }
.article ul, .article ol { margin:0 0 22px; padding-left:22px; font-size:16.5px; line-height:1.75; color:var(--muted); }
.article li { margin-bottom:8px; }
.article blockquote { margin:24px 0; padding:6px 0 6px 22px; border-left:3px solid var(--accent);
  font-size:18px; line-height:1.6; color:var(--fg); font-style:italic; }
.placeholder { border-radius:12px; border:1px solid var(--border); display:flex; align-items:center;
  justify-content:center; }
.placeholder.cover { height:250px; margin-bottom:34px;
  background:repeating-linear-gradient(45deg,var(--panel),var(--panel) 11px,var(--bg) 11px,var(--bg) 22px); }
.placeholder.fig { height:200px; margin-bottom:14px;
  background:repeating-linear-gradient(-45deg,var(--panel),var(--panel) 11px,var(--bg) 11px,var(--bg) 22px); }
.placeholder span { font-family:var(--mono); font-size:12px; color:var(--faint); background:var(--surface);
  padding:6px 12px; border-radius:6px; border:1px solid var(--border); }
.figcap { margin:0 0 22px; font-size:13px; color:var(--faint); text-align:center; font-family:var(--mono); }
.codeblock { border:1px solid var(--border); border-radius:10px; overflow:hidden; margin:0 0 24px; background:var(--panel); }
.code-head { display:flex; align-items:center; gap:7px; padding:9px 14px; border-bottom:1px solid var(--border); }
.code-head .d { width:11px; height:11px; border-radius:999px; }
.code-head .name { margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.codeblock pre { margin:0; padding:16px 18px; overflow:auto; font-family:var(--mono);
  font-size:13px; line-height:1.7; color:var(--fg); }
.kw { color:var(--accent); }
.str { color:var(--code-str); }
.tags-foot { display:flex; flex-wrap:wrap; gap:8px; padding-top:26px; margin-top:30px; border-top:1px solid var(--border); }
code.inline { font-family:var(--mono); font-size:13.5px; background:var(--panel); padding:1px 6px; border-radius:5px; }

/* seamless embedded standalone-HTML frame */
.embed-frame { width:100%; border:none; display:block; background:transparent; }
.article.wide { max-width:820px; }

/* ---------- responsive ---------- */
@media (max-width:860px) {
  .layout { grid-template-columns:1fr; }
  .sidebar { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center;
    justify-content:space-between; border-right:none; border-bottom:1px solid var(--border); }
  .brand { flex-direction:row; text-align:left; gap:12px; }
  .avatar { width:52px; height:52px; }
  .nav { flex-direction:row; margin-top:0; flex-wrap:wrap; }
  .sidebar-foot { margin-top:0; padding-top:0; border-top:none; width:100%; flex-basis:100%; }
  .main { padding:34px 24px; }
  .intro { grid-template-columns:1fr; gap:22px; margin-bottom:22px; }
  .intro-copy { order:1; margin-right:0; }
  .hero-globe { order:2; height:320px; width:100%; }
  .project-grid { grid-template-columns:1fr; }
  .article h1 { font-size:30px; }
  .sidebar-toggle { display:none; }
  .nav-ic { display:none; }
}