/* ============================================================
   Keeper teardown funnel · shared core styles
   Dark "Statement" design from Funnel-MOCKUP_v1, retuned to the
   live gulshaniyer.com theme fonts (Instrument Serif / Inter /
   JetBrains Mono, already loaded site wide by header.php).
   Injected inside .entry-content via a wp:html block. No theme edits.
   ============================================================ */

/* ---- suppress the light theme chrome on funnel pages only ---- */
body{background:#0C0B09}
.site-header,.site-footer{display:none!important}
.site-main{padding:0!important}
.site-container{max-width:none!important;margin:0!important;padding:0!important}
.entry-header{display:none!important}
.entry-content{max-width:none!important}

#tdn{
  --ink:#0C0B09; --surface:#161411; --surface2:#1E1B16;
  --paper:#E7E0D0; --paper2:#DED5C0; --paperink:#16120B; --paperdim:#5C543F;
  --text:#EDE8DC; --dim:#9A937F; --line:#2A261F;
  --red:#C63B26; --redpaper:#B62518; --ok:#7A8F5A; --note:#D9A441;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  background:var(--ink);color:var(--text);font-family:var(--sans);line-height:1.55;
  min-height:100vh;font-size:16px;
}
#tdn *{margin:0;padding:0;box-sizing:border-box}
#tdn ::selection{background:var(--red);color:#fff}
#tdn .wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* the single domain input, above the fold. every other CTA scrolls here and focuses it,
   so there is one field, one id and one piece of state rather than three of each. */
#tdn .heroform{max-width:580px;margin:26px 0 14px}
#tdn .domaincta{display:flex;justify-content:center;margin-top:24px}

/* quiet legal footer. no ad platform approves lead traffic without these three pages
   reachable, and all three were 404 until 3 August 2026. */
#tdn .kfoot{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;
  margin:64px auto 32px;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--sans);font-size:12.5px;color:var(--dim)}
#tdn .kfoot nav{display:flex;gap:18px;flex-wrap:wrap}
#tdn .kfoot a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;
  transition:color .15s,border-color .15s}
#tdn .kfoot a:hover{color:var(--text);border-bottom-color:currentColor}
#tdn a{color:inherit;text-decoration:none}
#tdn img{max-width:100%;height:auto;display:block}
#tdn button:focus-visible,#tdn input:focus-visible{outline:2px solid var(--note);outline-offset:2px}

/* ---- nav ---- */
#tdn .lpnav{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
#tdn .brand{font-family:var(--serif);font-size:20px;letter-spacing:.01em}
#tdn .brand b{color:var(--red);font-style:italic}
#tdn .pillcta{background:var(--red);color:#fff;border:0;padding:10px 20px;font-size:14px;font-weight:600;cursor:pointer;border-radius:999px}
#tdn .pillcta:hover{filter:brightness(1.1)}

/* ---- hero ---- */
#tdn .hero{padding:72px 0 56px}
#tdn .eyebrow{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);border:1px solid var(--line);background:var(--surface);padding:7px 14px;margin-bottom:22px}
#tdn .callout{font-family:var(--mono);font-size:13px;color:var(--red);letter-spacing:.04em;margin-bottom:14px}
#tdn h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6.5vw,72px);line-height:1.02;letter-spacing:-.01em;text-wrap:balance;max-width:16ch}
#tdn h1 .kept{font-style:italic;color:var(--red)}
#tdn .sub{font-size:19px;color:var(--dim);max-width:54ch;margin:24px 0 26px;line-height:1.5}
#tdn .sub b{color:var(--text);font-weight:600}
#tdn .checks{list-style:none;display:grid;gap:9px;margin-bottom:30px;font-size:15px}
#tdn .checks li{padding-left:26px;position:relative}
#tdn .checks li::before{content:"✓";color:var(--ok);font-weight:700;position:absolute;left:0}
#tdn .heroctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
#tdn .ghost{background:none;border:1px solid var(--line);color:var(--text);padding:13px 22px;font-size:15px;cursor:pointer;border-radius:999px}
#tdn .ghost:hover{border-color:var(--dim)}
#tdn .bigcta{background:var(--red);color:#fff;border:0;padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;border-radius:999px}
#tdn .bigcta:hover{filter:brightness(1.1)}

