.plugins-page { --accent: #c1f77a; }
.plugins-page .product-hero { grid-template-columns: .9fr 1.1fr; gap: 35px; }
.plugin-hero-art { margin: 0; position: relative; min-width: 0; border: 1px solid #a1dce827; border-radius: 20px; background: radial-gradient(ellipse at 45% 48%, #19302b, #0a1116 75%); overflow: hidden; }
.plugin-hero-art > img { width: 100%; height: auto; display: block; }
.plugin-hero-art figcaption { padding: 16px 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.plugin-layer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.plugin-layer-grid article { padding: 25px; border: 1px solid var(--line); border-radius: 14px; background: #0d1619; min-width: 0; }
.plugin-layer-grid svg { display: block; width: 100%; height: auto; margin-bottom: 20px; fill: none; stroke-width: 1.5; }
.diagram-grid { stroke: #a1dce82b; }
.diagram-cyan { stroke: var(--cyan); }
.diagram-lime { stroke: var(--accent); }
.plugin-layer-grid .mono { color: #97b6be; font: 11px/1.6 Consolas, monospace; }
.plugin-layer-grid h3 { font-size: 22px; margin-top: 14px; }
.plugin-layer-grid p { color: var(--muted); font-size: 14px; margin-top: 12px; }
.plugin-layer-tools { display: block; color: var(--cyan); font-size: 12px; margin-top: 20px; }
.plugin-layer-note, .plugin-source-note { color: #90a6ae; font-size: 13px; line-height: 1.8; margin-top: 25px; }
.plugin-ecosystem { padding-top: 65px; }
.plugin-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-block: 28px; }
.plugin-filters button { border: 1px solid #a1dce838; border-radius: 24px; padding: 9px 18px; background: #0c1418; color: #b5c7cd; font-size: 13px; min-height: 42px; }
.plugin-filters button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #101c12; }
.plugin-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.plugin-tool { padding: 25px; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(135deg, #122024, #0d1519); }
.plugin-tool[hidden] { display: none; }
.plugin-tool-kind { color: #95b6bc; font: 10px/1.7 Consolas, monospace; letter-spacing: .6px; }
.plugin-tool h3 { font-size: 24px; letter-spacing: -.6px; margin-top: 12px; overflow-wrap: anywhere; }
.plugin-tool p { font-size: 14px; color: var(--muted); margin-top: 12px; }
.plugin-tool > a, .plugin-source-links { margin-top: auto; padding-top: 20px; font-size: 12px; color: var(--cyan); }
.plugin-tool a:hover { color: var(--accent); }
.plugin-source-links { display: flex; flex-wrap: wrap; gap: 18px; }
.plugin-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 36px; }
.plugin-use-grid article { min-width: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #0e171a; }
.plugin-use-grid img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.plugin-use-grid article > div { padding: 24px; }
.plugin-use-grid h3 { font-size: 22px; }
.plugin-use-grid p { margin-top: 14px; font-size: 14px; color: var(--muted); }
.plugin-contract { margin-top: 28px; padding: 28px; border: 1px solid var(--line); border-radius: 14px; }
.plugin-contract > p { color: var(--muted); font-size: 14px; margin-block: 14px 18px; max-width: 900px; }
.plugin-contract details { border-top: 1px solid var(--line); margin-top: 24px; }
.plugin-contract summary { display: flex; justify-content: space-between; gap: 20px; cursor: pointer; padding-block: 17px; font-size: 14px; list-style: none; }
.plugin-contract details p { color: var(--muted); font-size: 14px; max-width: 950px; }
@media (max-width: 1100px) {
  .plugin-layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plugin-layer-grid svg { max-width: 250px; margin-inline: auto; }
  .plugin-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .plugins-page .product-hero { grid-template-columns: 1fr; }
  .plugin-hero-art { width: 100%; max-width: 720px; margin-inline: auto; }
  .plugin-use-grid { grid-template-columns: 1fr; }
  .plugin-use-grid article { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .plugin-use-grid img { height: 100%; }
}
@media (max-width: 600px) {
  .plugin-layer-grid, .plugin-tools-grid { grid-template-columns: 1fr; }
  .plugin-layer-grid { gap: 14px; }
  .plugin-layer-grid article, .plugin-tool, .plugin-contract { padding: 22px; }
  .plugin-layer-grid svg { max-width: 230px; }
  .plugin-use-grid article { display: block; }
  .plugin-filters button { padding-inline: 13px; }
  .plugin-hero-art figcaption { padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) { .plugins-page { scroll-behavior: auto; } }