handzon-core 0.6.0

package/styles/components/chat.css

@@ -0,0 +1,304 @@
+/* Chat assistant — pill FAB, soft slide-out panel.
+ *
+ * Subtle diagonal gradient + accent-tinted glow so the assistant feels
+ * like a "smart" affordance without breaking the brutalist flat
+ * aesthetic everywhere else. Keep the hard edges (no border-radius).
+ */
+.chat-fab {
+  position: fixed;
+  bottom: 1.25rem;
+  right: 1.25rem;
+  z-index: 50;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.65rem 1rem;
+  background: linear-gradient(
+    135deg,
+    color-mix(in oklab, var(--color-accent) 92%, white),
+    var(--color-accent) 50%,
+    color-mix(in oklab, var(--color-accent) 80%, var(--color-fg))
+  );
+  color: var(--color-accent-fg);
+  border: 0;
+  font-weight: 600;
+  cursor: pointer;
+  /* Inset top-light for depth + a soft accent glow that lifts the
+   * button off the page bg without rounding the corners. */
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 25%, transparent),
+    0 0 0 1px color-mix(in oklab, var(--color-accent) 60%, var(--color-fg)),
+    0 6px 20px color-mix(in oklab, var(--color-accent) 35%, transparent);
+  transition: transform 0.12s ease, box-shadow 0.12s ease, background-position 0.3s ease;
+  background-size: 140% 140%;
+  background-position: 0% 0%;
+}
+.chat-fab:hover {
+  transform: translateY(-1px);
+  background-position: 100% 100%;
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, white 30%, transparent),
+    0 0 0 1px color-mix(in oklab, var(--color-accent) 70%, var(--color-fg)),
+    0 10px 26px color-mix(in oklab, var(--color-accent) 50%, transparent);
+}
+.chat-fab:active {
+  transform: translateY(0);
+}
+.chat-fab :is(svg) {
+  /* Tiny shadow under the Sparkles so it reads as an icon, not paint. */
+  filter: drop-shadow(0 1px 0 color-mix(in srgb, black 30%, transparent));
+}
+
+.chat-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: min(420px, 92vw);
+  height: 100dvh;
+  background: var(--color-bg);
+  border-left: var(--border-default) solid var(--color-border);
+  display: flex;
+  flex-direction: column;
+  z-index: 60;
+}
+.chat-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
+  border-bottom: var(--border-default) solid var(--color-border);
+  background: var(--color-surface);
+}
+.chat-head-id { display: inline-flex; align-items: center; gap: 0.5rem; }
+.chat-head-icon { color: var(--color-accent); flex-shrink: 0; }
+.chat-title { margin: 0; font-size: 1rem; font-weight: 700; }
+.chat-tagline { color: var(--color-muted); font-size: 0.8em; }
+.chat-head-actions { display: inline-flex; gap: 0.25rem; }
+.chat-head-actions button {
+  background: transparent;
+  border: 0;
+  color: var(--color-muted);
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+}
+.chat-head-actions button:hover {
+  color: var(--color-fg);
+  background: var(--color-surface-2);
+}
+
+.chat-meta {
+  padding: 0.5rem 1rem;
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  color: var(--color-muted);
+  background: var(--color-bg);
+  border-bottom: var(--border-default) solid var(--color-border);
+}
+
+.chat-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+  /* flex column stacks messages tight at the top — `display: grid`
+   * stretched the auto rows to fill the container and produced big
+   * gaps between messages. */
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+}
+
+/* Shown in place of .chat-list when BYOK is required but the learner
+ * hasn't set a key yet. Same visual weight as a message so it doesn't
+ * feel like an error — just a prompt to set things up first. */
+.chat-setup {
+  flex: 1;
+  display: grid;
+  place-content: center;
+  gap: 0.6rem;
+  padding: 2rem 1.25rem;
+  text-align: center;
+  color: var(--color-muted);
+}
+.chat-setup h3 {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--color-fg);
+}
+.chat-setup p {
+  margin: 0;
+  font-size: 0.9em;
+  line-height: 1.5;
+  max-width: 30ch;
+  justify-self: center;
+}
+.chat-setup button {
+  justify-self: center;
+  margin-top: 0.5rem;
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 0;
+  padding: 0.55rem 1.1rem;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 0;
+}
+.chat-setup button:hover {
+  background: color-mix(in oklab, var(--color-accent) 88%, white);
+}
+/* Each message is a stack of role label + content bubble. The user/
+ * assistant roles get distinct backgrounds + alignment so the eye can
+ * parse the transcript at a glance. */
+.chat-msg { display: flex; flex-direction: column; gap: 0.25rem; max-width: 100%; }
+.chat-msg-user { align-items: flex-end; }
+.chat-msg-assistant { align-items: flex-start; }
+
+.chat-role {
+  font-family: var(--font-mono);
+  font-size: 0.68em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--color-muted);
+}
+.chat-msg-user .chat-role { color: var(--color-accent); }
+
+.chat-content {
+  font-size: 0.95em;
+  line-height: 1.55;
+  padding: 0.55rem 0.8rem;
+  max-width: 88%;
+  border-radius: 0;
+}
+/* Distinct enough on both light and dark themes:
+ *   - user:      bold accent tint + thin accent border
+ *   - assistant: surface-2 (one tier brighter than page bg) + muted border
+ * 18% accent on a near-black page bg was effectively invisible. */
+.chat-msg-user .chat-content {
+  background: color-mix(in oklab, var(--color-accent) 35%, var(--color-bg));
+  color: var(--color-fg);
+  border: 1px solid color-mix(in oklab, var(--color-accent) 55%, var(--color-bg));
+  /* user-typed text isn't markdown; preserve their line breaks */
+  white-space: pre-wrap;
+}
+.chat-msg-assistant .chat-content {
+  background: var(--color-surface-2);
+  color: var(--color-fg);
+  border: 1px solid var(--color-border);
+}
+
+/* Markdown prose inside an assistant bubble. Tight margins so a single
+ * paragraph isn't padded into a wall, and a sane inherit on code blocks
+ * so they don't overflow the panel. */
+.chat-msg-assistant .chat-content > :first-child { margin-top: 0; }
+.chat-msg-assistant .chat-content > :last-child { margin-bottom: 0; }
+.chat-msg-assistant .chat-content p { margin: 0.5em 0; }
+.chat-msg-assistant .chat-content ul,
+.chat-msg-assistant .chat-content ol { margin: 0.5em 0; padding-left: 1.25em; }
+.chat-msg-assistant .chat-content li { margin: 0.15em 0; }
+.chat-msg-assistant .chat-content h1,
+.chat-msg-assistant .chat-content h2,
+.chat-msg-assistant .chat-content h3 {
+  margin: 0.8em 0 0.35em;
+  font-size: 1em;
+  font-weight: 700;
+}
+.chat-msg-assistant .chat-content a {
+  color: var(--color-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.chat-msg-assistant .chat-content code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  padding: 0.05em 0.3em;
+  background: var(--color-surface-2);
+  border-radius: 0;
+}
+.chat-msg-assistant .chat-content pre {
+  margin: 0.5em 0;
+  padding: 0.6rem 0.75rem;
+  background: var(--color-surface-2);
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  line-height: 1.45;
+  border-radius: 0;
+}
+.chat-msg-assistant .chat-content pre code {
+  padding: 0;
+  background: transparent;
+}
+.chat-msg-assistant .chat-content blockquote {
+  margin: 0.5em 0;
+  padding-left: 0.7em;
+  border-left: var(--border-thick) solid var(--color-accent);
+  color: var(--color-muted);
+}
+
+/* Three-dot "thinking" indicator. Shown only between user-send and
+ * first stream chunk; once chunks land the message text replaces it. */
+.chat-thinking {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.15rem 0.2rem;
+}
+.chat-thinking span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-muted);
+  animation: chat-thinking-bounce 1.2s infinite ease-in-out both;
+}
+.chat-thinking span:nth-child(1) { animation-delay: -0.32s; }
+.chat-thinking span:nth-child(2) { animation-delay: -0.16s; }
+@keyframes chat-thinking-bounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-thinking span { animation: none; opacity: 0.7; }
+}
+
+.chat-error {
+  padding: 0.5rem 0.75rem;
+  background: color-mix(in oklab, var(--color-danger) 18%, var(--color-bg));
+  color: var(--color-danger);
+  font-size: 0.85em;
+  border-radius: 0;
+}
+
+.chat-input {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.85rem 1rem;
+  border-top: var(--border-default) solid var(--color-border);
+  background: var(--color-surface);
+}
+.chat-input input {
+  flex: 1;
+  background: var(--color-bg);
+  border: var(--border-default) solid var(--color-border);
+  color: var(--color-fg);
+  padding: 0.55rem 0.75rem;
+  font: inherit;
+  outline: none;
+  border-radius: 0;
+}
+.chat-input input:focus { border-color: var(--color-accent); }
+.chat-input button {
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 0;
+  padding: 0 0.9rem;
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  border-radius: 0;
+}
+.chat-input button:disabled { opacity: 0.4; cursor: not-allowed; }

