@lelouchhe/webagent 0.3.0 → 0.5.1

package/dist/styles.00xfh3e6.css

@@ -0,0 +1,1848 @@
+:root {
+  --bg: #0d1117;
+  --surface: #161b22;
+  --border: #30363d;
+  --text: #c9d1d9;
+  --text-dim: #6e7681;
+  --accent: #58a6ff;
+  --green: #3fb950;
+  --yellow: #d29922;
+  --red: #f85149;
+  --blue: #58a6ff;
+  --radius: 4px;
+  --user-bg: #1e3a5f;
+  --code-bg: #0d2818;
+  --permission-bg: #1c1305;
+  --permission-title: #d29922;
+  --accent-soft: rgba(88, 166, 255, 0.18);
+  --user-image-max-width: 200px;
+  --user-image-max-height: 150px;
+}
+[data-theme="light"] {
+  --bg: #ffffff;
+  --surface: #f6f8fa;
+  --border: #d0d7de;
+  --text: #1f2328;
+  --text-dim: #656d76;
+  --accent: #0969da;
+  --green: #1a7f37;
+  --yellow: #9a6700;
+  --red: #cf222e;
+  --blue: #0969da;
+  --user-bg: #ddf4ff;
+  --code-bg: #f0faf0;
+  --permission-bg: #fff4cc;
+  --permission-title: #7a4f00;
+  --accent-soft: rgba(9, 105, 218, 0.14);
+}
+@media (prefers-color-scheme: light) {
+  [data-theme="auto"] {
+    --bg: #ffffff;
+    --surface: #f6f8fa;
+    --border: #d0d7de;
+    --text: #1f2328;
+    --text-dim: #656d76;
+    --accent: #0969da;
+    --green: #1a7f37;
+    --yellow: #9a6700;
+    --red: #cf222e;
+    --blue: #0969da;
+    --user-bg: #ddf4ff;
+    --code-bg: #f0faf0;
+    --permission-bg: #fff4cc;
+    --permission-title: #7a4f00;
+    --accent-soft: rgba(9, 105, 218, 0.14);
+  }
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+body {
+  font-family: "SF Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
+  background: var(--bg);
+  color: var(--text);
+  height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  font-size: 16px;
+}
+
+/* Header */
+#header {
+  padding: 6px 16px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+  font-size: 15px;
+}
+#header .logo {
+  font-weight: bold;
+  color: var(--green);
+}
+.header-side {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+}
+.header-left {
+  justify-content: flex-start;
+}
+.header-right {
+  justify-content: flex-end;
+  gap: 12px;
+}
+#header .status {
+  color: var(--text-dim);
+}
+#status {
+  width: 12px;
+  height: 12px;
+  display: inline-block;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background: transparent;
+}
+#status.is-disconnected {
+  background: var(--red);
+  border-color: var(--red);
+}
+#status.is-connected {
+  background: var(--green);
+  border-color: var(--green);
+}
+#status.is-connecting {
+  border-color: var(--yellow);
+  animation: status-pulse 1.2s ease-in-out infinite;
+}
+@keyframes status-pulse {
+  0%,
+  100% {
+    background: transparent;
+    opacity: 0.9;
+  }
+  50% {
+    background: var(--yellow);
+    opacity: 1;
+  }
+}
+#session-info {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+  width: 100%;
+  text-align: center;
+}
+#theme-btn {
+  background: transparent;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 15px;
+  font-family: inherit;
+  padding: 2px 6px;
+}
+#theme-btn:hover {
+  color: var(--text);
+}
+@media (max-width: 640px) {
+  #header {
+    display: flex;
+    gap: 8px;
+  }
+  .header-left,
+  .header-right {
+    flex: 0 0 auto;
+  }
+  .header-right {
+    margin-left: auto;
+  }
+  #session-info {
+    flex: 1 1 auto;
+    text-align: left;
+  }
+}
+
+/* Messages */
+#messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+#messages > * {
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: break-word;
+}
+.msg {
+  padding: 8px 14px;
+  line-height: 1.6;
+  font-size: 16px;
+  overflow-wrap: break-word;
+}
+.msg.user {
+  background: var(--user-bg);
+  border-left: 3px solid var(--accent);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  margin: 8px 0 4px 0;
+  font-weight: 500;
+}
+.msg.user::before {
+  content: "▶ ";
+  color: var(--accent);
+  font-weight: bold;
+}
+.msg.assistant {
+  padding: 4px 14px;
+}
+.msg.assistant pre {
+  background: none;
+  padding: 8px 14px;
+  overflow-x: auto;
+  margin: 0;
+  font-size: 15px;
+  border-radius: 0;
+}
+.msg.assistant code {
+  font-family: "SF Mono", "Fira Code", monospace;
+  font-size: 15px;
+}
+
+/* Code block wrapper — aligned with prompt/permission/thinking style */
+.code-block-wrapper {
+  margin: 8px -14px;
+  background: var(--code-bg);
+  border-left: 3px solid var(--green);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  position: relative;
+  overflow: hidden;
+}
+.code-block-wrapper pre {
+  margin: 0;
+  padding: 8px 14px;
+}
+.code-block-wrapper pre code,
+.code-block-wrapper pre code.hljs {
+  background: none;
+  padding: 0;
+}
+.code-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 2px 6px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  font-size: 12px;
+  color: var(--text-dim);
+  gap: 8px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.code-block-wrapper:hover .code-toolbar {
+  opacity: 1;
+}
+.copy-btn {
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  min-width: 28px;
+  height: 22px;
+  padding: 0 4px;
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition:
+    color 0.15s,
+    border-color 0.15s;
+}
+.copy-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+.copy-btn.copied {
+  color: var(--green);
+  border-color: var(--green);
+}
+.msg.assistant p {
+  margin: 4px 0;
+}
+.msg.assistant ul,
+.msg.assistant ol {
+  padding-left: 20px;
+  margin: 4px 0;
+}
+.msg.assistant table {
+  border-collapse: collapse;
+  margin: 8px 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1.5;
+  display: block;
+  overflow-x: auto;
+  max-width: 100%;
+}
+.msg.assistant th,
+.msg.assistant td {
+  border: 1px solid var(--border);
+  padding: 5px 12px;
+  text-align: left;
+  vertical-align: top;
+}
+.msg.assistant th {
+  color: var(--green);
+  border-color: var(--green);
+  font-weight: normal;
+}
+
+/* Thinking */
+.thinking {
+  color: var(--text-dim);
+  font-style: italic;
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 2px solid var(--border);
+}
+.thinking summary {
+  cursor: pointer;
+}
+.thinking-content {
+  cursor: default;
+}
+.thinking summary.active {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+/* Inbox message card — same collapsible feel as .thinking but with accent. */
+.message {
+  color: var(--text);
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 2px solid var(--accent-muted, var(--accent));
+  margin: 6px 0;
+}
+.message summary {
+  cursor: pointer;
+  color: var(--text-dim);
+  font-size: 13px;
+  font-style: italic;
+}
+.message-content {
+  cursor: default;
+  margin-top: 4px;
+}
+
+/* Waiting indicator (after user sends, before first response) */
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.3;
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}
+#waiting {
+  padding: 6px 14px;
+  color: var(--text-dim);
+  font-size: 15px;
+}
+#waiting .cursor {
+  animation: blink 1s step-end infinite;
+}
+
+/* System messages */
+.system-msg {
+  font-size: 15px;
+  padding: 2px 14px;
+  color: var(--text-dim);
+  white-space: pre-wrap;
+}
+.system-msg a {
+  color: var(--accent);
+  text-decoration: underline;
+  word-break: break-all;
+}
+.system-msg a:hover {
+  color: var(--text);
+}
+
+/* Tool calls */
+.tool-call {
+  font-size: 15px;
+  padding: 2px 14px;
+  color: var(--text-dim);
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.tool-call .icon {
+  margin-right: 4px;
+}
+.tool-call.completed {
+  color: var(--green);
+  animation: none;
+}
+.tool-call.failed {
+  color: var(--red);
+  animation: none;
+}
+.tool-call {
+  cursor: pointer;
+}
+.tool-call .tc-detail {
+  display: block;
+  color: var(--text-dim);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+.tool-call .tc-detail.expanded {
+  white-space: pre-wrap;
+  overflow: visible;
+  text-overflow: unset;
+}
+.tool-call details {
+  margin-top: 2px;
+}
+.tool-call details summary {
+  cursor: pointer;
+  color: var(--text-dim);
+}
+.tool-call .tc-content {
+  margin: 4px 0 4px 16px;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 14px;
+  white-space: pre-wrap;
+  max-height: 200px;
+  overflow-y: auto;
+  color: var(--text);
+  cursor: default;
+}
+.tool-call .tc-summary {
+  margin: 4px 0 4px 16px;
+  font-size: 14px;
+  color: var(--text);
+}
+
+/* Diff view for edit tool calls */
+.diff-view {
+  margin: 4px 0 4px 16px;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 300px;
+  overflow-y: auto;
+  line-height: 1.4;
+  cursor: default;
+}
+.diff-view .diff-file {
+  color: var(--blue);
+  font-weight: bold;
+}
+.diff-view .diff-hunk {
+  color: var(--text-dim);
+}
+.diff-view .diff-del {
+  color: var(--red);
+}
+.diff-view .diff-add {
+  color: var(--green);
+}
+
+/* Plan */
+.plan {
+  font-size: 15px;
+  padding: 6px 14px;
+  border-left: 3px solid var(--blue);
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+.plan-summary {
+  color: var(--blue);
+  font-weight: bold;
+  margin-bottom: 2px;
+  cursor: pointer;
+}
+.plan-counts {
+  color: var(--text-dim);
+  font-weight: normal;
+  margin-left: 14px;
+}
+.plan-entries {
+  margin-top: 2px;
+}
+.plan-entry {
+  padding: 1px 0;
+}
+
+/* Permission dialog */
+.permission {
+  background: var(--permission-bg);
+  border-left: 3px solid var(--yellow);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  padding: 8px 14px;
+  font-size: 15px;
+}
+.permission .title {
+  color: var(--permission-title);
+  font-weight: bold;
+  margin-bottom: 6px;
+}
+.permission button {
+  margin: 2px 4px 2px 0;
+  padding: 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--text);
+  cursor: pointer;
+  font-size: 14px;
+  font-family: inherit;
+}
+.permission button:hover {
+  background: var(--surface);
+}
+.permission button.allow {
+  border-color: var(--green);
+}
+.permission button.deny {
+  border-color: var(--red);
+}
+
+/* Bash command output */
+.bash-block {
+  margin: 2px 0;
+  padding: 2px 14px;
+  font-size: 15px;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.bash-block .bash-cmd {
+  color: var(--green);
+  font-family: monospace;
+  font-size: 14px;
+  cursor: pointer;
+  overflow-wrap: break-word;
+}
+.bash-block .bash-cmd::before {
+  content: "$ ";
+  color: var(--text-dim);
+}
+.bash-block .bash-cmd.running {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+.bash-block .bash-output {
+  margin: 4px 0 4px 0;
+  padding: 6px 10px;
+  background: var(--code-bg);
+  border-radius: var(--radius);
+  font-size: 13px;
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
+  max-height: 400px;
+  overflow-y: auto;
+  color: var(--text);
+  line-height: 1.4;
+  display: none;
+}
+.bash-block .bash-output.has-content {
+  display: block;
+}
+.bash-block .bash-output .stderr {
+  color: var(--red);
+}
+.bash-block .bash-exit {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-left: 8px;
+}
+.bash-block .bash-exit.ok {
+  color: var(--green);
+}
+.bash-block .bash-exit.fail {
+  color: var(--red);
+}
+
+/* Input */
+#input-area {
+  position: relative;
+  padding: 8px 16px 4px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  transition: border-color 0.15s;
+}
+#input-area.bash-mode {
+  border-top: 2px solid #e8872b;
+}
+#input-area.bash-mode #input-prompt {
+  --prompt-color: #e8872b;
+  color: var(--prompt-color);
+}
+#input-area.bash-mode #input {
+  color: #e8872b;
+}
+#input-area.plan-mode {
+  border-top: 2px solid var(--green);
+}
+#input-area.plan-mode #input-prompt {
+  --prompt-color: var(--green);
+  color: var(--prompt-color);
+}
+#input-area.plan-mode #mode-pill {
+  color: var(--green);
+}
+#input-area.autopilot-mode {
+  border-top: 2px solid var(--red);
+}
+#input-area.autopilot-mode #input-prompt {
+  --prompt-color: var(--red);
+  color: var(--prompt-color);
+}
+#input-area.autopilot-mode #mode-pill {
+  color: var(--red);
+}
+#input-area.preview-mode {
+  border-top: 2px solid var(--blue);
+}
+#input-area.preview-mode #input-prompt {
+  --prompt-color: var(--blue);
+  color: var(--prompt-color);
+}
+#input-area.preview-mode #mode-pill {
+  color: var(--blue);
+}
+/* Mode pill: JS writes the actual mode name (#plan, autopilot, default,
+   acceptEdits, etc.) into textContent. The :empty selector hides the
+   element when there's no mode to show (e.g. before configOptions land).
+   Color comes from the bucket-specific rules above; default is dim. */
+#mode-pill {
+  position: absolute;
+  top: -7px;
+  left: 16px;
+  font-size: 10px;
+  line-height: 1;
+  padding: 0 4px;
+  background: var(--bg);
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+#mode-pill:empty {
+  display: none;
+}
+#status-bar {
+  display: flex;
+  padding: 0 16px 10px;
+  background: var(--bg);
+  color: var(--text-dim);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
+  user-select: none;
+}
+#status-bar::before {
+  content: "\200b";
+}
+#status-bar .status-cwd {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+}
+#input-prompt {
+  --prompt-color: var(--text);
+  color: var(--prompt-color);
+  font-weight: bold;
+  user-select: none;
+  line-height: 1.5;
+  cursor: pointer;
+}
+#input-prompt::before {
+  content: "❯ ";
+}
+#input-prompt.busy::before {
+  content: "⠋ ";
+  animation: spinner 0.8s steps(1) infinite;
+}
+#input {
+  flex: 1;
+  background: transparent;
+  color: var(--text);
+  border: none;
+  padding: 4px 8px;
+  font-size: 16px;
+  font-family: inherit;
+  resize: none;
+  min-height: 28px;
+  max-height: 200px;
+  line-height: 1.5;
+}
+#input:focus {
+  outline: none;
+}
+.input-btn {
+  background: transparent;
+  color: var(--text-dim);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 34px;
+  height: 28px;
+  padding: 0 6px;
+  font-size: 14px;
+  font-family: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  flex: 0 0 auto;
+}
+.input-btn:hover {
+  color: var(--text);
+  border-color: var(--text-dim);
+}
+#send-btn.cancel {
+  color: var(--red);
+  border-color: var(--red);
+  font-weight: bold;
+}
+#send-btn.cancel:hover,
+#send-btn.cancel:focus,
+#send-btn.cancel:active {
+  color: var(--red);
+  border-color: var(--red);
+}
+.input-btn.publish {
+  color: var(--blue);
+  border-color: var(--blue);
+  font-weight: bold;
+}
+.input-btn.publish:hover,
+.input-btn.publish:focus,
+.input-btn.publish:active {
+  color: var(--blue);
+  border-color: var(--blue);
+}
+#input-area.preview-mode #input {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+@keyframes spinner {
+  0% {
+    content: "⠋";
+  }
+  10% {
+    content: "⠙";
+  }
+  20% {
+    content: "⠹";
+  }
+  30% {
+    content: "⠸";
+  }
+  40% {
+    content: "⠼";
+  }
+  50% {
+    content: "⠴";
+  }
+  60% {
+    content: "⠦";
+  }
+  70% {
+    content: "⠧";
+  }
+  80% {
+    content: "⠇";
+  }
+  90% {
+    content: "⠏";
+  }
+}
+
+/* Slash command autocomplete */
+#slash-menu {
+  display: none;
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-bottom: none;
+  max-height: 220px;
+  overflow-y: auto;
+  z-index: 10;
+}
+#slash-menu.active {
+  display: block;
+}
+
+.slash-item {
+  padding: 6px 6px;
+  cursor: pointer;
+  font-size: 15px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: max-content;
+  min-width: 100%;
+  box-sizing: border-box;
+}
+.slash-item:hover,
+.slash-item.selected {
+  background: var(--accent-soft);
+}
+
+.slash-row-l1 {
+  display: grid;
+  grid-template-columns: 1ch auto 1fr;
+  align-items: baseline;
+  gap: 4px;
+  min-width: 100%;
+}
+.slash-row-l2 {
+  grid-column: 2 / -1;
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  color: var(--text-dim);
+  font-size: 12px;
+  line-height: 1.4;
+  padding-left: calc(4ch + 4px);
+  min-width: 100%;
+}
+
+.slash-prefix {
+  display: inline-block;
+  width: 1ch;
+  text-align: center;
+  user-select: none;
+  flex: 0 0 auto;
+}
+.slash-primary {
+  font-weight: bold;
+  white-space: nowrap;
+}
+.slash-menu-root .slash-primary {
+  min-width: 7ch;
+}
+.slash-current {
+  color: var(--green);
+}
+.slash-secondary {
+  color: var(--text-dim);
+  white-space: nowrap;
+  margin-left: 1ch;
+}
+.slash-path {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  direction: rtl;
+  text-align: left;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.slash-path-secondary {
+  white-space: nowrap;
+  flex: 0 0 auto;
+}
+
+.slash-separator {
+  height: 1px;
+  background: var(--border);
+  opacity: 0.5;
+  margin: 4px 0;
+}
+.slash-placeholder {
+  color: var(--text-dim);
+  font-style: italic;
+}
+.slash-placeholder:hover,
+.slash-placeholder.selected {
+  background: transparent;
+  cursor: default;
+}
+
+/* Image attach */
+#attach-preview {
+  display: none;
+  padding: 4px 16px;
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+#attach-preview.active {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.attach-thumb {
+  position: relative;
+  display: inline-block;
+}
+.attach-thumb img {
+  max-height: 60px;
+  max-width: 120px;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.attach-thumb.attach-file {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 12px;
+  color: var(--fg);
+  background: var(--bg-alt, transparent);
+  max-width: 200px;
+}
+.attach-thumb.attach-file .attach-file-name {
+  display: inline-block;
+  max-width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+.attach-thumb .remove {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background: var(--red);
+  color: #fff;
+  border: none;
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  font-size: 10px;
+  line-height: 16px;
+  text-align: center;
+  cursor: pointer;
+  padding: 0;
+}
+.msg.user img.user-image {
+  max-width: var(--user-image-max-width);
+  max-height: var(--user-image-max-height);
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  display: block;
+  margin-top: 4px;
+  cursor: zoom-in;
+}
+.msg.user a.user-file {
+  display: inline-block;
+  margin-top: 4px;
+  padding: 2px 6px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--accent);
+  text-decoration: none;
+  font-family: monospace;
+  font-size: 0.9em;
+}
+.msg.user a.user-file:hover {
+  text-decoration: underline;
+}
+
+/* Image lightbox overlay */
+#lightbox-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+  visibility: hidden;
+  pointer-events: none;
+}
+#lightbox-overlay.active {
+  visibility: visible;
+  pointer-events: auto;
+}
+#lightbox-overlay img {
+  max-width: 90vw;
+  max-height: 90vh;
+  border-radius: 6px;
+  cursor: default;
+}
+
+/* History pagination sentinel */
+.history-sentinel {
+  text-align: center;
+  padding: 8px;
+  opacity: 0.5;
+  font-size: 0.85em;
+}
+
+/* Utility: dim out cancelled / settled / past states. Used in dynamic innerHTML
+   where inline `style="opacity:0.5"` would violate strict CSP `style-src 'self'`. */
+.dim {
+  opacity: 0.5;
+}
+
+/* --- Login page (extracted from login.html for CSP `style-src 'self'`) --- */
+body.login-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
+}
+.login-card {
+  width: 100%;
+  max-width: 480px;
+  padding: 2rem 1.5rem;
+  box-sizing: border-box;
+}
+.login-card h1 {
+  font-size: 1.2rem;
+  margin: 0 0 0.5rem;
+}
+.login-card p {
+  font-size: 0.9rem;
+  opacity: 0.75;
+  margin: 0 0 1.25rem;
+  line-height: 1.45;
+}
+.login-card input {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 0.95rem;
+  padding: 0.6rem;
+  border: 1px solid currentColor;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+}
+.login-card .error {
+  display: none;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #c0392b;
+  color: #c0392b;
+  border-radius: 4px;
+  font-size: 0.85rem;
+}
+.login-card button {
+  margin-top: 1rem;
+  width: 100%;
+  padding: 0.6rem;
+  font: inherit;
+  cursor: pointer;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  border-radius: 4px;
+}
+.login-card button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.login-card .hint {
+  font-size: 0.78rem;
+  opacity: 0.6;
+  margin-top: 1rem;
+}
+.login-card code {
+  background: rgba(127, 127, 127, 0.15);
+  padding: 0.1rem 0.35rem;
+  border-radius: 3px;
+}
+
+/* --- Math (Temml MathML output) --- */
+/* Block math is wrapped in <div class="math-block"> by the renderer.
+   Safari's overflow on <math> is broken — long equations escape the
+   element and push the parent's width, causing page-level horizontal
+   scroll. The wrapper div absorbs the overflow into a local scrollbar. */
+.math-block {
+  overflow-x: auto;
+  overflow-y: hidden;
+  max-width: 100%;
+}
+/* Long inline math: wrap in an inline-block box so it can carry its own
+   max-width + overflow-x without pushing page width. Applying these
+   directly to <math> doesn't work on WebKit. vertical-align: middle keeps
+   the formula visually centered with surrounding CJK/Latin text. */
+.math-inline {
+  display: inline-block;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  vertical-align: middle;
+}
+math:not(.tml-display) {
+  max-width: 100%;
+}
+/* When Temml fails to parse math, the renderer falls back to a span
+   containing the literal $...$ source (instead of Temml's red inline
+   error message, which breaks paragraph flow and pollutes copy/paste).
+   Styling is intentionally minimal — just dim text. We tried dotted /
+   wavy / dashed underlines and thicker custom strokes, but iOS Safari
+   silently drops non-solid text-decoration-style on inline spans
+   (WebKit bug #233181), and any solid/colored underline that *does*
+   render reads as "wrong" rather than "soft warning". The dim color
+   alone signals "something off here" without distracting from the
+   surrounding correct prose. The actual parse error is preserved in
+   the span's title attribute for desktop hover. */
+.math-error {
+  color: var(--text-dim);
+}
+
+/* --- highlight.js themes (vendored from highlight.js@common, BSD-3-Clause) --- */
+/* light: default */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub
+  Description: Light theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-light
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #24292e;
+  background: #ffffff
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #d73a49
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #6f42c1
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #005cc5
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #032f62
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #e36209
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #6a737d
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #22863a
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #24292e
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #005cc5;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #735c0f
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #24292e;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #24292e;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #22863a;
+  background-color: #f0fff4
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #b31d28;
+  background-color: #ffeef0
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+/* dark: explicit */
+[data-theme="dark"] {
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+}
+
+/* dark: auto + system prefers dark */
+@media (prefers-color-scheme: dark) {
+  [data-theme="auto"] {
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+.hljs {
+  color: #c9d1d9;
+  background: #0d1117
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-type,
+.hljs-variable.language_ {
+  /* prettylights-syntax-keyword */
+  color: #ff7b72
+}
+.hljs-title,
+.hljs-title.class_,
+.hljs-title.class_.inherited__,
+.hljs-title.function_ {
+  /* prettylights-syntax-entity */
+  color: #d2a8ff
+}
+.hljs-attr,
+.hljs-attribute,
+.hljs-literal,
+.hljs-meta,
+.hljs-number,
+.hljs-operator,
+.hljs-variable,
+.hljs-selector-attr,
+.hljs-selector-class,
+.hljs-selector-id {
+  /* prettylights-syntax-constant */
+  color: #79c0ff
+}
+.hljs-regexp,
+.hljs-string,
+.hljs-meta .hljs-string {
+  /* prettylights-syntax-string */
+  color: #a5d6ff
+}
+.hljs-built_in,
+.hljs-symbol {
+  /* prettylights-syntax-variable */
+  color: #ffa657
+}
+.hljs-comment,
+.hljs-code,
+.hljs-formula {
+  /* prettylights-syntax-comment */
+  color: #8b949e
+}
+.hljs-name,
+.hljs-quote,
+.hljs-selector-tag,
+.hljs-selector-pseudo {
+  /* prettylights-syntax-entity-tag */
+  color: #7ee787
+}
+.hljs-subst {
+  /* prettylights-syntax-storage-modifier-import */
+  color: #c9d1d9
+}
+.hljs-section {
+  /* prettylights-syntax-markup-heading */
+  color: #1f6feb;
+  font-weight: bold
+}
+.hljs-bullet {
+  /* prettylights-syntax-markup-list */
+  color: #f2cc60
+}
+.hljs-emphasis {
+  /* prettylights-syntax-markup-italic */
+  color: #c9d1d9;
+  font-style: italic
+}
+.hljs-strong {
+  /* prettylights-syntax-markup-bold */
+  color: #c9d1d9;
+  font-weight: bold
+}
+.hljs-addition {
+  /* prettylights-syntax-markup-inserted */
+  color: #aff5b4;
+  background-color: #033a16
+}
+.hljs-deletion {
+  /* prettylights-syntax-markup-deleted */
+  color: #ffdcd7;
+  background-color: #67060c
+}
+.hljs-char.escape_,
+.hljs-link,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+  
+}
+  }
+}
+
+/* --- Temml (LaTeX → MathML rendering, MIT) --- */
+/*
+Temml.woff2 is a clone of KaTeX_Script-Regular, except that the code points
+have been changed from ASCII to Unicode Mathematical Alphanumeric Symbols Script capitals,
+Unicode range 1D49C to 1D4B5.
+*/
+
+@font-face {
+  font-family: 'Temml';
+  src: url('/fonts/temml/Temml.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+math {
+  font-family: "Cambria Math", 'STIXTwoMath-Regular', 'NotoSansMath-Regular', math;
+  font-style: normal;
+  font-weight: normal;
+  line-height: normal;
+  font-size-adjust: none;
+  text-indent: 0;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  direction: ltr;
+  /* Prevent Firefox from omitting the dot on i or j. */
+  font-feature-settings: "dtls" off;
+}
+
+math * {
+  border-color: currentColor;
+}
+
+/* display: block is necessary in Firefox and Safari.
+ * Not in Chromium, which recognizes display: "block math" written inline. */
+ math.tml-display {
+  display: block;
+  width: 100%;
+}
+
+*.mathcal {
+  /* NotoSans */
+  font-feature-settings: 'ss01';
+}
+
+math .mathscr {
+  font-family: "Temml";
+}
+
+mo.tml-prime {
+  font-family: Temml;
+}
+
+/* Cramped superscripts in WebKit */
+mfrac > :nth-child(2),
+msqrt,
+mover > :first-child {
+  math-shift: compact
+}
+
+.menclose {
+  display: inline-block;
+  position: relative;
+  padding: 0.5ex 0ex;
+}
+.tml-cancelto {
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 0.5ex 0ex;
+  background-color: currentColor;
+  /* Use the SVG as an alpha mask (painted by background-color) */
+  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker></defs><line x2='100%25' y1='100%25' stroke='black' stroke-width='.06em' marker-end='url(%23a)' vector-effect='non-scaling-stroke'/></svg>");
+          mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><defs><marker id='a' markerHeight='5' markerUnits='strokeWidth' markerWidth='7' orient='auto' refX='7' refY='2.5'><path fill='black' d='m0 0 7 2.5L0 5z'/></marker></defs><line x2='100%25' y1='100%25' stroke='black' stroke-width='.06em' marker-end='url(%23a)' vector-effect='non-scaling-stroke'/></svg>");
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+          mask-size: 100% 100%;
+  -webkit-mask-position: 0 0;
+          mask-position: 0 0;
+}
+
+@supports (-moz-appearance: none) {
+  /* \vec w/o italic correction for Firefox */
+  .tml-vec {
+    transform: scale(0.75)
+  }
+  /* Fix \cancelto in Firefox */
+  .ff-narrow {
+    width: 0em;
+  }
+  .ff-nudge-left {
+    margin-left: -0.2em;
+  }
+}
+
+@supports (not (-moz-appearance: none)) {
+  /* Chromium and WebKit */
+  /* prime vertical alignment */
+  mo.tml-prime {
+    font-family: Temml;
+  }
+  /* Italic correction on superscripts */
+  .tml-sml-pad {
+    padding-left: 0.05em;
+  }
+  .tml-med-pad {
+    padding-left: 0.10em;
+  }
+  .tml-lrg-pad {
+    padding-left: 0.15em;
+  }
+}
+
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  /* WebKit vertical & italic correction on accents */
+  .wbk-acc {
+    /* lower by x-height distance */
+    transform: translate(0em, 0.431em);
+  }
+  .wbk-sml {
+    transform: translate(0.07em, 0);
+  }
+  .wbk-sml-acc {
+    transform: translate(0.07em, 0.431em);
+  }
+  .wbk-sml-vec {
+    transform: scale(0.75) translate(0.07em, 0);
+  }
+  .wbk-med {
+    transform: translate(0.14em, 0);
+  }
+  .wbk-med-acc {
+    transform: translate(0.14em, 0.431em);
+  }
+  .wbk-med-vec {
+    transform: scale(0.75) translate(0.14em, 0);
+  }
+  .wbk-lrg {
+    transform: translate(0.21em, 0);
+  }
+  .wbk-lrg-acc {
+    transform: translate(0.21em, 0.431em);
+  }
+  .wbk-lrg-vec {
+    transform: scale(0.75) translate(0.21em, 0);
+  }
+}
+
+/* \cancel & \phase use background images. Get them to print. */
+menclose {
+  -webkit-print-color-adjust: exact;  /* Chrome & Edge */
+          print-color-adjust: exact;
+}
+
+/* Array cell justification in Firefox & WebKit */
+.tml-right {
+  text-align: right;
+}
+.tml-left {
+  text-align: left;
+}
+
+/* For CD labels that grow to the left in Firefox and WebKit */
+.tml-shift-left { margin-left:-200% }
+
+/* Styles for Chromium only */
+@supports (not (-webkit-backdrop-filter: blur(1px))) and (not (-moz-appearance: none)) {
+  /* Italic correction on accents */
+  .chr-sml {
+    transform: translate(0.07em, 0)
+  }
+  .chr-sml-vec {
+    transform: scale(0.75) translate(0.07em, 0)
+  }
+  .chr-med {
+    transform: translate(0.14em, 0)
+  }
+  .chr-med-vec {
+    transform: scale(0.75) translate(0.14em, 0)
+  }
+  .chr-lrg {
+    transform: translate(0.21em, 0)
+  }
+  .chr-lrg-vec {
+    transform: scale(0.75) translate(0.21em, 0)
+  }
+
+  /* For CD labels that grow to the left */
+  .tml-shift-left { margin-left:-100% }
+
+  /* MathML Core & Chromium do not support the MathML 3.0 element <menclose> attributes. */
+  /* So use styles. */
+  menclose {
+    position: relative;
+    padding: 0.5ex 0ex;
+  }
+  
+    .tml-overline {
+    padding: 0.1em 0 0 0;
+    border-top: 0.065em solid;
+  }
+
+  .tml-underline {
+    padding: 0 0 0.1em 0;
+    border-bottom: 0.065em solid;
+  }
+
+  .tml-cancel {
+    display: inline-block;
+    position: absolute;
+    left: 0.5px;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: currentColor;
+  }
+  .upstrike {
+    clip-path: polygon(0.05em 100%, 0em calc(100% - 0.05em), calc(100% - 0.05em) 0em, 100% 0.05em);
+  }
+  .downstrike {
+    clip-path: polygon(0em 0.05em, 0.05em 0em, 100% calc(100% - 0.05em), calc(100% - 0.05em) 100%);
+  }
+  .sout {
+    clip-path: polygon(0em calc(55% + 0.0333em), 0em calc(55% - 0.0333em), 100% calc(55% - 0.0333em), 100% calc(55% + 0.0333em));
+  }
+  .tml-xcancel {
+    clip-path: polygon(0.05em 0em, 0em 0.05em, calc(50% - 0.05em) 50%, 0em calc(100% - 0.05em), 0.05em 100%, 50% calc(50% + 0.05em), calc(100% - 0.05em) 100%, 100% calc(100% - 0.05em), calc(50% + 0.05em) 50%, 100% 0.05em, calc(100% - 0.05em) 0%, 50% calc(50% - 0.05em));
+  }
+
+  .longdiv-top {
+    border-top: 0.067em solid;
+    padding: 0.1em 0.2em 0.2em 0.433em;
+  }
+  .longdiv-arc {
+    position: absolute;
+    top: 0;
+    bottom: 0.1em;
+    left: -0.4em;
+    width: 0.7em;
+    border: 0.067em solid;
+    transform: translateY(-0.067em);
+    border-radius: 70%;
+    clip-path: inset(0 0 0 0.4em);
+    box-sizing: border-box;}
+    .menclose {display: inline-block;
+    text-align: left;
+    position: relative;
+  }
+  
+  .phasor-bottom {
+    border-bottom: 0.067em solid;
+    padding: 0.2em 0.2em 0.1em 0.6em;
+  }
+  .phasor-angle {
+    display: inline-block;
+    position: absolute;
+    left: 0.5px;
+    bottom: -0.04em;
+    height: 100%;
+    aspect-ratio: 0.5;
+    background-color: currentColor;
+    clip-path: polygon(0.05em 100%, 0em calc(100% - 0.05em), calc(100% - 0.05em) 0em, 100% 0.05em);
+  }
+
+  .tml-fbox {
+    padding: 3pt;
+    border: 1px solid;
+  }
+
+  .circle-pad {
+    padding: 0.267em;
+  }
+  .textcircle {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    border: 0.067em solid;
+    border-radius: 50%;
+   }
+
+   .actuarial {
+    padding: 0.03889em 0.03889em 0 0.03889em;
+    border-width: 0.08em 0.08em 0em 0em;
+    border-style: solid;
+    margin-right: 0.03889em;
+   }
+
+   /* Stretch \widetilde */
+  .tml-crooked-2 {
+    transform: scale(2.0, 1.1)
+  }
+  .tml-crooked-3 {
+    transform: scale(3.0, 1.3)
+  }
+  .tml-crooked-4 {
+    transform: scale(4.0, 1.4)
+  }
+  /* set array cell justification */
+  .tml-right {
+    text-align: -webkit-right;
+  }
+  .tml-left {
+    text-align: -webkit-left;
+  }
+}
+
+.special-fraction {
+  font-family: 'STIX TWO', 'Times New Roman', Times, Tinos, serif;
+}
+
+/* flex-wrap for line-breaking in Chromium */
+math {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+}
+math > mrow {
+  padding: 0.5ex 0ex;
+}
+
+/* Default mtd top padding is 0.5ex per MathML-Core and user-agent CSS */
+/* We adjust for jot and small */
+mtable.tml-jot mtd {
+  padding-top: 0.7ex;
+  padding-bottom: 0.7ex;
+}
+mtable.tml-small mtd {
+  padding-top: 0.35ex;
+  padding-bottom: 0.35ex;
+}
+
+/* Firefox */
+@-moz-document url-prefix() {
+  /* Avoid flex-wrap */
+  math { display: inline; }
+  math > mrow { padding: 0 }
+  /* Adjust Firefox spacing between array rows */
+  mtd, mtable.tml-small mtd { padding-top: 0; padding-bottom: 0; }
+  mtable.tml-jot mtd { padding-top: 0.2ex; padding-bottom: 0.ex; }
+}
+
+/* AMS environment auto-numbering via CSS counter. */
+.tml-eqn::before {
+  counter-increment: tmlEqnNo;
+  content: "(" counter(tmlEqnNo) ")";
+}
+
+body {
+  counter-reset: tmlEqnNo;
+}