:root{
  --bg:#0b0a12;
  --ui:#EBE6EF; --ui-soft:rgba(235,230,239,.62); --ui-faint:rgba(235,230,239,.34);
  --edge:rgba(235,230,239,.16); --ease:cubic-bezier(.22,.61,.21,1); --slow:cubic-bezier(.32,.12,.16,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--ui);
  font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:300;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  opacity:0;transition:opacity 1s var(--ease)}
body.ready{opacity:1}
.wordmark{font-family:"Fraunces",serif;font-weight:300;font-optical-sizing:auto;letter-spacing:-.01em}
.wordmark .colon{font-style:italic;opacity:.5;padding:0 .04em}
.btn{display:inline-block;text-decoration:none;color:var(--ui);font:inherit;cursor:pointer;
  border:1px solid var(--edge);border-radius:12px;background:rgba(235,230,239,.03);
  padding:.7rem 1.2rem;transition:border-color .5s var(--ease),background .5s var(--ease),transform .5s var(--ease)}
.btn:hover{border-color:rgba(235,230,239,.42);background:rgba(235,230,239,.06)}
.btn:focus-visible{outline:2px solid rgba(232,217,232,.7);outline-offset:2px}
canvas.field{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.vignette{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 42%,transparent 38%,rgba(6,5,12,.55) 100%);opacity:.7}