/* jellybeat.info — Jelly groovebox. Warm aluminium chassis, OLED screen, translucent jelly pads. */
@counter-style bn2{system:extends bengali;pad:2 "০"}
:root{
 --alu:#E8E5DE;--alu-hi:#F4F2ED;--alu-2:#DBD7CE;--alu-3:#C9C3B7;--line:#B8B1A4;
 --ink:#19181C;--ink-2:#2B292F;--muted:#58544C;--paper:#F5F3EE;
 --oled:#0E0F12;--oled-2:#16171B;--oled-t:#EDEAE2;--oled-m:#A19D94;
 --rasp:#D2295A;--rasp-d:#B01E4A;--tang:#FF8D30;--lime:#B0DD48;--mint:#3BCBA6;--grape:#8E5CD8;
 --jel:var(--rasp);
 --font-head:"Bricolage Grotesque","Mina",system-ui,sans-serif;
 --font-body:"Red Hat Text","Noto Sans Bengali",system-ui,sans-serif;
 --font-mono:"Red Hat Mono","Noto Sans Bengali",ui-monospace,monospace;
 --font-num:"Red Hat Mono","Noto Sans Bengali",ui-monospace,monospace;
 --surface:#F5F3EE;--surface-2:#E8E5DE;--text:#19181C;--heading:#19181C;--border:#C9C3B7;--primary:#D2295A;--primary-contrast:#fff;--accent:#B0DD48;
 --r:14px;--wrap:1240px;--gut:clamp(16px,3.4vw,40px);
 color-scheme:light;
}
.lang-bn{--font-mono:"Noto Sans Bengali","Red Hat Mono",system-ui,sans-serif}
.j-rasp{--jel:var(--rasp)}.j-tang{--jel:var(--tang)}.j-lime{--jel:var(--lime)}.j-mint{--jel:var(--mint)}.j-grape{--jel:var(--grape)}.j-alu{--jel:#A59E90}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--font-body);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.lang-bn{line-height:1.85}
img,svg{max-width:100%}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--font-head);color:var(--ink);margin:0;text-wrap:balance}
:focus-visible{outline:3px solid var(--rasp);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:12px;top:-80px;z-index:50;background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--rasp);box-shadow:0 0 0 3px rgba(210,41,90,.22),0 0 10px rgba(210,41,90,.7);flex:none}
.tri{display:inline-block;width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;flex:none}

