:root{
  --desk:#2f3527;
  --paper:#ece4d4;
  --label:#e2dccf;
  --pad:clamp(18px,3vw,36px);
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  height:100%;
  overflow:hidden;
  background:var(--desk);
  color:var(--label);
}

body{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  overscroll-behavior:none;
}

.stage{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .9s ease;
  cursor:pointer;
}
.stage.is-ready{ opacity:1; }
html.aiming .stage{ cursor:none; }

/* film grain + a soft lens falloff over the render */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(30,20,10,.22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.5;
}

.frame{
  position:relative;
  z-index:2;
  height:100dvh;
  pointer-events:none;
  mix-blend-mode:difference; /* labels read on both paper and desk */
}

/* the real name, for screen readers — and the whole page if WebGL is missing */
.wordmark{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
html.no-gl .frame{ mix-blend-mode:normal; }
html.no-gl .wordmark{
  position:absolute;
  inset:0;
  width:auto;height:auto;
  clip:auto;
  display:flex;
  align-items:center;
  padding:var(--pad);
  font-family:'Inter Tight',Arial,sans-serif;
  font-weight:800;
  font-size:clamp(3rem,11vw,9rem);
  line-height:.9;
  white-space:normal;
  color:var(--paper);
}

.tag{
  position:absolute;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
  color:var(--label);
  opacity:0;
  animation:fade-in 1s ease forwards;
  animation-delay:.9s;
}
.tag--tl{ top:calc(var(--pad) + env(safe-area-inset-top,0px)); left:var(--pad); }
.tag--tr{ top:calc(var(--pad) + env(safe-area-inset-top,0px)); right:var(--pad); font-variant-numeric:tabular-nums; }
.tag--bl{ bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px)); left:var(--pad); display:flex; gap:14px; pointer-events:auto; }
.tag--br{ bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px)); right:var(--pad); }

.tag a{
  color:inherit;
  text-decoration:none;
  padding:8px 0;
  margin:-8px 0;
  cursor:pointer;
  transition:color .2s ease;
}
.tag a:hover,
.tag a:focus-visible{ color:#fff; outline:none; }

@keyframes fade-in{ to{ opacity:1; } }

@media (max-width:640px){
  .tag{ font-size:9px; letter-spacing:.04em; }
  .tag--bl{ gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  .tag{ animation:none; opacity:1; }
  .stage{ transition:none; }
}