/* =========================================================================
   QuickDeveloperTools — global stylesheet
   -------------------------------------------------------------------------
   Design language: "technical paper". A drafting table, not a dashboard —
   a fine graph grid printed on a warm paper canvas, white panels resting on
   top of it, hairline rules doing the dividing so nothing has to shout, and
   monospace marking anything a machine produced.

   One rhythm unit (--u: 28px) drives the grid, the body line height and
   every vertical gap. Two themes (light / dark) are a pure variable swap.

   The legacy token names (--bg, --surface, --text, --primary, ...) are kept
   and remapped onto the new palette so every existing page picks up the new
   look without being rewritten. New work should prefer the semantic names
   (--bench, --paper, --ink, --rule, --mark).
   ========================================================================= */

:root{
  /* rhythm — the grid, the line height and every gap agree on this number */
  --u:28px;

  /* canvas & paper */
  --bench:#F5F4F1;
  --paper:#FFFFFF;
  --paper-2:#FAF9F6;
  --paper-3:#F0EEE8;

  /* ink */
  --ink:#15171B;
  --ink-2:#4B4F58;
  --ink-3:#8A8E99;

  /* rules */
  --rule:#E3E0D9;
  --rule-2:#EDEBE5;
  --grid-line:rgba(21,23,27,.040);

  /* brand — amber is the single accent, teal the secondary signal */
  --mark:#B9791F;
  --mark-deep:#8F5C15;
  --mark-soft:#F8EFDF;
  --mark-line:rgba(185,121,31,.32);

  --accent:#0E8C7F;
  --accent-dark:#0B6F64;
  --accent-tint:rgba(14,140,127,.10);
  --accent-line:rgba(14,140,127,.30);
  --accent-soft:#E5F3F1;

  /* inverted surface — dark buttons, code blocks */
  --invert:#15171B;
  --on-invert:#FBFAF8;

  /* status */
  --ok:#14724A;    --ok-soft:#E8F3ED;
  --warn:#9C5714;  --warn-soft:#F8EFDF;
  --bad:#A93028;   --bad-soft:#F8EBEA;

  /* ---- legacy aliases: existing pages keep working, new palette ------- */
  --bg:var(--bench);
  --surface:var(--paper);
  --surface-soft:var(--paper-2);
  --surface-raised:var(--paper-3);
  --line:var(--rule);
  --line-soft:var(--rule-2);
  --text:var(--ink);
  --muted:var(--ink-2);
  --faint:var(--ink-3);
  --primary:var(--mark);
  --primary-dark:var(--mark-deep);
  --primary-tint:var(--mark-soft);
  --primary-line:var(--mark-line);
  --success:var(--ok);
  --danger:var(--bad);

  /* geometry */
  /* 48 x 28 — still lands exactly on the printed grid, but wide enough that
     a 100% zoom desktop shows meaningfully more content. This is the single
     knob for page width: every shell, tool page and inner wrap reads it.
     Other on-grid values if you want to nudge it: 1344 (48u), 1456 (52u). */
  --qdt-shell:1400px;
  --qdt-rail:224px;              /*  8 x 28                               */
  --radius:14px;
  --radius-sm:9px;
  --r-sm:5px;
  --r:10px;
  --r-lg:16px;

  /* shadows are tinted with the ink hue, never pure black */
  --qdt-shadow:0 1px 1px rgba(21,23,27,.04),0 4px 10px -4px rgba(21,23,27,.09),0 14px 32px -18px rgba(21,23,27,.22);
  --qdt-shadow-lg:0 1px 2px rgba(21,23,27,.05),0 8px 20px -8px rgba(21,23,27,.12),0 34px 70px -28px rgba(21,23,27,.30);
  --lift:var(--qdt-shadow);
  --lift-lg:var(--qdt-shadow-lg);

  --grain:.030;

  --font-display:'Space Grotesk','Grotesk Fallback','Plus Jakarta Sans',Inter,sans-serif;
  --font-body:Inter,'Inter Fallback','Segoe UI',Arial,sans-serif;
  --font-mono:'JetBrains Mono','Mono Fallback',Consolas,'Courier New',monospace;

  color-scheme:light;
  font-family:var(--font-body);
}

html[data-theme="dark"]{
  --bench:#0E0F12;
  --paper:#16181D;
  --paper-2:#1B1E24;
  --paper-3:#23262E;

  --ink:#F1EFEB;
  --ink-2:#A9AEB8;
  --ink-3:#757B87;

  --rule:#2A2E36;
  --rule-2:#22252C;
  --grid-line:rgba(255,255,255,.030);

  --mark:#E0A345;
  --mark-deep:#F0BB68;
  --mark-soft:#2A2013;
  --mark-line:rgba(224,163,69,.34);

  --accent:#3FBFAE;
  --accent-dark:#5FD3C3;
  --accent-tint:rgba(63,191,174,.12);
  --accent-line:rgba(63,191,174,.32);
  --accent-soft:#12292A;

  --invert:#F1EFEB;
  --on-invert:#101216;

  --ok:#4FBE87;   --ok-soft:#13241C;
  --warn:#DB9B4E; --warn-soft:#2A2013;
  --bad:#E8756C;  --bad-soft:#2B1818;

  --qdt-shadow:0 1px 1px rgba(0,0,0,.5),0 4px 10px -4px rgba(0,0,0,.55),0 14px 32px -18px rgba(0,0,0,.7);
  --qdt-shadow-lg:0 1px 2px rgba(0,0,0,.55),0 8px 20px -8px rgba(0,0,0,.6),0 34px 70px -28px rgba(0,0,0,.8);

  --grain:.042;

  color-scheme:dark;
}

/* legacy alias kept because some page-level stylesheets reference --page-bg */
:root{--page-bg:var(--bg)}

/* Fallback metrics — the page holds its exact layout before the webfonts
   land, so there is no reflow on first paint. */
@font-face{
  font-family:'Inter Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:107%;ascent-override:90%;descent-override:22.5%;line-gap-override:0%
}
@font-face{
  font-family:'Grotesk Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:103%;ascent-override:96%;descent-override:24%;line-gap-override:0%
}
@font-face{
  font-family:'Mono Fallback';src:local('Consolas'),local('Menlo'),local('Courier New');
  size-adjust:104%;ascent-override:92%;descent-override:23%;line-gap-override:0%
}

*,*::before,*::after{box-sizing:border-box}
/* Several components set display:grid/flex on elements that are also toggled
   via the native [hidden] attribute (tree/text view switches, modals, table
   sections). Author display rules otherwise win over the UA [hidden] rule at
   equal specificity, so without this the "hidden" panel stays visible. */
[hidden]{display:none !important}

html{
  min-height:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--u) * 3.5);
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent
}

body{
  background-color:var(--bench);
  /* the graph paper: two hairline gradients crossed at one rhythm unit */
  background-image:
    linear-gradient(to right,var(--grid-line) 0 1px,transparent 1px 100%),
    linear-gradient(to bottom,var(--grid-line) 0 1px,transparent 1px 100%);
  background-size:var(--u) var(--u);
  background-position:center top;
  color:var(--ink-2);font-family:var(--font-body);
  /* 16 x 1.75 = 28 — body copy lands on the grid, and because the value is
     unitless it scales for smaller text instead of inheriting a fixed 28px. */
  font-size:16px;line-height:1.75;margin:0;min-height:100vh;
  overflow-wrap:break-word;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility
}

