*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --green:#22c55e;--green-hot:#2bff7a;--bg:#070708;--surface:#0e0e10;
  --surface-2:#131316;--border:rgba(255,255,255,0.08);
  --border-green:rgba(34,197,94,0.35);--text:#f5f5f4;--muted:#9b9b97;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --display:'Archivo',system-ui,sans-serif;--body:'Inter',system-ui,sans-serif;
  --radius:16px;--maxw:1440px;--colw:500px;
}
::selection{background:var(--green);color:#050505}
html,body{background:var(--bg);color:var(--text);font-family:var(--body);min-height:100vh;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);letter-spacing:-0.025em}
a{color:var(--green);text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem)}
nav{position:sticky;top:0;z-index:100;background:rgba(7,7,8,0.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0.9rem clamp(1.25rem,4vw,2.5rem);display:flex;align-items:center;justify-content:space-between;gap:1.2rem}
.brand{display:flex;align-items:center;gap:0.6rem;font-family:var(--display);font-weight:900;font-size:1.15rem;color:var(--text)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green)}
.home-logo{display:flex;align-items:center}
.home-logo img{height:20px;width:auto;filter:brightness(0) invert(1);opacity:0.9;display:block;transition:opacity .2s}
.home-logo:hover img{opacity:1}
.brand-sep{color:var(--muted);opacity:0.45;font-weight:400}
.nav-sub{font-family:var(--mono);font-size:0.66rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted)}
header{position:relative;padding:clamp(1.6rem,3.2vw,2.4rem) 0 clamp(1.1rem,2vw,1.5rem)}
header::before{content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);width:min(900px,100vw);height:420px;background:radial-gradient(ellipse at center,rgba(34,197,94,0.09),transparent 65%);pointer-events:none}
.kicker{font-family:var(--mono);font-size:0.66rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--green);margin-bottom:0.8rem;position:relative}
header h1{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:900;line-height:1.04;position:relative}
header h1 .hl{color:var(--green)}
.lead{margin-top:.75rem;max-width:var(--colw);color:var(--muted);line-height:1.55;font-size:0.96rem;position:relative}
.layout{display:grid;grid-template-columns:var(--colw) 1fr;gap:1.6rem;padding-bottom:5rem;align-items:start}
.layout>*{min-width:0}/* let grid columns shrink so long URLs wrap instead of overflowing */
@media(max-width:880px){.layout{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
/* NOT sticky: the composer is taller than the viewport, so pinning it
   strands its lower half off-screen while the results column scrolls by. */
.panel{}
label{display:block;font-family:var(--mono);font-size:0.68rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--muted);margin:0 0 0.4rem}
.field{margin-bottom:1.05rem}
input,textarea{width:100%;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:0.6rem 0.75rem;font-family:var(--body);font-size:0.92rem;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--border-green);box-shadow:0 0 0 3px rgba(34,197,94,0.12)}
textarea{min-height:96px;line-height:1.5}
.hint{font-size:0.72rem;color:var(--muted);margin-top:0.35rem}
.counter{float:right;font-family:var(--mono);font-size:0.62rem;font-weight:600;color:var(--muted);text-transform:none;letter-spacing:0}
.counter::after{content:" chars"}
.counter.warn{color:#fbbf24}
.ai-row{display:flex;gap:0.45rem;margin-top:0.5rem;flex-wrap:wrap;align-items:center}
.ai-btn{font-family:var(--mono);font-size:0.7rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border-green);color:var(--green);padding:0.35rem 0.7rem;border-radius:8px;cursor:pointer;transition:background .2s,transform .15s}
.ai-btn:hover{background:rgba(34,197,94,0.1);transform:translateY(-1px)}
.ai-btn:disabled{opacity:0.5;cursor:default;transform:none}
.ai-undo{font-family:var(--mono);font-size:0.7rem;background:none;border:none;color:var(--muted);cursor:pointer;text-decoration:underline}
.ai-btn.sm{float:right;padding:0.2rem 0.5rem;font-size:0.62rem}
/* ── animated demo ─────────────────────────────────────────────────────────
   The page performs the product on arrival: types the example, then the
   variants cascade in. Any keypress/tap cancels it (see stopDemo in app.js).
   All of it is disabled under prefers-reduced-motion. */
