/* Design tokens and the base page: colours, type scale, spacing, layout. */
/* src/css/tokens.css */
:root {
  --color-paper: oklch(94.6% 0.017 168);
  --color-paper-2: oklch(92.6% 0.02 168);
  --color-paper-3: oklch(89.5% 0.024 168);
  --color-raised: oklch(96.8% 0.012 168);
  --color-sunk: oklch(88% 0.025 168);
  --brand-a: #2AA054;
  --brand-b: #67C2AB;
  --brand-ink-a: oklch(48% 0.13 150);
  --brand-ink-b: oklch(52% 0.1 178);
  --brand-deep: oklch(25% 0.045 170);
  --brand-cta-a: oklch(42% 0.12 152);
  --brand-cta-b: oklch(44% 0.085 182);
  --brand-deep-2: oklch(30% 0.055 168);
  --neu-hi: oklch(100% 0 0 / 0.85);
  --neu-lo: oklch(55% 0.04 168 / 0.28);
  --shadow-neu: -10px -10px 24px var(--neu-hi), 12px 12px 28px var(--neu-lo);
  --shadow-neu-s: -5px -5px 12px var(--neu-hi), 6px 6px 14px var(--neu-lo);
  --shadow-neu-in: inset 4px 4px 10px var(--neu-lo), inset -4px -4px 10px var(--neu-hi);
  --glass-white: oklch(100% 0 0 / 0.42);
  --glass-white-edge: oklch(100% 0 0 / 0.7);
  --glass-dark: oklch(100% 0 0 / 0.08);
  --glass-dark-edge: oklch(100% 0 0 / 0.18);
  --color-ink: oklch(14.5% 0 0);
  --color-ink-2: oklch(33% 0.025 168);
  --color-muted: oklch(45% 0.025 168);
  --color-heading-dim: oklch(52% 0.035 168);
  --color-rule: oklch(58% 0.03 168);
  --color-hair: oklch(87% 0.022 168);
  --color-accent: oklch(50% 0.13 155);
  --color-accent-strong: oklch(44% 0.12 155);
  --color-accent-ink: oklch(100% 0 0);
  --color-accent-bright: oklch(80% 0.15 160);
  --color-sand: oklch(87% 0.075 168);
  --color-focus: oklch(44% 0.12 155);
  --color-error: oklch(48% 0.18 27);
  --color-success: oklch(45% 0.12 152);
  --grad-brand: var(--color-dark);
  --grad-soft: var(--color-paper-2);
  --on-grad: var(--color-on-dark);
  --on-grad-2: var(--color-on-dark-2);
  --grad-ring: oklch(100% 0 0 / 0.35);
  --grad-shape: oklch(86% 0.13 170 / 0.85);
  --grad-shape-2: oklch(100% 0 0 / 0.14);
  --btn-on-grad: var(--color-accent-on-dark);
  --frame-light: oklch(100% 0 0 / 0.55);
  --btn-on-grad-ink: var(--color-dark);
  --tint-teal: oklch(94% 0.05 185);
  --tint-teal-ink: oklch(45% 0.1 190);
  --tint-blue: oklch(93% 0.04 245);
  --tint-blue-ink: oklch(45% 0.14 250);
  --tint-coral: oklch(93% 0.05 35);
  --tint-coral-ink: oklch(52% 0.17 35);
  --tint-amber: oklch(94% 0.07 85);
  --tint-amber-ink: oklch(50% 0.12 70);
  --tint-green: oklch(94% 0.06 155);
  --tint-green-ink: oklch(45% 0.12 155);
  --tint-sky: oklch(94% 0.045 220);
  --tint-sky-ink: oklch(46% 0.11 225);
  --tint-rose: oklch(93% 0.045 5);
  --tint-rose-ink: oklch(50% 0.16 10);
  --viz-ground: oklch(36% 0.05 140);
  --viz-field-a: oklch(50% 0.09 135);
  --viz-field-b: oklch(58% 0.1 118);
  --viz-field-c: oklch(44% 0.07 152);
  --viz-field-d: oklch(64% 0.09 95);
  --viz-road: oklch(84% 0.03 90 / 0.55);
  --viz-bank: oklch(80% 0.06 85);
  --viz-water-a: oklch(50% 0.09 222);
  --viz-water-b: oklch(36% 0.1 240);
  --viz-streak: oklch(92% 0.04 215 / 0.4);
  --viz-fill: oklch(76% 0.07 75);
  --viz-building-1: oklch(94% 0.01 250);
  --viz-building-2: oklch(72% 0.02 250);
  --viz-building-3: oklch(62% 0.13 38);
  --viz-alert: oklch(72% 0.18 38);
  --viz-alert-ink: oklch(22% 0.03 250);
  --viz-beam-0: oklch(100% 0 0 / 0);
  --viz-beam-1: oklch(100% 0 0 / 0.16);
  --viz-beam-2: oklch(100% 0 0 / 0.9);
  --viz-panel: oklch(20% 0.04 250 / 0.72);
  --viz-panel-solid: oklch(22% 0.04 250);
  --scene-build-bg: oklch(98% 0.006 168);
  --scene-build-code: oklch(22% 0.02 200);
  --scene-build-code-ink: oklch(85% 0.12 160);
  --scene-build-ai: oklch(55% 0.15 290);
  --scene-build-eng: oklch(45% 0.12 152);
  --scene-build-note: oklch(95% 0.04 85);
  --scene-build-note-edge: oklch(80% 0.1 80);
  --scene-pipe-bg: oklch(24% 0.04 170);
  --scene-pipe-panel: oklch(29% 0.045 170);
  --scene-pipe-edge: oklch(38% 0.04 170);
  --scene-pipe-ink: oklch(95% 0.01 170);
  --scene-pipe-muted: oklch(76% 0.03 170);
  --scene-pipe-ok: oklch(80% 0.15 155);
  --scene-pipe-warn: oklch(82% 0.14 75);
  --scene-shop-kpi: oklch(50% 0.15 45);
  --scene-shop-price: oklch(50% 0.15 45);
  --scene-live-ink: oklch(42% 0.11 152);
  --scene-ppp-job: oklch(46% 0.07 212);
  --scene-cortex-1: oklch(16% 0.015 220);
  --scene-cortex-2: oklch(94% 0.01 200);
  --scene-cortex-3: oklch(68% 0.02 210);
  --scene-cortex-4: oklch(30% 0.02 210);
  --scene-cortex-5: oklch(84% 0.14 170);
  --scene-cortex-6: oklch(82% 0.14 80);
  --scene-cortex-7: oklch(21% 0.018 220);
  --scene-cortex-8: oklch(84% 0.14 170 / 0.18);
  --scene-cortex-9: oklch(82% 0.14 80 / 0.2);
  --scene-cortex-10: oklch(84% 0.14 170 / 0.35);
  --scene-cortex-11: oklch(84% 0.14 170 / 0.08);
  --scene-cortex-12: oklch(82% 0.14 80 / 0.1);
  --scene-cortex-13: oklch(82% 0.14 80 / 0.4);
  --scene-cortex-14: oklch(84% 0.14 170 / 0.1);
  --scene-cortex-15: oklch(84% 0.14 170 / 0.4);
  --scene-cortex-16: oklch(80% 0.12 155);
  --scene-hosting-1: oklch(97% 0.008 250);
  --scene-hosting-2: oklch(24% 0.03 255);
  --scene-hosting-3: oklch(52% 0.02 255);
  --scene-hosting-4: oklch(90% 0.01 250);
  --scene-hosting-5: oklch(55% 0.17 38);
  --scene-hosting-6: oklch(55% 0.13 152);
  --scene-hosting-7: oklch(30% 0.06 255);
  --scene-hosting-8: oklch(30% 0.06 255 / 0.35);
  --scene-hosting-9: oklch(22% 0.03 255);
  --scene-hosting-10: oklch(88% 0.01 250);
  --scene-hosting-11: oklch(80% 0.13 152);
  --scene-hosting-12: oklch(55% 0.13 152 / 0.12);
  --scene-hosting-13: oklch(30% 0.06 255 / 0.85);
  --scene-shop-1: oklch(96.5% 0.02 75);
  --scene-shop-2: oklch(22% 0.02 50);
  --scene-shop-3: oklch(52% 0.03 55);
  --scene-shop-4: oklch(90% 0.02 70);
  --scene-shop-5: oklch(66% 0.17 50);
  --scene-shop-6: oklch(24% 0.03 260);
  --scene-shop-7: oklch(30% 0.05 50 / 0.45);
  --scene-shop-8: oklch(80% 0.01 260);
  --scene-hosting-14: oklch(100% 0 0 / 0.1);
  --scene-hosting-15: oklch(38% 0.08 40);
  --scene-hosting-16: oklch(64% 0.17 50);
  --scene-hosting-17: oklch(70% 0.16 65);
  --scene-hosting-18: oklch(22% 0.03 50);
  --scene-shop-9: oklch(66% 0.17 50 / 0.55);
  --scene-shop-10: oklch(66% 0.17 50 / 0.08);
  --scene-shop-11: oklch(92% 0.05 85);
  --scene-shop-12: oklch(42% 0.09 70);
  --scene-shop-13: oklch(93% 0.04 240);
  --scene-shop-14: oklch(42% 0.12 250);
  --scene-shop-15: oklch(93% 0.05 300);
  --scene-shop-16: oklch(42% 0.14 300);
  --scene-shop-17: oklch(93% 0.06 152);
  --scene-shop-18: oklch(40% 0.12 152);
  --scene-shop-19: oklch(66% 0.17 50 / 0.75);
  --scene-shop-20: oklch(20% 0.02 260);
  --scene-shop-21: oklch(25% 0.05 50 / 0.6);
  --scene-shop-22: oklch(25% 0.05 50 / 0.5);
  --scene-shop-23: oklch(66% 0.17 50 / 0.16);
  --scene-ppp-1: oklch(40% 0.07 212);
  --scene-ppp-2: oklch(97% 0.01 200);
  --scene-ppp-3: oklch(82% 0.03 205);
  --scene-ppp-4: oklch(50% 0.06 210);
  --scene-ppp-5: oklch(88% 0.09 190);
  --scene-ppp-6: oklch(99% 0.003 200);
  --scene-ppp-7: oklch(26% 0.03 220);
  --scene-ppp-8: oklch(52% 0.02 220);
  --scene-ppp-9: oklch(100% 0 0 / 0.18);
  --scene-ppp-10: oklch(26% 0.05 210);
  --scene-ppp-11: oklch(15% 0.04 220 / 0.7);
  --scene-ppp-12: oklch(95% 0.01 200);
  --scene-ppp-13: oklch(90% 0.01 200);
  --scene-ppp-14: oklch(48% 0.13 152);
  --scene-ppp-15: oklch(100% 0 0 / 0.85);
  --scene-insight-1: oklch(95.5% 0.03 165);
  --scene-insight-2: oklch(22% 0.03 160);
  --scene-insight-3: oklch(48% 0.03 160);
  --scene-insight-4: oklch(88% 0.03 160);
  --scene-insight-5: oklch(42% 0.11 155);
  --scene-insight-6: oklch(93% 0.02 150);
  --scene-insight-7: oklch(25% 0.05 160 / 0.5);
  --scene-insight-8: oklch(25% 0.08 155 / 0.7);
  --scene-insight-9: oklch(25% 0.05 160 / 0.55);
  --scene-insight-10: oklch(93% 0.05 160);
  --scene-insight-11: oklch(36% 0.09 155);
  --scene-insight-12: oklch(95% 0.02 160);
  --scene-map-1: oklch(94% 0.015 140);
  --scene-map-2: oklch(86% 0.07 150);
  --scene-map-3: oklch(84% 0.06 225);
  --scene-map-4: oklch(100% 0 0);
  --scene-map-5: oklch(90% 0.06 85);
  --scene-map-6: oklch(88% 0.012 140);
  --brand-cortex: oklch(17% 0.02 200);
  --brand-cortex-accent: oklch(86% 0.13 170);
  --brand-hosting: oklch(96.5% 0.012 250);
  --brand-hosting-accent: oklch(52% 0.17 38);
  --brand-shoppism: oklch(95.5% 0.035 78);
  --brand-shoppism-accent: oklch(52% 0.16 48);
  --brand-ppp: oklch(41% 0.07 212);
  --brand-ppp-accent: oklch(88% 0.06 200);
  --brand-insight: oklch(95% 0.035 160);
  --brand-insight-accent: oklch(42% 0.11 155);
  --brand-river: oklch(95% 0.03 230);
  --brand-river-accent: oklch(45% 0.12 240);
  --radius-xl: 24px;
  --color-dark: #181818;
  --color-dark-2: #1F1F1F;
  --color-dark-3: #272727;
  --color-on-dark: oklch(98.5% 0 0);
  --color-on-dark-2: oklch(80% 0.005 286);
  --color-on-dark-muted: oklch(72% 0.005 286);
  --color-accent-on-dark: oklch(80% 0.15 160);
  --color-sand-on-dark: oklch(87% 0.09 170);
  --color-focus-on-dark: oklch(85% 0.13 160);
  --color-rule-on-dark: oklch(55% 0.005 286);
  --glass-fill: oklch(100% 0 0 / 0.07);
  --glass-fill-strong: oklch(100% 0 0 / 0.12);
  --glass-edge: oklch(100% 0 0 / 0.22);
  --glass-solid: oklch(26% 0.016 165);
  --glass-light-fill: oklch(97% 0.012 168 / 0.82);
  --glass-light-edge: oklch(66% 0.01 165 / 0.55);
  --glass-light-solid: oklch(96.8% 0.012 168);
  --glass-blur: 20px;
  --shadow-raised: 0 1px 2px oklch(19% 0.012 165 / 0.06), 0 18px 40px -22px oklch(19% 0.012 165 / 0.28);
  --shadow-raised-s: 0 1px 2px oklch(19% 0.012 165 / 0.08);
  --shadow-inset: none;
  --shadow-inset-s: none;
  --shadow-press: inset 0 1px 3px oklch(19% 0.012 165 / 0.16);
  --shadow-window: 0 30px 70px -22px oklch(19% 0.012 165 / 0.45);
  --shadow-shot: 0 2px 6px oklch(19% 0.012 165 / 0.06), 0 30px 60px -30px oklch(19% 0.012 165 / 0.35);
  --font-display:
    "Geist",
    "Geist Fallback",
    Arial,
    sans-serif;
  --font-body:
    "Geist",
    "Geist Fallback",
    "Hind Siliguri",
    Arial,
    sans-serif;
  --font-bengali:
    "Hind Siliguri",
    "Instrument Sans",
    sans-serif;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-display: 600;
  --tracking-display: -0.025em;
  --weight-medium: 500;
  --hero-ink-a: oklch(0% 0 0);
  --hero-ink-b: oklch(48% 0 0);
  --leading-tight: 1;
  --leading-snug: 1.3;
  --leading-body: 1.5;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lead: 1.125rem;
  --text-title: 1.25rem;
  --text-heading: 1.875rem;
  --text-section: 3rem;
  --text-display: 3.75rem;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-40: 40px;
  --space-80: 80px;
  --gutter: 24px;
  --gap-columns: 24px;
  --section-gap: 96px;
  --container: 1320px;
  --measure: 65ch;
  --nav-height: 72px;
  --target-min: 44px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-pill: 999px;
  --rule-hair: 1px;
  --ring-width: 3px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-short: 300ms;
  --dur-long: 500ms;
  --dur-scene: 900ms;
  --dur-reveal: 700ms;
  --stage-interval: 5.5s;
  --z-base: 1;
  --z-raised: 10;
  --z-sticky-nav: 300;
  --z-skip: 700;
}

