/* Palette, type, and layout from deep-calls-app.html. */
:root{--bg:#0d1316;--card:#141c20;--line:#1f2a30;--text:#e8ecec;--muted:#7f8f95;--aqua:#6fd3c7;--aqua-dim:#0f3330;--sand:#d9b46a;--sand-dim:#3a2c12;--rose:#e58fb3;--rose-dim:#3a1c2a;--sky:#85b7eb;--sky-dim:#0f2a47;--gray:#a3a8ab;--gray-dim:#232a2e;
  --serif:'Cormorant Garamond',Georgia,serif;--safe-top:env(safe-area-inset-top);--safe-bottom:env(safe-area-inset-bottom)}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;background:#000;font-family:Inter,system-ui,sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent}
body{display:flex;justify-content:center;align-items:stretch}

/* On a phone the app fills the screen. On a wider screen it sits in the mockup's phone frame. */
.phone{width:100%;height:100dvh;background:var(--bg);overflow:hidden;overflow:clip;position:relative;display:flex;flex-direction:column}
.top{padding:calc(var(--safe-top) + 14px) 20px 10px;display:flex;justify-content:space-between;align-items:center}
.dhead{padding:calc(var(--safe-top) + 14px) 16px 12px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.nav{display:flex;justify-content:space-around;padding:12px 0 calc(var(--safe-bottom) + 12px);border-top:1px solid var(--line);color:var(--muted);font-size:11px}
@media (min-width:520px){
  body{align-items:center;padding:16px}
  .phone{width:390px;height:820px;max-height:96vh;border-radius:44px;border:1px solid #232c31}
  .top,.dhead{padding-top:56px}
  .nav{padding:14px 0 30px}
}

.brand{font-family:var(--serif);font-size:27px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.brand i{width:10px;height:10px;border-radius:50%;background:var(--aqua);display:inline-block}
.chips{display:flex;gap:8px;padding:6px 20px 12px;overflow-x:auto;border-bottom:1px solid var(--line);scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;font-size:13px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.feed{flex:1;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}
.feed::-webkit-scrollbar{display:none}
/* manipulation: no double-tap zoom on a post, so a double tap can like it */
.post{padding:16px 20px;border-bottom:1px solid var(--line);transition:opacity .2s;touch-action:manipulation}
.post.dim{opacity:.35}
.tap{cursor:pointer}
.src{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.who{font-size:14px;font-weight:500}
.meta{font-size:12px;color:var(--muted)}
.tag{margin-left:auto;font-size:11px;padding:3px 8px;border-radius:6px;white-space:nowrap}
.verse{font-family:var(--serif);font-size:24px;line-height:1.45;font-weight:500;margin:4px 0 10px}
.ref{font-size:13px;color:var(--sand);letter-spacing:.03em}
.ref a{color:var(--muted);text-decoration:none;margin-left:6px;font-size:11px}
.body{font-size:15px;line-height:1.55;color:#cfd6d8}
.woc{color:#e8897f}  /* words of Christ: a soft red that reads on the dark background */
.acts{display:flex;gap:15px;margin-top:12px;font-size:12px;color:var(--muted)}
.acts span{display:flex;align-items:center;gap:5px;cursor:pointer;padding:4px 0;user-select:none}
.acts span.on{color:var(--aqua)}
/* Double tap to like: a heart pops where the finger was, then floats up and fades */
.heart{position:fixed;z-index:60;width:92px;height:92px;margin:-46px 0 0 -46px;pointer-events:none;animation:heart .8s ease-out forwards}
.heart svg{width:100%;height:100%;fill:var(--aqua);stroke:var(--aqua);filter:drop-shadow(0 3px 10px rgba(0,0,0,.45))}
@keyframes heart{0%{transform:scale(.3);opacity:0}18%{transform:scale(1.15);opacity:1}32%{transform:scale(.95)}65%{transform:scale(1);opacity:1}100%{transform:translateY(-24px) scale(1.05);opacity:0}}
@media (prefers-reduced-motion: reduce){.heart{animation:heartfade .6s ease-out forwards}}
@keyframes heartfade{0%{opacity:1}100%{opacity:0}}
.acts .less{margin-left:auto}
svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.acts svg,.rel svg{width:16px;height:16px}
.nav div{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-width:60px}
.nav .on{color:var(--text)}
.loading,.empty{padding:32px 24px;text-align:center;font-size:13px;line-height:1.55;color:var(--muted)}

.detail{position:absolute;inset:0;background:var(--bg);transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;z-index:5}
/* none rather than translateX(0) once open: any transform would keep a video turned sideways (.vp.live)
   boxed inside this column instead of filling the screen */
.detail.open{transform:none}
.back{width:36px;height:36px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.dbody{flex:1;overflow-y:auto;scrollbar-width:none;padding-bottom:40px}
.dbody::-webkit-scrollbar{display:none}
.hero{padding:24px 20px 20px;border-bottom:1px solid var(--line)}
.hero .verse{font-size:28px}
.hero .meta{margin-top:8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.tags span{font-size:11px;padding:3px 8px;border-radius:6px;background:var(--gray-dim);color:var(--gray)}
.tags .era{background:var(--sand-dim);color:var(--sand)}
.tags .person{background:var(--rose-dim);color:var(--rose)}
.tags .place{background:var(--aqua-dim);color:var(--aqua)}
.tags .argument{background:var(--sky-dim);color:var(--sky)}
.sec{padding:18px 20px 6px;font-size:12px;color:var(--muted);letter-spacing:.06em}
/* "More on Mary": the row's subject, with See all for everything on it */
.sec.topichead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.seeall{background:none;border:0;padding:0;color:var(--aqua);font:inherit;font-size:13px;letter-spacing:0;white-space:nowrap;cursor:pointer}
.rel{padding:14px 20px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;gap:12px}
.rel .ic{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.rel h4{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:3px}
.rel p{font-size:13px;color:var(--muted);line-height:1.45}
.rel p.scripture{font-family:var(--serif);font-size:17px;line-height:1.5;color:#cfd6d8}
.rel .why{font-size:11px;color:var(--muted);margin-top:6px}
.rel .why a,.quote small a{color:var(--muted)}
/* Timeline, from the mockup */
.thread{padding:6px 20px 8px}
.tline{border-left:1px solid var(--line);margin-left:12px;padding-left:20px}
.tl{padding:8px 0 14px;position:relative}
.tl[data-id]{cursor:pointer}
.tl:before{content:"";position:absolute;left:-25px;top:13px;width:9px;height:9px;border-radius:50%;background:var(--aqua);border:2px solid var(--bg)}
.tl.here:before{background:var(--sand)}
.tl .yr{font-size:12px;color:var(--aqua);margin-bottom:3px}
.tl.here .yr{color:var(--sand)}
.tl p{font-size:14px;line-height:1.5;color:#cfd6d8}
.tl[data-id] p{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.quote{font-family:var(--serif);font-size:20px;line-height:1.55;font-style:italic;padding:16px 20px;margin:20px 20px 8px;border-left:2px solid var(--sand);background:var(--card);border-radius:0 12px 12px 0;cursor:pointer}
.quote small{display:block;font-family:Inter,sans-serif;font-style:normal;font-size:12px;color:var(--muted);margin-top:10px}
.notice{padding:20px;font-size:11px;color:var(--muted);line-height:1.5}
/* Proverbs for the day: the chapter, a saying per slide, swiped sideways */
.post.proverbs{padding:18px 0 14px}
.prvhead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 20px 12px}
.prvhead h3{font-family:var(--serif);font-size:26px;font-weight:600;line-height:1.1}
.prvhead p{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.04em}
.prvcount{font-size:12px;color:var(--aqua);white-space:nowrap}
.prvtrack{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 20px 4px;scroll-padding:0 20px;scrollbar-width:none;overscroll-behavior-x:contain}
.prvtrack::-webkit-scrollbar{display:none}
.prvslide{flex:0 0 100%;scroll-snap-align:center;display:flex;flex-direction:column;justify-content:space-between;gap:12px;padding:18px 18px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;transition:border-color .3s}
.prvslide.read{border-color:var(--aqua-dim)}
.prvtext{font-family:var(--serif);font-size:21px;line-height:1.5;font-weight:500}
.prvslide .ref{margin:0}
.prvfoot{display:flex;align-items:center;gap:12px;padding:12px 20px 0}
.prvbar{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.prvbar i{display:block;height:100%;width:0;background:var(--aqua);transition:width .3s ease}
.prvgo{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:none;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.prvgo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){.prvbar i,.prvslide{transition:none}}
/* Background and Commentary fold away: a row naming what is inside, closed until tapped */
.fold{border-bottom:1px solid var(--line)}
:not(.fold) + .fold{border-top:1px solid var(--line);margin-top:8px}
.foldhead{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;background:none;border:0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.foldhead:active{background:var(--card)}
.foldtext{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.foldlabel{font-size:12px;color:var(--muted);letter-spacing:.06em}
.foldnote{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foldhead svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.foldhead.open svg{transform:rotate(180deg)}
.foldbody{padding:2px 0 8px}
@media (prefers-reduced-motion:reduce){.foldhead svg{transition:none}}
/* Background notes and commentary on a Scripture page: a card per work, its first lines, then Read more */
.cwork{margin:6px 20px 12px;padding:14px 16px 10px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.cwhead{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.cwhead b{font-size:15px;font-weight:600}
.cwhead span{font-size:12px;color:var(--muted)}
.cwbody{font-size:15px;line-height:1.6;color:#cfd6d8;max-height:calc(1.6em * 9);overflow:hidden}
.cwbody.open{max-height:none}
.cwbody.clamped:not(.open){-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.cwbody p{margin:0 0 8px}
.cwref{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--sand);margin:12px 0 4px}
.cwref:first-child{margin-top:0}
.cwmore{background:none;border:0;padding:4px 0;color:var(--aqua);font:inherit;font-size:13px;cursor:pointer}
.cwbody h5{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:14px 0 4px}
/* Words quoted from a study note or commentary, in a thread */
.nquote{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.nqhead{font-size:13px;color:var(--muted);margin-bottom:6px}
.nqhead b{color:var(--text);font-weight:600}
.nquote blockquote{margin:0 0 10px;padding-left:12px;border-left:2px solid var(--sand);font-size:15px;line-height:1.6;color:#cfd6d8;white-space:pre-wrap}
.nqfrom{font-size:13px;color:var(--aqua);cursor:pointer}
/* Scripture cited in a note, tappable */
.vref{color:var(--aqua);text-decoration:none;cursor:pointer;white-space:nowrap}
.notice a{color:var(--muted)}
/* Videos and articles */
.lane{display:inline-block;font-size:10px;padding:1px 6px;border-radius:5px;background:var(--gray-dim);color:var(--gray);margin-left:6px;vertical-align:1px}
.poster{width:min(62%,230px);aspect-ratio:9/16;border-radius:14px;position:relative;overflow:hidden;border:1px solid var(--line);background:#0a2a2d radial-gradient(circle at 50% 110%,#1c5d5a 0,#0a2a2d 55%) center/cover no-repeat;cursor:pointer;margin:2px auto 4px}
.play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.play div{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.play svg{width:20px;height:20px;stroke:#0d1316;fill:#0d1316;margin-left:3px}
.dur{position:absolute;bottom:10px;right:10px;font-size:11px;background:rgba(0,0,0,.6);padding:2px 6px;border-radius:5px}
.poster .lbl{position:absolute;top:10px;left:10px;font-size:11px;background:rgba(0,0,0,.6);padding:2px 6px;border-radius:5px;color:var(--aqua)}
/* Headlines: big, and never cut off */
.headline{font-size:19px;font-weight:600;line-height:1.3;margin:0 0 8px;overflow-wrap:anywhere}
.headline.big{font-family:var(--serif);font-size:30px;line-height:1.12;margin:2px 0 8px}
.summary{font-size:15px;line-height:1.5;color:#b9c3c6;margin:0 0 12px}
.caption{font-size:15px;line-height:1.5;color:#cfd6d8;margin-bottom:10px}
.post .tags{margin-top:12px}
.excerpt{font-family:var(--serif);font-size:21px;line-height:1.4;font-style:italic;margin:2px 0 10px;padding-left:14px;border-left:2px solid var(--sky)}
.from{font-size:13px;line-height:1.4;color:var(--muted)}
.from b{color:var(--text);font-weight:500}
/* The sermon or podcast a moment was cut from, between its caption and its picture */
.cfrom{font-size:13px;line-height:1.4;color:var(--muted);margin:-2px 0 10px}
.cfrom b{color:var(--text);font-weight:500}
.post .readlink{margin-top:8px}
.meta.orig{margin-top:2px;font-style:italic}
.tags.why{margin-top:8px}
.tags [data-tag]{cursor:pointer}
.tagpage .tkind{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tagpage .mbody{max-height:9.5em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);margin-bottom:10px}
.loadmore{padding:16px 20px}
.rel.on{background:var(--card)}
.rel.on h4{color:var(--aqua)}
.tags .xref{background:var(--sand-dim);color:var(--sand)}
.who,.mtitle,.rel h4,.pinfo h4{overflow-wrap:anywhere}
.dhead .who{min-width:0}
.qlabel{font-family:Inter,system-ui,sans-serif;font-style:normal;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--sand);margin-bottom:8px}
.thumb{width:100%;aspect-ratio:16/9;border-radius:14px;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--card) center/cover no-repeat;margin:4px 0 12px;cursor:pointer}
.embed{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin:4px 0 12px}
.embed.tall{width:min(100%,calc(62dvh * 9 / 16));aspect-ratio:9/16;margin:0 auto 14px}
.embed iframe{width:100%;height:100%;border:0;display:block}
.mtitle{font-size:23px;font-weight:600;line-height:1.25;margin:0 0 8px}
.mtitle.big{font-family:var(--serif);font-size:34px;line-height:1.1}
.hero .summary{margin-bottom:14px}
.mbody{margin-top:12px}
.readlink{display:inline-block;margin-top:14px;font-size:13px;color:var(--aqua);text-decoration:none}
/* Posts from X, shown as X asks: name, @handle, picture, the X logo, and a link to the post */
.xcard{display:flex;flex-direction:column;gap:10px}
.xhead{display:flex;align-items:center;gap:10px}
.xav{width:40px;height:40px;border-radius:50%;background:var(--card);flex:none;object-fit:cover}
.xwho{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.xwho b{font-size:15px;font-weight:600;display:flex;align-items:center;gap:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xwho span{font-size:13px;color:var(--muted)}
.xver svg{width:14px;height:14px;stroke:var(--sky);stroke-width:2.4}
.xlogo{margin-left:auto;color:var(--text);display:flex;padding:4px}
.xmark{width:18px;height:18px;fill:currentColor;stroke:none}
.xtext{font-size:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.xtext a{color:var(--sky);text-decoration:none}
.xone{display:block;width:100%;max-height:560px;object-fit:cover;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.xhero .xone{max-height:none;object-fit:contain}
.xphotos{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.xph{aspect-ratio:1/1;background:var(--card) center/cover no-repeat}
.xphotos.n2 .xph{aspect-ratio:4/5}
.xphotos.n3 .xph:first-child{grid-row:span 2;aspect-ratio:auto}
.xmeta{font-size:12px;color:var(--muted)}
.xmeta a{color:var(--muted);text-decoration:none}
.xhero .xtext{font-size:18px}
/* A long post starts with its first lines; a thread's later posts wait until it is opened */
.xcard:not(.open) > .xtext.clamped{max-height:calc(1.5em * 9);overflow:hidden;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.xcard:not(.open) .xthread{display:none}
.xthread{display:flex;flex-direction:column;gap:16px;margin-left:19px;padding-left:18px;border-left:2px solid var(--line)}
.xpart{display:flex;flex-direction:column;gap:8px}
.xpdate{font-size:12px;color:var(--muted);text-decoration:none}
.xrest{align-self:flex-start;font-size:13px;color:var(--sky);text-decoration:none}
.xmore{align-self:flex-start;background:none;border:0;padding:0;color:var(--aqua);font:inherit;font-size:13px;cursor:pointer}

/* Article cards: the article's own picture, or its site's name on a tinted ground when it has none */
.athumb{width:100%;aspect-ratio:1.91/1;border-radius:14px;border:1px solid var(--line);background:linear-gradient(140deg,var(--sky-dim),var(--card) 75%) center/cover no-repeat;margin:4px 0 2px;cursor:pointer;display:flex;align-items:flex-end;padding:14px 16px}
.athumb span{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--sky);opacity:.9}
.hero .athumb{margin:14px 0 4px;cursor:default}
.hero .embed{margin:14px 0 4px}
.hero .embed.tall{margin:14px auto 4px}

/* Passages and stories: numbered verses, clamped with Show more */
/* Scripture gets roomier lines than the rest of the app, for easier reading; Show more cuts at the same line counts */
.ptext{font-family:var(--serif);font-size:22px;line-height:1.5;font-weight:500;margin:4px 0 8px;max-height:calc(1.5em * 8);overflow:hidden}
.ptext.story{font-size:19px;line-height:1.6;max-height:calc(1.6em * 7)}
.ptext.clamped:not(.open){-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.ptext.open,.hero .ptext{max-height:none}
.hero .ptext{font-size:24px}
.hero .ptext.story{font-size:20px}
.ptext sup{font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:500;color:var(--sand);margin:0 3px 0 1px;line-height:0}
.more{display:block;background:none;border:0;padding:0 0 10px;color:var(--aqua);font:inherit;font-size:13px;cursor:pointer}
.rel>div:last-child{flex:1;min-width:0}
.rel .th{width:72px;height:44px;border-radius:8px;flex:none;background:var(--card) center/cover no-repeat;border:1px solid var(--line)}
.rel .th.tall{width:44px;height:72px}
/* A post from X in a list: its author's round picture, and the words clipped to a few lines */
.rel .th.av{width:44px;height:44px;border-radius:50%}
.rel p.xrel{color:#cfd6d8;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rel .why .xmark{width:12px;height:12px;fill:currentColor;vertical-align:-1px}

/* Shorts player: swipe (or tap the arrows) for the next Short */
.player{position:absolute;inset:0;background:#000;z-index:6;display:flex;flex-direction:column}
.phead{padding:calc(var(--safe-top) + 14px) 16px 10px;display:flex;align-items:center;gap:12px}
.pstage{flex:1;min-height:0;position:relative}
.pframe{height:100%;display:flex;align-items:center;justify-content:center;padding:0 12px}
/* Over the video, so a swipe anywhere moves between Shorts and a tap pauses (the embed would swallow both) */
.pswipe{position:absolute;inset:0;touch-action:none;cursor:pointer}
.pflash{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .35s;pointer-events:none}
.pflash.on{opacity:1;transition:none}
.pflash svg{width:28px;height:28px;stroke:#fff;fill:#fff}
.sound{margin-left:auto;background:rgba(255,255,255,.14);color:var(--text);border:0;border-radius:99px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer}
/* The embed is taller than the box, so the vertical video still fills it while the bars above and below it
   (where YouTube draws the title and the pause overlay) fall outside the clip */
.pclip{height:100%;aspect-ratio:9/16;max-width:100%;position:relative;overflow:hidden;border-radius:14px;background:#111}
.pclip iframe{position:absolute;left:0;top:-90px;width:100%;height:calc(100% + 180px);border:0}
/* A moment from a sermon or podcast: wide */
.pclip.wide{height:auto;width:100%;aspect-ratio:16/9}
/* The timeline: a thin bar that grows a knob and the time while it is dragged. Its box is taller than
   the bar so a thumb can find it; touch-action none keeps the page from scrolling under the drag. */
.pscrub{position:relative;height:30px;margin:4px 20px -10px;display:flex;align-items:center;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.ptrack{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.2);transition:height .15s}
.ptrack i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--aqua)}
.ptrack b{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .15s}
.pscrub:not(.drag) .ptrack i{transition:width .25s linear}
.pscrub:not(.drag) .ptrack b{transition:transform .15s,left .25s linear}
.pscrub:hover .ptrack b,.pscrub.drag .ptrack b{transform:scale(1)}
.pscrub.drag .ptrack{height:6px}
.ptime{position:absolute;bottom:26px;left:0;transform:translateX(-50%);font-size:12px;font-weight:500;color:#fff;background:rgba(0,0,0,.6);padding:3px 9px;border-radius:99px;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .15s;pointer-events:none;white-space:nowrap}
.pscrub.drag .ptime{opacity:1}
.pfoot{display:flex;gap:14px;align-items:flex-end;padding:14px 20px calc(var(--safe-bottom) + 18px)}
.pinfo{flex:1;min-width:0}
.pinfo h4{font-size:17px;font-weight:600;line-height:1.3;margin-bottom:4px}
.pinfo p{font-size:13px;color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pfrom{font-size:13px;line-height:1.4;color:var(--muted);margin-top:6px;cursor:pointer}
.pfrom b{color:var(--text);font-weight:500}
.pfrom::after{content:" ›";color:var(--aqua)}

/* Rabbit holes: a glowing card in the feed, like something found, with the subject's painting behind its words; and
   a full-screen path through one subject in small slides, one idea, passage, or question at a time */
@property --hca{syntax:'<angle>';inherits:false;initial-value:0deg}
.post.holecard{position:relative;isolation:isolate;margin:14px 12px 16px;padding:2px;border:0;border-radius:24px;cursor:pointer;
  background:conic-gradient(from var(--hca),var(--aqua),var(--sand),var(--rose),var(--sky),var(--aqua));animation:hcspin 7s linear infinite}
.holecard::before{content:"";position:absolute;inset:6px;z-index:-1;border-radius:inherit;background:inherit;filter:blur(18px);opacity:.5;animation:hcglow 3.2s ease-in-out infinite alternate}
@keyframes hcspin{to{--hca:360deg}}
@keyframes hcglow{from{opacity:.3}to{opacity:.65}}
.hcin{position:relative;overflow:hidden;min-height:470px;border-radius:22px;display:flex;flex-direction:column;justify-content:space-between;background:#0b1013 center 28%/cover no-repeat}
.hcin::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,13,.6) 0%,rgba(7,11,13,0) 24%,rgba(7,11,13,.12) 42%,rgba(7,11,13,.86) 70%,#090e10 100%)}
.hcin::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.holecard.found .hcin::after{animation:hcshine 1.3s ease-out .15s}
@keyframes hcshine{to{transform:translateX(120%)}}
.hctop,.hcbody{position:relative}
.hctop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 14px 0}
.hcfound{display:inline-flex;align-items:center;gap:6px;padding:6px 11px 6px 9px;border-radius:99px;background:rgba(9,14,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(217,180,106,.5);color:#f1d79c;font-size:12px;font-weight:600;letter-spacing:.02em}
.hcfound svg{width:14px;height:14px;fill:currentColor}
.holecard.found .hcfound{animation:hcpop .55s cubic-bezier(.3,1.7,.5,1) both}
@keyframes hcpop{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.hcmeta{font-size:12px;color:rgba(255,255,255,.85);padding:6px 10px;border-radius:99px;background:rgba(9,14,16,.5);white-space:nowrap}
.hcbody{padding:0 20px 18px}
.hclabel{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--aqua);margin-bottom:6px}
.hctitle{font-family:var(--serif);font-size:34px;line-height:1.04;font-weight:600;margin:0 0 10px;color:#fff;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hcblurb{font-size:15px;line-height:1.45;color:rgba(236,240,240,.88);margin:0 0 14px}
.hcstops{display:flex;flex-wrap:wrap;gap:6px}
.hcstops span{font-size:12px;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.1);color:#e8ecec}
.hcprog{height:4px;border-radius:99px;background:rgba(255,255,255,.14);margin-top:14px;overflow:hidden}
.hcprog i{display:block;height:100%;border-radius:inherit;background:var(--aqua)}
.hcfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.hcgo{background:var(--aqua);color:#00211d;border:0;border-radius:14px;padding:12px 18px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 4px 0 #3f9f94}
.hcgo:active,.hnext:active{transform:translateY(3px);box-shadow:0 1px 0 #3f9f94}
.hcall{background:none;border:0;padding:6px 0;color:rgba(236,240,240,.75);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.hccredit{font-size:10px;line-height:1.3;color:rgba(255,255,255,.5);margin-top:12px}
@media (prefers-reduced-motion:reduce){.post.holecard,.holecard::before,.holecard.found .hcin::after,.holecard.found .hcfound{animation:none}}

/* The story view */
.hole{position:absolute;inset:0;z-index:7;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
.hbg{position:absolute;inset:-60px;background:#0b1013 center/cover no-repeat;filter:blur(30px) brightness(.3) saturate(1.2);opacity:0;transition:opacity .6s ease;pointer-events:none}
.hbg.on{opacity:1}
.htop{position:relative;display:flex;align-items:center;gap:14px;padding:calc(var(--safe-top) + 12px) 16px 8px}
.hx{width:36px;height:36px;flex:none;border:0;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1);cursor:pointer}
.hx svg{width:18px;height:18px;stroke:var(--text);fill:none;stroke-width:2.2;stroke-linecap:round}
.hbar{flex:1;height:12px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.hbar i{position:relative;display:block;height:100%;width:0;min-width:12px;border-radius:inherit;background:var(--aqua);transition:width .5s cubic-bezier(.3,1.35,.5,1)}
.hbar i::after{content:"";position:absolute;left:6px;right:6px;top:3px;height:3px;border-radius:99px;background:rgba(255,255,255,.4)}
.hbar.pulse i{animation:hbarpulse .7s ease-out}
@keyframes hbarpulse{40%{background:#aef3ea;box-shadow:0 0 14px var(--aqua)}}
.hlisthead,.hole.listing .hbar,.hole.listing .hnav{display:none}
.hole.listing .hlisthead{display:block}
.hkind{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--aqua)}
.htitle{font-size:15px;font-weight:600;line-height:1.3}
.hstage{position:relative;flex:1;min-height:0;overflow-y:auto;-webkit-tap-highlight-color:transparent}
.hole.listing .hstage{padding:6px 20px 24px}
.hslide{position:relative;min-height:100%;display:flex;flex-direction:column;padding:10px 24px 28px}
.hin{position:relative;width:100%;max-width:560px;margin:auto;padding:8px 0}
.hslide.fwd .hin{animation:hslin .4s cubic-bezier(.2,.8,.3,1) both}
.hslide.bwd .hin{animation:hslback .4s cubic-bezier(.2,.8,.3,1) both}
@keyframes hslin{from{opacity:0;transform:translateX(34px)}}
@keyframes hslback{from{opacity:0;transform:translateX(-34px)}}
.heyebrow{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--aqua);margin-bottom:16px}
.heyebrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.heyebrow.sand{color:var(--sand)}
.heyebrow.rose{color:var(--rose)}
.hhook{font-size:23px;line-height:1.3;font-weight:600;margin:0 0 22px;text-wrap:balance}
.hscripture{font-family:var(--serif);font-size:25px;line-height:1.5;font-weight:500}
.hscripture sup{font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:500;color:var(--sand);margin:0 3px 0 1px;line-height:0}
.hslide .ref{margin:16px 0 0}
.hpart{font-size:12px;color:var(--muted);margin-top:4px}
.harticle p{font-size:19px;line-height:1.6;color:#dfe5e6;margin:0 0 16px}
.harticle p:last-child{margin-bottom:0}
.hmore{margin-top:4px;background:none;border:0;padding:6px 0;color:var(--aqua);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
/* Opening slides: a painting fills the screen, the words sit over its lower half */
.hslide.cover{padding:0;background:#0b1013 center 28%/cover no-repeat}
.hslide.cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,13,.35) 0%,rgba(7,11,13,0) 25%,rgba(7,11,13,.2) 45%,rgba(7,11,13,.9) 72%,#0b1013 100%)}
.hslide.cover .hin{margin:auto 0 0;max-width:none;padding:24px 24px 26px}
.hcovtitle{font-family:var(--serif);font-size:42px;line-height:1.02;font-weight:600;margin:0 0 14px;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.hcovhook{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:600;margin:0;text-wrap:balance;text-shadow:0 2px 20px rgba(0,0,0,.55)}
.hcovtitle + .hcovhook{font-family:Inter,system-ui,sans-serif;font-size:19px;line-height:1.45;font-weight:500;color:#e6ebeb}
.hcovlead{font-size:16px;line-height:1.5;color:rgba(232,236,236,.78);margin:12px 0 0}
.hchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hchips span{font-size:13px;padding:5px 11px;border-radius:99px;background:rgba(255,255,255,.12)}
.hslide .hcredit{font-size:10px;line-height:1.35;color:rgba(255,255,255,.5);margin-top:16px}
/* The path ahead: the places this subject goes, as stations on a line */
.hpath{list-style:none;margin:0;padding:0}
.hpath li{position:relative;padding:0 0 26px 38px;font-size:19px;line-height:1.35;font-weight:600;animation:hpop .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--n) * 110ms + 100ms)}
.hpath li::before{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;border:3px solid var(--aqua);background:var(--bg)}
.hpath li::after{content:"";position:absolute;left:10px;top:23px;bottom:3px;width:2px;background:rgba(111,211,199,.3)}
.hpath li:last-child{padding-bottom:0}
.hpath li:last-child::after{display:none}
@keyframes hpop{from{opacity:0;transform:translateY(10px) scale(.96)}}
.hmentions{display:inline-block;margin-top:22px;font-size:13px;color:var(--aqua);padding:6px 12px;border-radius:99px;background:rgba(111,211,199,.1)}
/* The big idea: the one truth the path teaches, on the cover, on "The path you took", and at the bottom */
.hbig{margin-top:18px;padding:13px 15px;border-radius:16px;background:rgba(9,14,16,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(217,180,106,.4)}
.hbig small{display:block;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#f1d79c;margin-bottom:5px}
.hbig p{margin:0;font-size:17px;line-height:1.45;font-weight:500;color:#f3f5f5;text-wrap:pretty}
.hpath.done li{font-size:16px;line-height:1.3;font-weight:500;padding-bottom:11px}
.hpath.done li::after{top:21px}
.hpath.done + .hbig{margin-top:14px}
/* "The path you took" holds up to seven stations and the big idea on one screen */
.hslide.recap{padding-top:4px;padding-bottom:10px}
.hslide.recap .heyebrow{margin-bottom:12px}
.hslide.recap .hpath.done li{padding-bottom:8px}
.hslide.recap .hpath.done + .hbig{margin-top:12px}
.hslide.recap .hbig p{font-size:16px}
.hpath.done li::before{background:var(--aqua)}
.hendidea{font-family:var(--serif);font-size:21px;line-height:1.35;font-weight:500;margin:14px auto 0;max-width:30ch;text-wrap:balance}
/* Did you know: a study note on its own */
.hnote{padding:22px 20px;border-radius:20px;background:rgba(217,180,106,.08);border:1px solid rgba(217,180,106,.24)}
.hnote p{font-size:19px;line-height:1.6;color:#ece5d5;margin:0}
.hcite{font-size:12px;color:var(--muted);margin-top:14px}
/* Did you catch it: a card that turns over to its answer */
.hflip{perspective:1400px;cursor:pointer}
.hflipin{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.25,.5,1)}
.hflip.flipped .hflipin{transform:rotateY(180deg)}
.hface{grid-area:1/1;min-height:250px;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:26px 22px;border-radius:22px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hfront{background:var(--card);border:2px solid var(--line);box-shadow:0 5px 0 var(--line)}
.hback{transform:rotateY(180deg);background:color-mix(in srgb,var(--aqua) 12%,var(--card));border:2px solid color-mix(in srgb,var(--aqua) 50%,transparent);box-shadow:0 5px 0 color-mix(in srgb,var(--aqua) 35%,transparent)}
.hface small{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hback small{color:var(--aqua)}
.hface .hqq{font-size:22px;line-height:1.35;font-weight:600;text-wrap:pretty}
.hface .haa{font-size:20px;line-height:1.5}
.hface .htap{font-size:13px;color:var(--muted)}
/* Sit with this: one reflection question at a time */
.hreflect{font-family:var(--serif);font-size:31px;line-height:1.2;font-weight:600;margin:0;text-wrap:pretty}
.hsub{font-size:16px;line-height:1.45;color:#cfd6d8;margin:0 0 18px}
/* Videos in a rabbit hole: the same bare player as a video's page, with only play/pause, the timeline, and CC.
   A video found on YouTube has no transcript here, so no CC. */
.vp.bare .vtime,.vp.bare .vgo,.vp.bare .vresume,.vp.nocc .ccbtn,.vp.nocc .capline{display:none}
.hole .vp{margin:0 0 14px}
.hole .vp.tall .vclip{height:min(56vh,470px)}
.htname{font-size:17px;font-weight:600;line-height:1.3;margin-bottom:4px}
.hquote{margin:0 0 12px;padding:16px 18px;border-left:3px solid var(--aqua);background:rgba(255,255,255,.04);border-radius:0 14px 14px 0;font-family:var(--serif);font-size:22px;line-height:1.45;font-style:italic}
.hdeeper{display:inline-block;margin-top:16px;background:none;border:1px solid var(--line);color:var(--text);border-radius:99px;padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none}
.hnotice{padding:0;margin-top:18px;font-size:11px}
/* The bottom: a badge, what was covered, and the next one to find */
.hend{text-align:center}
.hbadge{position:relative;width:118px;height:118px;margin:4px auto 24px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 34% 28%,#b9f5ec,var(--aqua) 52%,#2c8a7f);box-shadow:0 0 0 9px rgba(111,211,199,.14),0 0 70px rgba(111,211,199,.5);animation:hbadge .8s cubic-bezier(.3,1.7,.5,1) both}
.hbadge svg{width:54px;height:54px;fill:none;stroke:#00352f;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.hbadge i{position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:var(--c);transform:rotate(var(--a));animation:hspark .9s ease-out .25s both}
@keyframes hbadge{from{transform:scale(.3);opacity:0}}
@keyframes hspark{from{transform:rotate(var(--a)) translateY(0);opacity:1}to{transform:rotate(var(--a)) translateY(-104px);opacity:0}}
.hendtitle{font-family:var(--serif);font-size:36px;line-height:1.08;font-weight:600;margin:0 0 8px;text-wrap:balance}
.hendsub{font-size:15px;color:var(--muted);margin:0}
.hstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 18px}
.hstats div{border:2px solid var(--line);border-radius:16px;padding:12px 4px 10px}
.hstats b{display:block;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.hstats span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hexplored{font-size:13px;color:var(--muted);margin-bottom:22px}
.hexplored .hcprog{max-width:220px;margin:8px auto 0}
.hnexthole{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:100%;min-height:160px;padding:16px;border:0;border-radius:18px;overflow:hidden;
  background:#0b1013 center 28%/cover no-repeat;color:#fff;font:inherit;text-align:left;cursor:pointer}
.hnexthole::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,11,13,.1),rgba(7,11,13,.88))}
.hnexthole *{position:relative}
.hnexthole small{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#f1d79c}
.hnexthole b{font-family:var(--serif);font-size:24px;line-height:1.1;font-weight:600}
.hagain{display:inline-block;margin-top:16px;background:none;border:0;color:var(--muted);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hend .hnotice{text-align:left}
.hnav{position:relative;display:flex;gap:12px;align-items:center;padding:10px 18px calc(var(--safe-bottom) + 16px)}
.hprev{width:54px;height:54px;flex:none;border-radius:16px;border:2px solid var(--line);background:var(--bg);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 0 var(--line);padding:0}
.hprev svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hprev:disabled{opacity:.3;cursor:default}
.hnext{flex:1;height:54px;border:0;border-radius:16px;background:var(--aqua);color:#00211d;font:inherit;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 4px 0 #3f9f94;transition:transform .08s,box-shadow .08s,background .2s}
.hnext.reveal{background:var(--sand);color:#2a1d05;box-shadow:0 4px 0 #a8843f}
.hnext.reveal:active{box-shadow:0 1px 0 #a8843f}
.hlrow{display:flex;gap:12px;align-items:center;width:100%;background:none;border:0;border-bottom:1px solid var(--line);padding:12px 0;color:var(--text);font:inherit;text-align:left;cursor:pointer}
.hlrow i{width:64px;height:64px;flex:none;border-radius:10px;background:#1a2326 center/cover no-repeat}
.hlrow b{display:block;font-size:15px;line-height:1.3}
.hlrow small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
@media (prefers-reduced-motion:reduce){.hslide .hin,.hpath li,.hbadge,.hbadge i,.hbar.pulse i{animation:none}.hflipin,.hbar i,.hbg{transition:none}.hbadge i{display:none}}
.hero .dfrom{font-size:14px;margin:10px 0 2px}
/* Captions: one setting for both players. The line keeps room for about three lines, so the video
   above it does not jump as the words change. */
.ccbtn{border:1.5px solid currentColor;background:none;color:var(--muted);border-radius:6px;padding:4px 7px;font:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1;cursor:pointer}
.ccbtn.on{color:#000;background:var(--aqua);border-color:var(--aqua)}.phead .ccbtn{margin-left:auto}
.phead .sound:not([hidden]) + .ccbtn{margin-left:10px}
.pcap{min-height:3.9em;padding:10px 22px 0;font-size:16px;line-height:1.3;color:#fff;text-align:center;text-wrap:balance}

/* A video's own page: the same bare player as a Short, inside the page. The embed is cropped the same
   way, a tap anywhere on the video plays or pauses, and the timeline and buttons sit under it. */
.vp{margin:14px 0 8px}
.vbox{position:relative}
.vclip{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;background:#000}
.vclip iframe{position:absolute;left:0;top:-90px;width:100%;height:calc(100% + 180px);border:0}.vp.tall .vbox{width:fit-content;margin:0 auto}
.vp.tall .vclip{aspect-ratio:9/16;width:auto;height:min(70vh,560px)}
.vtap{position:absolute;inset:0;z-index:1;transform:translateZ(0);border-radius:12px;cursor:pointer;background:transparent center/cover no-repeat;-webkit-tap-highlight-color:transparent}
/* Before it plays: the thumbnail. (Named cued, not poster: .poster is the feed's tall Short card.) */
.vtap.cued{background-color:#000}
.vbig{position:absolute;left:50%;top:50%;z-index:2;transform:translateZ(0);width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;pointer-events:none}
.vbig svg{width:28px;height:28px;stroke:#fff;fill:#fff}
.capline{min-height:3.9em;margin:10px 4px 0;font-size:15px;line-height:1.3;color:var(--text);text-align:center;text-wrap:balance}
.vp .pscrub{margin:6px 4px -4px}
.vbar{display:flex;align-items:center;gap:12px;margin-top:4px}
.vplay{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.vplay svg{width:16px;height:16px;stroke:var(--text);fill:var(--text)}
.vtime{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.vbar .ccbtn{margin-left:auto}
.vgo{font-size:13px;color:var(--aqua);text-decoration:none;white-space:nowrap}
.vresume{margin-top:10px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.vresume button{background:none;border:0;padding:0;color:var(--aqua);font:inherit;font-size:13px;cursor:pointer}
.vresume span{flex-basis:100%}

/* A phone turned on its side while a video plays: the video fills the screen, with the timeline and
   buttons under it and the captions over its lower edge. Turning back restores the page. A moment in
   the swipe player (wide) fills the screen the same way. */
@media (orientation: landscape) and (max-height: 540px) {
  .vp.live{position:fixed;inset:0;z-index:30;margin:0;background:#000;display:flex;flex-direction:column;padding:env(safe-area-inset-top) max(14px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
  .vp.live .vbox{flex:1;min-height:0;width:100%;margin:0;display:flex;justify-content:center;align-items:center}
  /* As wide as the height left over allows, so the box stays 16:9 and the crop still fits the video */
  .vp.live .vclip{height:auto;aspect-ratio:16/9;border-radius:0;width:min(100%, calc((100vh - 96px) * 16 / 9));width:min(100%, calc((100dvh - 96px) * 16 / 9))}
  .vp.live.tall .vclip{height:100%;width:auto;aspect-ratio:9/16}
  .vp.live .vtap{border-radius:0}
  .vp.live .capline{position:absolute;left:10%;right:10%;bottom:72px;z-index:3;min-height:0;margin:0;color:#fff;text-shadow:0 1px 4px #000;pointer-events:none}
  .vp.live .vresume{display:none}
  .vp.live .vplay{background:rgba(255,255,255,.14)}
  .vp.live .vplay svg{stroke:#fff;fill:#fff}
  .player.wide .phead,.player.wide .pfoot{display:none}
  .player.wide .pframe{padding:0}
  .player.wide .pclip.wide{height:100%;width:auto;aspect-ratio:16/9;border-radius:0}
}
.pinfo .deeper{display:inline-block;font-size:13px;color:var(--aqua);cursor:pointer;margin-left:auto;white-space:nowrap}
/* Like, Save, and Thread under a Short, as on every post */
.pacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:10px;font-size:13px;color:var(--muted)}
.pacts>span:not(.deeper){display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
.pacts>span.on{color:var(--aqua)}
.pacts svg{width:18px;height:18px}
.pnav{display:flex;flex-direction:column;gap:10px}
.pnav div{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pnav div.off{opacity:.3;pointer-events:none}
@media (min-width:520px){.phead{padding-top:56px}.pfoot{padding-bottom:30px}}

/* Add to threads sheet and feed banner, from the mockup */
.sheetbg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:8}
.sheetbg.open{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:80%;overflow-y:auto;background:var(--card);border-radius:24px 24px 0 0;padding:14px 20px calc(var(--safe-bottom) + 28px);transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:9}
.sheet.open{transform:translateY(0)}
.grab{width:38px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 16px}
.sheet h3{font-size:16px;font-weight:500;margin-bottom:4px}
.sheet>p,.sheetempty{font-size:13px;color:var(--muted);margin-bottom:14px}
.trow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.box{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--muted);display:flex;align-items:center;justify-content:center;flex:none}
.box svg{display:none;stroke:#0d1316;width:14px;height:14px}
.trow.on .box{background:var(--aqua);border-color:var(--aqua)}
.trow.on .box svg{display:block}
.trow div:nth-child(2){flex:1}
.trow h4{font-size:15px;font-weight:500}
.trow span{font-size:12px;color:var(--muted)}
.newt{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--aqua);font-size:14px;cursor:pointer}
.done{margin-top:14px;width:100%;padding:14px;border-radius:14px;border:none;background:var(--text);color:var(--bg);font-size:15px;font-weight:500;font-family:inherit;cursor:pointer}
.banner{margin:14px 20px 4px;padding:12px 14px;border-radius:12px;background:var(--aqua-dim);color:var(--aqua);font-size:13px;display:flex;gap:10px;align-items:center;cursor:pointer}
.banner b{font-weight:500;color:#bff0e9}

/* Read, Threads, and Saved tabs; thread pages */
.tabhead{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 8px}
.tabhead h2{font-size:22px;font-weight:600}
.newbtn{background:none;border:1px solid var(--line);color:var(--aqua);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.threadrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);cursor:pointer}
.threadrow h4{font-size:16px;font-weight:600;margin-bottom:2px}
.threadrow span{font-size:12px;color:var(--muted)}
.threadrow .pending{color:var(--aqua);background:var(--aqua-dim);padding:3px 8px;border-radius:6px;font-size:11px;white-space:nowrap}
.threadacts{display:flex;gap:18px;margin-top:14px;font-size:13px}
.threadacts a{color:var(--aqua);text-decoration:none}
.threadacts span{color:var(--muted);cursor:pointer}
.tnote{display:flex;flex-wrap:wrap;gap:16px;margin-top:10px;font-size:12px;color:var(--muted)}
.tnote p{flex-basis:100%;font-size:14px;line-height:1.5;color:#cfd6d8;background:var(--card);border-radius:10px;padding:10px 12px}
.tnote span{cursor:pointer}
.tnote .accept{color:var(--aqua)}
.sec.divider{border-top:1px solid var(--line);margin-top:10px}
.dacts{display:flex;flex-wrap:wrap;gap:12px 18px;margin-top:14px;font-size:13px;color:var(--muted)}
.dacts .dless{margin-left:auto}
.dacts>span{display:flex;align-items:center;gap:6px;cursor:pointer}
.dacts>span.on{color:var(--aqua)}
.dacts svg{width:16px;height:16px}
.inthreads{margin-top:10px;font-size:12px;color:var(--muted)}
.inthreads span{color:var(--aqua);cursor:pointer}

.toast{position:absolute;left:20px;right:20px;bottom:110px;background:#1d2a30;color:var(--text);padding:12px 16px;border-radius:12px;font-size:13px;opacity:0;transform:translateY(8px);transition:all .25s;z-index:11;pointer-events:none}

/* Topics for you: big, tinted buttons that open a topic's page. Each kind keeps its tag color */
.topics{padding-bottom:20px}
.tophead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.tophead h3{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.1}
.tophead p{font-size:12px;color:var(--muted);margin-top:4px}
.shuffle{margin-left:auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.shuffle svg{width:17px;height:17px}
.shuffle:active{transform:rotate(-40deg) scale(.9)}
.topgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.topic{--k:var(--sand);position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:12px;min-height:96px;padding:14px 14px 13px;text-align:left;border-radius:18px;border:1px solid color-mix(in srgb,var(--k) 30%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--k) 22%,var(--card)),var(--card) 72%);color:var(--text);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .2s cubic-bezier(.3,1.5,.5,1),box-shadow .25s,border-color .2s}
.topic.k-person{--k:var(--rose)}
.topic.k-place{--k:var(--aqua)}
.topic.k-argument{--k:var(--sky)}
.topic .tlabel{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.08;padding-right:20px;text-wrap:balance;overflow-wrap:anywhere}
.topic .tmeta{font-size:11px;font-weight:500;letter-spacing:.02em;color:var(--k)}
.topic svg{position:absolute;top:13px;right:12px;width:16px;height:16px;stroke:var(--k);opacity:.75;transition:transform .2s}
.topic:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--k) 55%,transparent)}
.topic:hover svg{transform:translate(2px,-2px)}
.topic:active{transform:scale(.95);transition-duration:.08s}
.topic.picked{transform:scale(.97);border-color:var(--k);box-shadow:0 0 0 5px color-mix(in srgb,var(--k) 24%,transparent),0 8px 26px color-mix(in srgb,var(--k) 22%,transparent)}
.topic:focus-visible{outline:2px solid var(--k);outline-offset:2px}
.dealing .topic{animation:deal .42s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--i) * 45ms)}
@keyframes deal{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.topic,.topic svg,.shuffle{transition:none}.dealing .topic{animation:none}}

/* Thread notebooks: entries read top to bottom, each with margin notes under it */
.tblocks{border-top:1px solid var(--line)}
.blk{padding:16px 20px;border-bottom:1px solid var(--line)}
.blk.sec{padding:26px 20px 10px;border-bottom:none}
.bsec{font-family:var(--serif);font-size:25px;font-weight:600;line-height:1.15;text-wrap:balance}
.bby{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);margin-bottom:8px}
.pav{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;flex:none}
.pav.c0{background:var(--aqua-dim);color:var(--aqua)}
.pav.c1{background:var(--rose-dim);color:var(--rose)}
.pav.c2{background:var(--sky-dim);color:var(--sky)}
.pav.c3{background:var(--sand-dim);color:var(--sand)}
.bnote,.bcomment,.bcaption{white-space:pre-wrap;font-size:15px;line-height:1.55}
.bcomment{margin-bottom:10px}
.bcaption{margin-top:8px;font-size:13px;color:var(--muted)}
.reflink{color:var(--sand);text-decoration:underline;text-decoration-color:rgba(217,180,106,.45);text-underline-offset:3px;cursor:pointer}
.qcard .post{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:14px 16px}
.qcard .acts{display:none}
.qgone{font-size:13px;color:var(--muted);border:1px dashed var(--line);border-radius:14px;padding:12px 14px}
.lcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:12px;color:var(--text);text-decoration:none}
.lcard .fav{width:40px;height:40px;border-radius:10px;background:var(--sky-dim);color:var(--sky);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:21px;font-weight:600;flex:none}
.lcard b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.lcard small{font-size:12px;color:var(--muted)}
.bphoto{display:block;width:100%;border-radius:14px;border:1px solid var(--line);background:var(--card)}
.mnotes{display:flex;flex-direction:column;gap:8px;margin-top:12px;padding-left:12px;border-left:1px solid var(--line)}
.mnotes.bare{border-left:none;padding-left:0;margin-top:10px}
.mnote{display:flex;gap:8px;font-size:13px;line-height:1.45;color:#c5cfd1}
.mnote p{white-space:pre-wrap;min-width:0}
.ndel{margin-left:8px;font-size:11px;color:var(--muted);cursor:pointer}
.addnote{align-self:flex-start;font-size:12px;color:var(--aqua);cursor:pointer}
.mform{display:flex;gap:8px}
.mform input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--text);font:inherit;font-size:14px;padding:8px 10px}
.eform{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.eform textarea{width:100%;resize:vertical;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;font-size:15px;line-height:1.5;padding:10px 12px}
.eacts{display:flex;gap:10px}
.btools{display:flex;flex-wrap:wrap;gap:18px;margin-top:12px;font-size:12px;color:var(--aqua)}
.btools span{cursor:pointer}
.btools .off{opacity:.35;pointer-events:none}
.btools .bdel{color:var(--rose)}
.threadacts .tarrange.on{color:var(--aqua)}
.tcomposer{position:sticky;bottom:0;display:flex;align-items:flex-end;gap:8px;margin-top:24px;padding:10px 12px calc(var(--safe-bottom) + 10px);background:var(--bg);border-top:1px solid var(--line);z-index:2}
.tcomposer textarea{flex:1;min-width:0;resize:none;height:40px;max-height:140px;background:var(--card);border:1px solid var(--line);border-radius:20px;color:var(--text);font:inherit;font-size:15px;line-height:1.4;padding:9px 14px}
.tplus{width:40px;height:40px;border-radius:50%;background:var(--card);border:0;color:var(--aqua);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.tsend{height:40px;padding:0 16px;border-radius:20px;border:0;background:var(--aqua);color:#07201d;font:inherit;font-size:14px;font-weight:600;cursor:pointer;flex:none}
.tcancel{height:40px;padding:0 14px;border-radius:20px;border:1px solid var(--line);background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.aopts{display:flex;flex-direction:column}
.aopt{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.aopt svg{stroke:var(--aqua)}
.aopt b{display:block;font-size:15px;font-weight:500}
.aopt span{font-size:12px;color:var(--muted)}
.apicklabel{font-size:12px;color:var(--muted);margin-bottom:6px}
.arow{padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.arow b{display:block;font-size:14px;font-weight:500}
.arow span{font-size:12px;color:var(--muted)}
.scomment{width:100%;resize:none;background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--text);font:inherit;font-size:14px;line-height:1.45;padding:10px 12px;margin-bottom:6px}
.srow{display:flex;flex-direction:column;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.swho{display:flex;align-items:center;gap:10px}
.swho .pav{width:30px;height:30px;font-size:13px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg span{text-align:center;font-size:12px;font-weight:500;padding:8px 4px;border-radius:9px;color:var(--muted);cursor:pointer}
.seg span.on{background:var(--card);color:var(--text);box-shadow:0 0 0 1px var(--line)}
.backlinks{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.blabel{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.backlink{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.backlink b{font-size:14px;font-weight:600}
.backlink span{font-size:13px;line-height:1.45;color:#c5cfd1;white-space:pre-wrap}
.backlink small{font-size:11px;color:var(--muted)}
.memory{background:linear-gradient(180deg,rgba(111,211,199,.07),transparent 75%)}
.mhead{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--aqua);margin-bottom:10px}
.memory .qcard,.memory .lcard{margin-top:10px}
.mopen{display:inline-block;margin-top:12px;font-size:13px;color:var(--aqua);cursor:pointer}
.hl-quote{background:rgba(217,180,106,.2);box-shadow:inset 0 -2px 0 var(--sand)}

/* Highlights: press and hold to select words, then pick a color in the bar */
mark.hl{color:inherit;border-radius:3px}
.hl-yellow{background:rgba(217,180,106,.38)}
.hl-green{background:rgba(111,211,199,.3)}
.hl-blue{background:rgba(133,183,235,.34)}
.hl-pink{background:rgba(229,143,179,.34)}
/* A verse number opens that verse; the padding makes it easier to hit without moving the text */
.ptext .vn{cursor:pointer;padding:8px 5px;margin:0 -2px 0 -4px}
.hlbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--safe-bottom) + 78px);z-index:9;display:flex;align-items:center;gap:12px;background:#1d2a30;border:1px solid var(--line);border-radius:99px;padding:8px 14px;box-shadow:0 6px 24px rgba(0,0,0,.45);-webkit-user-select:none;user-select:none;white-space:nowrap}
.hlbar span{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid rgba(255,255,255,.15)}
.hlbar [data-color=yellow]{background:#d9b46a}
.hlbar [data-color=green]{background:#6fd3c7}
.hlbar [data-color=blue]{background:#85b7eb}
.hlbar [data-color=pink]{background:#e58fb3}
.hlbar b{font-weight:500;font-size:13px;color:var(--aqua);cursor:pointer;padding:4px 2px}

/* Profiles: who's reading. The initial at the top right switches */
.tright{display:flex;align-items:center;gap:14px}
.me{width:30px;height:30px;border-radius:50%;background:var(--aqua-dim);color:var(--aqua);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;cursor:pointer}
.pick{position:absolute;inset:0;z-index:10;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
.pick h2{font-family:var(--serif);font-size:32px;font-weight:600;margin-bottom:8px}
.pick p{font-size:13px;color:var(--muted);line-height:1.5;max-width:260px;margin-bottom:32px}
.pkrow{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-bottom:34px}
.pk{width:86px;display:flex;flex-direction:column;align-items:center;gap:9px;font-size:14px;cursor:pointer}
.pk i{width:74px;height:74px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--serif);font-size:32px;color:var(--aqua)}
.pk.on i{border-color:var(--aqua)}
.pick.naming .pk i{border-style:dashed;border-color:var(--muted)}
.pkacts{display:flex;gap:24px;font-size:13px;color:var(--aqua)}
.pkacts span{cursor:pointer}
.sbtn{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:inherit;cursor:pointer}
.rhead{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--line)}
.rtabs{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtab{flex:none;display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:7px 11px;font:inherit;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.rtab.on{background:var(--card);border-color:var(--aqua);color:var(--text)}
.rtab svg,.rnav svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
.rtab .rx{margin:-6px -6px -6px 0;padding:5px 6px;font-size:16px;line-height:1;color:var(--muted)}
.radd{padding:7px 9px}
.rtr{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--sand);text-decoration:none}
.chapter{padding:22px 22px 6px;font-family:var(--serif);font-size:21px;line-height:1.7;font-weight:500}
.ctitle{font-size:36px;font-weight:600;line-height:1.1;margin-bottom:14px}
.ptitle{font-style:italic;color:var(--muted);font-size:17px;margin:-4px 0 12px}
.shead{font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:600;color:var(--text);margin:26px 0 8px;letter-spacing:.01em;text-wrap:balance}
.chapter .shead:first-child{margin-top:4px}
.chapter p{margin:0 0 16px}
.chapter sup{font-family:Inter,system-ui,sans-serif;font-size:10px;font-weight:500;color:var(--sand);margin:0 3px 0 1px;line-height:0}
.chapter .vn{cursor:pointer;padding:8px 5px;margin:0 -2px 0 -4px}
.v.flash{background:color-mix(in srgb,var(--sand) 30%,transparent);border-radius:3px;transition:background 1.6s}
.rnav{display:flex;justify-content:space-between;gap:12px;padding:6px 20px 18px}
.rnav button{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);color:var(--text);border-radius:14px;padding:12px 14px;font:inherit;font-size:14px;cursor:pointer}
.bsheet{max-height:86%}
.bhead{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.bhead span{color:var(--aqua);font-size:13px;cursor:pointer}
.blabel{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px}
.brow{display:flex;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px}
.brow span{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.brow.on{color:var(--aqua)}
.cgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding-top:6px}
.cgrid span{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--bg);border:1px solid var(--line);font-size:15px;cursor:pointer;font-variant-numeric:tabular-nums}
.cgrid span.on{border-color:var(--aqua);color:var(--aqua)}
.sbox{position:sticky;top:0;z-index:2;background:var(--bg);padding:12px 16px}
.sbox input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:16px}
.sbox input:focus{outline:none;border-color:var(--aqua)}
.ssec{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:16px 20px 8px}
.shint,.stopics{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
.shint span,.stopics span{display:flex;align-items:baseline;gap:6px;font-size:13px;padding:7px 12px;border-radius:99px;border:1px solid var(--line);cursor:pointer}
.stopics em{font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.sref{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin:4px 16px;padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line);cursor:pointer}
.sref b{flex:1 1 100%;font-family:var(--serif);font-size:24px;font-weight:600}
.sref span{font-size:13px;color:var(--aqua)}
.sempty{padding:24px 20px;color:var(--muted);font-size:14px;line-height:1.5}
/* Pull to refresh: a round button that drops from the top of what is pulled, and spins while it loads */
.ptr{position:absolute;left:50%;top:0;z-index:7;width:36px;height:36px;border-radius:50%;background:var(--card);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transform:translate(-50%,-30px);opacity:0;transition:opacity .15s;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.ptr.on{opacity:1}
.ptr svg{width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2;transition:transform .15s}
.ptr.ready svg{stroke:var(--aqua);transform:rotate(180deg)}
.ptr.spin svg{display:none}
.ptr.spin::after{content:'';width:16px;height:16px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--aqua);animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ptr.spin::after{animation-duration:2s}}
.folders{display:flex;gap:12px;overflow-x:auto;padding:4px 20px 16px;scrollbar-width:none}
.folders::-webkit-scrollbar{display:none}
.folder{flex:none;width:88px;display:flex;flex-direction:column;gap:3px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.folder .fcover{width:88px;height:88px;border-radius:16px;margin-bottom:5px}
.folder b{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder span{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.folder.on .fcover{outline:2px solid var(--aqua);outline-offset:2px}
.fcover{--k:var(--sand);display:flex;align-items:center;justify-content:center;flex:none;font-style:normal;font-family:var(--serif);font-size:30px;color:var(--k);border:1px solid color-mix(in srgb,var(--k) 30%,transparent);background:linear-gradient(150deg,color-mix(in srgb,var(--k) 26%,var(--card)),var(--card) 80%)}
.fcover.k1{--k:var(--aqua)}
.fcover.k2{--k:var(--rose)}
.fcover.k3{--k:var(--sky)}
.fcover.pic{background:var(--card) center/cover no-repeat;border-color:var(--line)}
.fcover svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6}
.frow .fcover{width:44px;height:44px;border-radius:11px;font-size:20px}
.frow .fcover svg{width:20px;height:20px}
.folderbar{display:flex;align-items:baseline;gap:16px;padding:0 20px 8px;font-size:13px}
.folderbar h3{flex:1;font-family:var(--serif);font-size:24px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folderbar span{color:var(--aqua);cursor:pointer}
.newt[hidden],.fnewbox[hidden]{display:none}
.fnewbox{display:flex;flex-direction:column;gap:10px;padding:4px 0 2px}
.fnewbox input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit;font-size:16px}
.fnewbox input:focus{outline:none;border-color:var(--aqua)}
.fsugg{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.fsugg:empty{display:none}
.fsugg em{font-style:normal;font-size:12px;color:var(--muted);margin-right:2px}
.fsugg span{font-size:13px;padding:6px 12px;border-radius:99px;border:1px solid var(--line);cursor:pointer}
.fnewbox .done{margin-top:2px}
#fdone{background:none;border:1px solid var(--line);color:var(--text)}
.fremove{display:block;width:100%;margin-top:6px;padding:12px;border:none;background:none;color:var(--rose);font:inherit;font-size:14px;cursor:pointer}
.login form{width:100%;max-width:300px;display:flex;flex-direction:column;gap:10px}
.login input{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit;font-size:16px}
.login input:focus{outline:none;border-color:var(--aqua)}
.login input[hidden]{display:none}
.lierr{min-height:18px;font-size:13px;line-height:1.4;color:var(--rose)}
.login .done{margin-top:4px}
.login .done:disabled{opacity:.6}
.toast.on{opacity:1;transform:translateY(0)}