/* iXam main.css — unified (2025-08-23, tool-surface elevated) */

/* ---------- Design Tokens ---------- */
:root{
  color-scheme: light;
  --font-sans: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --surface-1:#f3f6fb;
  --surface-2:#ffffff;
  --surface-3:#e8eef7;
  --bg: var(--surface-1);
  --text:#0f1a2d;
  --muted:#5c6c80;
  --border:#d8e1ed;
  --border-strong:#c2cedd;
  --card: var(--surface-2);

  --accent:#16a34a;
  --accent-strong:#0f7b38;
  --accent-hover:#15803d;
  --accent-soft:#e6f5ed;
  --ring:#22c55e;

  --link: var(--accent);
  --link-hover: var(--accent-hover);
  --link-visited:#0f766e;

  --radius: 14px;
  --radius-lg: 20px;

  --shadow-soft: 0 10px 28px rgba(12,29,54,.08);
  --shadow-elevated: 0 18px 48px rgba(12,29,54,.12);
  --shadow: var(--shadow-soft);
  --shadow-hover: 0 22px 56px rgba(12,29,54,.14);

  --tool-shadow: 0 16px 42px rgba(12,29,54,.12);
  --tool-border: color-mix(in srgb, var(--accent) 12%, var(--border-strong));

  --tool-surface-bg: linear-gradient(140deg, color-mix(in srgb, var(--surface-2) 96%, transparent) 0%, color-mix(in srgb, var(--surface-3) 82%, transparent) 100%);
  --tool-surface-inner-border: color-mix(in srgb, var(--accent) 16%, var(--border-strong));
  --tool-grid-gap: clamp(18px, 2.4vw, 28px);
  --tool-pane-bg: color-mix(in srgb, var(--surface-2) 94%, var(--surface-3) 6%);
  --tool-pane-border: color-mix(in srgb, var(--border-strong) 70%, transparent);
  --tool-pane-alt-bg: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  --tool-toolbar-bg: color-mix(in srgb, var(--surface-2) 94%, transparent);
  --tool-toolbar-border: color-mix(in srgb, var(--accent) 16%, var(--border-strong));

  --card-padding-block: clamp(18px, 2.4vw, 26px);
  --card-padding-inline: clamp(18px, 2.1vw, 24px);
  --card-gap: clamp(16px, 1.9vw, 24px);

  --page-pad: clamp(14px, 5vw, 56px);
  --container-max: min(176ch, calc(100vw - (var(--page-pad) * 2)));
  --content-max: min(140ch, calc(100vw - (var(--page-pad) * 2)));
  --section-gap: clamp(28px, 4vw, 48px);
  --section-gap-tight: clamp(20px, 3.4vw, 32px);
  --section-gap-wide: clamp(36px, 5vw, 60px);
  --header-h: 60px;
  --col-gap: 18px;
  --sidebar-w: clamp(24ch, 28vw, 32ch);

  --article-measure: min(78ch, 100%);
  --article-line-height: 1.76;

  --token-blockquote-bg: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  --token-blockquote-border: color-mix(in srgb, var(--accent) 36%, var(--border));
  --token-code-bg: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  --token-code-border: color-mix(in srgb, var(--accent) 34%, var(--border));
  --token-pre-bg: color-mix(in srgb, #0f172a 16%, var(--surface-2));
  --token-pre-text: color-mix(in srgb, #f8fafc 92%, #0f172a 8%);
  --token-pre-border: color-mix(in srgb, #0f172a 24%, var(--border-strong));
  --token-table-header-bg: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  --token-table-border: color-mix(in srgb, var(--accent) 20%, var(--border));

  --footer-bg: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 94%, var(--accent) 6%) 0%, color-mix(in srgb, var(--surface-3) 88%, var(--accent) 12%) 100%);
  --footer-border: color-mix(in srgb, var(--accent) 14%, var(--border-strong));
  --footer-text: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
  --footer-muted: color-mix(in srgb, var(--muted) 72%, transparent);
  --footer-link: color-mix(in srgb, var(--accent) 80%, #166534 20%);
  --footer-link-hover: var(--accent-hover);
  --footer-link-visited: color-mix(in srgb, var(--footer-link) 78%, var(--link-visited) 22%);

  --status-icon-gap: .45em;
  --status-padding-block: .55em;
  --status-padding-inline: .85em;
  --status-info-fg: color-mix(in srgb, var(--text) 86%, var(--muted) 14%);
  --status-info-bg: color-mix(in srgb, var(--accent) 8%, var(--surface-3));
  --status-info-border: color-mix(in srgb, var(--accent) 26%, var(--border));
  --status-success-fg: var(--accent-strong);
  --status-success-bg: color-mix(in srgb, var(--accent) 18%, var(--surface-3));
  --status-success-border: color-mix(in srgb, var(--accent) 42%, var(--border));
  --status-danger-fg: #b91c1c;
  --status-danger-bg: color-mix(in srgb, #ef4444 16%, var(--surface-3));
  --status-danger-border: color-mix(in srgb, #ef4444 32%, var(--border-strong));

  --heading-band-bg: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  --heading-band-soft: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  --heading-band-highlight: color-mix(in srgb, var(--accent) 40%, var(--surface-2));
  --heading-band-outline: color-mix(in srgb, var(--accent) 24%, transparent);
  --heading-band-shadow: 0 18px 38px rgba(22,163,74,.18);
  --heading-band-text: color-mix(in srgb, var(--text) 92%, var(--muted) 8%);
  --fs-h1: clamp(2rem, 2.6vw + 1rem, 2.8rem);
  --fs-h2: clamp(1.45rem, 1.4vw + .9rem, 1.95rem);
  --fs-h3: clamp(1.18rem, 1vw + .72rem, 1.38rem);
  --fs-p: 1rem;

  --field-bg: var(--card);
  --field-border: var(--border);
  --field-text: var(--text);
  --field-placeholder: color-mix(in srgb, var(--muted) 74%, transparent);
}


.theme-dark,
[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#030a15;
  --surface-2:#091222;
  --surface-3:#111d30;
  --bg: var(--surface-1);
  --text:#e5ebf6;
  --muted:#96a3b7;
  --border:#182335;
  --border-strong:#23344b;
  --card: var(--surface-2);

  --accent:#22c55e;
  --accent-strong:#3ce07c;
  --accent-hover:#34d399;
  --accent-soft:#0d2918;
  --ring:#34d399;

  --link: var(--accent);
  --link-hover: var(--accent-hover);
  --link-visited:#2dd4bf;

  --shadow-soft: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--border));
  --shadow-elevated: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  --shadow: var(--shadow-soft);
  --shadow-hover: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, var(--border-strong));

  --tool-shadow: var(--shadow-elevated);
  --tool-border: color-mix(in srgb, var(--accent) 26%, var(--border-strong));

  --tool-surface-bg: linear-gradient(140deg, color-mix(in srgb, var(--surface-2) 78%, transparent) 0%, color-mix(in srgb, var(--surface-1) 22%, transparent) 100%);
  --tool-surface-inner-border: color-mix(in srgb, var(--accent) 26%, var(--border-strong));
  --tool-grid-gap: clamp(18px, 2.4vw, 28px);
  --tool-pane-bg: color-mix(in srgb, var(--surface-2) 82%, var(--surface-1) 18%);
  --tool-pane-border: color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  --tool-pane-alt-bg: color-mix(in srgb, var(--accent) 30%, var(--surface-2));
  --tool-toolbar-bg: color-mix(in srgb, var(--surface-2) 74%, var(--surface-1) 26%);
  --tool-toolbar-border: color-mix(in srgb, var(--accent) 30%, var(--border-strong));

  --field-bg: color-mix(in srgb, var(--surface-2) 86%, #0b1726);
  --field-border: color-mix(in srgb, var(--accent) 26%, var(--border-strong));
  --field-text: color-mix(in srgb, #ffffff 94%, var(--text) 6%);
  --field-placeholder: color-mix(in srgb, var(--muted) 56%, var(--field-text) 24%);

  --article-measure: min(78ch, 100%);
  --article-line-height: 1.82;

  --token-blockquote-bg: color-mix(in srgb, var(--accent) 24%, var(--surface-2));
  --token-blockquote-border: color-mix(in srgb, var(--accent) 52%, transparent);
  --token-code-bg: color-mix(in srgb, var(--surface-3) 82%, var(--accent) 18%);
  --token-code-border: color-mix(in srgb, var(--accent) 46%, var(--border-strong));
  --token-pre-bg: color-mix(in srgb, #010817 82%, var(--surface-2) 18%);
  --token-pre-text: color-mix(in srgb, #f8fafc 94%, var(--text) 6%);
  --token-pre-border: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
  --token-table-header-bg: color-mix(in srgb, var(--accent) 24%, var(--surface-2));
  --token-table-border: color-mix(in srgb, var(--accent) 38%, var(--border-strong));

  --footer-bg: linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 72%, var(--accent) 28%) 0%, color-mix(in srgb, var(--surface-3) 68%, var(--accent) 32%) 100%);
  --footer-border: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
  --footer-text: color-mix(in srgb, var(--text) 82%, var(--muted) 18%);
  --footer-muted: color-mix(in srgb, var(--muted) 70%, transparent);
  --footer-link: color-mix(in srgb, var(--accent) 88%, var(--text) 12%);
  --footer-link-hover: color-mix(in srgb, var(--accent-hover) 85%, var(--text) 15%);
  --footer-link-visited: color-mix(in srgb, var(--footer-link) 76%, var(--link-visited) 24%);

  --status-info-fg: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
  --status-info-bg: color-mix(in srgb, var(--accent) 26%, var(--surface-2));
  --status-info-border: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
  --status-success-fg: color-mix(in srgb, var(--accent-strong) 92%, #052e16 8%);
  --status-success-bg: color-mix(in srgb, var(--accent) 42%, var(--surface-2));
  --status-success-border: color-mix(in srgb, var(--accent) 58%, var(--border-strong));
  --status-danger-fg: color-mix(in srgb, #fca5a5 92%, #450a0a 8%);
  --status-danger-bg: color-mix(in srgb, #7f1d1d 60%, var(--surface-2) 40%);
  --status-danger-border: color-mix(in srgb, #f87171 60%, var(--border-strong));

  --heading-band-bg: color-mix(in srgb, var(--accent) 30%, var(--surface-2));
  --heading-band-soft: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
  --heading-band-highlight: color-mix(in srgb, var(--accent) 70%, var(--surface-2));
  --heading-band-outline: color-mix(in srgb, var(--accent) 42%, transparent);
  --heading-band-shadow: 0 24px 48px rgba(2,6,23,.6);
  --heading-band-text: color-mix(in srgb, var(--text) 94%, var(--accent-soft) 6%);
}


@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-1:#030a15;
    --surface-2:#091222;
    --surface-3:#111d30;
    --bg: var(--surface-1);
    --text:#e5ebf6;
    --muted:#96a3b7;
    --border:#182335;
    --border-strong:#23344b;
    --card: var(--surface-2);

    --accent:#22c55e;
    --accent-strong:#3ce07c;
    --accent-hover:#34d399;
    --accent-soft:#0d2918;
    --ring:#34d399;

    --link: var(--accent);
    --link-hover: var(--accent-hover);
    --link-visited:#2dd4bf;

    --shadow-soft: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--border));
    --shadow-elevated: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--border-strong));
    --shadow: var(--shadow-soft);
    --shadow-hover: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, var(--border-strong));

    --tool-shadow: var(--shadow-elevated);
    --tool-border: color-mix(in srgb, var(--accent) 26%, var(--border-strong));

    --tool-surface-bg: linear-gradient(140deg, color-mix(in srgb, var(--surface-2) 78%, transparent) 0%, color-mix(in srgb, var(--surface-1) 22%, transparent) 100%);
    --tool-surface-inner-border: color-mix(in srgb, var(--accent) 26%, var(--border-strong));
    --tool-grid-gap: clamp(18px, 2.4vw, 28px);
    --tool-pane-bg: color-mix(in srgb, var(--surface-2) 82%, var(--surface-1) 18%);
    --tool-pane-border: color-mix(in srgb, var(--accent) 22%, var(--border-strong));
    --tool-pane-alt-bg: color-mix(in srgb, var(--accent) 30%, var(--surface-2));
    --tool-toolbar-bg: color-mix(in srgb, var(--surface-2) 74%, var(--surface-1) 26%);
    --tool-toolbar-border: color-mix(in srgb, var(--accent) 30%, var(--border-strong));

    --field-bg: color-mix(in srgb, var(--surface-2) 86%, #0b1726);
    --field-border: color-mix(in srgb, var(--accent) 26%, var(--border-strong));
    --field-text: color-mix(in srgb, #ffffff 94%, var(--text) 6%);
    --field-placeholder: color-mix(in srgb, var(--muted) 56%, var(--field-text) 24%);

    --article-measure: min(78ch, 100%);
    --article-line-height: 1.82;

    --token-blockquote-bg: color-mix(in srgb, var(--accent) 24%, var(--surface-2));
    --token-blockquote-border: color-mix(in srgb, var(--accent) 52%, transparent);
    --token-code-bg: color-mix(in srgb, var(--surface-3) 82%, var(--accent) 18%);
    --token-code-border: color-mix(in srgb, var(--accent) 46%, var(--border-strong));
    --token-pre-bg: color-mix(in srgb, #010817 82%, var(--surface-2) 18%);
    --token-pre-text: color-mix(in srgb, #f8fafc 94%, var(--text) 6%);
    --token-pre-border: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
    --token-table-header-bg: color-mix(in srgb, var(--accent) 24%, var(--surface-2));
    --token-table-border: color-mix(in srgb, var(--accent) 38%, var(--border-strong));

    --status-info-fg: color-mix(in srgb, var(--text) 86%, var(--accent) 14%);
    --status-info-bg: color-mix(in srgb, var(--accent) 26%, var(--surface-2));
    --status-info-border: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
    --status-success-fg: color-mix(in srgb, var(--accent-strong) 92%, #052e16 8%);
    --status-success-bg: color-mix(in srgb, var(--accent) 42%, var(--surface-2));
    --status-success-border: color-mix(in srgb, var(--accent) 58%, var(--border-strong));
    --status-danger-fg: color-mix(in srgb, #fca5a5 92%, #450a0a 8%);
    --status-danger-bg: color-mix(in srgb, #7f1d1d 60%, var(--surface-2) 40%);
    --status-danger-border: color-mix(in srgb, #f87171 60%, var(--border-strong));

    --heading-band-bg: color-mix(in srgb, var(--accent) 30%, var(--surface-2));
    --heading-band-soft: color-mix(in srgb, var(--accent) 20%, var(--surface-2));
    --heading-band-highlight: color-mix(in srgb, var(--accent) 70%, var(--surface-2));
    --heading-band-outline: color-mix(in srgb, var(--accent) 42%, transparent);
    --heading-band-shadow: 0 24px 48px rgba(2,6,23,.6);
    --heading-band-text: color-mix(in srgb, var(--text) 94%, var(--accent-soft) 6%);
  }
}


/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  margin:0;
  background-color: var(--surface-1);
  background-image:
    radial-gradient(120% 120% at 100% -20%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-1) 96%, transparent) 0%, color-mix(in srgb, var(--surface-3) 88%, transparent) 100%);
  background-repeat:no-repeat;
  color:var(--text);
  font-family:var(--font-sans);
  line-height:1.74;
  font-size: clamp(15px, 1.2vw + .4rem, 18px);
  letter-spacing:.02em;
  padding-bottom: 60px;
  scroll-padding-top: calc(var(--header-h) + 18px);
}

img,svg,video,canvas{ max-inline-size:100%; height:auto; display:block; }
a{ color:var(--link); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:.095em; }
a:hover{ color:var(--link-hover); text-decoration-thickness:.12em; }
a:visited{ color:var(--link-visited); }
:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:8px; }
@media (prefers-reduced-motion: no-preference){
  :focus-visible{ transition: outline-offset .18s ease, box-shadow .18s ease; }
}
@media (prefers-reduced-motion: reduce){
  :focus-visible{ transition: none !important; }
  .site-header,
  .site-nav a,
  .nav-toggle,
  .lang-switcher__toggle,
  .lang-switcher__menu,
  .lang-switcher__link,
  .site-nav.is-drawer,
  .site-search input,
  .tool-card,
  .post-list > li,
  .sidebar-select,
  .post-tags a,
  .post-categories a,
  .share-btn,
  .copy-btn,
  .sidebar{
    transition: none !important;
  }
  .layout-with-sidebar.is-collapsed .sidebar,
  .sidebar.is-collapsed,
  .layout-with-sidebar[data-sidebar-state="collapsed"] .sidebar,
  .layout-with-sidebar.is-expanded .sidebar,
  .sidebar.is-expanded,
  .layout-with-sidebar[data-sidebar-state="expanded"] .sidebar{
    transform: none;
  }
}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* ---------- Containers & Layout ---------- */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}
main{
  width: min(100%, var(--content-max));
  max-width: var(--content-max);
  margin-inline: auto;
  padding-block: clamp(16px, 2.5vw, 28px);
  --section-gap-size: var(--section-gap);
}
main > * + *{ margin-block-start: var(--section-gap-size); }

.grid{ display:grid; gap: var(--col-gap); }
.grid-autofit{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--border) 70%, transparent);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.site-header.is-scrolled{
  box-shadow: 0 12px 28px rgba(12,29,54,.12);
  border-bottom-color: color-mix(in srgb, var(--border-strong) 78%, transparent);
  background: color-mix(in srgb, var(--surface-2) 98%, rgba(15,23,42,.35));
  backdrop-filter: blur(18px);
}

.header-inner{
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "bar utility";
  gap: clamp(12px, 2vw, 24px);
  align-items:center;
  min-height: var(--header-h);
  position:relative;
}
.header-bar{
  grid-area: bar;
  display:flex;
  align-items:center;
  gap: clamp(12px, 2vw, 24px);
  min-width:0;
}
.header-utility{
  grid-area: utility;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: clamp(10px, 1.6vw, 20px);
  flex-wrap:wrap;
}
.header-utility > *{
  flex-shrink:0;
}
.brand{
  color:var(--text);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  font-size: clamp(18px,1.4rem,22px);
  white-space:nowrap;
}
.site-nav{
  display:flex;
  align-items:center;
  gap: clamp(8px, 1.6vw, 18px);
  flex-wrap:wrap;
}
.site-nav a{
  text-decoration:none;
  color:var(--muted);
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.site-nav a:hover{
  color:var(--text);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.site-nav a:focus-visible{
  outline:none;
  color:var(--text);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-3) 88%, var(--surface-2) 12%);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}

.site-nav span{
  color: color-mix(in srgb, var(--muted) 65%, transparent);
}

.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border-strong) 60%, transparent);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  color:var(--muted);
  cursor:pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.nav-toggle:hover{
  color:var(--text);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}

