:root{--bg:#f6f7f9;--panel:#ffffff;--text:#1a2230;--muted:#5b6678;--line:#d9dee7;--accent:#3a5a8c;--accent-ink:#2b4670;--rule:#e6eaf0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#101419;--panel:#161b22;--text:#e6eaf0;--muted:#98a3b5;--line:#2a323e;--accent:#7fa3d8;--accent-ink:#a9c3e8;--rule:#232a35}}
:root[data-theme="dark"]{--bg:#101419;--panel:#161b22;--text:#e6eaf0;--muted:#98a3b5;--line:#2a323e;--accent:#7fa3d8;--accent-ink:#a9c3e8;--rule:#232a35}
*{box-sizing:border-box}
html{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent-ink);text-decoration:none;border-bottom:1px solid var(--line)}
a:hover{border-bottom-color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
header.top{border-bottom:1px solid var(--line);background:var(--panel)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.01em;border:0}
.brand svg{width:26px;height:26px;flex:none}
nav.top a{border:0;color:var(--muted);margin-left:18px;font-size:14.5px}
nav.top a:hover{color:var(--text)}
main{padding-block:48px 72px}
h1{font-size:30px;line-height:1.25;font-weight:600;margin:0 0 14px;text-wrap:balance;max-width:28ch}
h2{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px}
p{margin:0 0 14px;max-width:66ch}
.lede{font-size:18.5px;color:var(--text);max-width:60ch}
section{padding-block:36px;border-top:1px solid var(--rule)}
section:first-of-type{border-top:0;padding-top:0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 40px}
@media (max-width:640px){.cols{grid-template-columns:1fr}h1{font-size:25px}main{padding-block:32px 56px}}
.person h3{font-size:17px;font-weight:600;margin:0 0 4px}
.person .via{color:var(--muted);font-size:14.5px;margin:0 0 8px}
.person ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.person li{margin:2px 0}
.mono{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:13.5px}
.work{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.work{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.card h3{font-size:16px;font-weight:600;margin:0 0 6px}
.card p{font-size:14.5px;color:var(--muted);margin:0 0 10px}
.card .k{display:inline-block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
footer{border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between;padding-block:20px}
footer a{border:0;color:var(--muted)}
footer a:hover{color:var(--text)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.drop{border:2px dashed var(--line);border-radius:8px;padding:40px 20px;text-align:center;background:var(--panel);cursor:pointer;transition:border-color .15s,background .15s}
.drop.over,.drop:hover{border-color:var(--accent);background:var(--bg)}
.drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.drop p{margin:0;max-width:none}
.log,.files{list-style:none;margin:14px 0 0;padding:0;font-size:13.5px}
.log li,.files li{padding:4px 0;border-bottom:1px solid var(--rule)}
.log li.ok{color:var(--accent-ink)} .log li.bad{color:#b23b4f}
pre.mono{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;overflow-x:auto;font-size:13px;margin:0 0 14px}
/* a download / action button in ordinary page flow. The .bar and .viewer rules below are MORE
   specific and come later, so those keep their own sizing; this is only the unscoped case, which
   had none and rendered as a plain link. */
.btn{display:inline-block;font:inherit;font-size:14.5px;font-weight:500;padding:9px 16px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--text);text-decoration:none;cursor:pointer}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn + .mono{margin-left:10px;color:var(--muted)}
.h3s{font-size:15px;font-weight:600;margin:0 0 6px}
.files .del{font:inherit;font-size:12px;margin-left:10px;padding:2px 8px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--muted);cursor:pointer}.files .del:hover{border-color:var(--accent);color:var(--text)}.files .del.armed{border-color:#b23b4f;color:#b23b4f}.files .del:disabled{opacity:.5;cursor:default}

/* ---- the shell: menu bar on the left, the current section in the pane beside it (Daniel 2026-10-13) ---- */
body.shell{height:100%;display:grid;grid-template-columns:224px minmax(0,1fr);overflow:hidden}
nav.side{background:var(--panel);border-right:1px solid var(--line);padding:18px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:20px}
nav.side .brand{padding:0 8px 4px;font-size:17px}
nav.side .grp{display:flex;flex-direction:column;gap:1px}
nav.side .gl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:0 8px;margin-bottom:5px}
nav.side a.item{border:0;color:var(--muted);font-size:14.5px;line-height:1.35;padding:7px 8px;border-radius:5px}
nav.side a.item:hover{color:var(--text);background:var(--bg)}
nav.side a.item[aria-current]{color:var(--text);background:var(--bg);font-weight:500;box-shadow:inset 2px 0 0 var(--accent)}
.pane{overflow:auto;display:flex;flex-direction:column;min-height:0;min-width:0}
.pane main{flex:1 0 auto;width:100%}
.pane.app{overflow:hidden}
.pane.app iframe.app{flex:1;width:100%;border:0;min-height:0;background:var(--bg)}
.bar{display:flex;align-items:center;gap:14px;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--panel);font-size:13.5px;color:var(--muted);flex:none}
.bar .t{font-weight:600;color:var(--text);white-space:nowrap}
.bar .hint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar a{margin-left:auto;border:0;white-space:nowrap}
.bar .btn{font:inherit;font-size:12.5px;padding:3px 9px;margin-left:auto;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text);cursor:pointer;white-space:nowrap}
.bar .btn:hover{border-color:var(--accent)}.bar .btn.armed{border-color:#b23b4f;color:#b23b4f}.bar .btn:disabled{opacity:.6;cursor:default}
.bar .btn + a{margin-left:0}
.split{flex:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,30%,360px);min-height:0}
.split iframe.app{height:100%}
.sharepane{border-left:1px solid var(--line);overflow:auto;padding:14px 16px;background:var(--panel);font-size:14px}
.sharepane h2{margin-bottom:8px}
.sharepane h2.later{margin-top:20px}
.sharepane .drop{background:var(--bg)}
.drop.small{padding:16px 12px;font-size:13.5px}
.sharepane .log li,.sharepane .files li{overflow-wrap:anywhere}
@media (max-width:760px){
  body.shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  nav.side{flex-direction:row;align-items:center;gap:6px;padding:6px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;white-space:nowrap}
  nav.side .brand{padding:0 6px}
  nav.side .brand span{display:none}
  nav.side .grp{flex-direction:row}
  nav.side .gl{display:none}
  nav.side a.item{font-size:13.5px;padding:6px 7px}
  nav.side a.item[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
  .bar .hint{display:none}
  .split{display:flex;flex-direction:column}
  .split iframe.app{flex:1;height:auto;min-height:0}
  .sharepane{flex:none;max-height:45%;border-left:0;border-top:1px solid var(--line)}
}
/* share viewer popup (gen_site.py SHARE_JS) */
body.noscroll{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.viewer .vbox{background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:10px;width:min(1100px,100%);height:min(88vh,100%);display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden}
.viewer .vh{display:flex;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--panel);font-size:13.5px}
.viewer .vn{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.viewer .vh a{white-space:nowrap}
.viewer .vx{font:inherit;font-size:20px;line-height:1;padding:0 8px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text);cursor:pointer}
.viewer .vx:hover{border-color:var(--accent)}
.viewer .vb{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;background:var(--panel)}
.viewer .vb img{max-width:100%;max-height:100%;object-fit:contain}
.viewer .vb video{max-width:100%;max-height:100%}
.viewer .vb iframe{width:100%;height:100%;border:0;background:#fff}
.viewer .vb pre.vt{align-self:stretch;width:100%;margin:0;padding:16px 18px;font-size:13px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--bg)}
.viewer .vnone{text-align:center;padding:30px}
.viewer .vnone .btn{display:inline-block;font:inherit;padding:7px 14px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text);text-decoration:none}
@media (max-width:760px){.viewer{padding:8px}.viewer .vbox{height:100%}}
/* the chat page: sections stacked top to bottom, tabs, a roster and a right-click menu in each (site/chatpage.py) */
.chatsplit{grid-template-columns:minmax(0,1fr) clamp(240px,24%,320px)}
.chatsecs{--me:#2e7d57;--remote:#9a6a12;--at:#7c4dbd;display:grid;grid-auto-flow:row;grid-auto-rows:minmax(0,1fr);min-height:0;min-width:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chatsecs{--me:#9ece6a;--remote:#e0af68;--at:#bb9af7}}
:root[data-theme="dark"] .chatsecs{--me:#9ece6a;--remote:#e0af68;--at:#bb9af7}
.sec{display:flex;flex-direction:column;min-height:0;min-width:0;padding:0;border:0;border-bottom:1px solid var(--line)}   /* padding:0 and border:0: a section is a <section>, and the site's section rule gives it 36px of padding-block and a top rule */
.sec:last-child{border-bottom:0}
.sec .body{flex:1;display:flex;min-height:0}
.tabs{display:flex;align-items:center;gap:4px;padding:6px 8px;border-bottom:1px solid var(--line);background:var(--panel);overflow-x:auto;flex:none}
.tab{font:inherit;font-size:13px;padding:3px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.tab:hover{color:var(--text)}
.tab.on{background:var(--bg);border-color:var(--line);color:var(--text);font-weight:600}
.tab .tx{display:inline-block;max-width:16em;overflow:hidden;text-overflow:ellipsis}
.tab .n{font-size:11px;font-weight:600;background:var(--accent);color:#fff;border-radius:9px;padding:0 6px;line-height:16px}
.tab .x{color:var(--muted);font-size:14px;line-height:1;font-weight:400}.tab .x:hover{color:#b23b4f}
.addtab,.colx{font:inherit;font-size:15px;line-height:1;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:3px 7px;border-radius:6px}
.addtab:hover,.colx:hover{color:var(--text);background:var(--bg)}
.colx{margin-left:auto}
.tabs input.inl{font:inherit;font-size:13px;padding:1px 6px;width:11em;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--text)}
.clog{flex:1;overflow-y:auto;padding:8px 12px;font-size:14px;line-height:1.45;min-height:0;min-width:0}
.clog:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.clog .m{margin:3px 0;overflow-wrap:anywhere}
.clog .m .t{color:var(--muted);font-size:11px;margin-right:7px;font-variant-numeric:tabular-nums}
.clog .m .f{color:var(--accent-ink);font-weight:600;margin-right:7px}
.clog .m.mine .f{color:var(--me)}.clog .m.remote .f{color:var(--remote)}
.clog .m.sys{color:var(--muted);font-style:italic;font-size:12.5px}
.clog .m .lnk{color:var(--accent-ink);text-decoration:underline;border:0}
.clog .m .path{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-size:12.5px;background:var(--panel);border:1px solid var(--rule);padding:0 5px;border-radius:4px;cursor:copy}
.clog .m .at{color:var(--at);font-weight:600}.clog .m .chan{color:var(--accent-ink)}
.clog .day{text-align:center;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin:10px 0 6px}
.roster{width:180px;flex:none;border-left:1px solid var(--line);overflow:auto;padding:8px 12px;background:var(--panel);font-size:13px}
.roster h3{margin:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.roster ul{list-style:none;margin:0;padding:0}
.roster li{padding:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.roster li.me{color:var(--me)}.roster li.remote{color:var(--remote)}.roster li.bot{color:var(--accent-ink)}.roster li.none{color:var(--muted);font-style:italic}
.roster li .r{color:var(--muted);font-size:11px;margin-left:5px}
.compose{display:flex;gap:8px;padding:8px 10px;border-top:1px solid var(--line);background:var(--panel);flex:none}
.compose input{flex:1;font:inherit;font-size:14px;padding:6px 9px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);min-width:0}
.compose button{font:inherit;font-size:13.5px;padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--text);cursor:pointer}
.compose button:hover{border-color:var(--accent)}
.cmenu{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line);border-radius:7px;box-shadow:0 8px 24px rgba(0,0,0,.2);padding:4px;display:flex;flex-direction:column;min-width:140px}
.cmenu .ch{font-size:11.5px;color:var(--muted);padding:4px 10px 6px;border-bottom:1px solid var(--rule);margin-bottom:3px;font-family:"IBM Plex Mono",ui-monospace,monospace}
.cmenu button{font:inherit;font-size:13.5px;text-align:left;padding:6px 10px;border:0;background:transparent;color:var(--text);cursor:pointer;border-radius:5px}
.cmenu button:hover,.cmenu button:focus-visible{background:var(--bg);outline:0}.cmenu button:disabled{color:var(--muted);cursor:default}
.bar .cst{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}.bar .cst.ok{color:#2e7d57}
.bar .cst~.btn,.bar .cst~a{margin-left:0}
@media (max-width:760px){.chatsecs{grid-auto-rows:minmax(260px,1fr);overflow:auto}.roster{display:none}}