*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:'Geist',system-ui,sans-serif;
  background:#0a0a0a;
  color:#6b6560;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
  padding-left:max(env(safe-area-inset-left),1.25rem)!important;
  padding-right:max(env(safe-area-inset-right),1.25rem)!important;
  scrollbar-width:thin;
  scrollbar-color:#333333 #0a0a0a;
}
@media (max-width:640px){
  body{padding-top:2.5rem!important;padding-bottom:2.5rem!important}
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  opacity:0.025;
  pointer-events:none;
  z-index:50;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4{color:#e8e4de;letter-spacing:-0.03em;font-weight:500}
.mono{font-family:'Geist Mono',monospace}
::selection{background:#e8e4de;color:#0a0a0a}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:#0a0a0a}
::-webkit-scrollbar-thumb{background:#333333;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#444444}
::-webkit-scrollbar-button{display:none}

.card{
  background:#111111;
  border:1px solid transparent;
  transition:border-color 0.2s ease, background-color 0.2s ease;
}
.card:hover{border-color:#1c1c1c;background-color:#131313}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:3rem;
  text-align:center;
  border:1px solid #1c1c1c;
  color:#6b6560;
  padding:0.55rem 0.75rem;
  font-size:0.7rem;
  font-family:'Geist Mono',monospace;
  text-transform:uppercase;
  letter-spacing:0.06em;
  transition:all 0.1s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn:hover{border-color:#e8e4de;color:#e8e4de;background:transparent}
.btn:active{border-color:#e8e4de;color:#e8e4de}

.link-fade{transition:color 0.15s ease}
.link-fade:hover{color:#e8e4de}

#lightbox{transition:opacity 0.2s ease}
#lightbox.hidden{opacity:0;pointer-events:none}
#lightbox:not(.hidden){opacity:1;pointer-events:auto}

#page-transition{
  position:fixed;
  inset:0;
  background:#0a0a0a;
  z-index:9999;
  opacity:1;
  transition:opacity 0.2s ease;
  pointer-events:auto;
}
@media (prefers-reduced-motion:reduce){
  #page-transition{transition:none !important}
}