:root {
      --bg: #0b0c10;
      --card: #11141a;
      --muted: #8a94a6;
      --text: #e8ecf1;
      --accent: #5a8dee;
      --accent-2: #4fd1c5;
      --ring: #263449;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 22px;
    }

    @media (prefers-color-scheme: light) {
      :root {
        --bg: #f6f7fb;
        --card: #ffffff;
        --muted: #59657a;
        --text: #0d1117;
        --accent: #3867d6;
        --accent-2: #0fb9b1;
        --ring: #e7eefc;
        --shadow: 0 10px 25px rgba(24, 33, 77, .08);
      }
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 600px at 80% -10%, rgba(90,141,238,.15), transparent 40%),
                  radial-gradient(1000px 500px at -10% 110%, rgba(79,209,197,.12), transparent 40%),
                  var(--bg);
      color: var(--text);
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .app {
      width: min(920px, 100%);
      display: grid;
      gap: 18px;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .title {
      font-size: clamp(20px, 3.2vw, 28px);
      font-weight: 800;
      letter-spacing: .2px;
      line-height: 1.05;
    }

    .subtitle {
      margin-top: 4px;
      color: var(--muted);
      font-size: clamp(12px, 2.2vw, 14px);
    }

    .segment {
      display: inline-flex;
      background: var(--card);
      border: 1px solid var(--ring);
      border-radius: calc(var(--radius) + 8px);
      padding: 6px;
      gap: 6px;
      box-shadow: var(--shadow);
    }

    .seg-btn {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      font-weight: 700;
      letter-spacing: .3px;
      padding: 10px 14px;
      border-radius: calc(var(--radius) - 6px);
      cursor: pointer;
      transition: transform .12s ease, color .2s ease, background-color .2s ease, box-shadow .2s ease;
      outline: none;
    }
    .seg-btn:hover { transform: translateY(-1px); }
    .seg-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
    .seg-btn.active {
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent-2) 24%, transparent));
      color: var(--text);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 6px 16px rgba(0,0,0,.10);
    }

    .card {
      background: var(--card);
      border: 1px solid var(--ring);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(16px, 3.2vw, 28px);
      display: grid;
      gap: 14px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
    }

    .zone-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: color-mix(in srgb, var(--accent-2) 14%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent-2) 35%, var(--ring));
      color: var(--text);
      padding: 8px 12px;
      border-radius: 999px;
      width: max-content;
      font-weight: 700;
      letter-spacing: .3px;
      font-size: clamp(12px, 2vw, 13px);
    }

    .time {
      font-variant-numeric: tabular-nums;
      line-height: 1;
      font-weight: 900;
      font-size: clamp(48px, 12vw, 108px);
      letter-spacing: .5px;
      text-wrap: balance;
    }

    .date {
      color: var(--muted);
      font-weight: 600;
      letter-spacing: .2px;
      font-size: clamp(12px, 2.4vw, 16px);
    }

    .hint {
      color: var(--muted);
      font-size: 12px;
    }

    .glow {
      position: absolute;
      inset: -40% -30% auto auto;
      width: 520px;
      height: 520px;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
      filter: blur(30px);
      opacity: .35;
      z-index: -1;
      pointer-events: none;
      transform: translate(15%, -15%);
    }

    footer {
      text-align: center;
      color: var(--muted);
      font-size: 12px;
      margin-top: 8px;
    }

    /* Small screens */
    @media (max-width: 520px) {
      .header { flex-direction: column; align-items: flex-start; }
      .segment { width: 100%; justify-content: space-between; }
      .seg-btn { flex: 1; text-align: center; }
    }