/* TechFix shared styles for the error pages (errors/*.html).
   The landing page (index.html) keeps its own inline styles so it loads in one request.
   Tokens match the landing page. */
:root{
  --bg:#0a0c10; --bg2:#0f1218; --panel:#12161e; --panel2:#171c26; --line:#232a36; --line2:#2e3746;
  --text:#e8ecf2; --muted:#a3adbb; --dim:#8590a0;
  --lime:#b4f461; --cyan:#5ee1ff; --violet:#a78bfa; --amber:#fbbf24; --red:#ff6b6b;
  --r:14px; --maxw:1160px; --readw:780px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:16.5px}
a{color:var(--cyan);text-underline-offset:3px}
a:hover{color:var(--text)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--lime);color:#0a0c10;padding:8px 12px;border-radius:8px;font-weight:700;z-index:100}
.skip:focus{left:12px}
code,.mono,pre{font-family:var(--mono);font-variant-ligatures:none;font-feature-settings:"liga" 0,"calt" 0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.read{max-width:var(--readw);margin:0 auto;padding:0 24px}
@media(max-width:640px){.wrap,.read{padding:0 16px}body{font-size:16px}}

.bg-grid{position:fixed;inset:0;z-index:-2;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;opacity:.18;mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 30%,transparent 75%)}