.nav-toggle:focus-visible{
  outline:none;
  color:var(--text);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 24%, transparent);
}

.nav-toggle svg{
  width:1.25rem;
  height:1.25rem;
}
.site-nav.is-drawer{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
}
@media (max-width: 1023px){
  .site-nav.is-drawer{
    position:fixed;
    top: calc(var(--header-h) + 12px);
    right: var(--page-pad);
    left: var(--page-pad);
    padding:18px;
    border-radius:16px;
    border:1px solid color-mix(in srgb, var(--border-strong) 70%, transparent);
    background: color-mix(in srgb, var(--surface-2) 94%, rgba(15,23,42,.4));
    box-shadow: var(--shadow-elevated);
    max-height: calc(100vh - var(--header-h) - 32px);
    overflow:auto;
    opacity:0;
    pointer-events:none;
    transform: translateY(-12px);
    transition: opacity .2s ease, transform .2s ease;
    z-index:60;
  }
  .site-nav.is-drawer.is-open{
    opacity:1;
    pointer-events:auto;
    transform: translateY(0);
  }
}
.lang-switcher{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.lang-switcher__toggle{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.45rem .9rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color:var(--muted);
  font-weight:600;
  line-height:1.2;
  cursor:pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.lang-switcher__toggle:hover{
  color:var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
}
.lang-switcher__toggle:focus-visible{
  outline:none;
  color:var(--text);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.lang-switcher__toggle-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.75rem;
  height:1.75rem;
  border-radius:999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-3));
  color: color-mix(in srgb, var(--accent) 54%, var(--accent-strong));
  font-size:1.15rem;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border));
}
.lang-switcher__toggle-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  text-align:left;
}
.lang-switcher__toggle-label{
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.lang-switcher__toggle-current{
  font-size:.95rem;
  font-weight:600;
  color:var(--text);
}
.lang-switcher__toggle-code{
  margin-left:auto;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color: color-mix(in srgb, var(--accent) 46%, var(--accent-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--border-strong));
}
.lang-switcher__menu{
  position:absolute;
  top: calc(100% + 12px);
  right:0;
  z-index:80;
  margin:0;
  padding:12px;
  min-width:clamp(220px, 32vw, 280px);
  display:flex;
  flex-direction:column;
  gap:6px;
  border-radius:18px;
  border:1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2) 96%, rgba(15,23,42,.25));
  box-shadow: var(--shadow-elevated);
  list-style:none;
  max-height:min(72vh, 480px);
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  opacity:0;
  transform: translateY(-6px);
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.lang-switcher__menu[hidden]{
  display:none;
}
.lang-switcher__menu::-webkit-scrollbar{
  width:8px;
}
.lang-switcher__menu::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius:999px;
}
.lang-switcher.is-open .lang-switcher__toggle{
  color:var(--text);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
}
.lang-switcher.is-open .lang-switcher__menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.lang-switcher__item{
  list-style:none;
}
.lang-switcher__link{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:.65rem .75rem;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  font-weight:600;
  text-decoration:none;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.lang-switcher__link:hover{
  color:var(--text);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
}
.lang-switcher__link:focus-visible{
  outline:none;
  color:var(--text);
  background: color-mix(in srgb, var(--surface-3) 86%, transparent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.lang-switcher__link.is-active{
  background: var(--accent);
  color:var(--surface-1);
  border-color: color-mix(in srgb, var(--accent) 56%, var(--border-strong));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}
.lang-switcher__link.is-active:hover{ color:var(--surface-1); }
.lang-switcher__item-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  border-radius:14px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
  color: color-mix(in srgb, var(--accent) 52%, var(--accent-strong));
  font-size:1.15rem;
  flex-shrink:0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, var(--border));
}
.lang-switcher__item-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  min-width:0;
}
.lang-switcher__item-name{
  font-weight:600;
  color:inherit;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.lang-switcher__status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--accent) 58%, var(--accent-strong));
}
.lang-switcher__status-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background: currentColor;
  box-shadow:0 0 0 2px color-mix(in srgb, currentColor 35%, transparent);
}
.lang-switcher__badge{
  margin-left:auto;
  padding:.2rem .55rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
  color: color-mix(in srgb, var(--accent) 40%, var(--accent-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, var(--border-strong));
}
.lang-switcher__link.is-active .lang-switcher__item-icon{
  background: color-mix(in srgb, var(--surface-1) 94%, transparent);
  color: color-mix(in srgb, var(--accent) 32%, var(--accent-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 26%, var(--surface-1));
}
.lang-switcher__link.is-active .lang-switcher__badge{
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  color: color-mix(in srgb, var(--accent) 35%, var(--accent-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, var(--surface-1));
}
.site-nav.is-drawer .lang-switcher{
  width:100%;
  flex-direction:column;
  align-items:stretch;
  gap: clamp(8px, 2.6vw, 16px);
}
.site-nav.is-drawer .lang-switcher__toggle{
  width:100%;
  justify-content:space-between;
}
.site-nav.is-drawer .lang-switcher__menu{
  position:relative;
  top:auto;
  right:auto;
  left:auto;
  min-width:0;
  width:100%;
  transform:none;
  border-radius:16px;
  box-shadow: var(--shadow-soft);
}
.site-nav.is-drawer .lang-switcher.is-open .lang-switcher__menu{
  transform:none;
}
.site-header::after{
  content:"";
  position:absolute;
  left:var(--page-pad);
  right:var(--page-pad);
  bottom:0;
  height:2px;
  border-radius:999px;
  pointer-events:none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 68%, transparent) 0%, color-mix(in srgb, var(--accent) 24%, transparent) 100%);
  opacity:.55;
}

 }


