/* Agorai — design direction A: m8k navy, emerald, a color for every square. */
:root{
  /* Sunrise (2026-10-13): coral accent, deep ink grounds, a gold glow. Every colour below is used by
     name across the stylesheet, so a palette change (or the light theme) is made here and nowhere else. */
  --bg:#150d26; --panel:#1b1033; --panel2:#201339; --line:#2f2249; --line2:#3b2c57;
  --text:#ece6f3; --strong:#fbf8fd; --muted:#b5a9c6; --faint:#a597b9;
  --accent:#ff6a3d; --accent-rgb:255,106,61; --accent-ink:#1b1033; --accent-soft:#ffd9cc; --ai-bg:#2a1209;
  --gold:#ffd23f; --glow-rgb:255,210,63;
  --raise1:#24183f; --raise0:#1c1131; --chip:#362852; --ring:#4f3f6e; --hero-btn2:#2a1c48; --hero-btn2-hover:#33245a;
  --ink-text:#170e2a; --ink-soft:#3e2f5a;            /* dark text on the white input boxes */
  --media:#0a0612;                                   /* behind photos and videos */
  --panel-rgb:27,16,51; --bar-rgb:20,11,36; --scrim-rgb:9,5,16;
  --cover-a:#3b1a14; --cover-b:#24183f;
  --hi:#fbf8fd; --soft-text:#c4b9d3; --input-text:#f3eef8; --avatar-text:#e6def0; --link:#ffc9b3;
  --prose:#e8e1f0; --ref:#e8c968; --ref-rgb:232,201,104; --ref-hover:#f5dc8a;
  --prose-link:#ffab8a; --prose-link-rgb:255,171,138; --prose-link-hover:#ffd2c0; --mention:#ffc9b3;
  --hl-rgb:255,255,255; --field-border:rgba(255,255,255,.6); --sq-filter:none;
  --warn:#fbbf24; --warn-soft:#fcd34d; --danger:#f87171; --danger-soft:#fca5a5; --rss:#f59e42; --switch-off:#3a4558;
  --serif:'Newsreader', Georgia, serif; --sans:'Geist', system-ui, -apple-system, sans-serif;
}
/* Light theme (preview only until a switch exists): warm paper, ink text, a deeper coral that reads
   on white. Media backgrounds and scrims stay dark. */
:root[data-theme="light"]{
  --bg:#fbf7f3; --panel:#ffffff; --panel2:#f6f0ea; --line:#e8ded5; --line2:#dccfc3;
  --text:#2a2140; --strong:#1b1033; --muted:#5f5573; --faint:#6e6482;
  --accent:#c4461f; --accent-rgb:196,70,31; --accent-ink:#ffffff; --accent-soft:#8a2f12; --ai-bg:#fff1ea;
  --gold:#b98a00; --glow-rgb:255,170,110;
  --raise1:#ffffff; --raise0:#f8f2ec; --chip:#ece4f2; --ring:#cbbfd6; --hero-btn2:#f1e9f6; --hero-btn2-hover:#e8ddf0;
  --panel-rgb:255,255,255; --bar-rgb:255,252,249;
  --cover-a:#ffd9cc; --cover-b:#f3e6f7;
  --hi:#1b1033; --soft-text:#4f4566; --input-text:#2a2140; --avatar-text:#3b2c57; --link:#b33e1a;
  --prose:#2a2140; --ref:#8a6400; --ref-rgb:138,100,0; --ref-hover:#5e4400;
  --prose-link:#b33e1a; --prose-link-rgb:179,62,26; --prose-link-hover:#7d2a10; --mention:#8a2f12;
  --hl-rgb:27,16,51; --field-border:#dccfc3; --sq-filter:brightness(.62) saturate(1.25);
  --warn:#a16207; --warn-soft:#8a6400; --danger:#c0262d; --danger-soft:#b42318; --rss:#c2410c; --switch-off:#cbbfd6;
}
/* "Auto" in Settings: the light palette when the device asks for light. MUST match the block above
   exactly (tests/theme.test.mjs checks). */
@media (prefers-color-scheme: light){
:root[data-theme="auto"]{
  --bg:#fbf7f3; --panel:#ffffff; --panel2:#f6f0ea; --line:#e8ded5; --line2:#dccfc3;
  --text:#2a2140; --strong:#1b1033; --muted:#5f5573; --faint:#6e6482;
  --accent:#c4461f; --accent-rgb:196,70,31; --accent-ink:#ffffff; --accent-soft:#8a2f12; --ai-bg:#fff1ea;
  --gold:#b98a00; --glow-rgb:255,170,110;
  --raise1:#ffffff; --raise0:#f8f2ec; --chip:#ece4f2; --ring:#cbbfd6; --hero-btn2:#f1e9f6; --hero-btn2-hover:#e8ddf0;
  --panel-rgb:255,255,255; --bar-rgb:255,252,249;
  --cover-a:#ffd9cc; --cover-b:#f3e6f7;
  --hi:#1b1033; --soft-text:#4f4566; --input-text:#2a2140; --avatar-text:#3b2c57; --link:#b33e1a;
  --prose:#2a2140; --ref:#8a6400; --ref-rgb:138,100,0; --ref-hover:#5e4400;
  --prose-link:#b33e1a; --prose-link-rgb:179,62,26; --prose-link-hover:#7d2a10; --mention:#8a2f12;
  --hl-rgb:27,16,51; --field-border:#dccfc3; --sq-filter:brightness(.62) saturate(1.25);
  --warn:#a16207; --warn-soft:#8a6400; --danger:#c0262d; --danger-soft:#b42318; --rss:#c2410c; --switch-off:#cbbfd6;
}
}
/* Text in a square's own colour: those colours are tuned for the dark ground; darkened on light. */
[style^="color:#"],[style*=";color:#"],[style*="; color:#"],.chip[style^="--c:"],.crumb-here[style^="--c:"],.tag-row[style^="--c:"] .tag{filter:var(--sq-filter)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);position:relative;
  color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* The glow behind every page: blue from the top (as on the m8k dashboards) and a faint emerald from
   the lower corner. A fixed layer, so it stays put while you scroll, on iPhone too. */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 75% at 50% -10%, rgba(var(--glow-rgb),.20), rgba(var(--glow-rgb),0) 62%),
    radial-gradient(70% 60% at 100% 105%, rgba(var(--accent-rgb),.08), rgba(var(--accent-rgb),0) 70%),
    radial-gradient(60% 50% at -5% 60%, rgba(120,140,255,.06), rgba(120,140,255,0) 70%)}
a{color:var(--link);text-decoration:none}a:hover{color:var(--hi);text-decoration:underline}
.prelaunch{background:rgba(var(--accent-rgb),.08);border-bottom:1px solid rgba(var(--accent-rgb),.25);color:var(--accent-soft);text-align:center;font-size:14px;padding:8px 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:9}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:700px){.wrap{padding:0 24px}}
.serif{font-family:var(--serif);font-weight:500;color:var(--strong);letter-spacing:-.01em}
.muted{color:var(--muted)}.faint{color:var(--faint);font-size:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

/* header */
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:20px 0}
.brand{display:flex;align-items:center;gap:10px}
/* the m8k mark, same as the blogs: the 8 tips over into an infinity sign; links to m8k.io */
.hublink{display:inline-flex;align-items:center;color:var(--hi);text-decoration:none}
.hublink:hover{text-decoration:none;color:var(--hi)}
.m8kwm{font-family:Georgia,'Times New Roman',serif;font-size:30px;letter-spacing:-.01em;line-height:1}
/* a soft hue behind each logo, like the halo on the m8k.io front door */
.hublink,.wordmark{position:relative;isolation:isolate}
.hublink::before,.wordmark::before{content:"";position:absolute;inset:-14px -18px;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--accent-rgb),.20),rgba(var(--accent-rgb),.07) 55%,rgba(var(--accent-rgb),0) 100%)}
.wordmark::before{background:radial-gradient(closest-side,rgba(var(--glow-rgb),.16),rgba(var(--accent-rgb),.06) 60%,rgba(0,0,0,0) 100%)}
.m8k8{display:inline-block;margin:0 .05em;color:var(--accent);text-shadow:0 0 6px rgba(var(--accent-rgb),.55),0 0 16px rgba(var(--accent-rgb),.35);animation:m8kLie 12s ease-in-out infinite}
@keyframes m8kLie{0%,17.5%{transform:rotate(0)}25%,42.5%{transform:rotate(90deg)}50%,67.5%{transform:rotate(180deg)}75%,92.5%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.m8k8{animation:none}}
.crumbsep{flex:0 0 auto}
.wordmark{font-family:var(--serif);font-size:40px;line-height:1;font-weight:600;color:var(--hi);letter-spacing:-.015em}
@media (max-width:640px){.wordmark{font-size:34px}}
.wordmark:hover{text-decoration:none;color:var(--hi)}.wordmark .ai{color:var(--accent)}
.top nav,.nav-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;font-size:15px}
.nav-main{margin-left:auto}
.nav-tools{gap:8px 16px}
.me-link{display:inline-flex;align-items:center;gap:8px;margin-left:4px}.me-link .me-name{display:none}   /* you = your photo, like the other tools an icon */
@media (max-width:640px){
  .top{gap:6px 12px;padding:14px 0 10px}
  .brand{order:1;flex:1 1 auto}
  .nav-tools{order:2;gap:4px 10px;flex-wrap:nowrap}
  .nav-main{order:3;flex:1 1 100%;margin:0;flex-wrap:nowrap;gap:22px;font-size:15px;overflow-x:auto;scrollbar-width:none;padding:4px 0 2px}
  .nav-main::-webkit-scrollbar{display:none}
  .nav-main a{white-space:nowrap;color:var(--muted)}
  .join-btn{min-height:38px;padding:7px 14px;font-size:15px}
  .signin-link{font-size:15px}
  .me-link .av{display:inline-flex}.me-link .me-name{display:none}
  .nav-tools .bell{width:36px;height:36px}
  .nav-tools{gap:2px 4px}
}
.nav-ais{color:var(--accent)}
.nav-ais:hover{filter:brightness(1.15)}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:var(--accent);color:var(--accent-ink);
  font:inherit;font-weight:600;padding:10px 18px;border-radius:999px;border:0;cursor:pointer;text-decoration:none}
.btn:hover{color:var(--accent-ink);text-decoration:none;filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line2)}
.bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text)}
.bell-n{position:absolute;top:4px;right:2px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:700;border-radius:999px;padding:0 5px;line-height:16px}

/* hero */
.hero{text-align:center;padding:56px 0 40px}
.kicker{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(46px,8vw,76px);line-height:1.02;letter-spacing:-.02em;margin:16px 0;color:var(--strong)}
.hero p{max-width:640px;margin:0 auto;font-size:19px;color:var(--soft-text)}
.ask{max-width:680px;margin:32px auto 0;text-align:left}
.ask label{display:block;font-size:14px;color:var(--muted);margin-bottom:8px}
.askbox{display:flex;flex-wrap:wrap;gap:10px;background:linear-gradient(180deg,var(--raise1),var(--raise0));border:1.5px solid rgba(var(--accent-rgb),.42);border-radius:20px;padding:10px;
  box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06),0 10px 34px rgba(var(--accent-rgb),.10);transition:border-color .2s,box-shadow .2s}
.askbox input{flex:1 1 280px;min-width:0;background:transparent;border:0;color:var(--input-text);font:inherit;font-size:17px;padding:12px}
.askbox input:focus{outline:none}.askbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14),0 12px 40px rgba(var(--accent-rgb),.18)}
.askbox textarea{flex:1 1 280px;min-width:0;background:transparent;border:0;color:var(--input-text);font:inherit;font-size:17px;line-height:1.45;padding:12px;resize:none;overflow:hidden;min-height:48px;max-height:260px}
.askbox textarea:focus{outline:none}
.askbox .btn{align-self:flex-end;min-width:96px}
.ask-more{margin:10px 4px 0;font-size:14px}
/* Home page, search-first: the wordmark, one ask box and two buttons, with the feed starting about
   three-quarters of the way down the first screen. The header's small logo hides here (the big one
   is right below it); every other page keeps it. */
.home .brand-lockup{visibility:hidden}
.hero{min-height:calc(76vh - 96px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 0 36px}
.hero-mark{margin:0;line-height:1}
.hero .hero-word{font-size:clamp(64px,9vw,112px);letter-spacing:-.02em;pointer-events:none}
/* The tagline sits halfway between the bottom of the "g" and the ask box, measured on the rendered
   glyphs (2026-10-15). ".hero h1" and ".hero p" above outrank single-class rules, hence ".hero .x". */
.hero .hero-mark{margin:16px 0 23px}
.hero .hero-tag{margin:0 auto 23px}
.hero-local{margin:8px 0 0;font-size:clamp(22px,3vw,30px);font-weight:500;letter-spacing:.04em;color:var(--muted)}
.hero-local+.hero-tag{margin-top:10px}
.brand-lockup .local-name{letter-spacing:0}
.askbox-hero{width:min(720px,100%);box-sizing:border-box;border-radius:30px;padding:6px 8px 6px 14px;align-items:center;text-align:left}
.askbox.askbox-hero{margin-top:6px;gap:4px}
.askbox.askbox-hero textarea,.askbox.askbox-hero textarea:focus{flex:1 1 220px;font-size:18px;min-height:46px;padding:11px 8px;background:transparent;border:0;box-shadow:none;color:var(--input-text)}
/* On a phone the question shares its row with all three buttons (camera, paperclip, mic), as on a
   computer; at 220px it pushed the paperclip and mic onto a row of their own. */
@media (max-width:640px){.askbox.askbox-hero textarea,.askbox.askbox-hero textarea:focus{flex:1 1 0;min-width:0}}
.askbox.askbox-hero .ask-legal{font-size:12px;line-height:1.4;color:var(--faint);padding:0 8px 6px;text-align:left}
.askbox-hero .ask-photo,.askbox-hero .ask-mic{align-self:center;border-color:transparent}
.askbox-hero .ask-photo:hover,.askbox-hero .ask-mic:hover{border-color:transparent;background:rgba(var(--accent-rgb),.08)}
.askbox-hero .ask-similar,.askbox-hero .ask-attach,.askbox-hero .ask-legal{flex-basis:100%}
.hero-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:24px}
/* "Ask Agorai" submits the question, so it leads in solid coral; "Browse the squares" follows in plum. */
.hero-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border-radius:10px;border:1px solid var(--ring);background:var(--hero-btn2);color:var(--text);font:inherit;font-size:15px;font-weight:500;cursor:pointer;text-decoration:none}
.hero-btn:hover{background:var(--hero-btn2-hover);text-decoration:none;color:var(--text)}
.hero-btn.hero-btn-ask{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:600}
.hero-btn.hero-btn-ask:hover{color:var(--accent-ink);filter:brightness(1.08)}
.hero-note{margin:20px 0 0;font-size:14px;max-width:none}.hero-note a{white-space:nowrap}
@media (max-width:640px){.hero{min-height:calc(70vh - 80px);padding-top:4px}.hero .hero-mark{margin-bottom:14px}.hero .hero-tag{margin-bottom:13px}}
.ask-wait{display:flex;align-items:center;gap:12px;margin:14px 0}
.dots{display:inline-flex;gap:4px}.dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.35;animation:dot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.35;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.dots i{animation:none;opacity:.8}}
input::placeholder,textarea::placeholder{color:#7f8da1}
.askbox textarea::placeholder{color:#a9b8cb}

/* sections */
.sec{padding:24px 0 40px}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-bottom:18px}
.sec-head h2,.h2{font-family:var(--serif);font-weight:500;font-size:34px;margin:0;color:var(--strong)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:18px;border:1px solid var(--line);color:var(--text);min-height:160px}
.tile:hover{text-decoration:none;color:var(--text);filter:brightness(1.15)}
.tile .name{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px}
.tile .now{font-family:var(--serif);font-size:20px;line-height:1.3;color:var(--hi)}
.sw{width:12px;height:12px;border-radius:4px;display:inline-block;flex:0 0 auto}
.cols{display:flex;flex-wrap:wrap;gap:32px;padding:8px 0 56px}
.main-col{flex:999 1 560px;min-width:0}.side-col{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px}
.stack{display:flex;flex-direction:column;gap:14px}
.card h3{font-family:var(--serif);font-weight:500;font-size:25px;line-height:1.25;margin:8px 0 10px}
.card h3 a{color:var(--strong)}
.side h2{font-family:var(--serif);font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-.005em;margin:0 0 6px;color:var(--hi)}
.side .row{display:block;padding:12px 0;border-top:1px solid var(--line);color:var(--text)}
.side .row:hover{text-decoration:none;color:var(--hi)}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--c)}
.chip .dot{width:8px;height:8px;border-radius:3px;background:var(--c)}
.chip .sq-glyph{flex:0 0 auto}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:15px}
.pill:hover{text-decoration:none;border-color:var(--accent)}
.people{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--chip);color:var(--avatar-text);font-weight:600;flex:0 0 auto}
.av-ai{border-radius:30%;background:var(--ai-bg);color:var(--accent);border:2px solid var(--accent)}
.badge-ai{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--accent-ink);background:var(--accent);border-radius:6px;padding:1px 6px;margin-left:6px;vertical-align:2px}
.who{color:var(--text);font-weight:600}
.empty{color:var(--muted);padding:18px 0}

/* square page */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;font-size:15.5px;color:var(--muted);margin:8px 0 12px}
.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--strong);text-decoration:none}
.crumbs .crumb-back{display:inline-flex;align-items:center;min-height:36px;margin:0 12px 0 -6px;padding:0 12px 0 8px;border-radius:999px;background:var(--panel2);color:var(--text);font-weight:600;font-size:15px}
.crumbs .crumb-back:hover{background:var(--chip);color:var(--strong)}
.crumbs .crumb-back[hidden]{display:none}
.crumb-sep{margin:0 9px;color:var(--faint);font-size:19px;line-height:1;position:relative;top:-1px}
.crumbs .crumb-here{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--c,var(--strong))}
.crumbs .crumb-here:hover{color:var(--c,var(--strong));text-decoration:underline}
/* Tags (lib/tags.js): picked by the house AI, under a conversation's title and on /tag/<slug>. */
.tag-row{display:flex;flex-wrap:wrap;align-items:center;gap:7px 8px;margin:0 0 12px}
.tag{display:inline-flex;align-items:center;gap:3px;padding:3px 11px 4px;border-radius:999px;font-size:13.5px;font-weight:600;line-height:1.3;
  color:var(--c,var(--accent));background:color-mix(in srgb,var(--c,var(--accent)) 11%,transparent);border:1px solid color-mix(in srgb,var(--c,var(--accent)) 32%,transparent)}
.tag::before{content:"#";opacity:.55;font-weight:500}
.tag:hover{text-decoration:none;background:color-mix(in srgb,var(--c,var(--accent)) 22%,transparent)}
.tag .faint{font-weight:400;font-size:12px;margin-left:3px}
.tag-related{margin:14px 0 18px}
.tag-title{font-size:46px;margin:0 0 6px}.tag-hash{color:var(--accent);margin-right:6px;opacity:.75}
.sg-ic.sg-tag{color:var(--accent);font-weight:700}
.sq-head{padding:20px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.sq-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,56px);margin:0 0 8px;line-height:1.05}
/* The Squares page (/squares): the whole header is centered, with the search under it, the way the
   home page puts the ask box under the wordmark (Michael's pick, 2026-10-15). */
.squares-head{text-align:center;padding-top:28px}
.squares-lede{max-width:62ch;margin:0 auto 22px;text-wrap:balance}
.squares-label{display:block;margin:0 0 6px}
.squares-search{max-width:660px;margin:0 auto;text-align:left}
.known{border-radius:18px;padding:22px;margin-bottom:24px}
.known h2{font-size:15px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}
.signpost{font-size:14px;color:var(--muted);padding:10px 14px;border:1px dashed var(--line2);border-radius:12px}

/* thread */
.thread-head{padding:12px 0 20px}
.thread-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,48px);line-height:1.12;margin:10px 0;color:var(--strong)}
/* A word longer than the screen ("Supercalifragilisticexpialidocious" as a title) breaks, with a
   hyphen where the browser knows how, instead of pushing the whole page sideways on a phone. */
h1,h2,h3,h4,.card .cl-said,.cl-who,.ask-similar-title{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}
.post{display:flex;gap:14px;padding:22px 0;border-top:1px solid var(--line)}
.post .body{min-width:0;flex:1}
.post .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--faint);margin-bottom:6px}
.prose{font-size:17px;line-height:1.65;color:var(--prose);overflow-wrap:anywhere}
.prose p{margin:0 0 12px}.prose blockquote{margin:0 0 12px;padding:4px 16px;border-left:3px solid var(--line2);color:var(--soft-text)}
.prose a.ref{color:var(--ref);border-bottom:1px dotted rgba(var(--ref-rgb),.5)}.prose a.ref:hover{text-decoration:none;color:var(--ref-hover)}
.prose code{background:rgba(var(--hl-rgb),.09);border-radius:6px;padding:1px 6px;font-size:.92em}
details.collapsed{border:1px dashed var(--line2);border-radius:12px;padding:10px 14px}
details.collapsed summary{cursor:pointer;color:var(--muted)}
.reply{margin-top:12px;border-top:1px solid var(--line);padding-top:22px}
textarea,.field{width:100%;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;color:var(--input-text);font:inherit;font-size:16px;padding:14px}
textarea{min-height:150px;resize:vertical;line-height:1.55}
textarea:focus,.field:focus{outline:none;border-color:var(--accent)}
label.lbl{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px}
.check{display:flex;gap:10px;align-items:flex-start;margin:12px 0;color:var(--text)}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--accent)}
.narrow{max-width:640px;margin:0 auto;padding:40px 0 64px}
.note{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--soft-text)}
.note.ok{border-color:rgba(var(--accent-rgb),.35)}.note.warn{border-color:rgba(247,147,26,.45)}
.log-row{padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.foot{border-top:1px solid var(--line);padding:28px 0 40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:14px;color:var(--faint)}

/* rich posts: photos, galleries, files, video, link cards */
.prose h3,.prose h4,.prose h5{font-family:var(--serif);font-weight:500;color:var(--strong);line-height:1.25;margin:20px 0 8px}
.prose h3{font-size:26px}.prose h4{font-size:22px}.prose h5{font-size:19px}
.prose figure.img{margin:14px 0}
.prose figure.img img{display:block;max-width:100%;max-height:640px;height:auto;border-radius:12px;border:1px solid var(--line)}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.prose .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));gap:10px;margin:14px 0}
.prose .gallery figure.img{margin:0}
.prose .gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;max-height:none}
.prose .attach{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin:6px 8px 6px 0;border:1px solid var(--line2);border-radius:12px;background:var(--panel2);color:var(--text);font-size:15px}
.prose .attach:hover{border-color:var(--accent);text-decoration:none;color:var(--hi)}
.prose .embed{position:relative;aspect-ratio:16/9;margin:14px 0;border-radius:12px;overflow:hidden;background:#000;border:1px solid var(--line)}
.prose .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .preview{display:flex;gap:14px;margin:12px 0;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);color:var(--text);text-decoration:none}
.prose .preview:hover{border-color:var(--accent);text-decoration:none;color:var(--text)}
.prose .preview img{width:120px;height:90px;object-fit:cover;border-radius:10px;flex:0 0 auto}
.prose .pv-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.prose .pv-site{font-size:12px;color:var(--faint);text-transform:uppercase;letter-spacing:.06em}
.prose .pv-title{font-weight:600;color:var(--strong);line-height:1.3}
.prose .pv-desc{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:520px){.prose .preview{flex-direction:column}.prose .preview img{width:100%;height:auto;aspect-ratio:1.91/1}}

/* composer */
.toolbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.toolbar button{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.toolbar button:hover{border-color:var(--accent)}
.toolbar .sep{width:1px;background:var(--line2);margin:4px 2px}
.uploading{font-size:14px;color:var(--muted);margin:6px 0}
.preview-pane{margin-top:14px;padding:16px;border:1px dashed var(--line2);border-radius:14px}
.drop-hint{outline:2px dashed var(--accent);outline-offset:4px}

/* share */
.share{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.share:hover{border-color:var(--accent);color:var(--text)}
.share-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--accent);color:var(--accent-ink);font-weight:600;padding:10px 16px;border-radius:999px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:20}
.share-toast.show{opacity:1}
.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){color:var(--prose-link);text-decoration:underline;text-decoration-color:rgba(var(--prose-link-rgb),.45);text-underline-offset:3px}
.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t):hover{color:var(--prose-link-hover);text-decoration-color:currentColor}
.prose a.mention{color:var(--mention);font-weight:600}

/* feed-first home */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.welcome{display:flex;flex-direction:column;gap:12px;padding:8px 0 18px;border-bottom:1px solid var(--line);margin-bottom:18px}
.welcome-text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.welcome .askbox{max-width:none}
/* The home feed's header runs across the whole page (tabs left, the live counter at the far right,
   one line under both), so the sidebar's first card starts level with the first conversation card. */
.feed-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:22px}
.feed-head .tabs{border-bottom:0;margin-bottom:0}
/* On a phone the tabs fill the row and the counter would wrap below them, leaving the line (and the
   current tab's underline) under the counter. There the counter goes first, above the tabs. */
@media (max-width:640px){.feed-head{row-gap:2px}.feed-head > .here{order:-1;width:100%;font-size:13.5px;white-space:normal}.here-part{white-space:nowrap}.here .here-long{display:none}.here .here-short{display:inline}}
/* Tabs: words with a glowing underline under the current one (pills are kept for filters/choices) */
.tabs{display:flex;gap:4px 26px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs a{position:relative;padding:10px 2px 12px;color:var(--muted);font-weight:600;font-size:15.5px;letter-spacing:.02em;text-decoration:none}
.tabs a:hover{text-decoration:none;color:var(--text)}
.tabs a.on{color:var(--accent);text-shadow:0 0 14px rgba(var(--accent-rgb),.35)}
.tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.6)}
.sq-row{display:flex !important;align-items:center;gap:10px;padding:9px 0 !important}

/* threaded replies */
.post.opening{border-top:0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.act{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:5px 10px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--faint);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.act:hover{color:var(--text);border-color:var(--line2);text-decoration:none}
.act.share{border-color:transparent}
.children{margin:10px 0 0;padding-left:16px;border-left:2px solid var(--line2)}
.children:hover{border-left-color:rgba(var(--accent-rgb),.35)}
.children .post{padding:14px 0;border-top:0}
.children .prose{font-size:16px}
.children[hidden]{display:none}
/* At every width, replies stop stepping right after the third level: a long back-and-forth (a member
   and a house AI, say) keeps a readable column instead of shrinking with each answer, and a "↳ Name"
   label says who's being answered (Bryan's feedback, 2026-10-16). */
.children .children .children .children{padding-left:0;border-left:0;margin-left:0}
/* On wider screens a reply also sits beside its parent's photo column (32px + 14px gap), so a
   flattened level pulls back by that much to line up under the level above. */
@media (min-width:601px){.children .children .children .children{margin-left:-46px}}
.prose ul,.prose ol{padding-left:1.4em}
.replies{border-top:1px solid var(--line);margin-top:6px}
.replies > .post{border-top:1px solid var(--line)}
.post.removed .body{opacity:.75}
.inline-reply{margin:10px 0 4px;padding:12px;border:1px solid var(--line2);border-radius:14px;background:var(--panel)}
.inline-reply textarea{min-height:110px}
.inline-reply .row-btns{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
@media (max-width:600px){
  .children{padding-left:10px}.post{gap:10px}
  /* Phones: nested replies keep the full width — a small photo beside the name instead of a
     column, ~12px per level, and from the sixth level on no further indent (a "↳ Name" label
     says who's being answered). */
  .children .post{display:block}
  .children .post > .av{float:left;width:24px !important;height:24px !important;margin:1px 8px 0 0}
  .children .post > .av svg{width:20px;height:20px}
  .children .post > .body .meta{min-height:26px}
  .children .children .children .children .children .children{padding-left:0;border-left:0;margin-left:0}
  .reply-to{font-size:12.5px;color:var(--faint)}
  .actions{gap:2px}
}
.reply-to{display:inline;font-size:12.5px;color:var(--faint)}

/* profile photos + AI emblems */
.av-img{border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--chip);border:1px solid var(--line2)}
.av-ai svg{display:block}
.av-ai{box-shadow:0 0 12px rgba(var(--accent-rgb),.18)}
.av-person{overflow:hidden;align-items:flex-end}
.av-person svg{display:block}
.rundown-list{list-style:none;margin:0;padding:0}
.rundown-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.rundown-list a{font-family:var(--serif);font-size:20px;color:var(--strong);line-height:1.3}

/* square icons, cards and bands */
.sq-ico{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:50%;border:1px solid}
.sq-row{gap:12px !important}
.sq-band{padding:24px 24px 26px;border:1px solid;border-radius:22px;margin-top:6px}
.sq-title{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.sq-title h1{margin:0}
@media (max-width:640px){.sq-band{padding:18px 16px 20px}.sq-title{gap:12px}.sq-title .sq-ico{width:48px !important;height:48px !important}}
.sq-grid{align-items:stretch}
.sq-card{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid;border-radius:20px}
.sq-card-head{display:flex;align-items:center;gap:14px;color:inherit}
.sq-card-head:hover{text-decoration:none}.sq-card-head:hover .sq-card-name{text-decoration:underline}
.sq-card-head > span:last-child{display:flex;flex-direction:column;gap:2px}
.sq-card-name{font-weight:650;font-size:19px;line-height:1.2}
.sq-card-blurb{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.sq-tree,.sq-tree ul{list-style:none;margin:0;padding:0}
.sq-tree ul{padding-left:16px;margin-top:4px}
.sq-tree li{margin:5px 0;font-size:15.5px;font-weight:600}
.sq-card-latest{display:flex;flex-direction:column;gap:2px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:var(--text);font-family:var(--serif);font-size:17px;line-height:1.3}
.sq-card-latest .faint{font-family:var(--sans);font-size:12.5px}
/* feed thumbnails */
.card.has-thumb{display:grid;grid-template-columns:minmax(0,1fr) 128px;column-gap:20px;align-items:start}
.card.has-thumb > *{grid-column:1}
.card.has-thumb > .thumb{grid-column:2;grid-row:1 / span 4;display:block;width:128px;height:128px;border-radius:14px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.card.has-thumb{grid-template-columns:minmax(0,1fr) 84px;column-gap:14px}.card.has-thumb > .thumb{width:84px;height:84px;border-radius:12px}}
.tr-note{margin:2px 0 6px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--accent);opacity:.85}
.askbox .cf-turnstile{flex-basis:100%}.askbox .cf-turnstile:empty{display:none}
.guest-join{margin:16px 0;padding:18px 20px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:16px;background:rgba(var(--accent-rgb),.05)}
.guest-join p{margin:0 0 12px}
.ask-photo,.ask-mic{align-self:flex-end;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--soft-text);cursor:pointer;flex:0 0 auto}
.ask-photo:hover,.ask-mic:hover{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}
.ask-photo input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ask-clip{text-decoration:none}.ask-clip:hover{text-decoration:none}
.ask-photo:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ask-mic.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);animation:micpulse 1.4s infinite}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}50%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.ask-mic.on{animation:none}}
.ask-attach{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:4px 6px 2px}
.ask-attach[hidden]{display:none}
.ask-attach img{width:72px;height:72px;object-fit:cover;border-radius:12px;border:1px solid var(--line2)}
.ask-legal{flex-basis:100%;margin:0;padding:0 8px 2px;font-size:12px;color:var(--faint)}
.ask-legal a{color:var(--muted)}
.nav-search{display:inline-grid;place-items:center;width:44px;height:44px;color:var(--text)}   /* same ink as the other header icons, not link coral */
.search-form{display:flex;flex-wrap:wrap;gap:10px}.search-form .field{flex:1 1 260px;margin:0}
.search-hit mark{background:rgba(var(--accent-rgb),.18);color:var(--strong);border-radius:3px;padding:0 2px}
.search-hit h3{font-size:22px;margin:6px 0 6px}
.feed-head{flex-wrap:wrap;gap:10px 24px}
/* Plain inline text, so the spaces in the markup are the spaces you see (a flex gap spread the words apart). */
.here{display:inline-block;font-size:14px;color:var(--muted);white-space:nowrap}
/* Parts after a shown part get a "·"; a hidden "here now" leaves no stray dot. Long labels on
   computers, short ones on phones (so the counter is one line there). */
.here-part[hidden]{display:none}.here-part:not([hidden]) ~ .here-part::before{content:"· "}.here-short{display:none}
.here-dot{display:inline-block;vertical-align:0;margin-right:8px;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5);animation:herepulse 2.4s infinite}
@keyframes herepulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}70%{box-shadow:0 0 0 7px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.here-dot{animation:none}}
.stats{width:100%;border-collapse:collapse;font-size:15px}
.stats th,.stats td{text-align:right;padding:8px 10px;border-bottom:1px solid var(--line)}
.stats th:first-child,.stats td:first-child{text-align:left}
.stats th{color:var(--muted);font-weight:600;font-size:13px}
fieldset.opts{border:0;padding:0;margin:14px 0 0}fieldset.opts legend{padding:0;margin-bottom:4px}
.vote-form{display:inline}.act.vote.on{color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.foot-m8k{display:inline-flex;align-items:baseline;gap:8px;color:var(--faint);text-decoration:none}
.foot-m8k:hover{text-decoration:none;color:var(--muted)}
.foot-m8k .m8kwm{font-size:21px;color:var(--hi)}
.foot-m8k:hover .m8kwm{color:var(--hi)}
.foot-m8k .m8k8{text-shadow:0 0 5px rgba(var(--accent-rgb),.5),0 0 12px rgba(var(--accent-rgb),.25)}
.push-card{margin:14px 0 26px}
input[type=file]{color:var(--muted);font:inherit;font-size:14px;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis}
input[type=file]::file-selector-button{margin-right:10px;padding:8px 16px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--accent)}
.room-bar{margin-top:10px;min-height:26px}
.room-here{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--muted)}
.room-here .here-dot{margin-right:2px}
.room-face{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;object-fit:cover;border:1px solid var(--line2)}
.room-here > .room-face + .room-face{margin-left:-10px}
.room-typing{display:flex;align-items:center;gap:8px;min-height:0;font-size:13.5px;color:var(--accent);margin:6px 0}
.room-typing:empty{margin:0}
.post.fresh > .body{animation:fresh 4s ease-out}
@keyframes fresh{0%{background:rgba(var(--accent-rgb),.14);border-radius:12px}100%{background:transparent}}
.new-pill{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;box-shadow:0 10px 30px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.post.fresh > .body{animation:none}}
.prose .signature{font-family:var(--serif);font-size:22px;font-style:italic;color:var(--strong);margin-top:18px}
.profile-links{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}.profile-links .pill{min-height:34px;padding:5px 12px;gap:7px;font-size:14px}
.adm-h{font-size:26px;margin:30px 0 12px;display:flex;align-items:center;gap:10px}
.adm-count{font:600 14px var(--sans);background:var(--panel2);border:1px solid var(--line2);border-radius:999px;padding:2px 10px;color:var(--muted)}
.adm-card{padding:16px 18px}.adm-card.adm-report{border-color:rgba(248,113,113,.45)}.adm-card.adm-moderation{border-color:rgba(251,191,36,.4)}
.adm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.adm-kind{font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.adm-report .adm-kind{color:var(--danger)}.adm-moderation .adm-kind{color:var(--warn)}
.adm-quote{margin:6px 0 10px;padding:8px 12px;border-left:3px solid var(--line2);color:var(--muted);font-size:14.5px}
.adm-actions{display:flex;flex-wrap:wrap;gap:8px}
.adm-act{display:inline-flex;gap:6px;align-items:center}
.adm-act input[name=reason]{background:var(--panel2);border:1px solid var(--line2);border-radius:999px;color:var(--text);font:inherit;font-size:13px;padding:7px 12px;width:min(260px,52vw)}
.adm-act .btn{min-height:36px;padding:6px 14px;font-size:14px}
.btn.danger{background:transparent;border:1px solid rgba(248,113,113,.6);color:var(--danger-soft)}.btn.danger:hover{background:rgba(248,113,113,.12)}
.adm-table{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.adm-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.adm-row:last-child{border-bottom:0}
.adm-snip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-flag{font-size:12px;font-weight:700;color:var(--warn);border:1px solid rgba(251,191,36,.45);border-radius:999px;padding:1px 8px;margin-left:6px}
.gist{margin:14px 0 20px;padding:14px 18px;border:1px solid rgba(var(--accent-rgb),.28);border-radius:16px;background:linear-gradient(180deg,rgba(var(--accent-rgb),.06),rgba(var(--accent-rgb),.015))}
.gist summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
.gist summary::-webkit-details-marker{display:none}
.gist-title{font-family:var(--serif);font-size:21px;color:var(--strong)}
.gist-title .badge-ai{font-family:var(--sans);vertical-align:4px}
.gist ul{margin:10px 0 4px;padding-left:20px}.gist li{margin:6px 0;line-height:1.55}
.gist-src{font-size:12.5px;color:var(--faint)}.gist-src a{color:var(--muted);margin-left:6px}
.gist-src a::before{content:"↳ "}
.gist-open{margin:8px 0 0;font-size:15px;color:var(--muted)}
.welcome-short{display:none}
@media (max-width:640px){.welcome-long{display:none}.welcome-short{display:inline}.welcome-text .serif{font-size:22px !important}
  .welcome{padding-top:4px}.ask-more{font-size:13.5px}}
.ask-similar{flex-basis:100%;margin:2px 4px 0;padding:10px 12px;border-radius:14px;background:rgba(var(--hl-rgb),.035);border:1px solid var(--line2)}
.ask-similar[hidden]{display:none}
.ask-similar-head{margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted)}
.ask-similar-item{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:baseline;padding:7px 4px;border-top:1px solid var(--line);color:var(--text)}
.ask-similar-item:first-of-type{border-top:0}
.ask-similar-item:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03);border-radius:8px}
.ask-similar-item .sw{width:9px;height:9px;border-radius:3px;align-self:center}
.ask-similar-title{font-family:var(--serif);font-size:17px}
.ask-similar-item .faint{grid-column:2;font-size:12.5px}
/* The typing field: a soft off-white well inside the glowing box ("type here"), white when you're in it. */
.askbox textarea{background:#eef4fa;color:var(--ink-text);border-radius:14px;padding:13px 16px;border:1px solid var(--field-border);box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.askbox textarea::placeholder{color:#5b6b80}
.askbox textarea:focus{background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}
/* Search boxes: one rounded control like the ask box — off-white field, the button inside at the end. */
.searchbox{display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:linear-gradient(180deg,var(--raise1),var(--raise0));
  border:1.5px solid rgba(var(--accent-rgb),.42);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.06),0 8px 26px rgba(var(--accent-rgb),.08)}
.searchbox:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.14),0 10px 30px rgba(var(--accent-rgb),.14)}
.searchbox input,.searchbox .field{flex:1;min-width:0;margin:0;border:0;border-radius:999px;background:#eef4fa;color:var(--ink-text);
  font:inherit;font-size:16px;padding:11px 16px;box-shadow:inset 0 1px 2px rgba(0,0,0,.12)}
.searchbox input:focus,.searchbox .field:focus{outline:none;background:#fff}
.searchbox input::placeholder{color:#5b6b80}
.searchbox .btn{flex:0 0 auto;min-height:42px;padding:8px 18px}
.search-form.searchbox{flex-wrap:nowrap}
.mention-list{position:absolute;z-index:30;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.mention-list[hidden]{display:none}
.mention-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.mention-item.on,.mention-item:hover{background:rgba(var(--accent-rgb),.10)}
.mention-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0;flex:1;overflow:hidden}
.mention-item .mention-col .mention-desc{margin-left:0;max-width:100%;text-align:left;font-size:12.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mention-item .faint{margin-left:auto;font-size:13px}
.mention-face{width:24px;height:24px;border-radius:50%;display:inline-grid;place-items:center;font-size:12px;font-weight:700;background:var(--line2);color:var(--avatar-text);object-fit:cover;flex:0 0 auto}
.new-badge{display:inline-block;vertical-align:middle;font:700 12px var(--sans);letter-spacing:.02em;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:2px 9px;margin-left:6px}
.post.unread > .body{box-shadow:-3px 0 0 var(--accent);padding-left:12px;border-radius:2px}
.new-jump{display:inline-flex;margin-top:10px;font-weight:600;font-size:14.5px;color:var(--accent)}
.new-anchor{position:relative;top:-90px;display:block}

/* Private conversation: Add people / Leave, as real buttons under the reply box */
.pm-actions{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.pm-actions details > summary{list-style:none;cursor:pointer}
.pm-actions details > summary::-webkit-details-marker{display:none}
.pm-add[open]{flex:1 1 100%;order:-1}
.pm-add[open] > summary{display:none}
.pm-add-form{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.pm-add-row{display:flex;gap:10px;flex-wrap:wrap}.pm-add-row .field{flex:1 1 220px;margin:0}
.pm-leave{margin-left:auto}
.pm-leave[open]{flex:1 1 100%;margin-left:0}
.pm-leave[open] > summary{display:none}
.pm-leave-form{display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:flex-end}

/* Bookmarks: filter by square, and remove one without opening it */
.bm-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.bm-filter{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 14px;border:1px solid var(--line2);border-radius:999px;color:var(--text);font-size:14px;font-weight:600;text-decoration:none}
.bm-filter:hover{border-color:var(--accent);text-decoration:none}
.bm-filter.on{background:rgba(var(--accent-rgb),.10);border-color:rgba(var(--accent-rgb),.45)}
.bm-filter .dot{width:8px;height:8px;border-radius:3px;background:var(--c)}
.bm-filter span{color:var(--muted);font-weight:500}
.bm-item{display:flex;flex-direction:column}
.bm-remove{align-self:flex-end;margin-top:6px}

/* "Pick a few squares": big tap-to-choose tiles */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.pick{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 40px 14px 14px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);cursor:pointer;transition:border-color .15s,background .15s}
.pick:hover{border-color:var(--c-line)}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick:has(input:checked){border-color:var(--c);background:linear-gradient(180deg,var(--c-soft),var(--panel))}
.pick:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.pick .sq-ico{flex:0 0 auto}
.pick-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.pick-name{font-weight:700;color:var(--c);font-size:16px}
.pick-blurb{color:var(--muted);font-size:13.5px;line-height:1.4}
.pick-tick{position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;color:transparent}
.pick:has(input:checked) .pick-tick{background:var(--c);border-color:var(--c);color:#06120c}
.pick-bar{position:sticky;bottom:0;display:flex;align-items:center;gap:18px;margin-top:18px;padding:14px 0;background:linear-gradient(180deg,transparent,var(--bg) 35%)}

/* Settings: photo first (tap to change), then sections */
.settings .set-h{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line)}
.avatar-edit{display:flex;align-items:center;gap:16px;margin:10px 0 18px}
.avatar-pick{position:relative;display:inline-block;cursor:pointer;border-radius:50%;flex:0 0 auto}
.avatar-pick .av{width:104px;height:104px}
.avatar-pick input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.avatar-pen{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;border:3px solid var(--panel);pointer-events:none}
.avatar-pick:hover .avatar-pen,.avatar-pick:focus-within .avatar-pen{filter:brightness(1.1)}
.avatar-pick:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.avatar-pick.busy::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(var(--bar-rgb),.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23ff6a3d' stroke-width='2.5' stroke-dasharray='40 20'/%3E%3C/svg%3E") center/34px no-repeat;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.link-rows{display:flex;flex-direction:column;gap:8px}.link-rows .field{margin:0}
.link-more{margin-top:8px}
.set-save{margin-top:16px}

/* Code blocks: monospace, scroll sideways rather than wrap, with a Copy button */
.prose pre.code{position:relative;margin:12px 0;padding:14px 16px;background:#08111d;border:1px solid var(--line2);border-radius:12px;overflow-x:auto;font:13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#d7e3f0;tab-size:4}
.prose pre.code code{background:none;padding:0;font:inherit;white-space:pre}
.prose pre.code[data-lang]::before{content:attr(data-lang);display:block;margin:-4px 0 8px;font:600 11px/1 var(--sans,inherit);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.copy-code{position:absolute;top:8px;right:8px;min-height:28px;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer}
.copy-code:hover{color:var(--text);border-color:var(--accent)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* The Front Page, laid out like a magazine front */
.mag{max-width:1080px;margin:0 auto}
.mag-mast{text-align:center;padding:6px 0 18px;margin-bottom:26px;border-bottom:3px double var(--line2)}
.mag-date{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mag-title{font-size:clamp(46px,9vw,84px);line-height:1;margin:6px 0 10px}
.mag-sub{margin:0 auto;max-width:640px;color:var(--muted)}
.mag-sub .faint{display:block;margin-top:4px;font-size:13.5px}
.mag-sq{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.mag-sq:hover{text-decoration:none;filter:brightness(1.15)}
.mag h2 a,.mag h3 a{color:var(--strong);text-decoration:none}
.mag h2 a:hover,.mag h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mag-meta{margin:8px 0 0;font-size:13px;color:var(--faint)}
.mag-dek{margin:8px 0 0;color:var(--text);line-height:1.55}
.mag-pic{display:block;position:relative;overflow:hidden;border-radius:14px;background:var(--c-soft);aspect-ratio:16/10;border:1px solid var(--line)}
.mag-pic img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.mag-pic:hover img{transform:scale(1.03)}
.mag-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,var(--c-soft),transparent 70%)}
.mag-lead{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:center;margin-bottom:34px}
.mag-lead .mag-pic{aspect-ratio:16/10.5}
.mag-lead h2{font-size:clamp(28px,3.6vw,42px);line-height:1.12;margin:8px 0 0}
.mag-lead .mag-dek{font-size:17px}
.mag-lead.is-breaking .mag-sq{color:#f7931a !important}
.mag-join{margin-top:16px}
.mag-row{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:22px;padding:24px 0 30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.mag-card .mag-pic{margin-bottom:12px}
.mag-card h3{font-size:20px;line-height:1.22;margin:6px 0 0}
.mag-section{margin:0 0 30px}
.mag-section-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c);margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid var(--c)}
.mag-briefs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
.mag-brief{display:flex;gap:16px;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--line)}
.mag-brief h3{font-size:21px;line-height:1.25;margin:4px 0 0}
.mag-brief .mag-dek{font-size:14.5px;color:var(--muted)}
.mag-thumb{flex:0 0 112px;height:84px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--c-soft)}
.mag-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.mag-add{margin:38px 0 10px;border:2px dashed var(--line2);border-radius:20px;transition:border-color .15s}
.mag-add:hover,.mag-add[open]{border-color:rgba(var(--accent-rgb),.45)}
.mag-add summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:22px 24px}
.mag-add summary::-webkit-details-marker{display:none}
.mag-plus{flex:0 0 auto;width:64px;height:64px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:300;line-height:1;box-shadow:0 0 24px rgba(var(--accent-rgb),.25);transition:transform .2s}
.mag-add[open] .mag-plus{transform:rotate(45deg)}
.mag-add-text{display:flex;flex-direction:column;gap:3px}
.mag-add-text strong{font-family:var(--serif);font-weight:500;font-size:26px;color:var(--strong)}
.mag-add-text span{color:var(--muted)}
.mag-add-box{padding:0 24px 22px}
@media (max-width:900px){
  .mag-row{grid-template-columns:repeat(min(var(--n,4),2),minmax(0,1fr))}
  .mag-row > .mag-card:last-child:nth-child(odd):not(:first-child){grid-column:1/-1}
  .mag-row > .mag-card:last-child:nth-child(odd):not(:first-child) .mag-pic{aspect-ratio:16/8}
}
@media (max-width:720px){
  .mag-lead{grid-template-columns:1fr;gap:16px}
  .mag-briefs{grid-template-columns:1fr}
  .mag-brief h3{font-size:19px}
  .mag-thumb{flex-basis:92px;height:72px}
  .mag-add summary{padding:18px}
  .mag-plus{width:54px;height:54px;font-size:34px}
  .mag-add-text strong{font-size:22px}
  .mag-add-box{padding:0 16px 18px}
}
@media (max-width:480px){.mag-row{grid-template-columns:1fr 1fr;gap:16px}.mag-card h3{font-size:17px}}

/* The reply box: tools on top, a white writing space, the send button in the corner, all one box */
.composer{background:#eef4fa;border:1px solid var(--field-border);border-radius:16px;overflow:hidden;box-shadow:0 1px 0 rgba(var(--hl-rgb),.04),0 6px 24px rgba(0,0,0,.18);transition:box-shadow .15s,background .15s}
.composer.focus{background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}
.composer .toolbar{margin:0;padding:6px;gap:2px;background:#e1e9f2;border-bottom:1px solid #d3dde8;flex-wrap:wrap}
.composer.focus .toolbar{background:#eaf0f6}
.composer .toolbar button{min-height:36px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink-soft);font-size:14px;font-weight:500}
.composer .toolbar button:hover{background:rgba(11,22,38,.08);border:0}
.composer .toolbar button:focus-visible{outline:2px solid #00a866;outline-offset:-2px}
.composer .toolbar .sep{background:#c7d2df;margin:6px 3px}
.composer textarea{display:block;width:100%;background:transparent;border:0;border-radius:0;color:var(--ink-text);font-size:16.5px;padding:14px 16px;min-height:140px}
.composer textarea:focus{border:0;outline:none}
.composer textarea::placeholder{color:#6b7a8f}
.composer textarea.drop-hint{background:rgba(var(--accent-rgb),.08)}
.composer-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px 10px;padding:8px 10px 10px;margin:0}
.composer-foot .faint{order:1;margin-right:auto;color:#5b6b80;font-size:13.5px;padding-left:6px;flex:1 1 8em;min-width:0}
.composer-foot .btn{order:2;min-height:40px;padding:8px 18px}
.composer-foot .btn.ghost{color:var(--ink-soft);border-color:#c5d0dc;background:transparent}
.composer-foot .btn.ghost:hover{background:rgba(11,22,38,.06)}
.composer-foot .composer-preview{display:inline-flex;align-items:center;gap:6px;padding:8px 14px}
.composer-foot .composer-preview svg{flex:0 0 auto}
.composer-foot .composer-preview[aria-pressed="true"]{background:rgba(11,22,38,.08)}
@media (max-width:560px){
  .composer .toolbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .composer .toolbar::-webkit-scrollbar{display:none}
  .composer .toolbar .tb-word{display:none}
  .composer .toolbar button{padding:6px 9px;flex:0 0 auto}
  .composer-foot .faint{flex:1 1 100%;order:3;padding:0 4px}
  .composer-foot .composer-preview .tb-word{display:none}
  .composer-foot .composer-preview{padding:8px 12px}
}

/* Language: a globe with the current language, opening a small menu (flags stand for countries, not languages) */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text)}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{color:var(--accent)}
.lang-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:200px;display:flex;flex-direction:column;padding:6px;background:var(--panel2);border:1px solid var(--line2);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.4)}
.lang-pop a{padding:10px 12px;border-radius:9px;color:var(--text);text-decoration:none;font-size:15px}
.lang-pop a:hover{background:rgba(var(--hl-rgb),.06);text-decoration:none}
.lang-pop a[aria-current]{color:var(--accent);font-weight:600}
.lang-pop a[aria-current]::after{content:" ✓"}
.lang-pop .lang-more{border-top:1px solid var(--line);border-radius:0 0 9px 9px;margin-top:4px;padding-top:12px;color:var(--muted);font-size:14px}
@media (max-width:640px){.nav-main .lang-menu{margin-left:auto}.nav-main{overflow:visible}}

.rss-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--rss);text-decoration:none;padding:4px 2px}
.rss-link:hover{text-decoration:none;filter:brightness(1.15)}
.mag-sub .rss-link{margin-left:8px;vertical-align:middle}

/* "Answered" marks */
.answer-badge{display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding:1px 9px;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-size:12px;font-weight:700}
.post.is-answer > .body > .prose{border-left:3px solid var(--accent);padding-left:14px}
/* When a time-sensitive answer was written, and a warning once it's old */
.fresh-note{margin:8px 0 0;font-size:13px;color:var(--faint)}
.fresh-note.stale{padding:7px 11px;border-radius:10px;color:var(--text);background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.40)}
.fresh-note a{color:var(--accent);font-weight:600;white-space:nowrap}
/* The live price box under an answer to "what's bitcoin at?" (price.js) */
.price-box{margin:4px 0 12px;padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);font-size:15px;line-height:1.5}
.price-box strong{font-size:18px;color:var(--strong);font-variant-numeric:tabular-nums}
.price-box .pb-what{color:var(--muted);margin-right:4px}
.price-box .pb-src{color:var(--faint);font-size:13px}
.price-box a{color:var(--accent)}
.act.mark-answer{color:var(--accent)}
.act.mark-answer.on{background:rgba(var(--accent-rgb),.1)}
.answered-chip{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-size:13px;font-weight:700;text-decoration:none}
.answered-chip:hover{text-decoration:none;filter:brightness(1.1)}
.answered-card{display:flex;gap:14px;align-items:flex-start;margin:6px 0 22px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.02));border:1px solid rgba(var(--accent-rgb),.35);color:var(--text);text-decoration:none}
.answered-card:hover{text-decoration:none;border-color:rgba(var(--accent-rgb),.6)}
.answered-tick{flex:0 0 auto;width:30px;height:30px;border-radius:999px;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-weight:800}
.answered-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.answered-text strong{color:var(--accent)}
.answered-ex{color:var(--text);line-height:1.5}
.answered-pill{display:inline-block;vertical-align:middle;margin-left:6px;padding:1px 8px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.45);color:var(--accent);font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:0}

/* Circles: private groups */
.circle-list{display:flex;flex-direction:column;gap:10px;margin:0 0 26px}
.circle-row{display:flex;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;transition:border-color .15s}
.circle-row:hover{border-color:var(--c);text-decoration:none}
.circle-row-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.circle-row-name{font-family:var(--serif);font-size:22px;color:var(--strong)}
.circle-row-blurb{color:var(--muted);font-size:14.5px}
.circle-ico{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid;flex:0 0 auto}
.circle-new{border:2px dashed var(--line2);border-radius:20px}
.circle-new[open]{border-color:rgba(var(--accent-rgb),.45)}
.circle-new summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:18px;padding:18px 20px}
.circle-new summary::-webkit-details-marker{display:none}
.circle-new[open] .mag-plus{transform:rotate(45deg)}
.circle-new-form{padding:0 20px 20px}
.circle-private{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font-size:14px;font-weight:600;color:var(--muted)}
.circle-faces{display:flex;flex-wrap:wrap;align-items:center;gap:4px;text-decoration:none}
.circle-faces:hover{text-decoration:none}
.circle-banner{display:flex;align-items:flex-start;gap:8px;margin:10px 0 0;padding:8px 14px;border-radius:12px;background:rgba(125,211,252,.07);border:1px solid rgba(125,211,252,.25);color:var(--text);font-size:14px}
.circle-members{list-style:none;margin:0;padding:0}
.circle-members li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.cm-name{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.pill-mini{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid var(--line2);font-size:12px;color:var(--muted)}
.invite-link{display:flex;gap:10px;flex-wrap:wrap}.invite-link .field{flex:1 1 260px;margin:0;font-size:14px}
.circle-note{margin:0 0 10px}
.circle-banner svg{flex:0 0 auto;margin-top:3px}

/* A PDF waiting to go with a question */
.ask-doc{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:rgba(var(--hl-rgb),.06);border:1px solid var(--line2);color:var(--text);font-size:14px;max-width:100%}
.ask-doc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-doc-warn{flex:1 1 100%;margin:6px 0 0;font-size:13px;color:var(--warn-soft)}

/* Circles drawn as circles: a ring in the circle's color, faces seated around its edge */
.circles-page{max-width:1000px;margin:0 auto}
.circles-intro{max-width:760px;margin:0 auto 10px;text-align:center}
.circle-cluster{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:34px 46px;padding:40px 10px 30px}
.circle-cluster > :nth-child(even){margin-top:46px}
.ring{position:relative;flex:0 0 auto;border-radius:50%;border:3px solid var(--c);background:radial-gradient(circle at 50% 38%,var(--c-soft),var(--c-faint) 72%);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text);text-decoration:none;transition:transform .2s,box-shadow .2s}
a.ring:hover{text-decoration:none;transform:scale(1.03);box-shadow:0 0 34px var(--c-glow)}
.ring-center{display:flex;flex-direction:column;align-items:center;gap:5px;max-width:68%}
.ring-name{font-family:var(--serif);font-size:var(--name);line-height:1.12;color:var(--c);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ring-meta{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--muted)}
.ring .seat{position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px var(--bg);line-height:0}
.ring .seat-more{display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line2);color:var(--muted);font-size:12px;font-weight:700;line-height:1}
.ring-start{border:2px dashed var(--line2);background:transparent}
.ring-start:hover{border-color:var(--accent);box-shadow:0 0 28px rgba(var(--accent-rgb),.18)}
.ring-plus{width:58px;height:58px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:300;line-height:1;box-shadow:0 0 22px rgba(var(--accent-rgb),.3)}
.ring-start-title{font-family:var(--serif);font-size:20px;color:var(--strong);margin-top:4px}
.ring-start-sub{font-size:12px;color:var(--muted)}
.ring .seat-empty{width:26px;height:26px;border:2px dashed var(--line2);background:var(--bg);box-shadow:none}
.ring-start:hover .seat-empty{border-color:rgba(var(--accent-rgb),.5)}
.circle-new-card{max-width:620px;margin:10px auto 40px;padding:22px 24px;border:1px solid rgba(var(--accent-rgb),.35);border-radius:20px;background:var(--panel)}
.circle-new-card h2{font-size:28px;margin:0 0 4px}
.circle-hero{display:flex;flex-wrap:wrap;align-items:center;gap:36px 48px;padding:34px 24px 30px;margin-bottom:22px}
.circle-hero .ring{--name:28px}
.circle-hero-text{flex:1 1 300px;min-width:0}
@media (max-width:640px){
  .circle-cluster{flex-direction:column;gap:64px;padding-top:44px}
  .circle-cluster > :nth-child(even){margin-top:0}
  .circle-hero{flex-direction:column;text-align:center;padding:30px 0 20px}
  .circle-hero-text{flex:0 0 auto;width:100%}
  .circle-hero-text .circle-private,.circle-hero-text > div{justify-content:center}
}

@media (max-width:560px){.askbox textarea{flex-basis:100%}}

/* "Your circles" as bubbles: sized by members, packed together; faces peek out on hover */
.bubbles-wrap{padding:30px 0 34px}
.bubbles{position:relative;width:100%;margin:0 auto;container-type:inline-size}
.bubbles-tall{display:none}
@media (max-width:640px){.bubbles-wide{display:none}.bubbles-tall{display:block}}
.bubble{position:absolute;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3em;text-align:center;text-decoration:none;color:var(--text);
  background:radial-gradient(circle at 38% 30%,var(--c-a),var(--c-b) 45%,var(--c-c) 75%);box-shadow:inset 0 0 0 2px var(--c-line),0 0 36px var(--c-glow);transition:transform .25s,box-shadow .25s}
.bubble:hover,.bubble:focus-visible{text-decoration:none;transform:scale(1.04);box-shadow:inset 0 0 0 2px var(--c),0 0 46px var(--c-glow)}
.bubble-name{font-family:var(--serif);color:var(--hi);font-size:max(15px,calc(var(--w) * .115cqw));line-height:1.1;max-width:74%;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.bubble-meta{font-size:max(11.5px,calc(var(--w) * .05cqw));color:var(--soft-text)}
.bubble-face{position:absolute;transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 3px var(--bg);line-height:0;opacity:0;transition:opacity .25s}
.bubble:hover .bubble-face,.bubble:focus-visible .bubble-face{opacity:1}
@media (hover:none){.bubble-face{opacity:1}}
.bubble-seed{border:2px dashed rgba(var(--accent-rgb),.6);background:radial-gradient(circle,rgba(var(--accent-rgb),.14),rgba(var(--accent-rgb),0) 70%);box-shadow:0 0 34px rgba(var(--accent-rgb),.2);gap:.25em}
.bubble-seed:hover{box-shadow:0 0 46px rgba(var(--accent-rgb),.32)}
.seed-plus{width:44%;aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;font-size:max(24px,calc(var(--w) * .2cqw));font-weight:300;line-height:1}
.seed-label{font-size:12px;color:var(--text);white-space:nowrap}

/* Starting a circle: the form is a round table */
.table-card{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:40px 56px;max-width:1000px;margin:10px auto 50px;padding:20px 0}
.table-ring{position:relative;flex:0 0 auto;width:380px;aspect-ratio:1;border-radius:50%;border:3px solid var(--ring);background:radial-gradient(circle at 50% 40%,rgba(58,77,104,.14),rgba(var(--panel-rgb),.6) 72%);transition:border-color .3s,box-shadow .3s,background .3s}
.table-ring.named{border-color:var(--accent);background:radial-gradient(circle at 50% 40%,rgba(var(--accent-rgb),.10),rgba(var(--panel-rgb),.6) 72%);box-shadow:0 0 50px rgba(var(--accent-rgb),.14)}
.table-center{position:absolute;inset:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center}
.table-name{font-family:var(--serif);font-size:34px;line-height:1.1;color:#5c6b80;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.table-ring.named .table-name{color:var(--strong)}
.table-blurb{font-size:14.5px;color:var(--muted);max-width:100%}
.table-count{font-size:13px;color:var(--muted)}
.chair{position:absolute;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;border:2px dashed var(--ring);background:var(--bg);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;transition:all .25s}
.chair.taken{border:0;box-shadow:0 0 0 4px var(--bg);color:var(--ink-text)}
.chair-you{border:0;box-shadow:0 0 0 4px var(--bg),0 0 0 6px var(--accent);line-height:0}
.table-form{flex:1 1 360px;max-width:460px}
.table-form h2{font-size:32px;margin:0 0 4px}
.field-white{background:#eef4fa;color:var(--ink-text);border-color:var(--field-border)}
.field-white::placeholder{color:#6b7a8f}
.field-white:focus{background:#fff}
@media (max-width:640px){.table-ring{width:280px}.table-name{font-size:26px}.chair{width:38px;height:38px}.table-card{gap:30px}}

.share-row{display:flex;flex-wrap:wrap;gap:10px}
.link-tools{display:inline-flex;gap:4px;margin-left:6px}.link-tools form{display:inline}

.mag-earlier{margin-top:10px}
.mag-earlier-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px}
.mag-earlier-list li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
.mag-earlier-list a{font-family:var(--serif);font-size:17px;color:var(--text);line-height:1.3}
@media (max-width:720px){.mag-earlier-list{grid-template-columns:1fr}}

/* Photos: full-screen viewer */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(var(--scrim-rgb),.94);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 12px 70px;touch-action:pan-y}
.lightbox[hidden]{display:none}
html.lb-open{overflow:hidden}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;min-height:0;flex:1;justify-content:center}
.lb-img{max-width:min(96vw,1400px);max-height:calc(100vh - 170px);object-fit:contain;border-radius:8px;box-shadow:0 10px 50px rgba(0,0,0,.5)}
.lb-cap{color:#dbe6f2;font-size:15px;text-align:center;max-width:720px}
.lb-bar{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;align-items:center;gap:18px;font-size:14px;color:#b9c6d6}
.lb-link{color:var(--accent)}
.lb-close,.lb-prev,.lb-next{position:absolute;width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(var(--panel-rgb),.7);color:#fff;font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb-close{top:12px;right:12px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}.lb-next{right:14px;top:50%;transform:translateY(-50%)}
.lb-prev[hidden],.lb-next[hidden]{display:none}
@media (max-width:640px){.lb-prev,.lb-next{display:none}}
.prose figure.img > a{cursor:zoom-in}

/* Several photos in one post: a swipeable carousel */
.carousel{position:relative;margin:14px 0 6px}
.prose .carousel .gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;margin:0;border-radius:14px;scrollbar-width:none;background:var(--media);border:1px solid var(--line)}
.prose .carousel .gallery::-webkit-scrollbar{display:none}
.prose .carousel .gallery figure.img{flex:0 0 100%;scroll-snap-align:center;margin:0;display:flex;flex-direction:column;align-items:center}
.prose .carousel .gallery img{width:100%;aspect-ratio:4/3;object-fit:contain;border:0;border-radius:0;max-height:none;background:var(--media)}
.prose .carousel figcaption{padding:6px 10px}
.car-count{position:absolute;top:10px;right:10px;padding:2px 9px;border-radius:999px;background:rgba(var(--scrim-rgb),.7);color:#fff;font-size:12px;font-weight:600}
.car-prev,.car-next{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.85);color:var(--ink-text);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.car-prev{left:10px}.car-next{right:10px}
.carousel.at-start .car-prev,.carousel.at-end .car-next{display:none}
@media (hover:none){.car-prev,.car-next{display:none}}
.car-dots{display:flex;justify-content:center;gap:6px;margin:0 0 12px}
.car-dots i{width:7px;height:7px;border-radius:50%;background:var(--line2);transition:background .2s}
.car-dots i.on{background:var(--accent)}

/* Photos grid (Instagram-style): square tiles, three across */
.photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 20px}
.photo-tile{display:block;aspect-ratio:1;overflow:hidden;border-radius:6px;background:var(--panel2)}
.photo-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.photo-tile:hover img{transform:scale(1.04)}
/* Circle albums: cover cards on the Photos page, a pick-and-remove mode inside an album. */
.albums{margin:0 0 28px}
.albums-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.albums-head h2,.albums-sub{font-size:26px;margin:0}
.albums-sub{margin:8px 0 12px}
.album-new{position:relative}.album-new>summary{list-style:none;cursor:pointer}.album-new>summary::-webkit-details-marker{display:none}
.album-new-form{display:grid;gap:8px;margin-top:10px;min-width:min(420px,100%)}
.album-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (min-width:700px){.album-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.album-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.album-card{display:flex;flex-direction:column;gap:4px;color:var(--text);text-decoration:none}
.album-cover{display:block;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--panel2);border:1px solid var(--line)}
.album-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.album-card:hover .album-cover img{transform:scale(1.04)}
.album-empty{display:flex;align-items:center;justify-content:center;height:100%;font-size:40px;opacity:.5}
.album-name{font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.album-n{font-size:13px}
.album-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.album-edit{display:grid;gap:12px;margin:0 0 16px}
.album-rename{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:700px){.album-rename{grid-template-columns:1fr 1.4fr auto}}
.album-edit-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.album-pick{position:relative;cursor:pointer}
.album-pick input{position:absolute;top:8px;left:8px;width:22px;height:22px;accent-color:var(--accent)}
.album-pick:has(input:checked) img{opacity:.55}
.album-cover-badge{position:absolute;bottom:6px;left:6px;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff}
.album-pager{display:flex;justify-content:center;align-items:center;gap:14px;margin:22px 0;flex-wrap:wrap}
@media (min-width:900px){.photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
@media (max-width:480px){.photo-grid{gap:3px}.photo-tile{border-radius:0}}

@media (pointer:coarse){.send-hint{display:none}}

.fresh-card{animation:freshcard 5s ease-out}
@keyframes freshcard{0%{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.7),0 0 28px rgba(var(--accent-rgb),.25)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.fresh-card{animation:none}}

/* Private conversations: replying to a specific message */
.pm-replying{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:8px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.35);font-size:14px;color:var(--text)}
.pm-replying[hidden]{display:none}
.pm-replying-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* People in a private conversation: tap to open their profile */
.person-chip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 14px 4px 4px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);color:var(--text);font-weight:600;text-decoration:none;transition:border-color .15s,background .15s}
.person-chip:hover,.person-chip:focus-visible{border-color:var(--accent);background:var(--panel);text-decoration:none}

.convo-title{font-weight:400;color:var(--muted)}

/* Voice messages */
.voice{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:8px 0;padding:8px 12px;border-radius:14px;background:rgba(var(--accent-rgb),.06);border:1px solid rgba(var(--accent-rgb),.25);max-width:460px}
.voice audio{height:36px;flex:1 1 220px;min-width:0}
.voice-label{font-size:13px;color:var(--muted)}
/* Transcripts under recordings (transcribe.js) */
.transcript{margin:-2px 0 10px;max-width:640px;border:1px solid var(--line2);border-radius:12px;background:var(--panel2)}
.transcript>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:8px;padding:9px 14px;min-height:24px;font-size:14px}
.transcript>summary::-webkit-details-marker{display:none}
.transcript>summary::before{content:"▸";color:var(--muted);font-size:12px;transition:transform .15s}
.transcript[open]>summary::before{transform:rotate(90deg)}
.transcript .tx-h{font-weight:600;color:var(--text)}
.transcript .tx-meta{color:var(--muted);font-size:13px}
.transcript .tx-body{padding:2px 14px 10px;max-height:420px;overflow-y:auto;font-size:15px;line-height:1.6;unicode-bidi:plaintext}
.transcript .tx-body p{margin:0 0 10px}
.transcript a.tx-t{display:inline-block;min-width:38px;margin-right:4px;font-size:12px;font-variant-numeric:tabular-nums;color:var(--accent);text-decoration:none;padding:2px 0}
.transcript a.tx-t:hover{text-decoration:underline}
.transcript .tx-trbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:4px 0 10px;font-size:13px;color:var(--muted)}
.transcript .tx-trbtn{font:inherit;font-size:13px;font-weight:600;color:var(--accent);background:none;border:0;padding:6px 0;min-height:32px;cursor:pointer}
.transcript .tx-trbtn:hover{text-decoration:underline}
.transcript .tx-trbtn:disabled{color:var(--muted);cursor:default;text-decoration:none}
.transcript .tx-foot{font-size:12px;color:var(--muted);margin:4px 0 0}
.tx-note{margin:-2px 0 10px;font-size:13px;color:var(--muted)}
/* In private messages: just a small link under the voice message until it's tapped */
.transcript.tx-link{border:0;background:none;margin:2px 0 6px}
.transcript.tx-link>summary{padding:2px 0;min-height:0;font-size:13px}
.transcript.tx-link>summary::before{content:none}
.transcript.tx-link .tx-h{font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.transcript.tx-link[open] .tx-h{text-decoration:none}
.transcript.tx-link .tx-body{padding:6px 0 2px;max-height:300px;font-size:14.5px}
.voice-rec{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 10px;padding:10px 14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);color:var(--text)}
.voice-rec audio{height:38px;flex:1 1 220px;min-width:0}
.voice-rec .btn{min-height:40px;padding:8px 16px}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 0 rgba(248,113,113,.6);animation:recpulse 1.2s infinite}
@keyframes recpulse{70%{box-shadow:0 0 0 10px rgba(248,113,113,0)}100%{box-shadow:0 0 0 0 rgba(248,113,113,0)}}
.rec-time{font-variant-numeric:tabular-nums;font-weight:600;margin-right:auto}

/* A circle at scale: topics down the side (chips on a phone), search, welcome, pins */
.circle-hero-compact{padding:22px 10px 18px;margin-bottom:10px;gap:28px 40px}
.circle-hero-compact .ring{--name:22px}
.circle-main{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;align-items:start}
.topic-nav{position:sticky;top:14px;display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.topic-nav-h{margin:0 0 6px;padding:0 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--strong)}
.topic-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:38px;padding:6px 10px;border-radius:10px;color:var(--text);text-decoration:none;font-size:15px;cursor:pointer;list-style:none}
.topic-link::-webkit-details-marker{display:none}
.topic-link span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topic-link:hover{background:rgba(var(--hl-rgb),.05);text-decoration:none}
.topic-link.on{background:rgba(var(--accent-rgb),.10);color:var(--strong);font-weight:600}
.topic-unsorted{color:var(--muted)}
.topic-n{font-size:12.5px;color:var(--faint)}
.topic-new{min-width:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;text-align:center}
.topic-add summary{color:var(--accent)}
.topic-add-form{display:flex;flex-direction:column;gap:8px;padding:6px 4px 4px}
.topic-add-form .field{margin:0;padding:10px 12px;font-size:14px}
.topic-add-form .btn{min-height:38px}
.circle-search{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.circle-search .field{margin:0;border-radius:999px;padding:11px 18px}
.circle-welcome{margin:0 0 16px;padding:14px 18px;border-radius:16px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.08),rgba(var(--accent-rgb),.02));border:1px solid rgba(var(--accent-rgb),.3)}
.circle-welcome-h,.pinned-h{display:flex;align-items:center;gap:6px;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pinned{margin:0 0 20px}
.pinned-h{color:var(--warn-soft)}
.topic-title{font-family:var(--serif);font-weight:500;font-size:30px;margin:4px 0 12px;color:var(--strong)}
.circle-card{position:relative}
.topic-tag{position:absolute;top:14px;right:16px;z-index:1;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);font-size:12.5px;color:var(--muted);text-decoration:none}
.topic-tag:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.circle-tools{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0 0;padding:10px 14px;border-radius:12px;border:1px dashed var(--line2)}
.circle-tool{display:flex;align-items:center;gap:8px}
.circle-tool label{font-size:13px;color:var(--muted)}
.circle-tool .field{margin:0;padding:8px 10px;min-width:160px}
.circle-tool .btn{min-height:38px;padding:6px 14px}
.topic-admin{list-style:none;margin:0;padding:0}
.topic-admin li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--line)}
.topic-admin-row{display:flex;align-items:center;gap:8px;flex:1}
.topic-admin-row .field{margin:0;padding:8px 12px;max-width:280px}
.pill-mod{border-color:rgba(var(--accent-rgb),.45);color:var(--accent)}
@media (max-width:820px){
  .circle-main{grid-template-columns:1fr;gap:14px}
  .topic-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:6px;gap:6px;border-radius:999px}
  .topic-nav::-webkit-scrollbar{display:none}
  .topic-nav-h{display:none}
  .topic-link{flex:0 0 auto;min-height:36px;padding:4px 12px;border-radius:999px;border:1px solid var(--line2);gap:6px}
  .topic-add{flex:0 0 auto}
  .topic-add[open]{position:absolute;z-index:5;margin-top:44px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:8px}
  .topic-tag{position:static;display:inline-block;margin:0 0 6px}
}

.ai-suggest{margin:0 0 16px;padding:14px 18px;border-radius:16px;border:1px solid rgba(165,180,252,.45);background:linear-gradient(135deg,rgba(165,180,252,.10),rgba(165,180,252,.02))}
.ai-suggest-h{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a5b4fc}
.ai-suggest-item{display:inline-block;margin:4px 6px 0 0;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);font-size:13px;color:var(--text)}
.topic-known{margin:0 0 18px;padding:14px 18px;border-radius:16px;border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.05)}
.topic-known-h{margin:0 0 6px;font-family:var(--serif);font-size:20px;color:var(--strong)}
.topic-known-h .faint{font-family:var(--sans);font-size:12.5px}
.my-circle-prefs{margin:0 0 18px;padding:12px 16px}

.circle-similar{margin:8px 0 0;padding:10px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);display:flex;flex-direction:column;gap:4px}
.circle-similar[hidden]{display:none}

.badge-bot{display:inline-block;margin-left:6px;padding:0 6px;border-radius:6px;background:rgba(147,197,253,.15);border:1px solid rgba(147,197,253,.5);color:#93c5fd;font-size:11px;font-weight:700;letter-spacing:.04em;vertical-align:middle}
.hook-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.hook-add .field{margin:0;flex:1 1 200px}

/* One-tap circles: the start buttons, and the "Set up your circle" card inside a new circle */
button.bubble,button.ring{font:inherit;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none}
button.ring-start{color:var(--text)}
.start-first{display:flex;flex-direction:column;align-items:center;gap:18px;margin:30px auto 50px}
.circle-setup{margin:0 0 26px;padding:20px 22px;border-radius:20px;border:1px solid rgba(var(--accent-rgb),.35);background:linear-gradient(135deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.02))}
.circle-setup h2{font-size:28px;margin:0 0 12px}
.setup-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.setup-steps>li{padding:14px 16px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.setup-steps>li.now{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 22px rgba(var(--accent-rgb),.10)}
.setup-step-h{margin:0 0 10px;font-weight:700;color:var(--strong)}
.setup-steps>li.done .setup-step-h{color:var(--accent)}
.setup-name{display:flex;flex-direction:column;gap:8px}.setup-name .field{margin:0}.setup-name .btn{align-self:flex-start}
.circle-setup .share-row .btn{min-height:44px}

/* Who's around a circle right now (circle page): a line under its name, seat dots, card chips, topic dots */
.circle-now{display:flex;flex-wrap:wrap;gap:8px 14px;margin:8px 0 4px}
.circle-now[hidden]{display:none}
.now-person{display:inline-flex;align-items:center;gap:6px;position:relative;font-size:14px;color:var(--text)}
.now-person a{color:var(--accent)}
.now-face{width:22px;height:22px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.now-letter{display:inline-flex;align-items:center;justify-content:center;background:var(--panel2);font-size:11px;font-weight:700}
.now-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg),0 0 10px rgba(var(--accent-rgb),.7);flex:0 0 auto;animation:nowpulse 2.4s ease-in-out infinite}
.now-person .now-dot{position:absolute;left:15px;top:-2px}
@keyframes nowpulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.now-dot{animation:none}}
.ring .seat.online{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent),0 0 16px rgba(var(--accent-rgb),.55)}
.live-chip{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--accent)}
.circle-card.live-now article.card{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 0 22px rgba(var(--accent-rgb),.08)}
.topic-link.live-topic span:first-child::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(var(--accent-rgb),.7);vertical-align:middle}

/* Feedback (/feedback and the host's /admin/feedback) */
.fb-kinds{border:0;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.fb-kind{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 16px 6px 12px;border:1px solid var(--line2);border-radius:999px;cursor:pointer}
.fb-kind:has(input:checked){border-color:var(--accent);background:rgba(var(--accent-rgb),.10)}
.fb-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.fb-meta{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fb-status{font-size:12px;font-weight:700;padding:2px 10px;border-radius:999px;border:1px solid var(--line2)}
.fb-new{color:#7dd3fc;border-color:rgba(125,211,252,.5)}.fb-planned{color:var(--warn-soft);border-color:rgba(252,211,77,.5)}
.fb-done{color:var(--accent);border-color:rgba(var(--accent-rgb),.5)}.fb-closed{color:var(--muted)}
.fb-reply{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.25)}
.fb-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.fb-tab{padding:6px 14px;border-radius:999px;border:1px solid var(--line2);text-decoration:none;color:var(--text)}
.fb-tab.on{border-color:var(--accent);color:var(--accent)}
.fb-admin textarea{min-height:70px;margin:0 0 8px}
.fb-actions{display:flex;flex-wrap:wrap;gap:8px}

/* The app: room for the iPhone's notch and home bar when installed (viewport-fit=cover) */
body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.wrap{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* The install invitation (phones, second visit on) and the Get the app page */
.install-bar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:12px 12px 12px 14px;border-radius:18px;background:rgba(var(--panel-rgb),.97);border:1px solid rgba(var(--accent-rgb),.4);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.install-bar[hidden],.install-bar [hidden]{display:none}
.install-bar img{border-radius:10px;flex:0 0 auto}
.install-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;font-size:14px;line-height:1.35}
.install-bar .btn{flex:0 0 auto;min-height:44px}
.install-x{flex:0 0 auto;width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.install-x:hover{color:var(--text)}
/* On a phone the button gets its own row, so a longer language ("Cài ứng dụng") doesn't squeeze the
   words into a narrow column. */
@media (max-width:560px){.install-bar{flex-wrap:wrap;row-gap:10px}.install-bar .btn{order:3;flex:1 1 100%}}
.app-page .app-icon{border-radius:20px;box-shadow:0 0 30px rgba(var(--accent-rgb),.18);margin:6px 0 16px}
.app-steps h2{margin:0 0 10px}
.app-steps ol,.app-steps ul{margin:0 0 8px;padding-left:22px;line-height:1.7}
.app-ico{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid var(--line2);color:var(--accent)}
.app-more{margin-top:16px}.app-more .app-steps{margin-top:12px}
.btn-big{min-height:52px;padding:12px 30px;font-size:17px}

/* Sign-in code box */
.code-form .code-field{max-width:220px;font-size:26px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}

/* ---- Phones: a slim top bar and a tab bar at the bottom ------------------------------------ */
.tabbar{display:none}
.pl-short{display:none}
@media (max-width:640px){
  .pl-long{display:none}.pl-short{display:inline}
  .prelaunch{padding:6px 16px;font-size:13px}
  .prelaunch a{color:var(--accent-soft);text-decoration:underline}
  /* The header keeps the wordmark, the house AIs, search and the notification bell (the host's
     shield too); everything else moves to the tabs. Light/dark is set once, under You → Appearance
     (Auto by default), so its switch stays off the phone header. */
  .top{flex-wrap:nowrap;padding:10px 0 8px}
  .wordmark{font-size:30px}
  .top .nav-main{display:none}
  .nav-tools > :not(.nav-ais):not(.nav-search):not(.signin-link):not(.nav-notes):not(.nav-host){display:none}
  .nav-tools .bell.nav-notes,.nav-tools .bell.nav-host{width:44px;height:44px}
  /* Signed out: Sign in stays at the top right, where people look for it (it's also the last tab). */
  .nav-tools .signin-link{display:inline-flex;align-items:center;min-height:36px;margin-left:4px;padding:6px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:14.5px;text-decoration:none;white-space:nowrap}
  .nav-tools{gap:0 4px}
  .nav-tools .nav-search{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--text)}
  .nav-tools .bell.nav-ais{width:44px;height:44px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;justify-content:space-around;align-items:stretch;
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));background:rgba(var(--bar-rgb),.96);border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  /* iPhone Safari can leave the bar floating above the screen's bottom edge while its own toolbar
     shrinks on scroll, with the page showing underneath (two readers' screenshots, 10-16). The bar's
     colour carries on below it, so nothing ever shows through there. */
  .tabbar::after{content:"";position:absolute;left:0;right:0;top:100%;height:50vh;background:rgb(var(--bar-rgb));pointer-events:none}
  /* app.js puts the bar back on the bottom edge when Safari leaves it floating, and moves it aside while typing. */
  .tabbar.tabbar-away{visibility:hidden}
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:600}
  .tab:hover{text-decoration:none;color:var(--text)}
  .tab.on{color:var(--accent)}
  .tab-ico{position:relative;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
  .tab-ico .av{width:26px;height:26px}
  .tab.on .tab-ico .av{box-shadow:0 0 0 2px var(--accent)}
  /* A long label ("Quảng trường") takes two short lines instead of being cut off. */
  .tab-label{max-width:100%;text-align:center;line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .tab-n{position:absolute;top:-4px;right:-10px;background:var(--accent);color:var(--accent-ink);font-size:10.5px;font-weight:700;border-radius:999px;padding:0 5px;line-height:16px;box-shadow:0 0 0 2px rgba(var(--bar-rgb),.96)}
  /* Things that sit at the bottom move up above the tabs. */
  .install-bar{bottom:calc(78px + env(safe-area-inset-bottom))}
  .new-pill,.share-toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .pick-bar{bottom:calc(64px + env(safe-area-inset-bottom))}
}

/* The You page */
/* The You page: a profile card with its numbers, four tiles that say what's in them, then lists. */
.you-head{display:flex;align-items:center;gap:14px;margin:6px 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--panel);text-decoration:none;color:var(--text)}
.you-head:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03)}
.you-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.you-head strong{display:block;font-size:22px;font-weight:500;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-head .faint{display:block;font-size:14px}
.you-stats{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.you-h{margin:18px 4px 8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.you-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.you-tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico n" "label label" "sub sub";align-items:center;gap:2px 10px;padding:14px 14px 12px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none;min-height:104px}
.you-tile:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03)}
.you-tile svg{grid-area:ico;color:var(--accent)}
.you-tile-n{grid-area:n;justify-self:end;font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.you-tile-label{grid-area:label;margin-top:10px;font-size:16px;font-weight:600}
.you-tile-sub{grid-area:sub;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-label .faint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-label{min-width:0}
.you-list{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}
.you-list li + li{border-top:1px solid var(--line)}
.you-row{display:flex;align-items:center;gap:14px;min-height:54px;padding:8px 16px;color:var(--text);text-decoration:none}
.you-row:hover{text-decoration:none;background:rgba(var(--hl-rgb),.03)}
.you-row svg{color:var(--accent);flex:0 0 auto}
.you-label{flex:1 1 auto;display:flex;flex-direction:column;font-size:16px}
.you-label .faint{font-size:13px}
.you-n{background:var(--accent);color:var(--accent-ink);font-size:12px;font-weight:700;border-radius:999px;padding:1px 8px}
.you-chev{color:var(--faint);font-size:22px;line-height:1}

/* Your own profile: the photo up top changes it (pencil badge), and a Settings button */
.avatar-head{margin:0}
.avatar-head .avatar-pick .av{width:88px;height:88px}
.avatar-head .avatar-pen{border-color:var(--bg)}
.profile-btns{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.pill-strong{border-color:rgba(var(--accent-rgb),.55);color:var(--accent)}
#settings{scroll-margin-top:16px}

/* The voice recorder, in place of the message box: Cancel · ● time · Stop · Send */
.voice-rec{flex-wrap:nowrap;gap:8px;padding:8px 8px 8px 6px;min-height:60px;border-radius:999px;border-color:rgba(248,113,113,.45)}
.voice-rec .vr-live{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:8px;font-size:15px;color:var(--text)}
.voice-rec .rec-time{margin-right:0}
.vr-icon{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.vr-icon:hover{color:var(--text);background:rgba(var(--hl-rgb),.06)}
.vr-stop{color:var(--danger);border:1px solid rgba(248,113,113,.5)}
.voice-rec .vr-send{flex:0 0 auto;min-height:44px;padding:8px 16px 8px 13px;gap:6px}
.voice-rec audio{flex:1 1 auto;min-width:0;height:40px}
@media (max-width:380px){.voice-rec .vr-word{display:none}}

/* The host's Traffic page */
.tr-big{display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 18px}
.tr-big > div{flex:1 1 180px;padding:16px 20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.tr-num{display:block;font-family:var(--serif);font-size:40px;color:var(--strong);line-height:1.1}
.tr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:14px}
.tr-card h2{margin:0 0 10px;font-size:20px}
.tr-table{width:100%;border-collapse:collapse;font-size:14px}
.tr-table th{text-align:left;font-weight:600;color:var(--faint);padding:4px 6px;border-bottom:1px solid var(--line)}
.tr-table th:not(:first-child),.tr-table td:not(:first-child){text-align:right;width:64px;font-variant-numeric:tabular-nums}
.tr-table td{padding:6px;border-bottom:1px solid var(--line)}
.tr-table td:first-child{position:relative;word-break:break-all}
.tr-bar{position:absolute;left:0;top:3px;bottom:3px;background:rgba(var(--accent-rgb),.10);border-radius:6px;z-index:0}
.tr-name{position:relative;z-index:1}
.tr-ranges .fb-tab{min-width:52px;text-align:center}
.tc-stack{display:grid;gap:14px;margin-bottom:14px}
.tc-note{margin:-4px 0 12px}
.tc{display:grid;grid-template-columns:auto 1fr;gap:0 10px;padding:6px 4px 26px 0}
.tc-y{position:relative;height:220px;min-width:30px}
.tc-y span{position:absolute;right:0;transform:translateY(50%);font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums;line-height:1}
.tc-plot{position:relative;height:220px;touch-action:pan-y;cursor:crosshair}
.tc-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tc-grid{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--line);opacity:.7}
.tc-grid.base{border-top-color:var(--line2);opacity:1}
.tc-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tc-area{fill:rgba(var(--accent-rgb),.10);stroke:none}
.tc-x{position:absolute;left:0;right:0;top:100%;height:22px}
.tc-x span{position:absolute;top:7px;transform:translateX(-50%);font-size:11.5px;color:var(--faint);white-space:nowrap}
.tc-x span.first{transform:none}.tc-x span.last{transform:translateX(-100%)}
.tc-hair{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--line2);pointer-events:none}
.tc-dot,.tc-pt{position:absolute;width:10px;height:10px;margin:0 0 -5px -5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--panel);pointer-events:none}
.tc-tip{position:absolute;top:-6px;transform:translateY(-100%);padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);box-shadow:0 6px 18px rgba(0,0,0,.12);font-size:12.5px;white-space:nowrap;pointer-events:none;z-index:2}
.tc-tip b{display:block;color:var(--strong);font-weight:600;margin-bottom:2px}.tc-tip span{color:var(--muted);font-variant-numeric:tabular-nums}
.tc-table{margin-top:4px}.tc-table summary{cursor:pointer;font-size:13px;color:var(--faint)}
.tc-table table{margin-top:8px;max-width:420px}
@media (max-width:640px){.tc-y,.tc-plot{height:170px}.tr-ranges{flex-wrap:wrap;gap:6px}.tr-ranges .fb-tab{min-width:0;padding-left:11px;padding-right:11px}.tc-x span.mid{display:none}}

/* Videos (reels) in posts: the first frame with a play button, then Cloudflare Stream's player */
.vid{position:relative;width:min(100%, calc(70vh * var(--r, .5625)));aspect-ratio:var(--r, .5625);margin:8px 0;border-radius:16px;overflow:hidden;background:var(--media);border:1px solid var(--line)}
.vid[data-state]:not([data-state="ready"]){aspect-ratio:auto;width:100%}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-poster{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;background:var(--media) center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.vid-play{width:64px;height:64px;border-radius:50%;background:rgba(var(--bar-rgb),.62);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.65),0 6px 24px rgba(0,0,0,.4);padding-left:3px}
.vid-poster:hover .vid-play{background:rgba(var(--accent-rgb),.85);color:var(--accent-ink)}
.vid-dur{position:absolute;right:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums}
.vid-msg{margin:0;padding:16px 18px;color:var(--muted);font-size:15px;display:flex;align-items:center;gap:10px}
.vid-label{display:none}

/* The Reels viewer: one video per screen, swipe up for the next */
.reels-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.reels-head h1{font-size:34px;margin:0}
.reels{height:calc(100vh - 230px);height:calc(100dvh - 230px);min-height:420px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;border-radius:20px;background:var(--media);scrollbar-width:none;max-width:560px;margin:0 auto}
.reels::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;justify-content:center}
.reel .vid{margin:0;border:0;border-radius:0;height:100%;width:auto;max-width:100%;background:var(--media) center/contain no-repeat}
.reel-cap{position:absolute;left:0;right:0;bottom:0;padding:40px 16px 16px;background:linear-gradient(transparent,rgba(0,0,0,.75));color:#fff;font-size:15px;pointer-events:none}
.reel-cap a{color:var(--accent-soft);pointer-events:auto}
.reel-end{flex-direction:column;gap:14px;color:var(--muted)}
@media (max-width:640px){
  .reels{height:calc(100dvh - 250px - env(safe-area-inset-bottom));min-height:360px;border-radius:14px;margin:0 -8px}
  .reels-head h1{font-size:28px}
}

/* Reels: the action rail (like, comments, share) and the comments sheet */
.reel-rail{position:absolute;right:10px;bottom:84px;display:flex;flex-direction:column;gap:14px;z-index:2}
.reel-act{display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;padding:6px 0;border:0;border-radius:14px;background:rgba(0,0,0,.28);color:#fff;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.reel-act svg{filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}
.reel-act.on{color:#ff5c7a}
.reel-act:hover{background:rgba(0,0,0,.45)}
.reel-cap{padding-right:76px}
.reel-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;z-index:80;width:min(560px,100%);max-height:70vh;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line2);border-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.5);padding-bottom:env(safe-area-inset-bottom)}
.reel-sheet[hidden]{display:none}
.reel-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.reel-sheet-x{width:44px;height:44px;border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}
.reel-sheet-list{flex:1 1 auto;overflow-y:auto;padding:12px 16px}
.reel-c{display:flex;gap:10px;margin:0 0 14px}
.reel-c-who{margin:0 0 2px;font-size:14px}
.reel-c .prose{font-size:15px}.reel-c .prose p{margin:0 0 6px}
.reel-c-more{margin:6px 0 4px;font-size:14px}
.reel-sheet-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line);margin:0}
.reel-sheet-form textarea{flex:1 1 auto;min-height:44px;max-height:140px;margin:0;resize:vertical}
@media (max-width:640px){.reel-sheet{bottom:calc(64px + env(safe-area-inset-bottom));max-height:62vh}}

/* ---- Reels mode: the viewer takes over the screen, like Instagram and TikTok ---------------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body.reels-mode{background:#000}
body.reels-mode::before{display:none}
body.reels-mode .prelaunch,body.reels-mode header.top,body.reels-mode .foot,body.reels-mode .install-bar{display:none}
body.reels-mode .reels{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:min(100vw, 620px);height:auto;min-height:0;max-width:none;margin:0;border-radius:0;z-index:40;background:#000}
.reels-top{display:none}
body.reels-mode .reels-top{display:flex;align-items:center;gap:6px;position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100vw, 620px);z-index:45;padding:calc(6px + env(safe-area-inset-top)) 10px 18px;background:linear-gradient(rgba(0,0,0,.55),transparent);pointer-events:none}
.reels-back{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:#fff}
.reels-back:hover{background:rgba(255,255,255,.12)}
.reels-nav{display:none}
@media (hover:hover) and (pointer:fine){
  body.reels-mode .reels-nav{display:flex;flex-direction:column;gap:12px;position:fixed;top:50%;left:calc(50% + min(50vw, 310px) + 18px);transform:translateY(-50%);z-index:45}
  .reels-nav button{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}
  .reels-nav button:hover{background:rgba(255,255,255,.26)}
  .reels-nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}
}
@media (hover:hover) and (pointer:fine) and (max-width:760px){body.reels-mode .reels-nav{left:auto;right:12px}}
.reels-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:60vh;padding:80px 24px;text-align:center;color:#fff}
body.reels-mode .reels-empty{position:fixed;inset:0;z-index:41;min-height:0}
.reels-empty p{max-width:34ch;margin:0;font-size:17px;line-height:1.45;color:rgba(255,255,255,.85)}
.reels-empty .reels-empty-big{font-size:46px;color:rgba(255,255,255,.35)}
.reels-title{color:#fff;font-weight:700;font-size:17px;text-shadow:0 1px 6px rgba(0,0,0,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.reels-mode .reel{height:100%}
body.reels-mode .reel .vid{width:100%;height:100%;max-width:none;aspect-ratio:auto;background:#000 center/contain no-repeat}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
@media (max-width:640px){
  body.reels-mode .reels{width:100vw;bottom:calc(64px + env(safe-area-inset-bottom))}
  body.reels-mode .reels-top{width:100vw}
  body.reels-mode .reel-video{object-fit:cover}
  body.reels-mode .reel .vid{background-size:cover}
  body.reels-mode .tabbar{background:#000;border-top-color:#1a1a1a}
  body.reels-mode{padding-bottom:0}
}
/* The tap layer (pause/play, double-tap to like) sits over the video, under the rail and caption. */
.reel-tap{position:absolute;inset:0;z-index:1;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.reel-paused,.reel-needs-tap{display:none;pointer-events:none}
.reel.paused .reel-paused{display:flex;width:84px;height:84px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:38px;align-items:center;justify-content:center;padding-left:6px}
.reel.needs-tap .reel-needs-tap{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:10px 18px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-weight:700}
.reel-cap,.reel-rail{z-index:2}
.reel-burst{position:absolute;z-index:3;transform:translate(-50%,-50%);font-size:96px;color:#ff3b5c;pointer-events:none;text-shadow:0 4px 18px rgba(0,0,0,.4);animation:reelburst .9s ease-out forwards}
@keyframes reelburst{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}60%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9)}}
@media (prefers-reduced-motion:reduce){.reel-burst{animation-duration:.01s}}
/* Sound button: crossed out when off */
[data-reel-sound] .waves{display:none}
[data-reel-sound].on .waves{display:inline}
[data-reel-sound].on .mute{display:none}
.reel-rail{bottom:calc(96px + env(safe-area-inset-bottom))}
body.reels-mode .reel-cap{padding-bottom:calc(18px + env(safe-area-inset-bottom))}
@media (max-width:640px){body.reels-mode .reel-cap{padding-bottom:18px}.reel-rail{bottom:90px}}

/* The emoji picker, just under the composer */
.emoji-pop{margin:8px 0 4px;padding:10px 12px;max-height:260px;overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.emoji-h{margin:4px 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:2px;margin-bottom:6px}
.emoji-grid button{height:40px;border:0;border-radius:10px;background:transparent;font-size:24px;line-height:1;cursor:pointer}
.emoji-grid button:hover,.emoji-grid button:focus-visible{background:rgba(var(--hl-rgb),.08)}

/* Searching someone's posts, at the top right of their profile */
.profile-search{margin:0 0 0 auto;flex:0 1 340px;align-self:flex-start}
.profile-search .field{width:100%;margin:0}
.profile-hits .log-row .chip{margin-right:6px;vertical-align:middle}
.profile-hits mark{background:rgba(var(--accent-rgb),.22);color:var(--strong);border-radius:3px;padding:0 2px}
@media (max-width:640px){.profile-search{flex:1 1 100%;margin:4px 0 0}}

/* Switches (on/off settings) and segmented controls (pick one of a few) */
.switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:10px 0;padding:6px 0;cursor:pointer;color:var(--text)}
.switch-text{flex:1 1 auto;min-width:0;line-height:1.4}
.switch-sub{display:block;font-size:13px;margin-top:2px}
.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.switch-ui{position:relative;flex:0 0 auto;width:52px;height:32px;border-radius:999px;background:var(--switch-off);transition:background .2s;box-shadow:inset 0 0 0 1px rgba(var(--hl-rgb),.08)}
.switch-ui::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .2s}
.switch input:checked + .switch-ui{background:var(--accent)}
.switch input:checked + .switch-ui::after{transform:translateX(20px)}
.switch input:focus-visible + .switch-ui{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.switch-ui,.switch-ui::after{transition:none}}
.seg{display:flex;width:100%;padding:3px;border-radius:999px;background:var(--panel2);border:1px solid var(--line2);margin:6px 0 4px}
.seg label{flex:1 1 0;min-width:0;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:6px 8px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);text-align:center;line-height:1.2;transition:background .15s,color .15s}
.seg input:checked + span{background:var(--accent);color:var(--accent-ink)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}
.seg label:hover input:not(:checked) + span{color:var(--text)}

/* "Saved ✓" beside a switch or choice that saved itself */
.saved-tick{display:inline-block;margin-left:10px;font-size:13px;font-weight:600;color:var(--accent);opacity:0;transition:opacity .25s}
.saved-tick.on{opacity:1}
.switch .saved-tick{position:absolute;right:62px;margin:0}
.switch{position:relative}
.opts > .saved-tick{display:block;margin:4px 0 0}
[data-dirty-save]{margin:14px 0 6px}

/* Settings rows and the account buttons */
.push-card .switch{margin:0}
.push-test{margin:4px 0 0;padding-left:0}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:10px 0;color:var(--text);text-decoration:none;border-top:1px solid var(--line)}
.set-row:hover{text-decoration:none;color:var(--accent)}
.set-row > span:first-child{display:flex;flex-direction:column}
.btn-invite{width:100%}
button.btn.btn-signout{width:100%;background:transparent;color:var(--danger);border:1px solid rgba(255,107,129,.55)}
button.btn.btn-signout:hover{color:var(--hi);background:rgba(255,107,129,.16);filter:none}
.push-test[hidden]{display:none}

/* Edit profile: a live preview on top, then one row per item, edited in place */
.ep-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}
.ep-bar h1{font-size:34px;margin:0}
.ep-cap{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.ep-preview{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);margin:0 0 22px}
.ep-cover{position:relative;aspect-ratio:3 / 1;background:linear-gradient(135deg,var(--cover-a),var(--cover-b) 60%,var(--ink-text)) center/cover no-repeat}
.ep-cover.busy::after{content:"";position:absolute;inset:0;background:rgba(var(--bar-rgb),.55)}
.ep-cover-tools{position:absolute;right:12px;bottom:12px;display:flex;gap:8px}
.ep-cover-form,.ep-cover-remove{margin:0}
.ep-cover-remove .ep-cover-btn{border:0;font:inherit;font-size:14px;font-weight:600}
.ep-cover-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font-size:14px;font-weight:600;cursor:pointer;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ep-cover-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.ep-preview .avatar-pick{margin-top:-48px;margin-left:18px;display:inline-block}
.ep-preview .avatar-pick .av{width:96px;height:96px;box-shadow:0 0 0 4px var(--panel)}
.ep-preview .avatar-pick .avatar-pen{border-color:var(--panel)}
.ep-avatar{margin:0}
.ep-who{padding:8px 18px 18px}
.ep-name{font-size:28px;margin:0;color:var(--strong)}
.ep-handle{margin:0 0 6px}
.ep-bio{margin:6px 0 0;white-space:pre-wrap}
.ep-who .profile-links{margin-top:10px}
.pill .link-ico,.profile-links .link-ico{margin-right:6px;flex:0 0 auto}
.ep-rows .ep-row{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:4px 12px;min-height:56px;padding:10px 16px;cursor:pointer;position:relative}
.ep-rows .ep-row:hover{background:rgba(var(--hl-rgb),.03)}
.ep-row.ep-static{cursor:default}.ep-row.ep-static:hover{background:none}
.ep-label{color:var(--muted);font-size:15px;font-weight:600}
.ep-link-label{display:inline-flex;align-items:center;gap:8px;color:var(--text);min-width:0}
.ep-link-label > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-val{color:var(--accent);font-size:16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ep-row[data-field="bio"] .ep-val{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ep-val.empty{color:var(--faint)}
.ep-edit{color:var(--faint)}
.ep-row.editing{cursor:default;background:rgba(var(--accent-rgb),.04)}
.ep-row.editing .ep-edit{visibility:hidden}
.ep-input{grid-column:2 / 4;margin:0;width:100%}
.ep-help{grid-column:1 / -1;font-size:13px}
.ep-row.ep-static .ep-help{grid-column:2 / 4}
.ep-count{grid-column:2 / 4;font-size:12.5px;text-align:right}
.ep-note{grid-column:1 / -1;font-size:13px;font-weight:600;color:var(--accent);display:none}
.ep-note.on{display:block}.ep-note.bad{color:var(--danger-soft)}
.ep-add .ep-label{color:var(--accent)}
@media (max-width:640px){.ep-rows .ep-row{grid-template-columns:96px 1fr auto}.ep-bar h1{font-size:28px}}

/* A profile's cover image */
.prof-cover{aspect-ratio:3 / 1;max-height:280px;width:100%;border-radius:18px;background:center/cover no-repeat;margin:4px 0 0}
.sq-head.has-cover{align-items:flex-start !important;margin-top:0;padding-top:0}
.sq-head.has-cover > :first-child{margin-top:-52px;margin-left:18px}
.sq-head.has-cover .avatar-pick .av,.sq-head.has-cover > .av{box-shadow:0 0 0 4px var(--bg)}
.ep-link{border-top:0;margin-top:0}

/* ---- The article editor (/write): calm, full page ---- */
.write{max-width:760px;margin:0 auto}
.write-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;margin:0 0 12px;background:linear-gradient(var(--bg) 70%,transparent)}
.write-back{color:var(--muted);text-decoration:none;font-weight:600}
.write-status{flex:1 1 auto;text-align:center;font-size:14px}
.write-hero{position:relative;aspect-ratio:2.2 / 1;border-radius:18px;border:2px dashed var(--line2);background:center/cover no-repeat;display:flex;align-items:center;justify-content:center;margin:0 0 18px}
.write-hero.has{border:0}
.write-hero-btn{border:0;cursor:pointer;min-height:44px;padding:8px 18px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:inherit;font-weight:600}
.write-hero:not(.has) .write-hero-btn{background:transparent;color:var(--accent);border:1px solid rgba(var(--accent-rgb),.5)}
.write-hero-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:24px;cursor:pointer}
.write-title,.write-sub{display:block;width:100%;resize:none;overflow:hidden;border:0;background:transparent;color:var(--strong);padding:0;margin:0 0 8px;outline:none;box-shadow:none;min-height:0 !important}
.write-title{font-family:var(--serif);font-size:44px;line-height:1.12;min-height:0}
.write-sub{font-size:21px;line-height:1.4;color:var(--muted)}
.write-title::placeholder,.write-sub::placeholder{color:var(--faint)}
.write-file{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 18px;padding:10px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.write-file select{flex:1 1 100%;margin:6px 0 0}
.write .composer textarea.write-body{min-height:60vh;font-size:18px;line-height:1.7}
.write-foot{margin:10px 0 40px}
@media (max-width:640px){.write-title{font-size:32px}.write-sub{font-size:18px}}

/* ---- Articles: the page ---- */
.article-head{max-width:860px;margin:0 0 6px}
.article-hero{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:0 0 18px}
.article-head h1{font-size:clamp(34px, 6vw, 56px);line-height:1.08;margin:8px 0 10px}
.article-sub{font-size:21px;line-height:1.45;color:var(--muted);margin:0 0 16px}
.article-by{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.article-by > span{display:flex;flex-direction:column}
.article-by-name{font-weight:700}
body.article-mode .main-col{max-width:820px}
.post.article-post{border:0;background:transparent;padding:0;margin:0 0 10px}
.post.article-post > .av{display:none}
.post.article-post .meta{display:none}
.post.article-post .prose{font-size:19px;line-height:1.75;color:var(--text)}
.post.article-post .prose h3,.post.article-post .prose h4,.post.article-post .prose h5{font-family:var(--serif);margin:1.6em 0 .5em}
.post.article-post .prose h3{font-size:30px}.post.article-post .prose h4{font-size:24px}
.post.article-post .prose p{margin:0 0 1.1em}
.post.article-post .prose figure,.post.article-post .prose .gallery,.post.article-post .prose .embed,.post.article-post .prose .vid{margin:1.4em 0}
.post.article-post .prose blockquote{font-size:21px;font-family:var(--serif);border-left-width:4px}
.article-discuss{font-family:var(--serif);font-size:30px;margin:34px 0 12px;padding-top:22px;border-top:1px solid var(--line)}

/* ---- Articles: the card in lists ---- */
.card.article-card{padding:0;overflow:hidden}
.article-card > :not(.article-card-hero){margin-left:22px;margin-right:22px}
.article-card-hero{display:block;aspect-ratio:2.4 / 1;overflow:hidden}
.article-card-hero img{width:100%;height:100%;object-fit:cover;display:block}
.article-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;margin-bottom:6px}
.article-label{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.article-card h3{font-size:26px;margin-top:4px}
.article-card-sub{margin-top:4px;margin-bottom:0;font-size:16px}
.article-card-by{margin-top:8px;margin-bottom:18px}

/* Tables in posts and articles: scroll sideways on a phone instead of squashing */
.md-table{overflow-x:auto;margin:1.2em 0;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.md-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;min-width:520px}
.md-table th{text-align:left;font-weight:700;color:var(--strong);background:rgba(var(--hl-rgb),.04);padding:10px 12px;border-bottom:1px solid var(--line2);white-space:nowrap}
.md-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.md-table tr:last-child td{border-bottom:0}
.md-table tbody tr:nth-child(even) td{background:rgba(var(--hl-rgb),.02)}
.post.article-post .prose .md-table{font-size:16px}
.article-updated{color:var(--accent);font-weight:600}
.md-table td,.md-table th{overflow-wrap:normal;word-break:normal;hyphens:none;min-width:6.5em}
.md-table table{width:max-content;min-width:100%;max-width:none}
.md-table td{max-width:22em}
/* More to the right: a soft fade on the edge until you scroll to the end */
.md-table{background:linear-gradient(to right,var(--bg) 30%,transparent),linear-gradient(to left,rgba(0,0,0,.35),transparent 24px) right/24px 100% no-repeat;background-attachment:local,scroll}
/* Appearance choice in Settings: three pills, the current one lit. */
.seg-links{display:flex;flex-wrap:wrap;gap:6px}
.seg-links a,.seg-links strong{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line2);border-radius:999px;font-size:14px;font-weight:500;color:var(--text);text-decoration:none}
.seg-links a:hover{border-color:var(--accent);text-decoration:none}
.seg-links strong{background:rgba(var(--accent-rgb),.14);border-color:var(--accent);color:var(--strong);font-weight:600}
.themes strong{color:var(--muted)}
/* A one-line question: the asker sits in the line under the title (t/[id]/[[slug]].js, titleOnly). */
.asked-by{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.asked-by .av,.asked-by .av-img{flex:0 0 auto}
.anchor-only{display:block;height:0;scroll-margin-top:90px}
.btn-danger-ghost{color:var(--danger);border-color:rgba(248,113,113,.5)}
/* Amazon's required disclosure under a post with an Amazon link (format.js AFFILIATE_NOTE). */
.prose .aff-note{margin:10px 0 0;font-size:12.5px;color:var(--faint)}
/* "Live numbers": the Ledger's data boards, in the top right of a square's header (functions/_lib/boards.js). */
.sq-cols{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-start}
.sq-main{flex:1 1 520px;min-width:0}
.sq-boards{flex:0 1 300px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;align-content:flex-start}
.sq-boards-h{flex-basis:100%;text-align:right;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:flex-end;gap:7px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5);animation:livepulse 2s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.5)}70%{box-shadow:0 0 0 8px rgba(var(--accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
.sq-board{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:6px 13px;border:1px solid;border-radius:999px;font-size:14px;font-weight:600;color:var(--text);background:rgba(var(--hl-rgb),.04);text-decoration:none}
.sq-board:hover{text-decoration:none;border-color:var(--accent) !important;color:var(--strong)}
@media (max-width:860px){.sq-boards{flex-basis:100%;justify-content:flex-start}.sq-boards-h{text-align:left;justify-content:flex-start}}
/* The standing notice under some squares' descriptions (functions/_lib/notices.js). */
.sq-notice{display:flex;align-items:flex-start;gap:7px;margin:-6px 0 16px;font-size:14px;color:var(--faint);max-width:720px}
.sq-notice svg{flex:0 0 auto;margin-top:3px}
/* Search everything (functions/search.js): pinned answers, two result lists, the type-ahead list. */
.search-scope{margin:8px 2px 0;font-size:13.5px}
.search-pin{display:flex;flex-direction:column;gap:3px;margin:18px 0 6px;padding:16px 18px;border-radius:16px;border:1.5px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.07);color:var(--text);text-decoration:none}
.search-pin:hover{text-decoration:none;border-color:var(--accent)}
.search-pin-label{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.search-pin-title{font-family:var(--serif);font-size:24px;color:var(--strong);line-height:1.2}
.search-h{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:26px 0 10px}
.lib-pub{font-size:12.5px;font-weight:700;color:var(--gold)}
.search-more{margin:12px 0 4px}
.suggest-list{position:absolute;z-index:60;max-height:70vh;overflow-y:auto;padding:6px;border-radius:16px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.suggest-item{display:grid;grid-template-columns:24px minmax(0,1fr);grid-template-areas:"ic t" "ic s";column-gap:10px;padding:9px 10px;border-radius:10px;color:var(--text);text-decoration:none}
.suggest-item:hover,.suggest-item.on{background:rgba(var(--accent-rgb),.12);text-decoration:none}
.sg-ic{grid-area:ic;align-self:center;text-align:center;font-size:14px;color:var(--faint)}
.sg-ic.sg-live{color:var(--accent)}
.sg-title{grid-area:t;font-weight:600;color:var(--strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-sub{grid-area:s;font-size:12.5px;color:var(--faint)}


/* ---------- Private messages, iMessage-style (2026-10-14) ----------
   Your messages on the right in blue, everyone else's on the left in gray; a run of messages from
   one person sits close together, the last one with a tail. The blue is near Apple's, not theirs. */
:root{--chat-blue:#1d84f5;--chat-blue-ink:#ffffff;--chat-gray:#2c2442;--chat-gray-ink:var(--text)}
:root[data-theme="light"]{--chat-gray:#ebe8ee;--chat-gray-ink:#1a1625}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--chat-gray:#ebe8ee;--chat-gray-ink:#1a1625}}
.chat{max-width:760px;margin:0 auto;padding:0 4px}
.chat-head{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;
  margin:0 -4px 6px;padding:8px 6px 10px;background:rgba(var(--bar-rgb),.86);border-bottom:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.chat-back{display:inline-flex;align-items:center;gap:2px;color:var(--chat-blue);font-size:16px;text-decoration:none;justify-self:start}
.chat-back:hover{text-decoration:none;opacity:.85}
.chat-who{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text);text-decoration:none;min-width:0}
.chat-who:hover{text-decoration:none}
.chat-faces{display:flex;align-items:center}
.chat-faces > *{border:2px solid var(--bg);border-radius:50%}
.chat-faces.n2 > * + *,.chat-faces.n3 > * + *{margin-left:-10px}
.chat-name{font-size:13px;font-weight:600;max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-chev{color:var(--faint);font-weight:400}
.chat-info-btn{justify-self:end;display:inline-flex;color:var(--chat-blue);padding:6px}
/* The right-hand column: ⏰ Remind me to reply, then ⓘ details (the grid keeps the name centred). */
.chat-head-end{justify-self:end;display:inline-flex;align-items:center;gap:2px}
.chat-info{margin:6px 0 10px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.chat-info-top{position:sticky;top:-14px;z-index:2;display:flex;align-items:center;gap:10px;justify-content:flex-end;margin:-14px -14px 4px;padding:10px 12px 6px;background:var(--panel);border-radius:16px 16px 0 0}
.chat-info-done{min-height:40px;padding:0 20px}
.chat-new-topic{display:inline-flex;align-items:center;min-height:40px;margin-right:auto}
.chat-bg-saved{display:inline-block;margin-left:6px;font-size:13px;font-weight:600;color:#1f9d55}
.chat-bg-saved.show{animation:bgsaved .25s ease-out}
@keyframes bgsaved{from{opacity:0;transform:translateY(3px)}}
.chat-info .pm-actions{margin-top:12px;padding-top:12px}
.chat .room-bar{min-height:0;margin:0 0 4px;text-align:center;font-size:12.5px}
.chat-empty{text-align:center;margin:48px 0}
.chat .pm-list{display:flex;flex-direction:column;padding:4px 16px 10px 2px}
/* (the right padding keeps tails and reply lines inside a chat background) */
.chat-stamp{text-align:center;margin:16px 0 8px;font-size:12px;color:var(--faint);font-weight:500}
.chat .pm{position:relative;display:flex;align-items:flex-end;gap:8px;margin-top:2px}
.chat .pm.first{margin-top:10px}
.chat .pm.mine{justify-content:flex-end}
.pm-face{flex:0 0 30px;width:30px;align-self:flex-end}
.pm-face .av{width:30px;height:30px}
.pm-col{display:flex;flex-direction:column;gap:2px;max-width:min(76%,520px);min-width:0}
.pm.mine .pm-col{align-items:flex-end}
.pm.theirs .pm-col{align-items:flex-start}
.pm-name{font-size:12px;color:var(--faint);margin:0 0 1px 12px}
.pm-name .ai-tag{font-size:10px}
.pm-bubble{position:relative;padding:7px 13px 8px;border-radius:19px;font-size:16px;line-height:1.38;overflow-wrap:anywhere;word-break:break-word}
.pm.mine .pm-bubble{background:var(--chat-blue);color:var(--chat-blue-ink)}
.pm.theirs .pm-bubble{background:var(--chat-gray);color:var(--chat-gray-ink)}
.pm-bubble.prose p{margin:0}.pm-bubble.prose p + p,.pm-bubble.prose * + ul,.pm-bubble.prose * + ol,.pm-bubble.prose * + blockquote{margin-top:6px}
.pm-bubble.prose ul,.pm-bubble.prose ol{margin:0;padding-left:20px}
.pm-bubble.prose blockquote{margin:0;padding-left:10px;border-left:3px solid currentColor;opacity:.85}
.pm-bubble.prose h3,.pm-bubble.prose h4,.pm-bubble.prose h5{margin:0 0 4px;font-size:16px}
.pm-bubble.prose pre{margin:4px 0;font-size:13px;white-space:pre-wrap;background:rgba(0,0,0,.18);border-radius:10px;padding:8px}
.pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.pm.mine .pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){color:inherit;text-decoration-color:rgba(255,255,255,.6)}
.pm.theirs .pm-bubble.prose a:not(.ref):not(.mention):not(.attach):not(.preview):not(.xpl):not(.tx-t){color:var(--chat-blue);text-decoration-color:rgba(29,132,245,.5)}
.pm.mine .pm-bubble a.ref,.pm.mine .pm-bubble .mention{color:inherit;font-weight:600}
/* The tail on the last message of a run */
.pm.mine.last .pm-bubble.tail{border-bottom-right-radius:6px}
.pm.theirs.last .pm-bubble.tail{border-bottom-left-radius:6px}
.pm-bubble.tail::after{content:"";position:absolute;bottom:0;width:14px;height:18px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M0 0H5C5.4 8.5 8.4 14.8 14 18H0Z'/%3E%3C/svg%3E") no-repeat center/100% 100%;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M0 0H5C5.4 8.5 8.4 14.8 14 18H0Z'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.pm.mine .pm-bubble.tail::after{right:-9px;background:var(--chat-blue)}
.pm.theirs .pm-bubble.tail::after{left:-9px;background:var(--chat-gray);transform:scaleX(-1)}
.pm-jumbo{font-size:46px;line-height:1.1;padding:2px 2px 0}
/* Cards, photos, videos, voice notes and files stand on their own, without a bubble */
.pm-attach{max-width:100%}
.pm-attach.prose .preview{flex-direction:column;gap:0;margin:0;padding:0;width:300px;max-width:100%;overflow:hidden;border:0;border-radius:18px;background:var(--chat-gray)}
.pm-attach.prose .preview img{width:100%;height:auto;aspect-ratio:1.91/1;border-radius:0}
.pm-attach.prose .pv-body{padding:9px 13px 11px;gap:1px}
.pm-attach.prose .pv-site{order:2;text-transform:none;letter-spacing:0;font-size:12.5px}
.pm-attach.prose .pv-title{font-size:14.5px;color:var(--chat-gray-ink)}
.pm-attach.prose .pv-desc{display:none}
.pm-attach.prose figure,.pm-attach.prose .gallery{margin:0;border-radius:18px;overflow:hidden;max-width:300px}
.pm-attach.prose figure img{display:block;width:100%;height:auto;border-radius:0}
.pm-attach.prose figcaption{display:none}
.pm-attach.prose .embed,.pm-attach.prose .vid{margin:0;width:320px;max-width:100%;border-radius:18px;overflow:hidden}
.pm-attach.prose .voice{margin:0;border-radius:19px;background:var(--chat-gray)}
.pm.mine .pm-attach.prose .voice{background:var(--chat-blue);color:var(--chat-blue-ink)}
.pm.mine .pm-attach.prose .voice-label{color:rgba(255,255,255,.88)}
.pm.theirs .pm-attach.prose .voice-label{color:var(--chat-gray-ink);opacity:.75}
.pm-attach.prose .attach{margin:0;border-radius:16px}
.pm-receipt{font-size:11.5px;color:var(--faint);margin:2px 4px 0}
/* A reply, as in Messages: the message it answers sits above it, smaller and faded, in its own
   sender's colour, joined to the reply by a curved line on the outside; "1 Reply" under the original. */
.pm-quote{position:relative;display:block;max-width:100%;margin:2px 0 6px;padding:6px 12px;border-radius:16px;font-size:14px;line-height:1.32;
  text-decoration:none;opacity:.55;overflow:visible}
.pm-quote:hover{text-decoration:none;opacity:.8}
.pm-quote.q-mine{background:var(--chat-blue);color:#fff}
.pm-quote.q-theirs{background:var(--chat-gray);color:var(--chat-gray-ink)}
.pm-quote strong{font-weight:600}
.pm-quote::after{content:"";position:absolute;top:50%;width:11px;height:calc(50% + 6px + 18px);border:2px solid var(--faint);opacity:.9;pointer-events:none}
.pm.mine .pm-quote::after{right:-13px;border-left:0;border-radius:0 12px 12px 0}
.pm.theirs .pm-quote::after{left:-13px;border-right:0;border-radius:12px 0 0 12px}
.pm-replies{font-size:12px;font-weight:600;color:var(--chat-blue);text-decoration:none;margin:1px 6px 0}
.pm-replies:hover{text-decoration:underline}
/* A reply on the other side (functions/messages/[id].js `thr`): the line runs down the answered
   message's side, 15px in from its edge, and hooks toward the last reply at its middle. It starts
   under the message itself ("N Replies" sits to the right of it) or under a faded copy (.pm-qrow).
   The line is opaque so the pieces meet without darker joints. */
:root{--chat-thread:#54496d}
:root[data-theme="light"]{--chat-thread:#d4cfda}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--chat-thread:#d4cfda}}
.pm-qrow{display:flex;gap:8px;margin-top:10px}
.pm-qrow.mine{justify-content:flex-end}
.pm-qrow .pm-quote{max-width:min(76%,520px);margin:0}
.pm-qrow .pm-quote::after{display:none}
.chat .pm.after-q{margin-top:4px}
.pm.thr-in::before{content:"";position:absolute;top:-2px;bottom:0;width:0;pointer-events:none}
.pm.first.thr-in::before{top:-10px}
.pm.after-q.thr-in::before{top:-4px}
.pm.thr-L::before{left:53px;border-left:2px solid var(--chat-thread)}
.pm.thr-R::before{right:15px;border-right:2px solid var(--chat-thread)}
.pm.thr-end::before{bottom:50%;width:28px;border-bottom:2px solid var(--chat-thread)}
.pm.thr-L.thr-end::before{border-bottom-left-radius:14px}
.pm.thr-R.thr-end::before{border-bottom-right-radius:14px}
.pm[class*="thr-root-"] .pm-replies{position:relative}
.pm.thr-root-L .pm-replies{margin-left:30px}
.pm.thr-root-R .pm-replies{margin-right:30px}
.pm[class*="thr-root-"] .pm-replies::before{content:"";position:absolute;top:-3px;bottom:0;pointer-events:none}
.pm.thr-root-L .pm-replies::before{left:-15px;border-left:2px solid var(--chat-thread)}
.pm.thr-root-R .pm-replies::before{right:-15px;border-right:2px solid var(--chat-thread)}
.chat .pm:target .pm-bubble{box-shadow:0 0 0 3px rgba(29,132,245,.45)}
/* Reply / Report: beside the bubble on hover, or after a tap on a phone */
.pm-tools{display:flex;gap:2px;align-self:center;margin:-4px 0;opacity:0;transition:opacity .12s}
.pm.mine .pm-tools{order:-1}
.pm:hover .pm-tools,.pm:focus-within .pm-tools,.pm.show-tools .pm-tools{opacity:1}
.pm-tool{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--faint);cursor:pointer}
.pm-tool svg{width:22px;height:22px}
.pm-tool:hover{background:rgba(var(--accent-rgb),.1);color:var(--text)}
.pm-tools .pm-report{margin:0}
/* On a phone a tap on the message opens one card with everything (app.js), so no hidden buttons. */
@media (hover:none){.pm-tools{display:none}.pm[id^=m]{cursor:pointer;-webkit-tap-highlight-color:transparent}}
.chat .pm.fresh .pm-bubble{animation:pmpop .32s ease-out}
@keyframes pmpop{0%{transform:scale(.92);opacity:.4}100%{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.chat .pm.fresh .pm-bubble{animation:none}}
.chat .room-typing{margin:4px 0 6px 38px;font-size:13px;color:var(--faint)}
/* The box */
.chat-compose{position:sticky;bottom:0;z-index:30;margin:0 -4px;padding:8px 4px calc(10px + env(safe-area-inset-bottom));
  background:rgba(var(--bar-rgb),.86);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.chat-bar{display:flex;align-items:flex-end;gap:8px}
.chat-plus{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin-bottom:1px;border:0;border-radius:50%;
  background:rgba(var(--hl-rgb),.08);color:var(--muted);cursor:pointer}
.chat-plus:hover,.chat-plus[aria-expanded="true"]{color:var(--text);background:rgba(var(--hl-rgb),.14)}
.chat-field{position:relative;flex:1;min-width:0;border:1px solid var(--line2);border-radius:20px;background:var(--panel)}
.chat-compose.focus .chat-field{border-color:rgba(29,132,245,.6)}
.chat-field textarea{display:block;width:100%;box-sizing:border-box;min-height:38px;max-height:180px;margin:0;padding:8px 46px 8px 15px;border:0;border-radius:20px;
  background:transparent;color:var(--text);font:inherit;font-size:16px;line-height:1.38;resize:none;outline:none;overflow-y:auto}
.chat-send{position:absolute;right:4px;bottom:4px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;
  background:var(--chat-blue);color:#fff;cursor:pointer;opacity:.35;transform:scale(.9);transition:opacity .12s,transform .12s}
.chat-compose.has-text .chat-send{opacity:1;transform:none}
.chat-send:disabled{opacity:.5}
.chat-compose .uploading:empty{display:none}
.chat-compose .uploading{font-size:13px;color:var(--faint);margin:0 0 6px 44px}
.chat-linkprev{margin:0 0 8px 44px}
.chat-linkprev.prose .preview{display:flex;flex-direction:row;gap:10px;align-items:center;margin:0;padding:8px 12px 8px 8px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);max-width:420px}
.chat-linkprev.prose .preview img{width:56px;height:42px;aspect-ratio:auto;object-fit:cover;border-radius:8px;flex:0 0 auto}
.chat-linkprev.prose .pv-site{text-transform:none;letter-spacing:0;font-size:12px;order:2}
.chat-linkprev.prose .pv-title{font-size:14px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.chat-linkprev .pv-desc{display:none}
.chat-linkprev .embed{max-width:320px;border-radius:14px;overflow:hidden}
.chat-menu{position:absolute;bottom:calc(100% - 2px);left:4px;z-index:40;display:flex;flex-direction:column;min-width:200px;padding:6px;
  border:1px solid var(--line2);border-radius:16px;background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.35)}
.chat-menu button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.chat-menu button:hover,.chat-menu button:focus-visible{background:rgba(var(--hl-rgb),.08);outline:none}
.chat-menu svg{width:20px;height:20px;color:var(--chat-blue)}
.chat-compose .emoji-pop{margin:0 0 8px}
.chat-compose .voice-rec{margin:0 0 4px}
.chat-compose .pm-replying{margin:0 0 8px 44px}
.chat-compose.drop-hint .chat-field{border-color:var(--chat-blue);border-style:dashed}
/* In a conversation the phone's tab bar steps aside, as in Messages: the back arrow leads out. */
@media (max-width:899px){
  /* A conversation fills the phone, as in Messages: the site's top bar steps aside too, and the
     conversation's own header makes room for the status bar (the home-screen app draws under it). */
  body:has(.chat) header.top,body:has(.chat) .prelaunch,body:has(.chat) .install-bar{display:none}
  body:has(.chat){padding-top:0}
  .msg-shell .chat-head{padding-top:calc(8px + env(safe-area-inset-top))}
  body:has(.chat) .tabbar{display:none}
  body:has(.chat){padding-bottom:0}
  body:has(.chat) .foot{display:none}
  .chat-head{margin:0 -16px 6px;padding-left:12px;padding-right:12px}
  .chat-compose{margin:0 -16px;padding-left:10px;padding-right:10px}
}
/* The Link button's box (posts and replies), instead of the browser's prompt */
.link-pop{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line)}
.link-pop .field{flex:1 1 240px;margin:0;background:#fff;color:#1a1625;border:1px solid #cdd5e3}
.link-pop .faint{flex:1 1 100%;font-size:13px}
/* The conversation list, as in Messages */
.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.inbox-head h1{font-size:36px;line-height:1.1;margin:0}
@media (max-width:560px){.inbox-head h1{font-size:28px}}
.inbox-new{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--chat-blue)}
.inbox-new:hover{background:rgba(29,132,245,.1)}
.inbox-note{margin:0 0 14px;font-size:14px}
.chat-inbox{display:flex;flex-direction:column}
.convo-row{position:relative;display:flex;align-items:center;gap:12px;padding:10px 8px 10px 22px;color:var(--text);text-decoration:none;border-radius:14px}
.convo-row:hover{text-decoration:none;background:rgba(var(--hl-rgb),.05)}
.convo-row + .convo-row .convo-main{border-top:1px solid var(--line)}
.convo-row + .convo-row .convo-main{margin-top:-10px;padding-top:10px}
.convo-dot{position:absolute;left:6px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:transparent}
.convo-row.unread .convo-dot{background:var(--chat-blue)}
.convo-face{position:relative;flex:0 0 48px}
.convo-face .av{width:48px;height:48px}
.convo-more{position:absolute;right:-4px;bottom:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--panel2);border:2px solid var(--bg);font-size:11px;font-weight:700;line-height:16px;text-align:center;color:var(--muted)}
.convo-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.convo-top{display:flex;align-items:baseline;gap:10px}
.convo-name{flex:1;min-width:0;font-weight:600;color:var(--strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.convo-time{flex:0 0 auto;font-size:13px;color:var(--faint)}
.convo-last{color:var(--muted);font-size:14.5px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.convo-row.unread .convo-name{font-weight:700}
.convo-row.unread .convo-last{color:var(--text)}
/* One page for messages: the list on the left and the open conversation on the right on a computer;
   on a phone, the list alone, then the conversation alone with a back arrow (as in Messages). */
.msg-shell{display:grid;grid-template-columns:minmax(280px,340px) minmax(0,1fr);align-items:start;max-width:1200px;margin:0 auto}
.msg-side{position:sticky;top:0;max-height:100dvh;overflow-y:auto;padding:4px 14px 24px 0;border-right:1px solid var(--line);overscroll-behavior:contain}
.msg-shell .chat{max-width:none;margin:0;padding:0 0 0 18px}
.msg-shell .chat-head{margin-left:-18px;margin-right:0;padding-left:18px}
.msg-shell .chat-compose{margin-left:-18px;margin-right:0;padding-left:18px}
.msg-shell .inbox-head h1{font-size:30px}
.msg-shell .inbox-note{font-size:12.5px}
.inbox-search{display:block;width:100%;box-sizing:border-box;margin:8px 0 10px;padding:9px 14px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);color:var(--text);font:inherit;font-size:15px}
.inbox-search:focus{outline:none;border-color:rgba(29,132,245,.6)}
.convo-row.on{background:rgba(29,132,245,.14)}
.convo-row.on:hover{background:rgba(29,132,245,.18)}
.convo-row[hidden]{display:none}
/* Topics: conversations with the same people, indented under the main one (inbox.js) */
.chat-inbox > .convo-group + .convo-row .convo-main,.chat-inbox > * + .convo-group > .convo-row .convo-main{border-top:1px solid var(--line);margin-top:-10px;padding-top:10px}
.convo-group[hidden]{display:none}
.convo-topics{position:relative;margin:-6px 0 4px;padding-left:44px}
.convo-topics::before{content:"";position:absolute;left:44px;top:6px;bottom:16px;width:2px;border-radius:2px;background:var(--line2)}
.convo-topics .convo-row .convo-main{border-top:0 !important;margin-top:0 !important;padding-top:0 !important}
.convo-topic{gap:10px;padding-top:7px;padding-bottom:7px}
.convo-topic .convo-face{flex:0 0 36px}
.convo-topic .convo-face .gicon{width:36px;height:36px}
.topic-glyph{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:var(--panel2);color:var(--muted);font-weight:700;font-size:17px}
.convo-topic .convo-name{font-size:15px}
.convo-topic .convo-last{-webkit-line-clamp:1;font-size:14px}
.convo-head{cursor:default}
.convo-head:hover{background:none}
.chat-with{font-size:11.5px;color:var(--faint);max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:-2px}
.chat-topic-note{font-size:13px;line-height:1.4;margin:-2px 0 8px}
.msg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:60vh;text-align:center;padding:0 24px}
.msg-empty h2{margin:0;font-size:30px}
.msg-empty p{margin:0 0 10px}
@media (min-width:900px){
  .msg-shell .chat-back{visibility:hidden}
}
@media (max-width:899px){
  .msg-shell{display:block}
  .msg-shell.in-convo .msg-side{display:none}
  .msg-shell:not(.in-convo) .msg-empty{display:none}
  .msg-side{position:static;max-height:none;overflow:visible;border-right:0;padding:0}
  .msg-shell .chat{padding:0 16px;margin:0 -16px}   /* edge to edge, so a background fills the phone */
  .msg-shell .chat-head,.msg-shell .chat-compose{margin-left:-16px;margin-right:-16px;padding-left:12px;padding-right:12px}
}

/* Chat backgrounds (only the person who picks one sees it). On a background the gray bubbles turn a
   lighter solid (white in light mode) so they stand apart from it; solid, or the tail shows a seam. */
.chat[data-bg="dusk"],.sw[data-bg="dusk"]{--chat-bgimg:linear-gradient(165deg,#2a1640 0%,#3a1c3c 55%,#47222f 100%)}
.chat[data-bg="sunrise"],.sw[data-bg="sunrise"]{--chat-bgimg:linear-gradient(165deg,#3b1c16 0%,#47251a 50%,#3d2a14 100%)}
.chat[data-bg="rose"],.sw[data-bg="rose"]{--chat-bgimg:linear-gradient(165deg,#36162a 0%,#3f1b35 55%,#2c1838 100%)}
.chat[data-bg="lagoon"],.sw[data-bg="lagoon"]{--chat-bgimg:linear-gradient(165deg,#0d2a2c 0%,#11363a 55%,#162c38 100%)}
.chat[data-bg="forest"],.sw[data-bg="forest"]{--chat-bgimg:linear-gradient(165deg,#13261c 0%,#1a3123 55%,#20302a 100%)}
.chat[data-bg="slate"],.sw[data-bg="slate"]{--chat-bgimg:linear-gradient(165deg,#1b1f27 0%,#232831 55%,#2a2e36 100%)}
.chat[data-bg="midnight"],.sw[data-bg="midnight"]{--chat-bgimg:linear-gradient(165deg,#070b16 0%,#0c1328 55%,#131030 100%)}
:root[data-theme="light"] .chat[data-bg="dusk"],:root[data-theme="light"] .sw[data-bg="dusk"]{--chat-bgimg:linear-gradient(165deg,#f1e6ff 0%,#fbe3ec 55%,#ffe6da 100%)}
:root[data-theme="light"] .chat[data-bg="sunrise"],:root[data-theme="light"] .sw[data-bg="sunrise"]{--chat-bgimg:linear-gradient(165deg,#ffe4d6 0%,#ffecd2 50%,#fff4cf 100%)}
:root[data-theme="light"] .chat[data-bg="rose"],:root[data-theme="light"] .sw[data-bg="rose"]{--chat-bgimg:linear-gradient(165deg,#ffe2ee 0%,#fbe4f4 55%,#efe4ff 100%)}
:root[data-theme="light"] .chat[data-bg="lagoon"],:root[data-theme="light"] .sw[data-bg="lagoon"]{--chat-bgimg:linear-gradient(165deg,#dcf6f0 0%,#e0f3f3 55%,#e3eefa 100%)}
:root[data-theme="light"] .chat[data-bg="forest"],:root[data-theme="light"] .sw[data-bg="forest"]{--chat-bgimg:linear-gradient(165deg,#e4f3e1 0%,#ecf5df 55%,#f3f6dc 100%)}
:root[data-theme="light"] .chat[data-bg="slate"],:root[data-theme="light"] .sw[data-bg="slate"]{--chat-bgimg:linear-gradient(165deg,#eef0f3 0%,#e8ebef 55%,#e2e6ec 100%)}
:root[data-theme="light"] .chat[data-bg="midnight"],:root[data-theme="light"] .sw[data-bg="midnight"]{--chat-bgimg:linear-gradient(165deg,#e2e7f6 0%,#e7e6f6 55%,#ece4f6 100%)}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"] .chat[data-bg="dusk"],:root[data-theme="auto"] .sw[data-bg="dusk"]{--chat-bgimg:linear-gradient(165deg,#f1e6ff 0%,#fbe3ec 55%,#ffe6da 100%)}
  :root[data-theme="auto"] .chat[data-bg="sunrise"],:root[data-theme="auto"] .sw[data-bg="sunrise"]{--chat-bgimg:linear-gradient(165deg,#ffe4d6 0%,#ffecd2 50%,#fff4cf 100%)}
  :root[data-theme="auto"] .chat[data-bg="rose"],:root[data-theme="auto"] .sw[data-bg="rose"]{--chat-bgimg:linear-gradient(165deg,#ffe2ee 0%,#fbe4f4 55%,#efe4ff 100%)}
  :root[data-theme="auto"] .chat[data-bg="lagoon"],:root[data-theme="auto"] .sw[data-bg="lagoon"]{--chat-bgimg:linear-gradient(165deg,#dcf6f0 0%,#e0f3f3 55%,#e3eefa 100%)}
  :root[data-theme="auto"] .chat[data-bg="forest"],:root[data-theme="auto"] .sw[data-bg="forest"]{--chat-bgimg:linear-gradient(165deg,#e4f3e1 0%,#ecf5df 55%,#f3f6dc 100%)}
  :root[data-theme="auto"] .chat[data-bg="slate"],:root[data-theme="auto"] .sw[data-bg="slate"]{--chat-bgimg:linear-gradient(165deg,#eef0f3 0%,#e8ebef 55%,#e2e6ec 100%)}
  :root[data-theme="auto"] .chat[data-bg="midnight"],:root[data-theme="auto"] .sw[data-bg="midnight"]{--chat-bgimg:linear-gradient(165deg,#e2e7f6 0%,#e7e6f6 55%,#ece4f6 100%)}
}
/* Scenes (messages/[id].js CHAT_SCENES): built by tools/build_chat_scenes.py; each keeps its look in light and dark,
   and data-tone (l/d) sets the bubbles and small text to read on it. */
.chat[data-bg="sky"],.sw[data-bg="sky"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%235fb2f0'/%3E%3Cstop offset='0.6' stop-color='%23a9d6f7'/%3E%3Cstop offset='1' stop-color='%23e3f2fd'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Cg fill='%23fff' opacity='0.85' filter='url(%23b)'%3E%3Ccircle cx='42' cy='126' r='26'/%3E%3Ccircle cx='70' cy='112' r='34'/%3E%3Ccircle cx='104' cy='120' r='30'/%3E%3Ccircle cx='130' cy='130' r='20'/%3E%3Ccircle cx='85' cy='134' r='28'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.85' filter='url(%23b)'%3E%3Ccircle cx='251' cy='238' r='34'/%3E%3Ccircle cx='287' cy='220' r='44'/%3E%3Ccircle cx='331' cy='230' r='39'/%3E%3Ccircle cx='365' cy='243' r='26'/%3E%3Ccircle cx='306' cy='248' r='36'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.85' filter='url(%23b)'%3E%3Ccircle cx='106' cy='425' r='23'/%3E%3Ccircle cx='131' cy='413' r='31'/%3E%3Ccircle cx='162' cy='420' r='27'/%3E%3Ccircle cx='185' cy='429' r='18'/%3E%3Ccircle cx='144' cy='433' r='25'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.85' filter='url(%23b)'%3E%3Ccircle cx='288' cy='567' r='29'/%3E%3Ccircle cx='319' cy='551' r='37'/%3E%3Ccircle cx='356' cy='560' r='33'/%3E%3Ccircle cx='385' cy='571' r='22'/%3E%3Ccircle cx='336' cy='575' r='31'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.85' filter='url(%23b)'%3E%3Ccircle cx='14' cy='697' r='31'/%3E%3Ccircle cx='48' cy='680' r='41'/%3E%3Ccircle cx='89' cy='690' r='36'/%3E%3Ccircle cx='120' cy='702' r='24'/%3E%3Ccircle cx='66' cy='707' r='34'/%3E%3C/g%3E%3Cg fill='%23fff' opacity='0.85' filter='url(%23b)'%3E%3Ccircle cx='220' cy='765' r='21'/%3E%3Ccircle cx='242' cy='754' r='27'/%3E%3Ccircle cx='269' cy='760' r='24'/%3E%3Ccircle cx='290' cy='768' r='16'/%3E%3Ccircle cx='254' cy='771' r='22'/%3E%3C/g%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="water"],.sw[data-bg="water"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%230e4a6e'/%3E%3Cstop offset='0.55' stop-color='%230a3150'/%3E%3Cstop offset='1' stop-color='%23061b30'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Cpolyline points='-10,24.7 0,26.8 10,28.1 20,28.6 30,28.2 40,26.9 50,24.9 60,22.3 70,19.5 80,16.8 90,14.4 100,12.6 110,11.6 120,11.5 130,12.2 140,13.8 150,16.1 160,18.8 170,21.6 180,24.2 190,26.4 200,27.9 210,28.6 220,28.3 230,27.2 240,25.3 250,22.9 260,20.1 270,17.4 280,14.9 290,12.9 300,11.7 310,11.4 320,12.0 330,13.5 340,15.6 350,18.2 360,21.0 370,23.7 380,26.0 390,27.6 400,28.5 410,28.5' fill='none' stroke='%239fd8ff' stroke-opacity='0.06' stroke-width='2.1'/%3E%3Cpolyline points='-10,51.0 0,54.0 10,56.7 20,58.7 30,59.8 40,59.8 50,58.8 60,56.8 70,54.1 80,51.1 90,48.0 100,45.3 110,43.3 120,42.2 130,42.2 140,43.2 150,45.1 160,47.8 170,50.8 180,53.9 190,56.6 200,58.6 210,59.7 220,59.8 230,58.8 240,56.9 250,54.3 260,51.3 270,48.2 280,45.5 290,43.4 300,42.3 310,42.2 320,43.1 330,45.0 340,47.6 350,50.6 360,53.7 370,56.4 380,58.5 390,59.7 400,59.9 410,58.9' fill='none' stroke='%239fd8ff' stroke-opacity='0.05' stroke-width='1.9'/%3E%3Cpolyline points='-10,83.2 0,85.4 10,87.2 20,88.3 30,88.5 40,88.0 50,86.7 60,84.7 70,82.5 80,80.1 90,78.0 100,76.4 110,75.6 120,75.5 130,76.3 140,77.9 150,79.9 160,82.3 170,84.6 180,86.5 190,87.9 200,88.5 210,88.3 220,87.3 230,85.6 240,83.4 250,81.0 260,78.8 270,77.0 280,75.8 290,75.4 300,75.9 310,77.2 320,79.1 330,81.3 340,83.7 350,85.8 360,87.4 370,88.4 380,88.5 390,87.8 400,86.3 410,84.3' fill='none' stroke='%239fd8ff' stroke-opacity='0.15' stroke-width='1.2'/%3E%3Cpolyline points='-10,110.5 0,108.5 10,106.8 20,105.7 30,105.2 40,105.4 50,106.2 60,107.6 70,109.4 80,111.5 90,113.8 100,116.0 110,117.9 120,119.4 130,120.4 140,120.8 150,120.5 160,119.6 170,118.1 180,116.2 190,114.0 200,111.7 210,109.6 220,107.7 230,106.3 240,105.4 250,105.2 260,105.7 270,106.7 280,108.3 290,110.3 300,112.5 310,114.7 320,116.8 330,118.6 340,119.9 350,120.7 360,120.7 370,120.2 380,119.0 390,117.3 400,115.3 410,113.1' fill='none' stroke='%239fd8ff' stroke-opacity='0.12' stroke-width='1.8'/%3E%3Cpolyline points='-10,143.7 0,147.8 10,151.6 20,154.7 30,156.8 40,157.8 50,157.5 60,156.0 70,153.5 80,150.0 90,146.1 100,142.0 110,138.0 120,134.6 130,132.0 140,130.5 150,130.2 160,131.2 170,133.3 180,136.4 190,140.1 200,144.3 210,148.3 220,152.0 230,155.0 240,157.0 250,157.8 260,157.4 270,155.7 280,153.1 290,149.5 300,145.5 310,141.4 320,137.5 330,134.2 340,131.7 350,130.4 360,130.3 370,131.4 380,133.7 390,136.9 400,140.7 410,144.8' fill='none' stroke='%239fd8ff' stroke-opacity='0.08' stroke-width='1.3'/%3E%3Cpolyline points='-10,181.9 0,181.7 10,180.8 20,179.4 30,177.5 40,175.5 50,173.4 60,171.4 70,169.8 80,168.6 90,168.1 100,168.2 110,168.9 120,170.2 130,172.0 140,174.0 150,176.1 160,178.1 170,179.8 180,181.1 190,181.8 200,181.9 210,181.3 220,180.2 230,178.5 240,176.6 250,174.5 260,172.4 270,170.6 280,169.2 290,168.3 300,168.1 310,168.5 320,169.5 330,171.0 340,172.9 350,175.0 360,177.1 370,179.0 380,180.5 390,181.5 400,181.9 410,181.7' fill='none' stroke='%239fd8ff' stroke-opacity='0.07' stroke-width='2.2'/%3E%3Cpolyline points='-10,216.5 0,214.8 10,212.0 20,208.5 30,204.7 40,201.1 50,198.0 60,195.9 70,194.9 80,195.3 90,196.8 100,199.4 110,202.8 120,206.6 130,210.3 140,213.5 150,215.8 160,217.0 170,216.9 180,215.6 190,213.1 200,209.9 210,206.1 220,202.4 230,199.1 240,196.6 250,195.1 260,195.0 270,196.1 280,198.3 290,201.5 300,205.1 310,208.9 320,212.3 330,215.0 340,216.7 350,217.1 360,216.2 370,214.2 380,211.2 390,207.6 400,203.8 410,200.3' fill='none' stroke='%239fd8ff' stroke-opacity='0.06' stroke-width='1.1'/%3E%3Cpolyline points='-10,232.8 0,230.8 10,229.6 20,229.4 30,230.1 40,231.7 50,234.0 60,236.7 70,239.4 80,241.8 90,243.6 100,244.5 110,244.5 120,243.5 130,241.7 140,239.2 150,236.5 160,233.8 170,231.6 180,230.0 190,229.4 200,229.7 210,231.0 220,233.0 230,235.6 240,238.3 250,240.9 260,243.0 270,244.3 280,244.6 290,244.0 300,242.5 310,240.3 320,237.6 330,234.9 340,232.4 350,230.6 360,229.5 370,229.4 380,230.3 390,232.1 400,234.4 410,237.2' fill='none' stroke='%239fd8ff' stroke-opacity='0.09' stroke-width='2.2'/%3E%3Cpolyline points='-10,277.6 0,277.4 10,276.3 20,274.4 30,271.9 40,269.0 50,266.1 60,263.3 70,261.0 80,259.3 90,258.5 100,258.5 110,259.5 120,261.2 130,263.6 140,266.4 150,269.4 160,272.2 170,274.7 180,276.5 190,277.5 200,277.6 210,276.8 220,275.1 230,272.8 240,270.1 250,267.1 260,264.3 270,261.7 280,259.8 290,258.7 300,258.4 310,259.0 320,260.5 330,262.7 340,265.4 350,268.3 360,271.3 370,273.9 380,275.9 390,277.2 400,277.6 410,277.1' fill='none' stroke='%239fd8ff' stroke-opacity='0.13' stroke-width='1.5'/%3E%3Cpolyline points='-10,302.0 0,298.9 10,295.8 20,292.9 30,290.7 40,289.1 50,288.4 60,288.7 70,289.9 80,291.9 90,294.5 100,297.5 110,300.7 120,303.7 130,306.3 140,308.2 150,309.4 160,309.6 170,308.8 180,307.2 190,304.9 200,302.0 210,298.9 220,295.8 230,293.0 240,290.7 250,289.1 260,288.4 270,288.7 280,289.9 290,291.9 300,294.5 310,297.5 320,300.7 330,303.7 340,306.3 350,308.2 360,309.4 370,309.6 380,308.8 390,307.2 400,304.9 410,302.0' fill='none' stroke='%239fd8ff' stroke-opacity='0.14' stroke-width='1.6'/%3E%3Cpolyline points='-10,334.7 0,339.0 10,342.1 20,343.7 30,343.5 40,341.5 50,338.1 60,333.6 70,328.6 80,323.8 90,319.8 100,317.2 110,316.2 120,317.0 130,319.5 140,323.3 150,328.1 160,333.0 170,337.6 180,341.2 190,343.4 200,343.8 210,342.4 220,339.4 230,335.2 240,330.3 250,325.4 260,321.1 270,317.9 280,316.3 290,316.5 300,318.4 310,321.9 320,326.4 330,331.3 340,336.1 350,340.1 360,342.8 370,343.8 380,343.1 390,340.6 400,336.8 410,332.0' fill='none' stroke='%239fd8ff' stroke-opacity='0.14' stroke-width='1.3'/%3E%3Cpolyline points='-10,360.1 0,363.3 10,366.3 20,368.7 30,370.3 40,370.9 50,370.5 60,369.1 70,366.9 80,364.0 90,360.8 100,357.7 110,354.9 120,352.7 130,351.4 140,351.1 150,351.9 160,353.5 170,356.0 180,359.0 190,362.2 200,365.3 210,367.9 220,369.8 230,370.8 240,370.8 250,369.7 260,367.7 270,365.0 280,361.9 290,358.7 300,355.8 310,353.4 320,351.7 330,351.1 340,351.5 350,352.9 360,355.1 370,357.9 380,361.1 390,364.3 400,367.1 410,369.3' fill='none' stroke='%239fd8ff' stroke-opacity='0.14' stroke-width='2.1'/%3E%3Cpolyline points='-10,405.0 0,404.4 10,402.5 20,399.5 30,395.8 40,391.7 50,387.6 60,383.9 70,381.1 80,379.4 90,379.0 100,379.9 110,382.1 120,385.2 130,389.1 140,393.2 150,397.3 160,400.8 170,403.3 180,404.8 190,404.9 200,403.7 210,401.3 220,398.0 230,394.0 240,389.8 250,385.9 260,382.6 270,380.2 280,379.1 290,379.3 300,380.7 310,383.4 320,386.9 330,390.9 340,395.0 350,398.9 360,402.0 370,404.1 380,405.0 390,404.5 400,402.8 410,399.9' fill='none' stroke='%239fd8ff' stroke-opacity='0.12' stroke-width='2.2'/%3E%3Cpolyline points='-10,413.4 0,413.9 10,415.1 20,417.1 30,419.5 40,422.3 50,425.0 60,427.7 70,429.9 80,431.5 90,432.5 100,432.6 110,431.9 120,430.5 130,428.4 140,425.9 150,423.1 160,420.3 170,417.8 180,415.7 190,414.2 200,413.4 210,413.5 220,414.3 230,415.9 240,418.1 250,420.7 260,423.5 270,426.2 280,428.7 290,430.7 300,432.1 310,432.6 320,432.4 330,431.4 340,429.6 350,427.3 360,424.7 370,421.9 380,419.2 390,416.8 400,414.9 410,413.8' fill='none' stroke='%239fd8ff' stroke-opacity='0.11' stroke-width='2.3'/%3E%3Cpolyline points='-10,449.6 0,448.3 10,447.6 20,447.6 30,448.2 40,449.5 50,451.3 60,453.3 70,455.4 80,457.4 90,459.0 100,460.0 110,460.5 120,460.2 130,459.3 140,457.8 150,455.9 160,453.8 170,451.8 180,449.9 190,448.5 200,447.7 210,447.5 220,448.1 230,449.3 240,450.9 250,452.9 260,455.0 270,457.0 280,458.7 290,459.9 300,460.5 310,460.3 320,459.5 330,458.1 340,456.3 350,454.2 360,452.1 370,450.2 380,448.7 390,447.8 400,447.5 410,447.9' fill='none' stroke='%239fd8ff' stroke-opacity='0.17' stroke-width='2.6'/%3E%3Cpolyline points='-10,492.6 0,491.1 10,489.0 20,486.5 30,483.8 40,481.2 50,479.1 60,477.5 70,476.8 80,476.9 90,477.8 100,479.5 110,481.8 120,484.4 130,487.1 140,489.5 150,491.5 160,492.8 170,493.3 180,492.9 190,491.7 200,489.8 210,487.4 220,484.7 230,482.1 240,479.8 250,478.0 260,477.0 270,476.8 280,477.4 290,478.9 300,481.0 310,483.5 320,486.2 330,488.7 340,490.9 350,492.4 360,493.2 370,493.1 380,492.2 390,490.5 400,488.3 410,485.7' fill='none' stroke='%239fd8ff' stroke-opacity='0.05' stroke-width='1.9'/%3E%3Cpolyline points='-10,517.9 0,520.7 10,522.7 20,523.3 30,522.7 40,520.7 50,517.9 60,514.8 70,511.9 80,509.7 90,508.7 100,509.1 110,510.7 120,513.3 130,516.5 140,519.5 150,521.9 160,523.2 170,523.2 180,521.8 190,519.3 200,516.3 210,513.2 220,510.6 230,509.0 240,508.7 250,509.8 260,512.0 270,515.0 280,518.1 290,520.9 300,522.7 310,523.3 320,522.6 330,520.6 340,517.8 350,514.6 360,511.7 370,509.6 380,508.7 390,509.1 400,510.8 410,513.5' fill='none' stroke='%239fd8ff' stroke-opacity='0.14' stroke-width='1.3'/%3E%3Cpolyline points='-10,554.1 0,552.7 10,550.8 20,548.6 30,546.2 40,543.9 50,541.8 60,540.3 70,539.3 80,539.0 90,539.4 100,540.5 110,542.2 120,544.3 130,546.7 140,549.0 150,551.2 160,553.0 170,554.3 180,554.9 190,554.8 200,554.1 210,552.7 220,550.7 230,548.5 240,546.1 250,543.8 260,541.8 270,540.2 280,539.3 290,539.0 300,539.5 310,540.6 320,542.3 330,544.4 340,546.7 350,549.1 360,551.3 370,553.1 380,554.3 390,554.9 400,554.8 410,554.0' fill='none' stroke='%239fd8ff' stroke-opacity='0.06' stroke-width='1.9'/%3E%3Cpolyline points='-10,568.0 0,569.3 10,571.5 20,574.2 30,577.3 40,580.5 50,583.4 60,585.8 70,587.5 80,588.3 90,588.2 100,587.1 110,585.2 120,582.6 130,579.6 140,576.4 150,573.4 160,570.8 170,568.9 180,567.8 190,567.7 200,568.5 210,570.2 220,572.6 230,575.6 240,578.7 250,581.8 260,584.6 270,586.7 280,588.0 290,588.4 300,587.8 310,586.3 320,584.1 330,581.3 340,578.1 350,575.0 360,572.2 370,569.8 380,568.3 390,567.6 400,567.9 410,569.2' fill='none' stroke='%239fd8ff' stroke-opacity='0.15' stroke-width='1.6'/%3E%3Cpolyline points='-10,617.9 0,616.8 10,614.9 20,612.6 30,609.9 40,607.1 50,604.5 60,602.3 70,600.7 80,599.8 90,599.7 100,600.5 110,602.0 120,604.1 130,606.7 140,609.4 150,612.1 160,614.6 170,616.5 180,617.8 190,618.3 200,618.0 210,616.9 220,615.1 230,612.8 240,610.1 250,607.3 260,604.7 270,602.5 280,600.8 290,599.9 300,599.7 310,600.4 320,601.9 330,603.9 340,606.5 350,609.2 360,611.9 370,614.4 380,616.4 390,617.7 400,618.3 410,618.1' fill='none' stroke='%239fd8ff' stroke-opacity='0.16' stroke-width='1.3'/%3E%3Cpolyline points='-10,646.2 0,647.3 10,647.2 20,646.1 30,643.9 40,641.2 50,638.3 60,635.7 70,633.7 80,632.7 90,632.8 100,634.1 110,636.2 120,639.0 130,641.9 140,644.5 150,646.4 160,647.4 170,647.1 180,645.8 190,643.6 200,640.8 210,637.9 220,635.3 230,633.5 240,632.6 250,632.9 260,634.3 270,636.6 280,639.4 290,642.3 300,644.8 310,646.6 320,647.4 330,647.0 340,645.6 350,643.3 360,640.4 370,637.6 380,635.0 390,633.3 400,632.6 410,633.0' fill='none' stroke='%239fd8ff' stroke-opacity='0.11' stroke-width='2.2'/%3E%3Cpolyline points='-10,668.3 0,671.2 10,674.1 20,676.5 30,678.3 40,679.1 50,678.8 60,677.6 70,675.5 80,672.8 90,669.9 100,667.1 110,664.8 120,663.4 130,662.9 140,663.5 150,665.0 160,667.4 170,670.2 180,673.1 190,675.7 200,677.7 210,678.9 220,679.0 230,678.1 240,676.3 250,673.8 260,670.9 270,668.0 280,665.5 290,663.8 300,662.9 310,663.2 320,664.4 330,666.5 340,669.2 350,672.1 360,674.8 370,677.1 380,678.6 390,679.1 400,678.5 410,677.0' fill='none' stroke='%239fd8ff' stroke-opacity='0.09' stroke-width='2.1'/%3E%3Cpolyline points='-10,693.7 0,690.5 10,688.7 20,688.5 30,689.9 40,692.7 50,696.6 60,701.2 70,705.9 80,710.1 90,713.3 100,715.2 110,715.6 120,714.3 130,711.5 140,707.7 150,703.1 160,698.4 170,694.2 180,690.9 190,688.9 200,688.4 210,689.6 220,692.3 230,696.1 240,700.6 250,705.3 260,709.6 270,713.0 280,715.1 290,715.6 300,714.5 310,711.9 320,708.2 330,703.7 340,699.0 350,694.7 360,691.2 370,689.0 380,688.4 390,689.4 400,691.9 410,695.6' fill='none' stroke='%239fd8ff' stroke-opacity='0.12' stroke-width='2.4'/%3E%3Cpolyline points='-10,727.0 0,728.0 10,729.5 20,731.3 30,733.3 40,735.2 50,737.0 60,738.3 70,739.2 80,739.4 90,739.1 100,738.1 110,736.7 120,734.9 130,732.9 140,731.0 150,729.2 160,727.8 170,726.9 180,726.6 190,726.9 200,727.7 210,729.1 220,730.9 230,732.8 240,734.8 250,736.6 260,738.0 270,739.0 280,739.4 290,739.2 300,738.4 310,737.1 320,735.4 330,733.4 340,731.4 350,729.6 360,728.1 370,727.1 380,726.6 390,726.7 400,727.5 410,728.7' fill='none' stroke='%239fd8ff' stroke-opacity='0.15' stroke-width='2.6'/%3E%3Cpolyline points='-10,772.4 0,770.2 10,766.9 20,763.1 30,759.4 40,756.6 50,755.0 60,755.1 70,756.7 80,759.6 90,763.3 100,767.1 110,770.4 120,772.5 130,773.1 140,772.1 150,769.7 160,766.3 170,762.4 180,758.9 190,756.2 200,754.9 210,755.3 220,757.1 230,760.2 240,764.0 250,767.7 260,770.8 270,772.7 280,773.1 290,771.8 300,769.2 310,765.6 320,761.8 330,758.3 340,755.9 350,754.9 360,755.5 370,757.6 380,760.8 390,764.6 400,768.3 410,771.3' fill='none' stroke='%239fd8ff' stroke-opacity='0.13' stroke-width='1.1'/%3E%3Cpolyline points='-10,799.9 0,801.2 10,801.5 20,800.7 30,799.0 40,796.6 50,793.9 60,791.4 70,789.5 80,788.6 90,788.6 100,789.8 110,791.8 120,794.3 130,797.0 140,799.3 150,800.9 160,801.5 170,801.1 180,799.6 190,797.4 200,794.7 210,792.1 220,790.0 230,788.7 240,788.5 250,789.3 260,791.1 270,793.5 280,796.2 290,798.7 300,800.5 310,801.5 320,801.3 330,800.1 340,798.1 350,795.5 360,792.9 370,790.6 380,789.0 390,788.5 400,789.0 410,790.5' fill='none' stroke='%239fd8ff' stroke-opacity='0.09' stroke-width='1.1'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="polygon"],.sw[data-bg="polygon"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3C/defs%3E%3Cpolygon points='0,0 45,0 0,78' fill='rgb(62, 34, 117)' stroke='rgb(62, 34, 117)' stroke-width='0.6'/%3E%3Cpolygon points='45,0 72,46 0,78' fill='rgb(65, 40, 123)' stroke='rgb(65, 40, 123)' stroke-width='0.6'/%3E%3Cpolygon points='45,0 118,0 72,46' fill='rgb(67, 42, 125)' stroke='rgb(67, 42, 125)' stroke-width='0.6'/%3E%3Cpolygon points='118,0 122,55 72,46' fill='rgb(47, 24, 106)' stroke='rgb(47, 24, 106)' stroke-width='0.6'/%3E%3Cpolygon points='118,0 182,0 122,55' fill='rgb(54, 32, 114)' stroke='rgb(54, 32, 114)' stroke-width='0.6'/%3E%3Cpolygon points='182,0 194,45 122,55' fill='rgb(64, 44, 125)' stroke='rgb(64, 44, 125)' stroke-width='0.6'/%3E%3Cpolygon points='182,0 261,0 194,45' fill='rgb(60, 41, 122)' stroke='rgb(60, 41, 122)' stroke-width='0.6'/%3E%3Cpolygon points='261,0 282,83 194,45' fill='rgb(38, 22, 103)' stroke='rgb(38, 22, 103)' stroke-width='0.6'/%3E%3Cpolygon points='261,0 312,0 282,83' fill='rgb(38, 23, 103)' stroke='rgb(38, 23, 103)' stroke-width='0.6'/%3E%3Cpolygon points='312,0 332,61 282,83' fill='rgb(45, 33, 112)' stroke='rgb(45, 33, 112)' stroke-width='0.6'/%3E%3Cpolygon points='312,0 400,0 332,61' fill='rgb(35, 23, 102)' stroke='rgb(35, 23, 102)' stroke-width='0.6'/%3E%3Cpolygon points='400,0 400,43 332,61' fill='rgb(38, 28, 107)' stroke='rgb(38, 28, 107)' stroke-width='0.6'/%3E%3Cpolygon points='0,78 72,46 0,106' fill='rgb(42, 18, 101)' stroke='rgb(42, 18, 101)' stroke-width='0.6'/%3E%3Cpolygon points='72,46 60,113 0,106' fill='rgb(57, 35, 117)' stroke='rgb(57, 35, 117)' stroke-width='0.6'/%3E%3Cpolygon points='72,46 122,55 60,113' fill='rgb(60, 38, 120)' stroke='rgb(60, 38, 120)' stroke-width='0.6'/%3E%3Cpolygon points='122,55 148,108 60,113' fill='rgb(62, 43, 124)' stroke='rgb(62, 43, 124)' stroke-width='0.6'/%3E%3Cpolygon points='122,55 194,45 148,108' fill='rgb(41, 22, 103)' stroke='rgb(41, 22, 103)' stroke-width='0.6'/%3E%3Cpolygon points='194,45 179,143 148,108' fill='rgb(55, 39, 120)' stroke='rgb(55, 39, 120)' stroke-width='0.6'/%3E%3Cpolygon points='194,45 282,83 179,143' fill='rgb(52, 38, 118)' stroke='rgb(52, 38, 118)' stroke-width='0.6'/%3E%3Cpolygon points='282,83 268,108 179,143' fill='rgb(37, 25, 104)' stroke='rgb(37, 25, 104)' stroke-width='0.6'/%3E%3Cpolygon points='282,83 332,61 268,108' fill='rgb(56, 45, 124)' stroke='rgb(56, 45, 124)' stroke-width='0.6'/%3E%3Cpolygon points='332,61 335,102 268,108' fill='rgb(59, 49, 128)' stroke='rgb(59, 49, 128)' stroke-width='0.6'/%3E%3Cpolygon points='332,61 400,43 335,102' fill='rgb(37, 28, 107)' stroke='rgb(37, 28, 107)' stroke-width='0.6'/%3E%3Cpolygon points='400,43 400,124 335,102' fill='rgb(56, 49, 127)' stroke='rgb(56, 49, 127)' stroke-width='0.6'/%3E%3Cpolygon points='0,106 60,113 0,206' fill='rgb(49, 29, 110)' stroke='rgb(49, 29, 110)' stroke-width='0.6'/%3E%3Cpolygon points='60,113 83,193 0,206' fill='rgb(49, 32, 113)' stroke='rgb(49, 32, 113)' stroke-width='0.6'/%3E%3Cpolygon points='60,113 148,108 83,193' fill='rgb(63, 46, 127)' stroke='rgb(63, 46, 127)' stroke-width='0.6'/%3E%3Cpolygon points='148,108 123,179 83,193' fill='rgb(58, 43, 123)' stroke='rgb(58, 43, 123)' stroke-width='0.6'/%3E%3Cpolygon points='148,108 179,143 123,179' fill='rgb(38, 24, 104)' stroke='rgb(38, 24, 104)' stroke-width='0.6'/%3E%3Cpolygon points='179,143 185,197 123,179' fill='rgb(45, 33, 112)' stroke='rgb(45, 33, 112)' stroke-width='0.6'/%3E%3Cpolygon points='179,143 268,108 185,197' fill='rgb(46, 35, 114)' stroke='rgb(46, 35, 114)' stroke-width='0.6'/%3E%3Cpolygon points='268,108 268,197 185,197' fill='rgb(40, 31, 110)' stroke='rgb(40, 31, 110)' stroke-width='0.6'/%3E%3Cpolygon points='268,108 335,102 268,197' fill='rgb(36, 27, 106)' stroke='rgb(36, 27, 106)' stroke-width='0.6'/%3E%3Cpolygon points='335,102 326,172 268,197' fill='rgb(37, 31, 109)' stroke='rgb(37, 31, 109)' stroke-width='0.6'/%3E%3Cpolygon points='335,102 400,124 326,172' fill='rgb(49, 44, 121)' stroke='rgb(49, 44, 121)' stroke-width='0.6'/%3E%3Cpolygon points='400,124 400,198 326,172' fill='rgb(27, 25, 102)' stroke='rgb(27, 25, 102)' stroke-width='0.6'/%3E%3Cpolygon points='0,206 83,193 0,267' fill='rgb(50, 35, 115)' stroke='rgb(50, 35, 115)' stroke-width='0.6'/%3E%3Cpolygon points='83,193 82,260 0,267' fill='rgb(45, 33, 112)' stroke='rgb(45, 33, 112)' stroke-width='0.6'/%3E%3Cpolygon points='83,193 123,179 82,260' fill='rgb(33, 21, 100)' stroke='rgb(33, 21, 100)' stroke-width='0.6'/%3E%3Cpolygon points='123,179 147,257 82,260' fill='rgb(41, 31, 110)' stroke='rgb(41, 31, 110)' stroke-width='0.6'/%3E%3Cpolygon points='123,179 185,197 147,257' fill='rgb(49, 39, 118)' stroke='rgb(49, 39, 118)' stroke-width='0.6'/%3E%3Cpolygon points='185,197 188,247 147,257' fill='rgb(44, 37, 115)' stroke='rgb(44, 37, 115)' stroke-width='0.6'/%3E%3Cpolygon points='185,197 268,197 188,247' fill='rgb(31, 24, 102)' stroke='rgb(31, 24, 102)' stroke-width='0.6'/%3E%3Cpolygon points='268,197 260,225 188,247' fill='rgb(56, 51, 128)' stroke='rgb(56, 51, 128)' stroke-width='0.6'/%3E%3Cpolygon points='268,197 326,172 260,225' fill='rgb(50, 46, 123)' stroke='rgb(50, 46, 123)' stroke-width='0.6'/%3E%3Cpolygon points='326,172 313,236 260,225' fill='rgb(54, 51, 128)' stroke='rgb(54, 51, 128)' stroke-width='0.6'/%3E%3Cpolygon points='326,172 400,198 313,236' fill='rgb(28, 27, 104)' stroke='rgb(28, 27, 104)' stroke-width='0.6'/%3E%3Cpolygon points='400,198 400,236 313,236' fill='rgb(32, 33, 109)' stroke='rgb(32, 33, 109)' stroke-width='0.6'/%3E%3Cpolygon points='0,267 82,260 0,316' fill='rgb(34, 22, 101)' stroke='rgb(34, 22, 101)' stroke-width='0.6'/%3E%3Cpolygon points='82,260 87,305 0,316' fill='rgb(52, 43, 122)' stroke='rgb(52, 43, 122)' stroke-width='0.6'/%3E%3Cpolygon points='82,260 147,257 87,305' fill='rgb(38, 29, 108)' stroke='rgb(38, 29, 108)' stroke-width='0.6'/%3E%3Cpolygon points='147,257 153,329 87,305' fill='rgb(32, 26, 104)' stroke='rgb(32, 26, 104)' stroke-width='0.6'/%3E%3Cpolygon points='147,257 188,247 153,329' fill='rgb(40, 35, 112)' stroke='rgb(40, 35, 112)' stroke-width='0.6'/%3E%3Cpolygon points='188,247 220,302 153,329' fill='rgb(53, 49, 126)' stroke='rgb(53, 49, 126)' stroke-width='0.6'/%3E%3Cpolygon points='188,247 260,225 220,302' fill='rgb(50, 46, 123)' stroke='rgb(50, 46, 123)' stroke-width='0.6'/%3E%3Cpolygon points='260,225 254,296 220,302' fill='rgb(34, 32, 109)' stroke='rgb(34, 32, 109)' stroke-width='0.6'/%3E%3Cpolygon points='260,225 313,236 254,296' fill='rgb(31, 29, 106)' stroke='rgb(31, 29, 106)' stroke-width='0.6'/%3E%3Cpolygon points='313,236 320,295 254,296' fill='rgb(50, 51, 127)' stroke='rgb(50, 51, 127)' stroke-width='0.6'/%3E%3Cpolygon points='313,236 400,236 320,295' fill='rgb(39, 41, 117)' stroke='rgb(39, 41, 117)' stroke-width='0.6'/%3E%3Cpolygon points='400,236 400,313 320,295' fill='rgb(42, 46, 121)' stroke='rgb(42, 46, 121)' stroke-width='0.6'/%3E%3Cpolygon points='0,316 87,305 0,387' fill='rgb(32, 25, 103)' stroke='rgb(32, 25, 103)' stroke-width='0.6'/%3E%3Cpolygon points='87,305 82,368 0,387' fill='rgb(30, 24, 102)' stroke='rgb(30, 24, 102)' stroke-width='0.6'/%3E%3Cpolygon points='87,305 153,329 82,368' fill='rgb(47, 43, 120)' stroke='rgb(47, 43, 120)' stroke-width='0.6'/%3E%3Cpolygon points='153,329 140,382 82,368' fill='rgb(38, 36, 113)' stroke='rgb(38, 36, 113)' stroke-width='0.6'/%3E%3Cpolygon points='153,329 220,302 140,382' fill='rgb(28, 27, 104)' stroke='rgb(28, 27, 104)' stroke-width='0.6'/%3E%3Cpolygon points='220,302 182,376 140,382' fill='rgb(51, 52, 128)' stroke='rgb(51, 52, 128)' stroke-width='0.6'/%3E%3Cpolygon points='220,302 254,296 182,376' fill='rgb(42, 43, 119)' stroke='rgb(42, 43, 119)' stroke-width='0.6'/%3E%3Cpolygon points='254,296 285,382 182,376' fill='rgb(46, 49, 124)' stroke='rgb(46, 49, 124)' stroke-width='0.6'/%3E%3Cpolygon points='254,296 320,295 285,382' fill='rgb(26, 29, 104)' stroke='rgb(26, 29, 104)' stroke-width='0.6'/%3E%3Cpolygon points='320,295 344,368 285,382' fill='rgb(45, 51, 126)' stroke='rgb(45, 51, 126)' stroke-width='0.6'/%3E%3Cpolygon points='320,295 400,313 344,368' fill='rgb(23, 29, 104)' stroke='rgb(23, 29, 104)' stroke-width='0.6'/%3E%3Cpolygon points='400,313 400,355 344,368' fill='rgb(44, 53, 127)' stroke='rgb(44, 53, 127)' stroke-width='0.6'/%3E%3Cpolygon points='0,387 82,368 0,443' fill='rgb(40, 36, 113)' stroke='rgb(40, 36, 113)' stroke-width='0.6'/%3E%3Cpolygon points='82,368 59,444 0,443' fill='rgb(36, 34, 111)' stroke='rgb(36, 34, 111)' stroke-width='0.6'/%3E%3Cpolygon points='82,368 140,382 59,444' fill='rgb(41, 40, 117)' stroke='rgb(41, 40, 117)' stroke-width='0.6'/%3E%3Cpolygon points='140,382 154,426 59,444' fill='rgb(50, 51, 127)' stroke='rgb(50, 51, 127)' stroke-width='0.6'/%3E%3Cpolygon points='140,382 182,376 154,426' fill='rgb(31, 33, 109)' stroke='rgb(31, 33, 109)' stroke-width='0.6'/%3E%3Cpolygon points='182,376 196,450 154,426' fill='rgb(26, 30, 105)' stroke='rgb(26, 30, 105)' stroke-width='0.6'/%3E%3Cpolygon points='182,376 285,382 196,450' fill='rgb(36, 42, 117)' stroke='rgb(36, 42, 117)' stroke-width='0.6'/%3E%3Cpolygon points='285,382 277,416 196,450' fill='rgb(27, 35, 109)' stroke='rgb(27, 35, 109)' stroke-width='0.6'/%3E%3Cpolygon points='285,382 344,368 277,416' fill='rgb(24, 32, 106)' stroke='rgb(24, 32, 106)' stroke-width='0.6'/%3E%3Cpolygon points='344,368 317,415 277,416' fill='rgb(24, 33, 107)' stroke='rgb(24, 33, 107)' stroke-width='0.6'/%3E%3Cpolygon points='344,368 400,355 317,415' fill='rgb(20, 30, 104)' stroke='rgb(20, 30, 104)' stroke-width='0.6'/%3E%3Cpolygon points='400,355 400,449 317,415' fill='rgb(23, 35, 108)' stroke='rgb(23, 35, 108)' stroke-width='0.6'/%3E%3Cpolygon points='0,443 59,444 0,506' fill='rgb(34, 34, 110)' stroke='rgb(34, 34, 110)' stroke-width='0.6'/%3E%3Cpolygon points='59,444 51,507 0,506' fill='rgb(33, 34, 110)' stroke='rgb(33, 34, 110)' stroke-width='0.6'/%3E%3Cpolygon points='59,444 154,426 51,507' fill='rgb(45, 48, 123)' stroke='rgb(45, 48, 123)' stroke-width='0.6'/%3E%3Cpolygon points='154,426 154,499 51,507' fill='rgb(30, 36, 111)' stroke='rgb(30, 36, 111)' stroke-width='0.6'/%3E%3Cpolygon points='154,426 196,450 154,499' fill='rgb(36, 42, 117)' stroke='rgb(36, 42, 117)' stroke-width='0.6'/%3E%3Cpolygon points='196,450 193,494 154,499' fill='rgb(25, 33, 107)' stroke='rgb(25, 33, 107)' stroke-width='0.6'/%3E%3Cpolygon points='196,450 277,416 193,494' fill='rgb(29, 38, 112)' stroke='rgb(29, 38, 112)' stroke-width='0.6'/%3E%3Cpolygon points='277,416 250,471 193,494' fill='rgb(20, 29, 103)' stroke='rgb(20, 29, 103)' stroke-width='0.6'/%3E%3Cpolygon points='277,416 317,415 250,471' fill='rgb(26, 36, 110)' stroke='rgb(26, 36, 110)' stroke-width='0.6'/%3E%3Cpolygon points='317,415 354,499 250,471' fill='rgb(18, 31, 104)' stroke='rgb(18, 31, 104)' stroke-width='0.6'/%3E%3Cpolygon points='317,415 400,449 354,499' fill='rgb(37, 51, 124)' stroke='rgb(37, 51, 124)' stroke-width='0.6'/%3E%3Cpolygon points='400,449 400,493 354,499' fill='rgb(30, 47, 119)' stroke='rgb(30, 47, 119)' stroke-width='0.6'/%3E%3Cpolygon points='0,506 51,507 0,573' fill='rgb(28, 32, 107)' stroke='rgb(28, 32, 107)' stroke-width='0.6'/%3E%3Cpolygon points='51,507 64,570 0,573' fill='rgb(35, 41, 116)' stroke='rgb(35, 41, 116)' stroke-width='0.6'/%3E%3Cpolygon points='51,507 154,499 64,570' fill='rgb(47, 54, 129)' stroke='rgb(47, 54, 129)' stroke-width='0.6'/%3E%3Cpolygon points='154,499 148,541 64,570' fill='rgb(22, 31, 105)' stroke='rgb(22, 31, 105)' stroke-width='0.6'/%3E%3Cpolygon points='154,499 193,494 148,541' fill='rgb(42, 51, 125)' stroke='rgb(42, 51, 125)' stroke-width='0.6'/%3E%3Cpolygon points='193,494 189,545 148,541' fill='rgb(31, 42, 115)' stroke='rgb(31, 42, 115)' stroke-width='0.6'/%3E%3Cpolygon points='193,494 250,471 189,545' fill='rgb(32, 43, 116)' stroke='rgb(32, 43, 116)' stroke-width='0.6'/%3E%3Cpolygon points='250,471 255,558 189,545' fill='rgb(40, 54, 127)' stroke='rgb(40, 54, 127)' stroke-width='0.6'/%3E%3Cpolygon points='250,471 354,499 255,558' fill='rgb(27, 42, 115)' stroke='rgb(27, 42, 115)' stroke-width='0.6'/%3E%3Cpolygon points='354,499 323,550 255,558' fill='rgb(29, 46, 118)' stroke='rgb(29, 46, 118)' stroke-width='0.6'/%3E%3Cpolygon points='354,499 400,493 323,550' fill='rgb(33, 52, 123)' stroke='rgb(33, 52, 123)' stroke-width='0.6'/%3E%3Cpolygon points='400,493 400,538 323,550' fill='rgb(40, 60, 131)' stroke='rgb(40, 60, 131)' stroke-width='0.6'/%3E%3Cpolygon points='0,573 64,570 0,633' fill='rgb(30, 38, 112)' stroke='rgb(30, 38, 112)' stroke-width='0.6'/%3E%3Cpolygon points='64,570 60,614 0,633' fill='rgb(43, 52, 126)' stroke='rgb(43, 52, 126)' stroke-width='0.6'/%3E%3Cpolygon points='64,570 148,541 60,614' fill='rgb(39, 48, 122)' stroke='rgb(39, 48, 122)' stroke-width='0.6'/%3E%3Cpolygon points='148,541 137,633 60,614' fill='rgb(35, 47, 120)' stroke='rgb(35, 47, 120)' stroke-width='0.6'/%3E%3Cpolygon points='148,541 189,545 137,633' fill='rgb(29, 42, 115)' stroke='rgb(29, 42, 115)' stroke-width='0.6'/%3E%3Cpolygon points='189,545 197,634 137,633' fill='rgb(25, 41, 113)' stroke='rgb(25, 41, 113)' stroke-width='0.6'/%3E%3Cpolygon points='189,545 255,558 197,634' fill='rgb(17, 33, 105)' stroke='rgb(17, 33, 105)' stroke-width='0.6'/%3E%3Cpolygon points='255,558 267,617 197,634' fill='rgb(17, 36, 107)' stroke='rgb(17, 36, 107)' stroke-width='0.6'/%3E%3Cpolygon points='255,558 323,550 267,617' fill='rgb(15, 34, 105)' stroke='rgb(15, 34, 105)' stroke-width='0.6'/%3E%3Cpolygon points='323,550 334,594 267,617' fill='rgb(33, 54, 125)' stroke='rgb(33, 54, 125)' stroke-width='0.6'/%3E%3Cpolygon points='323,550 400,538 334,594' fill='rgb(20, 41, 112)' stroke='rgb(20, 41, 112)' stroke-width='0.6'/%3E%3Cpolygon points='400,538 400,613 334,594' fill='rgb(15, 39, 109)' stroke='rgb(15, 39, 109)' stroke-width='0.6'/%3E%3Cpolygon points='0,633 60,614 0,663' fill='rgb(21, 32, 105)' stroke='rgb(21, 32, 105)' stroke-width='0.6'/%3E%3Cpolygon points='60,614 45,690 0,663' fill='rgb(41, 53, 126)' stroke='rgb(41, 53, 126)' stroke-width='0.6'/%3E%3Cpolygon points='60,614 137,633 45,690' fill='rgb(41, 55, 128)' stroke='rgb(41, 55, 128)' stroke-width='0.6'/%3E%3Cpolygon points='137,633 119,676 45,690' fill='rgb(34, 50, 122)' stroke='rgb(34, 50, 122)' stroke-width='0.6'/%3E%3Cpolygon points='137,633 197,634 119,676' fill='rgb(22, 39, 111)' stroke='rgb(22, 39, 111)' stroke-width='0.6'/%3E%3Cpolygon points='197,634 210,679 119,676' fill='rgb(20, 39, 110)' stroke='rgb(20, 39, 110)' stroke-width='0.6'/%3E%3Cpolygon points='197,634 267,617 210,679' fill='rgb(21, 41, 112)' stroke='rgb(21, 41, 112)' stroke-width='0.6'/%3E%3Cpolygon points='267,617 259,678 210,679' fill='rgb(24, 46, 117)' stroke='rgb(24, 46, 117)' stroke-width='0.6'/%3E%3Cpolygon points='267,617 334,594 259,678' fill='rgb(16, 38, 109)' stroke='rgb(16, 38, 109)' stroke-width='0.6'/%3E%3Cpolygon points='334,594 336,689 259,678' fill='rgb(22, 47, 117)' stroke='rgb(22, 47, 117)' stroke-width='0.6'/%3E%3Cpolygon points='334,594 400,613 336,689' fill='rgb(17, 43, 112)' stroke='rgb(17, 43, 112)' stroke-width='0.6'/%3E%3Cpolygon points='400,613 400,660 336,689' fill='rgb(34, 63, 132)' stroke='rgb(34, 63, 132)' stroke-width='0.6'/%3E%3Cpolygon points='0,663 45,690 0,741' fill='rgb(44, 58, 131)' stroke='rgb(44, 58, 131)' stroke-width='0.6'/%3E%3Cpolygon points='45,690 56,729 0,741' fill='rgb(31, 47, 119)' stroke='rgb(31, 47, 119)' stroke-width='0.6'/%3E%3Cpolygon points='45,690 119,676 56,729' fill='rgb(21, 38, 110)' stroke='rgb(21, 38, 110)' stroke-width='0.6'/%3E%3Cpolygon points='119,676 145,739 56,729' fill='rgb(41, 60, 131)' stroke='rgb(41, 60, 131)' stroke-width='0.6'/%3E%3Cpolygon points='119,676 210,679 145,739' fill='rgb(21, 42, 113)' stroke='rgb(21, 42, 113)' stroke-width='0.6'/%3E%3Cpolygon points='210,679 203,750 145,739' fill='rgb(20, 44, 114)' stroke='rgb(20, 44, 114)' stroke-width='0.6'/%3E%3Cpolygon points='210,679 259,678 203,750' fill='rgb(11, 35, 105)' stroke='rgb(11, 35, 105)' stroke-width='0.6'/%3E%3Cpolygon points='259,678 285,736 203,750' fill='rgb(20, 46, 115)' stroke='rgb(20, 46, 115)' stroke-width='0.6'/%3E%3Cpolygon points='259,678 336,689 285,736' fill='rgb(22, 49, 118)' stroke='rgb(22, 49, 118)' stroke-width='0.6'/%3E%3Cpolygon points='336,689 338,739 285,736' fill='rgb(21, 51, 120)' stroke='rgb(21, 51, 120)' stroke-width='0.6'/%3E%3Cpolygon points='336,689 400,660 338,739' fill='rgb(12, 42, 111)' stroke='rgb(12, 42, 111)' stroke-width='0.6'/%3E%3Cpolygon points='400,660 400,739 338,739' fill='rgb(20, 52, 120)' stroke='rgb(20, 52, 120)' stroke-width='0.6'/%3E%3Cpolygon points='0,741 56,729 0,800' fill='rgb(15, 32, 104)' stroke='rgb(15, 32, 104)' stroke-width='0.6'/%3E%3Cpolygon points='56,729 75,800 0,800' fill='rgb(20, 40, 111)' stroke='rgb(20, 40, 111)' stroke-width='0.6'/%3E%3Cpolygon points='56,729 145,739 75,800' fill='rgb(15, 36, 107)' stroke='rgb(15, 36, 107)' stroke-width='0.6'/%3E%3Cpolygon points='145,739 131,800 75,800' fill='rgb(22, 46, 116)' stroke='rgb(22, 46, 116)' stroke-width='0.6'/%3E%3Cpolygon points='145,739 203,750 131,800' fill='rgb(11, 36, 106)' stroke='rgb(11, 36, 106)' stroke-width='0.6'/%3E%3Cpolygon points='203,750 201,800 131,800' fill='rgb(9, 36, 105)' stroke='rgb(9, 36, 105)' stroke-width='0.6'/%3E%3Cpolygon points='203,750 285,736 201,800' fill='rgb(17, 44, 113)' stroke='rgb(17, 44, 113)' stroke-width='0.6'/%3E%3Cpolygon points='285,736 266,800 201,800' fill='rgb(13, 43, 112)' stroke='rgb(13, 43, 112)' stroke-width='0.6'/%3E%3Cpolygon points='285,736 338,739 266,800' fill='rgb(23, 54, 122)' stroke='rgb(23, 54, 122)' stroke-width='0.6'/%3E%3Cpolygon points='338,739 353,800 266,800' fill='rgb(20, 52, 120)' stroke='rgb(20, 52, 120)' stroke-width='0.6'/%3E%3Cpolygon points='338,739 400,739 353,800' fill='rgb(27, 59, 127)' stroke='rgb(27, 59, 127)' stroke-width='0.6'/%3E%3Cpolygon points='400,739 400,800 353,800' fill='rgb(24, 56, 124)' stroke='rgb(24, 56, 124)' stroke-width='0.6'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="stars"],.sw[data-bg="stars"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23060a1c'/%3E%3Cstop offset='0.6' stop-color='%23121338'/%3E%3Cstop offset='1' stop-color='%2324164a'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='2.5'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Ccircle cx='129' cy='345' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='216' cy='150' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='374' cy='499' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='360' cy='116' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='234' cy='544' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='238' cy='46' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='229' cy='417' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='332' cy='362' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='219' cy='266' r='3' fill='%23dfe8ff' filter='url(%23b)'/%3E%3Ccircle cx='286' cy='703' r='1.1' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='288' cy='395' r='0.9' fill='%23fff' opacity='0.82'/%3E%3Ccircle cx='257' cy='35' r='1.4' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='294' cy='650' r='0.7' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='301' cy='455' r='0.5' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='234' cy='714' r='0.7' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='17' cy='510' r='0.5' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='181' cy='41' r='0.5' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='272' cy='391' r='0.5' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='28' cy='746' r='1.4' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='210' cy='597' r='1.1' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='30' cy='212' r='0.7' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='260' cy='368' r='1.1' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='364' cy='230' r='0.5' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='257' cy='62' r='0.7' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='261' cy='554' r='1.4' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='5' cy='49' r='0.9' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='40' cy='174' r='1.1' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='207' cy='372' r='1.1' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='397' cy='439' r='0.9' fill='%23fff' opacity='0.99'/%3E%3Ccircle cx='375' cy='14' r='1.1' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='203' cy='796' r='0.9' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='367' cy='744' r='0.5' fill='%23fff' opacity='0.73'/%3E%3Ccircle cx='57' cy='419' r='0.9' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='328' cy='407' r='0.5' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='93' cy='718' r='1.1' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='64' cy='760' r='1.1' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='291' cy='333' r='1.1' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='336' cy='1' r='0.9' fill='%23fff' opacity='0.90'/%3E%3Ccircle cx='48' cy='741' r='0.5' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='116' cy='298' r='1.1' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='348' cy='61' r='1.1' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='342' cy='225' r='0.5' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='114' cy='748' r='0.7' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='174' cy='252' r='0.9' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='171' cy='23' r='1.1' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='376' cy='439' r='0.5' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='293' cy='361' r='0.7' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='114' cy='39' r='1.4' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='189' cy='275' r='0.9' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='295' cy='522' r='1.1' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='120' cy='446' r='1.1' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='257' cy='60' r='1.4' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='199' cy='176' r='0.9' fill='%23fff' opacity='1.00'/%3E%3Ccircle cx='180' cy='112' r='0.7' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='70' cy='445' r='0.9' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='103' cy='456' r='0.5' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='165' cy='331' r='1.4' fill='%23fff' opacity='0.49'/%3E%3Ccircle cx='108' cy='602' r='1.1' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='387' cy='101' r='1.4' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='316' cy='679' r='0.5' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='99' cy='320' r='1.1' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='125' cy='651' r='0.5' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='170' cy='611' r='1.1' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='196' cy='59' r='1.4' fill='%23fff' opacity='0.91'/%3E%3Ccircle cx='389' cy='199' r='0.5' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='61' cy='778' r='0.5' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='289' cy='518' r='1.1' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='311' cy='1' r='0.7' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='368' cy='516' r='0.9' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='251' cy='423' r='1.1' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='45' cy='56' r='1.4' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='77' cy='209' r='1.4' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='215' cy='797' r='0.9' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='258' cy='707' r='1.1' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='219' cy='23' r='1.1' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='123' cy='17' r='1.1' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='259' cy='65' r='0.7' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='370' cy='181' r='0.5' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='287' cy='290' r='1.1' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='319' cy='591' r='1.4' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='198' cy='160' r='0.7' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='89' cy='608' r='0.9' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='249' cy='488' r='0.7' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='364' cy='45' r='1.4' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='157' cy='170' r='1.4' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='21' cy='48' r='1.1' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='285' cy='251' r='0.5' fill='%23fff' opacity='1.00'/%3E%3Ccircle cx='373' cy='263' r='0.7' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='210' cy='374' r='0.9' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='151' cy='299' r='0.9' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='44' cy='63' r='0.5' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='382' cy='99' r='0.7' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='307' cy='247' r='1.1' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='282' cy='157' r='1.4' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='77' cy='291' r='1.1' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='164' cy='649' r='1.1' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='14' cy='50' r='0.5' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='299' cy='719' r='0.9' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='134' cy='763' r='0.5' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='287' cy='253' r='0.9' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='289' cy='476' r='0.5' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='94' cy='380' r='1.1' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='155' cy='201' r='1.1' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='53' cy='397' r='0.5' fill='%23fff' opacity='0.87'/%3E%3Ccircle cx='295' cy='658' r='0.7' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='131' cy='256' r='0.9' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='238' cy='410' r='1.1' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='99' cy='52' r='0.5' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='218' cy='129' r='1.1' fill='%23fff' opacity='0.92'/%3E%3Ccircle cx='395' cy='212' r='0.5' fill='%23fff' opacity='0.49'/%3E%3Ccircle cx='168' cy='791' r='1.1' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='53' cy='369' r='0.7' fill='%23fff' opacity='0.84'/%3E%3Ccircle cx='339' cy='532' r='0.5' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='118' cy='224' r='0.9' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='295' cy='159' r='0.7' fill='%23fff' opacity='0.47'/%3E%3Ccircle cx='94' cy='225' r='1.4' fill='%23fff' opacity='0.47'/%3E%3Ccircle cx='26' cy='201' r='0.7' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='93' cy='647' r='1.1' fill='%23fff' opacity='0.99'/%3E%3Ccircle cx='41' cy='380' r='0.7' fill='%23fff' opacity='0.90'/%3E%3Ccircle cx='366' cy='32' r='0.9' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='20' cy='480' r='1.4' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='30' cy='410' r='0.7' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='104' cy='622' r='0.5' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='238' cy='496' r='0.7' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='136' cy='35' r='0.9' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='293' cy='731' r='0.5' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='164' cy='297' r='1.4' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='81' cy='636' r='1.4' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='163' cy='637' r='1.4' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='214' cy='522' r='1.1' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='164' cy='227' r='0.9' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='21' cy='596' r='0.9' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='7' cy='613' r='0.9' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='156' cy='324' r='0.5' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='63' cy='91' r='0.5' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='353' cy='369' r='0.7' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='21' cy='114' r='1.1' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='249' cy='297' r='1.4' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='139' cy='129' r='0.7' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='44' cy='392' r='0.7' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='335' cy='35' r='1.1' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='243' cy='509' r='0.5' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='248' cy='660' r='0.7' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='343' cy='497' r='1.4' fill='%23fff' opacity='0.90'/%3E%3Ccircle cx='332' cy='146' r='0.7' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='375' cy='125' r='0.9' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='99' cy='580' r='0.7' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='225' cy='606' r='0.5' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='130' cy='312' r='1.1' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='251' cy='245' r='1.1' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='100' cy='311' r='0.9' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='175' cy='19' r='1.4' fill='%23fff' opacity='0.99'/%3E%3Ccircle cx='186' cy='357' r='1.4' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='183' cy='144' r='1.1' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='27' cy='287' r='0.9' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='177' cy='408' r='0.5' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='52' cy='738' r='0.9' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='205' cy='43' r='1.4' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='261' cy='627' r='0.5' fill='%23fff' opacity='0.91'/%3E%3Ccircle cx='398' cy='586' r='0.5' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='393' cy='393' r='0.7' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='288' cy='177' r='0.9' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='101' cy='259' r='1.4' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='326' cy='115' r='1.4' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='192' cy='474' r='1.4' fill='%23fff' opacity='0.68'/%3E%3Ccircle cx='128' cy='29' r='0.7' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='255' cy='223' r='0.9' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='67' cy='628' r='0.5' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='19' cy='687' r='1.1' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='232' cy='706' r='0.5' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='214' cy='685' r='0.9' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='396' cy='462' r='0.9' fill='%23fff' opacity='0.57'/%3E%3Ccircle cx='33' cy='184' r='1.4' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='19' cy='656' r='0.9' fill='%23fff' opacity='0.55'/%3E%3Ccircle cx='386' cy='696' r='0.9' fill='%23fff' opacity='0.83'/%3E%3Ccircle cx='299' cy='177' r='0.9' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='173' cy='410' r='0.5' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='91' cy='522' r='0.5' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='227' cy='243' r='1.4' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='90' cy='467' r='1.4' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='146' cy='663' r='0.7' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='375' cy='195' r='0.7' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='25' cy='116' r='0.9' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='106' cy='9' r='1.4' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='238' cy='463' r='1.4' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='293' cy='199' r='0.5' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='213' cy='325' r='0.7' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='365' cy='84' r='1.4' fill='%23fff' opacity='0.71'/%3E%3Ccircle cx='376' cy='114' r='0.7' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='257' cy='518' r='1.1' fill='%23fff' opacity='0.88'/%3E%3Ccircle cx='70' cy='248' r='0.9' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='398' cy='579' r='1.1' fill='%23fff' opacity='0.82'/%3E%3Ccircle cx='3' cy='676' r='1.1' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='262' cy='140' r='0.5' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='258' cy='99' r='0.9' fill='%23fff' opacity='0.81'/%3E%3Ccircle cx='106' cy='443' r='1.1' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='367' cy='778' r='0.9' fill='%23fff' opacity='0.77'/%3E%3Ccircle cx='386' cy='174' r='1.4' fill='%23fff' opacity='0.36'/%3E%3Ccircle cx='104' cy='189' r='0.7' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='298' cy='261' r='1.1' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='96' cy='726' r='1.4' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='336' cy='558' r='0.5' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='290' cy='456' r='0.9' fill='%23fff' opacity='0.86'/%3E%3Ccircle cx='157' cy='468' r='1.4' fill='%23fff' opacity='0.94'/%3E%3Ccircle cx='58' cy='22' r='0.5' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='65' cy='782' r='0.5' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='55' cy='515' r='0.5' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='295' cy='53' r='1.4' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='80' cy='764' r='1.4' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='26' cy='694' r='1.1' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='82' cy='90' r='0.5' fill='%23fff' opacity='0.97'/%3E%3Ccircle cx='364' cy='603' r='0.5' fill='%23fff' opacity='0.89'/%3E%3Ccircle cx='253' cy='230' r='0.5' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='317' cy='517' r='0.9' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='170' cy='17' r='0.9' fill='%23fff' opacity='0.95'/%3E%3Ccircle cx='19' cy='608' r='0.9' fill='%23fff' opacity='0.85'/%3E%3Ccircle cx='241' cy='381' r='0.9' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='12' cy='330' r='1.1' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='39' cy='375' r='0.5' fill='%23fff' opacity='0.70'/%3E%3Ccircle cx='87' cy='690' r='0.5' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='115' cy='349' r='1.4' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='305' cy='782' r='0.5' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='38' cy='556' r='0.7' fill='%23fff' opacity='0.98'/%3E%3Ccircle cx='237' cy='766' r='1.4' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='378' cy='227' r='0.7' fill='%23fff' opacity='0.96'/%3E%3Ccircle cx='93' cy='133' r='0.5' fill='%23fff' opacity='0.67'/%3E%3Ccircle cx='396' cy='449' r='0.5' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='142' cy='321' r='1.1' fill='%23fff' opacity='0.93'/%3E%3Ccircle cx='298' cy='338' r='0.5' fill='%23fff' opacity='0.59'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="aurora"],.sw[data-bg="aurora"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23031019'/%3E%3Cstop offset='1' stop-color='%230a1f2c'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='28'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Cellipse cx='120' cy='180' rx='200' ry='50' fill='%232ef0a6' opacity='0.55' transform='rotate(-18 120 180)' filter='url(%23b)'/%3E%3Cellipse cx='300' cy='300' rx='220' ry='45' fill='%2322c7c9' opacity='0.45' transform='rotate(-25 300 300)' filter='url(%23b)'/%3E%3Cellipse cx='180' cy='430' rx='240' ry='55' fill='%238a5cf6' opacity='0.35' transform='rotate(-12 180 430)' filter='url(%23b)'/%3E%3Cellipse cx='260' cy='120' rx='160' ry='35' fill='%237ff7c1' opacity='0.4' transform='rotate(-30 260 120)' filter='url(%23b)'/%3E%3Cellipse cx='100' cy='600' rx='220' ry='50' fill='%2320b98a' opacity='0.3' transform='rotate(-20 100 600)' filter='url(%23b)'/%3E%3Ccircle cx='185' cy='551' r='0.8' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='92' cy='267' r='0.8' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='279' cy='406' r='0.8' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='302' cy='661' r='0.8' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='289' cy='780' r='0.8' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='241' cy='279' r='0.8' fill='%23fff' opacity='0.42'/%3E%3Ccircle cx='382' cy='207' r='0.8' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='398' cy='132' r='0.8' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='78' cy='121' r='0.8' fill='%23fff' opacity='0.37'/%3E%3Ccircle cx='121' cy='238' r='0.8' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='44' cy='729' r='0.8' fill='%23fff' opacity='0.44'/%3E%3Ccircle cx='354' cy='371' r='0.8' fill='%23fff' opacity='0.31'/%3E%3Ccircle cx='342' cy='349' r='0.8' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='392' cy='237' r='0.8' fill='%23fff' opacity='0.31'/%3E%3Ccircle cx='103' cy='591' r='0.8' fill='%23fff' opacity='0.30'/%3E%3Ccircle cx='97' cy='682' r='0.8' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='235' cy='518' r='0.8' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='267' cy='522' r='0.8' fill='%23fff' opacity='0.74'/%3E%3Ccircle cx='257' cy='467' r='0.8' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='73' cy='99' r='0.8' fill='%23fff' opacity='0.52'/%3E%3Ccircle cx='104' cy='561' r='0.8' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='97' cy='320' r='0.8' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='63' cy='680' r='0.8' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='8' cy='687' r='0.8' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='264' cy='698' r='0.8' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='131' cy='9' r='0.8' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='363' cy='85' r='0.8' fill='%23fff' opacity='0.43'/%3E%3Ccircle cx='87' cy='573' r='0.8' fill='%23fff' opacity='0.78'/%3E%3Ccircle cx='80' cy='279' r='0.8' fill='%23fff' opacity='0.72'/%3E%3Ccircle cx='183' cy='164' r='0.8' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='6' cy='634' r='0.8' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='137' cy='594' r='0.8' fill='%23fff' opacity='0.53'/%3E%3Ccircle cx='396' cy='147' r='0.8' fill='%23fff' opacity='0.56'/%3E%3Ccircle cx='373' cy='583' r='0.8' fill='%23fff' opacity='0.61'/%3E%3Ccircle cx='255' cy='202' r='0.8' fill='%23fff' opacity='0.49'/%3E%3Ccircle cx='25' cy='60' r='0.8' fill='%23fff' opacity='0.76'/%3E%3Ccircle cx='251' cy='540' r='0.8' fill='%23fff' opacity='0.59'/%3E%3Ccircle cx='44' cy='243' r='0.8' fill='%23fff' opacity='0.50'/%3E%3Ccircle cx='381' cy='777' r='0.8' fill='%23fff' opacity='0.80'/%3E%3Ccircle cx='384' cy='370' r='0.8' fill='%23fff' opacity='0.38'/%3E%3Ccircle cx='372' cy='55' r='0.8' fill='%23fff' opacity='0.70'/%3E%3Ccircle cx='77' cy='514' r='0.8' fill='%23fff' opacity='0.66'/%3E%3Ccircle cx='326' cy='117' r='0.8' fill='%23fff' opacity='0.63'/%3E%3Ccircle cx='332' cy='636' r='0.8' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='398' cy='608' r='0.8' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='312' cy='376' r='0.8' fill='%23fff' opacity='0.69'/%3E%3Ccircle cx='92' cy='563' r='0.8' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='393' cy='543' r='0.8' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='322' cy='639' r='0.8' fill='%23fff' opacity='0.48'/%3E%3Ccircle cx='262' cy='256' r='0.8' fill='%23fff' opacity='0.54'/%3E%3Ccircle cx='249' cy='68' r='0.8' fill='%23fff' opacity='0.75'/%3E%3Ccircle cx='61' cy='243' r='0.8' fill='%23fff' opacity='0.49'/%3E%3Ccircle cx='34' cy='452' r='0.8' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='377' cy='425' r='0.8' fill='%23fff' opacity='0.47'/%3E%3Ccircle cx='233' cy='526' r='0.8' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='29' cy='234' r='0.8' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='231' cy='683' r='0.8' fill='%23fff' opacity='0.39'/%3E%3Ccircle cx='181' cy='628' r='0.8' fill='%23fff' opacity='0.40'/%3E%3Ccircle cx='161' cy='428' r='0.8' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='275' cy='782' r='0.8' fill='%23fff' opacity='0.35'/%3E%3Ccircle cx='361' cy='439' r='0.8' fill='%23fff' opacity='0.62'/%3E%3Ccircle cx='119' cy='396' r='0.8' fill='%23fff' opacity='0.41'/%3E%3Ccircle cx='31' cy='671' r='0.8' fill='%23fff' opacity='0.64'/%3E%3Ccircle cx='47' cy='95' r='0.8' fill='%23fff' opacity='0.51'/%3E%3Ccircle cx='331' cy='379' r='0.8' fill='%23fff' opacity='0.58'/%3E%3Ccircle cx='194' cy='724' r='0.8' fill='%23fff' opacity='0.65'/%3E%3Ccircle cx='99' cy='132' r='0.8' fill='%23fff' opacity='0.60'/%3E%3Ccircle cx='294' cy='128' r='0.8' fill='%23fff' opacity='0.46'/%3E%3Ccircle cx='278' cy='398' r='0.8' fill='%23fff' opacity='0.45'/%3E%3Ccircle cx='186' cy='341' r='0.8' fill='%23fff' opacity='0.80'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="sunset"],.sw[data-bg="sunset"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd6a8'/%3E%3Cstop offset='0.45' stop-color='%23ffb3a0'/%3E%3Cstop offset='0.8' stop-color='%23f59bb4'/%3E%3Cstop offset='1' stop-color='%23d995c9'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='16'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Ccircle cx='260' cy='560' r='70' fill='%23fff3c9' opacity='0.9' filter='url(%23b)'/%3E%3Ccircle cx='260' cy='560' r='48' fill='%23fff6d8'/%3E%3Cpath d='M0 620 Q100 570 200 610 T400 600 V800 H0Z' fill='%23e48aa0' opacity='0.55'/%3E%3Cpath d='M0 680 Q120 640 240 690 T400 670 V800 H0Z' fill='%23c86f96' opacity='0.6'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="bokeh"],.sw[data-bg="bokeh"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23140f2e'/%3E%3Cstop offset='1' stop-color='%230b1530'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Ccircle cx='270' cy='144' r='26' fill='%23ffcf6b' opacity='0.12' filter='url(%23b)'/%3E%3Ccircle cx='18' cy='589' r='46' fill='%23ffcf6b' opacity='0.22' filter='url(%23b)'/%3E%3Ccircle cx='194' cy='718' r='15' fill='%23b28cff' opacity='0.25' filter='url(%23b)'/%3E%3Ccircle cx='135' cy='689' r='26' fill='%23b28cff' opacity='0.28' filter='url(%23b)'/%3E%3Ccircle cx='222' cy='730' r='23' fill='%236fd3ff' opacity='0.20' filter='url(%23b)'/%3E%3Ccircle cx='222' cy='661' r='23' fill='%23b28cff' opacity='0.20' filter='url(%23b)'/%3E%3Ccircle cx='201' cy='217' r='30' fill='%23ff7fb0' opacity='0.25' filter='url(%23b)'/%3E%3Ccircle cx='317' cy='265' r='24' fill='%236fd3ff' opacity='0.15' filter='url(%23b)'/%3E%3Ccircle cx='389' cy='70' r='46' fill='%23b28cff' opacity='0.26' filter='url(%23b)'/%3E%3Ccircle cx='354' cy='436' r='16' fill='%236fd3ff' opacity='0.14' filter='url(%23b)'/%3E%3Ccircle cx='19' cy='658' r='29' fill='%23ffcf6b' opacity='0.28' filter='url(%23b)'/%3E%3Ccircle cx='364' cy='489' r='34' fill='%23ffe9a8' opacity='0.30' filter='url(%23b)'/%3E%3Ccircle cx='33' cy='32' r='34' fill='%23ff7fb0' opacity='0.14' filter='url(%23b)'/%3E%3Ccircle cx='73' cy='30' r='39' fill='%23ffcf6b' opacity='0.19' filter='url(%23b)'/%3E%3Ccircle cx='329' cy='629' r='32' fill='%236fd3ff' opacity='0.29' filter='url(%23b)'/%3E%3Ccircle cx='74' cy='27' r='15' fill='%23ffe9a8' opacity='0.25' filter='url(%23b)'/%3E%3Ccircle cx='374' cy='44' r='32' fill='%23ffcf6b' opacity='0.28' filter='url(%23b)'/%3E%3Ccircle cx='310' cy='337' r='36' fill='%23b28cff' opacity='0.21' filter='url(%23b)'/%3E%3Ccircle cx='6' cy='310' r='33' fill='%23ff7fb0' opacity='0.22' filter='url(%23b)'/%3E%3Ccircle cx='165' cy='82' r='35' fill='%23ff7fb0' opacity='0.30' filter='url(%23b)'/%3E%3Ccircle cx='251' cy='342' r='14' fill='%23ffcf6b' opacity='0.32' filter='url(%23b)'/%3E%3Ccircle cx='343' cy='175' r='18' fill='%23b28cff' opacity='0.12' filter='url(%23b)'/%3E%3Ccircle cx='288' cy='194' r='37' fill='%23ff7fb0' opacity='0.30' filter='url(%23b)'/%3E%3Ccircle cx='146' cy='598' r='36' fill='%23ff7fb0' opacity='0.27' filter='url(%23b)'/%3E%3Ccircle cx='34' cy='503' r='37' fill='%23b28cff' opacity='0.25' filter='url(%23b)'/%3E%3Ccircle cx='356' cy='731' r='16' fill='%23ffcf6b' opacity='0.12' filter='url(%23b)'/%3E%3Ccircle cx='6' cy='521' r='40' fill='%23ffcf6b' opacity='0.20' filter='url(%23b)'/%3E%3Ccircle cx='125' cy='480' r='45' fill='%23b28cff' opacity='0.24' filter='url(%23b)'/%3E%3Ccircle cx='127' cy='759' r='37' fill='%23b28cff' opacity='0.26' filter='url(%23b)'/%3E%3Ccircle cx='58' cy='638' r='26' fill='%23ff7fb0' opacity='0.25' filter='url(%23b)'/%3E%3Ccircle cx='167' cy='309' r='39' fill='%236fd3ff' opacity='0.28' filter='url(%23b)'/%3E%3Ccircle cx='227' cy='234' r='16' fill='%23ffe9a8' opacity='0.19' filter='url(%23b)'/%3E%3Ccircle cx='242' cy='782' r='41' fill='%23ffe9a8' opacity='0.29' filter='url(%23b)'/%3E%3Ccircle cx='234' cy='781' r='22' fill='%23b28cff' opacity='0.26' filter='url(%23b)'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="hearts"],.sw[data-bg="hearts"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3C/defs%3E%3Crect width='90' height='90' fill='%23ffe6f0'/%3E%3Cpath d='M0 -6 C-6 -14 -18 -8 -12 2 L0 12 L12 2 C18 -8 6 -14 0 -6Z' fill='%23ff9ec4' opacity='0.55' transform='translate(24 26) rotate(-14)'/%3E%3Cpath d='M0 -6 C-6 -14 -18 -8 -12 2 L0 12 L12 2 C18 -8 6 -14 0 -6Z' fill='%23ffb7d3' opacity='0.5' transform='translate(68 68) rotate(12) scale(0.8)'/%3E%3C/svg%3E");--chat-bgsize:90px 90px}
.chat[data-bg="confetti"],.sw[data-bg="confetti"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3C/defs%3E%3Crect width='120' height='120' fill='%23fff9f0'/%3E%3Crect x='71' y='104' width='8' height='3.5' rx='1.5' fill='%237b6cf6' transform='rotate(51 71 104)' opacity='0.75'/%3E%3Crect x='40' y='34' width='8' height='3.5' rx='1.5' fill='%23ffb703' transform='rotate(106 40 34)' opacity='0.75'/%3E%3Ccircle cx='36' cy='20' r='2.6' fill='%2346c37b' opacity='0.75'/%3E%3Ccircle cx='43' cy='14' r='2.6' fill='%2346c37b' opacity='0.75'/%3E%3Crect x='26' y='88' width='8' height='3.5' rx='1.5' fill='%23ffb703' transform='rotate(56 26 88)' opacity='0.75'/%3E%3Crect x='80' y='56' width='8' height='3.5' rx='1.5' fill='%23ffb703' transform='rotate(167 80 56)' opacity='0.75'/%3E%3Ccircle cx='93' cy='55' r='2.6' fill='%23ff6b8b' opacity='0.75'/%3E%3Ccircle cx='90' cy='30' r='2.6' fill='%2346c37b' opacity='0.75'/%3E%3Crect x='103' y='62' width='8' height='3.5' rx='1.5' fill='%237b6cf6' transform='rotate(91 103 62)' opacity='0.75'/%3E%3Ccircle cx='25' cy='26' r='2.6' fill='%23ffb703' opacity='0.75'/%3E%3Crect x='45' y='67' width='8' height='3.5' rx='1.5' fill='%237b6cf6' transform='rotate(140 45 67)' opacity='0.75'/%3E%3Crect x='32' y='107' width='8' height='3.5' rx='1.5' fill='%237b6cf6' transform='rotate(67 32 107)' opacity='0.75'/%3E%3Crect x='46' y='56' width='8' height='3.5' rx='1.5' fill='%23ff6b8b' transform='rotate(28 46 56)' opacity='0.75'/%3E%3Crect x='43' y='62' width='8' height='3.5' rx='1.5' fill='%23ff6b8b' transform='rotate(17 43 62)' opacity='0.75'/%3E%3Crect x='115' y='101' width='8' height='3.5' rx='1.5' fill='%237b6cf6' transform='rotate(106 115 101)' opacity='0.75'/%3E%3Ccircle cx='33' cy='91' r='2.6' fill='%237b6cf6' opacity='0.75'/%3E%3C/svg%3E");--chat-bgsize:120px 120px}
.chat[data-bg="mountains"],.sw[data-bg="mountains"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%231a2150'/%3E%3Cstop offset='0.5' stop-color='%234a3f80'/%3E%3Cstop offset='1' stop-color='%237d5d93'/%3E%3C/linearGradient%3E%3Cfilter id='b' x='-50%25' y='-50%25' width='200%25' height='200%25'%3E%3CfeGaussianBlur stdDeviation='10'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Ccircle cx='300' cy='150' r='26' fill='%23f6efd9'/%3E%3Ccircle cx='300' cy='150' r='44' fill='%23f6efd9' opacity='0.18' filter='url(%23b)'/%3E%3Cpolygon points='0,800 0,451 20,469 40,483 60,470 80,470 100,467 120,475 140,490 160,469 180,444 200,462 220,458 240,472 260,446 280,443 300,455 320,441 340,464 360,485 380,460 400,436 420,438 400,800' fill='%233d3a72'/%3E%3Cpolygon points='0,800 0,587 20,614 40,588 60,563 80,583 100,597 120,607 140,596 160,602 180,608 200,613 220,593 240,589 260,582 280,596 300,620 320,620 340,620 360,617 380,603 400,575 420,547 400,800' fill='%232c2a5a'/%3E%3Cpolygon points='0,800 0,638 20,640 40,635 60,639 80,645 100,626 120,604 140,619 160,609 180,597 200,619 220,617 240,632 260,631 280,637 300,622 320,628 340,644 360,645 380,656 400,663 420,644 400,800' fill='%231f1d45'/%3E%3Cpolygon points='0,800 0,730 20,716 40,712 60,700 80,684 100,681 120,696 140,707 160,716 180,706 200,708 220,700 240,688 260,680 280,680 300,695 320,707 340,718 360,729 380,718 400,711 420,716 400,800' fill='%23151433'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="dunes"],.sw[data-bg="dunes"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23cfe7f3'/%3E%3Cstop offset='0.5' stop-color='%23fbeedb'/%3E%3Cstop offset='1' stop-color='%23fbe3c2'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='400' height='800' fill='url(%23g)'/%3E%3Cpath d='M0 430 Q140 360 260 420 T400 400 V800 H0Z' fill='%23f6d6a4'/%3E%3Cpath d='M0 540 Q160 470 300 540 T400 520 V800 H0Z' fill='%23efc58a'/%3E%3Cpath d='M0 650 Q120 600 240 650 T400 640 V800 H0Z' fill='%23e7b273'/%3E%3Cpath d='M0 740 Q160 700 280 745 T400 735 V800 H0Z' fill='%23dc9f5f'/%3E%3C/svg%3E");--chat-bgsize:cover}
.chat[data-bg="paper"],.sw[data-bg="paper"]{--chat-bgimg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3C/defs%3E%3Crect width='28' height='28' fill='%23fbf7ee'/%3E%3Cpath d='M28 0V28M0 28H28' stroke='%237f9bc4' stroke-opacity='0.22' stroke-width='1'/%3E%3C/svg%3E");--chat-bgsize:28px 28px}
/* Your own photo, under a light veil so the bubbles and small text read on it */
.chat[data-bg="photo"]{--chat-bgimg:linear-gradient(var(--chat-scrim),var(--chat-scrim)),var(--chat-photo)}
.chat[data-tone="d"]{--chat-scrim:rgba(8,6,18,.3)}
.chat[data-tone="l"]{--chat-scrim:rgba(255,255,255,.3)}
.chat[data-bg]:not([data-bg=""]){background:var(--chat-bgimg);background-size:var(--chat-bgsize,cover);background-position:center;background-attachment:fixed}
/* A scene or photo has its own tone, whatever the site's light or dark: bubbles and small text follow it */
.chat[data-tone="l"] .pm{--chat-gray:#ffffff !important;--chat-gray-ink:#1d1a22 !important}
.chat[data-tone="d"] .pm{--chat-gray:#3b3450 !important;--chat-gray-ink:#f4f0fa !important}
.chat[data-tone="d"] .pm-list{--muted:#f1edf8;--faint:#ddd6ea;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.chat[data-tone="l"] .pm-list{--muted:#2f2838;--faint:#463e52;text-shadow:0 0 6px rgba(255,255,255,.95)}
.chat[data-tone] .pm-bubble,.chat[data-tone] .pm-attach,.chat[data-tone] .pm-jumbo,.chat[data-tone] .pm-reacts,.chat[data-tone] .pm-quote{text-shadow:none}
.chat[data-tone] .chat-stamp,.chat[data-tone] .chat-sys{width:fit-content;max-width:min(440px,90%);margin-left:auto;margin-right:auto;padding:3px 12px;border-radius:999px;text-shadow:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.chat[data-tone="d"] .chat-stamp,.chat[data-tone="d"] .chat-sys{background:rgba(10,8,20,.42)}
.chat[data-tone="l"] .chat-stamp,.chat[data-tone="l"] .chat-sys{background:rgba(255,255,255,.7)}
.chat[data-bg]:not([data-bg=""]) .pm{--chat-gray:#463d55}
:root[data-theme="light"] .chat[data-bg]:not([data-bg=""]) .pm{--chat-gray:#ffffff}
@media (prefers-color-scheme: light){:root[data-theme="auto"] .chat[data-bg]:not([data-bg=""]) .pm{--chat-gray:#ffffff}}
.chat[data-bg]:not([data-bg=""]) .chat-stamp,.chat[data-bg]:not([data-bg=""]) .pm-receipt{color:var(--muted)}
.msg-shell .chat[data-bg]:not([data-bg=""]){border-radius:0}
.chat-bg-form{margin:0 0 14px}
.chat-bg-form .lbl{margin-bottom:8px}
.chat-bg-swatches{display:flex;flex-wrap:wrap;gap:10px}
.chat-bg-swatch{position:relative;cursor:pointer}
.chat-bg-swatch input{position:absolute;opacity:0;width:1px;height:1px}
.chat-bg-swatch .sw{display:block;width:40px;height:40px;border-radius:50%;background:var(--chat-bgimg,var(--bg));border:1px solid var(--line2);box-shadow:inset 0 0 0 2px rgba(255,255,255,.04)}
.chat-bg-swatch .sw[data-bg=""]{background:var(--bg)}
.chat-bg-swatch .sw[data-bg=""]::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:2px;background:var(--faint);transform:rotate(-45deg);top:0;bottom:0;left:0;right:0}
.chat-bg-swatch input:checked + .sw{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--chat-blue)}
.chat-bg-swatch input:focus-visible + .sw{outline:2px solid var(--chat-blue);outline-offset:3px}
.chat-bg-form .lbl.sm{font-size:13px;margin:12px 0 6px}
.chat-bg-scenes{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px 10px}
.chat-bg-scene{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer}
.chat-bg-scene input{position:absolute;opacity:0;width:1px;height:1px}
.chat-bg-scene .sw{display:flex;align-items:center;justify-content:center;width:100%;max-width:74px;height:auto;aspect-ratio:3/4.3;flex:0 0 auto;border-radius:14px;border:1px solid var(--line2);
  background:var(--chat-bgimg);background-size:var(--chat-bgsize,cover);background-position:center}
.chat-bg-scene .sw-photo{background:var(--chat-photo) center/cover}
.chat-bg-scene .sw[data-bg="hearts"]{--chat-bgsize:45px 45px}.chat-bg-scene .sw[data-bg="confetti"]{--chat-bgsize:60px 60px}.chat-bg-scene .sw[data-bg="paper"]{--chat-bgsize:14px 14px}
.chat-bg-scene input:checked + .sw{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--chat-blue)}
.chat-bg-scene input:focus-visible + .sw{outline:2px solid var(--chat-blue);outline-offset:3px}
.chat-bg-scene .scene-name{font-size:12px;line-height:1.2;color:var(--muted);text-align:center}
.chat-bg-add .sw{background:var(--panel2);border-style:dashed;font-size:26px;color:var(--faint)}
.chat-bg-add.busy .sw{animation:bgbusy .8s ease-in-out infinite alternate}
@keyframes bgbusy{to{opacity:.4}}
.chat-bgphoto-form{display:contents}
.pm-clear[open]{flex:1 1 100%}
.pm-clear[open] > summary{display:none}
.pm-clear > summary{list-style:none;cursor:pointer}
.pm-clear > summary::-webkit-details-marker{display:none}
/* Disappearing messages */
.chat-timer{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--faint)}
.chat-sys{display:block;margin:14px auto 6px;max-width:440px;text-align:center;font-size:12.5px;line-height:1.45;color:var(--muted)}
.chat-sys svg{vertical-align:-2px;margin-right:2px}
.chat-sys [data-chat-ts]{color:var(--faint)}
.chat-ret-form{margin:0 0 14px}
.chat-ret-form .lbl{margin-bottom:8px}
.chat-ret-opts{display:flex;flex-wrap:wrap;gap:8px}
.chat-ret-opt{cursor:pointer}
.chat-ret-opt input{position:absolute;opacity:0;width:1px;height:1px}
.chat-ret-opt span{display:inline-block;padding:7px 14px;border:1px solid var(--line2);border-radius:999px;font-size:14px;color:var(--text)}
.chat-ret-opt input:checked + span{background:var(--chat-blue);border-color:var(--chat-blue);color:#fff}
.chat-ret-opt input:focus-visible + span{outline:2px solid var(--chat-blue);outline-offset:2px}
.chat-ret-note{font-size:12.5px;margin:8px 0 0}
.chat-bg-actions{margin-top:8px}
.chat-bg-all{font-size:13px;color:var(--chat-blue);padding:4px 0;background:none;border:0;cursor:pointer}
.chat-bg-all:hover{text-decoration:underline}
.cm-search{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:18px 0 8px}
.cm-search .field{flex:1 1 220px;margin:0}
.cm-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}
/* Notifications page: the title with a small "On this device" switch beside it */
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.notif-head h1{font-size:44px;margin:0}
.push-mini-label{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);cursor:pointer;margin:0;white-space:nowrap}
@media (max-width:560px){.notif-head h1{font-size:30px}.push-mini-label{font-size:13px;gap:8px}}
.push-mini-switch{margin:0;padding:0;border:0;min-height:0}
.push-mini-msg{margin:-8px 0 14px;font-size:14px}
/* Appearance in the header, three ways: the icon shows the current setting (sun = Light, moon =
   Dark, half-filled circle = Auto, following the device); a tap moves on to the next. */
.nav-theme svg{display:none}
.nav-theme[data-theme-now="light"] .ico-sun,.nav-theme[data-theme-now="dark"] .ico-moon,.nav-theme[data-theme-now="auto"] .ico-auto{display:block}
@media (max-width:380px){.nav-tools .bell.nav-ais,.nav-tools .nav-search,.nav-tools .bell.nav-notes,.nav-tools .bell.nav-host{width:38px}}
/* Dictation: the microphone sits in the box, left of the send arrow; red and pulsing while it listens. */
.chat-field.has-dictate textarea{padding-right:80px}
.chat-dictate{position:absolute;right:38px;bottom:4px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;
  background:transparent;color:var(--muted);cursor:pointer}
.chat-dictate:hover{color:var(--text);background:rgba(var(--hl-rgb),.08)}
.chat-dictate.listening{background:#e5484d;color:#fff;animation:dictpulse 1.4s ease-in-out infinite}
@keyframes dictpulse{0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.45)}50%{box-shadow:0 0 0 6px rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.chat-dictate.listening{animation:none}}
/* Messages as an app, not a long page (2026-10-14): the page itself never scrolls; the conversation
   list scrolls on its own, and in a conversation only the messages scroll, between a header and a
   box that stay put. Computer: the list page and conversations. Phone: conversations only (the
   list stays an ordinary page). */
@media (min-width:900px){
  body:has(.msg-shell){height:100dvh;overflow:hidden}
  body:has(.msg-shell) .wrap{height:100dvh;display:flex;flex-direction:column}
  body:has(.msg-shell) .top{flex:none}
  body:has(.msg-shell) main{flex:1;min-height:0}
  body:has(.msg-shell) .foot,body:has(.msg-shell) .install-bar{display:none}
  body:has(.msg-shell) .msg-shell{height:100%;align-items:stretch}
  body:has(.msg-shell) .msg-side{position:static;height:100%;max-height:none}
  body:has(.msg-shell) .msg-empty{min-height:0;height:100%}
}
@media (max-width:899px){
  body:has(.chat){height:100dvh;overflow:hidden}
  body:has(.chat) .wrap{height:100dvh;display:flex;flex-direction:column}
  body:has(.chat) main{flex:1;min-height:0}
  body:has(.chat) .foot,body:has(.chat) .install-bar{display:none}
  body:has(.chat) .msg-shell{height:100%}
}
body:has(.chat) .chat{display:flex;flex-direction:column;height:100%;min-height:0}
body:has(.chat) .chat > *{flex:none}
body:has(.chat) .chat-head,body:has(.chat) .chat-compose{position:relative;top:auto;bottom:auto}
body:has(.chat) .chat .pm-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
body:has(.chat) .chat-info{max-height:55%;overflow-y:auto}
/* A group's picture: an emoji on a colored circle (pconvo.js GROUP_ICONS/GROUP_COLORS) */
.gicon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;background:var(--gi);line-height:1;--gi:linear-gradient(160deg,#8cc8ff,#2f7ee8)}
.gicon[data-c=purple]{--gi:linear-gradient(160deg,#c9a7ff,#7b4ae2)}.gicon[data-c=pink]{--gi:linear-gradient(160deg,#ffb3d9,#e8508f)}
.gicon[data-c=red]{--gi:linear-gradient(160deg,#ff9f94,#de3b33)}.gicon[data-c=orange]{--gi:linear-gradient(160deg,#ffc98a,#f07d1d)}
.gicon[data-c=yellow]{--gi:linear-gradient(160deg,#ffe58a,#f0b400)}.gicon[data-c=green]{--gi:linear-gradient(160deg,#a6e6a0,#36a84a)}
.gicon[data-c=teal]{--gi:linear-gradient(160deg,#93e3dc,#1f9e98)}.gicon[data-c=gray]{--gi:linear-gradient(160deg,#cfd3da,#7d8592)}
.convo-face .gicon{width:48px;height:48px}
.chat-group-form{margin:0 0 16px}
.chat-group-top{display:flex;align-items:center;gap:12px;margin:8px 0 12px}
.chat-group-top .btn{flex:0 0 auto;min-height:44px}
.chat-group-top .field{flex:1 1 auto;min-width:0;font-size:17px}
.chat-group-preview{display:flex;align-items:center;justify-content:center;flex:0 0 64px;height:64px}
.chat-group-preview [hidden]{display:none}
.chat-group-form .lbl.sm{font-size:13px;margin:6px 0 4px}
.chat-group-icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:2px;max-height:154px;overflow-y:auto;padding:2px;margin:0 0 8px;
  border:1px solid var(--line);border-radius:14px;overscroll-behavior:contain}
.gi-opt,.gc-opt{position:relative;display:flex;justify-content:center}
.gi-opt input,.gc-opt input{position:absolute;opacity:0;pointer-events:none}
.gi-opt span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:12px;font-size:27px;line-height:1;cursor:pointer}
.gi-none span{font-size:18px;color:var(--faint)}
.gi-opt input:checked + span{background:rgba(var(--accent-rgb),.16);box-shadow:inset 0 0 0 2px var(--accent)}
.gi-opt input:focus-visible + span,.gc-opt input:focus-visible + .gicon{outline:2px solid var(--accent);outline-offset:2px}
.chat-group-colors{display:flex;flex-wrap:wrap;gap:12px;padding:4px 4px 6px}
.gc-opt .gicon{width:38px;height:38px;cursor:pointer}
.gc-opt input:checked + .gicon{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent)}
/* Reactions (tapbacks): a little bubble on the message's top corner, as in Messages */
.pm-reacts{display:flex;gap:3px;margin:0 0 -10px;position:relative;z-index:2}
.pm.mine .pm-reacts{align-self:flex-start;margin-left:-10px}
.pm.theirs .pm-reacts{align-self:flex-end;margin-right:-10px}
.pm-react-chip{display:inline-flex;align-items:center;gap:2px;min-height:30px;padding:2px 9px;border-radius:999px;border:2px solid var(--bg);
  background:var(--chat-gray);font-size:17px;line-height:1;cursor:pointer;color:var(--chat-gray-ink)}
.pm-react-chip span{font-size:12px;font-weight:700}
.pm-react-chip.mine-r{background:var(--chat-blue);color:#fff}
.react-pick{position:fixed;z-index:60;display:flex;flex-direction:column;gap:4px;max-width:calc(100vw - 16px);padding:6px;border-radius:26px;background:var(--panel);
  border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.28)}
.react-pick-emo{display:flex;gap:2px}
.react-pick-emo button{flex:0 0 auto;width:44px;height:44px;border:0;border-radius:50%;background:transparent;font-size:26px;line-height:1;cursor:pointer;transition:transform .1s}
.react-pick-emo button:hover,.react-pick-emo button:focus-visible{transform:scale(1.18);background:rgba(var(--hl-rgb),.08);outline:none}
.react-pick-emo button.on{background:rgba(29,132,245,.18)}
.react-pick-acts{display:flex;gap:4px;border-top:1px solid var(--line);padding-top:4px}
.react-pick-acts button{flex:1 1 0;min-height:44px;padding:0 10px;border:0;border-radius:14px;background:transparent;color:var(--text);font:inherit;font-size:16px;cursor:pointer;white-space:nowrap}
.react-pick-acts button:active{background:rgba(var(--hl-rgb),.1)}
@media (max-width:400px){.react-pick-emo button{width:40px;height:40px;font-size:24px}}
.rename-title{margin:-4px 0 10px}
.rename-title > summary{list-style:none;cursor:pointer;display:inline-block}
.rename-title > summary::-webkit-details-marker{display:none}
.rename-title[open] > summary{display:none}
.rename-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.rename-form .field{flex:1 1 260px;margin:0}
/* A circle's conversation with the circle beside it (computer): the circle's panel on the left. */
.circle-thread-acts{display:flex;gap:8px;flex-wrap:wrap;margin:-2px 0 10px}
/* The top of a conversation (Michael's pick, 2026-10-15): the title, then one bar (when, how many
   posts, 🔒 private in a circle; Follow / Bookmark / Remind me or Share; ⋯), then the tags. Rename,
   the meeting form and the owners' tools live in ⋯; the two forms show only once opened from it. */
.thread-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:2px 0 12px}
.thread-bar-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;min-width:0}
.thread-bar-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.thread-bar-acts form{margin:0}
.thread-bar-acts .btn{min-height:34px;padding:4px 14px;font-size:14px}
.thread-private{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.thread-private svg{flex:0 0 auto}
.thread-tags{margin:0 0 4px}
.thread-tags .tag{background:transparent;font-size:13px;padding:2px 10px 3px}
.thread-tags .tag:hover{background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
/* Adding a tag the house AI missed (＋), and taking one off (× beside it, for whoever may) */
.tag-wrap{display:inline-flex;align-items:center}
.tag-x-form{margin:0;display:inline-flex}
.tag-x{border:0;background:none;color:var(--muted);font-size:15px;line-height:1;padding:2px 4px;margin-left:1px;cursor:pointer;opacity:.45;border-radius:50%}
.tag-wrap:hover .tag-x,.tag-x:focus-visible{opacity:1}
.tag-x:hover{color:var(--c,var(--accent))}
.tag-add{display:inline-flex;align-items:center;gap:6px}
.tag-add > summary{list-style:none;cursor:pointer;border-style:dashed}
.tag-add > summary::-webkit-details-marker{display:none}
.thread-tags .tag-plus{padding:2px 10px 3px;font-weight:700}
.tag-plus::before{content:none}
.tag-add[open] > summary{background:color-mix(in srgb,var(--c,var(--accent)) 14%,transparent)}
.tag-add-form{display:inline-flex;align-items:center;gap:6px;margin:0}
.tag-add-form .field{width:13em;max-width:52vw;min-height:30px;padding:3px 10px;font-size:14px}
.tag-add-form .btn{min-height:30px;padding:3px 12px}
.tag-error{margin:2px 0 8px}
.thread-more{position:relative}
.thread-more > summary{list-style:none;cursor:pointer;font-weight:700;letter-spacing:.06em;padding:4px 12px !important}
.thread-more > summary::-webkit-details-marker{display:none}
.thread-more-panel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:min(300px,86vw);display:flex;flex-direction:column;gap:2px;padding:6px;
  border-radius:14px;border:1px solid var(--line2);background:var(--panel);box-shadow:0 14px 34px rgba(var(--scrim-rgb),.45)}
.thread-more-item{display:block;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--text);font:inherit;font-size:14.5px;cursor:pointer}
.thread-more-item:hover,.thread-more-item:focus-visible{background:rgba(var(--hl-rgb),.07)}
.thread-more-panel form{margin:0}
.thread-more-sec{margin:6px 10px 2px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.thread-more-topic{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:4px 10px 6px}
.thread-more-topic label{font-size:13.5px;color:var(--muted)}
.thread-more-topic .field{flex:1 1 0;width:auto;min-width:0;margin:0;min-height:34px;padding:4px 8px}
/* Tighter between the header and the Summary: the live "who's here" bar keeps its height but no gap. */
.thread-head:has(.thread-bar){padding-bottom:6px}
.thread-head .room-bar{margin-top:0}
[data-live-gist] > .gist{margin-top:4px}
.thread-more-note{display:block;padding:8px 10px}
.thread-head details.rename-title:not([open]),.thread-head details.meeting-edit:not([open]){display:none}
.circle-thread-acts form{margin:0}
.circle-thread-acts .btn{min-height:34px;padding:4px 14px;font-size:14px}
.circle-shell .side-col{display:none}
.circle-rail{display:none}
@media (min-width:1000px){
  .circle-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:32px;align-items:start}
  .circle-rail{display:flex;flex-direction:column;align-items:stretch;gap:12px;position:sticky;top:16px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:6px 4px 20px}
  .circle-rail .ring{align-self:center;margin:14px 0 4px}
  .circle-rail .ring-name{font-size:17px}
  .circle-rail .rail-now{font-size:13px}
  .circle-rail .rail-now .now-person{display:flex}
  .circle-rail .rail-new{justify-content:center}
  .rail-links{display:flex;flex-wrap:wrap;gap:6px}
  .rail-links .btn{flex:1 1 auto;justify-content:center;min-height:34px;padding:4px 10px;font-size:14px}
  .circle-rail .rail-topics{position:static;margin-top:4px}
  .circle-shell-main .cols{flex-wrap:nowrap}
  .circle-shell-main .main-col{flex:1 1 auto;min-width:0;max-width:none}
  .circle-shell-main > .crumbs{display:none}
}
/* A circle's top row: "Circles" on the left, its search on the right (own row, so it never overlaps). */
.circle-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 6px}
.circle-topbar .crumbs{margin:0}
.circle-topbar .circle-search{display:flex;align-items:center;gap:10px;margin:0 0 0 auto;width:min(380px,100%)}
.circle-topbar .circle-search .field{flex:1;margin:0;min-height:40px;padding:8px 16px;font-size:15px}
.cs-adv{white-space:nowrap;font-size:14px}
@media (max-width:640px){.circle-topbar .circle-search{width:100%}}
/* The circle's advanced search page */
.cs-form{margin:0 0 18px}
.cs-q{width:100%;margin:0 0 12px;font-size:17px}
.cs-filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.cs-filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.cs-filters .field{margin:0;min-height:40px}
.cs-count{margin:0 0 8px}
.cs-results{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cs-hit{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--text);text-decoration:none}
.cs-hit:hover{border-color:var(--accent);text-decoration:none}
.cs-title{font-weight:700;color:var(--strong)}
.cs-snip{color:var(--muted);line-height:1.45}
.cs-snip mark{background:rgba(var(--accent-rgb),.22);color:var(--strong);border-radius:3px;padding:0 2px}
.cs-meta{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--faint)}
.cs-meta .av{width:20px;height:20px}
/* A circle's private messages: the box under Topics, search matches, labels */
.circle-dms{margin-top:14px}
.dm-link{display:flex;align-items:center;gap:8px}
.dm-link .av{width:22px;height:22px;flex:0 0 auto}
.dm-names{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-link.unread .dm-names{font-weight:700;color:var(--strong)}
.dm-dot{width:8px;height:8px;border-radius:50%;background:var(--chat-blue);flex:0 0 auto}
.dm-empty{margin:2px 10px 6px;font-size:13px}
.dm-new{color:var(--accent)}
.dm-hits{margin:0 0 16px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel2);display:flex;flex-direction:column;gap:8px}
.dm-hits-h{margin:0;font-size:13px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.dm-hit-convos{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.convo-circle{font-size:12px;font-weight:500;color:var(--faint);white-space:nowrap}
.chat-circle{font-size:11.5px;color:var(--faint)}
.circle-left{display:flex;flex-direction:column;min-width:0}
.circle-left .topic-nav{position:static}
@media (min-width:861px){.circle-left{position:sticky;top:14px}}
.circle-ask{margin:0 0 16px}
.circle-ask .cc-status:empty{display:none}
.circle-ask .cc-status{flex:1 1 100%;margin:0;font-size:13px;color:var(--faint)}
/* A circle's name in its ring: its own colour is a pastel, readable on dark but faint on light, so
   in light mode it's mixed with the ink colour. */
:root[data-theme="light"] .ring-name{color:color-mix(in srgb, var(--c) 45%, #1b1033)}
@media (prefers-color-scheme: light){:root[data-theme="auto"] .ring-name{color:color-mix(in srgb, var(--c) 45%, #1b1033)}}
.ring-logo{display:block;margin:0 auto 6px;border-radius:14px;object-fit:cover;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.circle-details .lbl{margin-top:12px}
.cd-colors{display:flex;flex-wrap:wrap;gap:10px}
.cd-color{position:relative;cursor:pointer}
.cd-color input{position:absolute;opacity:0;width:1px;height:1px}
.cd-color span[aria-hidden]{display:block;width:32px;height:32px;border-radius:50%;border:2px solid var(--line2)}
.cd-color input:checked + span{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.cd-color input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}
.cd-logo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cd-logo img{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.cd-logo-none{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border:1px dashed var(--line2);border-radius:14px;font-size:13px}
.cd-logo-rm{font-size:14px;color:var(--muted)}
.circle-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;max-height:360px;overflow-y:auto}
.topic-rules{margin:6px 0 4px;flex:1 1 100%}
.topic-rules-form{display:flex;flex-direction:column;gap:8px;padding:10px 0}
.topic-rule{display:flex;gap:8px;align-items:flex-start;font-size:14px;color:var(--text)}
.topic-people{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.topic-people .field{flex:1 1 220px;margin:0}
.announced-note{font-size:13px}

/* Company circles (2026-10-14): circles at your company, the branded invite page, titles and teams. */
.company-circles{margin:0 0 26px}
.company-circles h2{font-size:20px;margin:0 0 4px}
.cc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.cc-card{display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--c);border-radius:14px;background:var(--panel);color:inherit;text-decoration:none}
.cc-card:hover{border-color:var(--c)}
.cc-logo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.cc-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.cc-text .faint{font-size:14px}
.invite-logo{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid;background:var(--panel)}
.invite-note{text-align:left;margin:0 auto 22px;padding:14px 18px;border-left:4px solid var(--c);border-radius:10px;background:var(--panel);max-width:560px}
.invite-note > :first-child{margin-top:0}.invite-note > :last-child{margin-bottom:0}
.my-circle-title{margin-top:14px}
.mct-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mct-row .field{flex:1 1 180px;margin:0}
.cm-title{font-size:14px;color:var(--muted)}
.circle-members li{flex-wrap:wrap}
.cm-edit[open]{order:10;flex-basis:100%;padding:8px 0 0 48px}
.cm-edit > summary{list-style:none;cursor:pointer}.cm-edit > summary::-webkit-details-marker{display:none}
.cm-search select.field{flex:0 1 220px;margin:0}
.post-role{font-size:13px;color:var(--muted);font-weight:400}
.hist-dl{display:flex;gap:10px;flex-wrap:wrap}
.ret-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.ret-row .field{flex:1 1 260px;margin:0}
.sq-compose{margin:18px 0 0}
.sq-compose[hidden]{display:none}
.sq-compose-more{flex:1 1 100%;margin:-5px 0 -3px;font-size:13px;line-height:1.2;text-align:center}   /* centred and tucked under the box */
/* Meetings in circle conversations */
.meeting-card{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;margin:14px 0;padding:14px 18px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;background:var(--panel)}
.meeting-card.past{opacity:.75;border-left-color:var(--line)}
.mc-when{display:flex;gap:12px;align-items:flex-start}.mc-ico{font-size:24px;line-height:1}
.mc-place{color:var(--muted);margin-top:2px}
.mc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.meeting-edit{margin:8px 0 14px}.meeting-edit > summary{cursor:pointer;list-style:none}.meeting-edit > summary::-webkit-details-marker{display:none}
.meeting-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.meeting-form label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.meeting-form .field{margin:0}
.meeting-form .mf-wide{grid-column:1/-1}.mf-tz{margin:0;font-size:13px}.mf-btns{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:560px){.meeting-form{grid-template-columns:1fr 1fr}.meeting-form label:first-of-type{grid-column:1/-1}}
.circle-upcoming{margin:0 0 16px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.circle-upcoming h2{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;color:var(--muted)}
.circle-upcoming ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.circle-upcoming a{display:flex;gap:10px;flex-wrap:wrap;color:inherit;text-decoration:none}.circle-upcoming a:hover strong{text-decoration:underline}
.circle-upcoming .cu-when{color:var(--muted);font-size:14px}
/* Draft replies: only their author sees them */
.my-drafts{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.draft-card{padding:14px 18px;border:2px dashed var(--accent);border-radius:16px;background:var(--panel)}
.draft-head{margin:0 0 8px;font-size:14px}
.draft-pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:13px}
.draft-body > :first-child{margin-top:0}.draft-body > :last-child{margin-bottom:0}
.draft-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.draft-edit{flex:1 1 100%;order:5}.draft-edit[open] > summary{display:none}
.draft-edit > summary{list-style:none;cursor:pointer;display:inline-flex}.draft-edit > summary::-webkit-details-marker{display:none}
.draft-actions .draft-edit:not([open]){flex:0 0 auto;order:0}
.draft-jump{display:inline-block;margin:8px 0;padding:6px 14px;border:1px dashed var(--accent);border-radius:999px;font-size:14px;text-decoration:none}
/* Host: members table */
.mem-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:0 0 12px}
.mem-tools .field{max-width:280px;margin:0}
.mem-kinds{display:flex;gap:8px;flex-wrap:wrap}.mem-kinds .pill.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.mem-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.mem-table{width:100%;border-collapse:collapse;font-size:14px}
.mem-table th,.mem-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.mem-table tbody tr:last-child td{border-bottom:0}
.mem-table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);position:sticky;top:0;background:var(--panel)}
.mem-table th.sortable{cursor:pointer;user-select:none}.mem-table th.sortable:hover{color:var(--text)}
.mem-table th[aria-sort=ascending]::after{content:" ▲"}.mem-table th[aria-sort=descending]::after{content:" ▼"}
.mem-who{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.mem-who span{display:flex;flex-direction:column;line-height:1.25}
.mem-alerts{display:inline-flex;gap:10px}
.mem-status{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.mem-new{border-color:var(--accent);color:var(--accent)}.mem-muted,.mem-suspended{border-color:var(--danger);color:var(--danger)}
.mem-reports{color:var(--danger)}
.mem-src span{display:inline-block;max-width:220px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}

/* Header places as icons (layout.js placeLinks): the current page opens into a pill with its name;
   hovering another slides its name out. The label stays in the page for screen readers. */
.top .nav-main{gap:4px}
.nav-place{display:inline-flex;align-items:center;height:44px;padding:0 11px;border-radius:999px;color:var(--text);text-decoration:none}
.nav-place:hover{text-decoration:none;color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.nav-place .np-label{display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-weight:600;font-size:15px;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
.nav-place:hover .np-label,.nav-place:focus-visible .np-label,.nav-place.on .np-label{max-width:130px;opacity:1;margin-left:7px}
.nav-place.on{color:var(--accent);background:rgba(var(--accent-rgb),.13)}
@media (prefers-reduced-motion:reduce){.nav-place .np-label{transition:none}}

/* Every header icon slides its name out on hover, like the places (computers with a mouse only:
   on touch screens a tapped icon would stay open). The name comes from data-label. */
@media (hover:hover) and (min-width:641px){
  .nav-tools{gap:4px}
  .nav-tools .bell,.nav-tools .nav-search,.nav-tools .lang-menu summary,.nav-tools .me-link{width:auto;min-width:44px;height:44px;padding:0 11px;border-radius:999px;transition:background .2s ease,color .2s ease}
  .nav-tools .me-link{padding:0 5px;margin-left:2px}
  .nav-tools .nav-search,.nav-tools .bell,.nav-tools .lang-menu summary{display:inline-flex;align-items:center;justify-content:center}
  .nav-tools [data-label]::after{content:attr(data-label);display:inline-block;max-width:0;overflow:hidden;white-space:nowrap;opacity:0;font-weight:600;font-size:15px;transition:max-width .25s ease,opacity .2s ease,margin .25s ease}
  .nav-tools [data-label]:hover::after,.nav-tools [data-label]:focus-visible::after,.nav-tools .lang-menu[open] summary::after{max-width:160px;opacity:1;margin-left:7px}
  .nav-tools .bell:hover,.nav-tools .nav-search:hover,.nav-tools .lang-menu summary:hover,.nav-tools .me-link:hover{color:var(--accent);background:rgba(var(--accent-rgb),.08);text-decoration:none}
  .nav-tools .me-link:hover::after{margin-right:6px}
}
@media (prefers-reduced-motion:reduce){.nav-tools [data-label]::after{transition:none}}
/* Host dashboard (admin.js) */
.hd-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 16px}.hd-head h1{font-size:44px;margin:0}
.hd-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:8px 0 18px}
.hd-tabs a{padding:9px 12px;color:var(--muted);font-weight:600;font-size:15px;border-bottom:2px solid transparent;margin-bottom:-1px;text-decoration:none}
.hd-tabs a:hover{color:var(--text)}.hd-tabs a.on{color:var(--accent);border-color:var(--accent)}
.hd-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0 0 6px}
@media (max-width:900px){.hd-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:520px){.hd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hd-tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;min-width:0}
.hd-tile b{font:600 28px var(--serif);line-height:1.1}.hd-tile span{color:var(--muted);font-size:13px}.hd-tile em{font-style:normal;color:var(--accent);font-size:12px;font-weight:600}
.hd-tile.good b,.hd-tile.good em{color:#2f7d4f}.hd-tile.bad b,.hd-tile.bad em{color:var(--danger)}
:root[data-theme="dark"] .hd-tile.good b,:root[data-theme="dark"] .hd-tile.good em{color:#6fd39a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-tile.good b,:root:not([data-theme="light"]) .hd-tile.good em{color:#6fd39a}}
.adm-count.ok{color:#2f7d4f;border-color:rgba(47,125,79,.35)}
.hd-calm{margin:0;padding:14px 16px;border-radius:14px;background:rgba(47,125,79,.1);color:#2f7d4f;font-weight:600}
:root[data-theme="dark"] .hd-calm{color:#6fd39a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hd-calm{color:#6fd39a}}
.hd-h-note{font:400 13px var(--sans)}.hd-all{margin-left:auto}
.hd-list{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden}
.hd-row{border-bottom:1px solid var(--line)}.hd-row:last-child{border-bottom:0}
.hd-row > summary{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;list-style:none}
.hd-row > summary::-webkit-details-marker{display:none}.hd-row > summary:hover,.hd-row[open] > summary{background:var(--panel2)}
.hd-chip{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.hd-rt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}.hd-rt strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.hd-rt .faint{font-size:13px}
.hd-ra{display:flex;gap:6px;align-items:center}.hd-ra .adm-act .btn{min-height:30px;padding:3px 12px;font-size:13px}
.hd-det{padding:6px 14px 14px 52px;background:var(--panel2)}.hd-det p{margin:0 0 10px}
@media (max-width:640px){.hd-chip{display:none}.hd-det{padding-left:14px}}
.hd-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}@media (max-width:760px){.hd-two{grid-template-columns:1fr}}
.hd-people,.hd-mod{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}.hd-people li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hd-rule{margin:26px 0 4px;font-size:14px}
.mem-act > summary{list-style:none;cursor:pointer}.mem-act > summary::-webkit-details-marker{display:none}.mem-act[open]{display:flex;flex-direction:column;gap:6px}
.hd-all .act{font:600 14px var(--sans)}
.adm-actions > .btn{min-height:36px;padding:6px 14px;font-size:14px;display:inline-flex;align-items:center}
.cm-bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 4px}.cm-bulk .check{margin:0}
.cm-pick{width:18px;height:18px;accent-color:var(--accent);flex:none}.cm-pick-gap{width:18px;flex:none}
.danger-text{color:var(--danger)}.danger-text:disabled{opacity:.5}
/* A circle's banner (owners upload it in Settings): fills the space beside the ring. */
.circle-banner-img{height:190px;border-radius:18px;background:center/cover no-repeat;margin:0 0 14px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.circle-banner-none{display:flex;align-items:flex-end;justify-content:flex-end;padding:12px 14px;height:150px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--c) 34%,transparent),color-mix(in srgb,var(--c) 10%,transparent) 60%,transparent);border:1px solid color-mix(in srgb,var(--c) 30%,transparent)}
.circle-banner-none .act{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px}
@media (max-width:860px){.circle-banner-img{height:130px}.circle-banner-none{height:90px}}
.circle-search-side{flex-wrap:nowrap;gap:6px;margin:0 0 12px}
.circle-search-side .field{flex:1 1 auto;min-width:0;min-height:42px;padding:9px 16px;font-size:15px}
.circle-search-side .cs-adv{flex:none;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.circle-search-side .cs-adv:hover{color:var(--accent);text-decoration:none}
.circle-topbar .crumbs{padding:4px 0}
.cd-banner{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.cd-banner-prev{width:200px;height:50px;border-radius:10px;background:center/cover no-repeat;border:1px solid var(--line)}
/* The circle page's left column: the column spaces its boxes evenly (search, topics, messages, this circle). */
.circle-left{gap:14px}
.circle-left > .circle-dms,.circle-left > .circle-search-side{margin:0}
/* Circle catch-up views (Unread, Your conversations) at the top of Topics */
.topic-view .tv-ico,.topic-view .tv-dot{display:inline-block;width:16px;margin-right:6px;text-align:center;color:var(--muted)}
.topic-view .tv-dot{width:9px;height:9px;margin:0 9px 1px 3px;border-radius:50%;background:var(--accent);vertical-align:middle}
.topic-view.has-new{font-weight:700}.topic-view.has-new .topic-n{color:var(--accent);font-weight:700}
.topic-view + .topic-view + .topic-link{margin-top:2px;border-top:1px solid var(--line);border-radius:0 0 10px 10px;padding-top:10px}
.view-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 12px}.view-head .topic-title{margin:0}.view-head > .faint{flex-basis:100%;font-size:14px}
.topic-view svg.tv-ico{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
/* The host pages' shared tab row (_lib/hosttabs.js): one width everywhere, so it never jumps. */
.host-tabs{max-width:1100px;margin:0 auto 18px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.host-tabs::-webkit-scrollbar{display:none}.host-tabs a{white-space:nowrap}
/* Agora art (_lib/agora_art.js): line drawings from the Athenian Agora, in the site's colours. */
:root{--art-line:#e7b79c;--art-wash:#22163d;--art-hill:#2a1b44;--art-bubble:#22163d;--art-ink:#ece6f3}
:root[data-theme="light"]{--art-line:#7a5a48;--art-wash:#fffaf5;--art-hill:#f6e3d6;--art-bubble:#fff;--art-ink:#2a2140}
@media (prefers-color-scheme: light){:root[data-theme="auto"]{--art-line:#7a5a48;--art-wash:#fffaf5;--art-hill:#f6e3d6;--art-bubble:#fff;--art-ink:#2a2140}}
.agora-art{display:block;width:100%;height:auto}
.welcome-stoa{width:100%;max-width:820px;margin:10px auto 4px;opacity:.95}
.about-stoa{margin:0 0 18px}
.agora-explain{position:relative;display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;margin:16px 0 22px;padding:14px 44px 14px 18px;border:1px solid var(--line);border-radius:18px;background:var(--panel)}
.agora-explain p{margin:0}.agora-explain-k{font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:0 0 4px !important}
.agora-explain-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}
.agora-explain-x:hover{background:var(--panel2);color:var(--text)}
@media (max-width:640px){.agora-explain{grid-template-columns:1fr;padding-right:18px}.agora-explain .agora-art{max-width:220px;margin:0 auto}}
.empty-art{display:flex;align-items:center;gap:20px;text-align:left}.empty-art .agora-art{width:110px;flex:none}
.empty-art-text > :first-child{margin-top:0}.empty-art-text > :last-child{margin-bottom:0}
@media (max-width:520px){.empty-art{flex-direction:column;text-align:center}}
.agora-capitals{display:block;max-width:1100px;margin:30px auto 0}
.agora-explain[hidden]{display:none}

/* The wordmark (2026-10-14): a small temple standing on the letters' baseline, its pediment gold, and
   a matching gold pediment as the dot of the final i (a dotless ı plus a drawn roof). */
.wordmark .wm-temple{display:inline-block;vertical-align:baseline;height:.74em;width:auto;margin-right:.1em;color:var(--accent)}
.wordmark .wm-word{position:relative;display:inline-block}
.wordmark .wm-idot{position:absolute;right:.02em;top:-.03em;width:.3em;height:.2em}
/* Conversation cards: what just happened (a new reply, or a new conversation), and who said it. */
.card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.card-act{font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.card-act time{font-weight:500}
.act-reply{color:var(--accent)}.act-new{color:var(--gold)}
.card-last{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px}
.card-last .av{flex:none;margin-top:2px}
.card-last .cl-who{display:block;font-size:15px}
.card-last .cl-said{display:block;color:var(--text);line-height:1.5}
.card-last .cl-said:empty{display:none}
.card-last .cl-pics{display:flex;gap:6px;margin-top:6px}
.card-last .cl-pics img{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid var(--line2);display:block}
.card-act.act-old{color:var(--muted);font-weight:600}

/* The tagline under the logo: small, letter-spaced, muted, so it reads as part of the mark. */
.brand-lockup{display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1}
.brand-lockup .tagline{margin:5px 0 0 3px;font-family:var(--sans);font-size:11px;letter-spacing:.033em;color:var(--muted);white-space:nowrap}   /* as wide as the logo: under the temple to under the i */
@media (max-width:640px){.brand-lockup .tagline{display:none}}   /* no room in a phone header; the footer has it */

/* Your calendar (/calendar): month grid on the left, the chosen day + coming up + subscribe on the right. */
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cal-head h1{margin:0}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav strong{min-width:150px;text-align:center;font-size:17px}
.cal-sub{margin:6px 0 16px}
.cal-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;align-items:start}
.cal-month{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:12px;overflow:hidden}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dow span{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);padding:4px 6px 8px}
.cal-grid{gap:4px}
.cal-cell{min-height:96px;border:1px solid var(--line);border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0;background:var(--raise0)}
.cal-cell.out{opacity:.45}
.cal-cell.today{border-color:var(--accent)}
.cal-cell.sel{box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45) inset}
.cal-num{font-size:13px;font-weight:600;color:var(--muted);width:24px;height:24px;display:inline-grid;place-items:center;border-radius:50%;text-decoration:none}
.cal-cell.today .cal-num{background:var(--accent);color:var(--accent-ink)}
.cal-num:hover{background:rgba(var(--accent-rgb),.18)}
.cal-chip{display:block;font-size:12px;line-height:1.35;padding:2px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none;color:var(--text)}
.cal-chip.is-mine{background:rgba(var(--accent-rgb),.16)}
.cal-chip.is-meeting{background:color-mix(in srgb,var(--c,#7c6cf0) 22%,transparent);border-left:3px solid var(--c,#7c6cf0)}
.cc-t{color:var(--faint);margin-right:4px;font-variant-numeric:tabular-nums}
.cal-more{font-size:12px;color:var(--faint);padding-left:6px}
.cal-side{display:flex;flex-direction:column;gap:18px}
.cal-side h2{margin:0 0 10px;font-size:18px}
.cal-side h3{margin:18px 0 8px;font-size:15px;color:var(--muted)}
.cal-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cal-item{display:grid;grid-template-columns:84px minmax(0,1fr);gap:10px;align-items:start;padding:8px 10px;border-radius:10px;border-left:3px solid var(--accent);background:var(--raise0)}
.cal-item.is-meeting{border-left-color:var(--c,#7c6cf0)}
.ci-when{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.ci-what{display:flex;flex-direction:column;gap:2px;min-width:0}
.ci-note{white-space:pre-wrap;font-size:14px;color:var(--soft-text)}
.ci-acts{grid-column:2;display:flex;gap:12px;align-items:center}
.ci-acts form{margin:0}
.cal-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cal-form .cf-day{grid-column:1/-1}
.cal-form textarea.field{min-height:76px;height:auto}
.cal-form label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.cal-form .cf-wide{grid-column:1/-1}
.cal-form label.check{flex-direction:row;align-items:flex-start;gap:8px}
.cal-form label.check input{margin-top:3px}
.cal-form .field{width:100%;min-width:0}
.cal-about{grid-column:1/-1;margin:0;font-size:14px}
.cal-sub-card .invite-link{display:flex;gap:8px}
.cal-sub-card .invite-link .field{flex:1;min-width:0;font-size:13px}
.cal-how{margin-top:8px}
@media (max-width:980px){.cal-layout{grid-template-columns:1fr}}
@media (max-width:640px){
  .cal-cell{min-height:58px;padding:3px}
  .cal-chip{font-size:0;height:6px;padding:0;border-radius:3px}
  .cal-chip .cc-t{display:none}
  .cal-more{font-size:10px;padding:0}
  .cal-item{grid-template-columns:68px minmax(0,1fr)}
}

/* Circle tasks (/c/<slug>/tasks, functions/c/[slug]/tasks.js): a List or a Board of the same tasks. */
.tasks-page{max-width:1100px}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tk-head h1{margin:0}
.tk-viewswitch{display:inline-flex;border:1px solid var(--line2);border-radius:999px;padding:3px;gap:2px}
.tk-viewswitch a{padding:6px 14px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.tk-viewswitch a.on{background:rgba(var(--accent-rgb),.18);color:var(--strong)}
.tk-sub{margin:6px 0 14px}
.tk-new{margin:0 0 16px}
.tk-new>summary{list-style:none;display:inline-block;cursor:pointer}
.tk-new>summary::-webkit-details-marker{display:none}
.tk-new[open]>summary{margin-bottom:10px}
.tk-form{display:grid;grid-template-columns:minmax(0,1fr) 200px 170px auto;gap:10px;align-items:center}
.tk-form .field{min-width:0;padding:10px 12px;font-size:15px}
.tk-form-btns{display:flex;gap:10px;align-items:center}
.tk-tabs{display:flex;gap:8px;margin:4px 0 16px;flex-wrap:wrap}
.tk-tabs a{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;font-weight:600;border-radius:999px;font-size:14px;color:var(--muted);border:1px solid var(--line2);text-decoration:none}
.tk-tabs a.on{background:rgba(var(--accent-rgb),.16);color:var(--strong);border-color:rgba(var(--accent-rgb),.5)}
.tk-n{display:inline-block;min-width:20px;text-align:center;background:var(--chip);border-radius:999px;padding:0 7px;font-size:12px;color:var(--muted);font-weight:600}
.tk-group h3{font-size:14px;color:var(--muted);margin:16px 0 8px;display:flex;gap:8px;align-items:center}
.tk-group h3.over{color:var(--danger)}
.tk-list,.tk-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tk-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto 110px 28px;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--panel);border:1px solid var(--line)}
.tk-inline{margin:0;display:inline}
.tk-box{width:22px;height:22px;border:2px solid var(--muted);border-radius:6px;background:transparent;cursor:pointer;padding:0;display:grid;place-items:center;color:var(--accent-ink);font-weight:800;font-size:13px}
.tk-box:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.15)}
.is-done .tk-box{background:#22c55e;border-color:#22c55e}
.is-done .tk-box::after{content:"✓";color:#fff}
.tk-main{display:flex;flex-direction:column;min-width:0}
.tk-title{font-weight:600;color:var(--strong);overflow-wrap:anywhere}
.is-done .tk-title{text-decoration:line-through;color:var(--faint);font-weight:500}
.tk-src{font-size:13px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-doing{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:1px 7px;border-radius:999px;background:rgba(var(--glow-rgb),.18);color:var(--gold);vertical-align:2px}
.tk-who{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);white-space:nowrap}
.tk-who .avatar,.tk-who img{width:22px;height:22px}
.tk-due{font-size:13px;color:var(--muted);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tk-due.soon{color:var(--gold);font-weight:600}
.tk-due.over{color:var(--danger);font-weight:600}
.tk-more{font-size:18px;line-height:1;text-align:center;text-decoration:none}
.tk-editbox{grid-column:1/-1;display:flex;flex-direction:column;gap:10px;padding:10px 0 2px;border-top:1px dashed var(--line2);margin-top:4px}
.tk-editbox .tk-form{grid-template-columns:minmax(0,1fr) 180px 160px auto}
.tk-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.tk-col{background:var(--raise0);border:1px solid var(--line);border-radius:16px;padding:10px;min-height:260px;transition:border-color .15s,background .15s}
.tk-col.drop{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.tk-col h3{margin:2px 4px 10px;font-size:14px;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.tk-card{background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:4px;cursor:grab}
.tk-card.is-dragging{opacity:.45}
.tk-card .tk-title{font-size:15px}
.tk-card-meta{display:flex;align-items:center;gap:8px;margin-top:6px}
.tk-card-meta .tk-who-name{display:none}
.tk-card-meta .tk-due{text-align:left}
.tk-card-move{display:flex;align-items:center;gap:2px;margin-left:auto}
.tk-arrow{font-size:18px;padding:0 8px;line-height:1}
.tk-card .tk-editbox .tk-form{grid-template-columns:1fr}
@media (max-width:760px){
  .tk-form,.tk-editbox .tk-form{grid-template-columns:1fr 1fr}
  .tk-form .field[name=title]{grid-column:1/-1}
  .tk-row{grid-template-columns:26px minmax(0,1fr) auto 24px}
  .tk-row .tk-who-name{display:none}
  .tk-row .tk-due{grid-column:2;grid-row:2;text-align:left}
  .tk-board{grid-template-columns:1fr}
  .tk-col{min-height:0}
}

/* A task made from a post: the chip under it, and the form that makes one. */
.task-chips{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;align-items:flex-start}
.task-chip{display:inline-flex;align-items:center;gap:8px;max-width:100%;padding:5px 12px;border-radius:999px;background:var(--chip);color:var(--text);font-size:13px;text-decoration:none;flex-wrap:wrap}
.task-chip .tc-box{width:15px;height:15px;border:2px solid var(--muted);border-radius:4px;display:grid;place-items:center;font-size:10px;font-weight:800}
.task-chip.is-done{background:rgba(34,197,94,.16)}
.task-chip.is-done .tc-box{background:#22c55e;border-color:#22c55e;color:#fff}
.task-chip .tc-what{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:340px}
.task-chip .due{color:var(--gold)} .task-chip .over{color:var(--danger)}
.task-make{margin:12px 0 6px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:14px;padding:14px;background:rgba(var(--accent-rgb),.06)}
.task-make-h{margin:0 0 8px;font-weight:700}
.task-make-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px 170px;gap:10px}
.task-make-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);min-width:0}
.task-make-grid .field{padding:10px 12px;font-size:15px;min-width:0}
.task-make-ai{margin:8px 0 0;font-size:13px;color:var(--gold)}
.task-make-btns{display:flex;gap:10px;margin-top:12px}
@media (max-width:760px){.task-make-grid{grid-template-columns:1fr 1fr}.task-make-grid label:first-child{grid-column:1/-1}}

/* Tasks on your calendar. */
.cal-chip.is-task{background:rgba(34,197,94,.15);border-left:3px solid #22c55e}
.cal-chip.is-task::before{content:"☐ ";color:#22c55e}
.cal-item.is-task{border-left-color:#22c55e}
.cal-item.is-task .ci-when{color:#22c55e;font-weight:600}

/* "Eve finished a task: …" at the end of the conversation the task came from. */
.task-notes{display:flex;flex-direction:column;gap:8px;margin:18px 0 6px}
.task-note{display:flex;align-items:center;gap:10px;margin:0;padding:8px 14px;border-radius:12px;background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);font-size:14px}
.task-note .tn-box{width:18px;height:18px;border-radius:5px;background:#22c55e;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}

/* "Want this on your phone's calendar?" (functions/_lib/calendar.js calPrompt). */
.cal-prompt{display:flex;gap:14px;align-items:flex-start;margin:0 0 16px;padding:14px 16px;border-radius:16px;border:1px solid rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.07)}
.cal-prompt .cp-ico{font-size:26px;line-height:1}
.cal-prompt .cp-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-prompt .cp-acts{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cal-prompt .cp-dismiss{margin:0 0 0 auto}
.circle-upcoming .cu-phone{display:inline-block;margin-top:8px;font-size:14px}

/* A circle's calendar (/c/<slug>/calendar): shared dates in the circle's color, plus the key. */
.cal-chip.is-circle{background:color-mix(in srgb,var(--c,#7dd3fc) 24%,transparent);border-left:3px solid var(--c,#7dd3fc)}
.cal-item.is-circle{border-left-color:var(--c,#7dd3fc)}
.cal-key{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;margin:12px 4px 2px;font-size:13px}
.cal-key .ck{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:-8px;vertical-align:-1px}
.ck-circle{background:var(--c,#7dd3fc)} .ck-meeting{background:#7c6cf0} .ck-task{background:#22c55e}
.cal-show{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.switch-btn{flex:none;width:44px;height:26px;border-radius:999px;border:0;background:var(--switch-off);position:relative;cursor:pointer;padding:0}
.switch-btn span{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch-btn.on{background:var(--accent)}
.switch-btn.on span{left:21px}
.circle-upcoming h2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.circle-upcoming .cu-all{font-size:13px;text-transform:none;letter-spacing:0}

/* An X post, shown whole (functions/_lib/format.js xCard): who, the full text, its video or photos. */
.prose .xpost{margin:12px 0;padding:14px 16px;border:1px solid var(--line2);border-radius:16px;background:var(--panel2);max-width:620px}
.prose .xp-head{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.prose .xp-head:hover{text-decoration:none}
.prose .xp-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;margin:0}
.prose .xp-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.prose .xp-name{font-weight:700;color:var(--strong)}
.prose .xp-handle{font-size:14px;color:var(--faint)}
.prose .xp-logo{margin-left:auto;font-size:20px;color:var(--muted)}
.prose .xp-text{margin:10px 0 0;font-size:16px;line-height:1.55;white-space:normal;overflow-wrap:anywhere}
.prose .xp-media{margin-top:12px;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.prose .xp-media.xp-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.prose .xp-video,.prose .xp-photo img{display:block;width:100%;height:auto;max-height:560px;background:var(--media);margin:0;border-radius:0;object-fit:contain}
.prose .xp-foot{display:inline-block;margin-top:10px;font-size:13px;color:var(--faint)}
.prose .xpost a.xp-head,.prose .xpost a.xp-foot,.prose .xpost a.xp-photo{text-decoration:none;border-bottom:0}
.prose .xpost a.xp-foot:hover{color:var(--accent)}

/* ---------- Your Notebook + Files (profile tabs only the owner sees; _lib/notebook.js) ---------- */
.profile-tabs .tab-gap{flex:1 1 0;min-width:0}
.profile-tabs a.tab-private{font-weight:600}
.nb-private{margin:2px 0 14px;font-size:14px}
.nb-new{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 18px}
.nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:14px;align-items:start}
.nb-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 16px 10px;min-width:0}
.nb-card.is-pinned{border-color:rgba(var(--accent-rgb),.45)}
.nb-card.nb-busy{opacity:.7}
.nb-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.nb-kind{font-size:16px;line-height:1}
.nb-title{flex:1;min-width:0;margin:0;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;color:var(--strong);overflow-wrap:anywhere}
.nb-head form{margin:0}
.nb-head .nb-titleform{flex:1;min-width:0}
.nb-title-in{display:block;width:100%;background:transparent;border:0;border-radius:8px;padding:2px 6px;margin:0 -6px;font:inherit;font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.25;color:var(--strong)}
.nb-title-in::placeholder{color:var(--faint);opacity:1}
.nb-title-in:hover{background:var(--panel2)}
.nb-title-in:focus{outline:none;background:var(--panel2);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45)}
.nb-title.is-blank{color:var(--faint)}
.nb-pin{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:999px;border:1px solid transparent;background:none;color:var(--faint);cursor:pointer}
.nb-pin:hover{color:var(--text);border-color:var(--line2)}
.nb-pin.on{color:var(--accent)}
.nb-more{position:relative}
.nb-more>summary{list-style:none;cursor:pointer;font-size:18px;line-height:1}
.nb-more>summary::-webkit-details-marker{display:none}
.nb-menu{position:absolute;right:0;top:38px;z-index:20;width:min(280px,80vw);background:var(--panel2);border:1px solid var(--line2);border-radius:14px;padding:4px 14px 12px;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.nb-menu .field{padding:9px 12px;margin-bottom:8px}
.nb-menu form{margin:0 0 6px}
.nb-del{color:var(--danger)}
.nb-entries{list-style:none;margin:0;padding:0}
.nb-entry{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid var(--line)}
.nb-entry:last-child{border-bottom:0}
.nb-entry form{margin:0}
.nb-check{position:relative;display:inline-flex;width:26px;height:26px;align-items:center;justify-content:center;cursor:pointer;flex:none}
.nb-check input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.nb-box{width:19px;height:19px;border:2px solid var(--line2);border-radius:6px;display:inline-block}
.nb-check input:focus-visible+.nb-box{outline:2px solid var(--accent);outline-offset:2px}
.nb-box{position:relative}
.nb-check input:checked+.nb-box{background:var(--accent);border-color:var(--accent)}
.nb-check input:checked+.nb-box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.nb-text{flex:1;min-width:0;padding-top:2px;overflow-wrap:anywhere;line-height:1.45}
.nb-entry.is-done .nb-text{text-decoration:line-through;color:var(--faint)}
.nb-x{border:0;background:none;color:var(--faint);font-size:19px;line-height:1;width:28px;height:28px;border-radius:999px;cursor:pointer;opacity:.55}
.nb-entry:hover .nb-x,.nb-x:focus-visible{opacity:1}
.nb-x:hover{color:var(--danger)}
.nb-addform{display:flex;gap:8px;margin:10px 0 4px}
.nb-addform .field{flex:1;min-width:0;padding:9px 12px}
.nb-addform .btn{padding:8px 14px}
.nb-done{margin:8px 0 0}
.nb-done>summary{cursor:pointer;font-size:14px;padding:4px 0}
.nb-empty{margin:4px 0;font-size:14px}
.nb-body{font-size:16px;margin:4px 0 6px}
.nb-body p:last-child{margin-bottom:0}
.nb-edit>summary{list-style:none;cursor:pointer;display:inline-flex}
.nb-edit>summary::-webkit-details-marker{display:none}
.nb-edit[open]>summary{display:none}
.nb-ta{min-height:120px;margin:4px 0 8px;font-size:16px;padding:12px}
.nb-when{margin:8px 0 0;font-size:12.5px}
.nb-also{margin:22px 0 0;font-size:14px}
.pf-up{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 12px}
.pf-pick{position:relative;overflow:hidden;cursor:pointer}
.pf-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pf-up.busy .pf-pick{opacity:.6;pointer-events:none}
.pf-hint{font-size:13.5px}
.pf-use{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:13.5px}
.pf-bar{flex:0 1 220px;height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.pf-bar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.pf-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.pf-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.pf-row:last-child{border-bottom:0}
.pf-thumb{flex:none;width:48px;height:48px;border-radius:10px;background:var(--panel2);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:22px;text-decoration:none}
.pf-thumb img{width:100%;height:100%;object-fit:cover}
.pf-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pf-name{color:var(--strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-main .faint{font-size:13px}
.pf-acts{display:flex;align-items:center;gap:2px}
@media (max-width:640px){
  .profile-tabs .tab-gap{display:none}
  .nb-new .btn{flex:1 1 auto}
}

/* ---------- Docs: the list (profile tab) and a document open full-screen (functions/d/[id].js) ---------- */
.dl-h{font-family:var(--serif);font-weight:500;font-size:20px;margin:22px 0 10px;color:var(--strong)}
.dl-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.dl-row{border-bottom:1px solid var(--line)}
.dl-row:last-child{border-bottom:0}
.dl-main{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;color:inherit;text-decoration:none}
.dl-main:hover{background:var(--panel2);text-decoration:none}
.dl-row:first-child .dl-main{border-radius:16px 16px 0 0}.dl-row:last-child .dl-main{border-radius:0 0 16px 16px}
.dl-icon{font-size:22px;line-height:1.2}
.dl-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.dl-title{color:var(--strong);font-size:16.5px}
.dl-title.is-blank{color:var(--muted)}
.dl-sub{font-size:13px}
.dl-preview{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

body.doc-mode{background:var(--bg)}
body.doc-mode::before{display:none}
body.doc-mode .prelaunch,body.doc-mode header.top,body.doc-mode .foot,body.doc-mode .install-bar,body.doc-mode .tabbar,body.doc-mode .skip{display:none}
body.doc-mode main{padding:0}
.doc-app{position:fixed;inset:0;display:flex;flex-direction:column;z-index:30;background:var(--doc-bg,#120b20)}
:root[data-theme="light"] .doc-app{--doc-bg:#f1ece6}
@media (prefers-color-scheme: light){:root[data-theme="auto"] .doc-app{--doc-bg:#f1ece6}}
.doc-bar{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top)) 14px 8px;background:var(--panel);border-bottom:1px solid var(--line)}
.doc-back{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;color:var(--text);flex:none}
.doc-back:hover{background:var(--panel2)}
.doc-icon{flex:none;display:inline-flex;color:var(--accent)}
.doc-titlewrap{flex:1;min-width:0;display:flex;flex-direction:column}
.doc-title{background:transparent;border:0;border-radius:8px;padding:2px 6px;margin:0 -6px;font:inherit;font-size:18px;font-weight:600;color:var(--strong);min-width:0;width:100%}
.doc-title::placeholder{color:var(--muted);opacity:1}
.doc-title:hover:not([readonly]){background:var(--panel2)}
.doc-title:focus{outline:none;background:var(--panel2);box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45)}
.doc-status{font-size:12.5px;padding-left:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-people{display:flex;flex-direction:row-reverse;flex:none}
.doc-face{width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;border:2px solid var(--panel);margin-left:-6px}
.doc-chip{flex:none;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--muted)}
.doc-share{flex:none;display:inline-flex;align-items:center;gap:8px;padding:9px 16px}
.doc-tools{display:flex;align-items:center;gap:2px;padding:6px 10px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;justify-content:center}
.doc-tools::-webkit-scrollbar{display:none}
.doc-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:0;border-radius:9px;background:none;color:var(--text);cursor:pointer}
.doc-tool:hover{background:var(--panel2)}
.doc-tool.on{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
.doc-tool:disabled{opacity:.35;cursor:default;background:none}
.doc-block{flex:none;height:34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:14px;padding:0 8px}
.doc-sep{flex:none;width:1px;height:22px;background:var(--line2);margin:0 6px}
.doc-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:28px 16px calc(80px + env(safe-area-inset-bottom))}
.doc-sheet{max-width:816px;min-height:calc(100% - 20px);margin:0 auto;background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:0 6px 30px rgba(0,0,0,.18);padding:64px 72px}
.doc-loading{margin:0}
.doc-pm{outline:none;min-height:60vh;font-size:17px;line-height:1.7;color:var(--prose)}
.doc-pm>*:first-child{margin-top:0}
.doc-pm p{margin:0 0 10px}
.doc-pm h1{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.2;margin:26px 0 12px;color:var(--strong)}
.doc-pm h2{font-family:var(--serif);font-weight:500;font-size:26px;line-height:1.25;margin:22px 0 10px;color:var(--strong)}
.doc-pm h3{font-family:var(--serif);font-weight:500;font-size:21px;line-height:1.3;margin:18px 0 8px;color:var(--strong)}
.doc-pm ul,.doc-pm ol{padding-left:26px;margin:0 0 10px}
.doc-pm li>p{margin:0 0 4px}
.doc-pm hr{border:0;border-top:1px solid var(--line2);margin:22px 0}
.doc-pm a{color:var(--link);text-decoration:underline}
.doc-pm ul[data-type="taskList"]{list-style:none;padding-left:4px}
.doc-pm ul[data-type="taskList"] li{display:flex;gap:10px;align-items:flex-start}
.doc-pm ul[data-type="taskList"] li>label{flex:none;margin-top:5px}
.doc-pm ul[data-type="taskList"] li>label input{width:17px;height:17px;accent-color:var(--accent)}
.doc-pm ul[data-type="taskList"] li>div{flex:1;min-width:0}
.doc-pm ul[data-type="taskList"] li[data-checked="true"]>div{text-decoration:line-through;color:var(--faint)}
.doc-pm p.is-editor-empty:first-child::before{content:attr(data-placeholder);float:left;height:0;pointer-events:none;color:var(--faint)}
/* Other people's cursors and selections (Tiptap collaboration caret) */
.collaboration-carets__caret{position:relative;margin:0 -1px;border-left:2px solid;border-right:0;word-break:normal;pointer-events:none}
.collaboration-carets__label{position:absolute;top:-1.45em;left:-2px;font-size:11.5px;font-weight:600;line-height:1;padding:3px 6px;border-radius:5px 5px 5px 0;color:#fff;white-space:nowrap;user-select:none;font-family:var(--sans);letter-spacing:0}
.doc-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);border:1px solid var(--line2);border-radius:18px;background:var(--panel);color:var(--text);padding:18px 20px 16px}
.doc-dialog::backdrop{background:rgba(0,0,0,.55)}
.ds-close-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.ds-close-row h2{margin:0;font-size:24px;font-weight:500}
.ds-addrow{display:flex;gap:8px;flex-wrap:wrap}
.ds-addrow .field{flex:1 1 200px;padding:10px 12px;min-width:0}
.ds-pick{position:relative;flex:1 1 200px;min-width:0;display:flex}
.ds-pick .field{width:100%}
.ds-sugg{left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow-y:auto}
.ds-sugg-empty{margin:0;padding:8px 10px;font-size:14px}
.ds-addrow select.field{flex:0 0 auto;width:auto}
.ds-hint{font-size:13px;margin:8px 0 6px}
.ds-err{margin:8px 0}
.ds-people{list-style:none;margin:10px 0 0;padding:0;max-height:46vh;overflow-y:auto}
.ds-person{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.ds-person:last-child{border-bottom:0}
.ds-name{flex:1;min-width:0;display:flex;flex-direction:column}
.ds-name .faint{font-size:13px}
.ds-person select.ds-role{width:auto;padding:6px 10px;font-size:14px}
.ds-rolelabel{font-size:14px}
.ds-foot{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:10px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .doc-bar{gap:6px;padding-left:8px;padding-right:10px}
  .doc-icon,.doc-chip{display:none}
  .doc-share span{display:none}
  .doc-share{padding:9px 11px}
  .doc-tools{justify-content:flex-start}
  .doc-scroll{padding:0 0 calc(80px + env(safe-area-inset-bottom))}
  .doc-sheet{border:0;border-radius:0;box-shadow:none;padding:22px 18px;min-height:100%}
  .doc-people .doc-face:nth-child(n+4){display:none}
}
@media print{
  .doc-bar,.doc-tools{display:none}
  .doc-app{position:static}
  .doc-sheet{box-shadow:none;border:0;padding:0}
}
/* Photos in documents: corner handles to resize (Tiptap's resizable view), a size bar when selected */
.doc-pm [data-resize-container]{justify-content:center;margin:12px 0}
.doc-pm [data-resize-wrapper]{max-width:100%}
.doc-pm img{display:block;max-width:100%;height:auto !important;border-radius:6px}
.doc-pm .ProseMirror-selectednode img,.doc-pm [data-resize-state="true"] img{outline:3px solid rgba(var(--accent-rgb),.7);outline-offset:2px}
.doc-pm [data-resize-handle]{width:14px;height:14px;background:var(--accent);border:2px solid var(--panel);border-radius:50%;opacity:0;transition:opacity .15s;z-index:2}
.doc-pm [data-resize-container]:hover [data-resize-handle],.doc-pm .ProseMirror-selectednode [data-resize-handle],.doc-pm [data-resize-state="true"] [data-resize-handle]{opacity:1}
.doc-pm [data-resize-handle="top-left"]{transform:translate(-50%,-50%);cursor:nwse-resize}
.doc-pm [data-resize-handle="top-right"]{transform:translate(50%,-50%);cursor:nesw-resize}
.doc-pm [data-resize-handle="bottom-left"]{transform:translate(-50%,50%);cursor:nesw-resize}
.doc-pm [data-resize-handle="bottom-right"]{transform:translate(50%,50%);cursor:nwse-resize}
@media (pointer:coarse){.doc-pm [data-resize-handle]{width:22px;height:22px}}
.doc-imgbar{position:absolute;z-index:35;display:flex;gap:2px;padding:4px;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.doc-imgbar[hidden]{display:none}
.doc-imgbar button{border:0;background:none;color:var(--text);font:inherit;font-size:13.5px;font-weight:600;padding:7px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.doc-imgbar button:hover{background:rgba(var(--accent-rgb),.12)}

/* Following (your own list, /following) */
.fl-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.fl-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.fl-row:last-child{border-bottom:0}
.fl-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}
a.fl-main:hover{text-decoration:none}
a.fl-main:hover strong{color:var(--accent)}
.fl-col{flex-direction:column;align-items:flex-start;gap:4px}
.fl-text{display:flex;flex-direction:column;min-width:0}
.fl-text .faint{font-size:13.5px}
.fl-mutual{color:var(--accent);font-weight:600}
.fl-blurb{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fl-unfollow{margin:0;flex:none}
.fl-unfollow .btn{padding:7px 14px;font-size:14px}

/* Your profile and Settings, built like a circle's page (u/[handle].js, settings.js) */
.profile-left{gap:14px}
.profile-left > .circle-search-side{margin:0}
.profile-hero .ring-center{max-width:80%}
.profile-hero .ring-name{display:block}
.profile-hero .avatar-head{margin:0 0 2px}
.profile-hero .badge-ai{font-size:11px;vertical-align:middle;margin-left:6px}
.profile-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;align-items:center}
.profile-actions form{margin:0}
.profile-actions > div{margin-top:0 !important}
.profile-feed,.settings-body{min-width:0}
.settings-h{font-size:40px;margin:2px 0 4px}
.settings-intro{margin:0 0 16px;font-size:17px}
.settings-card{padding:18px 22px}
.settings-card .set-row:first-child{margin-top:0}
.set-blocked{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);margin:0}
.set-blocked:last-child{border-bottom:0}
.set-signout{margin:0}
.set-signout .topic-link{width:100%;border:0;background:none;font:inherit;font-size:15px;color:var(--text);text-align:left}

/* Voice messages, compact (app.js "Voice messages: one compact player"): one colour, the bubble's;
   a round play button for a finger, bars from the recording that fill as it plays, the time. */
.voice.vx{position:relative;flex-wrap:nowrap;gap:10px;padding:7px 14px 7px 7px;min-width:236px;max-width:300px;box-sizing:border-box}
.voice.vx .voice-mic,.voice.vx audio{display:none}
.voice.vx .voice-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vx-play{flex:none;width:44px;height:44px;border-radius:50%;border:0;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink);cursor:pointer;padding:0 0 0 2px}
.voice.is-playing .vx-play{padding:0}
.vx-wave{flex:1 1 auto;min-width:118px;height:30px;display:flex;align-items:center;gap:2px;cursor:pointer;outline-offset:3px}
.vx-wave i{flex:1 1 0;min-width:2px;max-width:4px;border-radius:2px;background:currentColor;opacity:.35;transition:opacity .15s}
.vx-wave i.on{opacity:1}
.vx-time{flex:none;min-width:34px;text-align:right;font-size:13px;font-variant-numeric:tabular-nums;opacity:.85}
.pm-attach.prose .voice{border:0}
.pm.mine .pm-attach .voice.vx .vx-play{background:#ffffff;color:var(--chat-blue)}
.pm.theirs .pm-attach .voice.vx{color:var(--chat-gray-ink)}
.pm.theirs .pm-attach .voice.vx .vx-play{background:var(--chat-blue);color:#ffffff}

/* A new conversation (messages/new.js): the same chat pane, with a "To:" row under the header. */
.chat-to{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:8px 16px;border-bottom:1px solid var(--line)}
.chat-to > label{color:var(--muted);font-size:15px}
.chat-to #to{flex:1 1 180px;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--text);outline:none;padding:8px 0}
.chat-to-title > summary{list-style:none;cursor:pointer;color:var(--chat-blue);font-size:14px;padding:6px 0}
.chat-to-title > summary::-webkit-details-marker{display:none}
.chat-to-title[open]{flex-basis:100%;display:flex;align-items:center;gap:10px}
.chat-to-title input{flex:1;min-width:0;border:1px solid var(--line2);border-radius:999px;background:var(--panel);font:inherit;font-size:15px;color:var(--text);padding:7px 14px}
.chat-new .chat-empty{text-align:center;max-width:420px;margin:28px auto}

/* Message boxes: attachments wait as chips above the box (app.js "attachments wait in a tray") */
.chat-tray{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px 8px}
.chat-tray[hidden]{display:none}
.tray-chip{position:relative;display:inline-flex;align-items:center;gap:8px;max-width:260px;padding:6px 34px 6px 10px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2);font-size:14px;color:var(--text)}
.tray-image{padding:0;border-radius:12px;overflow:hidden;width:64px;height:64px}
.tray-image img{width:100%;height:100%;object-fit:cover;display:block}
.tray-ico{font-size:16px;line-height:1}
.tray-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:24px;height:24px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:15px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tray-image .tray-x{top:4px;right:4px;transform:none;width:22px;height:22px}
.chat-sending{color:transparent !important;caret-color:transparent}
/* The same tray in a reply box: under the text, on the box's light paper */
.composer .chat-tray{padding:2px 14px 12px}
.composer .tray-chip{background:#fff;border-color:#d3dde8;color:var(--ink-text)}
.composer .tray-image{width:84px;height:84px}
/* Where a photo was taken (functions/_lib/places.js). Before posting: a 📍 on the thumbnail (tap: off)
   and a line saying where, with "Add where I am". On the page: a chip on the photo naming the place,
   with a small menu for the photo's owner and the host. */
.tray-geo{position:absolute;left:4px;bottom:4px;width:24px;height:24px;border-radius:50%;border:0;padding:0;background:rgba(0,0,0,.6);font-size:13px;line-height:24px;text-align:center;cursor:pointer}
.tray-geo.off{opacity:.45;filter:grayscale(1)}
.tray-geo-line{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.composer .tray-geo-line{color:#4a5568}
.tray-here{font-size:13.5px}
figure.img{position:relative}
.geo-chip{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;max-width:calc(100% - 64px);border-radius:999px;background:rgba(10,12,20,.66);color:#fff;font-size:13px;font-weight:600;line-height:1.2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.geo-chip > a,.geo-chip > span{display:block;padding:5px 10px;color:#fff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.geo-chip > a:hover{text-decoration:underline}
.geo-chip.off{background:rgba(10,12,20,.45);color:#ddd}
.geo-own{position:relative}
.geo-own summary{list-style:none;cursor:pointer;padding:5px 10px 5px 2px;color:#fff}
.geo-own summary::-webkit-details-marker{display:none}
.geo-menu{position:absolute;top:calc(100% + 6px);left:-40px;min-width:230px;max-width:280px;padding:6px;border-radius:12px;background:var(--panel);border:1px solid var(--line2);box-shadow:0 10px 30px rgba(0,0,0,.4);font-weight:500}
.geo-menu form{margin:0}
.geo-menu button{display:block;width:100%;text-align:start;padding:8px 10px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;white-space:normal}
.geo-menu button:hover{background:rgba(var(--hl-rgb),.08)}
.geo-menu-h{margin:4px 10px 2px;font-size:12px;color:var(--muted)}
.place{max-width:760px}
.place-k{margin:0;color:var(--accent);font-weight:600;font-size:15px}
.place h1{font-family:var(--serif);font-weight:500;font-size:clamp(32px,5vw,46px);margin:6px 0 4px;color:var(--strong)}
.place-where{margin:0 0 12px}
.place-facts{display:grid;gap:6px;margin:0 0 16px}
.place-facts div{display:flex;gap:10px}
.place-facts dt{min-width:84px;color:var(--muted)}
.place-facts dd{margin:0;overflow-wrap:anywhere}
.place-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:0 0 20px}
.place-photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;display:block;border:1px solid var(--line2)}
.place-convos{padding-left:20px;line-height:1.7}
.place-credit{margin-top:28px;font-size:13px}
/* The ask box's photos: a row of thumbnails, each with its own × */
.ask-photos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ask-photos .ask-thumb{position:relative;display:block;width:72px;height:72px}
.ask-photos .tray-x{top:4px;right:4px;transform:none;width:22px;height:22px}
.ask-photos-note{flex-basis:100%;margin:2px 0 0;font-size:13px}

/* Any script, either direction (Bryan: readers beyond the Roman alphabet). Arabic, Hebrew, Persian
   and Urdu read right to left: each paragraph, title and box sets its own direction from its own
   first letter, so a right-to-left post sits on the right with its punctuation in place, and a
   mixed conversation still reads naturally line by line. */
.prose p,.prose li,.prose h1,.prose h2,.prose h3,.prose h4,.prose blockquote,.prose td,.prose th,
.thread-head h1,.card h3,.card .cl-said,.ask-similar-title,.gist li,.answered-ex,
textarea,input[type="text"],input[type="search"],input:not([type]){unicode-bidi:plaintext;text-align:start}
.price-box .pb-then{margin-top:4px;font-size:13px;color:var(--muted)}
.price-box .pb-then .up{color:#4ade80}
.price-box .pb-then .down{color:#f87171}

/* ---------- PDF reader (u/[handle]/files/[id]/read.js, public/pdf-reader.js) ---------- */
.pr-app .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-name{font-size:17px;font-weight:600;color:var(--strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-bar .doc-tool{text-decoration:none}
.pr-mark{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;min-height:40px}
.pr-tools{display:flex;align-items:center;gap:2px;padding:5px 10px;background:var(--panel);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.pr-tools::-webkit-scrollbar{display:none}
.pr-pagebox{flex:none;display:inline-flex}
.pr-app input.pr-page{width:56px;height:34px;text-align:center;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);font:inherit;font-size:15px;padding:0 4px}
.pr-page:focus{outline:none;box-shadow:0 0 0 2px rgba(var(--accent-rgb),.45)}
.pr-of{flex:none;font-size:14px;margin:0 6px 0 7px;white-space:nowrap}
.pr-zoomval{flex:none;min-width:58px;height:34px;border:0;border-radius:9px;background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.pr-zoomval:hover{background:var(--panel2)}
.pr-find{display:flex;align-items:center;gap:2px;margin-left:auto;flex:0 1 380px;min-width:220px}
.pr-find[hidden]{display:none}
.pr-find .field{height:34px;padding:0 12px;border-radius:9px;font-size:15px;min-width:0}
.pr-findcount{flex:none;font-size:13px;min-width:52px;text-align:right;white-space:nowrap}
.pr-body{flex:1;min-height:0;display:flex;position:relative}
.pr-side{display:none;flex:none;width:300px;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);min-height:0}
.pr-side-open .pr-side{display:flex}
.pr-tabs{display:flex;gap:4px;padding:8px 10px 0;border-bottom:1px solid var(--line)}
.pr-tab{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-size:14px;font-weight:600;padding:8px 6px 10px;border-bottom:2px solid transparent;cursor:pointer}
.pr-tab.on{color:var(--strong);border-bottom-color:var(--accent)}
.pr-panel{flex:1;overflow-y:auto;padding:10px 10px calc(30px + env(safe-area-inset-bottom))}
.pr-panel[hidden]{display:none}
.pr-list,.pr-toc-sub{list-style:none;margin:0;padding:0}
.pr-toc-sub{padding-left:14px}
.pr-item{display:flex;align-items:center;flex-wrap:wrap;border-radius:9px}
.pr-item.here>.pr-go{background:rgba(var(--accent-rgb),.12)}
.pr-item.here>.pr-go .pr-pnum{color:var(--accent)}
.pr-go{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;border:0;background:none;color:var(--text);font:inherit;font-size:14.5px;line-height:1.35;text-align:left;padding:7px 8px;border-radius:9px;cursor:pointer}
.pr-go:hover{background:var(--panel2)}
.pr-item>.pr-toc-sub{flex-basis:100%}
.pr-label{flex:1;min-width:0;overflow-wrap:anywhere}
.pr-pnum{flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.pr-item.lvl1 .pr-go{padding-left:22px;font-size:14px}
.pr-item.lvl2 .pr-go{padding-left:36px;font-size:13.5px;color:var(--muted)}
.pr-item.lvl0 .pr-label{font-weight:500}
.pr-ailist .pr-item.lvl0 .pr-label{font-weight:600}
.pr-mini{flex:none;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--faint);font-size:16px;cursor:pointer;opacity:.0;transition:opacity .12s}
.pr-item:hover .pr-mini,.pr-mini:focus-visible{opacity:1}
@media (hover:none){.pr-mini{opacity:.7}}
.pr-mini:hover{background:var(--panel2);color:var(--text)}
.pr-empty{padding:8px;font-size:14px;line-height:1.45}
.pr-ai{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pr-h{margin:0 0 6px;padding:0 8px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:uppercase}
.pr-ai-hint{margin:0 8px 10px;font-size:13.5px;line-height:1.45}
.pr-aibtn{width:100%;margin-top:8px;white-space:normal;line-height:1.3;padding:10px 14px}
.pr-aibtn.busy{opacity:.75;cursor:progress}
.pr-ai-note{margin:8px 8px 0;font-size:12.5px;line-height:1.4}
.pr-premium{margin:6px 8px 0;font-size:12.5px;color:var(--accent)}
.pr-err{margin:10px 0 0;font-size:14px}
.pr-askform{display:flex;flex-direction:column;gap:8px}
.pr-askform .lbl{font-weight:600;font-size:14px;color:var(--strong)}
.pr-askform textarea{font-size:15px;padding:10px 12px;resize:vertical;min-height:84px}
.pr-askform .btn{align-self:flex-end;min-width:90px}
.pr-answers{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.pr-answer{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--panel2)}
.pr-q{margin:0 0 6px;font-weight:600;color:var(--strong);font-size:14.5px}
.pr-a{font-size:14.5px;line-height:1.5;color:var(--text)}
.pr-a p,.pr-a ol,.pr-a ul{margin:0 0 6px}
.pr-a ol,.pr-a ul{padding-left:20px}
.pr-pg{border:0;background:rgba(var(--accent-rgb),.14);color:var(--accent);font:inherit;font-size:.92em;font-weight:600;padding:0 5px;border-radius:6px;cursor:pointer}
.pr-pg:hover{background:rgba(var(--accent-rgb),.26)}
.pr-stage{flex:1;min-width:0;position:relative}
.pr-scroll{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:none}
.pr-scroll .pdfViewer{padding:12px 0 calc(60px + env(safe-area-inset-bottom))}
.pr-scroll .pdfViewer .page{box-shadow:0 4px 22px rgba(0,0,0,.22);border-radius:2px}
@media (max-width:899px){
  .pr-side{position:absolute;z-index:5;top:0;bottom:0;left:0;width:min(340px,88vw);box-shadow:8px 0 30px rgba(0,0,0,.35)}
}
@media (max-width:700px){
  .pr-mark span,.pr-dl{display:none}
  .pr-mark{padding:8px 11px}
  .pr-find{flex:1 0 100%;order:9;margin:4px 0 0}
  .pr-tools{flex-wrap:wrap}
  .pr-scroll .pdfViewer{padding-top:4px}
}

/* ---------- Dictionary (/word/<word>, functions/_lib/dictionary.js) ---------- */
.wd .wd-search{display:flex;gap:8px;margin:0 0 18px}
.wd .wd-search .field{flex:1;min-width:0;padding:11px 14px}
.wd-word{font-size:52px;line-height:1.05;margin:6px 0 14px;overflow-wrap:anywhere}
.wd-ai{border:1px solid var(--line2);border-radius:16px;padding:14px 16px;margin:0 0 22px;background:var(--panel)}
.wd-ai-h{margin:0 0 6px;font-size:15px;font-weight:700;color:var(--strong);display:flex;align-items:center;gap:8px}
.wd-ai-body{font-size:16.5px;line-height:1.6;color:var(--prose,var(--text))}
.wd-ai-body p{margin:0 0 8px}
.wd-ai-note{margin:6px 0 0;font-size:12.5px}
.wd-group{padding:16px 0 8px;border-top:1px solid var(--line)}
.wd-head{font-size:30px;margin:0 0 8px}
.wd-head sup{font-size:.55em;color:var(--accent);margin-left:2px}
.wd-say{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 6px}
.wd-play{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:6px 14px 6px 10px;border-radius:999px;border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.10);color:var(--accent);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.wd-play:hover{background:rgba(var(--accent-rgb),.18)}
.wd-play.on{background:var(--accent);color:var(--accent-ink)}
.wd-ipa{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px}
.wd-ipa-v{font-size:18px;color:var(--strong);font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Sans",var(--sans)}
.wd-sounds{margin:4px 0 0;font-size:14px}
.wd-et{margin:12px 0 6px}
.wd-et h3,.wd-part h3{font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--muted);margin:14px 0 6px}
.wd-et p{margin:0 0 6px;line-height:1.6}
.wd-part h3 em{font-style:italic;font-weight:600;color:var(--strong);font-size:17px;letter-spacing:0;font-family:var(--serif)}
.wd-forms{font-weight:400;font-size:14px;margin-left:6px}
.wd-senses{margin:0 0 6px;padding-left:0;line-height:1.55;list-style:none;counter-reset:wd}
.wd-senses li{margin:0 0 7px;position:relative;padding-left:30px}
.wd-senses li:not(.wd-sub){counter-increment:wd}
.wd-senses li:not(.wd-sub)::before{content:counter(wd) ".";position:absolute;left:0;width:24px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.wd-senses li.wd-sub::before{content:"◦";position:absolute;left:12px;color:var(--faint)}
.wd-sub1{margin-left:18px}.wd-sub2{margin-left:34px}
.wd-tags{font-size:12.5px;font-weight:600;color:var(--muted);background:var(--panel2);border-radius:6px;padding:1px 6px}
.wd-ex{display:block;color:var(--muted);font-style:italic;font-size:14.5px;margin-top:2px}
.wd-syn{margin:4px 0 8px;font-size:14px}
.wd-more{margin:20px 0 10px}
.wd-credit{margin:18px 0 30px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;overflow-wrap:anywhere}
@media (max-width:700px){.wd-word{font-size:40px}.wd-head{font-size:26px}}
/* One word in the ask box: its dictionary preview (app.js, api/word-peek) */
.ask-word{display:flex;flex-direction:column;gap:3px;padding:4px 4px;color:var(--text)}
.askbox a.ask-word,.askbox a.ask-word *{text-decoration:none}
.ask-word-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ask-word-head strong{font-size:17px;color:var(--strong)}
.ask-word-ipa{color:var(--muted)}
.ask-word-gloss{font-size:14.5px;line-height:1.4;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ask-word-go{font-size:13.5px;font-weight:600;color:var(--accent)}
.askbox a.ask-word:hover .ask-word-go{text-decoration:underline}

/* ---------- Profile pictures (functions/_lib/avatars.js) ---------- */
.av-initial{color:#fff;font-weight:700;line-height:1;font-family:var(--sans);letter-spacing:0;text-shadow:0 1px 1px rgba(0,0,0,.18);user-select:none}
.avatar-menu{position:relative;display:inline-block}
.avatar-menu>summary{list-style:none}
.avatar-menu>summary::-webkit-details-marker{display:none}
.avatar-sheet{position:absolute;z-index:60;top:calc(100% + 10px);left:-90px;width:min(440px,calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:12px 14px 14px;text-align:left}
.avatar-sheet-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 8px}
.avatar-sheet-h{margin:0;font-weight:700;color:var(--strong);font-size:16px}
.avatar-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatar-opt{display:block;padding:0;border:2px solid transparent;border-radius:50%;background:none;cursor:pointer;aspect-ratio:1;position:relative}
.avatar-opt img{width:100%;height:100%;border-radius:50%;display:block}
.avatar-opt:hover,.avatar-opt:focus-visible{border-color:rgba(var(--accent-rgb),.6);outline:none}
.avatar-opt.on,.avatar-opt:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.avatar-opt input{position:absolute;opacity:0;width:1px;height:1px}
.avatar-sheet-acts{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.avatar-upload{position:relative;overflow:hidden;min-height:40px;padding:8px 16px}
.avatar-upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.avatar-sheet-note{margin:10px 0 0;font-size:12.5px}
.avatar-nudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px 12px;border:1px dashed rgba(var(--accent-rgb),.5);border-radius:14px;font-size:15px;color:var(--text)}
.welcome-pic{border:0;margin:18px 0 6px;padding:0}
.welcome-pic .lbl{display:block;margin:0 0 8px}
.welcome-pic .avatar-grid{grid-template-columns:repeat(8,1fr);gap:6px}
@media (max-width:700px){
  .avatar-sheet{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:auto;border-radius:20px 20px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
  .welcome-pic .avatar-grid{grid-template-columns:repeat(6,1fr)}
}

/* ---------- Search as you type: the header's search (layout.js, app.js) and the home box ---------- */
.search-pop{position:fixed;inset:0;z-index:90;background:rgba(10,6,20,.55);display:flex;justify-content:center;align-items:flex-start;padding:calc(70px + env(safe-area-inset-top)) 12px 12px}
.search-pop[hidden]{display:none}
body.search-open{overflow:hidden}
.search-pop-box{width:min(640px,100%);max-height:calc(100vh - 100px);overflow-y:auto;background:var(--panel);border:1px solid var(--line2);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.45);padding:8px}
.search-pop-form{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 12px;color:var(--muted)}
.search-pop-input{flex:1;min-width:0;border:0;background:transparent;color:var(--strong);font:inherit;font-size:19px;padding:10px 2px;outline:none}
.search-pop-input::-webkit-search-cancel-button{display:none}
.search-pop-list{border-top:1px solid var(--line);padding:6px 0 2px}
.search-pop-list[hidden]{display:none}
.search-pop-ask{display:block;margin:4px 6px 6px;padding:11px 12px;border-radius:12px;background:rgba(var(--accent-rgb),.10);color:var(--accent);font-weight:600;text-decoration:none}
.search-pop-ask:hover{background:rgba(var(--accent-rgb),.18)}
.search-pop-ask[hidden]{display:none}
.ask-all{display:block;padding:9px 10px 6px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}
.ask-all:hover{text-decoration:underline}
.ask-similar .suggest-item{padding:8px 6px}
.ask-similar .ask-word{padding:6px 6px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.sg-ic.sg-word{font-family:var(--serif);font-weight:700;color:var(--accent);font-size:13px}
.sg-ic.sg-person,.sg-ic.sg-ai,.sg-ic.sg-square{color:var(--accent)}
@media (max-width:700px){.search-pop{padding-top:calc(12px + env(safe-area-inset-top))}.search-pop-box{max-height:calc(100vh - 30px)}}

/* ---------- Cover banners (functions/_lib/covers.js) ---------- */
.cover-mine{position:relative}
.circle-banner-img.cover-mine:not(.circle-banner-none) .cover-menu{position:absolute;right:12px;bottom:12px}
.circle-banner-none.cover-mine{display:flex;align-items:center;justify-content:center}
.cover-menu{position:relative;display:inline-block}
.cover-menu>summary{list-style:none;cursor:pointer}
.cover-menu>summary::-webkit-details-marker{display:none}
.cover-menu-btn{background:rgba(var(--bar-rgb,27,16,51),.72);color:#fff;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(6px)}
.circle-banner-none .cover-menu-btn{background:transparent;color:var(--text);border-color:var(--line2);backdrop-filter:none}
.cover-sheet{position:absolute;z-index:60;top:calc(100% + 10px);right:0;width:min(560px,calc(100vw - 24px));background:var(--panel);border:1px solid var(--line2);border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.35);padding:12px 14px 14px;text-align:left}
.circle-banner-none .cover-sheet{right:auto;left:50%;transform:translateX(-50%)}
.cover-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cover-opt{display:block;aspect-ratio:3/1;border-radius:10px;border:2px solid transparent;background:center/cover no-repeat;cursor:pointer;padding:0}
.cover-opt:hover,.cover-opt:focus-visible{border-color:rgba(var(--accent-rgb),.6);outline:none}
.cover-opt.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--accent)}
.ep-cover-tools .cover-menu-btn{min-height:36px}
@media (max-width:700px){
  .cover-sheet,.circle-banner-none .cover-sheet{position:fixed;top:auto;bottom:0;left:0;right:0;transform:none;width:auto;border-radius:20px 20px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto}
  .cover-grid{grid-template-columns:repeat(2,1fr)}
}
/* Lists with a thumbnail per conversation: Related conversations (related.js), Waiting for a first reply (index.js) */
.thumb-list .related-row{display:flex;gap:12px;align-items:flex-start}
.thumb-list .related-text{flex:1 1 auto;min-width:0}
.thumb-list .related-sq{display:block;font-size:12px;font-weight:600}
.thumb-list .related-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.thumb-list .related-n{display:block;font-size:12.5px;margin-top:2px}
.thumb-list .related-thumb{flex:0 0 auto;width:56px;height:56px;border-radius:10px;object-fit:cover;margin-top:3px;background:var(--line,rgba(255,255,255,.06))}

/* A graph with an answer (functions/_lib/graph.js) */
.graph-box{margin:4px 0 12px;padding:10px 12px 6px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);color:var(--text)}
.graph-box svg{display:block;width:100%;height:auto;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.graph-box[data-live] svg{cursor:crosshair}
.graph-box[data-live] svg:active{cursor:grabbing}
.graph-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.graph-box .gr-legend{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px;color:var(--muted);margin:0 0 4px 4px}
.graph-box .gr-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.graph-box .gr-grid{stroke:var(--line);stroke-width:1}
.graph-box .gr-axis{stroke:var(--muted);stroke-width:1.2}
.graph-box .gr-curve{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.graph-box .gr-tick{fill:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.graph-box .gr-name{font-style:italic}
.graph-box .gr-point{stroke:var(--panel2);stroke-width:2}
.graph-box .gr-label{fill:var(--strong);font-size:12.5px;paint-order:stroke;stroke:var(--panel2);stroke-width:4px;stroke-linejoin:round}
.graph-box .gr-legend{align-items:center}
.graph-box .gr-tools{margin-left:auto;display:inline-flex;gap:4px}
.graph-box .gr-tools button{min-width:30px;height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font-size:16px;line-height:1;cursor:pointer}
.graph-box .gr-tools button:hover{border-color:var(--accent);color:var(--strong)}
.graph-box .gr-tools button[hidden]{display:none}
.graph-box .gr-trace{stroke:var(--muted);stroke-width:1;stroke-dasharray:4 4}
.graph-box .gr-label.gr-traced{stroke:var(--panel2);font-weight:600}
.graph-box .gr-edit{margin:6px 4px 4px;display:grid;gap:6px}
.graph-box .gr-edit[hidden]{display:none}
.graph-box .gr-row{display:flex;align-items:center;gap:8px}
.graph-box .gr-row i{width:18px;height:3px;border-radius:2px;flex:none}
.graph-box .gr-row span{color:var(--muted);font-size:14px;flex:none}
.graph-box .gr-row input{flex:1;min-width:0;padding:6px 10px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);color:var(--text);font:15px ui-monospace,SFMono-Regular,Menlo,monospace}
.graph-box .gr-row input:focus{outline:none;border-color:var(--accent)}
.graph-box .gr-row input.bad{border-color:var(--danger)}
.graph-box .gr-row button,.graph-box .gr-add{border:1px solid var(--line2);background:var(--panel);color:var(--muted);border-radius:8px;cursor:pointer;font-size:14px}
.graph-box .gr-row button{width:30px;height:30px;flex:none;font-size:18px;line-height:1}
.graph-box .gr-add{justify-self:start;padding:5px 10px}
.graph-box .gr-add[hidden]{display:none}
.graph-box .gr-row button:hover,.graph-box .gr-add:hover{border-color:var(--accent);color:var(--strong)}
.graph-box .gr-hint{margin:0;color:var(--faint);font-size:12.5px}

/* An old answer being rewritten in place (ask.js refresh on view): dimmed until the new one loads */
.prose.refreshing{opacity:.5;transition:opacity .3s}

/* Live weather with an answer (functions/_lib/weather.js + public/weather-draw.js) */
.weather-box{--wx-temp:#f5b83d;--wx-rain:#4f8ff7;--wx-wind:#7fc4b6;margin:4px 0 12px;padding:12px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);font-size:15px;line-height:1.45}
.weather-box .wx-now{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.weather-box .wx-icon{font-size:26px;line-height:1;align-self:center}
.weather-box .wx-now strong{font-size:24px;color:var(--strong);font-variant-numeric:tabular-nums}
.weather-box .wx-where{color:var(--muted)}
.weather-box .wx-meta{color:var(--faint);font-size:13px;margin:2px 0 8px}
.weather-box .wx-meta a{color:var(--accent)}
.weather-box .wx-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:4px 0 2px}
.weather-box .wx-tabs{display:flex;gap:2px}
.weather-box .wx-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:14px;padding:4px 8px;cursor:pointer}
.weather-box .wx-tab.on{color:var(--strong);border-bottom-color:var(--wx-temp)}
.weather-box .wx-units{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.weather-box .wx-units button{background:none;border:0;color:var(--muted);font:inherit;font-size:13px;padding:2px 8px;cursor:pointer}
.weather-box .wx-units button.on{background:var(--panel);color:var(--strong)}
.weather-box .wx-chart{display:block;width:100%;height:auto;margin:2px 0 6px}
.weather-box .wx-chart .wx-v{fill:var(--strong);font-size:12px;font-variant-numeric:tabular-nums}
.weather-box .wx-chart .wx-h{fill:var(--faint);font-size:11px}
.weather-box .wx-days{display:grid;grid-template-columns:repeat(8,minmax(62px,1fr));gap:6px;overflow-x:auto;padding-bottom:2px}
.weather-box .wx-day{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:10px;background:var(--panel);border:1px solid transparent;font:inherit;font-size:13px;color:var(--muted);cursor:pointer}
.weather-box .wx-day.on{border-color:var(--wx-temp);color:var(--text)}
.weather-box .wx-di{font-size:20px;line-height:1.2}
.weather-box .wx-hl{font-variant-numeric:tabular-nums;white-space:nowrap}
.weather-box .wx-hl strong{color:var(--strong)}
.weather-box .wx-rain{font-size:12px}

/* Settings › Your city */
.city-form{display:flex;gap:8px;flex-wrap:wrap}
.city-form .field{flex:1;min-width:200px}
.city-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.city-actions:empty{display:none}

/* Instant answers (functions/_lib/instant.js): in the ask box as you type, and on /instant */
.ask-instant{flex-basis:100%;min-width:0;margin:2px 4px 0}
.instant-card{border-radius:14px;background:var(--panel2);border:1px solid var(--line2);padding:12px 14px;font-size:15px;line-height:1.45}
.instant-card .price-box,.instant-card .weather-box{margin:0;padding:0;border:0;background:none}
.instant-card .ic-line{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.instant-card .ic-q{color:var(--muted)}
.instant-card .ic-big{font-size:26px;color:var(--strong);font-variant-numeric:tabular-nums}
.instant-card .ic-unit{color:var(--muted)}
.instant-card .ic-icon{font-size:22px;align-self:center}
.instant-card .ic-sub{margin:2px 0 0;color:var(--muted)}
.instant-card .ic-title{margin:0 0 6px;color:var(--muted)}
.instant-card .ic-table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.instant-card .ic-table th{font-weight:500;color:var(--faint);text-align:left;padding:2px 16px 2px 0;font-size:13px}
.instant-card .ic-table td{padding:3px 16px 3px 0}
.instant-card .instant-foot{margin:8px 0 0;font-size:13px;color:var(--faint)}
.instant-card .instant-foot a{color:var(--accent)}
.instant-page .instant-q{margin:0 0 10px;font-size:15px}
.instant-page .instant-why{margin:12px 0 18px;font-size:13px}
.instant-page .instant-discuss summary{cursor:pointer;color:var(--accent);font-weight:500}
.instant-page .instant-discuss[open] summary{margin-bottom:8px}

/* Live weather pages (functions/weather/[[path]].js) */
.wx-page .crumbs{margin:0 0 4px;font-size:14px}
.wx-page h1{margin:0 0 14px}
.wx-list-h{font-size:18px;margin:22px 0 8px}
.wx-list{columns:2;padding-left:18px;margin:0}
.wx-talk{padding-left:18px;margin:0 0 14px}
.wx-talk li{margin:4px 0}
.wx-find{margin:18px 0 0}

/* A house-AI answer held over a limit (ask.js startFollowUp) */
.note.ai-wait{margin:8px 0 0;font-size:14px}

/* The calculator card (public/calc-pad.js) */
.calc-pad{outline:none}
.calc-pad .cp-screen{border:1px solid var(--line2);border-radius:12px;padding:8px 14px;margin-bottom:10px;text-align:right;background:var(--panel)}
.calc-pad .cp-prev{min-height:18px;font-size:13px;color:var(--faint);overflow-wrap:anywhere}
.calc-pad .cp-main{font-size:30px;color:var(--strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;line-height:1.2}
.calc-pad .cp-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.calc-pad .cp-dr{grid-column:span 2;display:flex;border-radius:10px;overflow:hidden;background:var(--panel)}
.calc-pad .cp-dr .cp-k{flex:1;border-radius:0;background:none}
.calc-pad .cp-k{border:0;border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-size:15px;padding:10px 4px;cursor:pointer;min-width:0}
.calc-pad .cp-k:hover{filter:brightness(1.15)}
.calc-pad .cp-k.num{background:var(--chip,var(--panel));font-weight:500}
.calc-pad .cp-k.on{color:var(--accent);font-weight:600}
.calc-pad .cp-k.eq{background:var(--accent);color:#fff;font-weight:600}
.calc-pad .cp-k sup{font-size:10px}
@media (max-width:480px){.calc-pad .cp-k{font-size:14px;padding:9px 2px}.calc-pad .cp-keys{gap:4px}}

/* Typeset math in posts (format.js liftMath → Temml MathML) */
.prose math{font-size:1.08em}
.prose .math-block{overflow-x:auto;margin:10px 0;padding:2px 0}

/* Message requests (pconvo.js) */
.inbox-tabs{display:flex;gap:4px;margin:4px 0 8px}
.inbox-tabs a{padding:5px 12px;border-radius:999px;color:var(--muted);text-decoration:none;font-size:14px}
.inbox-tabs a.on{background:var(--panel2);color:var(--strong);font-weight:600}
.inbox-req-n{display:inline-block;min-width:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font-size:12px;text-align:center}
.pm-request{margin:10px 0;padding:14px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2)}
.pm-request p{margin:0 0 10px}
.pm-request .faint{margin:10px 0 0;font-size:13px}
.pm-request-acts{display:flex;gap:8px;flex-wrap:wrap}
.pm-request-acts form{margin:0}
.btn.danger{color:var(--danger)}
.pm-request-sent{margin:10px 0}

/* Stock and crypto cards (instant.js quoteCard + public/quote-chart.js) */
.quote-box{--qt-up:#22a35a;--qt-down:#e5484d}
.quote-box .qt-name{margin:0 0 2px;color:var(--muted);font-size:15px}
.quote-box .qt-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.quote-box .qt-price strong{font-size:28px;color:var(--strong);font-variant-numeric:tabular-nums}
.quote-box .qt-change{font-weight:600;font-variant-numeric:tabular-nums}
.quote-box .qt-change.up,.quote-box .qt-range-change.up{color:var(--qt-up)}
.quote-box .qt-change.down,.quote-box .qt-range-change.down{color:var(--qt-down)}
.quote-box .qt-ext{margin:2px 0 0;font-size:14px}
.quote-box .qt-tabs{display:flex;align-items:center;gap:2px;flex-wrap:wrap;margin:10px 0 2px;border-bottom:1px solid var(--line2)}
.quote-box .qt-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font:inherit;font-size:13px;padding:4px 8px;cursor:pointer}
.quote-box .qt-tab.on{color:var(--strong);border-bottom-color:var(--accent)}
.quote-box .qt-range-change{margin-left:auto;font-size:13px;font-weight:600}
.quote-box .qt-chart{display:block;width:100%;height:auto;touch-action:pan-y}
.quote-box .qt-grid{stroke:var(--line);stroke-width:1}
.quote-box .qt-prev{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 4}
.quote-box .qt-tick{fill:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
.quote-box .qt-cross{stroke:var(--muted);stroke-width:1}
.quote-box .qt-hover{fill:var(--strong);font-size:12px;font-weight:600;paint-order:stroke;stroke:var(--panel2);stroke-width:4px}

/* Word cards (instant.js, from the dictionary) */
.instant-card .ic-word{margin:4px 0 0;line-height:1.5}
.instant-card .ic-senses{margin:4px 0 0;padding-left:20px}
.instant-card .ic-senses li{margin:2px 0}

/* "⏰ Remind me" on a post (post_remind.js): the chip under a post you set one on, and the choices. */
.remind-chip{display:inline-flex;align-items:center;gap:6px;margin:8px 0 2px;padding:4px 12px;border-radius:999px;background:var(--chip);color:var(--text);font-size:13px;text-decoration:none}
.remind-chip:hover{text-decoration:underline}
.remind-form{margin:12px 0 6px;padding:14px;border:1px solid rgba(var(--accent-rgb),.5);border-radius:14px;background:rgba(var(--accent-rgb),.06);max-width:560px}
.remind-h{margin:0 0 8px;font-weight:600}
.remind-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.remind-choice{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.remind-choice:hover,.remind-choice:focus-visible{border-color:var(--accent)}
.remind-choice .faint{font-size:12px}
.remind-custom{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:14px}
.remind-custom .field{width:auto;min-width:0;padding:5px 8px}
.remind-foot{margin:10px 0 0;font-size:12.5px}
.remind-btns{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
/* ⏰ on your own things: the document bar, the article editor's bar, and each Notebook card. */
.remind-btn{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;text-decoration:none}
.doc-remind{flex:none;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:14px}
.doc-remind:hover,.write-remind:hover{border-color:var(--accent)}
.write-remind{padding:6px 12px;border:1px solid var(--line);border-radius:999px;color:var(--text);font-size:14px}
.remind-btn.is-set{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.08)}
@media (max-width:640px){.doc-remind span,.write-remind:not(.is-set) span{display:none}}
.nb-remind{display:inline-flex;align-items:center;gap:4px;height:32px;padding:0 8px;border-radius:999px;color:var(--faint);font-size:14px;text-decoration:none;white-space:nowrap}
.nb-remind:hover{color:var(--text);background:var(--chip)}
.nb-remind.is-set{color:var(--text);background:rgba(var(--accent-rgb),.1);font-size:12.5px}
.chat-remind{flex:none;display:inline-flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;color:var(--muted);font-size:17px;line-height:1;text-decoration:none;white-space:nowrap;filter:grayscale(1) opacity(.7)}
.chat-remind.is-set{filter:none;font-size:13px}
.chat-remind span{display:none}
.chat-remind.is-set{color:var(--text);background:rgba(var(--accent-rgb),.1)}
.chat-remind.is-set span{display:inline}
.chat-remind:hover{color:var(--text);background:var(--chip)}
.remind-repeat,.cf-repeat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:14px}
.remind-repeat .field,.cf-repeat .field{width:auto;min-width:0;padding:5px 8px}
/* Price alerts (alerts.js): the 🔔 box under a stock or crypto card, and the /alerts list. */
.qt-alert{margin:10px 0 2px;font-size:14px}
.qt-alert summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none}
.qt-alert summary::-webkit-details-marker{display:none}
.qt-alert-form{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.qt-alert-form .field{width:auto;min-width:0;max-width:150px;padding:5px 8px}
.qt-alert-note,.qt-alert-signin{margin:6px 0 0;font-size:13px}
.alert-list{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.alert-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border:1px solid var(--line);border-radius:12px}
.alert-row.is-done{opacity:.75}
.alert-what{flex:1 1 260px;display:flex;flex-direction:column;gap:2px;min-width:0}
.alert-row form.inline{display:inline}
/* Settings › Your city: weather for your city (weather_daily.js). */
.wx-daily{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.wx-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wx-row .field{width:auto;min-width:0;padding:5px 8px}
@media (max-width:640px){.chat-remind.is-set span{display:none}.chat-remind.is-set{font-size:17px;background:none}}
/* The instant translator card (xlate.js). */
.xl{display:flex;flex-direction:column;gap:10px}
.xl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.xl-text{flex:1 1 260px;min-width:0;min-height:0;height:auto;font-size:17px;resize:vertical}
.xl-to{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.xl-to label{display:flex;flex-direction:column;gap:2px;font-size:13px}
.xl-to .field{width:auto;min-width:0;padding:6px 8px}
.xl-out{padding:12px 14px;border-radius:12px;background:rgba(var(--accent-rgb),.07)}
.xl-result{margin:0;font-size:26px;line-height:1.3;font-family:var(--serif, Georgia, serif)}
.xl-roman{margin:4px 0 0;font-size:15px}
.xl-note{margin:8px 0 0;font-size:14px;color:var(--muted)}
.xl-from{margin:6px 0 0;font-size:12.5px}
.xl-acts{display:flex;gap:12px}
/* Sunrise, holidays, distances and nutrition cards (instant_more.js, nutrition.js). */
.sun-big,.hol-big,.dist-big,.nut-big{margin:4px 0;font-size:22px;line-height:1.3}
.sun-big strong,.hol-big strong,.nut-big strong{font-size:30px}
.sun-row{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 0;font-size:15px}
.sun-where,.hol-away,.hol-next,.hol-note,.sun-trend,.nut-portions{margin:4px 0 0;font-size:14px}
.hol-name,.nut-name,.dist-names{margin:0;font-weight:600}
.dist-row{margin:6px 0 0;font-size:15px}
.dist-links{margin:10px 0 0;font-size:14px}
.nut-table{width:100%;max-width:420px;border-collapse:collapse;margin:10px 0 0;font-size:14.5px}
.nut-table th,.nut-table td{padding:4px 8px;border-bottom:1px solid var(--line);text-align:right}
.nut-table th:first-child,.nut-table td:first-child{text-align:left}
.nut-table tr.on td{font-weight:700;background:rgba(var(--accent-rgb),.08)}
/* Facts about places (place_facts.js). */
.place-name{margin:0}
.place-big{margin:6px 0 4px;font-size:20px}
.place-big strong{font-size:30px}
.place-table{border-collapse:collapse;margin:8px 0 0;font-size:14.5px}
.place-table th{font-weight:500;color:var(--muted);text-align:left;padding:3px 14px 3px 0;vertical-align:top;white-space:nowrap}
.place-table td{padding:3px 0}
.place-links{margin:10px 0 0;font-size:14px}
/* "Ask next" under an instant card: another instant answer, or 💬 a question for a conversation. */
.instant-next{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:13.5px}
.next-chip{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;background:var(--chip);color:var(--text);text-decoration:none;line-height:1.35}
.next-chip:hover{text-decoration:none;background:rgba(var(--accent-rgb),.12)}
.next-chip.next-chip-talk{border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.06)}
/* Sports scores (sports.js). */
.sp-team{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.sp-team img{flex:none;width:40px;height:40px;object-fit:contain}
.sp-team span{display:flex;flex-direction:column}
.sp-h{margin:10px 0 2px;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.sp-game{margin:2px 0;font-size:15.5px}
.sp-tag{display:inline-block;min-width:20px;padding:1px 6px;border-radius:6px;background:var(--chip);font-size:12.5px;font-weight:700;text-align:center}
.sp-tag.w{background:rgba(46,160,67,.18);color:#1a7f37}.sp-tag.l{background:rgba(215,58,73,.15);color:#cf222e}.sp-tag.live{background:rgba(215,58,73,.15);color:#cf222e}
.sp-board{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column}
.sp-board li{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.sp-board li.live span:first-child{font-weight:700}
.sp-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:4px 18px}
.sp-table{margin:0;padding-left:22px;font-size:14px}
.sp-table li{padding:2px 0}.sp-table li span:last-child{float:right}
.sp-links{margin:10px 0 0;font-size:14px}
/* Flight status links (flights.js). */
.fl-big{margin:0 0 4px;font-size:20px}.fl-no{font-weight:700;letter-spacing:.02em;margin-left:4px}
.fl-why{margin:4px 0;font-size:14px}
.fl-links{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
/* Tools (tools.js): timer, stopwatch, coin, dice, random, IP, speed test, metronome, tuner, color, breathing. */
.tool{text-align:center}
.tool-big{margin:6px 0;font-size:44px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1}
.tool-btns{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:10px 0 0}
.tool-btns label{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.tool-btns .field{width:auto;min-width:0;padding:5px 8px;max-width:110px}
.tool-presets{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:8px 0 0}
.tool-timer.is-done .tool-big{color:var(--accent);animation:tool-pulse 1s ease-in-out 4}
@keyframes tool-pulse{50%{opacity:.35}}
.tool-laps{text-align:left;max-width:280px;margin:10px auto 0;padding-left:28px;font-variant-numeric:tabular-nums;font-size:14px;max-height:160px;overflow:auto}
.coin-face{font-size:64px;margin:0;line-height:1}.coin-face.flip{animation:coin-flip .6s ease-in-out}
@keyframes coin-flip{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(900deg) translateY(-24px)}100%{transform:rotateY(1800deg) translateY(0)}}
.dice-faces{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:4px 0}
.die{font-size:64px;line-height:1}.die-num{display:inline-grid;place-items:center;min-width:64px;height:64px;font-size:30px;font-weight:700;border:2px solid var(--line2);border-radius:12px}
.die.roll{animation:die-roll .4s ease-out}@keyframes die-roll{0%{transform:rotate(-200deg) scale(.6)}100%{transform:none}}
.tool-random .tool-big.pop{animation:die-roll .3s ease-out}
.tool-ip-addr{font-size:30px;word-break:break-all}
.tool-note{font-size:13px;margin:8px 0 0}
.speed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.speed-grid p{display:flex;flex-direction:column;margin:0}.speed-grid strong{font-size:30px;font-variant-numeric:tabular-nums}
.metro-dots{display:flex;justify-content:center;gap:10px;margin:4px 0}
.metro-dots i{width:14px;height:14px;border-radius:50%;background:var(--line2)}.metro-dots i.on{background:var(--accent)}.metro-dots i:first-child.on{transform:scale(1.3)}
.metro-slider{width:min(320px,90%)}
.tuner-meter{position:relative;width:120px;height:26px;margin:4px auto;border-radius:13px;background:linear-gradient(90deg,rgba(215,58,73,.25),rgba(46,160,67,.35) 45%,rgba(46,160,67,.35) 55%,rgba(215,58,73,.25))}
.tuner-needle{position:absolute;left:58px;top:2px;width:4px;height:22px;border-radius:2px;background:var(--text);transition:transform .12s}
.tuner-needle.ok{background:#1a7f37}
.tuner-strings{letter-spacing:.06em}
.color-table{margin:10px auto 0;border-collapse:collapse;font-size:15px;text-align:left}
.color-table th{padding:4px 12px 4px 0;color:var(--muted);font-weight:600}.color-table td{padding:4px 8px;font-variant-numeric:tabular-nums}
.breathe-ring{position:relative;width:200px;height:200px;margin:4px auto;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center}
.breathe-ball{position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(var(--accent-rgb),.55),rgba(var(--accent-rgb),.18));transform:scale(.45)}
.breathe-word{position:relative;font-size:20px;font-weight:600}

/* ---------- Games (functions/games*.js, functions/_lib/games.js, public/chess-board.js) ---------- */
:root{--gm-light:#e9d7bf;--gm-dark:#8c6b4f;--gm-last:rgba(255,200,60,.45);--gm-check:rgba(230,60,60,.55);--gm-white:#fff;--gm-black:#15110e}
[data-gm-theme=wood]{--gm-light:#e9d7bf;--gm-dark:#8c6b4f}
[data-gm-theme=green]{--gm-light:#eeeed2;--gm-dark:#769656}
[data-gm-theme=marble]{--gm-light:#f1ece6;--gm-dark:#8a8f99}
[data-gm-theme=slate]{--gm-light:#b8c2cc;--gm-dark:#4d5b6a}
[data-gm-theme=metal]{--gm-light:#d9dde2;--gm-dark:#6c7580;--gm-white:#f6f7f9;--gm-black:#1a1d21}
[data-gm-theme=blue]{--gm-light:#dee3e6;--gm-dark:#8ca2ad}
.gm-hub .gm-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.gm-record{font-weight:600;color:var(--text)}
.gm-section{margin:22px 0}
.gm-section .h2{font-size:24px;margin:0 0 10px}
.gm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:14px}
.gm-card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);text-decoration:none}
.gm-card:hover{text-decoration:none;border-color:var(--accent)}
.gm-card-sm{grid-template-columns:96px 1fr;padding:10px}
.gm-mini{display:block;line-height:0;border-radius:6px;overflow:hidden;border:1px solid var(--line2)}
.gm-mini svg{width:100%;height:auto;display:block}
.gm-card-body{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:15px}
.gm-players{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gm-players .av{flex:0 0 auto}
.gm-line{color:var(--muted);font-size:14px}.gm-line.gm-yours{color:var(--accent);font-weight:600}
.gm-embed{margin:12px 0}
.gm-how{max-width:760px;margin:26px 0 0;line-height:1.5}
.gm-form .gm-label{display:block;font-size:14px;color:var(--muted);margin:0 0 6px}
.gm-form label{display:block}
.gm-form .field{display:block;margin:0 0 6px}
.gm-form select.field{appearance:auto}
.gm-fieldset{border:1px solid var(--line);border-radius:14px;padding:10px 14px 12px;margin:0}
.gm-fieldset legend{padding:0 6px}
.gm-radio{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer}
.gm-page{max-width:1040px;margin:0 auto;padding:20px 0 60px}
.gm-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.gm-main{min-width:0}
.gm-board{position:relative;width:min(100%,560px);margin:6px 0;border-radius:8px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.25);border:1px solid var(--line2)}
.gm-board .gm-board-svg{width:100%;height:auto;display:block}
.gm-grid8{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;width:100%;user-select:none}
.gm-sq{position:relative;appearance:none;border:0;padding:0;margin:0;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--gm-light);cursor:default;border-radius:0;font:inherit;color:inherit}
.gm-sq.gm-dark{background:var(--gm-dark)}
.gm-sq.gm-last{box-shadow:inset 0 0 0 999px var(--gm-last)}
.gm-sq.gm-check{box-shadow:inset 0 0 0 999px var(--gm-check)}
.gm-sq.gm-mine{cursor:pointer}
.gm-sq.gm-from{box-shadow:inset 0 0 0 4px rgba(var(--accent-rgb),.9)}
.gm-sq.gm-target{cursor:pointer}
.gm-sq.gm-target::after{content:"";position:absolute;inset:36%;border-radius:50%;background:rgba(var(--accent-rgb),.55)}
.gm-sq.gm-target .gm-piece:not(:empty)~*{display:none}
.gm-sq.gm-target:has(.gm-piece:not(:empty))::after{inset:4%;border-radius:50%;background:transparent;border:4px solid rgba(var(--accent-rgb),.7)}
.gm-sq:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;z-index:1}
.gm-piece{display:block;width:90%;height:90%;pointer-events:none;position:relative;z-index:1;transform-origin:50% 100%}
.gm-piece svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.gm-defs{position:absolute;width:0;height:0}
/* Tilted view: the board leans back, the pieces stand up on it. */
[data-gm-tilt] .gm-board{perspective:1100px;perspective-origin:50% 0;overflow:visible;box-shadow:none;border:0;margin:-9% 0 2%}
[data-gm-tilt] .gm-grid8{transform:rotateX(38deg);transform-style:preserve-3d;transform-origin:50% 100%;border-radius:8px;overflow:hidden;box-shadow:0 18px 30px rgba(0,0,0,.35)}
[data-gm-tilt] .gm-sq{transform-style:preserve-3d;overflow:visible}
[data-gm-tilt] .gm-piece{transform:rotateX(-38deg) translateY(-8%);width:96%;height:96%}
[data-gm-tilt] .gm-piece svg{filter:drop-shadow(0 6px 4px rgba(0,0,0,.4))}
.gm-tilt-btn{min-height:30px;padding:0 12px;font-size:13px;margin-left:6px}
.gm-tilt-btn[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
.gm-credit{margin:6px 0 0;font-size:12px}
.gm-promote .btn svg{width:28px;height:28px;margin-right:6px}
.gm-coord{position:absolute;font-size:10px;font-weight:600;opacity:.75;color:var(--gm-black);pointer-events:none}
.gm-dark .gm-coord{color:var(--gm-light)}
.gm-coord-r{top:2px;left:3px}.gm-coord-f{bottom:1px;right:4px}
.gm-player{display:flex;align-items:center;gap:8px;padding:6px 2px;font-size:16px;color:var(--text)}
.gm-player-on{font-weight:600}
.gm-player-on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-left:2px}
.gm-side{font-size:20px;line-height:1}
.gm-won{margin-left:4px;padding:1px 8px;border-radius:999px;background:rgba(var(--accent-rgb),.15);color:var(--accent);font-size:12px;font-weight:700;text-transform:uppercase}
.gm-status{margin:10px 0 6px;font-size:17px}.gm-status.gm-yours strong{color:var(--accent)}
.gm-result{font-family:var(--serif);font-size:22px;margin-left:4px}
.gm-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:10px 0}
.gm-act{display:inline}
.gm-tip{max-width:560px;line-height:1.5}
.gm-msg{margin:8px 2px 0}.gm-msg.warn{color:var(--danger-soft,#f87171)}
.gm-moves{position:sticky;top:16px}
.gm-moves-h{font-size:18px;margin:0 0 8px}
.gm-nav{display:flex;gap:6px;margin:0 0 10px}
.gm-nav .btn{min-height:38px;padding:0 12px;flex:1}
.gm-list{list-style:none;margin:0;padding:0;max-height:60vh;overflow:auto;font-variant-numeric:tabular-nums;border:1px solid var(--line);border-radius:12px}
.gm-list li{display:grid;grid-template-columns:38px 1fr 1fr;align-items:stretch;border-top:1px solid var(--line);font-size:15px}
.gm-list li:first-child{border-top:0}
.gm-n{color:var(--faint);padding:6px 0 6px 10px}
.gm-mv{appearance:none;border:0;background:transparent;color:var(--text);font:inherit;text-align:left;padding:6px 8px;cursor:pointer;border-radius:6px}
.gm-mv:hover{background:rgba(var(--hl-rgb),.06)}
.gm-mv.on{background:rgba(var(--accent-rgb),.18);font-weight:600}
.gm-meta{margin:10px 0 0}
.gm-promote{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(0,0,0,.55);z-index:3}
.gm-promote p{color:#fff;font-weight:600;margin:0 0 4px}
.gm-promote .btn{min-width:180px;background:var(--panel)}
.gm-promote-x{position:absolute;top:8px;right:8px;min-width:0;min-height:36px;padding:0 12px}
.gm-themes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:6px 0 0;font-size:14px;color:var(--muted)}
.gm-swatch{width:26px;height:26px;border-radius:7px;border:2px solid transparent;padding:0;cursor:pointer;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%)}
.gm-swatch.on{border-color:var(--accent)}
@media (max-width:860px){.gm-layout{grid-template-columns:1fr}.gm-moves{position:static}.gm-list{max-height:220px}}
/* The timer: the countdown is the biggest thing on the card (the Ask box's large .btn style mustn't
   win over it); running it turns the accent colour; ringing it flashes until stopped. */
.tool .btn,.askbox .tool .btn{min-width:0;align-self:auto;font-size:15px;padding:8px 18px}
.tool-timer .tool-big,.tool-stopwatch .tool-big{font-size:clamp(64px,15vw,112px);letter-spacing:-.02em;margin:2px 0 4px}
.tool-timer.is-running .tool-big,.tool-stopwatch.is-running .tool-big{color:var(--accent)}
.tool-timer.is-ringing{animation:timer-ring 1s steps(2) infinite}
.tool-timer.is-ringing .tool-big{color:var(--accent)}
.tool-timer.is-ringing [data-t-go]{font-size:17px;padding:10px 24px}
@keyframes timer-ring{50%{background:rgba(var(--accent-rgb),.16)}}
.tool-presets .act{font-size:13px}
/* The one number a tool is about is its biggest thing too: the random number, the coin, the dice,
   the metronome's tempo, the tuner's note (like the timer and stopwatch above). */
.tool-random .tool-big,.tool-coin [data-t-result],.tool-metronome .tool-big,.tool-tuner .tool-big{font-size:clamp(56px,13vw,104px);letter-spacing:-.02em;line-height:1.05;margin:2px 0 6px}
.tool-random .tool-big{color:var(--accent)}
.tool-metronome .tool-big .faint{font-size:.3em;letter-spacing:0}
.tool-dice .die{font-size:clamp(72px,16vw,112px)}
.tool-dice .die-num{min-width:clamp(72px,16vw,104px);height:clamp(72px,16vw,104px);font-size:clamp(34px,8vw,52px)}
.tool-dice .tool-big{font-size:28px}
.coin-face{font-size:clamp(56px,12vw,84px)}
.tool-random .tool-big,.tool-coin [data-t-result],.tool-tuner .tool-big{font-variant-numeric:normal}
/* The color picker: one big patch to tap (the real color input sits invisibly over it). */
.color-big{position:relative;display:grid;place-items:center;max-width:420px;height:120px;margin:4px auto 0;border-radius:16px;border:1px solid var(--line);cursor:pointer;color:#fff;font-weight:600}
.color-big input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.color-tap{pointer-events:none;font-size:15px}
.color-type{margin:10px 0 0;font-size:14px}.color-type label{display:inline-flex;align-items:center;gap:8px}
.color-type .field{width:12em;padding:6px 10px;font-family:ui-monospace,Menlo,monospace;text-transform:none}
.color-help{margin:10px 0 0;font-size:13px}
/* Inside the Ask box its own label/field/paragraph styles mustn't reshape the color picker. */
.instant-card .tool-color .color-type{margin:10px 0 0;font-size:14px;color:var(--muted)}
.instant-card .tool-color .color-type label{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;margin:0;font-size:14px}
.instant-card .tool-color .color-type .field{display:inline-block;width:11em;min-height:0;padding:6px 10px;border:1px solid var(--line2);border-radius:10px;background:var(--panel);color:var(--text);font-size:15px}
.instant-card .tool-color .color-help{margin:10px 0 0;font-size:13px;color:var(--faint)}
.instant-card .tool-color .color-table{font-size:14.5px}
/* A private message on its way (app.js pmSend): shown at once, a little faded until the server has it. */
.pm.pm-pending .pm-bubble{opacity:.7}
.pm-sending{font-size:12px;color:var(--faint);text-align:right}
.pm.pm-failed .pm-bubble{opacity:.55;outline:2px solid rgba(215,58,73,.5)}
.pm.pm-failed .pm-sending{color:#cf222e}

/* A private message opened in a circle: a panel over the circle (app.js), and the conversation page
   in its compact form inside it (body.embed). */
.dm-drawer{position:fixed;inset:0;z-index:200}
.dm-scrim{position:absolute;inset:0;background:rgba(var(--scrim-rgb,9,5,16),.42);opacity:0;transition:opacity .22s ease}
.dm-drawer.in .dm-scrim{opacity:1}
.dm-panel{position:absolute;top:0;right:0;bottom:0;width:min(460px,100vw);display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line2);
  box-shadow:-18px 0 50px rgba(0,0,0,.28);transform:translateX(102%);transition:transform .22s ease}
.dm-drawer.in .dm-panel{transform:none}
.dm-grab{display:none}
.dm-crumb{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);background:var(--panel2);font-size:13.5px;color:var(--muted)}
.dm-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-path a{color:var(--muted);text-decoration:none}
.dm-path a:hover{color:var(--text);text-decoration:underline}
.dm-name{color:var(--accent);font-weight:600}
.dm-full,.dm-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;text-decoration:none}
.dm-x{font-size:26px}
.dm-full:hover,.dm-x:hover{background:rgba(var(--hl-rgb),.07);color:var(--text)}
.dm-frame{flex:1;width:100%;border:0;background:var(--bg)}
html.dm-open,html.dm-open body{overflow:hidden}
@media (max-width:640px){
  .dm-panel{top:calc(env(safe-area-inset-top,0px) + 44px);left:0;width:auto;border-left:0;border-radius:18px 18px 0 0;overflow:hidden;transform:translateY(102%);box-shadow:0 -12px 40px rgba(0,0,0,.3)}
  .dm-grab{display:block;width:40px;height:5px;margin:7px auto 0;border-radius:3px;background:var(--line2);flex:none}
  .dm-crumb{padding-top:6px;background:var(--panel)}
}
@media (prefers-reduced-motion:reduce){.dm-panel,.dm-scrim{transition:none}}
body.embed{height:100dvh;overflow:hidden;margin:0;padding:0}
body.embed main{height:100dvh;margin:0;padding:0;max-width:none}
body.embed .msg-shell{display:block;height:100%;max-width:none;margin:0}
body.embed .msg-shell .chat{height:100%;margin:0;padding:0 12px}
body.embed .msg-shell .chat-head,body.embed .msg-shell .chat-compose{margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
body.embed .chat-head{padding-top:8px}
body.embed .chat-back{visibility:hidden}

/* 📞 Call (calls.js): the apps the others listed, and a free browser meeting */
.call-menu{position:relative}
.call-menu > summary{list-style:none}
.call-menu > summary::-webkit-details-marker{display:none}
.chat-call{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:var(--chat-blue);cursor:pointer}
.chat-call:hover,.call-menu[open] .chat-call{background:rgba(29,132,245,.12)}
.call-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:60;width:min(320px,calc(100vw - 24px));display:flex;flex-direction:column;gap:10px;padding:12px;
  border:1px solid var(--line2);border-radius:16px;background:var(--panel);box-shadow:0 14px 40px rgba(0,0,0,.25);text-align:left}
.call-who{display:flex;flex-direction:column;gap:6px}
.call-name{font-weight:600;color:var(--strong);font-size:14px}
.call-apps{display:flex;flex-wrap:wrap;gap:6px}
.call-app-btn{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 14px;border:1px solid var(--line2);border-radius:999px;background:var(--panel2);color:var(--text);
  font:inherit;font-size:14px;font-weight:500;text-decoration:none;cursor:pointer}
.call-app-btn:hover{border-color:var(--chat-blue);text-decoration:none}
.call-app-btn .faint{font-weight:400;font-size:12px}
.call-start{display:flex;flex-direction:column;gap:4px;margin:0;padding-top:10px;border-top:1px solid var(--line)}
.call-start .faint{font-size:12px;line-height:1.4}
.call-new{align-self:flex-start;background:var(--chat-blue);border-color:var(--chat-blue);color:#fff}
.call-new:hover{filter:brightness(1.08)}
.call-none{margin:0;font-size:13px}
.call-mine{font-size:13px}
.call-form{display:flex;flex-direction:column;gap:12px}
.call-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:10px}
.call-app{font-weight:600}
.call-form .btn{align-self:flex-start}
@media (max-width:560px){.call-row{grid-template-columns:minmax(0,1fr);gap:4px}}

/* 🌐 Translate under a message in another language (messages/[id].js, app.js) */
.pm-tr{align-self:flex-start;margin:3px 6px 0;padding:6px 4px;min-height:32px;border:0;background:none;color:var(--chat-blue);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pm.mine .pm-tr{align-self:flex-end}
.pm-tr:hover{text-decoration:underline}
.pm-tr-note{margin:3px 8px 0;font-size:12px;color:var(--faint);line-height:1.3}
.pm.mine .pm-tr-note{align-self:flex-end}

/* 👎 Not helpful on a house AI's answer (api/not-helpful.js): private, with a reason */
.nh{display:inline-block}
.nh > summary{list-style:none;cursor:pointer}
.nh > summary::-webkit-details-marker{display:none}
.nh[open]{display:block;flex:1 1 100%}
.nh-form{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;padding:12px 14px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);max-width:520px}
.nh-h{margin:0 0 2px;font-weight:600;font-size:14px}
.nh-h .faint{display:block;font-weight:400;font-size:12.5px;margin-top:2px}
.nh-opt{display:flex;align-items:center;gap:8px;min-height:36px;font-size:14px;cursor:pointer}
.nh-opt input{width:18px;height:18px;accent-color:var(--accent)}
.nh-form .field{margin:4px 0}
.nh-form .btn{align-self:flex-start}
.nh-done{cursor:default;color:var(--faint)}

/* Older conversations load as you scroll (app.js data-more); the link stays for no-JavaScript */
.more-stack:empty{display:none}
.more-stack{margin-top:var(--stack-gap,14px)}
.more-pager{margin:22px 0;text-align:center}

/* A public reply on its way (app.js): shown at once, the real post replaces it */
.post-pending{opacity:.75}
.post-pending .who{margin:0 0 4px;font-size:14px}
.post-sending{margin:4px 0 0;font-size:13px}