/* bidarisagar.com — shared design system */
/* HackTheBox green / Omarchy brutalist / pixel scatter */

:root{
  --bg:#0a0d0a;
  --bg1:#0f1410;
  --bg2:#151c14;
  --card:rgba(15,20,16,1);
  --border:rgba(159,239,0,0.15);
  --b1:rgba(159,239,0,0.25);
  --b2:rgba(159,239,0,0.45);
  --accent:#9FEF00;
  --accent-dim:rgba(159,239,0,0.65);
  --glow:#9FEF00;
  --cyan:#9FEF00;
  --text:#e2e8d0;
  --dim:#6b7862;
  --muted:#3a4030;
  --mono:'Roboto Mono',ui-monospace,monospace;
  --sans:'Roboto Mono',ui-monospace,monospace;
  --radius:0px;
  --t:.25s ease;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--mono);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  font-size:.96rem;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;color:var(--accent)}
code,pre,kbd{font-family:var(--mono)}
img{max-width:100%;display:block}

/* ── CANVAS PIXEL BG ── */
canvas#cvs{position:fixed;inset:0;z-index:0;pointer-events:none}

/* ── NAV ── */
.site-nav{
  position:sticky;top:0;z-index:200;
  background:rgba(10,13,10,.97);
  border-bottom:1px solid var(--border);
  padding:.75rem 0;
}
.site-nav-inner{
  max-width:960px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;gap:1.2rem;
}
.nav-logo{
  font-family:var(--mono);font-size:.82rem;font-weight:600;
  color:var(--accent);letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;
}
.nav-logo:hover{text-decoration:none;color:var(--accent)}
.nav-back{
  display:flex;align-items:center;gap:.4rem;
  color:var(--dim);font-family:var(--mono);
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;transition:color var(--t)
}
.nav-back:hover{color:var(--accent);text-decoration:none}
.nav-back svg{width:13px;height:13px}
.nav-right{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.nav-right a{color:var(--accent)}

/* ── PAGE LAYOUT ── */
.page-wrap{
  position:relative;z-index:1;
  max-width:960px;margin:0 auto;padding:0 1.5rem 6rem;
}

/* ── HERO ── */
.cs-hero{
  padding:4rem 0 3rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34z' fill='none' stroke='%239FEF00' stroke-width='0.5'/%3E%3Cpath d='M28 100L0 84V50l28-16 28 16v34z' fill='none' stroke='%239FEF00' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size:56px 100px;
  background-repeat:repeat;
  background-position:top left;
}
.cs-badge{
  display:inline-block;padding:.2rem .6rem;
  background:rgba(159,239,0,.08);border:1px solid rgba(159,239,0,.25);
  color:var(--accent);font-family:var(--mono);font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;
}
.cs-hero h1{
  font-family:var(--mono);font-size:clamp(1.8rem,4vw,3rem);
  font-weight:700;line-height:1.15;letter-spacing:-.01em;
  margin-bottom:.5rem;color:var(--text);
}
.cs-hero h1 em{
  color:var(--accent);font-style:normal;
}
.cs-sub{
  font-family:var(--mono);font-size:.8rem;color:var(--dim);
  margin-bottom:.8rem;letter-spacing:.04em;
}
.cs-meta{
  display:flex;flex-wrap:wrap;gap:.8rem;
  font-family:var(--mono);font-size:.7rem;color:var(--dim);
  letter-spacing:.04em;margin-bottom:1.8rem;
}
.cs-meta span::before{content:'// ';color:var(--muted)}
.cs-lead{
  font-size:.97rem;color:var(--text);max-width:680px;
  line-height:1.85;margin-bottom:2rem;
}
.cs-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:2rem}
.cs-tag{
  padding:.18rem .55rem;
  background:rgba(159,239,0,.06);border:1px solid rgba(159,239,0,.15);
  color:var(--dim);font-family:var(--mono);font-size:.65rem;letter-spacing:.04em;
}
.cs-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1rem}

