ragaudit-cli 0.3.0__py3-none-any.whl

ragaudit/report/templates/style.css

@@ -0,0 +1,1095 @@
+/* Shared stylesheet for the ragaudit HTML report and the docs/ landing page.
+   Dark theme, system font stack, no external fonts or frameworks. */
+
+:root {
+  --bg: #0f1115;
+  --surface: #171a21;
+  --surface-raised: #1f232c;
+  --border: #2a2f3a;
+  --text: #e6e6e6;
+  --text-muted: #9aa0a6;
+  --accent: #5b9dff;
+
+  --true-pass: #2ecc71;
+  --lucky-pass: #f5a623;
+  --generation-failure: #e74c3c;
+  --retrieval-failure: #8a94a6;
+
+  --true-pass-bg: rgba(46, 204, 113, 0.12);
+  --lucky-pass-bg: rgba(245, 166, 35, 0.16);
+  --generation-failure-bg: rgba(231, 76, 60, 0.12);
+  --retrieval-failure-bg: rgba(138, 148, 166, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+}
+
+.container {
+  max-width: 1080px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+}
+
+header.report-header {
+  margin-bottom: 2rem;
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+header.report-header h1 {
+  margin: 0 0 0.5rem;
+  font-size: 1.75rem;
+}
+
+.meta {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.meta code {
+  background: var(--surface);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+}
+
+section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+section h2 {
+  margin-top: 0;
+  font-size: 1.15rem;
+}
+
+.report-header .meta code {
+  overflow-wrap: anywhere;
+}
+
+.summary-box {
+  border-left: 4px solid var(--accent);
+}
+
+.summary-box.summary-healthy {
+  border-left-color: var(--true-pass);
+}
+
+.summary-box.summary-needs_work {
+  border-left-color: var(--lucky-pass);
+}
+
+.summary-box.summary-empty {
+  border-left-color: var(--retrieval-failure);
+}
+
+.summary-lines {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.summary-lines li {
+  padding: 0.35rem 0;
+  line-height: 1.5;
+}
+
+.summary-lines li:first-child {
+  font-size: 1.1rem;
+}
+
+.summary-lines strong {
+  color: var(--text);
+}
+
+.headline-sentence {
+  font-size: 1.15rem;
+  line-height: 1.6;
+}
+
+.stats-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 1rem;
+}
+
+.stat {
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+}
+
+.stat .value {
+  font-size: 1.4rem;
+  font-weight: 600;
+  display: block;
+}
+
+.stat .label {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+}
+
+table.matrix-table {
+  border-collapse: collapse;
+  width: 100%;
+  text-align: center;
+}
+
+table.matrix-table th,
+table.matrix-table td {
+  border: 1px solid var(--border);
+  padding: 1rem;
+}
+
+table.matrix-table th {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+table.matrix-table td {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.cell-label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 400;
+  color: var(--text-muted);
+  margin-top: 0.25rem;
+}
+
+.cell-true-pass {
+  background: var(--true-pass-bg);
+  color: var(--true-pass);
+}
+
+.cell-lucky-pass {
+  background: var(--lucky-pass-bg);
+  color: var(--lucky-pass);
+}
+
+.cell-generation-failure {
+  background: var(--generation-failure-bg);
+  color: var(--generation-failure);
+}
+
+.cell-retrieval-failure {
+  background: var(--retrieval-failure-bg);
+  color: var(--retrieval-failure);
+}
+
+.warning {
+  color: var(--lucky-pass);
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.filter-btn {
+  background: var(--surface-raised);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0.4rem 0.9rem;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+
+.filter-btn:hover {
+  border-color: var(--accent);
+}
+
+.filter-btn.active {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #061021;
+  font-weight: 600;
+}
+
+table#case-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table#case-table th,
+table#case-table td {
+  border-bottom: 1px solid var(--border);
+  padding: 0.6rem 0.75rem;
+  text-align: left;
+  vertical-align: top;
+}
+
+table#case-table th {
+  color: var(--text-muted);
+  font-weight: 500;
+  user-select: none;
+}
+
+table#case-table th[data-sort]::after {
+  content: " \2195";
+  color: var(--text-muted);
+  font-size: 0.75rem;
+}
+
+table#case-table td {
+  overflow-wrap: anywhere;
+}
+
+/* Phones: one card per case instead of four columns, so the page never scrolls sideways. */
+@media (max-width: 600px) {
+  table#case-table,
+  table#case-table tbody,
+  table#case-table tr,
+  table#case-table td {
+    display: block;
+    width: auto;
+  }
+
+  table#case-table thead {
+    display: none;
+  }
+
+  table#case-table tr.case-row {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  table#case-table td {
+    border-bottom: 0;
+    padding: 0.2rem 0;
+  }
+
+  table#case-table td.case-question {
+    font-weight: 600;
+  }
+
+  table#case-table td.case-verdict,
+  table#case-table td.case-rank {
+    display: inline-block;
+    margin-right: 0.75rem;
+  }
+
+  table#case-table td.case-rank {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+  }
+
+  table#case-table td.case-rank::before {
+    content: attr(data-label) ": ";
+  }
+}
+
+.badge {
+  display: inline-block;
+  padding: 0.15rem 0.6rem;
+  border-radius: 999px;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.badge-true_pass {
+  background: var(--true-pass-bg);
+  color: var(--true-pass);
+}
+
+.badge-lucky_pass {
+  background: var(--lucky-pass-bg);
+  color: var(--lucky-pass);
+}
+
+.badge-generation_failure {
+  background: var(--generation-failure-bg);
+  color: var(--generation-failure);
+}
+
+.badge-retrieval_failure {
+  background: var(--retrieval-failure-bg);
+  color: var(--retrieval-failure);
+}
+
+details summary {
+  cursor: pointer;
+  color: var(--accent);
+}
+
+details dl {
+  margin: 0.75rem 0 0;
+}
+
+details dt {
+  color: var(--text-muted);
+  font-size: 0.8rem;
+  margin-top: 0.6rem;
+}
+
+details dd {
+  margin: 0.2rem 0 0;
+  white-space: pre-wrap;
+}
+
+details ol {
+  margin: 0.2rem 0 0;
+  padding-left: 1.2rem;
+}
+
+/* The contexts list itself is markup: only each passage keeps its line breaks. */
+details dd.contexts {
+  white-space: normal;
+}
+
+details dd.contexts li {
+  white-space: pre-wrap;
+}
+
+a {
+  color: var(--accent);
+}
+
+/* --- Code blocks (shared) --- */
+
+pre,
+code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+code {
+  font-size: 0.9em;
+}
+
+pre {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 1rem 1.25rem;
+  margin: 0;
+  overflow-x: auto;
+  font-size: 0.9rem;
+  line-height: 1.6;
+  color: var(--text);
+}
+
+pre code {
+  font-size: inherit;
+}
+
+/* --- Landing page (docs/index.html) ---
+   Everything below is scoped under html.ln / body.ln-page so the report
+   styles above are untouched. The page uses full-width bands with the
+   text held in an 1100px column. */
+
+:root {
+  --accent-hover: #78afff;
+  --accent-ink: #061021;
+  --nav-h: 60px;
+}
+
+html.ln {
+  scroll-behavior: smooth;
+  scroll-padding-top: calc(var(--nav-h) + 16px);
+}
+
+body.ln-page {
+  line-height: 1.6;
+}
+
+.ln-col {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+/* Nav */
+
+.ln-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: var(--nav-h);
+  z-index: 10;
+  background: rgba(15, 17, 21, 0.78);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+
+.ln-nav .ln-col {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ln-brand {
+  color: var(--text);
+  text-decoration: none;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.ln-nav-links {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ln-nav-links a {
+  display: inline-block;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 0.95rem;
+  padding: 0.4rem 0.75rem;
+  border-radius: 6px;
+  transition: color 150ms, background-color 150ms;
+}
+
+.ln-nav-links a:hover {
+  color: var(--text);
+  background: var(--surface-raised);
+}
+
+.ln-nav-links a.ln-nav-gh {
+  color: var(--text);
+  border: 1px solid var(--border);
+  margin-left: 0.5rem;
+}
+
+.ln-nav-links a.ln-nav-gh:hover {
+  border-color: var(--accent);
+}
+
+/* Focus, shared by every interactive element on the page */
+
+.ln-page a:focus-visible,
+.ln-page button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+/* Bands */
+
+.ln-band {
+  padding: 6rem 0;
+}
+
+.ln-band--alt {
+  background: var(--surface);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+
+.ln-band--alt pre {
+  background: var(--surface-raised);
+}
+
+.ln-band h2 {
+  font-size: 1.75rem;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  margin: 0 0 0.75rem;
+}
+
+.ln-band .ln-lead {
+  color: var(--text-muted);
+  font-size: 1.1rem;
+  max-width: 64ch;
+  margin: 0 0 2.5rem;
+}
+
+.ln-band p {
+  max-width: 68ch;
+  margin: 0 0 1rem;
+}
+
+/* Hero */
+
+.ln-hero {
+  min-height: 100vh;
+  padding-top: calc(var(--nav-h) + 3rem);
+  padding-bottom: 4rem;
+  display: flex;
+  align-items: center;
+}
+
+.ln-hero-grid {
+  display: grid;
+  grid-template-columns: 1.05fr 1fr;
+  gap: 4.5rem;
+  align-items: center;
+  width: 100%;
+}
+
+.ln-hero h1 {
+  font-size: 3.5rem;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  margin: 0 0 1.25rem;
+}
+
+.ln-hero .ln-desc {
+  font-size: 1.2rem;
+  color: var(--text-muted);
+  max-width: 34rem;
+  margin: 0 0 2.5rem;
+}
+
+.ln-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 2rem;
+  margin: 0 0 1rem;
+}
+
+.ln-stat .value {
+  display: block;
+  font-size: 3.75rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.03em;
+}
+
+.ln-stat .label {
+  display: block;
+  margin-top: 0.5rem;
+  color: var(--text-muted);
+}
+
+.ln-stat--lucky .value {
+  color: var(--lucky-pass);
+}
+
+.ln-stats-note {
+  color: var(--text-muted);
+  max-width: 34rem;
+  margin: 0 0 2.5rem;
+}
+
+.ln-actions {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+/* Buttons */
+
+.ln-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.7rem 1.25rem;
+  border-radius: 8px;
+  font: inherit;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: background-color 150ms, border-color 150ms, color 150ms;
+}
+
+.ln-btn--primary {
+  background: var(--accent);
+  color: var(--accent-ink);
+  border-color: var(--accent);
+}
+
+.ln-btn--primary:hover {
+  background: var(--accent-hover);
+  border-color: var(--accent-hover);
+}
+
+.ln-btn--secondary {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+
+.ln-btn--secondary:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+/* Interactive 2x2 */
+
+.ln-matrix {
+  display: grid;
+  grid-template-columns: 5.5rem repeat(2, minmax(0, 1fr));
+  gap: 0.6rem;
+}
+
+.ln-matrix .axis {
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  display: flex;
+  align-items: center;
+}
+
+.ln-matrix .axis--col {
+  padding-left: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.ln-cell {
+  display: block;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 1.25rem 1.1rem;
+  cursor: pointer;
+  transition: border-color 150ms, background-color 150ms;
+}
+
+.ln-cell .verdict {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  margin-bottom: 0.3rem;
+  transition: color 150ms;
+}
+
+.ln-cell .explain {
+  display: block;
+  color: var(--text-muted);
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.ln-cell:hover {
+  border-color: var(--text-muted);
+}
+
+.ln-cell[aria-pressed="true"] {
+  border-color: var(--cell-border);
+  background: var(--cell-bg);
+}
+
+.ln-cell[aria-pressed="true"] .verdict {
+  color: var(--cell);
+}
+
+.ln-cell[aria-pressed="true"] .explain {
+  color: var(--text);
+}
+
+.ln-cell--true  { --cell: var(--true-pass); --cell-border: var(--true-pass); --cell-bg: var(--true-pass-bg); }
+.ln-cell--lucky { --cell: var(--lucky-pass); --cell-border: var(--lucky-pass); --cell-bg: var(--lucky-pass-bg); }
+.ln-cell--gen   { --cell: var(--generation-failure); --cell-border: var(--generation-failure); --cell-bg: var(--generation-failure-bg); }
+.ln-cell--ret   { --cell: var(--retrieval-failure); --cell-border: var(--retrieval-failure); --cell-bg: var(--retrieval-failure-bg); }
+
+/* Lucky is always the dominant cell, selected or not. */
+.ln-cell--lucky {
+  border-color: var(--lucky-pass);
+  padding: 1.5rem 1.25rem;
+}
+
+.ln-cell--lucky .verdict {
+  font-size: 1.25rem;
+  color: var(--lucky-pass);
+}
+
+.ln-cell--lucky[aria-pressed="true"] {
+  border-width: 2px;
+  padding: calc(1.5rem - 1px) calc(1.25rem - 1px);
+}
+
+.ln-cell-detail {
+  margin-top: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface);
+  padding: 1.25rem 1.5rem;
+  min-height: 9.5rem;
+}
+
+.ln-cell-detail .ln-detail-title {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.ln-cell-detail p {
+  margin: 0 0 0.6rem;
+  font-size: 0.95rem;
+  max-width: none;
+}
+
+.ln-cell-detail p:last-child {
+  margin-bottom: 0;
+}
+
+.ln-cell-detail [data-detail] {
+  display: none;
+}
+
+.ln-cell-detail [data-detail].is-active {
+  display: block;
+}
+
+/* How it works */
+
+.ln-steps {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 1.25rem;
+  counter-reset: step;
+}
+
+.ln-step {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--surface-raised);
+  padding: 1.25rem 1.25rem 1.4rem;
+}
+
+.ln-step .k {
+  display: block;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  color: var(--accent);
+  font-size: 0.85rem;
+  margin-bottom: 0.5rem;
+}
+
+.ln-step strong {
+  display: block;
+  margin-bottom: 0.35rem;
+}
+
+.ln-step p {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+}
+
+/* Report viewer */
+
+.ln-viewer-desc {
+  min-height: 1.6em;
+  margin: 0 0 1rem;
+  color: var(--text-muted);
+}
+
+.ln-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin: 0 0 1rem;
+  flex-wrap: wrap;
+}
+
+.ln-tab {
+  font: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 0.55rem 1rem;
+  cursor: pointer;
+  transition: color 150ms, border-color 150ms, background-color 150ms;
+}
+
+.ln-tab:hover {
+  color: var(--text);
+  border-color: var(--text-muted);
+}
+
+.ln-tab[aria-selected="true"] {
+  color: var(--accent-ink);
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.ln-frame {
+  display: block;
+  width: 100%;
+  height: 700px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg);
+}
+
+.ln-viewer-foot {
+  margin-top: 0.75rem;
+  font-size: 0.9rem;
+  color: var(--text-muted);
+}
+
+/* Install: code blocks with copy buttons */
+
+.ln-code {
+  position: relative;
+  margin: 0 0 1.5rem;
+}
+
+.ln-code pre {
+  padding-right: 5.5rem;
+}
+
+.ln-copy {
+  position: absolute;
+  top: 0.6rem;
+  right: 0.6rem;
+  font: inherit;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  background: var(--surface-raised);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.3rem 0.65rem;
+  cursor: pointer;
+  transition: color 150ms, border-color 150ms, background-color 150ms;
+}
+
+.ln-copy:hover {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.ln-copy.is-done {
+  color: var(--true-pass);
+  border-color: var(--true-pass);
+}
+
+/* 5-minute quickstart */
+
+.ln-quick-demo {
+  margin: 1.5rem 0 0;
+  max-width: 820px;
+  min-width: 0;
+  padding: 1rem 1.25rem;
+  border: 1px solid var(--border);
+  border-left: 4px solid var(--accent);
+  border-radius: 6px;
+  background: var(--surface);
+}
+
+.ln-quick-demo > p:first-child {
+  margin: 0 0 0.75rem;
+}
+
+.ln-quick-demo .ln-code {
+  margin-bottom: 0.6rem;
+}
+
+.ln-quick {
+  margin: 2rem 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: quick;
+  max-width: 820px;
+}
+
+.ln-quick > li {
+  counter-increment: quick;
+  position: relative;
+  padding: 0 0 1.5rem 3rem;
+}
+
+.ln-quick > li::before {
+  content: counter(quick);
+  position: absolute;
+  left: 0;
+  top: -0.1rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  border: 1px solid var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ln-quick > li > strong {
+  display: block;
+  margin-bottom: 0.6rem;
+  font-size: 1.05rem;
+}
+
+.ln-quick .ln-code {
+  margin-bottom: 0.6rem;
+}
+
+.ln-quick-note {
+  margin: 0;
+  color: var(--text-muted);
+  font-size: 0.92rem;
+}
+
+.ln-quick-note code {
+  overflow-wrap: anywhere;
+}
+
+.ln-quick-h {
+  margin: 1.5rem 0 1rem;
+}
+
+.ln-table-wrap {
+  overflow-x: auto;
+}
+
+/* Let code blocks scroll inside their column instead of widening the page. */
+.ln-install-grid > *,
+.ln-quick > li {
+  min-width: 0;
+}
+
+.ln-verdicts {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.92rem;
+}
+
+.ln-verdicts th,
+.ln-verdicts td {
+  padding: 0.6rem 0.75rem;
+  border-bottom: 1px solid var(--border);
+  text-align: left;
+  vertical-align: top;
+}
+
+.ln-verdicts th {
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.ln-tag {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.8rem;
+  font-weight: 600;
+}
+
+.ln-install-grid {
+  display: grid;
+  grid-template-columns: 1.15fr 0.85fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+.ln-aside {
+  border-left: 2px solid var(--border);
+  padding-left: 1.25rem;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+
+.ln-aside p {
+  max-width: none;
+}
+
+/* Footer */
+
+.ln-footer {
+  border-top: 1px solid var(--border);
+  padding: 2.5rem 0;
+  color: var(--text-muted);
+  font-size: 0.9rem;
+}
+
+.ln-footer .ln-col {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+/* Responsive */
+
+@media (max-width: 960px) {
+  .ln-hero-grid {
+    grid-template-columns: 1fr;
+    gap: 3rem;
+  }
+
+  .ln-hero {
+    min-height: 0;
+  }
+
+  .ln-steps {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ln-install-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ln-aside {
+    border-left: 0;
+    padding-left: 0;
+  }
+}
+
+@media (max-width: 720px) {
+  .ln-col {
+    padding: 0 1.25rem;
+  }
+
+  .ln-nav-links a:not(.ln-nav-gh) {
+    display: none;
+  }
+
+  .ln-band {
+    padding: 4rem 0;
+  }
+
+  .ln-hero h1 {
+    font-size: 2.5rem;
+  }
+
+  .ln-stats {
+    gap: 1.25rem;
+  }
+
+  .ln-stat .value {
+    font-size: 2.75rem;
+  }
+
+  .ln-matrix {
+    grid-template-columns: 1fr;
+  }
+
+  .ln-matrix .axis--col {
+    display: none;
+  }
+
+  .ln-steps {
+    grid-template-columns: 1fr;
+  }
+
+  .ln-frame {
+    height: 480px;
+  }
+}