:root {
  --e2g-inline-ink: #102321;
  --e2g-inline-muted: #6c7c78;
  --e2g-inline-paper: #fffaf5;
  --e2g-inline-cream: #f4f0e8;
  --e2g-inline-mint: #acd9ca;
  --e2g-inline-peach: #ff947f;
}

.e2g-inline-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 30px;
  padding: 12px 0;
  border-block: 1px solid rgba(16,35,33,.14);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.e2g-inline-mode { padding: 8px 14px; border: 1px solid rgba(16,35,33,.18); border-radius: 999px; color: var(--e2g-inline-ink); background: var(--e2g-inline-paper); cursor: pointer; font: 700 .78rem/1.2 inherit; }
.e2g-inline-mode[aria-pressed="true"] { border-color: var(--e2g-inline-peach); background: #fff0ea; }
.e2g-inline-summary { color: var(--e2g-inline-muted); font-size: .76rem; }
.e2g-inline-article { position: relative; }
.e2g-inline-highlight { padding: 0 .04em; color: inherit; background: linear-gradient(transparent 42%, rgba(172,217,202,.7) 42%); cursor: pointer; }
.e2g-inline-highlight:focus { outline: 2px solid var(--e2g-inline-peach); outline-offset: 2px; }
body:not(.e2g-inline-mode-on) .e2g-inline-highlight { background: linear-gradient(transparent 76%, rgba(172,217,202,.65) 76%); }

.e2g-inline-add { position: absolute; z-index: 10001; padding: 9px 13px; border: 0; border-radius: 999px; color: #fff; background: var(--e2g-inline-ink); box-shadow: 0 8px 30px rgba(16,35,33,.22); cursor: pointer; font: 700 .76rem/1.2 Inter, sans-serif; }
.e2g-inline-drawer { position: fixed; z-index: 10000; top: 0; right: 0; width: min(420px, 92vw); height: 100dvh; padding: 22px; overflow-y: auto; color: var(--e2g-inline-ink); background: var(--e2g-inline-paper); box-shadow: -20px 0 60px rgba(16,35,33,.16); transform: translateX(105%); transition: transform .24s ease; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.e2g-inline-drawer.is-open { transform: translateX(0); }
.e2g-inline-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid rgba(16,35,33,.14); }
.e2g-inline-drawer-head h2 { margin: 0; font: 500 1.8rem/1.1 Georgia, serif; }
.e2g-inline-close { width: 38px; height: 38px; padding: 0; border: 1px solid rgba(16,35,33,.16); border-radius: 50%; color: var(--e2g-inline-ink); background: transparent; cursor: pointer; font-size: 1.6rem; }
.e2g-inline-thread { margin-bottom: 22px; padding: 18px; border-radius: 14px; background: var(--e2g-inline-cream); }
.e2g-inline-quote { margin: 0 0 15px; padding-left: 13px; border-left: 3px solid var(--e2g-inline-peach); color: var(--e2g-inline-muted); font: italic .88rem/1.55 Georgia, serif; }
.e2g-inline-comment { padding-top: 12px; border-top: 1px solid rgba(16,35,33,.1); }
.e2g-inline-comment.is-reply { margin: 14px 0 0 20px; padding-left: 12px; border-left: 2px solid var(--e2g-inline-mint); }
.e2g-inline-comment-meta { margin: 0 0 7px; color: var(--e2g-inline-muted); font-size: .72rem; }
.e2g-inline-comment-text { margin: 0; font-size: .9rem; line-height: 1.6; }
.e2g-inline-reply { margin-top: 8px; padding: 0; border: 0; color: var(--e2g-inline-ink); background: transparent; cursor: pointer; font-weight: 700; }
.e2g-inline-empty { color: var(--e2g-inline-muted); }
.e2g-inline-unanchored { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(16,35,33,.14); }
.e2g-inline-unanchored h3 { font: 500 1.15rem/1.2 Georgia, serif; }

.e2g-inline-form { margin-bottom: 24px; padding: 18px; border: 1px solid rgba(16,35,33,.13); border-radius: 14px; background: #fff; }
.e2g-inline-form h3 { margin: 0 0 12px; font: 500 1.25rem/1.2 Georgia, serif; }
.e2g-inline-form blockquote { margin: 0 0 16px; color: var(--e2g-inline-muted); font-size: .82rem; }
.e2g-inline-form label { display: block; margin: 0 0 13px; font-size: .76rem; font-weight: 700; }
.e2g-inline-form input, .e2g-inline-form textarea { box-sizing: border-box; display: block; width: 100%; margin-top: 5px; padding: 10px 11px; border: 1px solid rgba(16,35,33,.2); border-radius: 8px; background: #fff; font: 400 .92rem/1.4 inherit; }
.e2g-inline-form small { display: block; margin-top: 4px; color: var(--e2g-inline-muted); font-weight: 400; }
.e2g-inline-form button[type="submit"] { padding: 10px 15px; border: 0; border-radius: 999px; color: #fff; background: var(--e2g-inline-ink); cursor: pointer; font-weight: 700; }
.e2g-inline-form-status { margin: 10px 0 0; color: var(--e2g-inline-muted); font-size: .78rem; }
.e2g-inline-honey { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

@media (max-width: 800px) {
  .e2g-inline-toolbar { margin-bottom: 22px; }
  .e2g-inline-mode { background: #fff0ea; }
  .e2g-inline-drawer { top: auto; bottom: 0; width: 100%; height: min(70dvh, 680px); box-sizing: border-box; border-radius: 22px 22px 0 0; transform: translateY(105%); }
  .e2g-inline-drawer.is-open { transform: translateY(0); }
  .e2g-inline-reply, .e2g-inline-form, .e2g-inline-add { display: none !important; }
  .e2g-inline-highlight { background: linear-gradient(transparent 76%, rgba(172,217,202,.65) 76%); }
}

@media (prefers-reduced-motion: reduce) {
  .e2g-inline-drawer { transition: none; }
}