/* playabcd1234.com — dual-legend keyboard. Putty keycaps, graphite case, bottle-green Enter, marigold cash-out. */
:root{
 --ground:#F2EDE3;--tray:#E7E0D1;--deck:#E9E2D3;--ink:#1E1D1A;--ink-2:#37342E;--muted:#5F5950;--line:#D4CBB9;
 --cap:#FCFAF5;--cap-b:#F2EDE3;--cap-edge:#D5CBB7;--cap-rim:#B8AD97;
 --slate:#3E4447;--slate-edge:#24292B;--case:#1E2123;--case-2:#2A2E31;--lid:#1A1D1E;--screen:#0D1312;
 --enter:#0E6A4F;--enter-hi:#138062;--enter-edge:#0A4D3A;--enter-rim:#07372A;--enter-tint:#DDEEE5;
 --gold:#F2B634;--gold-edge:#B9850F;--red:#B3301F;--jade:#3BD49B;
 --f-disp:"Geologica","Mina","Noto Sans Bengali",system-ui,sans-serif;
 --f-body:"Atkinson Hyperlegible Next","Noto Sans Bengali",system-ui,sans-serif;
 --f-mono:"Azeret Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
 --font-head:var(--f-disp);--font-body:var(--f-body);
 --r:10px;--wrap:1240px;--gut:16px;--fnh:44px;
 color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--ground);color:var(--ink-2);font:400 17px/1.7 var(--f-body);text-rendering:optimizeLegibility;overflow-x:hidden}
body.lang-bn{font-size:17.5px;line-height:1.8}
img,svg{max-width:100%}
a{color:var(--enter);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--enter-edge)}
:focus-visible{outline:3px solid var(--enter);outline-offset:2px;border-radius:6px}
.base :focus-visible,.fn :focus-visible,.lap :focus-visible{outline-color:var(--gold)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
@media (min-width:768px){:root{--gut:28px}}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--enter);color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none}
.skip:focus{top:10px}
h1,h2,h3{font-family:var(--f-disp);color:var(--ink);margin:0;font-weight:750;text-wrap:balance}
body.lang-bn h1,body.lang-bn h2,body.lang-bn h3{font-weight:700;line-height:1.55}

/* ---------- keycap primitive ---------- */
.cap,.nk,.menu-key,.k-plain,.crumbs a,.lsw a,.rk,.tk,.hk,.mod-k,.bigkey,.age{
 background:linear-gradient(180deg,var(--cap),var(--cap-b));border-radius:var(--r);
 box-shadow:0 0 0 1px var(--cap-rim),inset 0 -4px 0 var(--cap-edge),0 2px 0 var(--cap-rim),0 8px 14px -10px rgba(52,40,16,.45)}
.nk,.menu-key,.k-plain,.crumbs a,.lsw a,.rk,.k-enter{transition:transform .12s ease,box-shadow .12s ease,background-color .15s}
.nk:hover,.menu-key:hover,.k-plain:hover,.crumbs a:hover,.rk:hover{transform:translateY(1px);box-shadow:0 0 0 1px var(--cap-rim),inset 0 -3px 0 var(--cap-edge),0 1px 0 var(--cap-rim),0 6px 10px -10px rgba(52,40,16,.45)}
.nk:active,.menu-key:active,.k-plain:active,.crumbs a:active,.rk:active{transform:translateY(3px);box-shadow:0 0 0 1px var(--cap-rim),inset 0 -1px 0 var(--cap-edge)}

/* brand = the name typed out as keys, each with its Bangla phonetic twin */
.caps{display:inline-grid;grid-auto-flow:column;grid-auto-columns:var(--cs,28px);gap:var(--cg,3px)}
.cap{position:relative;display:block;aspect-ratio:1;border-radius:calc(var(--cs,28px)*.2);box-shadow:0 0 0 1px var(--cap-rim),inset 0 calc(var(--cs,28px)*-.12) 0 var(--cap-edge),0 1px 0 var(--cap-rim)}
.cap b{position:absolute;left:18%;top:8%;font:700 calc(var(--cs,28px)*.44)/1 var(--f-mono);color:var(--ink)}
.cap i{position:absolute;right:16%;bottom:20%;font:600 calc(var(--cs,28px)*.3)/1 "Noto Sans Bengali",var(--f-body);font-style:normal;color:var(--enter)}
.cap:nth-child(n+5) b{color:var(--enter)}
.cap:nth-child(n+5) i{color:var(--muted)}