/* ---------- header: status strip + key row ---------- */
.deck{background:linear-gradient(180deg,var(--alu-hi),var(--alu));border-bottom:1px solid var(--line);box-shadow:0 1px 0 #fff inset}
.strip{background:var(--ink);color:#D8D4CA}
.strip-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.status{margin:0;display:flex;align-items:center;gap:10px;font:500 13px/1.5 var(--font-mono);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status .rec{margin-left:2px}
:lang(en) .status{letter-spacing:.04em}
.lsw{display:flex;flex:none;background:#0E0D10;border-radius:999px;padding:3px;gap:2px;box-shadow:inset 0 0 0 1px #3A383F}
.lsw a{display:flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;color:#CFCBC1;text-decoration:none;font:600 14px/1 var(--font-body)}
.lsw a:hover{color:#fff}
.lsw a[aria-current]{background:var(--alu);color:var(--ink);box-shadow:0 2px 0 var(--alu-3) inset,0 -1px 0 #fff inset}
.deck-in{display:flex;align-items:center;gap:14px;min-height:76px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);margin-right:auto;min-height:48px}
.mark{width:44px;height:44px;flex:none;filter:drop-shadow(0 3px 4px rgba(176,30,74,.3))}
.mk-body{fill:var(--rasp)}.mk-beat{stroke:#fff}.mk-shine{fill:rgba(255,255,255,.45)}
.brand-t{display:flex;flex-direction:column;line-height:1.1}
.brand-n{font:800 19px/1.1 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.02em;white-space:nowrap}
.brand-s{font:500 12.5px/1.4 var(--font-mono);color:var(--muted)}
:lang(en) .brand-s{text-transform:uppercase;letter-spacing:.14em}
.menu-key{display:inline-flex;align-items:center;gap:10px;min-height:48px;min-width:48px;padding:0 14px 0 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer;
 background:linear-gradient(180deg,#FBFAF7,var(--alu-2));box-shadow:0 3px 0 var(--alu-3),inset 0 1px 0 #fff;color:var(--ink);font:700 15px/1 var(--font-body)}
.menu-key:active{transform:translateY(2px);box-shadow:0 1px 0 var(--alu-3)}
.mk-ic{display:grid;grid-template-columns:8px 8px;gap:3px}
.mk-ic i{width:8px;height:8px;border-radius:2px;background:var(--ink-2)}
.mk-ic i:nth-child(1){background:var(--rasp)}
.deck.open .mk-ic i{background:var(--rasp)}
.keys{display:none;width:100%;grid-template-columns:1fr 1fr;gap:10px;padding:4px 0 8px}
.deck.open .keys{display:grid}
.key{position:relative;display:flex;align-items:flex-end;min-height:64px;padding:10px 12px 10px 12px;border-radius:12px;text-decoration:none;color:var(--ink);
 background:linear-gradient(180deg,#FCFBF8,var(--alu-2));border:1px solid var(--line);box-shadow:0 4px 0 var(--alu-3),inset 0 1px 0 #fff;font:600 15px/1.3 var(--font-body);transition:transform .12s,box-shadow .12s}
.key .led{position:absolute;top:10px;left:12px;width:18px;height:5px;border-radius:3px;background:#B9B2A5;box-shadow:inset 0 1px 1px rgba(0,0,0,.2)}
.key:hover .led,.key[aria-current] .led{background:var(--jel);box-shadow:0 0 8px var(--jel),0 0 0 1px rgba(0,0,0,.08)}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--alu-3)}
.key[aria-current]{background:linear-gradient(180deg,#fff,var(--alu))}
.key-t{padding-top:10px}
.play-key{display:none;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border-radius:999px;text-decoration:none;color:#fff;background:radial-gradient(120% 140% at 30% 15%,#E94C78,var(--rasp) 55%,var(--rasp-d));
 box-shadow:0 4px 0 #8C1739,0 10px 22px -8px rgba(176,30,74,.55),inset 0 1px 0 rgba(255,255,255,.35);font:700 15px/1.2 var(--font-body)}
.play-key:hover{filter:brightness(1.06)}
.deck.open .play-key{display:flex;width:100%;margin:6px 0 4px}
@media (min-width:640px){.play-key{display:flex}.deck.open .play-key{width:auto;margin:0}}
@media (min-width:980px){
 .menu-key{display:none}
 .deck-in{flex-wrap:nowrap;gap:18px;min-height:88px}
 .brand{margin-right:0}
 .keys,.deck.open .keys{display:flex;flex:1;width:auto;gap:8px;padding:0;justify-content:center}
 .key{flex:1 1 0;max-width:170px;min-height:58px;font-size:14px;line-height:1.25;padding:9px 11px}
 .lang-bn .key{font-size:15px;line-height:1.4}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;text-decoration:none;font:700 16px/1.25 var(--font-body);text-align:center;transition:transform .12s,filter .12s}
.btn:active{transform:translateY(2px)}
.btn-rasp{color:#fff;background:radial-gradient(120% 140% at 30% 15%,#E94C78,var(--rasp) 55%,var(--rasp-d));box-shadow:0 4px 0 #8C1739,0 12px 24px -10px rgba(176,30,74,.6),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-rasp:hover{filter:brightness(1.06)}
.btn-cap{color:var(--ink);background:linear-gradient(180deg,#FDFCFA,var(--alu-2));border:1px solid var(--line);box-shadow:0 4px 0 var(--alu-3),inset 0 1px 0 #fff}

/* ---------- home: the rig ---------- */
.rig{padding:clamp(18px,3.4vw,44px) 0 clamp(26px,4vw,56px);background:radial-gradient(80% 60% at 85% 0%,rgba(176,221,72,.14),transparent 60%),radial-gradient(60% 50% at 0% 100%,rgba(210,41,90,.08),transparent 60%)}
.rig .wrap{container-type:inline-size}
.chassis{position:relative;display:grid;gap:22px;padding:clamp(18px,3.2vw,40px);border-radius:30px;
 background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),linear-gradient(170deg,#F1EEE8,#DCD8CF 70%,#D3CEC3);
 box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(0,0,0,.07),0 2px 0 var(--alu-3),0 40px 70px -40px rgba(60,45,30,.45);border:1px solid #CEC8BC}
.chassis::before{content:"";position:absolute;inset:12px;pointer-events:none;border-radius:20px;
 background:radial-gradient(circle,#8F887B 0 2.2px,#E9E6E0 2.8px 4.4px,#A9A294 5px,transparent 5.6px) 0 0/12px 12px no-repeat,radial-gradient(circle,#8F887B 0 2.2px,#E9E6E0 2.8px 4.4px,#A9A294 5px,transparent 5.6px) 100% 0/12px 12px no-repeat,radial-gradient(circle,#8F887B 0 2.2px,#E9E6E0 2.8px 4.4px,#A9A294 5px,transparent 5.6px) 0 100%/12px 12px no-repeat,radial-gradient(circle,#8F887B 0 2.2px,#E9E6E0 2.8px 4.4px,#A9A294 5px,transparent 5.6px) 100% 100%/12px 12px no-repeat}
.rig-copy{min-width:0;padding:6px 4px 0}
.lcd{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:9px 14px;border-radius:10px;background:var(--oled);color:var(--lime);font:500 13.5px/1.4 var(--font-mono);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 1px 0 #fff}
:lang(en) .lcd{text-transform:uppercase;letter-spacing:.12em}
.rig h1{font-weight:800;font-size:clamp(27px,4.6cqw,52px);line-height:1.1;letter-spacing:-.025em;margin:0 0 18px}
.lang-bn .rig h1{letter-spacing:0;line-height:1.35;font-size:clamp(28px,4.8cqw,54px)}
.lead{font-size:clamp(17px,1.9cqw,19px);color:#34322F;max-width:62ch}
.lead p{margin:0 0 1em}
.acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin:6px 0 20px}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags li{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:8px;background:rgba(255,255,255,.55);border:1px solid var(--line);font:500 14px/1.45 var(--font-mono);color:#3A3833}
.tags li::before{content:"";width:6px;height:14px;border-radius:2px;background:var(--lime);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.tags li:nth-child(2)::before{background:var(--tang)}.tags li:nth-child(3)::before{background:var(--mint)}
.screen{min-width:0;scroll-margin-top:16px}
.bezel{background:linear-gradient(180deg,#232228,#141317);border-radius:24px;padding:10px;box-shadow:0 1px 0 #fff,0 0 0 1px #0A0A0C,inset 0 1px 0 rgba(255,255,255,.12),0 24px 40px -24px rgba(0,0,0,.6)}
.bz-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px 10px;color:var(--oled-m);font:500 13px/1.4 var(--font-mono)}
.bz-l{display:flex;align-items:center;gap:9px;min-width:0}
:lang(en) .bz-l{letter-spacing:.08em;text-transform:uppercase}
.bz-g{width:64px;height:12px;flex:none;background:radial-gradient(circle,#3C3A42 1.6px,transparent 2px) 0 0/8px 6px}
.pads{display:grid;grid-template-columns:1fr 1fr;gap:12px;counter-reset:pd}
.pad{position:relative;counter-increment:pd;display:flex;flex-direction:column;justify-content:space-between;gap:14px;min-height:108px;padding:14px;border-radius:16px;text-decoration:none;color:var(--ink);
 background:linear-gradient(160deg,color-mix(in srgb,var(--jel) 55%,#fff),color-mix(in srgb,var(--jel) 88%,#000) 130%);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -6px 14px color-mix(in srgb,var(--jel) 60%,#000 20%),0 5px 0 color-mix(in srgb,var(--jel) 55%,#3a2a20),0 14px 22px -14px color-mix(in srgb,var(--jel) 80%,#000);transition:transform .12s,box-shadow .12s,filter .15s}
.pad::after{content:"";position:absolute;left:12px;top:9px;width:38%;height:14px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.65),rgba(255,255,255,0));pointer-events:none}
.pad:hover{filter:saturate(1.15) brightness(1.04)}
.pad:active{transform:translateY(4px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 1px 0 color-mix(in srgb,var(--jel) 55%,#3a2a20)}
.pad-n{align-self:flex-end;font:700 13px/1 var(--font-num);opacity:.75}
.pad-n::before{content:counter(pd,decimal-leading-zero)}
.lang-bn .pad-n::before{content:counter(pd,bn2)}
.pad-t{font:700 16px/1.3 var(--font-body)}
.pad.j-rasp{color:#fff}.pad.j-rasp .pad-n{opacity:.9}
.grille{display:none}
@container (min-width:560px){.pads{grid-template-columns:repeat(4,1fr)}}
@container (min-width:900px){
 .chassis{grid-template-columns:minmax(0,1fr) minmax(380px,1.02fr);grid-template-areas:"copy screen" "pads screen" "grille grille";column-gap:clamp(24px,3.4cqw,48px);row-gap:26px;align-items:start}
 .rig-copy{grid-area:copy;padding-top:14px}.screen{grid-area:screen}.pads{grid-area:pads;align-self:end;grid-template-columns:repeat(2,1fr)}
 .grille{display:block;grid-area:grille;justify-self:center;width:min(360px,40%);height:18px;margin-top:-6px;border-radius:999px;background:radial-gradient(circle,#A39C8F 1.8px,transparent 2.3px) 0 0/10px 9px;opacity:.8}
}
@container (min-width:1100px){.pads{grid-template-columns:repeat(4,1fr)}}

/* ---------- inner: track header ---------- */
.track{position:relative;overflow:hidden;padding:clamp(22px,4vw,54px) 0 clamp(20px,3vw,36px);background:linear-gradient(180deg,var(--alu),var(--paper));border-bottom:1px solid var(--alu-3)}
.track-in{position:relative;container-type:inline-size}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 18px;font:500 14px/1.5 var(--font-mono);color:var(--muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.crumbs a:hover{text-decoration-color:var(--rasp)}
.crumbs .sep{color:var(--line)}
.track h1{font-weight:800;font-size:clamp(26px,5cqw,50px);line-height:1.12;letter-spacing:-.025em;max-width:22ch;margin:0 0 16px;position:relative}
.lang-bn .track h1{letter-spacing:0;line-height:1.38;max-width:26ch}
.track h1::before{content:"";display:block;width:56px;height:10px;border-radius:999px;margin:0 0 18px;background:var(--jel);box-shadow:0 0 16px color-mix(in srgb,var(--jel) 70%,transparent)}
.track .lead{max-width:64ch}
.wave{display:block;width:100%;height:56px;margin-top:10px;fill:var(--jel);opacity:.9}
.wave rect:nth-child(3n){opacity:.55}.wave rect:nth-child(5n){fill:var(--ink);opacity:.8}

/* ---------- step sequencer TOC ---------- */
.seq{position:sticky;top:0;z-index:20;background:rgba(25,24,28,.96);color:#D8D4CA;box-shadow:0 8px 20px -14px rgba(0,0,0,.6)}
@supports (backdrop-filter:blur(6px)){.seq{background:rgba(25,24,28,.9);backdrop-filter:blur(8px)}}
.seq-in{display:flex;align-items:center;gap:14px;min-height:64px}
.seq-l{flex:none;font:500 12.5px/1.3 var(--font-mono);color:var(--oled-m);max-width:9ch;display:none}
:lang(en) .seq-l{text-transform:uppercase;letter-spacing:.1em}
.seq ol{list-style:none;margin:0;padding:8px 0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;counter-reset:sq;flex:1;min-width:0;scroll-snap-type:x proximity}
.seq ol::-webkit-scrollbar{display:none}
.seq li{counter-increment:sq;flex:none;scroll-snap-align:start}
.seq a{display:flex;align-items:center;gap:10px;min-height:46px;max-width:16em;padding:6px 14px 6px 6px;border-radius:10px;text-decoration:none;color:#CFCBC1;background:#24232A;box-shadow:inset 0 0 0 1px #34323A;font:500 14px/1.3 var(--font-body)}
.seq a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seq .n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#34323A;color:#fff;font:700 13px/1 var(--font-num)}
.seq .n::before{content:counter(sq,decimal-leading-zero)}
.lang-bn .seq .n::before{content:counter(sq,bn2)}
.seq a:hover{color:#fff;box-shadow:inset 0 0 0 1px #56535D}
.seq a[aria-current] {color:#fff;background:#2E2C34}
.seq a[aria-current] .n{background:var(--jel);color:var(--ink);box-shadow:0 0 12px color-mix(in srgb,var(--jel) 80%,transparent)}
@media (min-width:980px){.seq-l{display:block}}

/* ---------- article ---------- */
.body{padding:clamp(28px,4.4vw,60px) 0 clamp(36px,5vw,72px)}
.body-in{display:grid;gap:36px}
.prose{min-width:0;max-width:74ch;counter-reset:st;container-type:inline-size}
.prose>section{counter-increment:st}
.prose>section>h2{display:flex;align-items:flex-start;gap:14px;font-weight:700;font-size:clamp(22px,3.4vw,31px);line-height:1.22;letter-spacing:-.02em;margin:0 0 18px}
.lang-bn .prose>section>h2{letter-spacing:0;line-height:1.45;font-weight:700}
.prose>section>h2::before{content:counter(st,decimal-leading-zero);flex:none;display:grid;place-items:center;width:46px;height:46px;margin-top:-3px;border-radius:12px;font:700 15px/1 var(--font-num);color:var(--ink);letter-spacing:0;
 background:linear-gradient(160deg,color-mix(in srgb,var(--jel) 55%,#fff),var(--jel));box-shadow:inset 0 2px 0 rgba(255,255,255,.55),0 3px 0 color-mix(in srgb,var(--jel) 55%,#3a2a20)}
.lang-bn .prose>section>h2::before{content:counter(st,bn2);margin-top:0}
.j-rasp .prose>section>h2::before{color:#fff}
.step{padding:30px 0 12px;border-top:1px dashed var(--alu-3)}
.prose>.step:first-child,.intro-extra+.step{border-top:0;padding-top:0}
.intro-extra{margin:0 0 26px;font-size:1.02em}
.prose h3{font-size:1.1em;font-weight:700;line-height:1.35;margin:1.5em 0 .5em}
.lang-bn .prose h3{line-height:1.6}
.prose ul,.prose ol{padding:0;margin:0 0 1.2em;list-style:none}
.prose ul>li,.prose ol>li{position:relative;padding-left:30px;margin:0 0 .6em}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.62em;width:12px;height:7px;border-radius:3px;background:var(--jel);box-shadow:0 0 0 1px rgba(0,0,0,.1)}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li);position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:6px;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--font-num)}
.lang-bn .prose ol>li::before{content:counter(li,bengali);top:.35em}
.prose strong{font-weight:700;color:#0F0E11}
.prose a{color:var(--rasp-d);text-underline-offset:3px}
.table-wrap{overflow-x:auto;margin:0 0 1.4em;border-radius:14px;background:var(--oled);box-shadow:0 0 0 1px #000,0 16px 30px -22px rgba(0,0,0,.5)}
.table-wrap table{width:100%;border-collapse:collapse;min-width:440px;color:var(--oled-t);font-size:15px}
.table-wrap th,.table-wrap td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.08)}
.table-wrap th{font:600 13.5px/1.4 var(--font-mono);color:var(--lime);background:var(--oled-2)}
:lang(en) .table-wrap th{text-transform:uppercase;letter-spacing:.06em}
.table-wrap tr:last-child td{border-bottom:0}
.table-wrap td strong{color:#fff}

/* FAQ pads */
.faq{padding-top:30px;border-top:1px dashed var(--alu-3)}
.prose>.faq:first-child{border-top:0;padding-top:0}
.faq-pads{display:grid;gap:10px}
.faq details{border-radius:14px;background:var(--alu-hi);border:1px solid var(--alu-3);box-shadow:0 3px 0 var(--alu-2)}
.faq details[open]{background:#fff;box-shadow:0 3px 0 var(--alu-2),inset 4px 0 0 var(--jel)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 16px 12px 18px;cursor:pointer;list-style:none;font:700 16.5px/1.45 var(--font-body)}
.faq summary::-webkit-details-marker{display:none}
.knob{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--alu-2) 70%);box-shadow:0 0 0 1px var(--line),0 2px 0 var(--alu-3);transition:transform .25s}
.knob::after{content:"";position:absolute;left:50%;top:5px;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:var(--ink)}
.faq details[open] .knob{transform:rotate(135deg)}
.faq details[open] .knob::after{background:var(--rasp)}
.faq .a{padding:0 18px 6px}

/* CTA */
.cta{margin:34px 0 0;padding:20px;border-radius:20px;background:var(--ink);color:#E6E2D8;display:grid;gap:14px;box-shadow:0 22px 40px -28px rgba(0,0,0,.6)}
.cta p{margin:0;font-size:17px}
.cta .btn{justify-self:start}
.cta-screen .wave{height:34px;margin:0;fill:var(--lime);opacity:.9}
.cta-screen .wave rect:nth-child(5n){fill:var(--rasp)}

/* rail cartridge */
.rail{min-width:0}
.cart{position:relative;padding:22px 20px 20px;border-radius:20px;background:linear-gradient(170deg,#EFECE6,#DCD8CF);border:1px solid #CEC8BC;box-shadow:inset 0 1px 0 #fff,0 3px 0 var(--alu-3),0 24px 40px -30px rgba(60,45,30,.5)}
.cart::before{content:"";position:absolute;left:20px;right:20px;top:-1px;height:8px;border-radius:0 0 8px 8px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 16px);opacity:.75}
.cart-lbl{display:flex;align-items:center;gap:9px;margin:4px 0 12px;font:500 13px/1.4 var(--font-mono);color:var(--muted)}
:lang(en) .cart-lbl{text-transform:uppercase;letter-spacing:.1em}
.cart strong{display:block;font:700 20px/1.3 var(--font-head);margin-bottom:8px}
.lang-bn .cart strong{line-height:1.5}
.cart p{font-size:16px;color:#3A3833}
.cart .btn{width:100%}
@media (min-width:1100px){
 .body-in.has-rail{grid-template-columns:minmax(0,74ch) minmax(260px,320px);justify-content:space-between;column-gap:56px}
 .cart{position:sticky;top:88px}
}

/* ---------- related: sample slots ---------- */
.rel{padding:clamp(34px,5vw,64px) 0;background:var(--alu);border-top:1px solid var(--alu-3)}
.rel-t{font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;margin:0 0 22px}
.lang-bn .rel-t{letter-spacing:0;line-height:1.45}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:14px}
.slot{display:flex;flex-direction:column;gap:8px;height:100%;min-height:150px;padding:0 18px 18px;border-radius:16px;text-decoration:none;color:var(--ink);background:var(--alu-hi);border:1px solid var(--alu-3);box-shadow:0 4px 0 var(--alu-3);transition:transform .15s,box-shadow .15s}
.slot:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--alu-3)}
.slot-cap{display:block;height:12px;margin:0 -18px 10px;border-radius:15px 15px 0 0;background:linear-gradient(90deg,var(--jel),color-mix(in srgb,var(--jel) 55%,#fff))}
.slot strong{font:700 17px/1.35 var(--font-head)}
.lang-bn .slot strong{line-height:1.5}
.slot-d{font-size:15.5px;line-height:1.6;color:var(--muted)}

/* ---------- footer: back panel ---------- */
.back{background:var(--ink);color:#CFCBC1;padding:clamp(36px,5vw,60px) 0 22px;border-top:6px solid var(--rasp)}
.back .brand{color:#fff;margin:0 0 16px}
.back .brand-s{color:#9F9A90}
.back-grid{display:grid;gap:30px}
.disc{font-size:15.5px;line-height:1.7;max-width:52ch;color:#BDB8AD;margin:0}
.lang-bn .disc{line-height:1.85}
.port h2{font:500 13px/1.4 var(--font-mono);color:var(--lime);margin:0 0 10px}
:lang(en) .port h2{text-transform:uppercase;letter-spacing:.14em}
.port ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.port a{display:flex;align-items:center;gap:10px;min-height:44px;color:#E4E0D6;text-decoration:none;font-size:16px}
.port a::before{content:"";width:10px;height:10px;border-radius:50%;flex:none;background:#0B0A0D;box-shadow:0 0 0 2px #3F3D45}
.port a:hover{color:#fff}.port a:hover::before{background:var(--lime);box-shadow:0 0 0 2px #3F3D45,0 0 8px var(--lime)}
.back-bot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:34px;padding-top:18px;border-top:1px solid #34323A;font:500 14px/1.5 var(--font-mono);color:#A5A095}
.age{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--rasp);color:#fff;font:800 14px/1 "Bricolage Grotesque",sans-serif;box-shadow:0 0 0 3px #19181C,0 0 0 5px var(--rasp)}
.top{margin-left:auto;display:inline-flex;align-items:center;min-height:44px;color:#E4E0D6}
@media (min-width:760px){.back-grid{grid-template-columns:1.3fr 1fr 1fr;gap:40px}}

/* 404 */
.nf{padding:clamp(40px,8vw,100px) 0}
.nf-code{font:800 clamp(64px,16vw,150px)/1 "Bricolage Grotesque",sans-serif;margin:0 0 10px;color:transparent;-webkit-text-stroke:2px var(--rasp)}
.nf h1{font-size:clamp(26px,4vw,40px);margin:0 0 12px}

/* motion */
@media (prefers-reduced-motion:no-preference){
 .rec{animation:blink 1.6s steps(2,jump-none) infinite}
 .pad{animation:beat 2s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:calc(var(--d,0) * .5s)}
 .pad:nth-child(2){--d:1}.pad:nth-child(3){--d:2}.pad:nth-child(4){--d:3}
 .pad:hover,.pad:focus-visible{animation:none}
 .wave rect{transform-origin:center;transform-box:fill-box;animation:lvl 1.8s ease-in-out infinite alternate}
 .wave rect:nth-child(2n){animation-delay:-.6s}.wave rect:nth-child(3n){animation-delay:-1.1s}
}
@keyframes blink{50%{opacity:.35}}
@keyframes beat{0%,100%{transform:none}6%{transform:translateY(2px) scale(.985)}14%{transform:none}}
@keyframes lvl{to{transform:scaleY(.72)}}
@media (max-width:420px){
 .status{font-size:12px;gap:8px}
 .lsw a{padding:0 11px;font-size:13.5px}
 .brand-n{font-size:17px}
 .mark{width:40px;height:40px}
 .menu-key .mk-t{font-size:14px}
 .pad{min-height:96px}
 .chassis{padding:14px 12px 18px;border-radius:24px;gap:18px}
 .rig-copy{padding:10px 6px 0}
 .bezel{padding:8px;border-radius:20px}
}
@media (max-width:359px){.menu-key .mk-t{display:none}.brand-s{display:none}}
@media print{.deck,.seq,.rail,.rel,.back,.cta{display:none}}
.st-t{min-width:0;overflow:hidden;text-overflow:ellipsis}
:lang(en) .rig h1{font-weight:700;font-size:clamp(24px,4.4cqw,50px)}