@font-face{font-family:"Manrope Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Segoe UI"),local("Roboto"),local("DejaVu Sans");size-adjust:102.21%;ascent-override:104.29%;descent-override:29.35%;line-gap-override:0%}@font-face{font-family:"Sora Fallback";src:local("Arial"),local("Liberation Sans"),local("Helvetica Neue"),local("Segoe UI"),local("Roboto"),local("DejaVu Sans");size-adjust:101.08%;ascent-override:95.97%;descent-override:28.69%;line-gap-override:0%}@font-face{font-family:"JetBrains Mono Fallback";src:local("Courier New"),local("Liberation Mono"),local("Courier");size-adjust:104.10%;ascent-override:97.98%;descent-override:28.82%;line-gap-override:0%}:root{--qtt-accent:#4f46e5;--qtt-accent-strong:#4338ca;--qtt-accent-soft:#edebff;--qtt-ink:#16141f;--qtt-muted:#5d5a6e;--qtt-line:#e4e2ee;--qtt-bg:#f5f5f8;--qtt-surface:#ffffff;--qtt-hero-bg:#12101f;--qtt-footer-bg:#12101f;--qtt-footer-ink:#b9b3d9}@media (prefers-color-scheme:dark){:root{--qtt-ink:#eceaf4;--qtt-muted:#a49fb8;--qtt-line:#2c2a3d;--qtt-bg:#12101c;--qtt-surface:#1b1929;--qtt-accent-soft:#2a2650}}html[data-theme="dark"]{--qtt-ink:#eceaf4;--qtt-muted:#a49fb8;--qtt-line:#2c2a3d;--qtt-bg:#12101c;--qtt-surface:#1b1929;--qtt-accent-soft:#2a2650}html[data-theme="light"]{--qtt-ink:#16141f;--qtt-muted:#5d5a6e;--qtt-line:#e4e2ee;--qtt-bg:#f5f5f8;--qtt-surface:#ffffff;--qtt-accent-soft:#edebff}*{box-sizing:border-box}body{margin:0;background:var(--qtt-bg);color:var(--qtt-ink);font-family:"Manrope","Manrope Fallback",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased}h1,h2,h3,h4{font-family:"Sora","Sora Fallback","Manrope","Manrope Fallback",sans-serif;line-height:1.22;letter-spacing:-0.01em}h1{font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 12px}h2{font-size:1.5rem}a{color:var(--qtt-accent)}img{max-width:100%;height:auto}.ftt-container{max-width:1280px;margin:0 auto;padding:0 20px}.site-main{padding:34px 0 64px}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.entry-content::after{content:"";display:table;clear:both}.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--qtt-line)}.site-header .ftt-container{display:flex;align-items:center;gap:22px;min-height:66px}.site-branding{display:flex;align-items:center}.site-branding a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--qtt-ink)}.qtt-logo-mark{display:inline-flex;align-items:center;justify-content:center;width:auto;height:38px;flex:none}.qtt-logo-mark img{display:block;width:auto;height:38px;border-radius:0;filter:drop-shadow(0 6px 10px rgba(79,70,229,.35))}.site-title{font-family:"Sora","Sora Fallback",sans-serif;font-weight:800;font-size:1.22rem;margin:0;letter-spacing:-0.01em}.site-title .qtt-tld{color:var(--qtt-accent)}.main-navigation{margin-left:auto}.main-navigation ul{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;margin:0;padding:0}.main-navigation a{color:var(--qtt-ink);text-decoration:none;font-weight:700;font-size:.95rem}.main-navigation a:hover{color:var(--qtt-accent)}.qtt-header-actions{display:inline-flex;align-items:center;gap:10px;flex:none;margin-left:6px}.qtt-theme-toggle,.qtt-menu-toggle{margin-left:6px;cursor:pointer;flex:none;padding:0;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--qtt-line);background:var(--qtt-surface);color:var(--qtt-ink);display:inline-flex;align-items:center;justify-content:center;font:inherit;line-height:1}.qtt-header-actions .qtt-theme-toggle,.qtt-header-actions .qtt-menu-toggle{margin-left:0}.qtt-theme-toggle:hover,.qtt-menu-toggle:hover{border-color:var(--qtt-accent);color:var(--qtt-accent)}.qtt-glyph{font-size:19px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.qtt-glyph svg{width:19px;height:19px;display:block}.qtt-cat-btn .qtt-glyph svg{width:17px;height:17px}.qtt-glyph .ic-sun,.qtt-glyph .ic-close{display:none}.qtt-glyph.is-dark .ic-sun{display:block}.qtt-glyph.is-dark .ic-moon{display:none}.qtt-glyph.is-open .ic-close{display:block}.qtt-glyph.is-open .ic-menu{display:none}.qtt-menu-toggle{display:none}.qtt-sub-toggle{display:none}@media (max-width:768px){.site-header .ftt-container{flex-wrap:wrap;gap:8px 14px;padding-top:10px;padding-bottom:10px}.site-branding{order:1}.qtt-header-actions{order:2;margin-left:auto}.qtt-menu-toggle{display:inline-flex}.main-navigation{order:3;flex:1 1 100%;margin-left:0;display:none}.main-navigation.qtt-open{display:block;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.main-navigation ul{flex-direction:column;flex-wrap:nowrap;gap:0;border-top:1px solid var(--qtt-line);margin-top:6px;padding-top:6px}.main-navigation li{width:100%}.main-navigation a{display:block;padding:11px 6px;font-size:1rem;border-bottom:1px solid var(--qtt-line)}.main-navigation li:last-child>a{border-bottom:0}.main-navigation .sub-menu{border-top:0;margin-top:0;padding-top:0;padding-left:16px}.site-header .main-navigation .menu-item-has-children>.sub-menu{display:none}.site-header .main-navigation .menu-item-has-children.qtt-sub-open>.sub-menu{display:block}.main-navigation .menu-item-has-children{position:relative}.main-navigation .menu-item-has-children>a{padding-right:56px}.main-navigation .qtt-sub-toggle{display:inline-flex;align-items:center;justify-content:center;position:absolute;top:2px;right:2px;width:46px;height:44px;margin:0;padding:0;border:0;border-radius:10px;background:transparent;color:var(--qtt-ink);font-size:1.05rem;line-height:1;cursor:pointer;transition:transform .18s ease,background-color .18s ease,color .18s ease}.main-navigation .qtt-sub-toggle:hover{border:0;background:var(--qtt-accent-soft);color:var(--qtt-accent)}.main-navigation .menu-item-has-children.qtt-sub-open>.qtt-sub-toggle{transform:rotate(180deg)}.site-title{font-size:1.08rem}}.qtt-header-nav{display:flex;align-items:center;gap:28px;margin-left:auto}.qtt-header-nav .main-navigation{margin-left:0}.qtt-header-nav a::before,.qtt-header-nav a::after{content:none !important}.qtt-cat-btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--qtt-accent);border-radius:999px;background:var(--qtt-surface);color:var(--qtt-accent);font:inherit;font-weight:700;font-size:.98rem;padding:9px 18px;cursor:pointer;white-space:nowrap}.qtt-cat-btn:hover{border-color:var(--qtt-accent);background:var(--qtt-accent);color:#fff}.qtt-cat-btn .qtt-glyph{font-size:17px}.qtt-cat-panel{position:absolute;top:100%;left:0;right:0;z-index:59;background:var(--qtt-surface);border-bottom:1px solid var(--qtt-line);box-shadow:0 18px 30px rgba(15,15,40,.12);max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto}.qtt-cat-panel[hidden]{display:none}.qtt-cat-panel-inner{padding-top:10px;padding-bottom:22px}.qtt-cat-group{border-top:1px solid var(--qtt-line)}.qtt-cat-group:first-child{border-top:0}.qtt-cat-row{display:flex;align-items:center;gap:12px}.qtt-cat-head{display:inline-flex;align-items:center;gap:10px;flex:1;background:none;border:0;padding:13px 2px;cursor:pointer;font:inherit;font-weight:700;font-size:1rem;color:var(--qtt-ink);text-align:left}.qtt-cat-arrow{color:var(--qtt-accent);font-size:.8rem;transition:transform .15s ease;display:inline-flex;align-items:center}.qtt-cat-arrow svg{width:13px;height:13px;display:block}.qtt-cat-group.open .qtt-cat-arrow{transform:rotate(90deg)}.qtt-cat-hub{font-size:.85rem;font-weight:600;color:var(--qtt-accent);text-decoration:none;white-space:nowrap}.qtt-cat-hub:hover{text-decoration:underline}.qtt-cat-tools{display:none;padding:0 0 12px 24px}.qtt-cat-group.open .qtt-cat-tools{display:block}.qtt-cat-tools a{display:block;padding:4px 0;color:var(--qtt-ink);text-decoration:none;font-size:.95rem}.qtt-cat-tools a:hover{color:var(--qtt-accent)}@media (max-width:768px){.qtt-header-nav{order:3;flex:1 1 100%;margin-left:0;display:none;flex-direction:column;align-items:stretch;gap:0}.qtt-header-nav.qtt-open{display:flex;max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.qtt-header-nav .main-navigation{display:block;order:0;flex:none;width:100%}.qtt-cat-btn{width:100%;justify-content:space-between;padding:11px 12px}.qtt-cat-panel{position:static;border-bottom:0;box-shadow:none;max-height:none;overflow:visible}.qtt-cat-panel-inner{width:100%;padding:0 0 6px}}@media (min-width:769px){.site-header .qtt-header-actions{margin-left:6px;order:3}}/* Order fix:the v3.2.7 two-tier pass sets branding order:1 and actions order:2 at>=769px,while the 3.2.9 wrapper defaulted to order:0 — so the menu rendered BEFORE the logo on desktop (caught by the user's screenshot, not by the agent's verification). Explicit orders restore logo-first,and the two-tier nav rules (full-width row,top border,small spread links) are reset for the nav inside the wrapper. */ @media (min-width:769px){.qtt-header-nav{order:2}.qtt-header-nav .main-navigation{order:0;flex:none;border-top:0;padding:0}.qtt-header-nav .main-navigation ul{justify-content:flex-start;gap:4px 26px}.qtt-header-nav .main-navigation a{font-size:1rem;font-weight:600;letter-spacing:normal}}.site-branding .qtt-brand-text{display:flex;flex-direction:column;line-height:1.15}.site-branding .qtt-tagline{font-size:.78rem;font-weight:600;color:var(--qtt-ink);opacity:.62;letter-spacing:0}.qtt-cta-btn{display:inline-flex;align-items:center;padding:10px 20px;border-radius:10px;background:var(--qtt-accent);color:#fff;font-weight:700;font-size:.98rem;text-decoration:none;white-space:nowrap;flex:none}.qtt-cta-btn:hover{filter:brightness(1.08);color:#fff}@media (max-width:768px){.qtt-cta-btn{display:none}}.site-footer{background:var(--qtt-footer-bg);color:var(--qtt-footer-ink);margin-top:20px}.site-footer a{color:#d9d5f5;text-decoration:none}.site-footer a:hover{color:#fff;text-decoration:underline}.qtt-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:52px 0 36px}@media (max-width:860px){.qtt-footer-grid{grid-template-columns:1fr 1fr}}@media (max-width:520px){.qtt-footer-grid{grid-template-columns:1fr}}.qtt-footer-brand .site-title{color:#fff}.qtt-footer-brand p{font-size:.93rem;line-height:1.6;margin:12px 0 0;max-width:34ch}.qtt-footer-col h3{color:#fff;font-size:.95rem;margin:4px 0 13px}.qtt-footer-col ul{list-style:none;margin:0;padding:0}.qtt-footer-col li{margin:7px 0;font-size:.93rem}.qtt-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 26px;display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:.88rem}.widget-area{background:var(--qtt-surface);border-top:1px solid var(--qtt-line);padding:26px 0}.entry-title{margin-bottom:10px}.entry-meta{color:var(--qtt-muted);font-size:.9rem;margin-bottom:14px}.entry-content p{margin:0 0 16px}.entry-content ul,.entry-content ol{margin:0 0 16px}.posts-list article{background:var(--qtt-surface);border:1px solid var(--qtt-line);border-radius:16px;padding:24px;margin-bottom:18px}input[type="search"],input[type="text"],input[type="email"],textarea{font:inherit;border:1.5px solid var(--qtt-line);border-radius:10px;background:var(--qtt-surface);color:var(--qtt-ink);padding:9px 12px}button,input[type="submit"]{font:inherit;font-weight:700;cursor:pointer;border:1.5px solid var(--qtt-accent);background:var(--qtt-accent);color:#fff;border-radius:999px;padding:9px 20px}button:hover,input[type="submit"]:hover{background:var(--qtt-accent-strong)}.page-links{margin-top:18px}/* The hero's own box (dark panel, padding) still comes from the Tools
   plugin; this only arranges its inside. functions.php wraps the
   hero's existing children in .ftt-hero-main and adds .ftt-hero-side (demo card + popular links) inside .ftt-hero-grid. */ .ftt-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}@media (min-width:901px){.ftt-hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:44px;align-items:start}}.ftt-hero-main,.ftt-hero-side{min-width:0}.ftt-hero-demo{background:var(--qtt-surface);color:var(--qtt-ink);border:1px solid var(--qtt-line);border-radius:18px;padding:20px 20px 18px;box-shadow:0 24px 48px rgba(3,0,24,.45)}.ftt-hero-demo-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.ftt-hero-demo-head h2{font-size:1.06rem;margin:0}.ftt-demo-pill{flex:none;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--qtt-accent);background:var(--qtt-accent-soft);border-radius:999px;padding:4px 10px}.ftt-demo-text{width:100%;min-height:118px;resize:vertical;box-sizing:border-box;border:1.5px solid var(--qtt-line);border-radius:12px;background:var(--qtt-bg);color:var(--qtt-ink);padding:12px 14px;font:inherit;font-size:.98rem;line-height:1.55}.ftt-demo-text:focus{outline:3px solid rgba(129,140,248,.55);border-color:var(--qtt-accent)}.ftt-demo-counts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;color:var(--qtt-muted);font-size:.9rem}.ftt-demo-count strong{font-family:"Sora","Sora Fallback",sans-serif;font-size:1.08rem;color:var(--qtt-ink);font-variant-numeric:tabular-nums;margin-right:5px}.ftt-demo-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.ftt-demo-chip{display:inline-flex;align-items:center;font-size:.88rem;font-weight:700;color:var(--qtt-accent);border:1.5px solid var(--qtt-accent);border-radius:999px;padding:8px 15px;text-decoration:none;transition:background-color .18s ease,color .18s ease}.ftt-demo-chip:hover{background:var(--qtt-accent);color:#fff}.ftt-demo-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.ftt-demo-actions[hidden],.ftt-demo-pass[hidden]{display:none !important}.ftt-demo-action{font:inherit;font-size:.88rem;font-weight:700;cursor:pointer;color:var(--qtt-accent);background:transparent;border:1.5px solid var(--qtt-accent);border-radius:999px;padding:8px 15px;transition:background-color .18s ease,color .18s ease}.ftt-demo-action:hover{background:var(--qtt-accent);color:#fff}.ftt-demo-action-sm{padding:5px 12px;font-size:.8rem}.ftt-demo-pass{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:12px;background:var(--qtt-bg);border:1px dashed var(--qtt-line);border-radius:12px;padding:10px 12px}.ftt-demo-pass code{font-family:"JetBrains Mono","JetBrains Mono Fallback",monospace;font-size:.95rem;color:var(--qtt-ink);word-break:break-all;flex:1 1 auto;min-width:0}.ftt-hero-popular{margin:16px 2px 0;font-size:.92rem;line-height:1.7;color:#b9b3d9}.ftt-hero-popular-label{font-weight:800;color:#e9e6f8}.ftt-hero-popular a{color:#c9c4e4;text-decoration:none;font-weight:700}.ftt-hero-popular a:hover{color:#fff;text-decoration:underline}.ftt-hero-popular-sep{color:#6f6a96;margin:0 2px}/* The base .ftt-grid rule lives in the Tools plugin (assets/ftt-tools.css:repeat(auto-fill,minmax(230px,1fr))),which leaves a short last row with blank card-slots beside it on wide screens. The theme stylesheet is printed after the plugin's, so this override wins the cascade:
   flex rows targeting 4 / 3 / 2 cards whose last row stretches to fill
   the container edge-to-edge — no empty slot, ever. Category cards
   (.ftt-cat-cards) are a different class and are deliberately not
   touched. */
.ftt-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.ftt-grid > .ftt-card { flex: 1 1 calc((100% - 48px) / 4); min-width: 0; }
@media (max-width: 1100px) { .ftt-grid > .ftt-card { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 700px) { .ftt-grid > .ftt-card { flex-basis: calc((100% - 16px) / 2); } }

/* ---------- animations (v3.2) ---------- */
/* Hero entrance: pure CSS, gated on the qtt-js class the theme prints
   in <head> when JavaScript is available — no JS, no animation, and
   the end state is fully visible either way. */
@keyframes qtt-hero-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
html.qtt-js .ftt-hero-main > *, html.qtt-js .ftt-hero-side > * { animation: qtt-hero-rise .6s ease both; }
html.qtt-js .ftt-hero-main > *:nth-child(2) { animation-delay: .07s; }
html.qtt-js .ftt-hero-main > *:nth-child(3) { animation-delay: .14s; }
html.qtt-js .ftt-hero-main > *:nth-child(4) { animation-delay: .21s; }
html.qtt-js .ftt-hero-main > *:nth-child(5) { animation-delay: .28s; }
html.qtt-js .ftt-hero-side > *:nth-child(1) { animation-delay: .18s; }
html.qtt-js .ftt-hero-side > *:nth-child(2) { animation-delay: .26s; }
/* Scroll reveal: the hidden state exists only while js/qtt-front.js
   has tagged an element .qtt-reveal; it removes the classes again
   after the animation, so hover transitions stay the stylesheets'. */ .qtt-reveal{opacity:0;transform:translateY(28px) scale(.985);transition:opacity .7s ease,transform .7s ease}.qtt-reveal.qtt-revealed{opacity:1;transform:none}.main-navigation a{background:linear-gradient(currentColor,currentColor) left bottom/0% 2px no-repeat;transition:background-size .3s ease}.main-navigation a:hover{background-size:100% 2px}.qtt-cta-btn{position:relative;overflow:hidden}.qtt-cta-btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .6s ease}.qtt-cta-btn:hover::after{left:130%}.ftt-section-head h2{position:relative;padding-bottom:8px}.ftt-section-head h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--qtt-accent);border-radius:2px;transition:width .7s ease}.ftt-section-head.qtt-accent-on h2::after{width:72px}/* Gentle transitions for the theme's own primary buttons. */