package/styles/components/checkpoint.css

@@ -0,0 +1,49 @@
+/* Checkpoint */
+.checkpoint {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  margin: 1.5rem 0;
+  padding: 0.85rem 1.1rem;
+  background: var(--color-surface);
+  border: var(--border-default) solid var(--color-border);
+  border-left: var(--border-thick) solid var(--color-accent);
+  border-radius: 0;
+}
+.checkpoint button {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.7rem;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: var(--color-fg);
+  cursor: pointer;
+  text-align: left;
+}
+.checkpoint-box {
+  width: 20px;
+  height: 20px;
+  border: var(--border-default) solid var(--color-border-strong);
+  display: inline-grid;
+  place-items: center;
+  background: var(--color-bg);
+  border-radius: 0;
+  flex-shrink: 0;
+}
+.checkpoint.is-done {
+  border-left-color: var(--color-success);
+}
+.checkpoint.is-done .checkpoint-box {
+  background: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--color-bg);
+}
+.checkpoint-msg {
+  font-family: var(--font-mono);
+  font-size: 0.75em;
+  color: var(--color-success);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-left: auto;
+}

package/styles/components/diff.css

@@ -0,0 +1,44 @@
+/* Diff */
+.diff {
+  margin: 1.25rem 0;
+  background: var(--color-surface);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  border-radius: 0;
+  overflow: hidden;
+}
+.diff-bar {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0.4rem 0.6rem;
+  background: var(--color-surface-2);
+}
+.diff-bar button {
+  background: transparent;
+  border: var(--border-default) solid var(--color-border);
+  color: var(--color-muted);
+  padding: 0.2rem 0.6rem;
+  font: inherit;
+  cursor: pointer;
+  border-radius: 0;
+}
+.diff-bar button:hover { color: var(--color-fg); border-color: var(--color-border-strong); }
+.diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); }
+.diff-col { background: var(--color-surface); }
+.diff-label {
+  padding: 0.4rem 0.6rem;
+  background: var(--color-surface-2);
+  color: var(--color-muted);
+  font-size: 0.78em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.diff pre {
+  margin: 0;
+  padding: 0.6rem 0.8rem;
+  white-space: pre;
+  overflow-x: auto;
+}
+.diff-add { background: color-mix(in oklab, var(--color-success) 14%, transparent); color: var(--color-success); display: block; }
+.diff-del { background: color-mix(in oklab, var(--color-danger) 14%, transparent); color: var(--color-danger); display: block; }
+.diff-ctx { color: var(--color-muted); display: block; }

package/styles/components/expressive-code.css

@@ -0,0 +1,61 @@
+/* Expressive Code bridge — pull every frame surface onto the page's
+ * palette so code blocks read as part of the page rather than a competing
+ * dark-blue island. EC's own selector
+ * `:root:not([data-theme='github-dark']) .expressive-code[data-theme='github-dark']`
+ * has specificity 0,4,0; rather than out-specifying the theme everywhere,
+ * we mark these bridge values !important since they're deliberate
+ * cross-cutting overrides.
+ */
+
+/* Render EC's auto-detected terminal frames (bash/sh/zsh fences) as
+ * regular file-titled code blocks. The <Terminal> MDX component is the
+ * only place that gets the traffic-light dots look. */
+.expressive-code .frame.is-terminal {
+  --code-background: var(--color-surface);
+}
+.expressive-code .frame.is-terminal pre {
+  background: var(--color-surface);
+}
+.expressive-code .frame.is-terminal .header {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  background: var(--color-surface-2);
+  color: var(--color-fg);
+  border: 0;
+  border-top: 2px solid var(--color-accent);
+  border-bottom: var(--border-default) solid var(--color-border);
+  font-family: var(--font-mono);
+  font-size: 0.78em;
+  font-weight: 500;
+  text-transform: lowercase;
+  letter-spacing: 0;
+  padding: 0.45rem 0.9rem;
+}
+.expressive-code .frame.is-terminal .header::before,
+.expressive-code .frame.is-terminal .header::after {
+  display: none;
+}
+
+:root {
+  --ec-codeBg: var(--color-surface) !important;
+  --ec-codeFg: var(--color-fg) !important;
+  --ec-frm-edBg: var(--color-surface) !important;
+  /* Active tab: lifted (brighter than the code body), accent on top,
+   * no bottom indicator — mirrors our Tabs.astro active state. */
+  --ec-frm-edActTabBg: var(--color-surface-2) !important;
+  --ec-frm-edActTabFg: var(--color-fg) !important;
+  --ec-frm-edActTabIndTopCol: var(--color-accent) !important;
+  --ec-frm-edActTabIndBtmCol: transparent !important;
+  --ec-frm-edActTabIndHt: 2px !important;
+  --ec-frm-edTabBarBg: transparent !important;
+  --ec-frm-edTabBarBrdBtmCol: var(--color-border) !important;
+  --ec-frm-edTabBarBrdCol: transparent !important;
+  --ec-frm-trmBg: var(--color-surface) !important;
+  --ec-frm-trmTtbBg: var(--color-surface-2) !important;
+  --ec-frm-frameBoxShdCssVal: none !important;
+  /* Keep a thin 1px outline so code blocks have a perceptible shape on
+   * the pure-black page bg. */
+  --ec-brdCol: var(--color-border) !important;
+  --ec-brdWd: 1px !important;
+}

package/styles/components/filetree.css

@@ -0,0 +1,68 @@
+/* FileTree
+ *
+ * Inside the MDX `prose` wrapper, ul/li get article-sized vertical
+ * margins — that's what was producing the huge gaps between rows.
+ * Reset everything inside .ft-root explicitly so prose can't leak in,
+ * and use CSS-only indentation with a guide line per nesting level.
+ */
+/* Reset list defaults. .ft-list (nested ul) gets margin: 0 here too —
+ * leaving it out lets the browser-default `margin: 1em 0` add a fat
+ * gap between folders. Padding stays separate so .ft-list can use
+ * padding-left for the indent below. */
+.ft-root,
+.ft-root li,
+.ft-list {
+  list-style: none;
+  margin: 0;
+}
+.ft-root,
+.ft-root li {
+  padding: 0;
+}
+.ft-root {
+  /* prose margin override for the outer block */
+  margin: 1.25rem 0;
+  padding: 0.65rem 0.85rem;
+  background: var(--color-surface);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  /* one consistent rhythm for every row */
+  line-height: 1.65;
+  border: 1px solid var(--color-border);
+  border-radius: 0;
+}
+/* Nested lists step in ~0.7rem per level with a faint guide line. */
+.ft-list {
+  padding-left: 0.7rem;
+  margin-left: 0.25rem;
+  border-left: 1px solid color-mix(in oklab, var(--color-border) 70%, transparent);
+}
+.ft-row { display: block; }
+.ft-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  background: none;
+  border: 0;
+  color: var(--color-fg);
+  font: inherit;
+  padding: 0.05rem 0.35rem;
+  cursor: pointer;
+  border-radius: 0;
+  text-align: left;
+}
+.ft-btn:hover {
+  background: var(--color-surface-2);
+  color: var(--color-accent);
+}
+/* Keyboard nav shows the focus ring; mouse clicks don't leave it
+ * stuck after the click finishes. */
+.ft-btn:focus-visible {
+  outline: 1px solid var(--color-accent);
+  outline-offset: 1px;
+}
+.ft-btn:focus:not(:focus-visible) {
+  outline: none;
+}
+.ft-btn svg { flex-shrink: 0; }
+.ft-name { user-select: text; }