/* nav */
nav.top{position:sticky;top:0;z-index:50;backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);background:rgba(10,12,16,.82);border-bottom:1px solid rgba(35,42,54,.8)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:-.02em;font-size:18px;color:var(--text);text-decoration:none}
.logo-mark{width:28px;height:28px;border-radius:8px;background:var(--lime);display:grid;place-items:center;box-shadow:0 0 24px rgba(180,244,97,.35);flex:none}
.nav-links{display:flex;gap:24px;font-size:14px}
.nav-links a{color:var(--muted);text-decoration:none}
.nav-links a:hover{color:var(--text)}
@media(max-width:700px){.nav-links .hide-sm{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;border-radius:11px;padding:12px 18px;border:1px solid transparent;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s}
.btn-primary{background:var(--lime);color:#0a0c10;box-shadow:0 0 0 1px rgba(180,244,97,.4),0 8px 30px -8px rgba(180,244,97,.55)}
.btn-primary:hover{color:#0a0c10;transform:translateY(-1px)}
.btn-ghost{border-color:var(--line2);color:var(--text);background:rgba(23,28,38,.6)}
.btn-ghost:hover{border-color:#44506a;background:var(--panel2);color:var(--text)}

/* article */
.crumbs{padding:28px 0 0;font-size:13.5px;color:var(--dim);font-family:var(--mono)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs span{margin:0 6px}
article{padding:18px 0 40px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc,var(--lime));border:1px solid color-mix(in srgb,var(--acc,var(--lime)) 35%,transparent);background:color-mix(in srgb,var(--acc,var(--lime)) 8%,transparent);padding:5px 11px;border-radius:999px}
h1{font-size:clamp(30px,5vw,46px);line-height:1.08;letter-spacing:-.03em;font-weight:800;margin:18px 0 14px;overflow-wrap:anywhere}
.lede{font-size:18px;color:var(--muted)}
article h2{font-size:clamp(22px,3vw,27px);letter-spacing:-.02em;line-height:1.2;font-weight:800;margin:44px 0 14px}
article h3{font-size:18px;margin:24px 0 8px;letter-spacing:-.01em}
article p{margin:0 0 14px;color:#d4dae3}
article ul,article ol{margin:0 0 16px 22px;color:#d4dae3}
article li{margin:6px 0}
article p code,article li code,article td code{font-size:.88em;background:#0d1117;border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;color:var(--text)}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:26px 0 8px;display:block}
pre{background:#0a0d12;border:1px solid var(--line);border-radius:12px;padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.6;color:#dfe5ee;margin:0 0 16px;white-space:pre}
article pre code{background:none;border:0;border-radius:0;padding:0;font-size:inherit;color:inherit;overflow-wrap:normal}
pre.err{border-color:rgba(255,107,107,.45);border-left:4px solid var(--red);background:linear-gradient(90deg,rgba(255,107,107,.07),#0a0d12 40%);color:#ffd9d9;white-space:pre-wrap;overflow-wrap:anywhere}
.answer{border:1px solid rgba(180,244,97,.4);background:rgba(180,244,97,.06);border-radius:14px;padding:16px 18px;margin:22px 0 6px}
.answer b{color:var(--lime);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:4px}
.answer p{margin:0;color:var(--text)}
.note{border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.06);border-radius:12px;padding:12px 16px;margin:0 0 16px;color:#f3e2b5;font-size:15px}
.note strong{color:var(--amber)}

ol.steps{list-style:none;margin:0 0 16px;counter-reset:st;padding:0}
ol.steps>li{counter-increment:st;position:relative;padding:2px 0 6px 46px;margin:0 0 14px}
ol.steps>li::before{content:counter(st);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--lime);border:1px solid rgba(180,244,97,.4);background:rgba(180,244,97,.08)}
ol.steps>li>strong:first-child{color:var(--text)}
ol.steps pre{margin-top:10px}
ul.prevent{list-style:none;margin:0 0 16px;padding:0}
ul.prevent li{position:relative;padding-left:30px;margin:10px 0}
ul.prevent li::before{content:"";position:absolute;left:4px;top:.45em;width:12px;height:7px;border-left:2.5px solid var(--lime);border-bottom:2.5px solid var(--lime);transform:rotate(-45deg)}

/* closing box */
.fixbox{margin:48px 0 10px;border:1px solid var(--line2);border-radius:20px;padding:28px 26px;background:radial-gradient(ellipse 70% 90% at 0% 0%,rgba(180,244,97,.12),transparent 70%),radial-gradient(ellipse 60% 80% at 100% 100%,rgba(167,139,250,.14),transparent 70%),var(--panel)}
.fixbox .tag{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.fixbox h2{margin:8px 0 10px;font-size:clamp(22px,3vw,28px)}
.fixbox p{color:var(--muted)}
.fixbox ul{color:var(--muted)}
.fixbox .price{font-family:var(--mono);font-weight:700;color:var(--text);border:1px solid var(--line2);border-radius:8px;padding:2px 9px;font-size:14px;margin-left:6px;white-space:nowrap}
.fixbox .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;align-items:center}
.fixbox .small{font-size:14px;color:var(--dim);margin-top:14px}
.fixbox .small a{color:var(--muted)}

.sources{margin-top:40px;border-top:1px solid var(--line);padding-top:20px}
.sources h2{font-size:16px;margin:0 0 10px;font-family:var(--mono);letter-spacing:.04em;color:var(--muted);font-weight:600}
.sources ul{list-style:none;margin:0;padding:0;font-size:14px}
.sources li{margin:7px 0;overflow-wrap:anywhere}
.sources a{color:var(--muted)}
.sources a:hover{color:var(--text)}

.related{margin-top:34px}
.related h2{font-size:18px;margin:0 0 12px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.rel-grid{grid-template-columns:1fr}}
.rel-grid a{display:block;border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:14px 16px;color:var(--text);text-decoration:none;font-weight:600;font-size:15px;line-height:1.4}
.rel-grid a:hover{border-color:var(--line2);background:var(--panel2)}
.rel-grid a span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--dim);font-weight:500;margin-bottom:6px;letter-spacing:.06em;text-transform:uppercase}

/* errors index */
.idx-head{padding:56px 0 8px}
.idx-group{margin:40px 0 0}
.idx-group h2{font-size:22px;margin:0 0 6px;letter-spacing:-.02em}
.idx-group>p{color:var(--muted);margin:0 0 14px}
.idx-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0}
@media(max-width:760px){.idx-list{grid-template-columns:1fr}}
.idx-list a{display:block;height:100%;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:16px 18px;text-decoration:none;color:var(--text)}
.idx-list a:hover{border-color:var(--line2);background:var(--panel2)}
.idx-list b{display:block;font-size:16px;line-height:1.35}
.idx-list code{display:block;margin-top:8px;font-size:12.5px;color:#ffc9c9;overflow-wrap:anywhere}

footer{border-top:1px solid var(--line);padding:30px 0 44px;color:var(--dim);font-size:13.5px;margin-top:40px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--text)}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* launch offer banner */
.promo{background:linear-gradient(90deg,rgba(180,244,97,.16),rgba(94,225,255,.12));border-bottom:1px solid rgba(180,244,97,.35);color:var(--text);font-size:14px;text-align:center;padding:9px 16px;line-height:1.45}.promo b{color:var(--lime)}.promo a{color:var(--lime);font-weight:600;white-space:nowrap}s.was{opacity:.6;font-weight:500;margin-left:2px}

/* skill pages */
.sk-hero{padding:22px 0 8px}
.sk-hero .lede{margin:0 0 18px}
.sk-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:18px 0 8px}
.sk-cta .small{font-size:14px;color:var(--dim)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0 6px}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.facts div{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--muted)}
.facts b{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.toc a{font-family:var(--mono);font-size:12.5px;border:1px solid var(--line2);border-radius:999px;padding:5px 11px;color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text);border-color:#44506a}
.flow{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.flow li{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:14px 16px 14px 56px;position:relative;margin:0}
.flow li::before{content:attr(data-n);position:absolute;left:14px;top:13px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;font-weight:700;color:#0a0c10;background:var(--acc,var(--lime))}
.flow li b{color:var(--text)}
.example{border:1px solid var(--line2);border-radius:18px;padding:22px 22px 8px;margin:22px 0 26px;background:linear-gradient(180deg,rgba(23,28,38,.55),rgba(10,12,16,0))}
.example>h3{margin:0 0 6px;font-size:20px}
.example .ctx{color:var(--muted);margin:0 0 14px}
.ask{display:flex;gap:10px;align-items:flex-start;margin:6px 0 14px}
.ask .who{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);padding-top:9px;min-width:42px}
.ask .bubble{border:1px solid var(--line2);background:var(--panel2);border-radius:14px 14px 14px 4px;padding:10px 14px;color:var(--text);font-size:15.5px}
pre.out{border-color:rgba(94,225,255,.35);border-left:4px solid var(--cyan);white-space:pre-wrap;overflow-wrap:anywhere}
pre.diff .add{color:#b4f461}
pre.diff .del{color:#ff9b9b}
.next{border-left:3px solid var(--acc,var(--lime));padding:4px 0 4px 14px;margin:0 0 16px}
.next p:last-child{margin-bottom:0}
.cmp{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.cmp th,.cmp td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.cmp th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);font-weight:600}
.tablewrap{overflow-x:auto}
.inst{border:1px solid var(--line);border-radius:14px;margin:0 0 12px;background:var(--panel)}
.inst summary{cursor:pointer;padding:14px 16px;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.inst summary::-webkit-details-marker{display:none}
.inst summary::after{content:"+";font-family:var(--mono);color:var(--dim)}
.inst[open] summary::after{content:"\2212"}
.inst .body{padding:0 16px 8px}
.inst .body ol{margin-left:20px}
.skillnav{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0 0}
@media(max-width:860px){.skillnav{grid-template-columns:repeat(2,1fr)}}
.skillnav a{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--text);font-weight:700;font-size:14.5px}
.skillnav a span{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.skillnav a[aria-current]{border-color:var(--acc,var(--lime))}
.ask .who{min-width:92px}
@media(max-width:560px){.ask{flex-direction:column;gap:4px}.ask .who{padding-top:0;min-width:0}}