/* Blog design system ported from the Astro reference pages. */
:root {
  --color-brand-50:#f6f4fe;
  --color-brand-100:#ece8fd;
  --color-brand-200:#dcd4fb;
  --color-brand-300:#c3b4f8;
  --color-brand-400:#a48af2;
  --color-brand-500:#8b5cf6;
  --color-brand-600:#7635eb;
  --color-brand-700:#6322d4;
  --color-brand-800:#531eb0;
  --color-ink-100:#eeeef1;
  --color-ink-200:#e1e1e6;
  --color-ink-300:#c5c5cd;
  --color-ink-500:#6e6e7b;
  --color-ink-600:#54545f;
  --color-ink-700:#3a3a44;
  --color-ink-800:#26262e;
  --color-ink-900:#16161c;
  --color-ink-950:#0c0c10;
  --color-paper:#f2f3f6;
  --color-paper-200:#e7e9ef;
  --color-surface:#ffffff;
  --font-display:'IBM Plex Sans','IBM Plex Sans JP','Hiragino Sans',system-ui,sans-serif;
  --font-title:'Libre Caslon Text','IBM Plex Sans JP','Hiragino Sans',Georgia,serif;
  --font-sans:'IBM Plex Sans','IBM Plex Sans JP','Hiragino Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --radius-button:6px;
  --radius-card:10px;
  --radius-pill:999px;
  --spacing-section:7rem;
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
}