/* src/css/base.css */
@view-transition {
  navigation: auto;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  overflow-x: clip;
}
html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-muted) var(--color-paper);
  scroll-padding-block-start: calc(var(--nav-height) + var(--space-lg));
}
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
}
::selection {
  background: color-mix(in oklab, var(--color-accent) 22%, transparent);
  color: var(--color-ink);
}
:focus-visible {
  outline: var(--ring-width) solid var(--color-focus);
  outline-offset: var(--ring-width);
  transition: none;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-style: normal;
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  overflow-wrap: anywhere;
  min-width: 0;
  text-wrap: balance;
}
h1,
.heading-1 {
  font-size: 3.5rem;
  line-height: 1.05;
}
h2,
.heading-2 {
  font-size: 2.5rem;
  line-height: 1.1;
}
h3,
.heading-6 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  letter-spacing: -0.01em;
}
.heading-3,
.heading-4,
.heading-5 {
  font-size: 2.5rem;
  line-height: 1.1;
}
.title-1 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--weight-medium);
}
.title-2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: var(--weight-medium);
}
.title-4 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: var(--weight-medium);
}
.body-6,
.caption-2 {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.caption-4 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: var(--weight-medium);
}
h1 .dim,
h2 .dim {
  color: var(--color-heading-dim);
}
.brand-text {
  background:
    linear-gradient(
      90deg,
      var(--brand-ink-a),
      var(--brand-ink-b));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.dark h1 .dim,
.dark h2 .dim {
  color: var(--color-on-dark-muted);
}
@container page (inline-size < 64rem) {
  h1,
  .heading-1 {
    font-size: 2.75rem;
    line-height: 1.1;
  }
}
@container page (inline-size < 40rem) {
  h1,
  .heading-1 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  h2,
  .heading-2,
  .heading-3,
  .heading-4,
  .heading-5 {
    font-size: 2rem;
    line-height: 2.375rem;
  }
}
p {
  margin: 0;
  text-wrap: pretty;
}
p:not([class]) {
  max-inline-size: var(--measure);
}
ul,
ol {
  margin: 0;
  padding: 0;
}
dl,
dd {
  margin: 0;
}
figure {
  margin: 0;
}
img,
video {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}
svg {
  display: block;
}
[hidden] {
  display: none !important;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
:lang(bn) {
  font-family: var(--font-bengali);
}
.container {
  inline-size: 100%;
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: var(--section-gap);
}
.section + .section {
  padding-block-start: 0;
}
.section.dark,
.section.dark + .section {
  padding-block-start: var(--section-gap);
}
@container page (inline-size < 40rem) {
  .section {
    padding-block: var(--space-3xl);
  }
  .section + .section {
    padding-block-start: 0;
  }
}
.prose {
  max-inline-size: var(--measure);
}
.prose > * + * {
  margin-block-start: var(--space-sm);
}
.lead {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--color-ink-2);
  max-inline-size: 42rem;
}
.muted {
  color: var(--color-muted);
}
.dark {
  background: var(--color-dark);
  color: var(--color-on-dark);
  --color-focus: var(--color-focus-on-dark);
  --color-accent: var(--color-accent-on-dark);
  --color-muted: var(--color-on-dark-muted);
  --color-ink-2: var(--color-on-dark-2);
  --color-rule: var(--color-rule-on-dark);
}
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip-link {
  position: fixed;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-s);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
.confirm {
  display: inline-block;
  padding-inline: var(--space-2xs);
  border: var(--rule-hair) dashed currentColor;
  border-radius: var(--radius-s);
  color: var(--color-accent);
  font-size: 0.92em;
}
@media (prefers-contrast: more) {
  :root {
    --color-muted: var(--color-ink-2);
    --color-rule: var(--color-ink);
    --shadow-raised: none;
    --shadow-raised-s: none;
    --shadow-inset: none;
    --shadow-inset-s: none;
    --shadow-press: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  @view-transition {
    navigation: none;
  }
}
@media print {
  .site-nav,
  .site-footer,
  .skip-link {
    display: none;
  }
  body {
    background: none;
    color: var(--color-ink);
  }
  .dark {
    background: none;
    color: var(--color-ink);
  }
}