/* GENERATED by bin/build_ram_diagram_inline.py from static/ddr5-sodimm-anatomy/. Do not edit. */
#ram-diagram{--bg:#e6eae7;
  --stage:#dde3df;
  --stage-edge:#c8d1cc;
  --panel:#f3f5f2;
  --raise:#fdfefc;
  --ink:#141e1a;
  --ink-2:#4a5852;
  --ink-3:#74827b;
  --line:#c8d0cb;
  --line-2:#aeb9b3;
  --mask:#1a6a4a;
  --mask-ink:#f5fbf8;
  --gold:#85610c;
  --mat-minor:#c7d0ca;
  --mat-major:#a5b2ab;
  --shadow:.22;

  --s-vin:#ffd23f; --s-vpp:#ff5fb8; --s-vdd:#ff8a2a; --s-vddq:#ff5a4f;
  --s-sb:#a98bff; --s-ca:#3fd0ff; --s-dq:#f2fbff;
  --font-display:"Saira Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",sans-serif;
  --font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;;--bg:#0b110f; --stage:#111916; --stage-edge:#080d0b; --panel:#121a17; --raise:#1a2420;
  --ink:#e7ede9; --ink-2:#a2b0a9; --ink-3:#76857e; --line:#232f2a; --line-2:#36453e;
  --mask:#52c494; --mask-ink:#06130d; --gold:#dfb54c;
  --mat-minor:#1b2722; --mat-major:#2a3b33; --shadow:.55;
  color-scheme:dark;;
  --bg:var(--mg-sidebar);--stage:var(--mg-ground);--stage-edge:#0f1218;
  --panel:var(--mg-ground);--raise:var(--mg-panel);
  --ink:var(--mg-text-strong);--ink-2:var(--mg-text);--ink-3:#6b7280;
  --line:var(--mg-hairline);--line-2:#3a4157;
  --mask:var(--mg-link);--mask-ink:var(--mg-ground);
  --mat-minor:#1e2331;--mat-major:#2c3346;--shadow:.55;
}
#ram-diagram,#ram-diagram *,#ram-diagram *::before,#ram-diagram *::after{box-sizing:border-box}
#ram-diagram{margin:0;background:var(--bg);color:var(--ink);font:400 14.5px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#ram-diagram button{font:inherit;color:inherit;cursor:pointer}
#ram-diagram :focus-visible{outline:2px solid var(--mask);outline-offset:2px}
#ram-diagram .app{height:100%;min-height:540px;display:grid;
  grid-template:"head head" auto "stage insp" minmax(0,1fr) "rail rail" auto / minmax(0,1fr) minmax(300px,372px);
  gap:12px 14px;padding-block:12px;padding-inline:16px}
#ram-diagram .tb{grid-area:head;display:flex;align-items:flex-end;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;min-width:0}
#ram-diagram .tb-name{display:grid;gap:5px;min-width:0}
#ram-diagram .tb-kicker{font:500 10.5px/1 var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
#ram-diagram .tb h2{font:700 30px/.95 var(--font-display);letter-spacing:.012em;text-transform:uppercase;margin:0}
#ram-diagram .tb-fields{display:flex;margin:0;min-width:0}
#ram-diagram .tb-fields div{padding:1px 14px 0;border-left:1px solid var(--line-2)}
#ram-diagram .tb-fields div:last-child{padding-right:0}
#ram-diagram .tb-fields dt{font:500 9.5px/1.2 var(--font-data);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
#ram-diagram .tb-fields dd{margin:3px 0 0;font:500 13px/1.2 var(--font-data);white-space:nowrap;font-variant-numeric:tabular-nums}
#ram-diagram .stage{grid-area:stage;position:relative;min-width:0;min-height:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 95% at 50% 42%,var(--stage) 0%,var(--stage) 46%,var(--stage-edge) 100%)}
#ram-diagram .stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;outline-offset:-4px}
#ram-diagram .stage canvas.grabbing{cursor:grabbing}
#ram-diagram .stage canvas.pick{cursor:pointer}
#ram-diagram .stage-note,#ram-diagram .stage-hint{padding:4px 8px;border-radius:5px;background:color-mix(in srgb,var(--stage) 80%,transparent)}
#ram-diagram .stage-note{position:absolute;left:8px;top:8px;margin:0;font:500 10px/1.3 var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);pointer-events:none}
#ram-diagram .stage-hint{position:absolute;right:8px;top:8px;margin:0;font:500 10px/1.3 var(--font-data);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);pointer-events:none;transition:opacity .5s}
#ram-diagram .stage-hint.gone{opacity:0}
#ram-diagram .stage-wait{position:absolute;inset:0;margin:0;display:grid;place-items:center;font:500 11px/1 var(--font-data);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);pointer-events:none}
#ram-diagram .tools{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);display:flex;align-items:center;gap:4px;padding:4px;
  background:var(--raise);border:1px solid var(--line-2);border-radius:9px;box-shadow:0 2px 10px rgba(0,0,0,.10)}