#tdn .statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:44px 0 0}
@media (max-width:700px){#tdn .statrow{grid-template-columns:1fr}}
#tdn .stat{background:var(--surface);padding:22px 20px}
#tdn .stat .n{font-family:var(--serif);font-size:38px;color:var(--paper)}
#tdn .stat .l{font-size:13.5px;color:var(--dim);margin-top:4px;line-height:1.4}

#tdn section.blk{padding:64px 0;border-top:1px solid var(--line)}
#tdn .seclabel{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
#tdn h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4.2vw,42px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance;max-width:24ch;margin-bottom:10px}
#tdn .secsub{color:var(--dim);max-width:60ch;font-size:16px;margin-bottom:34px;line-height:1.5}

/* ---- deliverable / download cards ---- */
#tdn .dlgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){#tdn .dlgrid{grid-template-columns:1fr}}
#tdn .dl{background:var(--surface);border:1px solid var(--line);padding:18px 20px}
#tdn .dl .t{font-size:14.5px;font-weight:600;margin-bottom:5px}
#tdn .dl .d{font-size:13px;color:var(--dim);line-height:1.5}
#tdn .dl .v{font-family:var(--mono);font-size:11px;color:var(--paper);margin-top:10px}

/* ---- founder ---- */
#tdn .founder{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:start}
@media (max-width:700px){#tdn .founder{grid-template-columns:1fr}}
#tdn .fphoto{aspect-ratio:3/4;background:var(--surface2);border:1px solid var(--line);display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;color:var(--dim);text-align:center;letter-spacing:.08em}
#tdn .fphoto span{font-size:10px;opacity:.7;display:block;margin-top:6px}
#tdn .logos{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
#tdn .logo{border:1px solid var(--line);background:var(--surface);padding:10px 18px;font-family:var(--mono);
  font-size:12px;color:var(--dim);letter-spacing:.06em;min-width:76px;text-align:center}
#tdn .logo:first-child{color:var(--paper);border-color:var(--paperdim)}

/* ---- calculator ---- */
#tdn .calc{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}
@media (max-width:760px){#tdn .calc{grid-template-columns:1fr}}
#tdn .sliders{display:grid;gap:22px}
#tdn .sl label{display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px;color:var(--text)}
#tdn .sl label output{font-family:var(--mono);color:var(--paper);font-variant-numeric:tabular-nums}
#tdn input[type=range]{width:100%;accent-color:var(--red);cursor:pointer}
#tdn .sl .hint{font-size:12px;color:var(--dim);margin-top:4px}
#tdn .ledger{background:var(--paper);color:var(--paperink);padding:26px 26px 22px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#tdn .ledger .lhead{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paperdim);
  border-bottom:2px solid var(--paperink);padding-bottom:8px;margin-bottom:14px;display:flex;justify-content:space-between}
#tdn .lrow{display:flex;align-items:baseline;gap:8px;font-size:14.5px;padding:7px 0}
#tdn .lrow .lbl{flex-shrink:1}
#tdn .lrow .dots{flex:1;border-bottom:1px dotted var(--paperdim);transform:translateY(-4px)}
#tdn .lrow .amt{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#tdn .lrow.total{border-top:2px solid var(--paperink);margin-top:10px;padding-top:12px;font-weight:700}
#tdn .lrow.total .amt{color:var(--redpaper);font-size:19px}
#tdn .lrow.yr .amt{color:var(--redpaper)}
#tdn .lfoot{margin-top:16px;padding-top:12px;border-top:1px dotted var(--paperdim);font-size:13.5px;color:var(--redpaper);font-style:italic}
#tdn .approx{font-family:var(--mono);font-size:10.5px;color:var(--paperdim);margin-top:10px;text-transform:uppercase;letter-spacing:.1em}
#tdn .domainbar{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
#tdn .domainbar input{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:14px 16px;font-size:15px;font-family:var(--mono)}
#tdn .domainbar input::placeholder{color:var(--dim)}

/* ---- three leaks ---- */
#tdn .cards3{display:grid;gap:14px}
#tdn .tcard{background:var(--surface);border:1px solid var(--line);padding:24px;display:grid;grid-template-columns:56px 1fr;gap:18px}
#tdn .tcard .num{font-family:var(--serif);font-size:34px;color:var(--red)}
#tdn .tcard h3{font-size:17px;margin-bottom:6px}
#tdn .tcard p{font-size:14.5px;color:var(--dim);line-height:1.5}
#tdn .tcard .odds{font-family:var(--mono);font-size:12px;color:var(--paper);margin-top:8px}
#tdn .tcard.hot{border-color:var(--red)}
#tdn .tcard.hot .flag{font-family:var(--mono);font-size:10.5px;color:var(--red);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}

/* ---- phases ---- */
#tdn .phases{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:700px){#tdn .phases{grid-template-columns:1fr}}
#tdn .ph{background:var(--surface);border:1px solid var(--line);padding:20px}
#tdn .ph .pn{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
#tdn .ph h3{font-size:16px;margin-bottom:6px}
#tdn .ph p{font-size:13.5px;color:var(--dim);line-height:1.5}
#tdn .vowline{margin-top:20px;font-family:var(--serif);font-style:italic;font-size:22px;color:var(--paper);text-align:center}

/* ---- sample report ---- */
#tdn .repwrap{position:relative;max-width:620px;margin:0 auto}
#tdn .report{background:var(--paper);color:var(--paperink);padding:28px;box-shadow:0 12px 40px rgba(0,0,0,.5)}
#tdn .report .rh{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paperdim);
  display:flex;justify-content:space-between;border-bottom:2px solid var(--paperink);padding-bottom:8px;margin-bottom:14px}
