/* Interactive pieces inside blog posts (2026-09-30). Every step they reveal is also written
   in the article itself, so readers without scripts and search engines get the same content. */
.tni{--tni-paper:var(--cream,#F2EDE6);--tni-paper2:var(--cream-dark,#E8E1D8);--tni-card:var(--white,#FDFAF7);
  --tni-ink:var(--ink,#1A1714);--tni-muted:#6E675E;--tni-orange:var(--orange,#E8622A);--tni-soft:#FBE3D6;
  --tni-line:#DCD3C7;--tni-sticky:#FFE27A;--tni-sticky-ink:#3A2F12;--tni-ok:#2F7D4F;
  background:var(--tni-card);border:1px solid var(--tni-line);border-radius:16px;padding:20px;margin:22px 0 28px;
  box-shadow:0 14px 40px -24px rgba(26,23,20,.35);color:var(--tni-ink);font-size:16px;line-height:1.55}
.tni *{box-sizing:border-box}
.tni-head{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.tni-pin{width:14px;height:14px;border-radius:50%;background:var(--tni-orange);box-shadow:inset -2px -2px 0 rgba(0,0,0,.18);flex:none}
.tni-head b{font-size:15px}
.tni-head span{font-size:13px;color:var(--tni-muted)}
.tni-head span[data-c],.tni-head span[data-prog]{margin-left:auto}
.tni-q{font-family:"Instrument Serif",Georgia,serif;font-size:23px;line-height:1.2;margin:0 0 12px}
.tni-opts{display:flex;flex-direction:column;gap:8px}
.tni-opt{font:inherit;font-size:16px;text-align:left;background:var(--tni-paper);color:var(--tni-ink);border:1px solid var(--tni-line);border-radius:10px;padding:12px 14px;cursor:pointer}
.tni-opt:hover{border-color:var(--tni-orange);background:var(--tni-soft)}
.tni-steps{display:flex;gap:6px;margin-top:14px}
.tni-steps i{height:4px;flex:1;border-radius:2px;background:var(--tni-line)}
.tni-steps i.on{background:var(--tni-orange)}
.tni-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tni-ok);margin-bottom:4px}
.tni ol{margin:6px 0 14px;padding-left:22px}
.tni-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tni-btn{font:inherit;font-size:15px;font-weight:500;border-radius:999px;padding:9px 16px;cursor:pointer;border:1px solid var(--tni-line);background:var(--tni-paper);color:var(--tni-ink);text-decoration:none}
.tni-btn.primary{background:var(--tni-orange);border-color:var(--tni-orange);color:#fff}
.tni-sub{font-size:14px;color:var(--tni-muted)}
.tni button:focus-visible,.tni a:focus-visible,.tni input:focus-visible{outline:2px solid var(--tni-orange);outline-offset:2px}
.tni-hl{animation:tnihl 1.8s ease;border-radius:8px}
@keyframes tnihl{0%{background:#FBE3D6}100%{background:transparent}}
[data-tni-anchor]{scroll-margin-top:90px}
/* Spaces */
.tni-desks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tni-desk{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:8px;border:2px solid var(--tni-line);cursor:pointer;overflow:hidden;background:linear-gradient(135deg,var(--tni-paper2),var(--tni-paper));padding:0;font:inherit;color:var(--tni-muted)}
.tni-desk.here{border-color:var(--tni-orange)}
.tni-desk .dn{position:absolute;left:6px;bottom:4px;font-size:11px}
.tni-desk .note{position:absolute;right:10%;top:14%;width:34%;aspect-ratio:1;background:var(--tni-sticky);border-radius:3px;box-shadow:0 3px 6px rgba(0,0,0,.18);transform:rotate(-3deg);opacity:0;transition:opacity .25s}
.tni-desk.found .note{opacity:1}
/* Tab demo */
.tni.tni-demo{padding:0;overflow:hidden}
.tni-chrome{display:flex;gap:6px;align-items:flex-end;background:var(--tni-paper2);padding:10px 10px 0}
.tni-tab{font:inherit;font-size:13px;border:0;border-radius:8px 8px 0 0;padding:8px 12px;background:transparent;color:var(--tni-muted);cursor:pointer;max-width:48%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tni-tab.on{background:var(--tni-card);color:var(--tni-ink)}
.tni-page{position:relative;min-height:190px;padding:18px}
.tni-page .lines i{display:block;height:9px;border-radius:5px;background:var(--tni-paper2);margin-bottom:10px}
.tni-tn{position:absolute;right:16px;top:16px;width:min(46%,210px);background:var(--tni-sticky);color:var(--tni-sticky-ink);border-radius:6px;padding:10px 12px;font-size:14px;line-height:1.4;box-shadow:0 8px 20px -8px rgba(0,0,0,.35);transition:opacity .2s,transform .2s}
.tni-tn b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.tni-tn.gone{opacity:0;transform:translateY(-6px)}
.tni-cap{font-size:14px;color:var(--tni-muted);padding:10px 16px;border-top:1px solid var(--tni-line)}
/* Checklist */
.tni-check{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.tni-check li{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--tni-paper)}
.tni-check li.done{opacity:.55}
.tni-check li.done .lbl{text-decoration:line-through}
.tni-check input{width:20px;height:20px;margin-top:3px;accent-color:var(--tni-orange);flex:none}
.tni-check .lbl{font-weight:500}
.tni-meter{height:6px;border-radius:3px;background:var(--tni-line);overflow:hidden;margin-top:14px}
.tni-meter i{display:block;height:100%;width:0;background:var(--tni-ok);transition:width .3s}
.tni-copy{font:inherit;font-size:12px;margin-left:8px;padding:2px 10px;border-radius:999px;border:1px solid var(--tni-line,#DCD3C7);background:var(--white,#FDFAF7);color:var(--ink,#1A1714);cursor:pointer;vertical-align:middle}
/* Crash demo */
.tni-crash{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:4px 0 14px}
@media (max-width:520px){.tni-crash{grid-template-columns:1fr}}
.tni-pad{border-radius:8px;padding:12px;min-height:150px;display:flex;flex-direction:column;gap:6px;box-shadow:0 8px 20px -10px rgba(0,0,0,.35)}
.tni-pad.st{background:var(--tni-sticky);color:var(--tni-sticky-ink)}
.tni-pad.tk{background:var(--tni-card);border:1px solid var(--tni-line)}
.tni-pad h4{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.tni-pad textarea{flex:1;min-height:80px;font:inherit;font-size:15px;border:0;background:transparent;color:inherit;resize:none}
.tni-pad textarea:focus{outline:none}
.tni-pad .saved{font-size:12px;opacity:.8}
.tni-flash{animation:tnifl .6s ease}
@keyframes tnifl{0%{filter:brightness(.4)}100%{filter:none}}
/* Comparison picker */
.tni-chips{display:flex;flex-wrap:wrap;gap:8px}
.tni-chip{font:inherit;font-size:15px;border:1px solid var(--tni-line);background:var(--tni-paper);color:var(--tni-ink);border-radius:999px;padding:8px 14px;cursor:pointer}
.tni-chip[aria-pressed="true"]{background:var(--tni-orange);border-color:var(--tni-orange);color:#fff}
.tni-verdict{margin-top:16px;padding:14px;border-radius:12px;background:var(--tni-paper)}
.tni-verdict p{margin:4px 0 0}
table.cmp tr.tni-match{background:#FBE3D6}
table.cmp td.tni-best{font-weight:700}
table.cmp td.tni-best::before{content:"\2713  ";color:#2F7D4F}
@media (prefers-reduced-motion: reduce){.tni *,.tni-hl{transition:none!important;animation:none!important}}

.tni:empty{display:none}
/* The article's own list and heading rules reach in here; keep these pieces as designed. */
.tni{text-align:left}
.tni-head{justify-content:flex-start}
.article-body .tni ol.tni-check,.tni ol.tni-check{counter-reset:none;padding-left:0;margin:12px 0 0}
.article-body .tni ol.tni-check li,.tni ol.tni-check li{padding-left:12px;margin-bottom:0}
.tni ol.tni-check li::before{content:none!important;display:none!important}
.article-body .tni a.tni-btn{border:1px solid #DCD3C7;color:var(--ink,#1A1714)}
/* ---- Screen demos (fullscreen, stay-on-screen, DaVinci) ---- */
.tni-screen{position:relative;aspect-ratio:16/9.5;max-width:100%;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#C9B79C,#A88F6E);border:1px solid var(--tni-line)}
.tni-win{position:absolute;border-radius:8px;background:#FDFAF7;box-shadow:0 10px 24px -10px rgba(0,0,0,.45);overflow:hidden;transition:left .45s ease,top .45s ease,width .45s ease,height .45s ease,border-radius .45s ease}
.tni-win .bar{height:18px;background:#ECE5DB;display:flex;gap:5px;align-items:center;padding:0 8px;font-size:10px;color:#6E675E}
.tni-win .bar i{width:8px;height:8px;border-radius:50%;background:#E0D6C8;display:inline-block}
.tni-win .bar i.g{background:#4CB25C}
.tni-win .body{padding:10px}
.tni-win .body u{display:block;height:7px;border-radius:4px;background:#EFE8DE;margin-bottom:8px;text-decoration:none}
.tni-win.full{left:0!important;top:0!important;width:100%!important;height:100%!important;border-radius:0}
.tni-sn{position:absolute;width:24%;min-width:96px;background:var(--tni-sticky);color:var(--tni-sticky-ink);border-radius:4px;padding:7px 9px;font-size:12px;line-height:1.35;box-shadow:0 6px 14px -6px rgba(0,0,0,.4);transition:opacity .3s,transform .3s;z-index:3}
.tni-sn.hide{opacity:0;transform:scale(.92)}
.tni-sn.under{z-index:1}
.tni-modes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.tni-cap2{font-size:14px;color:var(--tni-muted);margin-top:10px;min-height:2.6em}
.tni-pages{display:flex;flex-wrap:wrap;gap:4px;background:#1F1D1B;padding:6px;border-radius:0 0 10px 10px}
.tni-page-btn{font:inherit;font-size:12px;color:#BDB5AA;background:transparent;border:0;border-radius:6px;padding:6px 9px;cursor:pointer}
.tni-page-btn.on{background:#3A3633;color:#fff}
.tni-resolve{position:relative;aspect-ratio:16/8;max-width:100%;background:#2A2826;border-radius:10px 10px 0 0;overflow:hidden}
.tni-resolve .view{position:absolute;inset:8% 30% 24% 8%;border-radius:4px;background:linear-gradient(135deg,#55606a,#2d3238)}
.tni-resolve .tl{position:absolute;left:8%;right:8%;bottom:7%;height:10%;border-radius:3px;background:repeating-linear-gradient(90deg,#4a6b8a 0 18%,#2A2826 18% 19%,#7a5a9a 19% 31%,#2A2826 31% 32%)}
.tni-resolve .pname{position:absolute;left:8%;top:2%;font-size:11px;color:#9a9288}
/* Clickable windows (stay-on-screen demo) */
button.tni-win.tni-click{padding:0;border:0;font:inherit;text-align:left;cursor:pointer;color:inherit;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}
button.tni-win.tni-click .body{flex:1}
button.tni-win.tni-click:hover{box-shadow:0 0 0 2px var(--tni-orange),0 10px 24px -10px rgba(0,0,0,.45)}
.tni-win.front .bar{background:#E4DACC;color:#1A1714}
.tni-win:not(.front){filter:saturate(.85) brightness(.97)}
.tni-wtag{margin-left:auto;background:var(--tni-sticky);color:var(--tni-sticky-ink);border-radius:999px;padding:0 7px;font-size:10px;font-weight:700}

/* Under a finder answer: the next step once the reader has found their fix (2026-10-05). */
.tni-cta { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--tni-line); }
.tni-cta a { font-weight: 600; color: #B8460F; }

/* Try-it browser (sticky-notes-on-a-web-page-chrome, 2026-10-05) */
.tni-url{font-size:12px;color:var(--tni-muted);background:var(--tni-card);margin:0 10px;padding:5px 10px;border-radius:999px;border:1px solid var(--tni-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tni-ctl{padding:10px 16px 0}
.tni-ctl [hidden]{display:none}