* {
      box-sizing: border-box;
      user-select: none;
      -webkit-user-select: none;
      font-family: 'Inter', sans-serif;
    }
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #090d16;
      color: #f8fafc;
    }
    #canvas-container {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .glass-panel {
      background: rgba(15, 23, 42, 0.82);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.14);
    }
    .glass-pill {
      background: rgba(15, 23, 42, 0.78);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.15);
    }
    .control-btn {
      touch-action: manipulation;
      transition: transform 0.08s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    }
    .control-btn:active, .control-btn.active-press {
      transform: scale(0.93);
      background: rgba(56, 189, 248, 0.35);
      border-color: rgba(56, 189, 248, 0.8);
    }
    @keyframes floatPop {
      0% { opacity: 1; transform: translateY(0) scale(0.9); }
      50% { opacity: 1; transform: translateY(-18px) scale(1.08); }
      100% { opacity: 0; transform: translateY(-36px) scale(0.95); }
    }
    .floating-popup {
      animation: floatPop 0.95s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .custom-scroll::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: rgba(15, 23, 42, 0.4);
      border-radius: 9999px;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: rgba(148, 163, 184, 0.4);
      border-radius: 9999px;
    }