package/styles/components/mermaid.css

@@ -0,0 +1,19 @@
+/* Mermaid */
+.mermaid-wrap {
+  margin: 1.25rem 0;
+  padding: 1rem;
+  background: var(--color-surface);
+  display: grid;
+  place-items: center;
+  border-radius: 0;
+}
+.mermaid-wrap :global(svg) { max-width: 100%; height: auto; }
+.mermaid-error {
+  padding: 0.75rem;
+  background: color-mix(in oklab, var(--color-danger) 14%, var(--color-bg));
+  color: var(--color-danger);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  white-space: pre-wrap;
+  border-radius: 0;
+}

package/styles/components/modal.css

@@ -0,0 +1,25 @@
+/* Modal overlay + close button (shared by AI chat + BYOK dialogs) */
+/* Used only by BYOK (chat is non-modal). Soft dim, no blur — the
+ * blur made the tutorial text behind unreadable and gave the
+ * impression the assistant was hijacking the page. */
+.ms-overlay {
+  position: fixed;
+  inset: 0;
+  background: oklch(0% 0 0 / 0.35);
+}
+.ms-close {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background: transparent;
+  border: 0;
+  color: var(--color-muted);
+  width: 32px;
+  height: 32px;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  z-index: 1;
+  border-radius: 0;
+}
+.ms-close:hover { color: var(--color-fg); background: var(--color-surface); }

