:root {
  --bg: #ffffff;
  --bg-soft: #f7f7f5;
  --bg-hover: #efefed;
  --text: #37352f;
  --text-soft: #6b6a66;
  --text-faint: #9b9a97;
  --border: #e9e9e7;
  --link: #2f6fb3;
  --ok: #448361;
  --radius: 8px;

  --tag-gray: #ebeced;    --tag-gray-t: #4b4a47;
  --tag-red: #fbe4e4;     --tag-red-t: #9f2f2d;
  --tag-blue: #dde7f5;    --tag-blue-t: #1f5a96;
  --tag-purple: #ebe3f5;  --tag-purple-t: #6940a5;
  --tag-orange: #fae6d6;  --tag-orange-t: #a3501d;
  --tag-green: #dfede5;   --tag-green-t: #2f6a49;
  --tag-yellow: #f8ecc8;  --tag-yellow-t: #8a6a12;
  --tag-pink: #f6e1ec;    --tag-pink-t: #a3376c;
  --tag-brown: #eee4dc;   --tag-brown-t: #7a5034;

  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191919; --bg-soft: #202020; --bg-hover: #2a2a2a;
    --text: #e6e6e4; --text-soft: #a7a6a2; --text-faint: #7d7c78;
    --border: #2f2f2f; --link: #6fa8e6; --ok: #6cbf8f;
    --tag-gray: #373737; --tag-gray-t: #d4d4d2;
    --tag-red: #4a2626; --tag-red-t: #f2a7a5;
    --tag-blue: #22374f; --tag-blue-t: #9cc4f0;
    --tag-purple: #3a2c4d; --tag-purple-t: #c9adf0;
    --tag-orange: #4a3020; --tag-orange-t: #f0b48c;
    --tag-green: #243d30; --tag-green-t: #9fd6b5;
    --tag-yellow: #463a1b; --tag-yellow-t: #ecd28a;
    --tag-pink: #472838; --tag-pink-t: #f0a9cb;
    --tag-brown: #3d2f25; --tag-brown-t: #d9b79c;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15.5px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

/* Layout */
.layout { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0; background: var(--bg-soft);
  border-right: 1px solid var(--border); padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { flex: 1; min-width: 0; max-width: 880px; margin: 0 auto; padding: 56px 48px 96px; outline: none; }

.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; padding: 4px 8px 14px; }
.brand-icon { font-size: 20px; }
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav a {
  display: flex; gap: 10px; align-items: center; padding: 5px 8px; border-radius: 6px;
  text-decoration: none; color: var(--text-soft); font-size: 14.5px;
}
.nav a:hover { background: var(--bg-hover); }
.nav a.active { background: var(--bg-hover); color: var(--text); font-weight: 500; }

.options { margin-top: 24px; padding: 0 8px; }
.options-title { font-size: 12px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.opt-group { margin-bottom: 10px; }
.opt-label { font-size: 12.5px; color: var(--text-soft); margin-bottom: 4px; }
.seg { display: flex; background: var(--bg-hover); border-radius: 6px; padding: 2px; }
.seg button {
  flex: 1; border: 0; background: transparent; padding: 3px 0; border-radius: 4px;
  font-size: 12.5px; color: var(--text-soft); cursor: pointer;
}
.seg button.on { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 500; }
.sidebar-foot { font-size: 12px; color: var(--text-faint); padding: 0 8px; margin-top: 24px; }

/* Page header */
.page-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; }
h1 { font-size: 34px; line-height: 1.2; margin: 0 0 6px; font-weight: 700; letter-spacing: -.01em; }
.subtitle { color: var(--text-soft); margin: 0 0 28px; }
h2 { font-size: 20px; margin: 36px 0 12px; font-weight: 600; }
.muted { color: var(--text-soft); }
.divider { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }

/* Tags */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; line-height: 1.5;
  padding: 0 7px; border-radius: 4px; background: var(--tag-gray); color: var(--tag-gray-t);
  white-space: nowrap; text-decoration: none;
}
.tag.c-red { background: var(--tag-red); color: var(--tag-red-t); }
.tag.c-blue { background: var(--tag-blue); color: var(--tag-blue-t); }
.tag.c-purple { background: var(--tag-purple); color: var(--tag-purple-t); }
.tag.c-orange { background: var(--tag-orange); color: var(--tag-orange-t); }
.tag.c-green { background: var(--tag-green); color: var(--tag-green-t); }
.tag.c-yellow { background: var(--tag-yellow); color: var(--tag-yellow-t); }
.tag.c-pink { background: var(--tag-pink); color: var(--tag-pink-t); }
.tag.c-brown { background: var(--tag-brown); color: var(--tag-brown-t); }

