collabmd 0.1.49 → 0.1.52

package/src/client/styles/layout/sidebar.css

@@ -150,6 +150,48 @@
   font-size: var(--text-caption);
 }
 
+.vault-switcher-button {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+  min-height: var(--control-h-sm);
+  padding: var(--space-1) var(--space-3);
+  border: 1px solid var(--color-divider);
+  border-radius: var(--radius-md);
+  background: var(--color-surface-offset);
+  color: var(--color-text);
+  font-size: var(--text-xs);
+  font-weight: 600;
+}
+
+.vault-switcher-button:hover {
+  background: var(--color-surface-offset-2);
+}
+
+.vault-switcher-button:focus {
+  border-color: var(--color-primary);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.vault-switcher-name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vault-switcher-icon,
+.vault-switcher-chevron {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-muted);
+}
+
 @keyframes pulse-dot {
   0%,
   100% {
@@ -252,6 +294,8 @@ body.is-file-tree-dragging .file-tree-root-drop-zone {
   cursor: pointer;
   user-select: none;
   text-overflow: ellipsis;
+  content-visibility: auto;
+  contain-intrinsic-size: auto 28px;
   transition: background var(--transition-interactive), color var(--transition-interactive);
   font-family: var(--font-body);
   font-size: var(--text-ui-sm);
@@ -307,8 +351,18 @@ body.is-file-tree-dragging * {
   font-weight: 600;
 }
 
-.file-tree-chevron {
+.file-tree-chevron,
+.file-tree-icon {
   flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+  background-color: currentColor;
+  -webkit-mask: var(--file-tree-glyph) center / contain no-repeat;
+  mask: var(--file-tree-glyph) center / contain no-repeat;
+}
+
+.file-tree-chevron {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
@@ -316,11 +370,46 @@ body.is-file-tree-dragging * {
   transform: rotate(90deg);
 }
 
-.file-tree-icon {
-  flex-shrink: 0;
+.file-tree-dir .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
+}
+
+.file-tree-file .file-tree-icon {
   opacity: 0.5;
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='base'] .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M7 4h7l5 5v11a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h6'/%3E%3Cpath d='M8 9h3'/%3E%3C/svg%3E");
 }
 
+.file-tree-file[data-kind='drawio'] .file-tree-icon,
+.file-tree-file[data-kind='plantuml'] .file-tree-icon,
+.file-tree-file[data-kind='structurizr'] .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='7' height='6' rx='1'/%3E%3Crect x='14' y='4' width='7' height='6' rx='1'/%3E%3Crect x='8.5' y='14' width='7' height='6' rx='1'/%3E%3Cpath d='M10 7h4'/%3E%3Cpath d='M17.5 10v2.5'/%3E%3Cpath d='M6.5 10v2.5'/%3E%3Cpath d='M6.5 12.5h11'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='excalidraw'] .file-tree-icon {
+  color: var(--color-primary);
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M12 19l7-7 3 3-7 7-3-3z'/%3E%3Cpath d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/%3E%3Cpath d='M2 2l7.586 7.586'/%3E%3Ccircle cx='11' cy='11' r='2'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='image'] .file-tree-icon {
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.5'/%3E%3Cpath d='m21 16-5-5L7 20'/%3E%3Cpath d='m14 14 2 2'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='pdf'] .file-tree-icon {
+  color: var(--color-danger);
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cpath d='M8 15h8'/%3E%3Cpath d='M8 18h5'/%3E%3C/svg%3E");
+}
+
+.file-tree-file[data-kind='mermaid'] .file-tree-icon {
+  color: oklch(from var(--color-primary) calc(l * 0.96) calc(c * 0.86) 215);
+  --file-tree-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 7.5c0-1.38 1.12-2.5 2.5-2.5 1.04 0 1.93.64 2.3 1.56A2.5 2.5 0 0 1 14 8.5v1'/%3E%3Cpath d='M19 16.5c0 1.38-1.12 2.5-2.5 2.5-1.04 0-1.93-.64-2.3-1.56A2.5 2.5 0 0 1 10 15.5v-1'/%3E%3Cpath d='M8 10.5h8'/%3E%3Cpath d='M8 13.5h8'/%3E%3Cpath d='M10 8.5v7'/%3E%3Cpath d='M14 8.5v7'/%3E%3C/svg%3E");
+}
+
+
+
 .file-tree-name {
   flex: 1 1 auto;
   min-width: 0;
@@ -400,6 +489,9 @@ body.is-file-tree-dragging * {
 
 .create-menu {
   position: fixed;
+  /* Override UA popover styles (inset/margin/width) so explicit coordinates win. */
+  inset: auto;
+  margin: 0;
   z-index: 1010;
   width: min(240px, calc(100vw - 24px));
   padding: 6px;

package/src/client/styles/style.css

@@ -1,3 +1,5 @@
+@import './base.css';
+
 @import './foundation/tokens.css';
 @import './foundation/themes.css';
 @import './foundation/utilities.css';
@@ -11,31 +13,13 @@
 @import './components/states.css';
 @import './components/surfaces.css';
 @import './components/scrollbars.css';
-@import './features/git-branch.css';
-@import './features/git-files.css';
-@import './features/git-history.css';
-@import './features/diff-toolbar.css';
-@import './features/diff-commit.css';
-@import './features/diff-lines.css';
-@import './features/diff-special.css';
 @import './features/collaboration-presence.css';
 @import './features/collaboration-chat.css';
 @import './features/collaboration-dialogs.css';
 @import './features/agent-connection.css';
-@import './features/preview-markdown.css';
-@import './features/media-lightbox.css';
-@import './features/embedded-preview.css';
-@import './features/comments-drawer.css';
-@import './features/comment-overview.css';
-@import './features/comment-overlays.css';
-@import './features/comment-card.css';
-@import './features/comment-markdown.css';
-@import './features/backlinks.css';
+@import './features/team-settings.css';
 @import './features/outline.css';
 @import './layout/view-modes.css';
 @import './components/feedback.css';
 @import './layout/responsive.css';
-@import './overrides/highlightjs.css';
 @import './overrides/codemirror.css';
-@import './features/quick-switcher.css';
-@import './features/diagram-preview.css';

package/src/client/styles/surfaces/landing-page.css

@@ -0,0 +1,260 @@
+/* Standalone landing page. Loaded only by landing/styles.css. */
+:root {
+  --landing-font: 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
+  --landing-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+html { scroll-behavior: smooth; scroll-padding-top: 96px; }
+body { background: var(--color-bg); color: var(--color-text); font: 16px/1.65 var(--landing-font); -webkit-font-smoothing: antialiased; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; cursor: pointer; }
+img, video { display: block; width: 100%; height: auto; }
+svg { display: block; }
+button, a { -webkit-tap-highlight-color: transparent; }
+:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 5px; }
+::selection { background: var(--color-primary-highlight); }
+[hidden] { display: none !important; }
+.wrap { width: min(1320px, 100% - 96px); margin-inline: auto; }
+.skip-link { position: fixed; top: 12px; left: 16px; padding: 10px 16px; background: var(--color-text); color: var(--color-text-inverse); z-index: 200; transform: translateY(-180%); }
+.skip-link:focus { transform: none; }
+.eyebrow, .feature-index, .preview-label { font: 11px/1.5 var(--landing-mono); letter-spacing: .075em; text-transform: uppercase; }
+.eyebrow { color: var(--color-primary); margin-bottom: 20px; }
+h1, h2, h3 { line-height: 1.1; letter-spacing: -.045em; font-weight: 650; text-wrap: balance; }
+h2 { font-size: clamp(30px, 3.1vw, 46px); }
+h3 { font-size: 23px; }
+p { text-wrap: pretty; }
+.section { padding-block: 104px; }
+.section-head { margin-bottom: 44px; }
+.section-head > p:not(.eyebrow) { max-width: 43ch; margin-top: 24px; color: var(--color-text-muted); }
+.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
+.text-link > span { transition: transform .2s; }
+.text-link:hover { color: var(--color-primary); }
+.text-link:hover > span { transform: translateX(4px); }
+.landing-button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 5px; font-size: 14px; font-weight: 600; transition: background .2s, transform .2s; }
+.landing-button:hover { transform: translateY(-2px); }
+.landing-button-primary { background: var(--color-primary); color: var(--color-primary-contrast); }
+.landing-button-primary:hover { background: var(--color-primary-hover); }
+.landing-button-secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); }
+.landing-button-secondary:hover { background: var(--color-surface-offset); }
+
+/* Navigation */
+.nav { position: sticky; top: 0; z-index: 100; background: var(--surface-overlay-raised); backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-divider); }
+.nav-inner { display: flex; align-items: center; gap: 26px; height: 80px; }
+.nav-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 750; letter-spacing: -.055em; }
+.nav-mark { width: 30px; height: 30px; color: var(--color-primary); }
+.nav-links { display: flex; gap: 26px; margin-left: auto; }
+.nav-links a, .nav-github { padding-block: 12px; font-size: 13px; font-weight: 550; color: var(--color-text-muted); }
+.nav-links a:hover, .nav-links .is-active, .nav-github:hover { color: var(--color-primary); }
+.nav-links .is-active { box-shadow: inset 0 -2px var(--color-primary); }
+.nav-github { margin-left: 20px; }
+.nav-demo { min-height: 42px; padding: 9px 16px; font-size: 13px; }
+.nav-menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface); color: var(--color-text); font-size: 22px; }
+
+/* One visual plane: the promise and the actual workspace. */
+.hero { overflow: clip; background: var(--surface-accent-subtle); border-bottom: 1px solid var(--color-divider); }
+.hero-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 44px; align-items: center; min-height: min(740px, calc(100svh - 80px)); padding-block: 48px; }
+.hero-title { font-size: clamp(66px, 7.2vw, 108px); letter-spacing: -.075em; margin-left: -.045em; }
+.hero-promise { margin-top: 26px; font-size: clamp(34px, 3.4vw, 49px); font-weight: 550; line-height: 1.12; letter-spacing: -.05em; }
+.hero-promise em { font-style: normal; color: var(--color-primary); }
+.hero-sub { max-width: 38ch; margin-top: 24px; color: var(--color-text-muted); font-size: 16px; }
+.hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
+.hero-note { font-size: 12px; margin-top: 22px; color: var(--color-text-muted); }
+.hero-shot { width: 125%; margin-top: 26px; }
+.preview-label { display: flex; justify-content: space-between; padding-bottom: 16px; color: var(--color-text-muted); }
+.hero-shot img { border: 1px solid var(--color-border); border-radius: 7px; box-shadow: var(--shadow-media-stage); }
+figcaption { margin-top: 20px; font-size: 11px; color: var(--color-text-muted); }
+.hero-shot figcaption { max-width: 70%; }
+
+/* Outcomes and the supported workflow. */
+.benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
+.benefit { padding-top: 24px; border-top: 1px solid var(--color-border); }
+.feature-index { display: block; color: var(--color-text-muted); margin-bottom: 26px; }
+.benefit p { margin-top: 18px; color: var(--color-text-muted); font-size: 14px; }
+.benefit .benefit-detail { font-size: 12px; }
+.benefit .text-link { margin-top: 22px; color: var(--color-primary); }
+.workflow-detail { margin-top: 76px; padding: 40px; display: grid; grid-template-columns: 1fr 1.3fr; gap: 60px; background: var(--color-surface-offset-2); }
+.workflow-detail h3 { font-size: 33px; }
+.workflow-detail p:not(.eyebrow) { max-width: 36ch; color: var(--color-text-muted); font-size: 14px; margin-top: 18px; }
+.format-list { align-self: center; }
+.format-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 22px; padding-block: 20px; }
+.format-list > div + div { border-top: 1px solid var(--color-border); }
+.format-list dt { font-size: 14px; font-weight: 600; }
+.format-list dd { font-size: 13px; color: var(--color-text-muted); }
+.capability-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
+.capability .eyebrow { margin-bottom: 16px; }
+.capability h3 { font-size: 20px; }
+.capability > p:last-child { margin-top: 14px; color: var(--color-text-muted); font-size: 13px; }
+
+/* The existing recording provides product proof. */
+.demo-section { background: var(--color-surface); border-block: 1px solid var(--color-divider); }
+.demo-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 64px; align-items: center; }
+.demo-copy > p:not(.eyebrow) { margin-top: 24px; color: var(--color-text-muted); max-width: 36ch; font-size: 15px; }
+.demo-copy .landing-button { margin-top: 28px; }
+.demo-copy .demo-note { font-size: 12px; }
+.demo-note a { text-decoration: underline; text-underline-offset: 3px; }
+.demo-frame video { border-radius: 7px; border: 1px solid var(--color-border); background: var(--color-surface-ink); aspect-ratio: 16 / 10; }
+
+/* Setup: reuse the existing keyboard-accessible install tabs. */
+.install-layout, .docs-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 80px; }
+.install-layout .section-head, .docs-layout .section-head { margin: 0; }
+.section-head .install-requirements { font-size: 12px; margin-top: 20px; }
+.install-layout .text-link { margin-top: 24px; color: var(--color-primary); }
+.install { border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-surface); overflow: hidden; }
+.install-tabs { display: flex; gap: 24px; padding-inline: 24px; border-bottom: 1px solid var(--color-divider); }
+.install-tab { min-height: 56px; padding: 12px 0; border: 0; background: transparent; color: var(--color-text-muted); font-size: 13px; }
+.install-tab.is-active { color: var(--color-primary); box-shadow: inset 0 -2px var(--color-primary); }
+.install-panel { padding: 26px; min-height: 184px; }
+.install-code { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 22px; }
+.install-code pre { min-width: 0; max-width: 100%; overflow-x: auto; font: 12px/1.9 var(--landing-mono); }
+code { font-family: var(--landing-mono); font-size: .9em; }
+.install-code pre code { font-size: inherit; }
+.copy-btn { min-height: 36px; padding: 7px 12px; font-size: 12px; gap: 6px; }
+.icon { width: 14px; height: 14px; }
+.install-note, .share-note { margin-top: 22px; font-size: 12px; color: var(--color-text-muted); }
+.share-note a { text-decoration: underline; text-underline-offset: 3px; }
+.clipboard-fallback { position: fixed; left: -9999px; opacity: 0; }
+html:not(.copy-ready) .copy-btn, html:not(.tabs-ready) .install-tabs { display: none; }
+html:not(.tabs-ready) .install-panel[hidden] { display: block !important; }
+html:not(.tabs-ready) .install-panel + .install-panel { border-top: 1px solid var(--color-divider); }
+
+/* Docs are routes to maintained guides, not duplicated reference content. */
+.docs-section { padding-top: 72px; border-top: 1px solid var(--color-divider); }
+.docs-layout .section-head { align-self: start; position: sticky; top: 128px; }
+.docs-source { display: inline-block; font-size: 11px; color: var(--color-text-muted); margin-top: 28px; }
+.docs-list { border-top: 1px solid var(--color-border); }
+.docs-list a { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--color-border); transition: color .2s; }
+.docs-list a:hover { color: var(--color-primary); }
+.docs-list strong { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
+.docs-list small { display: block; color: var(--color-text-muted); font-size: 12px; margin-top: 3px; }
+.docs-list a > span:last-child { color: var(--color-primary); font-size: 22px; }
+.closing { padding-block: 76px; background: var(--surface-accent-subtle); border-top: 1px solid var(--color-divider); }
+.closing-inner { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
+.closing h2 { font-size: clamp(38px, 4.5vw, 64px); }
+.closing-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
+.footer { padding-block: 34px; border-top: 1px solid var(--color-divider); }
+.footer-inner { display: flex; align-items: center; gap: 24px; }
+.footer p { font-size: 11px; color: var(--color-text-muted); }
+.footer nav { display: flex; gap: 24px; margin-left: auto; font-size: 12px; }
+.footer nav a:hover { color: var(--color-primary); }
+
+/* Progressive enhancement: content is visible until observers are ready. */
+.reveal-ready .reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; }
+.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }
+
+/* A single arrival: the pages meet, then the workspace comes into view. */
+@media (prefers-reduced-motion: no-preference) {
+  .nav-mark { overflow: visible; }
+  .nav-mark > * { transform-origin: center; animation: landing-page-front .8s cubic-bezier(.16, 1, .3, 1) backwards; }
+  .nav-mark > :first-child { animation-name: landing-page-back; }
+  .hero-enter { animation: landing-enter .7s cubic-bezier(.16, 1, .3, 1) backwards; }
+  .hero-copy > :nth-child(2) { animation-delay: .08s; }
+  .hero-copy > :nth-child(3) { animation-delay: .16s; }
+  .hero-copy > :nth-child(4) { animation-delay: .24s; }
+  .hero-copy > :nth-child(5) { animation-delay: .32s; }
+  .hero-copy > :nth-child(6) { animation-delay: .4s; }
+  .hero-shot { animation-name: landing-preview-enter; animation-duration: .9s; animation-delay: .28s; }
+  .hero-enter:focus-within { animation: none; }
+}
+@keyframes landing-page-back {
+  from { transform: translateX(-6px) rotate(-12deg); }
+  to { transform: none; }
+}
+@keyframes landing-page-front {
+  from { transform: translateX(6px) rotate(12deg); }
+  to { transform: none; }
+}
+@keyframes landing-enter {
+  from { opacity: 0; transform: translateY(14px); }
+  to { opacity: 1; transform: none; }
+}
+@keyframes landing-preview-enter {
+  from { opacity: 0; transform: translate(24px, 12px) scale(.985); }
+  to { opacity: 1; transform: none; }
+}
+
+@media (min-width: 1600px) {
+  .hero-shot { width: 112%; }
+}
+@media (min-width: 901px) and (max-height: 800px) {
+  .hero-inner { padding-block: 24px; }
+}
+@media (max-width: 1100px) {
+  .wrap { width: calc(100% - 64px); }
+  .nav-inner { gap: 20px; }
+  .nav-links { gap: 20px; }
+  .nav-github { display: none; }
+  .hero-inner { gap: 24px; }
+  .hero-title { font-size: 76px; }
+  .hero-promise { font-size: 37px; }
+  .hero-actions { gap: 18px; }
+  .benefits, .capability-rail { gap: 26px; }
+  .demo-layout, .install-layout, .docs-layout { gap: 40px; }
+  .workflow-detail { gap: 32px; padding: 32px; }
+  .format-list > div { grid-template-columns: 120px 1fr; gap: 16px; }
+}
+@media (max-width: 900px) {
+  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding-block: 48px; }
+  .hero-copy { max-width: 600px; }
+  .hero-title { font-size: clamp(66px, 12vw, 100px); }
+  .hero-promise { font-size: 38px; }
+  .hero-sub { max-width: 44ch; }
+  .hero-shot { width: 100%; margin-top: 18px; }
+  .hero-shot figcaption { max-width: none; }
+  .benefits { grid-template-columns: 1fr; gap: 32px; }
+  .feature-index { margin-bottom: 16px; }
+  .benefit p { max-width: 64ch; }
+  .workflow-detail { grid-template-columns: 1fr; }
+  .format-list > div { grid-template-columns: 150px 1fr; }
+  .capability-rail { grid-template-columns: 1fr; gap: 32px; }
+  .capability { border-bottom: 1px solid var(--color-divider); padding-bottom: 24px; }
+  .demo-layout, .install-layout, .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
+  .docs-layout .section-head { position: static; }
+  .demo-copy > p:not(.eyebrow) { max-width: 52ch; }
+  .footer-inner { flex-wrap: wrap; }
+  .footer nav { width: 100%; margin: 0; }
+}
+@media (max-width: 700px) {
+  .wrap { width: calc(100% - 40px); }
+  .nav-inner { height: 68px; gap: 12px; }
+  .nav-brand { font-size: 20px; }
+  .nav-mark { width: 25px; height: 25px; }
+  .nav-demo { margin-left: auto; font-size: 11px; gap: 8px; padding-inline: 12px; }
+  .nav-menu-toggle { display: flex; }
+  .nav-links { display: none; }
+  .nav.is-menu-open .nav-links { position: absolute; display: grid; gap: 0; inset: 100% 0 auto; padding: 12px 20px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-md); }
+  .nav-links a { padding: 13px 8px; }
+  .section { padding-block: 64px; }
+  .section-head { margin-bottom: 32px; }
+  .hero-inner { padding-block: 36px; gap: 24px; }
+  .hero-copy .eyebrow { font-size: 10px; margin-bottom: 18px; }
+  .hero-title { font-size: clamp(56px, 14.5vw, 86px); }
+  .hero-promise { margin-top: 18px; font-size: 34px; }
+  .hero-sub { font-size: 14px; margin-top: 18px; }
+  .hero-actions { margin-top: 24px; gap: 20px; flex-wrap: wrap; }
+  .hero-actions .landing-button { padding-inline: 18px; }
+  .hero-actions .text-link { font-size: 13px; }
+  .hero-note { font-size: 10px; margin-top: 16px; }
+  .hero-shot { margin-top: 0; }
+  .preview-label { font-size: 9px; padding-bottom: 10px; }
+  figcaption { font-size: 10px; margin-top: 14px; }
+  .hero-shot img { box-shadow: var(--shadow-lg); }
+  .workflow-detail { padding: 24px; margin-top: 40px; gap: 16px; }
+  .workflow-detail h3 { font-size: 29px; }
+  .format-list > div { grid-template-columns: 1fr; gap: 5px; padding-block: 16px; }
+  .install-tabs { padding-inline: 18px; }
+  .install-panel { padding: 22px 18px; }
+  .install-code pre { font-size: 11px; }
+  .closing { padding-block: 56px; }
+  .closing-inner { flex-direction: column; align-items: flex-start; }
+  .closing-actions { gap: 20px; }
+  .footer-inner { gap: 16px; }
+  .footer p { font-size: 10px; }
+  .footer nav { gap: 22px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { transition: none !important; animation: none !important; }
+  .reveal-ready .reveal { opacity: 1; transform: none; }
+}