#tdn .rline{display:flex;gap:10px;font-size:13.5px;padding:6px 0;border-bottom:1px dotted var(--paperdim)}
#tdn .rline .st{font-family:var(--mono);font-size:11px;flex-shrink:0;width:82px}
#tdn .st.bad{color:var(--redpaper);font-weight:700}
#tdn .st.okk{color:#4A6236}
/* the third state, and the most important one. a finding we cannot prove from a view only
   scan is marked, not guessed. muted on purpose: it is neither good news nor bad news. */
#tdn .st.unv{color:#8A7C63;font-weight:700}
#tdn .fade{position:absolute;left:0;right:0;bottom:0;height:150px;background:linear-gradient(transparent,var(--ink));pointer-events:none}
#tdn .repnote{text-align:center;color:var(--dim);font-size:13.5px;margin-top:14px}
#tdn .finalcta{text-align:center;padding:70px 0}
#tdn .finalcta h2{margin:0 auto 12px}

/* ============ journey + live scan panel (page /teardown) ============ */
#tdn .jshell{max-width:660px;margin:0 auto;padding:34px 20px 90px;display:none}
#tdn .jshell.on{display:block}
#tdn .leakstrip{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);
  padding:10px 16px;font-family:var(--mono);font-size:12.5px;color:var(--dim);margin-bottom:14px}
#tdn .leakstrip b{color:var(--red);font-size:15px;font-variant-numeric:tabular-nums}

#tdn .livepanel{background:var(--paper);color:var(--paperink);padding:22px 24px;margin-bottom:26px;
  box-shadow:0 12px 40px rgba(0,0,0,.5);font-family:var(--mono);font-size:13px;min-height:120px}
