/* TJ site pages (blog, tools, guides, comparisons): the v30 neon look on top of each page's base styles.
   Loaded after the page's own <style>, so these rules win at the same specificity. */
:root{--bg:#030305;--tx:#ececf1;--mut:#8e8e98;--gl:rgba(255,255,255,.035);--ln:rgba(255,255,255,.08);--cy:#00e5ff;--vi:#8a5cff;--pk:#ff4fd8;--c:0,229,255;--pos:#30d158;--neg:#ff453a}
html{scroll-behavior:smooth}
body{background:var(--bg);position:relative;min-height:100vh}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(42rem 26rem at 12% -6rem,rgba(10,92,255,.22),transparent 70%),radial-gradient(38rem 24rem at 92% 4rem,rgba(138,92,255,.18),transparent 70%),radial-gradient(40rem 22rem at 50% 110%,rgba(0,229,255,.1),transparent 70%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%);mask:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 70%)}
::selection{background:rgba(0,229,255,.35);color:#fff}
a:focus-visible{outline-color:var(--cy)}
.w{max-width:1180px;padding:0 20px}
/* top bar */
.top{background:rgba(3,3,5,.72);border-bottom:1px solid rgba(255,255,255,.06)}
.top .w{min-height:66px}
.logo{font-size:22px;font-weight:900;letter-spacing:-.05em;gap:2px}
.logo::after{content:"";width:7px;height:7px;border-radius:9px;background:var(--cy);box-shadow:0 0 10px var(--cy);margin:0 4px 0 2px;order:1;animation:tjs-pulse 2s infinite}
.logo span{order:2}
@keyframes tjs-pulse{50%{opacity:.35}}
.top nav.tn{gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.top nav.tn a{min-height:36px;padding:0 14px;color:#aeaeb6}
.top nav.tn a:hover,.top nav.tn a[aria-current]{color:#fff;background:rgba(0,229,255,.1);box-shadow:inset 0 0 0 1px rgba(0,229,255,.3)}
.btn{font-weight:700;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .3s,background .2s}
.bp{background:#fff;color:#000;box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 26px rgba(0,229,255,.25)}
.bp:hover{background:#fff;transform:translateY(-1px);box-shadow:0 0 0 1px #fff,0 0 40px rgba(0,229,255,.5)}
.bg{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16)}
.bg:hover{border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.06)}
.prog{height:3px;background:linear-gradient(90deg,var(--cy),var(--vi),var(--pk));box-shadow:0 0 14px rgba(0,229,255,.7)}
/* surfaces */
.card{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.075);border-radius:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 30px 60px -40px rgba(0,0,0,.8)}
.hero{position:relative;overflow:hidden;background:radial-gradient(60rem 30rem at 100% 0%,rgba(var(--c),.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border-color:rgba(var(--c),.22)}
.hero>*{position:relative;z-index:1}
.pill{color:#a8fbff;background:rgba(0,229,255,.07);border-color:rgba(0,229,255,.35);font-weight:700}
h1{font-weight:900;letter-spacing:-.045em;line-height:1.02;font-size:clamp(34px,7.4vw,64px);background:linear-gradient(180deg,#fff 30%,#b7c6d6);-webkit-background-clip:text;background-clip:text;color:transparent}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--cy),#a8fbff,var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-weight:900;letter-spacing:-.035em}
.lede{color:#c9c9d2;max-width:720px}
.crumbs a:hover{color:var(--cy)}
.meta span{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12.5px;font-weight:600;color:#c4c4cc}
.meta span:first-child{color:rgb(var(--c));border-color:rgba(var(--c),.4);background:rgba(var(--c),.08)}
/* the hero cover art (added by tj-site.js) */
.tjs-cover{position:absolute;inset:0;z-index:0!important;pointer-events:none;opacity:.9;-webkit-mask:linear-gradient(90deg,transparent 25%,#000 75%);mask:linear-gradient(90deg,transparent 25%,#000 75%)}
.tjs-cover svg{position:absolute;right:0;top:0;height:100%;width:auto;min-width:60%}
@media (max-width:760px){.tjs-cover{opacity:.45;-webkit-mask:linear-gradient(180deg,#000,transparent 80%);mask:linear-gradient(180deg,#000,transparent 80%)}}
/* key takeaway */
.tldr{border:1px solid rgba(var(--c),.35);border-left:3px solid rgb(var(--c));border-radius:18px;padding:16px 18px;background:linear-gradient(90deg,rgba(var(--c),.1),rgba(var(--c),.02));color:#e4e4ea;box-shadow:0 0 40px -18px rgba(var(--c),.6)}
.tldr b{color:rgb(var(--c));letter-spacing:.16em}
/* topic chips */
.chips{gap:8px;margin:22px 0 10px;padding-bottom:8px}
.chips button{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);color:#bdbdc6;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.chips button::before{content:"";width:8px;height:8px;border-radius:9px;background:rgb(var(--cc,255,255,255));box-shadow:0 0 8px rgba(var(--cc,255,255,255),.8)}
.chips button[data-c=all]::before{display:none}
.chips button:hover{border-color:rgba(var(--cc,0,229,255),.5);color:#fff}
.chips button[aria-pressed="true"]{background:rgba(var(--cc,0,229,255),.14);color:#fff;border-color:rgba(var(--cc,0,229,255),.6);box-shadow:0 0 20px -6px rgba(var(--cc,0,229,255),.7)}
.chips button[data-c=all][aria-pressed="true"]{background:#fff;color:#000;border-color:#fff;box-shadow:0 0 24px rgba(0,229,255,.3)}
.chips .n{font-size:11px;font-weight:800;opacity:.6}
/* post cards */
.grid{gap:18px;margin:14px 0 8px}
.pc{padding:0;gap:0;border-radius:24px;background:#07080c;border-color:rgba(var(--c),.16)}
.pc::before{z-index:2;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(var(--c),.16),transparent 45%)}
.pc>:not(.tjs-th){padding:0 22px;position:relative;z-index:3}
.pc .k{padding-top:18px;color:rgb(var(--c));font-weight:800;letter-spacing:.14em}
.pc b{margin-top:8px;font-size:19px}
.pc span.d{margin-top:8px;color:#a9a9b3;font-size:14.5px;line-height:1.55}
.pc .rm{padding-bottom:20px;padding-top:14px;display:flex;align-items:center;gap:6px}
.pc .rm::after{content:"Read →";margin-left:auto;font-weight:700;color:#fff;opacity:0;transform:translateX(-6px);transition:all .25s}
@media (hover:hover) and (pointer:fine){.pc:hover{border-color:rgba(var(--c),.5);box-shadow:0 20px 50px -20px rgba(var(--c),.45)}.pc:hover .rm::after{opacity:1;transform:none}.pc:hover .tjs-th svg{transform:scale(1.05)}}
.tjs-th{position:relative;aspect-ratio:16/8;overflow:hidden;border-bottom:1px solid rgba(var(--c),.15);background:#05060a}
.tjs-th svg{display:block;width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.pc.feat{padding:0;display:grid;grid-template-columns:1fr}
.pc.feat .tjs-th{aspect-ratio:16/7}
.pc.feat .k{padding-top:24px}.pc.feat>:not(.tjs-th){padding-left:30px;padding-right:30px}
.pc.feat b{font-size:clamp(26px,3.4vw,40px);line-height:1.08}
.pc.feat span.d{font-size:16px;max-width:680px}
@media (min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}.pc.feat{grid-column:1/-1;grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto 1fr auto}.pc.feat .tjs-th{grid-column:1;grid-row:1/5;aspect-ratio:auto;min-height:340px;border-bottom:0;border-right:1px solid rgba(var(--c),.15)}.pc.feat>:not(.tjs-th){grid-column:2}.pc.feat .k{padding-top:34px}}
@media (min-width:640px) and (max-width:899px){.grid{grid-template-columns:1fr 1fr}}
.pc.feat::after{content:"Featured";position:absolute;top:16px;left:16px;z-index:4;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#00161b;background:linear-gradient(135deg,#7ff6ff,#00e5ff);box-shadow:0 0 20px rgba(0,229,255,.5)}
.rel{gap:16px}
/* blog index extras (added by tj-site.js) */
.tjs-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.tjs-stats span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:13.5px;color:#c9c9d2}
.tjs-stats b{color:#fff;font-size:16px}
.tjs-search{position:relative;margin-top:22px;max-width:520px}
.tjs-search input{width:100%;min-height:52px;padding:0 18px 0 46px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.4);color:#fff;font:500 16px Inter,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
.tjs-search input:focus{border-color:rgba(0,229,255,.6);box-shadow:0 0 0 4px rgba(0,229,255,.12)}
.tjs-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--mut)}
.tjs-empty{display:none;padding:30px;text-align:center;color:var(--mut)}
.tjs-empty.on{display:block}
.tjs-band{display:grid;gap:14px;margin:26px 0}
@media (min-width:760px){.tjs-band{grid-template-columns:repeat(3,1fr)}}
.tjs-tool{position:relative;display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:22px;background:#07080c;border:1px solid rgba(var(--c),.2);text-decoration:none;transition:transform .25s,border-color .25s,box-shadow .3s;overflow:hidden}
.tjs-tool:hover{transform:translateY(-3px);border-color:rgba(var(--c),.55);box-shadow:0 16px 40px -18px rgba(var(--c),.5)}
.tjs-tool i{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:rgb(var(--c));background:rgba(var(--c),.1);box-shadow:inset 0 0 0 1px rgba(var(--c),.4),0 0 20px rgba(var(--c),.25)}
.tjs-tool i svg{width:22px;height:22px}
.tjs-tool b{display:block;font-size:16px;color:#fff}
.tjs-tool small{display:block;color:var(--mut);font-size:13.5px;line-height:1.45;margin-top:3px}
/* article layout: body + sticky side (built by tj-site.js) */
.w:has(.post){max-width:1180px}
.tjs-art{display:grid;gap:24px;align-items:start}
@media (min-width:1040px){.tjs-art{grid-template-columns:minmax(0,1fr) 300px}}
.tjs-main{min-width:0}
.tjs-side{position:sticky;top:86px;display:none;flex-direction:column;gap:14px;max-height:calc(100vh - 100px);overflow:auto;scrollbar-width:none}
@media (min-width:1040px){.tjs-side{display:flex}.tjs-main>.toc{display:none}}
.tjs-side .box{padding:18px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
.tjs-side .k{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:10px}
.tjs-side ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;counter-reset:t}
.tjs-side ol a{display:flex;gap:10px;padding:7px 10px;border-radius:10px;font-size:13.5px;line-height:1.4;color:#a9a9b3;text-decoration:none;transition:all .2s;counter-increment:t}
.tjs-side ol a::before{content:counter(t,decimal-leading-zero);font-size:11px;font-weight:800;color:#55555e;padding-top:2px;font-variant-numeric:tabular-nums}
.tjs-side ol a:hover{color:#fff;background:rgba(255,255,255,.04)}
.tjs-side ol a.on{color:#fff;background:rgba(var(--c),.1);box-shadow:inset 2px 0 0 rgb(var(--c))}
.tjs-side ol a.on::before{color:rgb(var(--c))}
.tjs-side .cta-mini{background:radial-gradient(20rem 12rem at 100% 0%,rgba(0,229,255,.18),transparent 70%),rgba(255,255,255,.03);border-color:rgba(0,229,255,.3)}
.tjs-side .cta-mini b{display:block;font-size:16px;margin-bottom:4px}
.tjs-side .cta-mini p{font-size:13px;color:#b9b9c2;margin:0 0 12px;line-height:1.5}
.tjs-side .cta-mini .btn{width:100%;min-height:42px;font-size:14px}
.tjs-share{display:flex;flex-wrap:wrap;gap:8px}
.tjs-share a,.tjs-share button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:#cfcfd5;cursor:pointer;transition:all .2s;padding:0}
.tjs-share a:hover,.tjs-share button:hover{color:#fff;border-color:rgba(0,229,255,.5);background:rgba(0,229,255,.08)}
.tjs-share svg{width:17px;height:17px}
.tjs-sharebar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tjs-sharebar .k{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
/* article typography */
.post .card:not(.hero):not(.toc):not(.ctac){padding-top:30px}
.post h2{position:relative;padding-top:6px}
.post h2::before{content:"";display:block;width:34px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgb(var(--c)),transparent);margin-bottom:14px;box-shadow:0 0 12px rgba(var(--c),.7)}
.post p,.post li{color:#d6d6dd;font-size:17px;line-height:1.75}
.post a:not(.btn):not(.pc){color:#fff;text-decoration-color:rgba(var(--c),.6);text-decoration-thickness:1.5px}
.post a:not(.btn):not(.pc):hover{color:rgb(var(--c))}
.post ol>li::marker,.post ul>li::marker{color:rgb(var(--c));font-weight:800}
.post table{border-radius:16px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.07)}
.post th,.post td{padding:12px 14px}
.post thead th{background:rgba(var(--c),.07);color:rgb(var(--c));padding-top:12px}
.post tbody tr:hover{background:rgba(255,255,255,.025)}
.post blockquote{border-left:3px solid rgb(var(--c));background:rgba(var(--c),.05)}
.post code{background:rgba(var(--c),.1);color:#e9fdff}
.toc{border-color:rgba(255,255,255,.08)}
.toc a{display:block;padding:4px 0}
.faq details{transition:background .2s}
.faq summary:hover{color:rgb(var(--c))}
.faq details[open] summary{color:#fff}
.faq summary::after{color:rgb(var(--c))}
/* calls to action */
.ctac{background:radial-gradient(50rem 22rem at 50% -4rem,rgba(0,229,255,.2),transparent 65%),radial-gradient(30rem 18rem at 100% 100%,rgba(138,92,255,.16),transparent 70%),#06070b;border-color:rgba(0,229,255,.3);padding-top:44px!important;padding-bottom:40px!important}
.ctac::before{content:"";position:absolute;left:50%;top:0;width:60%;height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--cy),transparent);box-shadow:0 0 18px var(--cy)}
.ctac h2{font-size:clamp(26px,4.4vw,40px)}
/* link tiles (tools hub, guides) */
.links{gap:14px}
.links a{position:relative;min-height:96px;padding:20px 22px 20px 82px;border-radius:22px;background:#07080c;border-color:rgba(var(--c),.18);transition:transform .25s,border-color .25s,box-shadow .3s}
.links a:hover{transform:translateY(-3px);border-color:rgba(var(--c),.5);box-shadow:0 16px 40px -18px rgba(var(--c),.5)}
.links a::before{content:"";position:absolute;left:20px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:14px;background:rgba(var(--c),.1) var(--ico) center/22px no-repeat;box-shadow:inset 0 0 0 1px rgba(var(--c),.4),0 0 20px rgba(var(--c),.25)}
.links a::after{content:"→";position:absolute;right:20px;top:50%;transform:translateY(-50%);color:rgb(var(--c));font-weight:800;opacity:.5;transition:all .25s}
.links a:hover::after{opacity:1;right:16px}
.links b{font-size:16.5px;font-weight:800;color:#fff}
.links small{line-height:1.5;margin-top:3px}
/* calculators */
.calc{border-color:rgba(0,229,255,.22);background:radial-gradient(40rem 20rem at 100% 0%,rgba(0,229,255,.08),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015))}
.fl input,.fl select{background-color:rgba(0,0,0,.45);border-color:rgba(255,255,255,.12);transition:border-color .2s,box-shadow .2s}
.fl input:focus,.fl select:focus{outline:none;border-color:rgba(0,229,255,.7);box-shadow:0 0 0 4px rgba(0,229,255,.14)}
.seg2 button[aria-pressed="true"]{background:linear-gradient(180deg,#5ff3ff,#00c2e0);color:#00161b}
.kv{background:#07080c;border-color:rgba(255,255,255,.08)}
.kv.big{background:radial-gradient(30rem 14rem at 0% 0%,rgba(0,229,255,.16),transparent 70%),#07080c;border-color:rgba(0,229,255,.35);box-shadow:0 0 40px -16px rgba(0,229,255,.5)}
.kv.big b{background:linear-gradient(180deg,#fff,#7ff6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* comparison and guide tables */
.cmp td:nth-child(2){color:#fff}
.cmp thead th:nth-child(2){color:var(--cy)}
/* footer */
footer{border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,transparent,rgba(0,229,255,.03))}
footer nav a:hover{color:var(--cy);text-decoration:none}
@media (prefers-reduced-motion:reduce){.logo::after{animation:none}.pc,.tjs-tool,.links a,.btn{transition:none}}
@media (min-width:760px){.post table{display:table}}