/* bb222.info — Part BB222: a component datasheet (IC package header with pin nav, pin-out cover,
   demo slot on a matte-black PCB footprint, numbered datasheet sections, ordering table, edge-connector footer) */
:root{
 --paper:#ECEEE8;--sheet:#FAFBF7;--grid:rgba(20,23,27,.055);
 --ink:#14171B;--ink-2:#454C54;--rule:#C3C8BE;--rule-2:#DCE0D7;
 --pcb:#15181A;--pcb-2:#1D2225;--pcb-3:#2A3034;--silk:#ECEBE3;--silk-2:#AEB2AA;--silk-3:#C9CBC4;
 --gold:#D3A548;--gold-2:#F0CE80;--gold-3:#8F6B22;--copper:#B6652F;
 --red:#C12F28;--red-t:#AE2820;--cyan:#46C7D6;--cyan-t:#0D6875;
 --f-lat:"Familjen Grotesk";--f-bn:"Noto Sans Bengali";--f-mono:"Kode Mono";
 --body:var(--f-lat),var(--f-bn),system-ui,-apple-system,"Segoe UI",sans-serif;
 --mono:var(--f-mono),var(--f-bn),ui-monospace,"SFMono-Regular",Menlo,monospace;
 --wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18'%3E%3Cpath d='M0 15h8V3h16v12h24' fill='none' stroke='%23454C54' stroke-width='1.5'/%3E%3C/svg%3E");
 --wave-g:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='18'%3E%3Cpath d='M0 15h8V3h16v12h24' fill='none' stroke='%23D3A548' stroke-width='1.5'/%3E%3C/svg%3E");
 color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.62 var(--body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.lang-bn{line-height:1.78}
img,svg{max-width:100%}
a{color:var(--ink);text-decoration-color:var(--red);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--red-t)}
:focus-visible{outline:3px solid var(--cyan-t);outline-offset:2px;border-radius:2px}
.hd :focus-visible,.board :focus-visible,.ft :focus-visible,.demo-card :focus-visible{outline-color:var(--cyan)}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:16px}
@media (min-width:768px){.wrap{padding-inline:28px}}
.skip{position:absolute;left:12px;top:-80px;z-index:100;background:var(--gold);color:var(--ink);padding:12px 16px;font-weight:700;border-radius:4px}
.skip:focus{top:12px}
h1,h2,h3{font-family:var(--body);color:var(--ink);text-wrap:balance}
.lang-bn h1,.lang-bn h2,.lang-bn h3{font-stretch:84%;letter-spacing:0}
h3{font-size:19px;line-height:1.35;margin:1.4em 0 .5em}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:11px 20px;border:2px solid var(--ink);border-radius:4px;font:700 16px/1.2 var(--body);text-decoration:none;color:var(--ink);cursor:pointer;transition:transform .15s,background-color .15s,box-shadow .15s;text-align:center}
.btn:hover{color:var(--ink);transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:var(--gold-3);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)}
.btn-gold:hover{box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),0 6px 16px -8px rgba(143,107,34,.8)}
.btn-line{background:transparent}
.btn-line:hover{background:var(--ink);color:var(--sheet)}
.btn-ink{background:var(--ink);color:var(--sheet)}
.btn-ink:hover{color:var(--gold-2)}

