/* GENERATED by port/extract-assets.py from read.html — do not hand-edit. */

/* — read.html <style id=lbp-feed> — */
@keyframes lbpSlamIn{0%{transform:translateY(-150%) rotate(-3deg);opacity:0}10%{opacity:1}55%{transform:translateY(7px) rotate(1deg)}74%{transform:translateY(-3px) rotate(-.4deg)}100%{transform:none}}
.feed .post.slam-in{animation:lbpSlamIn .55s cubic-bezier(.34,1.45,.5,1) both;position:relative;z-index:3;box-shadow:var(--shadow-2)}
@keyframes lbpDomino{0%{transform:none}28%{transform:translateY(6px) rotate(.9deg)}60%{transform:translateY(-2px) rotate(-.3deg)}100%{transform:none}}
.feed .post.knocked{animation:lbpDomino .42s ease both;position:relative;z-index:2}
.post .newpill{display:inline-block;margin-left:7px;font-size:9px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--orange);padding:1px 6px;border-radius:10px;vertical-align:middle}
.feed .post.read{background:color-mix(in srgb,var(--orange) 2.5%,transparent)}
.feed .post.read:hover{background:color-mix(in srgb,var(--orange) 5%,transparent)}
@media (prefers-reduced-motion:reduce){.feed .post.slam-in,.feed .post.knocked{animation:none!important}}

/* — read.html <style id=reader-css> — */
/* base thread atoms (avatar/op-head/reply meta) come from lbp-thread.css; below = reader-only + option-24 overrides */
.back-link{display:inline-block;font-size:13px;font-weight:700;color:var(--link);margin:2px 0 14px}
.back-link:hover{color:var(--orange)}
/* #89 — the thread ran a ~750px measure pinned hard against the left edge of its
   column, leaving the whole right half of the viewport empty. Same measure,
   centred in the column. */
.reader{max-width:800px;margin-left:auto;margin-right:auto}
.reader .crumb{display:block;margin:0;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--orange)}
.reader .av-anon{display:inline-flex;align-items:center;justify-content:center;background:#5b6b76;color:#fff}
.reader .av-anon svg{width:60%;height:60%}
.reader .rhead .op-badge{display:inline-block;margin:0 6px;font-size:9.5px;font-weight:800;letter-spacing:.04em;color:#fff;background:var(--orange);padding:1px 6px;border-radius:5px;vertical-align:1px}
.reader h1{font-size:30px;line-height:1.12;margin:8px 0 14px;color:var(--ink)}
.reader .lede{font-size:15px;color:var(--ink-soft);margin:-6px 0 22px;max-width:62ch}
.reader .byline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-faint);font-weight:600;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.reader .byline b{color:var(--ink-soft)}
.reader p{font-size:16.5px;line-height:1.72;color:var(--ink);margin:0 0 16px}
.op-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow);margin-bottom:22px}
.mention{color:var(--on-tint);font-weight:700;background:var(--orange-tint);padding:0 4px;border-radius:5px}
.reply-child{border-left:2px solid var(--line)}
.reply .ext{color:var(--orange);font-weight:600;text-decoration:underline}
:root[data-accent="red"]{--spec-base:2deg}
:root[data-accent="green"]{--spec-base:150deg}
:root[data-accent="blue"]{--spec-base:214deg}
:root[data-accent="yellow"]{--spec-base:44deg}
.avatar.uc{background:hsl(calc(var(--spec-base) + (var(--uh) - .5)*var(--spec-range)),52%,52%)!important;color:#fff!important;border:0!important}
.nm.uc-t{color:hsl(calc(var(--spec-base) + (var(--uh) - .5)*var(--spec-range)),58%,46%)}
.op-card p:last-of-type{margin-bottom:0}
.replies-h{font-size:14px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin:6px 2px 12px}
.reply{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;margin-bottom:9px}
.reply .rhead{display:flex;align-items:baseline;gap:9px;margin-bottom:4px}
.reply p{font-size:14.5px;line-height:1.6;margin:0;color:var(--ink-soft)}
.reply.nested{margin-left:32px;border-left:3px solid var(--blue-tint)}
.reply .ctx{font-size:11.5px;color:var(--ink-faint);font-weight:600;margin-bottom:4px}
/* bottom-right actions: reply + up/down votes */
.post-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:13px}
.act-reply{font-family:var(--body);font-size:12.5px;font-weight:700;color:var(--ink-faint);background:none;border:0;cursor:pointer;padding:5px 8px;border-radius:8px;margin-right:auto}
.act-reply:hover{color:var(--blue);background:var(--paper-2)}
/* #86 — ONE vote component across the site: upvote, then count, then downvote.
   thread_view.html (XF) emits the buttons down/count/up, so it read "down 0 up";
   flex `order` fixes the reading order without touching the markup. Never wraps. */
.votes{display:inline-flex;align-items:center;flex-wrap:nowrap;white-space:nowrap;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:3px 5px}
.votes .vbtn.up{order:1}
.votes .vnum{order:2}
.votes .vbtn.down{order:3}
.votes .vbtn{width:25px;height:22px;border:0;background:none;color:var(--ink-faint);cursor:pointer;border-radius:7px;display:grid;place-items:center;font-size:10px;line-height:1;transition:background .12s,color .12s,transform .1s}
.votes .vbtn:hover{color:var(--ink);background:var(--card)}
.votes .vbtn:active{transform:scale(.86)}
/* PALETTE: up was brand-blue and down was brand-orange — the CTA colour reading
   as "negative". Positive = the one green, negative = the one red. */
