:root {
    color-scheme: dark;
    --bg-base: #070912; --panel: rgba(16,19,32,.62); --panel2: rgba(255,255,255,.055);
    --border: rgba(255,255,255,.09); --border-bright: rgba(255,255,255,.16);
    --text: #eceef7; --sub: #939ab2;
    --grad: linear-gradient(135deg, #6b4dff, #2f7fd6);
    --radius-card: 22px; --radius-md: 14px; --radius-ui: 12px;
    --shadow: 0 18px 50px rgba(2,4,12,.55), 0 2px 10px rgba(2,4,12,.35);
    --glow-acc: 0 4px 20px rgba(110,100,255,.38);
    --glow-sel: 0 0 0 2px rgba(120,150,255,.55), 0 0 18px 4px rgba(100,140,255,.35);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  body {
    color:var(--text); background-color:var(--bg-base);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 390'><g fill='white'><circle cx='23' cy='41' r='1' opacity='.7'/><circle cx='81' cy='120' r='.7' opacity='.5'/><circle cx='143' cy='33' r='1.2' opacity='.8'/><circle cx='197' cy='166' r='.6' opacity='.45'/><circle cx='240' cy='74' r='.9' opacity='.6'/><circle cx='305' cy='140' r='.7' opacity='.5'/><circle cx='352' cy='38' r='1.1' opacity='.75'/><circle cx='420' cy='96' r='.8' opacity='.55'/><circle cx='477' cy='170' r='1' opacity='.7'/><circle cx='58' cy='218' r='.8' opacity='.5'/><circle cx='128' cy='262' r='1.1' opacity='.7'/><circle cx='210' cy='310' r='.6' opacity='.45'/><circle cx='262' cy='236' r='.9' opacity='.65'/><circle cx='330' cy='288' r='.7' opacity='.5'/><circle cx='391' cy='224' r='1.2' opacity='.8'/><circle cx='455' cy='320' r='.8' opacity='.55'/><circle cx='36' cy='340' r='1' opacity='.65'/><circle cx='498' cy='47' r='.6' opacity='.4'/><circle cx='166' cy='95' r='.5' opacity='.4'/><circle cx='285' cy='23' r='.6' opacity='.45'/><circle cx='372' cy='128' r='.5' opacity='.4'/><circle cx='95' cy='180' r='.5' opacity='.35'/><circle cx='435' cy='260' r='.6' opacity='.4'/><circle cx='310' cy='355' r='1' opacity='.6'/><circle cx='224' cy='128' r='.5' opacity='.35'/><circle cx='510' cy='230' r='.7' opacity='.5'/><circle cx='70' cy='60' r='.5' opacity='.35'/><circle cx='400' cy='16' r='.7' opacity='.5'/></g></svg>"),
      radial-gradient(58% 46% at 36% 58%, rgba(124,92,255,.30), transparent 68%),
      radial-gradient(46% 38% at 64% 40%, rgba(76,154,255,.22), transparent 70%),
      radial-gradient(42% 34% at 50% 50%, transparent 55%, rgba(150,120,255,.10) 62%, transparent 70%),
      linear-gradient(180deg, #0a0d1c 0%, #070912 45%, #0b0a1a 100%);
    background-size:640px auto, cover, cover, cover, cover;
    font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
    font-size:14px;
  }
  button { transition: background .15s, border-color .15s, box-shadow .15s; }
  a { transition: color .15s; }
  :focus-visible { outline:2px solid #7c9dff; outline-offset:2px; }
  .wrap { max-width:860px; margin:0 auto; padding:0 20px; }

  .hd { position:sticky; top:0; z-index:10; backdrop-filter:saturate(1.35) blur(20px); background:rgba(10,13,28,.72); border-bottom:1px solid var(--border); }
  .hd-in { display:flex; justify-content:space-between; align-items:center; height:58px; }
  .hd-l { display:flex; align-items:center; gap:16px; min-width:0; }
  .brand { display:flex; align-items:center; gap:10px; }
  .brand-mark { width:28px; height:28px; flex:none; }
  .brand-name { font-weight:700; letter-spacing:.08em; font-size:15px; white-space:nowrap; }
  .brand-name .web { font-weight:600; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; filter:brightness(1.5); }
  .tooltab { font-size:13px; color:#fff; font-weight:700; background:var(--grad); border:none;
             border-radius:10px; padding:8px 22px; text-decoration:none; white-space:nowrap;
             box-shadow:var(--glow-acc); cursor:pointer; }
  .tooltab:hover { filter:brightness(1.12); }
  .hd-r { display:flex; align-items:center; gap:14px; }
  .circle-link, .en-link { font-size:13px; color:var(--sub); text-decoration:none; white-space:nowrap; background:none; border:none; cursor:pointer; font-family:inherit; }
  .circle-link:hover, .en-link:hover { color:var(--text); }

  /* ===== 1. 変換(主役) ===== */
  .hero-zone { background:var(--panel); backdrop-filter:saturate(1.35) blur(20px); border:1px solid var(--border-bright);
               border-radius:var(--radius-card); box-shadow:var(--shadow), var(--glow-acc); padding:34px 34px 30px; margin-top:26px; }
  .hero-zone h1 { font-size:24px; letter-spacing:.04em; text-align:center; margin-bottom:20px; }
  .hero-zone h1 .grad { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; filter:brightness(1.4); }
  .hero-zone .sub { text-align:center; color:var(--sub); font-size:12.5px; margin:8px 0 20px; }
  .ta { width:100%; min-height:230px; background:rgba(0,0,0,.30); color:var(--text); border:1px solid var(--border-bright);
        border-radius:var(--radius-md); padding:16px; font-size:16px; line-height:1.9; resize:vertical; font-family:inherit; }
  .ta::placeholder { color:#7d86a6; }
  .convert-row { display:flex; justify-content:center; margin-top:16px; }
  .btn-conv { background:var(--grad); color:#fff; border:none; cursor:pointer; border-radius:var(--radius-ui);
              padding:15px 56px; font-size:16px; font-weight:700; box-shadow:var(--glow-acc); }
  .btn-conv:hover { filter:brightness(1.12); }
  .btn-conv:disabled { opacity:.5; cursor:default; }

  /* ===== 2. ガチャ(小さめ) ===== */
  .zone { background:var(--panel); backdrop-filter:saturate(1.35) blur(20px); border:1px solid var(--border);
          border-radius:var(--radius-card); box-shadow:var(--shadow); padding:16px 18px; margin-top:16px; }
  .zone h2 { font-size:13px; letter-spacing:.06em; margin-bottom:10px; font-weight:700; }
  .zone h2 small { color:var(--sub); font-weight:400; margin-left:8px; font-size:11px; }
  .g-grid { display:grid; grid-template-columns:repeat(8, 1fr); gap:8px; }
  .g-btn { border:1px solid var(--border-bright); background:var(--panel2); color:var(--text); border-radius:10px;
           padding:9px 2px 8px; font-size:11.5px; text-align:center; cursor:pointer; line-height:1.5; font-family:inherit; }
  .g-btn .gi { display:block; width:17px; height:17px; margin:0 auto 4px; color:#aab8ff; }
  .g-btn:hover { background:rgba(255,255,255,.10); }
  .g-btn.sel { box-shadow:var(--glow-sel); border-color:transparent; background:linear-gradient(135deg, rgba(107,77,255,.25), rgba(47,127,214,.22)); }
  .g-foot { display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .g-foot .lbl { font-size:11.5px; color:var(--sub); }
  .s-chip { border:1px solid var(--border-bright); background:var(--panel2); color:var(--text); border-radius:999px;
            padding:6px 14px; font-size:12px; cursor:pointer; font-family:inherit; }
  .s-chip:hover { background:rgba(255,255,255,.10); }
  .s-chip.sel { box-shadow:var(--glow-sel); border-color:transparent; background:linear-gradient(135deg, rgba(107,77,255,.25), rgba(47,127,214,.22)); }
  .g-note { margin-top:10px; font-size:11.5px; color:var(--sub); }

  /* ===== 3. できたプロンプト ===== */
  .out { background:rgba(0,0,0,.28); border:1px solid var(--border); border-radius:var(--radius-md); padding:13px; min-height:96px; }
  .out-empty { color:#5b6280; font-size:12px; padding:4px 2px; }
  .chip { display:inline-block; background:var(--panel2); border:1px solid var(--border-bright); border-radius:999px;
          padding:5px 13px; font-size:12.5px; margin:3px 4px 3px 0; cursor:pointer; color:var(--text); font-family:inherit; }
  .chip:hover { background:rgba(255,255,255,.10); }
  .chip b { color:#b9c8ff; font-weight:600; }
  .chip.new { box-shadow:0 0 10px 1px rgba(100,140,255,.35); }
  .unhit { margin-top:8px; font-size:11.5px; color:var(--sub); }
  .out-foot { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; align-items:center; }
  .copy-done { font-size:12px; color:#9fe8b8; margin-right:auto; }
  .copy { font-size:13px; color:#dbe4ff; background:var(--panel2); border:1px solid rgba(124,157,255,.45); border-radius:8px; padding:10px 26px; cursor:pointer; font-weight:700; font-family:inherit; }
  .copy:hover { background:rgba(255,255,255,.10); }
  .clear { font-size:12.5px; color:var(--sub); background:transparent; border:1px solid var(--border); border-radius:8px; padding:10px 14px; cursor:pointer; font-family:inherit; }

  .sub-secs { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px; }
  .mini { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px; }
  .mini h3 { font-size:13px; margin-bottom:8px; }
  .mini p { font-size:12px; color:var(--sub); line-height:1.8; }
  .mini a { font-size:12px; color:#a7bfff; text-decoration:none; }

  .ad-blk { margin-top:44px; }
  .ad-lbl { text-align:center; color:#5b6280; font-size:10px; letter-spacing:.2em; margin-bottom:6px; }
  .ad { border:1px dashed rgba(255,255,255,.25); border-radius:var(--radius-md); color:#5b6280; font-size:11px;
        display:flex; align-items:center; justify-content:center; letter-spacing:.1em; background:rgba(0,0,0,.18);
        min-height:90px; max-width:728px; margin:0 auto; }

  .ft { margin-top:36px; border-top:1px solid var(--border); padding:20px 0 28px; }
  .ft-in { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
  .ft-l { color:var(--sub); font-size:12px; }
  .ft-nav a { color:var(--sub); font-size:12px; margin-left:16px; text-decoration:none; }
  .ft-nav a:hover { color:var(--text); }

  @media (max-width:700px) {
    .brand-name { display:none; }
    .hd-l { gap:10px; }
    .hd-r { gap:10px; }
    .g-grid { grid-template-columns:repeat(4, 1fr); }
    .sub-secs { grid-template-columns:1fr; }
    .hero-zone { padding:20px 16px 18px; margin-top:16px; }
    .hero-zone h1 { font-size:18.5px; }
    .hero-zone .sub { margin-bottom:14px; }
    .ta { min-height:160px; font-size:15px; }
    .btn-conv { padding:13px 44px; font-size:15px; }
    .s-chip, .chip { padding-top:9px; padding-bottom:9px; }
  }

/* ===== 文章ページ(使い方・規約など) ===== */
.doc { background:var(--panel); backdrop-filter:saturate(1.35) blur(20px); border:1px solid var(--border);
       border-radius:var(--radius-card); box-shadow:var(--shadow); padding:30px 34px; margin-top:26px; }
.doc h1 { font-size:20px; letter-spacing:.04em; margin-bottom:6px; }
.doc .updated { color:var(--sub); font-size:11.5px; margin-bottom:18px; }
.doc h2 { font-size:14.5px; margin:22px 0 8px; letter-spacing:.04em; }
.doc p, .doc li { font-size:13px; color:#c9cede; line-height:2.0; }
.doc ul, .doc ol { padding-left:1.4em; }
.doc a { color:#a7bfff; }
.doc .muted { color:var(--sub); font-size:12px; }
.doc .step { display:flex; gap:14px; margin:14px 0; align-items:flex-start; }
.doc .step .num { flex:none; width:26px; height:26px; border-radius:50%; background:var(--grad);
                  color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.doc table { border-collapse:collapse; margin:10px 0; width:100%; }
.doc th, .doc td { border:1px solid var(--border-bright); padding:8px 12px; font-size:12.5px; text-align:left; color:#c9cede; }
.doc th { background:rgba(255,255,255,.05); white-space:nowrap; }
.draft-note { background:#b45309; color:#fff; text-align:center; font-size:12px; padding:6px; letter-spacing:.05em; }
@media (max-width:700px) { .doc { padding:20px 16px; margin-top:16px; } }

/* 文章ページのヒーロー画像(世界観バナー) */
.doc-hero { width:100%; height:170px; object-fit:cover; border-radius:14px;
            margin-bottom:22px; display:block; border:1px solid var(--border-bright); }
@media (max-width:700px) { .doc-hero { height:110px; margin-bottom:16px; } }

/* 幅の広い表はスマホで横スクロール */
.tbl-scroll { overflow-x:auto; }
.tbl-scroll table { min-width:560px; }

/* 文章ページ用のキャッチコピー演出 */
.grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; filter:brightness(1.4); }
.doc p.doc-motto { font-size:21px; font-weight:700; letter-spacing:.05em; line-height:1.7; margin:2px 0 14px; color:var(--text); }