*, *::before, *::after{ box-sizing:border-box; }

  :root{
    --bg-0:#d4e4ff;
    --bg-1:#bfd5ff;
    --bg-a:#f4f8ff;
    --bg-b:#9ec4ff;
    --bg-c:#d8cffc8a;
    --card:#edf3ffad;
    --card-strong:#fbfcff;
    --line:#bdd0f0;
    --text:#2a3f68;
    --muted:#6b7da2;
    --accent:#5f97f5;
    --accent-2:#9ec0ff;
    --field:#f1f4fb;
    --field-ph:#7c8aac;
    --soft:#f8fbff;
    --badge:#f8f8f2;
    --ok:#10b981;
  }

  body{
    font-family:"DM Sans","Avenir Next","Segoe UI",sans-serif;
    color:var(--text);
    background:
      radial-gradient(1280px 820px at -10% 48%, var(--bg-a) 0%, transparent 62%),
      radial-gradient(1180px 820px at 110% 45%, var(--bg-b) 0%, transparent 64%),
      radial-gradient(1120px 820px at 50% 112%, var(--bg-c) 0%, transparent 74%),
      linear-gradient(180deg, var(--bg-0), var(--bg-1));
    min-height:100vh;
    position:relative;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:
      radial-gradient(circle at 12% 18%, rgba(255,255,255,.65) 0 1.2px, transparent 1.2px),
      radial-gradient(circle at 76% 29%, rgba(255,255,255,.55) 0 1px, transparent 1px),
      radial-gradient(circle at 26% 68%, rgba(255,255,255,.52) 0 1.1px, transparent 1.1px),
      radial-gradient(circle at 85% 74%, rgba(255,255,255,.42) 0 1px, transparent 1px),
      radial-gradient(80% 60% at 50% 40%, rgba(140,171,237,.14), transparent 72%),
      radial-gradient(85% 46% at 7% 95%, rgba(156,186,241,.32), transparent 78%),
      radial-gradient(85% 46% at 93% 95%, rgba(146,176,235,.28), transparent 78%);
    z-index:0;
    opacity:.95;
  }
  a{ text-decoration:none; }

  .container{
    width:min(920px, calc(100% - 28px));
    margin:0 auto;
    padding:16px 0 28px;
    position:relative;
    z-index:1;
  }

  .topbar{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(223,234,255,.72);
    backdrop-filter: blur(10px);
    border-bottom:1px solid rgba(169,190,232,.52);
  }
  .topbar-inner{
    width:min(940px, calc(100% - 24px));
    margin:0 auto;
    padding:10px 0;
    display:grid;
    grid-template-columns:minmax(88px, 118px) minmax(132px, 1fr) minmax(152px, 1fr);
    grid-template-areas:"theme home tools";
    justify-content:stretch;
    align-items:center;
    gap:10px;
  }
  #themeToggle{
    grid-area:theme;
    justify-self:center;
    min-width:0;
    width:100%;
    max-width:118px;
    white-space:nowrap;
  }
  .brand{ grid-area:home; display:flex; justify-content:center; }
  .top-noads{
    cursor:default;
    user-select:none;
  }
  .topbar .top-noads:hover{
    filter:none;
    transform:none;
  }
  .top-counter{
    display:none;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:color-mix(in srgb, var(--card-strong) 94%, white);
    border:1px solid var(--line);
    border-radius:999px;
    padding:8px 16px;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
    min-height:44px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .nav{
    grid-area:tools;
    display:flex;
    gap:0;
    justify-content:flex-end;
    flex-wrap:nowrap;
  }
  .topbar .btn.secondary,
  .nav a{
    background:var(--card-strong);
    border:1px solid var(--line);
    border-radius:999px;
    padding:10px 16px;
    color:var(--text);
    font-weight:700;
    box-shadow:0 5px 12px rgba(95,124,188,.11);
    min-height:52px;
    white-space:nowrap !important;
    text-align:center;
  }
  .brand .btn.secondary{ min-width:186px; }
  .nav a{
    min-width:198px;
    max-width:236px;
    width:100%;
  }
  .topbar a, .topbar button{ text-decoration:none !important; }

  .btn{
    border-radius:999px;
    border:1px solid rgba(98,137,212,.33);
    background:linear-gradient(180deg,#78acfb,#649bec);
    color:#fff;
    font-weight:700;
    padding:10px 16px;
    cursor:pointer;
    font-size:clamp(15px, 1.35vw, 20px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 4px 9px rgba(83,126,209,.16);
  }
  .btn.secondary{
    color:var(--text);
    background:var(--soft);
    border-color:var(--line);
    box-shadow:none;
  }
  .btn:hover{ filter:brightness(1.03); transform:translateY(-1px); }

  .hero{
    text-align:center;
    margin:10px 0 14px;
    padding:22px 18px 14px;
    border-radius:30px;
    border:1px solid rgba(194,211,241,.94);
    background:
      radial-gradient(125% 95% at 100% 0%, rgba(255,255,255,.6), transparent 60%),
      radial-gradient(95% 70% at 0% 100%, rgba(168,202,249,.25), transparent 74%),
      linear-gradient(135deg, rgba(246,250,255,.92), rgba(219,231,253,.82));
    box-shadow:0 16px 30px rgba(83,113,177,.11);
  }
  .hero h1{
    margin:8px 0 0;
    font-family:"Playfair Display","Times New Roman",serif;
    font-size:clamp(32px,4vw,50px);
    font-weight:700;
  }
  .hero h3{
    margin:10px 0 0;
    font-size:clamp(33px,4vw,54px);
    line-height:1.06;
    letter-spacing:-0.03em;
  }
  .hero-stat{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--badge);
    border:1px solid #d7deed;
    border-radius:999px;
    padding:9px 20px;
    font-weight:700;
    color:var(--text);
    margin:0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  }
  .hero-pill{
    margin:14px auto 0;
    max-width:740px;
    border:1px solid var(--line);
    border-radius:24px;
    padding:12px 15px;
    background:rgba(247,251,255,.9);
    color:var(--text);
    font-size:clamp(17px,1.85vw,27px);
    line-height:1.32;
  }
  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:30px;
    padding:19px;
    box-shadow:0 10px 22px rgba(83,113,177,.1);
    backdrop-filter: blur(8px);
    margin-bottom:14px;
    overflow:hidden;
  }
  .card h2{
    margin:0 0 10px;
    font-size:clamp(24px,2.7vw,34px);
    line-height:1.08;
    letter-spacing:-0.02em;
  }

  .hint{
    color:var(--muted);
    font-size:clamp(15px,1.4vw,19px);
    line-height:1.28;
    margin:0 0 12px;
  }
  .mini{ font-size:14px; color:var(--muted); }
  .row{ display:flex; gap:10px; flex-wrap:wrap; margin:10px 0 0; align-items:center; }

  textarea, input, select{
    width:100%;
    max-width:100%;
    display:block;
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px 16px;
    font-size:clamp(16px,1.6vw,20px);
    background:var(--field);
    color:var(--text);
    outline:none;
  }
  textarea{ min-height:130px; resize:vertical; }
  textarea::placeholder, input::placeholder{ color:var(--field-ph); }
  textarea:focus, input:focus, select:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(79,140,255,.12);
  }

  .tools-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:14px;
  }
  .card-half h2{ font-size:clamp(22px,2.2vw,30px); }
  .card-half .hint{ font-size:clamp(14px,1.2vw,18px); }
  #tDemo, #tClear{ flex:1 1 calc(50% - 5px); min-width:0; }
  #tUnderlineToggle{ flex:1 1 100%; min-width:0; white-space:nowrap; }
  #toUpper{ flex:1 1 100%; }
  #toLower, #toNormal{ flex:1 1 calc(50% - 5px); min-width:0; }
  #xCopy, #xClear{ flex:1 1 calc(50% - 5px); min-width:0; }

  .results{ margin-top:10px; }
  .styleItem{
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px 14px;
    margin:10px 0;
    cursor:pointer;
    position:relative;
    word-break:break-word;
    background:color-mix(in srgb, var(--card-strong) 80%, white);
    transition:background .2s;
  }
  .styleItem:hover{ background:color-mix(in srgb, var(--card-strong) 92%, white); }
  .styleName{ display:block; color:var(--muted); font-size:14px; margin-bottom:6px; }
  .copied{ position:absolute; right:12px; top:12px; font-size:12px; color:#0f9f6e; opacity:0; transition:opacity .2s; }
  .styleItem.isCopied .copied{ opacity:1; }

  .sigGrid{ display:grid; grid-template-columns:1fr; gap:10px; }
  .preview{
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px;
    background:var(--soft);
    color:#111;
    overflow:auto;
    min-height:90px;
  }
  .toolsBar{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:8px 0; }
  .toolsBar select.btn{ background:var(--soft); color:var(--text); border-color:var(--line); }
  .colorInput{ width:64px; padding:4px; min-height:42px; }
  .smallInput{ width:130px; }
  .activeBtn{ background:linear-gradient(180deg,#59a0ff,#2f85ff) !important; border-color:#2f85ff !important; color:#fff !important; }

  .char-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,50px);
    gap:8px;
    justify-content:center;
    margin-top:15px;
  }
  .char-cell{
    width:50px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    border:1px solid var(--line);
    background:color-mix(in srgb, var(--card-strong) 82%, white);
    border-radius:10px;
    cursor:pointer;
    transition:.15s ease;
  }
  .char-cell:hover{ background:#ebf2ff; transform:scale(1.06); }

  .copy-toast{
    position:fixed;
    left:50%;
    bottom:20px;
    transform:translate(-50%,18px);
    background:#12335fcc;
    color:#fff;
    border-radius:999px;
    padding:10px 16px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s, transform .2s;
    z-index:50;
  }
  .copy-toast.show{ opacity:1; transform:translate(-50%,0); }

  .footer{
    color:#4f6288;
    border-top:1px solid rgba(138,166,220,.35);
    margin-top:18px;
    padding-top:16px;
    font-size:15px;
  }

  body.light{
    --bg-0:#d1e1ff;
    --bg-1:#bed4ff;
    --bg-a:#f4f8ff;
    --bg-b:#9dc4ff;
    --bg-c:#d9d0ff8f;
    --card:#edf3ffb4;
    --card-strong:#fafcff;
    --line:#bccff0;
    --text:#2a3f68;
    --muted:#6b7da2;
    --accent:#5f97f5;
    --accent-2:#9ec0ff;
    --field:#f2f4fa;
    --field-ph:#7b89ab;
    --soft:#f8fbff;
    --badge:#f8f8f2;
  }
  body.dark{
    --bg-0:#0f1a33;
    --bg-1:#1c2f57;
    --bg-a:#2d467633;
    --bg-b:#4271c244;
    --bg-c:#6d4dc84d;
    --card:#1b2949d9;
    --card-strong:#22345c;
    --line:#3b5483;
    --text:#e8f0ff;
    --muted:#adc0e8;
    --accent:#5d98ff;
    --accent-2:#87b5ff;
    --field:#2a3f6b;
    --field-ph:#c3d1ee;
    --soft:#243a63;
    --badge:#2f416a;
  }
  body.dark .topbar{
    background:rgba(12,23,46,.78);
    border-bottom:1px solid rgba(89,119,176,.42);
  }
  body.dark .top-counter{
    background:rgba(47,72,120,.92);
    border-color:#6b89bd;
    color:#edf3ff;
  }
  body.dark .nav a,
  body.dark .btn.secondary{
    background:rgba(35,57,98,.92);
    border-color:#4e6ea9;
    color:#eaf1ff;
    box-shadow:0 8px 20px rgba(8,14,29,.35);
  }
  body.dark .hero{
    border-color:#465f92;
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(154,188,255,.12), transparent 58%),
      linear-gradient(145deg, rgba(26,42,74,.88), rgba(19,33,60,.9));
    box-shadow:0 26px 56px rgba(5,10,22,.48);
  }
  body.dark .hero-stat{
    background:rgba(54,78,124,.95);
    border-color:#5d79b0;
    color:#f4f8ff;
  }
  body.dark .hero-pill{
    background:rgba(21,35,65,.88);
    border-color:#4d689e;
    color:#d9e6ff;
  }
  body.dark .card{
    background:rgba(22,36,66,.84);
    border-color:#445f95;
    box-shadow:0 16px 34px rgba(7,12,26,.42);
  }
  body.dark .card-meta{
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(160,194,255,.12), transparent 60%),
      linear-gradient(150deg, rgba(24,40,71,.9), rgba(19,34,61,.9));
  }
  body.dark textarea,
  body.dark input,
  body.dark select{
    background:#2a3f6b;
    border-color:#607fb6;
    color:#eef4ff;
  }
  body.dark textarea::placeholder,
  body.dark input::placeholder{
    color:#c3d1ee;
  }
  body.dark .meta-action{
    background:rgba(18,32,58,.9);
    border-color:#4b669d;
  }
  body.dark .reasons-card{
    background:
      radial-gradient(130% 90% at 100% 0%, rgba(156,187,246,.12), transparent 60%),
      linear-gradient(160deg, rgba(23,40,70,.9), rgba(18,33,61,.9));
  }
  body.dark .reasons-note{
    background:rgba(27,47,84,.9);
    border-color:#5878b2;
    color:#dce9ff;
  }
  body.dark .styleItem{
    background:rgba(26,43,77,.9);
  }
  body.dark .styleItem:hover{
    background:rgba(32,51,89,.95);
  }
  body.dark .char-cell{
    background:rgba(24,40,71,.92);
    border-color:#4b6598;
  }
  body.dark .char-cell:hover{
    background:rgba(34,55,95,.96);
  }
  body.dark .footer{
    color:#b6c8ea;
    border-top:1px solid rgba(83,110,164,.5);
  }

  .card-meta{
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(255,255,255,.56), transparent 58%),
      radial-gradient(90% 50% at 0% 100%, rgba(176,207,251,.22), transparent 70%),
      linear-gradient(150deg, rgba(245,249,255,.95), rgba(224,233,253,.9));
  }
  .meta-action{
    margin-top:12px;
    background:color-mix(in srgb, var(--soft) 90%, transparent);
    border:1px solid var(--line);
    border-radius:22px;
    padding:9px 10px 9px 12px;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:10px;
  }
  .meta-action p{
    margin:0;
    color:var(--text);
    font-style:italic;
    font-size:clamp(15px,1.35vw,19px);
  }
  .meta-copy-btn{
    min-width:146px;
    white-space:nowrap;
    padding-inline:20px;
    background:linear-gradient(180deg,#74abfb,#5f98ec);
  }
  .meta-copy-btn.is-done{
    background:linear-gradient(180deg,#64d59d,#2db879);
    border-color:#2db879;
  }

  .reasons-card{
    background:
      radial-gradient(130% 90% at 100% 0%, rgba(255,255,255,.54), transparent 60%),
      linear-gradient(155deg, rgba(238,246,255,.86), rgba(221,234,255,.76));
  }
  .reasons-card h2{ text-align:center; }
  .reasons-list{
    list-style:none;
    margin:10px 0 0;
    padding:0;
  }
  .reasons-list li{
    position:relative;
    margin:9px 0;
    padding-left:34px;
    color:var(--text);
    font-size:clamp(18px,2.05vw,31px);
    line-height:1.25;
  }
  .reasons-list li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#56b96f;
    font-weight:800;
  }
  .reasons-note{
    margin:14px 0 0;
    border:1px solid rgba(162,188,231,.52);
    border-radius:999px;
    background:rgba(246,250,255,.58);
    padding:10px 16px;
    color:#456694;
    font-weight:700;
    text-align:center;
  }

  @media (min-width: 900px){
    .topbar-inner{
      grid-template-columns:minmax(94px, 126px) minmax(180px, 230px) minmax(220px, 290px) minmax(200px, 260px);
      grid-template-areas:"theme home counter tools";
      gap:14px;
      justify-content:stretch;
    }
    .top-counter{
      display:inline-flex;
      grid-area:counter;
      font-size:16px;
      padding:9px 18px;
      min-height:46px;
    }
    .hero-stat{ display:none; }
    #themeToggle{ max-width:126px; }
    .brand .btn.secondary{ min-width:206px; }
    .nav a{ min-width:216px; }
    .hero h1{ font-size:50px; }
    .hero h3{ font-size:56px; }
    .card h2{ font-size:34px; }
    .hint{ font-size:20px; }
    .sigGrid{ grid-template-columns:1fr 1fr; }
  }

  @media (max-width: 680px){
    .topbar-inner{
      grid-template-columns:minmax(74px, 106px) minmax(128px, 1fr) minmax(138px, 1fr);
      grid-template-areas:"theme home tools";
      gap:8px;
    }
    .topbar .btn.secondary,
    .nav a{
      min-height:48px;
      padding:8px 12px;
      font-size:clamp(13px,3.8vw,15px);
    }
    #themeToggle{ max-width:106px; }
    .brand .btn.secondary{ min-width:0; width:100%; max-width:none; }
    .nav a{ min-width:0; max-width:none; }
    .card{ border-radius:24px; padding:18px; }
    .hero h3{ font-size:clamp(30px,8vw,44px); }
    .hero-stat{
      background:color-mix(in srgb, var(--card-strong) 94%, white);
      border-color:var(--line);
      color:var(--text);
      box-shadow:0 4px 10px rgba(95,124,188,.1);
    }
    #tDemo, #tClear{ flex:1 1 calc(50% - 5px); }
    #tUnderlineToggle{
      flex:1 1 100%;
      white-space:nowrap;
    }
    .meta-action{ grid-template-columns:1fr auto; }
    .meta-copy-btn{ min-width:126px; padding-inline:16px; }
    .reasons-list li{ font-size:clamp(17px,5.5vw,24px); }
  }
  @media (max-width: 560px){
    .tools-grid{ grid-template-columns:1fr; }
  }