/* ==========================================================================
   avnlk shared theme
   Source of truth: reverse-engineering-an-ASIC.html (values extracted 1:1).
   Pages link this file; page-specific layout/widgets stay in the page.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

/* ---- 1. Tokens --------------------------------------------------------- */
:root{
  /* surfaces */
  --bg:#080808;
  --surface:#0d0d0d;       /* cards, callouts, code blocks */
  --surface-2:#111;        /* inline code, hatch stripes */

  /* text ramp */
  --text:#e8e8e8;          /* headings, emphasis */
  --text-2:#9a9a9a;        /* body prose */
  --muted:#7a7a7a;         /* nav links, notes */
  --dim:#626262;           /* labels, captions, footer (was #3a3a3a: too low contrast) */

  /* lines */
  --border:#1d1d1d;
  --border-hover:#353535;

  /* semantic accents (see "Color meaning" below) */
  --signal:#5eff8f;        /* verified / result / primary accent */
  --warn:#ff6b4a;          /* unconfirmed / guess / caution / placeholder */
  --blue:#5e9eff;          /* reference / info / data series A */
  --purple:#b58cff;        /* derived / data series B */

  /* type */
  --sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;

  --page:1120px;
}

/* Color meaning (keep consistent on every page; add new colors only with a
   new meaning):
     signal  = confirmed, verified, a result you can rely on
     warn    = still a guess, unconfirmed, caution
     blue    = reference / informational / first data series
     purple  = derived or second data series
   Helpers: .c-signal .c-warn .c-blue .c-purple, and the inline tags
   .tag-verified / .tag-guess below. */

/* ---- 2. Base ----------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.7}
::selection{background:var(--text);color:var(--bg)}
a{color:inherit}
.shell{width:min(var(--page),calc(100% - 48px));margin:0 auto}
.accent,.c-signal{color:var(--signal)}
.c-warn{color:var(--warn)}
.c-blue{color:var(--blue)}
.c-purple{color:var(--purple)}

/* mono micro-labels */
.kicker,.section-index,.meta,.eyebrow,.notice{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em;font-size:10px}
.kicker{color:var(--muted);margin-bottom:28px}
.notice{color:var(--dim);line-height:1.7;display:block;margin-bottom:16px}

/* ---- 3. Nav ------------------------------------------------------------ */
.nav{position:sticky;top:0;z-index:20;background:rgba(8,8,8,.88);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.nav.scrolled{border-bottom-color:var(--border)}
.nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em;text-decoration:none}
.brand i{color:var(--signal);font-style:normal}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--muted);text-decoration:none;font-family:var(--mono);font-size:11px}
.nav-links a:hover{color:var(--text)}

