/* Scolyer — scolyer.com
   One stylesheet for every page. Colours, type and component styles are
   copied from the app (scolyer/src/renderer/src/styles.css, light theme) so
   the site and the app read as one product: the warm paper palette, the
   system UI font for interface text and the Iowan Old Style serif for the
   wordmark, headings and manuscript text. No web fonts are loaded; like the
   app, the site uses the fonts already on the visitor's computer.
   The site is light only; there is deliberately no dark variant. */

:root {
  color-scheme: light;

  /* App palette (styles.css :root) */
  --paper: #fbfaf7;
  --bg: #f1efe9;
  --panel: #f7f5f0;
  --surface: #ffffff;
  --ink: #1f1d1a;
  --ink-soft: #5c5751;
  --muted: #8a847b;
  --line: #e0dbd1;
  --line-strong: #c9c2b5;
  --accent: #2f5d8a;
  --accent-strong: #27507a;
  --accent-soft: #e3ecf5;
  --on-accent: #ffffff;
  --warn: #b7791f;
  --warn-soft: #fbf1dc;
  --danger: #a33a2e;
  --danger-soft: #f8e4e1;
  --ok: #3b7a57;
  --ok-soft: #e2f1e8;
  --ok-ink: #1f5a3a;
  --comment: #fff1b8;
  --comment-active: #ffe066;
  --comment-edge: #e6c84a;
  --xref-bg: #eee9f7;
  --xref-ink: #6b3fa0;
  --code-bg: #f0eee8;
  --hover: rgba(0, 0, 0, 0.04);
  --radius: 8px;

  /* App type (styles.css --font-ui, --font-serif, --font-mono) */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 36rem;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 3rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Headings use the app's serif, as its wordmark and manuscript headings do. */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.55rem, 2.7vw, 2.05rem); }
h3 { font-size: 1.2rem; margin-bottom: 0.3em; }

p { margin: 0 0 1em; max-width: var(--measure); }
ul { padding-left: 1.2em; max-width: var(--measure); }
li { margin-bottom: 0.35em; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Header */

.site-head { background: var(--paper); }
.site-head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding-top: 1.2rem;
  padding-bottom: 0.4rem;
}

/* On computers the bar stays at the top while the page scrolls; on phones
   (and short landscape screens) it scrolls away to leave room for content. */
@media (min-width: 821px) and (min-height: 500px) {
  html { scroll-padding-top: 5.5rem; }
  .site-head {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--line);
  }
  .site-head-inner { padding-top: 0.8rem; padding-bottom: 0.8rem; }
}

/* The wordmark is the app's welcome-screen brand: the blue "S" tile and
   "Scolyer" in the serif. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  line-height: 1;
}
.wordmark:hover { color: var(--ink); }
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
}
.wordmark:hover .brand-mark { background: var(--accent-strong); }
.site-nav { display: flex; gap: 1.4rem; font-size: 0.95rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }

/* Hero */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: clamp(3rem, 7vw, 5rem);
}
.hero h1 { margin-bottom: clamp(2.25rem, 5vw, 4rem); text-wrap: balance; }
/* On anything wider than a tablet the heading is one line spanning the full
   width of the app window below it. The script at the end of index.html sets
   the exact size for the fonts on the visitor's computer; this size is the
   fallback without JavaScript. Below 821px it wraps at the normal size. */
@media (min-width: 821px) {
  .hero h1 {
    white-space: nowrap;
    font-size: min(3.35rem, 4.15vw);
    letter-spacing: -0.01em;
  }
}
.hero-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
}
.hero p.lede {
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34rem;
  margin: 0;
}
.hero .downloads { margin: 0; }
.hero .download-note { margin: 0.5rem 0 0; }
.app-window.hero-window { margin-top: clamp(2.5rem, 6vw, 4.5rem); }

/* Download buttons: the app's primary and secondary buttons, made larger. */

.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 0.6rem;
}
.download {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.7rem 1.2rem 0.75rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  border-radius: 6px;
  line-height: 1.2;
}
.download:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.download strong { font-size: 1.02rem; font-weight: 600; }
.download span { font-size: 0.84rem; opacity: 0.9; }
.download.secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.download.secondary:hover { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.download.secondary span { color: var(--muted); opacity: 1; }
.download-note { font-size: 0.92rem; color: var(--muted); }

/* Sections */

section {
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--line);
}

