#app { display: flex; flex-direction: column; height: 100vh; }
.body { flex: 1 1 auto; display: flex; min-height: 0; }
.main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;
  min-height: 0; background: var(--bg); }

.pane { flex: 1 1 auto; overflow: auto; scrollbar-gutter: stable; }
.page { width: 100%; padding: var(--s5) var(--s5) var(--s6); }
.sp { flex: 1 1 auto; }

.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; gap: var(--s3); height: var(--h-bar); flex: 0 0 auto;
  padding: 0 var(--s5); border-bottom: 1px solid var(--line); background: var(--bg); }
body.native.mac .top { height: calc(var(--h-bar) + var(--lights-strip));
  padding-top: var(--lights-strip); }
body.native .top { -webkit-app-region: drag; }
.top button, .top [data-do] { -webkit-app-region: no-drag; }
.list .hd button, .list .hd [data-do], .phd button, .phd [data-do],
.whd button, .whd [data-do], .mhd button, .mhd [data-do] { -webkit-app-region: no-drag; }

body.native { user-select: none; -webkit-user-select: none; }
body.native p, body.native .lead, body.native pre, body.native code, body.native .said,
body.native .fnd, body.native .fsec, body.native td, body.native .facts,
body.native input, body.native textarea, body.native [contenteditable] {
  user-select: text; -webkit-user-select: text; }

.said { white-space: pre-wrap; font-size: var(--t-md); line-height: var(--l-md);
  color: var(--ink); user-select: text; }
.said.theirs { font-size: var(--t-lg); line-height: var(--l-lg); }

.topmark { justify-self: start; min-width: 0; display: flex; align-items: center; gap: var(--s3); }
.homebtn { display: flex; align-items: center; height: var(--h); color: inherit; }
.homebtn:hover .mn { color: var(--ink-2); }
.mn { font-family: var(--fw); font-weight: 300; font-size: var(--t-lg); line-height: 1;
  letter-spacing: .01em; color: var(--ink); }

.nl { flex: 1 1 auto; min-width: 0; }
.nn { flex: 0 0 auto; margin-left: auto; font-family: var(--fm); font-size: var(--t-sm);
  color: var(--ink-3); font-variant-numeric: tabular-nums; }
.nn.hot { color: var(--ink); font-weight: 500; }

.toptools { justify-self: end; min-width: 0; display: flex; align-items: center; gap: var(--s2); }
.searchbox { display: flex; align-items: center; gap: var(--s2); height: var(--h);
  padding: 0 var(--s2); border-radius: var(--r); color: var(--ink-3);
  font-size: var(--t-md); box-shadow: inset 0 0 0 1px var(--line-2); }
.searchbox:hover { color: var(--ink-2); background: var(--hi); }
.searchbox .k { margin-left: auto; }
.top .searchbox { width: 200px; flex: 0 1 200px; min-width: var(--h); overflow: hidden; }

.toptools:has(.btn.big) .searchbox { width: var(--h); flex: 0 0 var(--h); padding: 0;
  justify-content: center; }
.toptools:has(.btn.big) .searchbox span { display: none; }
.k { font-family: var(--fm); font-size: var(--t-sm); color: var(--ink-3); }

.top .btn.keysbtn { width: var(--h); height: var(--h); padding: 0; }

.topwho, .pswitch { position: relative; flex: 0 0 auto; }
.navwho { display: flex; align-items: center; gap: var(--s2); height: var(--h);
  border-radius: var(--r); text-align: left; box-shadow: inset 0 0 0 1px var(--line-2); }
.navwho:hover { background: var(--hi); }

