:root{
  --blue:      #22bbff;
  --blue-dim:  #1a2530;
  --blue-deep: #0b1b26;
  --ink:       #000000;
  --ground:    #05070a;
  --paper:     #eef2f5;
  --fog:       rgba(255,255,255,.62);
  --fog-2:     rgba(255,255,255,.46);
  --hair:      rgba(255,255,255,.10);
  --glow:      rgba(34,187,255,.55);

  --ff-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-2: cubic-bezier(.65,.05,.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

html,body{ height:100%; }
body{
  font-family:var(--ff-sans);
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  cursor:default;
}

::selection{ background:var(--blue); color:#00121e; }

a{ color:inherit; text-decoration:none; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--blue); outline-offset:3px; border-radius:2px;
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

@keyframes grainDrift{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)}
  80%{transform:translate(1%,3%)} 100%{transform:translate(0,0)}
}

.mark{
  position:fixed; top:26px; left:32px; z-index:50;
  display:flex; align-items:center; gap:10px;
  color:var(--paper);
}
.mark svg{ display:block; height:17px; width:auto; }

.mark-lg{ top:44px; left:52px; }
.mark-lg svg{ height:26px; }

.corner{
  position:fixed; z-index:50; font-family:var(--ff-mono);
  font-size:10px; letter-spacing:.22em; color:var(--fog-2);
  text-transform:uppercase;
}
.corner.br{ bottom:28px; right:34px; }

.back{
  position:fixed; top:26px; right:34px; z-index:60;
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.18em;
  color:var(--fog); text-transform:uppercase;
  display:flex; align-items:center; gap:9px;
  transition:color .4s var(--ease);
}
.back:hover{ color:var(--blue); }
.back .arw{
  width:22px; height:1px; background:currentColor; position:relative;
}
.back .arw::before{
  content:""; position:absolute; left:0; top:-3px; width:6px; height:6px;
  border-left:1px solid currentColor; border-top:1px solid currentColor;
  transform:rotate(-45deg);
}

.rise{ opacity:0; transform:translateY(24px); }
.rise.in{ opacity:1; transform:none; transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .rise{ opacity:1; transform:none; }
}