/* ---------- header: IC package + pins ---------- */
.hd{position:relative;z-index:40}
.hd-body{background:radial-gradient(120% 140% at 10% 0,#23292c 0,var(--pcb) 60%);color:var(--silk)}
.hd-in{display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--silk);text-decoration:none;min-height:44px;margin-right:auto}
.brand:hover{color:var(--gold-2)}
.ic{position:relative;flex:none;width:36px;height:22px;border-radius:3px;background:var(--pcb-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(236,235,227,.28)}
.ic::before,.ic::after{content:"";position:absolute;left:5px;right:5px;height:5px;background:repeating-linear-gradient(90deg,var(--gold) 0 4px,transparent 4px 8px)}
.ic::before{top:-6px}.ic::after{bottom:-6px}
.ic i{position:absolute;left:-1px;top:50%;width:6px;height:10px;margin-top:-5px;border-radius:0 6px 6px 0;background:var(--pcb)}
.b-name{font:700 21px/1 var(--mono);letter-spacing:.03em}
.b-tag{font-size:14px;line-height:1.2;color:var(--silk-2);border-left:1px solid rgba(236,235,227,.25);padding-left:11px}
.hd-tools{display:flex;align-items:center;gap:10px}
.lsw{display:inline-flex;border:1.5px solid rgba(236,235,227,.35);border-radius:4px;overflow:hidden}
.lsw a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;color:var(--silk);text-decoration:none;font:600 14px/1.2 var(--body)}
.lsw a:hover{background:var(--pcb-3);color:var(--gold-2)}
.lsw a[aria-current]{background:var(--silk);color:var(--ink)}
.menu-btn{order:3;display:inline-flex;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;border:1.5px solid var(--gold);border-radius:4px;background:transparent;color:var(--silk);font:600 15px/1 var(--body);cursor:pointer}
.menu-btn:hover{background:var(--pcb-3)}
.mb-ic{display:grid;gap:4px;width:18px}
.mb-ic i{display:block;height:2px;background:var(--gold);transition:transform .2s}
.hd.is-open .mb-ic i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.is-open .mb-ic i:nth-child(2){transform:scaleX(0)}
.hd.is-open .mb-ic i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hd-cta{min-height:44px;padding:8px 16px;font-size:15px}
.pins ol{list-style:none;margin:0 auto;padding-block:0}
.pins a{position:relative;display:flex;align-items:baseline;gap:8px;text-decoration:none;color:var(--ink);font:600 15px/1.3 var(--body)}
.pn{font:700 12px/1 var(--mono);color:var(--red-t);flex:none}
.pins a::before{content:"";position:absolute;background:linear-gradient(90deg,var(--gold-2),var(--gold) 55%,var(--gold-3));transition:height .15s,width .15s,background .15s}
.pins a[aria-current]::before{background:var(--red)}
.pins a:hover .pl,.pins a[aria-current] .pl{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px}
@media (max-width:979.98px){
 .hd-cta{display:none}
 .pins{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sheet);border-bottom:3px solid var(--ink);box-shadow:0 18px 30px -18px rgba(20,23,27,.55);max-height:calc(100vh - 70px);overflow:auto}
 .hd.is-open .pins{display:block}
 .pins ol{padding:10px 16px 16px}
 .pins li{border-bottom:1px dashed var(--rule)}
 .pins a{align-items:center;min-height:52px;padding:10px 0 10px 34px}
 .pins a::before{left:-16px;top:50%;width:34px;height:8px;margin-top:-4px;border-radius:0 2px 2px 0}
 .pins a:hover::before{width:40px}
}
@media (max-width:599.98px){
 .lsw a[aria-current]{display:none}
 .hd .lsw{border:0}
 .hd .lsw a{padding:0 10px;border:1.5px solid rgba(236,235,227,.35);border-radius:4px}
 .b-tag{display:none}
}
@media (max-width:399.98px){.mb-l{display:none}.b-name{font-size:19px}}
@media (min-width:980px){
 .menu-btn{display:none}
 .pins{background:var(--paper);border-bottom:1px solid var(--rule)}
 .pins ol{display:flex;flex-wrap:wrap;max-width:1240px;padding-inline:52px 28px;gap:0 6px}
 .pins a{min-height:56px;padding:20px 14px 12px}
 .pins a::before{top:0;left:14px;width:14px;height:10px;border-radius:0 0 2px 2px}
 .pins a:hover::before{height:15px}
}

