:root {
    --bg: #f5f5f7;
    --card: #ffffff;
    --ink: #1d1d1f;
    --ink-2: #6e6e73;
    --ink-3: #86868b;
    --line: #d2d2d7;
    --blue: #0071e3;
    --blue-hover: #0077ed;
    --link: #0066cc;
    --blue-soft: rgba(0, 113, 227, .08);
    --on-blue: #ffffff;
    --safe: #1d6b4f;
    --on-safe: #ffffff;
    --safe-bg: #e9f4ee;
    --warn: #b64400;
    --warn-bg: #fff4ec;
    --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, "Noto Sans JP", monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;
      --bg: #000000;
      --card: #1d1d1f;
      --ink: #f5f5f7;
      --ink-2: #a1a1a6;
      --ink-3: #86868b;
      --line: #424245;
      --blue: #0071e3;
      --blue-hover: #0077ed;
      --link: #2997ff;
      --blue-soft: rgba(41, 151, 255, .14);
      --safe: #6fd3a5;
      --on-safe: #0b1f16;
      --safe-bg: #10251c;
      --warn: #ff9f5a;
      --warn-bg: #2b1c10;
    }
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #000000;
    --card: #1d1d1f;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --line: #424245;
    --blue: #0071e3;
    --blue-hover: #0077ed;
    --link: #2997ff;
    --blue-soft: rgba(41, 151, 255, .14);
    --safe: #6fd3a5;
    --on-safe: #0b1f16;
    --safe-bg: #10251c;
    --warn: #ff9f5a;
    --warn-bg: #2b1c10;
  }

  html { overflow-x: clip; }
  * { box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
    padding-inline: 16px;
    padding-block: 0 72px;
  }

  /* 上部バー */
  .bar {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
    margin-inline: -16px; padding-inline: 16px;
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  }
  .bar-in { max-width: 980px; margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--ink); }
  .brand .brand-icon { width: 28px; height: 28px; flex: none; border-radius: 7px; display: block; }
  .brand .navi { color: var(--blue); }

  .badge {
    display: inline-flex; align-items: center; gap: 6px; flex: none;
    font: inherit; font-size: 13px; font-weight: 700; color: var(--safe); background: var(--safe-bg);
    border: 0; border-radius: 999px; padding: 6px 12px; cursor: pointer; text-decoration: none;
  }
  .badge:hover { text-decoration: underline; }
  .badge:focus-visible { outline: 2px solid var(--safe); outline-offset: 2px; }
  .badge svg { width: 14px; height: 14px; flex: none; }
  @media (max-width: 420px) { .badge .long { display: none; } }
  @media (max-width: 380px) { .badge .mid { display: none; } }
  .brand > span { white-space: nowrap; }

  .progress { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding-bottom: 10px; }
  .progress i { display: block; height: 3px; border-radius: 2px; background: var(--line); transition: background .3s; }
  .progress i.on { background: var(--ink); }
  .progress i.now { background: var(--blue); }
  .progress[hidden] { display: none !important; }

  main { max-width: 980px; margin: 0 auto; padding-top: clamp(48px, 9vw, 96px); display: flex; flex-direction: column; gap: 48px; }

  /* 見出し */
  .head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .eyebrow { font-size: 17px; font-weight: 700; color: var(--blue); margin: 0; }
  .headline {
    margin: 0; font-weight: 700; letter-spacing: -.01em;
    font-size: clamp(30px, 6.4vw, 56px); line-height: 1.15; text-wrap: balance; max-width: 16em;
  }
  .headline:focus { outline: none; }
  .sub { margin: 0; font-size: clamp(17px, 2.4vw, 21px); color: var(--ink-2); max-width: 32em; text-wrap: balance; }
  .crumb {
    display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 15px; color: var(--ink);
    background: var(--card); border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer;
  }
  .crumb span { color: var(--link); font-size: 13px; }

  /* 選択肢 */
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 820px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
  .tile {
    appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
    background: var(--card); border-radius: 18px; padding: 24px 24px 22px;
    display: flex; flex-direction: column; gap: 6px; min-height: 132px; min-width: 0;
    box-shadow: inset 0 0 0 1px transparent;
    transition: transform .25s ease, box-shadow .2s ease;
  }
  .tile:hover { transform: scale(1.015); }
  .tile:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
  .tile .num { font-size: 12px; color: var(--ink-3); font-weight: 500; }
  .tile strong { font-size: clamp(17px, 2.2vw, 21px); font-weight: 700; line-height: 1.3; }
  .tile span.d { font-size: 14px; color: var(--ink-2); }
  @media (max-width: 480px) { .tile { padding: 18px 16px 16px; min-height: 112px; } }
  .tile[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue); }
  .tile[aria-pressed="true"] .num { color: var(--blue); }
  .tile.other strong { color: var(--link); }

  .tile.soon { cursor: default; opacity: .55; }
  .tile.soon:hover { transform: none; }
  .tile .soon-tag { align-self: flex-start; font-size: 11px; font-weight: 700; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 2px 8px; margin-top: 2px; }

  /* 環境の選択 */
  .envs { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 720px) { .envs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .env {
    appearance: none; border: 0; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
    background: var(--card); border-radius: 22px; padding: 20px 20px 22px;
    display: flex; flex-direction: column; gap: 14px; min-width: 0;
    box-shadow: inset 0 0 0 1px transparent; transition: transform .25s ease, box-shadow .2s ease;
  }
  .env:hover { transform: scale(1.012); }
  .env:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
  .env[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue); }
  .env .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--bg); color: var(--ink); display: grid; place-items: center; }
  .env .ico svg { width: 28px; height: 28px; }
  .env[aria-pressed="true"] .ico { background: var(--blue-soft); color: var(--blue); }
  .env strong { font-size: 21px; font-weight: 700; line-height: 1.3; }
  .env .apps { font-size: 14px; color: var(--ink-2); }
  .env ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--ink-2); }
  .env ul li::before { content: "・"; }
  .env.unknown .ico { color: var(--ink-2); }

  .mock .m-frame { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
  .mock .m-bar { fill: var(--bg); }
  .mock .m-line { fill: var(--line); }
  .mock .m-grid { stroke: var(--line); stroke-width: 1; fill: none; }
  .mock .m-text { fill: var(--ink-2); font-family: var(--mono); font-size: 11px; }
  .mock .m-strong { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 700; }
  .mock .m-accent { fill: var(--blue); }
  .mock .m-dot { fill: var(--ink-3); }

  .check { display: flex; flex-direction: column; gap: 14px; }
  .check-q { font-size: 15px; font-weight: 700; margin: 0; }
  .check-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .check-row button {
    font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); text-align: left;
    background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; flex: 1 1 220px;
  }
  .check-row button:hover { border-color: var(--blue); }
  .check-row button small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }

  /* 入力 */
  .panel { background: var(--card); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
  .panel[hidden] { display: none !important; }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field label { font-size: 14px; font-weight: 700; }
  .field label small { font-weight: 400; color: var(--ink-2); }
  .field input, .field textarea, .field select {
    font: inherit; font-size: 17px; color: var(--ink); width: 100%;
    background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 16px;
  }
  .field textarea { min-height: 120px; resize: vertical; }
  .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
  .row { display: flex; flex-wrap: wrap; gap: 16px; }
  .row .field { flex: 1 1 160px; }
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chips button {
    font: inherit; font-size: 14px; cursor: pointer; color: var(--ink);
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  }
  .chips button:hover { border-color: var(--ink-2); }
  .aside { font-size: 14px; color: var(--ink-2); margin: 0; }
  .warn { font-size: 14px; color: var(--warn); background: var(--warn-bg); border-radius: 12px; padding: 10px 14px; margin: 0; }
  .warn[hidden] { display: none !important; }

  /* ボタン */
  .nav { display: flex; justify-content: center; align-items: center; gap: 24px; flex-wrap: wrap; }
  .pill {
    font: inherit; font-size: 17px; font-weight: 500; cursor: pointer; border: 0;
    background: var(--blue); color: var(--on-blue); border-radius: 980px; padding: 12px 24px;
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: background .2s;
  }
  .pill:hover { background: var(--blue-hover); }
  .pill.outline { background: transparent; color: var(--link); box-shadow: inset 0 0 0 1px var(--link); }
  .pill.outline:hover { background: var(--blue-soft); }
  .pill:disabled { opacity: .35; cursor: default; }
  .pill:focus-visible, .text-link:focus-visible, .crumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
  .text-link { font: inherit; font-size: 17px; background: none; border: 0; padding: 0; color: var(--link); cursor: pointer; }
  .text-link:hover { text-decoration: underline; }
  .text-link:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }

  /* これまでの回答 */
  .summary { display: flex; flex-direction: column; gap: 10px; }
  .summary[hidden] { display: none !important; }
  .summary h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-2); text-align: center; }
  .summary-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .summary-list button {
    font: inherit; font-size: 14px; cursor: pointer; color: var(--ink);
    background: var(--card); border: 0; border-radius: 999px; padding: 8px 16px;
    display: inline-flex; gap: 8px; align-items: baseline;
  }
  .summary-list button span { color: var(--ink-2); font-size: 12px; }
  .summary-list button:hover { box-shadow: inset 0 0 0 1px var(--line); }

  /* トップページ */
  .hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 8px; }
  .hero .eyebrow { font-size: 19px; }
  .hero h1 { margin: 0; font-weight: 700; letter-spacing: -.015em; font-size: clamp(36px, 8vw, 72px); line-height: 1.12; text-wrap: balance; }
  .hero h1 em { font-style: normal; color: var(--blue); }
  .nw { white-space: nowrap; }
  .hero p.lead { margin: 0; font-size: clamp(18px, 2.6vw, 23px); color: var(--ink-2); max-width: 30em; text-wrap: balance; }
  .hero .cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 8px; }
  .hero .cta .pill { font-size: 19px; padding: 14px 32px; }
  .hero .cta small { font-size: 13px; color: var(--ink-2); }

  /* 動く見本（ノートパソコンの画面の中） */
  .showcase { width: 100%; max-width: 940px; margin: 20px auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .showcase-label {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2);
    letter-spacing: .12em; text-transform: uppercase;
  }
  .showcase-label i {
    width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--card);
    display: grid; place-items: center; font-style: normal; font-size: 9px; padding-left: 2px;
  }
  .laptop { width: 100%; }
  .bezel {
    background: #1d1d1f; border-radius: 22px 22px 8px 8px; padding: clamp(8px, 1.4vw, 14px);
    box-shadow: inset 0 0 0 1px #3a3a3c, 0 40px 70px -40px rgba(0, 0, 0, .45);
  }
  .browser { background: var(--bg); border-radius: 10px; overflow: hidden; }
  .browser-bar {
    height: 34px; display: flex; align-items: center; gap: 6px; padding-inline: 12px;
    background: var(--card); border-bottom: 1px solid var(--line);
  }
  .browser-bar b { width: 10px; height: 10px; border-radius: 50%; background: var(--line); display: block; }
  .browser-bar span {
    margin-left: 10px; flex: 1; max-width: 320px; height: 22px; border-radius: 6px; background: var(--bg);
    font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); display: flex; align-items: center; justify-content: center;
  }
  .demo-tag {
    margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em;
    color: var(--blue); background: var(--blue-soft); border-radius: 999px; padding: 2px 10px;
  }
  .base {
    height: clamp(12px, 1.8vw, 18px); margin-inline: -8px;
    background: linear-gradient(#e3e3e8, #b7b7bd); border-radius: 0 0 18px 18px; position: relative;
  }
  @media (min-width: 720px) { .base { margin-inline: -5%; } }
  .base::before {
    content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 16%; height: 45%; background: #a5a5ab; border-radius: 0 0 8px 8px;
  }
  .demo {
    position: relative; text-align: left;
    padding: clamp(14px, 2.4vw, 24px);
    display: grid; grid-template-columns: 1fr; gap: 18px;
  }
  .demo-cursor {
    position: absolute; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; z-index: 2;
    transition: transform .7s cubic-bezier(.4, 0, .2, 1);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3));
  }
  .demo-cursor.click { animation: click .3s ease; }
  @keyframes click { 50% { scale: .82; } }
  @media (min-width: 760px) { .demo { grid-template-columns: 0.9fr 1.1fr; gap: 24px; } }
  .demo h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .demo-qs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .demo-qs li {
    display: grid; grid-template-columns: 5.2em 1fr; gap: 10px; align-items: center;
    background: var(--card); border-radius: 12px; padding: 10px 12px; min-height: 46px;
    transition: box-shadow .3s ease, background .3s ease;
  }
  .demo-qs .q { font-size: 12px; color: var(--ink-3); }
  .demo-qs .a {
    justify-self: start; font-size: 14px; font-weight: 700; color: var(--blue);
    background: var(--blue-soft); border-radius: 999px; padding: 4px 12px;
    opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
  }
  .demo-qs li.on .a { opacity: 1; transform: none; }
  .demo-qs li.now { box-shadow: inset 0 0 0 2px var(--blue); }
  .demo-out { display: flex; flex-direction: column; }
  .demo-paper {
    flex: 1; background: var(--card); border-radius: 14px; padding: 14px 16px; min-height: 290px;
    font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--ink);
  }
  .demo-paper p { margin: 0; white-space: pre-wrap; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
  .demo-paper p.on { opacity: 1; transform: none; }
  .demo-paper p b { font-weight: 700; color: var(--blue); }
  .demo-done {
    font-family: var(--font); font-size: 12px; font-weight: 700; color: var(--safe); background: var(--safe-bg);
    border-radius: 999px; padding: 3px 10px; opacity: 0; transition: opacity .3s ease;
  }
  .demo-done.on { opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    .demo-qs .a, .demo-paper p, .demo-done { transition: none; }
  }

  .section-title { margin: 0; text-align: center; font-weight: 700; font-size: clamp(26px, 4.6vw, 40px); line-height: 1.2; text-wrap: balance; }
  .section-sub { margin: 10px auto 0; text-align: center; font-size: 17px; color: var(--ink-2); max-width: 34em; }

  .compare { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 760px) { .compare { grid-template-columns: 1fr 1.35fr; } }
  .compare > div { background: var(--card); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
  .compare .label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .compare .label.good { color: var(--blue); }
  .compare .bubble { background: var(--bg); border-radius: 14px; padding: 14px 16px; font-size: 16px; line-height: 1.7; }
  .compare .bubble.code { font-family: var(--mono); font-size: 13.5px; white-space: pre-wrap; }
  .compare .result-line { font-size: 14px; color: var(--ink-2); margin: 0; }
  .compare .result-line b { color: var(--ink); }

  .steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 760px) { .steps3 { grid-template-columns: repeat(3, 1fr); } }
  .steps3 li { background: var(--card); border-radius: 22px; padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
  .steps3 .n { font-size: 15px; font-weight: 700; color: var(--blue); }
  .steps3 strong { font-size: 21px; line-height: 1.35; }
  .steps3 p { margin: 0; font-size: 15px; color: var(--ink-2); }

  .cans { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 760px) { .cans { grid-template-columns: 1fr 1fr; } }
  .can { background: var(--card); border-radius: 22px; padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; }
  .can .tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg); border-radius: 999px; padding: 4px 10px; }
  .can strong { font-size: 24px; line-height: 1.3; }
  .can p { margin: 0; font-size: 15px; color: var(--ink-2); }
  .can ul { margin: 4px 0 0; padding-left: 1.2em; font-size: 15px; display: flex; flex-direction: column; gap: 4px; }

  .brand.brand-link { font-family: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  .brand.brand-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }

  /* 安心・安全（画面の横幅いっぱいの緑の帯） */
  .trust {
    margin: 24px calc(50% - 50vw) 0; scroll-margin-top: 70px;
    background: var(--safe-bg); padding: clamp(48px, 8vw, 88px) 16px;
  }
  main > .trust { margin-top: 8px; margin-bottom: 8px; }
  .trust-in { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
  .trust-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .trust-head .shield { width: 64px; height: 64px; border-radius: 20px; background: var(--safe); color: var(--on-safe); display: grid; place-items: center; }
  .trust-head .shield svg { width: 36px; height: 36px; }
  .trust-eyebrow { margin: 4px 0 0; font-size: 17px; font-weight: 700; color: var(--safe); }
  .trust-head h2 { margin: 0; font-size: clamp(26px, 4.6vw, 40px); font-weight: 700; line-height: 1.25; text-wrap: balance; }
  .trust-head p.lead { margin: 0; font-size: 17px; color: var(--ink-2); max-width: 32em; text-wrap: balance; }
  .trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
  @media (min-width: 720px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
  .trust-grid li { background: var(--card); border-radius: 22px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
  .trust-ico { width: 46px; height: 46px; border-radius: 14px; background: var(--safe-bg); color: var(--safe); display: grid; place-items: center; }
  .trust-ico svg { width: 26px; height: 26px; }
  .trust-grid strong { font-size: 19px; line-height: 1.4; }
  .trust-grid p { margin: 0; font-size: 14px; color: var(--ink-2); }
  .proof {
    background: var(--card); border-radius: 22px; padding: 24px; box-shadow: inset 0 0 0 2px var(--safe);
    display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start;
  }
  .proof .trust-ico { width: 56px; height: 56px; background: var(--safe); color: var(--on-safe); border-radius: 16px; }
  .proof .trust-ico svg { width: 30px; height: 30px; }
  .proof .tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--safe); background: var(--safe-bg); border-radius: 999px; padding: 3px 10px; margin-bottom: 6px; }
  .proof strong { display: block; font-size: clamp(19px, 2.6vw, 23px); line-height: 1.4; }
  .proof p { margin: 6px 0 0; font-size: 15px; color: var(--ink-2); }
  @media (max-width: 480px) { .proof { grid-template-columns: 1fr; } }
  .trust-note { margin: 0; text-align: center; font-size: 13px; color: var(--ink-2); }

  /* 完成画面の安心メモ */
  .safe-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-size: 14px; color: var(--ink); background: var(--safe-bg); border-radius: 14px; padding: 12px 16px; }
  .safe-note svg { width: 20px; height: 20px; flex: none; color: var(--safe); margin-top: 1px; }
  .safe-note b { color: var(--safe); }

  /* 追加の質問 */
  .qs { gap: 22px; }
  .q-block { display: flex; flex-direction: column; gap: 10px; }
  .q-label { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; }
  .q-label small { font-weight: 400; color: var(--ink-2); }
  .q-opts { display: flex; flex-wrap: wrap; gap: 8px; }
  .q-opts button {
    font: inherit; font-size: 15px; cursor: pointer; color: var(--ink); text-align: left;
    background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px;
  }
  .q-opts button:hover { border-color: var(--ink-2); }
  .q-opts button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); font-weight: 700; }
  .q-opts button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
  .q-sep { border: 0; border-top: 1px solid var(--line); margin: 0; }

  /* 完成 */
  .result { background: var(--card); border-radius: 28px; padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 20px; }
  .result-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
  .result-top h3 { margin: 0; font-size: 21px; font-weight: 700; }
  .result-top .count { font-size: 14px; color: var(--ink-2); }
  pre#prompt {
    margin: 0; padding: 20px; max-height: 440px; overflow: auto; border-radius: 14px;
    background: var(--bg); font-family: var(--mono); font-size: 14.5px; line-height: 1.85;
    white-space: pre-wrap; word-break: break-word; color: var(--ink);
  }
  .actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
  .toast { font-size: 14px; color: var(--link); font-weight: 500; }

  .howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .howto div { background: var(--card); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
  .howto b { font-size: 12px; color: var(--ink-3); font-weight: 500; }
  .howto strong { font-size: 17px; }
  .howto p { margin: 0; font-size: 14px; color: var(--ink-2); }

  footer { max-width: 980px; margin: 48px auto 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
  .navi-text { color: var(--link); }
  .footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
  .footer-links a { color: var(--ink-2); text-decoration: none; }
  .footer-links a:hover { color: var(--link); text-decoration: underline; }
  .footer-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

  /* 規約などの文書ページ */
  .doc { max-width: 760px; margin: 0 auto; padding-top: clamp(40px, 7vw, 72px); display: flex; flex-direction: column; gap: 28px; }
  .doc-head { display: flex; flex-direction: column; gap: 8px; }
  .doc-head .eyebrow { text-align: left; }
  .doc-head h1 { margin: 0; font-size: clamp(28px, 5vw, 40px); line-height: 1.2; text-wrap: balance; }
  .doc-head p { margin: 0; color: var(--ink-2); }
  .doc-body { background: var(--card); border-radius: 22px; padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: 26px; }
  .doc-body section { display: flex; flex-direction: column; gap: 8px; }
  .doc-body h2 { margin: 0; font-size: 19px; line-height: 1.45; }
  .doc-body p { margin: 0; color: var(--ink); }
  .doc-body ol, .doc-body ul { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; }
  .doc-body a { color: var(--link); }
  .doc-body dl { margin: 0; display: grid; grid-template-columns: 9em 1fr; gap: 10px 16px; }
  .doc-body dt { color: var(--ink-2); font-size: 15px; }
  .doc-body dd { margin: 0; }
  @media (max-width: 520px) { .doc-body dl { grid-template-columns: 1fr; gap: 2px; } .doc-body dd { margin-bottom: 10px; } }
  .doc-note { font-size: 14px; color: var(--ink-2); }
  .doc-safe { display: flex; gap: 10px; align-items: flex-start; background: var(--safe-bg); color: var(--ink); border-radius: 14px; padding: 14px 16px; font-size: 15px; }
  .doc-safe svg { width: 20px; height: 20px; flex: none; color: var(--safe); margin-top: 2px; }
  .todo { background: #fff3c4; color: #5c4400; border-radius: 4px; padding: 0 4px; font-weight: 700; }
  .mail { font-family: var(--mono); font-size: 17px; background: var(--bg); border-radius: 10px; padding: 10px 14px; user-select: all; word-break: break-all; }
  .back { align-self: flex-start; }

  .fade { animation: fade .45s ease both; }
  @keyframes fade { from { opacity: .001; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .fade { animation: none; } * { transition: none !important; } }