/* ---- 4. Hero ----------------------------------------------------------- */
.hero{padding:92px 0 105px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:80px;align-items:end}
h1{margin:0;max-width:950px;font-size:clamp(52px,8vw,104px);line-height:.92;letter-spacing:-.075em;font-weight:500}
h1 .quiet{color:#777}
.hero-copy{max-width:700px;margin:34px 0 0;color:var(--text-2);font-size:clamp(17px,2vw,21px);line-height:1.55}
.hero-copy strong{color:var(--text);font-weight:500}
.hero-epigraph{margin:22px 0 0;color:var(--signal);font-size:15px;font-family:var(--mono);letter-spacing:.01em}
.hero-epigraph em{font-style:italic}
.hero-side-row{border-top:1px solid var(--border);padding:13px 0}
.hero-side-row:last-child{border-bottom:1px solid var(--border)}
.hero-side .meta{color:var(--dim);margin-bottom:4px}
.hero-side .value{color:var(--text-2);font-size:13px}
.hero-side a{text-decoration:none}
.hero-side a:hover{color:var(--text)}

/* ---- 5. Sections & prose ---------------------------------------------- */
.section{padding:100px 0;border-bottom:1px solid var(--border)}
.section-head{display:grid;grid-template-columns:120px 1fr;gap:32px;margin-bottom:55px}
.section-index{color:var(--dim);padding-top:7px}
.section-title{margin:0;font-size:clamp(32px,5vw,56px);line-height:1.05;letter-spacing:-.045em;font-weight:500}
.section-note{margin:14px 0 0;color:var(--muted);max-width:680px;font-size:14px}
.content{max-width:820px;margin-left:152px}
.content p{color:var(--text-2);font-size:16px;line-height:1.85}
.content p strong{color:var(--text);font-weight:500}
.content h2{font-size:28px;line-height:1.2;font-weight:500;letter-spacing:-.03em;margin:56px 0 18px}
.content h2:first-child{margin-top:0}
.content h3{font-size:22px;line-height:1.25;font-weight:500;letter-spacing:-.025em;margin:40px 0 14px}
.content ul{color:var(--text-2);padding-left:22px}
.content li{margin:8px 0}
.content blockquote{margin:28px 0;padding:4px 0 4px 20px;border-left:2px solid var(--dim);color:#aaa;font-style:italic}

/* ---- 6. Code ----------------------------------------------------------- */
.content code,pre{font-family:var(--mono)}
code{background:var(--surface-2);border:1px solid var(--border);padding:.12em .38em;border-radius:4px;color:#d7d7d7;font-style:normal}
pre{background:var(--surface);border:1px solid var(--border);padding:18px 20px;border-radius:6px;overflow:auto;color:var(--signal);text-align:center;font-size:18px}
/* left-aligned variant for real source listings */
pre.src{text-align:left;font-size:13px;line-height:1.6;color:var(--text-2)}

/* ---- 7. Components ----------------------------------------------------- */
/* .thought: a raw in-the-moment aside, not polished exposition */
.thought{background:var(--surface);border-left:2px solid var(--signal);padding:13px 18px;margin:22px 0;color:#9b9b9b;font-family:var(--mono);font-size:13px;line-height:1.7}
.thought::before{content:'// ';color:var(--signal)}
.thought.guess{border-left-color:var(--warn)}
.thought.guess::before{color:var(--warn)}

.tldr{background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--signal);padding:22px 24px;border-radius:4px;margin:0 0 45px}
.tldr strong{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--signal)}
.tldr ul{margin:12px 0 0;padding-left:20px;color:var(--text-2);font-size:15px}
.tldr li{margin:8px 0}

.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin:24px 0 0}
.stat{background:var(--surface);padding:16px;text-align:center}
.stat .v{font-family:var(--mono);font-size:20px;color:var(--signal);display:block;margin-bottom:4px}
.stat .l{font-family:var(--mono);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

figure{margin:38px 0}
figure img{max-width:100%;display:block;margin:auto;border:1px solid var(--border);background:var(--surface)}
figcaption{text-align:center;color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.04em;margin-top:10px}

.img-placeholder{border:1.5px dashed var(--border-hover);border-radius:6px;padding:26px 22px;background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 10px,var(--surface-2) 10px,var(--surface-2) 20px);font-family:var(--mono);font-size:12px;color:var(--text-2)}
.img-placeholder .ph-tag{color:var(--warn);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:10px;margin-bottom:10px}
.img-placeholder code{font-size:11px}

.status-line{font-family:var(--mono);font-size:11px;color:var(--text-2);text-align:center;margin:16px auto;max-width:460px;padding:10px 14px;background:var(--surface);border:1px solid var(--border);border-radius:4px}

/* inline status tags (NEW, not in the ASIC file: gives signal/warn their meaning) */
.tag-verified,.tag-guess{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border:1px solid;border-radius:3px;white-space:nowrap}
.tag-verified{color:var(--signal);border-color:var(--signal)}
.tag-guess{color:var(--warn);border-color:var(--warn)}

/* ---- 8. Buttons -------------------------------------------------------- */
.btn-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{cursor:pointer;padding:9px 14px;border:1px solid var(--border-hover);border-radius:4px;background:var(--surface);color:var(--text);font-family:var(--mono);font-size:11px}
.btn:hover{border-color:var(--signal);color:var(--signal)}

/* ---- 9. Footer --------------------------------------------------------- */
footer{padding:30px 0 50px;color:var(--dim);font-family:var(--mono);font-size:10px}
.footer-row{display:flex;justify-content:space-between;gap:20px}

/* ---- 9b. Writeup components -------------------------------------------
   Shared by data/engineering writeups (protocol analysis, FFT, ...).
   Element-level rules are scoped to body.writeup so other pages are untouched. */
.hl{color:var(--signal);font-weight:500}
.metric-good{color:var(--signal);font-weight:600}
.metric-bad{color:var(--warn);font-weight:600}

.spec-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:30px}
.tag{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--border-hover);padding:3px 8px;border-radius:3px}
.tag-sig,.tag-green{color:var(--signal);border-color:rgba(94,255,143,.35)}
.tag-blue{color:var(--blue);border-color:rgba(94,158,255,.3)}

.clk{width:100%;height:26px;margin:34px 0 0}
.clk svg{display:block;width:100%;height:100%}
.clk path{stroke:var(--border-hover);stroke-width:1.5;fill:none}

/* callout box: green = verified/result, red = failure/caution, blue = info, purple = derived */
.finding-box{background:var(--surface);border:1px solid var(--border);border-left:2px solid var(--signal);border-radius:4px;padding:16px 20px;margin:22px 0;font-size:14px;line-height:1.75;color:var(--text-2)}
.finding-box.green{border-left-color:var(--signal)}
.finding-box.red{border-left-color:var(--warn)}
.finding-box.blue{border-left-color:var(--blue)}
.finding-box.purple{border-left-color:var(--purple)}
.finding-label{font-family:var(--mono);font-size:10px;color:var(--signal);text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.finding-box.red .finding-label{color:var(--warn)}
.finding-box.blue .finding-label{color:var(--blue)}
.finding-box.purple .finding-label{color:var(--purple)}

.stat-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);margin:24px 0}
.stat-box{background:var(--surface);padding:16px;text-align:center}
.stat-box .stat-val{font-family:var(--mono);font-size:20px;color:var(--signal);display:block;margin-bottom:4px}
.stat-box .stat-val.red{color:var(--warn)}
.stat-box .stat-val.blue{color:var(--blue)}
.stat-box .stat-label{font-family:var(--mono);font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}

