/* ==========================================================================
   DrilByte site: playful neo-brutalism ("sticker") theme, same look as the
   Explorer. Visual layer only: no text, links or structure are changed.
   Loaded AFTER index.css, so these rules win over the compiled utilities.
   Hard shadows only, no blur, no dark gradients.
   ========================================================================== */
:root {
  --bg: #fff3dc;
  --card: #ffffff;
  --card2: #ffe3f1;
  --ink: #14101f;
  --muted: #6b6280;
  --pink: #ff4fa3;
  --yellow: #ffd23f;
  --cyan: #22c3ee;
  --mint: #2fe3a0;
  --focus: #7c6cff;
  --link: #0a6f94;
  --link-hover: #c2185b;
  --positive: #067a52;
  --positive-bg: #d9fff0;
  --shadow: 5px 5px 0 var(--ink);
  --shadow-lg: 7px 7px 0 var(--pink);
  --shadow-btn: 0 4px 0 var(--ink);
  --border: 3px solid var(--ink);
  --font-body: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------------------ base */
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font-body); color: var(--ink);
  background:
    radial-gradient(circle at 1px 1px, #14101f26 1.5px, transparent 0) 0 0 / 22px 22px,
    radial-gradient(700px 460px at 100% 0, #ffd23f55, transparent 70%),
    radial-gradient(700px 460px at 0 100%, #ff4fa344, transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
/* 6px rainbow bar */
body::before {
  content: ''; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--mint), var(--cyan), #7c6cff);
}
.site-frame { background: transparent; }
:focus-visible { outline: 3px solid var(--focus) !important; outline-offset: 2px; }
::selection { background: var(--yellow); color: var(--ink); }
h1, h2, h3, button { font-weight: 700; }
.font-mono-custom { font-family: var(--font-body); }
.skip-link { background: var(--pink); color: var(--ink); border: var(--border); border-radius: 14px; }

/* no blurred glows anywhere */
[class*="blur-3xl"], .dot-grid { display: none !important; }
[class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* icons carry hard-coded green stroke attributes: make them follow the text colour */
.site-header svg[stroke]:not([stroke="none"]), .site-main svg[stroke]:not([stroke="none"]), .site-footer svg[stroke]:not([stroke="none"]) { stroke: currentColor; }
.site-main svg { color: var(--ink); }

/* generic text colours: every tinted green becomes muted, headings become ink */
.site-main [class*="text-[#"], .site-footer [class*="text-[#"] { color: var(--muted); }
.site-main h1, .site-main h2, .site-main h3,
.site-main [class*="text-[#123f32]"], .site-main [class*="text-[#183f32]"] { color: var(--ink); }
.site-main a[class*="text-[#287b54]"] { color: var(--link); font-weight: 700; text-decoration-color: var(--pink); }
.site-main a[class*="text-[#287b54]"]:hover { color: var(--link-hover); }

/* small section labels */
.site-main p[class*="uppercase"][class*="tracking-[.18em]"],
.site-main p[class*="uppercase"][class*="tracking-[.14em]"] {
  color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em;
}

/* accent words: highlighter marker (same as explorer h2) */
.site-main h2 span[class*="text-[#2b875b]"], .site-main h2 span[class*="text-[#f2d663]"], .site-main h2 span[class*="text-[#e4ce70]"] {
  color: var(--ink); padding: 0 6px; background: linear-gradient(transparent 58%, var(--yellow) 58%);
}

/* ---------------------------------------------------------------- header */
.site-header { padding-top: 16px; }
.nav-shell {
  background: var(--card); border: var(--border); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.brand-name { color: var(--ink); letter-spacing: -.04em; }
.brand-sub { color: var(--muted); }
.nav-link {
  padding: 8px 14px; border: 3px solid transparent; border-radius: 14px; color: var(--ink); font-size: 14px; font-weight: 700;
}
.nav-link:hover { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.nav-link[aria-current="page"], .nav-link.active { background: var(--pink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.icon-link, .menu-toggle {
  width: 42px; height: 42px; background: var(--yellow); color: var(--ink); border: var(--border); border-radius: 14px; box-shadow: var(--shadow-btn);
}
.icon-link:hover, .menu-toggle:hover { background: var(--yellow); filter: brightness(1.06); }
.icon-link:active, .menu-toggle:active { transform: translateY(4px); box-shadow: none; }
.button-primary, .button-secondary {
  min-height: 44px; padding: 0 18px; color: var(--ink); font-size: 14px; font-weight: 700;
  border: var(--border); border-radius: 14px; box-shadow: var(--shadow-btn); transition: transform .12s, box-shadow .12s, filter .12s;
}
.button-primary { background: var(--pink); }
.button-secondary { background: var(--yellow); border-color: var(--ink); }
.button-primary:hover, .button-secondary:hover { background: var(--pink); color: var(--ink); filter: brightness(1.06); transform: none; }
.button-secondary:hover { background: var(--yellow); }
.button-primary:active, .button-secondary:active { transform: translateY(4px); box-shadow: none; }
.mobile-menu { background: var(--card); border: var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.mobile-menu a { color: var(--ink); font-weight: 700; border: 3px solid transparent; border-radius: 14px; }
.mobile-menu a:hover { background: var(--yellow); border-color: var(--ink); }
.mobile-menu .button-primary { color: var(--ink); }

/* ------------------------------------------------------------------ hero */
.site-main > div > section:first-child {
  width: min(calc(100% - 44px), 1240px); margin: 28px auto 0; border: var(--border); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink);
  background: linear-gradient(135deg, var(--yellow), #ff8fc8); overflow: hidden;
}
.site-main > div > section:first-child h1 { color: var(--ink); text-shadow: 3px 3px 0 #fff; letter-spacing: -.045em; }
.site-main > div > section:first-child h1 span {
  display: inline-block; margin-top: 6px; padding: 0 12px; color: var(--ink); text-shadow: none;
  background: var(--card); border: var(--border); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.2deg);
}
.site-main > div > section:first-child > div p { color: var(--ink); font-weight: 500; }

/* pills / eyebrows */
.site-main [class*="bg-[#eef5e6]"], .site-main [class*="bg-[#f2f6e9]"] {
  color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 999px; font-weight: 700;
}
.site-main [class*="bg-[#eef5e6]"] > span:first-child, .site-main [class*="bg-[#f2f6e9]"] svg { background-color: var(--mint); color: var(--ink); box-shadow: none; }
.site-main [class*="bg-[#eef5e6]"] > span:first-child { width: 11px; height: 11px; border: 2px solid var(--ink); }

/* buttons that are plain utility links */
a.button-shift {
  min-height: 48px; padding: 10px 20px; color: var(--ink) !important; font-weight: 700; border: var(--border) !important; border-radius: 14px;
  box-shadow: var(--shadow-btn); transition: transform .12s, box-shadow .12s, filter .12s;
}
a.button-shift[class*="bg-[#123f32]"] { background: var(--pink); }
a.button-shift[class*="bg-[#f5f3e8]"] { background: var(--card); }
.reveal-up.delay-3 a.button-shift:nth-child(3) { background: var(--yellow); }
a.button-shift:hover { transform: none; filter: brightness(1.06); }
a.button-shift:active { transform: translateY(4px); box-shadow: none; }

/* hero stats -> sticker boxes with coloured tops */
.site-main > div > section:first-child .grid.max-w-\[480px\] { max-width: 520px; gap: 12px; }
.site-main > div > section:first-child .grid.max-w-\[480px\] > div {
  padding: 10px 14px 12px; background: var(--card); border: var(--border); border-top-width: 8px; border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
}
.site-main > div > section:first-child .grid.max-w-\[480px\] > div:nth-child(1) { border-top-color: var(--pink); }
.site-main > div > section:first-child .grid.max-w-\[480px\] > div:nth-child(2) { border-top-color: var(--cyan); }
.site-main > div > section:first-child .grid.max-w-\[480px\] > div:nth-child(3) { border-top-color: var(--mint); }
.site-main > div > section:first-child .grid.max-w-\[480px\] p:nth-child(1) { color: var(--ink); }

/* app window */
.app-window, .site-main .app-window {
  background: var(--card); border: var(--border); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); transform: rotate(1.5deg);
}
.app-window-bar { background: var(--yellow); border-bottom: 3px solid var(--ink); }
.app-window-stats { background: var(--card); border-top: 3px solid var(--ink); }
.app-window-dots { gap: 6px; }
.app-window-dots i { width: 12px; height: 12px; border: 2px solid var(--ink); }
.app-window-dots i:nth-child(1) { background: var(--pink) !important; }
.app-window-dots i:nth-child(2) { background: var(--card) !important; }
.app-window-dots i:nth-child(3) { background: var(--mint) !important; }
.app-window .font-mono-custom { color: var(--ink); font-weight: 700; }
.app-window-bar > span:last-child {
  padding: 1px 9px; color: var(--ink); background: var(--mint); border: 2px solid var(--ink); border-radius: 999px; font-weight: 700;
}
.app-window-bar > span:last-child > span { background: var(--card); border: 2px solid var(--ink); width: 9px; height: 9px; }
.app-window [class*="bg-[#eff6e8]"] {
  color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); font-weight: 700;
}
.app-window [class*="bg-[#eff6e8]"] > span { background: var(--card); border: 2px solid var(--ink); }
.app-window-stats p:first-child { color: var(--ink); }
.app-window-stats p:last-child { color: var(--muted); font-weight: 700; }

/* facts strip */
.site-main > div > div[class*="bg-[#e9f1df]"] { margin-top: 36px; background: var(--mint); border-top: var(--border); border-bottom: var(--border); }
.site-main > div > div[class*="bg-[#e9f1df]"] * { color: var(--ink); }
.site-main > div > div[class*="bg-[#e9f1df]"] span[class*="uppercase"] { font-weight: 700; letter-spacing: .08em; font-size: 12px; }
.site-main > div > div[class*="bg-[#e9f1df]"] .font-bold { font-weight: 700; font-size: 13px; }

/* ----------------------------------------------------------------- cards */
article.card-lift, a.card-lift {
  background: var(--card); border: var(--border); border-top-width: 10px; border-radius: 18px; box-shadow: var(--shadow);
  color: var(--ink); transition: transform .12s, box-shadow .12s;
}
.card-lift:hover { transform: translate(-2px, -2px) rotate(-.3deg); box-shadow: var(--shadow-lg); }
.site-main .grid > .card-lift:nth-child(3n+1) { border-top-color: var(--pink); }
.site-main .grid > .card-lift:nth-child(3n+2) { border-top-color: var(--yellow); }
.site-main .grid > .card-lift:nth-child(3n+3) { border-top-color: var(--mint); }
.card-lift h3 { color: var(--ink); }
article.card-lift > div:first-child > svg {
  box-sizing: content-box; width: 22px; height: 22px; padding: 9px; color: var(--ink); background: var(--cyan);
  border: var(--border); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
}
article.card-lift > div:first-child > span {
  padding: 1px 9px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 11px;
}
a.card-lift > div:first-child svg { color: var(--ink); }
a.card-lift span[class*="uppercase"] {
  display: inline-block; width: fit-content; padding: 1px 9px; color: var(--ink) !important; background: var(--positive-bg);
  border: 2px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
/* the dark "Whitepaper" card becomes the pink one */
a.card-lift[class*="bg-[#123f32]"] { background: var(--pink); color: var(--ink); border-color: var(--ink); }
a.card-lift[class*="bg-[#123f32]"] p { color: var(--ink); }
a.card-lift[class*="bg-[#123f32]"] span[class*="uppercase"] { background: var(--card); }

/* ---------------------------------------------------------- network band */
#network { background: var(--cyan); color: var(--ink); border-top: var(--border); border-bottom: var(--border); }
#network .line-grid {
  opacity: .35 !important; background-image: radial-gradient(circle at 1px 1px, #14101f 1.5px, transparent 0); background-size: 22px 22px;
}
#network h2 { color: var(--ink); text-shadow: 3px 3px 0 #fff; }
#network h2 span { padding: 0 6px; text-shadow: none; background: linear-gradient(transparent 58%, var(--yellow) 58%); }
#network p, #network [class*="text-[#"] { color: var(--ink); font-weight: 500; }
#network p[class*="uppercase"] { color: var(--ink); font-weight: 700; }
#network a[class*="underline"] {
  display: inline-flex; padding: 6px 14px; color: var(--ink); background: var(--yellow); border: var(--border); border-radius: 14px;
  box-shadow: var(--shadow-btn); text-decoration: none; font-weight: 700;
}
#network a[class*="underline"]:hover { filter: brightness(1.06); }
#network .grid.gap-3 > div {
  color: var(--ink); background: var(--card); border: var(--border); border-top-width: 10px; border-radius: 18px; box-shadow: var(--shadow);
}
#network .grid.gap-3 > div:nth-child(4n+1) { border-top-color: var(--pink); }
#network .grid.gap-3 > div:nth-child(4n+2) { border-top-color: var(--yellow); }
#network .grid.gap-3 > div:nth-child(4n+3) { border-top-color: var(--mint); }
#network .grid.gap-3 > div:nth-child(4n+4) { border-top-color: var(--cyan); }
#network .grid.gap-3 > div svg { color: var(--ink); }
#network .grid.gap-3 > div p:nth-of-type(1) { color: var(--ink); font-weight: 700; }
#network .grid.gap-3 > div p:nth-of-type(2) { color: var(--link); font-weight: 700; }
#network .grid.gap-3 > div p:nth-of-type(3) { color: var(--muted); }

/* --------------------------------------------------- developer / code */
#build a.group {
  color: var(--ink); background: var(--yellow); border: var(--border); border-radius: 14px; box-shadow: var(--shadow-btn); transition: transform .12s, box-shadow .12s;
}
#build a.group:nth-child(2) { background: var(--card); }
#build a.group:hover { filter: brightness(1.06); }
#build a.group:active { transform: translateY(4px); box-shadow: none; }
#build a.group * { color: var(--ink); }
[class*="bg-[#102f27]"] {
  background: var(--ink); border: var(--border); border-radius: 18px; box-shadow: 7px 7px 0 var(--pink);
}
[class*="bg-[#102f27]"] > div:first-child { background: var(--yellow); border-bottom: var(--border); }
[class*="bg-[#102f27]"] > div:first-child span { color: var(--ink); font-weight: 700; }
[class*="bg-[#102f27]"] > div:first-child i { width: 12px; height: 12px; border: 2px solid var(--ink); }
[class*="bg-[#102f27]"] > div:first-child i:nth-child(1) { background: var(--pink); }
[class*="bg-[#102f27]"] > div:first-child i:nth-child(2) { background: var(--card); }
[class*="bg-[#102f27]"] > div:first-child i:nth-child(3) { background: var(--mint); }
[class*="bg-[#102f27]"] .font-mono-custom { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; }
[class*="bg-[#102f27]"] [class*="text-["] { color: #f5efff; }
[class*="bg-[#102f27]"] [class*="text-[#6d9b83]"] { color: #8f86a8; }
[class*="bg-[#102f27]"] [class*="text-[#b8d4bd]"] { color: var(--mint); }

/* ---------------------------------------------------- coin / uses panel */
.site-main div[class*="bg-[#e5f0dc]"] { background: var(--card2); border: var(--border); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink); }
.site-main div[class*="border-[#b9d2b5]"] { border-left: 3px dashed var(--ink); }

/* ------------------------------------------------------------- resources */
#resources { background: transparent; border-top: 3px dashed var(--ink); }

/* --------------------------------------------------------- start mining */
#start {
  width: min(calc(100% - 44px), 1240px); margin: 0 auto 56px; background: linear-gradient(135deg, var(--yellow), #ff8fc8);
  border: var(--border); border-radius: 24px; box-shadow: 6px 6px 0 var(--ink);
}
#start h2 { color: var(--ink); text-shadow: 3px 3px 0 #fff; letter-spacing: -.05em; }
#start h2 span {
  display: inline-block; margin-top: 8px; padding: 0 14px; text-shadow: none; background: var(--card); border: var(--border); border-radius: 16px;
  box-shadow: 4px 4px 0 var(--ink); transform: rotate(-1.2deg);
}
#start p { color: var(--ink); font-weight: 500; }
.start-mining-visual:before { display: none; }
.start-mining-visual img { filter: drop-shadow(6px 6px 0 var(--ink)); transform: rotate(1.5deg); }

/* ---------------------------------------------------------------- footer */
.site-footer { position: relative; margin-top: 0; color: var(--ink); background: var(--card); border-top: var(--border); }
.site-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--pink), var(--yellow), var(--mint), var(--cyan), #7c6cff);
}
.brand-name { color: var(--ink); }
.footer-note { color: var(--muted); font-weight: 500; }
.footer-label { color: var(--muted); font: 700 12px/1.4 var(--font-body); letter-spacing: .1em; }
.footer-links a { color: var(--ink); font-size: 14px; font-weight: 700; }
.footer-links a:hover { color: var(--link-hover); text-decoration: underline; }
.social-link { width: 42px; height: 42px; color: var(--ink); background: var(--yellow); border: var(--border); border-radius: 14px; box-shadow: var(--shadow-btn); }
.social-link:hover { background: var(--yellow); filter: brightness(1.06); }
.social-link:active { transform: translateY(4px); box-shadow: none; }
.footer-bottom { color: var(--muted); border-top: 3px dashed var(--ink); font: 700 11px/1.4 var(--font-body); letter-spacing: .06em; }
.footer-bottom a { color: var(--ink); }
.footer-bottom a:hover { color: var(--link-hover); }
.site-footer [class*="text-["] { color: var(--ink); }

/* ------------------------------------------------- inner pages (docs...) */
.eyebrow {
  padding: 3px 12px; color: var(--ink); background: var(--card); border: 2px solid var(--ink); border-radius: 999px; font: 700 12px/1.4 var(--font-body); letter-spacing: .08em;
}
.eyebrow:before { width: 11px; height: 11px; background: var(--mint); border: 2px solid var(--ink); }
.page-title { color: var(--ink); letter-spacing: -.05em; text-shadow: 4px 4px 0 var(--yellow); }
.page-lede { color: var(--ink); font-weight: 500; }
.doc, .docs-shell { color: var(--ink); }
.doc h1, .doc h2, .doc h3, .docs-prose h2, .docs-prose h3 { color: var(--ink); letter-spacing: -.03em; }
.doc h2, .docs-prose h2 { display: inline-block; background: linear-gradient(transparent 58%, var(--yellow) 58%); padding: 0 4px; }
.doc h1 { text-shadow: 3px 3px 0 var(--yellow); }
.doc strong { color: var(--ink); }
.doc a, .docs-prose a, .docs-shell .docs-prose a { color: var(--link); text-decoration-color: var(--pink); }
.doc a:hover, .docs-prose a:hover { color: var(--link-hover); }
.doc li::marker { color: var(--pink); }
.docs-prose p { color: var(--ink); font-weight: 500; }
.doc code, .docs-shell .docs-prose code:not(.docs-code code) { color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 6px; }
.doc hr { border-top: 3px dashed var(--ink); }
.tw { background: var(--card); border: var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.doc th { color: var(--ink); background: var(--yellow); border-bottom: var(--border); font: 700 12px/1.4 var(--font-body); }
.doc td { border-bottom: 3px dashed var(--ink); }
.doc tr:last-child td { border-bottom: 0; }
.toc { background: var(--card); border: var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.toc-title { color: var(--ink); font: 700 12px/1.4 var(--font-body); letter-spacing: .1em; }
.docs-sidebar-link { color: var(--ink); font-size: 13px; font-weight: 700; border: 3px solid transparent; border-radius: 14px; }
.docs-sidebar-link:hover, .docs-sidebar-link:focus-visible { background: var(--yellow); border-color: var(--ink); color: var(--ink); }
.docs-shell .docs-prose .docs-anchor, .docs-anchor { border-color: var(--ink); }
.docs-shell .docs-prose .docs-code, .docs-code { background: var(--ink); color: #f5efff; border: var(--border); border-radius: 18px; box-shadow: 6px 6px 0 var(--pink); }
.docs-shell .docs-prose button { color: var(--yellow); }
.copy-btn { cursor: pointer; }
.not-found-mark { color: var(--ink); background: var(--pink); border: var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.not-found h1 { color: var(--ink); text-shadow: 4px 4px 0 var(--yellow); }

/* toasts */
[role="status"][class*="border"], li[class*="group"][class*="toast"] { border: var(--border); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }

/* ---------------------------------------------------------------- mobile */
@media (max-width: 800px) {
  .site-header { padding-top: 14px; }
  .site-main > div > section:first-child, #start { width: calc(100% - 24px); }
  .app-window, .site-main .app-window { transform: none; }
  .mobile-menu { border: var(--border); border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
  .mobile-menu a { color: var(--ink); }
  .mobile-menu a:hover { background: var(--yellow); }
  .mobile-menu .button-primary { color: var(--ink); }
}
@media (max-width: 560px) {
  .site-main > div > section:first-child .grid.max-w-\[480px\] > div { padding: 8px 8px 10px; }
}

/* reduced motion: no tilt */
@media (prefers-reduced-motion: reduce) {
  .app-window, .site-main .app-window, .start-mining-visual img, #start h2 span, #network h2 span,
  .site-main > div > section:first-child h1 span { transform: none; }
  .card-lift:hover { transform: none; }
}

/* numbers stay bold */
.site-main > div > section:first-child .grid.max-w-\[480px\] p:nth-child(1), .app-window-stats p:first-child, #network .grid.gap-3 > div p:nth-of-type(1) { font-weight: 700; }
.site-main > div > section:first-child .grid.max-w-\[480px\] p:nth-child(1) { font-size: 26px; }

/* footer polish */
.footer-brand .brand-name { color: var(--ink) !important; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; }
.site-footer svg[stroke] { color: var(--ink); }

/* headings: full bold like the explorer */
.site-main h1, .site-main h2, .site-main h3, #network h2 span, .page-title, .doc h1, .doc h2, .doc h3 { font-weight: 700; }

/* ------------------------------------------------------ docs page extras */
.docs-shell > section:first-child { padding: 44px 40px 48px; margin-bottom: 48px; row-gap: 32px; }
.docs-shell > section:first-child > div:first-of-type + div, .docs-shell > section:first-child > div { min-width: 0; }
aside[class*="bg-[#e9f2e0]"] {
  background: var(--card); border: var(--border); border-radius: 18px; box-shadow: var(--shadow); color: var(--ink);
}
aside[class*="bg-[#e9f2e0]"] > div:first-child { border-bottom: 3px dashed var(--ink); }
aside[class*="bg-[#e9f2e0]"] dl { border-color: var(--ink); }
aside[class*="bg-[#e9f2e0]"] dl > div { border-color: var(--ink); border-top: 3px dashed var(--ink); }
aside[class*="bg-[#e9f2e0]"] dl > div:first-child { border-top: 0; }
aside[class*="bg-[#e9f2e0]"] dd { color: var(--ink); font-weight: 700; }
aside[class*="bg-[#e9f2e0]"] dd.font-mono-custom { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
aside[class*="bg-[#e9f2e0]"] p[class*="border-l-2"] { border-left: 4px solid var(--pink); color: var(--muted); font-weight: 500; }
.docs-shell [class*="divide-"] > * { border-color: var(--ink); }

.docs-prose section { border-bottom: 3px dashed var(--ink); }
.docs-prose section:last-child { border-bottom: 0; }
.docs-prose [class*="bg-[#f8f6ea]"], .docs-shell [class*="bg-[#f8f6ea]"] {
  background: var(--card); border: var(--border); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
}
.docs-prose [class*="bg-[#f8f6ea]"] *, .docs-shell [class*="bg-[#f8f6ea]"] * { color: var(--ink); }
.docs-prose [class*="bg-[#f8f6ea]"] [class*="uppercase"] { color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.docs-prose [class*="bg-[#edf4e7]"] {
  color: var(--ink); background: var(--cyan); border: var(--border); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
}
.docs-prose [class*="bg-[#edf4e7]"] svg { color: var(--ink); }
.docs-prose [class*="border-[#d7e2d2]"], .docs-prose [class*="border-[#d4e1cf]"] { border-color: var(--ink); }
.docs-prose table, .docs-prose .tw { border-color: var(--ink); }
.docs-prose [class*="border-[#"] { border-color: var(--ink); }
.docs-sidebar > div { border-left: 3px dashed var(--ink); }
.docs-sidebar-link[class*="border-[#2f9f6a]"] { background: var(--pink); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.docs-sidebar-link span { color: var(--muted); }
.docs-sidebar + * a[class*="underline"], .docs-sidebar a[class*="underline"] { color: var(--link); text-decoration-color: var(--pink); }
/* code window header (add-network.js etc.) */
.docs-code, [class*="bg-[#102f27]"] { color: #f5efff; }
.doc .tw table { border: 0; }

/* ----------------------------------------------------- docs fixes, round 2 */
.site-main .docs-shell > section:first-child { padding: 44px 40px 48px; margin: 28px auto 48px; }
.docs-sidebar > div { border-left: 0; }
.docs-sidebar > div.grid { border-left: 3px dashed var(--ink); }
.docs-sidebar > div.mt-8 { border-top: 3px dashed var(--ink); }
[class*="bg-[#102f27]"] .docs-code, .docs-prose [class*="bg-[#102f27]"] .docs-code { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
[class*="bg-[#102f27]"] button { color: var(--ink); background: var(--card); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink); font-weight: 700; }
.docs-shell .docs-prose [class*="bg-[#102f27]"] button { color: var(--ink); }
.site-main p.font-mono-custom[class*="uppercase"], .site-main span.font-mono-custom[class*="uppercase"] { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
#network p.font-mono-custom[class*="uppercase"], .site-main > div > section:first-child p.font-mono-custom[class*="uppercase"] { color: var(--ink); }

/* docs code cards: ink body, yellow header, readable copy button */
.docs-prose [class*="bg-[#102f27]"] { background: var(--ink); }
.docs-prose [class*="bg-[#102f27]"] > div:first-child { background: var(--yellow); }
.docs-prose [class*="bg-[#102f27]"] > div:first-child * { color: var(--ink); }
.docs-prose [class*="bg-[#102f27]"] > div:first-child span[class*="rounded-full"] { background: var(--pink); border: 2px solid var(--ink); width: 11px; height: 11px; }
.docs-prose [class*="bg-[#102f27]"] .docs-code, .docs-prose [class*="bg-[#102f27]"] .docs-code * { color: #f5efff; background: transparent; }

/* breathing room around article pages */
.site-main .doc { margin-top: 48px; margin-bottom: 72px; }
.docs-prose table td, .docs-prose table th, .docs-prose tr { border-color: var(--ink); }

.site-main > div > div[class*="bg-[#e9f1df]"] span.font-mono-custom[class*="uppercase"] { color: var(--ink); }
@media (max-width: 560px) {
  .site-main > div > section:first-child .grid.max-w-\[480px\] { gap: 8px; }
  .site-main > div > section:first-child .grid.max-w-\[480px\] p:nth-child(1) { font-size: 22px; }
  .site-main > div > section:first-child .grid.max-w-\[480px\] p:nth-child(2) { font-size: 9px; letter-spacing: .04em; overflow-wrap: anywhere; }
  .site-main > div > section:first-child .grid.max-w-\[480px\] p:nth-child(3) { font-size: 11px; }
  .site-main .doc { margin-top: 32px; }
}