:root {
    --bg:     #121316;
    --ink:    #d9d9d5;
    --bright: #f4f4f2;
    --line:   #2b2e33;
    --accent: #e5484d;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *, *::before, *::after { box-sizing: inherit; }
  html { height: 100%; }
  body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    overflow: hidden;
  }
  @media (pointer: fine) and (prefers-reduced-motion: no-preference) {
    body { cursor: none; }
  }
  #wx  { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
  #fx  { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
  #bg  { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
  #city{ position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
  main { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
  .figure { position: absolute; }
  .figure canvas { position: absolute; inset: 0; width: 100%; height: 100%; }