@media (max-width: 1023px){
  .header-inner{
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "bar"
      "utility";
    row-gap: clamp(10px, 2vw, 18px);
  }
  .header-utility{
    justify-content:space-between;
    width:100%;
  }
  .site-search{
    flex:1 1 100%;
    min-width:0;
  }
  .search-results{
    left:0;
    right:auto;
    width:100%;
  }
}
@media (max-width: 767px){
  .header-bar{
    flex-wrap:wrap;
  }
  .header-utility{
    flex-direction:column;
    align-items:stretch;
    gap: clamp(8px, 2.8vw, 16px);
  }
  .site-search{
    width:100%;
    margin-left:0;
  }
  .site-search input{
    width:100%;
  }
  .site-search:focus-within .search-results{
    left:0;
    right:0;
    width:100%;
    max-width:100%;
  }
  .lang-switcher{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap: clamp(8px, 2.6vw, 16px);
  }
  .lang-switcher__toggle{
    width:100%;
    justify-content:space-between;
  }
  .lang-switcher__menu{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    min-width:0;
    width:100%;
    transform:none;
    border-radius:16px;
    box-shadow: var(--shadow-soft);
  }
  .lang-switcher.is-open{
    width:100%;
  }
  .lang-switcher.is-open .lang-switcher__menu{
    left:0;
    right:0;
    width:100%;
  }
  .lang-switcher.is-open .lang-switcher__menu{
    transform:none;
  }
}