/* soft light wash from the top — keeps the grid from feeling mechanical */
body::before{
  background:
    radial-gradient(70% 40% at 50% -8%,rgba(255,255,255,.9),transparent 66%),
    radial-gradient(44% 28% at 88% 2%,rgba(185,121,31,.06),transparent 70%);
  content:"";inset:0;pointer-events:none;position:fixed;z-index:0
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(70% 40% at 50% -8%,rgba(150,170,220,.07),transparent 66%),
    radial-gradient(44% 28% at 88% 2%,rgba(224,163,69,.05),transparent 70%)
}
body > *{position:relative;z-index:1}

/* paper grain — tactility, toggled off via html[data-grain="off"] */
.qdt-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  inset:0;opacity:var(--grain);pointer-events:none;position:fixed;z-index:2
}
html[data-grain="off"] .qdt-grain{display:none}

/* Reading progress — a thin band of light that runs left to right as the page
   scrolls and spans the full width at the bottom. It must sit ABOVE the sticky
   header (z-index 1000) or the header paints over it and it never shows. */
.qdt-progress{
  background:linear-gradient(90deg,var(--mark) 0%,#C98A2A 22%,var(--accent) 62%,#3FBFAE 100%);
  box-shadow:0 0 10px rgba(14,140,127,.45),0 0 3px rgba(185,121,31,.5);
  height:3px;inset:0 auto auto 0;pointer-events:none;position:fixed;
  transition:width .08s linear;width:0;z-index:1100
}
html[data-theme="dark"] .qdt-progress{
  box-shadow:0 0 12px rgba(63,191,174,.5),0 0 4px rgba(224,163,69,.45)
}

a{color:inherit}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}

:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:var(--r-sm)}

::selection{background:var(--mark-soft);color:var(--ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rule);border:3px solid var(--bench);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}

.qdt-skip{
  background:var(--invert);border-radius:var(--r-sm);color:var(--on-invert);font-size:14px;
  left:12px;padding:10px 16px;position:absolute;text-decoration:none;top:-60px;transition:top .18s;z-index:200
}
.qdt-skip:focus{top:12px}

.qdt-mono{font-family:var(--font-mono);font-variant-ligatures:none;font-feature-settings:"tnum" 1,"zero" 1}
.qdt-tag{
  color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase
}

.qdt-shell{margin-inline:auto;width:min(calc(100% - var(--u) * 2),var(--qdt-shell))}
.qdt-page-host{min-height:55vh;padding-block:14px 44px}
/* Generic fallback so plain content pages (privacy, terms, errors, etc.)
   that render bare <h1>/<p> without a wrapper still look intentional. */
.qdt-page-host > *{margin-inline:auto;max-width:var(--qdt-shell);padding-inline:28px}
.qdt-page-host > h1{
  color:var(--ink);font:700 clamp(30px,4vw,42px)/1.06 var(--font-display);
  letter-spacing:-.036em;margin-bottom:14px;text-wrap:balance
}
.qdt-page-host > h2{color:var(--ink);font:600 26px/1.16 var(--font-display);letter-spacing:-.026em;text-wrap:balance}
.qdt-page-host > p{color:var(--ink-2);max-width:68ch;text-wrap:pretty}

/* =========================================================================
   HEADER — the shell top bar
   -------------------------------------------------------------------------
   Brand · category nav · ⌘K search trigger · theme toggle · CTA.
   Sticky, hairline-bottomed, translucent over the graph canvas.
   ========================================================================= */
.qdt-site-header{
  background:color-mix(in srgb,var(--bench) 82%,transparent);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);font-family:var(--font-body);
  position:sticky;top:0;z-index:1000
}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .qdt-site-header{background:var(--bench)}
}

/* 3 rhythm units = 84px. The 50px wordmark needs more room than the old 70px
   bar gave it — 17px of clearance above and below reads deliberate, 10px reads
   cramped. Drops back to 2.5u once the logo steps down on smaller screens. */
.qdt-header-inner{
  align-items:center;display:flex;gap:20px;justify-content:space-between;
  height:calc(var(--u) * 3)
}
@media(max-width:900px){
  .qdt-header-inner{height:calc(var(--u) * 2.5)}
}

/* ---------- brand ------------------------------------------------------- */
.qdt-brand{
  align-items:center;color:var(--ink);display:inline-flex;flex:0 0 auto;
  gap:10px;text-decoration:none
}

/* The logo is a wordmark, so it carries the brand name on its own. Height is
   fixed and width follows the 8.5:1 aspect, which keeps it crisp at any zoom.
   Only one of the two files is ever displayed — see the theme rules below. */
.qdt-brand-logo{
  height:50px;width:auto;display:block;
  /* the source is 3x the display size, so let the browser downscale smoothly */
  image-rendering:auto
}
html[data-theme="dark"] .qdt-brand-logo-light{display:none}
html[data-theme="dark"] .qdt-brand-logo-dark{display:block}
.qdt-brand-logo-dark{display:none}

/* Fallback text brand, still used anywhere the logo images are not wanted. */
.qdt-brand-mark{
  align-items:center;border:1.5px solid currentColor;border-radius:var(--r-sm);
  display:inline-flex;font:700 14px/1 var(--font-display);height:30px;
  justify-content:center;letter-spacing:-.03em;width:30px
}
.qdt-brand-name{
  font-family:var(--font-display);font-size:15.5px;font-weight:600;
  letter-spacing:-.022em;line-height:1.2;white-space:nowrap
}
.qdt-brand-name span{color:var(--ink-3);font-weight:500}

.qdt-site-footer .qdt-brand-logo{height:40px}

/* The wordmark is 8.5:1, so 50px tall is ~424px wide — wider than a phone.
   Step it down before it can overflow the bar. */
@media(max-width:900px){
  .qdt-brand-logo{height:40px}                      /* ~339px wide */
  .qdt-site-footer .qdt-brand-logo{height:34px}
}
@media(max-width:620px){
  .qdt-brand-logo{height:32px}                      /* ~271px wide */
}
@media(max-width:430px){
  .qdt-brand-logo{height:26px}                      /* ~220px wide */
  .qdt-site-footer .qdt-brand-logo{height:26px}
}

/* ---------- primary navigation ------------------------------------------ */
.qdt-primary-nav{align-items:center;display:flex;gap:2px}
.qdt-primary-nav a{
  border-radius:var(--r-sm);color:var(--ink-3);font-size:14px;font-weight:500;
  padding:8px 13px;position:relative;text-decoration:none;transition:color .16s;white-space:nowrap
}
/* underline that draws in from the left rather than switching on */
.qdt-primary-nav a::after{
  background:var(--mark);bottom:-1px;content:"";height:2px;left:13px;position:absolute;right:13px;
  transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.4,0,.2,1)
}
.qdt-primary-nav a:hover{color:var(--ink)}
.qdt-primary-nav a:hover::after,.qdt-primary-nav a.is-active::after{transform:scaleX(1)}
.qdt-primary-nav a.is-active{color:var(--ink)}

/* ---------- header actions ---------------------------------------------- */
.qdt-header-actions{align-items:center;display:flex;flex:0 0 auto;gap:8px}

/* ⌘K trigger — looks like the search field it opens */
.qdt-kbd-trigger{
  align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  color:var(--ink-3);cursor:pointer;display:inline-flex;font-size:13.5px;gap:10px;height:34px;
  padding:0 10px 0 12px;transition:border-color .16s,color .16s,box-shadow .16s
}
.qdt-kbd-trigger:hover{border-color:var(--ink-3);box-shadow:var(--qdt-shadow);color:var(--ink-2)}
.qdt-kbd-trigger .keys{color:var(--ink-3);display:inline-flex;font-family:var(--font-mono);font-size:10.5px;gap:3px}
.qdt-kbd-trigger .keys kbd{
  align-items:center;background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  display:inline-flex;font:inherit;height:18px;justify-content:center;min-width:18px;padding:0 4px
}

