:root{
  --paper:#F2F4F8;
  --sheet:#FFFFFF;
  --sheet-2:#F7F8FB;
  --sunk:#E6EAF1;
  --rule:#DCE1EA;
  --rule-2:#C6CDDA;

  --ink:#121826;
  --ink-2:#465063;
  --ink-3:#5C6577;

  --royal:#2343B8;
  --royal-press:#1A3494;
  --royal-ink:#14286F;
  --royal-wash:#E3E9FB;
  --royal-wash-2:#EEF2FD;
  --on-royal:#F5F7FF;

  --present:#16794A;
  --present-ink:#0E5634;
  --present-wash:#DDF1E5;

  --late:#9A5B00;
  --late-ink:#6E4100;
  --late-wash:#FBEBCF;
  --late-dot:#D98A0B;

  --absent:#B42318;
  --absent-ink:#8A1A12;
  --absent-wash:#FBE3E0;

  --leave:#6B3FA0;
  --leave-wash:#EEE5F8;

  --off:#566072;
  --edge:#8E97A8;
  --off-wash:#E9ECF1;

  --fence:#2343B8;
  --fence-fill:rgba(35,67,184,.10);

  --r-xs:8px; --r-s:12px; --r-m:16px; --r-l:22px; --r-xl:30px; --r-pill:999px;

  --sh-s:0 1px 2px rgba(18,24,38,.06);
  --sh-m:0 1px 2px rgba(18,24,38,.06), 0 12px 28px -20px rgba(18,24,38,.45);
  --sh-l:0 2px 4px rgba(18,24,38,.05), 0 24px 48px -28px rgba(18,24,38,.55);
  --sh-bar:0 -1px 0 var(--rule), 0 -12px 28px -24px rgba(18,24,38,.4);

  --display:'Anek Bangla','Noto Sans Bengali',system-ui,sans-serif;
  --body:'Noto Sans Bengali','Anek Bangla',system-ui,sans-serif;

  --t-hero:2.375rem;
  --t-h1:1.5625rem;
  --t-h2:1.1875rem;
  --t-body:0.9375rem;
  --t-small:0.8125rem;
  --t-micro:0.71875rem;

  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1018; --sheet:#141A25; --sheet-2:#19202D; --sunk:#1F2735;
    --rule:#262F3F; --rule-2:#344055;
    --ink:#E7EBF3; --ink-2:#A9B2C3; --ink-3:#8A94A7;
    --royal:#7C95F2; --royal-press:#6981E6; --royal-ink:#B8C6FA;
    --royal-wash:#1C2850; --royal-wash-2:#161F3C; --on-royal:#0A1027;
    --present:#4CC38A; --present-ink:#8FE0B7; --present-wash:#12301F;
    --late:#F0B44C; --late-ink:#F7D08F; --late-wash:#33260F; --late-dot:#F0B44C;
    --absent:#F2766B; --absent-ink:#F9ABA4; --absent-wash:#3A1916;
    --leave:#B79AE6; --leave-wash:#2A1F3D;
    --off:#97A1B3; --off-wash:#1F2735; --edge:#4F5B70;
    --fence:#7C95F2; --fence-fill:rgba(124,149,242,.16);
    --sh-s:0 1px 2px rgba(0,0,0,.4);
    --sh-m:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.9);
    --sh-l:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -28px rgba(0,0,0,.95);
    --sh-bar:0 -1px 0 var(--rule), 0 -12px 28px -24px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1018; --sheet:#141A25; --sheet-2:#19202D; --sunk:#1F2735;
  --rule:#262F3F; --rule-2:#344055;
  --ink:#E7EBF3; --ink-2:#A9B2C3; --ink-3:#8A94A7;
  --royal:#7C95F2; --royal-press:#6981E6; --royal-ink:#B8C6FA;
  --royal-wash:#1C2850; --royal-wash-2:#161F3C; --on-royal:#0A1027;
  --present:#4CC38A; --present-ink:#8FE0B7; --present-wash:#12301F;
  --late:#F0B44C; --late-ink:#F7D08F; --late-wash:#33260F; --late-dot:#F0B44C;
  --absent:#F2766B; --absent-ink:#F9ABA4; --absent-wash:#3A1916;
  --leave:#B79AE6; --leave-wash:#2A1F3D;
  --off:#97A1B3; --off-wash:#1F2735; --edge:#4F5B70;
  --fence:#7C95F2; --fence-fill:rgba(124,149,242,.16);
  --sh-s:0 1px 2px rgba(0,0,0,.4);
  --sh-m:0 1px 2px rgba(0,0,0,.4), 0 12px 28px -20px rgba(0,0,0,.9);
  --sh-l:0 2px 4px rgba(0,0,0,.4), 0 24px 48px -28px rgba(0,0,0,.95);
  --sh-bar:0 -1px 0 var(--rule), 0 -12px 28px -24px rgba(0,0,0,.8);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--t-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input,textarea,select{font:inherit;color:inherit;}
:focus-visible{outline:2.5px solid var(--royal);outline-offset:2px;border-radius:6px;}
.num{font-variant-numeric:tabular-nums;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.ico.s{width:18px;height:18px;}
.ico.l{width:28px;height:28px;}

.display{font-family:var(--display);font-weight:600;font-size:var(--t-hero);line-height:1.02;letter-spacing:-.02em;margin:0;}
.h1{font-family:var(--display);font-weight:600;font-size:var(--t-h1);line-height:1.15;letter-spacing:-.012em;margin:0;text-wrap:balance;}
.h2{font-family:var(--display);font-weight:600;font-size:var(--t-h2);line-height:1.25;letter-spacing:-.006em;margin:0;}
.meta{font-size:var(--t-small);color:var(--ink-3);margin:0;}
.micro{font-size:var(--t-micro);color:var(--ink-3);letter-spacing:.01em;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:var(--r-m);
  font-weight:600;font-size:1rem;
  transition:transform .12s var(--ease),background-color .15s;
}
.btn:active{transform:scale(.98);}
.btn.primary{background:var(--royal);color:var(--on-royal);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -12px var(--royal);}
.btn.primary:hover{background:var(--royal-press);}
.btn.quiet{background:var(--royal-wash);color:var(--royal-ink);}
.btn.line{border:1.5px solid var(--rule-2);background:var(--sheet);}
.btn.danger{background:var(--absent-wash);color:var(--absent-ink);}
.btn.block{width:100%;}
.btn.sm{min-height:40px;padding:0 14px;font-size:.875rem;border-radius:var(--r-s);}

.tag{
  display:inline-flex;align-items:center;gap:6px;
  height:24px;padding:0 9px 0 8px;border-radius:var(--r-pill);
  font-size:var(--t-micro);font-weight:600;white-space:nowrap;
}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.tag.present{background:var(--present-wash);color:var(--present-ink);}
.tag.late{background:var(--late-wash);color:var(--late-ink);}
.tag.late::before{background:var(--late-dot);}
.tag.absent{background:var(--absent-wash);color:var(--absent-ink);}
.tag.leave{background:var(--leave-wash);color:var(--leave);}
.tag.off{background:var(--off-wash);color:var(--off);}
.tag.royal{background:var(--royal-wash);color:var(--royal-ink);}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}