/* ─── Design layer ──────────────────────────────────────────────────
   Loaded LAST on every page (after each page's inline <style>), so it
   can restyle page-level components into the new design language
   without editing ~75 inline style blocks. Tokens live in
   homepage-hud.css.
─────────────────────────────────────────────────────────────────── */

/* ─── Page header (listing + tool pages) ───────────────────────── */
.page-header { padding: clamp(24px, 4vw, 56px) 0 clamp(32px, 4vw, 48px); }
.page-tag {
  display: inline-block; font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  letter-spacing: 0; text-transform: none; margin-bottom: 24px;
}
.page-tag::before { content: '( '; font-size: inherit; }
.page-tag::after { content: ' )'; }
.page-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(44px, 7vw, 112px); line-height: 1; letter-spacing: -.05em;
  max-width: 1200px; text-wrap: balance; color: var(--ink);
}
.page-lede {
  margin-top: 32px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55;
  max-width: 760px; color: var(--body); text-wrap: pretty;
}
.page-lede strong { color: var(--ink); }
.page-lede code, .promise-strip .text code {
  font-family: var(--font-mono); font-size: .85em; color: var(--ink);
  background: var(--mist); padding: 2px 7px; border-radius: 6px;
}


/* ─── Toolbars with search (blog/tools/books) ──────────────────── */
.toolbar, .books-filter {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 18px 24px; background: var(--paper); border-bottom: 1.5px solid var(--ink);
}
.toolbar .label, .books-filter .label { font-family: var(--font-mono); font-size: 12px; color: var(--sub); letter-spacing: 0; text-transform: none; }
.toolbar .chip, .books-filter .chip {
  border: var(--stroke); background: var(--paper); color: var(--ink);
  padding: 8px 15px; border-radius: 999px; font: 600 13px/1.2 var(--font-text);
  letter-spacing: 0; text-transform: none;
}
.toolbar .chip:hover, .books-filter .chip:hover { background: var(--mist); color: var(--ink); border-color: var(--ink); }
.toolbar .chip.active, .books-filter .chip.active { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.toolbar .chip span.count { opacity: .6; font-family: var(--font-mono); font-weight: 400; }
.toolbar .meta, .books-filter .sort { font-family: var(--font-mono); font-size: 12px; color: var(--sub); }
.toolbar .meta strong, .books-filter .sort strong { color: var(--ink); font-weight: 500; }
.toolbar .search-wrap {
  border: var(--stroke); border-radius: 999px; background: var(--paper); padding: 4px 6px 4px 18px;
}
.toolbar .search-wrap:focus-within { background: var(--mist); border-color: var(--ink); box-shadow: none; }
.toolbar .search-wrap .arrow { color: var(--ink); }
.toolbar .search-wrap input { font: 15px/1.4 var(--font-text); color: var(--ink); }
.toolbar .search-wrap input::placeholder { color: #8A8A8A; }

/* ─── Stats strips on listing pages ────────────────────────────── */
.blog-stats, .books-stats, .promise-grid, .at-glance { background: var(--paper); }
.blog-stats .cell, .books-stats .cell, .promise-grid .cell, .at-glance .cell { border-color: var(--ink) !important; border-width: 0 1.5px 0 0; padding: 28px; }
.blog-stats .cell:last-child, .books-stats .cell:last-child, .promise-grid .cell:last-child, .at-glance .cell:last-child { border-right: 0; }
.blog-stats .k, .books-stats .cell .k, .at-glance .cell .k { font-family: var(--font-mono); font-size: 12px; color: var(--sub); letter-spacing: 0; }
.blog-stats .v, .books-stats .cell .v, .at-glance .cell .v {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(36px, 4.4vw, 64px); letter-spacing: -.05em; line-height: 1; margin: 12px 0 8px;
}
.at-glance .cell .v { font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em; }
.blog-stats .sub, .books-stats .cell .sub { font-size: 14px; color: var(--body); }
.promise-grid .cell .glyph { color: var(--ink); }
.promise-grid .cell .head { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.promise-grid .cell .sub { color: var(--body); font-size: 14px; }

/* ─── Featured post (blog index) ───────────────────────────────── */
.featured-post { padding: clamp(28px, 5vw, 64px) clamp(20px, 3vw, 40px); gap: 32px 48px; }
.featured-post .left .kicker { font-family: var(--font-mono); font-size: 13px; color: var(--ink); letter-spacing: 0; }
.featured-post h2 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(30px, 4vw, 58px); line-height: 1.05; letter-spacing: -.045em; text-wrap: balance;
}
.featured-post h2 em { background: var(--paper); }
.featured-post .excerpt { font-size: 17px; line-height: 1.65; color: var(--ink); }
.featured-post .cats .cat { background: var(--paper); border: var(--stroke); padding: 6px 12px; border-radius: 999px; font: 600 13px/1.2 var(--font-text); color: var(--ink); letter-spacing: 0; text-transform: none; }
.featured-post .meta, .featured-post .meta .read { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.featured-post .cta {
  display: inline-flex; background: var(--ink); color: var(--paper); border: 0;
  padding: 16px 26px; border-radius: 999px; font: 600 15px/1 var(--font-text); letter-spacing: 0;
}
.featured-post .cta:hover { background: var(--paper); color: var(--ink); }
.featured-post .ascii {
  background: var(--ink); color: var(--paper); border: 0; border-radius: var(--r-md);
  padding: 28px; font-family: var(--font-mono); font-size: 14px; line-height: 1.9;
}

/* ─── Category headers (tools index) ───────────────────────────── */
.cat-header { border-color: var(--ink); padding: 40px 0 16px; }
.cat-header .name { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.04em; color: var(--ink); }
.cat-header .count { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.tool-glyph, .game-glyph {
  background: var(--lime) !important; color: var(--ink) !important; border: var(--stroke) !important;
  border-radius: 14px !important;
}
.tools-grid .tool-card, .games-grid .game-card { border: var(--stroke); border-radius: var(--r-md); }
.tools-grid .tool-card:hover, .games-grid .game-card:hover { background: var(--ink); color: var(--paper); transform: none; }
.tools-grid .tool-card:hover h3, .tools-grid .tool-card:hover p, .tools-grid .tool-card:hover .run,
.tools-grid .tool-card:hover .commit-row, .tools-grid .tool-card:hover .commit-row .commit,
.games-grid .game-card:hover h3, .games-grid .game-card:hover p, .games-grid .game-card:hover .run { color: var(--paper); }
.tools-grid .tool-card:hover .tool-footer { border-top-color: #3A3A3A; }
.game-card h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; }
.game-tag { font-family: var(--font-mono); background: var(--lime); color: var(--ink); border: 0; border-radius: 6px; }
.game-footer { border-top-color: var(--rule); }
.game-footer .run { color: var(--ink); font-weight: 600; font-family: var(--font-text); }
.soon-card { border: 1.5px dashed var(--ink); border-radius: var(--r-md); background: var(--mist); }

/* ─── Books ────────────────────────────────────────────────────── */
.book-card { border: var(--stroke); border-radius: var(--r-md); background: var(--paper); transition: background .15s ease; }
.book-card:hover { background: var(--lime); transform: none; border-color: var(--ink); }
.cover { border-radius: 16px; }
.book-meta .title { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.book-meta .author { color: var(--body); }
.book-meta .hook { color: var(--body); font-size: 15px; }
.book-meta .tag { font-family: var(--font-mono); border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); text-transform: none; letter-spacing: 0; }
.book-meta .row .rating, .book-meta .row .read, .book-meta .arrow { color: var(--ink); }
.coming-soon { border: 1.5px dashed var(--ink); border-radius: var(--r-md); background: var(--mist); }

/* ─── Article pages (blog posts, book reviews) ─────────────────── */
.post-breadcrumb {
  font-family: var(--font-mono); font-size: 13px; color: var(--sub); letter-spacing: 0;
  padding: 0 0 24px;
}
.post-breadcrumb a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.post-breadcrumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.post-breadcrumb .here { color: var(--sub); }

.post-hero, .review-hero { padding: clamp(32px, 5vw, 72px) clamp(20px, 3vw, 48px); }

/* Article/review heroes: quiet paper + thin lime edge (full lime too loud for titles) */
.shell--article > .panel.panel--accent {
  background: var(--paper);
  box-shadow: inset 6px 0 0 var(--lime);
}
.shell--article > .panel.panel--accent .panel-header {
  background: var(--mist);
}
.shell--article > .panel.panel--accent .post-hero .lede code,
.shell--article > .panel.panel--accent .review-hero .lede code {
  background: var(--mist);
}
.post-hero .kicker, .review-hero .kicker {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink); letter-spacing: 0; text-transform: none; margin-bottom: 24px;
}
.post-hero .kicker::before, .review-hero .kicker::before { content: '('; font-size: inherit; }
.post-hero .kicker::after, .review-hero .kicker::after { content: ')'; }
.post-hero h1, .review-hero h1 {
  font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(34px, 5.4vw, 80px); line-height: 1.02; letter-spacing: -.05em;
  max-width: 1100px; text-wrap: balance; margin-bottom: 28px;
}
.post-hero h1 em, .review-hero h1 em { background: var(--paper); font-weight: 600; }
.post-hero .lede, .review-hero .verdict {
  font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink); max-width: 820px; text-wrap: pretty;
}
.post-hero .lede em, .review-hero .verdict em { color: var(--ink); }
.post-hero .lede code { font-family: var(--font-mono); font-size: .82em; background: rgba(255,255,255,.7); border: 0; color: var(--ink); padding: 2px 7px; border-radius: 6px; }
.post-hero .cats .cat {
  background: var(--paper); border: var(--stroke); color: var(--ink);
  padding: 6px 12px; border-radius: 999px; font: 600 13px/1.2 var(--font-text); letter-spacing: 0; text-transform: none;
}
.post-hero .meta, .review-hero .meta-row { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.post-hero .meta .ms, .review-hero .meta-row .ms { color: var(--ink); opacity: .5; }
.post-hero .meta .read, .post-hero .meta .author, .review-hero .meta-row .read { color: var(--ink); }
.review-hero .author-line { color: var(--ink); }
.review-hero .meta-row .stars, .review-hero .meta-row .rating-num { color: var(--ink); }

.article-grid { gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); grid-template-columns: minmax(0, 1fr) 280px; }
@media (max-width: 980px) { .article-grid { grid-template-columns: 1fr; } }
.article-grid > .panel:first-child, .article-grid > article.panel { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.article-grid > .panel:first-child > .panel-header { display: none; }
.toc-rail { top: 100px; }
.toc-rail.panel, .toc-rail .panel { background: var(--mist); border-color: transparent; }
.toc-rail .panel-header { border-bottom: 1px solid var(--rule); }
.post-toc-body { padding: 16px 24px 20px; }
.post-toc-body li { font-size: 14px; border-bottom: 1px solid var(--rule); padding: 10px 0; }
.post-toc-body li::before { font-family: var(--font-mono); font-size: 11px; color: var(--sub); }
.post-toc-body a { color: var(--body); }
.post-toc-body a:hover, .post-toc-body a.active { color: var(--ink); }
.post-toc-body a.active { font-weight: 600; }
.post-toc-body li:has(a.active)::before { color: var(--ink); }

.post-body { padding: 0; max-width: 780px; margin: 0; }
.post-body p { font-size: 18px; line-height: 1.75; color: #2A2A2A; margin: 0 0 22px; }
.post-body p em { color: inherit; }
.post-body p strong, .post-body li strong { color: var(--ink); font-weight: 600; }
.post-body h2 {
  display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink);
  font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.035em;
  margin: 64px 0 20px; scroll-margin-top: 110px;
}
.post-body h2::before, .post-body h3::before { content: none; }
.post-body h3 { font-family: var(--font-text); font-weight: 700; font-size: 22px; letter-spacing: -.02em; color: var(--ink); margin: 40px 0 14px; }
.post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 22px; }
.post-body li { font-size: 18px; line-height: 1.7; color: #2A2A2A; margin-bottom: 10px; }
.post-body li::marker { color: var(--ink); }
.post-body a { color: var(--ink); border-bottom: 2px solid var(--lime); transition: background .15s ease; }
.post-body a:hover { background: var(--lime); border-bottom-color: var(--ink); }
.post-body code, .post-body li code, .post-body td code {
  font-family: var(--font-mono); font-size: .85em; background: var(--mist); border: 0;
  padding: 2px 7px; border-radius: 6px; color: var(--ink);
}
.post-body aside {
  background: var(--lime); border: 0; border-radius: 20px; padding: 24px 28px; margin: 32px 0;
  font-size: 17px; line-height: 1.65; color: var(--ink);
}
.post-body aside strong { color: var(--ink); }
.post-body aside code { background: rgba(255,255,255,.65); }
.post-body table { font-size: 15px; border: var(--stroke); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.post-body th { background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.post-body th, .post-body td { border-bottom: 1px solid var(--rule); color: #2A2A2A; }
.post-body tr:last-child td { border-bottom: 0; }
.post-divider { background: var(--rule); }
.post-figure { border: var(--stroke); border-radius: 20px; background: var(--paper); }
.post-figure figcaption { font-family: var(--font-mono); font-size: 12px; color: var(--sub); }

/* Code blocks: ink cards — light foreground on dark bg (hljs tokens keep their colours) */
.pre-wrap {
  position: relative;
  border-radius: 20px; overflow: hidden;
  background: var(--ink); border: 0; margin: 28px 0;
}
.pre-wrap pre {
  background: var(--ink) !important; border: 0; border-radius: 0; margin: 0;
  padding: 22px 24px; overflow-x: auto;
  color: #E6E6E6 !important; /* base tokens (names, =, punctuation) must stay light */
}
.pre-wrap pre,
.pre-wrap pre code,
.pre-wrap pre code.hljs {
  font-family: var(--font-mono); font-size: 14px; line-height: 1.7;
  background: transparent !important;
  color: #E6E6E6 !important;
  border: 0; padding: 0;
}
.pre-wrap pre { padding: 22px 24px; } /* restore padding after code reset */
.pre-wrap .hljs-comment,
.pre-wrap .hljs-quote { color: #9AA0A6 !important; } /* readable on ink */
.pre-wrap .hljs-keyword { color: #C678DD !important; }
.pre-wrap .hljs-string { color: #98C379 !important; }
.pre-wrap .hljs-number,
.pre-wrap .hljs-literal { color: #56B6C2 !important; }
.pre-wrap .hljs-built_in,
.pre-wrap .hljs-title { color: #61AFEF !important; }
.pre-wrap .hljs-attr,
.pre-wrap .hljs-attribute { color: #E5C07B !important; }
.copy-btn {
  font-family: var(--font-mono); background: #1F1F1F; color: var(--paper);
  border: 1px solid #333; border-radius: 999px;
}
.copy-btn:hover, .copy-btn.copied { background: var(--lime); color: var(--ink); border-color: var(--lime); }

blockquote.pull-quote { border-left: 0; background: var(--lime); border-radius: var(--r-md); padding: 28px 32px; }
blockquote.pull-quote p { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; line-height: 1.3; color: var(--ink); font-style: normal; }
blockquote.pull-quote footer { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.idea-card { border: var(--stroke); border-radius: var(--r-md); background: var(--paper); }
.idea-card h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; }
.idea-card .takeaway { background: var(--mist); border: 0; border-radius: 14px; color: var(--ink); }
.idea-card .takeaway strong { color: var(--ink); }

.related-grid { gap: 16px; }
.related-card { background: var(--mist); border: 0; border-radius: var(--r-md); padding: 24px; transition: background .15s ease; }
.related-card:hover { background: var(--lime); border-color: transparent; transform: none; }
.related-card-title { font-family: var(--font-text); font-weight: 600; font-size: 18px; letter-spacing: -.02em; color: var(--ink); }
.related-card-meta { font-family: var(--font-mono); font-size: 12px; color: var(--sub); }
.post-foot { font-family: var(--font-mono); font-size: 13px; color: var(--sub); }
.post-foot a { color: var(--ink); border-bottom: 1px solid var(--ink); }
.post-foot a:hover { color: var(--ink); background: var(--lime); }

/* ─── Empty states ─────────────────────────────────────────────── */
.empty-state { color: var(--body); font-size: 16px; }
.empty-state .glyph { color: var(--ink); }

/* ─── Legacy action buttons ────────────────────────────────────── */
.act {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 14px 22px; border-radius: 999px; border: var(--stroke);
  font: 600 14px/1.2 var(--font-text); letter-spacing: 0; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.act--solid { background: var(--lime); color: var(--ink); }
.act--solid:hover { background: var(--ink); color: var(--lime); filter: none; }
.act--ghost, .act--link { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.act--ghost:hover, .act--link:hover { background: var(--mist); color: var(--ink); border-color: var(--ink); }

/* ─── Fixes after visual QA ────────────────────────────────────── */
/* Highlighted words in headings: always ink text */
h1 em, h2 em, .page-title em, .post-hero h1 em, .review-hero h1 em,
.featured-post h2 em, .case-title em, .section-title-row h2 em, .cat-header .name em { color: var(--ink) !important; font-style: normal; }

/* Interactive tool/game workspaces stay on paper; lime is for showcase blocks */
.panel--accent:has(textarea, input, select, canvas, button) { background: var(--paper); }

/* Article grid must let code blocks scroll instead of widening the page */
@media (max-width: 980px) { .article-grid { grid-template-columns: minmax(0, 1fr); } }
.article-grid > * { min-width: 0; }

/* Tool breadcrumb */
.breadcrumb { font-family: var(--font-mono); font-size: 13px; color: var(--sub); margin-top: 24px; }
.breadcrumb a { color: var(--ink); border-bottom: 1px solid var(--rule); }
.breadcrumb a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.breadcrumb .sep { color: var(--sub); }
.breadcrumb .here { color: var(--sub); }
.post-body table { display: block; max-width: 100%; overflow-x: auto; }
.post-body p code, .post-body li code, .post-hero .lede code { overflow-wrap: anywhere; }
.pre-wrap, .pre-wrap pre { max-width: 100%; overflow-x: auto; }
.post-body :not(pre) > code, .post-body aside, .post-body td { overflow-wrap: anywhere; }
.chart-scroll { overflow-x: auto; max-width: 100%; }
.breadcrumb, .post-breadcrumb { align-items: baseline; }

/* ─── Tool detail (Tool Detail.dc.html) ─────────────────────────── */
.shell:has(> .page-header) {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

/* Hero: breadcrumb first, then copy + privacy pill */
.shell > .page-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 clamp(36px, 5vw, 56px);
  gap: 0;
}
.shell > .page-header > .breadcrumb {
  order: -1;
  margin: 0 0 clamp(28px, 4vw, 40px);
  font-size: 13px;
  color: var(--sub);
}
.shell > .page-header > .breadcrumb a {
  color: var(--sub);
  border-bottom: 0;
  text-decoration: none;
}
.shell > .page-header > .breadcrumb a:hover { color: var(--ink); opacity: .85; }
.shell > .page-header > .breadcrumb .sep { color: var(--sub); }
.shell > .page-header > .breadcrumb .here { color: var(--ink); }

.shell > .page-header > .tool-hero__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px 48px;
  flex-wrap: wrap;
}
.shell > .page-header > .tool-hero__row > .tool-hero__copy,
.shell > .page-header > .tool-hero__copy { max-width: min(880px, 100%); flex: 1 1 420px; }
.shell > .page-header .tool-privacy-pill { margin-left: auto; align-self: flex-end; }
.shell > .page-header .page-tag,
.shell > .page-header .tool-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.shell > .page-header .page-tag::before,
.shell > .page-header .page-tag::after { content: none !important; }
.shell > .page-header .tool-glyph {
  display: inline-grid;
  place-items: center;
  background: var(--lime);
  border: var(--stroke);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1;
}
.shell > .page-header .page-title {
  margin: 24px 0 0;
  font-size: clamp(44px, 6vw, 96px);
  max-width: 900px;
}
.shell > .page-header .page-lede,
.shell > .page-header .tool-hero__copy .page-lede {
  margin: 28px 0 0;
  max-width: 760px;
  color: var(--body);
}

.tool-privacy-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: var(--stroke);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper);
  white-space: nowrap;
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.tool-privacy-pill::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px var(--ink);
  flex-shrink: 0;
}

/* Workspace card — paper, 32px radius (not full lime) */
.shell > .panel.panel--accent {
  background: var(--paper) !important;
  border: var(--stroke);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: none;
}
.shell > .panel.panel--accent > .panel-header {
  background: var(--mist);
  border-bottom: 1.5px solid var(--ink);
  padding: 16px 20px;
}
.shell > .panel.panel--accent > .panel-body {
  padding: clamp(20px, 3vw, 28px);
  background: var(--paper);
}

/* Privacy ink card */
.shell > .panel.tool-privacy,
.shell > .tool-privacy,
.shell > .panel:has(> .promise-strip) {
  margin-top: clamp(40px, 5vw, 64px) !important;
  background: var(--ink) !important;
  color: var(--paper);
  border: 0 !important;
  border-radius: 32px;
  overflow: hidden;
  padding: 0;
}
.shell > .panel:has(> .promise-strip) > .panel-header,
.shell > .panel.tool-privacy > .panel-header {
  display: none;
}
.shell > .panel:has(> .promise-strip) > .promise-strip,
.shell > .tool-privacy > .promise-strip,
.tool-privacy__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin: 0;
  padding: clamp(32px, 4vw, 48px);
  border: 0;
}
.shell > .panel:has(> .promise-strip) .promise-strip .cell,
.tool-privacy__grid > div {
  padding: 0;
  border: 0;
  border-top: 1.5px solid rgba(255,255,255,.3);
  padding-top: 16px;
  display: block;
  align-items: stretch;
  gap: 0;
}
.shell > .panel:has(> .promise-strip) .promise-strip .cell:first-child,
.tool-privacy__grid > div:first-child {
  border-top-color: var(--lime);
}
.shell > .panel:has(> .promise-strip) .promise-strip .glyph { display: none; }
.shell > .panel:has(> .promise-strip) .promise-strip .text,
.tool-privacy__grid .body {
  margin-top: 8px;
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.45;
  color: var(--paper);
  letter-spacing: 0;
  text-transform: none;
}
.shell > .panel:has(> .promise-strip) .promise-strip .text strong,
.tool-privacy__grid .body strong { color: var(--lime); font-weight: 600; }
.tool-privacy__label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--lime);
  letter-spacing: 0;
  text-transform: uppercase;
}
.tool-privacy__lead .tool-privacy__label { font-size: 13px; text-transform: none; }
.tool-privacy__lead .tool-privacy__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-top: 16px;
  color: var(--paper);
  border-top: 0;
  padding-top: 0;
}
.tool-privacy__lead { border-top: 0 !important; padding-top: 0 !important; }

/* Related tools */
.tool-related {
  margin-top: clamp(56px, 8vw, 96px);
}
.tool-related__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.tool-related__kicker {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
.tool-related__kicker::before { content: '( '; }
.tool-related__kicker::after { content: ' )'; }
.tool-related h2 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 3.6vw, 52px);
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--ink);
}
.tool-related__all {
  border: var(--stroke);
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  transition: background .15s ease, color .15s ease;
}
.tool-related__all:hover { background: var(--lime); }
.tool-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
a.tool-related__card {
  border: var(--stroke);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  transition: background .15s ease, color .15s ease;
}
a.tool-related__card:hover { background: var(--ink); color: var(--paper); }
a.tool-related__card .tool-glyph {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: var(--stroke) !important;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
}
a.tool-related__card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 8px 0 0;
}
a.tool-related__card p {
  font-size: 15px;
  line-height: 1.55;
  opacity: .8;
  margin: 0;
}

/* Tool-page footer CTA (Missing something?) when marked */
.site-footer.site-footer--tools .site-footer__grid > div:first-child .kicker::before,
.site-footer.site-footer--tools .site-footer__grid > div:first-child .kicker::after { content: none; }
.site-footer.site-footer--tools .site-footer__card { background: var(--lime); }

/* Password generator polish inside new workspace */
.shell .password-display {
  background: var(--mist);
  border: var(--stroke);
  border-radius: 16px;
  color: var(--ink);
  font-size: clamp(20px, 2.8vw, 28px);
}
.shell .btn.btn-primary,
.shell .btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  border: 0;
  font-family: var(--font-text);
  font-weight: 600;
}
.shell .btn.btn-primary:hover { background: var(--lime); color: var(--ink); filter: none; }
.shell .btn.btn-ghost,
.shell .btn-ghost {
  border: var(--stroke);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 600;
}
.shell .btn.btn-ghost:hover { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.shell .group-toggle {
  border: var(--stroke);
  border-radius: 14px;
}
.shell .group-toggle.active {
  background: var(--lime);
  border-color: var(--ink);
}
.shell .group-toggle.active .group-check {
  background: var(--ink);
  border-color: var(--ink);
}
.shell .group-toggle.active .group-check svg path { stroke: var(--lime); }
.shell .strength-bar-fill { background: var(--lime); }
.shell .length-custom-wrap {
  border: var(--stroke);
  border-radius: 999px;
  background: var(--mist);
}
.shell .length-custom-wrap input[type="number"] { color: var(--ink); }

@media (max-width: 720px) {
  .tool-privacy-pill { width: 100%; justify-content: flex-start; }
  .shell > .panel:has(> .promise-strip) > .promise-strip,
  .tool-privacy__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── Tools index (Tools.dc.html) ───────────────────────────────── */
.shell--tools {
  padding-top: clamp(28px, 4vw, 48px);
  padding-bottom: clamp(48px, 6vw, 80px);
}
.shell--tools > .page-header {
  display: block !important;
  flex-direction: column;
  align-items: stretch;
  padding: 0 0 clamp(40px, 5vw, 56px);
}
.shell--tools > .page-header > .page-title,
.shell--tools > .page-header > .page-lede,
.shell--tools > .page-header > .page-tag {
  width: 100%;
  max-width: none;
}
.shell--tools > .page-header > .page-title { max-width: 1200px; }
.shell--tools > .page-header > .page-lede { max-width: 760px; }
.shell--tools > .page-header .page-tag {
  display: block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}
.shell--tools > .page-header .page-tag::before,
.shell--tools > .page-header .page-tag::after { content: none !important; }
.shell--tools > .page-header .page-title {
  margin: 24px 0 0;
  font-size: clamp(48px, 7vw, 112px);
  max-width: 1200px;
}
.shell--tools > .page-header .page-lede {
  margin: 32px 0 0;
  max-width: 760px;
  color: var(--body);
}

/* Promise ink card */
.shell--tools .tools-promise {
  margin: 0 0 clamp(48px, 6vw, 72px);
  background: var(--ink);
  color: var(--paper);
  border-radius: 32px;
  padding: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  border: 0;
}
.shell--tools .tools-promise .lead .k {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--lime);
}
.shell--tools .tools-promise .lead .t {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-top: 16px;
  color: var(--paper);
}
.shell--tools .tools-promise .cell {
  border-top: 1.5px solid rgba(255,255,255,.3);
  padding-top: 16px;
}
.shell--tools .tools-promise .cell.accent-edge { border-top-color: var(--lime); }
.shell--tools .tools-promise .cell .head {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--lime);
  letter-spacing: 0;
  text-transform: uppercase;
  display: block;
}
.shell--tools .tools-promise .cell .sub {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--paper);
  display: block;
}

/* Filter chips */
.shell--tools .toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  background: transparent;
  border: 0;
  align-items: center;
  margin: 0 0 clamp(8px, 2vw, 16px);
}
.shell--tools .toolbar .label,
.shell--tools .toolbar .meta { display: none; }
.shell--tools .toolbar .chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: var(--stroke);
  background: var(--paper);
  color: var(--ink);
  padding: 9px 16px;
  border-radius: 999px;
  font: 600 14px/1.2 var(--font-text);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
.shell--tools .toolbar .chip:hover { background: var(--mist); color: var(--ink); border-color: var(--ink); }
.shell--tools .toolbar .chip.active {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--ink);
}
.shell--tools .toolbar .chip span.count {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  opacity: .6;
  margin-left: 0;
}