.qdt-icon-btn{
  align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  color:var(--ink-2);cursor:pointer;display:inline-flex;height:34px;justify-content:center;
  padding:0;transition:color .16s,border-color .16s,box-shadow .16s;width:34px
}
.qdt-icon-btn:hover{border-color:var(--ink-3);box-shadow:var(--qdt-shadow);color:var(--ink)}
.qdt-icon-btn svg{height:15px;width:15px}
html[data-theme="light"] .qdt-icon-btn .qdt-moon,
html:not([data-theme="dark"]) .qdt-icon-btn .qdt-moon{display:none}
html[data-theme="dark"] .qdt-icon-btn .qdt-sun{display:none}

.qdt-header-cta{
  align-items:center;background:var(--invert);border:1px solid var(--invert);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);color:var(--on-invert);display:inline-flex;
  font-size:13.5px;font-weight:500;gap:8px;height:34px;padding:0 15px;text-decoration:none;
  transition:transform .16s,box-shadow .16s;white-space:nowrap
}
.qdt-header-cta:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--qdt-shadow);transform:translateY(-1px)
}

/* ---------- mobile menu toggle ------------------------------------------ */
.qdt-menu-toggle{
  align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:999px;
  cursor:pointer;display:none;height:34px;justify-content:center;padding:0;position:relative;width:34px
}
.qdt-menu-toggle span{
  background:var(--ink);border-radius:999px;height:1.5px;position:absolute;transition:.18s;width:16px
}
.qdt-menu-toggle span:nth-child(1){transform:translateY(-5px)}
.qdt-menu-toggle span:nth-child(3){transform:translateY(5px)}
.qdt-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.qdt-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.qdt-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:rotate(-45deg)}

@media(max-width:1040px){
  .qdt-primary-nav{
    background:var(--paper);border:1px solid var(--rule);border-radius:var(--r);
    box-shadow:var(--qdt-shadow-lg);display:none;flex-direction:column;gap:0;left:0;
    margin-top:8px;padding:8px;position:absolute;right:0;top:100%;z-index:20
  }
  .qdt-primary-nav.is-open{display:flex}
  .qdt-primary-nav a{border-radius:var(--r-sm);padding:11px 13px;width:100%}
  .qdt-primary-nav a::after{display:none}
  .qdt-primary-nav a:hover,.qdt-primary-nav a.is-active{background:var(--paper-3);color:var(--ink)}
  .qdt-header-inner{position:relative}
}
@media(max-width:720px){
  .qdt-kbd-trigger .label,.qdt-kbd-trigger .keys{display:none}
  .qdt-kbd-trigger{padding:0 10px}
  .qdt-header-cta{display:none}
}
@media(max-width:420px){
  .qdt-brand-name{font-size:14px}
}

/* =========================================================================
   COMMAND PALETTE — ⌘K / Ctrl+K / "/" from anywhere on the site
   ========================================================================= */
.qdt-palette{
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  background:color-mix(in srgb,var(--ink) 26%,transparent);
  display:none;inset:0;padding:calc(var(--u) * 3) 20px 20px;position:fixed;z-index:1500
}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .qdt-palette{background:rgba(21,23,27,.30)}
}
.qdt-palette.is-open{display:block}

.qdt-palette-box{
  animation:qdtPalettePop .16s cubic-bezier(.4,0,.2,1);background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-lg);box-shadow:var(--qdt-shadow-lg);
  margin-inline:auto;overflow:hidden;width:min(560px,100%)
}
@keyframes qdtPalettePop{from{opacity:0;transform:translateY(-6px) scale(.99)}}

.qdt-palette-input{
  background:transparent;border:0;border-bottom:1px solid var(--rule);color:var(--ink);
  font-size:16px;height:54px;outline:none;padding:0 18px;width:100%
}
.qdt-palette-input::placeholder{color:var(--ink-3)}

.qdt-palette-list{
  list-style:none;margin:0;max-height:min(52vh,420px);overflow:auto;padding:7px
}
.qdt-palette-list li{border-radius:var(--r-sm)}
.qdt-palette-list button{
  align-items:center;background:transparent;border:0;border-radius:var(--r-sm);color:var(--ink);
  cursor:pointer;display:flex;font-size:14.5px;gap:12px;padding:10px 12px;text-align:left;width:100%
}
.qdt-palette-list li.is-active button{background:var(--paper-3)}
.qdt-palette-list .k{
  align-items:center;background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;
  color:var(--mark);display:inline-flex;flex:0 0 auto;font-family:var(--font-mono);font-size:10.5px;
  height:26px;justify-content:center;width:26px
}
.qdt-palette-list .meta{
  color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  margin-left:auto;padding-left:12px;text-transform:uppercase;white-space:nowrap
}
.qdt-palette-empty{color:var(--ink-3);font-size:14px;padding:22px 18px}
.qdt-palette-foot{
  background:var(--paper-2);border-top:1px solid var(--rule);color:var(--ink-3);display:flex;
  flex-wrap:wrap;font-family:var(--font-mono);font-size:10.5px;gap:16px;letter-spacing:.06em;padding:9px 16px
}

.qdt-primary-button{
  align-items:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:0;border-radius:9px;
  box-shadow:0 8px 18px rgba(185,121,31,.24);color:#FFF8EC;display:inline-flex;font:700 12.5px var(--font-display);
  justify-content:center;min-height:40px;padding:0 17px;text-decoration:none;transition:.2s
}
.qdt-primary-button:hover{box-shadow:0 12px 26px rgba(185,121,31,.3);transform:translateY(-1px)}

.qdt-site-toast{
  background:#151B26;border-radius:8px;bottom:16px;color:#F6F7FA;font-size:12px;left:50%;opacity:0;
  padding:10px 16px;pointer-events:none;position:fixed;transform:translate(-50%,10px);transition:.2s;z-index:1200
}
.qdt-site-toast.show{opacity:1;transform:translate(-50%,0)}

/* =========================================================================
   GLOBAL LOADING OVERLAY — used by any tool that reads a file or runs a
   heavier operation (JSON/XML formatter file browse, etc). Wrap the target
   panel with position:relative and toggle .show on [data-loading-overlay].
   ========================================================================= */
.qdt-loading-overlay{
  align-items:center;background:rgba(246,247,250,.86);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  border-radius:inherit;display:flex;inset:0;justify-content:center;opacity:0;pointer-events:none;
  position:absolute;transition:opacity .16s ease;z-index:30
}
.qdt-loading-overlay.show{opacity:1;pointer-events:auto}
html[data-theme="dark"] .qdt-loading-overlay{background:rgba(14,15,18,.88)}
.qdt-loading-card{
  align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--qdt-shadow-lg);display:flex;flex-direction:column;gap:12px;padding:24px 34px;text-align:center
}
.qdt-loading-spinner{
  animation:qdtSpin .85s linear infinite;border:3.5px solid var(--accent-tint);
  border-radius:50%;border-right-color:var(--primary);border-top-color:var(--accent);height:38px;width:38px
}
.qdt-loading-text{color:var(--text);font:700 12.5px var(--font-display)}
.qdt-loading-sub{color:var(--faint);font:600 10px var(--font-mono);letter-spacing:.04em}
@keyframes qdtSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.qdt-loading-spinner{animation-duration:1.6s}}

