*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { width:100%; max-width:100vw; overflow-x:hidden; }
    :root {
      --bg:#05070d;
      --bg2:#090d16;
      --surface:#0d1320;
      --surface2:#111a2b;
      --surface3:#162033;
      --border:#233149;
      --border2:#31435f;
      --accent:#22d3ee;
      --accent2:#f59e0b;
      --accent3:#34d399;
      --text:#e7edf8;
      --text2:#93a4bd;
      --danger:#fb7185;
      --success:#34d399;
      --warn:#fbbf24;
      --r:16px;
      --sidebar:308px;
      --font:'Avenir Next','Segoe UI',system-ui,sans-serif;
    }
    body {
      font-family:var(--font);
      background:
        radial-gradient(circle at top left, rgba(34,211,238,.12), transparent 25%),
        radial-gradient(circle at top right, rgba(245,158,11,.10), transparent 22%),
        linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
      color:var(--text);
      height:100vh;
      height:100dvh;
      width:100%;
      max-width:100vw;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      position:relative;
      -webkit-overflow-scrolling:touch;
    }
    body::before,
    body::after {
      content:'';
      position:fixed;
      pointer-events:none;
      filter:blur(48px);
      opacity:.28;
      z-index:0;
      will-change:transform;
    }
    body::before { width:300px; height:300px; top:-90px; left:-90px; background:rgba(34,211,238,.18); }
    body::after { width:380px; height:380px; right:-140px; bottom:-140px; background:rgba(245,158,11,.12); }
    body > * { position:relative; z-index:1; }