/* FIRSTHAND v4 — copied from Classical Mind topic.css (v73): tradition page, Fresh card, bottom sheet, group cards. */
:root{ --tp-ink:#2A2038; --tp-mute:#6f6880; --tp-card:#fff; --tp-spring:cubic-bezier(0.34,1.56,0.64,1); --tp-gold1:#FFE57A; --tp-gold2:#FFCE3D; --tp-gold-ink:#7A4E00; }
[data-theme="dark"]{ --tp-ink:#F2EDE4; --tp-mute:#B9B1C6; --tp-card:#1E1A28; }

.tp{ max-width:760px; margin:0 auto; padding:0 0 3em; color:var(--tp-ink); }
.tp-hero{ position:relative; margin:0 -16px 0; min-height:150px; max-height:190px; display:flex; align-items:flex-end; overflow:hidden; border-radius:0 0 28px 28px; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.tp-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tp-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.6)); }
.tp-hero-in{ position:relative; z-index:2; padding:3.6em 1.2em .9em; color:#fff; display:flex; flex-direction:column; gap:.3em; }
.tp-back{ align-self:flex-start; margin-bottom:auto; color:#fff; text-decoration:none; font:700 .82rem/1 -apple-system,system-ui,sans-serif; background:rgba(0,0,0,.32); padding:.55em .85em; border-radius:999px; position:absolute; top:14px; left:14px; z-index:3; }
.tp-era{ font:800 .7rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.92; }
.tp-hero h1, .tp-hero p{ color:#fff; }
.tp-hero h1{ margin:0; font-size:1.9rem; line-height:1; font-weight:900; letter-spacing:-.03em; text-shadow:0 2px 12px rgba(0,0,0,.35); }
.tp-hero p{ margin:0; font-size:.92rem; line-height:1.35; opacity:.95; text-shadow:0 1px 8px rgba(0,0,0,.35); }

#tpFresh{ margin:1.2em 0 1.4em; }
.fresh{ position:relative; }
.fresh.fr-in .fr-card{ animation:tpIn .45s var(--tp-spring); }
.fr-head{ position:absolute; top:12px; left:12px; right:12px; z-index:4; display:flex; justify-content:space-between; align-items:center; gap:.5em; pointer-events:none; }
.fr-head > *{ pointer-events:auto; }
.fr-ribbon{ display:inline-flex; align-items:center; gap:.4em; padding:.55em .9em; border-radius:999px; font:800 .76rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--tp-gold-ink); background:linear-gradient(135deg,var(--tp-gold1),var(--tp-gold2)); box-shadow:0 3px 12px rgba(120,80,0,.25); }
.fr-another{ border:0; cursor:pointer; border-radius:50%; width:40px; height:40px; padding:0; display:grid; place-items:center; font:800 1.15rem/1 -apple-system,system-ui,sans-serif; color:#4d4658; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 3px 12px rgba(20,35,60,.18); transition:transform .2s var(--tp-spring); }
.fr-another:active{ transform:scale(.95) rotate(-8deg); }
.fr-card{ position:relative; display:flex; flex-direction:column; width:100%; padding:0; border:0; cursor:pointer; text-align:left; font:inherit; overflow:hidden; border-radius:22px; background:var(--tp-card); text-decoration:none; color:var(--tp-ink); box-shadow:0 2px 6px rgba(20,35,60,.08),0 14px 34px color-mix(in srgb,var(--fc) 26%,transparent); transition:transform .25s var(--tp-spring); }
.fr-card:active{ transform:scale(.98); }
.fr-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--fc),var(--fcd)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.fr-pic{ display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg,var(--fc),var(--fcd)); }
.fr-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.fr-body{ display:flex; flex-direction:column; gap:.4em; padding:.95em 1.15em 1.15em; }
.fr-kicker{ font:800 .72rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--fcd); }
.fr-title{ font-weight:800; font-size:clamp(1.35rem,6vw,1.65rem); line-height:1.1; letter-spacing:-.025em; }
.fr-line{ font-size:1rem; line-height:1.5; color:var(--tp-mute); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.fr-cta{ align-self:flex-start; margin-top:.3em; padding:.6em 1.1em; border-radius:999px; font:800 .9rem/1 -apple-system,system-ui,sans-serif; color:#fff; background:linear-gradient(135deg,var(--fc),var(--fcd)); }

.tp-block{ margin:1.6em 0; }
.tp-h{ display:flex; justify-content:space-between; align-items:baseline; gap:.6em; margin:0 2px .7em; }
.tp-h h2{ margin:0; font-size:1.35rem; font-weight:800; letter-spacing:-.02em; }
.tp-sub{ font:700 .8rem -apple-system,system-ui,sans-serif; color:var(--tp-mute); }
.tp-sub b{ color:var(--tad); display:inline-flex; align-items:center; gap:.25em; }

.tp-ideas{ display:grid; grid-auto-flow:column; grid-auto-columns:62%; gap:.8em; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; margin:0 -16px; padding:.2em 16px 1em; scrollbar-width:none; }
.tp-ideas::-webkit-scrollbar{ display:none; }
.tp-idea{ position:relative; scroll-snap-align:start; display:flex; flex-direction:column; text-align:left; border:0; padding:0; cursor:pointer; background:var(--tp-card); border-radius:20px; overflow:hidden; font:inherit; color:var(--tp-ink); box-shadow:0 2px 6px rgba(20,35,60,.08),0 10px 24px color-mix(in srgb,var(--ta) 20%,transparent); transition:transform .25s var(--tp-spring); }
.tp-idea::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.tp-idea:active{ transform:scale(.97); }
.tp-idea-pic{ position:relative; display:block; aspect-ratio:1/1; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.tp-idea-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tp-idea-no{ position:absolute; top:10px; left:10px; z-index:2; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; font:900 .95rem/1 -apple-system,system-ui,sans-serif; color:var(--tad); background:rgba(255,255,255,.95); box-shadow:0 2px 8px rgba(0,0,0,.18); }
.tp-idea-tick{ position:absolute; top:10px; right:10px; z-index:2; width:30px; height:30px; display:none; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#F4B82A,#D99A0B); box-shadow:0 2px 8px rgba(0,0,0,.2); }
.tp-idea.is-got .tp-idea-tick{ display:grid; }
.tp-idea.is-got::before{ background:linear-gradient(135deg,#F4B82A,#D99A0B); }
.tp-idea-t{ margin:.8em .95em 0; font-weight:800; font-size:1.05em; line-height:1.15; letter-spacing:-.015em; }
.tp-idea-h{ margin:.35em .95em 1em; padding:0; font-size:.86em; line-height:1.4; color:var(--tp-mute); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.tp-remember{ margin:1.4em 0; padding:1em 1.15em; border-radius:18px; background:color-mix(in srgb,var(--tas) 70%,var(--tp-card)); border-left:5px solid var(--ta); }
.tp-remember span{ display:block; font:800 .7rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); margin-bottom:.4em; }
.tp-remember p{ margin:.2em 0; font-family:Georgia,serif; font-size:1.08rem; line-height:1.4; color:var(--tp-ink); }
[data-theme="dark"] .tp-remember{ background:#2A2436; }

.tp-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.tp-tile{ position:relative; display:flex; flex-direction:column; text-align:left; border:0; padding:0; cursor:pointer; background:var(--tp-card); border-radius:18px; overflow:hidden; font:inherit; color:var(--tp-ink); box-shadow:0 2px 6px rgba(20,35,60,.07),0 8px 20px rgba(20,35,60,.07); transition:transform .25s var(--tp-spring); }
.tp-tile::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.tp-tile:active{ transform:scale(.97); }
.tp-tile-pic{ display:block; aspect-ratio:4/3; overflow:hidden; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.tp-tile-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.tp-tile-t{ margin:.65em .8em 0; font-weight:800; font-size:1rem; letter-spacing:-.01em; }
.tp-tile-l{ margin:.25em .8em .85em; font-size:.8rem; line-height:1.35; color:var(--tp-mute); }

.tp-fold{ margin:1.6em 0; border-radius:18px; background:var(--tp-card); box-shadow:0 2px 6px rgba(20,35,60,.07); }
.tp-fold summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:.6em; padding:1em 1.1em; font-weight:800; }
.tp-fold summary::-webkit-details-marker{ display:none; }
.tp-chev{ margin-left:auto; color:var(--tp-mute); transition:transform .2s; }
.tp-fold[open] .tp-chev{ transform:rotate(180deg); }
.tp-fold-body{ padding:0 1.15em 1.1em; line-height:1.6; }
.tp-fold-body h3{ margin:1.2em 0 .4em; font-size:1.05rem; }
.tp-glance{ display:grid; grid-template-columns:1fr 1fr; gap:.5em; margin:.8em 0; }
.tp-gl{ padding:.6em .75em; border-radius:12px; background:color-mix(in srgb,var(--tas) 60%,transparent); font-size:.88rem; line-height:1.35; }
.tp-gl b{ display:block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tad); }
.tp-faq{ border-top:1px solid rgba(120,110,140,.18); padding:.6em 0; }
.tp-faq summary{ cursor:pointer; font-weight:700; }
.tp-actions{ text-align:center; margin-top:1.4em; }
.tp-home{ color:var(--tad); font-weight:800; text-decoration:none; }

/* Bottom sheet */
.tp-sheet{ position:fixed; inset:0; z-index:5000; background:rgba(20,15,30,0); display:flex; align-items:flex-end; justify-content:center; transition:background .25s; }
.tp-sheet.in{ background:rgba(20,15,30,.5); }
.tp-sheet-card{ position:relative; width:100%; max-width:640px; max-height:calc(100% - max(64px, env(safe-area-inset-top) + 40px)); overflow-y:auto; background:var(--tp-card); color:var(--tp-ink); border-radius:24px 24px 0 0; transform:translateY(100%); transition:transform .32s var(--tp-spring); padding-bottom:env(safe-area-inset-bottom); }
.tp-sheet.in .tp-sheet-card{ transform:none; }
body.tp-locked{ overflow:hidden; }
.tp-x{ position:sticky; top:10px; float:right; margin:10px 10px -46px 0; z-index:5; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; font-size:1rem; color:#fff; background:rgba(0,0,0,.45); }
.tp-sheet-img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.tp-sheet-body{ padding:1.1em 1.3em 1.6em; }
.tp-sheet-k{ font:800 .7rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); }
.tp-sheet-body h3{ margin:.35em 0 .5em; font-size:1.55rem; line-height:1.12; font-weight:800; letter-spacing:-.02em; }
.tp-sheet-d{ font-size:1.02rem; line-height:1.6; margin:0 0 1em; }
.tp-why{ margin:1em 0; padding:.9em 1em; border-radius:14px; background:color-mix(in srgb,var(--tas) 70%,var(--tp-card)); }
[data-theme="dark"] .tp-why{ background:#2A2436; }
.tp-why span{ display:block; font:800 .68rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); margin-bottom:.35em; }
.tp-why p{ margin:0; line-height:1.55; }
.tp-sheet-btns{ display:flex; flex-wrap:wrap; gap:.6em; margin-top:1.2em; }
.tp-got, .tp-next{ border:0; cursor:pointer; border-radius:999px; padding:.75em 1.2em; font:800 .95rem/1 -apple-system,system-ui,sans-serif; display:inline-flex; align-items:center; gap:.35em; transition:transform .2s var(--tp-spring); }
.tp-got{ color:#fff; background:linear-gradient(135deg,var(--ta),var(--tad)); }
.tp-got.on{ color:var(--tp-gold-ink); background:linear-gradient(135deg,var(--tp-gold1),var(--tp-gold2)); }
.tp-next{ color:var(--tad); background:color-mix(in srgb,var(--tas) 80%,var(--tp-card)); }
.tp-got:active, .tp-next:active{ transform:scale(.95); }
.tp-plist{ display:flex; flex-direction:column; gap:.55em; }
.tp-prow{ display:grid; grid-template-columns:64px 1fr auto; gap:.75em; align-items:center; text-align:left; border:0; padding:.45em; cursor:pointer; border-radius:14px; background:color-mix(in srgb,var(--tas) 45%,var(--tp-card)); font:inherit; color:var(--tp-ink); }
.tp-prow img{ width:64px; height:64px; border-radius:10px; object-fit:cover; }
.tp-prow b{ display:block; font-size:.98rem; }
.tp-prow small{ display:block; color:var(--tp-mute); font-size:.82rem; line-height:1.35; margin-top:.15em; }
.tp-prow-tick{ visibility:hidden; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#F4B82A,#D99A0B); }
.tp-prow.is-got .tp-prow-tick{ visibility:visible; }
.tp-path{ list-style:none; padding:0; margin:0; counter-reset:st; }
.tp-path > li{ position:relative; padding:0 0 1em 2.6em; }
.tp-path > li::before{ counter-increment:st; content:counter(st); position:absolute; left:0; top:-.1em; width:1.9em; height:1.9em; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:900; background:linear-gradient(135deg,var(--ta),var(--tad)); }
.tp-path > li > span{ font-weight:800; font-size:1.05rem; }
.tp-path ul{ margin:.35em 0 0; padding-left:1.1em; line-height:1.5; }
.tp-fig{ display:grid; grid-template-columns:64px 1fr; gap:.8em; align-items:start; margin:.8em 0; }
.tp-fig img{ width:64px; height:64px; border-radius:50%; object-fit:cover; }
.tp-fig b{ display:block; } .tp-fig small{ display:block; color:var(--tp-mute); line-height:1.45; margin-top:.2em; font-size:.9rem; }
.tp-book{ padding:.8em 0; border-top:1px solid rgba(120,110,140,.18); }
.tp-book b{ display:block; font-size:1.02rem; } .tp-book small{ color:var(--tp-mute); } .tp-book p{ margin:.35em 0 0; line-height:1.5; font-size:.93rem; }
.tp-tag{ float:right; font:800 .64rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:.4em .6em; border-radius:999px; color:#fff; background:var(--tad); }
.tp-tag.ramp{ color:var(--tad); background:var(--tas); }
.tp-vid{ margin:1em 0; } .tp-vid b{ display:block; margin-top:.5em; } .tp-vid small{ color:var(--tp-mute); } .tp-vid p{ margin:.3em 0 0; font-size:.92rem; line-height:1.5; }
.tp-vid iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:14px; }
.tp-vid .op-vid-play{ position:relative; display:block; width:100%; padding:0; border:0; border-radius:14px; overflow:hidden; cursor:pointer; aspect-ratio:16/9; }
.tp-vid .op-vid-play img{ width:100%; height:100%; object-fit:cover; display:block; }

.tp-toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); z-index:6000; white-space:nowrap; transform:translate(-50%,40px); opacity:0; display:inline-flex; align-items:center; gap:.4em; padding:.75em 1.1em; border-radius:999px; font:800 .92rem/1 -apple-system,system-ui,sans-serif; color:var(--tp-gold-ink); background:linear-gradient(135deg,var(--tp-gold1),var(--tp-gold2)); box-shadow:0 8px 24px rgba(120,80,0,.3); transition:transform .35s var(--tp-spring), opacity .25s; pointer-events:none; }
.tp-toast.in{ transform:translate(-50%,0); opacity:1; }
@keyframes tpIn{ from{ transform:translateY(8px) scale(.98); opacity:.3 } to{ transform:none; opacity:1 } }
@media (min-width:700px){ .tp-ideas{ grid-auto-columns:34%; } .tp-tiles{ grid-template-columns:1fr 1fr 1fr; } .tp-hero{ border-radius:28px; margin:1em 0 0; min-height:180px; max-height:220px; } }

/* The global button rule centres children (align-items:center, inline-flex) —
   that squashes picture spans to zero width inside card buttons. */
.tp-idea, .tp-tile, .fr-card{ align-items:stretch; justify-content:flex-start; border-radius:20px; font-size:1rem; font-weight:400; letter-spacing:normal; gap:0; }
.tp-tile{ border-radius:18px; } .fr-card{ border-radius:22px; }
.tp-prow{ border-radius:14px; font-size:1rem; font-weight:400; }
.tp-idea::before, .tp-tile::before, .fr-card::before, .tp-prow::before{ border-radius:inherit; }
.tp-prow::before{ display:none; }
.tp-got::before, .tp-next::before, .tp-x::before{ display:none; }
.tp-sheet[hidden]{ display:none; }

/* Group pages (category.html): one big picture card per topic */
.cg-list{ display:flex; flex-direction:column; gap:.9em; }
.cg-card{ position:relative; display:flex; flex-direction:column; border-radius:22px; overflow:hidden; background:var(--tp-card); color:var(--tp-ink); text-decoration:none; box-shadow:0 2px 6px rgba(20,35,60,.08),0 12px 28px color-mix(in srgb,var(--ta) 22%,transparent); transition:transform .25s var(--tp-spring); }
.cg-card::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2.5px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.cg-card:active{ transform:scale(.98); }
.cg-pic{ position:relative; display:block; aspect-ratio:16/9; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.cg-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cg-pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55)); }
.cg-name{ position:absolute; left:16px; bottom:12px; z-index:2; color:#fff; font-weight:900; font-size:1.7rem; letter-spacing:-.03em; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.cg-body{ display:flex; flex-direction:column; gap:.45em; padding:.85em 1.05em 1.05em; }
.cg-tag{ font-size:.95rem; color:var(--tp-mute); line-height:1.4; }
.cg-idea{ font-weight:800; font-size:1.02rem; line-height:1.3; }
.cg-idea b{ display:block; font:800 .66rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--tad); margin-bottom:.3em; }

/* ---- Firsthand additions (v4) ---- */
.tp-sheet-pic{ display:block; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(150deg,var(--ta,#C6811A),var(--tad,#8A5A0F)); }
.tp-sheet-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.fr-another::before, .fh-p-read::before, .fh-p-save::before{ display:none; }
.fr-serif{ font-family:Georgia,'Times New Roman',serif; font-weight:600; font-size:clamp(1.15rem,5vw,1.4rem); line-height:1.3; letter-spacing:-.01em; }
.fh-chips{ display:flex; flex-wrap:wrap; gap:.4em; margin:.8em 0 0; }
.fh-chips span{ padding:.4em .75em; border-radius:999px; font:700 .76rem/1.1 -apple-system,system-ui,sans-serif; color:var(--tad); background:color-mix(in srgb,var(--ta) 16%,var(--tp-card)); }
.fh-chips.in{ margin:0 0 1em; }
.fh-kick{ position:absolute; left:10px; bottom:10px; right:10px; z-index:2; justify-self:start; width:max-content; max-width:calc(100% - 20px); padding:.4em .65em; border-radius:999px; font:800 .62rem/1.1 -apple-system,system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase; color:var(--tad); background:rgba(255,255,255,.94); box-shadow:0 2px 8px rgba(0,0,0,.15); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fh-odd{ grid-auto-columns:56%; }
.tp-tile-pic{ position:relative; }
.fh-gold{ position:absolute; top:8px; right:8px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#F4B82A,#D99A0B); box-shadow:0 2px 8px rgba(0,0,0,.25); }
.tp-tiles > .tp-tile:last-child:nth-child(odd){ grid-column:1 / -1; }
.tp-tiles > .tp-tile:last-child:nth-child(odd) .tp-tile-pic{ aspect-ratio:16/7; }
.fh-next{ margin:1.8em 0 .4em; }
.fh-swipehint{ text-align:center; margin:.2em 0 1.2em; font:700 .78rem -apple-system,system-ui,sans-serif; color:var(--tp-mute); }
.fh-credit{ font-size:.82rem; color:var(--tp-mute); }
.fh-credit a{ color:inherit; }
.fh-serif{ font-family:Georgia,'Times New Roman',serif; font-size:1.12rem; line-height:1.55; }
.tp-why small{ display:block; margin-top:.4em; font:700 .8rem -apple-system,system-ui,sans-serif; color:var(--tp-mute); }
.fh-more{ display:inline-block; margin-top:1.1em; font-weight:800; color:var(--tad); text-decoration:none; }
.fh-literal{ font-family:Georgia,serif; font-style:italic; font-size:1.08rem; color:var(--tad); margin:0 0 .8em; }
.fh-sub{ margin:-.2em 0 .8em; color:var(--tp-mute); font-size:.92rem; }
.fh-h4{ margin:1.3em 0 .5em; font-size:1.05rem; }
.fh-pass{ padding:.9em 0; border-top:1px solid rgba(120,110,140,.18); }
.fh-pass:first-of-type{ border-top:0; }
.fh-pass-ref{ font:800 .72rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--tad); }
.fh-pass-ref.fh-big{ font-size:.85rem; }
.fh-pass .fh-serif{ margin:.45em 0 .6em; }
.fh-pass-btns{ display:flex; gap:.5em; flex-wrap:wrap; }
.fh-pass-btns .tp-next{ padding:.55em .95em; font-size:.85rem; }
.fh-p-save.on{ color:var(--tp-gold-ink); background:linear-gradient(135deg,var(--tp-gold1),var(--tp-gold2)); }
.fh-vp{ margin:0 0 .6em; }
.fh-finds{ list-style:none; margin:1em 0; padding:0; border-left:3px solid var(--ta); }
.fh-finds li{ position:relative; padding:0 0 1em 1.1em; }
.fh-finds li::before{ content:""; position:absolute; left:-8px; top:.3em; width:13px; height:13px; border-radius:50%; background:var(--ta); box-shadow:0 0 0 3px var(--tp-card); }
.fh-finds b{ display:block; font-size:1rem; }
.fh-finds p{ margin:.3em 0 0; line-height:1.55; font-size:.95rem; }
.fh-when{ display:block; font:800 .7rem/1.2 -apple-system,system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--tad); margin-bottom:.2em; }
.tp-sheet .src-list{ margin-bottom:1em; }
/* page turn when swiping along the shelf */
.fh-out-l{ transform:translateX(-24%); opacity:0; transition:transform .17s ease-in, opacity .17s; }
.fh-out-r{ transform:translateX(24%); opacity:0; transition:transform .17s ease-in, opacity .17s; }
.fh-in-r{ animation:fhInR .42s cubic-bezier(0.34,1.56,0.64,1); }
.fh-in-l{ animation:fhInL .42s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes fhInR{ from{ transform:translateX(18%); opacity:.2 } to{ transform:none; opacity:1 } }
@keyframes fhInL{ from{ transform:translateX(-18%); opacity:.2 } to{ transform:none; opacity:1 } }
[data-theme="dark"] .tp-hero img, [data-theme="dark"] .tp-idea-pic img, [data-theme="dark"] .tp-tile-pic img, [data-theme="dark"] .fr-pic img, [data-theme="dark"] .cg-pic img{ filter:brightness(.86) saturate(.94); }
[data-theme="dark"] .fh-chips span{ background:#2A2436; color:#F2EDE4; }
[data-theme="dark"] .fh-kick{ background:rgba(30,26,40,.92); color:#F2EDE4; }
.fr-title{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.fr-title:not(.fr-serif){ font-size:clamp(1.2rem,5.2vw,1.45rem); }

/* ---- Library (v4) ---- */
.lb-shelves{ display:flex; flex-direction:column; gap:.9em; }
.lb-count{ font:800 .78rem -apple-system,system-ui,sans-serif; color:var(--tad); }
.lb-search{ margin:1.4em 0 .8em; }
.lb-search input{ width:100%; box-sizing:border-box; padding:.8em 1em; border-radius:999px; border:1.5px solid rgba(120,110,140,.25); background:var(--tp-card); color:var(--tp-ink); font:500 1rem -apple-system,system-ui,sans-serif; }
.lb-none{ color:var(--tp-mute); text-align:center; }
.lb-bar{ position:sticky; top:calc(env(safe-area-inset-top,0px) + 58px); z-index:20; display:flex; align-items:center; justify-content:space-between; gap:.6em; margin:0 -16px; padding:.6em 16px; background:var(--paper,#FAF6EC); }
.lb-back{ font:800 .9rem -apple-system,system-ui,sans-serif; color:var(--gold-deep,#8A5A0F); text-decoration:none; }
.lb-dots{ display:flex; gap:7px; }
.lb-dots a{ width:9px; height:9px; border-radius:50%; background:rgba(120,110,140,.3); }
.lb-dots a.on{ width:22px; border-radius:6px; background:var(--gold-deep,#C6811A); }
.lb-switch{ width:38px; height:38px; padding:0; border-radius:50%; font-size:1rem; }
.lb-head h1{ margin:.5em 0 .2em; font-size:2rem; font-weight:900; letter-spacing:-.03em; }
.lb-head p{ margin:0 0 1.1em; color:var(--tp-mute); line-height:1.45; }
.lb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.8em; }
.lb-tile{ position:relative; display:flex; flex-direction:column; border-radius:18px; overflow:hidden; background:var(--tp-card); color:var(--tp-ink); text-decoration:none; box-shadow:0 2px 6px rgba(20,35,60,.07),0 8px 20px color-mix(in srgb,var(--ta) 18%,transparent); transition:transform .25s var(--tp-spring); }
.lb-tile::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:2px; z-index:3; pointer-events:none; background:linear-gradient(135deg,var(--ta),var(--tad)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.lb-tile.is-read::before{ background:linear-gradient(135deg,#F4B82A,#D99A0B); padding:3px; }
.lb-tile:active{ transform:scale(.97); }
.lb-pic{ position:relative; display:block; aspect-ratio:1/1; background:linear-gradient(150deg,var(--ta),var(--tad)); overflow:hidden; }
.lb-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lb-new{ position:absolute; left:8px; bottom:8px; z-index:2; padding:.35em .6em; border-radius:999px; font:800 .62rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#7A4E00; background:linear-gradient(135deg,#FFE57A,#FFCE3D); }
.lb-name{ margin:.6em .75em 0; font-weight:800; font-size:1rem; line-height:1.15; }
.lb-sub{ margin:.25em .75em .8em; font-size:.8rem; line-height:1.35; color:var(--tp-mute); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.lb-list{ display:flex; flex-direction:column; gap:.6em; }
.lb-list .lb-tile{ display:grid; grid-template-columns:76px 1fr; grid-template-rows:auto 1fr; column-gap:.8em; }
.lb-list .lb-pic{ grid-row:1 / span 2; aspect-ratio:auto; height:100%; min-height:76px; }
.lb-list .lb-new{ display:none; }
.lb-list .lb-name{ margin:.7em .8em 0 0; } .lb-list .lb-sub{ margin:.2em .8em .7em 0; }
.sec-next{ position:relative; display:flex; flex-direction:column; gap:.2em; margin:1.6em 0 .4em; padding:1em 1.2em; border-radius:18px; text-decoration:none; color:#fff; background:linear-gradient(135deg,var(--ta),var(--tad)); box-shadow:0 10px 24px color-mix(in srgb,var(--ta) 35%,transparent); transition:transform .25s var(--tp-spring); }
.sec-next:active{ transform:scale(.98); }
.sn-k{ font:800 .7rem/1 -apple-system,system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; opacity:.9; }
.sn-n{ font-weight:900; font-size:1.3rem; letter-spacing:-.02em; }
[data-theme="dark"] .lb-bar{ background:rgba(23,20,31,.9); }

/* ---- Questions (v4) ---- */
.qn-line{ display:flex; gap:.45em; overflow-x:auto; margin:1em -16px .3em; padding:.2em 16px .5em; scrollbar-width:none; }
.qn-line::-webkit-scrollbar{ display:none; }
.qn{ flex:none; width:40px; height:40px; padding:0; border-radius:50%; font:900 1rem/1 -apple-system,system-ui,sans-serif; justify-content:center; }
.qn.on{ color:#fff; background:var(--ink,#2A2038); }
.qn.on::before{ display:none; }
.qn-intro{ margin:.4em 0 1.1em; color:var(--tp-mute); line-height:1.5; }
.qn-intro b{ color:var(--tp-ink); }
.qa-list{ display:flex; flex-direction:column; gap:.55em; }
.qa{ position:relative; display:grid; grid-template-columns:72px 1fr; gap:.8em; align-items:center; text-align:left; width:100%; padding:.45em; border-radius:16px; background:var(--tp-card); color:var(--tp-ink); font:inherit; font-size:1rem; font-weight:400; letter-spacing:normal; justify-content:stretch; box-shadow:0 2px 6px rgba(20,35,60,.06); }
.qa::before{ background:linear-gradient(135deg,var(--ta),var(--tad)) !important; padding:1.5px !important; }
.qa.is-got::before{ background:linear-gradient(135deg,#F4B82A,#D99A0B) !important; padding:2.5px !important; }
.qa-pic{ position:relative; width:72px; height:72px; border-radius:12px; overflow:hidden; background:linear-gradient(150deg,var(--ta),var(--tad)); }
.qa-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
.qa-tick{ position:absolute; right:4px; top:4px; width:24px; height:24px; display:none; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(135deg,#F4B82A,#D99A0B); }
.qa.is-got .qa-tick{ display:grid; }
.qa-body b{ display:block; font-size:1rem; }
.qa-body small{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:.2em; color:var(--tp-mute); font-size:.86rem; line-height:1.35; }
.qn-foot{ text-align:center; color:var(--tp-mute); font-size:.88rem; line-height:1.5; margin:1.4em 0; }
.qn-line .qn{ display:grid; place-items:center; }
.qa::before{ content:""; position:absolute; inset:0; border-radius:16px !important; z-index:2; pointer-events:none; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; transform:none !important; }
.qa{ border-radius:16px !important; border:0; }
/* Saved (v4) */
.sv-pic{ float:right; width:64px; height:64px; margin:0 0 .5em .8em; border-radius:12px; overflow:hidden; background:linear-gradient(150deg,var(--c),var(--cd)); }
.sv-pic img{ width:100%; height:100%; object-fit:cover; display:block; }