.topwho .navwho { width: var(--h); justify-content: center; box-shadow: none; }
.topwho .navwho .wav { width: var(--h); height: var(--h); }
.topwho .navwho:hover { background: none; }
.topwho .navwho:hover .wav, .topwho .navwho.on .wav { background: var(--line-2); color: var(--ink); }
.topwho .whomenu { left: auto; right: 0; top: calc(100% + var(--s1)); bottom: auto; }
.pswitch .navwho { max-width: 240px; padding: 0 var(--s2) 0 var(--s1); }
.navwho .pn { flex: 1 1 auto; min-width: 0; font-size: var(--t-md); font-weight: 500;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navwho .pmark, .mi .pmark { display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: var(--h-sm); height: var(--h-sm); border-radius: var(--r);
  font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); background: var(--hi); }
.pmark.all { color: var(--ink-3); background: none; }
.pmenu { min-width: 248px; }
.top .pswitch .pmenu { left: 0; right: auto; top: calc(100% + var(--s1)); }
.mi.prow.on { color: var(--act-on); background: var(--act-fill); }
.mi.prow.on::after { content: none; }
.mi.prow.add { color: var(--ink-3); }
.wav { width: var(--h-sm); height: var(--h-sm); border-radius: var(--r); flex: 0 0 auto;
  display: grid; place-items: center; font-family: var(--fm); font-size: var(--t-sm);
  font-weight: 500; color: var(--ink); background: var(--hi); }

.setcols { display: grid; grid-template-columns: var(--list-w) minmax(0, 1fr);
  gap: var(--s5); align-items: start; }

.setnav { display: flex; flex-direction: column; position: sticky; top: var(--s4); }
.setnav .ngroup:not(:first-child) { margin-top: var(--s4); }
.setmain { min-width: 0; }
.setmain .phead { margin-bottom: var(--s4); }

.menu { position: absolute; z-index: 30; min-width: 220px; right: var(--s4); top: var(--s4);
  padding: var(--s1); background: var(--bg-2); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.menu .ml { padding: var(--s2) var(--s2) var(--s1); font-size: var(--t-sm);
  line-height: var(--l-sm); color: var(--ink-3); }
.menu .mi { display: flex; align-items: center; gap: var(--s2); width: 100%; height: var(--h);
  padding: 0 var(--s2); border-radius: var(--r); text-align: left; color: var(--ink-2);
  font-size: var(--t-md); }
.menu .mi:hover { background: var(--hi); color: var(--ink); }
.menu .mi.on { color: var(--ink); }
.menu .mi.on::after { content: '✓'; margin-left: auto; color: var(--ink-2); }
.mdiv { height: 1px; margin: var(--s1) 0; background: var(--line); }
.person { position: relative; }
.whomenu { right: auto; left: var(--s2); top: auto; bottom: 100%; }

.updbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  min-height: var(--h-bar); padding: var(--s2) var(--s4);
  background: var(--act-soft); border-bottom: 1px solid var(--edge);
  font-size: var(--t-md); }
.updv { color: var(--ink); font-weight: 500; }
.updn { color: var(--ink-2); }
.updbar .btn { margin-left: auto; }

.list { width: var(--list-w); flex: 0 0 var(--list-w); display: flex; flex-direction: column;
  min-height: 0; background: var(--bg-2); border-right: 1px solid var(--line); }
.body > .split:not(.wsplit) { display: none; }
.list .hd { flex: 1 1 auto; min-height: 0; padding: var(--s4) var(--s3); overflow-y: auto;
  scrollbar-width: none; }
.list .hd::-webkit-scrollbar { display: none; }
.ngroup { display: flex; align-items: center; height: var(--h); padding: 0 var(--s3); }
.nav + .ngroup { margin-top: var(--s4); }
.nav { display: flex; flex-direction: column; }
.navrow { display: flex; align-items: center; gap: var(--s2); width: 100%; height: var(--h);
  padding: 0 var(--s3); border-radius: var(--r); text-align: left; color: var(--ink-2);
  font-size: var(--t-md); }
.navrow:hover { color: var(--ink); background: var(--hi); }
.navrow.on { color: var(--act-on); background: var(--act-fill); font-weight: 500; }
.navrow .i { color: var(--ink-3); }
.navrow.on .i, .navrow.on .nn { color: var(--act-on); }
.lfoot { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s1);
  padding: var(--s2) var(--s3); border-top: 1px solid var(--line); }