/* ---------- home cover: datasheet front page + pin-out ---------- */
.cover{background:var(--sheet);border-bottom:1px solid var(--rule)}
.cover-in{display:grid;gap:36px;padding-block:36px 48px}
@media (min-width:960px){.cover-in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:56px;padding-block:64px 72px}}
.doc-id{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:15px;color:var(--ink-2)}
.doc-pn{font:700 14px/1 var(--mono);background:var(--ink);color:var(--sheet);padding:6px 9px;border-radius:2px;letter-spacing:.04em}
.cover h1{font-size:clamp(34px,5.4vw,62px);line-height:1.04;letter-spacing:-.02em;font-weight:700;margin:18px 0 18px;padding-top:16px;border-top:6px solid var(--ink)}
.lang-bn .cover h1{font-size:clamp(30px,4.6vw,52px);line-height:1.32;letter-spacing:0}
.lead p{margin:0;font-size:19px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.lang-bn .lead p{line-height:1.8}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 24px}
.feat{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid var(--rule);display:grid;gap:8px;font-size:16px}
.feat li{position:relative;padding-left:24px}
.feat li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:10px;background:var(--red);transform:rotate(45deg)}
@media (min-width:600px){.feat{grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 26px}}
.pinout{margin:0;padding:18px 18px 24px;background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px,var(--sheet);border:1px solid var(--rule);container-type:inline-size}
.pinout figcaption{font-size:14px;font-weight:600;color:var(--ink-2);padding-bottom:10px;margin-bottom:18px;border-bottom:1px solid var(--rule)}
.po{display:grid;grid-template-columns:minmax(0,1fr) 96px minmax(0,1fr)}
.po ul{list-style:none;margin:0;padding:22px 0;display:flex;flex-direction:column;justify-content:space-around;gap:8px}
.po a{position:relative;display:flex;align-items:center;gap:9px;min-height:46px;text-decoration:none;color:var(--ink);font:600 15px/1.3 var(--body)}
.po-l a{flex-direction:row-reverse;text-align:right;padding-right:36px}
.po-r a{padding-left:36px}
.po a::after{content:"";position:absolute;top:50%;width:28px;height:9px;margin-top:-4.5px;background:linear-gradient(180deg,var(--gold-2),var(--gold) 60%,var(--gold-3));animation:pinOn .9s ease-out both}
.po-l a::after{right:0;border-radius:2px 0 0 2px}
.po-r a::after{left:0;border-radius:0 2px 2px 0}
.po li:nth-child(2) a::after{animation-delay:.12s}.po li:nth-child(3) a::after{animation-delay:.24s}.po li:nth-child(4) a::after{animation-delay:.36s}
.po a:hover::after{background:var(--red)}
.po a:hover .pl{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:4px}
@keyframes pinOn{0%{filter:brightness(1.7) saturate(1.3);box-shadow:0 0 12px var(--gold-2)}100%{filter:none;box-shadow:none}}
.po-chip{position:relative;border-radius:6px;background:linear-gradient(150deg,#262c30,#101214 70%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 28px -16px rgba(0,0,0,.7);display:grid;place-items:center;min-height:250px}
.po-chip::before{content:"";position:absolute;top:0;left:50%;width:28px;height:14px;margin-left:-14px;border-radius:0 0 14px 14px;background:var(--sheet)}
.pc-mark{writing-mode:vertical-rl;font:700 24px/1 var(--mono);letter-spacing:.22em;color:var(--silk)}
.pc-dot{position:absolute;left:14px;top:24px;width:9px;height:9px;border-radius:50%;background:var(--silk-2);opacity:.7}
@container (max-width:459.98px){
 .po{grid-template-columns:62px minmax(0,1fr)}
 .po-chip{grid-column:1;grid-row:1/span 2;min-height:0}
 .pc-mark{font-size:20px}
 .po-l,.po-r{grid-column:2;justify-content:flex-start}
 .po-l{padding-bottom:4px}.po-r{padding-top:4px}
 .po-l a{flex-direction:row;text-align:left;padding-right:0;padding-left:36px}
 .po-l a::after{right:auto;left:0;border-radius:0 2px 2px 0}
}

/* ---------- home board: PCB with the demo footprint ---------- */
.board{position:relative;background:
 radial-gradient(circle,transparent 0 3px,rgba(211,165,72,.34) 3.5px 5px,transparent 5.5px) 18px 22px/112px 96px,
 repeating-linear-gradient(135deg,transparent 0 46px,rgba(182,101,47,.08) 46px 48px),
 var(--pcb);color:var(--silk);container-type:inline-size;scroll-margin-top:0}
.board-in{display:grid;gap:30px;padding-block:48px 64px}
@container (min-width:940px){.board-in{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center}}
.silk{margin:0;font:500 13px/1.2 var(--mono);letter-spacing:.14em;color:var(--silk-2)}
.board h2{margin:12px 0 12px;font-size:clamp(28px,3.6vw,42px);line-height:1.12;color:var(--silk)}
.lang-bn .board h2{line-height:1.4}
.board-p{margin:0 0 22px;color:var(--silk-3);max-width:46ch}
.tps{list-style:none;margin:0;padding:0}
.tps li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px dashed rgba(236,235,227,.2);color:var(--silk)}
.tp{flex:none;display:inline-flex;align-items:center;gap:8px;min-width:68px;font:700 11px/1 var(--mono);color:var(--gold-2)}
.tp::before{content:"";width:22px;height:22px;border-radius:50%;border:3px solid var(--gold);background:var(--pcb-2);box-shadow:0 0 0 4px rgba(211,165,72,.14)}
.fp{position:relative;width:100%;max-width:640px;justify-self:center;margin-top:28px;padding:22px 14px 18px;border:2px solid rgba(236,235,227,.6);border-radius:4px;background:linear-gradient(180deg,rgba(29,34,37,.94),rgba(21,24,26,.96))}
@media (min-width:600px){.fp{padding:26px 22px 22px}}
.fp::before,.fp::after{content:"";position:absolute;left:28px;right:28px;height:12px;background:repeating-linear-gradient(90deg,var(--gold) 0 16px,transparent 16px 30px)}
.fp::before{top:-7px}.fp::after{bottom:-7px}
.fp-ref{position:absolute;top:-36px;left:0;font:700 15px/1 var(--mono);color:var(--silk);letter-spacing:.08em}
.fp-ref::after{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%;background:var(--silk)}
@container (min-width:940px){.fp{justify-self:end}}

/* ---------- inner head: title block ---------- */
.head{background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/24px 24px,var(--paper);padding-block:22px 40px;border-bottom:1px solid var(--rule)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin:0 0 16px;padding:0;font-size:15px;color:var(--ink-2)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--rule)}
.crumbs a{display:inline-block;padding:10px 0}
.tblock{display:grid;background:var(--sheet);border:2px solid var(--ink)}
@media (min-width:860px){.tblock{grid-template-columns:minmax(0,1fr) 280px}}
.tb-main{padding:22px 18px 26px}
@media (min-width:600px){.tb-main{padding:28px 32px 32px}}
.head h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-.018em;margin:16px 0 14px}
.lang-bn .head h1{font-size:clamp(28px,3.9vw,44px);line-height:1.38;letter-spacing:0}
.tb-pkg{display:grid;place-items:center;padding:14px 18px;border-top:2px solid var(--ink);background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/12px 12px,#F4F5F0}
@media (min-width:860px){.tb-pkg{border-top:0;border-left:2px solid var(--ink)}}
.tb-pkg svg{width:100%;max-width:230px;height:auto}
.tb-pkg .dim path{fill:none;stroke:var(--ink-2);stroke-width:1.2}
.tb-pkg .legs rect{fill:var(--gold)}
.tb-pkg .body{fill:var(--pcb)}
.tb-pkg .p1{fill:var(--silk-2)}
.tb-pkg text{fill:var(--silk);font:700 19px var(--mono);letter-spacing:2px}

/* ---------- sheet: contents + numbered sections ---------- */
.sheet{background:var(--sheet)}
.sheet-in{display:grid;gap:32px;padding-block:40px 64px}
@media (min-width:1024px){.sheet-in{grid-template-columns:270px minmax(0,1fr);gap:64px;align-items:start}.side{position:sticky;top:20px}}
.toc-h{margin:0;padding-bottom:9px;border-bottom:3px solid var(--ink);font:700 13px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.lang-bn .toc-h{font:700 16px/1.6 var(--body);letter-spacing:0;text-transform:none}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:tc}
.toc li{counter-increment:tc}
.toc a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:4px;align-items:baseline;min-height:44px;padding:10px 6px 10px 4px;border-bottom:1px dotted var(--rule);text-decoration:none;color:var(--ink);font-size:15px;line-height:1.4;transition:background .15s}
.tn::before{content:counter(tc);font:700 13px/1 var(--mono);color:var(--red-t)}
.lang-bn .tn::before{content:counter(tc,bengali);font:700 15px/1 var(--body)}
.toc a:hover{background:rgba(211,165,72,.12)}
.toc a[aria-current]{background:linear-gradient(90deg,rgba(211,165,72,.28),transparent);box-shadow:inset 3px 0 0 var(--gold)}
.demo-card{position:relative;margin-top:28px;padding:26px 20px 20px;background:var(--pcb);color:var(--silk);border-radius:4px}
.demo-card::before{content:"";position:absolute;top:-5px;left:20px;right:20px;height:9px;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 18px)}
.dc-chip{display:none}
.dc-t{margin:0 0 6px;font-size:19px;font-weight:700;line-height:1.3}
.dc-p{margin:0 0 16px;font-size:15px;line-height:1.55;color:var(--silk-3)}
.lang-bn .dc-p{line-height:1.75}
.demo-card .btn{width:100%}
.doc{min-width:0;max-width:780px;counter-reset:hn}
.sec{position:relative;padding-bottom:34px;margin-bottom:34px}
.sec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18px;background:var(--wave) 0 0/48px 18px repeat-x;opacity:.55}
.sec:last-child::after,.sec:has(+ .note)::after{display:none}
.sec-intro p:first-child{margin-top:0}
.doc h2{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:baseline;margin:0 0 16px;padding-top:14px;border-top:3px solid var(--ink);font-size:clamp(24px,2.8vw,31px);line-height:1.2;letter-spacing:-.01em;counter-increment:hn}
.lang-bn .doc h2{line-height:1.45;letter-spacing:0}
.hn::before{content:counter(hn);display:inline-block;min-width:1.7em;font:700 .7em/1 var(--mono);color:var(--red-t)}
.lang-bn .hn::before{content:counter(hn,bengali);font:700 .8em/1 var(--body)}
.doc p{margin:0 0 1em}
.doc ul,.doc ol{margin:0 0 1.1em;padding-left:1.3em}
.doc li{margin-bottom:.45em}
.doc li::marker{color:var(--red-t)}
.doc ul li::marker{content:"▪  "}
.doc strong{font-weight:700}
.doc table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 1.2em;font-size:15px}
.doc th,.doc td{padding:8px 12px;border:1px solid var(--rule);text-align:left;vertical-align:top}
.doc th{background:var(--paper);font-weight:700}
.doc blockquote{margin:0 0 1em;padding:4px 0 4px 16px;border-left:4px solid var(--gold)}
/* FAQ */
.qas{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) 26px;gap:14px;align-items:start;min-height:52px;padding:15px 0;cursor:pointer;font-weight:600;font-size:17px;line-height:1.45}
.lang-bn .qa summary{line-height:1.7}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover .qt{color:var(--red-t)}
.qn{margin-top:3px;padding:4px 6px;border-radius:2px;background:var(--ink);color:var(--sheet);font:700 12px/1 var(--mono)}
.lang-bn .qn{font:600 13px/1.1 var(--body)}
.qx{position:relative;width:26px;height:26px;margin-top:1px;border:1.5px solid var(--ink);border-radius:2px}
.qx::before,.qx::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;margin-top:-1px;background:var(--ink);transition:transform .2s}
.qx::after{transform:rotate(90deg)}
.qa[open] .qx{background:var(--gold)}
.qa[open] .qx::after{transform:rotate(0)}
.qa-a{padding:0 0 14px}
@media (min-width:600px){.qa-a{padding-left:58px}}
/* note (CTA) */
.note{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px 16px;align-items:start;margin-top:8px;padding:20px;border:2px solid var(--ink);border-left:10px solid var(--red);background:#FFF9EE}
.note-ic{width:36px;height:auto;color:var(--red-t)}
.note p{margin:0;font-weight:600;font-size:18px;line-height:1.5}
.lang-bn .note p{line-height:1.7}
.note .btn{grid-column:2;justify-self:start}
@media (max-width:419.98px){.note{grid-template-columns:1fr}.note .btn{grid-column:1;width:100%}}

/* ---------- ordering information (related) ---------- */
.order{background:var(--paper);padding-block:48px 64px;border-top:1px solid var(--rule)}
.order h2{margin:0 0 18px;font-size:clamp(24px,2.8vw,31px);line-height:1.2}
.ord{list-style:none;margin:0;padding:0;border-top:3px solid var(--ink)}
.ord a{display:grid;grid-template-columns:118px minmax(0,1fr) 30px;grid-template-areas:"oc ot oa" "oc od oa";gap:3px 20px;align-items:start;padding:16px 8px;border-bottom:1px solid var(--rule);text-decoration:none;color:var(--ink);transition:background .15s}
.ord a:hover{background:var(--sheet)}
.oc{grid-area:oc;margin-top:4px;font:700 13px/1.2 var(--mono);color:var(--red-t)}
.ot{grid-area:ot;font-weight:700;font-size:18px;line-height:1.35}
.od{grid-area:od;font-size:15px;line-height:1.5;color:var(--ink-2)}
.lang-bn .od{line-height:1.7}
.oa{grid-area:oa;align-self:center;position:relative;width:30px;height:30px;border:1.5px solid var(--ink);border-radius:50%}
.oa::before{content:"";position:absolute;left:8px;top:13px;width:12px;height:2px;background:var(--ink)}
.oa::after{content:"";position:absolute;left:12px;top:9px;width:7px;height:7px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)}
.ord a:hover .oa{background:var(--gold);border-color:var(--gold-3)}
.ord a:hover .ot{text-decoration:underline;text-decoration-color:var(--red)}
@media (max-width:599.98px){.ord a{grid-template-columns:minmax(0,1fr) 30px;grid-template-areas:"oc oa" "ot oa" "od oa"}}

