/* Pinout: compact diagram, readable connection cards and explicit signal colors. */
.ds-pinout-section [data-pin-role] { --pin:#217fb3; }
.ds-pinout-section [data-pin-role=ground] { --pin:#13834b; }
.ds-pinout-section [data-pin-role=supply],.ds-pinout-section [data-pin-role=power] { --pin:#d03650; }
.ds-pinout-section [data-pin-role=pump] { --pin:#a67206; }
.ds-pinout-section [data-pin-role=rs232] { --pin:#7950c5; }
.ds-pinout-section [data-pin-role=logic],.ds-pinout-section [data-pin-role=input] { --pin:#1377b5; }
.ds-pinout-section [data-pin-role=output] { --pin:#098677; }
.ds-pinout-section [data-pin-role=nc] { --pin:#657684; }
.ds-theme-2 .ds-pinout-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 16px; }
.ds-pinout-summary>span { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid #c9e2f1; border-radius:8px; background:linear-gradient(120deg,#f5fbff,#eaf6ff); }
.ds-pinout-summary>span:nth-child(2) { border-color:#d4c9f0; background:linear-gradient(120deg,#fbf8ff,#f1ecff); }
.ds-pinout-summary>span:nth-child(3) { border-color:#bfe4d4; background:linear-gradient(120deg,#f6fdf9,#e5f7ef); }
.ds-pinout-summary strong { display:block; font-size:13px; color:#15364e; }
.ds-pinout-summary small { display:block; margin-top:2px; font-size:11px; color:#466274; }
.ds-page.ds-theme-2 .ds-pin-explorer { grid-template-columns:minmax(360px,.95fr) minmax(350px,1.05fr); gap:20px; padding:0; border:0; border-radius:0; background:transparent; align-items:start; }
.ds-page.ds-theme-2 .ds-pin-map { padding:0; overflow:hidden; max-height:none; border:1px solid #bad9ec; border-radius:8px; box-shadow:0 4px 14px #2149680c; background:#f7fbff; }
.ds-pin-map-heading { display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid #c8e2f1; background:linear-gradient(105deg,#effaff,#e5f2ff); }
.ds-theme-2 .ds-pin-map-heading h2 { font-size:15px; letter-spacing:0; color:#10394e; }
.ds-pin-map-heading p { font-size:11px; color:#41647a; margin-top:2px; }
.ds-pin-view-label { margin-left:auto; padding:4px 7px; border:1px solid #c0dcec; border-radius:5px; color:#326078; background:#ffffffb3; font-size:10px; white-space:nowrap; }
.ds-pin-focus-tools { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 14px; border-bottom:1px solid #dfedf5; background:#fff; font-size:10px; }
.ds-pin-focus-tools>span { margin-right:3px; color:#526e80; }
.ds-pin-focus-tools button { display:flex; align-items:center; gap:6px; padding:5px 8px; border:1px solid #dae6ee; border-radius:6px; color:#234358; background:#f8fbfd; font-size:10px; }
.ds-pin-focus-tools i { width:7px; height:7px; border-radius:50%; background:var(--pin); }
.ds-pin-focus-tools button:hover,.ds-pin-focus-tools button[aria-pressed=true] { border-color:var(--pin,#1499d1); color:var(--pin,#067eaf); background:color-mix(in srgb,var(--pin,#1499d1),white 92%); box-shadow:inset 0 1px #fff; }
.ds-pin-stage { padding:18px 12px; overflow:auto; max-height:550px; min-height:315px; background:radial-gradient(#86b5d13b .8px,transparent .8px) center / 14px 14px,radial-gradient(ellipse at center,#fff,#f0f7fc); }
.ds-page.ds-theme-2[data-selected-package] .ds-pinout-section .ds-pin-diagram-large:not(.ds-pin-diagram-quad):not([data-single-row=true]) { width:100%; max-width:460px; height:calc(var(--pin-rows) * 33px); min-height:230px; max-height:none; grid-template-columns:minmax(0,1fr) 112px minmax(0,1fr); margin:6px auto; }
.ds-page.ds-theme-2[data-selected-package=smd] .ds-pinout-section .ds-pin-diagram-large:not(.ds-pin-diagram-quad):not([data-single-row=true]) { grid-template-columns:minmax(0,1fr) 98px minmax(0,1fr); }
.ds-page.ds-theme-2 .ds-pinout-section .ds-pin-diagram-large .ds-pin { font-size:12px; gap:7px; color:var(--pin); font-weight:600; transition:opacity .18s,background .18s,box-shadow .18s; }
.ds-page.ds-theme-2 .ds-pinout-section .ds-pin-diagram-large .ds-pin b { width:29px; height:21px; font-size:11px; color:#263b48; background:linear-gradient(180deg,#fff,#d4dee5 75%,#edf3f6); border:1px solid #9db5c3; border-bottom:2px solid var(--pin); box-shadow:inset 0 1px #fff; }
.ds-page.ds-theme-2 .ds-pinout-section .ds-pin[aria-pressed=true],.ds-page.ds-theme-2 .ds-pinout-section .ds-pin:hover { background:color-mix(in srgb,var(--pin),white 88%); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pin),white 55%); }
.ds-page.ds-theme-2 .ds-pinout-section .ds-pin[aria-pressed=true] b { color:#fff; background:var(--pin); border-color:var(--pin); box-shadow:inset 0 1px #ffffff50; }
.ds-pinout-section .ds-pin[data-pin-dimmed=true] { opacity:.38; }
.ds-pinout-section .ds-pin[data-pin-dimmed=true]:hover,.ds-pinout-section .ds-pin[data-pin-dimmed=true]:focus-visible { opacity:1; }
.ds-page.ds-theme-2 .ds-pinout-section .ds-pin-body strong { font-size:15px; letter-spacing:.6px; }
.ds-page.ds-theme-2 .ds-pinout-section .ds-pin-body small { font-size:8px; letter-spacing:1px; }
.ds-theme-2 .ds-pinout-section .ds-pin-body>small:last-of-type { display:none; }
.ds-theme-2 .ds-pin-map-note { margin:0; padding:11px 14px; font-size:10px; border-top:1px solid #cee3ef; background:#eaf5fc; flex-wrap:wrap; }
.ds-theme-2 .ds-pin-map-note>span { display:block; flex-basis:100%; margin-left:24px; color:#45677d; }
.ds-page.ds-theme-2 .ds-pin-information { align-self:start; }
.ds-theme-2 .ds-pin-information article { border:1px solid color-mix(in srgb,var(--pin),white 65%); border-radius:8px; background:white; box-shadow:0 4px 14px #2149680c; overflow:hidden; }
.ds-theme-2 .ds-pin-information article>header { padding:18px; margin:0; border-bottom:1px solid color-mix(in srgb,var(--pin),white 75%); background:linear-gradient(115deg,color-mix(in srgb,var(--pin),white 90%),#fff); }
.ds-theme-2 .ds-pin-number { width:48px; height:48px; font-size:24px; border-radius:9px; flex:none; color:white; border-color:var(--pin); background:linear-gradient(135deg,color-mix(in srgb,var(--pin),white 18%),var(--pin)); box-shadow:inset 0 1px #ffffff66,0 3px 8px color-mix(in srgb,var(--pin),transparent 80%); }
.ds-theme-2 .ds-pin-information h3 { color:var(--pin); font-size:24px; }
.ds-theme-2 .ds-pin-information article>div { margin:14px; padding:14px; border-radius:7px; border:1px solid #d5e7f1; background:#f5faff; }
.ds-theme-2 .ds-pin-information article>.ds-pin-connection { background:#effbf6; border-color:#c6e7d9; }
.ds-theme-2 .ds-pin-information article>.ds-pin-electrical { background:#fff9ec; border-color:#eedbaa; }
.ds-theme-2 .ds-pin-information h4 { font-size:12px; gap:8px; }
.ds-theme-2 .ds-pin-information h4 .ds-icon { padding:3px; width:26px; height:26px; border-radius:5px; background:#fff; border:1px solid #c6dfef; }
.ds-theme-2 .ds-pin-information p { font-size:13px; line-height:1.75; color:#162c3b; }
.ds-theme-2 .ds-pin-pair { margin:14px; width:calc(100% - 28px); background:linear-gradient(110deg,#edfaff,#f6f3ff); }
.ds-theme-2 .ds-pinout-section>.ds-learning-footer { padding:13px 16px; margin-top:16px; border:1px solid #c7e2ef; border-radius:8px; background:#f2faff; }
@media(max-width:1200px) { .ds-theme-2 .ds-section-banner { flex-wrap:wrap; gap:15px; } .ds-page.ds-theme-2 .ds-pin-explorer { grid-template-columns:1fr 1fr; gap:14px; } .ds-pin-focus-tools { gap:5px; } }
@media(max-width:900px) { .ds-page.ds-theme-2 .ds-pin-explorer { grid-template-columns:1fr; } .ds-theme-2 .ds-pinout-summary { grid-template-columns:1fr; gap:7px; } .ds-pinout-summary>span { padding:8px 12px; } .ds-pin-view-label { display:none; } }
@media(max-width:700px) { .ds-theme-2 .ds-section-banner { padding:14px; } .ds-section-heading-copy { gap:10px; } .ds-section-heading-copy>.ds-icon-tile { width:38px; height:38px; } .ds-section-heading-copy>.ds-icon-tile .ds-icon { width:24px; height:24px; } .ds-theme-2 .ds-section-banner h1 { font-size:23px; } .ds-theme-2 .ds-section-banner p { font-size:11px; } .ds-package-selector button { padding:7px; gap:5px; } .ds-package-check { display:none; } .ds-package-selector small { font-size:9px; } .ds-pin-stage { padding:14px 8px; } .ds-page.ds-theme-2[data-selected-package] .ds-pinout-section .ds-pin-diagram-large:not(.ds-pin-diagram-quad):not([data-single-row=true]) { grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr); } .ds-page.ds-theme-2 .ds-pinout-section .ds-pin-diagram-large .ds-pin { font-size:10px; gap:3px; } .ds-page.ds-theme-2 .ds-pinout-section .ds-pin-diagram-large .ds-pin b { width:21px; font-size:10px; } .ds-page.ds-theme-2 .ds-pinout-section .ds-pin-body strong { font-size:11px; } .ds-theme-2 .ds-pin-information article>header { padding:12px; gap:9px; } .ds-theme-2 .ds-pin-role { font-size:9px; padding:4px; } .ds-theme-2 .ds-pin-information h3 { font-size:20px; } }