#tdn .lp-head{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--paperdim);border-bottom:2px solid var(--paperink);padding-bottom:8px;margin-bottom:12px}
#tdn .lp-line{padding:3px 0;line-height:1.6;white-space:pre-wrap;word-break:break-word}
#tdn .lp-line.meta{color:var(--paperdim)}
#tdn .lp-line.err{color:var(--redpaper);font-weight:700}
#tdn .lp-find{display:flex;gap:8px;padding:3.5px 0;font-variant-numeric:tabular-nums}
#tdn .lp-find > span:first-child{flex-shrink:0}
#tdn .lp-find .dots{flex:1;border-bottom:1px dotted var(--paperdim);transform:translateY(-4px);min-width:20px}
#tdn .lp-find .res{flex-shrink:0;text-align:right}
#tdn .lp-find .res.missing,#tdn .lp-find .res.partial{color:var(--redpaper);font-weight:700}
#tdn .lp-find .res.unverified{color:#9A6B12;font-weight:700}
#tdn .lp-find .res.ok{color:#4A6236}
#tdn .lp-block{padding:8px 0;border-bottom:1px dotted rgba(92,84,63,.4);animation:tdn-fadein .3s}
#tdn .lp-block.ok{padding:5px 0}
#tdn .lp-block.unverified{border-left:2px solid #C79A3A;padding-left:10px;margin-left:-12px}
#tdn .lp-should,#tdn .lp-now{font-family:var(--sans);font-size:12.5px;line-height:1.5;padding:3px 0 0 14px;color:var(--paperdim)}
#tdn .lp-should .tag,#tdn .lp-now .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  display:inline-block;min-width:74px;color:var(--paperdim)}
#tdn .lp-should{color:#4A6236}
#tdn .lp-should .tag{color:#4A6236}
#tdn .lp-now.missing,#tdn .lp-now.partial{color:var(--redpaper)}
#tdn .lp-now.missing .tag,#tdn .lp-now.partial .tag{color:var(--redpaper)}
#tdn .lp-now.unverified{color:#9A6B12}
#tdn .lp-now.unverified .tag{color:#9A6B12}
#tdn .caret{display:inline-block;width:7px;background:var(--paperink);animation:tdn-blink 1s steps(2) infinite}
@keyframes tdn-blink{0%,50%{opacity:1}51%,100%{opacity:0}}
#tdn .lp-note{margin-top:12px;padding-top:10px;border-top:1px dotted var(--paperdim);
  font-family:var(--sans);font-size:12.5px;color:var(--paperdim);font-style:italic}

/* running / done status in the panel header */
#tdn .lp-pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--redpaper);
  margin-right:7px;vertical-align:middle;animation:tdn-pulse 1.1s ease-in-out infinite}
#tdn .lp-check{color:#4A6236;margin-right:6px;font-weight:700}
@keyframes tdn-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}

/* the animated "still reading" runner, so the wait never looks frozen */
#tdn .lp-run{display:flex;align-items:center;gap:10px;padding:8px 0;color:var(--paperdim)}
#tdn .lp-dots{display:inline-flex;gap:5px}
#tdn .lp-dots i{width:6px;height:6px;border-radius:50%;background:var(--paperdim);display:inline-block;
  animation:tdn-bounce 1s ease-in-out infinite}
