:root {
      color-scheme: light dark;
    }

    body {
      margin: 0;
      padding: 0;
      font-family: monospace;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: var(--bg, #ffffff);
      color: var(--fg, #000000);
      user-select: none;
      transition: background 0.2s, color 0.2s;
      position: relative;
    }

    #clock {
      font-size: 15vw;
    }

    #date {
      font-size: 5vw;
      margin-top: 1vh;
    }

#wakelock-hint {
  font-size: 3.2vw;
  margin-bottom: 2vh;
  opacity: 0.75;
  animation: pulse 1.5s infinite;
  cursor: pointer;
}

    @keyframes pulse {
      0% { opacity: 0.6; }
      50% { opacity: 1; }
      100% { opacity: 0.6; }
    }

    .controls {
      position: absolute;
      top: 1rem;
      right: 1rem;
      display: flex;
      gap: 0.5rem;
      flex-wrap: wrap;
    }

    .controls-row {
      display: flex;
      gap: 0.5rem;
      justify-content: center;
      width: 100%;
    }

    .controls-row button,
    .controls-row select {
      font-family: monospace;
      font-size: 1rem;
      padding: 0.4rem;
      background: inherit;
      color: inherit;
      border: 1px solid currentColor;
      border-radius: 5px;
      cursor: pointer;
    }

    .controls-row button {
      flex: 1 1 50%;
      text-align: center;
    }

    .controls-row select {
      flex: 1 1 100%;
      text-align: center;
    }

    .dark {
      --bg: #000000;
      --fg: #ffffff;
    }

    @media (max-width: 600px) {
      .controls {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 3rem;
        top: auto;
        right: 0;
        left: 0;
        width: 93%;
        gap: 0.6rem;
        z-index: 999;
        padding-bottom: 0.01rem;
        padding-left: 0.85rem;
        padding-right: 1rem;
      }

      #clock {
        font-size: 18vw;
      }

      #date {
        font-size: 6vw;
      }

      #wakelock-hint {
        font-size: 4vw;
      }
    }