@charset "UTF-8";
/* ==========================================================================
   Canvas はじめてガイド — style.css
   ビルド不要 / file:// で動作 / 2024 年以降のベースライン機能のみ使用
   ========================================================================== */

@layer reset, tokens, base, layout, components, sections, utilities;

/* --------------------------------------------------------------------------
   reset — 詳細度 0
   -------------------------------------------------------------------------- */
@layer reset {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  :where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, pre, ul, ol) { margin: 0; }

  :where(ul, ol):where([role="list"]) {
    padding-inline-start: 0;
    list-style: none;
  }

  :where(img, svg, canvas, video) {
    display: block;
    max-inline-size: 100%;
  }

  :where(a) {
    color: inherit;
    text-underline-offset: .22em;
  }

  :where(button, input, select, textarea) {
    font: inherit;
    color: inherit;
  }

  :where(button) { cursor: pointer; }

  :where(table) { border-collapse: collapse; }

  :where(summary) { cursor: pointer; }

  :where(:focus-visible) {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
  }
}

/* --------------------------------------------------------------------------
   tokens — デザイントークン
   -------------------------------------------------------------------------- */
@layer tokens {
  :root {
    color-scheme: light dark;

    /* ブランド（藍）と差し色（朱） */
    --brand-900: #0d2338;
    --brand-700: #1b4e77;
    --brand-500: #2f80b8;
    --brand-300: #9dc6e2;
    --accent-600: #d94f24;
    --accent-500: #ff6a3d;
    --accent-200: #ffd9cd;

    /* 地色 */
    --paper: #f6f5f2;
    --surface: #ffffff;
    --surface-2: #eef3f7;
    --ink: #14202b;
    --ink-soft: rgb(20 32 43 / .66);
    --ink-faint: rgb(20 32 43 / .42);
    --line: rgb(13 35 56 / .13);
    --line-strong: rgb(13 35 56 / .26);

    /* コード面（テーマ非依存で常に濃色） */
    --code-bg: #0f1f2e;
    --code-ink: #dde8f1;
    --code-key: #7fd1ff;
    --code-str: #ffc48a;
    --code-num: #b6e59a;
    --code-com: #7690a5;
    --code-fn: #ffe08a;
    --code-tag: #7fd1ff;
    --code-attr: #b6e59a;

    --focus: var(--accent-500);

    /* タイポグラフィ */
    --font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Noto Sans Mono", monospace;

    /* 寸法 */
    --wrap: 1120px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --header-h: 58px;
    --section-gap: clamp(3.5rem, 8vw, 6rem);
    --radius-s: 10px;
    --radius-m: 16px;
    --radius-l: 24px;
    --shadow-s: 0 2px 8px -4px rgb(13 35 56 / .28);
    --shadow-m: 0 16px 40px -20px rgb(13 35 56 / .38);
    --ease: cubic-bezier(.22, .68, .32, 1);
  }

  /* ダークテーマ（システム設定に追従。data-theme="light" のときは無効） */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --brand-300: #7fb4d6;
      --paper: #101820;
      --surface: #16222d;
      --surface-2: #1d2c39;
      --ink: #e6eef5;
      --ink-soft: rgb(230 238 245 / .72);
      --ink-faint: rgb(230 238 245 / .46);
      --line: rgb(157 198 226 / .18);
      --line-strong: rgb(157 198 226 / .34);
      --shadow-s: 0 2px 8px -4px rgb(0 0 0 / .6);
      --shadow-m: 0 16px 40px -20px rgb(0 0 0 / .75);
    }
  }

  /* 手動でダークを選んだとき */
  :root[data-theme="dark"] {
    --brand-300: #7fb4d6;
    --paper: #101820;
    --surface: #16222d;
    --surface-2: #1d2c39;
    --ink: #e6eef5;
    --ink-soft: rgb(230 238 245 / .72);
    --ink-faint: rgb(230 238 245 / .46);
    --line: rgb(157 198 226 / .18);
    --line-strong: rgb(157 198 226 / .34);
    --shadow-s: 0 2px 8px -4px rgb(0 0 0 / .6);
    --shadow-m: 0 16px 40px -20px rgb(0 0 0 / .75);
  }
}