/* Header search */
.site-search{
  position:relative;
  min-width: clamp(18ch, 24vw, 32ch);
  flex:0 1 auto;
  margin-left:auto;
}
.site-search input{
  width:100%;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--field-border) 80%, transparent);
  background: color-mix(in srgb, var(--field-bg) 92%, transparent);
  color: var(--field-text);
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.site-search input:focus-visible{
  outline:none;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border-strong));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
}
.site-search input::placeholder{ color: var(--field-placeholder); }
.search-results{
  position:absolute;
  top: calc(100% + 10px);
  right:0;
  z-index:60;
  width: min(clamp(30ch, 48vw, 70ch), 100%);
  max-width: calc(100vw - (var(--page-pad) * 2));
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow: var(--shadow-elevated);
  max-height: 60vh;
  overflow:auto;
}
.search-item{ display:block; padding:10px 12px; color:inherit; text-decoration:none; border-bottom:1px solid var(--border); }
.search-item:hover{ background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }
.search-title{ font-weight:650; }
.search-meta{ color:var(--muted); font-size:.9em; margin-top:2px; display:flex; gap:.4rem; flex-wrap:wrap; }
.search-desc{ color:var(--muted); font-size:.95em; margin-top:4px; word-break:break-word; }
.chip{ display:inline-block; font-size:.75rem; padding:.15rem .5rem; border:1px solid var(--border); border-radius:999px; }
.chip-tag{ background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: color-mix(in srgb, var(--accent) 50%, black); }
.search-empty{ padding:12px; color:var(--muted); }

