:root{--ink:#eff7ff;--muted:#89a0b9;--navy:#061021;--panel:#0a1930;--line:#1a3150;--teal:#10bda6;--cyan:#33b5e5;--yellow:#ffc857;--pink:#ef6f8f;--violet:#9c8cff;--ground:#8291a7;--pad:#f6cb62;--danger:#ff8b76}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--navy);color:var(--ink);font-family:Manrope,system-ui,sans-serif;min-width:320px;overflow-x:hidden}button,a{font:inherit}button{color:inherit}.topbar{height:76px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);position:relative;z-index:20;background:rgba(6,16,33,.88);backdrop-filter:blur(18px)}.brand{display:flex;gap:11px;align-items:center;color:var(--ink);text-decoration:none}.brand>span:last-child{display:flex;flex-direction:column;line-height:.95}.brand b{font-size:15px;letter-spacing:-.02em}.brand em{color:var(--teal);font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin-top:5px}.brand-mark{width:30px;height:30px;position:relative;display:grid;place-items:center;border:1px solid var(--teal);border-radius:8px;transform:rotate(45deg)}.brand-mark i{position:absolute;background:var(--teal);border-radius:2px}.brand-mark i:nth-child(1){width:14px;height:3px}.brand-mark i:nth-child(2){width:3px;height:14px}.brand-mark i:nth-child(3){width:4px;height:4px;background:var(--yellow);box-shadow:0 0 10px var(--yellow)}.board-id{font:500 11px DM Mono,monospace;letter-spacing:.09em;color:#b9c9dc}.board-id span{color:#536a84}.help-button{background:none;border:0;color:#b9c9dc;font-size:13px;cursor:pointer;padding:10px 0;border-bottom:1px solid #5f7691}.intro{padding:clamp(36px,6vw,76px) clamp(20px,7vw,110px) clamp(20px,3vw,44px);display:flex;align-items:end;justify-content:space-between;gap:40px}.eyebrow{margin:0 0 17px;color:#86a0ba;font:500 11px DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em}.eyebrow span{display:inline-block;width:28px;height:1px;background:var(--teal);vertical-align:middle;margin-right:9px}.intro h1{font-size:clamp(44px,7vw,96px);line-height:.83;letter-spacing:-.065em;margin:0;font-weight:500}.intro h1 strong{font-weight:800;color:var(--teal)}.intro-copy{font-size:clamp(14px,1.4vw,17px);line-height:1.65;color:#a9bad0;max-width:350px;margin:0 0 5px}.workspace{margin:0 clamp(12px,3vw,48px);border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,#08162a,#050d1b);overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.3)}.filter-bar{min-height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none}.filter-bar::-webkit-scrollbar{display:none}.filter-label{font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em;color:#667e98;padding:0 10px}.filter{white-space:nowrap;border:1px solid transparent;border-radius:999px;background:transparent;padding:9px 13px;color:#92a8c0;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:7px}.filter:hover,.filter:focus-visible{border-color:#385270;color:#d8e8f6}.filter.active{background:#18304a;color:white;border-color:#294662}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor}.dot.power{color:var(--danger)}.dot.i2c,.dot.adc{color:var(--cyan)}.dot.spi{color:var(--yellow)}.dot.uart{color:var(--pink)}.dot.pwm{color:var(--violet)}.dot.gpio{color:var(--teal)}.dot.ground{color:var(--ground)}.stage-wrap{height:min(720px,72vh);min-height:560px;position:relative}.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}.stage.dragging{cursor:grabbing}.stage canvas{width:100%;height:100%;display:block}.pin-labels{position:absolute;inset:0;pointer-events:none}.pin-label{position:absolute;transform:translate(-50%,-50%);font:500 10px DM Mono,monospace;color:#7f98b2;padding:3px 5px;border-radius:4px;transition:opacity .2s,color .2s,background .2s;white-space:nowrap}.pin-label.active{color:#fff;background:#0f2f49;box-shadow:0 0 0 1px #2c5873}.pin-label.dim{opacity:.14}.orientation{position:absolute;top:18px;left:50%;transform:translateX(-50%);font:500 9px DM Mono,monospace;letter-spacing:.14em;color:#46617e}.usb-icon{width:18px;height:8px;border:1px solid currentColor;border-radius:2px;display:inline-block;margin-right:7px;vertical-align:-1px}.drag-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font:500 10px DM Mono,monospace;color:#58738e;text-transform:uppercase;letter-spacing:.1em;transition:opacity .3s}.drag-hint span{font-size:16px;vertical-align:-1px;margin-right:7px}.pin-card{position:absolute;left:24px;top:24px;width:280px;background:rgba(9,25,47,.94);border:1px solid #25425e;border-radius:16px;padding:20px;backdrop-filter:blur(18px);box-shadow:0 24px 70px rgba(0,0,0,.35);z-index:5}.pin-card-head{display:flex;justify-content:space-between;align-items:center}.pin-number{font:500 12px DM Mono,monospace;color:var(--teal);border:1px solid #285e61;border-radius:6px;padding:5px 8px}.pin-card-head button{border:0;background:none;color:#6f88a2;font-size:23px;cursor:pointer;line-height:1}.pin-kicker{font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em;color:#69829c;margin:22px 0 4px}.pin-card h2{font-size:38px;letter-spacing:-.05em;margin:0 0 7px}.pin-summary{color:#9db0c5;font-size:13px;line-height:1.55;margin:0 0 18px}.functions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.function{border:1px solid #23405d;background:#0b203a;border-radius:8px;padding:8px}.function b{display:block;font:500 9px DM Mono,monospace;color:#66819c;margin-bottom:3px}.function span{font:600 11px DM Mono,monospace}.tip{margin:16px -4px -4px;padding:13px;border-radius:10px;background:#13243d;color:#8da4bc;font-size:11px;line-height:1.55}.tip b{color:#c7d6e5}.view-controls{position:absolute;right:18px;bottom:18px;display:flex;gap:7px;z-index:5}.view-controls button{border:1px solid #29445f;background:#0a1930;border-radius:9px;padding:9px 11px;font-size:11px;color:#93abc3;cursor:pointer}.view-controls button span{color:var(--teal);font-size:15px;margin-right:5px}.quick-guide{padding:clamp(64px,8vw,110px) clamp(20px,7vw,110px)}.guide-heading{display:flex;justify-content:space-between;align-items:end}.guide-heading h2{margin:0;font-size:clamp(38px,5vw,64px);letter-spacing:-.05em}.legend{display:flex;gap:20px;flex-wrap:wrap;color:#7f96ae;font-size:11px;margin:28px 0 20px}.legend span{display:flex;gap:7px;align-items:center}.pin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#17304b;border:1px solid #17304b;border-radius:14px;overflow:hidden}.pin-row{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;background:#09172b;border:0;color:inherit;text-align:left;padding:11px 13px;min-height:54px;cursor:pointer}.pin-row:hover,.pin-row:focus-visible{background:#102944;outline:none}.pin-row.selected{background:#12324a}.pin-row .num{font:500 10px DM Mono,monospace;color:#526d89}.pin-row .name{font:600 13px DM Mono,monospace}.pin-row .roles{font:400 9px DM Mono,monospace;color:#687f97;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}.help-panel{position:fixed;right:18px;top:88px;z-index:50;width:min(360px,calc(100vw - 36px));padding:26px;background:#0c1d35;border:1px solid #284560;border-radius:15px;box-shadow:0 30px 80px #000}.help-panel h2{margin:0 0 12px;font-size:25px}.help-panel p{font-size:13px;line-height:1.65;color:#9bb0c5}.help-panel b{color:#fff}.help-panel button{position:absolute;right:14px;top:12px;background:none;border:0;color:#7890a9;font-size:24px;cursor:pointer}.scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:40}footer{padding:30px clamp(20px,7vw,110px);border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#506984;font:500 10px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
@media(max-width:820px){.board-id{display:none}.topbar{height:66px}.help-button{font-size:12px}.intro{align-items:start;padding-top:32px}.intro h1{font-size:52px}.intro-copy{max-width:270px}.stage-wrap{height:680px}.pin-card{left:14px;right:14px;top:auto;bottom:14px;width:auto;max-height:270px;overflow:auto;padding:16px}.pin-card h2{font-size:30px}.pin-kicker{margin-top:12px}.tip{display:none}.view-controls{top:14px;bottom:auto}.drag-hint{bottom:300px}.pin-label{font-size:9px}.pin-grid{grid-template-columns:1fr}.quick-guide{padding-top:72px}.legend{gap:14px}.roles{max-width:230px!important}}
@media(max-width:560px){.intro{display:block}.intro-copy{margin-top:24px;max-width:100%}.workspace{margin:0 8px;border-radius:16px}.filter-bar{padding-left:8px}.stage-wrap{height:640px;min-height:640px}.pin-label{font-size:8px;padding:2px}.view-controls{right:10px}.view-controls button{padding:8px}.guide-heading{display:block}.pin-row{grid-template-columns:32px 70px 1fr}.pin-row .roles{max-width:none!important;text-align:right}.help-panel{right:10px;top:76px;width:calc(100vw - 20px)}footer{display:block;line-height:2}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
.board-logo{position:absolute;left:0;top:0;width:100px;height:100px;display:grid;place-items:center;transform-origin:0 0;z-index:2}.board-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}.board-logo:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Nicholson Electronics site integration */
:root{--navy:#071724;--panel:#0d2637;--line:#1a3a4b;--teal:#42d5c4}
body{font-family:Archivo,system-ui,sans-serif}
.topbar{height:102px;padding:0 max(20px,calc((100vw - 1180px)/2));gap:26px;background:rgba(7,23,36,.98);box-shadow:0 10px 35px rgba(0,0,0,.12)}
.brand{flex:0 0 auto}
.brand-logo{display:block;width:280px;max-height:70px;object-fit:contain;object-position:left center}
.explorer-nav{display:flex;align-items:center;gap:22px;margin-left:auto}
.explorer-nav a{position:relative;color:rgba(255,255,255,.76);font-size:12px;font-weight:750;letter-spacing:.1em;text-decoration:none;text-transform:uppercase}
.explorer-nav a:hover,.explorer-nav a[aria-current="page"]{color:var(--teal)}
.explorer-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--teal)}
.board-id{white-space:nowrap}
.intro h1,.guide-heading h2,.pin-card h2,.help-panel h2{font-family:Archivo,system-ui,sans-serif}
.workspace{border-color:rgba(66,213,196,.2);border-radius:0}
.filter,.pin-card,.function,.tip,.view-controls button,.pin-grid,.help-panel{border-radius:0}
@media(max-width:1050px){.board-id{display:none}.brand-logo{width:240px}}
@media(max-width:820px){.topbar{height:86px}.explorer-nav{display:none}.brand-logo{width:230px}.intro{padding-top:32px}}

/* Site-wide visual scale alignment */
.topbar{height:90px}
.brand-logo{width:250px;max-height:62px}
.intro h1{font-size:clamp(42px,4.6vw,64px);line-height:.92;letter-spacing:-.05em}
.guide-heading h2{font-size:clamp(34px,4vw,52px);letter-spacing:-.045em}
@media(max-width:820px){.topbar{height:78px}.brand-logo{width:220px}.intro h1{font-size:clamp(42px,12vw,56px);line-height:.92}}