@layer reset, tokens, base, layout, prose, components, utilities;
@layer tokens {
  :root {
    color-scheme: light dark;
    --color-bg: light-dark(#fcfcfd, #131518);
    --color-fg: light-dark(#1f2328, #e3e6ea);
    --color-muted: light-dark(#59636e, #9ba4ae);
    --color-rule: light-dark(#dfe3e8, #2d3239);
    --color-surface: light-dark(#f3f5f7, #1d2025);
    --color-link: light-dark(#0645ad, #8ab4f8);
    --color-link-visited: light-dark(#5b2d9e, #c3a6f5);
    --color-link-hover: light-dark(#0b0080, #b5cefb);
    --color-accent: var(--color-link);
    --color-mark: light-dark(#fff1a8, #5a4800);
    --code-bg: var(--color-surface);
    --code-border: var(--color-rule);
    --hl-keyword: light-dark(#8f2bb3, #d19bf2);
    --hl-string: light-dark(#1a6b2f, #93d18a);
    --hl-comment: light-dark(#5e6875, #8d97a3);
    --hl-number: light-dark(#9a4100, #f0a46a);
    --hl-type: light-dark(#06657a, #6fcfdf);
    --hl-function: light-dark(#0b55b8, #82b1ff);
    --hl-macro: light-dark(#9b3c00, #f59a7a);
    --hl-key: light-dark(#7a4d00, #e6c27a);
    --hl-tag: light-dark(#b0222c, #f2858b);
    --hl-added: light-dark(#1a6b2f, #93d18a);
    --hl-removed: light-dark(#b0222c, #f2858b);
    --font-sans: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", monospace;
    --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-lg: 1.15rem;
    --text-h3: 1.1rem;
    --text-h2: 1.35rem;
    --text-h1: clamp(1.6rem, 1.3rem + 1.2vw, 1.9rem);
    --text-code: 0.875rem;
    --leading: 1.9;
    --leading-tight: 1.4;
    --leading-code: 1.7;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1.25rem;
    --space-5: 2rem;
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 5rem;
    --flow: 1.6em;
    --content-width: 56rem;
    --gutter: clamp(1rem, 4vw, 1.5rem);
    --header-height: 6.5rem;
    --radius: 8px;
    --radius-sm: 4px;
    @media (width <= 480px) {
      --header-height: 5rem;
    }
  }
}
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, pre, ul, ol, dl, dd) {
    margin: 0;
  }
  :where(img, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
  }
  :where(html) {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
}
@layer base {
  html {
    scroll-padding-block-start: calc(var(--header-height) + var(--space-4));
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
  body {
    background: var(--color-bg);
    color: var(--color-fg);
    font: var(--text-base) / var(--leading) var(--font-sans);
    accent-color: var(--color-accent);
  }
  ::selection {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
  }
  a {
    color: var(--color-link);
    text-underline-offset: 0.2em;
    text-decoration-thickness: from-font;
    &:visited {
      color: var(--color-link-visited);
    }
    &:hover {
      color: var(--color-link-hover);
      text-decoration-thickness: 2px;
    }
  }
  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  :is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--leading-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
    &:lang(ja) {
      word-break: auto-phrase;
    }
  }
  h1 {
    font-size: var(--text-h1);
    margin-block-end: var(--space-3);
  }
  h2 {
    font-size: var(--text-h2);
    margin-block: var(--space-7) var(--space-4);
    @media (width <= 480px) {
      margin-block-start: var(--space-6);
    }
  }
  h3 {
    font-size: var(--text-h3);
    margin-block: var(--space-6) var(--space-3);
  }
  :where(h4, h5, h6) {
    font-size: 1rem;
    margin-block: var(--space-5) var(--space-3);
  }
  p {
    margin-block-end: var(--flow);
    text-wrap: pretty;
  }
  :is(ul, ol) {
    padding-inline-start: 1.5rem;
    margin-block-end: var(--flow);
  }
  li + li {
    margin-block-start: 0.6em;
  }
  li > :is(ul, ol, p, pre) {
    margin-block: 0.6em 0;
  }
  blockquote {
    margin-block: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-inline-start: 4px solid var(--color-rule);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: var(--color-surface);
    & > :last-child {
      margin-block-end: 0;
    }
  }
  hr {
    block-size: 6px;
    inline-size: 3.6rem;
    margin: var(--space-7) auto;
    border: 0;
    background: radial-gradient(circle, var(--color-muted) 0 2px, transparent 2.5px) center / 1.2rem 6px
      repeat-x;
    opacity: 0.6;
  }
  details {
    margin-block-end: var(--flow);
  }
  summary {
    cursor: pointer;
  }
  mark {
    padding-inline: 0.15em;
    border-radius: 2px;
    background: var(--color-mark);
    color: inherit;
  }
  del {
    color: var(--color-muted);
  }
  img {
    display: block;
    margin: var(--space-5) auto;
    border-radius: var(--radius);
  }
  table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: 0.92rem;
    line-height: 1.6;
  }
  :is(th, td) {
    padding: 0.6rem 0.9rem;
    border-block-end: 1px solid var(--color-rule);
    text-align: start;
    vertical-align: top;
  }
  th {
    background: var(--color-surface);
    font-weight: 600;
    white-space: nowrap;
  }
}
@layer base {
  :is(code, kbd, samp) {
    font-family: var(--font-mono);
    font-size: 0.88em;
  }
  code {
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--code-bg);
    overflow-wrap: anywhere;
  }
  pre {
    margin-block: var(--space-5);
    padding: var(--space-4) 1.5rem;
    border: 1px solid var(--code-border);
    border-radius: var(--radius);
    background: var(--code-bg);
    overflow-x: auto;
    line-height: var(--leading-code);
    tab-size: 4;
    & code {
      padding: 0;
      background: none;
      font-size: var(--text-code);
      overflow-wrap: normal;
    }
  }
  kbd {
    padding: 0.1em 0.45em;
    border: 1px solid var(--color-rule);
    border-block-end-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-size: 0.85em;
  }
  pre code {
    & .hl-kw { color: var(--hl-keyword); }
    & .hl-str { color: var(--hl-string); }
    & .hl-com { color: var(--hl-comment); font-style: italic; }
    & :is(.hl-num, .hl-lit) { color: var(--hl-number); }
    & :is(.hl-ty, .hl-var) { color: var(--hl-type); }
    & .hl-fn { color: var(--hl-function); }
    & .hl-mac { color: var(--hl-macro); }
    & :is(.hl-key, .hl-attr) { color: var(--hl-key); }
    & .hl-tag { color: var(--hl-tag); }
    & .hl-meta { color: var(--hl-comment); }
    & .hl-add { color: var(--hl-added); }
    & .hl-del { color: var(--hl-removed); }
  }
}
@layer layout {
  body {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    min-block-size: 100vh;
    min-block-size: 100svh;
  }
  .wrap {
    max-inline-size: var(--content-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 10;
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    &::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-start: 100%;
      block-size: var(--space-5);
      background: linear-gradient(
        color-mix(in srgb, var(--color-bg) 88%, transparent),
        transparent
      );
      pointer-events: none;
    }
    & .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: baseline;
      gap: var(--space-1) var(--space-4);
      padding-block: var(--space-5);
    }
  }
  .site-main {
    inline-size: 100%;
    padding-block: var(--space-8) 6rem;
    @media (width <= 480px) {
      padding-block: 3.5rem var(--space-7);
    }
  }
  .site-footer {
    background: linear-gradient(transparent, var(--color-surface));
    color: var(--color-muted);
    font-size: 0.8rem;
    & .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: var(--space-2) var(--space-4);
      padding-block: var(--space-6) var(--space-5);
    }
  }
  @media print {
    .site-header,
    .site-footer,
    .back,
    .pager {
      display: none;
    }
    body {
      display: block;
      min-block-size: 0;
    }
    .site-main {
      padding-block: 0;
    }
  }
}
@layer prose {
  .prose {
    & > :first-child {
      margin-block-start: 0;
    }
  }
  .heading-anchor {
    margin-inline-start: 0.4em;
    color: var(--color-muted);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s;
    &:visited {
      color: var(--color-muted);
    }
    :is(h1, h2, h3, h4, h5, h6):hover > &,
    &:focus-visible {
      opacity: 1;
    }
  }
  .table-wrap {
    overflow-x: auto;
    margin-block: var(--space-5);
  }
  .toc-box {
    margin-block-end: var(--space-6);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    &:not(:has(.toc)) {
      display: none;
    }
    & summary {
      color: var(--color-muted);
      font-weight: 600;
    }
    &[open] summary {
      margin-block-end: var(--space-2);
    }
  }
  .toc {
    margin: 0;
    padding: 0;
    list-style: none;
    & ol {
      margin-block: 0.3em 0;
      padding-inline-start: 1.25rem;
      list-style: none;
    }
    & li + li {
      margin-block-start: 0.3em;
    }
    & a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }
  li.task {
    list-style: none;
    margin-inline-start: -1.25rem;
    & input {
      margin: 0 0.4em 0 0;
      vertical-align: -0.1em;
    }
  }
  .footnote-ref {
    line-height: 0;
    & a {
      &::before {
        content: "[";
      }
      &::after {
        content: "]";
      }
    }
  }
  .footnotes {
    margin-block-start: var(--space-7);
    color: var(--color-muted);
    font-size: var(--text-sm);
    & ol {
      margin: 0;
    }
    & li:target {
      color: var(--color-fg);
    }
  }
}
@layer components {
  .brand-group {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    margin: 0;
  }
  .brand {
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-decoration: none;
    &,
    &:visited,
    &:hover {
      color: var(--color-fg);
    }
  }
  .tagline {
    color: var(--color-muted);
    font-size: 0.85rem;
  }
  .site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 0.92rem;
    & a {
      text-decoration: none;
      &,
      &:visited {
        color: var(--color-muted);
      }
      &:hover,
      &[aria-current="page"] {
        color: var(--color-fg);
      }
    }
  }
  .page-intro {
    margin-block-end: var(--space-6);
  }
  .post-header {
    margin-block-end: var(--space-7);
  }
  .lead {
    margin-block-end: var(--space-4);
    color: var(--color-muted);
    &:empty {
      display: none;
    }
  }
  .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) 1rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9rem;
  }
  .tags {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    & li + li {
      margin-block-start: 0;
    }
  }
  .tag {
    padding: 0.1rem 0.7rem;
    border: 1px solid var(--color-rule);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: var(--text-xs);
    & a,
    &:is(a) {
      text-decoration: none;
      &,
      &:visited {
        color: inherit;
      }
    }
    &:has(a:hover),
    &:is(a):hover {
      border-color: var(--color-accent);
      color: var(--color-link);
    }
  }
  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    & li {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin: 0;
    }
    & .tag {
      font-size: var(--text-sm);
    }
  }
  .tag-count {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }
  .tag-hash {
    margin-inline-end: 0.1em;
    color: var(--color-muted);
    font-weight: 400;
  }
  .post-list {
    container-type: inline-size;
    margin: 0;
    padding: 0;
    list-style: none;
    & li + li {
      margin-block-start: 0;
    }
  }
  .post-item {
    display: grid;
    grid-template-columns: 7.5rem 1fr;
    gap: var(--space-3) var(--space-4);
    padding-block: var(--space-4);
    & time {
      padding-block-start: 0.15rem;
      color: var(--color-muted);
      font-family: var(--font-mono);
      font-size: 0.85rem;
    }
    & > a {
      font-weight: 600;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
    & :is(.tags, .post-desc) {
      grid-column: 2;
    }
    @container (width < 30rem) {
      grid-template-columns: 1fr;
      gap: var(--space-2);
      padding-block: 1.5rem;
      & :is(.tags, .post-desc) {
        grid-column: 1;
      }
    }
  }
  .post-desc {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.92rem;
    line-height: 1.7;
  }
  .pager:not(:has(.pagination)) {
    display: none;
  }
  .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
    & li + li {
      margin-block-start: 0;
    }
    & :is(a, span) {
      display: grid;
      place-items: center;
      min-inline-size: 2.75rem;
      min-block-size: 2.75rem;
      padding-inline: var(--space-2);
      border: 1px solid var(--color-rule);
      border-radius: var(--radius);
      text-decoration: none;
    }
    & a:visited {
      color: var(--color-link);
    }
    & a:hover {
      border-color: var(--color-accent);
    }
    & [aria-current] {
      border-color: var(--color-fg);
      font-weight: 600;
    }
    & .gap {
      align-self: center;
      color: var(--color-muted);
    }
  }
  .archive-year {
    margin-block-end: var(--space-6);
    & h2 {
      display: flex;
      align-items: baseline;
      gap: var(--space-2);
      margin-block-end: var(--space-3);
    }
  }
  .back {
    margin-block-start: var(--space-8);
  }
}
@layer utilities {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-2);
    inset-block-start: -10rem;
    z-index: 100;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    &:focus {
      inset-block-start: var(--space-2);
    }
  }
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}