package/styles/components/progress.css

@@ -0,0 +1,19 @@
+/* Sidebar progress bar */
+.progress {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0.75rem 0;
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  color: var(--color-muted);
+}
+.progress-bar {
+  height: 6px;
+  background: var(--color-surface);
+  border: var(--border-default) solid var(--color-border);
+}
+.progress-fill {
+  height: 100%;
+  background: var(--color-accent);
+  transition: width 0.2s ease;
+}

package/styles/components/quiz.css

@@ -0,0 +1,101 @@
+/* Quiz */
+.quiz {
+  margin: 1.5rem 0;
+  padding: 1.25rem 1.4rem;
+  background: var(--color-surface);
+  border: var(--border-default) solid var(--color-border);
+  border-radius: 0;
+}
+.quiz-q {
+  font-weight: 600;
+  padding: 0;
+  margin-bottom: 1rem;
+  font-size: 1.02em;
+}
+.quiz-options { display: grid; gap: 0.5rem; }
+.quiz-opt {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.7rem 0.95rem;
+  background: var(--color-surface-2);
+  border: 0;
+  cursor: pointer;
+  border-radius: 0;
+  transition: background 0.12s ease;
+  position: relative;
+}
+.quiz-opt:hover {
+  background: color-mix(in oklab, var(--color-fg) 8%, var(--color-surface-2));
+}
+/* Hide the native input but keep it accessible */
+.quiz-opt input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+  width: 1px; height: 1px;
+}
+/* Custom toggle indicator — visible on every option, fills on chosen */
+.quiz-opt-toggle {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  border: var(--border-default) solid var(--color-border-strong);
+  background: var(--color-bg);
+  position: relative;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+/* Both single and multi use a square box — keep the brutalist no-radius rule. */
+.quiz-opt-toggle--single,
+.quiz-opt-toggle--multi { border-radius: 0; }
+.quiz-opt-toggle--single::after,
+.quiz-opt-toggle--multi::after {
+  content: "";
+  position: absolute;
+  inset: 3px;
+  background: var(--color-accent);
+  opacity: 0;
+  transition: opacity 0.12s ease;
+}
+.quiz-opt.is-chosen .quiz-opt-toggle {
+  border-color: var(--color-accent);
+}
+.quiz-opt.is-chosen .quiz-opt-toggle::after { opacity: 1; }
+.quiz-opt.is-correct {
+  background: color-mix(in oklab, var(--color-success) 18%, var(--color-surface));
+}
+.quiz-opt.is-correct .quiz-opt-toggle { border-color: var(--color-success); background: var(--color-success); color: var(--color-bg); }
+.quiz-opt.is-wrong {
+  background: color-mix(in oklab, var(--color-danger) 16%, var(--color-surface));
+}
+.quiz-opt.is-wrong .quiz-opt-toggle { border-color: var(--color-danger); background: var(--color-danger); color: var(--color-bg); }
+.quiz-marker {
+  display: inline-grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+}
+.quiz-actions { display: flex; align-items: center; gap: 0.85rem; margin-top: 1rem; }
+.quiz-actions button {
+  padding: 0.55rem 1.2rem;
+  background: var(--color-accent);
+  color: var(--color-accent-fg);
+  border: 0;
+  font-weight: 600;
+  cursor: pointer;
+  border-radius: 0;
+}
+.quiz-actions button:hover:not(:disabled) {
+  background: color-mix(in oklab, var(--color-accent) 88%, white);
+}
+.quiz-actions button:disabled { opacity: 0.35; cursor: not-allowed; }
+.quiz-msg.ok { color: var(--color-success); font-weight: 600; }
+.quiz-msg.no { color: var(--color-danger); font-weight: 600; }
+.quiz-exp {
+  margin-top: 1rem;
+  padding: 0.75rem 0.95rem;
+  background: var(--color-bg);
+  font-size: 0.92em;
+  border-radius: 0;
+  border-left: var(--border-thick) solid var(--color-accent);
+}