/* TrueText dark theme — overrides Tailwind v4 color variables when <html class="dark"> */
html.dark{
  color-scheme:dark;
  --color-white:#0B1120;
  --color-slate-50:oklch(16.5% .035 264);
  --color-slate-100:oklch(20.8% .042 265.755);
  --color-slate-200:oklch(27.9% .041 260.031);
  --color-slate-300:oklch(37.2% .044 257.287);
  --color-slate-400:oklch(55.4% .046 257.417);
  --color-slate-500:oklch(70.4% .04 256.788);
  --color-slate-600:oklch(80% .025 255);
  --color-slate-700:oklch(86.9% .022 252.894);
  --color-slate-800:oklch(92.9% .013 255.508);
  --color-slate-900:oklch(96.8% .007 247.896);
  --color-slate-950:oklch(98.4% .003 247.858);
  --color-indigo-50:oklch(25% .06 272);
  --color-indigo-100:oklch(30% .08 273);
  --color-indigo-200:oklch(38% .1 274);
  --color-violet-100:oklch(28% .07 294);
  --color-violet-200:oklch(36% .09 293);
  --color-cyan-50:oklch(24% .04 200);
  --color-emerald-50:oklch(24% .04 166);
  --color-emerald-100:oklch(29% .06 163);
  --color-emerald-200:oklch(36% .08 164);
  --color-amber-50:oklch(25% .04 95);
  --color-amber-100:oklch(30% .06 95);
  --color-amber-200:oklch(38% .08 95);
  --color-rose-50:oklch(24% .04 12);
  --color-rose-100:oklch(29% .06 12);
  --color-rose-200:oklch(36% .08 10);
}
/* keep intentionally dark blocks dark and their white text white */
html.dark .bg-slate-900{background-color:#111827}
html.dark .bg-slate-900\/50{background-color:#11182780}
html.dark .bg-slate-950{background-color:#020617}
html.dark .text-white{color:#fff}
html.dark .border-slate-800{border-color:#1f2937}
html.dark .bg-slate-900 .text-slate-100,html.dark .bg-slate-950 .text-slate-100{color:#f1f5f9}
html.dark .bg-slate-900 .text-slate-300,html.dark .bg-slate-950 .text-slate-300,html.dark .bg-slate-900 .text-slate-400,html.dark .bg-slate-950 .text-slate-400{color:#94a3b8}
/* header bar (inline light style) */
html.dark header[style],html.dark nav[style],html.dark div[style*="255,255,255,0.7"]{background:rgba(11,17,32,.75)!important;border-bottom-color:rgba(148,163,184,.15)!important}
html.dark .glass-panel{background-color:rgba(15,23,42,.6)}
html.dark input,html.dark textarea,html.dark select{color:var(--color-slate-900)}
html.dark ::placeholder{color:#64748b}

/* theme toggle */
#tt-theme-toggle{position:fixed;left:18px;bottom:18px;z-index:60;width:40px;height:40px;border-radius:999px;border:1px solid rgba(148,163,184,.35);
  background:rgba(255,255,255,.85);color:#0f172a;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 14px rgba(15,23,42,.12);backdrop-filter:blur(8px);transition:transform .15s}
#tt-theme-toggle:hover{transform:scale(1.06)}
html.dark #tt-theme-toggle{background:rgba(15,23,42,.85);color:#e2e8f0;border-color:rgba(148,163,184,.25)}
#tt-theme-toggle svg{width:18px;height:18px}

/* Mobile: stop decorative background blobs from widening the page (iOS Safari ignores overflow on body alone) */
html, body { max-width: 100%; overflow-x: hidden; }
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

/* Footer connection info */
#tt-ipinfo{max-width:72rem;margin:0 auto;padding:10px 16px 18px;font-size:12px;line-height:1.6;color:var(--color-slate-500);text-align:center;overflow-wrap:anywhere}
#tt-ipinfo .tt-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22C55E;margin-right:6px;vertical-align:1px}
#tt-ipinfo .tt-dot.on{background:#F59E0B}
@media (max-width:767px){#tt-ipinfo{padding-bottom:96px}}

/* Version badge in tool headings — centred on the capital letters */
.tt-ver{display:inline-flex;align-items:center;gap:.22em;margin-left:.4em;padding:.28em .62em;border-radius:999px;font-size:.5em;line-height:1;font-weight:700;letter-spacing:0;white-space:nowrap;vertical-align:middle;position:relative;top:-.21em;color:#4F46E5;background:#EEF2FF;border:1.5px solid #C7D2FE}
.tt-ver svg{display:block;width:1em;height:1em;color:#F59E0B}
html.dark .tt-ver{color:#A5B4FC;background:rgba(79,70,229,.18);border-color:rgba(129,140,248,.35)}
@media (max-width:640px){h1:has(.tt-ver){font-size:min(28px,6vw)!important;line-height:1.2;white-space:nowrap}}

/* Character counter under input boxes */
.tt-count{text-align:right;font-size:12px;color:var(--color-slate-400);padding:2px 12px 6px}
.tt-count.full{color:#DC2626;font-weight:600}
.tt-photo{margin-right:8px}
@media (max-width:480px){.tt-photo span{display:none}}

/* ===== Design system for the tool controls =====
   radius: card 20 · controls 12 · inner segments 9
   heights: segmented 40 · icon buttons 36 · action buttons 48 */

/* Model switch — segmented control (home box + Analysis Lab + AI Humanizer) */
.tt-engine{display:inline-flex;align-items:center;gap:10px;margin:16px auto 0;font-size:13px}
.tt-engine .tt-eng-label{color:var(--color-slate-500);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.tt-engine .tt-seg{display:grid;grid-template-columns:1fr 1fr;width:272px;height:40px;padding:3px;border-radius:12px;background:var(--color-slate-100);border:1px solid var(--color-slate-200)}
.tt-engine button{display:flex;align-items:center;justify-content:center;gap:4px;height:100%;border-radius:9px;color:var(--color-slate-500);background:transparent;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.tt-engine button svg{width:12px;height:12px;color:#F59E0B}
.tt-engine button.on{background:var(--color-white);color:var(--color-slate-900);box-shadow:0 1px 2px rgba(15,23,42,.10),0 1px 4px rgba(15,23,42,.06)}
html.dark .tt-engine button.on{color:var(--color-slate-900);background:var(--color-slate-300)}
.tt-ud{display:flex;flex-direction:column;align-items:center;line-height:1;gap:2px}
.tt-ud-mark{display:block;line-height:1;font-family:"Space Grotesk",system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:-.02em}
.tt-ud-mark b{font-weight:800;font-size:15px;margin:0 1px}
.tt-ud small{display:block;line-height:1;font-size:8.5px;font-weight:500;letter-spacing:.04em;opacity:.75}

/* Home quick-start box */
#tt-quick{width:100%;max-width:760px;margin:0 auto;text-align:left}
#tt-quick .tq-card{background:var(--color-white);border:1px solid var(--color-slate-200);border-radius:20px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px rgba(79,70,229,.10);overflow:hidden}
#tt-quick .tq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--color-slate-100)}
#tt-quick .tq-head .tt-engine{margin:0}
#tt-quick .tq-text{display:block;width:100%;min-height:150px;resize:none;border:0;outline:0;background:transparent;font-size:15px;line-height:1.55;color:var(--color-slate-900);padding:14px 16px}
#tt-quick .tq-text::placeholder{color:var(--color-slate-400)}
#tt-quick .tq-tools{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 16px 12px}
#tt-quick .tq-samples{font-size:13px;color:var(--color-slate-500);white-space:nowrap}
#tt-quick .tq-samples button{color:var(--color-slate-700);font-weight:600;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--color-slate-300);text-underline-offset:3px}
#tt-quick .tq-samples i{font-style:normal;margin:0 6px;color:var(--color-slate-300)}
#tt-quick .tq-meta{display:flex;align-items:center;gap:8px}
#tt-quick .tq-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid var(--color-slate-200);color:var(--color-slate-600);background:var(--color-white);cursor:pointer}
#tt-quick .tq-icon svg{width:17px;height:17px}
#tt-quick .tq-count{font-size:12px;color:var(--color-slate-400);font-variant-numeric:tabular-nums;min-width:64px;text-align:right}
#tt-quick .tq-count.full{color:#DC2626;font-weight:600}
#tt-quick .tq-msg{padding:0 16px 10px;font-size:13px;color:#DC2626}
#tt-quick .tq-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px 16px;border-top:1px solid var(--color-slate-100);background:var(--color-slate-50)}
#tt-quick .tq-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:12px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;border:1px solid var(--color-slate-200);background:var(--color-white);color:var(--color-slate-800);transition:transform .1s,box-shadow .15s}
#tt-quick .tq-btn svg{width:18px;height:18px;flex:none}
#tt-quick .tq-btn:hover{box-shadow:0 4px 12px rgba(15,23,42,.08)}
#tt-quick .tq-btn:active{transform:scale(.98)}
#tt-quick .tq-btn.primary{background:#4F46E5;border-color:#4F46E5;color:#fff;box-shadow:0 6px 16px rgba(79,70,229,.28)}
html.dark #tt-quick .tq-btn.primary{background:#6366F1;border-color:#6366F1}


/* Functions carry colour (same as their tool pages); the model switch stays neutral */
#tt-quick .tq-btn[data-t="hum"] svg{color:#C026D3}
#tt-quick .tq-btn[data-t="pla"] svg{color:#059669}
#tt-quick .tq-btn[data-t="hum"]:hover{border-color:#F0ABFC}
#tt-quick .tq-btn[data-t="pla"]:hover{border-color:#6EE7B7}
html.dark #tt-quick .tq-btn[data-t="hum"] svg{color:#E879F9}
html.dark #tt-quick .tq-btn[data-t="pla"] svg{color:#34D399}
#tt-quick .tq-samples .s-short{display:none}
@media (max-width:767px){
  #tt-quick .tq-samples .s-long{display:none}
  #tt-quick .tq-samples .s-short{display:inline}
  #tt-quick .tq-meta{gap:6px}
  #tt-quick .tq-count{min-width:0}
}

/* Hero compact so the box sits on the first screen */
section.tt-has-quick > *{margin-block:0!important}
section.tt-has-quick > * + *{margin-top:22px!important}
@media (min-width:768px){section.tt-has-quick h1{font-size:68px!important;line-height:1.05!important}}
@media (max-width:767px){
  section.tt-has-quick h1{font-size:34px!important;line-height:1.05!important}
  section.tt-has-quick > p{display:none}
  section.tt-has-quick > * + *{margin-top:16px!important}
  #tt-quick .tq-head{padding:10px 12px}
  #tt-quick .tq-head .tt-eng-label{display:none}
  #tt-quick .tq-head .tt-engine,#tt-quick .tq-head .tt-seg{width:100%}
  #tt-quick .tq-text{min-height:112px;padding:12px}
  #tt-quick .tq-tools{padding:0 12px 10px}
  #tt-quick .tq-actions{gap:8px;padding:12px}
  #tt-quick .tq-btn{flex-direction:column;gap:3px;height:56px;font-size:12.5px}
  #tt-quick .tq-btn svg{width:17px;height:17px}
}
@media (max-width:380px){.tt-engine .tt-seg{width:250px}}

/* iOS: inputs under 16px make Safari zoom in on focus, which shifts the page and the menu sideways */
@media (max-width:767px){input,textarea,select{font-size:16px!important}}
@media (min-width:768px){section.tt-has-quick h1{font-size:68px!important;line-height:1.05!important}}
/* Mobile menu: solid background, full width */
header > div.absolute.top-16{background:var(--color-white)!important;left:0;right:0;width:100%}

/* [ud] option: dark square badge + name (variant C) */
.tt-ud-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-right:2px;border-radius:5px;background:#94A3B8;color:#fff;font-family:"Space Grotesk",system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tt-engine button.on .tt-ud-badge{background:#0F172A}
html.dark .tt-ud-badge{background:#475569;color:#E2E8F0}
html.dark .tt-engine button.on .tt-ud-badge{background:#0F172A;color:#fff}
/* Mobile performance: heavy blurs make iOS Safari stutter (menu feels frozen) */
@media (max-width:767px){
  .blur-\[145px\],.blur-\[120px\],.blur-3xl{display:none!important}
  header,header *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  header{background:var(--color-white)!important}
}

/* Free / Pro model switch */
.tt-engine button.locked{opacity:.75}
.tt-engine .tt-lock{width:12px;height:12px;margin-left:3px;color:currentColor}
.tt-engine button .tt-ud-badge{margin:0 0 0 5px}
.tt-engine .tt-eng-label{text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;color:var(--color-slate-700);white-space:nowrap}

/* Three-option model switch: Free / Pro Basic / Pro Max */
.tt-engine .tt-seg{grid-template-columns:repeat(3,1fr);width:360px}
.tt-engine button{font-size:13px;padding:0 6px}
@media (max-width:640px){
  .tt-engine{flex-wrap:wrap;justify-content:center;row-gap:6px}
  .tt-engine .tt-seg{width:100%;max-width:358px}
  .tt-engine button{font-size:12.5px}
}