html { overflow-x: hidden; scroll-behavior: smooth; }
body.boards-page {
  background:
    radial-gradient(circle 18rem at calc(50% - min(520px, 46vw)) 58px, rgba(0, 255, 204, 0.13), transparent 100%),
    radial-gradient(circle at calc(50% + min(42vw, 500px)) 8%, rgba(0, 255, 0, 0.08), transparent 28rem),
    var(--page-bg);
}
.boards-page .wrap { width: min(1120px, calc(100% - 24px)); }
.boards-page .page-hero-top { margin-bottom: 24px; }
.boards-page .page-top-nav a[aria-current="page"] { border-color: rgba(0,255,204,.55); color: #b8ffb8; box-shadow: inset 0 0 12px rgba(0,255,204,.08); }
.boards-hero, .boards-panel, .board-card, .board-profile, .board-faq details, .board-open-source {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(145deg, var(--panel-bg), var(--panel-bg-deep));
  box-shadow: inset 0 0 5px #000;
}
.button-icon, .page-nav-icon { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.boards-page .button { border-color:rgba(0,255,153,.38); background:linear-gradient(145deg,#15351f,#102018); color:#d8ffe7; box-shadow:0 10px 24px rgba(0,255,153,.08), inset 0 0 5px #000; }
.boards-page .secondary-button { border-color:rgba(0,183,255,.42); background:linear-gradient(145deg,#102533,#10171d); color:#d9f4ff; box-shadow:0 10px 24px rgba(0,183,255,.07), inset 0 0 5px #000; }
.boards-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); gap: clamp(18px, 3vw, 28px); align-items: stretch; padding: clamp(18px, 3vw, 30px); overflow: hidden; position: relative; }
.boards-hero::before, .board-profile::before { content:""; position:absolute; inset:-1px; pointer-events:none; background: radial-gradient(circle at 72% 18%, rgba(0,255,204,.11), transparent 20rem); }
.boards-hero > *, .board-profile > * { position: relative; }
.boards-hero h1, .board-profile h1 { max-width: 820px; margin-bottom: 12px; color: #f2fff8; font-size: clamp(2rem, 4vw, 4rem); line-height: 1.02; letter-spacing: -0.04em; }
.boards-lead, .boards-panel p, .board-card p, .board-profile p, .board-profile li, .board-faq p, .board-open-source p { color: #d8ddd8; font-size: .93rem; line-height: 1.62; }
.boards-hero-visual { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: stretch; min-width:0; }
.hero-board-card { display:grid; grid-template-rows: minmax(0, 1fr) auto; min-width:0; overflow:hidden; border:1px solid #27312b; border-radius: var(--radius); background: radial-gradient(circle at 50% 30%, rgba(0,255,204,.09), transparent 12rem), #0e1412; }
.hero-board-card img { display:block; width:100%; height: clamp(250px, 30vw, 420px); object-fit: contain; padding: clamp(12px, 2vw, 22px); }
.hero-board-card figcaption { padding: 10px 12px; border-top:1px solid #27312b; color:#d8fff2; font-size:.78rem; font-weight:800; }
.boards-grid, .choice-grid, .link-grid, .workflow-grid, .board-faq, .feature-grid, .board-note-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.boards-panel { margin-top: clamp(18px, 3vw, 32px); padding: clamp(18px, 3vw, 26px); }
.section-head { display:grid; grid-template-columns: minmax(0,.58fr) minmax(260px,1fr); gap:22px; align-items:end; margin-bottom:16px; }
.boards-panel h2, .board-card h2, .board-card h3, .board-profile h2, .board-profile h3, .board-reference-column h3 { color: var(--green-dim); }
.board-card { display:flex; min-width:0; flex-direction:column; overflow:hidden; text-decoration:none; transition:border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.board-card:hover, .board-card:focus-visible, .feature-card:hover, .feature-card:focus-visible { border-color:#00ffcc88; outline:none; transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.22), inset 0 0 5px #000; }
.board-card img { display:block; width:100%; height: 190px; border-width:0 0 1px; border-style: solid; border-color: var(--border); border-radius: var(--radius) var(--radius) 0 0; background: radial-gradient(circle at 50% 35%, rgba(0,255,204,.08), transparent 9rem), #101412; object-fit: contain; padding: 12px; }
.board-card-body, .choice-card, .workflow-card, .link-card, .feature-card, .board-note-card { padding: 15px; }
.board-card h3 { margin-bottom: 8px; color:#f2fff8; }
.status-row, .chip-list, .quick-links { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; list-style:none; padding-left:0; }
.status-pill, .chip-list li, .quick-links a { display:inline-flex; align-items:center; min-height:28px; padding:5px 8px; border:1px solid #2f3a2f; border-radius: var(--radius); background:#111; color:#b8ffb8; font-size:.74rem; font-weight:800; text-decoration:none; }
.status-pill.recommended { border-color: rgba(0,255,204,.55); color:#9fffee; }
.status-pill.special { border-color: rgba(255,214,102,.45); color:#ffe19a; }
.board-profile { position:relative; display:grid; grid-template-columns: minmax(0, .95fr) minmax(300px, .85fr); gap: clamp(18px, 3vw, 30px); margin-top: 0; padding: clamp(18px, 3vw, 28px); align-items:center; overflow:hidden; }
.board-profile-media { display:grid; gap: 12px; min-width:0; }
.board-profile-image { display:block; width:100%; max-height: 440px; border:1px solid var(--border); border-radius: var(--radius); background: radial-gradient(circle at 50% 35%, rgba(0,255,204,.10), transparent 15rem), #101412; object-fit: contain; padding: clamp(12px, 2vw, 22px); }
.board-profile-caption { padding: 10px 12px; border:1px solid #27312b; border-radius: var(--radius); background: rgba(0,0,0,.18); color:#d8fff2; font-size:.78rem; line-height:1.45; }
.board-profile ul, .boards-panel ul { padding-left:1.2rem; }
.board-profile li + li, .boards-panel li + li { margin-top:7px; }
.board-meta { display:grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap:12px; margin-top:16px; }
.board-meta div, .choice-card, .workflow-card, .link-card, .feature-card, .board-note-card, .board-faq details { border:1px solid #27312b; border-radius:var(--radius); background: rgba(0,0,0,.18); }
.board-meta strong, .choice-card strong, .workflow-card strong, .link-card strong, .feature-card strong, .board-note-card strong, .board-faq summary { display:block; color:#f2fff8; }
.board-meta span { display:block; margin-top:4px; color:#d8ddd8; font-size:.82rem; line-height:1.45; }
.button-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.button-row .button { margin-top:0; }
.notice { margin-top:12px; padding:12px; border:1px solid rgba(255,214,102,.35); border-radius:var(--radius); background:rgba(255,214,102,.08); }
.board-faq details { position:relative; padding: 0; overflow:hidden; }
.board-faq summary { display:flex; gap:10px; align-items:center; cursor:pointer; padding:14px 44px 14px 14px; line-height:1.35; }
.board-faq summary::after { content:"+"; position:absolute; right:14px; top:12px; display:grid; width:24px; height:24px; place-items:center; border:1px solid #2f3a2f; border-radius:999px; color:var(--cyan); background:#111; font-weight:900; }
.board-faq details[open] summary::after { content:"–"; }
.board-faq p { margin:0; padding:0 14px 14px; }
.breadcrumb { margin: 14px 0; color: var(--muted); font-size:.78rem; }
.breadcrumb a { color:#b8ffb8; text-decoration:none; }
.feature-card, .link-card { display:block; color:inherit; text-decoration:none; transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.feature-card span, .board-note-card span { display:inline-flex; margin-bottom:9px; color: var(--green); font-size:.72rem; font-weight:900; text-transform:uppercase; }
.feature-card p, .link-card p { margin-top:8px; }
.board-open-source { display:grid; grid-template-columns: auto minmax(0,1fr); gap:18px; align-items:center; margin-top: clamp(18px, 3vw, 32px); padding: clamp(18px, 3vw, 24px); border-color:#00ffcc36; background:radial-gradient(circle at 14% 50%, rgba(0,255,204,.13), transparent 16rem), linear-gradient(145deg,#151d19,#0f0f0f); }
.identity-logo-link { display:block; line-height:0; }
.identity-logo-link picture { display:block; }
.identity-logo { display:block; width:clamp(92px,13vw,148px); height:auto; border:1px solid #2f3a2f; border-radius:calc(var(--radius) + 4px); background:linear-gradient(145deg,#101817,#0c0f0e); filter:drop-shadow(0 0 18px rgba(0,255,153,.12)); }
.board-open-source h2 { margin-bottom:8px; color:#f2fff8; }
.identity-link-list { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 0; padding-left:0; list-style:none; }
.identity-link-list a { display:inline-flex; align-items:center; min-height:28px; padding:5px 8px; border:1px solid #2f3a2f; border-radius:var(--radius); background:#111; color:#b8ffb8; font-size:.74rem; font-weight:800; text-decoration:none; }
html[data-theme="light"] body.boards-page {
  background:
    radial-gradient(circle 18rem at calc(50% - min(520px, 46vw)) 58px, rgba(0, 135, 111, .16), transparent 100%),
    radial-gradient(circle at calc(50% + min(42vw, 500px)) 8%, rgba(0, 120, 0, .10), transparent 28rem),
    var(--page-bg);
}
html[data-theme="light"] .boards-hero, html[data-theme="light"] .boards-panel, html[data-theme="light"] .board-card, html[data-theme="light"] .board-profile, html[data-theme="light"] .board-faq details, html[data-theme="light"] .board-open-source { box-shadow: 0 12px 30px rgba(20,60,45,.08); }
html[data-theme="light"] .boards-hero h1, html[data-theme="light"] .board-profile h1, html[data-theme="light"] .board-card h3, html[data-theme="light"] .board-meta strong, html[data-theme="light"] .choice-card strong, html[data-theme="light"] .workflow-card strong, html[data-theme="light"] .link-card strong, html[data-theme="light"] .feature-card strong, html[data-theme="light"] .board-note-card strong, html[data-theme="light"] .board-faq summary, html[data-theme="light"] .board-open-source h2 { color:#11251e; }
html[data-theme="light"] .boards-lead, html[data-theme="light"] .boards-panel p, html[data-theme="light"] .board-card p, html[data-theme="light"] .board-profile p, html[data-theme="light"] .board-profile li, html[data-theme="light"] .board-faq p, html[data-theme="light"] .board-open-source p { color:#2e4038; }
html[data-theme="light"] .breadcrumb { color:#52645c; }
html[data-theme="light"] .breadcrumb a { color:#006f5f; font-weight:800; text-decoration:underline; text-decoration-color:rgba(0,111,95,.28); text-underline-offset:3px; }
html[data-theme="light"] .breadcrumb a:hover, html[data-theme="light"] .breadcrumb a:focus-visible { color:#004f44; text-decoration-color:currentColor; }
html[data-theme="light"] .hero-board-card, html[data-theme="light"] .board-card img, html[data-theme="light"] .board-profile-image { background: radial-gradient(circle at 50% 35%, rgba(0,135,111,.10), transparent 12rem), #f7fbf8; }
html[data-theme="light"] .boards-page .button { border-color:rgba(0,135,86,.26); background:linear-gradient(145deg,#e9fff2,#dff8eb); color:#174b31; box-shadow:0 10px 22px rgba(20,60,45,.08); }
html[data-theme="light"] .boards-page .secondary-button { border-color:rgba(0,120,180,.24); background:linear-gradient(145deg,#edf9ff,#e4f2f8); color:#174255; box-shadow:0 10px 22px rgba(20,60,70,.08); }
html[data-theme="light"] .identity-link-list a { border-color:#d5e4dd; background:#f6fbf8; color:#215744; }
@media (max-width: 860px) {
  .boards-hero,
  .board-profile,
  .section-head,
  .board-open-source {
    grid-template-columns: 1fr;
  }

  .boards-hero-visual {
    grid-template-columns: 1fr 1fr;
  }

  .board-open-source {
    justify-items: center;
    text-align: center;
  }

  .identity-logo-link {
    justify-self: center;
  }

  .identity-link-list {
    justify-content: center;
  }
}
@media (max-width: 620px) { .boards-page .wrap { width: min(100% - 20px, 1120px); } .button-row { flex-direction:column; } .button-row .button { width:100%; } .boards-hero-visual { grid-template-columns:1fr; } .hero-board-card img { height:260px; } }

/* Landing polish: Cardputer-focused hero + protocol-style board cards */
.boards-hero-visual {
  display: grid;
  grid-template-columns: 1fr;
  align-content: stretch;
  min-width: 0;
}
.hero-board-card-featured {
  min-height: clamp(320px, 39vw, 500px);
  background:
    radial-gradient(circle at 50% 36%, rgba(0, 255, 204, .15), transparent 16rem),
    radial-gradient(circle at 68% 72%, rgba(0, 255, 0, .07), transparent 14rem),
    linear-gradient(145deg, #111a18, #0b0f0e);
}
.hero-board-card-featured img {
  height: clamp(300px, 37vw, 480px);
  object-fit: contain;
  padding: clamp(8px, 2vw, 18px);
  filter: drop-shadow(0 24px 34px rgba(0,0,0,.35));
}
.boards-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.board-card {
  position: relative;
  display: grid;
  grid-template-rows: 190px minmax(0, 1fr);
  border-color: #00ffcc44;
  border-left: 3px solid var(--cyan);
  background:
    linear-gradient(145deg, rgba(0, 255, 204, .075), transparent 36%),
    linear-gradient(145deg, #17211f, #0f1211);
  box-shadow: 0 10px 24px rgba(0, 255, 204, .055), inset 0 0 5px #000;
}
.board-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,255,204,.50), rgba(0,255,0,.14), transparent);
}
.board-card img {
  height: 190px;
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(0,255,204,.11), transparent 8.5rem),
    linear-gradient(145deg, rgba(0,255,204,.045), rgba(0,0,0,.03));
  object-fit: contain;
  padding: 14px 16px 8px;
  filter: drop-shadow(0 13px 18px rgba(0,0,0,.32));
}
.board-card-body {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px;
}
.board-card h3 {
  margin: 0;
  color: #d8fff2;
  font-size: 1rem;
  line-height: 1.28;
}
.board-card p {
  margin: 0;
  color: #d8ddd8;
  font-size: .84rem;
  line-height: 1.5;
}
.board-card .status-row { margin: 0; }
.board-card::after {
  content: "Open board page";
  justify-self: start;
  align-self: end;
  margin: 0 16px 16px;
  padding: 5px 8px;
  border: 1px solid rgba(0,255,204,.24);
  border-radius: calc(var(--radius) - 2px);
  color: var(--cyan);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.choice-card,
.link-card,
.board-note-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 0 0, rgba(0,255,204,.055), transparent 13rem),
    linear-gradient(145deg, var(--panel-bg), var(--panel-bg-deep));
  box-shadow: 0 9px 22px rgba(0,0,0,.18), inset 0 0 5px #000;
}
.choice-card::before,
.link-card::before,
.board-note-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,255,204,.42), rgba(0,255,0,.14), transparent);
}
.link-card strong,
.choice-card strong { color: #d8fff2; }
.choice-grid {
  position: relative;
}
.choice-card {
  border-style: dashed;
  border-color: rgba(0,255,153,.30);
  background:
    radial-gradient(circle at 0 0, rgba(0,255,153,.075), transparent 13rem),
    linear-gradient(145deg,#141d18,#101211);
}
.boards-panel[aria-labelledby="resources-title"] {
  position: relative;
  border-color: rgba(0,183,255,.34);
  background:
    linear-gradient(90deg, rgba(0,183,255,.055), transparent 36%),
    linear-gradient(145deg, var(--panel-bg), var(--panel-bg-deep));
}
.boards-panel[aria-labelledby="resources-title"]::before {
  content: "";
  position: absolute;
  inset: -22px clamp(18px,3vw,26px) auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,183,255,.45), rgba(0,255,204,.20), transparent);
}
.boards-panel[aria-labelledby="resources-title"] .link-card {
  border-color: rgba(0,183,255,.28);
  border-left: 3px solid #00b7ff;
  background:
    linear-gradient(145deg, rgba(0,183,255,.075), transparent 36%),
    linear-gradient(145deg,#14202a,#101317);
}
.boards-panel[aria-labelledby="resources-title"] .link-card::after {
  content: "Open page";
  display: inline-flex;
  align-self: flex-start;
  margin-top: 12px;
  padding: 5px 8px;
  border: 1px solid rgba(0,183,255,.28);
  border-radius: calc(var(--radius) - 2px);
  color: #d9f4ff;
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.board-note-card {
  border-color: #00ffcc32;
  border-left: 3px solid var(--cyan);
  background:
    linear-gradient(145deg, rgba(0,255,204,.075), transparent 36%),
    linear-gradient(145deg, #17211f, #0f1211);
  box-shadow: 0 8px 20px rgba(0,255,204,.045), inset 0 0 5px #000;
}
.board-note-card p { margin: 0; }
.workflow-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 12px;
}
.workflow-card {
  position: relative;
  min-height: 132px;
  overflow: hidden;
  padding: 16px;
  border-color: #00ffcc30;
  background:
    radial-gradient(circle at 0 0, rgba(0,255,204,.065), transparent 11rem),
    linear-gradient(145deg, #17211f, #101211);
  box-shadow: 0 8px 20px rgba(0,0,0,.16), inset 0 0 5px #000;
}
.workflow-card::before {
  content: "0" counter(workflow-step);
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  margin-bottom: 10px;
  padding: 5px 8px;
  border: 1px solid rgba(0,255,204,.24);
  border-radius: calc(var(--radius) - 2px);
  color: var(--cyan);
  background: rgba(0,0,0,.18);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
}
.workflow-grid { counter-reset: workflow-step; }
.workflow-card { counter-increment: workflow-step; }
.workflow-card strong {
  color: #d8fff2;
  font-size: .98rem;
  line-height: 1.25;
}
.workflow-card p {
  margin-top: 8px;
  color: #d8ddd8;
  font-size: .88rem;
  line-height: 1.5;
}
.board-meta div {
  position: relative;
  min-height: 142px;
  overflow: hidden;
  padding: 16px 15px 15px;
  border-color: #00ffcc32;
  border-left: 3px solid var(--cyan);
  background:
    radial-gradient(circle at 100% 0, rgba(0,255,204,.105), transparent 9rem),
    linear-gradient(145deg, rgba(0,255,204,.075), transparent 38%),
    linear-gradient(145deg, #17211f, #0f1211);
  box-shadow: 0 8px 20px rgba(0,255,204,.045), inset 0 0 5px #000;
}
.board-meta div::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, rgba(0,255,204,.48), rgba(0,255,0,.14), transparent);
}
.board-meta div::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(0,255,204,.22);
  border-radius: calc(var(--radius) - 2px);
  background:
    linear-gradient(90deg, transparent 47%, rgba(0,255,204,.45) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(0,255,204,.45) 47% 53%, transparent 53%),
    rgba(0,0,0,.20);
  opacity: .58;
}
.board-meta div:nth-child(2)::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(0,255,204,.52) 0 22%, transparent 24%),
    linear-gradient(90deg, transparent 47%, rgba(0,255,204,.40) 47% 53%, transparent 53%),
    rgba(0,0,0,.20);
}
.board-meta div:nth-child(3)::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,255,204,.42) 5px 7px),
    rgba(0,0,0,.20);
}
.board-meta div:nth-child(4)::after {
  background:
    linear-gradient(0deg, transparent 28%, rgba(0,255,204,.54) 28% 36%, transparent 36% 48%, rgba(0,255,204,.54) 48% 56%, transparent 56% 68%, rgba(0,255,204,.54) 68% 76%, transparent 76%),
    rgba(0,0,0,.20);
}
.board-meta strong {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 44px);
  min-height: 26px;
  margin-bottom: 11px;
  padding: 5px 8px;
  border: 1px solid rgba(0,255,204,.24);
  border-radius: calc(var(--radius) - 2px);
  background: rgba(0,0,0,.18);
  color: #d8fff2;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.1;
  text-transform: uppercase;
}
.board-meta span {
  max-width: 34rem;
  margin-top: 0;
  color: #d8ddd8;
  font-size: .9rem;
  line-height: 1.55;
}
.board-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.board-reference-column {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
}
.board-reference-column h3 {
  margin: 0;
  color: var(--green);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.board-reference-column .link-grid {
  grid-template-columns: 1fr;
  gap: 8px;
}
.board-reference-column .link-card {
  position: relative;
  min-height: 0;
  padding: 10px 11px;
  border-color: #273a34;
  border-left: 0;
  background:
    linear-gradient(145deg, rgba(0,255,204,.045), transparent 36%),
    linear-gradient(145deg, #121917, #0f1211);
  box-shadow: inset 0 0 5px #000;
}
.board-reference-column .link-card::after {
  content: "";
  display: none;
}
.board-reference-column .link-card strong {
  color: #eefcf7;
  font-size: .86rem;
  line-height: 1.25;
}
.board-reference-column .link-card p {
  margin-top: 5px;
  color: #b9c7c1;
  font-size: .76rem;
  line-height: 1.35;
}
.board-card-body .status-row {
  min-height: 28px;
}
.board-card h3,
.board-card p,
.link-card strong,
.link-card p {
  overflow-wrap: anywhere;
}
html[data-theme="light"] .hero-board-card-featured,
html[data-theme="light"] .board-card img {
  background:
    radial-gradient(circle at 50% 38%, rgba(0,135,111,.15), transparent 10rem),
    linear-gradient(145deg, #ffffff, #eef7f2);
}
html[data-theme="light"] .board-card {
  background:
    linear-gradient(145deg, rgba(0,135,111,.08), transparent 36%),
    linear-gradient(145deg, #ffffff, #eef7f2);
  box-shadow: 0 10px 24px rgba(0,70,50,.08);
}
html[data-theme="light"] .board-card h3,
html[data-theme="light"] .link-card strong,
html[data-theme="light"] .choice-card strong { color: #11251e; }
html[data-theme="light"] .board-card p { color: #2e4038; }
html[data-theme="light"] .board-note-card,
html[data-theme="light"] .board-reference-column .link-card,
html[data-theme="light"] .board-meta div,
html[data-theme="light"] .workflow-card {
  border-color:#cfe1d9;
  background:
    linear-gradient(145deg, rgba(0,135,111,.07), transparent 36%),
    linear-gradient(145deg,#fff,#f5faf7);
  box-shadow:0 8px 20px rgba(20,60,45,.08);
}
html[data-theme="light"] .choice-card {
  border-color: rgba(0,135,86,.24);
  background:
    radial-gradient(circle at 0 0, rgba(0,135,86,.08), transparent 13rem),
    linear-gradient(145deg,#fff,#f5faf7);
}
html[data-theme="light"] .boards-panel[aria-labelledby="resources-title"] {
  border-color: rgba(0,120,180,.22);
  background:
    linear-gradient(90deg, rgba(0,120,180,.055), transparent 36%),
    linear-gradient(145deg,#fff,#f5faf7);
}
html[data-theme="light"] .boards-panel[aria-labelledby="resources-title"] .link-card {
  border-color: rgba(0,120,180,.22);
  border-left-color: #1987b4;
  background:
    linear-gradient(145deg, rgba(0,120,180,.07), transparent 36%),
    linear-gradient(145deg,#fff,#eef7f2);
}
html[data-theme="light"] .boards-panel[aria-labelledby="resources-title"] .link-card::after {
  border-color: rgba(0,120,180,.22);
  color: #174255;
}
html[data-theme="light"] .board-note-card,
html[data-theme="light"] .board-meta div { border-left-color:#009f86; }
html[data-theme="light"] .workflow-card::before {
  border-color: rgba(0,135,111,.22);
  background: rgba(255,255,255,.55);
  color: #08725f;
}
html[data-theme="light"] .workflow-card p,
html[data-theme="light"] .board-reference-column .link-card p { color:#2e4038; }
html[data-theme="light"] .board-meta strong {
  border-color: rgba(0,135,111,.22);
  background: rgba(255,255,255,.55);
  color: #0d4f42;
}
html[data-theme="light"] .board-meta div::after {
  border-color: rgba(0,135,111,.20);
  background-color: rgba(255,255,255,.40);
}
@media (max-width: 620px) {
  .hero-board-card-featured { min-height: 280px; }
  .hero-board-card-featured img { height: 270px; }
  .board-card { grid-template-rows: 170px minmax(0, 1fr); }
  .board-card img { height: 170px; }
  .board-meta div { min-height: auto; }
}
@media (max-width: 860px) {
  .board-reference-grid { grid-template-columns: 1fr; }
  .board-reference-column .link-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
}

/* Light theme hardening for boards landing and dedicated pages */
html[data-theme="light"] body.boards-page .boards-hero,
html[data-theme="light"] body.boards-page .boards-panel,
html[data-theme="light"] body.boards-page .board-profile,
html[data-theme="light"] body.boards-page .board-open-source,
html[data-theme="light"] body.boards-page .board-faq details {
  border-color: #b9c9c0 !important;
  background:
    radial-gradient(circle at 0 0, rgba(0, 127, 122, .055), transparent 18rem),
    linear-gradient(145deg, #ffffff, #eef5f1) !important;
  box-shadow: 0 10px 26px rgba(31, 72, 53, .085), inset 0 0 4px rgba(28, 57, 43, .045) !important;
}

html[data-theme="light"] body.boards-page .boards-hero::before,
html[data-theme="light"] body.boards-page .board-profile::before {
  background: radial-gradient(circle at 72% 18%, rgba(0, 127, 122, .09), transparent 20rem) !important;
}

html[data-theme="light"] body.boards-page .hero-board-card,
html[data-theme="light"] body.boards-page .hero-board-card-featured {
  border-color: #b9c9c0 !important;
  background:
    radial-gradient(circle at 50% 36%, rgba(0, 127, 122, .13), transparent 16rem),
    linear-gradient(145deg, #ffffff, #edf5f1) !important;
  box-shadow: 0 12px 28px rgba(31, 72, 53, .10), inset 0 0 4px rgba(28, 57, 43, .05) !important;
}

html[data-theme="light"] body.boards-page .hero-board-card img,
html[data-theme="light"] body.boards-page .board-profile-image,
html[data-theme="light"] body.boards-page .board-card img {
  border-color: #b9c9c0 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(0, 127, 122, .12), transparent 11rem),
    linear-gradient(145deg, #ffffff, #eef7f2) !important;
  filter: drop-shadow(0 14px 22px rgba(31, 72, 53, .15)) !important;
  box-shadow: none !important;
}

html[data-theme="light"] body.boards-page .hero-board-card figcaption,
html[data-theme="light"] body.boards-page .board-profile-caption {
  border-color: #b9c9c0 !important;
  background: #f8fcf9 !important;
  color: #17463a !important;
  box-shadow: inset 0 0 4px rgba(28, 57, 43, .045) !important;
}

html[data-theme="light"] body.boards-page .status-pill,
html[data-theme="light"] body.boards-page .chip-list li,
html[data-theme="light"] body.boards-page .quick-links a {
  border-color: #c6d8cf !important;
  background: #f8fcf9 !important;
  color: #24493b !important;
  box-shadow: inset 0 0 4px rgba(28, 57, 43, .045) !important;
}

html[data-theme="light"] body.boards-page .status-pill.recommended {
  border-color: rgba(0, 127, 122, .30) !important;
  background: #e8f7f3 !important;
  color: #006d66 !important;
}

html[data-theme="light"] body.boards-page .status-pill.special {
  border-color: rgba(168, 116, 0, .30) !important;
  background: #fff7df !important;
  color: #72510a !important;
}

html[data-theme="light"] body.boards-page .board-card,
html[data-theme="light"] body.boards-page .choice-card,
html[data-theme="light"] body.boards-page .workflow-card,
html[data-theme="light"] body.boards-page .link-card,
html[data-theme="light"] body.boards-page .feature-card,
html[data-theme="light"] body.boards-page .board-note-card,
html[data-theme="light"] body.boards-page .board-meta div,
html[data-theme="light"] body.boards-page .board-reference-column .link-card {
  border-color: #c6d8cf !important;
  background:
    radial-gradient(circle at 0 0, rgba(0, 127, 122, .05), transparent 12rem),
    linear-gradient(145deg, #ffffff, #f4faf7) !important;
  box-shadow: 0 8px 20px rgba(31, 72, 53, .075), inset 0 0 4px rgba(28, 57, 43, .04) !important;
}

html[data-theme="light"] body.boards-page .board-card,
html[data-theme="light"] body.boards-page .board-note-card,
html[data-theme="light"] body.boards-page .board-meta div {
  border-left-color: #009f86 !important;
}

html[data-theme="light"] body.boards-page .boards-panel[aria-labelledby="resources-title"],
html[data-theme="light"] body.boards-page .boards-panel[aria-labelledby="resources-title"] .link-card {
  border-color: rgba(0, 120, 180, .24) !important;
  background:
    radial-gradient(circle at 0 0, rgba(0, 120, 180, .05), transparent 12rem),
    linear-gradient(145deg, #ffffff, #f3f9fb) !important;
}

html[data-theme="light"] body.boards-page .boards-panel[aria-labelledby="resources-title"] .link-card {
  border-left-color: #1987b4 !important;
}

html[data-theme="light"] body.boards-page .board-card:hover,
html[data-theme="light"] body.boards-page .board-card:focus-visible,
html[data-theme="light"] body.boards-page .feature-card:hover,
html[data-theme="light"] body.boards-page .feature-card:focus-visible,
html[data-theme="light"] body.boards-page .link-card:hover,
html[data-theme="light"] body.boards-page .link-card:focus-visible {
  border-color: rgba(0, 127, 122, .45) !important;
  box-shadow: 0 13px 28px rgba(31, 72, 53, .12), inset 0 0 4px rgba(28, 57, 43, .05) !important;
}

html[data-theme="light"] body.boards-page .board-card h3,
html[data-theme="light"] body.boards-page .board-card p,
html[data-theme="light"] body.boards-page .workflow-card strong,
html[data-theme="light"] body.boards-page .workflow-card p,
html[data-theme="light"] body.boards-page .board-note-card span,
html[data-theme="light"] body.boards-page .board-note-card p,
html[data-theme="light"] body.boards-page .choice-card strong,
html[data-theme="light"] body.boards-page .choice-card p,
html[data-theme="light"] body.boards-page .link-card strong,
html[data-theme="light"] body.boards-page .link-card p,
html[data-theme="light"] body.boards-page .board-meta strong,
html[data-theme="light"] body.boards-page .board-meta span,
html[data-theme="light"] body.boards-page .board-reference-column h3,
html[data-theme="light"] body.boards-page .board-reference-column .link-card strong,
html[data-theme="light"] body.boards-page .board-reference-column .link-card p {
  text-shadow: none !important;
}

html[data-theme="light"] body.boards-page .board-card h3,
html[data-theme="light"] body.boards-page .workflow-card strong,
html[data-theme="light"] body.boards-page .choice-card strong,
html[data-theme="light"] body.boards-page .link-card strong,
html[data-theme="light"] body.boards-page .board-reference-column .link-card strong {
  color: #11251e !important;
}

html[data-theme="light"] body.boards-page .board-card p,
html[data-theme="light"] body.boards-page .workflow-card p,
html[data-theme="light"] body.boards-page .choice-card p,
html[data-theme="light"] body.boards-page .link-card p,
html[data-theme="light"] body.boards-page .board-meta span,
html[data-theme="light"] body.boards-page .board-reference-column .link-card p {
  color: #355448 !important;
}

html[data-theme="light"] body.boards-page .workflow-card::before,
html[data-theme="light"] body.boards-page .board-meta strong,
html[data-theme="light"] body.boards-page .board-card::after,
html[data-theme="light"] body.boards-page .boards-panel[aria-labelledby="resources-title"] .link-card::after {
  border-color: rgba(0, 127, 122, .24) !important;
  background: #eef8f4 !important;
  color: #007f7a !important;
  box-shadow: inset 0 0 4px rgba(28, 57, 43, .035) !important;
}

html[data-theme="light"] body.boards-page .board-meta div::after,
html[data-theme="light"] body.boards-page .board-meta div:nth-child(2)::after,
html[data-theme="light"] body.boards-page .board-meta div:nth-child(3)::after,
html[data-theme="light"] body.boards-page .board-meta div:nth-child(4)::after {
  border-color: rgba(0, 127, 122, .20) !important;
  background:
    linear-gradient(90deg, transparent 47%, rgba(0, 127, 122, .32) 47% 53%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(0, 127, 122, .32) 47% 53%, transparent 53%),
    rgba(255, 255, 255, .72) !important;
  box-shadow: 0 6px 14px rgba(31, 72, 53, .08) !important;
}

html[data-theme="light"] body.boards-page .board-meta div:nth-child(4)::after {
  background:
    linear-gradient(0deg, transparent 28%, rgba(0, 127, 122, .34) 28% 36%, transparent 36% 48%, rgba(0, 127, 122, .34) 48% 56%, transparent 56% 68%, rgba(0, 127, 122, .34) 68% 76%, transparent 76%),
    rgba(255, 255, 255, .72) !important;
}

html[data-theme="light"] body.boards-page .board-faq summary::after {
  border-color: #c6d8cf !important;
  background: #f8fcf9 !important;
  color: #007f7a !important;
  box-shadow: inset 0 0 4px rgba(28, 57, 43, .04) !important;
}

html[data-theme="light"] body.boards-page .board-open-source {
  border-color: rgba(0, 127, 122, .22) !important;
  background:
    radial-gradient(circle at 14% 50%, rgba(0, 127, 122, .10), transparent 16rem),
    linear-gradient(145deg, #ffffff, #edf5f1) !important;
  box-shadow: 0 12px 28px rgba(31, 72, 53, .10), inset 0 0 4px rgba(28, 57, 43, .045) !important;
}

html[data-theme="light"] body.boards-page .identity-logo {
  border-color: #c6d8cf !important;
  background: linear-gradient(145deg, #ffffff, #eef7f2) !important;
  filter: drop-shadow(0 10px 18px rgba(31, 72, 53, .13)) !important;
}

html[data-theme="light"] body.boards-page .identity-link-list a {
  border-color: #c6d8cf !important;
  background: #f8fcf9 !important;
  color: #17463a !important;
  box-shadow: inset 0 0 4px rgba(28, 57, 43, .045) !important;
}


/* Keep the decorative green halo attached to the top navigation on wide screens. */
.boards-page .page-hero-top,
.modules-page .page-hero-top {
  position: relative;
  isolation: isolate;
}

.boards-page .page-hero-top > *,
.modules-page .page-hero-top > * {
  position: relative;
  z-index: 1;
}

.boards-page .page-hero-top::after,
.modules-page .page-hero-top::after {
  content: "";
  position: absolute;
  top: -108px;
  right: clamp(-112px, -8vw, -36px);
  z-index: 0;
  width: min(58vw, 540px);
  height: 255px;
  border-radius: 999px;
  background: radial-gradient(ellipse at 72% 34%, rgba(0, 255, 153, .12), rgba(0, 255, 204, .045) 44%, transparent 76%);
  filter: blur(42px);
  opacity: .72;
  pointer-events: none;
}

html[data-theme="light"] .boards-page .page-hero-top::after,
html[data-theme="light"] .modules-page .page-hero-top::after {
  background: radial-gradient(ellipse at 72% 34%, rgba(0, 150, 95, .11), rgba(0, 127, 122, .04) 44%, transparent 76%);
  opacity: .58;
}

@media (min-width: 1440px) {
  .boards-page .page-hero-top::after,
  .modules-page .page-hero-top::after {
    right: -72px;
  }
}

@media (max-width: 720px) {
  .boards-page .page-hero-top::after,
  .modules-page .page-hero-top::after {
    top: -80px;
    right: -64px;
    width: 320px;
    height: 210px;
  }
}