button, input[type="submit"] { transition: background-color .18s ease, border-color .18s ease; }
@media (prefers-reduced-motion: reduce) {
  html.qtt-js .ftt-hero-main > *, html.qtt-js .ftt-hero-side > * { animation: none !important; }
  .qtt-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ftt-demo-chip, button, input[type="submit"] { transition: none !important; }
  .main-navigation a, .qtt-cta-btn::after, .ftt-section-head h2::after { transition: none !important; }
  .ftt-section-head h2::after { width: 72px; }
}

/* ---------- mobile friendliness pass (v3.2.6) ---------- */
/* Everything in this section is scoped to phone widths; desktop
   rendering is untouched. Two jobs: (1) real thumb-size tap targets
   (~44px) for the header toggles, the hero mini tool's actions and the footer links;(2) a 16px font on the hero demo textarea so iOS Safari does not auto-zoom the page when it is focused (it zooms on any input under 16px). */ @media (max-width:768px){.qtt-theme-toggle,.qtt-menu-toggle{width:44px;height:44px}.ftt-demo-text{font-size:16px}.ftt-demo-chip,.ftt-demo-action{min-height:44px}.ftt-demo-chip{align-items:center}}@media (max-width:860px){/* Footer links were a bare 20px line of text — a fiddly tap. Vertical padding grows each link's own box to ~44px. */
  .qtt-footer-col li { margin: 3px 0; }
  .qtt-footer-col li a { display: inline-block; padding: 10px 2px; }
}