* { box-sizing:border-box; }
body {
  margin:0;
  background:var(--color-paper);
  color:var(--color-ink-900);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a { text-decoration:none; }
img { max-width:100%; height:auto; }
.article-hero picture img, figure.mt-8 > picture > img { width:100%; height:100%; object-fit:cover; display:block; }
/* Button font reset must live in @layer base (like Tailwind preflight) so that
   layered utilities (.text-sm, .font-medium, …) still win. Unlayered, this rule
   beat every layered utility and forced nav buttons to the body default
   (16px/400) instead of the intended 14px/500. */
@layer base { button { font:inherit; } }
:focus-visible { outline:3px solid var(--color-brand-500); outline-offset:2px; border-radius:4px; }

.blog-container { width:100%; max-width:80rem; margin-inline:auto; padding-inline:1.25rem; }
@media (min-width:768px) { .blog-container { padding-inline:2rem; } }

.blog-header {
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid rgba(22,22,28,.08);
  background:rgba(242,243,246,.85);
  backdrop-filter:blur(12px);
}
.blog-header__inner { display:flex; height:4rem; align-items:center; justify-content:space-between; gap:1rem; }
.blog-logo { display:inline-flex; flex:none; color:var(--color-ink-900); }
.blog-logo svg { display:block; height:1.25rem; width:auto; }
.blog-logo .blog-logo__mark { fill:var(--color-brand-600); }

.blog-nav { position:relative; display:none; flex:none; align-items:center; gap:.25rem; }
@media (min-width:768px) { .blog-nav { display:flex; } }
.blog-nav-group { position:relative; flex:none; }
.blog-nav-trigger {
  display:inline-flex; align-items:center; gap:.25rem;
  cursor:pointer; white-space:nowrap; border:0; border-radius:.5rem;
  background:transparent; padding:.5rem .75rem;
  color:var(--color-ink-700); font-size:.875rem; font-weight:500;
}
.blog-nav-trigger:hover, .blog-nav-group:focus-within > .blog-nav-trigger { color:var(--color-ink-900); }
.blog-nav-chevron { width:.75rem; height:.75rem; opacity:.5; transform:rotate(90deg); transition:transform 150ms var(--ease-out-soft),opacity 150ms var(--ease-out-soft),color 150ms var(--ease-out-soft); }
.blog-nav-group:hover .blog-nav-chevron, .blog-nav-group:focus-within .blog-nav-chevron { transform:rotate(90deg) translateY(2px); opacity:1; color:var(--color-ink-900); }
.blog-nav-panel {
  visibility:hidden; opacity:0; position:absolute; top:100%; left:50%; z-index:50;
  transform:translate(-50%,.25rem); padding-top:.75rem; transition:all 150ms var(--ease-out-soft);
}
.blog-nav-group:hover .blog-nav-panel,
.blog-nav-group:focus-within .blog-nav-panel { visibility:visible; opacity:1; transform:translate(-50%,0); }
.blog-nav-panel--right { left:auto; right:0; transform:translate(0,.25rem); }
.blog-nav-group:hover .blog-nav-panel--right,
.blog-nav-group:focus-within .blog-nav-panel--right { transform:translate(0,0); }
.blog-nav-card {
  width:min(54rem,calc(100vw - 2rem)); overflow:hidden; border:1px solid rgba(22,22,28,.08);
  border-radius:1rem; background:var(--color-surface); padding:.75rem;
  box-shadow:0 25px 50px -12px rgba(12,12,16,.15);
}
.blog-nav-card--compact { width:15rem; }
.blog-nav-card--support { width:22rem; }
.blog-nav-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; }
.blog-nav-column-label {
  display:flex; align-items:center; gap:.5rem; padding:0 .75rem .5rem;
  font-family:var(--font-display); font-size:.75rem; font-weight:600; text-transform:uppercase; color:var(--color-ink-500);
}
.blog-nav-list { list-style:none; margin:0; padding:.25rem 0 0; border-top:1px solid rgba(22,22,28,.08); }
.blog-nav-link { display:block; border-radius:.75rem; padding:.75rem; transition:background .15s ease; }
.blog-nav-link:hover { background:var(--color-paper-200); }
.blog-nav-label { display:block; color:var(--color-ink-900); font-size:.875rem; font-weight:600; }
.blog-nav-desc { display:block; margin-top:.125rem; color:var(--color-ink-500); font-size:.75rem; line-height:1.35; }
.blog-nav-split { display:flex; width:min(48rem,calc(100vw - 2rem)); gap:.75rem; border:1px solid rgba(22,22,28,.08); border-radius:1rem; background:var(--color-surface); padding:.75rem; box-shadow:0 25px 50px -12px rgba(12,12,16,.15); }
.blog-nav-grid { display:grid; flex:1; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.25rem; list-style:none; margin:0; padding:0; }
.blog-nav-tile { display:flex; height:100%; align-items:flex-start; gap:.75rem; border-radius:.75rem; padding:.75rem; transition:background .15s ease; }
.blog-nav-tile:hover { background:var(--color-paper-200); }
.blog-nav-rail {
  position:relative; display:flex; width:13rem; flex:none; overflow:hidden; border-radius:.75rem;
  padding:1.25rem; color:#fff; background:linear-gradient(155deg,var(--color-brand-500),var(--color-brand-800));
  transition:opacity .15s ease;
}
.blog-nav-rail:hover { opacity:.9; }
.blog-nav-rail-kicker { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
.blog-nav-rail-title { display:block; margin-top:.5rem; font-family:var(--font-display); font-size:1.125rem; font-weight:700; line-height:1.25; }
.blog-nav-rail-body { display:block; margin-top:.5rem; color:rgba(255,255,255,.75); font-size:.75rem; line-height:1.35; }
.blog-nav-rail-cta { display:inline-flex; margin-top:1.25rem; align-items:center; gap:.25rem; font-size:.875rem; font-weight:600; }

.blog-actions { display:flex; align-items:center; gap:.5rem; }
.blog-lang { position:relative; display:none; }
@media (min-width:640px) { .blog-lang { display:block; } }
.blog-lang-trigger {
  display:inline-flex; align-items:center; gap:.375rem; cursor:pointer; border:0; border-radius:.5rem;
  background:transparent; padding:.5rem .625rem; color:var(--color-ink-700); font-size:.875rem; font-weight:500;
}
.blog-lang-trigger:hover { color:var(--color-ink-900); }
.blog-lang-panel {
  visibility:hidden; opacity:0; position:absolute; top:100%; right:0; z-index:50; width:80px;
  transform:translateY(.25rem); padding-top:.5rem; transition:all 150ms var(--ease-out-soft);
}
.blog-lang:hover .blog-lang-panel, .blog-lang:focus-within .blog-lang-panel { visibility:visible; opacity:1; transform:translateY(0); }
.blog-lang-list { list-style:none; margin:0; border:1px solid rgba(22,22,28,.08); border-radius:.5rem; background:var(--color-surface); padding:.125rem; box-shadow:0 20px 25px -5px rgba(12,12,16,.12); }
.blog-lang-active, .blog-lang-link { display:block; border-radius:.375rem; padding:.375rem .625rem; font-size:.875rem; font-weight:600; }
.blog-lang-active { background:var(--color-paper); color:var(--color-ink-900); box-shadow:0 1px 2px rgba(12,12,16,.08); }
.blog-lang-link { color:var(--color-ink-700); }
.blog-lang-link:hover { background:var(--color-paper-200); color:var(--color-ink-900); }
.blog-cta {
  display:none; flex:none; align-items:center; justify-content:center; white-space:nowrap; border:1px solid var(--color-brand-700);
  border-radius:var(--radius-button); padding:.625rem 1.25rem; color:#fff; font-size:.875rem; font-weight:600;
  background:linear-gradient(180deg,var(--color-brand-500),var(--color-brand-600));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 1px 1px rgba(12,12,16,.2),0 4px 12px -2px rgba(118,53,235,.35);
}
.blog-cta:hover { background:linear-gradient(180deg,var(--color-brand-400),var(--color-brand-500)); }
.blog-cta:active { filter:brightness(.97); }
@media (min-width:768px) { .blog-cta { display:inline-flex; } }
.blog-menu-button {
  display:inline-flex; align-items:center; justify-content:center; width:2.5rem; height:2.5rem; border:0; border-radius:.5rem;
  background:transparent; color:var(--color-ink-700); cursor:pointer;
}
.blog-menu-button:hover { color:var(--color-ink-900); background:rgba(22,22,28,.05); }
@media (min-width:768px) { .blog-menu-button { display:none; } }
.blog-menu-icon { width:1.5rem; height:1.5rem; }
.blog-menu-close { display:none; }
.blog-menu-open .blog-menu-burger { display:none; }
.blog-menu-open .blog-menu-close { display:block; }

.blog-mobile {
  position:fixed; inset:4rem 0 auto 0; z-index:35; display:none; max-height:calc(100vh - 4rem); overflow-y:auto;
  border-bottom:1px solid rgba(22,22,28,.08); background:var(--color-paper); padding:1rem 1.25rem 2rem;
}
.blog-menu-open .blog-mobile { display:block; }
.blog-mobile-section + .blog-mobile-section { margin-top:1rem; border-top:1px solid rgba(22,22,28,.08); padding-top:1rem; }
.blog-mobile-heading { margin:0 0 .5rem; color:var(--color-ink-500); font-size:.75rem; font-weight:700; text-transform:uppercase; }
.blog-mobile-list { list-style:none; margin:0; padding:0; }
.blog-mobile-link { display:block; border-radius:.5rem; padding:.625rem .5rem; color:var(--color-ink-700); font-size:1rem; font-weight:600; }
.blog-mobile-link:hover { background:var(--color-paper-200); color:var(--color-ink-900); }
.blog-mobile-desc { display:block; margin-top:.125rem; color:var(--color-ink-500); font-size:.75rem; font-weight:400; }

.blog-hero { padding-top:4rem; padding-bottom:2rem; }
@media (min-width:768px) { .blog-hero { padding-top:5rem; } }
.blog-hero__title {
  margin:0; color:var(--color-ink-900); font-family:var(--font-title); font-size:clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  font-weight:700; letter-spacing:-.015em; line-height:1.08;
}
.blog-hero__subtitle { margin:1rem 0 0; max-width:42rem; color:var(--color-ink-600); font-size:clamp(1.125rem, 1rem + .6vw, 1.4rem); line-height:1.5; }

.blog-listing { padding-bottom:var(--spacing-section); }
.blog-categories { border-bottom:1px solid rgba(22,22,28,.08); }
.blog-cat-list { display:flex; gap:.5rem; overflow-x:auto; list-style:none; margin:0; padding:0 0 1rem; scroll-snap-type:x mandatory; }
.blog-cat-list li { flex:none; scroll-snap-align:start; }
.blog-cat-pill {
  display:inline-flex; align-items:center; border-radius:var(--radius-pill); padding:.5rem 1rem;
  color:var(--color-ink-600); background:var(--color-surface); box-shadow:inset 0 0 0 1px rgba(22,22,28,.1);
  font-size:.875rem; font-weight:500; transition:color .15s ease,box-shadow .15s ease,background .15s ease;
}
.blog-cat-pill:hover { color:var(--color-ink-900); box-shadow:inset 0 0 0 1px rgba(22,22,28,.2); }
.blog-cat-pill--active { color:#fff; background:#f97316; box-shadow:none; }
.blog-cat-pill--active:hover { color:#fff; background:#ea6d0a; box-shadow:none; }

.blog-post-grid { display:grid; grid-template-columns:repeat(1,minmax(0,1fr)); gap:1.5rem; list-style:none; margin:2rem 0 0; padding:0; }
@media (min-width:640px) { .blog-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px) { .blog-post-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
.blog-post-grid > li { display:flex; }
.blog-card {
  position:relative; display:flex; flex:1; flex-direction:column; overflow:hidden;
  border-radius:var(--radius-card); background:var(--color-surface);
  box-shadow:inset 0 0 0 1px rgba(22,22,28,.08); transition:box-shadow .2s ease;
}
.blog-card:hover { box-shadow:0 18px 40px -20px rgba(12,12,16,.35); }
.blog-card a { color:inherit; }
.blog-card__image-link { display:block; overflow:hidden; }
.blog-card__image { aspect-ratio:16/10; width:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .blog-card__image { transform:scale(1.04); }
.blog-card__body { display:flex; flex:1; flex-direction:column; padding:1.25rem; }
.blog-card__category, .blog-card a.blog-card__category {
  position:relative; z-index:1; width:max-content; border-radius:var(--radius-pill); background:var(--color-brand-50);
  padding:.25rem .625rem; color:var(--color-brand-700); font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.025em; text-transform:uppercase; box-shadow:inset 0 0 0 1px rgba(139,92,246,.15);
}
.blog-card__category:hover, .blog-card a.blog-card__category:hover { background:var(--color-brand-100); }
.blog-card__title { margin:.75rem 0 0; font-family:var(--font-title); font-size:1.125rem; font-weight:700; line-height:1.35; color:var(--color-ink-900); }
.blog-card__title a { transition:color .15s ease; }
.blog-card__title a::after { position:absolute; inset:0; content:""; }
.blog-card__title a:hover, .blog-card__title a:focus-visible { color:var(--color-brand-700); }
.blog-card__excerpt {
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
  margin:.5rem 0 0; color:var(--color-ink-600); font-size:.875rem; line-height:1.625;
}
.blog-card__meta { display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:center; margin-top:1rem; padding-top:.25rem; color:var(--color-ink-500); font-size:.75rem; }
.blog-card__author { color:var(--color-ink-700); font-weight:600; }
.blog-card__dot { color:var(--color-ink-300); }
.blog-card--featured { grid-column:1/-1; }
@media (min-width:1024px) {
  .blog-card--featured { flex-direction:row; }
  .blog-card--featured .blog-card__image-link { width:52%; flex:none; }
  .blog-card--featured .blog-card__image { height:100%; }
  .blog-card--featured .blog-card__body { width:48%; justify-content:center; padding:2rem; }
  .blog-card--featured .blog-card__title { font-size:2rem; line-height:1.15; }
}
.blog-empty { margin-top:4rem; border:1px dashed rgba(22,22,28,.15); border-radius:var(--radius-card); background:rgba(231,233,239,.4); padding:5rem 1rem; text-align:center; color:var(--color-ink-500); font-size:clamp(1.125rem, 1rem + .6vw, 1.4rem); }

.blog-pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:3rem; }
.blog-pagination__pages { display:flex; align-items:center; gap:.375rem; list-style:none; margin:0; padding:0; }
.blog-page-btn {
  display:inline-flex; min-width:2.25rem; min-height:2.25rem; align-items:center; justify-content:center;
  border-radius:.5rem; padding:.5rem .75rem; color:var(--color-ink-600); background:transparent;
  box-shadow:inset 0 0 0 1px rgba(22,22,28,.1); font-size:.875rem; font-weight:500; transition:color .15s ease,box-shadow .15s ease,background .15s ease;
}
.blog-page-btn:hover { color:var(--color-ink-900); box-shadow:inset 0 0 0 1px rgba(22,22,28,.2); }
.blog-page-btn--active, .blog-page-btn--active:hover { color:#fff; background:#f97316; box-shadow:none; }
.blog-page-btn--disabled, .blog-page-btn--disabled:hover { color:var(--color-ink-300); background:transparent; box-shadow:inset 0 0 0 1px rgba(22,22,28,.05); cursor:default; }

.blog-footer {
  margin-top:var(--spacing-section); background:var(--color-ink-950); color:var(--color-ink-100);
}
.blog-footer__inner { padding-top:4rem; padding-bottom:4rem; }
.blog-footer__grid { display:grid; gap:2.5rem; }
@media (min-width:768px) { .blog-footer__grid { grid-template-columns:1.4fr repeat(3,1fr); } }
.blog-footer__logo { color:#fff; }
.blog-footer__logo svg { display:block; height:1.25rem; width:auto; }
.blog-footer__logo .blog-logo__mark { fill:var(--color-brand-400); }
.blog-footer__tagline { max-width:20rem; margin:1rem 0 0; color:var(--color-ink-100); font-family:var(--font-display); font-size:1.125rem; font-weight:700; line-height:1.25; }
.blog-footer__social { display:flex; gap:1.25rem; align-items:center; list-style:none; margin:1.5rem 0 0; padding:0; }
.blog-footer__social a { display:block; color:#fff; opacity:.6; transition:opacity .2s ease; }
.blog-footer__social a:hover { opacity:.95; }
.blog-footer__social svg { display:block; width:1.125rem; height:1.125rem; fill:currentColor; }
.blog-footer__heading { margin:0 0 1rem; color:#8f74e8; font-family:var(--font-display); font-size:.875rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.blog-footer__list { list-style:none; margin:0; padding:0; }
.blog-footer__list > li + li { margin-top:.625rem; }
.blog-footer__list a { color:#f4f4f6; font-size:1rem; transition:color .15s ease; }
.blog-footer__list a:hover { color:#fff; }
.blog-footer__bottom { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-top:3.5rem; border-top:1px solid rgba(238,238,241,.1); padding-top:2rem; color:var(--color-ink-500); font-size:.875rem; }
@media (min-width:640px) { .blog-footer__bottom { flex-direction:row; align-items:center; } }
.blog-footer__legal { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; }
.blog-footer__legal a, .blog-consent-button { color:var(--color-ink-500); transition:color .15s ease; }
.blog-footer__legal a:hover, .blog-consent-button:hover { color:#fff; }
.blog-consent-button { border:0; background:transparent; padding:0; cursor:pointer; text-align:left; font-size:.875rem; }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
}

/* ── consent banner ────────────────────────────────────────────────────── */
#tc-consent-banner {
  display:none; position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999;
  width:min(420px,calc(100vw - 2rem));
  background:#fff; border-radius:12px;
  box-shadow:0 4px 32px rgba(12,12,16,.16),0 0 0 1px rgba(22,22,28,.07);
  padding:1.5rem;
}
#tc-consent-banner h3 { margin:0 0 .5rem; font-size:1rem; font-weight:700; color:var(--color-ink-900); font-family:var(--font-display); }
#tc-consent-banner p  { margin:0 0 1.25rem; font-size:.875rem; color:var(--color-ink-600); line-height:1.55; }
.tc-consent-buttons { display:flex; gap:.5rem; flex-wrap:wrap; }
.tc-consent-btn {
  flex:1; min-width:0; border:1px solid rgba(22,22,28,.15); border-radius:6px;
  background:#fff; padding:.5rem .75rem; font-size:.875rem; font-weight:500;
  color:var(--color-ink-700); cursor:pointer; white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.tc-consent-btn:hover { background:rgba(22,22,28,.04); border-color:rgba(22,22,28,.25); }