/* Shared blog article styles. Used by all blog/<slug>/index.html pages. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#06060e;--text:#e0e0e8;--text-dim:#7a7a8e;--text-muted:#4a4a5e;
  --accent:#00e5a0;--accent2:#00b4d8;--accent3:#7b61ff;
  --panel-bg:rgba(8,8,20,0.85);--panel-border:rgba(255,255,255,0.06);
  --glow:rgba(0,229,160,0.15);
  --mono:'JetBrains Mono',monospace;--sans:'Space Grotesk',sans-serif;
  --code-bg:#0a0a14;--warn:#f59e0b;--red:#ef4444;
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;min-height:100vh;}
.container{max-width:700px;margin:0 auto;padding:60px 24px;}

/* Breadcrumb variants */
.breadcrumb{font-family:var(--mono);font-size:13px;color:var(--accent);margin-bottom:32px;text-decoration:none;display:inline-block;}
.breadcrumb:hover{color:#fff;}
.breadcrumb-flex{display:flex;align-items:center;gap:8px;margin-bottom:40px;font-size:14px;color:var(--text-dim);}
.breadcrumb-flex a{color:var(--accent);text-decoration:none;transition:color 0.3s;}
.breadcrumb-flex a:hover{color:var(--accent2);}
.breadcrumb-flex span{color:var(--text-muted);}
.breadcrumb-accent2 a{color:var(--accent2);}
.breadcrumb-accent2 a:hover{color:var(--accent);}

.article-header{margin-bottom:48px;}
.article-header h1{font-size:32px;font-weight:600;line-height:1.3;margin-bottom:16px;}
/* gradient title variant used in depin */
.article-header h1.gradient-title{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.article-meta{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:13px;color:var(--text-muted);margin-bottom:8px;}
.article-meta .date{color:var(--text-dim);}
.article-meta .divider{color:var(--panel-border);}
.article-meta strong{color:var(--text);}
/* border-bottom variant used in depin */
.article-meta.bordered{border-bottom:1px solid var(--panel-border);padding-bottom:16px;font-family:var(--sans);font-size:14px;color:var(--text-dim);}

.article-body{margin-bottom:48px;font-size:15px;}
.article-body h2{font-size:22px;font-weight:600;margin-top:32px;margin-bottom:12px;font-family:var(--sans);color:var(--accent);}
.article-body h3{font-size:17px;font-weight:600;margin-top:24px;margin-bottom:10px;font-family:var(--sans);color:var(--text);}
.article-body h3.accent2{color:var(--accent2);}
.article-body p{margin-bottom:16px;}
.article-body ul{margin-left:24px;margin-bottom:16px;}
.article-body ol{margin-left:20px;margin-bottom:20px;}
.article-body li{margin-bottom:8px;}
.article-body a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);}
.article-body a:hover{color:#fff;}
.article-body strong{color:var(--text);}
.article-body em{color:var(--accent2);font-style:normal;}

.code-block{background:var(--code-bg);border:1px solid var(--panel-border);border-radius:8px;padding:16px;margin:20px 0;overflow-x:auto;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--text-dim);}
.code-block code{color:#00e5a0;}
.code-block .comment{color:#7a7a8e;}
.code-block .keyword{color:#00b4d8;}
.code-block .string{color:#7b61ff;}
.code-block .number{color:#00e5a0;}
/* prompting code-block variant */
.code-block.mono-lg{font-size:13px;line-height:1.6;padding:16px 20px;white-space:pre;}
.code-block .tag{color:var(--accent2);}
.code-block .str{color:var(--accent);}
.code-block .kw{color:var(--accent3);}

/* inline code & pre */
code{background:var(--code-bg);color:var(--accent);padding:2px 6px;border-radius:3px;font-family:var(--mono);font-size:0.9em;}
pre{background:var(--code-bg);border:1px solid var(--panel-border);border-radius:6px;padding:20px;margin:20px 0;overflow-x:auto;font-family:var(--mono);font-size:0.9em;}
pre code{background:none;padding:0;color:var(--accent);}

.highlight-box{background:rgba(0,229,160,0.05);border-left:4px solid var(--accent);padding:16px;margin:20px 0;border-radius:4px;font-size:14px;}
.highlight-box strong{color:var(--accent);}
.highlight-box p{margin-bottom:0;}
/* highlight-box variants */
.highlight-box.warn{background:rgba(245,158,11,0.06);border-left-color:var(--warn);}
.highlight-box.bad{background:rgba(239,68,68,0.06);border-left-color:var(--red);}
.highlight-box.accent2{border-left-color:var(--accent2);}
.highlight-box.accent-left{border-left-color:var(--accent);}
/* solo-dev / depin: panel-bg variant */
.highlight-box.panel{background:var(--panel-bg);border:1px solid var(--panel-border);border-left:4px solid var(--accent3);border-radius:4px;padding:20px;margin:30px 0;}
.highlight-box.panel strong{color:var(--accent3);}
.highlight-box.panel p{margin:0;font-size:15px;}
.highlight-box.info{border-left-color:var(--accent2);}
.highlight-box.warning{border-left-color:var(--accent3);}

.article-footer{padding-top:24px;border-top:1px solid var(--panel-border);margin-bottom:32px;}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.tag{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:4px;background:rgba(255,255,255,0.04);color:var(--text-muted);border:1px solid rgba(255,255,255,0.06);}

.footer{margin-top:48px;padding-top:24px;border-top:1px solid var(--panel-border);font-family:var(--mono);font-size:12px;color:var(--text-muted);}
.footer a{color:var(--accent);text-decoration:none;}
.footer a:hover{color:#fff;}
.footer-links{margin-bottom:16px;}
.footer-links a{margin:0 12px;}
/* depin footer variant */
.footer.centered{text-align:center;font-size:13px;color:var(--text-dim);font-family:var(--sans);}
.footer.centered a{color:var(--accent2);}
.footer.centered a:hover{color:var(--accent);}

/* Post nav (simple) */
.post-nav{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:32px;}
.post-nav a{font-family:var(--mono);font-size:13px;color:var(--accent);text-decoration:none;padding:8px 0;}
.post-nav a:hover{color:#fff;}

/* Nav posts (inline links — prompting) */
.nav-posts-inline{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-top:1px solid var(--panel-border);margin-top:40px;}
.nav-posts-inline a{color:var(--accent);text-decoration:none;font-family:var(--mono);font-size:13px;transition:color 0.3s;}
.nav-posts-inline a:hover{color:#fff;}
.nav-posts-inline .next{text-align:right;}

/* Nav posts (flex with label+title — on-device-llm) */
.nav-posts-flex{display:flex;justify-content:space-between;margin-top:48px;padding-top:24px;border-top:1px solid var(--panel-border);}
.nav-posts-flex a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--accent2);font-size:14px;transition:color 0.2s;}
.nav-posts-flex a:hover{color:var(--accent);}
.nav-posts-flex .label{color:var(--text-dim);font-size:12px;text-transform:uppercase;}
.nav-posts-flex .title{color:var(--text);font-weight:600;}

/* Nav posts (card-style — solo-dev) */
.nav-posts-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:60px;padding-top:40px;border-top:1px solid var(--panel-border);}
.nav-post-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;padding:20px;text-decoration:none;transition:all 0.3s ease;}
.nav-post-card:hover{border-color:var(--accent);background:rgba(0,229,160,0.05);}
.nav-post-card-label{font-size:0.85em;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:8px;}
.nav-post-card-title{font-size:0.95em;font-weight:600;color:var(--accent);}
.nav-post-card:hover .nav-post-card-title{color:var(--accent2);}
.nav-post-card.next-card{grid-column:2;text-align:right;}
.nav-post-card.disabled{opacity:0.4;cursor:default;pointer-events:none;}

/* Nav posts (flex-link style — depin) */
.nav-posts-depin{display:flex;justify-content:space-between;gap:20px;margin-top:60px;padding-top:40px;border-top:1px solid var(--panel-border);}
.nav-post-link{flex:1;padding:16px;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:4px;text-decoration:none;transition:all 0.3s;}
.nav-post-link:hover{border-color:var(--accent);background:rgba(0,229,160,0.05);}
.nav-post-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;}
.nav-post-title{font-weight:600;color:var(--accent2);line-height:1.4;}
.nav-post-link.prev .nav-post-label::before{content:"← ";}
.nav-post-link.next .nav-post-label::after{content:" →";}

/* Tables — blog-table (simple inline style replacement) */
.blog-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:13px;}
.blog-table tr{border-bottom:1px solid var(--panel-border);}
.blog-table th{text-align:left;padding:12px;color:var(--accent);}
.blog-table td{padding:12px;color:var(--text-dim);}
.blog-table .td-plain,.td-plain{color:var(--text);}

/* Tables — data-table (solo-dev) */
.data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:0.95em;}
.data-table thead{background:rgba(8,8,20,0.5);border-bottom:2px solid var(--accent);}
.data-table th{padding:12px;text-align:left;color:var(--accent);font-weight:600;}
.data-table td{padding:12px;border-bottom:1px solid var(--panel-border);color:var(--text);}
.data-table tr:hover{background:rgba(0,229,160,0.05);}

/* Tables — fancy panel table (on-device-llm) */
.data-table-fancy{width:100%;border-collapse:collapse;margin:24px 0;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;overflow:hidden;}
.data-table-fancy thead{background:rgba(0,229,160,0.08);}
.data-table-fancy th{padding:12px 16px;text-align:left;font-weight:700;color:var(--accent);border-bottom:1px solid var(--panel-border);font-size:14px;}
.data-table-fancy td{padding:12px 16px;border-bottom:1px solid var(--panel-border);color:var(--text);font-size:14px;}
.data-table-fancy tr:last-child td{border-bottom:none;}
.data-table-fancy tr:hover{background:rgba(0,229,160,0.04);}

/* Tables — depin comparison table */
.comparison-table td{font-size:13px;}

/* prompting: vs-table */
.vs-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;}
.vs-table th{text-align:left;padding:10px 14px;background:var(--code-bg);color:var(--accent);font-family:var(--mono);font-size:12px;border:1px solid var(--panel-border);letter-spacing:0.5px;}
.vs-table td{padding:10px 14px;border:1px solid var(--panel-border);color:var(--text-dim);}
.vs-table tr:hover td{background:rgba(255,255,255,0.02);}
.bad-example{color:var(--red);}
.good-example{color:var(--accent);}