/* ---------- desktop / laptop pass (v3.2.7) ---------- */
/* Everything in this section is scoped to >=769px (or is a
   keyboard-focus-only rule), so phone rendering stays exactly as
   verified in v3.2.6. Three jobs:
   (1) a proper two-tier header — the 10-item menu (1,163px of links)
       can never share one row with the branding inside the 1,120px
       container, so it used to wrap into two ragged rows wedged
       beside the logo at every desktop width;
   (2) the tool pages' content grid keeps its intended 1fr/1fr — a wide <pre>example used to stretch its grid column (the Morse page rendered 812px/252px) because the desktop rules lacked the containment the phone pass added at <=768px;(3) reading comfort and keyboard/mouse affordances:FAQ answers capped at a readable line length,larger FAQ click targets,a visible focus ring,and a bigger assistant close button. */ @media (min-width:769px){.site-header .ftt-container{flex-wrap:wrap;row-gap:0}.site-branding{order:1}.qtt-header-actions{order:2;margin-left:auto}.main-navigation{order:3;flex:1 1 100%;margin-left:0;border-top:1px solid var(--qtt-line);padding:9px 0 11px}.main-navigation ul{flex-wrap:wrap;justify-content:space-between;gap:6px 6px}.main-navigation a{font-size:.86rem;letter-spacing:-0.015em;white-space:nowrap}.main-navigation li:focus-within>.sub-menu{display:block}.ftt-content-grid>*{min-width:0}.ftt-content-card pre,.ftt-prose pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}details.ftt-faq p{max-width:75ch}details.ftt-faq summary{padding-top:7px;padding-bottom:7px}details.ftt-faq summary:hover{color:var(--qtt-accent)}.ftt-chat .ftt-chat-close{width:36px;height:36px}}@media (min-width:769px) and (max-width:1159px){/* Below the container's full width the nav wraps inside its own
     tier; pack the rows left with even gaps instead of spreading
     them edge-to-edge. */
  .main-navigation ul { justify-content: flex-start; gap: 6px 16px; }
}
@media (min-width: 1600px) {
  /* Very wide monitors: a slightly broader column so the layout
     does not sit lost in the middle of a 1920px screen. Prose
     stays capped by its ch rules; the nav gains breathing room. */
  .ftt-container { max-width: 1280px; }
}
/* Keyboard focus, any width: a clear accent ring instead of the
   browser's 1px near-black default (nearly invisible on the dark hero and footer).:focus-visible only fires for keyboard-style focus,so mouse and touch users never see it,and it changes no layout geometry anywhere. The card's hover-only arrow also appears when the card is reached by keyboard. */ a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--qtt-accent);outline-offset:2px}.ftt-card:focus-visible .ftt-card-arrow{opacity:1}
