@polderlabs/bizar 7.0.4 → 8.1.0

package/bizar-dash/src/web/styles/glyphs.css

@@ -1,960 +0,0 @@
-/* ─────────────────────────────────────────────────────────────────────
-   Glyphs — Visual plan/recap artifact renderer (v3.21.0)
-   Inspired by agent-native.com's Visual Plans (local-files mode)
-   ───────────────────────────────────────────────────────────────────── */
-
-.glyph-renderer {
-  position: relative;
-  padding: 1.5rem 2rem;
-  background: var(--bg-elev);
-  border: 1px solid var(--border);
-  border-radius: 12px;
-  margin: 0;
-  min-height: 100%;
-  overflow: visible;
-}
-
-.glyph-renderer--loading,
-.glyph-renderer--error {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  gap: 0.5rem;
-  color: var(--text-dim);
-  padding: 4rem 2rem;
-  text-align: center;
-}
-
-.glyph-renderer--error strong {
-  color: var(--error);
-  font-size: 1.1rem;
-}
-
-.glyph-renderer--error pre {
-  color: var(--text-dim);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 12px;
-  white-space: pre-wrap;
-  max-width: 600px;
-}
-
-.glyph-spinner {
-  display: inline-block;
-  animation: glyph-spin 1.2s linear infinite;
-  font-size: 1.5rem;
-  color: var(--accent);
-}
-
-@keyframes glyph-spin {
-  to { transform: rotate(360deg); }
-}
-
-/* ─── Header ──────────────────────────────────────────────────────── */
-
-.glyph-renderer-header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 1rem;
-  padding-bottom: 1.25rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid var(--border);
-}
-
-.glyph-title {
-  margin: 0 0 0.5rem;
-  font-size: 1.75rem;
-  font-weight: 700;
-  color: var(--text-strong);
-  letter-spacing: -0.01em;
-  line-height: 1.2;
-}
-
-.glyph-meta {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  font-size: 0.8125rem;
-  color: var(--text-dim);
-}
-
-.glyph-status {
-  display: inline-flex;
-  align-items: center;
-  padding: 2px 8px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.glyph-status--draft     { background: var(--warning-soft); color: var(--warning); }
-.glyph-status--shipped   { background: var(--success-soft); color: var(--success); }
-.glyph-status--archived  { background: var(--bg-elev-2); color: var(--text-dim); }
-.glyph-status--review    { background: var(--accent-soft); color: var(--accent-2); }
-
-.glyph-slug {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.75rem;
-  color: var(--text-muted);
-}
-
-.glyph-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.glyph-comment-count {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--text-dim);
-  font-size: 0.8125rem;
-}
-
-.glyph-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  padding: 0.375rem 0.75rem;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  background: var(--bg-elev-2);
-  color: var(--text);
-  cursor: pointer;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  transition: background 120ms, border-color 120ms;
-}
-
-.glyph-btn:hover {
-  background: var(--bg-elev-3);
-  border-color: var(--border-strong);
-}
-
-.glyph-btn--ghost {
-  background: transparent;
-  border-color: transparent;
-  padding: 0.25rem 0.5rem;
-}
-
-.glyph-btn--primary {
-  background: var(--accent);
-  border-color: var(--accent);
-  color: white;
-}
-
-.glyph-btn--primary:hover {
-  background: var(--accent-2);
-}
-
-.glyph-btn--primary:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/* ─── Compiler warnings ──────────────────────────────────────────── */
-
-.glyph-errors {
-  background: var(--warning-soft);
-  border: 1px solid var(--warning);
-  border-radius: 6px;
-  padding: 0.75rem 1rem;
-  margin-bottom: 1rem;
-  font-size: 0.8125rem;
-  color: var(--text);
-}
-
-.glyph-errors ul {
-  margin: 0.5rem 0 0;
-  padding-left: 1.25rem;
-  color: var(--text-dim);
-}
-
-/* ─── Block stack ────────────────────────────────────────────────── */
-
-.glyph-blocks {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.glyph-block-placeholder {
-  padding: 0.75rem 1rem;
-  border: 1px dashed var(--border);
-  border-radius: 6px;
-  color: var(--text-dim);
-  font-size: 0.8125rem;
-}
-
-/* ─── Block components (RichText, Callout, etc.) ─────────────────── */
-
-.glyph-rich-text {
-  font-size: 0.9375rem;
-  line-height: 1.7;
-  color: var(--text);
-}
-
-.glyph-rich-text h1,
-.glyph-rich-text h2,
-.glyph-rich-text h3 {
-  color: var(--text-strong);
-  font-weight: 700;
-  margin: 1.5rem 0 0.5rem;
-  line-height: 1.25;
-}
-
-.glyph-rich-text h1 { font-size: 1.5rem; }
-.glyph-rich-text h2 { font-size: 1.25rem; }
-.glyph-rich-text h3 { font-size: 1.0625rem; }
-
-.glyph-rich-text p {
-  margin: 0.5rem 0;
-}
-
-.glyph-rich-text code {
-  background: var(--bg-elev-3);
-  padding: 0.125rem 0.375rem;
-  border-radius: 4px;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.85em;
-  color: var(--accent-2);
-}
-
-.glyph-rich-text pre {
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 0.875rem 1rem;
-  overflow-x: auto;
-  font-size: 0.8125rem;
-}
-
-.glyph-rich-text pre code {
-  background: transparent;
-  padding: 0;
-  color: var(--text);
-}
-
-.glyph-rich-text ul,
-.glyph-rich-text ol {
-  padding-left: 1.5rem;
-  margin: 0.5rem 0;
-}
-
-.glyph-rich-text li {
-  margin: 0.25rem 0;
-}
-
-.glyph-rich-text a {
-  color: var(--accent-2);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
-.glyph-rich-text blockquote {
-  border-left: 3px solid var(--accent);
-  margin: 0.75rem 0;
-  padding: 0.25rem 0 0.25rem 1rem;
-  color: var(--text-dim);
-}
-
-/* ─── Callout ────────────────────────────────────────────────────── */
-
-.glyph-callout {
-  display: flex;
-  gap: 0.75rem;
-  padding: 0.875rem 1rem;
-  border-radius: 8px;
-  border-left: 3px solid;
-  background: var(--bg-elev-2);
-  font-size: 0.9375rem;
-  line-height: 1.6;
-}
-
-.glyph-callout--info    { border-left-color: var(--info); background: rgba(96, 165, 250, 0.08); }
-.glyph-callout--warn    { border-left-color: var(--warning); background: var(--warning-soft); }
-.glyph-callout--success { border-left-color: var(--success); background: var(--success-soft); }
-.glyph-callout--danger  { border-left-color: var(--error); background: var(--error-soft); }
-
-.glyph-callout-icon {
-  flex-shrink: 0;
-  font-weight: 700;
-  font-size: 1rem;
-  width: 1.25rem;
-  text-align: center;
-}
-
-.glyph-callout--info    .glyph-callout-icon { color: var(--info); }
-.glyph-callout--warn    .glyph-callout-icon { color: var(--warning); }
-.glyph-callout--success .glyph-callout-icon { color: var(--success); }
-.glyph-callout--danger  .glyph-callout-icon { color: var(--error); }
-
-.glyph-callout-body {
-  flex: 1;
-  color: var(--text);
-}
-
-.glyph-callout-body p {
-  margin: 0;
-}
-
-/* ─── Checklist ─────────────────────────────────────────────────── */
-
-.glyph-checklist {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding: 0.875rem 1rem;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.glyph-checklist-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.875rem;
-  color: var(--text);
-}
-
-.glyph-checklist-item--checked {
-  color: var(--text-dim);
-  text-decoration: line-through;
-}
-
-.glyph-checklist-mark {
-  width: 14px;
-  height: 14px;
-  border: 1.5px solid var(--border-strong);
-  border-radius: 3px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.glyph-checklist-item--checked .glyph-checklist-mark {
-  background: var(--success);
-  border-color: var(--success);
-  color: var(--bg);
-}
-
-/* ─── Table ──────────────────────────────────────────────────────── */
-
-.glyph-table-wrap {
-  overflow-x: auto;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.glyph-table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.875rem;
-}
-
-.glyph-table th {
-  background: var(--bg-elev-2);
-  text-align: left;
-  padding: 0.625rem 0.875rem;
-  font-weight: 600;
-  font-size: 0.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-dim);
-  border-bottom: 1px solid var(--border);
-}
-
-.glyph-table td {
-  padding: 0.625rem 0.875rem;
-  border-top: 1px solid var(--border);
-  color: var(--text);
-}
-
-.glyph-table tr:first-child td {
-  border-top: none;
-}
-
-/* ─── CodeTabs ──────────────────────────────────────────────────── */
-
-.glyph-codetabs {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.glyph-codetabs-tabs {
-  display: flex;
-  background: var(--bg-elev-2);
-  border-bottom: 1px solid var(--border);
-  overflow-x: auto;
-}
-
-.glyph-codetabs-tab {
-  padding: 0.5rem 1rem;
-  background: transparent;
-  border: none;
-  color: var(--text-dim);
-  cursor: pointer;
-  font-size: 0.8125rem;
-  font-weight: 500;
-  border-bottom: 2px solid transparent;
-  white-space: nowrap;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-
-.glyph-codetabs-tab--active {
-  color: var(--accent-2);
-  border-bottom-color: var(--accent);
-}
-
-.glyph-codetabs-panel {
-  background: var(--bg-elev);
-}
-
-.glyph-codetabs-caption {
-  padding: 0.375rem 1rem;
-  font-size: 0.75rem;
-  color: var(--text-dim);
-  font-style: italic;
-}
-
-.glyph-codetabs-code {
-  margin: 0;
-  padding: 0.875rem 1rem;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.8125rem;
-  color: var(--text);
-  overflow-x: auto;
-  white-space: pre;
-}
-
-/* ─── Decision ──────────────────────────────────────────────────── */
-
-.glyph-decision {
-  padding: 0.875rem 1rem;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.glyph-decision-title,
-.glyph-decision-question {
-  margin: 0 0 0.75rem;
-  font-weight: 600;
-  font-size: 0.9375rem;
-  color: var(--text-strong);
-}
-
-.glyph-decision-options {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 0.625rem;
-}
-
-.glyph-decision-option {
-  padding: 0.625rem 0.75rem;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  position: relative;
-}
-
-.glyph-decision-option--recommended {
-  border-color: var(--success);
-  background: var(--success-soft);
-}
-
-.glyph-decision-option-label {
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: var(--text-strong);
-}
-
-.glyph-decision-option-detail {
-  font-size: 0.8125rem;
-  color: var(--text-dim);
-  line-height: 1.45;
-}
-
-.glyph-decision-option-badge {
-  position: absolute;
-  top: -8px;
-  right: 8px;
-  padding: 1px 6px;
-  background: var(--success);
-  color: var(--bg);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  border-radius: 3px;
-  text-transform: uppercase;
-}
-
-/* ─── OpenQuestions ─────────────────────────────────────────────── */
-
-.glyph-openquestions {
-  padding: 0.875rem 1rem;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.glyph-openquestions-item {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-}
-
-.glyph-openquestions-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text);
-}
-
-.glyph-openquestions-input,
-.glyph-openquestions-select {
-  padding: 0.5rem 0.625rem;
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  background: var(--bg);
-  color: var(--text);
-  font-size: 0.8125rem;
-  font-family: inherit;
-}
-
-/* ─── FileTree ──────────────────────────────────────────────────── */
-
-.glyph-filetree {
-  padding: 0.875rem 1rem;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-
-.glyph-filetree-title {
-  margin: 0 0 0.5rem;
-  font-size: 0.8125rem;
-  font-weight: 600;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.glyph-filetree-entry {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.8125rem;
-}
-
-.glyph-filetree-change {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 700;
-  flex-shrink: 0;
-}
-
-.glyph-filetree-change--added    { background: var(--success-soft); color: var(--success); }
-.glyph-filetree-change--modified { background: rgba(96, 165, 250, 0.15); color: var(--info); }
-.glyph-filetree-change--removed  { background: var(--error-soft); color: var(--error); }
-.glyph-filetree-change--renamed  { background: rgba(167, 139, 250, 0.15); color: var(--accent-2); }
-
-.glyph-filetree-path {
-  color: var(--text);
-}
-
-.glyph-filetree-note {
-  color: var(--text-dim);
-  font-style: italic;
-  font-family: inherit;
-}
-
-/* ─── Diff ──────────────────────────────────────────────────────── */
-
-.glyph-diff {
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.glyph-diff-header {
-  background: var(--bg-elev-2);
-  padding: 0.5rem 0.875rem;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.8125rem;
-  color: var(--text-dim);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-}
-
-.glyph-diff-lang {
-  background: var(--bg-elev-3);
-  padding: 1px 6px;
-  border-radius: 3px;
-  font-size: 10px;
-  text-transform: uppercase;
-}
-
-.glyph-diff-body {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-  font-size: 0.8125rem;
-}
-
-.glyph-diff--unified .glyph-diff-body {
-  display: block;
-}
-
-.glyph-diff-side {
-  border-right: 1px solid var(--border);
-  overflow-x: auto;
-}
-
-.glyph-diff-side:last-child {
-  border-right: none;
-}
-
-.glyph-diff-line {
-  display: flex;
-  padding: 0.0625rem 0.875rem;
-  white-space: pre;
-  line-height: 1.5;
-}
-
-.glyph-diff-line--add    { background: var(--success-soft); color: var(--success); }
-.glyph-diff-line--del    { background: var(--error-soft); color: var(--error); }
-.glyph-diff-line--ctx    { color: var(--text-dim); }
-.glyph-diff-mark {
-  width: 1.25rem;
-  flex-shrink: 0;
-  text-align: center;
-  font-weight: 700;
-  user-select: none;
-}
-
-/* ─── Stat ──────────────────────────────────────────────────────── */
-
-.glyph-stat {
-  display: inline-block;
-  padding: 0.75rem 1rem;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  min-width: 120px;
-}
-
-.glyph-stat-label {
-  font-size: 0.6875rem;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.25rem;
-}
-
-.glyph-stat-value {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-strong);
-  display: flex;
-  align-items: baseline;
-  gap: 0.375rem;
-}
-
-.glyph-stat-trend {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-
-.glyph-stat-trend--up   { color: var(--success); }
-.glyph-stat-trend--down { color: var(--error); }
-.glyph-stat-trend--flat { color: var(--text-dim); }
-
-.glyph-stat-hint {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: var(--text-dim);
-}
-
-/* ─── Workflow (SVG) ───────────────────────────────────────────── */
-
-.glyph-workflow {
-  padding: 1rem;
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  overflow-x: auto;
-}
-
-.glyph-workflow-svg {
-  display: block;
-  margin: 0 auto;
-}
-
-.glyph-workflow-node {
-  fill: var(--bg);
-  stroke: var(--info);
-  stroke-width: 1.5;
-}
-
-.glyph-workflow-node--decision {
-  fill: var(--bg);
-  stroke: var(--warning);
-}
-
-.glyph-workflow-node--note {
-  fill: var(--bg-elev-2);
-  stroke: var(--border-strong);
-  stroke-dasharray: 4 3;
-}
-
-.glyph-workflow-label {
-  fill: var(--text);
-  font-size: 12px;
-  font-family: 'Inter', system-ui, sans-serif;
-}
-
-.glyph-workflow-edge {
-  stroke: var(--text-dim);
-  stroke-width: 1.5;
-  fill: none;
-  marker-end: url(#glyph-arrowhead);
-}
-
-.glyph-workflow-edge-label {
-  fill: var(--text-dim);
-  font-size: 11px;
-  font-family: 'Inter', system-ui, sans-serif;
-}
-
-/* ─── Comment pins (overlay) ────────────────────────────────────── */
-
-.glyph-pin {
-  position: absolute;
-  width: 26px;
-  height: 26px;
-  margin-left: -13px;
-  margin-top: -13px;
-  background: var(--accent);
-  color: white;
-  border: 2px solid var(--bg);
-  border-radius: 50%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
-  z-index: 10;
-  transition: transform 120ms, background 120ms;
-}
-
-.glyph-pin:hover {
-  transform: scale(1.15);
-}
-
-.glyph-pin--active {
-  background: var(--accent-2);
-  transform: scale(1.15);
-}
-
-.glyph-pin-thread {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 50%;
-  transform: translateX(-50%);
-  min-width: 220px;
-  max-width: 320px;
-  background: var(--bg-elev-3);
-  border: 1px solid var(--border-strong);
-  border-radius: 8px;
-  padding: 0.625rem 0.75rem;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
-  font-size: 0.8125rem;
-  line-height: 1.45;
-  color: var(--text);
-  z-index: 20;
-}
-
-.glyph-pin-text {
-  margin-bottom: 0.375rem;
-}
-
-.glyph-pin-meta {
-  font-size: 0.6875rem;
-  color: var(--text-dim);
-}
-
-/* ─── Right-click context menu ──────────────────────────────────── */
-
-.glyph-ctx-menu {
-  position: fixed;
-  background: var(--bg-elev-3);
-  border: 1px solid var(--border-strong);
-  border-radius: 6px;
-  padding: 0.25rem;
-  min-width: 180px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
-  z-index: 100;
-}
-
-.glyph-ctx-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem 0.625rem;
-  background: transparent;
-  border: none;
-  color: var(--text);
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 0.8125rem;
-  text-align: left;
-}
-
-.glyph-ctx-item:hover {
-  background: var(--accent-soft);
-  color: var(--accent-2);
-}
-
-/* ─── Add-comment modal ─────────────────────────────────────────── */
-
-.glyph-modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: var(--overlay-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.glyph-modal {
-  background: var(--bg-elev-2);
-  border: 1px solid var(--border-strong);
-  border-radius: 12px;
-  padding: 1.5rem;
-  width: 90%;
-  max-width: 500px;
-  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
-}
-
-.glyph-modal h3 {
-  margin: 0 0 1rem;
-  font-size: 1rem;
-  font-weight: 600;
-  color: var(--text-strong);
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
-}
-
-.glyph-modal-textarea {
-  width: 100%;
-  padding: 0.625rem;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  background: var(--bg);
-  color: var(--text);
-  font-family: inherit;
-  font-size: 0.875rem;
-  resize: vertical;
-  min-height: 80px;
-}
-
-.glyph-modal-textarea:focus {
-  outline: none;
-  border-color: var(--accent);
-  box-shadow: 0 0 0 2px var(--accent-glow);
-}
-
-.glyph-modal-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-
-/* ─── Mockup ─────────────────────────────────────────────────────── */
-
-.glyph-mockup {
-  margin: 1.5rem 0;
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.glyph-mockup-title {
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--text-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 0.5rem;
-}
-
-.glyph-mockup-frame {
-  background: var(--bg-1);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  overflow: hidden;
-}
-
-.glyph-mockup-chrome {
-  display: flex;
-  gap: 6px;
-  padding: 0.5rem 0.75rem;
-  background: var(--bg-2);
-  border-bottom: 1px solid var(--border);
-}
-
-.glyph-mockup-chrome span {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  background: var(--border-strong);
-}
-
-.glyph-mockup-body {
-  padding: 1.5rem;
-  color: var(--text);
-  font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.glyph-mockup-body .mockup-card {
-  background: var(--bg-2);
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  padding: 1rem;
-  margin: 0.5rem 0;
-}
-
-.glyph-mockup-body button.mockup-btn {
-  background: var(--accent);
-  color: white;
-  border: none;
-  border-radius: var(--radius-sm);
-  padding: 0.5rem 1rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-}