/* Behind the Scenes — calm, warm look: soft cards, serif headings, floating dock. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/app/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/app/static/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/app/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-weight:200 800;font-display:swap;src:url(/app/static/fonts/newsreader-latin-wght-normal.woff2) format("woff2")}

:root{
  --bg:#f5f3ee;--panel:#fff;--ink:#1c1b1a;--mute:#6f6c66;--line:#e8e4dc;
  --accent:#1f5f8f;--accent-ink:#fff;--tint:#dde9f4;--tint-ink:#1c5384;--field:#ece9e2;
  --out:#1f5f8f;--in:#f0ede6;--warn:#c2410c;--crit:#b91c1c;--ok:#15803d;--chip:#f0ede6;
  --dark-pill:#1c1b1a;--shadow:0 1px 2px rgba(40,30,10,.04),0 8px 28px rgba(40,30,10,.07);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#131315;--panel:#1c1c1f;--ink:#ececee;--mute:#9b9aa2;--line:#2b2b30;
  --accent:#6aa7dd;--accent-ink:#0e1a26;--tint:#233446;--tint-ink:#a9cdee;--field:#26262a;
  --out:#2c5f8d;--in:#26262a;--warn:#fb923c;--crit:#f87171;--ok:#4ade80;--chip:#26262a;
  --dark-pill:#ececee;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#131315;--panel:#1c1c1f;--ink:#ececee;--mute:#9b9aa2;--line:#2b2b30;
    --accent:#6aa7dd;--accent-ink:#0e1a26;--tint:#233446;--tint-ink:#a9cdee;--field:#26262a;
    --out:#2c5f8d;--in:#26262a;--warn:#fb923c;--crit:#f87171;--ok:#4ade80;--chip:#26262a;
    --dark-pill:#ececee;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 28px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.5 var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
button{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 13px;cursor:pointer;transition:background .15s,border-color .15s}
button:hover{border-color:var(--accent);background:var(--tint)}
button:disabled{opacity:.5;cursor:default}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.primary:hover{filter:brightness(1.08);background:var(--accent)}
button.ghost{background:none;border-color:transparent;color:var(--mute)}
button.ghost:hover{background:var(--chip);border-color:transparent;color:var(--ink)}
button.danger{color:var(--crit)}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--tint);border-color:var(--accent)}
input[type=checkbox]{width:auto}
textarea{resize:vertical}

/* ---------- page frame */
main{max-width:1480px;margin:0 auto;padding:26px 28px 130px;min-width:0}
h2{margin:0 0 14px;font:600 28px/1.2 var(--serif);letter-spacing:-.2px}
h3{margin:22px 0 8px;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--mute)}
.serif{font-family:var(--serif)}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.bar .grow{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.row{display:flex;gap:12px;align-items:center}.row .grow{flex:1;min-width:0}
.clip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mute{color:var(--mute)}.small{font-size:12.5px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.grid>.card{margin:0}
.item{cursor:pointer}.card.item:hover{border-color:var(--accent)}
.empty{padding:30px;text-align:center;color:var(--mute)}
label{display:block;font-size:12.5px;color:var(--mute);margin:10px 0 3px}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs button{border:none;border-radius:99px;background:none;padding:6px 14px;color:var(--mute)}
.tabs button:hover{background:var(--chip)}
.tabs button.on{background:var(--tint);color:var(--tint-ink);font-weight:500}

/* ---------- people, chips, avatars */
.avatar{background:hsl(var(--h,200) 60% 92%);color:hsl(var(--h,200) 45% 28%);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;flex:none}
.avatar.lg{width:84px;height:84px;font-size:28px;border:3px solid var(--tint-ink);background-clip:padding-box}
.avatar.sm{width:32px;height:32px;font-size:12px}
.tile{cursor:pointer;text-align:center;padding:14px 8px}.tile .avatar{margin:0 auto 6px;width:56px;height:56px;font-size:20px}
.chip{display:inline-flex;align-items:center;gap:4px;background:var(--chip);border-radius:8px;padding:1px 9px;font-size:12px;margin-right:4px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.chip.tint{background:var(--tint);color:var(--tint-ink);border-color:transparent}
.chip.warn{background:var(--warn);color:#fff;border-color:transparent}.chip.crit{background:var(--crit);color:#fff;border-color:transparent}.chip.ok{background:var(--ok);color:#fff;border-color:transparent}
.badge{font-size:11px;border-radius:99px;padding:1px 8px;background:var(--chip);color:var(--ink);font-weight:500}
.badge.attention{background:#fbe4d6;color:#b4440a}.badge.critical{background:var(--crit);color:#fff}
:root[data-theme="dark"] .badge.attention{background:#4a2c18;color:#fdba74}
.dot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.8px;text-transform:uppercase;color:var(--mute)}
.pill{border:1px solid var(--line);background:var(--panel);border-radius:99px;padding:8px 18px}
.pill.on{background:var(--dark-pill);color:var(--bg);border-color:var(--dark-pill)}
.pill.on:hover{background:var(--dark-pill)}

/* ---------- conversation bubbles */
.thread{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.bub{max-width:min(660px,88%);padding:10px 14px;border-radius:18px;background:var(--in);align-self:flex-start;white-space:pre-wrap;word-break:break-word}
.bub.out{background:var(--out);color:#fff;align-self:flex-end}
.meta{font-size:11.5px;color:var(--mute);margin:0 8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}.meta.out{align-self:flex-end}
.meta a{color:inherit}
.bub a{color:inherit;text-decoration:underline}.bub .quoted{margin-top:6px;opacity:.75}.bub .more{padding:0 8px;margin-top:4px;color:inherit;opacity:.7}
.orig-box{width:min(780px,100%);align-self:flex-start;display:flex;flex-direction:column;gap:4px}.orig-box.out{align-self:flex-end}
.orig-box .meta{margin:0 8px}
iframe.orig{display:block;width:100%;height:120px;border:1px solid var(--line);border-radius:16px;background:#fff}
.composer{display:flex;gap:8px;align-items:flex-end;background:var(--panel);padding:10px;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin-top:10px}
.composer textarea{min-height:44px;background:var(--field);border-color:transparent}

/* ---------- timeline */
.tl{border-left:2px solid var(--line);margin-left:14px;padding-left:26px}.tl .ev{position:relative;margin-bottom:18px}
.tl .ev::before{content:"";position:absolute;left:-36px;top:2px;width:18px;height:18px;border-radius:50%;background:var(--panel);border:2px solid var(--accent)}
.tl .ev.note::before{border-color:var(--ok)}.tl .ev.event::before{border-color:var(--warn)}.tl .ev.milestone::before{border-color:var(--crit);background:var(--tint)}

/* ---------- dialogs, toast */
dialog{border:1px solid var(--line);border-radius:22px;background:var(--panel);color:var(--ink);padding:22px;width:min(480px,92vw);box-shadow:var(--shadow)}
dialog h2{font-size:22px}
dialog::backdrop{background:#0007;backdrop-filter:blur(2px)}
.toast{position:fixed;bottom:104px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:99px;z-index:30;box-shadow:var(--shadow)}
.feedcard{max-width:560px;margin:0 auto 12px}

/* ---------- floating dock */
#nav{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:2px;padding:7px;border-radius:26px;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 12px 40px rgba(30,25,10,.16),0 2px 6px rgba(30,25,10,.06);max-width:calc(100vw - 20px)}
#nav:empty{display:none}
#nav a,#nav button.dock{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:70px;padding:8px 10px 6px;border-radius:19px;color:var(--mute);text-decoration:none;font-size:11.5px;cursor:pointer;border:0;background:none;position:relative}
#nav a:hover,#nav button.dock:hover{background:var(--chip);color:var(--ink)}
#nav a.on{background:var(--tint);color:var(--tint-ink);font-weight:600}
#nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#nav .sep{width:1px;align-self:stretch;margin:6px 4px;background:var(--line)}
#nav .badge{position:absolute;top:2px;right:12px;font-size:10px;padding:0 6px}
.dockwrap{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);z-index:21;width:min(460px,calc(100vw - 24px))}
.dockwrap input{background:var(--panel);box-shadow:var(--shadow);border-radius:99px;padding:12px 20px}
#theme-toggle{position:fixed;right:20px;bottom:24px;z-index:20;width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center;box-shadow:var(--shadow);color:var(--tint-ink)}
#theme-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-4px}

/* ---------- banner header (profile / person) */
.banner{height:78px;background:var(--tint);border-radius:18px 18px 0 0;margin:-14px -18px 0}
.profilecard{overflow:hidden}
.profilecard .avatar{margin:-30px 0 6px;width:56px;height:56px;font-size:20px;border:3px solid var(--panel)}
.profilecard .name{font:600 24px/1.2 var(--serif)}
.personhead{overflow:hidden;padding-bottom:16px}
.personhead .banner{height:96px}
.personhead .who{display:flex;gap:18px;align-items:flex-start;margin-top:-42px}
.personhead .who>div.grow{padding-top:52px}
.personhead .name{font:600 30px/1.15 var(--serif);margin:0}
.personhead .who .avatar{flex:none}

/* ---------- home */
.cols3{display:grid;grid-template-columns:270px minmax(0,1fr) 320px;gap:20px;align-items:start}
.cols3>aside{position:sticky;top:18px}
.sidelink{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;color:var(--ink);text-decoration:none;cursor:pointer}
.sidelink:hover{background:var(--chip)}.sidelink.on{background:var(--tint);color:var(--tint-ink)}
.sidelink .badge{margin-left:auto}
.hero{padding:22px 24px}
.hero h1{font:600 36px/1.15 var(--serif);margin:6px 0 10px;letter-spacing:-.3px}
.msgcard{padding:0;overflow:hidden}
.msgcard .body{padding:18px 22px 16px}
.msgcard .subject{font:500 20px/1.3 var(--sans);margin:14px 0 6px}
.msgcard .foot{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.msgcard .foot a{display:flex;gap:8px;justify-content:center;align-items:center;padding:12px;color:var(--ink);text-decoration:none;font-size:14px}
.msgcard .foot a:hover{background:var(--tint)}
.msgcard .foot a+a{border-left:1px solid var(--line)}
.railtitle{font:600 26px/1.15 var(--serif);margin:0}
.railrow{display:flex;gap:12px;align-items:center;padding:8px 0;cursor:pointer}
.railrow .avatar{width:38px;height:38px;font-size:13px}
.unreaddot{color:var(--tint-ink);font-size:12px;display:inline-flex;align-items:center;gap:5px}
.unreaddot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tint-ink)}

/* ---------- inbox */
.cols-mail{display:grid;grid-template-columns:250px minmax(300px,400px) minmax(0,1fr);gap:18px;align-items:start}
.cols-mail.nopane{grid-template-columns:250px minmax(0,1fr)}
.mailside,.maillist,.readpane{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}
.mailside{position:sticky;top:18px;max-height:calc(100vh - 150px);overflow:auto;padding:12px}
.mailside h3{margin:16px 8px 6px}
.fold{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;cursor:pointer;font-size:14px;color:var(--ink);text-decoration:none}
.fold:hover{background:var(--chip)}.fold.on{background:var(--tint);color:var(--tint-ink);font-weight:500}
.twist{width:12px;flex:none;text-align:center;color:var(--mute)}.fold.on .twist{color:inherit}
.maillist{min-width:0;padding:0;overflow:hidden}
.listhead{padding:14px 16px 6px}
.listhead .search{background:var(--field);border-color:transparent;border-radius:14px}
.mrow{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer;position:relative}
.mrow:hover{background:var(--bg)}.mrow.on{background:var(--tint);box-shadow:inset 3px 0 0 var(--accent)}
.mrow .box{opacity:0;position:absolute;left:3px;top:18px;width:14px;height:14px}
.mrow:hover .box,.mrow .box:checked,.selecting .mrow .box{opacity:1}
.mrow .top{display:flex;gap:8px;justify-content:space-between}
.mrow .subj{font-weight:500}.mrow.unread .subj,.mrow.unread .from{font-weight:700}
.mrow .snip{font-size:13px;color:var(--mute)}
.readpane{min-width:0;padding:22px 26px;position:sticky;top:18px;max-height:calc(100vh - 150px);overflow:auto}
.readpane h1{font:600 28px/1.2 var(--serif);margin:8px 0}
.readpane .composer{position:sticky;bottom:0}

/* ---------- contacts */
.cols-people{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
.peopleside{position:sticky;top:18px;max-height:calc(100vh - 150px);overflow:auto;padding:14px}
.peopleside .search{background:var(--field);border-color:transparent;border-radius:14px;margin-bottom:10px}
.pinned{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.pinned a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:11.5px;text-align:center}
.pinned a:hover{background:var(--chip)}.pinned a.on{background:var(--tint)}
.pinned .avatar{width:44px;height:44px}
.prow{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:14px;color:var(--ink);text-decoration:none}
.prow:hover{background:var(--chip)}.prow.on{background:var(--tint)}
.prow .avatar{width:40px;height:40px;font-size:13px}
.reach{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.reach>div{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--panel)}
.reach .k{display:flex;gap:8px;align-items:center;font-weight:500;font-size:13px;margin-bottom:2px}
.reach .v{font-size:12.5px;color:var(--mute);overflow-wrap:anywhere}

/* ---------- projects & account */
.projcard{display:flex;gap:14px;align-items:flex-start}
.projcard .pi{width:40px;height:40px;border-radius:12px;background:var(--tint);color:var(--tint-ink);display:grid;place-items:center;flex:none}
.projcard .pn{font:600 20px/1.25 var(--serif)}
.acctgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.acctgrid .card{margin:0;display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);cursor:pointer}
.acctgrid .pi{width:42px;height:42px;border-radius:12px;background:var(--tint);color:var(--tint-ink);display:grid;place-items:center;flex:none}

/* ---------- responsive */
@media (max-width:1250px){.cols3{grid-template-columns:240px minmax(0,1fr)}.cols3>aside.right{grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}.cols-mail{grid-template-columns:230px minmax(0,1fr)}.readpane{display:none}}
@media (max-width:900px){.cols3,.cols-people,.cols-mail{grid-template-columns:1fr}.cols3>aside{position:static}.peopleside,.mailside{position:static;max-height:300px}}
@media (max-width:640px){main{padding:16px 12px 120px}h2{font-size:24px}.hero h1{font-size:28px}#nav a,#nav button.dock{min-width:52px;padding:7px 6px 5px;font-size:10.5px}#theme-toggle{bottom:92px;right:12px;width:40px;height:40px}}
.card .card{box-shadow:none;margin:10px 0 0;border-radius:14px}
.cols3 .card,.cols-people .card{margin-bottom:14px}
:root[data-theme="dark"] .avatar{background:hsl(var(--h,200) 28% 24%);color:hsl(var(--h,200) 60% 82%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .avatar{background:hsl(var(--h,200) 28% 24%);color:hsl(var(--h,200) 60% 82%)}}

/* ---------- Brews: newsletters as swipeable posts */
.brew-wrap{max-width:620px;margin:0 auto}
.brew-head p{margin:-6px 0 14px}
.brew-tabs{margin-bottom:12px}
.brew-note{margin-bottom:12px}
.brew-brewing{display:flex;gap:10px;align-items:center;font-size:14px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);display:inline-block;animation:spin .8s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.card.brew{padding:0;overflow:hidden;margin-bottom:18px;transition:opacity .25s,transform .25s}
.card.brew.leaving{opacity:0;transform:translateY(-8px)}
.card.brew.due{border-color:var(--warn)}
.brew header{padding:12px 16px}
.brew-pub{font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.brew-logo{width:32px;height:32px;border-radius:50%;object-fit:contain;background:#fff;border:1px solid var(--line);flex:none}
.brew-carousel{position:relative}
.brew-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;outline:none}
.brew-track::-webkit-scrollbar{display:none}
.brew-slide{flex:0 0 100%;scroll-snap-align:start;min-height:360px;display:flex;flex-direction:column;background:var(--panel)}
.brew-slide-text{padding:14px 18px 18px}
.brew-slide-text p{margin:6px 0}
.brew-slide ul,.brew-sec ul{margin:6px 0;padding-left:20px}.brew-slide li,.brew-sec li{margin:3px 0}
.brew-title{margin:4px 0 6px;font:600 21px/1.25 var(--serif);text-transform:none;letter-spacing:0;color:var(--ink)}
.brew-more{font-size:13.5px;text-decoration:none;font-weight:500}
.brew-slide.cover{position:relative;justify-content:flex-end;min-height:420px;background:linear-gradient(160deg,hsl(var(--h) 45% 32%),hsl(calc(var(--h) + 40) 40% 18%));color:#fff}
.brew-slide.cover .brew-media.fill{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.brew-slide.cover .brew-media.fill img{height:100%}
.brew-slide.cover .brew-media.fill::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.78))}
.brew-cover-text{position:relative;padding:22px 20px 20px}
.brew-cover-text p{margin:8px 0 0;opacity:.92}
.brew-headline{font:600 27px/1.18 var(--serif);text-wrap:balance}
.brew-topic{display:inline-block;font-size:11px;letter-spacing:.8px;text-transform:uppercase;background:rgba(255,255,255,.18);padding:2px 9px;border-radius:99px;margin-bottom:8px}
.brew-swipe{margin-top:10px;opacity:.75}
.brew-media{position:relative;aspect-ratio:16/9;background:var(--chip);overflow:hidden;display:grid;place-items:center}
.brew-media img{width:100%;height:100%;object-fit:cover;display:block}
.brew-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.brew-media.noimg{background:linear-gradient(135deg,#222,#444)}
.brew-media.noimg:not(.video){display:none}
.brew-media.fill.noimg{display:block;background:none}
.brew-media.hero{border-radius:16px;margin:14px 0}
.brew-sec .brew-media{border-radius:14px;margin:10px 0}
.brew-play{position:absolute;display:flex;gap:6px;align-items:center;background:rgba(0,0,0,.65);color:#fff;border:0;border-radius:99px;padding:10px 18px;font-weight:500}
.brew-play:hover{background:rgba(0,0,0,.8)}
.brew-play svg{width:18px;height:18px;fill:#fff;stroke:none}
.brew-arrow{position:absolute;top:44%;width:36px;height:36px;border-radius:50%;padding:0;display:grid;place-items:center;background:color-mix(in srgb,var(--panel) 90%,transparent);box-shadow:var(--shadow);opacity:0;transition:opacity .15s}
.brew-arrow svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.brew-arrow.left{left:10px}.brew-arrow.right{right:10px}
.brew-arrow:disabled{display:none}
.brew-carousel:hover .brew-arrow{opacity:1}
.brew-dots{display:flex;gap:5px;justify-content:center;padding:8px 0 2px}
.brew-dots button{width:7px;height:7px;padding:0;border-radius:50%;border:0;background:var(--line)}
.brew-dots button.on{background:var(--accent);width:18px;border-radius:99px}
.brew-open{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 16px;text-decoration:none;color:var(--ink);font-size:13.5px}
.brew-open>span:last-child{white-space:nowrap}
.brew-open .ico,.brew-by .ico{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-3px}
.brew-actions{display:flex;border-top:1px solid var(--line)}
.brew-act{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:0;background:none;padding:9px 4px;color:var(--mute);font-size:11.5px;text-decoration:none;cursor:pointer}
.brew-act svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.brew-act:hover{background:var(--chip);color:var(--ink)}
.brew-act.on{color:var(--accent)}.brew-act.on svg{fill:currentColor;fill-opacity:.15}
.brew-end{text-align:center;padding:30px 0 10px;color:var(--ink)}
.brew-end .ico{width:30px;height:30px;stroke:var(--mute);fill:none;stroke-width:1.5}
.brew-choices{display:grid;gap:8px}
.brew-choices button{display:flex;gap:10px;align-items:center;padding:10px 14px;text-align:left}
.brew-choices svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7}
/* reading page */
.brew-page{max-width:720px;margin:0 auto}
.brew-page .brew-actions{border:1px solid var(--line);border-radius:16px;background:var(--panel);margin:10px 0 18px;overflow:hidden}
.brew-h1{font:600 34px/1.15 var(--serif);margin:6px 0 10px;text-wrap:balance}
.brew-lede{font-size:17px;color:var(--mute);margin:0 0 8px}
.brew-sec{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.brew-sec p{margin:4px 0}
.brew-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--tint-ink);display:grid;place-items:center;font-weight:600;font-size:13px;margin-top:4px}
.brew-sources{margin:18px 0}
.brew-ask{margin:26px 0 20px}
.brew-qa{margin:14px 0 18px}
.brew-q{font:600 20px/1.3 var(--serif);margin-bottom:8px}
.brew-a{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 16px;white-space:pre-wrap;line-height:1.55}
.brew-by{display:flex;gap:5px;align-items:center;margin-bottom:6px;white-space:normal}
.brew-cites{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.brew-cites .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brew-suggest{margin:8px 0}
.brew-suggest .pill{padding:6px 14px;font-size:13px}
.brew-composer{position:sticky;bottom:92px;margin-top:8px;padding-top:6px;background:linear-gradient(transparent,var(--bg) 14px)}
.brew-composer .composer{margin-top:0}
.brew-opts{margin:0 4px 6px;gap:6px}
.brew-model{width:auto;padding:4px 10px;font-size:12.5px}
.brew-web{display:flex;gap:6px;align-items:center;margin:0;font-size:12.5px;color:var(--mute);cursor:pointer}
@media (max-width:640px){.brew-slide{min-height:320px}.brew-slide.cover{min-height:380px}.brew-headline{font-size:24px}.brew-h1{font-size:28px}.brew-act span{font-size:10.5px}.brew-arrow{display:none}}
@media (max-width:640px){#nav a,#nav button.dock{min-width:44px;padding:7px 4px 5px}#nav .sep{margin:6px 2px}}
.cols-msg{display:grid;grid-template-columns:minmax(340px,440px) minmax(0,1fr);gap:18px;align-items:start}
.cols-msg.nopane{grid-template-columns:minmax(0,1fr)}
.msghead{padding:14px 16px;border-bottom:1px solid var(--line);display:grid;gap:10px}
.msghead .row{gap:10px;align-items:center}
.msglist .mrow:first-child{border-top:none}
.mrow .donebtn{opacity:0;align-self:center;border-radius:99px;width:34px;height:34px;padding:0}
.mrow:hover .donebtn,.mrow.on .donebtn{opacity:1}
@media (hover:none){.mrow .donebtn{opacity:1}}
.msgpane{display:block}
.msgctx{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 12px;margin-bottom:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg)}
@media (max-width:999px){.cols-msg{grid-template-columns:minmax(0,1fr)}}
.cols-msg .readpane{display:block}
.countbadge{position:absolute;right:-6px;bottom:-4px;min-width:20px;height:20px;border-radius:99px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;display:grid;place-items:center;padding:0 5px;border:2px solid var(--panel)}