/*v3.2.23: panel category toggles — white text on hover*/.qtt-cat-panel .qtt-cat-head:hover{background:var(--qtt-accent);color:#fff}.qtt-cat-panel .qtt-cat-head:hover .qtt-cat-arrow{color:#fff}
html body .ftt-hero.ftt-hero{background:radial-gradient(720px 340px at 50% -80px,rgba(79,70,229,.14),transparent 70%),radial-gradient(520px 260px at 12% 20%,rgba(6,182,212,.08),transparent 70%),radial-gradient(520px 260px at 88% 30%,rgba(244,114,182,.07),transparent 70%),#fff;color:#0f172a;border-bottom:1px solid #e2e8f0}html body .ftt-hero .ftt-hl.ftt-hl{background-image:linear-gradient(90deg,#4f46e5,#7c3aed 55%,#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}@keyframes ftt-hl-shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}.ftt-hero{position:relative}.ftt-hero h1,.ftt-hero .ftt-hero-sub,.ftt-hero .ftt-search,.ftt-hero .ftt-hero-stats{position:relative;z-index:1}.ftt-hero .orb{position:absolute;border-radius:50%;filter:blur(40px);opacity:.35;pointer-events:none;z-index:0}.ftt-hero .orb1{width:180px;height:180px;background:#818cf8;top:-40px;left:-30px;animation:ftt-drift1 12s ease-in-out infinite}.ftt-hero .orb2{width:150px;height:150px;background:#c084fc;bottom:-50px;right:10px;animation:ftt-drift2 14s ease-in-out infinite}@keyframes ftt-drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(24px,18px)}}@keyframes ftt-drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,-16px)}}@keyframes ftt-hue-cycle{0%,100%{filter:blur(40px) hue-rotate(0deg)}50%{filter:blur(40px) hue-rotate(80deg)}}html body .ftt-hero .orb{display:none}html body .ftt-hero h1{color:#0f172a;font-size:60px;line-height:1.06;letter-spacing:-1.5px;max-width:840px;margin:0 auto 14px}html body .ftt-hero .ftt-hero-sub{color:#475569;font-size:1.16rem;max-width:640px;margin:0 auto 26px}html body .ftt-hero .ftt-badge{color:#4338ca;background:#eef2ff;border:1px solid #e0e7ff}html body .ftt-hero .ftt-search-wrap{max-width:640px;min-height:63px}html body .ftt-hero .ftt-search{border:1px solid #e2e8f0;border-radius:16px;padding:17px 20px;box-shadow:0 12px 32px rgba(15,23,42,.10)}html body .ftt-hero .ftt-search:focus{outline:3px solid rgba(129,140,248,.65);border-color:#818cf8;box-shadow:0 12px 32px rgba(79,70,229,.18)}.ftt-search-wrap.ftt-search-icon .ftt-search{padding-left:50px}.ftt-search-mag{position:absolute;left:18px;top:50%;transform:translateY(-50%);font-size:19px;color:#64748b;pointer-events:none;z-index:2}.ftt-hero-suggest{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px}.ftt-hero-suggest a{border:1px solid #e2e8f0;background:#fff;padding:7px 13px;border-radius:999px;font-size:13px;font-weight:700;color:#334155;text-decoration:none}.ftt-hero-suggest a:hover{border-color:#818cf8;color:#4338ca}.ftt-hero-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px}.ftt-hero-cats .ftt-hero-cats-label{align-self:center;font-size:13px;font-weight:700;color:#94a3b8}.ftt-hero-cats a{font-size:13.5px;font-weight:800;color:#4338ca;background:#eef2ff;border:1px solid #e0e7ff;padding:9px 16px;border-radius:999px;text-decoration:none}.ftt-hero-cats a:hover{background:#e0e7ff}html body .ftt-hero .ftt-hero-stats{max-width:880px;margin:36px auto 0;background:#eef2ff;border:1px solid #e0e7ff;border-radius:18px;padding:22px 10px;gap:0;justify-content:center}html body .ftt-hero .ftt-hero-stat{padding:0 34px}html body .ftt-hero .ftt-hero-stat+.ftt-hero-stat{border-left:1px solid #c7d2fe}html body .ftt-hero .ftt-hero-stat strong{color:#1e1b4b}html body .ftt-hero .ftt-hero-stat span{color:#475569}@media (max-width:640px){html body .ftt-hero{padding:56px 16px 44px}html body .ftt-hero h1{font-size:38px;letter-spacing:-.5px}html body .ftt-hero .ftt-hero-stat{padding:0 14px}html body .ftt-hero .ftt-hero-stat strong{font-size:24px}}.ftt-home .ftt-section-head{display:flex;flex-direction:column;align-items:center;text-align:center}.ftt-home .ftt-section-head h2::after{left:50%;transform:translateX(-50%)}.ftt-home .ftt-section-sub{text-align:center}html.qtt-js .ftt-home .ftt-section-head .ftt-ic{transform:scale(.85);opacity:0;transition:transform .5s ease,opacity .5s ease}html.qtt-js .ftt-home .ftt-section-head.qtt-accent-on .ftt-ic{transform:scale(1);opacity:1}.ftt-home .ftt-section-head.ftt-pop-head{background:none;border:none;border-radius:0;padding:8px 0 0;color:var(--qtt-ink)}.ftt-home .ftt-section-head.ftt-pop-head h2{font-size:1.875rem;color:var(--qtt-ink)}.ftt-live-strip{margin:28px 0 6px;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;box-shadow:0 10px 28px rgba(15,23,42,.07);min-height:257px}.ftt-live-strip .ftt-live-label{font-weight:800;font-size:1rem;margin:0 0 4px}.ftt-live-strip .ftt-live-hint{font-size:13px;color:#64748b;margin:0 0 12px}.ftt-live-strip .ftt-demo-text{min-height:84px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:13px}.ftt-live-strip .ftt-demo-text:focus{outline:3px solid rgba(129,140,248,.55);border-color:#818cf8;background:#fff}.ftt-live-strip .ftt-live-counts{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;font-size:14.5px;font-weight:700;color:#334155}.ftt-live-strip .ftt-live-counts b{color:#4f46e5;font-size:16px}.ftt-live-strip .ftt-live-more{margin-top:12px}@media (max-width:480px){.ftt-live-strip{min-height:306px}}.ftt-pop-badge{display:inline-block;background:linear-gradient(90deg,#4f46e5,#7c3aed);color:#fff;font-size:.75rem;font-weight:800;letter-spacing:.08em;border-radius:999px;padding:5px 14px}.ftt-home .ftt-section-head.ftt-pop-head + .ftt-section-sub{text-align:center}.qtt-cta-btn{transition:transform .2s ease,background-color .2s ease}.qtt-cta-btn:hover{transform:scale(1.03);background-color:#4338ca}html body .ftt-card.ftt-card:hover{box-shadow:0 18px 40px rgba(79,70,229,.18)}@media (prefers-reduced-motion:reduce){html body .ftt-hero .ftt-hl.ftt-hl,.ftt-hero .orb{animation:none!important}html.qtt-js .ftt-home .ftt-section-head .ftt-ic{transform:none;opacity:1;transition:none}}
.ftt-hero-stats .ftt-hero-stat{animation:ftt-stat-in .6s ease both}.ftt-hero-stats .ftt-hero-stat:nth-child(2){animation-delay:.1s}.ftt-hero-stats .ftt-hero-stat:nth-child(3){animation-delay:.2s}.ftt-hero-stats .ftt-hero-stat:nth-child(4){animation-delay:.3s}@keyframes ftt-stat-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.ftt-hero-stats .ftt-hero-stat{animation:none!important}}