/* Story list */
.story { padding: 22px 0; border-bottom: 1px solid var(--border); }
.story:first-of-type { border-top: 1px solid var(--border); }
.story-num { color: var(--text-faint); font-size: 13px; font-variant-numeric: tabular-nums; }
.story h3 { font-size: 19px; line-height: 1.35; margin: 4px 0 8px; font-weight: 600; }
.story p { margin: 0 0 10px; }
.callout {
  display: flex; gap: 10px; background: var(--bg-soft); border-radius: var(--radius);
  padding: 10px 14px; margin: 12px 0; font-size: 14.5px;
}
.callout b { font-weight: 600; }
.source { font-size: 13.5px; color: var(--text-soft); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-top: 10px; }
.source a { color: var(--link); text-decoration: none; font-weight: 500; }
.source a:hover { text-decoration: underline; }
.check { color: var(--ok); }

/* Toolbar */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; align-items: center; }
.search {
  flex: 1 1 220px; min-width: 0; border: 1px solid var(--border); background: var(--bg);
  border-radius: 6px; padding: 6px 10px; outline: none;
}
.search:focus { border-color: var(--link); }
.select { border: 1px solid var(--border); background: var(--bg); border-radius: 6px; padding: 6px 8px; max-width: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.chip {
  border: 1px solid var(--border); background: var(--bg); border-radius: 999px;
  padding: 2px 10px; font-size: 13px; cursor: pointer; color: var(--text-soft);
}
.chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }

/* Cards grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  background: var(--bg); display: flex; flex-direction: column; gap: 8px;
  transition: box-shadow .15s, background .15s;
}
.card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.card h3 { font-size: 16px; line-height: 1.35; margin: 0; font-weight: 600; }
.card .meta { font-size: 13px; color: var(--text-soft); }
.card p { margin: 0; font-size: 14.5px; }
.card .spacer { flex: 1; }
.card .read { font-size: 14px; color: var(--link); text-decoration: none; font-weight: 500; }
.card .read:hover { text-decoration: underline; }

/* Case studies */
.cs-topic { margin-top: 30px; }
.cs-topic-head { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; margin-bottom: 10px; }
details.cs { border-bottom: 1px solid var(--border); }
details.cs > summary {
  list-style: none; cursor: pointer; padding: 10px 4px; display: flex; gap: 10px; align-items: baseline;
  border-radius: 6px;
}
details.cs > summary::-webkit-details-marker { display: none; }
details.cs > summary:hover { background: var(--bg-soft); }
.tri { color: var(--text-faint); transition: transform .15s; display: inline-block; width: 12px; font-size: 11px; }
details[open] > summary .tri { transform: rotate(90deg); }
.cs-name { font-weight: 500; }
.cs-meta { color: var(--text-faint); font-size: 13.5px; }
.cs-body { padding: 4px 4px 18px 26px; }
.cs-body ul { margin: 8px 0; padding-left: 18px; }
.cs-body li { margin: 6px 0; }
.cs-body li .src { font-size: 12.5px; color: var(--link); text-decoration: none; margin-left: 4px; white-space: nowrap; }
.pending { font-size: 13.5px; color: var(--text-faint); font-style: italic; }

/* Archive */
.day { padding: 14px 0; border-bottom: 1px solid var(--border); }
.day-head { display: flex; justify-content: space-between; gap: 10px; text-decoration: none; }
.day-head:hover .day-date { text-decoration: underline; }
.day-date { font-weight: 600; }
.day ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-soft); font-size: 14.5px; }
.day mark { background: var(--tag-yellow); color: inherit; border-radius: 2px; }

.empty { border: 1px dashed var(--border); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--text-soft); }
.daynav { display: flex; justify-content: space-between; margin-top: 28px; font-size: 14px; }
.daynav a { color: var(--link); text-decoration: none; }

/* Mobile */
@media (max-width: 820px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: sticky; top: 0; z-index: 10; width: 100%; height: auto; padding: 8px 12px;
    border-right: 0; border-bottom: 1px solid var(--border);
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  }
  .brand { padding: 4px; }
  .brand #brand-name { display: none; }
  .nav { flex-direction: row; overflow-x: auto; flex: 1; justify-content: space-between; }
  .nav a { padding: 5px 7px; font-size: 13.5px; gap: 5px; white-space: nowrap; }
  .nav a span { display: none; }
  .options, .sidebar-foot { display: none; }
  .main { padding: 28px 16px 72px; }
  h1 { font-size: 28px; }
  .mobile-options { display: block !important; }
}
.mobile-options { display: none; margin-bottom: 20px; }
.mobile-options .options { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; }
.mobile-options .options-title { grid-column: 1 / -1; margin: 0; }