/* Category headers */
.shell--tools .cat-section { margin-top: clamp(48px, 6vw, 72px); }
.shell--tools .cat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 0 20px;
  margin: 0 0 24px;
  border-bottom: 1.5px solid var(--ink);
  border-top: 0;
}
.shell--tools .cat-header .name,
.shell--tools .cat-header h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.04em;
  line-height: 1.05;
  color: var(--ink);
}
.shell--tools .cat-header .count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  letter-spacing: 0;
  text-transform: none;
}

/* Tool cards */
.shell--tools .tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.shell--tools a.tool-card {
  border: var(--stroke);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  overflow: hidden;
}
.shell--tools a.tool-card:hover {
  background: var(--ink);
  color: var(--paper);
  transform: none;
}
.shell--tools a.tool-card .tool-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.shell--tools a.tool-card .tool-glyph {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--lime) !important;
  color: var(--ink) !important;
  border: var(--stroke) !important;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
.shell--tools a.tool-card .tool-card__meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: inherit;
}
.shell--tools a.tool-card .tool-badge {
  background: var(--lime);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}
.shell--tools a.tool-card .tool-ver { opacity: .6; }
.shell--tools a.tool-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 8px 0 0;
  color: inherit;
}
.shell--tools a.tool-card p {
  font-size: 15px;
  line-height: 1.55;
  opacity: .8;
  margin: 0;
  color: inherit;
  flex: 1;
}
.shell--tools a.tool-card p code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: transparent;
  color: inherit;
  padding: 0;
}
.shell--tools a.tool-card .tool-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  border-top: 0;
  gap: 12px;
}
.shell--tools a.tool-card .tool-footer .tags {
  font-family: var(--font-mono);
  font-size: 12px;
  opacity: .6;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}
.shell--tools a.tool-card .tool-footer .tag {
  background: transparent !important;
  color: inherit !important;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
}
.shell--tools a.tool-card .tool-footer .tag + .tag::before { content: " · "; }
.shell--tools a.tool-card .tool-footer .run {
  font-weight: 600;
  font-size: 14px;
  font-family: var(--font-text);
  color: inherit;
  white-space: nowrap;
}
.shell--tools a.tool-card:hover .tool-glyph {
  background: var(--lime) !important;
  color: var(--ink) !important;
}
.shell--tools a.tool-card:hover .tool-badge {
  background: var(--lime);
  color: var(--ink);
}

.shell--tools .empty-state {
  margin-top: 48px;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--sub);
}

@media (max-width: 720px) {
  .shell--tools .tools-promise { grid-template-columns: 1fr; gap: 24px; }
}