/* Tools directory filters */
.tool-filters{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:.25rem 0 1rem;
}
.tool-filters__pill{
  display:flex;
  align-items:center;
  gap:.4rem;
  border:1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  padding:.35rem .6rem;
  border-radius:999px;
  color: var(--text);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.tool-filters__pill:focus-within{
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  background: color-mix(in srgb, var(--surface-2) 98%, transparent);
}
.tool-filters__label{
  font-weight:600;
  color: var(--text);
}
.tool-filters__select,
.tool-filters__input{
  border:0;
  background:transparent;
  font: inherit;
  color: inherit;
}
.tool-filters__select{
  min-width:10ch;
  cursor:pointer;
}
.tool-filters__input{
  min-width:16ch;
}
.tool-filters__select:focus,
.tool-filters__input:focus{
  outline:none;
}
.tool-filters__select option{
  color: var(--text);
  background: var(--surface-2);
}
.tool-filters__tags{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.tool-filters__active{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.tool-filters__clear{
  padding:.35rem .6rem;
  border-radius:8px;
  border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
  color: var(--text);
  cursor:pointer;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.tool-filters__clear:hover{
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
}
.tool-filters__clear:focus-visible{
  outline:none;
  border-color: color-mix(in srgb, var(--accent) 44%, var(--border-strong));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
.tool-filters__clear:active{
  transform: translateY(1px);
}
.tool-filters__count{
  margin-left:auto;
  color: var(--muted);
  font-weight:500;
}
.theme-dark .tool-filters__pill,
[data-theme="dark"] .tool-filters__pill{
  border-color: color-mix(in srgb, var(--accent) 24%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-2) 84%, var(--surface-1) 16%);
}
.theme-dark .tool-filters__pill:focus-within,
[data-theme="dark"] .tool-filters__pill:focus-within{
  background: color-mix(in srgb, var(--surface-2) 92%, var(--surface-1) 8%);
}
.theme-dark .tool-filters__select,
[data-theme="dark"] .tool-filters__select{
  color: color-mix(in srgb, #f8fafc 94%, var(--text) 6%);
}
.theme-dark .tool-filters__select option,
[data-theme="dark"] .tool-filters__select option{
  color: color-mix(in srgb, #f8fafc 94%, var(--text) 6%);
  background: color-mix(in srgb, var(--surface-2) 88%, var(--surface-1) 12%);
}
.theme-dark .tool-filters__clear,
[data-theme="dark"] .tool-filters__clear{
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border-strong));
  background: color-mix(in srgb, var(--surface-2) 88%, var(--surface-1) 12%);
  color: color-mix(in srgb, #f8fafc 94%, var(--text) 6%);
}
.theme-dark .tool-filters__clear:hover,
[data-theme="dark"] .tool-filters__clear:hover{
  background: color-mix(in srgb, var(--accent) 22%, var(--surface-2));
}


/* Sidebar + Content */
.layout-with-sidebar{
  display:grid;
  gap: var(--col-gap);
  align-items:start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "content"
    "sidebar";
}
.content-area{ grid-area: content; }
.sidebar{
  grid-area: sidebar;
  --sidebar-max-height: 9999px;
  transition: max-height .28s ease, opacity .24s ease, transform .24s ease;
  max-height: var(--sidebar-max-height);
  will-change: max-height, opacity, transform;
}
.layout-with-sidebar .content-area{
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
}
@media (min-width: 768px){
  .layout-with-sidebar{
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(24ch, 36vw, var(--sidebar-w)));
    grid-template-areas: "content sidebar";
  }
}
@media (min-width: 1024px){
  .layout-with-sidebar{
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  }
  .sidebar{
    position: static;
    top:auto;
    height:auto;
  }
}
.layout-with-sidebar.is-collapsed,
.layout-with-sidebar[data-sidebar-state="collapsed"]{
  grid-template-columns: minmax(0, 1fr);
}
.layout-with-sidebar.is-collapsed .sidebar,
.sidebar.is-collapsed,
.layout-with-sidebar[data-sidebar-state="collapsed"] .sidebar{
  max-height:0;
  opacity:0;
  transform: translateY(-12px);
  overflow:hidden;
  pointer-events:none;
}
.layout-with-sidebar.is-expanded .sidebar,
.sidebar.is-expanded,
.layout-with-sidebar[data-sidebar-state="expanded"] .sidebar{
  max-height: var(--sidebar-max-height);
  opacity:1;
  transform: translateY(0);
}

/* Sidebar blocks */
.side-block{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px; margin-bottom:12px; box-shadow: var(--shadow-soft); }
.side-title{ margin:.2rem 0 .6rem; font-size:1rem; color: color-mix(in srgb, var(--text) 86%, var(--muted)); }
.side-list{ list-style:none; margin:0; padding:0; }
.side-list li{ display:flex; align-items:center; justify-content:space-between; padding:.35rem .25rem; gap:.5rem; }
.side-list a{ text-decoration:none; }
.count{ color:var(--muted); font-size:.9em; }
.muted{ color:var(--muted); }

/* Tag cloud */
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.45rem .55rem; }
.tag-cloud .tag{
  font-size: clamp(.50rem, calc(.50rem + .30rem * var(--w, 1)), 1.45rem);
  line-height: 1.0;
  display: inline-block;
  padding: .15rem .55rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
  color: var(--link); text-decoration: none;
}
.tag-cloud .tag:hover{ background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }

/* Sidebar select */
.sidebar-select{
  appearance: none;
  width:100%; padding:.55rem .9rem; padding-right:2.2rem;
  border:1px solid var(--border); border-radius:10px; background:var(--surface-2) no-repeat right .65rem center / 1rem url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%239ca3af' d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E");
  color:var(--text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.sidebar-select:hover{ border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.sidebar-select:focus{ outline:none; border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.sidebar-select::-ms-expand{ display:none; }

/* Post / Cards */
.post{
  display:grid;
  gap: clamp(24px, 4vw, 40px);
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 36px);
  box-shadow: var(--shadow-soft);
}
.post .meta, .post-date{ color:var(--muted); font-size:.95em; }
.post-title, .post > h1{
  font-size: var(--fs-h1);
  line-height:1.22;
  margin:0;
}
.post-hero{
  display:grid;
  gap: clamp(14px, 2.6vw, 22px);
}
@media (min-width: 768px){
  .post-hero{
    grid-template-columns: minmax(0, 1fr) auto;
    align-items:flex-start;
  }
  .post-hero-actions{ justify-self:end; }
}
.post-hero-text{ display:grid; gap:.75rem; }
.post-hero-actions{ display:flex; }
.post-hero-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.65rem .9rem;
}
.post-hero .post-date{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .85rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface-3));
  font-size:.9rem;
  font-weight:600;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
.post-hero .post-categories{ margin:0; }
.post-body{
  display:grid;
  gap: clamp(24px, 4vw, 40px);
}
@media (min-width: 1024px){
  .post-body{
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--sidebar-w));
    align-items:start;
  }
  .post-body.post-body--full{
    grid-template-columns: minmax(0, 1fr);
  }
}
.post-content{
  overflow-wrap:anywhere;
  width:100%;
  max-width: var(--article-measure);
  line-height: var(--article-line-height);
}
.post-content--wide{
  max-width: none;
  --article-measure: 100%;
}
.post-content--wide > :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote){
  max-width: var(--article-measure);
}
.post-content img{
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:0 1px 10px rgba(0,0,0,.05);
}

.post-content > * + *{ margin-block-start: clamp(.75rem, 1.4vw, 1.2rem); }
.post-content h1{ margin-block: clamp(2.4rem, 4vw, 3.2rem) clamp(1rem, 1.8vw, 1.4rem); }
.post-content h2{ margin-block: clamp(2rem, 3.4vw, 2.8rem) clamp(.9rem, 1.6vw, 1.3rem); }
.post-content h3{ margin-block: clamp(1.6rem, 3vw, 2.2rem) clamp(.75rem, 1.4vw, 1.1rem); }
.post-content h4{ margin-block: clamp(1.3rem, 2.4vw, 1.8rem) clamp(.6rem, 1.2vw, .9rem); }
.post-sidebar{ width:min(100%, var(--sidebar-w)); }
@media (min-width: 1024px){
  .post-sidebar{ position:sticky; top: calc(var(--header-h) + 24px); }
}
.post-meta-card{
  background: var(--surface-2);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 2.4vw, 28px);
  display:grid;
  gap: 1rem;
}
.post-meta-title{
  margin:0;
  font-size:1.05rem;
  font-weight:600;
  color: color-mix(in srgb, var(--text) 86%, var(--muted));
}
.post-meta-item{ display:grid; gap:.35rem; }
.post-meta-label{
  font-size:.85rem;
  font-weight:600;
  color: var(--muted);
}
.post-meta-card .post-date{ font-weight:600; color: color-mix(in srgb, var(--text) 84%, var(--muted)); }
.post-meta-card .post-categories,
.post-meta-card .post-tags{ margin:0; }
.post-tags, .post-categories{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:.6rem 0;
}
.post-tags a, .post-categories a{
  text-decoration:none;
  font-size:.85rem;
  padding:.18rem .65rem;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-3));
  color: color-mix(in srgb, var(--accent) 55%, var(--text));
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.post-tags a:hover, .post-tags a:focus-visible,
.post-categories a:hover, .post-categories a:focus-visible{
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-3));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border-strong));
  color: color-mix(in srgb, var(--accent) 78%, var(--text));
}