#tdn .lp-dots i:nth-child(2){animation-delay:.16s}
#tdn .lp-dots i:nth-child(3){animation-delay:.32s}
@keyframes tdn-bounce{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

/* grouped findings: facts first, then leaks */
#tdn .lp-group{margin:16px 0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paperdim);border-bottom:1px solid rgba(92,84,63,.35);padding-bottom:5px}
#tdn .lp-group.leak{color:var(--redpaper)}
#tdn .lp-fact{padding:5px 0;animation:tdn-fadein .3s}
#tdn .lp-fline{display:flex;gap:8px;font-variant-numeric:tabular-nums}
#tdn .lp-fact .k{flex-shrink:0}
#tdn .lp-fact .dots{flex:1;border-bottom:1px dotted var(--paperdim);transform:translateY(-4px);min-width:20px}
#tdn .lp-fact .v{flex-shrink:0;color:#4A6236;font-weight:700;text-align:right}
#tdn .lp-desc{font-family:var(--sans);font-size:12px;color:var(--paperdim);padding:2px 0 0;line-height:1.45}

/* identity card: the visitor's own store, at the top of the scan panel */
#tdn .lp-id{display:flex;align-items:center;gap:12px;padding:0 0 12px;margin-bottom:10px;border-bottom:1px solid rgba(92,84,63,.35)}
#tdn .lp-id-logo{width:42px;height:42px;border-radius:8px;object-fit:contain;background:#fff;padding:3px;flex-shrink:0;border:1px solid rgba(92,84,63,.2)}
#tdn .lp-id-name{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--paperink);line-height:1.2}
#tdn .lp-id-sub{font-family:var(--mono);font-size:11px;color:var(--paperdim);letter-spacing:.04em;margin-top:3px}

/* reach: latest YouTube thumbnail + social chips */
#tdn .lp-yt{display:flex;align-items:center;gap:12px;padding:6px 0 8px;text-decoration:none}
#tdn .lp-yt-thumb{position:relative;width:128px;flex-shrink:0;border-radius:6px;overflow:hidden;display:block;aspect-ratio:16/9;background:#000}
#tdn .lp-yt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#tdn .lp-yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;text-shadow:0 2px 10px rgba(0,0,0,.7)}
#tdn .lp-yt-cap{font-family:var(--sans);font-size:13px;color:var(--paperink);font-weight:600}
#tdn .lp-social{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 2px}
#tdn .lp-social a{font-family:var(--mono);font-size:11px;color:var(--paperink);border:1px solid var(--paperdim);
  padding:4px 11px;border-radius:999px;text-decoration:none;transition:background .15s,color .15s}
#tdn .lp-social a:hover{background:var(--paperink);color:var(--paper)}

/* the form value stack */
#tdn .unlockbox{border:1px solid var(--line);background:var(--surface);padding:16px 18px;margin:6px 0 18px}
#tdn .unlock-lead{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:11px}
#tdn .unlock-list{list-style:none;display:grid;gap:8px}
#tdn .unlock-list li{position:relative;padding-left:24px;font-size:14px;color:var(--text);line-height:1.4}
#tdn .unlock-list li::before{content:"✓";color:var(--ok);font-weight:700;position:absolute;left:0}
#tdn .unlock-leak{margin-top:12px;padding-top:11px;border-top:1px dotted var(--line);font-size:14px;color:var(--paper);line-height:1.45}
#tdn .unlock-leak b{color:var(--red)}

/* their live Meta ads */
#tdn .lp-adgrid{display:grid;gap:8px;padding:6px 0 2px}
#tdn .lp-ad{display:flex;gap:11px;padding:11px;border:1px solid rgba(92,84,63,.4);border-radius:6px;
  text-decoration:none;background:rgba(255,255,255,.28);transition:border-color .15s,background .15s}
#tdn .lp-ad:hover{border-color:var(--paperink);background:rgba(255,255,255,.5)}
#tdn .lp-ad-thumb{width:54px;height:54px;flex-shrink:0;border-radius:5px;overflow:hidden;background:#000}
#tdn .lp-ad-thumb img{width:100%;height:100%;object-fit:cover;display:block}
#tdn .lp-ad-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
#tdn .lp-ad-head{font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--paperink);line-height:1.3}
#tdn .lp-ad-body{font-family:var(--sans);font-size:12px;color:var(--paperdim);line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#tdn .lp-ad-meta{font-family:var(--mono);font-size:10px;color:var(--paperdim);letter-spacing:.02em;margin-top:2px}