/* ---------- header ---------- */
.hd{position:sticky;top:calc(var(--fnh)*-1);z-index:40}
.fn{background:var(--case);color:#D9D3C7;height:var(--fnh)}
.fn-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fn-tag{margin:0;display:flex;align-items:center;gap:9px;min-width:0;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led{flex:none;width:7px;height:7px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 3px rgba(59,212,155,.18),0 0 10px rgba(59,212,155,.7)}
.lsw{display:flex;gap:6px;flex:none}
.lsw a{display:inline-flex;align-items:center;gap:7px;min-height:34px;min-width:44px;justify-content:center;padding:0 11px;border-radius:8px;text-decoration:none;font:600 14px/1 var(--f-body);color:#ECE7DC;
 background:linear-gradient(180deg,#43494C,#373C3F);box-shadow:0 0 0 1px #15181A,inset 0 -3px 0 #25292B}
.lsw a[aria-current]{background:linear-gradient(180deg,var(--enter-hi),var(--enter));box-shadow:0 0 0 1px var(--enter-rim),inset 0 -3px 0 var(--enter-edge);color:#fff}
.lsw-c{font:700 11px/1 var(--f-mono);opacity:.7;text-transform:uppercase}
.fn .lsw a:hover{transform:none;color:#fff}
@media (max-width:520px){.lsw-c{display:none}.fn-tag{font-size:12.5px}}

.bar{background:color-mix(in srgb,var(--ground) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;gap:14px;min-height:68px;position:relative}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);flex:none;padding:6px 0}
.wm{display:inline-grid;grid-template-columns:auto;min-height:48px;padding:6px 16px 10px 12px;border-radius:10px;gap:1px;
 background:linear-gradient(180deg,var(--cap),var(--cap-b));box-shadow:0 0 0 1px var(--cap-rim),inset 0 -4px 0 var(--cap-edge),0 2px 0 var(--cap-rim);transition:transform .12s,box-shadow .12s}
.wm b{font:700 18px/1.1 var(--f-mono);color:var(--ink);letter-spacing:-.02em}
.wm i{justify-self:end;font:600 11.5px/1.2 var(--f-body);font-style:normal;color:var(--enter);margin-right:-4px}
body.lang-bn .wm i{font-size:12.5px;line-height:1.3}
.brand:hover .wm{transform:translateY(1px);box-shadow:0 0 0 1px var(--cap-rim),inset 0 -3px 0 var(--cap-edge),0 1px 0 var(--cap-rim)}
.brand:hover{color:var(--ink)}
.brand-f{padding:7px 0;min-height:44px}
.menu-key{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:46px;min-width:48px;padding:0 13px 3px;border:0;cursor:pointer;color:var(--ink);font:700 15px/1 var(--f-body)}
.mk-i{display:grid;gap:4px;width:18px}
.mk-i i{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.menu-key[aria-expanded=true] .mk-i i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-key[aria-expanded=true] .mk-i i:nth-child(2){opacity:0}
.menu-key[aria-expanded=true] .mk-i i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:400px){.mk-t{display:none}}

.keys{display:none}
.nk{display:flex;align-items:center;gap:10px;min-height:52px;padding:6px 14px 9px;text-decoration:none;color:var(--ink);font:600 15.5px/1.35 var(--f-body)}
.nk-n{display:flex;flex-direction:column;align-items:flex-start;line-height:1;gap:3px;min-width:14px}
.nk-n b{font:700 12px/1 var(--f-mono);color:var(--muted)}
.nk-n i{font:600 11px/1 "Noto Sans Bengali",sans-serif;font-style:normal;color:var(--enter)}
.nk[aria-current=page]{background:var(--enter-tint);box-shadow:0 0 0 1.5px var(--enter),inset 0 -2px 0 #B9D9C8;transform:translateY(2px)}
.nk-enter{color:#fff;background:linear-gradient(180deg,var(--enter-hi),var(--enter));box-shadow:0 0 0 1px var(--enter-rim),inset 0 -4px 0 var(--enter-edge),0 2px 0 var(--enter-rim)}
.nk-enter:hover{color:#fff;box-shadow:0 0 0 1px var(--enter-rim),inset 0 -3px 0 var(--enter-edge),0 1px 0 var(--enter-rim)}
.ret{flex:none;display:inline-block;width:20px;height:14px;background:currentColor;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M18 1v6.5H3M7.5 2.5 2.5 7.5l5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M18 1v6.5H3M7.5 2.5 2.5 7.5l5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* mobile / tablet drawer */
@media (max-width:1159px){
 .keys{position:absolute;left:0;right:0;top:100%;background:var(--tray);border-bottom:1px solid var(--cap-rim);box-shadow:0 24px 40px -24px rgba(30,24,10,.45);max-height:calc(100vh - 80px);overflow-y:auto}
 .hd.nav-open .keys{display:block}
 .keys-in{display:grid;gap:10px;padding:16px var(--gut) 20px}
 .nk{min-height:54px}
 .nk-enter{justify-content:space-between}
}
@media (min-width:560px) and (max-width:1159px){.keys-in{grid-template-columns:1fr 1fr}.nk-enter{grid-column:1/-1}}
@media (min-width:1160px){
 .menu-key{display:none}
 .keys{display:block;margin-left:auto}
 .keys-in{display:flex;align-items:center;gap:8px}
 .nk{font-size:14.5px;min-height:48px;padding:5px 12px 8px}
 .nk-enter{margin-left:8px;gap:12px;padding-inline:16px}
}

/* ---------- buttons ---------- */
.k-enter{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:56px;padding:10px 22px 14px;border-radius:12px;text-decoration:none;color:#fff;font:700 17px/1.3 var(--f-disp);
 background:linear-gradient(180deg,var(--enter-hi),var(--enter));box-shadow:0 0 0 1px var(--enter-rim),inset 0 -5px 0 var(--enter-edge),0 3px 0 var(--enter-rim),0 14px 22px -14px rgba(7,55,42,.8)}
.k-enter:hover{color:#fff;transform:translateY(1px);box-shadow:0 0 0 1px var(--enter-rim),inset 0 -4px 0 var(--enter-edge),0 2px 0 var(--enter-rim),0 10px 18px -14px rgba(7,55,42,.8)}
.k-enter:active{transform:translateY(4px);box-shadow:0 0 0 1px var(--enter-rim),inset 0 -1px 0 var(--enter-edge)}
.k-sm{min-height:48px;font-size:15.5px;padding:8px 16px 11px;width:100%;justify-content:space-between}
.k-plain{display:inline-flex;align-items:center;min-height:56px;padding:10px 20px 14px;border-radius:12px;text-decoration:none;color:var(--ink);font:700 16px/1.3 var(--f-disp)}
.k-plain:hover{color:var(--ink)}

/* ---------- home hero ---------- */
.hero{background:
 linear-gradient(180deg,rgba(255,255,255,.35),transparent 140px),
 repeating-linear-gradient(90deg,transparent 0 55px,rgba(120,100,60,.07) 55px 56px),
 repeating-linear-gradient(0deg,transparent 0 55px,rgba(120,100,60,.07) 55px 56px),var(--tray);
 border-bottom:1px solid var(--line);padding:28px 0 36px}
.hero-grid{display:grid;gap:28px;align-items:start}
.kbd-row{margin:0 0 20px}
.caps-lg{--cs:clamp(30px,calc((100vw - 32px - 35px)/8),58px);--cg:5px}
.caps-lg .cap{border-radius:calc(var(--cs)*.18)}
.hero h1{font-size:clamp(32px,6.4vw,66px);line-height:1.04;letter-spacing:-.025em}
body.lang-bn .hero h1{font-size:clamp(28px,4.6vw,46px);line-height:1.5;letter-spacing:0}
.caret{display:inline-block;width:.09em;min-width:4px;height:.82em;margin-left:.12em;vertical-align:-.06em;background:var(--enter);border-radius:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.lead{margin-top:18px;font-size:18.5px;color:var(--ink-2);max-width:62ch}
.lead p{margin:0}
body.lang-bn .lead{font-size:18.5px;line-height:1.85}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.mods{list-style:none;margin:28px 0 0;padding:18px 0 0;display:grid;gap:12px;border-top:1.5px dashed var(--cap-rim)}
.mods li{display:flex;align-items:center;gap:14px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.mod-k{flex:none;display:grid;place-items:center;width:52px;height:40px;padding-bottom:3px;color:#EDE8DE;font:700 13px/1 var(--f-mono);
 background:linear-gradient(180deg,#4A5154,var(--slate));box-shadow:0 0 0 1px var(--slate-edge),inset 0 -4px 0 #2C3134,0 2px 0 var(--slate-edge)}
.mod-coin::before{content:"";width:15px;height:15px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE6A3,var(--gold) 55%,var(--gold-edge));box-shadow:0 0 0 2px rgba(242,182,52,.25)}
.mod-x::before{content:"";width:18px;height:12px;border-radius:2px;border:2px solid #EDE8DE;background:linear-gradient(135deg,transparent 45%,#EDE8DE 45% 57%,transparent 57%)}
@media (min-width:1000px){
 .hero{padding:44px 0 56px}
 .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
 .hero-copy{position:sticky;top:96px}
 .caps-lg{--cs:52px}
}

/* laptop-shaped game shell */
.lap{container:lap/inline-size;scroll-margin-top:84px;border-radius:20px;background:var(--lid);box-shadow:0 0 0 1px #0B0D0E,0 30px 60px -34px rgba(20,16,8,.75),0 2px 0 #0B0D0E;overflow:clip;min-width:0}
.lap-top{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 8px;color:#A8B3AE;font:600 13.5px/1.4 var(--f-body)}
.dots{display:flex;gap:6px}
.dots i{width:7px;height:7px;border-radius:50%;background:#394043}
.dots i:first-child{background:var(--jade);box-shadow:0 0 8px rgba(59,212,155,.8)}
.lap-t{flex:1;min-width:0}
.lap-tag{font:700 11.5px/1 var(--f-mono);color:var(--lid);background:var(--gold);padding:6px 9px 7px;border-radius:6px;box-shadow:inset 0 -2px 0 var(--gold-edge)}
body.lang-bn .lap-tag{font:700 12.5px/1.2 var(--f-body)}

/* ---------- inner page head ---------- */
.phead{background:
 repeating-linear-gradient(90deg,transparent 0 55px,rgba(120,100,60,.06) 55px 56px),var(--tray);border-bottom:1px solid var(--line);padding:22px 0 32px}
.phead-grid{display:grid;gap:18px;align-items:end}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:14.5px}
.crumbs li{display:flex;align-items:center;gap:10px;min-width:0}
.crumbs li+li::before{content:"";width:8px;height:8px;border-top:2px solid var(--muted);border-right:2px solid var(--muted);transform:rotate(45deg);flex:none;margin-right:2px}
.crumbs a{display:inline-flex;align-items:center;min-height:40px;min-width:44px;justify-content:center;padding:4px 13px 7px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600}
.crumbs span{color:var(--muted);font-weight:600}
.phead h1{font-size:clamp(29px,5vw,52px);line-height:1.08;letter-spacing:-.02em;max-width:22ch}
body.lang-bn .phead h1{font-size:clamp(26px,4.4vw,44px);line-height:1.5;letter-spacing:0;max-width:26ch}
.phead .lead{margin-top:14px}
.bigkey{display:none}
@media (min-width:720px){
 .phead{padding:30px 0 44px}
 .phead-grid{grid-template-columns:minmax(0,1fr) auto;gap:40px}
 .bigkey{display:block;position:relative;width:150px;height:150px;border-radius:24px;box-shadow:0 0 0 1px var(--cap-rim),inset 0 -12px 0 var(--cap-edge),0 5px 0 var(--cap-rim),0 30px 40px -26px rgba(52,40,16,.6);transform:rotate(-4deg)}
 .bigkey b{position:absolute;left:22px;top:12px;font:700 74px/1 var(--f-mono);color:var(--ink)}
 .bigkey i{position:absolute;right:22px;bottom:26px;font:600 40px/1 "Noto Sans Bengali",sans-serif;font-style:normal;color:var(--enter)}
 .bigkey-i b{font-style:italic}
}

/* ---------- article ---------- */
.page{padding:34px 0 56px}
.page-grid{display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
.rail{display:contents}
.pad{order:-1}
.content{order:0;min-width:0;counter-reset:sec}
.mini{order:1}
@media (min-width:1100px){
 .page{padding:54px 0 80px}
 .page-grid{grid-template-columns:minmax(0,1fr) 300px;gap:64px}
 .rail{display:block;order:1}
 .pad,.mini{order:0}
 .rail{position:sticky;top:96px;align-self:start;display:grid;gap:22px}
}
.content{max-width:72ch}
.content>*:first-child{margin-top:0}
.intro-more p,.sec p,.faq p{margin:0 0 1.05em}
.sec{margin-top:52px;padding-top:4px}
.sec-plain{margin-top:24px}
.content h2{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;font-size:clamp(23px,3.1vw,31px);line-height:1.2;letter-spacing:-.015em;margin:0 0 20px}
body.lang-bn .content h2{font-size:clamp(22px,2.9vw,28px);letter-spacing:0;line-height:1.55}
.hk{display:grid;place-items:center;width:48px;height:48px;padding-bottom:4px;font:700 17px/1 var(--f-mono);color:var(--enter);border-radius:11px}
.sec .hk::before{counter-increment:sec;content:counter(sec,decimal-leading-zero)}
body.lang-bn .sec .hk::before{content:counter(sec,bengali);font:700 21px/1 "Noto Sans Bengali",sans-serif}
.hk-q{color:#fff;background:linear-gradient(180deg,var(--enter-hi),var(--enter));box-shadow:0 0 0 1px var(--enter-rim),inset 0 -4px 0 var(--enter-edge),0 2px 0 var(--enter-rim)}
.content h3{font-size:20px;line-height:1.35;margin:30px 0 12px;padding-left:14px;border-left:4px solid var(--gold)}
body.lang-bn .content h3{font-size:20px;line-height:1.6}
.content strong{color:var(--ink);font-weight:700}
.content ul,.content ol{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:10px}
.content li{position:relative;padding-left:34px}
.content ul>li::before{content:"";position:absolute;left:4px;top:.62em;width:12px;height:12px;border-radius:3px;background:var(--cap);box-shadow:0 0 0 1.5px var(--cap-rim),inset 0 -2px 0 var(--cap-edge)}
.content ol{counter-reset:li}
.content ol>li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:.2em;width:24px;height:24px;display:grid;place-items:center;border-radius:6px;font:700 12.5px/1 var(--f-mono);color:#fff;background:var(--slate);box-shadow:inset 0 -2px 0 var(--slate-edge)}
body.lang-bn .content ol>li::before{content:counter(li,bengali);font:700 14px/1 "Noto Sans Bengali",sans-serif}
body.lang-bn .content ul>li::before{top:.72em}
.content code{font:500 .86em/1 var(--f-mono);background:var(--tray);padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
.content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:8px 0 1.4em;font-size:15.5px;line-height:1.55;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
.content th,.content td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);min-width:120px}
.content th{background:var(--case-2);color:#F2EEE6;font-weight:700}
.content tr:nth-child(even) td{background:rgba(231,224,209,.5)}

/* FAQ — each question is a key that stays pressed while open */
.faq{margin-top:60px}
.faq-list{display:grid;gap:12px}
.faq details{border-radius:12px;background:var(--cap);box-shadow:0 0 0 1px var(--cap-rim),inset 0 -4px 0 var(--cap-edge),0 2px 0 var(--cap-rim)}
.faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 34px;gap:16px;align-items:center;cursor:pointer;padding:15px 16px 18px 20px;min-height:56px;font:650 17px/1.45 var(--f-disp);color:var(--ink)}
body.lang-bn .faq summary{font-weight:600;line-height:1.7}
.faq summary::-webkit-details-marker{display:none}
.pm{position:relative;width:34px;height:34px;border-radius:8px;background:var(--slate);box-shadow:inset 0 -3px 0 var(--slate-edge)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:calc(50% - 1.5px);width:13px;height:2px;margin-left:-6.5px;background:#fff;border-radius:2px;transition:transform .2s}
.pm::after{transform:rotate(90deg)}
.faq details[open]{background:#FBFDF9;box-shadow:0 0 0 1.5px var(--enter),inset 0 -1px 0 var(--cap-edge);transform:translateY(2px)}
.faq details[open] .pm{background:var(--enter);box-shadow:inset 0 -3px 0 var(--enter-edge)}
.faq details[open] .pm::after{transform:rotate(0)}
.faq .a{padding:0 20px 8px;font-size:16.5px}

.cta{margin-top:56px;padding:22px;border-radius:16px;background:var(--case);color:#E6E1D7;display:grid;gap:18px;box-shadow:0 30px 50px -40px rgba(0,0,0,.8)}
.cta p{margin:0;font:600 18px/1.55 var(--f-disp);color:#F4F0E8}
body.lang-bn .cta p{line-height:1.75}
@media (min-width:640px){.cta{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:26px 28px}}

/* numpad TOC */
.pad{border-radius:16px;background:var(--tray);padding:16px;box-shadow:inset 0 0 0 1px var(--line)}
.pad-t{margin:0 0 12px;font:700 12px/1.4 var(--f-mono);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
body.lang-bn .pad-t{font:700 14.5px/1.6 var(--f-body);letter-spacing:0;text-transform:none}
.pad ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pad a{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2);font-size:15px;line-height:1.4;border-radius:8px}
body.lang-bn .pad a{line-height:1.6}
.tl{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tk{display:grid;place-items:center;width:36px;height:36px;padding-bottom:3px;border-radius:8px;font:700 13px/1 var(--f-mono);color:var(--ink);box-shadow:0 0 0 1px var(--cap-rim),inset 0 -3px 0 var(--cap-edge)}
body.lang-bn .tk{font:700 15px/1 "Noto Sans Bengali",sans-serif}
.pad a:hover{color:var(--enter)}
.pad a.on{color:var(--ink);font-weight:700}
.pad a.on .tk{background:var(--enter);color:#fff;box-shadow:0 0 0 1px var(--enter-rim),inset 0 -1px 0 var(--enter-edge);transform:translateY(2px)}

.mini{border-radius:16px;background:var(--case);color:#CFC9BD;padding:18px;display:grid;gap:10px}
.mini-scr{position:relative;display:block;height:78px;border-radius:10px;background:
 linear-gradient(rgba(170,230,205,.07) 1px,transparent 1px) 0 0/100% 19px,linear-gradient(90deg,rgba(170,230,205,.07) 1px,transparent 1px) 0 0/19px 100%,var(--screen);overflow:hidden}
.mini-scr i{position:absolute;left:12px;bottom:14px;width:72%;height:68%;border:0 solid var(--jade);border-bottom-width:3px;border-right-width:3px;border-radius:0 0 100% 0;filter:drop-shadow(0 0 5px rgba(59,212,155,.55))}
.mini-scr i::after{content:"";position:absolute;right:-6.5px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.mini-t{margin:4px 0 0;font:700 18px/1.4 var(--f-disp);color:#F4F0E8}
.mini-p{margin:0 0 6px;font-size:15px;line-height:1.6}
body.lang-bn .mini-p{line-height:1.75}

/* ---------- related ---------- */
.rel{padding:52px 0 64px;background:var(--tray);border-top:1px solid var(--line)}
.rel-h{font-size:clamp(24px,3vw,32px);margin:0 0 24px;letter-spacing:-.015em}
body.lang-bn .rel-h{letter-spacing:0}
.rel-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.rk{position:relative;display:grid;align-content:start;gap:8px;padding:18px 20px 24px;border-radius:14px;text-decoration:none;color:var(--ink-2);min-height:150px}
.rk-n{font:700 13px/1 var(--f-mono);color:var(--muted)}
body.lang-bn .rk-n{font:700 16px/1 "Noto Sans Bengali",sans-serif}
.rk strong{font:700 19px/1.3 var(--f-disp);color:var(--ink);padding-right:28px}
body.lang-bn .rk strong{line-height:1.55}
.rk-d{font-size:15px;line-height:1.55;color:var(--muted)}
body.lang-bn .rk-d{line-height:1.75}
.rk-go{position:absolute;right:18px;top:18px;width:18px;height:18px;border-top:2.5px solid var(--enter);border-right:2.5px solid var(--enter);transform:rotate(45deg) scale(.7)}
.rk:hover{color:var(--ink-2)}
.rk:hover strong{color:var(--enter)}

/* ---------- footer = keyboard case ---------- */
.base{background:var(--case);color:#BDB7AB;padding:48px 0 22px;font-size:15.5px}
.base-grid{display:grid;gap:34px}
.brand-f .caps{--cs:30px;--cg:4px}
.caps-f .cap{background:linear-gradient(180deg,#464C50,#393E41);box-shadow:0 0 0 1px #111416,inset 0 -4px 0 #2A2E31,0 1px 0 #111416}
.caps-f .cap b{color:#EEE9DF}
.caps-f .cap i{color:var(--jade)}
.caps-f .cap:nth-child(n+5) b{color:var(--jade)}
.caps-f .cap:nth-child(n+5) i{color:#A8A296}
.disc{margin:18px 0 0;max-width:52ch;line-height:1.7;color:#C9C3B7}
body.lang-bn .disc{line-height:1.85}
.base h2{font:700 12.5px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#8E887C;margin:0 0 8px}
body.lang-bn .base h2{font:700 15px/1.6 var(--f-body);letter-spacing:0;text-transform:none;color:#A39D90}
.base ul{list-style:none;margin:0;padding:0;display:grid}
.base li a{display:flex;align-items:center;min-height:44px;color:#ECE7DC;text-decoration:none;border-bottom:1px solid #30353A;line-height:1.4}
.base li a:hover{color:var(--gold)}
.base-b{margin-top:36px;padding-top:18px;border-top:1px solid #30353A;display:flex;flex-wrap:wrap;align-items:center;gap:14px;font:500 13.5px/1.4 var(--f-mono)}
.base-b .lsw{margin-left:auto}
.age{display:grid;place-items:center;width:52px;height:40px;padding-bottom:3px;font:700 14px/1 var(--f-mono);color:#fff;background:linear-gradient(180deg,#D24A36,#B3301F);box-shadow:0 0 0 1px #6E1C12,inset 0 -4px 0 #8C2517}
@media (min-width:768px){.base-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:48px}}

/* ---------- 404 ---------- */
.nf{padding:64px var(--gut) 90px;max-width:760px}
.nf .caps{--cs:64px;--cg:8px;margin:0 0 28px}
.nf h1{font-size:clamp(30px,5vw,48px);margin-bottom:12px}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .caret{opacity:1}
}
@media (min-width:1000px){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (min-width:600px) and (max-width:999px){.mods{grid-template-columns:repeat(3,minmax(0,1fr))}.mods li{flex-direction:column;align-items:flex-start;gap:10px}}