:root {
  --ground: #EEF0EE; --slab: #FFFFFF; --sunk: #E3E6E3; --rule: #D3D7D3;
  --coal: #16181B; --soot: #4A5057; --smoke: #5E656C;
  --ember: #C8410C; --ember-deep: #B23A0A; --glow: #FFE8D9; --on-ember: #FFFFFF;
  --tin: #2F5D73; --tin-wash: #E1ECF1; --paddy: #1F7A4A; --paddy-wash: #DFF0E6;
  --loss: #C0262D; --loss-wash: #FBE3E3; --turmeric: #8A5A0E; --turmeric-wash: #FBEFD8;
  --g1: #9B2F1F; --clay: #B98A5E; --night: #16181B; --on-night: #F1F2F0; --on-night-soft: #A9B0B6;
  --lift: 0 1px 1px rgba(22, 24, 27, .06), 0 8px 24px -12px rgba(22, 24, 27, .18);
  --display: 'Baloo Da 2', 'Noto Sans Bengali', system-ui, sans-serif;
  --body: 'Noto Sans Bengali', system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #121416; --slab: #1C1F22; --sunk: #0C0E0F; --rule: #2C3035;
    --coal: #F1F2F0; --soot: #A9B0B6; --smoke: #868D93;
    --ember: #FF6B2C; --ember-deep: #FF8A50; --glow: #3A1E10; --on-ember: #1A0A02;
    --tin: #7FB3CC; --tin-wash: #16262E; --paddy: #4CC487; --paddy-wash: #12281C;
    --loss: #FF6B6B; --loss-wash: #2E1416; --turmeric: #E6B450; --turmeric-wash: #2C2210;
    --night: #0B0C0D;
    --lift: 0 1px 1px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.65; color: var(--coal); background: var(--ground); -webkit-font-smoothing: antialiased; }
a { color: var(--tin); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 0; }
p { margin: 0 0 12px; }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; border-radius: 6px; }

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

.top { background: var(--night); color: var(--on-night); position: relative; overflow: hidden; }
.top::after { content: ''; position: absolute; left: -20%; right: -20%; bottom: -160px; height: 320px; background: radial-gradient(closest-side, rgba(255, 107, 44, .38), transparent); pointer-events: none; }
.top .wrap { position: relative; z-index: 1; padding-top: 28px; padding-bottom: 36px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--on-night); text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 12px; }
.brand b { font-family: var(--display); font-size: 26px; font-weight: 800; }
.top h1 { font-size: 40px; font-weight: 800; margin: 26px 0 10px; text-wrap: balance; }
.top .lead { font-size: 19px; color: var(--on-night-soft); max-width: 560px; }
.top .crumbs { font-size: 14px; color: var(--on-night-soft); margin-top: 8px; }
.top .crumbs a { color: #FF8A50; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 22px; border-radius: 14px; background: var(--ember); color: var(--on-ember); font-weight: 700; font-size: 18px; text-decoration: none; }
.btn.ghost { background: transparent; color: var(--on-night); box-shadow: inset 0 0 0 1.5px #4A5057; }
.btn small { font-weight: 500; font-size: 14px; opacity: .85; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

main { padding: 8px 0 60px; }
section { padding-top: 34px; }
section > h2 { font-size: 28px; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; }
section > h2 .no { font-size: 15px; font-weight: 700; color: var(--ember-deep); background: var(--glow); border-radius: 8px; padding: 2px 9px; }
h3 { font-size: 21px; margin: 26px 0 10px; }

.card { background: var(--slab); border-radius: 16px; box-shadow: var(--lift); padding: 18px; margin: 12px 0; overflow-x: auto; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 10px 0 14px; }
.steps > li { counter-increment: s; position: relative; padding: 2px 0 12px 44px; }
.steps > li::before { content: counter(s, bengali); position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 9px; background: var(--coal); color: var(--ground); font-family: var(--display); font-weight: 700; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.steps > li b { font-weight: 700; }
.tip { border-left: 4px solid var(--tin); background: var(--tin-wash); padding: 12px 14px; border-radius: 0 12px 12px 0; margin: 12px 0; font-size: 16px; }
.warn { border-left: 4px solid var(--turmeric); background: var(--turmeric-wash); padding: 12px 14px; border-radius: 0 12px 12px 0; margin: 12px 0; font-size: 16px; }
.tip b, .warn b { display: block; margin-bottom: 2px; }

.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 14px 0; }
.shot { margin: 0; }
.shot img { border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), var(--lift); background: var(--slab); aspect-ratio: 9 / 20; object-fit: cover; object-position: top; width: 100%; }
.shot figcaption { font-size: 14px; color: var(--soot); margin-top: 8px; line-height: 1.5; }
.shot.wide img { aspect-ratio: auto; }

.toc { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--ground) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); }
.toc .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.toc .wrap::-webkit-scrollbar { display: none; }
.toc a { flex: none; text-decoration: none; color: var(--coal); background: var(--slab); box-shadow: inset 0 0 0 1.5px var(--rule); border-radius: 12px; padding: 7px 13px; font-weight: 600; font-size: 15px; }

table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 14px; color: var(--soot); font-weight: 600; }
.yes { color: var(--paddy); font-weight: 700; }
.no { color: var(--smoke); }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.pill.ok { background: var(--tin-wash); color: var(--tin); }
.pill.wait { background: var(--turmeric-wash); color: var(--turmeric); }
.pill.off { background: var(--sunk); color: var(--soot); }
.pill.bad { background: var(--loss-wash); color: var(--loss); }