.demo-running #f-title, .demo-running #f-summary{
  border-color:var(--accent,#22c55e);
  box-shadow:0 0 0 2px rgba(34,197,94,.14)}
.demo-running #f-title::after{content:"";display:inline-block;width:2px;height:1em;
  background:var(--accent,#22c55e);animation:cf-caret .9s steps(1) infinite}
@keyframes cf-caret{50%{opacity:0}}
.demo-running .demo-hint{opacity:1;transform:translateY(0)}
.demo-hint{position:sticky;top:.5rem;z-index:5;opacity:0;transform:translateY(-6px);
  transition:opacity .25s ease,transform .25s ease;pointer-events:none;
  font-size:.74rem;color:var(--accent,#22c55e);letter-spacing:.02em;margin-bottom:.4rem}
#results .post{animation:cf-rise .42s cubic-bezier(.2,.7,.3,1) both}
#results .post:nth-child(2){animation-delay:.04s}
#results .post:nth-child(3){animation-delay:.12s}
#results .post:nth-child(4){animation-delay:.20s}
#results .post:nth-child(5){animation-delay:.28s}
#results .post:nth-child(6){animation-delay:.36s}
#results .post:nth-child(n+7){animation-delay:.44s}
@keyframes cf-rise{from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #results .post{animation:none}
  .demo-running #f-title::after{animation:none}
  .demo-hint{transition:none}
}
/* hero: copy left, explainer video right. Stacks on narrow screens, and the
   video is dropped entirely under 700px — a 890KB autoplay is not worth it on
   a phone where the live demo below tells the same story. */
.hint,.field .hint,.help{line-height:1.4}
.hero-grid{display:grid;grid-template-columns:minmax(0,var(--colw));
  gap:1.6rem;align-items:center}
.hero-media{min-width:0;max-width:720px}
.hero-video{width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--line,#1b2430);box-shadow:0 24px 70px rgba(0,0,0,.5);background:#080a0d}
.hero-media-cap{margin-top:.6rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:var(--muted,#7d8da1);letter-spacing:.03em;text-align:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:1.8rem}}
/* 2026-07-28: was display:none below 700px, on the assumption the video was too
   heavy for mobile. That was based on the 890KB mp4 — the WebM is 340KB, which is
   fine on a phone, and the target user is mobile-heavy. Show it everywhere; just
   cap the height so it doesn't push the CTA off a small screen. */
@media(max-width:700px){.hero-video{max-height:46vh;object-fit:cover}
  .hero-media-cap{font-size:.68rem}}
.hero-cta{margin-top:1.1rem;display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.hero-btn{background:var(--accent,#22c55e);color:#06210f;border:0;border-radius:8px;
  padding:.85rem 1.5rem;font-size:1rem;font-weight:700;cursor:pointer;letter-spacing:.01em}
.hero-btn:hover{filter:brightness(1.08)}
.hero-cta-note{font-size:.76rem;color:var(--muted,#7d8da1)}
@media(max-width:640px){.hero-btn{width:100%;text-align:center}}
.ex-row{margin-bottom:1rem}
.ex-row .ai-btn{width:100%;padding:0.5rem;font-size:0.74rem}
.results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.2rem}
.results-head .rh-count{font-family:var(--mono);font-size:0.72rem;color:var(--muted)}
.thread{margin-top:0.6rem;display:flex;flex-direction:column;gap:0.5rem}
.thread-note{font-size:0.72rem;color:var(--muted);font-family:var(--mono)}
.tw{background:#0b0b0d;border:1px solid var(--border);border-radius:10px;padding:0.6rem 0.75rem}
.tw-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.35rem}
.tw-n{font-family:var(--mono);font-size:0.66rem;font-weight:700;color:var(--green)}
.tw-len{font-family:var(--mono);font-size:0.62rem;color:var(--muted);margin-left:auto}
.tw-t{font-size:0.84rem;line-height:1.45;white-space:pre-wrap}
.remind{font-family:var(--mono);font-size:0.66rem;color:var(--green);text-decoration:none;margin-left:0.6rem}
.remind:hover{text-decoration:underline}
/* ── mobile polish ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  input, textarea { font-size: 16px; }       /* >=16px stops iOS zoom-on-focus */
  .panel { position: static; }               /* don't sticky the form on phones */
  .authnav .who { display: none; }           /* email overflows the bar on phones */
  .authnav { gap: 0.55rem; font-size: 0.8rem; }
  /* keep the Gordon logo + Crossfire + auth on one tidy line */
  .nav-inner { padding: 0.7rem 0.95rem; gap: 0.5rem; }
  .brand { font-size: 1rem; gap: 0.4rem; }
  .home-logo img { height: 16px; }
  .authnav a, .authnav button, .authnav .pill { white-space: nowrap; }
  .authnav .pill { padding: 0.3rem 0.7rem; }
  .post-top { flex-wrap: wrap; row-gap: 0.3rem; }
  .reach { margin-left: 0; }
  .layout { gap: 1.1rem; }
  .post-actions .act { flex: 1 1 auto; text-align: center; }  /* full-width tap targets */
  .gen-row { flex-direction: column; }
  .gen-row .btn-2 { width: 100%; }
  .pv-acts { gap: 1rem; }
}
.ai-status{font-size:0.7rem;color:var(--muted);margin-top:0.4rem;min-height:0.9rem;font-family:var(--mono)}
.reach{display:flex;align-items:center;gap:0.4rem;margin-left:auto;font-family:var(--mono);font-size:0.66rem;color:var(--muted)}
.reach b{color:var(--green)}
.bar{display:inline-block;width:42px;height:5px;border-radius:3px;background:var(--border);overflow:hidden;vertical-align:middle}
.bar i{display:block;height:100%;background:var(--green)}
.fc{margin-top:0.55rem;background:#0b0b0d;border:1px dashed var(--border-green);border-radius:8px;padding:0.5rem 0.65rem;font-size:0.76rem;color:var(--muted);display:flex;align-items:center;gap:0.5rem}
.fc code{color:var(--text);font-family:var(--mono);font-size:0.72rem;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc .act{padding:0.25rem 0.6rem;font-size:0.68rem}
.btime{font-family:var(--mono);font-size:0.66rem;color:var(--muted);margin-top:0.45rem}
.checks{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.5rem}
.chk{font-family:var(--mono);font-size:0.62rem;padding:0.12rem 0.4rem;border-radius:100px;border:1px solid var(--border)}
.chk.on{color:var(--green);border-color:var(--border-green)}
.chk.off{color:var(--muted);opacity:0.6}
.platsel{display:flex;flex-direction:column;align-items:stretch;gap:0.65rem}
.platsel-row{display:flex;flex-wrap:wrap;gap:0.4rem}
.plat-group{}
.plat-glabel{font-family:var(--mono);font-size:0.57rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);opacity:0.65;margin-bottom:0.35rem}
.qsel-row{display:inline-flex;gap:0.3rem;margin-left:0.5rem;vertical-align:middle}
.qsel{font-family:var(--mono);font-size:0.6rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border);color:var(--muted);padding:0.16rem 0.5rem;border-radius:7px;cursor:pointer;text-transform:none;letter-spacing:0;transition:border-color .2s,color .2s}
.qsel:hover{border-color:var(--border-green);color:var(--green)}
.pchip{font-family:var(--mono);font-size:0.7rem;font-weight:600;background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:0.34rem 0.7rem;border-radius:100px;cursor:pointer;user-select:none;transition:all .15s}
.pchip.on{background:var(--green);border-color:transparent;color:#050505}
.pchip .m{opacity:0.7;margin-left:0.2rem}
.media-tray{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.6rem}
.media-thumb{position:relative;width:74px;height:74px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#0b0b0d}
.media-thumb img,.media-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.media-thumb .vbadge{position:absolute;left:4px;bottom:4px;font-size:0.6rem;font-family:var(--mono);background:rgba(0,0,0,.6);color:#fff;padding:0 4px;border-radius:4px}
.media-thumb .x{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,.7);color:#fff;cursor:pointer;font-size:11px;line-height:1}
.post-media{display:flex;gap:0.5rem;flex-wrap:wrap;margin:0.5rem 0}
.post-media .media-thumb{width:62px;height:62px}
.media-need{margin:0.5rem 0;font-size:0.76rem;color:#fbbf24;font-family:var(--mono)}
.authnav{display:flex;align-items:center;gap:0.8rem;font-size:0.85rem}
.authnav .who{color:var(--muted);font-family:var(--mono);font-size:0.74rem}
.authnav a,.authnav button{cursor:pointer;background:none;border:none;color:var(--text);font-family:var(--body);font-size:0.85rem;font-weight:600;text-decoration:none}
.authnav .pill{background:var(--green);color:#050505;border-radius:100px;padding:0.34rem 0.85rem;font-family:var(--display);font-weight:800;font-size:0.8rem}
.authnav a:hover,.authnav button:hover{color:var(--green)}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:1000;align-items:center;justify-content:center;padding:1.5rem}
.modal.on{display:flex}
.modal-card{position:relative;width:100%;max-width:380px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem}
.modal-card h2{font-size:1.5rem;font-weight:900;margin-bottom:0.4rem}
.auth-sub{color:var(--muted);font-size:0.86rem;line-height:1.5;margin-bottom:1.2rem}
.modal-x{position:absolute;top:0.9rem;right:0.9rem;background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.95rem}
.modal-x:hover{color:var(--text)}
.auth-toggle{margin-top:1rem;font-size:0.82rem;color:var(--muted);text-align:center}
.auth-toggle a{color:var(--green);text-decoration:none;font-weight:600}
.act.locked{opacity:0.6}
.act.locked::after{content:" 🔒";font-size:0.7em}
.verify-bar{background:rgba(251,191,36,0.12);border-bottom:1px solid rgba(251,191,36,0.3);color:#fbbf24;font-size:0.84rem;text-align:center;padding:0.55rem 1rem}
.verify-bar a{color:#fbbf24;font-weight:700;text-decoration:underline;margin-left:0.4rem}
#verify-msg{color:var(--muted);margin-left:0.5rem}
.gen-row{display:flex;gap:0.6rem}
.gen-row .btn{flex:1}
.btn-2{background:var(--surface-2);color:var(--text);border:1px solid var(--border);font-family:var(--display);font-weight:700;font-size:0.9rem;padding:0.8rem 1rem;border-radius:11px;cursor:pointer;transition:border-color .2s,transform .15s}
.btn-2:hover{border-color:var(--border-green);transform:translateY(-2px)}
.modal-card.wide{max-width:520px}
.hist-list{display:flex;flex-direction:column;gap:0.5rem;max-height:60vh;overflow-y:auto}
.hist-empty{color:var(--muted);font-size:0.86rem;text-align:center;padding:2rem 1rem}
.hist-item{display:flex;align-items:center;gap:0.7rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:0.7rem 0.85rem}
.hist-item:hover{border-color:var(--border-green)}
.hist-main{flex:1;min-width:0;cursor:pointer}
.hist-title{font-weight:600;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-meta{font-family:var(--mono);font-size:0.66rem;color:var(--muted);margin-top:0.15rem}
.hist-load{font-family:var(--mono);font-size:0.7rem;font-weight:600;background:var(--green);color:#050505;border:none;padding:0.35rem 0.7rem;border-radius:7px;cursor:pointer}
.hist-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:0.9rem}
.hist-del:hover{color:#f87171}
.lead-card{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:0.85rem 0.95rem;margin-bottom:0.6rem}
.lead-top{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.4rem}
.lead-src{font-family:var(--mono);font-size:0.62rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--green);border:1px solid var(--border-green);border-radius:100px;padding:0.1rem 0.5rem}
.lead-title{font-weight:600;font-size:0.9rem;flex:1;min-width:0}
.lead-title a{color:var(--text)}
.lead-title a:hover{color:var(--green)}
.lead-snippet{color:var(--muted);font-size:0.82rem;line-height:1.5;margin-bottom:0.5rem;max-height:4.5em;overflow:hidden}
.lead-reply{width:100%;min-height:70px;margin-bottom:0.5rem}
.lead-acts{display:flex;gap:0.5rem;flex-wrap:wrap}
.lead-acts button{font-family:var(--mono);font-size:0.68rem;font-weight:600;background:var(--surface-2);border:1px solid var(--border);color:var(--text);padding:0.3rem 0.6rem;border-radius:7px;cursor:pointer}
.lead-acts button:hover{border-color:var(--border-green);color:var(--green)}
.lead-acts .lead-copy{border-color:var(--border-green);color:var(--green)}
.btn{width:100%;background:var(--green);color:#050505;border:none;font-family:var(--display);font-weight:800;font-size:0.98rem;padding:0.8rem;border-radius:11px;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);background:var(--green-hot);box-shadow:0 10px 28px rgba(34,197,94,0.28)}
#instanceField{display:none}
.results-col{min-width:0}
.results{display:flex;flex-direction:column;gap:1rem;min-height:200px}
.empty{color:var(--muted);text-align:center;padding:3.5rem 1rem;border:1px dashed var(--border);border-radius:var(--radius);font-size:0.95rem}
.guide{border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.8rem;background:linear-gradient(180deg,rgba(34,197,94,0.04),transparent 60%)}
.guide-head{font-family:var(--mono);font-size:0.72rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--green);margin:0 0 0.7rem}
.guide-intro{color:var(--muted);font-size:0.9rem;line-height:1.55;margin:0 0 1.1rem}
.guide-intro b{color:var(--green)}
.guide-head:not(:first-child){margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--border)}
.steps{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:0.6rem;counter-reset:s}
.steps li{color:var(--muted);font-size:0.92rem;line-height:1.55}
.steps li b{color:var(--text)}
.legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.55rem}
.legend li{color:var(--muted);font-size:0.88rem;line-height:1.5;display:flex;gap:0.6rem;align-items:baseline;flex-wrap:wrap}
.lg{font-family:var(--mono);font-size:0.7rem;font-weight:600;padding:0.16rem 0.5rem;border-radius:7px;border:1px solid var(--border);color:var(--text);white-space:nowrap}
.lg.reach{color:var(--muted)}.lg.reach b{color:var(--green)}
.lg.chip{color:var(--green);border-color:var(--border-green)}
.lg.green{background:var(--green);color:#050505;border-color:transparent}
.lg.purple{background:#8b5cf6;color:#fff;border-color:transparent}
.post{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;transition:border-color .2s}
.post:hover{border-color:var(--border-green)}
.post-top{display:flex;align-items:center;gap:0.6rem;margin-bottom:0.7rem}
.plabel{font-family:var(--display);font-weight:800;font-size:1rem}
.pcat{font-family:var(--mono);font-size:0.6rem;font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--border);padding:0.12rem 0.45rem;border-radius:100px}
.count{margin-left:auto;font-family:var(--mono);font-size:0.72rem;color:var(--muted)}
.count.over{color:#f87171}
.post textarea{font-size:0.86rem;background:#0b0b0d;min-height:auto;height:120px}
/* ── platform-accurate post previews ──────────────────────────────────────── */
.pv-feed{background:#fff;color:#0f1419;border-radius:14px;padding:0.9rem 1rem;font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
.pv-head{display:flex;align-items:flex-start;gap:0.6rem;margin-bottom:0.55rem}
.pv-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#0ea5e9);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:1rem}
.pv-id{display:flex;flex-direction:column;min-width:0}
.pv-name{font-weight:700;font-size:0.92rem;display:flex;align-items:center;gap:0.25rem;color:#0f1419}
.pv-handle{color:#536471;font-size:0.8rem}
.pv-sub{color:#536471;font-size:0.78rem;line-height:1.3}
.pv-more{margin-left:auto;color:#8899a6;font-weight:700}
.pv-vchk{color:#1d9bf0;font-size:0.8rem}
.pv-body{font-size:0.95rem;line-height:1.45;word-wrap:break-word;color:#0f1419}
.pv-empty{opacity:.5}
.pv-media{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.7rem}
.pv-media img,.pv-media video{width:100%;max-height:230px;object-fit:cover;border-radius:14px;border:1px solid #e1e8ed}
.pv-acts{display:flex;gap:1.4rem;margin-top:0.85rem;color:#536471;font-size:0.82rem}
.pv-acts span{display:inline-flex;align-items:center;gap:0.2rem}
.pv-x .pv-av{background:#1d1d1f}
.pv-threads .pv-av{background:#000}
.pv-bluesky .pv-av{background:#1185fe}.pv-bluesky .pv-handle{color:#1185fe}
.pv-mastodon .pv-av{background:#6364ff}
.pv-li .pv-av{background:#0a66c2}
.pv-li-react{margin-top:0.7rem;padding-top:0.5rem;border-top:1px solid #e9e9e9;color:#536471;font-size:0.78rem}
.pv-li-acts{gap:0.6rem;justify-content:space-between;border-top:1px solid #e9e9e9;padding-top:0.55rem;margin-top:0.55rem;font-weight:600}
.pv-fb .pv-av{background:#1877f2}
.pv-fb-react{margin-top:0.6rem;color:#65676b;font-size:0.8rem}
.pv-fb-acts{gap:0.6rem;justify-content:space-between;border-top:1px solid #e9e9e9;padding-top:0.5rem;margin-top:0.5rem;font-weight:600;color:#65676b}
.pv-ig{background:#fff;color:#0f1419;border-radius:14px;overflow:hidden;font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
.pv-ig-top{display:flex;align-items:center;gap:0.55rem;padding:0.7rem 0.85rem}
.pv-ig-av{width:32px;height:32px;font-size:0.85rem;background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af)}
.pv-ig-top .pv-name{font-size:0.86rem}
.pv-ig-media{aspect-ratio:1/1;background:#fafafa;border-top:1px solid #efefef;border-bottom:1px solid #efefef;display:flex;align-items:center;justify-content:center}
.pv-ig-media img,.pv-ig-media video{width:100%;height:100%;object-fit:cover}
.pv-ig-ph{color:#8e8e8e;font-size:0.9rem}
.pv-ig-acts{display:flex;gap:1rem;font-size:1.15rem;padding:0.6rem 0.85rem 0.2rem}
.pv-ig-save{margin-left:auto}
.pv-ig-likes{font-weight:700;font-size:0.85rem;padding:0 0.85rem}
.pv-ig-cap{font-size:0.9rem;line-height:1.4;padding:0.3rem 0.85rem;color:#0f1419}
.pv-ig-cmts{color:#8e8e8e;font-size:0.84rem;padding:0.2rem 0.85rem 0.8rem}
.pv-tt{display:flex;justify-content:center}
.pv-tt-frame{position:relative;width:208px;aspect-ratio:9/16;background:#000;border-radius:12px;overflow:hidden;color:#fff}
.pv-tt-frame video{width:100%;height:100%;object-fit:cover}
.pv-tt-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#888;background:#111}
.pv-tt-rail{position:absolute;right:8px;bottom:64px;display:flex;flex-direction:column;align-items:center;gap:0.85rem}
.pv-tt-av{width:34px;height:34px;border:2px solid #fff}
.pv-tt-a{display:flex;flex-direction:column;align-items:center;font-size:1.2rem}
.pv-tt-a span{font-size:0.6rem;margin-top:2px}
.pv-tt-cap{position:absolute;left:10px;right:54px;bottom:10px;font-size:0.78rem;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.pv-rd{display:flex;background:#fff;color:#1a1a1b;border:1px solid #ccc;border-radius:8px;overflow:hidden;font-family:-apple-system,'Segoe UI',Roboto,sans-serif}
.pv-rd-vote{display:flex;flex-direction:column;align-items:center;gap:0.25rem;background:#f8f9fa;padding:0.6rem 0.5rem;color:#878a8c;font-size:0.9rem}
.pv-rd-up{color:#ff4500}
.pv-rd-score{font-weight:700;color:#1a1a1b;font-size:0.8rem}
.pv-rd-main{padding:0.6rem 0.8rem;min-width:0}
.pv-rd-sub{color:#787c7e;font-size:0.74rem;margin-bottom:0.3rem}
.pv-rd-title{font-weight:600;font-size:1.02rem;line-height:1.25;margin-bottom:0.35rem;color:#222}
.pv-rd-body{font-size:0.9rem;line-height:1.45;color:#1a1a1b}
.pv-rd-acts{display:flex;gap:1rem;margin-top:0.6rem;color:#878a8c;font-size:0.78rem;font-weight:700}
.pv-hn{background:#f6f6ef;color:#000;border-radius:6px;padding:0.7rem 0.85rem;font-family:Verdana,Geneva,sans-serif}
.pv-hn-row{font-size:0.95rem;line-height:1.3}
.pv-hn-vote{color:#999;margin-right:0.3rem}
.pv-hn-title{color:#000}
.pv-hn-domain{color:#828282;font-size:0.78rem}
.pv-hn-meta{color:#828282;font-size:0.78rem;margin-top:0.25rem;margin-left:1rem}
.pv-tg{background:#0e1621;padding:1rem;border-radius:14px;display:flex;justify-content:flex-end}
.pv-tg-bubble{background:#2b5278;color:#fff;border-radius:14px 14px 4px 14px;padding:0.55rem 0.75rem;max-width:85%;font-size:0.92rem;line-height:1.45}
.pv-tg-time{display:block;text-align:right;font-size:0.66rem;color:#a8c7e0;margin-top:0.2rem}
.pv-tg-chk{color:#5fd0f3}
.pv-art{background:#fff;color:#1a1a1a;border-radius:12px;padding:1rem 1.1rem;font-family:Georgia,'Times New Roman',serif}
.pv-art-head{display:flex;align-items:center;gap:0.55rem;margin-bottom:0.7rem;font-family:-apple-system,sans-serif}
.pv-art-head .pv-av{width:34px;height:34px;font-size:0.85rem}
.pv-art-head .pv-name{font-size:0.85rem}
.pv-art-head .pv-sub{font-size:0.76rem}
.pv-art-title{font-size:1.25rem;font-weight:700;line-height:1.25;margin-bottom:0.5rem;color:#1a1a1a}
.pv-art-excerpt{font-size:0.95rem;line-height:1.55;color:#444}
.pv-devto{font-family:-apple-system,'Segoe UI',Roboto,sans-serif;border:1px solid #d6d6d7}
.pv-devto .pv-art-title{font-weight:800}
.post-actions{display:flex;gap:0.5rem;margin-top:0.7rem;flex-wrap:wrap}
.act{font-family:var(--mono);font-size:0.74rem;font-weight:600;border:1px solid var(--border);background:var(--surface-2);color:var(--text);padding:0.42rem 0.85rem;border-radius:8px;cursor:pointer;transition:border-color .2s,background .2s}
.act:hover{border-color:var(--border-green)}
.act.open{background:var(--green);color:#050505;border-color:transparent}
.act.open:hover{background:var(--green-hot)}
.warns{margin-top:0.5rem;font-size:0.72rem;color:#fbbf24;font-family:var(--mono)}
.note{font-size:0.72rem;color:var(--muted);margin-top:0.5rem}
/* ── networks table + what's new ─────────────────────────────────────────── */
.networks{padding:0 clamp(1.25rem,4vw,2.5rem) 4.5rem;border-top:1px solid var(--border);padding-top:3rem}
.networks h2{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:900;margin-bottom:.6rem}
.networks .lead{max-width:720px}
.nt-wrap{margin-top:1.6rem;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.nt{width:100%;border-collapse:collapse;min-width:720px;font-size:0.86rem}
.nt th{font-family:var(--mono);font-size:0.64rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);text-align:left;padding:0.85rem 1rem;border-bottom:1px solid var(--border);background:var(--surface-2)}
.nt td{padding:0.7rem 1rem;border-bottom:1px solid var(--border);color:var(--muted);line-height:1.45;vertical-align:top}
.nt td:first-child{color:var(--text);font-weight:600;white-space:nowrap}
.nt tbody tr:last-child td{border-bottom:none}
.nt tbody tr:hover td{background:rgba(34,197,94,0.04)}
.whatsnew{margin-top:1.8rem;border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.8rem;background:linear-gradient(180deg,rgba(34,197,94,0.04),transparent 60%)}
.legend.wn li{align-items:flex-start}
.legend.wn .lg{margin-top:0.15rem}
@media(max-width:640px){.networks{padding-top:2.2rem;padding-bottom:3rem}.nt{font-size:0.8rem}.whatsnew{padding:1.2rem 1.1rem}}
footer{border-top:1px solid var(--border);padding:2rem 0;color:var(--muted);font-size:0.84rem}
.foot-tag{font-family:var(--mono);font-size:0.68rem;letter-spacing:0.06em}

a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid #2bff7a;outline-offset:2px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--green);color:#050505;padding:0.75rem 1.25rem;border-radius:0 0 8px 0;font-weight:700}
.skip-link:focus{left:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}