#ram-diagram .tool-range{display:flex;align-items:center;gap:8px;padding:0 8px 0 8px;height:30px;font:500 12px/1 var(--font-body);color:var(--ink)}
#ram-diagram .tool-range input{width:104px;margin:0;accent-color:var(--mask)}
#ram-diagram .tog{height:30px;padding:0 10px 0 8px;display:flex;align-items:center;gap:7px;border:0;border-radius:6px;background:transparent;font:500 12px/1 var(--font-body);color:var(--ink-2);white-space:nowrap}
#ram-diagram .tog::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor;flex:none}
#ram-diagram .tog[aria-pressed="true"]{color:var(--ink)}
#ram-diagram .tog[aria-pressed="true"]::before{background:var(--mask);border-color:var(--mask)}
#ram-diagram .tog.plain::before{display:none}
#ram-diagram .tog.plain{padding:0 10px;color:var(--ink);border-left:1px solid var(--line);border-radius:0 6px 6px 0}
#ram-diagram .tog:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
#ram-diagram .callouts{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#ram-diagram .co{position:absolute;left:0;top:0;opacity:0;transition:opacity .4s;--c:var(--ink)}
#ram-diagram .co.on{opacity:1}
#ram-diagram .co-dot{position:absolute;left:-4.5px;top:-4.5px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--raise),0 0 0 3px color-mix(in srgb,var(--ink) 45%,transparent)}
#ram-diagram .co-stem{position:absolute;left:-.5px;bottom:6px;width:1px;height:var(--lift);background:var(--ink);opacity:.75}
#ram-diagram .co-tag{position:absolute;left:0;bottom:calc(var(--lift) + 5px);background:var(--raise);border:1px solid var(--line-2);border-radius:6px;padding:5px 9px 6px;white-space:nowrap;box-shadow:0 2px 12px rgba(0,0,0,.14)}
#ram-diagram .co.dn .co-stem{bottom:auto;top:6px}
#ram-diagram .co.dn .co-tag{bottom:auto;top:calc(var(--lift) + 5px)}
#ram-diagram .co-tag b{display:block;font:600 12.5px/1.25 var(--font-body);color:var(--ink)}
#ram-diagram .co-tag i{display:block;font:500 10.5px/1.35 var(--font-data);font-style:normal;color:var(--ink-2)}
#ram-diagram .tip{position:absolute;left:0;top:0;pointer-events:none;background:var(--ink);color:var(--bg);font:600 12px/1 var(--font-body);padding:6px 8px;border-radius:5px;white-space:nowrap}
#ram-diagram .fallback{position:absolute;inset:0;display:grid;place-content:center;justify-items:start;gap:8px;padding:28px;background:var(--stage)}
#ram-diagram .fallback b{font:600 26px/1.05 var(--font-display);text-transform:uppercase;letter-spacing:.01em}
#ram-diagram .fallback p{margin:0;max-width:44ch;color:var(--ink-2)}
#ram-diagram .insp{grid-area:insp;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
#ram-diagram .tabs{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--line);flex:none}
#ram-diagram .tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 10px 10px;font:600 11px/1 var(--font-data);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2)}
#ram-diagram .tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--mask)}
#ram-diagram .pane{flex:1;min-height:0;overflow-y:auto;padding:18px 18px 22px;overscroll-behavior:contain}
#ram-diagram .kick{font:500 10.5px/1.3 var(--font-data);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin:0 0 9px}
#ram-diagram .pane h2{font:600 31px/1.0 var(--font-display);letter-spacing:.004em;margin:0 0 13px;text-wrap:balance}
#ram-diagram .pane p{margin:0 0 10px;max-width:62ch}
#ram-diagram .pane p:last-child{margin-bottom:0}
#ram-diagram .legend{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
#ram-diagram .legend:empty{display:none}
#ram-diagram .legend li{display:flex;align-items:center;gap:10px;font-size:13px;line-height:1.3}
#ram-diagram .sw{flex:none;width:24px;height:7px;border-radius:4px;background:var(--c);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 34%,transparent)}
#ram-diagram .pane .fact{max-width:none}
#ram-diagram .fact{margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line);font:500 12px/1.5 var(--font-data);color:var(--ink);font-variant-numeric:tabular-nums}
#ram-diagram .fact:empty{display:none}
#ram-diagram .pane .fine{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-2)}
#ram-diagram .parts{list-style:none;margin:-8px 0 0;padding:0}
#ram-diagram .parts>li{border-bottom:1px solid var(--line)}
#ram-diagram .parts>li:last-child{border-bottom:0}
#ram-diagram .part{width:100%;display:grid;grid-template-columns:30px minmax(0,1fr) 14px;column-gap:11px;align-items:center;text-align:left;background:none;border:0;padding:10px 2px;border-radius:6px}
#ram-diagram .part:hover .nm{color:var(--mask)}
#ram-diagram .glyph{grid-row:1 / span 2;width:30px;height:22px;border-radius:3px;box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent)}
#ram-diagram .g-dram{background:#1b1c1f;height:28px;width:20px;justify-self:center}
#ram-diagram .g-pmic{background:#151618;outline:2px dotted #c9ccd0;outline-offset:-1px;width:24px;height:18px;justify-self:center}
#ram-diagram .g-hub{background:linear-gradient(90deg,#c9ccd0 0 14%,#17181a 14% 86%,#c9ccd0 86%);width:22px;height:13px;justify-self:center}
#ram-diagram .g-ind{background:#5d5f63;border-radius:5px;width:22px;height:20px;justify-self:center}
#ram-diagram .g-cap{background:linear-gradient(90deg,#cfd2d5 0 24%,#b59769 24% 76%,#cfd2d5 76%);width:24px;height:13px;justify-self:center}
#ram-diagram .g-res{background:linear-gradient(90deg,#cfd2d5 0 24%,#18181a 24% 76%,#cfd2d5 76%);width:18px;height:9px;justify-self:center}
#ram-diagram .g-edge{background:repeating-linear-gradient(90deg,#cda94e 0 3px,#184a37 3px 5px)}
#ram-diagram .g-pcb{background:#1e6449}
#ram-diagram .g-label{background:#f1f1ec repeating-linear-gradient(90deg,transparent 0 3px,#222 3px 4px,transparent 4px 6px,#222 6px 8px) 4px 12px / 22px 6px no-repeat}
#ram-diagram .nm{grid-column:2;font-weight:600;line-height:1.25}
#ram-diagram .tg{grid-column:2;font:500 11px/1.35 var(--font-data);color:var(--ink-2)}
#ram-diagram .chev{grid-column:3;grid-row:1 / span 2;width:9px;height:9px;border-right:1.5px solid var(--ink-2);border-bottom:1.5px solid var(--ink-2);transform:rotate(-45deg);transition:transform .2s;justify-self:center}
#ram-diagram .part[aria-expanded="true"] .chev{transform:rotate(45deg)}
#ram-diagram .part[aria-expanded="true"] .nm{color:var(--mask)}
#ram-diagram .part-d{padding:0 4px 14px 43px;font-size:13.5px}
#ram-diagram .part-d .code{font:500 12px/1.4 var(--font-data);color:var(--gold);margin:0 0 7px}
#ram-diagram .part-d ul{margin:0;padding-left:17px;display:grid;gap:5px}
#ram-diagram .part-d dl{margin:2px 0 0;display:grid;gap:1px}
#ram-diagram .part-d dt{font:500 12px/1.5 var(--font-data);color:var(--ink);overflow-wrap:anywhere}
#ram-diagram .part-d dd{margin:0 0 7px;color:var(--ink-2);font-size:13px}
#ram-diagram .part-d dd:last-child{margin-bottom:0}
#ram-diagram .notes h3{font:600 11px/1.2 var(--font-data);letter-spacing:.13em;text-transform:uppercase;color:var(--gold);margin:20px 0 9px}
#ram-diagram .notes h3:first-child{margin-top:0}
#ram-diagram .notes ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:13.5px;max-width:62ch}
#ram-diagram .notes a{color:var(--mask);text-underline-offset:2px}
#ram-diagram .rail{grid-area:rail;display:flex;align-items:stretch;gap:10px;min-width:0}
#ram-diagram .transport{display:flex;gap:6px;flex:none}
#ram-diagram .tbtn{height:40px;min-width:40px;padding:0;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:8px;background:var(--raise);color:var(--ink)}
#ram-diagram .tbtn svg{width:16px;height:16px;fill:currentColor;display:block}
#ram-diagram .tbtn.play{grid-auto-flow:column;gap:8px;padding:0 15px 0 12px;background:var(--mask);border-color:var(--mask);color:var(--mask-ink);font:600 13px/1 var(--font-body);min-width:98px;justify-content:start}
#ram-diagram .tbtn:hover{border-color:var(--ink-2)}
#ram-diagram .steps{position:relative;flex:1;min-width:0;display:flex;gap:6px;list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
#ram-diagram .steps::-webkit-scrollbar{display:none}
#ram-diagram .steps li{flex:1 0 auto;display:flex}
#ram-diagram .step{position:relative;flex:1;height:40px;padding:0 12px 0 9px;display:flex;align-items:center;gap:8px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--ink-2);font:500 13px/1 var(--font-body);white-space:nowrap}
#ram-diagram .step .n{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:1px solid currentColor;font:600 11px/1 var(--font-data)}
#ram-diagram .step:hover{color:var(--ink);border-color:var(--line-2)}
#ram-diagram .step[aria-current="step"]{color:var(--ink);background:var(--raise);border-color:var(--mask)}
#ram-diagram .step[aria-current="step"] .n{background:var(--mask);border-color:var(--mask);color:var(--mask-ink)}
#ram-diagram .step .bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;transform:scaleX(var(--p,0));background:var(--mask)}
@container ramd (max-width:880px){#ram-diagram .app{grid-template:"head" auto "stage" minmax(236px,47fr) "rail" auto "insp" minmax(0,53fr) / minmax(0,1fr);gap:10px}#ram-diagram .tb{align-items:flex-start;flex-direction:column;gap:8px}#ram-diagram .tb h2{font-size:24px}#ram-diagram .tb-fields div{padding:0 10px}#ram-diagram .tb-fields div:first-child{padding-left:0;border-left:0}#ram-diagram .tb-fields dd{font-size:12px}#ram-diagram .tb-fields .opt{display:none}#ram-diagram .stage-hint,#ram-diagram .stage-note{display:none}#ram-diagram .tools{gap:2px}#ram-diagram .tool-range input{width:74px}#ram-diagram .tool-range{padding:0 6px;gap:6px}#ram-diagram .tog{padding:0 7px 0 6px;gap:5px}#ram-diagram .tog.plain{display:none}#ram-diagram .tbtn.play{min-width:40px;padding:0;justify-content:center}#ram-diagram .tbtn.play span{display:none}#ram-diagram .steps li{flex:0 0 auto}#ram-diagram .step{padding:0 9px 0 8px;flex:none}#ram-diagram .step:not([aria-current="step"]) .l{display:none}#ram-diagram .step:not([aria-current="step"]){padding:0 8px}#ram-diagram .pane{padding:15px 15px 20px}#ram-diagram .pane h2{font-size:27px}#ram-diagram .co-tag b{font-size:11.5px}#ram-diagram .co-tag i{font-size:10px}#ram-diagram .co-tag{padding:4px 7px 5px}}
@media (prefers-reduced-motion:reduce){#ram-diagram .co,#ram-diagram .stage-hint,#ram-diagram .chev{transition:none}}
#ram-diagram img{max-width:100%}
#ram-diagram [hidden]{display:none!important}

/* ---------- embedding ---------- */
#ram-diagram{container:ramd / inline-size;color-scheme:dark;border-radius:10px;overflow:hidden;
  background:var(--bg);color:var(--ink);font:400 14.5px/1.5 var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
#ram-diagram .app{height:clamp(560px,calc(100vh - 240px),820px)}
@container ramd (max-width:880px){#ram-diagram .app{height:clamp(760px,130vw,980px)}}
/* the full-window view (/ram-diagram/full): same styles, the window's size */
#ram-diagram[data-full]{border-radius:0}
#ram-diagram[data-full] .app{height:100vh;height:100dvh}
/* the site styles bare headings and links; the app's own colours must win */
#ram-diagram h1,#ram-diagram h2,#ram-diagram h3{color:inherit}
#ram-diagram .tab[aria-selected="true"]{color:var(--ink)}
#ram-diagram .notes a{text-decoration:underline}
#ram-diagram .tb h2{margin:0}
#ram-diagram button{border-radius:0}