details { background: var(--slab); border-radius: 14px; box-shadow: var(--lift); margin: 10px 0; }
summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; display: flex; gap: 10px; justify-content: space-between; }
summary::after { content: '+'; font-family: var(--display); font-size: 22px; line-height: 1; color: var(--ember-deep); }
details[open] summary::after { content: '−'; }
details > div { padding: 0 16px 14px; color: var(--coal); }

.demo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.demo div { background: var(--slab); border-radius: 14px; box-shadow: var(--lift); padding: 12px 14px; }
.demo b { font-family: var(--display); font-size: 20px; display: block; }
.demo span { font-size: 14px; color: var(--soot); }

footer { border-top: 1px solid var(--rule); padding: 24px 0 40px; font-size: 14px; color: var(--soot); }

.anno { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 20px; align-items: start; margin: 16px 0; }
.anno .pic { position: relative; margin: 0; }
.anno .pic img { border-radius: 18px; box-shadow: 0 0 0 1px var(--rule), var(--lift); width: 100%; background: var(--slab); }
.pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: var(--on-ember); font-family: var(--display); font-weight: 700; font-size: 15px; line-height: 1; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 2px 6px rgba(0, 0, 0, .3); }
.legend { list-style: none; padding: 0; margin: 0; counter-reset: l; }
.legend li { counter-increment: l; position: relative; padding: 0 0 12px 38px; font-size: 16px; }
.legend li::before { content: counter(l, bengali); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--ember); color: var(--on-ember); font-family: var(--display); font-weight: 700; font-size: 15px; display: grid; place-items: center; line-height: 1; }
.legend li b { display: block; }
.part { margin-top: 44px; padding: 14px 16px; border-radius: 14px; background: var(--night); color: var(--on-night); }
.part b { font-family: var(--display); font-size: 22px; display: block; }
.part span { color: var(--on-night-soft); font-size: 15px; }
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; }
.flow div { background: var(--slab); box-shadow: var(--lift); border-radius: 12px; padding: 10px 8px; text-align: center; font-size: 14px; color: var(--soot); position: relative; }
.flow div b { display: block; font-family: var(--display); font-size: 17px; color: var(--coal); }
.flow i { display: block; width: 14px; height: 14px; border-radius: 4px; margin: 0 auto 6px; }
.check { list-style: none; padding: 0; margin: 8px 0 14px; }
.check li { position: relative; padding: 4px 0 8px 32px; }
.check li::before { content: ''; position: absolute; left: 2px; top: 8px; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--soot); }
dl.gloss { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; }
dl.gloss dt { font-weight: 700; }
dl.gloss dd { margin: 0; color: var(--soot); }
.where { font-size: 15px; color: var(--soot); margin: -4px 0 10px; }
.where b { color: var(--coal); }
.btns.light .btn.ghost { color: var(--coal); box-shadow: inset 0 0 0 1.5px var(--rule); }
.toc a.hot { background: var(--glow); box-shadow: inset 0 0 0 1.5px var(--ember); color: var(--ember-deep); }
@media (max-width: 620px) {
  .anno { grid-template-columns: 1fr; }
  .anno .pic { max-width: 300px; margin: 0 auto; }
  .flow { grid-template-columns: 1fr 1fr; }
  dl.gloss { grid-template-columns: 1fr; gap: 2px; }
  dl.gloss dd { margin-bottom: 10px; }
}
@media (max-width: 520px) {
  .card { padding: 12px 10px; }
  table { font-size: 14.5px; }
  th, td { padding: 9px 5px; }
  th { font-size: 13px; }
  .top h1 { font-size: 32px; }
  .shots { grid-template-columns: 1fr 1fr; gap: 10px; }
  .demo { grid-template-columns: 1fr; }
  section > h2 { font-size: 24px; }
}
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  :root { --ground: #FFFFFF; --lift: none; }
  body { background: #fff; font-size: 12.5pt; line-height: 1.55; }
  .toc, .btns, .top::after { display: none; }
  .top { background: none; color: #000; }
  .top .wrap { padding: 0 0 6mm; }
  .top .lead { color: #333; }
  .brand { color: #000; }
  .wrap { max-width: none; padding: 0; }
  main { padding: 0; }
  section { padding-top: 6mm; }
  .part { background: none; color: #000; border: 1.5pt solid #000; margin-top: 8mm; break-after: avoid; }
  .part span { color: #333; }
  h2, h3 { break-after: avoid; }
  .card, .tip, .warn, .anno, .shots, table, tr, li, details { break-inside: avoid; }
  .card, details { box-shadow: none; border: 1px solid #ccc; }
  .shots { grid-template-columns: repeat(4, 1fr); gap: 4mm; }
  .shot img { aspect-ratio: auto; max-width: none; box-shadow: 0 0 0 1px #bbb; }
  .shot figcaption { font-size: 9.5pt; }
  .anno { grid-template-columns: 62mm 1fr; gap: 6mm; }
  .anno .pic img { box-shadow: 0 0 0 1px #bbb; }
  .pin { box-shadow: none; }
  details > div { display: block; }
  summary::after { display: none; }
  a { color: #000; text-decoration: none; }
}