/* * md — simple utility tokens. System fonts only, one neutral palette. * Light/dark via [data-mode] on — no theme variants. */ :root, [data-mode='light'] { --bg-page: #f6f8fa; --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-sunken: #eaeef2; --bg-glass: rgba(255, 255, 255, 0.92); --text-primary: #1f2328; --text-secondary: #59636e; --text-muted: #8c959f; --text-inverse: #ffffff; --accent: #0969da; --accent-soft: rgba(9, 105, 218, 0.12); --accent-strong: #0550ae; --accent-contrast: #ffffff; --border-subtle: #d0d7de; --border-strong: #afb8c1; --border-focus: #0969da; --code-bg: rgba(175, 184, 193, 0.2); --code-text: #1f2328; --code-block-bg: #f6f8fa; --code-block-text: #1f2328; --scrollbar-thumb: rgba(31, 35, 40, 0.28); --scrollbar-thumb-hover: rgba(31, 35, 40, 0.42); --scrollbar-track: transparent; --cm-heading: #0550ae; --cm-strong: #1f2328; --cm-emphasis: #1f2328; --cm-link: #0969da; --cm-code: #953800; --cm-code-bg: rgba(175, 184, 193, 0.25); --cm-quote: #59636e; --cm-muted: #8c959f; --cm-mark: #9a6700; --callout-note: #0969da; --callout-tip: #1a7f37; --callout-important: #8250df; --callout-warning: #9a6700; --callout-caution: #cf222e; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Menlo, Consolas, monospace; --font-display: var(--font-body); --font-serif: var(--font-body); --font-active: var(--font-body); --font-feature-ui: normal; --font-feature-mono: normal; --letter-spacing-ui: normal; --letter-spacing-heading: normal; --letter-spacing-display: normal; --letter-spacing-mono-caps: 0.04em; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-display: 2rem; --measure: 720px; --line-height: 1.6; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --motion-fast: 100ms; --motion-base: 150ms; --motion-slow: 200ms; --ease-out: ease; --ease-in-out: ease; --ease-spring: ease; --shadow-sm: 0 1px 2px rgba(31, 35, 40, 0.06); --shadow-md: 0 4px 12px rgba(31, 35, 40, 0.08); --shadow-lg: 0 8px 24px rgba(31, 35, 40, 0.12); --shadow-xl: 0 16px 48px rgba(31, 35, 40, 0.16); --shadow-ring: 0 0 0 2px var(--accent-soft); } [data-mode='dark'] { --bg-page: #0d1117; --bg-surface: #161b22; --bg-elevated: #161b22; --bg-sunken: #010409; --bg-glass: rgba(22, 27, 34, 0.92); --text-primary: #e6edf3; --text-secondary: #9198a1; --text-muted: #656d76; --accent: #4493f8; --accent-soft: rgba(68, 147, 248, 0.15); --accent-strong: #79c0ff; --border-subtle: #30363d; --border-strong: #484f58; --code-bg: rgba(110, 118, 129, 0.35); --code-text: #e6edf3; --code-block-bg: #161b22; --code-block-text: #e6edf3; --scrollbar-thumb: rgba(230, 237, 243, 0.22); --scrollbar-thumb-hover: rgba(230, 237, 243, 0.36); --scrollbar-track: transparent; --cm-heading: #79c0ff; --cm-strong: #e6edf3; --cm-emphasis: #e6edf3; --cm-link: #4493f8; --cm-code: #ffa657; --cm-code-bg: rgba(110, 118, 129, 0.35); --cm-quote: #9198a1; --cm-muted: #656d76; --cm-mark: #d4a72c; } /* Page surface — overrides the hard-coded fallback colors injected inline from index.html once tokens.css is loaded, so theme switches at runtime pick up the right values. */ html, body { margin: 0; min-height: 100vh; background: var(--bg-page); color: var(--text-primary); } /* Thin, theme-aware scrollbars */ * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; } *::-webkit-scrollbar-corner { background: transparent; } /* * Shiki dark-mode swap. * * Shiki is configured with `defaultColor: false` (see lib/render/code.ts), * which means every span carries BOTH --shiki-light + --shiki-light-bg * AND --shiki-dark + --shiki-dark-bg custom properties. The element itself * uses --shiki-light by default; under [data-mode="dark"] we promote the * dark variant to actual color + background. No JS, no re-highlight on * theme switch. * * The `!important` is load-bearing: Shiki writes inline style attributes * with the light theme values, so a CSS-specificity tie is not enough to * win against an inline style. */ [data-mode="dark"] .shiki, [data-mode="dark"] .shiki span { color: var(--shiki-dark) !important; background-color: var(--shiki-dark-bg) !important; } /* Fallback for unknown languages — matches our code-fallback class from * highlightCode(). Inherits .prose pre styling so it doesn't look like a * second-class citizen next to the highlighted variant. */ .code-fallback { /* Visual hooks live in .prose pre in Phase 6's Preview component. This * file is the dark-mode swap layer only; intentionally no positive * styling here. */ } /* * print.css — simple print layout * (@page omitted — lightningcss minifier does not support it) */ @media print { .app-header, .toc, .handle, .editor-pane, .toast-host { display: none !important; } .app, .app-main { display: block !important; height: auto !important; } .preview-host { padding: 0 !important; overflow: visible !important; } .prose { max-width: none !important; font-size: 11pt !important; color: #000 !important; } .prose pre, .prose code { background: #f5f5f5 !important; } .prose h1, .prose h2, .prose h3 { page-break-after: avoid; } .prose pre, .prose table { page-break-inside: avoid; } } /* * motion.css — prefers-reduced-motion overrides (P2 #2). * * Imported after component styles in main.ts so these rules win when the * user opts out of animation system-wide. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .backdrop.svelte-agedr { position: fixed; inset: 0; background: rgba(8, 6, 4, 0.42); display: grid; place-items: center; z-index: 50; animation: svelte-agedr-fade-in var(--motion-base) var(--ease-out); } .backdrop.drawer.svelte-agedr { display: flex; justify-content: flex-end; align-items: stretch; background: rgba(8, 6, 4, 0.32); } .backdrop.palette.svelte-agedr { display: grid; place-items: start center; padding-top: 14vh; z-index: 60; } .backdrop.elevated.svelte-agedr { z-index: 70; } @keyframes svelte-agedr-fade-in { from { opacity: 0; } to { opacity: 1; } } .shell.svelte-agedr { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-xl); color: var(--text-primary); animation: svelte-agedr-dialog-in var(--motion-base) var(--ease-spring); } .shell.drawer.svelte-agedr { position: relative; height: 100%; width: min(380px, 100vw); max-width: 100%; border-radius: 0; border-left: 1px solid var(--border-subtle); border-top: none; border-right: none; border-bottom: none; animation: svelte-agedr-slide-in var(--motion-slow) var(--ease-spring); overflow: hidden; display: flex; flex-direction: column; } .shell.palette.svelte-agedr { width: min(580px, 92vw); overflow: hidden; animation: svelte-agedr-drop-in var(--motion-base) var(--ease-spring); } @keyframes svelte-agedr-dialog-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes svelte-agedr-slide-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes svelte-agedr-drop-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .palette.svelte-1bm0yy4 { width: min(480px, 92vw); padding: var(--space-2); } .search.svelte-1bm0yy4 { width: 100%; padding: 10px 12px; border: none; border-bottom: 1px solid var(--border-subtle); font: inherit; font-size: var(--text-base); background: transparent; outline: none; } ul.svelte-1bm0yy4 { list-style: none; margin: 0; padding: var(--space-1); max-height: 50vh; overflow-y: auto; } li.svelte-1bm0yy4 button:where(.svelte-1bm0yy4) { display: flex; justify-content: space-between; width: 100%; padding: 8px 12px; border: none; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; color: var(--text-primary); } li.svelte-1bm0yy4 button.active:where(.svelte-1bm0yy4), li.svelte-1bm0yy4 button:where(.svelte-1bm0yy4):hover { background: var(--accent-soft); } kbd.svelte-1bm0yy4 { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } .empty.svelte-1bm0yy4 { padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); } .empty.svelte-1uba7bi { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); text-align: center; color: var(--text-secondary); } h2.svelte-1uba7bi { margin: 0; font-size: var(--text-xl); font-weight: 600; color: var(--text-primary); } p.svelte-1uba7bi { margin: 0; max-width: 28rem; line-height: 1.5; } code.svelte-1uba7bi { font-family: var(--font-mono); font-size: 0.9em; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: var(--radius-sm); } .link.svelte-1uba7bi { appearance: none; border: none; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; } .recents.svelte-1uba7bi { width: 100%; max-width: 28rem; margin-top: var(--space-4); text-align: left; } .recents.svelte-1uba7bi h3:where(.svelte-1uba7bi) { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .recents.svelte-1uba7bi ul:where(.svelte-1uba7bi) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .recents.svelte-1uba7bi button:where(.svelte-1uba7bi) { width: 100%; display: flex; align-items: center; gap: var(--space-2); padding: 8px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: inherit; font-size: var(--text-sm); color: var(--text-primary); text-align: left; cursor: pointer; } .recents.svelte-1uba7bi button:where(.svelte-1uba7bi):hover { background: var(--bg-surface); border-color: var(--border-subtle); } .pin.svelte-1uba7bi { color: var(--accent); font-size: var(--text-xs); } .title.svelte-1uba7bi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .file-menu.svelte-1n9owz { position: relative; } .btn-icon.svelte-1n9owz { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } .btn-icon.svelte-1n9owz:hover { color: var(--text-primary); background: var(--bg-surface); } .btn-icon.svelte-1n9owz:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .menu.svelte-1n9owz { position: absolute; right: 0; top: calc(100% + 4px); min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-1); z-index: 30; display: flex; flex-direction: column; } .menu.svelte-1n9owz button:where(.svelte-1n9owz) { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); text-align: left; border: none; background: transparent; padding: 8px 12px; border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; } .menu.svelte-1n9owz button:where(.svelte-1n9owz):hover { background: var(--bg-sunken); } .menu.svelte-1n9owz button.danger:where(.svelte-1n9owz) { color: var(--callout-caution); } .menu.svelte-1n9owz button.danger:where(.svelte-1n9owz):hover { background: color-mix(in srgb, var(--callout-caution) 12%, transparent); } kbd.svelte-1n9owz { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); } .divider.svelte-1n9owz { height: 1px; margin: var(--space-1) 0; background: var(--border-subtle); } .section-label.svelte-1n9owz { padding: 6px 12px 2px; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .recent-item.svelte-1n9owz { /* Recents reuse the menu button base style, but the title can be long so we clamp with ellipsis. The meta column (relative time) stays right-aligned and never wraps. */ gap: var(--space-2) !important; } .recent-title.svelte-1n9owz { display: inline-flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .recent-title.svelte-1n9owz .pin { color: var(--accent); flex-shrink: 0; } .recent-meta.svelte-1n9owz { font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; } .pane-toolbar.svelte-1kjrjq5 { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: color-mix(in srgb, var(--bg-surface) 88%, transparent); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); backdrop-filter: blur(6px); z-index: 5; opacity: 0.55; transition: opacity var(--motion-fast) var(--ease-out); } .pane-toolbar.svelte-1kjrjq5:hover, .pane-toolbar.svelte-1kjrjq5:focus-within { opacity: 1; } .btn.svelte-1kjrjq5 { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } .btn.svelte-1kjrjq5:hover { color: var(--text-primary); background: var(--bg-sunken); } .btn.danger.svelte-1kjrjq5:hover { color: var(--callout-caution); background: color-mix(in srgb, var(--callout-caution) 14%, transparent); } .btn.svelte-1kjrjq5:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } @media (max-width: 768px) { .pane-toolbar.svelte-1kjrjq5 { top: var(--space-2); right: var(--space-2); } } .preview-host.svelte-1x4flvo { height: 100%; min-width: 0; overflow-x: auto; overflow-y: auto; background: var(--bg-surface); padding: var(--space-5); } .preview-host.wide.svelte-1x4flvo { padding: var(--space-5) var(--space-6); } .prose.svelte-1x4flvo { margin: 0 auto; line-height: var(--line-height); color: var(--text-primary); font-family: var(--font-body); min-width: 0; width: 100%; /* * Scoped type scale — em-based so the inline `font-size` set on this * element (driven by settings.previewZoom) scales every heading + * caption + caption together with body copy. The app-wide --text-* * tokens in tokens.css remain rem-based; these locals shadow them * only inside .prose. Settings drawer's "Text size" presets work * because of this scoping. */ --text-xs: 0.75em; --text-sm: 0.875em; --text-base: 1em; --text-lg: 1.125em; --text-xl: 1.25em; --text-2xl: 1.5em; --text-3xl: 1.875em; --text-4xl: 2.25em; } .prose.wide.svelte-1x4flvo { max-width: min(100%, 960px); overflow-x: auto; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-family: var(--font-body); font-weight: 600; color: var(--text-primary); line-height: 1.25; margin: var(--space-5) 0 var(--space-3); } .prose h1 { font-size: var(--text-3xl); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } .prose h1:first-child { margin-top: 0; } .prose h2 { font-size: var(--text-2xl); padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-subtle); } .prose h3 { font-size: var(--text-xl); } .prose h4 { font-size: var(--text-lg); } .prose p { margin: 0 0 var(--space-4); } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .prose blockquote { margin: var(--space-4) 0; padding: 0 var(--space-4); border-left: 4px solid var(--border-strong); color: var(--text-secondary); } .prose blockquote p:last-child { margin-bottom: 0; } .prose aside[data-callout] { --callout-color: var(--accent); margin: var(--space-4) 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-left: 4px solid var(--callout-color); border-radius: var(--radius-sm); background: var(--bg-surface); } .prose aside[data-callout] .callout-label { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--letter-spacing-mono-caps); color: var(--callout-color); margin-bottom: var(--space-2); } .prose aside[data-callout='note'] { --callout-color: var(--callout-note); } .prose aside[data-callout='tip'] { --callout-color: var(--callout-tip); } .prose aside[data-callout='important'] { --callout-color: var(--callout-important); } .prose aside[data-callout='warning'] { --callout-color: var(--callout-warning); } .prose aside[data-callout='caution'] { --callout-color: var(--callout-caution); } .prose strong { color: var(--text-primary); font-weight: 600; } .prose code { background: var(--code-bg); color: var(--code-text); padding: 0.15em 0.35em; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.9em; } .prose a code { color: var(--accent); } .prose pre { background: var(--code-block-bg); color: var(--code-block-text); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); overflow-x: auto; margin: var(--space-4) 0; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.5; } .prose pre code { background: transparent; padding: 0; font-size: inherit; } .prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: 1.5em; } .prose li { margin: var(--space-1) 0; } /* Wide tables (lots of columns, long content) used to crush one column to fit the prose measure, breaking unbreakable strings mid-word — e.g. "printurr-server" turning into "printurr-serve" + "r" on the next line. Two fixes work together: 1. The render pipeline wraps every table in
so wide tables scroll horizontally inside the prose width instead of column-crushing. 2. Cells use overflow-wrap: break-word (not "anywhere") and inline code drops the old word-break: break-all, so words only break at natural boundaries. Combined with #1, anything that genuinely doesn't fit triggers a scrollbar instead of mid-word breaks. */ .prose .table-scroll { overflow-x: auto; margin: var(--space-4) 0; border-radius: var(--radius-sm); } .prose .table-scroll table { margin: 0; } .prose table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; font-size: var(--text-sm); table-layout: auto; } .prose th, .prose td { border: 1px solid var(--border-subtle); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; overflow-wrap: break-word; word-break: normal; } .prose th { background: var(--bg-sunken); font-weight: 600; white-space: nowrap; } .prose td code { white-space: normal; overflow-wrap: break-word; word-break: normal; } .prose img { max-width: 100%; height: auto; border-radius: var(--radius-sm); } .prose hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-5) 0; } .prose .mermaid-placeholder { display: flex; justify-content: center; margin: var(--space-4) 0; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); } @media (max-width: 768px) { .preview-host.svelte-1x4flvo { padding: var(--space-4); } } .confirm.svelte-1efofyg { padding: var(--space-5); width: min(400px, 92vw); } h2.svelte-1efofyg { margin: 0 0 var(--space-3); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); } p.svelte-1efofyg { margin: 0 0 var(--space-5); font-size: var(--text-sm); line-height: 1.5; color: var(--text-secondary); } .actions.svelte-1efofyg { display: flex; justify-content: flex-end; gap: var(--space-2); } .actions.svelte-1efofyg button:where(.svelte-1efofyg) { padding: 8px 16px; border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; } .cancel.svelte-1efofyg { border: 1px solid var(--border-subtle); background: var(--bg-page); color: var(--text-primary); } .cancel.svelte-1efofyg:hover { background: var(--bg-sunken); } .ok.svelte-1efofyg { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-contrast); } .ok.danger.svelte-1efofyg { border-color: var(--callout-caution); background: var(--callout-caution); color: #fff; } .ok.svelte-1efofyg:hover { filter: brightness(1.05); } .panel.svelte-182y78p { display: flex; flex-direction: column; width: 100%; height: 100%; padding: var(--space-4) var(--space-5); overflow-y: auto; box-sizing: border-box; } header.svelte-182y78p { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); flex-shrink: 0; } h2.svelte-182y78p { margin: 0; font-size: var(--text-xl); font-weight: 600; } h3.svelte-182y78p { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .row.svelte-182y78p { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-1); } .zoom-value.svelte-182y78p { font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); } section.svelte-182y78p { margin-bottom: var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--border-subtle); } section.svelte-182y78p:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .close.svelte-182y78p { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-sm); background: transparent; font-size: var(--text-lg); line-height: 1; color: var(--text-secondary); cursor: pointer; } .close.svelte-182y78p:hover { background: var(--bg-sunken); color: var(--text-primary); } .hint.svelte-182y78p { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-muted); line-height: 1.4; } .stops.svelte-182y78p { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-3); } .stops.svelte-182y78p button:where(.svelte-182y78p) { padding: 8px 4px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); color: var(--text-secondary); font: inherit; font-size: var(--text-xs); font-weight: 500; cursor: pointer; } .stops.svelte-182y78p button:where(.svelte-182y78p):hover { border-color: var(--border-strong); color: var(--text-primary); } .stops.svelte-182y78p button.active:where(.svelte-182y78p) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } input[type='range'].svelte-182y78p { width: 100%; margin: 0 0 var(--space-3); accent-color: var(--accent); } .sample.svelte-182y78p { padding: var(--space-3) var(--space-4); background: var(--bg-page); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); color: var(--text-primary); line-height: 1.55; /* Local em scale matches Preview.svelte's .prose tokens. */ --text-base: 1em; --text-sm: 0.875em; --text-lg: 1.125em; } .sample.svelte-182y78p h4:where(.svelte-182y78p) { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; } .sample.svelte-182y78p p:where(.svelte-182y78p) { margin: 0; font-size: var(--text-base); } .sample.svelte-182y78p code:where(.svelte-182y78p) { background: var(--code-bg); color: var(--code-text); font-family: var(--font-mono); font-size: 0.9em; padding: 0.1em 0.35em; border-radius: var(--radius-sm); } .sample.svelte-182y78p strong:where(.svelte-182y78p) { font-weight: 600; } .danger-section.svelte-182y78p { margin-top: auto; padding-top: var(--space-5); } .danger.svelte-182y78p { width: 100%; padding: 10px; border: 1px solid var(--callout-caution); border-radius: var(--radius-sm); background: transparent; color: var(--callout-caution); font: inherit; font-weight: 500; cursor: pointer; } .danger.svelte-182y78p:hover { background: color-mix(in srgb, var(--callout-caution) 12%, transparent); } .dialog.svelte-kpx1bz { padding: var(--space-5); width: min(480px, 92vw); } header.svelte-kpx1bz { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); } h2.svelte-kpx1bz { margin: 0; font-size: var(--text-lg); font-weight: 600; } .close.svelte-kpx1bz { border: none; background: none; font: inherit; color: var(--text-secondary); cursor: pointer; } .hint.svelte-kpx1bz { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); } .url.svelte-kpx1bz { width: 100%; padding: 10px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--bg-page); color: var(--text-primary); } .meta.svelte-kpx1bz { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-xs); color: var(--text-muted); } .actions.svelte-kpx1bz { display: flex; gap: var(--space-2); } /* Default = secondary button. The Done/Close fell back to the user-agent default text color before — `font: inherit` does not carry `color`, only typography metrics — so on dark mode it rendered as near-black text on a near-black surface and was effectively invisible. Setting `color: var(--text-primary)` explicitly + a hover state restores parity with ConfirmDialog.cancel. */ .actions.svelte-kpx1bz button:where(.svelte-kpx1bz) { padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); background: var(--bg-page); color: var(--text-primary); font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background var(--motion-fast), border-color var(--motion-fast); } .actions.svelte-kpx1bz button:where(.svelte-kpx1bz):hover { background: var(--bg-sunken); border-color: var(--border-strong); } .actions.svelte-kpx1bz button:where(.svelte-kpx1bz):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .primary.svelte-kpx1bz { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important; } .primary.svelte-kpx1bz:hover { filter: brightness(1.05); } .error.svelte-kpx1bz { color: var(--callout-caution); font-size: var(--text-sm); margin-bottom: var(--space-3); } /* TOC sits transparent on the page sheet — no panel background, no dividing border. Two-card minimalism: only the editor + preview panes carry surface chrome; everything else is on the bg. */ .toc.svelte-ym1em { width: 220px; min-width: 0; flex-shrink: 0; background: transparent; overflow-y: auto; padding: var(--space-3) var(--space-2) var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-3); } .toc-head.svelte-ym1em { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .toc-empty.svelte-ym1em { margin: 0; font-size: var(--text-sm); color: var(--text-muted); } .toc-list.svelte-ym1em, .toc-children.svelte-ym1em { list-style: none; margin: 0; padding: 0; } /* Tree-line: each nested level gets a vertical guide on the left so the parent → child relationship is visible at a glance. The indent comes from the nested
    structure itself (not heading-level math) — that way headings that skip a level (h1 → h3) collapse cleanly into the nearest ancestor instead of leaving a visual gap. */ .toc-children.svelte-ym1em { margin-left: 9px; padding-left: 11px; border-left: 1px solid var(--border-subtle); } .toc-item.svelte-ym1em button:where(.svelte-ym1em) { display: block; width: 100%; text-align: left; padding: 6px 8px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); line-height: 1.4; cursor: pointer; } .toc-item.svelte-ym1em button:where(.svelte-ym1em):hover { background: var(--bg-sunken); color: var(--text-primary); } .toc-item.svelte-ym1em button.active:where(.svelte-ym1em) { background: var(--accent-soft); color: var(--accent); font-weight: 500; } /* Make the active item's tree-line segment match the accent so the path to the current heading is faintly highlighted, not just the leaf. */ .toc-item.svelte-ym1em:has(> button.active:where(.svelte-ym1em)) > .toc-children:where(.svelte-ym1em), .toc-item.svelte-ym1em:has(.toc-children:where(.svelte-ym1em) button.active:where(.svelte-ym1em)) > .toc-children:where(.svelte-ym1em) { border-left-color: var(--accent-soft); } @media (max-width: 1024px) { .toc.svelte-ym1em { display: none; } } .toast-host.svelte-1qvompp { position: fixed; bottom: var(--space-4); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } .toast.svelte-1qvompp { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0; padding: 8px 14px; background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); color: var(--text-primary); } .toast.has-action.svelte-1qvompp { pointer-events: auto; } .msg.svelte-1qvompp { white-space: nowrap; } .action.svelte-1qvompp { appearance: none; border: none; background: transparent; padding: 2px 6px; border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--accent); cursor: pointer; } .action.svelte-1qvompp:hover { background: var(--accent-soft); } .action.svelte-1qvompp:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; background: var(--bg-page); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } * { box-sizing: border-box; } body.drag-over { outline: 2px dashed var(--accent); outline-offset: -4px; } .app.svelte-1n46o8q { display: grid; grid-template-rows: auto 1fr; height: 100dvh; width: 100%; max-width: 100vw; overflow: hidden; background: var(--bg-page); } /* Header sits transparent directly on the page sheet — no panel chrome. The two-card minimalism (editor card + preview card on a plain sheet) means everything except those two surfaces must blend into the bg. Layout: brand on the left, global search expanding in the center, action cluster on the right (segmented + FileMenu + theme + Settings). */ .app-header.svelte-1n46o8q { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-height: 44px; background: transparent; flex-shrink: 0; } .header-left.svelte-1n46o8q { display: flex; align-items: center; gap: var(--space-2); min-width: 0; justify-self: start; } .brand-logo.svelte-1n46o8q { display: block; flex-shrink: 0; border-radius: 6px; background: #ffffff; padding: 3px; box-sizing: content-box; border: 1px solid var(--border-subtle); } .brand.svelte-1n46o8q { font-size: var(--text-lg); font-weight: 700; color: var(--text-primary); } .badge.svelte-1n46o8q { font-size: var(--text-xs); font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--radius-pill); } /* Global search input — pill-shaped, surface-toned so it pops on the otherwise-transparent header sheet. Centered in the header and constrained to a max width so it doesn't get absurdly wide on ultrawide displays. */ .search-wrap.svelte-1n46o8q { display: flex; align-items: center; gap: 4px; width: 100%; max-width: 520px; justify-self: center; padding: 4px 8px 4px 10px; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .search-wrap.svelte-1n46o8q:focus-within { border-color: var(--accent); box-shadow: var(--shadow-ring); } .search-wrap.svelte-1n46o8q .search-icon { color: var(--text-muted); flex-shrink: 0; } .search-input.svelte-1n46o8q { flex: 1; min-width: 0; border: none; padding: 4px 4px; background: transparent; color: var(--text-primary); font: inherit; font-size: var(--text-sm); outline: none; } .search-input.svelte-1n46o8q::placeholder { color: var(--text-muted); } /* Hide the native search clear (the ✕) — we provide our own. */ .search-input.svelte-1n46o8q::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } .search-count.svelte-1n46o8q { font-size: var(--text-xs); color: var(--text-muted); padding: 0 6px; font-variant-numeric: tabular-nums; min-width: 44px; text-align: center; border-left: 1px solid var(--border-subtle); flex-shrink: 0; } .search-nav.svelte-1n46o8q { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); cursor: pointer; flex-shrink: 0; } .search-nav.svelte-1n46o8q:hover:not(:disabled) { background: var(--bg-sunken); color: var(--text-primary); } .search-nav.svelte-1n46o8q:disabled { opacity: 0.4; cursor: not-allowed; } .search-nav.svelte-1n46o8q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .segmented.svelte-1n46o8q { display: inline-flex; padding: 2px; background: var(--bg-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .seg-btn.svelte-1n46o8q { appearance: none; border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; padding: 6px 14px; border-radius: calc(var(--radius-md) - 2px); cursor: pointer; } .seg-btn.svelte-1n46o8q:hover { color: var(--text-primary); } .seg-btn.active.svelte-1n46o8q { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); } .seg-btn.svelte-1n46o8q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .header-right.svelte-1n46o8q { display: flex; align-items: center; gap: var(--space-1); justify-self: end; } .btn-icon.svelte-1n46o8q { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-secondary); cursor: pointer; } .btn-icon.svelte-1n46o8q:hover { color: var(--text-primary); background: var(--bg-surface); } .btn-icon.svelte-1n46o8q:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Main canvas is the sheet. We pad it on three sides so the editor + preview cards float with a margin, and use grid `gap` instead of a pane divider so the breathing room between cards IS the separator. */ .app-main.svelte-1n46o8q { display: grid; min-height: 0; min-width: 0; width: 100%; overflow: hidden; background: transparent; padding: 0 var(--space-3) var(--space-3); gap: var(--space-3); } /* Panes become cards on the sheet — bg-surface, subtle border, rounded corners with overflow:hidden so the inner scroll containers (CodeMirror, the preview scroller, the floating PaneToolbar) all clip to the rounded shape. */ .pane.svelte-1n46o8q { min-height: 0; min-width: 0; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .editor-loading.svelte-1n46o8q { height: 100%; display: grid; place-items: center; } .editor-loading.svelte-1n46o8q .spinner:where(.svelte-1n46o8q) { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-subtle); border-top-color: var(--accent); animation: svelte-1n46o8q-spin 750ms linear infinite; } @keyframes svelte-1n46o8q-spin { to { transform: rotate(360deg); } } .preview-pane.svelte-1n46o8q { position: relative; } /* Header search highlight inside the rendered preview. Two tiers: - All matches get a soft accent tint so users see the density of hits at a glance. - The CURRENTLY-FOCUSED match (the one Enter / next-button will jump from) gets a solid accent fill + outline ring so it stands out unmistakably even when there are 10+ matches on screen. The mark wrapper is set up by lib/previewHighlight.ts; the data-active attribute is toggled by setActiveMark in App.svelte. */ .prose mark[data-search] { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text-primary); padding: 0 2px; border-radius: 3px; transition: background var(--motion-fast), box-shadow var(--motion-fast); } .prose mark[data-search][data-active] { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 0 0 2px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); font-weight: 600; } .prose mark[data-search][data-active] code { color: inherit; background: color-mix(in srgb, var(--accent-contrast) 18%, transparent); } @media (pointer: coarse) and (max-width: 768px) { .app-header.svelte-1n46o8q { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--space-2); } .header-left.svelte-1n46o8q { grid-column: 1; grid-row: 1; } .header-right.svelte-1n46o8q { grid-column: 2; grid-row: 1; gap: var(--space-1); } /* Mobile: search spans full width on row 2. The segmented (Edit / Preview toggle) moves into the right cluster on row 1 — it's small enough to fit alongside the icons. */ .search-wrap.svelte-1n46o8q { grid-column: 1 / -1; grid-row: 2; max-width: 100%; justify-self: stretch; } .app-main.svelte-1n46o8q { grid-template-columns: 1fr !important; padding: 0 var(--space-2) var(--space-2); gap: var(--space-2); } .editor-pane.svelte-1n46o8q, .preview-pane.svelte-1n46o8q { display: none; } .app[data-mode-active='write'].svelte-1n46o8q .editor-pane:where(.svelte-1n46o8q) { display: block; } .app[data-mode-active='read'].svelte-1n46o8q .preview-pane:where(.svelte-1n46o8q) { display: block; } }