/* The Microcontroller tool (/uc): a microcontroller's AI Interactive Datasheet, in the ProTech tools' dark slate. The pins are drawn as the
   datasheets draw them: brushed-silver leads on a dark package body, lit in their function's colour when chosen. */
:root{--uc-bg:#14191f;--uc-panel:#1b2129;--uc-card:#232a33;--uc-line:#323b47;--uc-fg:#e6edf3;--uc-muted:#94a1ad;--uc-dim:#6d7a86;--uc-accent:#20c4ff;--uc-accent-2:#0e9af9;--uc-green:#39f26b;
  --uc-mono:"JetBrains Mono",Consolas,"Cascadia Mono",monospace;--uc-body:"Segoe UI",system-ui,-apple-system,Arial,sans-serif}
body{margin:0;background:var(--uc-bg);color:var(--uc-fg);font:15px/1.55 var(--uc-body)}
.uc-app{min-height:100vh;display:flex;flex-direction:column;background:var(--uc-bg)}
.uc-app a{color:inherit}
.uc-app code{font-family:var(--uc-mono);font-size:.88em;color:#9fe7ff}

/* Header */
.uc-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 18px;background:linear-gradient(90deg,#08bdf2,#0b8fe0);box-shadow:0 2px 10px #0004;position:sticky;top:0;z-index:5}
.uc-brand{text-decoration:none}
.uc-logo{display:inline-block;font:800 13px/1 var(--uc-mono);background:#fff;color:#0b8fe0;border-radius:7px;padding:7px 9px;letter-spacing:.04em}
.uc-title{display:flex;flex-direction:column;line-height:1.15}
.uc-title strong{font:700 21px/1.1 var(--uc-body);color:#fff;letter-spacing:.01em}
.uc-tagline{display:flex;align-items:center;gap:6px;font:600 10.5px var(--uc-mono);letter-spacing:.12em;text-transform:uppercase;color:#e6f8ff}
.uc-tagline i{width:7px;height:7px;border-radius:50%;background:var(--uc-green);box-shadow:0 0 8px var(--uc-green)}
.uc-badge{font:600 11px var(--uc-mono);background:#fff;color:#0b8fe0;border-radius:5px;padding:3px 8px}
.uc-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.uc-actions a{font:600 13px var(--uc-body);color:#fff;text-decoration:none;background:#ffffff26;border:1px solid #ffffff59;border-radius:8px;padding:7px 12px}
.uc-actions a:hover{background:#ffffff3d}
.uc-actions a.uc-primary{background:#fff;color:#0b7cc9;border-color:#fff}

/* Frame */
.uc-body{flex:1;display:grid;grid-template-columns:220px minmax(0,1fr)}
.uc-side{background:var(--uc-panel);border-right:1px solid var(--uc-line);padding:14px 10px;display:flex;flex-direction:column;gap:3px;position:sticky;top:62px;align-self:start;max-height:calc(100vh - 62px);overflow:auto}
.uc-side small{margin:12px 10px 5px;color:var(--uc-dim);font:600 10.5px var(--uc-mono);letter-spacing:.12em}
.uc-side small:first-child{margin-top:2px}
.uc-side a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:#c9d6df;text-decoration:none;font-weight:500}
.uc-side a i{width:8px;height:8px;border-radius:2px;background:#5b6774;flex:none}
.uc-side a:hover{background:#ffffff0d}
.uc-side a.on{background:linear-gradient(#20c4ff,#0e9af9);color:#fff;font-weight:600}
.uc-side a.on i{background:#fff}
.uc-main{padding:22px 26px 40px;min-width:0;display:grid;gap:22px;align-content:start}
.uc-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;background:#0f1318;border-top:1px solid var(--uc-line);font-size:12.5px;color:var(--uc-muted)}
.uc-foot a{color:var(--uc-accent)}
.uc-missing{padding:60px 24px;text-align:center}
.uc-section-head h1{margin:0 0 6px;font:700 28px/1.15 var(--uc-body)}
.uc-section-head p{margin:0;color:var(--uc-muted);max-width:80ch}

/* Overview */
.uc-hero{display:grid;grid-template-columns:230px minmax(0,1fr);gap:26px;align-items:center;padding:22px;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:14px}
.uc-hero h1{margin:0;font:700 34px/1.05 var(--uc-body);color:#fff}
.uc-sub{margin:6px 0 10px;color:var(--uc-muted);font:500 13px var(--uc-mono)}
.uc-lede{margin:0 0 14px;color:#c9d6df;max-width:78ch}
.uc-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.uc-tiles div{padding:9px 11px;background:var(--uc-panel);border:1px solid var(--uc-line);border-radius:9px}
.uc-tiles small{display:block;color:var(--uc-muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.uc-tiles b{font:600 17px var(--uc-mono);color:#fff}
.uc-chip-art{position:relative;display:grid;place-items:center;height:190px}
.uc-chip-body{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:118px;height:170px;border-radius:7px;
  background:linear-gradient(115deg,#30353d,#181d23);border:1px solid #4d5864;box-shadow:inset 4px 0 #ffffff0c,inset -4px 0 #0005,4px 8px 16px #0006}
.uc-chip-body b{font:700 11px var(--uc-mono);color:#eef2f5;letter-spacing:.05em;writing-mode:vertical-rl;transform:rotate(180deg)}
.uc-chip-body small{font:600 8px var(--uc-mono);color:#9aa8b6;letter-spacing:.1em}
.uc-chip-quad .uc-chip-body{width:140px;height:140px}
.uc-chip-quad .uc-chip-body b{writing-mode:horizontal-tb;transform:none}
.uc-notch{position:absolute;top:-1px;left:calc(50% - 11px);width:22px;height:10px;border:1px solid #4d5864;border-top:0;border-radius:0 0 12px 12px;background:var(--uc-card)}
.uc-chip-quad .uc-notch{display:none}
.uc-dot{position:absolute;top:12px;left:11px;width:6px;height:6px;border-radius:50%;background:#7f8d9c}
.uc-leads{position:absolute;display:flex;justify-content:space-between}
.uc-leads i{display:block;background:linear-gradient(90deg,#f9fbfc,#c8d1d9);border:1px solid #9baebb;box-shadow:inset 0 1px #fff}
.uc-chip-dual .uc-leads{top:20px;bottom:20px;flex-direction:column}
.uc-chip-dual .uc-leads.left{left:calc(50% - 59px - 13px)}
.uc-chip-dual .uc-leads.right{left:calc(50% + 59px)}
.uc-chip-dual .uc-leads i{width:13px;height:5px}
.uc-chip-quad .uc-leads.left,.uc-chip-quad .uc-leads.right{top:calc(50% - 60px);height:120px;flex-direction:column}
.uc-chip-quad .uc-leads.left{left:calc(50% - 70px - 11px)}
.uc-chip-quad .uc-leads.right{left:calc(50% + 70px)}
.uc-chip-quad .uc-leads.top,.uc-chip-quad .uc-leads.bottom{left:calc(50% - 60px);width:120px}
.uc-chip-quad .uc-leads.top{top:calc(50% - 70px - 11px)}
.uc-chip-quad .uc-leads.bottom{top:calc(50% + 70px)}
.uc-chip-quad .uc-leads.left i,.uc-chip-quad .uc-leads.right i{width:11px;height:4px}
.uc-chip-quad .uc-leads.top i,.uc-chip-quad .uc-leads.bottom i{width:4px;height:11px;background:linear-gradient(0deg,#f9fbfc,#c8d1d9)}
.uc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.uc-card{padding:14px 16px;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:12px}
.uc-card h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:600 12px var(--uc-mono);letter-spacing:.1em;text-transform:uppercase;color:#c9d6df}
.uc-card div{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-bottom:1px solid #2f3742;font-size:13.5px}
.uc-card div:last-child{border-bottom:0}
.uc-card span{color:var(--uc-muted)}
.uc-card b{font:600 13px var(--uc-mono);color:var(--uc-green);text-align:right}
.uc-icon{width:9px;height:9px;border-radius:3px;background:var(--uc-accent)}
.uc-icon.timer{background:#b07cf0}.uc-icon.analog{background:#3ddc97}.uc-icon.comms{background:#2fc7f0}.uc-icon.power{background:#f0a632}.uc-icon.chip{background:#c8d1d9}
.uc-explore h2{margin:0 0 10px;font:700 19px var(--uc-body)}
.uc-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.uc-links a{display:grid;gap:3px;padding:14px 16px;text-decoration:none;background:var(--uc-panel);border:1px solid var(--uc-line);border-radius:11px}
.uc-links a:hover{border-color:var(--uc-accent)}
.uc-links b{color:#fff}.uc-links span{color:var(--uc-muted);font-size:13px}

/* The datasheet's own view cards (real package, PCB, 3D), on a light panel as on the datasheet. */
html:has(.uc-app){background:var(--uc-bg)}
.uc-views h2{margin:0 0 10px;font:700 19px var(--uc-body)}
.uc-views .uc-ds{min-height:0;padding:14px;border-radius:14px;background:#f4f8fb;color:#13212c}
.uc-views .ds-visuals{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}

/* Pinout: the package and its pins, as the datasheets draw them */
.uc-packages{display:flex;gap:8px;flex-wrap:wrap}
.uc-packages a{display:flex;align-items:baseline;gap:6px;padding:7px 13px;border:1px solid var(--uc-line);border-radius:9px;background:var(--uc-panel);text-decoration:none;font-weight:600}
.uc-packages a small{color:var(--uc-muted);font-weight:400;font-size:12px}
.uc-packages a[aria-current]{background:linear-gradient(#20c4ff,#0e9af9);border-color:#20c4ff;color:#fff}
.uc-packages a[aria-current] small{color:#e6f8ff}
.uc-pin-filters{display:flex;gap:7px;flex-wrap:wrap}
.uc-pin-filters button{display:flex;align-items:center;gap:6px;padding:5px 11px;border:1px solid var(--uc-line);border-radius:8px;background:transparent;color:#c9d6df;font:500 12.5px var(--uc-body);cursor:pointer}
.uc-pin-filters button[aria-pressed=true]{border-color:var(--uc-accent);background:#20c4ff1f;color:#fff}
.uc-pin-filters b{font:600 11px var(--uc-mono);padding:0 5px;border-radius:4px;background:#ffffff1a}
.uc-pin-filters i{width:8px;height:8px;border-radius:50%;background:var(--pin)}
.port{--pin:#6fb3ff}.pwm{--pin:#b07cf0}.adc{--pin:#3ddc97}.comms{--pin:#2fc7f0}.interrupt{--pin:#f0a632}.clock{--pin:#f472b6}.reset{--pin:#ff6b6b}.power{--pin:#ff8a4c}.ground{--pin:#8a97a3}.other{--pin:#8a97a3}
.uc-pinout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:22px;align-items:start;padding:22px;border:1px solid var(--uc-line);border-radius:14px;overflow-x:auto;
  background:radial-gradient(#ffffff10 .7px,transparent .7px) center/14px 14px,var(--uc-card)}
.uc-package{display:grid;gap:0;margin:0 auto;width:100%;max-width:640px}
.uc-dual{grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr);grid-template-areas:"left body right";height:calc(var(--rows)*30px + 24px)}
/* A quad package: the body grows with the pin pitch, each side has a fixed band for its labels. */
.uc-quad{--pitch:16px;--body:max(170px,calc(var(--rows)*var(--pitch)));grid-template-columns:132px var(--body) 132px;grid-template-rows:112px var(--body) 112px;
  grid-template-areas:". top ." "left body right" ". bottom .";width:max-content;max-width:none}
.uc-side-pins{display:grid}
.uc-side-pins.left{grid-area:left}.uc-side-pins.right{grid-area:right}.uc-side-pins.top{grid-area:top}.uc-side-pins.bottom{grid-area:bottom}
.uc-dual .uc-side-pins{grid-template-rows:repeat(var(--rows),1fr);padding:12px 0}
.uc-quad .uc-side-pins.left,.uc-quad .uc-side-pins.right{grid-template-rows:repeat(var(--rows),1fr);padding:0 0}
.uc-quad .uc-side-pins.top,.uc-quad .uc-side-pins.bottom{grid-template-columns:repeat(var(--rows),1fr)}
.uc-pin{display:flex;align-items:center;justify-content:flex-end;gap:7px;padding:0;border:0;background:transparent;color:#d7e1ea;font:500 12px var(--uc-body);cursor:pointer;min-width:0;border-radius:5px 0 0 5px}
.uc-pin span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uc-pin b{flex:none;display:grid;place-items:center;width:34px;height:19px;font:600 10.5px var(--uc-mono);color:#243a4a;background:linear-gradient(90deg,#f9fbfc,#c8d1d9);border:1px solid #9baebb;border-right:0;border-radius:3px 0 0 3px;box-shadow:inset 0 1px #fff}
.uc-side-pins.right .uc-pin{justify-content:flex-start;border-radius:0 5px 5px 0}
.uc-side-pins.right .uc-pin b{background:linear-gradient(90deg,#c8d1d9,#f9fbfc);border-right:1px solid #9baebb;border-left:0;border-radius:0 3px 3px 0}
.uc-quad .uc-pin{font-size:10px;gap:4px}
.uc-quad .uc-side-pins.left .uc-pin b,.uc-quad .uc-side-pins.right .uc-pin b{width:26px;height:12px;font-size:8.5px}
/* Top and bottom rows: the label runs up the band, the lead touches the body. */
.uc-side-pins.top .uc-pin,.uc-side-pins.bottom .uc-pin{flex-direction:column;align-items:center;justify-content:flex-end;border-radius:5px 5px 0 0}
.uc-side-pins.bottom .uc-pin{justify-content:flex-start;border-radius:0 0 5px 5px}
.uc-side-pins.top .uc-pin span,.uc-side-pins.bottom .uc-pin span{writing-mode:vertical-rl;max-height:92px}
.uc-side-pins.top .uc-pin span{transform:rotate(180deg)}
.uc-side-pins.top .uc-pin b,.uc-side-pins.bottom .uc-pin b{width:12px;height:26px;font-size:8px;writing-mode:vertical-rl;border:1px solid #9baebb;border-bottom:0;border-radius:3px 3px 0 0;background:linear-gradient(90deg,#c8d1d9,#f9fbfc 50%,#c8d1d9)}
.uc-side-pins.bottom .uc-pin b{border-bottom:1px solid #9baebb;border-top:0;border-radius:0 0 3px 3px}
.uc-side-pins.top .uc-pin::before,.uc-side-pins.bottom .uc-pin::before{display:none}
.uc-pin:hover,.uc-pin[aria-pressed=true]{background:color-mix(in srgb,var(--pin),transparent 84%)}
.uc-pin[aria-pressed=true]{color:#fff}
.uc-pin[aria-pressed=true] b{background:var(--pin);border-color:var(--pin);color:#fff;box-shadow:0 0 10px color-mix(in srgb,var(--pin),transparent 40%)}
.uc-pin::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--pin);flex:none;order:-1}
.uc-side-pins.left .uc-pin::before{order:-1}
.uc-side-pins.right .uc-pin::before{order:3}
.uc-pin.dim,.uc-ball.dim,tr.dim{opacity:.22}
.uc-body-art{grid-area:body;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:7px;
  background:linear-gradient(115deg,#30353d,#181d23);border:1px solid #4d5864;box-shadow:inset 4px 0 #ffffff0c,inset -4px 0 #0005,4px 8px 18px #0007}
.uc-body-art strong{font:700 13px var(--uc-mono);color:#f3f5f7;letter-spacing:.06em;writing-mode:vertical-rl;transform:rotate(180deg)}
.uc-quad .uc-body-art strong{writing-mode:horizontal-tb;transform:none;font-size:15px}
.uc-body-art small{font:600 8.5px var(--uc-mono);letter-spacing:.14em;color:#9aa8b6}
.uc-body-art .uc-notch{background:#232a33}
.uc-quad .uc-body-art .uc-notch{display:none}
.uc-grid{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:5px;max-width:560px;margin:0 auto;padding:16px;border-radius:10px;background:linear-gradient(115deg,#30353d,#181d23);border:1px solid #4d5864}
.uc-ball{aspect-ratio:1;border-radius:50%;border:1px solid #9baebb;background:radial-gradient(circle at 35% 30%,#ffffff,#c8d1d9 55%,#8e9cab);color:#243a4a;font:600 8px var(--uc-mono);cursor:pointer;padding:0}
.uc-ball[aria-pressed=true]{background:var(--pin);color:#fff;border-color:var(--pin);box-shadow:0 0 10px var(--pin)}
.uc-ball:not(.port){box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pin),transparent 30%)}
.uc-pin-detail{position:sticky;top:80px;padding:16px;background:var(--uc-panel);border:1px solid var(--uc-line);border-radius:12px}
.uc-pin-detail header{display:flex;gap:12px;align-items:center;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--uc-line)}
.uc-pin-detail h2{margin:0;font:700 22px var(--uc-body)}
.uc-pin-detail small{color:var(--uc-muted)}
.uc-pin-number{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;font:700 20px var(--uc-mono);color:var(--pin);background:color-mix(in srgb,var(--pin),transparent 86%);border:1px solid color-mix(in srgb,var(--pin),transparent 50%)}
.uc-pin-detail ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.uc-pin-detail li{display:grid;grid-template-columns:10px 90px 1fr;gap:9px;align-items:center;font-size:13.5px}
.uc-pin-detail li i{width:9px;height:9px;border-radius:50%;background:var(--pin)}
.uc-pin-detail li b{font:600 13px var(--uc-mono)}
.uc-pin-detail li span{color:var(--uc-muted)}
.uc-fn{display:inline-block;margin:2px 4px 2px 0;padding:1px 7px;border-radius:5px;font:600 11.5px var(--uc-mono);color:var(--pin);background:color-mix(in srgb,var(--pin),transparent 88%);border:1px solid color-mix(in srgb,var(--pin),transparent 65%)}

/* Tables */
.uc-table-wrap h2{margin:0 0 10px;font:700 19px var(--uc-body)}
.uc-scroll{overflow-x:auto;border:1px solid var(--uc-line);border-radius:12px;background:var(--uc-card)}
.uc-table{width:100%;border-collapse:collapse;font-size:13.5px}
.uc-table th{text-align:left;padding:9px 12px;font:600 11px var(--uc-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--uc-muted);background:var(--uc-panel);border-bottom:1px solid var(--uc-line);white-space:nowrap}
.uc-table td{padding:8px 12px;border-bottom:1px solid #2b333d;vertical-align:top}
.uc-table tr:last-child td{border-bottom:0}
.uc-table tr[data-selected] td{background:#20c4ff14}

/* Memory */
.uc-maps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.uc-map{padding:16px;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:12px;display:flex;flex-direction:column}
.uc-map h2{margin:0;font:700 17px var(--uc-body)}
.uc-map p{margin:2px 0 12px;color:var(--uc-muted);font-size:13px}
.uc-stack{flex:1;display:flex;flex-direction:column;gap:3px;min-height:340px}
.uc-seg{display:flex;flex-direction:column;justify-content:center;min-height:46px;padding:6px 12px;border-radius:7px;border:1px solid #ffffff1f;color:#fff}
.uc-seg b{font-size:13.5px}.uc-seg span{font:500 11.5px var(--uc-mono);opacity:.85}.uc-seg small{font:600 11px var(--uc-mono);opacity:.75}
.uc-seg.flash{background:linear-gradient(135deg,#2b5f9e,#1d3f6b)}.uc-seg.regs{background:linear-gradient(135deg,#6b4aa8,#46307a)}.uc-seg.io{background:linear-gradient(135deg,#9a6a1d,#6b4812)}
.uc-seg.ram{background:linear-gradient(135deg,#1d8a5e,#126040)}.uc-seg.eeprom{background:linear-gradient(135deg,#a8457a,#792e57)}.uc-seg:not(.flash):not(.regs):not(.io):not(.ram):not(.eeprom){background:#2d3540}

/* Registers */
.uc-search{display:flex;gap:10px;align-items:center;position:sticky;top:70px;z-index:2}
.uc-search input,.uc-finder input,.uc-finder select{padding:10px 13px;border-radius:9px;border:1px solid var(--uc-line);background:var(--uc-panel);color:var(--uc-fg);font:inherit;min-width:0}
.uc-search input{flex:1;max-width:520px}
.uc-search span,.uc-finder span{color:var(--uc-muted);font-size:13px}
.uc-reg-group h2{margin:6px 0 10px;font:700 19px var(--uc-body);color:#fff}
.uc-reg-group h2 small{margin-left:8px;font:400 13px var(--uc-body);color:var(--uc-muted)}
.uc-reg{margin-bottom:10px;padding:14px 16px;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:12px}
.uc-reg.target{border-color:var(--uc-accent);box-shadow:0 0 0 1px var(--uc-accent)}
.uc-reg header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start}
.uc-reg h3{margin:0;font:700 16px var(--uc-mono);color:#fff}
.uc-reg h3 small{display:block;font:400 13px var(--uc-body);color:var(--uc-muted)}
.uc-reg dl{display:flex;gap:16px;margin:0;flex-wrap:wrap}
.uc-reg dl div{display:grid}
.uc-reg dt{font:600 10.5px var(--uc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--uc-dim)}
.uc-reg dd{margin:0;font-size:13px}
.uc-reg dd small{color:var(--uc-muted)}
.uc-bits{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;margin:12px 0 4px;padding:0}
.uc-bits li{display:grid;text-align:center;padding:5px 2px;border-radius:6px;background:#2c4a63;border:1px solid #3e6b8f}
.uc-bits li.unused{background:#262d36;border-color:#323b47;color:var(--uc-dim)}
.uc-bits small{font:500 10px var(--uc-mono);color:#9fb3c4}
.uc-bits b{font:600 12px var(--uc-mono);overflow:hidden;text-overflow:ellipsis}
.uc-reg details{margin-top:8px}
.uc-reg summary{cursor:pointer;color:var(--uc-accent);font-size:13px}
.uc-fields{margin-top:8px}
.uc-values{margin:6px 0 0;padding-left:16px;color:var(--uc-muted);font-size:12.5px}

/* Peripherals */
.uc-peripherals{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.uc-block{padding:16px;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:12px}
.uc-block header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.uc-block h2{margin:0;font:700 18px var(--uc-mono);color:#fff}
.uc-module{font:600 11px var(--uc-mono);color:var(--uc-accent);border:1px solid #20c4ff66;border-radius:5px;padding:1px 7px}
.uc-block p{margin:4px 0 8px;color:var(--uc-muted);font-size:13.5px}
.uc-block h3{margin:10px 0 6px;font:600 11px var(--uc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--uc-dim)}
.uc-chips{display:flex;flex-wrap:wrap;gap:6px}
.uc-chips a{display:flex;gap:6px;align-items:baseline;padding:3px 9px;border-radius:6px;background:var(--uc-panel);border:1px solid var(--uc-line);text-decoration:none;font:600 12px var(--uc-mono)}
.uc-chips a:hover{border-color:var(--uc-accent)}
.uc-chips small{font-weight:400;color:var(--uc-muted)}
.uc-chips a.pin{color:#9fe7ff}

/* Fuses */
.uc-fuses{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.uc-fuse{padding:16px;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:12px;display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-content:start;min-width:0}
.uc-fuse header{display:flex;align-items:baseline;gap:10px}
.uc-fuse h2{margin:0;font:700 17px var(--uc-body);flex:1}
.uc-fuse output{font:700 22px var(--uc-mono);color:var(--uc-green)}
.uc-fuse output.changed{color:#ffd166}
.uc-fuse header small{color:var(--uc-muted);font:500 12px var(--uc-mono)}
.uc-fuse-field{display:grid;gap:5px}
.uc-fuse-field span{display:grid}
.uc-fuse-field b{font:600 13px var(--uc-mono)}
.uc-fuse-field small{color:var(--uc-muted);font-size:12.5px}
.uc-fuse-field{min-width:0}
.uc-fuse-field select,.uc-fuse-field input{width:100%;min-width:0;box-sizing:border-box;padding:8px 10px;border-radius:8px;border:1px solid var(--uc-line);background:var(--uc-panel);color:var(--uc-fg);font:inherit;font-size:13px;text-overflow:ellipsis}

/* Index */
.uc-index{padding:24px 26px 40px;display:grid;gap:18px;max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box}
.uc-finder{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.uc-finder input{flex:1;max-width:460px}
.uc-chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.uc-chip-card{display:grid;gap:3px;padding:14px 16px;text-decoration:none;background:var(--uc-card);border:1px solid var(--uc-line);border-radius:12px}
.uc-chip-card:hover{border-color:var(--uc-accent);transform:translateY(-1px)}
.uc-chip-card b{font:700 17px var(--uc-mono);color:#fff}
.uc-chip-card small{color:var(--uc-accent);font:600 11.5px var(--uc-mono)}
.uc-chip-card span{color:var(--uc-muted);font-size:13px}

@media (max-width:980px){
  .uc-body{grid-template-columns:1fr}
  .uc-side{position:static;max-height:none;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;border-right:0;border-bottom:1px solid var(--uc-line);padding:8px}
  .uc-side small{display:none}
  .uc-side a{white-space:nowrap}
  .uc-pinout{grid-template-columns:1fr}
  .uc-pin-detail{position:static}
  .uc-hero{grid-template-columns:1fr}
}
@media (max-width:600px){
  .uc-main,.uc-index{padding:16px}
  .uc-head{position:static}
  .uc-dual{grid-template-columns:minmax(0,1fr) 70px minmax(0,1fr)}
  .uc-pin{font-size:10.5px}
  .uc-fuses,.uc-peripherals{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.uc-chip-card:hover{transform:none}}