/* Lists */
.post-list{ list-style:none; padding:0; margin:0; display:grid; gap:14px; grid-template-columns:minmax(0, 1fr); }
@media (min-width: 768px){
  .post-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .post-list{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
.post-list > li{
  background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:14px 16px;
  transition: transform .16s ease, box-shadow .16s ease;
}
.post-list > li:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.post-list a{ text-decoration:none; }
.post-list .date{ color:var(--muted); font-size:.9em; margin-left:.5rem; }
.post-list .desc{ color:var(--muted); margin-top:.3rem; font-size:.95em; }

/* Typography */
h1,h2,h3,h4{ line-height:1.25; letter-spacing:.02em; }
h1{ font-size: var(--fs-h1); margin-block:1.2em .5em; }
h2{ font-size: var(--fs-h2); margin-block:1.2em .5em; }
h3{ font-size: var(--fs-h3); margin-block:1em .5em; }

.content-area :where(h2,h3,h4){
  position:relative;
  display:block;
  color: var(--text);
}

.content-area :where(h2){
  margin-block: clamp(2rem, 3.4vw, 2.8rem) clamp(1rem, 1.8vw, 1.4rem);
  padding-block: clamp(.55rem, 1vw, .9rem);
  padding-inline-start: clamp(1.9rem, 3vw, 2.6rem);
  padding-inline-end: clamp(1.1rem, 2vw, 1.85rem);
  border-radius: clamp(3px, .6vw, 6px);
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface-2) 32%);
  font-weight:700;
  letter-spacing:.025em;
  box-shadow:none;
}

.content-area :where(h2)::before{
  content:"";
  position:absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: clamp(.6rem, 1vw, .85rem);
  border-radius: clamp(3px, .6vw, 6px) 0 0 clamp(3px, .6vw, 6px);
  background: linear-gradient(135deg, var(--accent-strong) 0%, var(--accent) 100%);
}

.content-area :where(h3){
  margin-block: clamp(1.6rem, 3vw, 2.2rem) clamp(.8rem, 1.5vw, 1.1rem);
  padding-block: clamp(.45rem, .85vw, .75rem);
  padding-inline-start: clamp(1.45rem, 2.4vw, 2rem);
  padding-inline-end: clamp(1rem, 1.8vw, 1.6rem);
  border-radius: clamp(3px, .6vw, 5px);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-2) 58%);
  font-weight:600;
  letter-spacing:.02em;
}

.content-area :where(h3)::before{
  content:"";
  position:absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: clamp(.38rem, .8vw, .55rem);
  border-radius: clamp(3px, .6vw, 5px) 0 0 clamp(3px, .6vw, 5px);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 88%, var(--accent-soft) 12%) 0%,
    color-mix(in srgb, var(--accent) 60%, var(--accent-soft) 40%) 100%);
}

.content-area :where(h4){
  margin-block-start: clamp(1.2rem, 2.4vw, 1.8rem);
  margin-block-end: clamp(.6rem, 1.2vw, .95rem);
  padding-inline-start: clamp(1.35rem, 2.1vw, 1.8rem);
  font-weight:600;
  letter-spacing:.035em;
}

