/* v19: prevent iOS/Safari/PWA automatic text inflation */
html,body,main,#app{
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
@font-face{font-family:"Al Qalam Quran Majeed Web";src:url("https://raw.githubusercontent.com/IsmailHosenIsmailJames/al_quran_v3/31ae27913faae323957f1b5888eed035369e0019/assets/fonts/Quran/Al%20Qalam%20Quran%20Majeed%20Web%20Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
:root{--bg:#f6f2e8;--card:#fffdf7;--ink:#17332d;--muted:#6d7771;--accent:#0f5b4d;--gold:#b58b38;--line:#e4dccb;--fs:19px;--arabic-fs:35px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif;padding-bottom:90px}body.dark{--bg:#0e1816;--card:#16231f;--ink:#f5f0e4;--muted:#aab4af;--line:#2a3a35;--accent:#76b9a7;--gold:#d8b76d}header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}header h1{font-family:"Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;font-size:25px;margin:0}header p{margin:2px 0 0;color:var(--muted);font-size:12px}.icon{border:0;background:var(--card);color:var(--ink);border-radius:50%;width:40px;height:40px;font-size:24px}.icon:last-child{margin-left:auto}.hidden{visibility:hidden}main{max-width:760px;margin:auto;padding:22px 16px}.hero{padding:24px;border-radius:24px;background:linear-gradient(145deg,var(--accent),#163b34);color:#fff;margin-bottom:22px}.hero h2{font:700 34px/1.05 "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;margin:0 0 8px}.hero p{opacity:.85;margin:0}.langs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lang,.naat-card,.verse,.setting{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}.lang{min-height:120px;text-align:left;color:var(--ink)}.lang b{font:700 23px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;display:block}.lang span{color:var(--muted);font-size:13px}.count{margin-top:18px;color:var(--gold);font-weight:700}.section-title{font:700 25px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;margin:10px 2px 14px}.naat-card{display:block;width:100%;text-align:left;color:var(--ink);margin-bottom:12px}.naat-card b{font:700 20px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif}.naat-card small{display:block;color:var(--muted);margin-top:6px}.reader-head{text-align:center;margin:8px 0 24px}.reader-head h2{font:700 30px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;margin:0 0 8px}.badge{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:5px 10px;font-size:12px;font-weight:700}.author{font-size:13px;color:var(--muted);margin:12px auto;max-width:520px}.fav{margin-top:12px;border:0;background:var(--card);color:var(--ink);padding:9px 14px;border-radius:99px}.refrain,.verse{margin:0 0 14px}.refrain{background:color-mix(in srgb,var(--gold) 12%,var(--card));border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center;white-space:pre-line;font-size:19px;line-height:1.65}.verse-num{color:var(--gold);font-size:12px;font-weight:800;margin-bottom:10px}.lyrics{white-space:pre-line;font-family:"Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;font-size:19px;line-height:1.78;letter-spacing:.005em}.arabic{font-family:"Al Qalam Quran Majeed Web","Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;direction:rtl;text-align:right;font-size:35px !important;line-height:1.9}.translation{white-space:pre-line;font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:19px;line-height:1.65;color:var(--muted);font-style:italic}.translation-label{font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--gold);font-weight:800;margin-bottom:7px}nav{position:fixed;z-index:8;bottom:0;left:0;right:0;padding:8px 20px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:var(--card);border-top:1px solid var(--line)}nav button{border:0;background:none;color:var(--muted);font-size:21px;min-width:70px}nav button span{display:block;font-size:10px;margin-top:2px}nav button.active{color:var(--accent)}.setting{margin-bottom:12px}.setting label{display:flex;justify-content:space-between;align-items:center}.setting input{width:100%;margin-top:14px}.empty{text-align:center;color:var(--muted);padding:50px 10px}@media(max-width:380px){.langs{grid-template-columns:1fr}.hero h2{font-size:30px}}

.hero-mark{font-family:"Geeza Pro","Noto Naskh Arabic",serif;font-size:28px;opacity:.9;margin-bottom:10px}.collection-title{margin-top:28px}.collection-card{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}.collection-card b{display:block;font:700 23px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif}.collection-card span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.collection-count{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 14%,var(--card));color:var(--gold);font-weight:800}.image-verse{padding:10px;overflow:hidden}.image-verse .verse-num{padding:8px 8px 0}.image-verse img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}.about{color:var(--muted);line-height:1.6}.lyrics{font-weight:500}.translation{font-family:"Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;font-style:normal}.translation-label{font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif}

/* v4 home refresh */
body.home-view header{position:relative;overflow:hidden;min-height:112px;align-items:flex-start;padding-top:calc(22px + env(safe-area-inset-top))}
body.home-view header>div{position:relative;z-index:2}
body.home-view header h1{font-size:31px}
body.home-view header p{font-size:14px;color:color-mix(in srgb,var(--accent) 55%,var(--muted))}
body.home-view header::after{content:"";position:absolute;right:50px;bottom:-22px;width:126px;height:86px;background:color-mix(in srgb,#2e7d63 20%,transparent);border-radius:70px 70px 8px 8px;opacity:.55;z-index:0}
body.home-view header::before{content:"";position:absolute;right:104px;bottom:61px;width:18px;height:30px;background:color-mix(in srgb,#2e7d63 20%,transparent);clip-path:polygon(50% 0,64% 42%,100% 42%,100% 100%,0 100%,0 42%,36% 42%);opacity:.55;z-index:0}
body.home-view #theme{position:relative;z-index:3}
.hero{padding:22px 24px 25px;background:linear-gradient(145deg,#0c6a55,#153f36);overflow:hidden}
.hero-calligraphy{display:block;width:100%;height:auto;max-height:90px;object-fit:contain;object-position:center;margin:0 auto 19px;filter:none}
.hero h2{font-size:38px;margin:0 0 10px}
.hero p{font-size:16px;line-height:1.45;opacity:.92}
@media(max-width:430px){.hero{padding:20px 20px 23px}.hero-calligraphy{max-height:72px;margin-bottom:16px}.hero h2{font-size:35px}.hero p{font-size:15px}body.home-view header::after{right:36px;width:112px;height:76px}body.home-view header::before{right:84px;bottom:54px}}

/* v10 homepage symbol */
body.home-view header::before,body.home-view header::after{display:none!important}
body.home-view header{background-image:url("home-symbol.png");background-repeat:no-repeat;background-position:right 58px center;background-size:78px auto}
@media(max-width:430px){body.home-view header{background-position:right 50px center;background-size:68px auto}}

/* v13 Urdu subsection */
.subsection-title{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--gold)}


/* v19 definitive reader sizing */
.refrain,
.lyrics:not(.arabic),
.translation{
  font-size:19px !important;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
.lyrics.arabic{
  font-size:35px !important;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}



/* v27 Arabic rendering: every supplied Arabic line uses the same 35px size.
   Lines are allowed to wrap naturally inside the verse card so nothing can spill past the box. */
.verse .lyrics.arabic{
  display:block;
  width:100%;
  max-width:100%;
  padding:0 8px;
  box-sizing:border-box;
  white-space:normal !important;
  direction:rtl;
  text-align:right;
  overflow-wrap:normal;
  word-break:normal;
}
.verse .lyrics.arabic .arabic-line{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  white-space:normal !important;
  overflow-wrap:normal;
  word-break:normal;
  text-align:right;
  direction:rtl;
  unicode-bidi:plaintext;
  font-size:35px !important;
  line-height:1.9;
}
/* v44: never flash a fallback Arabic font. The preferred font is preloaded at app start
   and Arabic lyrics are revealed only once that exact font is ready. */
html.arabic-font-loading .lyrics.arabic{visibility:hidden}
html.arabic-font-ready .lyrics.arabic{visibility:visible}

/* v28: make non-Arabic Naat lyrics bold while keeping translations unchanged. */
.lyrics:not(.arabic),
.refrain{
  font-weight:700 !important;
}
.translation,
.translation *{
  font-weight:400;
}
.translation-label{
  font-weight:800 !important;
}

/* v32: preserve intentional blank lines inside Arabic verses (Qad Kafani verses 2–6). */
.verse .lyrics.arabic .arabic-line:empty{
  height:.72em;
  line-height:.72em;
}


/* v34: Qad Kafani verses 2–6 — restore normal spacing within each couplet,
   while keeping the larger separation between lines 2 and 3. */
.verse.qad-kafani-spaced .lyrics.arabic .arabic-line{
  line-height:1.9;
}
.verse.qad-kafani-spaced .lyrics.arabic .arabic-line:empty{
  height:1.18em;
  line-height:1.18em;
}


/* v38: Qamarun — robust iOS shaping fix for أَنَارَ in every occurrence.
   Keep the word visually intact, but separate the non-joining Alif and Noon by a tiny gap. */
.verse .lyrics.arabic .qamarun-anara{
  display:inline-flex;
  flex-direction:row;
  direction:rtl;
  unicode-bidi:isolate;
  align-items:baseline;
  column-gap:.10em;
  white-space:nowrap;
  vertical-align:baseline;
}
.verse .lyrics.arabic .qamarun-anara-alif,
.verse .lyrics.arabic .qamarun-anara-rest{
  display:block;
  flex:0 0 auto;
  font:inherit;
  line-height:inherit;
  letter-spacing:normal;
}


/* v40: Suggest a Naat submission page */
.suggest-intro{
  margin-bottom:18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
}
.suggest-intro h2{margin:0 0 8px;font:700 28px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;color:var(--ink)}
.suggest-intro p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.suggest-form{display:grid;gap:16px;margin-bottom:22px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.form-field{display:grid;gap:7px}
.form-label{font-size:13px;font-weight:800;color:var(--ink)}
.suggest-form input,.suggest-form select,.suggest-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--bg);
  color:var(--ink);
  padding:12px 13px;
  font:500 16px/1.45 "Avenir Next",Avenir,"Helvetica Neue",sans-serif;
  -webkit-appearance:none;
  appearance:none;
}
.suggest-form select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.suggest-form textarea{resize:vertical;min-height:110px}
.suggest-form input:focus,.suggest-form select:focus,.suggest-form textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:1px;border-color:var(--accent)}
.submission-note{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.submit-naat{border:0;border-radius:14px;padding:14px 18px;background:var(--accent);color:#fff;font-size:16px;font-weight:800;min-height:50px}
.submit-naat:disabled{opacity:.6}
.submission-status{min-height:22px;font-size:13px;line-height:1.5;text-align:center}
.submission-status.success{color:var(--accent);font-weight:700}
.submission-status.error{color:#a33;font-weight:700}
.submission-target,.submission-trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;border:0!important;padding:0!important;margin:-1px!important}


/* v44: stable cross-platform PWA bottom navigation (iPhone, iPad and Android) */
html{height:100%;background:var(--bg)}
body{min-height:100vh;min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
main{min-height:calc(100dvh - 150px)}
nav{
  position:fixed!important;
  left:0!important;right:0!important;bottom:0!important;
  width:100%!important;
  min-height:64px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  justify-items:center;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
nav button{min-width:0!important;width:100%;padding:2px 0;font-size:21px;white-space:nowrap}
nav button span{font-size:10px}
@supports(height:100svh){body{min-height:100svh}main{min-height:calc(100svh - 150px)}}

/* v52: improve back-to-list restoration anchor */
.naat-card{scroll-margin-top:96px}


/* v53: align the homepage title and emblem cleanly on one line. */
body.home-view header{
  min-height:96px;
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px;
  background-position:right 62px center;
  background-size:62px auto;
}
body.home-view header>div{margin-left:0;max-width:calc(100% - 130px)}
body.home-view header h1{font-size:29px;line-height:1.08}
body.home-view header p{font-size:13px;line-height:1.3}
@media(max-width:430px){
  body.home-view header{
    min-height:92px;
    padding-left:10px;
    background-position:right 58px center;
    background-size:58px auto;
  }
  body.home-view header h1{font-size:28px}
  body.home-view header p{font-size:12px}
}


/* v54: homepage masthead — text starts further left and emblem sits visually in line. */
body.home-view #back{display:none!important}
body.home-view header{
  min-height:104px;
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px 18px;
  background-position:right 76px calc(50% + 7px);
  background-size:66px auto;
}
body.home-view header>div{
  margin-left:0!important;
  max-width:calc(100% - 142px)!important;
}
body.home-view header h1{font-size:30px;line-height:1.08}
body.home-view header p{font-size:13px;line-height:1.3}
@media(max-width:430px){
  body.home-view header{
    min-height:100px;
    padding-left:16px;
    background-position:right 70px calc(50% + 7px);
    background-size:62px auto;
  }
  body.home-view header>div{max-width:calc(100% - 132px)!important}
  body.home-view header h1{font-size:28px}
  body.home-view header p{font-size:12px}
}

/* v54: interactive edge-swipe animation, similar to iOS navigation. */
body.swipe-active header,
body.swipe-active main{
  transform:translate3d(var(--swipe-x,0),0,0);
  will-change:transform;
}
body.swipe-transition header,
body.swipe-transition main{
  transition:transform 220ms cubic-bezier(.22,.61,.36,1);
}
body.swipe-active::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 42px);
  opacity:min(.28,calc(var(--swipe-x,0px) / 500));
}


/* v55: definitive homepage masthead alignment. Use a real flex item for the
   emblem rather than a background image, so title, emblem and theme control
   share the same vertical centre at every viewport width. */
.header-logo{display:none}
body.home-view header{
  background-image:none!important;
  min-height:112px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 74px 64px!important;
  align-items:center!important;
  column-gap:14px!important;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;
}
body.home-view #back{display:none!important}
body.home-view header>.header-copy{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  align-self:center!important;
}
body.home-view header h1{margin:0!important;font-size:31px!important;line-height:1.05!important;white-space:nowrap}
body.home-view header p{margin:7px 0 0!important;font-size:14px!important;line-height:1.25!important;white-space:nowrap}
body.home-view .header-logo{
  display:block!important;
  width:74px!important;
  height:74px!important;
  object-fit:contain!important;
  justify-self:center!important;
  align-self:center!important;
}
body.home-view #theme{
  margin:0!important;
  justify-self:end!important;
  align-self:center!important;
}
@media(max-width:520px){
  body.home-view header{
    min-height:104px!important;
    grid-template-columns:minmax(0,1fr) 58px 48px!important;
    column-gap:10px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.home-view header h1{font-size:28px!important}
  body.home-view header p{font-size:12px!important;margin-top:5px!important}
  body.home-view .header-logo{width:58px!important;height:58px!important}
}
@media(max-width:390px){
  body.home-view header{grid-template-columns:minmax(0,1fr) 52px 44px!important;column-gap:7px!important;padding-left:12px!important;padding-right:12px!important}
  body.home-view header h1{font-size:25px!important}
  body.home-view header p{font-size:11px!important}
  body.home-view .header-logo{width:52px!important;height:52px!important}
}

/* v55: true reveal-underneath swipe. */
.swipe-underlay{
  position:fixed;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  background:var(--bg);
  transform:translate3d(calc(-24px + (var(--swipe-progress,0) * 24px)),0,0);
  will-change:transform;
}
.swipe-underlay .snapshot-header{z-index:2!important}
.swipe-underlay .snapshot-main{z-index:1!important}
.swipe-underlay.home-snapshot .snapshot-header{
  background-image:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 74px 64px!important;
  align-items:center!important;
  column-gap:14px!important;
}
.swipe-underlay.home-snapshot .snapshot-header .header-logo{display:block!important;width:74px!important;height:74px!important;object-fit:contain!important;align-self:center!important;justify-self:center!important}
.swipe-underlay.home-snapshot .snapshot-header .icon:first-child{display:none!important}
body.swipe-active header:not(.snapshot-header),
body.swipe-active main:not(.snapshot-main){
  position:relative;
  z-index:5;
  transform:translate3d(var(--swipe-x,0),0,0)!important;
  will-change:transform;
  box-shadow:-8px 0 18px rgba(0,0,0,.10);
  background:var(--bg);
}
body.swipe-transition header:not(.snapshot-header),
body.swipe-transition main:not(.snapshot-main),
body.swipe-transition .swipe-underlay{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)!important;
}
body.swipe-active::before{display:none!important}


/* v56: final masthead geometry. The emblem is aligned to the TITLE ROW,
   not to the combined title+subtitle block. Its native 700:470 aspect ratio
   is preserved so it does not look vertically displaced. */
body.home-view header{
  background-image:none!important;
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;
}
body.home-view #back{display:none!important}
body.home-view header>.header-copy{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.home-view header h1{
  margin:0!important;
  font-size:31px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
body.home-view header p{
  margin:7px 0 0!important;
  font-size:14px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}
body.home-view .header-logo{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:92px!important;
  height:auto!important;
  aspect-ratio:700/470!important;
  object-fit:contain!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  transform:none!important;
}
body.home-view #theme{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}
@media(max-width:520px){
  body.home-view header{grid-template-columns:minmax(0,1fr) auto 48px!important;column-gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  body.home-view header h1{font-size:28px!important}
  body.home-view header p{font-size:12px!important;margin-top:5px!important}
  body.home-view .header-logo{width:70px!important;height:auto!important}
}
@media(max-width:390px){
  body.home-view header{grid-template-columns:minmax(0,1fr) auto 44px!important;column-gap:7px!important;padding-left:12px!important;padding-right:12px!important}
  body.home-view header h1{font-size:25px!important}
  body.home-view header p{font-size:11px!important}
  body.home-view .header-logo{width:62px!important;height:auto!important}
}

/* v56: previous page is an actual viewport clone under the moving foreground.
   Keep the underlay mounted only while dragging and move header/main/nav together. */
.swipe-underlay{
  position:fixed!important;
  inset:0!important;
  z-index:20!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:var(--bg)!important;
  transform:translate3d(-18px,0,0)!important;
  opacity:1!important;
}
.swipe-underlay .snapshot-header,
.swipe-underlay .snapshot-main,
.swipe-underlay .snapshot-nav{pointer-events:none!important}
body.swipe-active > header,
body.swipe-active > main,
body.swipe-active > nav{
  position:relative!important;
  z-index:30!important;
  transform:translate3d(var(--swipe-x,0),0,0)!important;
  will-change:transform!important;
  box-shadow:-8px 0 18px rgba(0,0,0,.12)!important;
}
body.swipe-active > nav{position:fixed!important}
body.swipe-active .swipe-underlay{
  transform:translate3d(calc(-18px + (18px * var(--swipe-progress,0))),0,0)!important;
}
body.swipe-transition > header,
body.swipe-transition > main,
body.swipe-transition > nav,
body.swipe-transition .swipe-underlay{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)!important;
}
html,body{overscroll-behavior-x:none}

/* v57: precise homepage masthead alignment from user screenshot. */
body.home-view .header-logo{
  transform:translateY(-12px)!important;
}
body.home-view #theme{
  transform:translateY(-12px)!important;
}
@media(max-width:520px){
  body.home-view .header-logo,
  body.home-view #theme{transform:translateY(-10px)!important}
}

/* v57: reliable live-looking previous-page reveal during iOS-style edge swipe. */
.swipe-underlay{
  position:fixed!important;
  inset:0!important;
  z-index:9998!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:var(--bg)!important;
  opacity:1!important;
  transform:translate3d(calc(-22px + (22px * var(--swipe-progress,0))),0,0)!important;
  will-change:transform!important;
}
.swipe-underlay .snapshot-page{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:var(--bg)!important;
}
.swipe-underlay .snapshot-header{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:3!important;
}
.swipe-underlay .snapshot-main{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  z-index:1!important;
  min-height:100vh!important;
  background:var(--bg)!important;
}
.swipe-underlay .snapshot-nav{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  z-index:4!important;
}
.swipe-underlay.snapshot-home-view,
.swipe-underlay .snapshot-home-view{background:var(--bg)!important}
.swipe-underlay .snapshot-home-view .snapshot-header{
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;
  background:var(--bg)!important;
}
.swipe-underlay .snapshot-home-view .snapshot-header>.header-copy{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.swipe-underlay .snapshot-home-view .snapshot-header h1{margin:0!important;font-size:31px!important;line-height:1.05!important;white-space:nowrap!important}
.swipe-underlay .snapshot-home-view .snapshot-header p{margin:7px 0 0!important;font-size:14px!important;line-height:1.25!important;white-space:nowrap!important}
.swipe-underlay .snapshot-home-view .snapshot-header .header-logo{
  display:block!important;
  grid-column:2!important;
  grid-row:1!important;
  width:92px!important;
  height:auto!important;
  object-fit:contain!important;
  align-self:center!important;
  justify-self:center!important;
  transform:translateY(-12px)!important;
}
.swipe-underlay .snapshot-home-view .snapshot-header .icon:first-child{display:none!important}
.swipe-underlay .snapshot-home-view .snapshot-header .icon:last-child{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  transform:translateY(-12px)!important;
}
body.swipe-active > header,
body.swipe-active > main,
body.swipe-active > nav{
  z-index:9999!important;
  transform:translate3d(var(--swipe-x,0),0,0)!important;
  will-change:transform!important;
}
body.swipe-active > header,
body.swipe-active > main{position:relative!important;background:var(--bg)!important}
body.swipe-active > nav{position:fixed!important}
body.swipe-active > main::before{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:-24px;
  width:24px;
  background:var(--bg);
}
body.swipe-active > header{box-shadow:-10px 0 24px rgba(0,0,0,.13)!important}
body.swipe-transition > header,
body.swipe-transition > main,
body.swipe-transition > nav,
body.swipe-transition .swipe-underlay{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)!important;
}
@media(max-width:520px){
  .swipe-underlay .snapshot-home-view .snapshot-header{grid-template-columns:minmax(0,1fr) auto 48px!important;column-gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  .swipe-underlay .snapshot-home-view .snapshot-header h1{font-size:28px!important}
  .swipe-underlay .snapshot-home-view .snapshot-header p{font-size:12px!important;margin-top:5px!important}
  .swipe-underlay .snapshot-home-view .snapshot-header .header-logo{width:70px!important;transform:translateY(-10px)!important}
  .swipe-underlay .snapshot-home-view .snapshot-header .icon:last-child{transform:translateY(-10px)!important}
}
.swipe-underlay .snapshot-main{top:var(--snapshot-main-top,0px)!important}