:root {
  color-scheme:light dark;
  --paper:light-dark(#efeadf,#16130f); --page:light-dark(#fdfbf6,#1e1a15);
  --card:light-dark(#fffefa,#25201a); --sunk:light-dark(#f6f2e9,#2c261f);
  --ink:light-dark(#2a241d,#ece4d4); --muted:light-dark(#6b6153,#b3a793); --faint:light-dark(#7a6f5f,#9a8e7a);
  --line:light-dark(rgba(42,36,29,.11),rgba(236,228,212,.12));
  --rule:light-dark(rgba(42,36,29,.19),rgba(236,228,212,.22));
  --shadow:light-dark(rgba(42,36,29,.08),rgba(0,0,0,.4));
  --accent:light-dark(#8a4632,#d08b6c);
  --good:light-dark(#4a6b46,#9cbb8e); --warn:light-dark(#8a6a2b,#d6ad62); --bad:light-dark(#964736,#e58a72);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media screen { :root[data-theme=light] { color-scheme:light } :root[data-theme=dark] { color-scheme:dark } }
@media print { :root { color-scheme:light } }
* { box-sizing:border-box }
[hidden] { display:none!important }
html,body { height:100% }
body { margin:0; color:var(--ink); background:var(--paper);
  font:14px/1.6 var(--sans); -webkit-font-smoothing:antialiased }
button,input,textarea,select { font:inherit; color:inherit }
button { cursor:pointer }
h1,h2,h3,h4 { margin:0; font-weight:600 }
a { color:var(--accent) }

.app { height:100vh; display:grid; grid-template-rows:auto minmax(0,1fr) }
.mast { padding:0 24px; background:var(--page); border-bottom:1px solid var(--line) }
.mast-top { display:flex; align-items:center; gap:16px; height:46px; border-bottom:1px solid var(--line) }
.brand { font:650 19px/1 var(--sans); letter-spacing:-.015em }
.mast-bar { display:flex; align-items:center; gap:14px; margin-bottom:-1px }
[data-slot],div[data-part] { display:contents }
.mast-bar div[data-part=toolbar]:first-child > * { margin-right:auto }
.tools { display:flex; align-items:center; gap:14px }
.tool-select { max-width:220px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent;
  outline:0; padding:5px 2px; color:var(--faint); cursor:pointer }
.tool-select.active { color:var(--ink) }
.tool-select:hover,.tool-select:focus { border-bottom-color:var(--rule) }
.mast-menu { position:relative; margin:0; max-width:none }
.mast-menu summary { display:block; list-style:none; margin:0; padding:0; border:0; cursor:pointer;
  color:var(--faint); font-size:12px }
.mast-menu summary::-webkit-details-marker { display:none }
.mast-menu summary::marker { content:"" }
.mast-menu summary:hover,.mast-menu[open] > summary { color:var(--ink) }
.mast-panel { position:absolute; right:-8px; top:calc(100% + 13px); width:min(380px,90vw); max-height:65vh;
  overflow:auto; padding:6px 18px 16px; background:var(--card); border:1px solid var(--line); border-radius:2px;
  box-shadow:0 10px 28px var(--shadow); z-index:20; color:var(--ink); font-size:13px; line-height:1.5 }
.mast-panel b { color:var(--ink); font-weight:600 }
.mast-panel > p { margin:10px 0 0; color:var(--muted); font-size:12px }
.mast-panel .back { font-size:12px; white-space:nowrap }
.mast-item { padding:11px 0; border-bottom:1px solid var(--line) }
.mast-item:last-child { border-bottom:0 }
.mast-item p { margin:1px 0 4px; color:var(--muted); font-size:12px }
.mast-item .back { margin-top:4px; font-size:11.5px }
.meta { margin-left:auto; display:flex; align-items:center; gap:18px; color:var(--faint); font-size:12px }
.meta .back { font-size:12px }
.month-select { border:0; padding:0; background:transparent; color:var(--faint); outline:0; cursor:pointer; font-size:12px }
.month-select:disabled { appearance:none; cursor:default; opacity:1 }
.me { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted) }
#sync { color:var(--warn) }
#sync:not(.stale) { display:none }

.reading { overflow:auto; background:var(--page) }
.back { border:0; background:transparent; color:var(--faint); padding:0; font-size:12.5px }
.back:hover { color:var(--ink) }

.section-title { margin:0 0 18px; color:var(--faint); font-size:9.5px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase }
.sub-title { margin:28px 0 12px; font:600 15px var(--sans); color:var(--ink) }
.prose { max-width:76ch; font:15px/1.65 var(--sans); white-space:pre-wrap }
.prose.lede { font-size:16px }
.hint { max-width:74ch; margin:0; color:var(--faint); font-size:12px }
.mono { font-family:var(--mono); font-size:.92em; overflow-wrap:anywhere; word-break:break-word }
.review-md { font:15px/1.65 var(--sans) }
.review-md p { max-width:76ch; margin:0 0 14px }
.review-md .list { margin:0 0 14px }
.review-md .list li { margin:0 0 10px }
.review-md strong { font-weight:600 }
.review-md code { padding:0 3px; background:var(--sunk); border-radius:2px; font:.8em var(--mono);
  overflow-wrap:anywhere }
.review-md pre { max-width:76ch; margin:0 0 14px; padding:10px 12px; overflow:auto; background:var(--sunk); border-radius:2px;
  font:12px/1.5 var(--mono) }
.mt9 { margin-top:9px } .mt20 { margin-top:20px }
.pad11 { padding:11px 0 }

.note { max-width:74ch; padding:13px 18px; border:1px solid var(--line); border-left:2px solid var(--rule);
  border-radius:2px; background:var(--sunk) }
.note .prose { margin:0 }
.note .label { margin-bottom:3px }
.label { color:var(--faint); font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase }
.field { margin-top:14px }
.field .prose { margin-top:2px }
.list { max-width:74ch; margin:6px 0 0; padding-left:20px; font:15px/1.65 var(--sans) }
.list li { margin:4px 0 }

.links { display:flex; flex-direction:column; border-top:1px solid var(--line) }
.link { display:grid; grid-template-columns:150px minmax(0,1fr) auto; gap:16px; align-items:baseline;
  padding:10px 2px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none }
.link:hover { background:var(--sunk) }
.link b { font-size:12.5px; font-weight:600 }
.link .url { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--accent); font-family:var(--mono); font-size:11.5px }
.link .who { color:var(--faint); font-size:11px }

.primary { border:1px solid var(--accent); border-radius:2px; color:var(--page);
  background:var(--accent); padding:6px 14px; font-size:13px }
.primary:disabled { opacity:.5; cursor:default }

.compose { max-width:74ch; margin-top:16px }
.compose textarea { display:block; width:100%; min-height:38px; resize:vertical; border:0; border-radius:0;
  border-bottom:1px solid var(--rule); background:transparent; outline:0; padding:6px 0; font-size:13.5px; line-height:1.5 }
.compose textarea::placeholder { color:var(--faint) }
.compose textarea:focus { border-bottom-color:var(--muted) }
.compose-foot { display:flex; justify-content:flex-end; margin-top:10px }
.compose.compact { max-width:none; margin-top:0 }
.compose.compact textarea { min-height:32px; max-height:140px; padding:5px 0; font-size:11.5px }
.compose.compact .compose-foot { margin-top:7px }
.compose.compact .primary { border-color:var(--rule); background:transparent; color:var(--ink);
  padding:4px 10px; font-size:11.5px }
.compose.compact .primary:hover:not(:disabled) { border-color:var(--accent); color:var(--accent) }

details { margin-top:14px; max-width:74ch }
summary { padding:8px 0; border-top:1px solid var(--line); cursor:pointer;
  color:var(--faint); font-size:11.5px }
summary:hover { color:var(--ink) }
details[open] > summary { color:var(--muted) }
details > *:not(summary) { padding:2px 0 14px }
details.fold { margin-top:0; max-width:none }
.fold > summary { display:flex; align-items:center; gap:8px; width:max-content; padding:5px 0; border-top:0;
  list-style:none; color:var(--muted); font-size:12.5px }
.fold > summary::-webkit-details-marker { display:none }
.fold > summary::before { content:''; width:5px; height:5px; margin-left:1px; border:solid currentColor;
  border-width:0 1.5px 1.5px 0; transform:rotate(-45deg); transition:transform .15s }
.fold[open] > summary::before { transform:rotate(45deg) }
.fold > summary:hover,.fold[open] > summary { color:var(--ink) }
.fold > *:not(summary) { padding:4px 0 10px 15px }
#toast { position:fixed; left:50%; bottom:24px; z-index:20; transform:translate(-50%,12px);
  padding:9px 16px; border-radius:2px; background:var(--ink); color:var(--page); font-size:13px;
  opacity:0; transition:.18s; max-width:80vw }
#toast.show { opacity:1; transform:translate(-50%,0) }
@media(max-width:900px) {
  .mast { padding-left:16px; padding-right:16px }
  .mast-top { flex-wrap:wrap; height:auto; padding:10px 0 }
  .mast-bar,.meta { flex-wrap:wrap }
  .mast-bar { padding-bottom:8px }
  .mast-bar div[data-part=toolbar]:first-child > * { flex-basis:100% }
}
.part { margin-left:12px }
.part:first-child { margin-left:0 }