/* /pwa — Apple-inspired standalone install guide */
html.standalone-page,
html.standalone-page body {
  background:#f5f5f7 !important;
}
html.dark.standalone-page,
html.dark.standalone-page body {
  background:#000 !important;
}

.pwa-apple {
  --pwa-bg:#f5f5f7;
  --pwa-card:#fff;
  --pwa-text:#1d1d1f;
  --pwa-muted:#6e6e73;
  --pwa-line:rgba(0,0,0,.08);
  --pwa-blue:#0071e3;
  --pwa-blue-hover:#0077ed;
  min-height:100svh;
  overflow:hidden;
  background:var(--pwa-bg);
  color:var(--pwa-text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.dark .pwa-apple {
  --pwa-bg:#000;
  --pwa-card:#111113;
  --pwa-text:#f5f5f7;
  --pwa-muted:#a1a1a6;
  --pwa-line:rgba(255,255,255,.12);
  --pwa-blue:#2997ff;
  --pwa-blue-hover:#40a9ff;
}
.pwa-apple *, .pwa-apple *::before, .pwa-apple *::after { box-sizing:border-box; }
.pwa-apple a { color:inherit; text-decoration:none; }
.pwa-shell { width:min(1080px,calc(100% - 40px)); margin:0 auto; }

.pwa-nav {
  position:relative;
  z-index:20;
  border-bottom:1px solid var(--pwa-line);
  background:rgba(245,245,247,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}
.dark .pwa-nav { background:rgba(0,0,0,.72); }
.pwa-nav-inner { height:58px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.pwa-brand { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:650; letter-spacing:-.02em; }
.pwa-brand-logo { width:31px; height:31px; display:grid; place-items:center; overflow:hidden; border-radius:9px; box-shadow:0 4px 12px rgba(0,113,227,.16); }
.pwa-brand-logo svg { width:100%; height:100%; display:block; }
.pwa-nav-link { display:inline-flex; align-items:center; gap:4px; color:var(--pwa-blue)!important; font-size:13px; font-weight:500; }
.pwa-nav-link svg { width:15px; height:15px; }

.pwa-hero { padding:82px 0 34px; text-align:center; }
.pwa-hero-inner { display:flex; flex-direction:column; align-items:center; }
.pwa-kicker { margin-bottom:22px; color:var(--pwa-muted); font-size:20px; line-height:1.2; font-weight:650; letter-spacing:-.02em; }
.pwa-app-icon { width:118px; height:118px; overflow:hidden; border-radius:27px; box-shadow:0 22px 54px rgba(0,0,0,.16),0 3px 10px rgba(0,0,0,.08); }
.pwa-app-icon svg { display:block; width:100%; height:100%; }
.pwa-hero h1 { margin:31px 0 0; max-width:900px; font-size:clamp(52px,7.6vw,88px); line-height:.96; font-weight:700; letter-spacing:-.065em; }
.pwa-hero h1 span {
  background:linear-gradient(90deg,#0071e3 0%,#34aadc 40%,#5856d6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.dark .pwa-hero h1 span { background-image:linear-gradient(90deg,#2997ff 0%,#64d2ff 44%,#bf5af2 100%); }
.pwa-lead { max-width:700px; margin:27px 0 0; color:var(--pwa-muted); font-size:21px; line-height:1.45; font-weight:450; letter-spacing:-.02em; }
.pwa-hero-actions { display:flex; align-items:center; justify-content:center; gap:20px; margin-top:31px; }
.pwa-primary-btn { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border-radius:999px; background:var(--pwa-blue); color:#fff!important; font-size:15px; font-weight:600; transition:transform .2s ease,background .2s ease; }
.pwa-primary-btn:hover { transform:translateY(-1px); background:var(--pwa-blue-hover); }
.pwa-time { display:inline-flex; align-items:center; gap:8px; color:var(--pwa-muted); font-size:14px; }
.pwa-time i { width:8px; height:8px; border-radius:50%; background:#30d158; box-shadow:0 0 0 4px rgba(48,209,88,.12); }
.pwa-installed { display:none; align-items:center; gap:8px; margin-top:22px; padding:10px 14px; border-radius:999px; background:rgba(48,209,88,.12); color:#248a3d; font-size:13px; font-weight:600; }
.dark .pwa-installed { color:#30d158; }
.pwa-installed svg { width:16px; height:16px; }
.pwa-installed.is-visible { display:inline-flex; }
.pwa-browser-notice { display:none; flex-direction:column; gap:3px; width:min(620px,100%); margin-top:22px; padding:15px 17px; border:1px solid var(--pwa-line); border-radius:18px; background:rgba(255,255,255,.72); color:var(--pwa-text); text-align:left; box-shadow:0 8px 30px rgba(0,0,0,.05); }
.dark .pwa-browser-notice { background:rgba(255,255,255,.07); }
.pwa-browser-notice.is-visible { display:flex; }
.pwa-browser-notice b { font-size:13px; font-weight:650; }
.pwa-browser-notice span { color:var(--pwa-muted); font-size:12px; line-height:1.45; }
.pwa-browser-notice a { color:var(--pwa-blue); }

.pwa-showcase { padding:12px 0 88px; }
.pwa-phone-stage { position:relative; display:grid; place-items:center; min-height:620px; }
.pwa-phone-glow { position:absolute; width:560px; height:350px; border-radius:50%; background:radial-gradient(circle,rgba(0,113,227,.26),rgba(88,86,214,.11) 45%,transparent 72%); filter:blur(30px); transform:translateY(65px); }
.dark .pwa-phone-glow { background:radial-gradient(circle,rgba(41,151,255,.3),rgba(191,90,242,.11) 45%,transparent 72%); }
.pwa-phone { position:relative; z-index:2; width:286px; height:585px; padding:9px; border:1px solid rgba(255,255,255,.52); border-radius:54px; background:linear-gradient(145deg,#3a3a3c,#0d0d0f); box-shadow:0 42px 100px rgba(0,0,0,.24),inset 0 0 0 1px rgba(0,0,0,.75); transform:rotate(2deg); }
.pwa-phone-screen { position:relative; width:100%; height:100%; overflow:hidden; border-radius:45px; background:linear-gradient(155deg,#d9e8ff 0%,#f7d9f2 43%,#e6e3ff 100%); }
.dark .pwa-phone-screen { background:linear-gradient(155deg,#0b284b 0%,#321837 48%,#181628 100%); }
.pwa-dynamic-island { position:absolute; z-index:8; top:11px; left:50%; width:89px; height:27px; transform:translateX(-50%); border-radius:999px; background:#000; }
.pwa-status { position:absolute; z-index:7; top:16px; left:18px; right:16px; display:flex; align-items:center; justify-content:space-between; color:#111; font-size:9px; font-weight:700; }
.dark .pwa-status { color:#fff; }
.pwa-wallpaper-orb { position:absolute; border-radius:50%; filter:blur(1px); opacity:.75; }
.pwa-orb-a { width:260px; height:260px; top:84px; left:-88px; background:radial-gradient(circle at 60% 40%,#64d2ff,#007aff 55%,transparent 72%); }
.pwa-orb-b { width:290px; height:290px; right:-120px; bottom:90px; background:radial-gradient(circle at 45% 45%,#ff9f0a,#ff375f 40%,#bf5af2 67%,transparent 75%); opacity:.58; }
.pwa-home-grid { position:absolute; z-index:4; top:93px; left:23px; right:23px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px 13px; }
.pwa-home-app { display:flex; flex-direction:column; align-items:center; gap:5px; min-width:0; }
.pwa-home-app > span { width:47px; height:47px; display:grid; place-items:center; overflow:hidden; border-radius:12px; box-shadow:0 6px 14px rgba(0,0,0,.12); }
.pwa-home-app > span svg { width:100%; height:100%; display:block; }
.pwa-home-app small { max-width:58px; overflow:hidden; color:#111; font-size:7px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px 1px rgba(255,255,255,.55); }
.dark .pwa-home-app small { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.75); }
.pwa-fake-icon { color:#fff; font-size:20px; font-style:normal; }
.pwa-fake-icon.is-weather { background:linear-gradient(#3b82f6,#60a5fa); }
.pwa-fake-icon.is-photo { background:conic-gradient(#ff453a,#ff9f0a,#ffd60a,#30d158,#64d2ff,#0a84ff,#bf5af2,#ff375f,#ff453a); }
.pwa-fake-icon.is-map { background:linear-gradient(135deg,#34c759 0 35%,#f5f5f7 35% 65%,#0a84ff 65%); }
.pwa-dock { position:absolute; z-index:5; left:18px; right:18px; bottom:18px; height:69px; display:flex; align-items:center; justify-content:space-around; padding:0 12px; border:1px solid rgba(255,255,255,.5); border-radius:24px; background:rgba(255,255,255,.36); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.pwa-dock i { width:44px; height:44px; border-radius:12px; background:linear-gradient(145deg,#30d158,#1db954); box-shadow:0 5px 12px rgba(0,0,0,.1); }
.pwa-dock i:nth-child(2){ background:linear-gradient(145deg,#0a84ff,#0066cc); }
.pwa-dock i:nth-child(3){ background:linear-gradient(145deg,#ff375f,#ff2d55); }
.pwa-dock i:nth-child(4){ background:linear-gradient(145deg,#8e8e93,#48484a); }
.pwa-home-indicator { position:absolute; z-index:8; bottom:6px; left:50%; width:93px; height:4px; transform:translateX(-50%); border-radius:999px; background:rgba(0,0,0,.8); }
.dark .pwa-home-indicator { background:rgba(255,255,255,.82); }
.pwa-floating-card { position:absolute; z-index:6; right:calc(50% - 330px); top:190px; width:290px; display:flex; align-items:center; gap:12px; padding:13px; border:1px solid rgba(255,255,255,.7); border-radius:22px; background:rgba(255,255,255,.72); box-shadow:0 22px 60px rgba(0,0,0,.14); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.dark .pwa-floating-card { border-color:rgba(255,255,255,.14); background:rgba(30,30,32,.72); }
.pwa-floating-icon { width:48px; height:48px; flex:0 0 auto; overflow:hidden; border-radius:13px; }
.pwa-floating-icon svg { width:100%; height:100%; display:block; }
.pwa-floating-card div { min-width:0; flex:1; }
.pwa-floating-card b { display:block; font-size:13px; font-weight:650; }
.pwa-floating-card small { display:block; margin-top:3px; color:var(--pwa-muted); font-size:10px; }
.pwa-floating-card > i { display:grid; place-items:center; width:25px; height:25px; border-radius:50%; background:#30d158; color:#fff; font-size:12px; font-style:normal; font-weight:800; }

.pwa-install { padding:96px 0 110px; background:var(--pwa-card); }
.pwa-section-head { max-width:760px; margin:0 auto 48px; text-align:center; }
.pwa-section-head > span { color:var(--pwa-blue); font-size:15px; font-weight:650; }
.pwa-section-head h2 { margin:9px 0 0; font-size:clamp(40px,6vw,64px); line-height:1; font-weight:700; letter-spacing:-.05em; }
.pwa-section-head p { max-width:620px; margin:20px auto 0; color:var(--pwa-muted); font-size:18px; line-height:1.5; letter-spacing:-.015em; }
.pwa-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.pwa-step { min-height:520px; display:flex; flex-direction:column; overflow:hidden; border-radius:32px; background:var(--pwa-bg); }
.pwa-step-copy { display:flex; gap:15px; padding:30px 30px 18px; }
.pwa-step-number { width:36px; height:36px; display:grid; place-items:center; flex:0 0 auto; border-radius:50%; background:var(--pwa-text); color:var(--pwa-bg); font-size:15px; font-weight:700; }
.pwa-step-copy h3 { margin:1px 0 0; font-size:22px; line-height:1.16; font-weight:650; letter-spacing:-.025em; }
.pwa-step-copy p { margin:8px 0 0; max-width:410px; color:var(--pwa-muted); font-size:14px; line-height:1.48; }
.pwa-step-demo { margin:auto 24px 24px; min-height:255px; border:1px solid var(--pwa-line); border-radius:24px; background:var(--pwa-card); box-shadow:0 16px 45px rgba(0,0,0,.055); }
.dark .pwa-step-demo { box-shadow:0 16px 45px rgba(0,0,0,.28); }

.pwa-safari-demo { position:relative; display:flex; flex-direction:column; overflow:hidden; padding:15px; }
.pwa-mini-browser-top { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; min-height:38px; border-radius:12px; background:var(--pwa-bg); color:var(--pwa-muted); font-size:10px; }
.pwa-mini-browser-top span,.pwa-mini-browser-top i { text-align:center; font-style:normal; }
.pwa-mini-browser-top b { text-align:center; color:var(--pwa-text); font-size:10px; font-weight:600; }
.pwa-mini-page { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pwa-mini-logo { width:54px; height:54px; overflow:hidden; border-radius:15px; box-shadow:0 8px 20px rgba(0,113,227,.14); }
.pwa-mini-logo svg { width:100%; height:100%; display:block; }
.pwa-mini-page b { margin-top:9px; font-size:14px; }
.pwa-mini-page small { margin-top:3px; color:var(--pwa-muted); font-size:9px; }
.pwa-mini-browser-bottom { display:flex; align-items:center; justify-content:space-around; height:42px; color:var(--pwa-blue); font-size:20px; }
.pwa-mini-browser-bottom i { min-width:34px; text-align:center; font-style:normal; }
.pwa-mini-browser-bottom .share { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(0,113,227,.1); font-weight:800; }

.pwa-share-demo { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.pwa-share-circle { width:88px; height:88px; display:grid; place-items:center; border-radius:28px; background:#f2f2f7; color:var(--pwa-blue); }
.dark .pwa-share-circle { background:#1c1c1e; }
.pwa-share-circle svg { width:44px; height:44px; }
.pwa-share-demo b { margin-top:18px; font-size:18px; font-weight:650; }
.pwa-share-demo small { margin-top:5px; color:var(--pwa-muted); font-size:11px; }

.pwa-action-demo { padding:13px; }
.pwa-action-demo > div { display:grid; grid-template-columns:34px minmax(0,1fr) 14px; align-items:center; min-height:64px; padding:0 13px; color:var(--pwa-text); }
.pwa-action-demo > div + div { border-top:1px solid var(--pwa-line); }
.pwa-action-demo span { width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--pwa-bg); font-size:17px; }
.pwa-action-demo b { font-size:13px; font-weight:500; }
.pwa-action-demo i { color:var(--pwa-muted); font-size:18px; font-style:normal; }
.pwa-action-demo .is-selected { margin:4px 0; border:0; border-radius:14px; background:rgba(0,113,227,.09); color:var(--pwa-blue); }
.pwa-action-demo .is-selected + div { border-top:0; }
.pwa-action-demo .is-selected span { background:rgba(0,113,227,.12); }

.pwa-add-demo { overflow:hidden; }
.pwa-add-top { height:52px; display:grid; grid-template-columns:72px 1fr 72px; align-items:center; padding:0 12px; border-bottom:1px solid var(--pwa-line); }
.pwa-add-top b { text-align:center; font-size:12px; font-weight:650; }
.pwa-add-top button { padding:0; border:0; background:transparent; color:var(--pwa-blue); font:inherit; font-size:11px; text-align:left; cursor:default; }
.pwa-add-top button.is-blue { text-align:right; font-weight:650; }
.pwa-add-app { display:flex; align-items:center; gap:13px; padding:28px 22px; }
.pwa-add-app > span { width:64px; height:64px; overflow:hidden; border-radius:17px; box-shadow:0 8px 20px rgba(0,0,0,.12); }
.pwa-add-app > span svg { width:100%; height:100%; display:block; }
.pwa-add-app b { display:block; font-size:15px; font-weight:600; }
.pwa-add-app small { display:block; margin-top:5px; color:var(--pwa-muted); font-size:11px; }

.pwa-finish { padding:100px 0; }
.pwa-finish-card { max-width:760px; margin:0 auto; text-align:center; }
.pwa-finish-check { width:68px; height:68px; display:grid; place-items:center; margin:0 auto; border-radius:50%; background:#30d158; color:#fff; font-size:32px; font-weight:700; box-shadow:0 14px 30px rgba(48,209,88,.2); }
.pwa-finish h2 { margin:24px 0 0; font-size:52px; line-height:1; font-weight:700; letter-spacing:-.05em; }
.pwa-finish p { max-width:630px; margin:19px auto 0; color:var(--pwa-muted); font-size:18px; line-height:1.5; }
.pwa-finish a { display:inline-flex; align-items:center; justify-content:center; min-height:46px; margin-top:27px; padding:0 22px; border-radius:999px; background:var(--pwa-blue); color:#fff; font-size:14px; font-weight:600; }
.pwa-footer { padding:22px 0 max(22px,env(safe-area-inset-bottom)); border-top:1px solid var(--pwa-line); color:var(--pwa-muted); }
.pwa-footer .pwa-shell { display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:11px; }

.pwa-reveal { opacity:0; transform:translateY(18px); animation:pwaReveal .7s cubic-bezier(.2,.8,.2,1) forwards; }
.pwa-delay-1 { animation-delay:.09s; }
.pwa-delay-2 { animation-delay:.16s; }
@keyframes pwaReveal { to { opacity:1; transform:none; } }

@media (max-width:900px) {
  .pwa-showcase { padding-bottom:66px; }
  .pwa-phone-stage { min-height:570px; }
  .pwa-floating-card { right:calc(50% - 292px); width:250px; }
  .pwa-steps { grid-template-columns:1fr; }
  .pwa-step { min-height:470px; }
}
@media (max-width:680px) {
  .pwa-shell { width:min(100% - 28px,1080px); }
  .pwa-nav-inner { height:52px; }
  .pwa-brand { font-size:14px; }
  .pwa-brand-logo { width:28px; height:28px; border-radius:8px; }
  .pwa-nav-link { font-size:12px; }
  .pwa-hero { padding:58px 0 26px; }
  .pwa-kicker { margin-bottom:18px; font-size:16px; }
  .pwa-app-icon { width:88px; height:88px; border-radius:22px; }
  .pwa-hero h1 { margin-top:26px; font-size:clamp(43px,13vw,62px); line-height:.98; letter-spacing:-.06em; }
  .pwa-lead { margin-top:20px; font-size:17px; line-height:1.48; }
  .pwa-hero-actions { flex-direction:column; gap:14px; margin-top:25px; }
  .pwa-primary-btn { width:100%; max-width:260px; }
  .pwa-showcase { padding:0 0 58px; }
  .pwa-phone-stage { min-height:500px; transform:scale(.86); margin:-36px 0; }
  .pwa-floating-card { right:50%; top:auto; bottom:10px; width:260px; transform:translateX(50%); }
  .pwa-install { padding:72px 0 78px; }
  .pwa-section-head { margin-bottom:32px; }
  .pwa-section-head h2 { font-size:42px; }
  .pwa-section-head p { margin-top:15px; font-size:16px; }
  .pwa-step { min-height:440px; border-radius:26px; }
  .pwa-step-copy { padding:24px 22px 14px; }
  .pwa-step-copy h3 { font-size:20px; }
  .pwa-step-demo { margin:12px 16px 16px; min-height:235px; border-radius:20px; }
  .pwa-finish { padding:76px 0; }
  .pwa-finish h2 { font-size:44px; }
  .pwa-finish p { font-size:16px; }
}
@media (max-width:430px) {
  .pwa-shell { width:calc(100% - 24px); }
  .pwa-hero h1 { font-size:42px; }
  .pwa-phone-stage { transform:scale(.78); margin:-65px 0; }
  .pwa-section-head h2 { font-size:37px; }
  .pwa-step-copy { display:block; }
  .pwa-step-number { margin-bottom:13px; }
  .pwa-step { min-height:460px; }
  .pwa-action-demo > div { grid-template-columns:30px minmax(0,1fr) 12px; padding:0 9px; }
  .pwa-footer .pwa-shell { flex-direction:column; align-items:flex-start; gap:5px; }
}
@media (prefers-reduced-motion:reduce) {
  .pwa-reveal { opacity:1!important; transform:none!important; animation:none!important; }
  .pwa-primary-btn { transition:none; }
}