/* ---------- footer: board edge with gold fingers ---------- */
.ft{background:var(--pcb);color:var(--silk-3);padding-bottom:26px}
.ft-edge{height:28px;background:repeating-linear-gradient(90deg,transparent 0 12px,var(--gold) 12px 34px,transparent 34px 40px) 0 0/auto 100%,var(--pcb);border-top:3px solid var(--paper);mask:linear-gradient(#000 70%,rgba(0,0,0,.85))}
.ft-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-block:26px 22px;border-bottom:1px solid rgba(236,235,227,.14)}
.ft .brand{margin-right:0}
.ft-grid{display:grid;gap:28px;padding-block:28px}
@media (min-width:860px){.ft-grid{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:48px}}
.ft-notice{padding:18px 20px;border:1px solid rgba(211,165,72,.55);border-radius:4px;background:rgba(0,0,0,.18)}
.ft-notice p{margin:0;font-size:15px;line-height:1.6}
.lang-bn .ft-notice p{line-height:1.8}
.ft .ft-h{margin:0 0 8px;font:700 13px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-2)}
.lang-bn .ft .ft-h{font:700 16px/1.6 var(--body);letter-spacing:0;text-transform:none}
.ft-col ul{list-style:none;margin:0;padding:0}
.ft-col a{display:inline-flex;align-items:center;min-height:44px;color:var(--silk);text-decoration:none;font-size:16px}
.ft-col a:hover{color:var(--gold-2);text-decoration:underline;text-decoration-color:var(--gold)}
.ft-base{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding-top:20px;border-top:1px solid rgba(236,235,227,.14);font:500 14px/1.3 var(--mono);color:var(--silk-2)}
.age{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;font:700 15px/1 var(--mono);box-shadow:0 0 0 3px var(--pcb),0 0 0 5px var(--red)}

/* 404 */
.nf{background:var(--sheet);padding-block:72px 96px;min-height:60vh}
.nf-code{margin:0;font:700 clamp(64px,14vw,140px)/1 var(--mono);color:var(--rule)}
.nf h1{font-size:clamp(28px,4vw,44px);margin:10px 0 12px}
.nf p{max-width:52ch}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .btn:hover{transform:none}
}
@media print{.hd,.board,.order,.ft,.side{display:none}}
.ft-notice{align-self:start}
@media (max-width:859.98px){.tb-pkg{padding:10px}.tb-pkg svg{max-width:170px}}
@media (min-width:600px) and (max-width:859.98px){.ft-grid{grid-template-columns:1fr 1fr}.ft-notice{grid-column:1/-1}}