body {
      padding: 0;
      margin: 0;
      background-color: #0a0510;
      overflow: hidden;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    .app {
      --clock-size: 3vw;
      font-family: sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      position: relative;
    }

    .app canvas {
      display: block;
    }

    .app::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: calc(var(--clock-size) * 30);
      height: calc(var(--clock-size) * 10);
      background: radial-gradient(
        ellipse 55% 45% at center,
        var(--glow-color, rgba(255, 0, 255, 0.12)) 0%,
        var(--glow-color, rgba(255, 0, 255, 0.04)) 40%,
        transparent 72%
      );
      border-radius: calc(var(--clock-size) * 4);
      z-index: -1;
      pointer-events: none;
      transition: background 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .controls {
      position: fixed;
      bottom: 20px;
      left: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      z-index: 10;
      opacity: 0;
      transition: opacity 0.5s ease 5s;
    }

    .controls:hover {
      opacity: 1;
      transition: opacity 0.2s ease 0s;
    }

    .controls-auto {
      width: min(600px, calc(100% - 40px));
      display: flex;
    }

    .controls-auto button {
      flex: 1;
      padding: 10px 24px;
    }

    .controls-groups {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      width: 100%;
    }

    .control-group {
      display: flex;
      width: min(600px, calc(100% - 40px));
      gap: 8px;
    }

    .controls button {
      flex: 1;
      background: #150a21;
      color: #8a7b9d;
      border: 2px solid #2d1b4e;
      padding: 8px 0;
      border-radius: 20px;
      font-family: sans-serif;
      font-size: 14px;
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s, border-color 0.2s, box-shadow 0.2s;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .controls button:hover {
      background: #231236;
      color: #fff;
      border-color: #593699;
      transform: translateY(-1.5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }

    .controls button:active {
      transform: translateY(0.5px);
    }

    .controls button.active {
      background: #1d0f2d;
      color: #fff;
      border-color: #FF00FF;
      box-shadow: 0 0 10px rgba(255, 0, 255, 0.2);
    }

    .controls button.active:hover {
      box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3);
    }

    .controls button.excluded {
      opacity: 0.4;
      border-color: #1d0f2d;
      text-decoration: line-through;
    }

    .controls button.current-playing {
      text-decoration: underline;
      text-underline-offset: 4px;
      text-decoration-color: #FF00FF;
      text-decoration-thickness: 2px;
    }

    .perf-stats,
    .perf-stats-label,
    .perf-stats-val {
      -webkit-text-stroke: 2px #000;
    }

    .perf-stats {
      position: fixed;
      top: 10px;
      right: 14px;
      z-index: 10000;
      display: none;
      font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
      font-weight: 700;
      line-height: 1;
      color: #ffff00;
      text-align: left;
      paint-order: stroke fill;
      text-shadow:
        2px 0 0 #000,
        -2px 0 0 #000,
        0 2px 0 #000,
        0 -2px 0 #000,
        2px 2px 0 #000,
        -2px 2px 0 #000,
        2px -2px 0 #000,
        -2px -2px 0 #000;
      -webkit-font-smoothing: none;
      -moz-osx-font-smoothing: unset;
      font-smooth: never;
      text-rendering: optimizeSpeed;
      pointer-events: none;
      user-select: none;
    }

    .perf-stats.visible {
      display: block;
    }

    .perf-stats-grid {
      display: grid;
      grid-template-columns: auto 4.75em 14.25em;
      column-gap: 12px;
      row-gap: 0px;
      align-items: center;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.02em;
      position: relative;
    }

    .perf-spark {
      width: 100%;
      height: 24px;
      align-self: center;
      z-index: 1;
      pointer-events: none;
    }

    .perf-stats-label {
      text-align: left;
      padding-right: 6px;
    }

    .perf-stats-val {
      text-align: center;
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      letter-spacing: 0.04em;
    }

    .perf-stats-wide {
      grid-column: 2 / span 2;
      text-align: left;
    }

    .blank-page .blank-app::before {
      display: none;
    }

    .blank-toolbar {
      position: fixed;
      top: 16px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 10;
    }

    .blank-toolbar button {
      background: #150a21;
      color: #8a7b9d;
      border: 2px solid #2d1b4e;
      padding: 8px 20px;
      border-radius: 20px;
      font-family: sans-serif;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .blank-toolbar button:hover {
      background: #231236;
      color: #fff;
      border-color: #593699;
    }

    .blank-hint {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      padding: 10px 20px;
      border-radius: 20px;
      background: rgba(21, 10, 33, 0.92);
      border: 2px solid #2d1b4e;
      color: #8a7b9d;
      font-family: sans-serif;
      font-size: 14px;
      pointer-events: none;
      user-select: none;
      z-index: 10;
    }