/* Fluent Form (contact step), styled dark to match */
#tdn #tdn-ffhost{margin:6px 0 8px}
#tdn .fluentform .ff-el-group{margin:0 0 10px}
#tdn .fluentform .ff-el-input--label{display:none}
#tdn .fluentform input[type=text],
#tdn .fluentform input[type=email],
#tdn .fluentform input[type=tel],
#tdn .fluentform input:not([type=hidden]):not([type=submit]){
  width:100%!important;background:var(--surface)!important;border:1px solid var(--line)!important;
  color:var(--text)!important;padding:14px 16px!important;font-size:16px!important;
  font-family:var(--mono)!important;border-radius:0!important;box-shadow:none!important;height:auto!important}
#tdn .fluentform input::placeholder{color:var(--dim)!important}
#tdn .fluentform input:focus{outline:2px solid var(--note)!important;outline-offset:1px}
#tdn .fluentform .ff-btn-submit,#tdn .fluentform button[type=submit]{
  background:var(--red)!important;color:#fff!important;border:0!important;padding:14px 30px!important;
  font-size:16px!important;font-weight:700!important;font-family:var(--sans)!important;
  cursor:pointer;border-radius:999px!important;margin-top:4px}
#tdn .fluentform .ff-btn-submit:hover{filter:brightness(1.1)}
#tdn .fluentform .ff-el-is-error input{border-color:var(--red)!important}
#tdn .fluentform .error,#tdn .fluentform .text-danger,#tdn .fluentform .ff-el-form-check-label,
#tdn .fluentform .ff-el-is-error .text-danger{color:var(--red)!important;font-size:13px;font-family:var(--sans)}
#tdn .fluentform .ff-message-success,#tdn .fluentform .ff_submit_success{color:var(--ok)!important;font-family:var(--sans)}

#tdn .qcard{border-left:2px solid var(--line);padding-left:18px;margin-bottom:24px;animation:tdn-fadein .3s}
#tdn .qcard.answered{border-left-color:var(--red)}
#tdn .qnum{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
#tdn .qcard h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,3.5vw,30px);line-height:1.15;margin-bottom:8px;text-wrap:balance}
#tdn .qhint{color:var(--dim);font-size:14.5px;margin-bottom:20px;line-height:1.5}
#tdn .opts{display:grid;gap:10px}
#tdn .opt{text-align:left;background:var(--surface);border:1px solid var(--line);color:var(--text);
  padding:14px 18px;font-size:15px;cursor:pointer}
#tdn .opt:hover{border-color:var(--dim)}
#tdn .opt.sel{border-color:var(--red);background:var(--surface2)}
#tdn .opt:disabled{cursor:default}
#tdn .answerline{font-family:var(--mono);font-size:13px;color:var(--paper);margin-top:10px}
#tdn .answerline::before{content:"› ";color:var(--red)}
#tdn .feedback{border-left:3px solid var(--red);background:var(--surface);padding:14px 16px;margin-top:16px;font-size:14px;color:var(--text);line-height:1.5;animation:tdn-fadein .3s}
/* quiet, always available. an answer they cannot change is an answer they will not correct. */
#tdn .changeline{display:inline-block;margin-top:12px;background:none;border:0;padding:0;
  font-family:var(--sans);font-size:12px;color:var(--dim);cursor:pointer;
  border-bottom:1px dotted currentColor;transition:color .15s}
#tdn .changeline:hover{color:var(--text)}
#tdn .jfield{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);padding:14px 16px;font-size:16px;font-family:var(--mono);margin-bottom:10px}
#tdn .jfield::placeholder{color:var(--dim)}
#tdn .certainty{border:1px solid var(--line);background:var(--surface);padding:16px 18px;margin:8px 0 18px;font-size:13.5px;color:var(--dim);line-height:1.5}
#tdn .certainty b{color:var(--text)}
#tdn .ferr{color:var(--red);font-size:13px;margin-top:6px;min-height:16px}
@keyframes tdn-fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#tdn *{animation:none!important;transition:none!important}}