/* Shared notebook shell; older article-specific illustrations retain their styles. */
:root { --color-bg: #f8f9f6; --color-text: #202d2b; --color-text-secondary: #586761; --color-text-muted: #68776f; --color-border: #dce3dc; --color-accent: #17664c; --color-accent-light: #247956; --color-accent-soft: #eaf1e9; }
body::before { background: radial-gradient(ellipse at 85% 0, #edf2e9 0, transparent 48%), #f8f9f6; }
body::after { display: none; }
h1, h2, h3 { text-wrap: pretty; }
a, button, input, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #288362; outline-offset: 5px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 200; padding: .7rem 1rem; background: white; border: 2px solid var(--color-accent); }
.skip-link:focus { top: .5rem; }
.site-header { background: rgba(248,249,246,.94); border-color: var(--color-border); }
.header-inner, .footer-inner { max-width: 1180px; }
.header-inner { min-height: 76px; }
.logo-text { font-size: 1.25rem; }
.site-nav { gap: 1.7rem; align-items: center; }
.nav-link { font-size: .83rem; }
.nav-link[aria-current] { color: var(--color-accent); }
.nav-link[aria-current]::after { width: 100%; }
.site-main { padding: 3.5rem 1.5rem 4rem; }
.eyebrow { font: 500 .7rem/1.6 var(--font-mono); letter-spacing: .13em; color: var(--color-accent); margin-bottom: 1.2rem; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2e8661; margin-right: .6rem; box-shadow: 0 0 0 4px #e3eddf; }
.notebook-home { max-width: 1120px; }
.home-intro { display: grid; grid-template-columns: 1.35fr 1fr; gap: 5rem; align-items: center; padding: 2rem 0 4.5rem; }
.intro-copy h1 { font-size: clamp(2.25rem, 4.3vw, 3.6rem); font-weight: 600; line-height: 1.45; letter-spacing: -.045em; margin-bottom: 1.25rem; }
.intro-copy h1 > span { color: var(--color-accent); }
.intro-description { color: var(--color-text-secondary); font-size: .96rem; max-width: 32rem; line-height: 2; }
.intro-actions { display: flex; gap: 1.6rem; align-items: center; margin: 1.8rem 0 2rem; font-size: .85rem; }
.button-primary { display: inline-flex; gap: 2rem; align-items: center; background: var(--color-accent); color: white; border-radius: 6px; padding: .75rem 1.2rem; }
.button-primary:hover { background: #114a38; color: white; }
.quiet-link { color: var(--color-text-secondary); }
.interest-line { display: flex; gap: .6rem 1.2rem; flex-wrap: wrap; font: .66rem/1.8 var(--font-mono); color: var(--color-text-secondary); }
.intro-schematic { padding: 1.5rem; background: #eef2eb; border: 1px solid #dbe2d5; border-radius: 12px; transform: rotate(-2deg); }
.schematic-caption { display: flex; justify-content: space-between; font: .6rem/1.6 var(--font-mono); color: #687769; margin-bottom: 1.5rem; }
.stack-layer { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0 .75rem; padding: .8rem 1.1rem; border: 1px solid #dce3d7; background: #fafbf8; margin-top: .55rem; border-radius: 5px; }
.stack-layer > span { grid-row: span 2; font: .62rem/2 var(--font-mono); color: #778679; }
.stack-layer strong { font: 500 1rem/1.6 var(--font-mono); }
.stack-layer small { font: .64rem/1.8 var(--font-mono); color: #687769; }
.stack-layer--active { background: #205b45; border-color: #205b45; color: #f7faf3; }
.stack-layer--active span, .stack-layer--active small { color: #d0e0ca; }
.schematic-foot { font-size: .66rem; color: #586e58; margin-top: 1.5rem; }
.schematic-foot .status-dot { box-shadow: none; width: 5px; height: 5px; }
.featured-note { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2rem; align-items: center; padding: 2.5rem 3rem; border: 1px solid #d9e3d4; border-radius: 12px; background: #eaf0e5; overflow: hidden; }
.featured-copy .eyebrow { font-size: .66rem; }
.featured-copy h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.55; margin-bottom: 1rem; }
.featured-copy h2 a { color: var(--color-text); }
.featured-copy p:not(.eyebrow) { font-size: .85rem; color: var(--color-text-secondary); max-width: 30rem; }
.feature-link { display: inline-flex; gap: 3rem; font-size: .85rem; font-weight: 500; margin-top: .4rem; }
.feature-circuit { display: flex; justify-content: center; align-items: center; gap: .9rem; min-height: 210px; background-image: radial-gradient(#becdb6 .8px, transparent .8px); background-size: 14px 14px; color: var(--color-accent); }
.circuit-source { display: flex; flex-direction: column; gap: .2rem; background: #f5f8ef; padding: .6rem .75rem; border: 1px solid #cbd8c3; border-radius: 5px; }
.circuit-source span { font: .65rem/1.6 var(--font-mono); color: #5e7158; }
.circuit-source strong { font: 500 .9rem/1.6 var(--font-mono); }
.chip-package { position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; min-width: 125px; min-height: 142px; border: 8px solid #355d45; outline: 1px solid #244a35; outline-offset: 5px; background: #1c3d2f; color: #e4e9d0; box-shadow: 10px 12px 0 #d3dec9; }
.chip-mark { font: .55rem/1.6 var(--font-mono); color: #b8cbb0; }
.chip-package > strong { font: 500 1.3rem/1.6 var(--font-mono); letter-spacing: .09em; }
.chip-grid { color: #abc78c; font: 1.2rem/1 var(--font-mono); letter-spacing: .15em; }
.library { margin-top: 4.5rem; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.6rem; gap: 1rem; }
.section-heading .eyebrow { margin-bottom: .4rem; font-size: .65rem; }
.section-heading h2 { margin: 0; font-size: 1.65rem; }
.section-heading > p { font-size: .8rem; color: var(--color-text-secondary); margin: 0; }
.library-tools { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.filter-buttons { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-buttons button { font: inherit; font-size: .75rem; border: 0; border-radius: 5px; padding: .4rem .8rem; background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.filter-buttons button[aria-pressed="true"] { background: #205b45; color: white; }
.filter-buttons button:hover { box-shadow: inset 0 0 0 1px #a7ba9f; }
.search-field { display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--color-border); border-radius: 5px; padding: .25rem .7rem; }
.search-field input { min-width: 0; width: 10rem; border: 0; background: transparent; color: var(--color-text); font: inherit; font-size: .75rem; padding: .2rem; }
.result-count { color: var(--color-text-muted); font-size: .68rem; margin: 1rem 0; }
.note-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.note-card { display: flex; flex-direction: column; min-width: 0; padding: 1.4rem; background: #fffefa; border: 1px solid var(--color-border); border-radius: 8px; transition: border-color .2s, box-shadow .2s; }
.note-card:hover { border-color: #8ca584; box-shadow: 0 5px 18px #243c2510; }
.note-meta { display: flex; justify-content: space-between; gap: .6rem; font-size: .62rem; color: var(--color-text-muted); margin-bottom: 1.1rem; }
.note-meta > span:first-child { color: var(--color-accent); }
.note-card h3 { font: 600 1.05rem/1.7 var(--font-sans); margin-bottom: .75rem; }
.note-card h3 a { color: var(--color-text); }
.note-card h3 a:hover { color: var(--color-accent); }
.note-card p { font-size: .78rem; line-height: 1.95; color: var(--color-text-secondary); margin-bottom: 1.6rem; }
.note-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding-top: .7rem; border-top: 1px solid #e8ece4; }
.note-number { color: var(--color-text-muted); font: .6rem/1.6 var(--font-mono); }
.note-bottom a { display: grid; place-items: center; min-width: 30px; min-height: 30px; border-radius: 50%; background: #edf2e8; }
.empty-state { padding: 3rem 1rem; text-align: center; border: 1px dashed var(--color-border); color: var(--color-text-secondary); }
.elsewhere { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; padding: 2.5rem 0; margin-top: 3.5rem; border-top: 1px solid var(--color-border); }
.elsewhere .eyebrow { font-size: .62rem; margin-bottom: .7rem; }
.elsewhere h2 { font-size: 1.5rem; }
.elsewhere p:not(.eyebrow) { font-size: .8rem; color: var(--color-text-secondary); }
.project-links a { display: grid; grid-template-columns: 6rem 1fr auto; gap: 1rem; align-items: center; padding: .7rem 0; font: 500 .8rem/1.6 var(--font-mono); border-bottom: 1px solid var(--color-border); }
.project-links small { color: var(--color-text-secondary); font-weight: 400; font-size: .7rem; }
.editorial-note { font-size: .7rem; color: var(--color-text-muted); }
.site-footer { background: transparent; }
/* Long-form guide */
.reading-layout { max-width: 1200px; margin: auto; display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 3rem; align-items: start; }
.reading-sidebar { position: sticky; top: 105px; max-height: calc(100vh - 125px); overflow-y: auto; font-size: .75rem; }
.back-link { display: inline-block; color: var(--color-text-secondary); margin-bottom: 1.4rem; }
#reading-toc { border-left: 1px solid var(--color-border); padding-left: 1rem; margin-bottom: 2rem; }
#reading-toc .eyebrow { display: block; margin-bottom: .8rem; font-size: .65rem; }
#reading-toc a { display: block; color: var(--color-text-secondary); padding: .45rem 0; line-height: 1.6; }
#reading-toc a[aria-current], #reading-toc a:hover { color: var(--color-accent); font-weight: 600; }
.fpga-article { min-width: 0; width: 100%; font-size: .95rem; line-height: 2; }
.guide-hero { padding: 2.5rem; background: #eaf0e5; border: 1px solid #d6e0d0; border-radius: 12px; margin-bottom: 1.5rem; }
.guide-hero h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.4; margin-bottom: 1rem; }
.guide-hero > p:not(.eyebrow) { color: var(--color-text-secondary); font-size: .9rem; }
.guide-meta { display: flex; gap: .7rem 1.5rem; flex-wrap: wrap; font-size: .68rem; color: var(--color-text-secondary); }
.fpga-article h2 { font-size: 1.5rem; line-height: 1.6; margin-top: 3.5rem; padding-bottom: .8rem; }
.fpga-article h3 { font-family: var(--font-sans); font-size: 1.1rem; line-height: 1.7; }
.fpga-article a:not(.button-primary) { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #b1c7a7; }
.fpga-article code { background: #eaf0e5; color: #31543c; }
.fpga-article pre { background: #202c27; border-color: #34443a; font-size: .82rem; }
.fpga-article pre code { color: #e4eddd; background: transparent; }
.fpga-article th { background: #eaf0e5; }
.fpga-article td { background: #fffefa; }
.fpga-article blockquote { background: #edf2e8; border-color: #789d69; }
.guide-note { padding: 1rem 1.2rem; border: 1px solid var(--color-border); border-left: 3px solid #789d69; border-radius: 5px; font-size: .83rem; color: var(--color-text-secondary); background: #fffefa; margin: 1.5rem 0; }
.flow-explorer { padding: 1.4rem; background: #eff3ea; border: 1px solid #d9e3d2; border-radius: 10px; margin: 1.8rem 0; }
.flow-explorer > p { font-size: .75rem; color: var(--color-text-secondary); }
.pipeline-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .7rem; align-items: start; }
.pipeline-stage { background: #fffefa; border: 1px solid #d9e3d2; border-radius: 6px; padding: .8rem; font-size: .75rem; }
.pipeline-stage summary { cursor: pointer; color: #31543c; font-weight: 600; }
.pipeline-stage summary small { display: block; margin-top: .4rem; padding-left: .8rem; font: .6rem/1.6 var(--font-mono); font-weight: 400; color: var(--color-text-muted); }
.pipeline-stage p { border-top: 1px solid var(--color-border); padding-top: .7rem; margin: .7rem 0 0; line-height: 1.8; }
.pipeline-stage[open] { border-color: #7e9c6c; }
.fabric-figure { padding: 1.4rem; border: 1px solid #c9d7c1; border-radius: 10px; background: #edf2e8; margin: 1.8rem 0; }
.fabric-boundary { border: 2px solid #547249; border-radius: 8px; padding: 1.1rem; background: #f8faf5; }
.fabric-title { display: flex; justify-content: space-between; gap: 1rem; align-items: center; font: 500 .8rem/1.6 var(--font-mono); color: #31543c; margin-bottom: .8rem; }
.fabric-title small { font: .65rem/1.6 var(--font-sans); color: var(--color-text-secondary); }
.fabric-io, .fabric-clock, .fabric-config { padding: .5rem; text-align: center; background: #e2eadb; border: 1px solid #c4d4b8; border-radius: 4px; font-size: .75rem; }
.fabric-grid { display: grid; grid-template-columns: 1fr .8fr 1fr .8fr 1fr; gap: .5rem; padding: 1rem 0; background: repeating-linear-gradient(0deg, transparent 0 15px, #c9d5c0 16px 17px, transparent 18px 33px); }
.fabric-column { display: flex; flex-direction: column; gap: .5rem; }
.fabric-column span { padding: .7rem .2rem; background: #fffefa; border: 1px solid #b5c6aa; border-radius: 4px; text-align: center; font: .7rem/1.6 var(--font-mono); }
.fabric-column--ram span { background: #ede8d8; border-color: #d1c8ad; }
.fabric-column--dsp span { background: #dce8e7; border-color: #b7cdcb; }
.fabric-clock { margin-bottom: .6rem; background: #e5e5ee; border-color: #c7c7d8; }
.fabric-config { background: #e5ebe1; }
.fabric-board { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; padding-top: 1rem; font-size: .7rem; color: var(--color-text-secondary); }
.fabric-figure figcaption { font-size: .72rem; color: var(--color-text-secondary); margin-top: .8rem; }
.program-paths { display: grid; gap: .8rem; margin: 1.8rem 0; }
.program-path { padding: 1rem 1.2rem; background: #fffefa; border: 1px solid var(--color-border); border-radius: 7px; }
.program-path strong { display: block; color: var(--color-accent); font-size: .85rem; }
.program-path p { font-size: .82rem; margin: .5rem 0; }
.program-path small { color: var(--color-text-secondary); font-size: .73rem; }
.guide-end { margin: 2rem 0; padding: 1.5rem; background: #eaf0e5; border-radius: 8px; }
@media (min-width: 1500px) { .home-intro { padding-top: 3rem; padding-bottom: 5.5rem; } }
@media (max-width: 1000px) {
  .home-intro { gap: 2.5rem; }
  .featured-note { padding: 2rem; gap: 1rem; }
  .note-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .reading-layout { grid-template-columns: 170px minmax(0,1fr); gap: 1.5rem; }
  .guide-hero { padding: 1.75rem; }
  .feature-circuit { gap: .5rem; }
  .chip-package { min-width: 100px; }
}
@media (max-width: 760px) {
  .site-main { padding: 1.5rem 1.1rem 3rem; }
  .header-inner { flex-wrap: wrap; gap: .75rem; padding: .8rem 1.1rem; min-height: 65px; }
  .site-nav { gap: 1rem; }
  .nav-link { font-size: .75rem; }
  .home-intro { grid-template-columns: 1fr; padding: 1rem 0 2.5rem; gap: 2rem; }
  .intro-schematic { transform: none; }
  .stack-layer { grid-template-columns: 1.5rem 1fr auto; align-items: center; }
  .stack-layer > span { grid-row: auto; }
  .stack-layer small { font-size: .6rem; }
  .featured-note { grid-template-columns: 1fr; padding: 1.5rem; }
  .feature-circuit { min-height: 180px; gap: 1.2rem; }
  .library { margin-top: 3rem; }
  .library-tools { flex-wrap: wrap; }
  .search-field { flex: 1; }
  .search-field input { width: 100%; }
  .section-heading { align-items: start; }
  .section-heading > p { max-width: 8rem; font-size: .72rem; }
  .elsewhere { grid-template-columns: 1fr; gap: 1rem; margin-top: 2.5rem; }
  .reading-layout { display: block; }
  .reading-sidebar { position: static; max-height: none; }
  #reading-toc { display: none; }
  .reading-sidebar > .back-link:last-child { display: none; }
  .fpga-article { font-size: .9rem; }
  .pipeline-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .header-inner { justify-content: center; }
  .site-logo { margin-right: auto; }
  .site-nav { gap: .7rem; }
  .logo-text { font-size: 1rem; }
  .nav-link { font-size: .69rem; }
  .note-grid { grid-template-columns: 1fr; }
  .intro-copy h1 { font-size: 2.2rem; }
  .intro-description { font-size: .85rem; }
  .stack-layer { padding: .6rem; gap: .4rem; }
  .stack-layer strong { font-size: .8rem; }
  .stack-layer small { font-size: .55rem; }
  .feature-circuit { gap: .6rem; }
  .circuit-source { padding: .4rem; }
  .chip-package { min-width: 100px; min-height: 130px; }
  .filter-buttons button { font-size: .69rem; padding: .4rem .6rem; }
  .guide-hero { padding: 1.25rem; }
  .guide-hero h1 { font-size: 2rem; }
  .fabric-figure, .flow-explorer { padding: .8rem; }
  .fabric-boundary { padding: .7rem; }
  .fabric-title { align-items: start; flex-direction: column; gap: .2rem; }
  .fabric-grid { gap: .25rem; }
  .fabric-column span { font-size: .58rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .site-header, .site-footer, .reading-sidebar, .skip-link { display: none; }
  .reading-layout { display: block; }
  .site-main { padding: 0; }
  .fpga-article pre { white-space: pre-wrap; }
}
.toc-disclosure > summary { color: var(--color-accent); font-size: .75rem; font-weight: 500; cursor: pointer; margin-bottom: 1rem; }
.fpga-article .highlight .k, .fpga-article .highlight .kd, .fpga-article .highlight .kn { color: #c4dca1; }
.fpga-article .highlight .c, .fpga-article .highlight .c1 { color: #a4b5a8; }
.fpga-article .highlight .s, .fpga-article .highlight .s2 { color: #e1c48c; }
.fpga-article .highlight .mi, .fpga-article .highlight .mf { color: #a6d6d8; }
@media (max-width: 760px) {
  .toc-disclosure { margin-bottom: 1.5rem; padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: 7px; background: #fffefa; }
  .toc-disclosure > summary { margin-bottom: 0; }
  #reading-toc { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .2rem .7rem; border: 0; padding: .8rem 0 0; margin: 0; }
}
/* FPGA / SoC boundaries and interactive PS–PL connections. */
.device-compare { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.8rem 0; }
.device-card { min-width: 0; padding: 1.1rem; border: 1px solid var(--color-border); border-radius: 9px; background: #fffefa; }
.device-card .eyebrow { font-size: .63rem; margin-bottom: .8rem; }
.device-outline { border: 1px solid #a7b69f; border-radius: 6px; padding: 1rem; }
.device-outline > strong { display: block; font-size: .85rem; margin-bottom: .75rem; }
.device-outline > p, .device-card .device-board-label { color: var(--color-text-secondary); font-size: .73rem; margin: .8rem 0 0; }
.device-region { padding: .8rem; border: 1px solid; border-radius: 5px; font-size: .82rem; font-weight: 600; }
.device-region small { display: block; margin-top: .25rem; font-size: .7rem; font-weight: 400; }
.device-region--ps { background: #e9f0fa; border-color: #c0d0e7; color: #2c4b73; }
.device-region--pl { background: #eaf1e3; border-color: #c0d2b2; color: #39582c; }
.device-bridge { padding: .5rem 0; font-size: .68rem; text-align: center; color: var(--color-text-secondary); }
.soc-explorer { margin: 2rem 0; border: 1px solid #cad8c1; border-radius: 10px; background: #f4f7f0; padding: 1.2rem; }
.soc-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.soc-heading .eyebrow { display: block; margin-bottom: .25rem; font-size: .63rem; }
.soc-heading strong { font-size: 1rem; }
.soc-legend { display: flex; align-items: center; gap: .35rem; font-size: .62rem; color: var(--color-text-secondary); }
.soc-legend i { width: .65rem; height: .65rem; border-radius: 2px; }
.legend-ps { background: #8ba6cb; }
.legend-pl { background: #93b579; }
.soc-controls { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.soc-controls button { border: 1px solid #c8d4c0; border-radius: 5px; background: #fffefa; color: #40543a; font: 500 .72rem/1.6 var(--font-sans); padding: .5rem .65rem; cursor: pointer; }
.soc-controls button[aria-pressed="true"] { background: #205b45; color: white; border-color: #205b45; }
.soc-die { border: 2px solid #8fa17f; border-radius: 8px; padding: .9rem; background: #fffefa; }
.soc-boundary-label { font-size: .66rem; color: var(--color-text-secondary); padding-bottom: .8rem; }
.soc-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(125px,.7fr) minmax(0,1fr); gap: .7rem; }
.soc-domain { min-width: 0; border: 1px solid; border-radius: 6px; padding: .65rem; display: flex; flex-direction: column; gap: .6rem; }
.soc-domain--ps { background: #edf3fa; border-color: #bdcfe6; }
.soc-domain--pl { background: #edf4e6; border-color: #c1d5b0; }
.soc-domain h4 { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; font: 600 1rem/1.7 var(--font-mono); margin: 0; }
.soc-domain--ps h4 { color: #2d5481; }
.soc-domain--pl h4 { color: #3b5b2e; }
.soc-domain h4 small { font: 400 .65rem/1.6 var(--font-sans); }
.soc-node { display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: .65rem; border: 1px solid #d4dfd0; border-radius: 5px; background: #fffefa; min-width: 0; }
.soc-node strong { font-size: .74rem; line-height: 1.7; }
.soc-node small { font-size: .64rem; line-height: 1.75; color: #52624d; }
.soc-lanes { display: flex; flex-direction: column; justify-content: space-around; gap: .6rem; min-width: 0; }
.soc-lane-heading { font-size: .65rem; align-self: center; text-align: center; color: var(--color-text-secondary); }
.soc-lane { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; padding: .4rem .1rem; border-block: 1px solid #d3dec9; background: #f3f6ef; line-height: 1.6; }
.soc-lane b { font: 600 .75rem/1.6 var(--font-mono); color: #355629; }
.soc-lane span { font-size: .65rem; }
.soc-lane small { color: var(--color-text-secondary); font-size: .6rem; }
.soc-lane::before, .soc-lane::after { content: ''; position: absolute; top: 50%; width: .7rem; border-top: 2px solid #aabd9d; }
.soc-lane::before { right: 100%; }
.soc-lane::after { left: 100%; }
.soc-pin-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; margin-top: 1rem; font-size: .65rem; text-align: center; color: var(--color-text-secondary); }
.soc-pin-row span { border-radius: 3px; padding: .25rem; }
.soc-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; margin: 1rem 0; }
.soc-board-title { grid-column: 1 / -1; color: var(--color-text-secondary); font-size: .65rem; }
.soc-external { padding: .7rem; border: 1px dashed #a4b795; border-radius: 5px; background: #fffefa; }
.soc-external strong { display: block; font-size: .73rem; }
.soc-external small { display: block; font-size: .65rem; color: var(--color-text-secondary); }
.soc-explorer .is-route-active { border-color: #24734f; background: #e6f0df; box-shadow: inset 0 0 0 1px #24734f; }
.soc-explorer .soc-lane.is-route-active::before, .soc-explorer .soc-lane.is-route-active::after { border-color: #24734f; border-top-width: 3px; }
.soc-explanation { min-height: 9rem; padding: 1rem; background: #e6eddf; border-left: 3px solid #6c9558; border-radius: 5px; }
.soc-explanation strong { font-size: .8rem; }
.soc-explanation p { font-size: .78rem; margin: .5rem 0 0; line-height: 1.9; }
.soc-explorer figcaption, .pl-datapath figcaption { margin-top: 1rem; color: var(--color-text-secondary); font-size: .72rem; }
@supports (grid-template-rows: subgrid) {
  .soc-columns { grid-template-rows: auto repeat(6,auto); row-gap: .6rem; }
  .soc-domain, .soc-lanes { display: grid; grid-row: 1 / span 7; grid-template-rows: subgrid; }
  .soc-domain--ps { grid-column: 1; }
  .soc-lanes { grid-column: 2; }
  .soc-domain--pl { grid-column: 3; }
}
.pl-datapath { margin: 1.8rem 0; padding: 1.2rem; border: 1px solid #c8d5bf; border-radius: 8px; background: #f0f4eb; }
.pl-path-title { display: flex; flex-wrap: wrap; gap: .5rem 1rem; justify-content: space-between; margin-bottom: 1rem; }
.pl-path-title strong { font-size: .87rem; }
.pl-path-title > span { font-size: .68rem; color: var(--color-text-secondary); }
.pl-path-stages { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: .35rem; align-items: center; }
.pl-path-stages > div { min-width: 0; padding: .75rem .35rem; text-align: center; border: 1px solid #c3d2b8; border-radius: 5px; background: #fffefa; }
.pl-path-stages b { display: block; font-size: .74rem; }
.pl-path-stages small { display: block; margin-top: .35rem; font-size: .62rem; line-height: 1.7; color: var(--color-text-secondary); }
.pl-path-stages > span { color: #4a713b; }
.pl-clock-path, .pl-config-path { display: flex; flex-direction: column; padding: .7rem .9rem; margin-top: .8rem; font-size: .73rem; border-radius: 5px; border: 1px solid #c6d4e4; background: #eaf0f8; }
.pl-config-path { background: #f5eee0; border-color: #dfd2b3; }
.pl-clock-path > span, .pl-config-path > span { font-size: .68rem; color: var(--color-text-secondary); }
.soc-build-paths { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
.soc-build-path { padding: 1.2rem; border: 1px solid #c1d0e1; background: #ecf2fa; border-radius: 6px; }
.soc-build-path--pl { border-color: #c7d5be; background: #edf3e7; }
.soc-build-path strong { font-size: .85rem; }
.soc-build-path p { font-size: .8rem; margin: .7rem 0; }
.soc-build-path small { display: block; font-size: .72rem; color: var(--color-text-secondary); }
@media (max-width: 1000px) and (min-width: 761px) {
  .soc-columns { grid-template-columns: minmax(0,1fr) 115px minmax(0,1fr); gap: .4rem; }
  .soc-domain, .soc-node { padding: .45rem; }
  .soc-lane::before, .soc-lane::after { width: .4rem; }
}
@media (max-width: 600px) {
  .device-compare, .soc-build-paths { grid-template-columns: 1fr; }
  .soc-explorer, .pl-datapath { padding: .85rem; }
  .soc-die { padding: .6rem; }
  .soc-columns { display: flex; flex-direction: column; gap: .8rem; }
  .soc-domain { display: flex; flex-direction: column; }
  .soc-lanes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
  .soc-lane-heading { grid-column: 1 / -1; }
  .soc-lane::before, .soc-lane::after { display: none; }
  .soc-lane { padding: .5rem .3rem; border: 1px solid #d3dec9; border-radius: 4px; }
  .soc-node strong { font-size: .8rem; }
  .soc-node small { font-size: .72rem; }
  .soc-pin-row { grid-template-columns: 1fr; }
  .soc-board { grid-template-columns: 1fr; }
  .soc-external { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: center; }
  .soc-explanation { min-height: 0; }
  .pl-path-stages { grid-template-columns: 1fr; text-align: center; gap: .25rem; }
  .pl-path-stages > span { transform: rotate(90deg); line-height: 1; }
  .pl-path-stages > div { padding: .55rem; }
  .pl-path-stages small { margin-top: .1rem; }
}
@media print {
  .soc-controls { display: none !important; }
  .soc-explorer .is-route-active { box-shadow: none; }
}