.votes .vbtn.up.on{color:var(--sem-pos)}
.votes .vbtn.down.on{color:var(--sem-neg)}
.votes .vnum{font-family:var(--display);font-weight:800;font-size:13px;color:var(--ink-soft);min-width:20px;text-align:center}
.votes .vnum.pos{color:var(--sem-pos)} .votes .vnum.neg{color:var(--sem-neg)}
/* inline + bottom composer */
.inline-reply{margin-top:12px;display:none}
.inline-reply.open{display:block}
.inline-reply .ir-name{font-family:var(--body);font-size:13px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:8px 11px;width:210px;max-width:100%;margin-bottom:8px}
.inline-reply textarea{display:block;width:100%;font-family:var(--body);font-size:14px;color:var(--ink);background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-height:66px;resize:vertical}
.inline-reply .ir-name:focus,.inline-reply textarea:focus{outline:none;border-color:var(--blue)}
.inline-reply .ir-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}
.ir-cancel{background:none;border:0;color:var(--ink-faint);font-weight:700;font-size:13px;cursor:pointer;padding:8px 12px}
.ir-post{background:var(--orange);color:#fff;font-weight:700;font-size:13px;border:0;border-radius:9px;padding:8px 18px;cursor:pointer}
.ir-post:hover{background:var(--orange-2)}
/* top picks */
.pick-row{display:flex;align-items:flex-start;gap:15px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.pick-row .rank{font-family:var(--display);font-weight:800;font-size:20px;color:var(--ink-faint);min-width:30px}
.pick-row.top3 .rank{color:var(--orange)}
.pick-row .pmain{flex:1;min-width:0}
.pick-row .pname{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)}
.pick-row .ptag{font-size:11.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;margin-left:8px}
.pick-row .verdict{font-size:14.5px;color:var(--ink-soft);margin:7px 0 9px;line-height:1.55}
.pick-row .verdict .by{color:var(--ink-faint);font-weight:600}
.pick-row .pc{display:flex;gap:8px;flex-wrap:wrap}
.pick-row .pc span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:7px}
/* PALETTE + #103: pro/con were brand-blue vs brand-orange — two brand colours
   standing in for opposite verdicts. One green, one red, plus a glyph so the
   distinction survives when the pair stacks into a single column on mobile. */
.pick-row .pc .pro{color:var(--sem-pos);background:var(--sem-pos-tint)}
.pick-row .pc .con{color:var(--sem-neg);background:var(--sem-neg-tint)}
.pick-row .pc .pro::before{content:"\2713 ";font-weight:800}
.pick-row .pc .con::before{content:"\2715 ";font-weight:800}
.pick-row .rate{flex:0 0 auto;text-align:center}
.pick-row .rate .num{font-family:var(--display);font-weight:800;font-size:22px;color:var(--ink);line-height:1}
.pick-row .rate .stars{font-size:11px;color:var(--orange);letter-spacing:1px}
.pick-row .rate .rev{font-size:11px;color:var(--ink-faint);margin-top:2px}
/* hot list */
.hot-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 16px;margin-bottom:8px;box-shadow:var(--shadow)}
.hot-row:hover{border-color:var(--orange)}
.hot-row .flame{font-size:18px;flex:0 0 auto}
.hot-row .hmain{flex:1;min-width:0}
.hot-row .htitle{font-family:var(--display);font-weight:700;font-size:16px;color:var(--ink);line-height:1.25}
.hot-row .hmeta{font-size:12px;color:var(--ink-faint);font-weight:600;margin-top:3px;display:flex;gap:12px;flex-wrap:wrap}
.hot-row .heat{flex:0 0 auto;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--on-tint);background:var(--orange-tint);border:1px solid var(--orange);padding:4px 10px;border-radius:20px}
@media(max-width:560px){.pick-row .rate{order:-1}.hot-row .heat{display:none}}

/* — read.html <style id=reader24> — */
/* Reader = nesting option 24: one white thread card, OP highlighted (larger, medium weight) + divider split, two-tone connection rail through replies */
.reader .thread-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;box-shadow:var(--shadow)}
.reader .thread-card .op-card{background:none;border:0;box-shadow:none;border-radius:0;padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--line)}
.reader .thread-card .op-card p{font-size:18px;font-weight:500;line-height:1.62;color:var(--ink)}
.reader .thread-card .replies-h{margin:0 2px 12px}
.reader #replyList{margin:0 0 0 1px;padding-left:16px;border-left:3px solid color-mix(in srgb,var(--orange) 32%,var(--line))}
.reader #replyList > .rnode + .rnode{border-top:1px solid var(--line)}
.reader .rnode .rkids{margin:0 0 0 16px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--orange) 22%,var(--line))}
.reader .thread-card .reply{background:none;border:0;border-radius:0;padding:11px 0 9px;margin:0}
.reader .thread-card .reply.reply-child{border-left:0}
.reader .thread-card .reply.nested{margin-left:0}
.reader .thread-card .ctx{display:none}
.reader #rf{margin-top:18px}

/* — read.html <style id=reader-chrome-extra> — */
.navrail{align-self:start}
#topCards{display:none;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:22px}