.content-area :where(h4)::before{
  content:"";
  position:absolute;
  top:50%;
  inset-inline-start: clamp(.28rem, .6vw, .4rem);
  transform: translateY(-50%);
  width: clamp(.35rem, .75vw, .5rem);
  height: clamp(.35rem, .75vw, .5rem);
  border-radius: clamp(2px, .5vw, 4px);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%);
}
p{ font-size: var(--fs-p); margin-block:.9em; text-wrap:pretty; }
ul,ol{ padding-inline-start:1.2em; margin-block:.8em; }
blockquote{
  margin: clamp(1.6rem, 3vw, 2.6rem) 0;
  padding: 1rem 1.2rem;
  border-inline-start:4px solid var(--token-blockquote-border);
  background: var(--token-blockquote-bg);
  border-radius: var(--radius);
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
code,kbd,pre,samp{ font-family:var(--font-mono); }
code{
  background: var(--token-code-bg);
  border:1px solid var(--token-code-border);
  border-radius:8px;
  padding:.18em .5em;
  font-size:.95em;
  word-break:break-word;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
pre{
  background: var(--token-pre-bg);
  color: var(--token-pre-text);
  border-radius: var(--radius-lg);
  border:1px solid var(--token-pre-border);
  padding:1.1rem 1.3rem;
  overflow:auto;
}
pre code{ background:transparent; border:0; padding:0; color:inherit; white-space:pre; }

/* Copy button (for code blocks) */
.copy-btn{
  position:absolute; right:14px; top:10px; padding:.25rem .6rem; border-radius:8px;
  border:1px solid var(--border); background: var(--card); color: var(--text); cursor:pointer;
}
.copy-btn:hover{ background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.copy-btn.copied{ background: var(--accent); color:#fff; border-color: transparent; }

/* Tables */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin-block: clamp(1.6rem, 3vw, 2.6rem);
  font-size:.95em;
  display:block;
  overflow-x:auto;
  border:1px solid var(--token-table-border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 96%, transparent);
}
th,td{
  border-bottom:1px solid var(--token-table-border);
  border-right:1px solid var(--token-table-border);
  padding:.7rem .85rem;
}
th{
  background: var(--token-table-header-bg);
  text-align:left;
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
}
tbody tr:last-child td{ border-bottom:0; }
tr td:last-child, tr th:last-child{ border-right:0; }
tbody tr:nth-child(even) td{ background: color-mix(in srgb, var(--accent) 6%, var(--surface-2)); }

/* Forms */
label{ font-weight:600; }
.input, select, .textarea, input[type="text"], input[type="search"], input[type="number"], input[type="color"], textarea{
  font: inherit; color: var(--field-text); background: var(--field-bg);
  border:1px solid var(--field-border); border-radius:10px; padding:.5rem .6rem;
}
.textarea, textarea{ width:100%; resize:vertical; min-height: 8rem; }
input::placeholder, textarea::placeholder{ color: var(--field-placeholder); }
input:focus, select:focus, textarea:focus{ outline:2px solid var(--ring); outline-offset:2px; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.48rem .7rem; border-radius:10px;

  /* 境界を少し強めて背景もわずかに着色（白地で溶けない） */
  border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  color: var(--text);

  text-decoration:none; cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
}
.btn:active{ transform:none; }
.btn-primary{ background: var(--accent); color:#fff; border-color: transparent; }
.btn-primary:hover{ background: var(--accent-hover); box-shadow: var(--shadow-hover); }

/* Utilities */
.stack-xs{ margin-top:.25rem; }
.stack-sm{ margin-top:.5rem; }
.stack-md{ margin-top:1rem; }
.stack-lg{ margin-top:1.25rem; }
.section-gap{ --section-gap-size: var(--section-gap); }
.section-gap-tight{ --section-gap-size: var(--section-gap-tight); }
.section-gap-wide{ --section-gap-size: var(--section-gap-wide); }
.section-gap > * + *,
.section-gap-tight > * + *,
.section-gap-wide > * + *{ margin-block-start: var(--section-gap-size); }
.spacer{ flex:1 1 auto; }

/* ================================
   Tool surface & in-tool UI
   ================================ */

/* “文章と違う箱”としての主役: 少し大きめの影 + 彩度低めの縁取り + 余白 */
.tool-wrap.tool-surface{
  position: relative;
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: minmax(0, auto);
  gap: var(--tool-grid-gap);
  align-items:start;
  background: var(--tool-surface-bg);
  border:1px solid var(--tool-border);
  border-radius: calc(var(--radius-lg) + 4px);
  padding: clamp(20px, 2.8vw, 30px);
  box-shadow: var(--tool-shadow);
  margin-block: clamp(.6rem, 1vw, 1.4rem) clamp(1rem, 2vw, 1.8rem);
}

/* 薄い内側ラインで面を締める（ダークでも沈まない） */
.tool-wrap.tool-surface::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px var(--tool-surface-inner-border);
  opacity:.5;
}

.tool-wrap.tool-surface > *{ min-width:0; }

@media (min-width: 1024px){
  .tool-wrap.tool-surface.tool-layout-split{
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.tool-wrap.tool-surface.tool-layout-auto{
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px){
  .tool-wrap.tool-surface.tool-layout-auto{
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  }
}

.tool-wrap.tool-surface > :where(.status, .tool-status){ grid-column: 1 / -1; }

/* ツール内の共通UI（他ページへ影響しないようツリー限定） */
:where(.tool-wrap .card, section.card){
  --card-stack-gap: var(--card-gap);
  background: var(--tool-pane-bg);
  border:1px solid var(--tool-pane-border);
  border-radius: var(--radius-lg);
  padding-block: var(--card-padding-block);
  padding-inline: var(--card-padding-inline);
  box-shadow: var(--shadow-soft);
  display:flex;
  flex-direction:column;
  gap: var(--card-stack-gap);
  min-width:0;
}

:where(.tool-wrap .card, section.card).stack-sm{ --card-stack-gap: clamp(12px, 1.6vw, 18px); }
:where(.tool-wrap .card, section.card).stack-md{ --card-stack-gap: clamp(14px, 1.9vw, 22px); }
:where(.tool-wrap .card, section.card).stack-lg{ --card-stack-gap: clamp(18px, 2.4vw, 28px); }

:where(.tool-wrap .card, section.card) > :is(h2,h3,h4){
  margin:0;
}

:where(.tool-wrap .card, section.card) > :is(p, ul, ol, dl, pre, table, figure, blockquote){
  margin:0;
}

:where(.tool-wrap .card, section.card) > * + *{ margin-block-start:0; }

:where(.tool-wrap .card, section.card).tool-pane-alt,
.tool-pane-alt{
  background: var(--tool-pane-alt-bg);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--tool-pane-border));
}

.tool-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: clamp(.6rem, 1vw + .2rem, 1.1rem);
  padding-block: calc(var(--card-padding-block) - .6rem);
  padding-inline: calc(var(--card-padding-inline) - .4rem);
  background: var(--tool-toolbar-bg);
  border:1px solid var(--tool-toolbar-border);
  border-radius: calc(var(--radius-lg) - 6px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 24%, transparent);
  min-width:0;
}

.tool-wrap.tool-surface > .tool-toolbar{ grid-column: 1 / -1; }

.tool-wrap .controls{
  display:flex;
  flex-wrap:wrap;
  gap: clamp(.5rem, 1vw + .2rem, 1rem);
  align-items:flex-start;
}
.tool-wrap .field-inline{ display:flex; flex-direction:column; gap:.25rem; min-width:min(32ch, 100%); }
.tool-wrap .label{ font-weight:600; }
.tool-wrap .segmented{
  display:inline-flex; align-items:center; gap:0;
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
}
.tool-wrap .segmented input{ position:absolute; inset:auto; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); }
.tool-wrap .segmented label{
  padding:.45rem .7rem; cursor:pointer; user-select:none;
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  border-right:1px solid var(--border);
}
.tool-wrap .segmented label:last-of-type{ border-right:0; }
.tool-wrap .segmented input:checked + label{
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-2));
  color: var(--text);
}

/* 小さめ数字入力は横幅を詰める */
.tool-wrap .input-num{ max-width: 7.5rem; }

/* Status */
:where(.status, .tool-status){
  display:inline-flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap: var(--status-icon-gap);
  padding-block: var(--status-padding-block);
  padding-inline: var(--status-padding-inline);
  border-radius:12px;
  border:1px solid var(--status-info-border);
  background: var(--status-info-bg);
  color: var(--status-info-fg);
  line-height:1.6;
  font-size: clamp(.92rem, .4vw + .8rem, 1rem);
  max-width:100%;
  word-break: break-word;
}

:where(p.status, div.status, .tool-status){ display:flex; }

:where(.status, .tool-status).ok,
:where(.status, .tool-status)[data-variant="success"]{
  color: var(--status-success-fg);
  background: var(--status-success-bg);
  border-color: var(--status-success-border);
}

