/* ── Only custom CSS needed beyond Tailwind ──────── */
@font-face {
  font-family: 'Geist Pixel';
  src: url('https://cdn.jsdelivr.net/gh/vercel/geist-pixel-font@main/fonts/webfonts/GeistPixel-Square.woff2') format('woff2');
  font-display: swap;
}

:root { --bg: 255 255 255; --ink: 10 10 10;
  --g50: 250 250 250; --g100: 245 245 245; --g200: 233 233 233;
  --g300: 212 212 212; --g400: 163 163 163; --g500: 115 115 115;
  --g600: 82 82 82; --g700: 64 64 64; --g800: 38 38 38;
  --g900: 23 23 23; --g950: 10 10 10;
  --halftone: rgba(10,10,10,.9);
  --sel-bg: #0a0a0a; --sel-fg: #fff;
  color-scheme: light;
}
html.dark { --bg: 12 12 15; --ink: 244 244 245;
  --g50:24 24 27;--g100:30 30 34;--g200:42 42 48;--g300:58 58 66;
  --g400:138 138 146;--g500:160 160 168;--g600:184 184 192;
  --g700:206 206 212;--g800:228 228 232;--g900:240 240 243;--g950:250 250 250;
  --halftone: rgba(244,244,245,.42);
  --sel-bg:#fafafa;--sel-fg:#0a0a0a;
  color-scheme:dark;
}
html.dark .halftone{background-image:radial-gradient(circle at center,var(--halftone)1px,transparent 1.6px)}
html.dark .dither-corner{filter:invert(1)}
html{background-color:rgb(var(--bg))}
body{background-color:rgb(var(--bg));color:rgb(var(--ink))}
::selection{background:var(--sel-bg);color:var(--sel-fg)}
html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{
  transition:background-color .5s ease,border-color .5s ease,color .5s ease,
             fill .5s ease,stroke .5s ease,box-shadow .5s ease,outline-color .5s ease!important
}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){
  html.theme-anim,html.theme-anim *,html.theme-anim *::before,html.theme-anim *::after{transition:none!important}
}
.font-pixel{font-family:'Geist Pixel','Geist Mono',monospace}

/* Halftone */
.halftone{background-image:radial-gradient(circle at center,rgba(10,10,10,.9)1px,transparent 1.6px);background-size:9px 9px}
.halftone-wide{background-size:13px 13px}
.mask-tr{-webkit-mask-image:radial-gradient(ellipse 80% 80% at 100% 0%,#000 0%,transparent 65%);mask-image:radial-gradient(ellipse 80% 80% at 100% 0%,#000 0%,transparent 65%)}
.mask-bl{-webkit-mask-image:radial-gradient(ellipse 80% 80% at 0% 100%,#000 0%,transparent 65%);mask-image:radial-gradient(ellipse 80% 80% at 0% 100%,#000 0%,transparent 65%)}

/* Entrance */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reveal{opacity:0;animation:fadeUp .7s cubic-bezier(0.16,1,0.3,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.12s}.d3{animation-delay:.19s}.d4{animation-delay:.26s}.d5{animation-delay:.33s}

/* Pulse */
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.pulse-dot{animation:blink 1.8s ease-in-out infinite}

/* Deck */
.deck{position:relative;height:19rem;margin-inline:calc(50% - 50vw);overflow-x:clip;overflow-y:visible}
@supports not(overflow-x:clip){.deck{overflow-x:hidden}}
@media(min-width:768px){.deck{margin-inline:0;overflow:visible}}
.deck-card{position:absolute;top:.75rem;left:50%;width:20.5rem;margin-left:-10.25rem;
  transform-origin:center bottom;border-radius:16px;
  transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .35s ease;will-change:transform;outline:none}
@media(min-width:640px){.deck-card{width:20.5rem;margin-left:-10.25rem}}
.deck-card.is-center{transform:translateY(0)rotate(0deg)scale(1);z-index:30;box-shadow:0 26px 55px -22px rgba(10,10,10,.30)}
.deck-card.is-left{transform:translateX(-40%)translateY(14px)rotate(-16deg)scale(.88);z-index:10;box-shadow:0 16px 32px -18px rgba(10,10,10,.25)}
.deck-card.is-right{transform:translateX(40%)translateY(14px)rotate(16deg)scale(.88);z-index:20;box-shadow:0 16px 32px -18px rgba(10,10,10,.25)}

/* Presence */
.presence-avatar{width:19px;height:19px;border-radius:50%;flex:none;background:rgb(var(--g100));
  box-shadow:0 0 0 1.5px rgb(var(--bg)),0 0 0 2.5px rgb(var(--g200))}
.presence-icons>.presence-avatar+.presence-avatar{margin-left:-6px}
.presence-more{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  margin-left:-6px;padding:0 5px;border-radius:999px;background:rgb(var(--g200));
  box-shadow:0 0 0 1.5px rgb(var(--bg)),0 0 0 2.5px rgb(var(--g300));
  color:rgb(var(--g500));font-size:9px;font-weight:600;line-height:1}

/* Scroll */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgb(var(--g300));border-radius:3px}