jekyll-theme-systemhalted 0.1.1

data/assets/css/nord.css

@@ -0,0 +1,1759 @@
+/* nord.css — trimmed theme styles for systemhalted-theme */
+
+:root {
+  --font-sans: "Rubik", "Noto Sans", "Helvetica Neue", Helvetica, sans-serif;
+  --font-display: "Rubik", "Noto Sans", "Helvetica Neue", Helvetica, sans-serif;
+  --font-mono: "Source Code Pro", "Fira Code", Menlo, Monaco, "Courier New", monospace;
+  --font-wordmark: "UnifrakturMaguntia", "UnifrakturCook", "Old English Text MT", "Goudy Text MT", "Times New Roman", serif;
+  --font-serif: "Times New Roman", "Georgia", Times, serif;
+}
+
+.theme-nord-light {
+  color-scheme: light;
+  --nord0: #2e3440;
+  --nord1: #3b4252;
+  --nord2: #434c5e;
+  --nord3: #4c566a;
+  --nord4: #d8dee9;
+  --nord5: #e5e9f0;
+  --nord6: #eceff4;
+  --nord7: #8fbcbb;
+  --nord8: #88c0d0;
+  --nord9: #81a1c1;
+  --nord10: #5e81ac;
+  --nord11: #bf616a;
+  --nord12: #d08770;
+  --nord13: #ebcb8b;
+  --nord14: #a3be8c;
+  --nord15: #b48ead;
+  --bg: var(--nord6);
+  --bg-alt: var(--nord5);
+  --surface: var(--nord6);
+  --surface-strong: var(--nord5);
+  --border: var(--nord4);
+  --text: var(--nord3);
+  --text-strong: var(--nord0);
+  --muted: var(--nord3);
+  --link: var(--nord10);
+  --link-hover: var(--nord9);
+  --accent: var(--nord8);
+  --accent-strong: var(--nord10);
+  --on-accent: var(--nord6);
+  --shadow: 0 12px 28px rgba(46, 52, 64, 0.12);
+  --shadow-strong: 0 16px 36px rgba(46, 52, 64, 0.18);
+  --code-bg: var(--nord5);
+  --code-text: var(--nord11);
+  --code-border: var(--nord4);
+  --sidebar-bg: var(--nord0);
+  --sidebar-text: var(--nord4);
+  --sidebar-link: var(--nord6);
+  --sidebar-border: var(--nord2);
+  --footer-bg: var(--nord5);
+}
+
+.theme-nord-dark {
+  color-scheme: dark;
+  --nord0: #2e3440;
+  --nord1: #3b4252;
+  --nord2: #434c5e;
+  --nord3: #4c566a;
+  --nord4: #d8dee9;
+  --nord5: #e5e9f0;
+  --nord6: #eceff4;
+  --nord7: #8fbcbb;
+  --nord8: #88c0d0;
+  --nord9: #81a1c1;
+  --nord10: #5e81ac;
+  --nord11: #bf616a;
+  --nord12: #d08770;
+  --nord13: #ebcb8b;
+  --nord14: #a3be8c;
+  --nord15: #b48ead;
+  --bg: var(--nord0);
+  --bg-alt: var(--nord1);
+  --surface: var(--nord1);
+  --surface-strong: var(--nord2);
+  --border: var(--nord2);
+  --text: var(--nord4);
+  --text-strong: var(--nord6);
+  --muted: var(--nord4);
+  --link: var(--nord8);
+  --link-hover: var(--nord7);
+  --accent: var(--nord8);
+  --accent-strong: var(--nord10);
+  --on-accent: var(--nord6);
+  --shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
+  --shadow-strong: 0 16px 36px rgba(0, 0, 0, 0.45);
+  --code-bg: var(--nord1);
+  --code-text: var(--nord6);
+  --code-border: var(--nord2);
+  --sidebar-bg: var(--nord1);
+  --sidebar-text: var(--nord4);
+  --sidebar-link: var(--nord6);
+  --sidebar-border: var(--nord2);
+  --footer-bg: var(--nord1);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: 1.6;
+}
+
+@media (min-width: 38em) {
+  html {
+    font-size: 19px;
+  }
+}
+
+body {
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+
+.skip-link {
+  position: absolute;
+  top: 0.75rem;
+  left: 0.75rem;
+  padding: 0.5rem 0.85rem;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text-strong);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-150%);
+  transition: transform 0.2s ease;
+  z-index: 300;
+}
+
+.skip-link:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+a {
+  color: var(--link);
+  text-decoration: none;
+}
+
+a:hover,
+a:focus {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0.5rem 0;
+  font-family: var(--font-display);
+  line-height: 1.25;
+  color: var(--text-strong);
+  font-weight: 700;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+  margin-top: 1rem;
+}
+
+h3 {
+  font-size: 1.25rem;
+  margin-top: 1.5rem;
+}
+
+h4,
+h5,
+h6 {
+  font-size: 1rem;
+  margin-top: 1rem;
+}
+
+p {
+  margin: 0 0 1rem;
+}
+
+ul,
+ol,
+dl {
+  margin: 0 0 1rem;
+  padding-left: 1.2rem;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin: 0 0 0.5rem;
+}
+
+strong {
+  color: var(--text-strong);
+}
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: 1.5rem 0;
+}
+
+abbr {
+  font-size: 0.85rem;
+  font-weight: 700;
+  color: var(--text);
+  text-transform: uppercase;
+  border-bottom: 1px dotted var(--border);
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0 0 1rem;
+  border-radius: 6px;
+}
+
+code,
+pre {
+  font-family: var(--font-mono);
+}
+
+code {
+  padding: 0.2em 0.4em;
+  font-size: 0.85em;
+  color: var(--code-text);
+  background: var(--code-bg);
+  border-radius: 4px;
+}
+
+pre {
+  margin: 0 0 1rem;
+  padding: 1rem;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  background: var(--code-bg);
+  border: 1px solid var(--code-border);
+  border-radius: 8px;
+  overflow-x: auto;
+}
+
+pre code {
+  padding: 0;
+  background: transparent;
+  color: inherit;
+}
+
+.highlight,
+.highlighter-rouge {
+  font-family: var(--font-mono);
+  color: var(--text-strong);
+}
+
+.highlight .hll {
+  background: rgba(136, 192, 208, 0.15);
+}
+
+.highlight .c,
+.highlight .cm,
+.highlight .c1,
+.highlight .cp,
+.highlight .cs {
+  color: var(--muted);
+  font-style: italic;
+}
+
+.highlight .k,
+.highlight .kc,
+.highlight .kd,
+.highlight .kn,
+.highlight .kp,
+.highlight .kr,
+.highlight .kt {
+  color: var(--nord9);
+  font-weight: 600;
+}
+
+.highlight .s,
+.highlight .sb,
+.highlight .sc,
+.highlight .sd,
+.highlight .s2,
+.highlight .se,
+.highlight .sh,
+.highlight .si,
+.highlight .sx,
+.highlight .sr,
+.highlight .s1,
+.highlight .ss {
+  color: var(--nord14);
+}
+
+.highlight .m,
+.highlight .mb,
+.highlight .mf,
+.highlight .mh,
+.highlight .mi,
+.highlight .mo,
+.highlight .mx,
+.highlight .il {
+  color: var(--nord15);
+}
+
+.highlight .na,
+.highlight .nb,
+.highlight .nc,
+.highlight .no,
+.highlight .nd,
+.highlight .ni,
+.highlight .ne,
+.highlight .nf,
+.highlight .nl,
+.highlight .nn,
+.highlight .nt,
+.highlight .nv,
+.highlight .nx,
+.highlight .py {
+  color: var(--nord8);
+}
+
+.highlight .o,
+.highlight .ow,
+.highlight .p {
+  color: var(--text);
+}
+
+.highlight .gd {
+  color: var(--nord11);
+  background: rgba(191, 97, 106, 0.15);
+}
+
+.highlight .gi {
+  color: var(--nord14);
+  background: rgba(163, 190, 140, 0.12);
+}
+
+.highlight .err {
+  color: var(--nord11);
+  background: rgba(191, 97, 106, 0.12);
+}
+
+blockquote {
+  padding: 0.6rem 1rem;
+  margin: 1rem 0;
+  color: var(--text);
+  background: var(--surface);
+  border-left: 4px solid var(--border);
+}
+
+blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1rem;
+}
+
+td,
+th {
+  padding: 0.35rem 0.6rem;
+  border: 1px solid var(--border);
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+  background: var(--surface);
+}
+
+.message {
+  margin-bottom: 1rem;
+  padding: 1rem;
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+.wrap {
+  position: relative;
+  width: 100%;
+}
+
+.container {
+  max-width: 72rem;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.masthead {
+  padding: 1rem 0;
+  margin-bottom: 2rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.masthead .container {
+  padding-left: calc(1rem + env(safe-area-inset-left));
+  padding-right: calc(1rem + env(safe-area-inset-right));
+}
+
+.masthead-inner {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-areas: "toggle title actions";
+  align-items: center;
+  gap: 1rem;
+}
+
+.masthead-inner .sidebar-toggle {
+  grid-area: toggle;
+  position: static;
+  margin: 0;
+  justify-self: start;
+  align-self: center;
+}
+
+.masthead-title {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0.25rem;
+  grid-area: title;
+  justify-self: center;
+}
+
+.masthead-wordmark {
+  display: inline-block;
+  font-family: var(--font-wordmark);
+  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
+  font-weight: 400;
+  line-height: 0.9;
+  letter-spacing: 0.02em;
+  color: var(--text-strong);
+  text-decoration: none;
+}
+
+.masthead-wordmark:hover,
+.masthead-wordmark:focus {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.masthead-byline {
+  font-size: 0.95rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  color: var(--muted);
+}
+
+.masthead-actions {
+  grid-area: actions;
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 2.6rem;
+  height: 2.6rem;
+  padding: 0;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-strong);
+  border-radius: 50%;
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.icon-button:hover {
+  background: var(--surface-strong);
+}
+
+.icon-button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.theme-toggle-label,
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.icon-button .fa {
+  font-size: 1.15rem;
+  line-height: 1;
+}
+
+@media (max-width: 48em) {
+  .masthead-inner {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      "toggle . actions"
+      "title title title";
+    row-gap: 0.6rem;
+  }
+
+  .masthead-title {
+    justify-self: center;
+  }
+
+  .masthead-byline {
+    font-size: 0.85rem;
+    letter-spacing: 0.08em;
+  }
+
+  .masthead-actions {
+    justify-self: end;
+  }
+
+  .masthead-wordmark {
+    font-size: clamp(1.9rem, 7vw, 2.8rem);
+  }
+}
+
+@media (max-width: 30em) {
+  html {
+    font-size: 15px;
+  }
+}
+
+.search-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 6rem 1rem 2rem;
+  background: rgba(15, 23, 42, 0.55);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+  z-index: 200;
+}
+
+.theme-nord-light .search-overlay {
+  background: rgba(94, 129, 172, 0.2);
+}
+
+.search-overlay.is-open {
+  opacity: 1;
+  visibility: visible;
+}
+
+body.search-open {
+  overflow: hidden;
+}
+
+.search-dialog {
+  width: min(720px, 92vw);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--shadow-strong);
+  padding: 1.1rem;
+}
+
+.search-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.search-status {
+  margin-top: 0.75rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.search-status.is-hidden {
+  display: none;
+}
+
+.search-status.is-loading::before {
+  content: "";
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  animation: search-spin 0.8s linear infinite;
+}
+
+.search-status.is-error {
+  color: var(--nord11);
+}
+
+.search-status a {
+  color: var(--link);
+  font-weight: 600;
+}
+
+.search-input {
+  flex: 1;
+  padding: 0.65rem 0.85rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--bg-alt);
+  color: var(--text-strong);
+  font-size: 1rem;
+  font-family: var(--font-sans);
+}
+
+.search-input:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.search-close {
+  width: 2.4rem;
+  height: 2.4rem;
+}
+
+.search-results {
+  margin-top: 1rem;
+  max-height: 60vh;
+  overflow-y: auto;
+  display: grid;
+  gap: 0.75rem;
+}
+
+.search-count {
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.search-result {
+  display: block;
+  padding: 0.75rem 0.9rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface-strong);
+  color: var(--text-strong);
+  text-decoration: none;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
+}
+
+.search-result:hover,
+.search-result:focus {
+  border-color: var(--accent);
+  box-shadow: var(--shadow);
+  transform: translateY(-1px);
+  text-decoration: none;
+}
+
+.search-result-title {
+  font-weight: 700;
+  margin-bottom: 0.2rem;
+}
+
+.search-result-meta {
+  font-size: 0.85rem;
+  color: var(--muted);
+  margin-bottom: 0.35rem;
+}
+
+.search-result-snippet {
+  font-size: 0.92rem;
+  color: var(--text);
+  line-height: 1.4;
+}
+
+.search-empty {
+  margin: 0;
+  padding: 0.4rem 0.5rem;
+  color: var(--muted);
+}
+
+@keyframes search-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.sidebar-checkbox {
+  position: absolute;
+  opacity: 0;
+  user-select: none;
+}
+
+.sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: -14rem;
+  width: 14rem;
+  visibility: hidden;
+  overflow-y: auto;
+  font-family: var(--font-sans);
+  font-size: 0.9rem;
+  color: var(--sidebar-text);
+  background: var(--sidebar-bg);
+  transition: all 0.3s ease-in-out;
+}
+
+.sidebar a {
+  color: var(--sidebar-link);
+}
+
+.sidebar-item {
+  padding: 1rem;
+}
+
+.sidebar-item p:last-child {
+  margin-bottom: 0;
+}
+
+.sidebar-nav {
+  border-bottom: 1px solid var(--sidebar-border);
+}
+
+.sidebar-nav-item {
+  display: block;
+  padding: 0.5rem 1rem;
+  border-top: 1px solid var(--sidebar-border);
+}
+
+.sidebar-nav-item.sidebar-nav-action {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.sidebar-nav-item.active,
+.sidebar-nav-item:hover,
+.sidebar-nav-item:focus {
+  text-decoration: none;
+  background: var(--sidebar-border);
+  color: var(--sidebar-link);
+}
+
+.sidebar-toggle {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.6rem;
+  height: 2.6rem;
+  padding: 0;
+  color: var(--text-strong);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  cursor: pointer;
+}
+
+.sidebar-toggle::before {
+  content: "";
+  width: 24px;
+  height: 16px;
+  background-image:
+    linear-gradient(currentColor 0 0),
+    linear-gradient(currentColor 0 0),
+    linear-gradient(currentColor 0 0);
+  background-size: 24px 2px;
+  background-position: center top, center, center bottom;
+  background-repeat: no-repeat;
+}
+
+.sidebar-toggle:active,
+#sidebar-checkbox:focus ~ .wrap .sidebar-toggle,
+#sidebar-checkbox:checked ~ .wrap .sidebar-toggle {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+  color: var(--on-accent);
+}
+
+.sidebar-toggle:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.wrap,
+.sidebar,
+.sidebar-toggle {
+  backface-visibility: hidden;
+  transition: transform 0.3s ease-in-out;
+}
+
+#sidebar-checkbox:checked + .sidebar {
+  visibility: visible;
+}
+
+#sidebar-checkbox:checked ~ .sidebar,
+#sidebar-checkbox:checked ~ .wrap {
+  transform: translateX(14rem);
+}
+
+@media print {
+  .sidebar-toggle {
+    display: none;
+  }
+}
+
+.page,
+.post {
+  margin-bottom: 4rem;
+}
+
+.content .post,
+.content .page {
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  font-family: var(--font-mono);
+}
+
+.page-title,
+.post-title,
+.post-title a {
+  color: var(--text-strong);
+}
+
+.page-title,
+.post-title {
+  margin-top: 0;
+}
+
+.post-date {
+  display: block;
+  margin-top: -0.5rem;
+  margin-bottom: 1rem;
+  color: var(--muted);
+}
+
+.post-featured {
+  margin: 1rem 0 1.5rem;
+}
+
+.post-featured figcaption {
+  margin-top: 0.35rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.post-categories,
+.post-tags {
+  margin-top: 1rem;
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 0.95rem;
+}
+
+.post-categories a,
+.post-tags a {
+  display: inline-block;
+  margin: 0 0.35rem 0.35rem 0;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+
+.post-categories a:hover,
+.post-tags a:hover {
+  background: var(--surface-strong);
+  text-decoration: none;
+}
+
+/* Webcmd page */
+.webcmd {
+  max-width: 56rem;
+  margin: 0 auto 4rem;
+}
+
+.webcmd-shell {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 18px;
+  box-shadow: var(--shadow);
+  padding: 2rem;
+}
+
+.webcmd-header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.webcmd-kicker {
+  margin: 0;
+  font-size: 0.75rem;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--muted);
+  font-weight: 700;
+}
+
+.webcmd-title {
+  margin: 0.25rem 0 0;
+  font-size: clamp(1.4rem, 3.2vw, 2.2rem);
+}
+
+.webcmd-subtitle {
+  margin: 0.35rem 0 0;
+  color: var(--muted);
+  max-width: 36rem;
+}
+
+
+.webcmd-terminal {
+  padding: 1.25rem;
+  border-radius: 14px;
+  border: 1px solid var(--border);
+  background: var(--bg-alt);
+}
+
+.webcmd-form {
+  margin: 0;
+}
+
+.webcmd-input {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.6rem 0.8rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+.webcmd-input:focus-within {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.webcmd-prompt {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--accent-strong);
+}
+
+.webcmd-input input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-strong);
+  font-family: var(--font-mono);
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+.webcmd-input input:focus {
+  outline: none;
+}
+
+.webcmd-hint {
+  margin: 0.75rem 0 0;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.webcmd-command {
+  display: inline-block;
+  font-family: var(--font-mono);
+  padding: 0.1rem 0.35rem;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-strong);
+}
+
+.webcmd-output {
+  margin-top: 1rem;
+  font-family: var(--font-mono);
+  color: var(--text-strong);
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.webcmd-output a {
+  font-weight: 600;
+}
+
+.webcmd-output .snippet {
+  color: var(--muted);
+  display: block;
+  margin-left: 1.5rem;
+}
+
+.webcmd-error {
+  margin-top: 0.75rem;
+  color: var(--nord11);
+  font-family: var(--font-mono);
+}
+
+.webcmd-help {
+  margin-top: 1.25rem;
+}
+
+.webcmd-help-panel {
+  margin-top: 0.75rem;
+  padding: 0.75rem 1rem;
+  border-radius: 12px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  overflow-x: auto;
+}
+
+.webcmd-help-grid {
+  column-count: 1;
+  column-gap: 1.5rem;
+}
+
+.webcmd-help-block {
+  display: grid;
+  gap: 0.5rem;
+  break-inside: avoid;
+  margin-bottom: 1rem;
+}
+
+.webcmd-help-heading {
+  font-size: 0.8rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: var(--text-strong);
+}
+
+.webcmd-help-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 0.35rem;
+}
+
+.webcmd-help-list li {
+  display: grid;
+  grid-template-columns: minmax(2.5rem, 3.8rem) 1fr;
+  gap: 0.6rem;
+  align-items: start;
+}
+
+.webcmd-help-key {
+  font-family: var(--font-mono);
+  font-weight: 700;
+  color: var(--text-strong);
+}
+
+.webcmd-help-desc {
+  color: var(--text);
+}
+
+.webcmd-footer {
+  margin-top: 1.5rem;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.webcmd-footer-text {
+  margin: 0;
+}
+
+@media (min-width: 48em) {
+  .webcmd-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .webcmd-help-list li {
+    grid-template-columns: minmax(2.8rem, 4rem) 1fr;
+  }
+
+  .webcmd-help-grid {
+    column-count: 2;
+  }
+}
+
+.related {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  border-top: 1px solid var(--border);
+  max-width: 48rem;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.related-posts {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.related-posts h3 {
+  margin-top: 0;
+}
+
+.related-posts li {
+  margin-bottom: 0.6rem;
+}
+
+.related-posts li small {
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.post-list {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+.post-list li {
+  margin-bottom: 0.5rem;
+}
+
+.post-list-date {
+  display: inline-block;
+  margin-right: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.post-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 1.5rem;
+  margin: 1rem 0 2rem;
+}
+
+.post-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.post-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-strong);
+}
+
+.card-media {
+  display: block;
+  position: relative;
+  padding-top: 62%;
+  background: linear-gradient(135deg, var(--nord9), var(--nord10));
+  overflow: hidden;
+}
+
+.card-media img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card-thumb-placeholder {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--on-accent);
+  font-size: 3rem;
+  font-weight: 700;
+  letter-spacing: 1px;
+}
+
+.card-body {
+  padding: 1rem 1.1rem 1.25rem;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.95rem;
+  color: var(--muted);
+  margin-bottom: 0.25rem;
+}
+
+.card-title {
+  margin: 0.25rem 0 0.35rem;
+  font-size: 1.2rem;
+  line-height: 1.3;
+}
+
+.card-title a {
+  color: var(--text-strong);
+}
+
+.card-excerpt {
+  margin: 0 0 0.65rem;
+  color: var(--text);
+  line-height: 1.45;
+  font-size: 0.98rem;
+  flex: 1;
+}
+
+.card-author {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: auto;
+}
+
+.author-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: var(--bg);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+}
+
+.author-name {
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.pager {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  justify-content: center;
+  margin: 1.5rem 0;
+}
+
+.page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 38px;
+  padding: 0.4rem 0.7rem;
+  border-radius: 9px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text-strong);
+  font-size: 0.95rem;
+  font-weight: 600;
+  transition: all 0.15s ease;
+}
+
+.page-btn:hover,
+.page-btn:focus {
+  background: var(--surface-strong);
+  text-decoration: none;
+}
+
+.page-btn.active {
+  background: var(--accent-strong);
+  border-color: var(--accent-strong);
+  color: var(--on-accent);
+}
+
+.page-btn.disabled {
+  background: var(--surface);
+  color: var(--muted);
+  border-color: var(--border);
+  cursor: not-allowed;
+}
+
+.page-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  color: var(--muted);
+  font-weight: 600;
+}
+
+.collection-list,
+.category-posts {
+  list-style: none;
+  padding-left: 0;
+  margin-left: 0;
+}
+
+.collection-item {
+  margin-bottom: 1.2rem;
+}
+
+.collection-item-date {
+  font-size: 0.9rem;
+  color: var(--muted);
+  line-height: 1.2;
+}
+
+.collection-item-title a {
+  display: inline-block;
+  margin-top: 0.1rem;
+}
+
+.category-block {
+  margin-bottom: 1.25rem;
+}
+
+.category-block summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 0.55rem 0.85rem;
+  border-radius: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  font-weight: 600;
+}
+
+.category-block summary::marker {
+  content: "";
+}
+
+.category-block summary::-webkit-details-marker {
+  display: none;
+}
+
+.category-count {
+  color: var(--muted);
+  font-weight: 500;
+  margin-left: 0.25rem;
+}
+
+.category-posts {
+  margin: 0.5rem 0 0;
+}
+
+.category-posts li {
+  display: flex;
+  align-items: baseline;
+  margin: 0.2rem 0;
+}
+
+.category-posts .post-list-date {
+  white-space: nowrap;
+  margin-right: 0.5rem;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.tag-box {
+  list-style: none;
+  padding-left: 0;
+  margin: 0 0 1.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.tag-box.inline {
+  display: flex;
+}
+
+.tag-box a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+.tag-box a:hover {
+  background: var(--surface-strong);
+  text-decoration: none;
+}
+
+.archive-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0.5rem 0 1.5rem;
+}
+
+.archive-controls label {
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.archive-sort {
+  font-size: 0.9rem;
+  padding: 0.2rem 0.4rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--surface);
+  color: var(--text-strong);
+}
+
+.archive-year {
+  margin-bottom: 1.5rem;
+}
+
+.archive-year-summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.7rem 1rem;
+  border-radius: 999px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  transition: background 0.2s ease, box-shadow 0.2s ease;
+}
+
+.archive-year-summary::marker,
+.archive-post-summary::marker {
+  content: "";
+}
+
+.archive-year-summary::-webkit-details-marker,
+.archive-post-summary::-webkit-details-marker {
+  display: none;
+}
+
+.archive-year-summary::after {
+  content: "";
+  margin-left: auto;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-right: 2px solid var(--accent);
+  border-bottom: 2px solid var(--accent);
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+.archive-year-summary:focus-visible,
+.archive-post-summary:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+}
+
+.archive-year-title {
+  font-size: 1.35rem;
+  font-weight: 600;
+  color: var(--text-strong);
+}
+
+.archive-year-count {
+  font-size: 0.75em;
+  font-weight: 400;
+  color: var(--muted);
+  margin-left: 0.25rem;
+}
+
+.archive-year[open] > .archive-year-summary {
+  background: var(--surface-strong);
+  box-shadow: 0 6px 16px rgba(46, 52, 64, 0.08);
+}
+
+.archive-year[open] > .archive-year-summary::after {
+  transform: rotate(-135deg);
+}
+
+.archive-posts {
+  list-style: none;
+  padding-left: 0;
+  margin: 0.75rem 0 0;
+}
+
+.archive-post-details {
+  margin: 0.5rem 0;
+}
+
+.archive-post-summary {
+  cursor: pointer;
+  list-style: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.85rem;
+  border-radius: 14px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  transition: background 0.2s ease, border-color 0.2s ease;
+}
+
+.archive-post-summary::after {
+  content: "";
+  margin-left: auto;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid var(--accent);
+  border-bottom: 2px solid var(--accent);
+  transform: rotate(45deg);
+  transition: transform 0.2s ease;
+}
+
+.archive-post-details[open] > .archive-post-summary {
+  background: var(--surface-strong);
+  border-color: var(--border);
+}
+
+.archive-post-details[open] > .archive-post-summary::after {
+  transform: rotate(-135deg);
+}
+
+.archive-post-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.archive-post-title {
+  color: var(--text-strong);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.archive-post-title:hover {
+  color: var(--link-hover);
+  text-decoration: none;
+}
+
+.archive-post-description {
+  margin: 0.4rem 0 0.6rem 1.2rem;
+  padding-left: 0.8rem;
+  border-left: 2px solid var(--border);
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.site-footer {
+  margin-top: 3rem;
+  padding: 2.5rem 0 2rem;
+  border-top: 1px solid var(--border);
+  background: var(--footer-bg);
+}
+
+.footer-inner {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 2rem;
+  align-items: start;
+}
+
+.footer-brand {
+  display: flex;
+  gap: 0.85rem;
+  align-items: flex-start;
+}
+
+.footer-avatar {
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--nord9), var(--nord10));
+  color: var(--on-accent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 1.2rem;
+  overflow: hidden;
+}
+
+.footer-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  margin: 0;
+  border-radius: inherit;
+  display: block;
+}
+
+.footer-title {
+  font-weight: 800;
+  font-size: 1.15rem;
+  color: var(--text-strong);
+}
+
+.footer-subtitle {
+  color: var(--muted);
+  font-weight: 600;
+  margin-bottom: 0.35rem;
+}
+
+.footer-description {
+  margin: 0.15rem 0 0.5rem;
+  color: var(--text);
+  line-height: 1.5;
+}
+
+.footer-links {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 1rem;
+}
+
+.footer-column {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.footer-heading {
+  font-weight: 800;
+  color: var(--text-strong);
+  margin-bottom: 0.35rem;
+}
+
+.footer-column a,
+.footer-subscribe a {
+  color: var(--text-strong);
+}
+
+.footer-subscribe {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-cta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.footer-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.35rem;
+  padding: 0.65rem 1rem;
+  border-radius: 12px;
+  font-weight: 700;
+  background: var(--accent-strong);
+  color: var(--on-accent);
+  border: 1px solid var(--accent-strong);
+}
+
+.footer-button.ghost {
+  background: transparent;
+  color: var(--accent-strong);
+  border-color: var(--accent-strong);
+}
+
+.footer-meta {
+  margin-top: 1.25rem;
+  font-size: 0.95rem;
+  color: var(--muted);
+}
+
+.footer-meta-secondary {
+  display: block;
+  font-size: 0.85rem;
+}
+
+.footer-meta-secondary a {
+  color: inherit;
+}
+
+.alignleft {
+  float: left;
+  margin: 0.25rem 1rem 0.75rem 0;
+}
+
+.alignright {
+  float: right;
+  margin: 0.25rem 0 0.75rem 1rem;
+}
+
+.aligncenter {
+  display: block;
+  margin: 0.5rem auto 1rem;
+}
+
+.wp-caption {
+  max-width: 100%;
+  text-align: center;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 0.5rem;
+}
+
+.wp-caption-text,
+.wp-caption-dd {
+  margin: 0.4rem 0 0;
+  font-size: 0.9rem;
+  color: var(--muted);
+}
+
+.pull-quote {
+  font-size: 1.1rem;
+  font-style: italic;
+  padding: 1rem 1.25rem;
+  margin: 1.5rem 0;
+  border-left: 4px solid var(--accent);
+  background: var(--surface);
+}
+
+.org-src-container {
+  margin: 1rem 0;
+}
+
+.org-ul {
+  margin: 0 0 1rem;
+}