:where(.status, .tool-status).err,
:where(.status, .tool-status)[data-variant="error"]{
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
}

:where(.status, .tool-status) strong{ color: inherit; }
:where(.status, .tool-status) code{ background:transparent; }
:where(.status, .tool-status) .status-icon{ flex:0 0 auto; line-height:1; }

.tool-wrap.tool-surface > .tool-status{ grid-column: 1 / -1; }

/* Footer */
.site-footer {
  margin-top: var(--section-gap);
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
  color: var(--footer-text);
  text-align: left;
}

.site-footer .container {
  padding-block: clamp(32px, 5vw, 56px);
}

.site-footer p {
  margin: 0;
  color: var(--footer-text);
}

.footer-grid {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  color: var(--footer-text);
  align-items: flex-start;
}

.footer-brand {
  gap: .65rem;
}

.footer-site-title {
  font-size: clamp(1.3rem, 1.4vw + 1rem, 1.6rem);
  font-weight: 700;
  color: var(--footer-text);
  text-decoration: none;
}

.footer-site-title:hover,
.footer-site-title:focus-visible {
  color: var(--footer-link-hover);
}

.footer-site-title:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--footer-link-hover) 45%, transparent);
  outline-offset: 4px;
}

.footer-tagline {
  font-weight: 600;
  color: var(--footer-text);
}

.footer-description {
  line-height: 1.7;
  color: var(--footer-text);
  max-width: 44ch;
}

.footer-meta {
  font-size: .9rem;
  color: var(--footer-muted);
  margin-top: .75rem;
  line-height: 1.6;
}

.footer-heading {
  margin: 0 0 .75rem;
  font-size: clamp(1.05rem, .5vw + 1rem, 1.2rem);
  font-weight: 600;
  color: var(--footer-text);
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.footer-nav a {
  color: var(--footer-link);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: .28em;
  line-height: 1.45;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--footer-link-hover);
  text-decoration: underline;
}

.footer-nav a:visited {
  color: var(--footer-link-visited);
}

.footer-nav a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--footer-link-hover) 45%, transparent);
  outline-offset: 3px;
}

.footer-lang-switcher{
  margin-top:.75rem;
  width:100%;
}
.footer-lang-switcher .lang-switcher__toggle{
  width:100%;
  justify-content:space-between;
}
.footer-lang-switcher .lang-switcher__menu{
  right:auto;
  left:0;
  width:100%;
  min-width:0;
}

@media (max-width: 720px) {
  .site-footer .container {
    padding-block: clamp(28px, 9vw, 44px);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Link underline animation */
.post .post-content a:not(.brand), .post-list a, .site-header nav a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%;
  background-size:0% .08em;
  text-decoration:none; border-radius:2px;
}
@media (prefers-reduced-motion: no-preference){
  .post .post-content a:not(.brand), .post-list a, .site-header nav a{
    transition:background-size .22s ease;
  }
}
@media (prefers-reduced-motion: reduce){
  .post .post-content a:not(.brand), .post-list a, .site-header nav a{
    transition:none !important;
  }
}
.post .post-content a:not(.brand):hover, .post-list a:hover, .site-header nav a:hover{ background-size:100% .08em; }

/* Mobile tweaks */
@media (max-width: 520px){
  .site-search input{ width: 100%; }
  .brand{ font-size: 1.1rem; }
  .post{ padding: 16px; }
  .post-title{ font-size: clamp(1.5rem, 6vw, 2rem); }
  .container{ padding-inline: max(3.5vw, 16px); }
}

/* Scrollbar (optional) */
@media (pointer: fine){
  *{ scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 30%, transparent) transparent; }
  *::-webkit-scrollbar{ height:10px; width:10px; }
  *::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--accent) 30%, #9ca3af); border-radius: 10px; }
  *::-webkit-scrollbar-track{ background: transparent; }
}

/* Sidebar: Links — first block shows sr-only inline links as chips */
.sidebar > .side-block:first-child > .sr-only{
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: .35rem 0 0 !important;
  overflow: visible !important;
  clip: auto !important;
  display: block !important;
  white-space: normal;
}
.sidebar > .side-block:first-child > .sr-only a{
  display: inline-block;
  margin: 0 .25rem .25rem 0;
  padding: .15rem .5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  color: var(--link);
  text-decoration: none;
  line-height: 1.35;
}
.sidebar > .side-block:first-child > .sr-only a:hover{
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

/* Tools listing (tools.html) */
.page-title{ font-size: 1.6rem; margin:.25rem 0 .75rem; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:.25rem 0 1rem; }
.filters .field{ display:flex; align-items:center; gap:.4rem; border:1px solid var(--border); padding:.35rem .6rem; border-radius:999px; }
.filters #filter-clear{ padding:.35rem .6rem; border:1px solid var(--border); border-radius:8px; background:transparent; }
.tool-groups{ display:grid; gap:24px; }
.tool-group > h2{ font-size:1.1rem; margin:.25rem 0 .5rem; }
.tool-group .grid{ grid-template-columns: minmax(0, 1fr); gap:16px; }
@media (min-width: 768px){
  .tool-group .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px){
  .tool-group .grid{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.tool-card{
  display:block; border:1px solid var(--border); border-radius:12px; padding:16px; text-decoration:none; background:var(--card);
  transition: transform .16s ease, box-shadow .16s ease;
}
.tool-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tool-card h3{ margin:.5rem 0 0; font-size:1.05rem; color:var(--text); }
.tool-card p{ margin:.4rem 0 0; color:var(--muted); font-size:.95rem; }
.post .post-content > :first-child { margin-top: 0; }

/* 記事本文先頭が h1 なら .post-title とリズムを合わせる */
.post .post-content > h1:first-child {
  font-size: var(--fs-h1);
  line-height: 1.25;
  margin-block: clamp(2.4rem, 4vw, 3.2rem) clamp(1rem, 1.8vw, 1.4rem);
}

.share-buttons{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
  margin:0;
}
.post-hero-actions .share-buttons{ justify-content:flex-start; }
@media (min-width: 768px){
  .post-hero-actions .share-buttons{ justify-content:flex-end; }
}
.share-btn{
  --share-color: var(--muted);
  width:42px; height:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%;
  background: color-mix(in srgb, var(--share-color) 12%, var(--surface-2));
  border:1px solid color-mix(in srgb, var(--share-color) 26%, var(--border));
  color: var(--share-color);
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.share-btn svg{ width:20px; height:20px; fill: currentColor; }
.share-btn:hover,
.share-btn:focus-visible{
  transform:translateY(-2px);
  box-shadow: var(--shadow-hover);
  background: color-mix(in srgb, var(--share-color) 20%, var(--surface-2));
  border-color: color-mix(in srgb, var(--share-color) 45%, var(--border-strong));
  color: color-mix(in srgb, var(--share-color) 80%, #ffffff 20%);
}
.share-btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--share-color) 55%, transparent);
  outline-offset:4px;
}
.share-btn.twitter{ --share-color:#1DA1F2; }
.share-btn.facebook{ --share-color:#1877F2; }
.share-btn.hatena{ --share-color:#008fde; }