/* ── TLDR BOX ── */
.tldr{
  background:rgba(159,239,0,.04);
  border:1px solid rgba(159,239,0,.15);
  border-left:3px solid var(--accent);
  padding:1.2rem 1.4rem;margin-bottom:2.5rem;
}
.tldr table{width:100%;border-collapse:collapse;font-size:.85rem}
.tldr td{padding:.3rem .5rem;color:var(--text);vertical-align:top}
.tldr td:first-child{
  font-family:var(--mono);font-size:.72rem;color:var(--dim);
  white-space:nowrap;padding-right:1.2rem;width:130px;
}
.tldr td strong{color:var(--accent)}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem 1.1rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid;transition:all var(--t);text-decoration:none;
}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#0a0d0a;font-weight:700}
.btn-primary:hover{background:#b8ff1a;border-color:#b8ff1a;text-decoration:none;color:#0a0d0a}
.btn-outline{background:transparent;border-color:var(--border);color:var(--dim)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.btn svg{width:13px;height:13px;flex-shrink:0}

/* ── SECTIONS ── */
.section{margin-bottom:3.5rem;position:relative;z-index:1}
.section-label{
  font-family:var(--mono);font-size:.66rem;color:var(--accent);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:.5rem;
}
.section h2{
  font-family:var(--mono);font-size:clamp(1.3rem,2.5vw,1.9rem);
  font-weight:700;letter-spacing:-.01em;margin-bottom:1.1rem;color:var(--text);
}
.section p{color:var(--text);margin-bottom:1rem;font-size:.94rem;line-height:1.8}

/* ── CODE BLOCKS ── */
.cb{
  background:var(--bg1);border:1px solid var(--border);
  border-left:3px solid var(--accent);
  padding:1rem 1.2rem;margin:1rem 0;overflow-x:auto;
}
.cb pre{font-size:.76rem;line-height:1.85;color:var(--text);white-space:pre}
.cb .c-comment{color:var(--muted)}
.cb .c-key{color:var(--accent)}
.cb .c-val{color:#e2e8d0}
.cb .c-str{color:#9FEF00}
.cb .c-spl{color:var(--accent)}
.cb .c-field{color:#a0c4a0}
.cb-label{
  font-family:var(--mono);font-size:.62rem;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.3rem;
}

/* ── TABLES ── */
.data-table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.83rem}
.data-table th{
  font-family:var(--mono);font-size:.67rem;text-align:left;color:var(--dim);
  padding:.5rem .8rem;border-bottom:1px solid var(--border);
  letter-spacing:.06em;text-transform:uppercase;
}
.data-table td{
  padding:.5rem .8rem;border-bottom:1px solid rgba(159,239,0,.05);
  color:var(--text);vertical-align:top;font-size:.84rem;
}
.data-table td:first-child{
  font-family:var(--mono);font-size:.73rem;color:var(--accent);white-space:nowrap;
}
.data-table tr:hover td{background:rgba(159,239,0,.03)}

/* ── CARDS (2-col grid) ── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:1.2rem 0}
.info-card{
  background:var(--bg1);border:1px solid var(--border);padding:1.2rem;
}
.info-card h4{
  font-family:var(--mono);font-size:.68rem;color:var(--dim);
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:.6rem;
}
.info-card ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.info-card ul li{font-size:.86rem;color:var(--text);padding-left:1rem;position:relative}
.info-card ul li::before{content:'>';position:absolute;left:0;color:var(--accent)}

/* ── PIPELINE ── */
.pipeline{display:flex;align-items:stretch;gap:0;margin:1.5rem 0;overflow-x:auto}
.pipe-stage{
  flex:1;min-width:130px;background:var(--bg1);border:1px solid var(--border);
  padding:1rem .9rem;display:flex;flex-direction:column;gap:.4rem;position:relative;
}
.pipe-stage:not(:last-child)::after{
  content:'→';position:absolute;right:-.8rem;top:50%;transform:translateY(-50%);
  color:var(--accent);font-size:1.1rem;z-index:2;background:var(--bg);padding:0 .15rem;
}
.pipe-stage-n{
  font-family:var(--mono);font-size:.6rem;color:var(--accent);
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:.15rem;
}
.pipe-stage-t{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:.2rem}
.pipe-stage-d{font-size:.76rem;color:var(--dim);line-height:1.5}

/* ── NOTE / ALERT ── */
.note{
  background:rgba(159,239,0,.04);border:1px solid rgba(159,239,0,.15);
  border-left:3px solid var(--accent);
  padding:1rem 1.2rem;margin:1rem 0;font-size:.9rem;color:var(--text);line-height:1.7;
}
.note strong{color:var(--accent)}
.note-warn{
  background:rgba(255,159,0,.04);border:1px solid rgba(255,159,0,.2);
  border-left:3px solid #ff9f0a;
  padding:1rem 1.2rem;margin:1rem 0;font-size:.9rem;color:var(--text);line-height:1.7;
}
.note-warn strong{color:#ff9f0a}

/* ── DECISION LIST ── */
.decision-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin:1rem 0}
.decision-list li{
  color:var(--text);font-size:.93rem;padding-left:1.4rem;
  position:relative;line-height:1.65;
}
.decision-list li::before{content:'>';position:absolute;left:0;color:var(--accent);font-weight:700}

/* ── STAT ROW ── */
.stat-row{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0}
.stat-box{
  flex:1;min-width:120px;background:var(--bg1);border:1px solid var(--border);
  padding:1rem;text-align:center;
}
.stat-box .sn{
  display:block;font-size:2rem;font-weight:700;color:var(--accent);
  font-family:var(--mono);letter-spacing:.02em;
}
.stat-box .sl{font-size:.7rem;color:var(--dim);letter-spacing:.06em;text-transform:uppercase;margin-top:.2rem}

/* ── BLOG SPECIFIC ── */
.post-cat{
  display:inline-block;padding:.2rem .6rem;
  background:rgba(159,239,0,.08);border:1px solid rgba(159,239,0,.2);
  color:var(--accent);font-family:var(--mono);font-size:.65rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:1rem;
}
.post-hero{
  padding:4rem 0 2.5rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34z' fill='none' stroke='%239FEF00' stroke-width='0.5'/%3E%3Cpath d='M28 100L0 84V50l28-16 28 16v34z' fill='none' stroke='%239FEF00' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size:56px 100px;background-repeat:repeat;
}
.post-hero h1{
  font-family:var(--mono);font-size:clamp(1.6rem,3.5vw,2.6rem);
  font-weight:700;line-height:1.25;margin-bottom:1rem;
}
.post-meta{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.7rem;color:var(--muted);
  padding-bottom:1.5rem;border-bottom:1px solid var(--border);
  margin-bottom:2rem;
}
.post-body h2{
  font-family:var(--mono);font-size:1.25rem;font-weight:700;
  color:var(--text);margin:2.5rem 0 .9rem;
  border-left:3px solid var(--accent);padding-left:.8rem;
}
.post-body h3{
  font-family:var(--mono);font-size:1.05rem;font-weight:600;
  color:var(--accent);margin:2rem 0 .7rem;
}
.post-body p{color:var(--text);line-height:1.85;margin-bottom:1rem;font-size:.95rem}
.post-body ul,.post-body ol{
  padding-left:1.5rem;margin-bottom:1rem;
}
.post-body li{color:var(--text);line-height:1.75;margin-bottom:.3rem;font-size:.95rem}
.post-body pre,.post-body code{
  background:var(--bg1);padding:.15rem .4rem;font-family:var(--mono);
  font-size:.82rem;border:1px solid var(--border);
}
.post-body pre{display:block;padding:.9rem 1rem;overflow-x:auto;line-height:1.7;margin:1rem 0}
.post-body pre code{background:transparent;border:none;padding:0}
.post-body blockquote{
  border-left:3px solid var(--accent);padding:.8rem 1.2rem;
  margin:1.5rem 0;background:rgba(159,239,0,.04);
  font-style:italic;color:var(--dim);
}
.post-body strong{color:var(--accent);font-weight:600}
.post-body a{color:var(--accent)}

/* ── FOOTER ── */
.site-footer{
  border-top:1px solid var(--border);padding:2rem 0;margin-top:4rem;
  position:relative;z-index:1;
}
.site-footer-inner{
  max-width:960px;margin:0 auto;padding:0 1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:1rem;
}
.site-footer p{font-family:var(--mono);font-size:.72rem;color:var(--dim)}
.site-footer a{color:var(--accent)}

/* ── RESPONSIVE ── */
@media(max-width:640px){
  .two-col{grid-template-columns:1fr}
  .pipeline{flex-direction:column}
  .pipe-stage:not(:last-child)::after{
    content:'↓';right:auto;left:50%;top:auto;
    bottom:-.8rem;transform:translateX(-50%)
  }
  .cs-hero,.post-hero{padding:2.5rem 0 2rem}
  .page-wrap{padding:0 1rem 4rem}
}