/* One feature per section: the claim and its detail on the left, a piece
   of the app on the right. */

.feature-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.feature-title {
  grid-column: 1 / -1;
  max-width: 26em;
  margin-bottom: 0.2em;
  text-wrap: balance;
}
.feature-text p { max-width: 34rem; }
.feature-text ul { margin: 0 0 1.1em; }
.feature-text li { padding-left: 0.2em; }
.feature-text li::marker { color: var(--accent); }

.shot-stack { display: grid; gap: 1.25rem; align-content: start; }

/* Privacy list */

.leaves { margin: 0; }
.leaves dt { font-weight: 600; margin-top: 1rem; }
.leaves dt:first-child { margin-top: 0; }
.leaves dd { margin: 0.15rem 0 0; color: var(--ink-soft); max-width: 32rem; }

/* Download section */

.requirements {
  border-top: 1px solid var(--line);
  max-width: var(--measure);
  margin-top: 1.4rem;
  font-size: 0.98rem;
}
.requirements div {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.requirements div > span:first-child { color: var(--muted); }

/* Footer */

.site-foot {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  padding-bottom: 2.4rem;
  font-size: 0.92rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
}
.site-foot a { color: var(--ink-soft); }
.site-foot a:hover { color: var(--ink); }

/* Prose pages (privacy, 404) */

.prose { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.prose h1 { margin-bottom: 0.3em; }
.prose .updated { color: var(--muted); margin-bottom: 2rem; }
.prose h2 { font-size: 1.35rem; margin-top: 2.2rem; }

/* ===================================================================
   Pictures of the app. Everything under .app is drawn with the app's own
   CSS rules and pixel sizes (14px interface text, 12px uppercase panel
   titles, 17px serif manuscript), so it looks like a screenshot and stays
   sharp. Text inside is decorative: each picture has an aria-label.
   =================================================================== */

.app {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: normal;
  color: var(--ink);
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.app p { margin: 0 0 10px; line-height: 1.5; max-width: none; }
.app ul, .app ol { max-width: none; }
.app li { margin: 0; }
.app h2 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; letter-spacing: 0; margin: 0; line-height: 1.3; }
.app h3 {
  font-family: var(--font-ui);
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.app h3:first-child { margin-top: 0; }
.app strong { font-weight: 600; }
.app .small { font-size: 12px; }
.app .muted { color: var(--muted); }
.app .grow { flex: 1; min-width: 0; }
.app .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.app .row.end { justify-content: flex-end; margin-top: 12px; }
.app .row.between { justify-content: space-between; }
.app code { font-family: var(--font-mono); font-size: 11.5px; }

/* Buttons (styles.css: button, button.primary, .ghost, .link, .small) */
.app .btn {
  display: inline-block;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 12px;
  white-space: nowrap;
  line-height: 1.2;
}
.app .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.app .btn.ghost { background: transparent; border-color: transparent; }
.app .btn.small { font-size: 12px; padding: 3px 8px; }
.app .link { color: var(--accent); }
.app .link.small { font-size: 12px; }

/* Pills (styles.css .pill and its states) */
.app .pill {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1.45;
  white-space: nowrap;
}
.app .pill.first { margin-left: 0; }
.app .pill.open, .app .pill.added { background: var(--ok-soft); color: var(--ok); }
.app .pill.warn, .app .pill.changed { background: var(--warn-soft); color: var(--warn); }
.app .pill.removed { background: var(--danger-soft); color: var(--danger); }
.app .pill.mark { font-weight: 600; background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* A select, drawn closed */
.app .select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}
.app .select::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: translateY(-2px) rotate(45deg);
  margin-left: 12px;
}
.app .journal-pick { margin-bottom: 12px; }

/* A window: the frame around a full-app picture */
.app-window {
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 24px 60px -30px rgba(40, 30, 10, 0.45);
}

/* Top bar (styles.css .topbar) */
.app .topbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px 10px 84px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.app .lights { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; gap: 8px; }
.app .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ed6a5e; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.app .lights i:nth-child(2) { background: #f5bf4f; }
.app .lights i:nth-child(3) { background: #61c554; }
.app .topbar-left, .app .topbar-center, .app .topbar-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app .topbar-right, .app .topbar-center { flex: none; }
.app .project-title { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.app .project-title strong, .app .project-title span { overflow: hidden; text-overflow: ellipsis; }
.app .status-dot { font-size: 12px; padding: 3px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); }

/* Workspace: outline, editor, right panel (styles.css .workspace) */
.app .workspace {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) 340px;
  height: 540px;
}
.app .sidebar {
  background: var(--panel);
  border-right: 1px solid var(--line);
  padding: 12px 10px;
  overflow: hidden;
}
.app .sidebar section { padding: 0; border: 0; margin-bottom: 16px; }
.app .sidebar h3 { margin: 0 0 4px; }
.app .outline-total { margin: 0 0 6px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.app .outline { list-style: none; margin: 0; padding: 0; }
.app .outline li {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 11.5px;
  line-height: 1.25;
  padding: 1px 0;
  color: var(--ink-soft);
  white-space: nowrap;
}
.app .outline li.lvl1 { color: var(--ink); font-weight: 500; }
.app .outline li.lvl2 { padding-left: 8px; }
.app .outline .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app .outline .w { color: var(--muted); font-size: 10.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.app .proposals { list-style: none; margin: 0; padding: 0; }
.app .proposals li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.35; }
.app .proposals .muted { margin-top: 2px; }

.app .editor-pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app .toolbar {
  display: flex;
  gap: 10px;
  padding: 6px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
}
.app .tb-group { display: flex; gap: 2px; flex: none; }
.app .tb { padding: 4px 8px; font-size: 12px; border-radius: 6px; border: 1px solid transparent; }
.app .tb.active { background: var(--accent-soft); color: var(--accent); }
.app .tb.b { font-weight: 700; }
.app .tb.i { font-style: italic; }
.app .editor-scroll { flex: 1; overflow: hidden; padding: 28px 24px 0; }
.app .page {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 44px 56px 64px;
  min-height: 100%;
  box-shadow: 0 1px 2px var(--hover);
}

/* The editor scrolled part-way down a manuscript: the page continues above
   the top of the window, so its top edge is not drawn. */
.app .editor-scroll:has(.page.scrolled) { padding-top: 0; }
.app .page.scrolled { border-top: 0; border-radius: 0 0 4px 4px; padding-top: 20px; }
.app .page.scrolled .h1 { margin-top: 1.4em; }

/* Manuscript text (styles.css .manuscript) */
.app .manuscript { font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--ink); }
.app .manuscript p { margin: 0 0 1em; line-height: 1.65; }
.app .manuscript .h1 { font-size: 1.6em; font-weight: 600; line-height: 1.25; margin: 0 0 0.5em; }
.app .manuscript .h2 { font-size: 1.3em; font-weight: 600; line-height: 1.25; margin: 1.2em 0 0.4em; }
.app .cite, .app .xref {
  display: inline;
  padding: 0 3px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.92em;
  white-space: nowrap;
}
.app .xref { background: var(--xref-bg); color: var(--xref-ink); }
.app .comment-mark { background: var(--comment-active); border-bottom: 2px solid var(--comment-edge); }

/* Right panel and its tabs (styles.css .right-panel, .tabs, .panel-body) */
.app .right-panel {
  background: var(--panel);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}
.app .tabs { display: flex; border-bottom: 1px solid var(--line); overflow: hidden; flex: none; }
.app .tabs span {
  flex: 1 0 auto;
  white-space: nowrap;
  padding: 10px 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
  text-align: center;
}
.app .tabs span.active { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.app .panel-body { padding: 14px; overflow: hidden; }

/* A right panel shown on its own, beside a feature */
.app-panel {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 20px 48px -30px rgba(40, 30, 10, 0.45);
}
.app-panel .right-panel { border-left: 0; }

/* A dialog shown on its own (styles.css .modal) */
.app-modal {
  margin: 0;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 20px 60px -24px rgba(0, 0, 0, 0.35);
}
.app .modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px 0; }
.app .modal-head .close { color: var(--ink-soft); font-size: 18px; line-height: 1; padding: 4px 8px; }
.app .modal-body { padding: 16px 20px 20px; }
.app .modal-body h3 { margin-top: 14px; }

/* Comments (styles.css .comment-card) */
.app .comment-card {
  border: 1px solid var(--comment-edge);
  box-shadow: 0 0 0 2px var(--comment);
  border-radius: var(--radius);
  padding: 10px;
  margin-bottom: 10px;
  background: var(--surface);
}
.app .comment-card.quiet { border-color: var(--line); box-shadow: none; }
.app .comment-card .quote { display: block; color: var(--accent); font-style: italic; font-size: 13px; margin-bottom: 4px; }
.app .comment-meta { margin-bottom: 4px; }
.app .comment-card p { margin-bottom: 0; }
.app .reply { margin: 8px 0 0 12px; padding-left: 8px; border-left: 2px solid var(--line); }

/* Checklist (styles.css .checklist) */
.app .checklist { list-style: none; padding: 0; margin: 0 0 16px; }
.app .checklist li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  align-items: flex-start;
}
.app .checklist .mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}
.app .checklist li.ok .mark { background: var(--ok-soft); color: var(--ok); }
.app .checklist li.warn .mark { background: var(--warn-soft); color: var(--warn); }
.app .checklist li.bad .mark { background: var(--danger-soft); color: var(--danger); }
.app .checklist.compact { margin: 6px 0 2px; }
.app .checklist.compact li { padding: 2px 0; border-bottom: 0; }
.app .limit-bar { display: block; height: 4px; background: var(--line); border-radius: 2px; margin: 4px 0 2px; max-width: 320px; }
.app .limit-fill { display: block; height: 100%; background: var(--ok); border-radius: 2px; }
.app .limit-fill.near { background: var(--warn); }
.app .limit-fill.over { background: var(--danger); }

/* Proposal review (styles.css .proposal-note, .diff, .change, .ins, .del) */
.app .proposal-note {
  margin: 0 0 14px;
  padding: 8px 12px;
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}
.app .diff {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
}
.app .change { padding: 6px 0; border-bottom: 1px solid var(--line); }
.app .change:last-child { border-bottom: 0; }
.app .change p { margin: 2px 0 0; }
.app .change-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.app .tick {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 9px;
  color: var(--on-accent);
}
.app .tick.on { background: var(--accent); border-color: var(--accent); }
.app .ins { background: var(--ok-soft); color: var(--ok-ink); text-decoration: none; }
.app .del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }

