:root {
        --bg: #ffffff;
        --bg-soft: #f8fafc;
        --text: #1e293b;
        --text-muted: #64748b;
        --border: #e2e8f0;
        --accent: #4f46e5;
        --accent-soft: rgba(79, 70, 229, 0.08);
        --code-bg: #0f172a;
        --code-text: #e2e8f0;
        --result-bg: #f8fafc;
      }
      @media (prefers-color-scheme: dark) {
        :root {
          --bg: #0f172a;
          --bg-soft: #1e293b;
          --text: #e2e8f0;
          --text-muted: #94a3b8;
          --border: #334155;
          --accent: #818cf8;
          --accent-soft: rgba(129, 140, 248, 0.12);
          --code-bg: #020617;
          --code-text: #e2e8f0;
          --result-bg: #1e293b;
        }
      }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body {
        font-family: 'Noto Sans JP', 'Outfit', sans-serif;
        background: var(--bg);
        color: var(--text);
        line-height: 1.9;
        font-size: 16px;
      }
      .site-header {
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        position: sticky;
        top: 0;
        z-index: 10;
      }
      .site-header-inner {
        max-width: 860px;
        margin: 0 auto;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--text);
        font-family: 'Outfit', sans-serif;
        font-weight: 700;
        font-size: 18px;
      }
      .logo-icon {
        width: 32px; height: 32px;
        border-radius: 8px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Georgia, serif;
        font-size: 18px;
      }
      .logo .text-accent { color: var(--accent); }
      .header-cta {
        display: inline-block;
        background: var(--accent);
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        font-size: 13px;
        padding: 8px 16px;
        border-radius: 8px;
        white-space: nowrap;
      }
      .header-cta:hover { opacity: 0.9; }
      main {
        max-width: 860px;
        margin: 0 auto;
        padding: 32px 20px 64px;
      }
      .breadcrumb {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 24px;
      }
      .breadcrumb a { color: var(--accent); text-decoration: none; }
      h1 {
        font-size: 30px;
        line-height: 1.5;
        margin-bottom: 16px;
        letter-spacing: 0.02em;
      }
      .lead { color: var(--text-muted); margin-bottom: 24px; }
      .lead a { color: var(--accent); }
      h2 {
        font-size: 23px;
        margin: 56px 0 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid var(--accent);
        line-height: 1.5;
      }
      h3 { font-size: 18px; margin: 32px 0 12px; }
      p { margin-bottom: 16px; }
      .toc {
        background: var(--bg-soft);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 20px 24px;
        margin: 32px 0;
      }
      .toc-title { font-weight: 700; margin-bottom: 8px; }
      .toc ol { padding-left: 22px; }
      .toc a { color: var(--accent); text-decoration: none; }
      .toc a:hover { text-decoration: underline; }
      .table-wrapper { overflow-x: auto; margin: 20px 0; }
      table {
        border-collapse: collapse;
        width: 100%;
        font-size: 14px;
        min-width: 560px;
      }
      th, td {
        border: 1px solid var(--border);
        padding: 10px 14px;
        text-align: left;
        vertical-align: top;
      }
      th { background: var(--accent-soft); font-weight: 700; white-space: nowrap; }
      td code, p code, li code {
        background: var(--accent-soft);
        color: var(--accent);
        border-radius: 4px;
        padding: 2px 6px;
        font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
        font-size: 0.9em;
        word-break: break-all;
      }
      .example {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden;
        margin: 20px 0;
      }
      @media (max-width: 640px) {
        .example { grid-template-columns: 1fr; }
      }
      .example-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        padding: 8px 16px 0;
      }
      .example-code {
        background: var(--code-bg);
        color: var(--code-text);
      }
      .example-code .example-label { color: #94a3b8; }
      .example-code pre {
        padding: 10px 16px 16px;
        overflow-x: auto;
        font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
        font-size: 13.5px;
        line-height: 1.7;
      }
      .example-result { background: var(--result-bg); }
      .example-result .example-label { color: var(--text-muted); }
      .example-result .example-body { padding: 10px 16px 16px; font-size: 14.5px; }
      .example-result h1, .example-result h2, .example-result h3 {
        border: none; margin: 8px 0; padding: 0;
      }
      .example-result h1 { font-size: 22px; }
      .example-result h2 { font-size: 19px; }
      .example-result h3 { font-size: 16px; }
      .example-result ul, .example-result ol { padding-left: 22px; margin: 8px 0; }
      .example-result blockquote {
        border-left: 4px solid var(--border);
        padding-left: 12px;
        color: var(--text-muted);
        margin: 8px 0;
      }
      .example-result table { min-width: 0; font-size: 13px; margin: 8px 0; }
      .example-result pre {
        background: var(--code-bg);
        color: var(--code-text);
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 13px;
        overflow-x: auto;
        font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
      }
      .example-result hr { border: none; border-top: 2px solid var(--border); margin: 12px 0; }
      .example-result a { color: var(--accent); }
      .example-result img.demo-img {
        max-width: 120px;
        border-radius: 8px;
        display: block;
      }
      .cta-box {
        background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
        border: 1px solid var(--accent);
        border-radius: 12px;
        padding: 24px 28px;
        margin: 40px 0;
        text-align: center;
      }
      .cta-box p { margin-bottom: 16px; }
      .cta-button {
        display: inline-block;
        background: var(--accent);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        padding: 12px 32px;
        border-radius: 10px;
        font-size: 15px;
      }
      .cta-button:hover { opacity: 0.9; }
      .note {
        background: var(--accent-soft);
        border-left: 4px solid var(--accent);
        border-radius: 0 8px 8px 0;
        padding: 12px 16px;
        margin: 16px 0;
        font-size: 14.5px;
      }
      .site-footer {
        border-top: 1px solid var(--border);
        padding: 24px 20px;
        text-align: center;
        font-size: 13px;
        color: var(--text-muted);
      }
      .site-footer a { color: var(--accent); text-decoration: none; }