.lfb { display: flex; align-items: center; gap: var(--s2); flex: 1 1 auto; height: var(--h);
  padding: 0 var(--s2); border-radius: var(--r); font-size: var(--t-md); color: var(--ink-2);
  text-align: left; }
.lfb.ico { flex: 0 0 auto; width: var(--h); padding: 0; justify-content: center; }
.lfb:hover { background: var(--hi); color: var(--ink); }
.lfb.who { min-width: 0; }
.lfb.who .nl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link { display: flex; align-items: center; gap: var(--s2); height: var(--h);
  margin: 0 var(--s3) var(--s3); padding: 0 var(--s3); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-3); text-align: left; }
.link:hover { background: var(--hi); color: var(--ink-2); }
.link .ld { width: var(--s2); height: var(--s2); flex: 0 0 auto; background: var(--ink-3); }
.link .lw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link.live .ld { background: var(--ink-2); }
.link.loc .ld { background: none; box-shadow: inset 0 0 0 1px var(--ink-2); }
.link.loc .lw { color: var(--ink); }
.link.down .ld { background: var(--stop); }
.link.down .lw { color: var(--stop); }

.split { width: 1px; flex: 0 0 1px; cursor: col-resize; position: relative; z-index: 5;
  background: var(--line); }
.split::after { content: ''; position: absolute; inset: 0 -4px; }
.split:hover, .split.drag { background: var(--line-3); }
.split.wsplit { background: var(--glass-ln); }
body.dragging { cursor: col-resize; user-select: none; }
body.dragging * { cursor: col-resize !important; }

.veil { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start;
  justify-content: center; padding-top: 10vh; background: var(--veil); }
.sheet { width: min(560px, 92vw); max-height: 76vh; overflow: auto; padding: var(--s4);
  background: var(--bg-2); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.sheet h2 { margin: 0 0 var(--s4); font-size: var(--t-lg); line-height: var(--l-lg); }
.pal { width: min(600px, 92vw); overflow: hidden; background: var(--bg-2);
  border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.pal input { height: var(--h-bar); padding: 0 var(--s3); border: 0;
  border-bottom: 1px solid var(--line); border-radius: 0; background: none; font-size: var(--t-lg); }
.pal input:focus-visible { background: none; }
.pal .res { max-height: 48vh; overflow: auto; padding: var(--s1); }
.pal .r { display: flex; align-items: center; gap: var(--s2); width: 100%; height: var(--h);
  padding: 0 var(--s2); border-radius: var(--r); text-align: left; color: var(--ink-2);
  font-size: var(--t-md); }
.pal .r.on { background: var(--hi); color: var(--ink); }
.pal .r .ic { display: flex; color: var(--ink-3); }
.pal .r .s2 { margin-left: auto; font-size: var(--t-sm); color: var(--ink-3); }
.pal .none { padding: var(--s3); color: var(--ink-3); }
.toast { position: fixed; left: 50%; bottom: var(--s5); transform: translateX(-50%); z-index: 80;
  max-width: 62ch; padding: var(--s2) var(--s3); font-size: var(--t-md); color: var(--ink);
  background: var(--bg-2); border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow); }
.toast.bad { color: var(--stop); }

.mark { display: flex; align-items: center; gap: var(--s2); line-height: 1; }
.mark .nlogo { font-size: 26px; }
.nlogo { position: relative; display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; }
.nlogo img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nlogo .nh { filter: invert(1); }
.nlogo .nd { transform-origin: 46.56% 38.23%; }

.nlogo.think .nd { animation: nspin 8s linear infinite; }
.nlogo.sm, .chd .nlogo { font-size: 18px; }
@keyframes nspin { to { transform: rotate(360deg); } }
.boot { height: 100vh; display: grid; place-items: center; background: var(--bg);
  -webkit-app-region: drag; }
.boot-in { display: flex; flex-direction: column; align-items: center; gap: var(--s4); }
.boot .mark { flex-direction: column; gap: var(--s3); }
.boot .mark .mn { font-size: var(--t-xl); }
.boot .mark .nlogo { font-size: 96px; }
.boot-steps { display: flex; flex-direction: column; gap: var(--s2); }
.bs { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-md); color: var(--ink-3); }
.bs.now { color: var(--ink); }
.bs.bad { color: var(--stop); }

