:root {
  --glass: rgba(255,255,255,0.15); --glass-b: rgba(255,255,255,0.2);
  --glass-s: rgba(255,255,255,0.25);
  --ink: #ffffff; --ink2: rgba(255,255,255,0.7); --accent: #a8d2fb;
  --heart: #ff6b8a; --shadow: rgba(0,0,0,0.3);
  --overlay: rgba(0,0,0,0.45);
}
@media(prefers-color-scheme:dark){:root{
  --overlay: rgba(0,0,0,0.55);
  --glass: rgba(255,255,255,0.1); --glass-b: rgba(255,255,255,0.14);
  --glass-s: rgba(255,255,255,0.12);
}}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,"SF Pro Display",system-ui,sans-serif;
  background:#0d1b2a;color:var(--ink);-webkit-font-smoothing:antialiased}
#app{position:absolute;inset:0;overflow:hidden}

.topbar{position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;padding:18px 22px}
.brand h1{font-size:20px;font-weight:600;letter-spacing:-.4px;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,0.3)}
.amp{font-style:italic;font-weight:400;color:var(--accent)}
.saved-pill{display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;border:1px solid var(--glass-b);
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:#fff;font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 14px var(--shadow)}
.saved-pill .heart-icon{color:var(--heart)}

.stage{position:absolute;inset:0;overflow:hidden}
.card{position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:80px 36px 120px;text-align:center;
  background-size:cover;background-position:center}
.card-overlay{position:absolute;inset:0;background:var(--overlay);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.card-eyebrow{position:relative;z-index:1;margin-bottom:20px;
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:rgba(255,255,255,0.85);font-weight:600;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
  white-space:nowrap}
.card-text{position:relative;z-index:1;
  font-size:28px;line-height:1.4;font-weight:500;
  letter-spacing:-.5px;max-width:520px;color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,0.4)}
.card--today .card-text{font-size:32px}
.card-source{position:relative;z-index:1;margin-top:16px;
  font-size:11px;letter-spacing:1px;color:rgba(255,255,255,0.5);
  text-transform:uppercase}

.heart-btn{position:absolute;bottom:36px;right:28px;z-index:2;
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.5);cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.3);transition:color .2s,background .2s}
.heart-btn.is-saved{color:var(--heart);background:rgba(255,255,255,0.2)}

.nav-btn{position:absolute;z-index:10;left:50%;transform:translateX(-50%);
  width:52px;height:52px;border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.12);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  color:rgba(255,255,255,0.8);cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,0.3);
  display:flex;align-items:center;justify-content:center;transition:opacity .2s}
.nav-down{bottom:24px}
.nav-up{top:62px}
.nav-btn:active{transform:translateX(-50%) scale(.9)}
.nav-hide{opacity:0;pointer-events:none}

.counter{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);
  font-size:11px;letter-spacing:2px;color:rgba(255,255,255,0.45);z-index:10;
  text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,0.4)}