:root {
  --bg:#0d1117; --panel:#161b22; --line:#222c38; --fg:#e7e9ea; --muted:#96a7b8;
  --blue:#1d9bf0; --own:#2ea043;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 780px; margin: 0 auto; padding: 28px 18px 60px; }
header { display:flex; align-items:center; gap:12px; margin-bottom:6px; }
header img { width:38px; height:38px; }
h1 { font-size:19px; margin:0; font-weight:700; }
.sub { color:var(--muted); font-size:14px; margin:0 0 22px; }
form { display:flex; gap:8px; margin-bottom:10px; }
input[type=url] { flex:1; min-width:0; padding:11px 12px; border-radius:9px; border:1px solid var(--line);
                  background:#0b0f14; color:var(--fg); font:inherit; font-size:14px; }
button { padding:11px 16px; border:0; border-radius:9px; cursor:pointer; font:inherit; font-weight:700;
         background:linear-gradient(135deg,#1d9bf0,#0d8bf0); color:#fff; }
#status { color:var(--muted); font-size:14px; min-height:22px; margin:10px 0 18px; }
ol { list-style:none; margin:0; padding:0; }
li { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--blue);
     border-radius:10px; padding:12px 14px; margin:0 0 10px; }
li.reply { margin-left:22px; border-left-color:#5a6a7a; }
.who { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; margin-bottom:4px; }
.name { color:var(--blue); font-weight:700; font-size:14px; word-break:break-all; }
.when { color:var(--muted); font-size:12px; }
.text { white-space:pre-wrap; word-wrap:break-word; }
.text a { color:var(--blue); }
footer { margin-top:34px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
footer a { color:var(--blue); }
.note { color:var(--muted); font-size:13px; }
li.d2 { margin-left:44px; } li.d3 { margin-left:66px; } li.d4 { margin-left:88px; }
li.d5 { margin-left:110px; } li.d6 { margin-left:132px; }
li.tomb, li.fold { font-style:italic; color:var(--muted); border-left-color:var(--line); }
.npub { color:var(--muted); font-size:12px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tag { color:var(--muted); font-size:11px; border:1px solid var(--line); border-radius:6px; padding:0 6px; }
.opener { background:none; border:0; padding:0; color:var(--blue); font:inherit; font-style:italic; cursor:pointer; font-weight:400; }
.opener:hover { text-decoration:underline; }
/* Names and text come from strangers: right-to-left override characters must not be able to
   reorder what is drawn around them, such as the key beside a name. */
.name, .npub, .text { unicode-bidi:isolate; }