.auth { display: grid; place-items: center; height: 100vh; overflow: auto; padding: var(--s4); }
.auth form, .authcard { width: 400px; max-width: 100%; display: flex; flex-direction: column;
  gap: var(--s3); }
.authcard.wide { width: 520px; }

.auth .mark { margin-bottom: var(--s3); gap: var(--s3); }
.auth .mark .nlogo { font-size: 32px; }
.auth .mark .mn { font-size: var(--t-dsp); }

.auth { --t-page: var(--t-xl); --l-dsp: var(--l-xl); }
.auth p { color: var(--ink-2); }
.auth .er { min-height: var(--l-md); font-size: var(--t-md); color: var(--stop); }

.auth .er:empty { display: none; }

.auth form > [type=submit] { margin-top: var(--s2); }
.auth a { color: var(--ink); text-decoration: underline; }
.auth .acts { display: flex; flex-direction: column; gap: var(--s2); width: 100%; margin-top: var(--s3); }
.auth .acts .btn { width: 100%; }

.auth .hint { margin-top: calc(-1 * var(--s2)); font-size: var(--t-sm); color: var(--ink-3); }
.auth .fl { margin-top: var(--s2); font-weight: 500; }
#code { font-family: var(--fm); font-size: var(--t-lg); letter-spacing: .1em; text-align: center; }

.whereto { max-width: 46ch; margin: var(--s3) 0 0; font-size: var(--t-sm);
  line-height: var(--l-sm); color: var(--ink-3); }
.whereto b { color: var(--ink-2); font-weight: 500; }
.whereto a { color: var(--ink-2); text-decoration: underline; }
.whereto.isloc b { color: var(--ink); }

.work { width: var(--work-w); flex: 0 0 var(--work-w); min-width: 0; display: flex;
  flex-direction: column; background: var(--glass); }
.whd { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s1); height: var(--h-bar);
  padding: 0 var(--s3); border-bottom: 1px solid var(--glass-ln); -webkit-app-region: drag; }
.wbody { flex: 1 1 auto; overflow: auto; min-height: 0; }
.wtab { height: var(--h); padding: 0 var(--s3); border-radius: var(--r); font-size: var(--t-md);
  color: var(--g-ink-2); }
.wtab:hover { background: var(--glass-3); color: var(--g-ink); }
.wtab.on { background: var(--glass-3); color: var(--g-ink); font-weight: 500; }
.wtab.empty { color: var(--g-ink-3); }
.wnow { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--glass-ln); font-size: var(--t-md); color: var(--g-ink-2); }
.wnow .wdot { width: var(--s2); height: var(--s2); flex: 0 0 auto; background: var(--g-ink); }
.wnow.idle .wdot { background: var(--g-ink-3); }
.wempty { padding: var(--s4) var(--s3); font-size: var(--t-md); color: var(--g-ink-3); }
.zoom { display: inline-flex; align-items: center; gap: var(--s1); }
.zoom .zn { min-width: var(--s4); text-align: center; font-family: var(--fm);
  font-size: var(--t-sm); color: var(--g-ink-3); }
.zoom .wtab { width: var(--h-sm); height: var(--h-sm); padding: 0; display: inline-flex;
  align-items: center; justify-content: center; }

.mhd { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s3); height: 0;
  overflow: hidden; padding: 0 var(--s5); border-bottom: 1px solid transparent;
  background: var(--bg); -webkit-app-region: drag; }
body.scrolled .mhd { height: var(--h-bar); border-bottom-color: var(--line); }
.mhd .mt { flex: 1 1 auto; min-width: 0; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }