:root{--bg:linear-gradient(160deg,#eaf4ff, #f5fbff 40%, #e9f1ff 80%);--bg-dark:radial-gradient(1200px 600px at 10% 10%, #0b1220, #0a0f1a 60%, #070b12 100%);--card:#ffffffee;--card-dark:#0f172acc;--text:#0b1220;--text-soft:#475569;--text-dark:#e6edf7;--text-soft-dark:#a8b3cf;--primary:#1976d2;--primary-2:#60a5fa;--ring:#90caf9;--muted:#eef2f7;--muted-dark:#0b1324;--logo-bg:#E6F4FF}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;color:var(--text);background:var(--bg);background-attachment:fixed}
@media (prefers-color-scheme: dark){body{color:var(--text-dark);background:var(--bg-dark)}:root{--logo-bg:#0b1220}}
.container{min-height:100%;display:grid;place-items:center;padding:6vh 16px}
.card{width:100%;max-width:720px;background:var(--card);backdrop-filter:saturate(120%) blur(10px);-webkit-backdrop-filter:saturate(120%) blur(10px);border-radius:20px;padding:36px;box-shadow:0 10px 30px rgba(2,6,23,.08),0 2px 10px rgba(2,6,23,.04);border:1px solid rgba(120,144,156,.15);animation:fadeIn .6s ease-out}
@media (prefers-color-scheme: dark){.card{background:var(--card-dark);border-color:rgba(148,163,184,.18);box-shadow:0 10px 30px rgba(0,0,0,.35)}}
.logo{display:flex;justify-content:center;margin-bottom:8px}
.duck{filter:drop-shadow(0 6px 12px rgba(2,6,23,.1));animation:floatUpDown 3.4s ease-in-out infinite}
.title{margin:8px 0 4px;font-size:28px;line-height:1.2;text-align:center;letter-spacing:.5px}
.subtitle{margin:0 0 16px;text-align:center;color:var(--text-soft)}
@media (prefers-color-scheme: dark){.subtitle{color:var(--text-soft-dark)}}
.countdown{margin:8px auto 20px;padding:10px 14px;max-width:280px;border-radius:999px;background:linear-gradient(180deg,#fff, #f7fbff);border:1px solid #e3f2fd;color:#0b1220;text-align:center;font-weight:600}
.countdown span{color:#1565c0}
@media (prefers-color-scheme: dark){.countdown{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border-color:#1f2a44;color:#e6edf7}.countdown span{color:#8ab4ff}}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{appearance:none;border:1px solid transparent;border-radius:12px;padding:12px 18px;font-size:15px;font-weight:600;cursor:pointer;transition:transform .1s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.btn:focus{outline:2px solid var(--ring);outline-offset:2px}
.btn.primary{color:#fff;background:linear-gradient(180deg,var(--primary),#1565c0);box-shadow:0 6px 16px rgba(25,118,210,.35);border-color:#115293}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(25,118,210,.45)}
.btn.ghost{background:transparent;border-color:rgba(2,6,23,.12);color:var(--text-soft)}
@media (prefers-color-scheme: dark){.btn.ghost{border-color:rgba(148,163,184,.25);color:var(--text-soft-dark)}}
.btn.ghost:hover{transform:translateY(-1px);background:rgba(2,6,23,.03)}
.tips{margin-top:18px}
.tips summary{cursor:pointer;color:var(--text-soft)}
@media (prefers-color-scheme: dark){.tips summary{color:var(--text-soft-dark)}}
.noscript{margin-top:10px;padding:10px 12px;border-radius:10px;background:#fff6e6;color:#8a6d3b;border:1px solid #ffe0a3}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}