style.css

/* lobster.js default style — minimal and readable */

:root {
  --lbs-font: system-ui, -apple-system, sans-serif;
  --lbs-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --lbs-color: #1a1a1a;
  --lbs-muted: #6b7280;
  --lbs-link: #2563eb;
  --lbs-code-bg: #f3f4f6;
  --lbs-border: #e5e7eb;
  --lbs-blockquote-border: #d1d5db;
}

#content {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  font-family: var(--lbs-font);
  color: var(--lbs-color);
  line-height: 1.7;
}

/* Headings */
.lbs-heading-1 { font-size: 2em; font-weight: 700; margin: 1.5em 0 0.5em; }
.lbs-heading-2 { font-size: 1.5em; font-weight: 600; margin: 1.4em 0 0.4em; border-bottom: 1px solid var(--lbs-border); padding-bottom: 0.3em; }
.lbs-heading-3 { font-size: 1.25em; font-weight: 600; margin: 1.3em 0 0.3em; }
.lbs-heading-4 { font-size: 1em;    font-weight: 600; margin: 1.2em 0 0.3em; }
.lbs-heading-5 { font-size: 0.9em;  font-weight: 600; margin: 1.1em 0 0.2em; }
.lbs-heading-6 { font-size: 0.85em; font-weight: 600; margin: 1em 0 0.2em; color: var(--lbs-muted); }

/* Paragraph */
.lbs-paragraph { margin: 0.75em 0; }

/* Inline */
.lbs-emphasis    { font-style: italic; }
.lbs-strong      { font-weight: 700; }
.lbs-strikethrough { text-decoration: line-through; color: var(--lbs-muted); }
.lbs-code-span   { font-family: var(--lbs-mono); font-size: 0.875em; background: var(--lbs-code-bg); padding: 0.1em 0.4em; border-radius: 3px; }

/* Horizontal rule */
.lbs-hr { border: none; border-top: 1px solid var(--lbs-border); margin: 2em 0; }

/* Code block */
.lbs-code-block  { margin: 1em 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--lbs-border); }
.lbs-code-block pre { margin: 0; padding: 1em; background: var(--lbs-code-bg); overflow-x: auto; }
.lbs-code-block code { font-family: var(--lbs-mono); font-size: 0.875em; }
.lbs-code-filename { font-family: var(--lbs-mono); font-size: 0.75em; padding: 0.3em 1em; background: var(--lbs-border); color: var(--lbs-muted); }

/* Blockquote */
.lbs-blockquote { margin: 1em 0; padding: 0.5em 1em; border-left: 4px solid var(--lbs-blockquote-border); color: var(--lbs-muted); }
.lbs-blockquote .lbs-paragraph { margin: 0.25em 0; }

/* Lists */
.lbs-ul, .lbs-ol { margin: 0.5em 0; padding-left: 1.8em; }
.lbs-list-item   { margin: 0.2em 0; }
.lbs-ul .lbs-ul, .lbs-ul .lbs-ol,
.lbs-ol .lbs-ul, .lbs-ol .lbs-ol { margin: 0.2em 0; }

/* Checkbox */
.lbs-checkbox    { margin-right: 0.4em; }

/* Table */
.lbs-table       { border-collapse: collapse; width: 100%; margin: 1em 0; }
.lbs-table th,
.lbs-table td    { border: 1px solid var(--lbs-border); padding: 0.5em 0.75em; text-align: left; }
.lbs-table th    { background: var(--lbs-code-bg); font-weight: 600; }

/* Silent table — used as a layout grid */
.lbs-table-silent { table-layout: fixed; width: 100%; }
.lbs-table-silent th,
.lbs-table-silent td { border: none; background: none; font-weight: normal; vertical-align: top; padding: 0.5rem 1.5rem 0.5rem 0; }
.lbs-table-silent th:last-child,
.lbs-table-silent td:last-child { padding-right: 0; }

/* Image */
.lbs-image       { max-width: 100%; }

/* Header / Footer */
.lbs-header      { position: relative; padding: 1rem 0; margin-bottom: 2rem; border-bottom: 2px solid var(--lbs-border); }
.lbs-header .lbs-heading-1 .lbs-image { vertical-align: middle; margin-right: 0.4rem; }
.lbs-footer      { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--lbs-border); color: var(--lbs-muted); font-size: 0.9em; }

/* Language toggle / Theme selector (injected by index.html) */
.lbs-header-controls {
  position: absolute; top: 1rem; right: 0;
  display: flex; align-items: center; gap: 0.5rem;
}
.lbs-lang-toggle {
  font-size: 0.85em; color: var(--lbs-link);
  text-decoration: none; border: 1px solid var(--lbs-border);
  border-radius: 4px; padding: 0.2em 0.6em; line-height: 1.4;
}
.lbs-lang-toggle:hover { background: var(--lbs-code-bg); }
.lbs-theme-select {
  font-size: 0.85em; color: var(--lbs-link);
  border: 1px solid var(--lbs-border); border-radius: 4px;
  padding: 0.2em 0.4em; background: transparent; cursor: pointer; line-height: 1.4;
}
.lbs-theme-select:hover { background: var(--lbs-code-bg); }

/* Details */
.lbs-details     { margin: 1em 0; border: 1px solid var(--lbs-border); border-radius: 6px; padding: 0.5em 1em; }
.lbs-summary     { cursor: pointer; font-weight: 600; padding: 0.25em 0; }

/* Footnotes */
.lbs-footnote-ref a { font-size: 0.8em; vertical-align: super; text-decoration: none; color: var(--lbs-link); }
.lbs-footnotes   { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--lbs-border); font-size: 0.9em; }
.lbs-footnotes ol { padding-left: 1.5em; }
.lbs-footnote-item { margin: 0.3em 0; color: var(--lbs-muted); }

/* Links */
a { color: var(--lbs-link); }
a:hover { text-decoration: underline; }