/* sabakarim.com resource pages (/clearpitch42, /startupstarterpack). Tokens mirror style.css. */
:root{--bg:#000;--ink:#fff;--ink2:#d6d6d6;--mute:#8c8c8c;--dim:#d6d6d6;--hair:#1e1e1e;--logo:#f2f2f2;--glow:0 0 10px rgba(255,255,255,.22);--card:rgba(0,0,0,.82);--cardh:rgba(10,10,10,.9);--edge:rgba(255,255,255,.35);--blank:#5a5a5a;
  --head:"JetBrains Mono",ui-monospace,Menlo,monospace;--brand:"Chakra Petch",ui-sans-serif,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace}
html.light{--bg:#f4f2ec;--ink:#111;--ink2:#2a2a2a;--mute:#6e6c66;--dim:#3a3a3a;--hair:#dad6cc;--logo:#151515;--glow:none;--card:rgba(255,255,255,.86);--cardh:rgba(255,255,255,.96);--edge:rgba(0,0,0,.35);--blank:#a3a098;color-scheme:light}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:300 16px/1.6 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:28px 24px 36px;min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{transform:translateY(8px)}to{transform:none}}
@keyframes breathe{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute)}
.ps{color:#5a5a5a}
html.light .ps{color:#a3a098}
.top{align-self:stretch;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.06em}
.top a{color:var(--mute);transition:color .3s}
.top a:hover,.top a:focus-visible{color:var(--ink)}
.theme{background:none;border:0;font:inherit;color:var(--mute);cursor:pointer;letter-spacing:inherit}
.theme:hover{color:var(--ink)}
.prompt{margin-top:7vh;font-size:11px;letter-spacing:.06em}
.mark{margin-top:22px;width:64px;height:64px;border-radius:6px;display:block;filter:grayscale(1) contrast(1.05);opacity:.92;transition:filter .6s,opacity .6s}
.mark:hover{filter:none;opacity:1}
h1{margin-top:18px;font:700 clamp(30px,7.4vw,58px)/1.05 var(--head);color:var(--ink);text-shadow:var(--glow);letter-spacing:-.01em}
.sub{margin-top:18px;font-size:13px;letter-spacing:.02em;color:var(--ink);text-shadow:var(--glow);max-width:44em}
.caret{display:inline-block;width:.55em;height:1.05em;margin-left:4px;vertical-align:-2px;background:var(--ink);animation:blink 1.1s steps(1) infinite}
.meta{margin-top:12px;font-size:10px}
.meta::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dim);margin-right:9px;vertical-align:1px;animation:breathe 4.5s ease-in-out infinite}
.sec{margin-top:64px;width:100%;border-top:1px solid var(--hair);padding-top:22px;display:flex;flex-direction:column;align-items:center}
.grep{font-size:10px;letter-spacing:.06em;margin-bottom:18px}
.grid{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;text-align:left}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:var(--card);border:1px solid var(--hair);border-radius:6px;padding:16px 16px 14px;transition:border-color .3s,background .3s}
.card:hover,.card:focus-within{border-color:var(--edge);background:var(--cardh)}
.card-h{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px dashed var(--hair)}
.ico{flex:none;width:15px;height:15px;background:var(--ink);-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat;opacity:.9}
.card-t{font:700 12px/1.2 var(--brand);letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.card-n{margin-left:auto;font-size:10px;color:var(--mute);letter-spacing:.06em}
.tools{list-style:none}
.tools li{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:12.5px;line-height:1.4}
.tools .r{color:var(--mute);font-size:11px;letter-spacing:.02em;white-space:nowrap}
.tools .dots{flex:1;min-width:12px;border-bottom:1px dotted var(--hair);transform:translateY(-3px)}
.tools .t{color:var(--ink2);white-space:nowrap;text-align:right}
.tools .t a{transition:color .25s,text-shadow .25s}
.tools .t a::after{content:"\2197";display:inline-block;margin-left:5px;font-size:10px;color:var(--mute);transition:transform .25s,color .25s}
.tools .t a:hover,.tools .t a:focus-visible{color:var(--ink);text-shadow:var(--glow)}
.tools .t a:hover::after,.tools .t a:focus-visible::after{color:var(--ink);transform:translate(2px,-2px)}
.tools .t .x{color:var(--mute);margin:0 4px}
.prose{width:min(600px,100%);text-align:left;font-size:13px;line-height:1.75;color:var(--ink2)}
.prose p+p{margin-top:14px}
.prose a,.inl{color:var(--ink);border-bottom:1px solid var(--edge);transition:border-color .3s,text-shadow .3s}
.prose a:hover,.inl:hover{border-color:var(--ink);text-shadow:var(--glow)}
.step{font:700 12px/1.2 var(--brand);letter-spacing:.2em;color:var(--ink)}
.step i{font-style:normal;color:var(--mute);margin-right:8px}
.lines{margin-top:14px;font-size:13px;line-height:1.7;color:var(--ink)}
.lines p+p{margin-top:12px}
.b{display:inline-block;min-width:5.5em;border-bottom:1px solid var(--blank);transform:translateY(-2px);height:1em}
.b.s{min-width:2.2em}
.hint{color:var(--mute)}
.aside{margin-top:16px;padding-top:12px;border-top:1px dashed var(--hair);font-size:11.5px;line-height:1.65;color:var(--ink2)}
.aside p+p{margin-top:8px}
.aside .k{display:block;font-size:10px;letter-spacing:.14em;color:var(--mute);margin-bottom:6px;text-transform:uppercase}
.ctas{margin-top:26px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:1px solid var(--edge);border-radius:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);background:var(--card);transition:background .3s,border-color .3s,text-shadow .3s}
.btn:hover,.btn:focus-visible{border-color:var(--ink);text-shadow:var(--glow)}
.btn.ghost{border-color:var(--hair);color:var(--mute)}
.btn.ghost:hover{color:var(--ink)}
.row{margin-top:22px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:11px;letter-spacing:.06em}
.row a{color:var(--mute);transition:color .3s}
.row a:hover,.row a:focus-visible{color:var(--ink)}
footer{margin-top:auto;padding-top:72px;font-size:10px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;row-gap:6px;letter-spacing:.06em}
footer .sep{color:#3a3a3a;margin:0 10px}
html.light footer .sep{color:#bdb9ae}
footer a:hover{color:var(--ink)}
.fg{white-space:nowrap}
.status{display:inline-flex;align-items:center;gap:7px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--ink);animation:breathe 2.4s ease-in-out infinite}
@media (max-width:720px){.grid.three{grid-template-columns:1fr}}
@media (max-width:620px){.grid{grid-template-columns:1fr}.prompt{margin-top:4vh}.sec{margin-top:40px}.tools .r{white-space:normal}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}