/* --------------------------------------------------------------------------
   base
   -------------------------------------------------------------------------- */
@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }

  body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: clamp(.95rem, .9rem + .2vw, 1.0625rem);
    line-height: 1.85;
    font-feature-settings: "palt";
  }

  h1, h2, h3, h4 {
    line-height: 1.35;
    text-wrap: balance;
    font-weight: 700;
  }

  p { text-wrap: pretty; }

  a { color: var(--brand-500); }

  a:hover { color: var(--accent-500); }

  code, pre, kbd { font-family: var(--font-mono); }

  ::selection {
    background-color: var(--accent-200);
    color: var(--brand-900);
  }
}

/* --------------------------------------------------------------------------
   layout
   -------------------------------------------------------------------------- */
@layer layout {
  .wrap {
    inline-size: min(100% - var(--gutter) * 2, var(--wrap));
    margin-inline: auto;
  }

  .layout {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);

    /* グリッドアイテムの min-width: auto を切る（表やコードが列を押し広げないように） */
    & > * { min-inline-size: 0; }

    @media (width >= 68rem) {
      grid-template-columns: 15rem minmax(0, 1fr);
      align-items: start;
    }
  }

  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background-color: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px) saturate(1.4);
    border-block-end: 1px solid var(--line);
  }

  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    block-size: var(--header-h);
  }

  .section {
    scroll-margin-block-start: calc(var(--header-h) + 1.5rem);

    &:not(:first-child) { margin-block-start: var(--section-gap); }
  }
}

/* --------------------------------------------------------------------------
   components
   -------------------------------------------------------------------------- */