.opt-before-after{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.opt-box{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:16px 20px;font-size:14px}
.opt-box.before{border-left:2px solid var(--warn)}
.opt-box.after{border-left:2px solid var(--signal)}
.ob-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px}
.ob-val{font-family:var(--mono);font-size:22px;display:block;line-height:1.3;margin-bottom:4px}
.opt-box.before .ob-label,.opt-box.before .ob-val{color:var(--warn)}
.opt-box.after .ob-label,.opt-box.after .ob-val{color:var(--signal)}
.ob-sub{font-size:12px;color:var(--muted)}

.chart-wrap{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:18px 20px 10px;margin:26px 0}
.chart-wrap svg{width:100%;height:auto;display:block}
.chart-caption{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--dim);margin-top:8px;text-align:center}

body.writeup table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);font-size:12px;margin:24px 0;font-family:var(--mono);color:var(--text-2)}
body.writeup th,body.writeup td{padding:10px 13px;border:1px solid var(--border);text-align:center}
body.writeup th{color:var(--signal);font-weight:500;background:var(--surface-2);font-size:11px;letter-spacing:.04em}
body.writeup td.left{text-align:left}
body.writeup tr.highlight-row td,body.writeup tr.highlight-row-green td{background:rgba(94,255,143,.05);border-color:rgba(94,255,143,.45)}
body.writeup tr.highlight-row-blue td{background:rgba(94,158,255,.05);border-color:rgba(94,158,255,.45)}
body.writeup tr.highlight-row-red td{background:rgba(255,107,74,.06);border-color:rgba(255,107,74,.45)}

body.writeup details{background:var(--surface);border:1px solid var(--border);border-radius:4px;margin:0 0 12px;padding:14px 18px;transition:border-color .2s}
body.writeup details[open]{border-color:var(--border-hover)}
body.writeup summary{cursor:pointer;color:var(--text);outline:none;font-size:13px;list-style:none;display:flex;align-items:center;gap:9px;user-select:none;font-family:var(--mono)}
body.writeup summary::-webkit-details-marker{display:none}
body.writeup summary::before{content:'\25B6';font-size:9px;color:var(--signal);transition:transform .2s;display:inline-block;flex-shrink:0}
body.writeup details[open] summary::before{transform:rotate(90deg)}
body.writeup summary:hover{color:var(--signal)}
.details-content{margin-top:14px;padding-left:16px;border-left:1px solid var(--border);font-size:14px}
.details-content p{font-size:14px;margin:0 0 12px}
.details-content ul{padding-left:18px;margin:0 0 12px;color:var(--text-2)}
.details-content li{margin:6px 0}

.refs{font-size:13px;color:var(--text-2);line-height:1.9}
.refs li{margin-bottom:6px}
body.writeup .content a{color:var(--text);text-decoration-color:var(--dim);text-underline-offset:3px}
body.writeup .content a:hover{color:var(--signal);text-decoration-color:var(--signal)}

/* ---- 9c. Next-writeup link --------------------------------------------- */
.next{padding:70px 0 30px}
.next-link{display:block;text-decoration:none;border:1px solid var(--border);border-radius:4px;padding:22px 26px;background:var(--surface);transition:border-color .2s}
.next-link .kicker{display:block;margin-bottom:10px}
.next-title{display:block;font-size:24px;font-weight:500;letter-spacing:-.03em;color:var(--text);transition:color .2s}
.next-sub{display:block;margin-top:4px;color:var(--muted);font-size:14px}
.next-link:hover{border-color:var(--signal)}
.next-link:hover .next-title{color:var(--signal)}

/* ---- 10. Responsive ---------------------------------------------------- */
@media(max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:48px}
  .content{margin-left:0}
  .section-head{grid-template-columns:70px 1fr}
  .nav-links{gap:15px}
  .hero{padding:70px 0 80px}
}
@media(max-width:600px){
  .shell{width:min(100% - 36px,var(--page))}
  .nav-inner{height:58px}
  .nav-links a:nth-child(n+3){display:none}
  .hero{padding:58px 0 65px}
  .section{padding:78px 0}
  .section-head{display:block;margin-bottom:42px}
  .section-index{margin-bottom:12px}
  h1{font-size:clamp(50px,17vw,78px)}
  .content p{font-size:15px}
  .footer-row{flex-direction:column}
  .stat-row,.stat-grid-4{grid-template-columns:1fr 1fr}
  .opt-before-after{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- 10. Reading progress (opt-in: <body data-progress>) -------------- */
.read-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--signal);z-index:30;pointer-events:none;transition:width .08s linear}