/* Version history (styles.css .version-list) */
.app .version-list { list-style: none; margin: 0 0 10px; padding: 0; }
.app .version-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.app .version-list .muted { margin-top: 2px; }

/* Reference check (styles.css .check-result) */
.app .check-result { background: var(--danger-soft); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.app .check-result p { font-size: 12px; margin-bottom: 8px; }
.app .check-result p:last-child { margin-bottom: 2px; }
.app .check-result .pill { margin-left: 0; }

/* Figure script editor (styles.css .script-modal) */
.app .code-area {
  margin: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre;
  tab-size: 4;
  overflow: hidden;
  color: var(--ink);
}
.app .modal-body > p code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; }

/* Exported files */
.app .file-list { margin: 8px 0 10px; padding-left: 18px; font-size: 12px; line-height: 1.55; }

@media (max-width: 1500px) {
  .app .topbar .hide-lg { display: none; }
}

/* Smaller windows: the app picture drops the outline, then the right panel,
   the way the app itself would at those widths. */

@media (max-width: 1080px) {
  .app .workspace { grid-template-columns: minmax(0, 1fr) 320px; }
  .app .workspace .sidebar { display: none; }
  .app .topbar .hide-md { display: none; }
}
@media (max-width: 820px) {
  .feature-grid { grid-template-columns: 1fr; }
  .hero-intro { display: block; }
  .hero .downloads { margin-top: 1.2rem; }
  .wordmark { font-size: 1.45rem; }
  .requirements div { grid-template-columns: 1fr; gap: 0.1rem; }
  .site-nav { gap: 1rem; }
  .app .workspace { grid-template-columns: minmax(0, 1fr); height: 460px; }
  .app .workspace .right-panel { display: none; }
  .app .topbar { padding-left: 64px; }
  .app .topbar .hide-sm { display: none; }
  .app .lights { gap: 6px; }
  .app .lights i { width: 10px; height: 10px; }
  .app .page { padding: 32px 28px 48px; }
  .app .editor-scroll { padding: 18px 14px 0; }
}
@media (max-width: 520px) {
  .app .topbar-center, .app .topbar .hide-xs { display: none; }
  .app .manuscript { font-size: 15px; }
  .app .page { padding: 24px 20px 40px; }
  .app .modal-head, .app .modal-body { padding-left: 14px; padding-right: 14px; }
  .app .panel-body { padding: 12px; }
}
@media (max-width: 480px) {
  .download { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .download { transition: background-color 120ms ease, border-color 120ms ease; }
}