@layer components {

  /* --- ブランド --------------------------------------------------------- */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;

    & .brand-mark {
      inline-size: 28px;
      block-size: 28px;
      flex: none;
    }

    & b { color: var(--accent-500); }

    /* 狭い画面ではロゴマークだけにする。文字を残すとヘッダーの高さから溢れる。
       読み上げには残したいので、消さずに視覚的にだけ隠す */
    @media (width < 34rem) {
      & > span {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
    }
  }

  /* --- 進捗バー --------------------------------------------------------- */
  .progress {
    block-size: 3px;
    background-color: var(--line);
    overflow: hidden;
  }

  .progress-bar {
    display: block;
    block-size: 100%;
    background-image: linear-gradient(90deg, var(--brand-500), var(--accent-500));
    transform: scaleX(0);
    transform-origin: 0 50%;
  }

  /* --- テーマ切り替え --------------------------------------------------- */
  .theme {
    display: grid;
    place-items: center;
    inline-size: 38px;
    block-size: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--ink-soft);
    transition: color .2s var(--ease), border-color .2s var(--ease);

    &:hover {
      color: var(--accent-500);
      border-color: var(--accent-500);
    }

    & svg {
      inline-size: 18px;
      block-size: 18px;
    }

    & .theme-moon { display: none; }
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme {
      & .theme-sun { display: none; }
      & .theme-moon { display: block; }
    }
  }

  :root[data-theme="dark"] .theme {
    & .theme-sun { display: none; }
    & .theme-moon { display: block; }
  }

  /* --- ボタン ----------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .6rem 1.15rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color .2s var(--ease), color .2s var(--ease),
                border-color .2s var(--ease), translate .2s var(--ease);

    &:hover { translate: 0 -2px; }
  }

  .btn-primary {
    background-color: var(--accent-500);
    color: #fff;

    &:hover {
      background-color: var(--accent-600);
      color: #fff;
    }
  }

  .btn-outline {
    border-color: rgb(255 255 255 / .5);
    color: #fff;

    &:hover {
      background-color: rgb(255 255 255 / .12);
      color: #fff;
    }
  }

  .btn-ghost {
    padding: .3rem .75rem;
    border-color: var(--line-strong);
    background-color: transparent;
    color: var(--ink-soft);
    font-size: .8rem;

    &:hover {
      border-color: var(--accent-500);
      color: var(--accent-500);
    }
  }

  /* --- 目次 ------------------------------------------------------------- */
  .toc-side {
    display: none;

    @media (width >= 68rem) {
      display: block;
      position: sticky;
      inset-block-start: calc(var(--header-h) + 1.25rem);
      max-block-size: calc(100dvh - var(--header-h) - 2.5rem);
      overflow: auto;
      overscroll-behavior: contain;
      padding-inline-end: .5rem;
    }
  }

  .toc-title {
    margin-block-end: .75rem;
    color: var(--ink-faint);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
  }

  .toc-list {
    display: grid;
    gap: .1rem;
    font-size: .84rem;
    line-height: 1.5;

    & a {
      display: grid;
      grid-template-columns: 1.9rem 1fr;
      gap: .3rem;
      padding: .38rem .5rem;
      border-radius: 8px;
      color: var(--ink-soft);
      text-decoration: none;
      transition: background-color .18s var(--ease), color .18s var(--ease);
    }

    & a:hover {
      background-color: var(--surface-2);
      color: var(--ink);
    }

    & a[aria-current="true"] {
      background-color: color-mix(in srgb, var(--brand-500) 14%, transparent);
      color: var(--brand-500);
      font-weight: 700;
    }

    & span {
      color: var(--ink-faint);
      font-family: var(--font-mono);
      font-size: .76rem;
    }

    & a[aria-current="true"] span { color: var(--accent-500); }
  }

  .toc-mobile {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    padding: .35rem 1rem;

    & > summary {
      padding-block: .6rem;
      font-weight: 700;
      font-size: .9rem;
      list-style: none;

      &::-webkit-details-marker { display: none; }

      &::after {
        content: "＋";
        float: inline-end;
        color: var(--accent-500);
      }
    }

    &[open] > summary::after { content: "−"; }

    & .toc-list { padding-block-end: .75rem; }

    @media (width >= 68rem) { display: none; }
  }

  /* --- セクション見出し ------------------------------------------------- */
  .section-num {
    margin-block-end: .35rem;
    color: var(--accent-500);
    font-family: var(--font-mono);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .18em;
  }

  .section-title {
    font-size: clamp(1.4rem, 1.15rem + 1.3vw, 2rem);
    letter-spacing: .01em;
  }

  .section-title + .lead { margin-block-start: .85rem; }

  .lead {
    color: var(--ink-soft);
  }

  /* 日本語は 1 文字の幅がそろっているので、両端揃えにすると右端がきれいに並ぶ */
  .section :is(p, li, dd) {
    text-align: justify;
  }

  .section > * + * { margin-block-start: 1.25rem; }

  .h3 {
    margin-block-start: 2rem;
    font-size: 1.1rem;

    & + p { margin-block-start: .6rem; }
  }

  /* --- 本文リスト ------------------------------------------------------- */
  .list {
    display: grid;
    gap: .55rem;
    padding-inline-start: 1.3em;
    color: var(--ink-soft);

    & strong { color: var(--ink); }

    & code { color: var(--brand-500); }
  }

  /* --- 本文中のインラインコード ---------------------------------------- */
  p code,
  li code,
  td code,
  .note code {
    padding: .12em .4em;
    border-radius: 5px;
    background-color: color-mix(in srgb, var(--brand-500) 12%, transparent);
    font-size: .88em;
    /* 収まらないときだけ折る。break-all だと「margi / n」のように語の途中で切れる */
    overflow-wrap: break-word;
  }

  /* --- 注記 ------------------------------------------------------------- */
  .note {
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-inline-start: 4px solid var(--brand-500);
    border-radius: var(--radius-s);
    background-color: var(--surface);
    color: var(--ink-soft);
    font-size: .92rem;

    & > * + * { margin-block-start: .5rem; }
  }

  .note-label {
    display: block;
    margin-block-end: .3rem;
    color: var(--brand-500);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
  }

  .note-warn {
    border-inline-start-color: var(--accent-500);

    & .note-label { color: var(--accent-500); }
  }

  /* --- コードブロック --------------------------------------------------- */
  .code-block {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--code-bg);
    overflow: hidden;
  }

  .code-bar,
  .demo-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .75rem;
    background-color: rgb(255 255 255 / .05);
    border-block-end: 1px solid rgb(255 255 255 / .08);
  }

  .code-label,
  .demo-label {
    margin-inline-end: auto;
    color: rgb(221 232 241 / .6);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .code-block .btn-ghost,
  .demo-bar .btn-ghost {
    border-color: rgb(255 255 255 / .22);
    color: rgb(221 232 241 / .8);

    &:hover {
      border-color: var(--accent-500);
      color: var(--accent-500);
    }
  }

  pre {
    margin: 0;
    padding: 1rem 1.15rem;
    overflow-x: auto;
    max-block-size: 30rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: var(--code-ink);
    font-size: .82rem;
    line-height: 1.75;
    tab-size: 2;

    & code { white-space: pre; }
  }

  .tok-com { color: var(--code-com); font-style: italic; }
  .tok-str { color: var(--code-str); }
  .tok-num { color: var(--code-num); }
  .tok-key { color: var(--code-key); }
  .tok-fn  { color: var(--code-fn); }
  .tok-tag { color: var(--code-tag); }
  .tok-att { color: var(--code-attr); }

  /* --- 実行できるデモ --------------------------------------------------- */
  .demo {
    display: grid;
    margin: 0;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    overflow: hidden;
    box-shadow: var(--shadow-s);
  }

  .demo-stage {
    display: grid;
    place-items: center;
    padding: clamp(.75rem, 2vw, 1.25rem);
    /* 市松模様＝透明な部分がひと目で分かる */
    background-color: var(--surface-2);
    background-image:
      repeating-conic-gradient(
        color-mix(in srgb, var(--ink) 5%, transparent) 0% 25%,
        transparent 0% 50%
      );
    background-size: 20px 20px;
  }

  .demo-stage canvas {
    border-radius: 6px;
    box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-s);
  }

  .demo-stage canvas[data-nopan] { touch-action: none; }

  .demo-error {
    margin: 0;
    padding: .6rem 1rem;
    background-color: color-mix(in srgb, var(--accent-500) 16%, transparent);
    color: var(--accent-600);
    font-family: var(--font-mono);
    font-size: .78rem;
  }

  .demo-source {
    background-color: var(--code-bg);
  }

  .demo-hint {
    margin: 0;
    padding: .55rem 1rem;
    border-block-start: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-faint);
    font-size: .8rem;
  }

  /* --- ライブプレビュー --- */
  .preview-stage {
    padding: clamp(.6rem, 2vw, 1rem);
    background-color: var(--surface-2);
    background-image:
      repeating-conic-gradient(
        color-mix(in srgb, var(--ink) 5%, transparent) 0% 25%,
        transparent 0% 50%
      );
    background-size: 20px 20px;

    & iframe {
      display: block;
      inline-size: 100%;
      block-size: 200px;
      border: 0;
      border-radius: 6px;
      background-color: #fff;
      box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-s);
    }
  }

  /* --- 実行結果（console） --- */
  .console-stage {
    padding: clamp(.6rem, 2vw, 1rem);
    background-color: var(--surface-2);

    & pre {
      margin: 0;
      padding: .85rem 1rem;
      max-block-size: 16rem;
      border-radius: 6px;
      background-color: #0f1f2e;
      color: #b6e59a;
      font-size: .82rem;
      line-height: 1.7;
      white-space: pre-wrap;
      word-break: break-word;
    }

    & pre.is-error { color: #ff9d7a; }
  }

  .console-stage::before {
    content: "実行結果";
    display: block;
    margin-block-end: .4rem;
    color: var(--ink-faint);
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
  }

  /* --- 用語の定義リスト --- */
  .terms {
    display: grid;
    gap: .1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    overflow: hidden;

    & > div {
      display: grid;
      gap: .15rem .9rem;
      padding: .8rem 1rem;
      border-block-end: 1px solid var(--line);

      @media (width >= 40rem) {
        grid-template-columns: 11rem minmax(0, 1fr);
        align-items: baseline;
      }
    }

    & > div:last-child { border-block-end: 0; }

    & dt {
      color: var(--brand-500);
      font-family: var(--font-mono);
      font-size: .84rem;
      font-weight: 700;
      word-break: break-all;
    }

    & dd {
      margin: 0;
      color: var(--ink-soft);
      font-size: .9rem;
    }
  }

  /* --- 比較カード（コンテナクエリ） ------------------------------------- */
  .compare {
    display: grid;
    gap: 1rem;

    @media (width >= 46rem) { grid-template-columns: repeat(3, 1fr); }
  }

  .compare-item {
    container-type: inline-size;
    container-name: cmp;
    padding: 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--surface);

    & h3 {
      margin-block-end: .4rem;
      font-size: 1rem;
    }

    & p {
      color: var(--ink-soft);
      font-size: .88rem;
    }

    & .compare-tag {
      display: inline-block;
      margin-block-end: .6rem;
      padding: .15rem .6rem;
      border-radius: 999px;
      background-color: color-mix(in srgb, var(--brand-500) 14%, transparent);
      color: var(--brand-500);
      font-family: var(--font-mono);
      font-size: .7rem;
      font-weight: 700;
    }

    /* 幅に余裕があるときだけ見出しとタグを横並びにする */
    @container cmp (width >= 22rem) {
      & .compare-head {
        display: flex;
        align-items: center;
        gap: .6rem;
      }

      & .compare-tag { margin-block-end: 0; }

      & h3 { margin-block-end: 0; }
    }
  }

  /* --- 表 --------------------------------------------------------------- */
  .table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--surface);
  }

  .table {
    inline-size: 100%;
    min-inline-size: 34rem;
    font-size: .88rem;

    & th,
    & td {
      padding: .7rem .9rem;
      border-block-end: 1px solid var(--line);
      text-align: start;
      vertical-align: top;
    }

    & thead th {
      background-color: var(--surface-2);
      color: var(--ink-soft);
      font-size: .78rem;
      letter-spacing: .06em;
      white-space: nowrap;
    }

    & tbody tr:last-child :is(th, td) { border-block-end: 0; }

    & td:first-child { white-space: nowrap; }
  }

  /* --- 手順 ------------------------------------------------------------- */
  .steps {
    display: grid;
    gap: .75rem;
    counter-reset: step;

    & > li {
      position: relative;
      padding: 1rem 1.15rem 1rem 3.25rem;
      border: 1px solid var(--line);
      border-radius: var(--radius-m);
      background-color: var(--surface);
      counter-increment: step;
    }

    & > li::before {
      content: counter(step);
      position: absolute;
      inset-block-start: 1rem;
      inset-inline-start: 1rem;
      display: grid;
      place-items: center;
      inline-size: 1.6rem;
      block-size: 1.6rem;
      border-radius: 50%;
      background-color: var(--brand-500);
      color: #fff;
      font-family: var(--font-mono);
      font-size: .8rem;
      font-weight: 700;
    }

    & strong { display: block; }

    & p {
      color: var(--ink-soft);
      font-size: .9rem;
    }
  }

  /* --- 章の区切り（発展編の見出し帯） --- */
  .chapter-break {
    margin-block-start: var(--section-gap);
    padding: 1.35rem 1.5rem;
    border-radius: var(--radius-m);
    background-image: linear-gradient(115deg, var(--brand-700) 0%, var(--brand-500) 100%);
    color: #fff;
    box-shadow: var(--shadow-m);

    & span {
      display: inline-block;
      padding: .15rem .8rem;
      border: 1px solid rgb(255 255 255 / .45);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .2em;
    }

    & p {
      margin-block-start: .6rem;
      color: rgb(255 255 255 / .86);
      font-size: .92rem;
    }
  }

  /* --- ダウンロード案内 --- */
  .download-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .85rem;
    margin-block-start: 1rem;
    padding: .9rem 1.1rem;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-m);
    background-color: var(--surface);

    & p {
      max-inline-size: 46ch;
      color: var(--ink-soft);
      font-size: .85rem;
    }
  }

  .toc-group {
    margin-block: 1rem .3rem;
    padding-inline-start: .55rem;
    color: var(--ink-faint);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
  }

  /* --- ページ間ナビゲーション --- */
  .header-nav::-webkit-scrollbar { display: none; }

  .header-nav {
    display: flex;
    gap: .25rem;
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline-start: auto;

    /* 右寄せは justify-content ではなく、先頭要素の auto マージンで行う。
       justify-content: flex-end だと、あふれた先頭の項目がスクロールで出せない */
    & > a:first-child { margin-inline-start: auto; }
    margin-inline-end: .75rem;
    font-size: .84rem;
    font-weight: 700;

    & a {
      padding: .35rem .8rem;
      border-radius: 999px;
      flex: none;
      white-space: nowrap;
      color: var(--ink-soft);
      text-decoration: none;
      transition: background-color .2s var(--ease), color .2s var(--ease);
    }

    & a:hover {
      background-color: var(--surface-2);
      color: var(--ink);
    }

    & a[aria-current="page"] {
      background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
      color: var(--brand-500);
    }

     (width < 30rem) {
      font-size: .78rem;

      & a { padding: .3rem .55rem; }
    }
  }

  /* --- 次のページへのカード --- */
  .next-card {
    display: block;
    padding: clamp(1.25rem, 4vw, 1.75rem);
    border-radius: var(--radius-m);
    background-image: linear-gradient(115deg, var(--brand-700) 0%, var(--brand-500) 100%);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-m);
    transition: translate .2s var(--ease), box-shadow .2s var(--ease);

    &:hover {
      color: #fff;
      translate: 0 -3px;
    }

    & strong {
      display: block;
      margin-block: .6rem .4rem;
      font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
    }

    & .next-card-label {
      display: inline-block;
      padding: .15rem .8rem;
      border: 1px solid rgb(255 255 255 / .45);
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .2em;
    }

    & > span:last-child {
      display: block;
      color: rgb(255 255 255 / .84);
      font-size: .9rem;
    }
  }

  /* --- 基本形と完成形の見出し --- */
  .variant {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .5rem .75rem;
    margin-block-start: 2.25rem;

    & h3 { font-size: 1.05rem; }

    & .variant-tag {
      padding: .1rem .65rem;
      border-radius: 999px;
      font-family: var(--font-mono);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .1em;
    }

    & .variant-tag.is-basic {
      background-color: color-mix(in srgb, var(--brand-500) 16%, transparent);
      color: var(--brand-500);
    }

    & .variant-tag.is-full {
      background-color: color-mix(in srgb, var(--accent-500) 20%, transparent);
      color: var(--accent-600);
    }
  }

  .variant + p { margin-block-start: .6rem; }

  .feature-list {
    display: grid;
    gap: .4rem;
    margin-block-start: .8rem;
    padding-inline-start: 1.3em;
    color: var(--ink-soft);
    font-size: .9rem;

    & strong { color: var(--ink); }
  }

  /* --- リンクカード ----------------------------------------------------- */
  .links {
    display: grid;
    gap: .85rem;

    @media (width >= 42rem) { grid-template-columns: repeat(2, 1fr); }
  }

  .link-card {
    display: block;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    background-color: var(--surface);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s var(--ease), translate .2s var(--ease), box-shadow .2s var(--ease);

    &:hover {
      border-color: var(--accent-500);
      color: var(--ink);
      translate: 0 -3px;
      box-shadow: var(--shadow-m);
    }

    & strong {
      display: block;
      font-size: .98rem;
    }

    & span {
      color: var(--ink-soft);
      font-size: .84rem;
    }
  }
}

