:root {
  --tint-light:#38bdf8;
  --tint-dark:#38bdf8;
  --tint:var(--tint-light);
  --page:#e6e6e6;
  --surface:transparent;
  --text:#111;
  --muted:#727272;
  --line:#929292;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--page); }
body { margin:0; background:transparent; color:var(--text); font-family:"Manrope",sans-serif; }
.dot-field { display:none; }
.svg-defs { position:absolute; width:0; height:0; overflow:hidden; }
.site-header, main, footer { position:relative; z-index:1; }
.site-header, footer { width:min(1180px,calc(100vw - 48px)); margin:0 auto; }
.site-header {
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  border-bottom:1px solid var(--line);
}
.wordmark { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-size:1.15rem; font-weight:700; text-decoration:none; }
.nav-mark { display:block; width:42px; height:42px; color:var(--text); }
.rss-link { display:inline-flex; align-items:center; gap:8px; color:var(--text); font-size:1rem; text-decoration:none; }
.rss-mark { display:block; width:20px; height:20px; }
.rss-link:hover, .rss-link:focus-visible { color:var(--tint); }
main {
  width:min(1120px,calc(100vw - 40px));
  min-height:calc(100vh - 160px);
  margin:0 auto;
  background:var(--surface);
}
.blog-header {
  width:min(880px,100%);
  margin:0 auto;
  padding:94px 0 42px;
  border-bottom:1px solid var(--line);
}
.blog-header[hidden] { display:none!important; }
.blog-title-row { display:flex; width:100%; align-items:center; justify-content:center; gap:38px; }
.blog-mark, .nav-mark {
  overflow:visible;
  --back-angle:6deg;
  --back-x:0px;
  --back-y:0px;
  --middle-angle:2deg;
  --middle-x:0px;
  --middle-y:0px;
  --front-angle:0deg;
  --front-x:0px;
  --front-y:0px;
}
.blog-title-row:hover .blog-mark,
.wordmark:hover .nav-mark,
.wordmark:focus-visible .nav-mark {
  --back-angle:15deg;
  --back-x:9px;
  --back-y:-7px;
  --middle-angle:7deg;
  --middle-x:4px;
  --middle-y:-3px;
  --front-angle:-5deg;
  --front-x:-7px;
  --front-y:5px;
}
.notes-sheet-back,
.notes-sheet-middle,
.notes-sheet-front {
  transform-box:fill-box;
  transform-origin:center;
  transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.notes-sheet-back { transform:translate(var(--back-x),var(--back-y)) rotate(var(--back-angle)); }
.notes-sheet-middle { transform:translate(var(--middle-x),var(--middle-y)) rotate(var(--middle-angle)); }
.notes-sheet-front { transform:translate(var(--front-x),var(--front-y)) rotate(var(--front-angle)); }
.blog-mark { display:block; flex:0 0 140px; width:140px; height:auto; color:var(--text); }
.blog-mark-separator { fill:none; stroke:var(--page); stroke-width:36; }
.blog-mark-sheet { fill:var(--page); stroke:currentColor; stroke-width:12; }
.blog-mark-lines { stroke:currentColor; stroke-width:12; }
.blog-header h1 {
  min-width:0;
  margin:0;
  color:var(--text);
  font-size:clamp(3.1rem,7vw,4rem);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.045em;
}
.content-lede {
  max-width:640px;
  margin:28px auto 0;
  color:var(--text)!important;
  font-size:1.25rem;
  line-height:1.45;
  text-align:center;
  white-space:pre-line;
}
.blog-content { width:100%; }
.blog-index-shell { position:relative; }
.blog-index-layout { width:min(880px,100%); margin:0 auto; }
.blog-filter-sidebar {
  position:absolute;
  top:0;
  right:calc(50% + 468px);
  width:210px;
}
.blog-search-label {
  display:block;
  padding:18px 0;
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.blog-search-input {
  display:block;
  width:100%;
  margin-top:9px;
  padding:10px 11px;
  border:0;
  border-radius:0;
  outline:none;
  appearance:none;
  background:color-mix(in srgb,var(--text) 5%,transparent);
  color:var(--text);
  font:500 .86rem "Manrope",sans-serif;
}
.blog-search-input:focus { box-shadow:none; background:color-mix(in srgb,var(--text) 8%,transparent); }
.blog-browse-content { border:0; }
.blog-filter-title {
  margin:0;
  padding:16px 0 9px;
  color:var(--muted);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.blog-tag-list { padding-bottom:14px; }
.blog-tag {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border:0;
  background:transparent;
  color:var(--muted);
  font:500 .84rem "Manrope",sans-serif;
  text-align:left;
  cursor:pointer;
}
.blog-tag:hover, .blog-tag:focus-visible, .blog-tag.is-active { color:var(--text); }
.blog-tag.is-active { font-weight:700; }
.blog-tag-count { font-size:.72rem; font-variant-numeric:tabular-nums; }
.blog-filter-empty { margin:0; padding:4px 0 16px; color:var(--muted); font-size:.8rem; }
.blog-searching { display:flex; align-items:center; gap:9px; padding:18px 0; color:var(--muted); font-size:.8rem; }
.blog-search-spinner { width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--tint); border-radius:50%; animation:blog-search-spin .72s linear infinite; }
@keyframes blog-search-spin { to { transform:rotate(360deg); } }
.blog-filter-sidebar .blog-list { border:0; }
.blog-filter-sidebar .blog-card { padding:16px 0; border-bottom:0; }
.blog-filter-sidebar .blog-card-image { display:none; }
.blog-filter-sidebar .blog-card h2 { font-size:1rem; }
.blog-filter-sidebar .blog-card-meta { margin:5px 0 7px!important; font-size:.72rem!important; }
.blog-filter-sidebar .blog-card p:not(.blog-card-meta) { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-size:.8rem; }
.blog-filter-sidebar .blog-card.has-image .blog-card-link { display:block; }
.blog-list { width:100%; }
.blog-card { padding:46px 0; border-bottom:1px solid var(--line); }
.blog-card-link { display:block; color:inherit; text-decoration:none; }
.blog-card.has-image .blog-card-link {
  display:grid;
  grid-template-columns:200px minmax(0,1fr);
  align-items:center;
  gap:26px;
}
.blog-card-image {
  display:block;
  width:200px;
  height:146px;
  border-radius:16px;
  background:#d4d4d4;
  object-fit:cover;
}
.blog-card-content { min-width:0; }
.blog-card h2, .blog-post h2 {
  margin:0;
  color:var(--text);
  font-size:clamp(1.75rem,4vw,2.15rem);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.035em;
}
.blog-card-link:hover h2, .blog-card-link:focus-visible h2 { color:var(--tint); }
.blog-card-meta, .blog-post-meta {
  margin:7px 0 11px!important;
  color:var(--muted)!important;
  font-size:.88rem!important;
  line-height:1.3!important;
}
.blog-card-author-line, .blog-card-date-line { display:inline; }
.blog-card-date-line::before { content:" · "; }
.blog-card p:not(.blog-card-meta) {
  margin:0;
  color:var(--text);
  font-size:1rem;
  line-height:1.35;
}
.blog-read-more { display:none; }
.blog-date, .blog-time { color:inherit; font:inherit; }
.blog-empty-state, .blog-status { margin:0; padding:46px 0; color:var(--muted); }
.blog-error { padding:18px 20px; border:1px solid #b86d50; background:#fff4ef; color:#6c321e!important; }
.blog-post-layout { width:min(880px,100%); margin:0 auto; padding:62px 0 90px; }
.blog-back {
  display:inline-block;
  margin-bottom:44px;
  color:var(--muted);
  font-size:.9rem;
  font-weight:600;
  text-decoration:none;
}
.blog-back:hover, .blog-back:focus-visible { color:var(--tint); }
.blog-post header { padding-bottom:30px; border-bottom:1px solid var(--line); }
.blog-post-image {
  display:block;
  width:100%;
  max-height:520px;
  margin:0 0 34px;
  border-radius:16px;
  object-fit:cover;
}
.blog-post h2 { font-size:clamp(2.5rem,7vw,4rem); }
.blog-author { color:inherit; text-underline-offset:3px; }
.blog-body { padding-top:34px; }
.blog-body > :first-child { margin-top:0; }
.blog-body p, .blog-body blockquote, .blog-body li { max-width:none; font:400 1.08rem/1.75 Georgia,serif; }
.blog-body h3, .blog-body h4, .blog-body h5, .blog-body h6 { margin:42px 0 12px; letter-spacing:-.025em; }
.blog-body h3 { font-size:1.6rem; }
.blog-body h4 { font-size:1.35rem; }
.blog-body ul { margin:22px 0; padding-left:26px; }
.blog-body li { padding-left:5px; }
.blog-body blockquote { margin:34px 0; padding:4px 0 4px 24px; border-left:4px solid var(--tint); color:var(--muted); font-style:italic; }
.blog-body a { color:inherit; text-underline-offset:3px; }
.blog-body code { padding:.12em .35em; border-radius:4px; background:#e8e8e8; font:500 .9em monospace; }
.blog-body pre { max-width:100%; margin:28px 0; padding:18px; overflow:auto; background:#161616; color:#f2f2f2; }
.blog-body pre code { padding:0; background:none; color:inherit; line-height:1.6; }
.blog-body hr { margin:42px 0; border:0; border-top:1px solid var(--line); }
footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:26px 0 34px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:.76rem;
  font-weight:500;
}
.theme-toggle { display:flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { color:var(--text); }
.theme-icon { display:block; width:18px; height:18px; border:1px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); transform:rotate(-20deg); }
.theme-label { min-width:62px; text-align:left; }
html[data-theme="dark"] {
  --tint:var(--tint-dark);
  --page:#000;
  --surface:#000;
  --text:#f7f7f7;
  --muted:#858585;
  --line:#888;
  color-scheme:dark;
}
html[data-theme="dark"] .blog-card-image { background:#d4d4d4; }
html[data-theme="dark"] .blog-body code { background:#242424; }
html[data-theme="dark"] .blog-body pre { background:#111; }
html[data-theme="dark"] .blog-error { border-color:#754a39; background:#211712; color:#efbca6!important; }
@media (max-width:1355px) {
  .blog-index-shell { display:block; width:min(880px,100%); margin:0 auto; }
  .blog-filter-sidebar {
    position:static;
    width:100%;
    margin:34px 0 0;
  }
  .blog-index-layout { margin-top:12px; }
  .blog-tag-list { display:flex; flex-wrap:wrap; gap:0 22px; }
  .blog-tag { width:auto; gap:8px; }
  .blog-filter-sidebar .blog-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
}
@media (max-width:700px) {
  .site-header, footer { width:min(100% - 32px,1180px); }
  .site-header { min-height:64px; }
  main { width:min(100% - 32px,1120px); }
  .blog-header { padding:68px 0 34px; }
  .blog-title-row { gap:20px; }
  .blog-mark { flex-basis:82px; width:82px; }
  .blog-header h1 { font-size:clamp(2.65rem,13vw,3.5rem); }
  .content-lede { font-size:1.05rem; }
  .blog-card { padding:34px 0; }
  .blog-card.has-image .blog-card-link { grid-template-columns:112px minmax(0,1fr); gap:18px; }
  .blog-card-image { width:112px; height:112px; border-radius:12px; }
  .blog-card h2 { font-size:1.55rem; }
  .blog-filter-sidebar .blog-list { display:block; }
}
@media (max-width:430px) {
  .blog-card.has-image .blog-card-link { display:block; }
  .blog-card-image { width:100%; height:190px; margin-bottom:22px; }
  footer { align-items:flex-start; gap:18px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before { animation:none!important; transition:none!important; }
}