/* prompting: vector diagram */
.vector-diagram{background:var(--code-bg);border:1px solid var(--panel-border);border-radius:12px;padding:24px;margin:24px 0;text-align:center;}
.vector-diagram svg{max-width:100%;height:auto;}
.mono-svg{font-family:'JetBrains Mono',monospace;}

/* prompting: hack cards */
.hack-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;}
.hack-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:14px 16px;transition:border-color 0.3s;}
.hack-card:hover{border-color:rgba(0,229,160,0.3);}
.hack-num{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:4px;font-weight:600;}
.hack-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px;}
.hack-desc{font-size:12px;color:var(--text-muted);line-height:1.5;}
@media(max-width:600px){.hack-grid{grid-template-columns:1fr;}}

/* Stats grid (solo-dev) */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:30px 0;}
.stat-box{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:6px;padding:20px;text-align:center;}
.stat-box .number{font-size:2.2em;font-weight:700;color:var(--accent);margin-bottom:8px;}
.stat-box .label{font-size:0.9em;color:var(--text-dim);font-weight:500;}
.session-log-table{font-size:0.9em;margin:20px 0;overflow-x:auto;}

/* on-device-llm: metric cards */
.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:24px 0;}
.metric-card{background:var(--panel-bg);border:1px solid var(--panel-border);padding:16px;border-radius:6px;text-align:center;}
.metric-card .value{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--accent2);margin-bottom:8px;}
.metric-card .label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:0.5px;}

/* on-device-llm: comparison note */
.comparison-note{background:rgba(123,97,255,0.08);border:1px solid var(--accent3);border-radius:4px;padding:12px;font-size:14px;margin:12px 0;}

/* Utility */
.link-accent2{color:var(--accent2);}
.perf-note{margin-top:32px;color:var(--text-dim);font-style:italic;}
.text-center{text-align:center;}
.text-accent{color:var(--accent);}
.text-accent2{color:var(--accent2);}

/* Skip link */
.skip-link{position:absolute;top:-40px;left:0;background:var(--accent,#64ffda);color:var(--bg,#0a0a0f);padding:10px 18px;z-index:1000;font-size:13px;font-weight:600;text-decoration:none;border-radius:0 0 6px 0;transition:top .2s}
.skip-link:focus{top:0;outline:2px solid var(--accent,#64ffda);outline-offset:2px}

/* Responsive */
@media(max-width:640px){
  .stats-grid{grid-template-columns:1fr;}
  .nav-posts-grid{grid-template-columns:1fr;}
  .nav-post-card.next-card{grid-column:auto;text-align:left;}
  .article-meta{flex-direction:column;gap:8px;}
  .article-header h1{font-size:1.8em;}
}