/* --------------------------------------------------------------------------
   sections
   -------------------------------------------------------------------------- */
@layer sections {

  /* --- ヒーロー --------------------------------------------------------- */
  .hero {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-block-size: clamp(22rem, 46vw, 30rem);
    padding-block: clamp(3rem, 8vw, 5rem);
    background-image:
      radial-gradient(120% 90% at 12% 0%, #1b4e77 0%, transparent 60%),
      radial-gradient(100% 80% at 92% 10%, #2f80b8 0%, transparent 55%),
      linear-gradient(160deg, #0d2338 0%, #10293f 55%, #0d2338 100%);
    color: #fff;
    overflow: hidden;
  }

  .hero-canvas {
    position: absolute;
    inset: 0;
    z-index: -1;
    inline-size: 100%;
    block-size: 100%;
  }

  .hero-inner {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 1.15rem;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .9rem;
    border: 1px solid rgb(255 255 255 / .28);
    border-radius: 999px;
    background-color: rgb(255 255 255 / .08);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .14em;
  }

  .hero-title {
    font-size: clamp(1.9rem, 1.2rem + 4vw, 3.6rem);
    letter-spacing: .01em;
    line-height: 1.25;

    & em {
      font-style: normal;
      color: var(--accent-500);
    }
  }

  .hero-text {
    max-inline-size: 40ch;
    color: rgb(255 255 255 / .82);
    font-size: clamp(.92rem, .88rem + .3vw, 1.05rem);
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    margin-block-start: .5rem;
  }

  .hero-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem .75rem;
    margin-block-start: .75rem;
    color: rgb(255 255 255 / .6);
    font-size: .78rem;

    & li::before {
      content: "◆";
      margin-inline-end: .35rem;
      color: var(--accent-500);
      font-size: .6em;
      vertical-align: .2em;
    }
  }

  /* --- フッター --------------------------------------------------------- */
  .site-footer {
    padding-block: clamp(2.5rem, 6vw, 4rem);
    border-block-start: 1px solid var(--line);
    background-color: var(--surface);
    color: var(--ink-soft);
    font-size: .86rem;
  }

  .footer-inner {
    display: grid;
    gap: 1.5rem;
  }

  .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.1rem;

    & a { text-decoration: none; }

    & a:hover { text-decoration: underline; }
  }

  .footer-nav-title {
    margin-block-end: .55rem;
    color: var(--ink-faint);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
  }

  /* 2 段目。サイト内の 6 ページと、先頭へ戻る導線 */
  .footer-nav-site {
    padding-block-start: 1.4rem;
    border-block-start: 1px solid var(--line);

    /* 末尾の 2 本だけ右端へ。狭い画面では折り返すので、そのまま並べる */
    @media (width >= 46rem) {
      & > .footer-nav-home { margin-inline-start: auto; }
    }
  }
}

/* --------------------------------------------------------------------------
   utilities
   -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden:not(:focus):not(:active) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .skip-link {
    position: absolute;
    inset-block-start: .5rem;
    inset-inline-start: .5rem;
    z-index: 100;
    padding: .55rem 1rem;
    border-radius: 8px;
    background-color: var(--accent-500);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    translate: 0 -200%;

    &:focus { translate: 0 0; }
  }

  /* 出現アニメーション */
  .section {
    opacity: 1;
  }

  .js .section[data-reveal] {
    opacity: 0;
    translate: 0 18px;
    transition: opacity .6s var(--ease), translate .6s var(--ease);
  }

  .js .section[data-reveal].is-revealed {
    opacity: 1;
    translate: 0 0;
  }

  /* JS が無いときはデモの説明を出す */
  .no-js .demo-stage::after {
    content: "このデモは JavaScript を有効にすると動きます。下のコードは読めます。";
    display: block;
    padding: 1rem;
    color: var(--ink-soft);
    font-size: .85rem;
    text-align: center;
  }

  .no-js .demo-bar .btn-ghost { display: none; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }

    .js .section[data-reveal] {
      opacity: 1;
      translate: 0 0;
    }
  }

  @media print {
    .site-header,
    .toc-side,
    .toc-mobile,
    .hero-canvas,
    .demo-bar { display: none; }

    body { background: #fff; }
  }
}