:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --glass: rgba(255,255,255,.14);
  --glass-b: rgba(255,255,255,.28);
  --text: #f6f7fb;
  --muted:#bdc1d6;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;height:100%;color:var(--text);font-family:-apple-system,system-ui,Segoe UI,Roboto,Inter,Helvetica,Arial; background: #0c0810; overflow-x:hidden}

/* Underlay */
.rose-wallpaper{position:fixed; inset:0; z-index:-2; background:
  url('rose.jpg') center/cover no-repeat,
  radial-gradient(60% 80% at 70% 10%, #ffb3c6 10%, transparent 60%),
  radial-gradient(50% 70% at 20% 30%, #ffc2d1 8%, transparent 55%),
  radial-gradient(40% 60% at 80% 70%, #ffe5ec 8%, transparent 55%),
  linear-gradient(160deg, #3a0a1a, #140910 50%, #1a0d14);
 filter: blur(14px) brightness(1.1) saturate(130%); transform:scale(1.02);}
/* subtle bright overlay so very dark roses don't look black */
.rose-wallpaper::after{
  content:""; position:absolute; inset:0;
  background: radial-gradient(80% 60% at 50% 10%, rgba(255,210,230,.18), transparent 60%),
              radial-gradient(70% 50% at 10% 80%, rgba(255,160,200,.12), transparent 60%);
}

/* Lock */
.lock-screen{position:fixed; inset:0; z-index:10; display:grid; grid-template-rows:auto 1fr; backdrop-filter: blur(16px) saturate(140%);}
.statusbar{padding:10px 14px calc(8px + var(--safe-top)); display:flex; justify-content:space-between; font-size:12px; opacity:.9}
.lock-center{min-height:calc(100svh - var(--safe-top) - var(--safe-bottom)); display:grid; place-content:center; justify-items:center; gap:10px; padding:0 16px calc(24px + var(--safe-bottom));}
.lock-clock{font-weight:800; font-size: clamp(48px, 13svw, 86px); text-shadow:0 6px 22px rgba(0,0,0,.5)}
.lock-widgets{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.pill{padding:6px 12px; border-radius:18px; background:var(--glass); border:1px solid var(--glass-b); backdrop-filter: blur(8px); font-size:12px}
.passcode-title{font-weight:600; opacity:.9}
.dots{display:flex; gap:12px; margin-top:2px}
.dots span{width:12px;height:12px;border-radius:50%; border:2px solid #fff; background:transparent}
.dots .f{background:#fff}

/* Keypad */
.keypad{width:min(520px,95vw); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap: clamp(10px,3.6svh,18px); justify-items:center; margin-top:6px}
.keypad .sp{height:1px; visibility:hidden}
.keypad .zero{grid-column:2/span 1}
.keypad button{position:relative;-webkit-tap-highlight-color:transparent; width:clamp(70px,18vw,96px); aspect-ratio:1/1; border-radius:50%; border:1px solid rgba(255,255,255,.25); background: radial-gradient(140% 140% at 50% 30%, #ffffff2a 0%, #ffffff10 60%, #00000050 100%); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px #ffffff26; transition: transform .12s ease, box-shadow .12s ease}
.keypad .n{font-weight:800; font-size:28px}
.keypad .a{font-size:10px; opacity:.8; margin-top:2px; letter-spacing:1.2px}
.keypad button:active{transform:scale(.86); box-shadow:0 4px 14px rgba(0,0,0,.7) inset}
.keypad button.bounce{transform:scale(1.08); box-shadow:0 0 18px rgba(255,255,255,.6)}

/* App */
.hidden{display:none}
.topbar{position:sticky; top:0; padding:16px 16px; background:linear-gradient(180deg,#0a0b10ee,#0a0b10bb 55%,transparent); backdrop-filter: blur(10px)}
.brand{display:flex; gap:10px; align-items:center}
.logo{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:linear-gradient(135deg,#ff7aa8,#ffd591); box-shadow:0 10px 26px rgba(0,0,0,.35)}
.card{background:linear-gradient(180deg,#ffffff18,#ffffff0a); border:1px solid #ffffff28; border-radius:22px; padding:18px; backdrop-filter: blur(8px); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero{text-align:center; margin:18px auto; max-width:960px}
.script{font-family: "Playfair Display", Georgia, serif; font-size: clamp(36px,8svw,54px); margin:0}
.sub{color:var(--muted)}
.countup{margin-top:12px; font-weight:600}
.grid{display:grid; gap:16px; grid-template-columns:1fr; padding:0 12px; max-width:720px; margin:0 auto 40px}
@media (min-width:900px){ .grid{grid-template-columns:1.2fr .8fr; max-width:1100px; padding:0 20px} .card{border-radius:24px; padding:22px} }
.poem h2,.quote h2{margin-top:0}
.poem-body .line{opacity:0; transform: translateY(6px); filter: blur(1px); animation: lineIn .7s ease forwards}
@keyframes lineIn{to{opacity:1; transform:none; filter:none}}
.meta{display:flex; justify-content:space-between; color:var(--muted); margin-top:10px}
.foot{text-align:center; color:var(--muted); margin: 0 0 24px}