/* =========================================================================
   GLOBAL STATUS MESSAGE — one shared component used by every tool page.
   Markup: <div class="qdt-status" data-status></div> (any wrapper id/class
   is fine). Call from JS via QDT.setStatus(el, type, message) in site.js —
   works the same on json-formatter, xml-formatter, jwt-decoder, etc.
   Types: success, error, warning, info, loading, processing, clearing.
   ========================================================================= */
.qdt-status{
  align-items:center;border:1px solid transparent;border-radius:8px;box-shadow:0 1px 2px rgba(19,27,44,.05);
  display:flex;font-size:12.5px;font-weight:600;gap:10px;line-height:1.4;min-height:36px;padding:8px 14px;visibility:hidden
}
.qdt-status.show{visibility:visible}
.qdt-status-emoji{flex:0 0 auto;font-size:15px;line-height:1}
.qdt-status-text{flex:1}
.qdt-status-success{background:#effaf3;border-color:#89d6a1;color:#0c7133}
.qdt-status-error{background:#fdf0ef;border-color:#e3afa9;color:#a8152c}
.qdt-status-warning{background:#fff8ea;border-color:#f0cb7a;color:#8a5a0a}
.qdt-status-info{background:var(--accent-tint);border-color:var(--accent-line);color:var(--accent-dark)}
.qdt-status-loading{background:#eef3ff;border-color:#b9c9f5;color:#2947a3}
.qdt-status-loading .qdt-status-emoji{animation:qdtStatusPulse 1.1s ease-in-out infinite;display:inline-block}
.qdt-status-processing{background:#f3eeff;border-color:#c9b9f5;color:#5b32a3}
.qdt-status-processing .qdt-status-emoji{animation:qdtStatusSpin 1.4s linear infinite;display:inline-block}
.qdt-status-clearing{background:#f5f6f8;border-color:#d6dbe3;color:#586173}
@keyframes qdtStatusPulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes qdtStatusSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.qdt-status-emoji{animation:none!important}}
html[data-theme="dark"] .qdt-status-success{background:#0d2418;border-color:#2f6b48;color:#a9e8bf}
html[data-theme="dark"] .qdt-status-error{background:#2a1213;border-color:#7a3a3a;color:#f3b3ba}
html[data-theme="dark"] .qdt-status-warning{background:#241c08;border-color:#7a5f24;color:#f0cb7a}
html[data-theme="dark"] .qdt-status-info,
html[data-theme="dark"] .qdt-status-loading,
html[data-theme="dark"] .qdt-status-processing,
html[data-theme="dark"] .qdt-status-clearing{background:#161616;border-color:#4a4a4a;color:#e6e6e6}

@keyframes qdtLogoShimmer{0%,46%{left:-90%}68%,100%{left:132%}}
@keyframes qdtGearRock{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(9deg)}}
@keyframes qdtLogoLine{0%{stroke-dashoffset:44}50%{stroke-dashoffset:18}100%{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* =========================================================================
   HOME — hero
   ========================================================================= */
.qdt-home{background:var(--bg);color:var(--text);font-family:var(--font-body)}
.qdt-home a{text-decoration:none}
.qdt-home :is(h1,h2,h3,strong,b){font-family:var(--font-display)}

.qdt-home-hero{padding:26px 0 14px;position:relative;width:auto}
.qdt-home-hero>.qdt-shell{
  background:
    radial-gradient(circle at 90% 4%,rgba(14,140,127,.14),transparent 34%),
    radial-gradient(circle at 12% 6%,rgba(185,121,31,.13),transparent 32%),
    linear-gradient(180deg,var(--surface) 0%,var(--surface-soft) 100%);
  border:1px solid var(--line);border-radius:22px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 30px 60px -22px rgba(19,27,44,.22),0 8px 22px -10px rgba(185,121,31,.12);
  max-width:var(--qdt-shell);overflow:hidden;padding:34px 40px;position:relative;width:min(calc(100% - 36px),var(--qdt-shell))
}
.qdt-home-hero>.qdt-shell::after{
  background:linear-gradient(90deg,var(--accent) 0%,var(--primary) 100%);content:"";height:3px;
  left:0;position:absolute;right:0;top:0
}
.qdt-home-hero>.qdt-shell::before{
  background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size:34px 34px;content:"";inset:0;
  mask-image:radial-gradient(ellipse 85% 65% at 15% 10%,#000 5%,transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 85% 65% at 15% 10%,#000 5%,transparent 68%);
  opacity:.7;pointer-events:none;position:absolute
}
.qdt-home-hero-grid{align-items:center;display:grid;gap:40px;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);margin:0;max-width:none;min-height:320px;position:relative}
.qdt-home-hero-copy{max-width:640px;position:relative;z-index:2}
.qdt-home-eyebrow{
  align-items:center;background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:999px;
  color:var(--accent-dark);display:inline-flex;font:700 10.5px var(--font-mono);gap:8px;letter-spacing:.1em;
  margin-bottom:17px;padding:7px 13px;text-transform:uppercase
}
.qdt-home-eyebrow::before{background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent);content:"";height:6px;width:6px}
.qdt-home-hero-copy h1{color:var(--text);font-family:var(--font-display);font-size:clamp(34px,3.4vw,46px);font-weight:700;letter-spacing:-1.2px;line-height:1.08;margin:0}
.qdt-home-hero-copy h1 span{display:block}
.qdt-home-hero-copy h1 .qdt-home-title-primary{color:var(--text);margin-bottom:4px}
.qdt-home-hero-copy h1 span:not(.qdt-home-title-primary){color:var(--primary)}
.qdt-home-hero-copy>p{color:var(--muted);font-size:15px;font-weight:400;line-height:1.7;margin:17px 0 22px;max-width:560px}

.qdt-home-search{
  align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--qdt-shadow);display:flex;max-width:520px;min-height:48px;padding:5px 5px 5px 6px;
  transition:border-color .18s ease,box-shadow .18s ease
}
.qdt-home-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint),var(--qdt-shadow)}
.qdt-home-search label{align-items:center;display:flex;flex:1;min-width:0}
.qdt-home-search label .qdt-search-glyph{align-items:center;color:var(--primary);display:inline-flex;flex:0 0 auto;margin-left:10px}
.qdt-home-search input{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent;border:none;
  color:var(--text);flex:1;font:500 13px var(--font-body);height:40px;min-width:0;outline:none;padding:0 10px;width:100%
}
.qdt-home-search input::placeholder{color:var(--faint)}
.qdt-home-search input::-webkit-search-decoration,
.qdt-home-search input::-webkit-search-cancel-button,
.qdt-home-search input::-webkit-search-results-button,
.qdt-home-search input::-webkit-search-results-decoration{appearance:none;display:none}
.qdt-home-search .search-button{
  align-items:center;align-self:stretch;background:linear-gradient(135deg,var(--primary),var(--primary-dark));border:0;border-radius:9px;
  color:#FFF8EC;cursor:pointer;display:inline-flex;flex:0 0 auto;font:700 13px var(--font-display);gap:7px;justify-content:center;min-width:112px;padding:0 16px;
  transition:box-shadow .18s ease,transform .18s ease
}
.qdt-home-search .search-button:hover{box-shadow:0 9px 20px rgba(185,121,31,.28);transform:translateY(-1px)}
.qdt-home-search .search-button:focus-visible{outline:3px solid var(--primary-tint);outline-offset:2px}

.qdt-home-trust-points{align-items:center;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.qdt-home-trust-points span{
  align-items:center;background:var(--surface-soft);border:1px solid var(--line-soft);border-radius:999px;
  color:var(--text);display:inline-flex;font:700 10px var(--font-mono);gap:6px;padding:6px 10px
}
.qdt-home-trust-points span::before{font-size:11px}
.qdt-home-trust-points .is-client-side::before{color:var(--success);content:"\2713"}
.qdt-home-trust-points .is-private::before{color:var(--accent);content:"\25A3"}
.qdt-home-trust-points .is-free::before{color:var(--primary);content:"\2726"}
.qdt-home-trust-points .is-instant::before{color:var(--danger);content:"\26A1"}

/* Live demo panel — functional JSON formatter preview inside the hero */
.qdt-home-demo{position:relative;z-index:2}
.qdt-demo-panel{
  animation:qdtDemoRise .7s cubic-bezier(.16,1,.3,1) both;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 26px 50px -18px rgba(19,27,44,.30),0 4px 14px rgba(19,27,44,.08);position:relative
}
@keyframes qdtDemoRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.qdt-demo-panel::before,.qdt-demo-panel::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--accent);opacity:.85}
.qdt-demo-panel::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-radius:var(--radius) 0 0 0;animation:qdtCornerGlow 3.2s ease-in-out infinite}
.qdt-demo-panel::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-radius:0 0 var(--radius) 0;animation:qdtCornerGlow 3.2s ease-in-out infinite 1.6s}
@keyframes qdtCornerGlow{0%,100%{opacity:.55;filter:drop-shadow(0 0 0 transparent)}50%{opacity:1;filter:drop-shadow(0 0 5px var(--accent))}}
.qdt-demo-head{align-items:center;display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line-soft)}
.qdt-demo-dots{display:flex;gap:6px}
.qdt-demo-dots span{width:9px;height:9px;border-radius:50%;display:block;animation:qdtDotCharge 2.4s ease-in-out infinite}
.qdt-demo-dots span:nth-child(1){background:#ff5f57;color:#ff5f57;animation-delay:0s}
.qdt-demo-dots span:nth-child(2){background:#febc2e;color:#febc2e;animation-delay:.25s}
.qdt-demo-dots span:nth-child(3){background:#28c840;color:#28c840;animation-delay:.5s}
@keyframes qdtDotCharge{
  0%,60%,100%{transform:scale(1);box-shadow:0 0 0 0 currentColor}
  30%{transform:scale(1.35);box-shadow:0 0 8px 2px currentColor}
}
.qdt-demo-title{font:600 11px var(--font-mono);color:var(--faint);letter-spacing:.05em}
.qdt-demo-body{padding:16px}
.qdt-demo-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.qdt-demo-col label{display:block;font:600 10.5px var(--font-mono);color:var(--faint);letter-spacing:.08em;margin-bottom:6px}
.qdt-demo-col textarea,.qdt-demo-output{
  width:100%;height:168px;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;
  color:var(--text);font:12px/1.6 var(--font-mono);padding:11px;resize:none;overflow:auto;white-space:pre-wrap;word-break:break-word;
  transition:border-color .18s ease,box-shadow .18s ease
}
.qdt-demo-col textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.qdt-demo-output.is-error{color:var(--danger);border-color:rgba(193,59,50,.4)}
.qdt-demo-output.is-busy{color:var(--faint)}
.qdt-demo-output .qdt-json-key{color:#2563eb;font-weight:600}
.qdt-demo-output .qdt-json-string{color:#0f9f6e}
.qdt-demo-output .qdt-json-number{color:#c2410c}
.qdt-demo-output .qdt-json-boolean,.qdt-demo-output .qdt-json-null{color:#7c3aed;font-weight:600}
.qdt-demo-output .qdt-json-punct{color:var(--faint)}
.qdt-demo-busy-dots::after{content:"";animation:qdtEllipsis 1.1s steps(4,end) infinite}
@keyframes qdtEllipsis{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
.qdt-demo-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;flex-wrap:wrap;gap:8px}
.qdt-demo-actions .qdt-demo-buttons{display:flex;gap:8px;flex-wrap:wrap}
.qdt-demo-btn{
  background:var(--surface-raised);border:1px solid var(--line);color:var(--muted);font:600 11.5px var(--font-mono);
  padding:8px 13px;border-radius:7px;cursor:pointer;transition:color .15s ease,border-color .15s ease,transform .15s ease
}
.qdt-demo-btn:hover{color:var(--text);border-color:var(--accent)}
.qdt-demo-btn:active{transform:scale(.94)}
.qdt-demo-btn.is-primary{background:var(--primary);color:#FFF8EC;border-color:var(--primary);font-weight:700}
.qdt-demo-btn.is-primary:hover{background:var(--primary-dark)}
.qdt-demo-status{font:11px var(--font-mono);color:var(--faint)}
@media(max-width:520px){.qdt-demo-row{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
  .qdt-demo-panel,.qdt-demo-panel::before,.qdt-demo-panel::after,.qdt-demo-dots span{animation:none}
}

/* =========================================================================
   HOME — benefit strip
   ========================================================================= */
.qdt-home-benefit-shell{background:var(--bg);padding:22px 0 0}
.benefit-strip{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--qdt-shadow);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 auto;overflow:hidden;width:min(calc(100% - 36px),var(--qdt-shell))
}
.benefit-item{align-items:center;display:flex;gap:13px;min-height:100px;padding:16px clamp(13px,1.8vw,24px)}
.benefit-item+.benefit-item{border-left:1px solid var(--line-soft)}
.benefit-icon{align-items:center;color:var(--primary);display:inline-flex;flex:0 0 auto;font-size:22px;justify-content:center;min-width:28px}
.benefit-icon.is-tools{color:var(--accent)}
.benefit-icon.is-speed{color:#D97706}
.benefit-icon.is-free{color:var(--primary)}
.benefit-icon.is-private{color:var(--accent)}
.benefit-icon.is-loved{color:#C4392F}
.benefit-item>span:last-child{display:grid;gap:2px;min-width:0}
.benefit-title{color:var(--text);display:block;font:700 12px var(--font-display);white-space:nowrap}
.benefit-text{color:var(--muted);display:block;font:500 9.5px var(--font-body);white-space:nowrap}

/* =========================================================================
   HOME — section heading + tool cards
   ========================================================================= */
.qdt-home-section{background:var(--bg);padding:44px 0 6px}
.qdt-home-section-heading{align-items:end;display:flex;gap:20px;justify-content:space-between;margin-bottom:20px}
.qdt-home-section-heading h2{color:var(--text);font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.5px;margin:0}
.qdt-home-section-heading p{color:var(--muted);font-size:12.5px;margin:5px 0 0}
.qdt-home-section-heading>a{color:var(--primary);font-size:11.5px;font-weight:700}
.qdt-home-section-heading>a:hover{color:var(--primary-dark)}

.qdt-home-category-grid,.qdt-home-tool-grid{display:grid;gap:16px;grid-template-columns:repeat(6,1fr)}
.qdt-home-category-grid>a,.qdt-home-tool-grid>a{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text);
  display:flex;flex-direction:column;min-height:196px;padding:20px 16px;text-align:center;
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease
}
.qdt-home-category-grid>a:hover,.qdt-home-tool-grid>a:hover{
  border-color:var(--accent-line);box-shadow:var(--qdt-shadow-lg);transform:translateY(-4px)
}
.qdt-home-category-grid>a>span,.qdt-home-tool-grid>a>span{
  align-items:center;border-radius:12px;color:#fff;display:flex;font-family:var(--font-mono);font-size:15px;
  font-weight:700;height:46px;justify-content:center;margin:0 auto 14px;transition:transform .2s ease;width:46px
}
.qdt-home-category-grid>a:hover>span,.qdt-home-tool-grid>a:hover>span{transform:scale(1.06)}
/* Scoped to the tool grid only — .qdt-cat-card reuses these same is-* modifier names for its
   (much lighter) icon-tint styling below, so a broader selector here would leak this gradient
   background onto the whole category card instead of just the small icon badge. */
.qdt-home-tool-grid .is-blue{background:linear-gradient(155deg,var(--accent),var(--accent-dark))}
.qdt-home-tool-grid .is-green{background:linear-gradient(155deg,#22B573,#0E8C4F)}
.qdt-home-tool-grid .is-purple{background:linear-gradient(155deg,#8A5CF6,#6236C9)}
.qdt-home-tool-grid .is-red{background:linear-gradient(155deg,#F0555F,#C13B32)}
.qdt-home-tool-grid .is-orange{background:linear-gradient(155deg,var(--primary),var(--primary-dark))}
.qdt-home-tool-grid .is-teal{background:linear-gradient(155deg,#14B0AB,#0B6F64)}
.qdt-home-category-grid h3,.qdt-home-tool-grid h3{font-family:var(--font-display);font-size:14px;margin:0}
.qdt-home-category-grid p,.qdt-home-tool-grid p{color:var(--muted);font-size:10.5px;line-height:1.6;margin:8px 0}
.qdt-home-category-grid b{color:var(--primary);font-size:10.5px;font-weight:700;margin-top:auto}

.qdt-home-featured{padding-bottom:36px}
.qdt-home-tool-grid>a{text-align:left}
.qdt-home-tool-grid>a>span{margin-left:0}
.qdt-home-tool-grid b{color:var(--text);display:flex;font-size:10.5px;font-weight:700;justify-content:space-between;margin-top:auto}
.qdt-home-tool-grid b:first-letter{color:var(--primary)}
.qdt-home-tool-grid i{color:var(--accent);font-size:16px;font-style:normal;transition:transform .2s ease}
.qdt-home-tool-grid>a:hover i{transform:translateX(3px)}

/* tag pill shown on tool/category cards, e.g. FORMAT / CONVERT / INSPECT */
.qdt-tool-tag{
  align-self:flex-start;background:var(--accent-tint);border:1px solid var(--accent-line);border-radius:5px;
  color:var(--accent-dark);font:700 9.5px var(--font-mono);letter-spacing:.08em;margin-bottom:12px;padding:3px 8px;text-transform:uppercase
}
.qdt-home-tool-grid>a .qdt-tool-tag{align-self:flex-start}
.qdt-home-category-grid>a .qdt-tool-tag{align-self:center}

/* =========================================================================
   HOME — categories showcase (10-card grid, icon + tags + hover lift)
   ========================================================================= */
.qdt-home-cat2{padding:44px 0}
.qdt-cat-heading{margin:0 auto 34px;max-width:720px;text-align:center}
.qdt-cat-eyebrow{
  background:var(--surface);border:1px solid var(--accent-line);border-radius:999px;box-shadow:var(--qdt-shadow);
  color:var(--accent-dark);display:inline-flex;font:700 12.5px var(--font-display);margin-bottom:14px;padding:8px 14px
}
.qdt-cat-heading h2{
  color:var(--text);font-family:var(--font-display);font-size:clamp(28px,3.6vw,40px);font-weight:800;
  letter-spacing:-1.1px;line-height:1.14;margin:0
}
.qdt-cat-gradient{
  background:linear-gradient(90deg,var(--accent),#7C3AED);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text
}
.qdt-cat-heading p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:13px auto 0;max-width:640px}

.qdt-cat-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.qdt-cat-card{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text);display:block;
  padding:20px;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.qdt-cat-card:hover{border-color:var(--accent-line);box-shadow:var(--qdt-shadow-lg);transform:translateY(-4px)}
.qdt-cat-card-top{align-items:flex-start;display:flex;justify-content:space-between;gap:12px}
.qdt-cat-icon{
  align-items:center;border-radius:13px;display:flex;flex-shrink:0;font-size:22px;height:48px;justify-content:center;width:48px
}
.qdt-cat-arrow{font-size:17px;font-weight:800;transition:transform .2s ease}
.qdt-cat-card:hover .qdt-cat-arrow{transform:translate(2px,-2px)}
.qdt-cat-card h3{color:var(--text);font-family:var(--font-display);font-size:16.5px;font-weight:800;margin:16px 0 7px}
.qdt-cat-card p{color:var(--muted);font-size:12.5px;line-height:1.6;margin:0}
.qdt-cat-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.qdt-cat-tags span{border-radius:6px;font-size:10.5px;font-weight:700;padding:4px 8px}

.qdt-cat-card.is-blue .qdt-cat-icon{background:#eaf2ff;color:#1768ff}
.qdt-cat-card.is-blue .qdt-cat-arrow{color:#1768ff}
.qdt-cat-card.is-blue .qdt-cat-tags span{background:#eaf2ff;color:#3159f7}
.qdt-cat-card.is-teal .qdt-cat-icon{background:#e7faf6;color:#0f9f8f}
.qdt-cat-card.is-teal .qdt-cat-arrow{color:#0f9f8f}
.qdt-cat-card.is-teal .qdt-cat-tags span{background:#e7faf6;color:#0f8f80}
.qdt-cat-card.is-purple .qdt-cat-icon{background:#f0eaff;color:#7c3aed}
.qdt-cat-card.is-purple .qdt-cat-arrow{color:#7c3aed}
.qdt-cat-card.is-purple .qdt-cat-tags span{background:#f0eaff;color:#7c3aed}
.qdt-cat-card.is-orange .qdt-cat-icon{background:#fff0dd;color:#ff7a00}
.qdt-cat-card.is-orange .qdt-cat-arrow{color:#ff7a00}
.qdt-cat-card.is-orange .qdt-cat-tags span{background:#fff0dd;color:#e66d00}
.qdt-cat-card.is-indigo .qdt-cat-icon{background:#e8f1ff;color:#2563eb}
.qdt-cat-card.is-indigo .qdt-cat-arrow{color:#2563eb}
.qdt-cat-card.is-indigo .qdt-cat-tags span{background:#e8f1ff;color:#2563eb}
.qdt-cat-card.is-pink .qdt-cat-icon{background:#ffeaf3;color:#db2777}
.qdt-cat-card.is-pink .qdt-cat-arrow{color:#db2777}
.qdt-cat-card.is-pink .qdt-cat-tags span{background:#ffeaf3;color:#db2777}
.qdt-cat-card.is-lime .qdt-cat-icon{background:#ecfbdc;color:#65a30d}
.qdt-cat-card.is-lime .qdt-cat-arrow{color:#65a30d}
.qdt-cat-card.is-lime .qdt-cat-tags span{background:#ecfbdc;color:#5c940d}
.qdt-cat-card.is-amber .qdt-cat-icon{background:#fff0e8;color:#ea580c}
.qdt-cat-card.is-amber .qdt-cat-arrow{color:#ea580c}
.qdt-cat-card.is-amber .qdt-cat-tags span{background:#fff0e8;color:#ea580c}
.qdt-cat-card.is-violet .qdt-cat-icon{background:#eceeff;color:#4f46e5}
.qdt-cat-card.is-violet .qdt-cat-arrow{color:#4f46e5}
.qdt-cat-card.is-violet .qdt-cat-tags span{background:#eceeff;color:#4f46e5}
.qdt-cat-card.is-slate .qdt-cat-icon{background:#edf1f6;color:#475467}
.qdt-cat-card.is-slate .qdt-cat-arrow{color:#475467}
.qdt-cat-card.is-slate .qdt-cat-tags span{background:#edf1f6;color:#475467}

.qdt-cat-cta{margin-top:32px;text-align:center}
.qdt-cat-cta-btn{gap:9px;min-height:46px;padding:0 21px}

html[data-theme="dark"] .qdt-cat-card{background:var(--paper);border-color:var(--rule)}
html[data-theme="dark"] .qdt-cat-eyebrow{background:var(--paper-2);color:var(--ink-2)}

/* =========================================================================
   HOME — why-strip (built like a workbench) + knowledge CTA
   ========================================================================= */
.qdt-home-why{background:var(--bg);padding:8px 0 10px}
.qdt-why-strip{
  background:var(--line-soft);border:1px solid var(--line-soft);border-radius:var(--radius);
  display:grid;gap:1px;grid-template-columns:repeat(3,1fr);margin:0 auto;overflow:hidden;width:min(calc(100% - 36px),var(--qdt-shell))
}
.qdt-why-item{background:var(--surface);padding:26px 26px}
.qdt-why-item .qdt-mono-label{color:var(--faint);font:700 10.5px var(--font-mono);letter-spacing:.1em;margin-bottom:10px}
.qdt-why-item h4{font-family:var(--font-display);font-size:16px;margin:0 0 8px}
.qdt-why-item p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}

.qdt-home-knowledge{background:var(--bg);padding:10px 0 46px}
.qdt-home-knowledge-card{
  align-items:center;background:linear-gradient(112deg,var(--surface) 0%,var(--surface-soft) 100%);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--qdt-shadow);display:grid;gap:32px;
  grid-template-columns:210px 1fr;min-height:190px;padding:30px 48px
}
.qdt-home-knowledge-card>div:first-child{font-size:76px;text-align:center}
.qdt-home-knowledge-card h2{font-family:var(--font-display);font-size:23px;margin:0 0 9px}
.qdt-home-knowledge-card p{color:var(--muted);font-size:13px;line-height:1.7;margin:0 0 18px;max-width:640px}

/* =========================================================================
   COMING SOON — shown for any tool that is inactive/unpublished in admin
   ========================================================================= */
.qdt-soon{padding:calc(var(--u) * 3) 0 calc(var(--u) * 4);max-width:760px}
.qdt-soon-eyebrow{
  align-items:center;color:var(--ink-3);display:flex;gap:12px;margin:0 0 var(--u)
}
.qdt-soon-eyebrow::before{
  background:var(--mark);content:"";flex:0 0 auto;height:1px;width:26px
}
.qdt-soon h1{
  color:var(--ink);font:700 clamp(38px,5.6vw,62px)/1 var(--font-display);
  letter-spacing:-.04em;margin:0;text-wrap:balance
}
.qdt-soon-accent{color:var(--mark)}
.qdt-soon-lead{
  color:var(--ink-2);font-size:18px;margin:var(--u) 0 0;max-width:56ch;text-wrap:pretty
}
.qdt-soon-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:calc(var(--u) * 1.25)}
.qdt-soon-btn{
  align-items:center;background:var(--invert);border:1px solid var(--invert);border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);color:var(--on-invert);display:inline-flex;
  font-size:15px;font-weight:500;height:44px;padding:0 22px;text-decoration:none;
  transition:transform .16s,box-shadow .16s
}
.qdt-soon-btn:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),var(--qdt-shadow-lg);transform:translateY(-1px)
}
.qdt-soon-btn.is-ghost{
  background:transparent;border-color:var(--rule);box-shadow:none;color:var(--ink)
}
.qdt-soon-btn.is-ghost:hover{border-color:var(--ink-3);box-shadow:var(--qdt-shadow)}

.qdt-soon-spec{
  border-block:1px solid var(--rule);display:flex;flex-wrap:wrap;
  margin:calc(var(--u) * 1.5) 0 0
}
.qdt-soon-spec > div{
  border-right:1px solid var(--rule);margin-right:24px;padding:13px 24px 13px 0
}
.qdt-soon-spec > div:last-child{border-right:0;margin-right:0;padding-right:0}
.qdt-soon-spec dt{
  color:var(--ink-3);font-family:var(--font-mono);font-size:9.5px;font-weight:500;
  letter-spacing:.16em;line-height:1.4;text-transform:uppercase
}
.qdt-soon-spec dd{
  color:var(--ink);font-family:var(--font-mono);font-size:13px;line-height:1.4;margin:5px 0 0
}
.qdt-soon-hint{color:var(--ink-3);font-size:14px;margin:calc(var(--u) * 1.25) 0 0}
.qdt-soon-hint kbd{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:4px;
  display:inline-flex;font-family:var(--font-mono);font-size:11px;height:19px;
  align-items:center;justify-content:center;margin:0 1px;min-width:19px;padding:0 4px
}

/* =========================================================================
   FOOTER — paper, not a dark slab
   ========================================================================= */
.qdt-site-footer{
  background:color-mix(in srgb,var(--paper) 55%,transparent);
  border-top:1px solid var(--rule);color:var(--ink-2);font-family:var(--font-body);
  padding:calc(var(--u) * 1.75) 0 calc(var(--u) * 1.25)
}
@supports not (background:color-mix(in srgb,red 50%,blue)){
  .qdt-site-footer{background:var(--paper)}
}

.qdt-footer-main{
  display:grid;gap:var(--u);grid-template-columns:1.5fr repeat(4,minmax(0,1fr))
}

.qdt-footer-brand .qdt-brand{margin-bottom:12px}
.qdt-footer-brand p{color:var(--ink-3);font-size:14px;margin:0 0 14px;max-width:34ch}

.qdt-social-links{display:flex;gap:7px}
.qdt-social-links a{
  align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink-3);display:inline-flex;font-family:var(--font-mono);font-size:11px;height:30px;
  justify-content:center;text-decoration:none;transition:color .16s,border-color .16s;width:30px
}
.qdt-social-links a:hover{border-color:var(--mark-line);color:var(--mark)}

.qdt-footer-column{display:flex;flex-direction:column}
.qdt-footer-column h2{
  color:var(--ink-3);font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.16em;margin:0 0 12px;text-transform:uppercase
}
.qdt-footer-column a{
  color:var(--ink-3);font-size:14px;line-height:1.5;padding:4px 0;
  text-decoration:none;transition:color .16s
}
.qdt-footer-column a:hover{color:var(--ink)}

/* ---------- trust row --------------------------------------------------- */
.qdt-trust-row{
  border-top:1px solid var(--rule-2);display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));margin-top:calc(var(--u) * 1.25);
  padding-top:var(--u)
}
.qdt-trust-row article{align-items:flex-start;display:flex;gap:12px;padding:0 22px}
.qdt-trust-row article:first-child{padding-left:0}
.qdt-trust-row article:last-child{padding-right:0}
.qdt-trust-row article+article{border-left:1px solid var(--rule-2)}
.qdt-trust-icon{
  align-items:center;background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--r-sm);
  display:inline-flex;flex:0 0 auto;font-size:14px;font-style:normal;font-weight:400;
  height:32px;justify-content:center;width:32px
}
.qdt-cloud-icon{color:#D9AF0A;font-size:22px}
.qdt-lock-icon{color:var(--mark)}
.qdt-speed-icon{color:var(--ok)}
.qdt-trust-row h3{
  color:var(--ink);font-family:var(--font-display);font-size:14.5px;font-weight:600;
  letter-spacing:-.012em;line-height:1.35;margin:0 0 3px
}
.qdt-trust-row p{color:var(--ink-3);font-size:12.5px;line-height:1.5;margin:0}
.qdt-trust-row p i{
  background:currentColor;border-radius:999px;display:inline-block;height:2px;
  margin:0 6px;opacity:.5;vertical-align:middle;width:3px
}

.qdt-trust-note{
  color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;line-height:1.6;
  margin:18px 0 0;max-width:80ch
}

.qdt-footer-bottom{
  border-top:1px solid var(--rule-2);color:var(--ink-3);display:flex;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;gap:16px;justify-content:space-between;
  margin-top:var(--u);padding-top:16px
}
.qdt-footer-bottom strong{color:var(--ink-2);font-weight:500}
.qdt-footer-bottom a{color:var(--ink-3);text-decoration:none;transition:color .16s}
.qdt-footer-bottom a:hover{color:var(--mark)}

@media(max-width:1040px){
  .qdt-footer-main{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:820px){
  .qdt-trust-row{grid-template-columns:1fr;gap:18px}
  .qdt-trust-row article{padding:0}
  .qdt-trust-row article+article{border-left:0;border-top:1px solid var(--rule-2);padding-top:18px}
}
@media(max-width:560px){
  .qdt-footer-main{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qdt-footer-bottom{flex-direction:column;gap:8px}
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:1250px){
  .qdt-home-hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.9fr)}
}
@media(max-width:1080px){
  .qdt-home-category-grid,.qdt-home-tool-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .qdt-menu-toggle{display:inline-flex}
  .qdt-home-hero>.qdt-shell{padding:26px 24px;width:min(calc(100% - 28px),var(--qdt-shell))}
  .qdt-home-hero-grid{grid-template-columns:1fr;gap:26px;min-height:auto}
  .qdt-home-hero-copy{margin-inline:auto;max-width:720px;text-align:center}
  .qdt-home-hero-copy>p,.qdt-home-search{margin-left:auto;margin-right:auto}
  .qdt-home-search-chips,.qdt-home-trust-points{justify-content:center}
  .qdt-why-strip{grid-template-columns:1fr}
  .benefit-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .benefit-item:nth-child(4),.benefit-item:nth-child(5){border-top:1px solid var(--line-soft)}
  .benefit-item:nth-child(4){border-left:0}
  .qdt-home-knowledge-card{grid-template-columns:170px 1fr;padding:26px 30px}
}
@media(max-width:680px){
  .qdt-shell{width:min(calc(100% - 24px),var(--qdt-shell))}
  .qdt-home-hero-copy h1{font-size:34px;letter-spacing:-1px}
  .qdt-home-search{display:grid;gap:5px}
  .qdt-home-search button,.qdt-home-search .search-button{min-height:44px}
  .qdt-home-category-grid,.qdt-home-tool-grid{grid-template-columns:repeat(2,1fr)}
  .qdt-home-section-heading{align-items:flex-start}
  .qdt-home-knowledge-card{grid-template-columns:1fr;text-align:center}
  .qdt-home-knowledge-card>div:first-child{font-size:64px}
  .qdt-footer-brand{grid-column:1/-1}
  .benefit-strip{grid-template-columns:1fr 1fr}
  .benefit-item{min-height:82px;padding:13px}
  .benefit-item:nth-child(odd){border-left:0}
  .benefit-item:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .benefit-item:last-child{grid-column:1/-1;justify-content:center}
  .benefit-title,.benefit-text{white-space:normal}
}
@media(max-width:440px){
  .qdt-home-category-grid,.qdt-home-tool-grid{grid-template-columns:1fr}
  .qdt-home-category-grid>a,.qdt-home-tool-grid>a{min-height:auto}
}

/* =========================================================================
   FAQ section (PageFaq view component)
   -------------------------------------------------------------------------
   Lives in site.css rather than a page-specific sheet because the same
   component renders on tool pages, category pages and anywhere else that opts
   in - and each of those loads a different stylesheet. One home means a page
   never has to remember to link anything.
   ========================================================================= */
.qdt-faq{padding:calc(var(--u) * 1.6) 0 calc(var(--u) * 1.2)}
.qdt-faq-shell{margin-inline:auto;width:min(calc(100% - var(--u) * 2),var(--qdt-shell))}

.qdt-faq-head{border-bottom:1px solid var(--rule);margin-bottom:20px;padding-bottom:14px}
.qdt-faq-kicker{
  color:var(--mark);display:block;font-family:var(--font-mono);font-size:10px;
  font-weight:500;letter-spacing:.18em;padding-bottom:8px;text-transform:uppercase
}
.qdt-faq-head h2{
  color:var(--ink);font-family:var(--font-display);font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.016em;line-height:1.18;margin:0
}
.qdt-faq-intro{color:var(--ink-2);font-size:14.5px;line-height:1.65;margin:10px 0 0;max-width:66ch}

.qdt-faq-list{
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);overflow:hidden
}
.qdt-faq-item+.qdt-faq-item{border-top:1px solid var(--rule)}

.qdt-faq-item>summary{
  align-items:center;cursor:pointer;display:flex;gap:16px;justify-content:space-between;
  list-style:none;padding:16px 20px;transition:background .15s,color .15s
}
.qdt-faq-item>summary::-webkit-details-marker{display:none}
.qdt-faq-item>summary:hover{background:var(--paper-2)}
/* Focus ring is inset so it is never clipped by the rounded container. */
.qdt-faq-item>summary:focus-visible{outline:2px solid var(--mark);outline-offset:-2px}

.qdt-faq-q{color:var(--ink);font-size:15.5px;font-weight:500;line-height:1.5}
.qdt-faq-item[open]>summary .qdt-faq-q{color:var(--mark)}

/* Drawn rather than a glyph: two bars, one of which rotates away on open.
   Keeps the control crisp at any zoom and needs no icon font. */
.qdt-faq-mark{flex:0 0 auto;height:16px;position:relative;width:16px}
.qdt-faq-mark::before,.qdt-faq-mark::after{
  background:var(--ink-3);border-radius:2px;content:"";left:50%;position:absolute;
  top:50%;transition:transform .22s cubic-bezier(.4,0,.2,1),background .15s
}
.qdt-faq-mark::before{height:2px;margin-left:-7px;margin-top:-1px;width:14px}
.qdt-faq-mark::after{height:14px;margin-left:-1px;margin-top:-7px;width:2px}
.qdt-faq-item[open] .qdt-faq-mark::after{transform:rotate(90deg)}
.qdt-faq-item[open] .qdt-faq-mark::before,
.qdt-faq-item[open] .qdt-faq-mark::after{background:var(--mark)}

.qdt-faq-a{padding:0 20px 18px 20px}
.qdt-faq-a p{color:var(--ink-2);font-size:14.5px;line-height:1.7;margin:0 0 10px;max-width:72ch}
.qdt-faq-a p:last-child{margin-bottom:0}
.qdt-faq-a a{color:var(--mark);text-decoration:underline;text-underline-offset:2px}
.qdt-faq-a code{
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--r-sm);
  color:var(--ink);font-family:var(--font-mono);font-size:.88em;padding:1px 5px
}

@media(max-width:640px){
  .qdt-faq-item>summary{gap:12px;padding:14px 15px}
  .qdt-faq-q{font-size:14.5px}
  .qdt-faq-a{padding:0 15px 15px}
}

@media(prefers-reduced-motion:reduce){
  .qdt-faq-mark::before,.qdt-faq-mark::after{transition:none}
}

/* Printed pages should show every answer, not a row of collapsed headings. */
@media print{
  .qdt-faq-item>summary{padding-bottom:6px}
  .qdt-faq-mark{display:none}
  /* The UA hides a closed <details>' non-summary children; override that rule
     directly rather than styling .qdt-faq-a, which it does not match. */
  .qdt-faq-item:not([open])>*:not(summary){display:block}
  .qdt-faq-item{break-inside:avoid}
}