:root{
      --bg:#0f1724;
      --card:#0b1220;
      --accent:#0ea5e9;
      --muted:#9aa6b2;
      --glass: rgba(255,255,255,0.04);
      color-scheme: dark;
      font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      background: radial-gradient(1200px 600px at 10% 10%, rgba(14,165,233,0.06), transparent),
                  radial-gradient(800px 400px at 90% 90%, rgba(99,102,241,0.04), transparent),
                  var(--bg);
      display:flex;align-items:center;justify-content:center;padding:32px;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    }

    .watch{
      width:min(520px,92vw);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border-radius:18px;padding:28px;border:1px solid rgba(255,255,255,0.04);
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      display:grid;gap:18px;align-items:center;justify-items:center;
    }

    .display{
      width:100%;padding:22px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), var(--glass));
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      border:1px solid rgba(255,255,255,0.03);
    }

    .time{
      font-size: clamp(36px, 8vw, 72px);
      font-weight: 800;letter-spacing: -2px;color:var(--accent);
      text-shadow: 0 6px 30px rgba(14,165,233,0.08);
      margin:0;padding:0;
      display:flex;gap:8px;align-items:baseline;
    }

    .sec{font-weight:600;font-size:0.45em;color:var(--muted)}
    .ampm{font-weight:600;font-size:0.35em;color:var(--muted);margin-left:6px}

    .date{font-size:14px;color:var(--muted);margin-top:6px}

    .controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
    .btn{
      background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px 12px;border-radius:10px;
      color:var(--muted);cursor:pointer;font-weight:600;font-size:14px;backdrop-filter: blur(6px);
    }
    .btn:active{transform:translateY(1px)}

    .small{font-size:12px;padding:6px 10px}

    .footer{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;width:100%;align-items:center}
    .logo{font-weight:700;color:#cfeffd}

  
    .light{--bg:#f6fbff;--card:#ffffff;--accent:#0b6cff;--muted:#475569;--glass: rgba(2,6,23,0.03);color-scheme:light}

    @media (max-width:420px){
      .watch{padding:18px}
      .date{font-size:12px}
    }