/* Tokens ── source of truth: this file ─────────────────────────────────── */
:root {
--bg-primary: #FAFAF8;
--bg-secondary: #F5F5F2;
--bg-tertiary: #EDEDEA;
--bg-elevated: #FFFFFF;
--bg-canvas: #F5F0E6;
--bg-canvas-dot: rgba(80, 50, 20, 0.085);
--text-primary: #1D1D1F;
--text-secondary: #6E6E73;
--text-muted: #AEAEB2;
--text-faint: rgba(29, 29, 31, 0.36);
--accent: #C45D35;
--accent-hover: #A84E2D;
--accent-soft: rgba(196, 93, 53, 0.10);
--accent-soft-2: rgba(196, 93, 53, 0.18);
--divider: #D1D1D6;
--divider-light: #E5E5EA;
--hairline: rgba(29, 29, 31, 0.08);
--hairline-strong: rgba(29, 29, 31, 0.14);
--status-green: #34C759;
--status-orange: #FF9500;
--status-red: #FF3B30;
--status-blue: #0A84FF;
--ai-label-color: rgba(0, 0, 0, 0.30);
--ai-connector: rgba(0, 0, 0, 0.32);
--ai-dot: rgba(196, 93, 53, 0.62);
--font-body: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Hoefler Text', Georgia, serif;
--font-ui: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
--font-code: 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, monospace;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--margin-doc-gap: 44px;
--reading-measure: 660px;
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.08);
--shadow-window: 0 22px 48px -20px rgba(60, 40, 20, 0.18),
0 10px 24px -8px rgba(60, 40, 20, 0.10),
0 1px 0 rgba(255, 255, 255, 0.7) inset;
}
/* Reset + base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
background: var(--bg-canvas);
background-image: radial-gradient(circle at center, var(--bg-canvas-dot) 1px, transparent 1.2px);
background-size: 22px 22px;
background-position: 0 0;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
button, input, kbd { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
::selection { background: var(--accent-soft-2); color: var(--text-primary); }
/* Page chrome (top bar + footer) ───────────────────────────────────────── */
.page-bar {
position: fixed;
inset: 0 0 auto 0;
z-index: 80;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 18px clamp(20px, 4vw, 44px);
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--text-secondary);
pointer-events: none;
background: linear-gradient(
to bottom,
rgba(245, 240, 230, 0.92) 0%,
rgba(245, 240, 230, 0.72) 58%,
rgba(245, 240, 230, 0) 100%
);
backdrop-filter: blur(8px);
}
.page-bar > * { pointer-events: auto; }
.brand {
display: inline-flex;
align-items: baseline;
gap: 8px;
font-family: var(--font-body);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
color: var(--text-primary);
text-decoration: none;
}
.brand-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
transform: translateY(-3px);
box-shadow: 0 0 0 4px rgba(196, 93, 53, 0.10);
}
.page-bar-meta {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
font-feature-settings: "tnum" 1;
white-space: nowrap;
}
.page-bar-meta .sep { color: var(--text-faint); }
/* Section scaffolding ──────────────────────────────────────────────────── */
.section {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(60px, 9vh, 110px) clamp(20px, 4vw, 48px);
}
.section-mark {
/* Section marks live in the page margin, top-left of each section body.
* They mirror onboarding-vision.md's §1/§2/§3 nomenclature. */
position: absolute;
top: clamp(24px, 6vh, 56px);
left: clamp(20px, 4vw, 56px);
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
}
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
body { font-size: 16px; }
.page-bar { padding: 14px 18px; font-size: 11px; }
.page-bar-meta .vol { display: none; }
.page-bar-meta .sep { display: none; }
.page-bar-meta { gap: 0; max-width: 46vw; overflow: hidden; white-space: nowrap; }
}
@media (max-width: 1600px) {
.page-bar-meta { display: none; }
}
@media (max-width: 360px) {
.page-bar-meta { display: none; }
}
/* Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
}
}
/* §1 Hero ─────────────────────────────────────────────────────────────── */
.hero {
min-height: 90svh;
flex-direction: column;
text-align: center;
position: relative;
padding-bottom: 0;
}
.hero-inner {
max-width: 1080px;
width: 100%;
}
.hero .section-mark {
display: none;
}
.hero-headline {
margin: 0;
font-family: var(--font-body);
font-weight: 500;
font-size: clamp(50px, 9vw, 128px);
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--text-primary);
}
.hero-headline .word-implemented {
position: relative;
display: inline-block;
font-style: italic;
white-space: nowrap;
}
.hero-cursor {
display: inline-block;
margin-left: 0.02em;
color: var(--accent);
font-style: normal;
animation: hero-cursor-blink 980ms steps(1) infinite;
}
@keyframes hero-cursor-blink {
0%, 52% { opacity: 1; }
53%, 100% { opacity: 0; }
}
.hero-meta {
margin-top: clamp(40px, 6vh, 80px);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-faint);
}
.hero-rule {
width: 32px; height: 1px;
background: var(--text-faint);
}
.scroll-cue {
position: absolute;
bottom: clamp(28px, 5vh, 56px);
left: 50%;
transform: translateX(-50%);
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 10px;
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
}
.scroll-cue-line {
width: 1px;
height: 38px;
background: linear-gradient(to bottom, transparent, rgba(196, 93, 53, 0.52));
animation: scroll-cue 2.2s var(--ease) infinite;
}
@keyframes scroll-cue {
0% { opacity: 0; transform: translateY(-8px); }
40% { opacity: 1; }
100% { opacity: 0; transform: translateY(8px); }
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.hero { padding-top: 96px; }
.hero-inner { max-width: 100%; overflow: hidden; }
.hero-headline {
max-width: calc(100vw - 40px);
margin-inline: auto;
font-size: clamp(42px, 15.5vw, 66px);
line-height: 0.96;
letter-spacing: -0.035em;
overflow-wrap: normal;
}
.hero-headline .word-implemented {
white-space: nowrap;
font-size: 0.88em;
}
}
@media (max-width: 360px) {
.hero-headline {
font-size: clamp(37px, 14.5vw, 52px);
letter-spacing: -0.025em;
}
}
/* Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.scroll-cue-line, .hero-cursor { animation: none; }
.hero-cursor { opacity: 1; }
}
/* §2 Editor takeover ──────────────────────────────────────────────────── */
.takeover {
min-height: 112svh;
flex-direction: column;
align-items: center;
padding: clamp(24px, 3.5vh, 48px) clamp(10px, 1.6vw, 28px) clamp(36px, 5vh, 64px);
}
.takeover-shell {
width: 100%;
max-width: 1680px;
min-width: 0;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
gap: 14px;
margin-top: clamp(34px, 5vh, 68px);
}
/* Editor section header — sits flush with the editor window's left edge
* so the title, lede, picker, and editor frame all share a common left
* gutter. Title and lede keep their own narrower max-widths inside this
* shell-width container so the prose doesn't grow past comfortable
* reading length. */
.takeover-head {
width: 100%;
max-width: none;
margin: 0 0 60px;
padding: 0;
}
.takeover-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.takeover-kicker span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
.takeover-title {
max-width: 680px;
margin: 0 0 18px;
font-family: var(--font-body);
font-size: clamp(42px, 5vw, 56px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--text-primary);
}
.takeover-title em {
font-style: italic;
color: var(--accent);
}
.takeover-lede {
max-width: 700px;
margin: 0;
font-family: var(--font-body);
font-size: clamp(17px, 1.55vw, 19px);
line-height: 1.55;
color: var(--text-secondary);
}
/* Picker — page chrome, sits OUTSIDE the macOS frame (vision §2 fidelity).
* Shares the shell's full width so its left-most item lines up with the
* editor window below it. */
.picker {
width: 100%;
display: flex;
align-items: center;
gap: 16px;
margin: 0;
padding: 0;
font-family: var(--font-ui);
color: var(--text-secondary);
flex-wrap: wrap;
}
.picker-label {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
pointer-events: none;
user-select: none;
}
.picker-label::after {
content: '';
width: 1px;
height: 14px;
background: var(--hairline);
}
.picker-items {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.picker-item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 13px;
letter-spacing: -0.005em;
color: var(--text-secondary);
transition: color 160ms var(--ease),
background 160ms var(--ease),
border-color 160ms var(--ease);
}
.picker-item::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: transparent;
border: 1.2px solid var(--text-muted);
transition: all 160ms var(--ease);
}
.picker-item:hover {
color: var(--text-primary);
border-color: var(--hairline);
}
.picker-item[aria-selected='true'] {
color: var(--text-primary);
background: rgba(255, 255, 255, 0.85);
border-color: var(--hairline);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 2px rgba(60, 40, 20, 0.04);
}
.picker-item[aria-selected='true']::before {
background: var(--accent);
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(196, 93, 53, 0.16);
}
.picker-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.picker-spacer { flex: 1; }
/* macOS window — the takeover frame (titleBarStyle: 'hiddenInset' shape) */
.window {
position: relative;
width: 100%;
min-width: 0;
display: flex;
flex-direction: column;
height: clamp(760px, 90vh, 1120px);
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 10px;
overflow: hidden;
box-shadow: var(--shadow-window);
isolation: isolate;
}
.window-bar {
position: relative;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(248, 246, 240, 0.96));
border-bottom: 1px solid rgba(29, 29, 31, 0.06);
font-family: var(--font-ui);
font-size: 12px;
color: rgba(29, 29, 31, 0.62);
letter-spacing: 0.005em;
flex: 0 0 auto;
}
.traffic {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
gap: 8px;
}
.traffic span {
width: 12px; height: 12px;
border-radius: 50%;
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.traffic .tl-close { background: #ff5f57; }
.traffic .tl-minimize { background: #febc2e; }
.traffic .tl-zoom { background: #28c840; }
.window-title { font-weight: 500; }
/* Responsive ──────────────────────────────────────────────────────────── */
/* Laptop band (13"–17", ~921–1920px viewports): the full-shell window
* reads oversized this close to the eye — narrow it, keep it centered,
* and cap it at 1300px so its edges align with the §3 "01 Thread
* margin" hero card's WHITE SURFACE (.primitive-card--hero renders
* 1299px: the 1160px stack plus a 70px overhang per side — matching
* the stack alone left the editor reading ~140px narrower than the
* card). Height stays at the full-size clamp so the page keeps its
* vertical presence. Larger desktop displays keep the full-size
* window. */
@media (min-width: 921px) and (max-width: 1920px) {
.window {
width: min(97%, 1300px);
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 920px) {
.window { height: clamp(560px, 72vh, 720px); }
.picker { justify-content: center; }
.picker-spacer { display: none; }
}
@media (max-width: 1180px) {
.picker {
gap: 10px;
}
.picker-item {
padding: 7px 10px;
font-size: 12.5px;
}
}
@media (max-width: 640px) {
.takeover { padding-top: 32px; padding-bottom: 32px; }
.window { border-radius: 8px; }
.takeover-head { margin-bottom: 36px; }
.takeover-title { font-size: clamp(34px, 11vw, 46px); }
}
/* Editor surface — the prose column + margin gutter ─────────────────── */
.editor {
position: relative;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
/* The doc body itself stays non-interactive (it's a film), but interactive
* surfaces inside re-enable pointer events explicitly so clicks land. */
pointer-events: none;
background:
radial-gradient(ellipse at top, rgba(255, 255, 255, 0.6), transparent 50%),
linear-gradient(180deg, #fdfcf8 0%, #f6f3ec 100%);
}
.editor .margin-note,
.editor .thread-bubble.is-open,
.editor .lightbox.is-open,
.editor .hub,
.editor .doc-scroll {
pointer-events: auto;
}
.editor-viewport {
position: relative;
min-width: 0;
height: 100%;
overflow: hidden;
}
.editor-viewport::before,
.editor-viewport::after {
content: '';
position: absolute;
left: 0;
right: 0;
height: 34px;
pointer-events: none;
z-index: 2;
}
.editor-viewport::before {
top: 0;
background: linear-gradient(to bottom, #fdfcf8 0%, rgba(253, 252, 248, 0));
}
.editor-viewport::after {
bottom: 0;
height: 92px;
background: linear-gradient(to top, rgba(246, 243, 236, 0.96) 0%, rgba(246, 243, 236, 0));
}
.stage {
position: relative;
width: 100%;
min-width: 0;
height: 100%;
min-height: 0;
--reading-measure: 720px;
/* Hidden spacer between the document column and margin threads. The
* connector remains attached to each thread card, so increasing this
* gap moves the dot + wave with the thread instead of stretching it. */
--margin-doc-gap: clamp(150px, 10.1vw, 196px);
padding: 0 clamp(18px, 2vw, 40px);
display: grid;
grid-template-columns: minmax(0, min(56vw, var(--reading-measure))) minmax(324px, clamp(360px, 28vw, 420px));
align-items: stretch;
justify-content: center;
column-gap: var(--margin-doc-gap);
overflow: hidden;
transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.stage.is-switching {
opacity: 0;
transform: translateY(6px);
}
/* Internal scroller — owns the doc column. The viewport clips overflow;
* the doc-scroll auto-scrolls programmatically as content fills, giving
* §2A its "real working document, longer than a viewport" feel.
*
* Native scrollbar is hidden — the page-level scrub owns the sense of
* progress, so no indicator competes with the doc-to-thread connector
* area. The doc still accepts wheel/touch/keyboard scroll in the static
* fallback exactly as before. */
.doc-scroll {
position: relative;
min-width: 0;
min-height: 0;
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: none;
scroll-behavior: smooth;
padding: clamp(34px, 4.8vh, 58px) 4px clamp(180px, 24vh, 260px) 0;
}
.doc-scroll:focus-visible {
outline: 2px solid rgba(196, 93, 53, 0.34);
outline-offset: -2px;
}
.doc-scroll::-webkit-scrollbar { width: 0; height: 0; }
.doc {
position: relative;
min-width: 0;
max-width: var(--reading-measure);
padding-left: 34px;
}
.doc-meta-line {
margin: 0 0 12px;
font-family: var(--font-code);
font-size: 11px;
line-height: 1.4;
letter-spacing: 0.02em;
color: var(--text-muted);
}
.doc-title-line {
/* Mirrors editorBaseTheme.ts:41–47 (.cm-heading-2-line) — relative
* sizing keeps headings in rhythm with the 17px body, not floating.
* The flex row hosts the # syntax marker beside the title text so the
* heading reads as live markdown, not a stylized title. */
margin: 0 0 0.65em;
min-height: 1.25em;
display: flex;
align-items: baseline;
gap: 10px;
font-family: var(--font-body);
font-size: 1.6em;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.022em;
color: var(--text-primary);
}
.cm-md-heading-marker {
/* Syntax-tinted heading marker — `#` rendered visibly so the surface
* reads as a CM6 markdown editor with live-preview decorations, not a
* styled WYSIWYG title. */
font-family: var(--font-code);
font-size: 0.62em;
line-height: 1;
color: var(--accent);
opacity: 0.74;
transform: translateY(-0.05em);
}
.doc-title {
display: inline-block;
min-width: 1ch;
}
.doc-title:empty::after {
/* Empty-state caret — blinks on the empty title before any typing
* begins. Gives the auto-loop its open frame ("caret blinks on a blank
* document"). */
content: '';
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: -0.12em;
background: rgba(29, 29, 31, 0.78);
animation: caret-blink 1s steps(1, end) infinite;
}
.doc-paragraph {
position: relative;
margin: 0 0 20px;
min-height: 1.65em;
font-size: 17px;
line-height: 1.72;
color: var(--text-primary);
font-family: var(--font-body);
}
/* Inline emphasis inside the doc body — `bold` segments rendered by
* appendInline. Weight comes through; the accent rail underneath the
* bold word adds a subtle highlight without competing with anchors. */
.doc-paragraph .doc-bold,
.doc-list .doc-bold {
font-weight: 700;
color: var(--text-primary);
background-image: linear-gradient(transparent 78%, var(--accent-soft) 78%);
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0 1px;
}
.doc-heading {
position: relative;
margin: 34px 0 10px;
display: flex;
align-items: baseline;
gap: 9px;
font-family: var(--font-body);
font-size: 21px;
line-height: 1.28;
font-weight: 700;
letter-spacing: -0.018em;
color: var(--text-primary);
}
.doc-heading::before {
content: '##';
font-family: var(--font-code);
font-size: 0.62em;
line-height: 1;
color: var(--accent);
opacity: 0.58;
}
.doc-list {
position: relative;
margin: 0 0 22px;
padding: 0;
list-style: none;
font-family: var(--font-body);
font-size: 16.5px;
line-height: 1.66;
color: var(--text-primary);
}
.doc-list li {
position: relative;
margin: 0 0 9px;
padding-left: 26px;
}
.doc-list li::before {
content: '-';
position: absolute;
left: 4px;
top: 0;
color: var(--accent);
font-family: var(--font-code);
}
.doc-codeblock {
position: relative;
margin: 10px 0 24px;
padding: 12px 14px;
border: 1px solid rgba(29, 29, 31, 0.09);
border-radius: 8px;
background: rgba(255, 255, 255, 0.58);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
font-family: var(--font-code);
font-size: 12.5px;
line-height: 1.62;
color: var(--text-secondary);
white-space: pre-wrap;
}
.doc-diagram-block {
position: relative;
margin: 14px 0 26px;
padding: 0;
}
.doc-diagram-block .cm-diagram-container {
display: block;
width: 100%;
height: 300px;
border: 1px solid var(--divider);
border-radius: var(--radius-md, 6px);
background-color: var(--bg-primary);
background-image: radial-gradient(circle at center, rgba(60, 50, 30, 0.20) 1.1px, transparent 1.4px);
background-size: 20px 20px;
background-position: 10px 10px;
overflow: hidden;
cursor: default;
box-sizing: border-box;
position: relative;
}
.doc-diagram-block .cm-diagram-canvas {
display: block;
width: 100%;
height: 100%;
}
.doc-diagram-block .cm-diagram-resize-handle {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
cursor: ns-resize;
background: var(--divider);
opacity: 0;
transition: opacity 0.15s ease;
z-index: 5;
}
.doc-diagram-block .cm-diagram-container:hover .cm-diagram-resize-handle {
opacity: 0.35;
}
.doc-diagram-block .cm-diagram-drag-handle {
position: absolute;
top: -14px;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 15;
user-select: none;
}
.doc-diagram-block:hover .cm-diagram-drag-handle {
opacity: 1;
}
.doc-diagram-block .cm-diagram-drag-handle svg {
color: var(--text-muted);
}
.doc-diagram-caption {
margin-top: 7px;
font-family: var(--font-ui);
font-size: 11px;
line-height: 1.45;
color: var(--text-muted);
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
.stage {
grid-template-columns: 1fr;
padding: 0 24px;
}
.doc-scroll { padding: 32px 8px 130px 0; }
}
@media (min-width: 921px) and (max-width: 1280px) {
.stage {
--reading-measure: 560px;
--margin-doc-gap: 72px;
padding: 0 20px;
grid-template-columns: minmax(0, min(52vw, var(--reading-measure))) minmax(260px, clamp(284px, 30vw, 340px));
}
}
@media (max-width: 640px) {
.doc { padding-left: 26px; }
.doc-title { font-size: 26px; }
.doc-paragraph { font-size: 16px; }
}
/* Capability list — onboarding mirror of the desktop CapabilityListWidget
* (electron-app/src/editor/extensions/widgets/capabilityList.ts +
* editorBaseThemeWidgetRules.ts:317-449). Class vocabulary and visual
* tokens match the in-product widget so the onboarding teaches the
* exact element a returning user will see in HudHud. The hover edit
* controls (.cm-capability-controls) and "+ Add capability" affordance
* are intentionally omitted in onboarding — visitors can't edit. */
.cm-capability-list {
margin: 28px 0 34px;
padding: 14px 18px 16px;
border: 1px solid var(--hairline);
border-radius: 10px;
background: transparent;
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.65;
user-select: none;
}
.cm-capability-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
padding-left: 2px;
}
.cm-capability-label {
flex: 1;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
line-height: 1;
text-transform: uppercase;
color: var(--text-muted);
}
.cm-capability-count {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
line-height: 1;
color: var(--text-muted);
}
.cm-capability-items {
display: flex;
flex-direction: column;
gap: 2px;
}
.cm-capability-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 6px 4px;
border-radius: 6px;
line-height: 1.55;
transition: background-color 0.1s var(--ease);
}
.cm-capability-item:hover {
background-color: var(--bg-tertiary);
}
.cm-capability-status {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
background: transparent;
border-radius: 4px;
cursor: default;
}
.cm-capability-pending {
border: 1.5px solid var(--divider);
background: transparent;
}
.cm-capability-complete {
background: var(--accent);
}
.cm-capability-text {
flex: 1;
min-width: 0;
font-family: var(--font-body);
font-size: 15.5px;
line-height: 1.55;
color: var(--text-primary);
}
@media (max-width: 640px) {
.cm-capability-list {
padding: 12px 14px 14px;
margin: 22px 0 26px;
}
.cm-capability-text { font-size: 14.5px; }
}
/* Objective context — native editor content gathered near the thought it
* supports. References are accepted-link shaped; code, canvas, and images
* keep the same block vocabulary as the desktop editor. */
.doc-objective-context {
margin: 18px 0 28px;
padding: 0;
font-family: var(--font-body);
}
.doc-context-eyebrow {
display: block;
margin-bottom: 8px;
font-family: var(--font-code);
font-size: 10px;
font-weight: 650;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.doc-context-prose {
margin: 0 0 8px;
font-size: 16.5px;
line-height: 1.66;
color: var(--text-primary);
}
.doc-context-refs {
margin: 0 0 16px;
font-family: var(--font-body);
font-size: 15px;
line-height: 1.58;
color: var(--text-muted);
}
.doc-context-chip {
display: inline;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
font-family: inherit;
font-size: inherit;
line-height: inherit;
color: var(--accent);
white-space: nowrap;
cursor: pointer;
}
.doc-context-chip--file {
color: var(--accent);
}
.doc-context-chip--map {
color: var(--accent-secondary, #8b7ec8);
}
.doc-context-chip--url {
color: var(--accent);
text-decoration: underline dotted;
text-decoration-thickness: 1.2px;
text-underline-offset: 3px;
}
/* Code snippet — mirrors the desktop editor's per-line decorations:
* `.cm-code-block-line`, `.cm-code-block-first`, `.cm-code-block-last`,
* and the floating `.cm-code-label`. */
.doc-code-snippet,
.cm-code-block {
margin: 16px 0 24px;
border-radius: 8px;
overflow-x: auto;
background: var(--bg-tertiary);
}
.doc-code-snippet .cm-code-block-line {
width: max-content;
min-width: 100%;
box-sizing: border-box;
padding: 0 24px;
background: var(--bg-tertiary);
color: var(--text-primary);
font-family: var(--font-code);
font-size: 14px;
line-height: 1.6;
white-space: pre;
}
.doc-code-snippet .cm-code-block-first {
padding-top: 16px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.doc-code-snippet .cm-code-block-last {
padding-bottom: 16px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.cm-code-block {
padding: 16px 24px;
font-family: var(--font-code);
font-size: 14px;
line-height: 1.6;
color: var(--text-primary);
white-space: pre;
}
.cm-code-label {
float: right;
margin-top: -0.2em;
margin-right: -0.8em;
padding: 2px 8px;
border-radius: 0 8px 0 4px;
background: var(--bg-tertiary);
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 0.72em;
font-weight: 500;
font-variant: small-caps;
letter-spacing: 0.02em;
line-height: 1.6;
}
/* Context canvas — mirrors the live diagram widget in
* electron-app/src/editor/extensions/widgets/diagram/. The toolbar,
* prompt bar, container, and canvas all use the live editor's
* tokens, paddings, radii, and typography so the embed reads as
* "this is the editor's canvas" rather than a styled mock. */
.doc-context-canvas {
margin: 18px 0 26px;
padding: 0;
}
.doc-context-canvas .cm-diagram-container {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
border: 1px solid var(--divider);
border-radius: var(--radius-md, 6px);
background-color: var(--bg-primary);
background-image: radial-gradient(circle at center, rgba(60, 50, 30, 0.20) 1.1px, transparent 1.4px);
background-size: 20px 20px;
background-position: 10px 10px;
overflow: hidden;
cursor: default;
}
.doc-context-canvas .cm-diagram-empty-hint {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
pointer-events: none;
font-family: var(--font-body);
font-size: 13px;
color: var(--text-muted);
opacity: 0.55;
user-select: none;
}
.doc-context-canvas .cm-diagram-container.is-empty .cm-diagram-empty-hint {
display: flex;
}
/* ── Toolbar — left-floating column, plain white plate. */
.doc-context-canvas .cm-diagram-toolbar {
position: absolute;
top: 50%;
left: -44px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 4px;
border: 0;
border-radius: var(--radius-sm, 4px);
background: var(--bg-elevated, #FFFFFF);
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
opacity: 1;
pointer-events: auto;
z-index: 10;
}
.doc-context-canvas .cm-diagram-toolbar button {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: var(--radius-sm, 4px);
background: transparent;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 13px;
line-height: 1;
cursor: pointer;
}
.doc-context-canvas .cm-diagram-toolbar button:hover:not(.active) {
background: var(--bg-tertiary);
}
.doc-context-canvas .cm-diagram-toolbar button.active {
background: var(--accent);
color: #fff;
}
/* The zoom-reset chip overrides width/font on top of the button rule. */
.doc-context-canvas .cm-diagram-zoom-btn {
width: auto;
padding: 0 4px;
font-size: 10px;
color: var(--text-muted);
white-space: nowrap;
}
.doc-context-canvas .cm-diagram-zoom-btn:hover {
background: transparent;
color: var(--text-primary);
}
/* ── Prompt bar — column layout (presets row → input row). */
.doc-context-canvas .cm-diagram-prompt-bar {
position: absolute;
left: 8px;
right: 8px;
bottom: 12px;
display: block;
padding: 6px 8px;
border: 0;
border-radius: var(--radius-sm, 4px);
background: var(--bg-elevated, #FFFFFF);
box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
pointer-events: auto;
z-index: 20;
box-sizing: border-box;
}
.doc-context-canvas .cm-diagram-prompt-presets {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
margin-bottom: 6px;
}
.doc-context-canvas .cm-diagram-prompt-chip {
border: 1px solid var(--divider);
border-radius: 4px;
padding: 2px 8px;
background: var(--bg-primary);
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.6;
white-space: nowrap;
cursor: pointer;
}
.doc-context-canvas .cm-diagram-prompt-chip:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
border-color: var(--accent);
}
.doc-context-canvas .cm-diagram-prompt-input-row {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
}
.doc-context-canvas .cm-diagram-prompt-input {
flex: 1;
min-width: 0;
padding: 4px 8px;
border: 1px solid var(--divider);
border-radius: 4px;
background: var(--bg-primary);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 13px;
outline: none;
}
.doc-context-canvas .cm-diagram-prompt-input:focus {
border-color: var(--accent);
}
.doc-context-canvas .cm-diagram-prompt-send {
flex-shrink: 0;
padding: 4px 10px;
border: 0;
border-radius: 4px;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 13px;
cursor: pointer;
}
.doc-context-canvas .cm-diagram-prompt-send:hover {
opacity: 0.85;
}
/* Context image — mirrors electron-app/src/editor/extensions/widgets/image.ts.
* The img is bare (no border, no caption frame); the figure wrapper
* only carries margin and an optional figcaption rendered as quiet
* doc prose underneath.
*
* Sizing: capped to ~520px and centered. Original 720×380 SVGs were
* stretching the full document width and dwarfing the surrounding prose;
* a tighter cap reads as an inline reference image rather than a hero. */
.doc-context-image-figure {
margin: 18px auto 26px;
max-width: 520px;
}
.doc-context-image.cm-image-widget {
display: block;
max-width: 100%;
height: auto;
border: 0;
border-radius: 10px;
background: var(--bg-primary);
box-shadow: 0 4px 20px rgba(60, 56, 54, 0.10);
opacity: 1;
transition: box-shadow 0.18s ease;
}
.doc-context-image.cm-image-widget:hover {
box-shadow: 0 8px 30px rgba(60, 56, 54, 0.18);
}
.doc-context-image-caption {
margin-top: 7px;
font-family: var(--font-ui);
font-size: 11px;
line-height: 1.45;
color: var(--text-muted);
}
@media (max-width: 640px) {
.doc-objective-context {
margin-bottom: 24px;
}
.doc-context-prose { font-size: 15px; }
.doc-context-refs { font-size: 13px; }
.cm-code-block,
.doc-code-snippet .cm-code-block-line {
padding-inline: 16px;
font-size: 12.5px;
}
.doc-context-canvas .cm-diagram-toolbar {
position: static;
width: max-content;
flex-direction: row;
margin-bottom: 8px;
transform: none;
}
.doc-context-canvas .cm-diagram-prompt-bar {
left: 8px;
right: 8px;
bottom: 8px;
}
.doc-context-canvas .cm-diagram-prompt-presets {
display: none;
}
}
/* Typed paragraph affordances: gutter ticks, anchors, ghost refs, and Tab hints. */
.doc-paragraph::before {
/* Per-paragraph gutter tick — a small horizontal hairline at the
* paragraph's start, sitting in the gutter strip. Mirrors how CM6's
* line gutter punctuates the start of each block. */
content: '';
position: absolute;
left: -22px;
top: 0.86em;
width: 10px;
height: 1px;
background: rgba(29, 29, 31, 0.18);
}
.doc-paragraph--static::before { opacity: 0.52; }
/* Static (non-typed) paragraphs — `lead` and `closer` prose. They paint
* with a brief fade so the surface doesn't pop, but otherwise read as
* settled body text identical to the typed paragraphs. */
.doc-paragraph--static {
animation: doc-static-in 320ms var(--ease) both;
}
@keyframes doc-static-in {
from { opacity: 0; transform: translateY(2px); }
to { opacity: 1; transform: translateY(0); }
}
/* Anchor highlight — hand-drawn marker stroke on text referenced by margin
* threads. Ported in spirit from electron-app/src/styles/editor.css:38–50;
* the wavy sine was replaced with an SVG single-stroke ink line so the
* onboarding mock reads as a marker annotation rather than a spell-check
* squiggle. The stroke reaches its active state when its margin thread is
* hovered or its bubble is open (.doc.is-thread-active is set by the film
* runner once the developed thread settles). */
.cm-anchor-highlight {
cursor: pointer;
text-decoration: none;
padding-bottom: 6px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% 9px;
transition: background-image 160ms var(--ease);
}
.cm-anchor-highlight.active,
.doc.is-thread-active .cm-anchor-highlight[data-anchor-thread="1"] {
background-image: url("data:image/svg+xml;utf8,");
}
/* Caret */
.caret {
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: -0.14em;
background: rgba(29, 29, 31, 0.78);
animation: caret-blink 1s steps(1, end) infinite;
}
@keyframes caret-blink {
0%, 45% { opacity: 1; }
46%, 100% { opacity: 0; }
}
/* Ghost text — italic, muted, 0.6 opacity (editorBaseThemeWidgetRules) */
.cm-ghost-text {
color: var(--text-muted);
font-style: italic;
opacity: 0.6;
pointer-events: none;
transition: opacity 240ms var(--ease);
}
.cm-ghost-text.is-committed {
color: var(--text-primary);
font-style: normal;
opacity: 1;
}
.cm-ghost-ref-file {
color: color-mix(in srgb, var(--status-green) 56%, var(--text-muted));
font-style: italic;
}
.cm-ghost-ref-file::before {
content: '';
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--status-green);
opacity: 0.85;
margin-right: 5px;
vertical-align: 0.04em;
}
.cm-ghost-text.is-committed .cm-ghost-ref-file {
color: color-mix(in srgb, var(--status-green) 78%, var(--text-primary));
font-style: normal;
}
.doc .cm-ghost-ref-file,
.doc-list .cm-ghost-ref-file {
color: color-mix(in srgb, var(--status-green) 78%, var(--text-primary));
font-style: normal;
}
/* URL refs — mirrors editorBaseThemeWidgetRules.ts:122–128 (dotted underline,
* muted italic). No favicon — matches the real ghost-text theme. */
.cm-ghost-ref-url {
color: color-mix(in srgb, var(--accent) 56%, var(--text-muted));
font-style: italic;
text-decoration: underline dotted;
text-decoration-thickness: 1.2px;
text-underline-offset: 3px;
}
.cm-ghost-text.is-committed .cm-ghost-ref-url {
color: var(--accent);
font-style: normal;
}
.doc .cm-ghost-ref-url,
.doc-list .cm-ghost-ref-url {
color: var(--accent);
font-style: normal;
}
.tab-hint {
display: inline-flex;
align-items: center;
gap: 6px;
margin-left: 12px;
vertical-align: 0.12em;
font-family: var(--font-ui);
font-size: 11px;
font-style: normal;
color: var(--text-secondary);
opacity: 0;
transition: opacity 220ms var(--ease);
}
.tab-hint.is-visible { opacity: 1; }
.tab-hint kbd {
display: inline-block;
min-width: 22px;
padding: 2px 7px;
border: 1px solid var(--hairline);
border-radius: 999px;
background: rgba(255, 255, 255, 0.86);
font-family: var(--font-ui);
font-size: 10px;
font-weight: 500;
color: var(--text-secondary);
line-height: 1.4;
text-align: center;
transition: background 240ms var(--ease),
color 240ms var(--ease),
box-shadow 380ms var(--ease),
transform 380ms var(--ease);
}
.tab-hint.is-pulsing kbd {
background: rgba(196, 93, 53, 0.10);
color: var(--accent);
box-shadow: 0 0 0 8px rgba(196, 93, 53, 0.16);
transform: scale(1.06);
}
@media (max-width: 920px) {
/* On narrow viewports the margin column hides; the anchor underline
* stays so the doc still reads, but the cursor affordance drops to
* inherit since there's no thread to interact with. */
.doc-paragraph .cm-anchor-highlight { cursor: text; }
}
/* Margin gutter — the same loose side-comment column as the app: cards are
* attached by a dot and a short wavy connector, without a separate rail.
*
* Overflow is intentionally `visible` — threads are positioned absolutely
* at their anchor offsets (which can extend below the editor-viewport's
* visible area for a multi-viewport doc). The margin element is then
* translated in lockstep with doc-scroll so threads scroll alongside
* their anchors. The editor-viewport's overflow:hidden does the clipping
* at the visible frame.
*/
.margin {
position: relative;
min-width: 0;
display: block;
padding-top: 0;
padding-bottom: 0;
overflow: visible;
align-self: stretch;
will-change: transform;
}
/* Margin thread — uses the real .margin-note class. Threads stack
* top-to-bottom, but the visual relationship comes from each anchor
* connector instead of a margin rail. */
.margin-note {
position: absolute;
top: var(--thread-y, 80px);
right: 0;
width: 100%;
max-width: clamp(360px, 28vw, 420px);
opacity: 0;
transform: translateX(8px);
transition: opacity 320ms var(--ease), transform 320ms var(--ease), top 240ms var(--ease);
}
.margin-note.is-in {
opacity: 1;
transform: translateX(0);
}
.margin-note--brief .mn-inner {
padding: 9px 10px 10px 12px;
}
.margin-note--brief .mn-body {
font-size: 13px;
line-height: 1.55;
}
.margin-note .mn-inner {
/* Quiet on the editor surface: no fill, no shadow, and no local rail.
* The dot and connector carry the anchored relationship. */
position: relative;
padding: 10px 10px 12px 14px;
border-radius: 4px;
}
/* Tap target — any developed (non-brief) thread opens the bubble on
* click anywhere on its body (embed and dismiss are filtered in
* bubble-controller). The cursor + a barely-there warm wash on hover
* signal "tap me" without pulling the eye off the document. Scoped to
* `:not(.margin-note--brief)` so the affordance applies whichever
* thread (1 or 4) is currently developed for the active film. */
.margin-note:not(.margin-note--brief) .mn-inner {
cursor: pointer;
transition: background 180ms var(--ease);
}
.margin-note:not(.margin-note--brief):hover .mn-inner {
background: rgba(196, 93, 53, 0.025);
}
/* The embed remains its own affordance — keep its hover behaviour visible
* by neutralising the ambient thread-hover wash inside the embed area. */
.margin-note:not(.margin-note--brief) .mn-embed,
.margin-note:not(.margin-note--brief) .mn-dismiss {
cursor: default;
}
.margin-note:not(.margin-note--brief) .mn-embed-pill,
.margin-note:not(.margin-note--brief) .mn-embed-thumb {
cursor: zoom-in;
}
.margin-note .mn-label {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 5px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ai-label-color);
}
.margin-note .mn-type {
/* Pill chrome shared across types. Sized to match Threads-design-sketch.html
* line 415-420 — the whisper-quiet end of the spectrum. Combined with the
* monochrome palette below, the pill reads as a label, not a status badge. */
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 3px;
font-family: var(--font-ui);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
color: var(--text-muted);
background: var(--bg-tertiary);
}
/* Color-coded pill family — mirrors electron-app/src/styles/margin.css:157–204.
* The chip type is the at-a-glance vocabulary of a HudHud thread; the colour
* is the legibility, the word is the precision. Saturation matches the editor
* (8% rgba) so the chip reads as a label, not a status badge — quiet enough
* to harmonize with the graphite embed body below. */
.margin-note .mn-type.observation {
color: var(--text-muted);
background: var(--bg-tertiary);
}
.margin-note .mn-type.question {
color: var(--accent);
background: rgba(196, 93, 53, 0.08);
}
.margin-note .mn-type.suggestion {
color: var(--status-green);
background: rgba(52, 199, 89, 0.08);
}
.margin-note .mn-type.architecture {
color: var(--status-orange);
background: rgba(255, 149, 0, 0.08);
}
.margin-note .mn-type.data {
color: var(--accent);
background: rgba(196, 93, 53, 0.08);
}
.margin-note .mn-type.warning {
color: var(--status-red);
background: rgba(255, 59, 48, 0.08);
}
.margin-note:has(.mn-type.warning) .mn-inner {
border-left: 2px solid rgba(255, 59, 48, 0.32);
padding-left: 16px;
}
/* `is-hidden` lets populateThreadContent collapse optional threads
* (architecture / data) for roles that don't define them, without
* leaving the margin layout with empty slots. */
.margin-note.is-hidden { display: none !important; }
.margin-note .mn-body {
margin: 0;
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.55;
color: var(--text-secondary);
/* AI voice rendered at reduced opacity — the document speaks at full
* presence, the margin whispers alongside. Mirrors --ai-text-opacity
* in Threads-design-sketch.html:31. Inline snaps back to
* full opacity (rule below) so emphasis cuts through. */
opacity: 0.82;
letter-spacing: 0;
}
.margin-note .mn-body strong {
font-weight: 600;
color: var(--text-primary);
opacity: 1;
}
.margin-note .mn-body em {
font-style: italic;
color: var(--text-primary);
opacity: 0.92;
}
.margin-note--brief .mn-body {
font-size: 11.5px;
line-height: 1.5;
}
/* The developed thread (#thread-1) carries an embed and an interact/dismiss
* row; nudge its body up slightly so the embed reads as the focal piece
* of the card. */
.margin-note:not(.margin-note--brief) .mn-body {
font-size: 12px;
line-height: 1.55;
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
.margin { display: none; }
}
@media (min-width: 921px) and (max-width: 1280px) {
.margin-note {
max-width: clamp(284px, 30vw, 340px);
}
.margin-note .mn-body {
font-size: 11.5px;
line-height: 1.5;
}
.margin-note--brief .mn-body {
font-size: 11px;
}
.margin-note .mn-inner {
padding: 8px 8px 10px 11px;
}
.margin-note--brief .mn-inner {
padding: 7px 8px 8px 10px;
}
}
/* Embed preview inside the margin card.
*
* Composition: .mn-embed wraps two children stacked top-to-bottom —
* .mn-embed-pill — artifact chrome: tier-coded icon, title, tier label
* .mn-embed-thumb — preview surface (card / chart / diagram, picked by
* data-embed-shape on .mn-embed)
*
* The artifact is a static preview inside the onboarding thread.
*/
/* The embed lives inside the editor's margin thread but is rendered by
* the agent for the user's project. The whole embed — chrome AND body —
* reads as a single monochrome Apple "room": neutral white surfaces,
* graphite focal accent (#1D1D1F), neutral shadows. Each film still
* picks its own artifact shape (invite-flow / cohort-curves / hero-compare
* / launch-surfaces / hero-variants) and keeps its own typographic voice
* (sans-serif / mono / serif), but the colour palette is shared so films
* differ only in shape and texture, never in hue. */
/* Sketch-aligned embed surface: the pill and preview remain separate
* controls, but the preview gets the same compact bordered affordance as
* Threads-design-sketch.html. */
.mn-embed {
position: relative;
margin-top: 12px;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* Embed pill — mirrors Threads-design-sketch.html's artifact control:
* compact rounded chrome, icon + title left, tier badge and thinking dots
* right. Shared across every §2 objective film. */
.mn-embed-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
margin: 8px 0 5px;
border-radius: 6px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--text-secondary);
background: rgba(245, 245, 242, 0.88);
border: 1px solid var(--divider-light);
cursor: default;
user-select: none;
transition:
border-color 200ms var(--ease),
background 150ms var(--ease),
box-shadow 200ms var(--ease),
transform 100ms var(--ease);
}
.mn-embed-pill:hover {
border-color: rgba(196, 93, 53, 0.36);
background: rgba(196, 93, 53, 0.045);
box-shadow: 0 2px 12px rgba(196, 93, 53, 0.08);
transform: translateY(-1px);
}
.mn-embed-pill:active {
transform: translateY(0);
}
.mn-embed-pill .ep-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
flex: 0 0 auto;
color: var(--text-secondary);
}
.mn-embed-pill .ep-icon svg {
display: block;
width: 14px;
height: 14px;
}
.mn-embed-pill .ep-title {
flex: 1 1 auto;
min-width: 0;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mn-embed-pill .ep-tier {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 8px;
font-family: var(--font-code);
font-size: 7.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #6E6E73;
background: rgba(60, 60, 67, 0.06);
line-height: 1.45;
white-space: nowrap;
}
/* Tier modifier classes mirror the production renderer
* (electron-app/.../threadCardRenderer-embeds.ts:33 emits
* `ep-tier ep-tier-${tier}` where tier ∈ view-only / annotatable /
* manipulable). The badge text shows the literal tier word so the
* onboarding teaches the editor's actual three-tier model. */
.ep-tier.ep-tier-view-only { color: var(--text-muted); background: var(--bg-tertiary); }
.ep-tier.ep-tier-annotatable { color: var(--accent); background: rgba(196, 93, 53, 0.10); }
.ep-tier.ep-tier-manipulable { color: var(--status-blue); background: rgba(10, 132, 255, 0.10); }
/* Overflow dots — three pulsing specks after the tier pill, coupled to
* the artifact tier just like the sketch. */
.mn-embed-pill .ep-dots {
display: flex;
gap: 2px;
margin-left: 2px;
flex: 0 0 auto;
}
.mn-embed-pill .ep-dots span {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--text-muted);
opacity: 0.5;
animation: ep-dot-pulse 1.4s ease-in-out infinite;
}
.mn-embed-pill .ep-dots span:nth-child(2) { animation-delay: 0.15s; }
.mn-embed-pill .ep-dots span:nth-child(3) { animation-delay: 0.3s; }
.ep-tier.ep-tier-annotatable + .ep-dots span { background: var(--accent); }
.ep-tier.ep-tier-manipulable + .ep-dots span { background: var(--status-blue); }
@keyframes ep-dot-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
.mn-embed-thumb {
position: relative;
height: 188px;
display: flex;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
border: 1px solid var(--divider-light);
border-radius: 6px;
background: var(--bg-secondary);
padding: 0;
cursor: default;
transition:
border-color 200ms var(--ease),
box-shadow 200ms var(--ease);
}
.mn-embed-thumb:hover {
border-color: rgba(196, 93, 53, 0.36);
box-shadow: 0 2px 14px rgba(196, 93, 53, 0.09);
}
.mn-embed-thumb::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: rgba(29, 29, 31, 0);
pointer-events: none;
transition: background 200ms var(--ease);
}
.mn-embed-thumb::after {
content: attr(data-open-label);
position: absolute;
left: 50%;
top: 50%;
z-index: 4;
transform: translate(-50%, calc(-50% + 4px));
padding: 4px 12px;
border-radius: 12px;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 650;
letter-spacing: 0.02em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition:
opacity 200ms var(--ease),
transform 200ms var(--ease);
}
.mn-embed-thumb:hover::before {
background: rgba(29, 29, 31, 0.18);
}
.mn-embed-thumb:hover::after {
opacity: 1;
transform: translate(-50%, -50%);
}
.margin-note [hidden] {
display: none !important;
}
/* The route-planner artwork is a full-bleed scene (268×148): a fixed
* thumb height crops its Go strip under `slice`, so this thumb sizes
* itself to the artwork's aspect ratio instead. */
.mn-embed-thumb:has(.mn-embed-route-planner) {
height: auto;
aspect-ratio: 268 / 148;
}
.mn-embed > .mn-embed-pill {
margin-top: 0;
}
/* Flat artifact bodies — no inner card. The artifact shape (SVG / rows /
* pills) carries the visual presence directly; chrome was creating the
* card-on-card stack. Internal padding and gap keep content readable. */
.mn-embed-card,
.mn-embed-chart,
.mn-embed-diagram,
.mn-embed-invite-flow,
.mn-embed-route-planner,
.mn-embed-hero-variants,
.mn-embed-hero-compare,
.mn-embed-cohort-curves,
.mn-embed-launch-surfaces,
.mn-embed-architecture-diagram,
.mn-embed-code-snippet,
.mn-embed-wireframe-arrange,
.mn-embed-call-quotes,
.mn-embed-brand-directions,
.mn-embed-plan-collapse {
width: 100%;
height: 100%;
border-radius: 0;
background: transparent;
box-shadow: none;
padding: 8px 9px 9px;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-ui);
position: relative;
}
/* The artifact SVG inside an embed card grows to fill remaining card
* height after the eyebrow + title. Without this, browsers render the
* SVG at its intrinsic 300×150 default and the artifact reads as a
* cropped strip. */
.mn-embed-card > svg,
.mn-embed-chart > svg,
.mn-embed-diagram > svg,
.mn-embed-invite-flow > svg,
.mn-embed-route-planner > svg,
.mn-embed-hero-variants > svg,
.mn-embed-hero-compare > svg,
.mn-embed-cohort-curves > svg,
.mn-embed-launch-surfaces > svg,
.mn-embed-architecture-diagram > svg,
.mn-embed-wireframe-arrange > svg,
.mn-embed-call-quotes > svg,
.mn-embed-brand-directions > svg,
.mn-embed-plan-collapse > svg {
display: block;
flex: 1 1 auto;
width: 100%;
min-height: 0;
}
.ec-eyebrow {
font-size: 8px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-faint);
font-weight: 700;
}
.ec-chart-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.ec-eyebrow--legend {
color: var(--accent);
}
.ec-title {
font-size: 12px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
letter-spacing: -0.005em;
}
.mn-embed-invite-flow,
.mn-embed-route-planner,
.mn-embed-hero-variants,
.mn-embed-hero-compare,
.mn-embed-cohort-curves,
.mn-embed-launch-surfaces,
.mn-embed-brand-directions {
gap: 8px;
}
.mn-embed-card .ec-row {
display: flex;
gap: 4px;
margin-top: auto;
}
.mn-embed-card .ec-pill {
flex: 1;
height: 14px;
border-radius: 3px;
background: rgba(60, 60, 67, 0.08);
}
.mn-embed-card .ec-pill.active {
background: #1D1D1F;
}
.mn-embed-card .ec-cta {
margin-top: 4px;
height: 16px;
border-radius: 4px;
background: #1D1D1F;
display: flex;
align-items: center;
justify-content: center;
font-size: 7.5px;
font-weight: 600;
color: #fff;
letter-spacing: 0.04em;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 1px 2px rgba(0, 0, 0, 0.20);
}
.mn-embed-pin {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #1D1D1F;
border: 1.5px solid #fff;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.10),
0 4px 10px rgba(15, 23, 42, 0.18);
font-family: var(--font-ui);
font-size: 8px;
font-weight: 700;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
right: 12px;
bottom: 12px;
}
.mn-annotation-pin-dot {
fill: #1D1D1F;
stroke: #fff;
stroke-width: 1.2;
filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.20));
}
.mn-annotation-pin-text {
font-family: var(--font-ui);
font-size: 5.3px;
font-weight: 800;
fill: #fff;
dominant-baseline: middle;
}
/* Labeled chip — replaces the legacy numbered annotation pin in §4.2.
* Rendered as + inside the SVG; the rect's fill is the
* persona accent, the text is white. The chip extends from the anchor
* rather than centering on it, so the legacy pin coordinates remain the
* geometric anchor and the chip itself sits adjacent. */
.mn-annotation-chip-bg {
filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.20));
}
.mn-annotation-chip-text {
font-family: var(--font-ui);
font-weight: 800;
fill: #fff;
letter-spacing: 0.02em;
dominant-baseline: middle;
}
.mn-embed-invite-flow .mn-annotation-chip-bg { fill: var(--invite-primary); }
.mn-embed-route-planner .mn-annotation-chip-bg { fill: var(--route-primary); }
.mn-embed-hero-compare .mn-annotation-chip-bg { fill: var(--compare-primary); }
.mn-embed-launch-surfaces .mn-annotation-chip-bg { fill: var(--launch-primary); }
.mn-embed-hero-variants .mn-annotation-chip-bg { fill: var(--variants-primary); }
.mn-embed-cohort-curves .mn-annotation-chip-bg { fill: var(--cohort-primary); }
.mn-embed-call-quotes .mn-annotation-chip-bg { fill: var(--cq-accent); }
.mn-embed-call-quotes .mn-annotation-pin-dot { fill: var(--cq-accent); }
/* §4.3 lightbox detail layers. Each developed embed bakes additional
* SVG groups marked `data-detail-only`; the card hides them, the
* lightbox sets `data-detail="full"` on the cloned SVG to reveal them.
* Chips become a sentence-length caption block in the lightbox version,
* so chip-only and caption-only groups gate on the same attribute. */
[data-detail-only] {
display: none;
}
svg[data-detail="full"] [data-detail-only] {
display: inline;
}
svg[data-detail="full"] [data-card-only] {
display: none;
}
@media (min-width: 921px) and (max-width: 1280px) {
.mn-embed {
margin-top: 9px;
}
.mn-embed-pill {
gap: 6px;
padding: 6px 8px;
font-size: 10px;
}
.mn-embed-pill .ep-icon {
width: 13px;
height: 13px;
}
.mn-embed-pill .ep-tier {
padding: 1px 5px;
font-size: 7.5px;
}
.mn-embed-thumb {
height: 168px;
padding: 0;
}
.mn-embed-card,
.mn-embed-chart,
.mn-embed-diagram,
.mn-embed-invite-flow,
.mn-embed-route-planner,
.mn-embed-hero-variants,
.mn-embed-hero-compare,
.mn-embed-cohort-curves,
.mn-embed-launch-surfaces {
padding: 8px 9px 9px;
gap: 5px;
}
.ec-eyebrow {
font-size: 7.5px;
}
.ec-title {
font-size: 11px;
}
}
/* Each film persona now carries a distinct project identity: a hue
* keyed to the kind of work the artifact represents (engineering /
* data / design / marketing), a gently tinted surface, and a matching
* accent CTA. Typography differentiation (sans / mono / serif) is
* preserved on top of the new color story so the four films now differ
* BOTH in shape AND in palette — they read as four distinct projects
* shipped by four different teams, not four shades of one product.
* The variable names remain unchanged so the SVG renderers in
* takeover-embed-renderer.js and takeover-embeds/* continue to resolve. */
/* Invite flow — engineering / auth project. Cool slate surface with a
* teal accent reading as "infra-grade, secure handoff." */
.mn-embed-invite-flow {
--invite-surface: #FFFFFF;
--invite-border: rgba(36, 73, 96, 0.16);
--invite-text: #15293A;
--invite-text-soft: #3D5468;
--invite-muted: #56708A;
--invite-faint: rgba(36, 73, 96, 0.40);
--invite-primary: #1F6F7A;
--invite-primary-soft: rgba(31, 111, 122, 0.12);
--invite-chip: rgba(31, 111, 122, 0.10);
--invite-cta: #1F6F7A;
background: linear-gradient(180deg, #F4F8FA 0%, #E8F0F4 100%);
box-shadow:
0 1px 2px rgba(15, 42, 56, 0.05),
0 6px 14px -8px rgba(15, 42, 56, 0.14),
inset 0 0 0 1px rgba(31, 111, 122, 0.10);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-invite-flow .ec-eyebrow { color: var(--invite-primary); letter-spacing: 0.18em; }
.mn-embed-invite-flow .mn-annotation-pin-dot { fill: var(--invite-primary); }
/* Route planner — a small thread artifact, not a full app card. The
* warm paper surface keeps it connected to the editorial onboarding
* page while the blue accent carries the navigation product context. */
.mn-embed-route-planner {
--route-surface: #FFFFFF;
--route-surface-soft: rgba(255, 255, 255, 0.54);
--route-border: rgba(109, 84, 58, 0.16);
--route-text: #2A2119;
--route-text-soft: #5B4737;
--route-muted: #6F6258;
--route-faint: rgba(93, 73, 53, 0.42);
--route-primary: #0A84FF;
--route-primary-soft: rgba(10, 132, 255, 0.12);
--route-chip: rgba(109, 84, 58, 0.08);
--route-cta: #0A84FF;
--route-footer: rgba(109, 84, 58, 0.07);
--route-line-muted: rgba(93, 73, 53, 0.20);
--route-dot-muted: rgba(93, 73, 53, 0.36);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.56) 0%, rgba(248, 242, 232, 0.66) 100%),
#F7F1E7;
box-shadow:
0 1px 2px rgba(61, 42, 24, 0.04),
0 6px 14px -8px rgba(61, 42, 24, 0.14),
inset 0 0 0 1px rgba(109, 84, 58, 0.08);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-route-planner .ec-eyebrow { color: var(--route-primary); letter-spacing: 0; }
.mn-embed-route-planner .mn-annotation-pin-dot { fill: var(--route-primary); }
.mn-embed-route-planner,
.mn-embed-hero-compare,
.mn-embed-cohort-curves,
.mn-embed-launch-surfaces,
.mn-embed-architecture-diagram,
.mn-embed-wireframe-arrange,
.mn-embed-call-quotes,
.mn-embed-plan-collapse {
padding: 0;
gap: 0;
}
.mn-embed-route-planner > svg,
.mn-embed-hero-compare > svg,
.mn-embed-cohort-curves > svg,
.mn-embed-launch-surfaces > svg,
.mn-embed-architecture-diagram > svg,
.mn-embed-wireframe-arrange > svg,
.mn-embed-call-quotes > svg,
.mn-embed-plan-collapse > svg {
flex: 1 1 100%;
width: 100%;
height: 100%;
min-height: 100%;
}
.mn-embed-hero-variants {
--variants-surface: #FFFFFF;
--variants-border: rgba(60, 60, 67, 0.13);
--variants-text: #1D1D1F;
--variants-text-soft: #3C3C43;
--variants-muted: #6E6E73;
--variants-faint: rgba(60, 60, 67, 0.36);
--variants-primary: #1D1D1F;
--variants-primary-soft: rgba(29, 29, 31, 0.08);
--variants-chip: rgba(29, 29, 31, 0.08);
--variants-cta: #1D1D1F;
background: linear-gradient(180deg, #FFFFFF 0%, #F5F5F7 100%);
box-shadow:
0 1px 2px rgba(15, 23, 42, 0.04),
0 6px 14px -8px rgba(15, 23, 42, 0.10),
inset 0 0 0 1px rgba(60, 60, 67, 0.07);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-hero-variants .ec-eyebrow { color: var(--variants-muted); }
.mn-embed-hero-variants .mn-annotation-pin-dot { fill: var(--variants-primary); }
/* hero-compare (first-run / design project) — white product surface with
* a coral accent. Action-first v2 keeps the coral CTA; setup-first v1 stays
* muted for contrast. */
.mn-embed-hero-compare {
--compare-surface: #FFFFFF;
--compare-surface-warm: #FFFFFF;
--compare-surface-warm-top: #FFFFFF;
--compare-surface-disabled: #F5F5F7;
--compare-surface-draft: #FFFFFF;
--compare-border: rgba(146, 72, 38, 0.15);
--compare-text: #2A1810;
--compare-text-soft: #6B463A;
--compare-muted: #8C6657;
--compare-faint: rgba(146, 72, 38, 0.40);
--compare-primary: #C45D35;
--compare-primary-soft: rgba(196, 93, 53, 0.12);
--compare-chip: rgba(196, 93, 53, 0.10);
--compare-cta: #C45D35;
background: #FFFFFF;
box-shadow:
0 1px 2px rgba(146, 72, 38, 0.06),
0 6px 14px -8px rgba(146, 72, 38, 0.18),
inset 0 0 0 1px rgba(196, 93, 53, 0.10);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-hero-compare .ec-eyebrow { color: var(--compare-primary); letter-spacing: 0.18em; }
.mn-embed-hero-compare .mn-annotation-pin-dot { fill: var(--compare-primary); }
/* cohort-curves (research / data project) — cream paper surface with an
* indigo accent. Reads as "field notebook, analytical." Mono typography
* already in place reinforces the data-document character. */
.mn-embed-cohort-curves {
--cohort-surface: #FFFFFF;
--cohort-border: rgba(45, 49, 95, 0.14);
--cohort-text: #1A1D38;
--cohort-text-soft: rgba(45, 49, 95, 0.55);
--cohort-muted: #4A507A;
--cohort-faint: rgba(45, 49, 95, 0.40);
--cohort-primary: #3F4A8A;
--cohort-primary-soft: rgba(63, 74, 138, 0.10);
--cohort-grid: rgba(45, 49, 95, 0.10);
--cohort-axis: rgba(45, 49, 95, 0.32);
--cohort-line: #3F4A8A;
--cohort-counter: rgba(45, 49, 95, 0.42);
background: linear-gradient(180deg, #FBF8F2 0%, #F2EDE2 100%);
box-shadow:
0 1px 2px rgba(45, 49, 95, 0.05),
0 6px 14px -8px rgba(45, 49, 95, 0.16),
inset 0 0 0 1px rgba(63, 74, 138, 0.10);
font-family: "IBM Plex Mono", ui-monospace, monospace;
}
.mn-embed-cohort-curves .ec-eyebrow { color: var(--cohort-primary); letter-spacing: 0.18em; }
.mn-embed-cohort-curves .mn-annotation-pin-dot { fill: var(--cohort-primary); }
/* launch-surfaces (marketing / brand project) — neutral product-page
* surface with Apple-style system type, white cards, and blue CTA. */
.mn-embed-launch-surfaces {
--launch-surface: #FFFFFF;
--launch-border: rgba(0, 0, 0, 0.10);
--launch-text: #1D1D1F;
--launch-text-soft: #424245;
--launch-muted: #6E6E73;
--launch-faint: rgba(60, 60, 67, 0.42);
--launch-primary: #0071E3;
--launch-primary-soft: rgba(0, 113, 227, 0.10);
--launch-chip: rgba(0, 113, 227, 0.08);
--launch-cta: #0071E3;
background: #F5F5F7;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.04),
0 8px 18px -12px rgba(0, 0, 0, 0.20),
inset 0 0 0 1px rgba(0, 0, 0, 0.06);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, Arial, sans-serif;
}
.mn-embed-launch-surfaces .ec-eyebrow { color: var(--launch-primary); letter-spacing: 0.18em; }
.mn-embed-launch-surfaces .mn-annotation-pin-dot { fill: var(--launch-primary); }
/* architecture-diagram (route-planner / system-reasoning) — warm-paper
* surface with a tempered orange tied to the architecture pill. The
* artifact is a small flow diagram: the agent thinking about a system
* boundary, drawn at notebook fidelity. Stripe-docs feel: cream paper,
* inked rules, one accented edge. */
.mn-embed-architecture-diagram {
--diagram-surface: #FFFFFF;
--diagram-border: rgba(60, 50, 30, 0.20);
--diagram-text: #1F1A12;
--diagram-text-soft: #5C5345;
--diagram-muted: #7E7160;
--diagram-faint: rgba(60, 50, 30, 0.42);
--diagram-accent: #C97A2D;
--diagram-accent-soft: rgba(201, 122, 45, 0.14);
--diagram-accent-strong: rgba(201, 122, 45, 0.62);
--diagram-edge: rgba(60, 50, 30, 0.32);
--diagram-edge-soft: rgba(60, 50, 30, 0.20);
/* Role tints — same warm family, different temperatures so the three
* boxes (source / editable / locked) read as a system at a glance. */
--diagram-role-source: #C97A2D;
--diagram-role-source-soft: rgba(201, 122, 45, 0.10);
--diagram-role-editable: #5C7AA0;
--diagram-role-editable-soft: rgba(92, 122, 160, 0.10);
--diagram-role-locked: #7A6651;
--diagram-role-locked-soft: rgba(122, 102, 81, 0.09);
--diagram-grid: rgba(80, 60, 30, 0.18);
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 245, 220, 0.55), transparent 70%),
linear-gradient(180deg, #FBF7EE 0%, #ECE4D2 100%);
box-shadow:
0 1px 2px rgba(60, 50, 30, 0.06),
0 6px 14px -8px rgba(60, 50, 30, 0.18),
inset 0 0 0 1px rgba(60, 50, 30, 0.10);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-architecture-diagram .ec-eyebrow { color: var(--diagram-accent); letter-spacing: 0.18em; }
.mn-embed-architecture-diagram .mn-annotation-pin-dot { fill: var(--diagram-accent); }
.mn-embed-architecture-diagram .mn-annotation-chip-bg { fill: var(--diagram-accent); }
/* plan-collapse (dispatch / adaptive-surface diagram) — same warm-paper
* notebook surface as the architecture diagram, but tinted with the
* navigation-blue accent so it sits next to the route-planner map as a
* sibling artifact. The diagram argues plan-mode's two shapes (collapsed
* Go strip · expanded editable card) both reach the same nav-mode. */
.mn-embed-plan-collapse {
--plan-surface: #FFFFFF;
--plan-border: rgba(60, 50, 30, 0.20);
--plan-text: #1F1A12;
--plan-text-soft: #5C5345;
--plan-muted: #7E7160;
--plan-faint: rgba(60, 50, 30, 0.42);
--plan-primary: #0A84FF;
--plan-primary-soft: rgba(10, 132, 255, 0.10);
--plan-editable: #0A84FF;
--plan-editable-soft: rgba(10, 132, 255, 0.09);
--plan-nav: #7A6651;
--plan-nav-soft: rgba(122, 102, 81, 0.09);
--plan-cta: #0A84FF;
--plan-edge: rgba(60, 50, 30, 0.36);
--plan-edge-soft: rgba(60, 50, 30, 0.22);
--plan-grid: rgba(80, 60, 30, 0.18);
background:
radial-gradient(ellipse at 50% 0%, rgba(225, 240, 255, 0.55), transparent 70%),
linear-gradient(180deg, #FBF7EE 0%, #ECE4D2 100%);
box-shadow:
0 1px 2px rgba(60, 50, 30, 0.06),
0 6px 14px -8px rgba(60, 50, 30, 0.18),
inset 0 0 0 1px rgba(60, 50, 30, 0.10);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-plan-collapse .ec-eyebrow { color: var(--plan-primary); letter-spacing: 0.18em; }
.mn-embed-plan-collapse .mn-annotation-pin-dot { fill: var(--plan-primary); }
.mn-embed-plan-collapse .mn-annotation-chip-bg { fill: var(--plan-primary); }
/* code-snippet (research / schema project) — cream notebook surface
* matching cohort-curves' indigo voice. Mono type, syntax-tinted
* keywords / fns / strings / numbers / comments at the same fidelity
* the agent would commit. */
.mn-embed-code-snippet {
--code-surface: #FBF8F1;
--code-border: rgba(45, 49, 95, 0.16);
--code-text: #1A1D38;
--code-text-soft: #3F4A8A;
--code-muted: rgba(45, 49, 95, 0.55);
--code-faint: rgba(45, 49, 95, 0.40);
--code-keyword: #B5418D;
--code-fn: #1F6F7A;
--code-string: #A65A1F;
--code-num: #6F4FBF;
--code-comment: rgba(45, 49, 95, 0.52);
--code-line: rgba(45, 49, 95, 0.22);
--code-rail: rgba(45, 49, 95, 0.10);
background: linear-gradient(180deg, #FBF8F2 0%, #F2EDE2 100%);
box-shadow:
0 1px 2px rgba(45, 49, 95, 0.05),
0 6px 14px -8px rgba(45, 49, 95, 0.16),
inset 0 0 0 1px rgba(63, 74, 138, 0.10);
padding: 0;
gap: 0;
font-family: "IBM Plex Mono", ui-monospace, monospace;
display: flex;
flex-direction: column;
}
.mn-embed-code-snippet .ec-eyebrow { color: var(--code-text-soft); letter-spacing: 0.18em; }
.mn-embed-code-snippet .ec-code-frame {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
background: var(--code-surface);
overflow: hidden;
}
.mn-embed-code-snippet .ec-code-rail {
flex: 0 0 22px;
padding: 9px 0 9px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 8px;
line-height: 1.6;
color: var(--code-faint);
background: linear-gradient(180deg, rgba(45, 49, 95, 0.04) 0%, transparent 100%);
border-right: 1px solid var(--code-rail);
user-select: none;
}
.mn-embed-code-snippet .ec-code-rail span {
padding-right: 6px;
font-variant-numeric: tabular-nums;
}
.mn-embed-code-snippet .ec-code-body {
flex: 1 1 auto;
padding: 9px 10px 10px;
margin: 0;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 9.5px;
line-height: 1.6;
color: var(--code-text);
white-space: pre;
overflow: hidden;
}
.mn-embed-code-snippet .ec-code-body .kw { color: var(--code-keyword); font-weight: 600; }
.mn-embed-code-snippet .ec-code-body .fn { color: var(--code-fn); }
.mn-embed-code-snippet .ec-code-body .str { color: var(--code-string); }
.mn-embed-code-snippet .ec-code-body .num { color: var(--code-num); }
.mn-embed-code-snippet .ec-code-body .com { color: var(--code-comment); font-style: italic; }
.mn-embed-code-snippet .ec-code-body .typ { color: var(--code-fn); font-style: normal; }
.mn-embed-code-snippet .ec-code-tag {
position: absolute;
top: 7px;
right: 9px;
padding: 1px 5px;
border-radius: 3px;
background: var(--code-rail);
color: var(--code-text-soft);
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 7px;
letter-spacing: 0.10em;
text-transform: uppercase;
font-weight: 600;
}
/* wireframe-arrange (manipulable focus-path) — quiet study-paper
* surface with system-blue accents. Visible drag handles on each
* slot communicate the "rearrangeable" affordance per spec specimen 7;
* the wireframe is deliberately rougher than the polished hero-compare
* artifact so the manipulable tier reads as "play with me," not
* "review me." */
.mn-embed-wireframe-arrange {
--wf-surface: #FFFFFF;
--wf-border: rgba(60, 50, 30, 0.20);
--wf-text: #1F1A12;
--wf-text-soft: #5C5345;
--wf-muted: #7E7160;
--wf-faint: rgba(60, 50, 30, 0.42);
/* Warm accent — same family as the architecture diagram so the two
* embeds read as a coherent set, not two foreign colour registers. */
--wf-accent: #C97A2D;
--wf-accent-soft: rgba(201, 122, 45, 0.10);
--wf-accent-strong: rgba(201, 122, 45, 0.62);
--wf-grid: rgba(80, 60, 30, 0.18);
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 245, 220, 0.55), transparent 70%),
linear-gradient(180deg, #FBF7EE 0%, #ECE4D2 100%);
box-shadow:
0 1px 2px rgba(60, 50, 30, 0.06),
0 6px 14px -8px rgba(60, 50, 30, 0.18),
inset 0 0 0 1px rgba(60, 50, 30, 0.10);
font-family: Inter, Arial, sans-serif;
}
.mn-embed-wireframe-arrange .ec-eyebrow { color: var(--wf-accent); letter-spacing: 0.18em; }
/* Drag handles for the manipulable slots are painted as inline SVG
* elements by the renderer (see renderWireframeArrangeEmbed
* `handle()` in takeover-embeds/technical-embeds.js) — same visual register as
* thread-specimen.html .ec-handle but inside the artifact's SVG so the
* lightbox clone path keeps them with the rest of the wireframe. */
/* call-quotes (founder / customer-call evidence) — quiet linen surface
* with a steady navy accent so the embed reads as field notes, not
* marketing. Serif italic quotes carry the variation; the timeline rail
* carries the cadence. Same warm family as the rest of the founder
* film, separated only by the cooler accent — quotes feel observed. */
.mn-embed-call-quotes {
--cq-surface: #FAF6EE;
--cq-border: rgba(60, 50, 30, 0.18);
--cq-rail: rgba(60, 50, 30, 0.30);
--cq-text: #1F1A12;
--cq-text-soft: #4D423A;
--cq-muted: #7E7160;
--cq-faint: rgba(60, 50, 30, 0.42);
--cq-accent: #2D5C7A;
--cq-accent-soft: rgba(45, 92, 122, 0.10);
background: linear-gradient(180deg, #FBF7EE 0%, #ECE4D2 100%);
box-shadow:
0 1px 2px rgba(60, 50, 30, 0.06),
0 6px 14px -8px rgba(60, 50, 30, 0.18),
inset 0 0 0 1px rgba(60, 50, 30, 0.10);
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', Inter, Arial, sans-serif;
}
.mn-embed-call-quotes .ec-eyebrow { color: var(--cq-accent); letter-spacing: 0.18em; }
/* §3 card detail row — price + caption between title and tier pills.
* Adds the structural beat the original ec-eyebrow/title/pills/cta
* rhythm was missing. Mirrors the way the real product surfaces
* communicate price + qualifier at a glance. */
.mn-embed-card .ec-detail {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
padding-top: 2px;
border-top: 1px solid var(--hairline);
}
.mn-embed-card .ec-price {
font-family: var(--font-body);
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.mn-embed-card .ec-price-unit {
font-family: var(--font-ui);
font-size: 8px;
font-weight: 500;
color: var(--text-secondary);
margin-left: 1px;
}
.mn-embed-card .ec-detail-meta {
font-family: var(--font-ui);
font-size: 7px;
font-weight: 500;
color: var(--text-faint);
letter-spacing: 0.02em;
}
/* Chart variant — the forgetting-curves panel draws itself entirely in
* SVG presentation attributes; the host only sizes the artwork. */
.mn-embed-chart svg {
width: 100%;
height: 100%;
flex: 1;
}
/* Diagram variant — simple node/edge layout. */
.mn-embed-diagram svg { width: 100%; height: 100%; flex: 1; }
.mn-embed-diagram .dg-node {
fill: #fff;
stroke: var(--text-secondary);
stroke-width: 0.8;
}
.mn-embed-diagram .dg-node.accent {
fill: var(--accent-soft);
stroke: var(--accent);
}
.mn-embed-diagram .dg-edge {
stroke: var(--text-muted);
stroke-width: 0.8;
fill: none;
stroke-dasharray: 2 2;
}
.mn-embed-diagram .dg-label {
font-family: var(--font-ui);
font-size: 5px;
fill: var(--text-secondary);
font-weight: 600;
}
.mn-embed-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
font-family: var(--font-ui);
font-size: 10px;
color: var(--text-secondary);
border-top: 1px solid var(--hairline);
background: rgba(255, 255, 255, 0.6);
}
.mn-embed-meta .tier {
display: inline-flex;
align-items: center;
gap: 5px;
}
.mn-embed-meta .tier-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
}
.margin-note .mn-action {
display: inline-block;
margin-top: 12px;
padding: 0;
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.55;
cursor: pointer;
transition: opacity 160ms var(--ease), color 160ms var(--ease);
}
.margin-note .mn-action:hover { opacity: 1; color: var(--text-secondary); }
/* Action row at the bottom of a developed thread — interact / dismiss
* pair. The historical .mn-reply class remains the click target used by
* Threads-design-sketch.html. Only the developed thread shows them; the
* brief threads stay quiet.
*
* Chrome stays asleep until invited: the row sits at half opacity by
* default and lifts to full when the cursor enters the card or focus
* lands inside it. Mirrors the sketch principle (Threads-design-sketch.html:455)
* where dismiss/reply are 0% opacity until note hover — softened here
* to 0.5 because onboarding wants the affordance discoverable for
* first-time visitors who may never hover.
*/
.mn-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 9px;
padding-top: 7px;
border-top: 1px solid var(--hairline);
opacity: 0.5;
transition: opacity 220ms var(--ease);
}
.margin-note:hover .mn-actions,
.margin-note:focus-within .mn-actions {
opacity: 1;
}
.mn-reply,
.mn-dismiss {
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: lowercase;
cursor: pointer;
transition: color 160ms var(--ease);
}
.mn-reply { color: var(--accent); }
.mn-dismiss { color: var(--text-muted); }
.mn-dismiss:hover { color: var(--text-secondary); }
/* Anchor dot + wavy connector — mirrors electron-app/src/styles/margin.css.
* The dot sits just left of the note's left rail (left: -4px), 5×5px,
* soft --ai-dot color; the wavy connector extends from the dot back
* into the gutter, drawn by wavyPath() in takeover-orchestrator.js
* (4-segment seeded cubic bezier, ported verbatim from the live
* threadCardRenderer.ts). The dot + connector + the doc-side wavy
* underline together form the anchored relationship — none of them
* does the work alone.
*
* State palette mirrors margin.css:
* default visible — --ai-connector / --ai-dot, underline accent @ 50%
* hover on card — accent @ 0.2 / accent @ 0.8 (underline unchanged)
* anchor-active — rgba(201,154,88,0.48) / rgba(201,154,88,0.95),
* underline accent @ 80%
* drifted — opacity 0.85, status-orange @ 0.3 / status-orange
* pending — opacity 0.5, text-muted @ 0.15 / pulsing text-muted
* orphaned — opacity 0.7, defaults preserved (no anchor-resolved
* underline on the doc side)
*/
.margin-note::before {
content: '';
position: absolute;
left: -4px;
top: 16px;
width: 5px; height: 5px;
border-radius: 50%;
/* Graphite default — the dot reads as a quiet anchor mark, not a brand
* accent. Copper is reserved for conversion + the doc-side wavy underline,
* which keeps the doc↔thread relationship visible against monochrome chrome. */
background: rgba(29, 29, 31, 0.32);
opacity: 0;
transform: scale(0);
transition: opacity 200ms var(--ease), transform 200ms var(--ease), background 200ms var(--ease);
z-index: 1;
}
.margin-note.is-anchored::before {
opacity: 1;
transform: scale(1);
}
.mn-connector {
position: absolute;
left: calc(-1 * clamp(48px, 3.4vw, 64px) - 8px);
top: 16px;
width: clamp(48px, 3.4vw, 64px);
height: 5px;
pointer-events: none;
opacity: 0;
color: var(--ai-connector);
transition: opacity 240ms var(--ease), color 240ms var(--ease);
overflow: visible;
}
.margin-note.is-connected .mn-connector { opacity: 1; }
.mn-connector path {
fill: none;
stroke: currentColor;
stroke-width: 1;
vector-effect: non-scaling-stroke;
transition: stroke-width 200ms var(--ease);
}
/* Hover on card — quiet graphite tint on connector + dot, underline unchanged.
* Excluded from the heated states so a hover on a drifted/pending/orphaned
* thread doesn't override its status colour. The doc-side wavy underline
* still uses copper, so the hover relationship remains visible without the
* dot or connector picking up brand colour. */
.margin-note.is-connected:not(.anchor-active):not(.drifted):not(.pending-judgment):hover .mn-connector {
color: rgba(29, 29, 31, 0.48);
}
.margin-note.is-anchored:not(.anchor-active):not(.drifted):not(.pending-judgment):hover::before {
background: rgba(29, 29, 31, 0.62);
}
/* Anchor-active — heated state. The wheat-toned accent (rgba 201/154/88)
* matches the live editor's margin.css, distinct from --accent so the
* "live thread" cue doesn't compete with type pills or the brand voice. */
.margin-note.is-anchored.anchor-active::before {
background: rgba(201, 154, 88, 0.95);
opacity: 1;
}
.margin-note.is-connected.anchor-active .mn-connector {
color: rgba(201, 154, 88, 0.48);
opacity: 1;
}
.margin-note.is-connected.anchor-active .mn-connector path {
stroke-width: 1.2;
}
/* Drifted — the anchored text moved or no longer resolves cleanly.
* Keep the card visible but step the opacity down; switch dot + connector
* to status-orange so the user sees there's a stale link. */
.margin-note.drifted {
opacity: 0.85;
}
.margin-note.is-anchored.drifted::before {
background: var(--status-orange);
}
.margin-note.is-connected.drifted .mn-connector {
color: var(--status-orange);
opacity: 0.3;
}
/* Pending — waiting on judgment; halve the card and pulse the dot in
* text-muted so the eye reads "queued, not active." */
.margin-note.pending-judgment {
opacity: 0.5;
}
.margin-note.is-anchored.pending-judgment::before {
background: var(--text-muted);
animation: mn-pending-pulse 1.8s ease-in-out infinite;
}
.margin-note.is-connected.pending-judgment .mn-connector {
color: var(--text-muted);
opacity: 0.15;
}
@keyframes mn-pending-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.8; }
}
/* Orphaned — the anchor was deleted from the doc. Card stays visible at
* 0.7 opacity; connector/dot keep their default tint since there's no
* heated relationship to render — and crucially, the doc-side underline
* is gone (the span no longer exists). */
.margin-note.orphaned {
opacity: 0.7;
}
@media (prefers-reduced-motion: reduce) {
.margin-note.pending-judgment::before { animation: none; opacity: 0.6; }
}
/* Floating thread bubble — mirrors the desktop product's bubble shell
* (electron-app/src/styles/shared-chat-bubble.css + thread-bubble.css):
* macOS-style close button + section title in the titlebar, .cb-msg
* vocabulary in the messages region, and a real .cb-input-area
* (textarea + send button) that stays visible but is disabled in the
* onboarding demo. The controller positions the bubble vertically near
* the source thread, so it reads as belonging to that thread. */
.thread-bubble {
position: absolute;
right: clamp(28px, 4vw, 64px);
bottom: clamp(96px, 12vh, 132px);
width: 360px;
max-width: calc(100vw - 64px);
height: 436px;
max-height: min(436px, calc(100vh - 132px));
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 10px;
box-shadow: 0 24px 60px -16px rgba(60, 40, 20, 0.20),
0 8px 22px -6px rgba(60, 40, 20, 0.10);
opacity: 0;
transform: translateY(8px) scale(0.985);
transform-origin: top right;
transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
pointer-events: none;
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 4;
}
.thread-bubble.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
/* Diagonal-hatch grip — mirrors electron-app/src/styles/thread-bubble.css:23–34. */
.thread-bubble::after {
content: '';
position: absolute;
right: 10px;
bottom: 8px;
width: 18px;
height: 18px;
background: linear-gradient(135deg,
transparent 0 44%, var(--hairline) 44% 52%,
transparent 52% 68%, var(--hairline) 68% 76%,
transparent 76% 100%);
opacity: 0.9;
pointer-events: none;
}
/* Titlebar — macOS-style close on the left, section title beside it. */
.thread-bubble-titlebar.cb-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-bottom: 1px solid var(--hairline);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.96), rgba(250, 248, 244, 0.96));
flex-shrink: 0;
}
.thread-bubble-close.cb-close {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 999px;
background: #FF5F57;
color: transparent;
font-size: 0;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
position: relative;
transition: background 120ms var(--ease);
}
.thread-bubble-close.cb-close::after {
content: '\00d7';
position: absolute;
font-size: 11px;
font-weight: 700;
color: transparent;
line-height: 1;
transition: color 120ms var(--ease);
}
.thread-bubble-close.cb-close:hover::after { color: rgba(0, 0, 0, 0.7); }
.thread-bubble-title.cb-title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
line-height: 1.2;
color: var(--text-secondary);
}
/* Messages container — flex column with internal scroll, gap matches
* the product's shared-chat-bubble baseline. */
.thread-bubble-messages.cb-messages {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px;
overflow-y: auto;
}
/* Compact thread-context row at the top of the messages list:
* thread type pill + the document quote it points to. Reads as
* scaffolding, not as a message. */
.cb-context-row {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px dashed var(--hairline);
font-family: var(--font-ui);
font-size: 11.5px;
line-height: 1.45;
}
.cb-context-type {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: 999px;
background: var(--bg-tertiary);
color: var(--text-secondary);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.cb-context-type.suggestion { background: var(--accent-soft); color: var(--accent); }
.cb-context-type.observation,
.cb-context-type.question,
.cb-context-type.architecture,
.cb-context-type.warning,
.cb-context-type.data { background: var(--bg-tertiary); color: var(--text-secondary); }
.cb-context-quote {
flex: 1 1 auto;
min-width: 0;
color: var(--text-secondary);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Messages — nested .cb-msg-body / .cb-msg-text mirrors product. */
.thread-bubble-msg.cb-msg {
display: flex;
flex-direction: column;
gap: 6px;
max-width: 100%;
}
.thread-bubble-msg.cb-msg.ai { align-self: flex-start; }
.thread-bubble-msg.cb-msg.user { align-self: flex-end; align-items: flex-end; }
.thread-bubble-msg-body.cb-msg-body {
padding: 10px 12px;
border-radius: 16px;
word-break: break-word;
width: fit-content;
max-width: 100%;
}
.thread-bubble-msg.cb-msg.ai .thread-bubble-msg-body.cb-msg-body {
background: var(--bg-secondary);
color: var(--text-primary);
}
.thread-bubble-msg.cb-msg.user .thread-bubble-msg-body.cb-msg-body {
background: var(--accent);
color: #fff;
max-width: min(100%, 296px);
}
.thread-bubble-msg-body.cb-msg-body.has-embed { width: min(100%, 320px); }
.thread-bubble-msg-text.cb-msg-text {
font-family: var(--font-ui);
font-size: 12.5px;
line-height: 1.58;
}
.thread-bubble-msg-text.cb-msg-text strong { font-weight: 700; }
.thread-bubble-msg-text.cb-msg-text em { font-style: italic; }
.thread-bubble-msg-text.cb-msg-text code {
display: inline-block;
padding: 0 4px;
border-radius: 4px;
background: var(--bg-tertiary);
color: var(--text-secondary);
font-family: var(--font-code);
font-size: 0.92em;
}
/* Embed inside a message — reuses the existing .mn-embed styles
* (cloned from the margin thread), wrapped in a constrained slot. */
.thread-bubble-msg-embed {
margin-top: 0;
width: 100%;
}
.thread-bubble-msg-embed .mn-embed {
margin: 0;
width: 100%;
}
.thread-bubble-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.thread-bubble-pill {
height: 24px;
padding: 0 9px;
border: 1px solid rgba(29, 29, 31, 0.08);
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: var(--text-secondary);
font-family: var(--font-ui);
font-size: 11px;
line-height: 1;
pointer-events: none;
}
/* Input area — a real composer that mirrors the product visually,
* but sending is disabled in the demo. The textarea stays focusable-
* looking; the send button reads as muted. */
.thread-bubble-input-area.cb-input-area {
display: flex;
align-items: flex-end;
gap: 10px;
padding: 8px 12px 10px;
border-top: 1px solid var(--hairline);
background: var(--bg-elevated);
flex-shrink: 0;
}
.thread-bubble-reply-input.cb-input {
flex: 1;
min-height: 32px;
max-height: 96px;
box-sizing: border-box;
resize: none;
padding: 6px 12px;
border: 1px solid var(--hairline);
border-radius: 6px;
background: var(--bg-secondary);
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 12px;
line-height: 1.45;
outline: none;
}
.thread-bubble-reply-input.cb-input:disabled {
color: var(--text-muted);
background: var(--bg-secondary);
cursor: not-allowed;
}
.thread-bubble-reply-input.cb-input::placeholder { color: var(--text-muted); }
.thread-bubble-send-btn.cb-send-btn {
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
cursor: pointer;
transition: background 120ms var(--ease), opacity 120ms var(--ease);
}
.thread-bubble-send-btn.cb-send-btn:disabled {
opacity: 0.32;
cursor: not-allowed;
}
/* Spotlight — source thread stays bright, the others fade while a
* bubble is open. Mirrors thread-bubble.css:178–197. */
.margin-note.bubble-active-context {
opacity: 0.48;
filter: saturate(0.92);
transition: opacity 240ms var(--ease), filter 240ms var(--ease);
}
.margin-note.bubble-source {
opacity: 1;
filter: none;
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 920px) {
.thread-bubble {
right: 16px;
bottom: 96px;
width: calc(100% - 32px);
}
}
@media (prefers-reduced-motion: reduce) {
.thread-bubble,
.margin-note.bubble-active-context,
.margin-note.bubble-source {
transition-duration: 0.01ms;
}
}
/* Hub bar — persistent action-hub-bar with controls row plus optional
* stepped card above. Mirrors the real construction in
* electron-app/src/renderer/actionHubBar/actionHubBar-defaultControls.ts:
* .action-hub-bar
* .hub-stepped-card (only working/complete; sits flush above body)
* .hub-surface-wrap
* .action-hub-body
* .action-hub-controls-row (always visible in passive modes) */
.hub {
position: absolute;
bottom: 22px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
width: auto;
max-width: calc(100% - 48px);
z-index: 3;
}
.action-hub-bar {
display: inline-flex;
flex-direction: column;
align-items: center;
user-select: none;
white-space: nowrap;
opacity: 0;
transform: translateY(8px);
transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.action-hub-bar.is-in { opacity: 1; transform: translateY(0); }
/* Continuous surface — body capsule. Stepped card visually merges into
* the top edge of this capsule via shared border vocabulary. */
.hub-surface-wrap {
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--hairline);
border-radius: 12px;
box-shadow:
0 14px 32px rgba(60, 40, 20, 0.10),
0 2px 6px rgba(60, 40, 20, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
overflow: hidden;
}
.action-hub-body {
display: flex;
flex-direction: column;
align-items: center;
}
/* Controls row — toggle, default items (palette · mic · send) */
.action-hub-controls-row {
display: inline-flex;
align-items: center;
padding: 6px 10px;
gap: 2px;
font-family: var(--font-ui);
font-size: 12.5px;
color: var(--text-primary);
}
.action-hub-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 999px;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 500;
line-height: 1;
background: transparent;
transition: background 160ms var(--ease);
}
.action-hub-toggle:hover { background: var(--bg-tertiary); }
.action-hub-separator {
width: 1px; height: 14px;
background: var(--hairline);
margin: 0 4px;
flex-shrink: 0;
}
.action-hub-default-items {
display: inline-flex;
align-items: center;
gap: 2px;
}
.action-hub-action-btn {
display: inline-flex;
align-items: center;
gap: 0;
padding: 4px 8px;
border-radius: 6px;
background: transparent;
color: var(--text-muted);
font-family: var(--font-ui);
font-size: 12.5px;
white-space: nowrap;
transition: background 160ms var(--ease), color 160ms var(--ease);
}
.action-hub-action-btn:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.action-hub-action-btn kbd {
font-family: var(--font-ui);
font-size: 11.5px;
font-style: normal;
color: var(--text-muted);
background: none;
border: none;
padding: 0;
}
.action-hub-action-btn svg { display: block; flex-shrink: 0; color: var(--text-secondary); }
.hub-mic-btn { width: 28px; padding: 4px 0; justify-content: center; }
/* Stepped card — sits flush on top of the hub-surface-wrap. Same border
* color, no bottom border, top corners rounded — together they read as
* one continuous surface (matches electron-app/src/styles/action-hub.css:
* .hub-stepped-card border + border-radius rules). */
.hub-stepped-card {
display: none;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--hairline);
border-bottom: none;
border-radius: 10px 10px 0 0;
margin: 0 8px 0;
font-family: var(--font-ui);
font-size: 12.5px;
color: var(--text-secondary);
white-space: nowrap;
position: relative;
z-index: 1;
}
.hub-stepped-card.is-shown { display: inline-flex; }
/* Working stepped-card content — orange spinner + M/N · capability name */
.hub-working-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--status-orange);
box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.18);
animation: pulse-dot 1.5s var(--ease) infinite;
flex-shrink: 0;
}
.hub-working-counter {
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
font-size: 12px;
}
.hub-working-sep { color: var(--text-faint); }
.hub-working-name {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 500;
color: var(--text-primary);
}
/* Complete stepped-card content — `✓` glyph + summary text. Proposal §C
* criterion #11: complete state shows `✓ summary` (lines 105 / 432-434);
* the working state keeps the `●` dot vocabulary (.hub-working-dot above).
* The .hub-extension-dot rule below is retained for the orange
* delivered-needs-review variant, which is not used in §2/§4 today but
* shares the dot vocabulary with the working pill. */
.hub-complete-glyph {
color: var(--status-green);
font-size: 13px;
font-weight: 700;
line-height: 1;
flex-shrink: 0;
}
.hub-extension-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.hub-extension-dot--orange { background: var(--status-orange); box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.18); }
.hub-complete-text {
color: var(--text-primary);
font-size: 12.5px;
font-weight: 500;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.doc-paragraph code {
font-family: var(--font-code);
font-size: 0.86em;
padding: 1px 5px;
background: var(--bg-tertiary);
border-radius: 3px;
color: var(--text-primary);
}
/* Margin "Open thread" pulse — invitation to click ──────────────────── */
.margin-note .mn-action {
border-radius: 4px;
padding: 2px 6px;
margin-left: -6px;
position: relative;
}
.margin-note .mn-action.is-pulsing {
color: var(--accent);
opacity: 1;
animation: open-thread-pulse 1.8s var(--ease) infinite;
}
@keyframes open-thread-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(196, 93, 53, 0.0); }
50% { box-shadow: 0 0 0 6px rgba(196, 93, 53, 0.12); }
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Tighten the hub bar on narrow screens. The default-items tuck closer
* to the toggle and the kbd labels are dropped to save horizontal room. */
.action-hub-controls-row { padding: 4px 6px; gap: 0; }
.action-hub-action-btn span { display: none; }
.action-hub-separator { margin: 0 2px; }
}
/* Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.hub-working-dot { animation: none; }
}
/* §2 arrival choreography — window materialize + scroll-scrub reveal.
*
* Two cooperating vocabularies:
*
* 1. MATERIALIZE — .window--veiled hides the window until the visitor
* reaches it; .is-materialized plays the composition sequence as
* one-shot keyframe animations (frame lands → traffic lights pop →
* tabs slide in → paper brightens → hub bar rises). Animations with `backwards` fill self-stagger via delays
* and never override the components' own hover transitions.
*
* 2. SCRUB — scoped under .takeover--scrub (added by takeover-scrub.js
* only when motion is allowed and the viewport is >920px). Words,
* blocks, code lines, and capability rows start hidden and turn on
* via .is-on as the page scroll advances the timeline; everything
* uses transitions so scrubbing back rewinds gracefully. Without
* the scope class (reduced motion, narrow viewports) none of these
* rules apply and the document renders settled, exactly as before.
*/
/* ── Scrub track + pin ─────────────────────────────────────────────── */
.takeover-scrub-track {
position: relative;
width: 100%;
}
.takeover-scrub-pin {
width: 100%;
}
.takeover--scrub .takeover-scrub-pin {
position: sticky;
top: 6vh; /* refined per-load by takeover-scrub.js measure() */
}
/* Scrub mode: page scroll drives the reveal, so the doc column must not
* eat the wheel. overflow-y:hidden makes the column a scroll container
* (overflow-x then computes to auto), and the base .doc-scroll rule's
* overscroll-behavior:contain stops a vertical wheel *over the editor*
* from chaining to the page — freezing the reveal whenever the cursor is
* inside the doc. Releasing overscroll chaining (auto) lets page scroll
* drive the reveal from anywhere; the scrub still positions the doc via
* programmatic scrollTop, and the static fallback (no .is-scrub) keeps
* the doc hand-scrollable. */
.doc-scroll.is-scrub {
overflow: hidden;
overscroll-behavior: auto;
scroll-behavior: auto;
}
/* ── Materialize: veil + landing ───────────────────────────────────── */
.window.window--veiled {
opacity: 0;
}
.window.is-materialized:not(.is-settled) {
animation: takeover-window-land 820ms var(--ease-out) backwards;
}
@keyframes takeover-window-land {
from {
opacity: 0;
transform: translateY(34px) scale(0.972);
}
}
.window.is-materialized:not(.is-settled) .traffic .tl-close { animation: takeover-pop 280ms var(--ease-out) 220ms backwards; }
.window.is-materialized:not(.is-settled) .traffic .tl-minimize { animation: takeover-pop 280ms var(--ease-out) 300ms backwards; }
.window.is-materialized:not(.is-settled) .traffic .tl-zoom { animation: takeover-pop 280ms var(--ease-out) 380ms backwards; }
@keyframes takeover-pop {
from { opacity: 0; transform: scale(0); }
60% { transform: scale(1.18); }
}
.window.is-materialized:not(.is-settled) .window-title {
animation: takeover-fade 320ms var(--ease) 380ms backwards;
}
.window.is-materialized:not(.is-settled) .wtab {
animation: takeover-tab-in 340ms var(--ease-out) 460ms backwards;
}
.window.is-materialized:not(.is-settled) .wtab--awareness {
animation-delay: 570ms;
}
.window.is-materialized:not(.is-settled) .wtabs-new {
animation: takeover-fade 300ms var(--ease) 660ms backwards;
}
@keyframes takeover-tab-in {
from { opacity: 0; transform: translateX(-12px); }
}
.window.is-materialized:not(.is-settled) .editor {
animation: takeover-fade 460ms var(--ease) 560ms backwards;
}
.window.is-materialized:not(.is-settled) .doc-meta-line {
animation: takeover-fade 360ms var(--ease) 840ms backwards;
}
@keyframes takeover-fade {
from { opacity: 0; }
}
/* Hub bar rises last — the product chrome settling into readiness. */
.window.is-materialized:not(.is-settled) .action-hub-bar.is-in {
animation: takeover-rise 420ms var(--ease-out) 1300ms backwards;
}
@keyframes takeover-rise {
from { opacity: 0; transform: translateY(14px); }
}
/* Title typing caret — mirrors the :empty caret while materialize types
* the document title character by character. */
.doc-title.is-typing::after {
content: '';
display: inline-block;
width: 2px;
height: 1.05em;
margin-left: 1px;
vertical-align: -0.12em;
background: rgba(29, 29, 31, 0.78);
animation: caret-blink 1s steps(1, end) infinite;
}
/* ── Scrub: prose writes itself on ─────────────────────────────────── */
.takeover--scrub .doc-w {
display: inline-block;
opacity: 0;
transform: translateY(0.22em);
transition: opacity 220ms var(--ease), transform 260ms var(--ease-out);
}
.takeover--scrub .doc-w.is-on {
opacity: 1;
transform: translateY(0);
}
/* Block furniture stays quiet until its block starts writing. */
.takeover--scrub .doc-paragraph::before {
opacity: 0;
transition: opacity 300ms var(--ease);
}
.takeover--scrub .doc-paragraph.is-on::before {
opacity: 0.52;
}
.takeover--scrub .doc-list li::before {
opacity: 0;
transition: opacity 280ms var(--ease);
}
.takeover--scrub .doc-list li.is-on::before {
opacity: 1;
}
/* Unit blocks — headings, chips row, canvas, images, code shells. */
.takeover--scrub .doc-heading,
.takeover--scrub .doc-codeblock,
.takeover--scrub .doc-diagram-block,
.takeover--scrub .doc-context-refs,
.takeover--scrub .doc-context-canvas,
.takeover--scrub .doc-context-image-figure,
.takeover--scrub .cm-capability-header {
opacity: 0;
transform: translateY(10px);
transition: opacity 380ms var(--ease-out), transform 420ms var(--ease-out);
}
.takeover--scrub .doc-heading.is-on,
.takeover--scrub .doc-codeblock.is-on,
.takeover--scrub .doc-diagram-block.is-on,
.takeover--scrub .doc-context-refs.is-on,
.takeover--scrub .doc-context-canvas.is-on,
.takeover--scrub .doc-context-image-figure.is-on,
.takeover--scrub .cm-capability-header.is-on {
opacity: 1;
transform: translateY(0);
}
/* The capability list frame fades as a whole, then rows land one by
* one — the spec turning into work right at the end of the document. */
.takeover--scrub .cm-capability-list {
border-color: transparent;
transition: border-color 420ms var(--ease);
}
.takeover--scrub .cm-capability-list.is-on {
border-color: var(--hairline);
}
.takeover--scrub .cm-capability-item {
opacity: 0;
transform: translateY(8px);
transition: opacity 340ms var(--ease-out), transform 380ms var(--ease-out);
}
.takeover--scrub .cm-capability-item.is-on {
opacity: 1;
transform: translateY(0);
}
/* Code writes line by line. */
.takeover--scrub .cm-code-block-line {
opacity: 0;
transform: translateX(10px);
transition: opacity 240ms var(--ease), transform 280ms var(--ease-out);
}
.takeover--scrub .cm-code-block-line.is-on {
opacity: 1;
transform: translateX(0);
}
/* The objective-context section gates its children. */
.takeover--scrub .doc-objective-context {
opacity: 0;
transition: opacity 320ms var(--ease);
}
.takeover--scrub .doc-objective-context.is-on {
opacity: 1;
}
/* Bold accent rails leak through hidden words otherwise — gate them on
* the first revealed word inside the phrase, then draw left-to-right. */
.takeover--scrub .doc-paragraph .doc-bold,
.takeover--scrub .doc-list .doc-bold {
background-size: 0% 100%;
transition: background-size 600ms var(--ease-out) 80ms;
}
.takeover--scrub .doc-paragraph .doc-bold:has(.doc-w.is-on),
.takeover--scrub .doc-list .doc-bold:has(.doc-w.is-on) {
background-size: 100% 100%;
}
/* ── Scrub: the anchored relationship draws itself ─────────────────── */
/* Marker underline sweeps left-to-right when the anchor's words land. */
.takeover--scrub .cm-anchor-highlight {
background-size: 0% 9px;
transition: background-size 950ms var(--ease-out) 60ms, background-image 160ms var(--ease);
}
.takeover--scrub .cm-anchor-highlight.is-revealed {
background-size: 100% 9px;
}
/* Connector ink-draws from the document toward the card; the dot pops
* first, the card slides in last. Delays live on the entering state so
* scrub-back releases everything immediately. */
.takeover--scrub .mn-connector path {
stroke-dasharray: 112;
stroke-dashoffset: 112;
}
.takeover--scrub .margin-note.is-connected .mn-connector path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 720ms var(--ease-out) 160ms;
}
.takeover--scrub .margin-note.is-anchored::before {
transition-delay: 80ms;
}
.takeover--scrub .margin-note.is-in {
transition-delay: 300ms, 300ms, 0ms; /* opacity, transform, top */
}
/* ── Ghost-text beat ───────────────────────────────────────────────── */
/* Hidden until the timeline reaches the beat. */
.takeover--scrub .doc-paragraph--ghost .cm-ghost-text {
opacity: 0;
}
.takeover--scrub .doc-paragraph--ghost.is-ghost-visible .cm-ghost-text {
opacity: 0.6;
}
.takeover--scrub .doc-paragraph--ghost.is-ghost-visible .tab-hint {
opacity: 1;
}
.takeover--scrub .doc-paragraph--ghost.is-ghost-pulsing .tab-hint kbd {
background: rgba(196, 93, 53, 0.10);
color: var(--accent);
box-shadow: 0 0 0 8px rgba(196, 93, 53, 0.16);
transform: scale(1.06);
}
.takeover--scrub .doc-paragraph--ghost.is-ghost-committed .cm-ghost-text {
color: var(--text-primary);
font-style: normal;
opacity: 1;
animation: ghost-commit-flash 700ms var(--ease);
}
.takeover--scrub .doc-paragraph--ghost.is-ghost-committed .tab-hint {
/* Fully out of flow once accepted — an invisible pill would leave a
* phantom gap in the middle of the committed sentence. */
display: none;
}
@keyframes ghost-commit-flash {
0% { background: rgba(196, 93, 53, 0.16); }
100% { background: transparent; }
}
/* Static fallback — the beat resolves to its accepted final state:
* committed prose, no hint chrome. */
.takeover:not(.takeover--scrub) .doc-paragraph--ghost .cm-ghost-text {
color: var(--text-primary);
font-style: normal;
opacity: 1;
}
.takeover:not(.takeover--scrub) .doc-paragraph--ghost .tab-hint {
display: none;
}
/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.window.window--veiled { opacity: 1; }
.doc-title.is-typing::after { animation: none; }
}
/* §2 Awareness tab — window tab strip + the atlas "first artifact" ─────────
*
* Project Awareness is the upstream "decide what to build" surface. It lives
* as a real tab inside the §2 window, beside the document tab. The editor is
* the default body; the atlas overlays it. Warm-paper spine is kept; a
* restrained field-notebook idiom (italic ink marks + hand-drawn arrows)
* carries the marginalia, so the page still reads as one coherent surface.
* Source of truth for content: each film's `awareness` block in films-data.js.
* ------------------------------------------------------------------------- */
/* ── Window tab strip ─────────────────────────────────────────────────── */
.window-tabs {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 2px;
height: 40px;
padding: 0 10px;
background: linear-gradient(to bottom, rgba(247, 244, 238, 0.96), rgba(241, 237, 229, 0.98));
border-bottom: 1px solid rgba(29, 29, 31, 0.08);
font-family: var(--font-ui);
}
.wtab {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
height: 30px;
padding: 0 12px;
margin-bottom: -1px; /* active tab seam sits on the body edge */
border: 1px solid transparent;
border-bottom: none;
border-radius: 8px 8px 0 0;
font-size: 12.5px;
letter-spacing: -0.003em;
color: var(--text-muted);
max-width: 240px;
transition: color 150ms var(--ease), background 150ms var(--ease), border-color 150ms var(--ease);
}
.wtab:hover { color: var(--text-secondary); background: rgba(255, 255, 255, 0.5); }
.wtab.is-active {
color: var(--text-primary);
background: linear-gradient(180deg, #fdfcf8 0%, #faf7f0 100%);
border-color: rgba(29, 29, 31, 0.08);
}
.wtab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.wtab-label {
font-family: var(--font-code);
font-size: 11.5px;
letter-spacing: 0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wtab-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--text-faint);
flex: 0 0 auto;
transition: background 150ms var(--ease);
}
.wtab.is-active .wtab-dot { background: var(--accent); }
.wtab-x {
margin-left: 2px;
font-size: 13px;
line-height: 1;
color: var(--text-faint);
opacity: 0;
transition: opacity 150ms var(--ease);
}
.wtab:hover .wtab-x { opacity: 0.8; }
/* The Awareness tab — diamond glyph, label in UI font, accent on active. */
.wtab--awareness .wtab-label { font-family: var(--font-ui); letter-spacing: 0.005em; }
.wtab-diamond {
font-size: 10px;
color: var(--accent);
opacity: 0.62;
transform: translateY(-0.5px);
transition: opacity 150ms var(--ease);
}
.wtab--awareness:hover .wtab-diamond,
.wtab--awareness.is-active .wtab-diamond { opacity: 1; }
.wtab--awareness.is-active {
color: var(--accent-hover);
box-shadow: inset 0 2px 0 var(--accent);
}
/* Brief accent pulse when a seed flips the view back to the document tab. */
@keyframes wtab-seeded {
0% { box-shadow: inset 0 0 0 0 var(--accent-soft); }
22% { box-shadow: inset 0 -22px 16px -14px var(--accent-soft-2); }
100% { box-shadow: inset 0 0 0 0 rgba(196, 93, 53, 0); }
}
.wtab.is-seeded { animation: wtab-seeded 1700ms var(--ease-out); }
.wtab.is-seeded .wtab-dot { background: var(--accent); }
.wtabs-spacer { flex: 1; }
.wtabs-new {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: 4px;
border-radius: 6px;
font-size: 15px;
color: var(--text-faint);
}
/* ── Window body — editor (default) + awareness overlay ───────────────── */
.window-body {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
}
.window-body > .editor { flex: 1 1 auto; min-height: 0; }
.awareness {
position: absolute;
inset: 0;
z-index: 4;
display: flex;
flex-direction: column;
background:
radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.55), transparent 56%),
linear-gradient(180deg, #fdfcf8 0%, #f4efe4 100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 220ms var(--ease-out), visibility 0s linear 220ms;
}
.window[data-tab="awareness"] .awareness {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 260ms var(--ease-out);
}
/* visibility:hidden (not display:none) keeps the editor's layout valid while
* it's covered, so thread placement is correct on the way back. */
.window[data-tab="awareness"] .editor { visibility: hidden; }
/* ── Atlas room scaffold ──────────────────────────────────────────────── */
.aw-room {
position: relative;
flex: 1 1 auto;
min-height: 0;
display: flex;
flex-direction: column;
padding: clamp(20px, 3vh, 32px) clamp(26px, 4vw, 60px) clamp(16px, 2.2vh, 26px);
font-family: var(--font-body);
color: var(--text-primary);
}
.aw-defs { position: absolute; }
.aw-head { flex: 0 0 auto; }
.aw-eyebrow {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-muted);
}
.aw-eyebrow-diamond { color: var(--accent); font-size: 9px; }
.aw-eyebrow-sep { color: var(--text-faint); }
.aw-eyebrow-caption {
font-family: var(--font-code);
text-transform: none;
letter-spacing: 0.02em;
color: var(--text-secondary);
}
.aw-voicetag {
margin-left: auto;
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
color: var(--text-faint);
font-style: italic;
}
.aw-title {
/* Title as diagnosis, not a label (cross-artifact convention). */
max-width: 30ch;
margin: 12px 0 0;
padding: 2px 6px;
margin-left: -6px;
font-size: clamp(23px, 2.5vw, 30px);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
}
.aw-lens {
max-width: 76ch;
margin: 9px 0 0;
padding: 3px 6px;
margin-left: -6px;
font-size: 14px;
font-style: italic;
line-height: 1.5;
color: var(--text-secondary);
}
.aw-lens-key {
font-family: var(--font-ui);
font-style: normal;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-right: 8px;
vertical-align: 0.08em;
}
/* ── Selection scope cue (Path B is inert in the demo) ────────────────── */
.aw-scope {
border-radius: 7px;
transition: background-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.aw-scope:hover { background-color: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-soft-2); }
.aw-scope:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ── Stage: centred project-native overview + gutter marks ────────────── */
.aw-body {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
margin: clamp(8px, 1.6vh, 18px) 0;
overflow: hidden;
}
.aw-stage {
position: relative;
width: 100%;
max-width: 1060px;
height: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr min(520px, 50%) 1fr;
align-items: center;
}
.aw-overview {
grid-column: 2;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
/* Per-tone palette — state coding by hue (warm = unbuilt/unanswered,
* cool = blocked/waiting, calm = healthy, accent = the headline). */
.aw-tone-accent { --aw-tone: var(--accent); }
.aw-tone-warm { --aw-tone: #C0791F; }
.aw-tone-cool { --aw-tone: #5E6E8C; }
.aw-tone-calm { --aw-tone: #5E8C5A; }
.aw-tone-plain { --aw-tone: var(--text-muted); }
.aw-tone-settled { --aw-tone: var(--text-muted); }
.aw-tone-silent { --aw-tone: #C0791F; }
/* ── Code form — subsystem dependency graph ───────────────────────────── */
.aw-graph {
position: relative;
width: 100%;
height: clamp(280px, 44vh, 440px);
margin: 0 auto;
}
.aw-edges {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.aw-edge { stroke: var(--hairline-strong); stroke-width: 1.5; }
.aw-edge--flow { stroke: rgba(29, 29, 31, 0.22); stroke-width: 1.5; }
.aw-edge--go { stroke: var(--accent); stroke-width: 2; }
.aw-edge--diverged {
stroke: #C0791F;
stroke-width: 2;
stroke-dasharray: 5 4;
}
.aw-edge--silent {
stroke: rgba(192, 121, 31, 0.5);
stroke-width: 1.5;
stroke-dasharray: 2 5;
}
.aw-node {
position: absolute;
transform: translate(-50%, -50%);
min-width: 92px;
max-width: 120px;
padding: 7px 11px;
border: 1px solid var(--hairline-strong);
border-radius: 8px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 1px 2px rgba(60, 40, 20, 0.06);
text-align: left;
}
.aw-node-label {
display: block;
font-family: var(--font-code);
font-size: 11.5px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.aw-node-sub {
display: block;
font-family: var(--font-ui);
font-size: 10px;
color: var(--text-muted);
margin-top: 1px;
}
.aw-node.aw-tone-accent {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft), 0 2px 6px rgba(196, 93, 53, 0.14);
}
.aw-node.aw-tone-accent .aw-node-label { color: var(--accent-hover); }
.aw-node.aw-tone-warm { border-color: #C0791F; border-style: dashed; }
.aw-node.aw-tone-silent {
border-style: dashed;
border-color: rgba(192, 121, 31, 0.7);
background: rgba(255, 250, 240, 0.78);
}
.aw-node.aw-tone-calm { border-color: rgba(94, 140, 90, 0.6); }
.aw-node-tag {
display: inline-block;
margin-top: 4px;
padding: 1px 6px;
border-radius: 999px;
font-family: var(--font-ui);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #4d7a48;
background: rgba(94, 140, 90, 0.14);
}
.aw-node-tag--silent { color: #a86a1e; background: rgba(192, 121, 31, 0.14); }
/* ── Research form — claim spine ──────────────────────────────────────── */
.aw-claims {
position: relative;
width: 100%;
max-width: 460px;
margin: 0 auto;
padding-left: 22px;
}
.aw-claims-spine {
position: absolute;
left: 6px;
top: 8px;
bottom: 46px;
width: 2px;
background: linear-gradient(to bottom, var(--accent-soft-2), var(--hairline));
border-radius: 2px;
}
.aw-claim {
position: relative;
margin-bottom: 14px;
padding: 11px 14px;
border: 1px solid var(--hairline-strong);
border-left: 3px solid var(--aw-tone);
border-radius: 8px;
background: rgba(255, 255, 255, 0.82);
}
.aw-claim::before {
content: '';
position: absolute;
left: -22px;
top: 16px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--aw-tone);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9);
}
.aw-claim.aw-tone-accent {
background: rgba(255, 251, 248, 0.95);
box-shadow: 0 1px 8px rgba(196, 93, 53, 0.08);
}
.aw-claim.aw-tone-settled { opacity: 0.62; border-left-style: solid; }
.aw-claim-label {
display: block;
font-size: 16px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
}
.aw-claim.aw-tone-settled .aw-claim-label { font-weight: 600; color: var(--text-secondary); }
.aw-claim-sub {
display: block;
margin-top: 2px;
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-muted);
}
.aw-claim-bar {
margin-top: 8px;
height: 4px;
border-radius: 999px;
background: rgba(29, 29, 31, 0.07);
overflow: hidden;
}
.aw-claim-bar > span {
display: block;
height: 100%;
border-radius: 999px;
background: var(--aw-tone);
opacity: 0.7;
}
.aw-measures {
margin-top: 4px;
font-family: var(--font-code);
font-size: 10.5px;
letter-spacing: 0.01em;
color: var(--text-muted);
}
.aw-measures-key {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
margin-right: 7px;
}
/* ── Design form — direction boards ───────────────────────────────────── */
.aw-boards {
display: flex;
gap: clamp(10px, 1.4vw, 18px);
justify-content: center;
align-items: stretch;
}
.aw-board {
flex: 1 1 0;
max-width: 168px;
padding: 12px;
border: 1px solid var(--hairline-strong);
border-radius: 10px;
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 1px 3px rgba(60, 40, 20, 0.06);
}
.aw-board.aw-tone-accent {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 12px rgba(196, 93, 53, 0.12);
transform: translateY(-4px);
}
.aw-board.aw-tone-cool { border-color: rgba(94, 110, 140, 0.5); }
.aw-board-top {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 18px;
}
.aw-board-letter {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--text-muted);
}
.aw-board.aw-tone-accent .aw-board-letter { color: var(--accent); }
.aw-board-rec {
font-family: var(--font-ui);
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #fff;
background: var(--accent);
padding: 2px 6px;
border-radius: 999px;
}
.aw-board-mark {
margin: 12px 0 10px;
font-size: 22px;
line-height: 1;
color: var(--text-primary);
letter-spacing: -0.02em;
}
.aw-style-serif { font-family: var(--font-body); font-weight: 700; }
.aw-style-sans { font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.03em; }
.aw-style-script { font-family: var(--font-body); font-style: italic; font-weight: 600; transform: skewX(-6deg); transform-origin: left; }
.aw-board-swatches { display: flex; gap: 4px; margin-bottom: 9px; }
.aw-sw {
width: 16px; height: 16px;
border-radius: 4px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.aw-board-name {
font-size: 13px;
font-weight: 700;
letter-spacing: -0.01em;
}
.aw-board-sub {
margin-top: 2px;
font-family: var(--font-ui);
font-size: 10.5px;
color: var(--text-muted);
line-height: 1.35;
}
.aw-accentrow {
display: flex;
align-items: center;
gap: 8px;
margin: 16px auto 0;
padding: 8px 12px;
width: fit-content;
border: 1px dashed rgba(192, 121, 31, 0.5);
border-radius: 999px;
background: rgba(255, 250, 240, 0.6);
}
.aw-accent-key {
font-family: var(--font-ui);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
}
.aw-accent-arrow { color: var(--text-faint); font-size: 12px; }
.aw-accent-note {
font-family: var(--font-ui);
font-size: 10.5px;
font-style: italic;
color: var(--text-secondary);
}
/* ── Attention marks (field-notebook marginalia) ──────────────────────── */
.aw-mark {
position: absolute;
width: clamp(150px, 14.5vw, 196px);
padding: 8px 11px;
border: 1px solid transparent;
border-radius: 9px;
background: transparent;
text-align: left;
cursor: pointer;
z-index: 3;
}
.aw-mark--right { right: 0; }
.aw-mark--left { left: 0; text-align: right; }
.aw-mark:hover, .aw-mark.is-selected {
background: rgba(255, 255, 255, 0.92);
border-color: var(--hairline);
box-shadow: 0 6px 18px -8px rgba(60, 40, 20, 0.28);
}
.aw-mark.is-selected { z-index: 6; }
.aw-mark-judgment {
display: block;
font-size: 14px;
font-style: italic;
font-weight: 600;
line-height: 1.28;
letter-spacing: -0.005em;
color: var(--aw-tone);
}
.aw-mark-evidence {
display: block;
margin-top: 4px;
padding-top: 4px;
border-top: 1px dashed color-mix(in srgb, var(--aw-tone) 38%, transparent);
font-family: var(--font-ui);
font-size: 11px;
line-height: 1.4;
color: var(--text-secondary);
}
.aw-mark--left .aw-mark-evidence { border-top-color: color-mix(in srgb, var(--aw-tone) 38%, transparent); }
.aw-mark.aw-uncertain .aw-mark-judgment::before {
content: '≈ ';
font-style: normal;
font-weight: 700;
}
.aw-mark.aw-uncertain { border-style: dashed; }
/* Hand-drawn leader arrow from the note toward the shape it annotates. */
.aw-arrow {
position: absolute;
top: 7px;
width: 70px;
height: 26px;
overflow: visible;
}
.aw-mark--right .aw-arrow { left: -62px; }
.aw-mark--left .aw-arrow { right: -62px; transform: scaleX(-1); }
.aw-arrow-line, .aw-arrow-head {
stroke: var(--aw-tone);
stroke-width: 1.6;
stroke-linecap: round;
opacity: 0.85;
}
/* Pen-mark on a quoted word in the user's own voice. */
.aw-pen {
position: relative;
font-style: italic;
padding: 0 3px;
white-space: nowrap;
}
.aw-pen::after {
content: '';
position: absolute;
inset: -3px -2px;
border: 1.6px solid var(--accent);
border-radius: 58% 52% 56% 60% / 56% 62% 58% 52%;
transform: rotate(-1.6deg);
opacity: 0.72;
pointer-events: none;
}
/* Selection reveal — candidate framing + inert Path B affordance. No chat
* thread, no message list: a single disabled cue, like the editor composer. */
.aw-mark-reveal { display: none; }
.aw-mark.is-selected .aw-mark-reveal {
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--hairline);
}
.aw-mark-candidate {
display: block;
font-family: var(--font-body);
font-size: 12.5px;
font-style: normal;
line-height: 1.42;
color: var(--text-primary);
}
.aw-mark-nf {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
padding: 4px 9px;
border: 1px solid var(--accent);
border-radius: 999px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
color: var(--accent-hover);
background: var(--accent-soft);
cursor: pointer;
transition: background 150ms var(--ease);
}
.aw-mark-nf:hover { background: var(--accent-soft-2); }
.aw-mark-instruct {
display: block;
margin-top: 8px;
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.01em;
color: var(--text-faint);
}
.aw-preview-tag {
display: inline-block;
margin-left: 4px;
padding: 1px 5px;
border-radius: 4px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
background: rgba(29, 29, 31, 0.06);
vertical-align: 0.06em;
}
/* ── Footer — self-critique + Path B legend + next focus ──────────────── */
.aw-foot {
flex: 0 0 auto;
border-top: 1px solid var(--hairline);
padding-top: 12px;
}
.aw-selfcritique {
max-width: 80ch;
margin: 0 0 10px;
padding: 3px 6px;
margin-left: -6px;
font-size: 12.5px;
font-style: italic;
line-height: 1.45;
color: var(--text-secondary);
}
.aw-sc-key {
font-family: var(--font-ui);
font-style: normal;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-faint);
margin-right: 8px;
}
.aw-foot-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.aw-pathb-cue {
font-family: var(--font-ui);
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.005em;
}
.aw-nextfocus {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 9px 18px;
border-radius: 999px;
background: var(--accent);
color: #fff;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.005em;
box-shadow: 0 2px 8px rgba(196, 93, 53, 0.28);
transition: background 150ms var(--ease), transform 150ms var(--ease), box-shadow 150ms var(--ease);
}
.aw-nextfocus:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(196, 93, 53, 0.32); }
.aw-nextfocus:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.aw-nf-star { font-size: 13px; }
/* ── Seed hand-off overlay ────────────────────────────────────────────── */
.aw-seed {
position: absolute;
inset: 0;
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
padding: 8%;
background: rgba(244, 239, 228, 0.82);
backdrop-filter: blur(3px);
opacity: 0;
visibility: hidden;
transition: opacity 260ms var(--ease-out), visibility 0s linear 260ms;
}
.awareness.is-seeding .aw-seed {
opacity: 1;
visibility: visible;
transition: opacity 260ms var(--ease-out);
}
.aw-seed-card {
max-width: 540px;
padding: 26px 30px;
border: 1px solid var(--hairline-strong);
border-radius: 14px;
background: linear-gradient(180deg, #fffdf9, #faf6ee);
box-shadow: var(--shadow-lg);
transform: translateY(14px) scale(0.98);
opacity: 0;
transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.awareness.is-seeding .aw-seed-card { transform: translateY(0) scale(1); opacity: 1; }
.aw-seed-head {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent);
}
.aw-seed-file {
font-family: var(--font-code);
text-transform: none;
letter-spacing: 0;
color: var(--text-secondary);
background: rgba(29, 29, 31, 0.05);
padding: 2px 8px;
border-radius: 6px;
}
.aw-seed-lead {
margin: 14px 0 0;
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
color: var(--text-primary);
}
.aw-seed-foot {
margin-top: 14px;
font-family: var(--font-ui);
font-size: 11px;
font-style: italic;
color: var(--text-muted);
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
.aw-stage { grid-template-columns: 1fr min(520px, 52%) 1fr; }
.aw-mark { width: clamp(140px, 16vw, 180px); }
}
@media (max-width: 1024px) {
/* Gutters too narrow for marginalia — fold marks into a column below the
* overview and drop the leader arrows. Internal scroll is the fallback. */
.aw-body { overflow-y: auto; align-items: stretch; }
.aw-stage { display: flex; flex-direction: column; align-items: stretch; gap: 14px; height: auto; max-width: none; }
.aw-overview { height: auto; width: 100%; }
.aw-graph { height: 244px; }
.aw-claims, .aw-boards { max-width: none; }
.aw-mark {
position: static;
width: auto;
text-align: left;
border-color: var(--hairline);
background: rgba(255, 255, 255, 0.7);
}
.aw-mark--left { text-align: left; }
.aw-mark--left .aw-mark-evidence { text-align: left; }
.aw-arrow { display: none; }
.aw-mark::before {
content: '';
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--aw-tone);
margin-right: 8px;
vertical-align: 0.1em;
}
}
@media (max-width: 640px) {
.aw-room { padding: 16px 18px 14px; }
.aw-title { font-size: 21px; }
.aw-boards { flex-wrap: wrap; }
.aw-foot-row { flex-direction: column; align-items: stretch; gap: 10px; }
.aw-pathb-cue { display: none; }
.aw-nextfocus { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
.awareness, .aw-seed, .aw-seed-card, .wtab.is-seeded { transition: none; animation: none; }
.aw-seed-card { transform: none; }
}
/* Builder hero-variants embed — feature-specific styles for §2's
* developed thread thumb. Lives outside takeover.css so the mainline
* embed-thumb block (card/chart/diagram shared properties) stays at
* its prior weight. The merged selector at .mn-embed-card,
* .mn-embed-chart, .mn-embed-diagram, .mn-embed-hero-variants in
* takeover.css follows the existing per-shape pattern; only the
* dedicated svg sizing rule lives here. */
.mn-embed-hero-variants svg {
width: 100%;
flex: 1;
min-height: 0;
}
/* Embed lightbox — opens on click of any .mn-embed. Quiet, scrim-dim,
* close on backdrop or Esc. The lightbox contents are a larger reflow
* of the same embed shape (card / chart / diagram), not a new view. */
.lightbox {
position: absolute;
inset: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(24px, 5vh, 60px);
background: rgba(20, 14, 8, 0.32);
backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 220ms var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-stage {
position: relative;
width: min(560px, 100%);
max-height: 100%;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 14px;
box-shadow: 0 30px 60px rgba(20, 14, 8, 0.30), 0 4px 14px rgba(20, 14, 8, 0.16);
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.96) translateY(6px);
transition: transform 240ms var(--ease-out);
}
.lightbox.is-open .lightbox-stage { transform: scale(1) translateY(0); }
.lightbox-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--hairline);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.92), rgba(248, 246, 240, 0.92));
}
.lightbox-title {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ai-label-color);
}
.lightbox-title-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--accent);
}
.lightbox-meta {
font-family: var(--font-code);
font-size: 11px;
color: var(--text-faint);
}
.lightbox-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 6px;
color: var(--text-secondary);
font-size: 14px;
font-family: var(--font-ui);
background: transparent;
border: 1px solid transparent;
cursor: pointer;
margin-left: 12px;
transition: background 160ms var(--ease), border-color 160ms var(--ease);
}
.lightbox-close:hover { background: var(--bg-secondary); border-color: var(--hairline); }
.lightbox-body {
flex: 1;
padding: 28px;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at center, var(--bg-canvas-dot) 1px, transparent 1.2px) 0 0 / 16px 16px,
var(--bg-canvas);
min-height: 280px;
}
/* Inside the lightbox, embeds inflate to a larger fixed size. */
.lightbox-body .lb-frame {
width: min(440px, 100%);
background: #fff;
border-radius: 10px;
box-shadow:
0 14px 36px rgba(60, 40, 20, 0.12),
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
padding: 24px 26px;
display: flex;
flex-direction: column;
gap: 10px;
}
.lb-frame .ec-eyebrow { font-size: 10px; }
.lb-frame .ec-title { font-size: 22px; line-height: 1.18; }
.lb-frame .ec-row { display: flex; gap: 6px; margin-top: 6px; }
.lb-frame .ec-pill { flex: 1; height: 24px; border-radius: 5px; background: var(--bg-secondary); }
.lb-frame .ec-pill.active { background: var(--accent); }
.lb-frame .ec-cta {
margin-top: 10px;
height: 38px;
border-radius: 7px;
background: var(--text-primary);
color: #fff;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
display: flex;
align-items: center;
justify-content: center;
}
.lb-frame .ec-svg-wrap {
background: #fff;
border-radius: 6px;
height: 220px;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.lb-frame .ec-svg-wrap svg { width: 100%; height: 100%; }
.lb-frame .ec-svg-wrap .chart-bar { fill: var(--accent); opacity: 0.85; }
.lb-frame .ec-svg-wrap .chart-bar.muted { fill: var(--text-muted); opacity: 0.45; }
.lb-frame .ec-svg-wrap .chart-grid { stroke: var(--hairline); stroke-width: 0.5; stroke-dasharray: 1.5 2.5; }
.lb-frame .ec-svg-wrap .chart-axis { stroke: var(--hairline-strong); stroke-width: 0.7; }
.lb-frame .ec-svg-wrap .dg-node { fill: #fff; stroke: var(--text-secondary); stroke-width: 0.9; }
.lb-frame .ec-svg-wrap .dg-node.accent { fill: var(--accent-soft); stroke: var(--accent); }
.lb-frame .ec-svg-wrap .dg-edge { stroke: var(--text-muted); stroke-width: 0.9; fill: none; stroke-dasharray: 2.4 2.4; }
.lb-frame .ec-svg-wrap .dg-label { font-family: var(--font-ui); font-size: 5px; fill: var(--text-secondary); font-weight: 600; }
/* §3 The primitive — Elegant three-surface handoff ────────────────────
* One document, three living surfaces. The section keeps HudHud's paper
* canvas and replaces the older stacked primitive gallery with three
* rounded feature cards:
* 01 Thread margin · fixed-size thread card, only content changes.
* 02 Canvas · inline editor canvas, geometric draw-on once.
* 03 Capabilities · zoomed capability checklist from the editor UI.
*/
.primitives {
background: var(--bg-canvas);
background-image: radial-gradient(circle at center, rgba(80, 50, 20, 0.055) 1px, transparent 1.2px);
background-size: 22px 22px;
background-position: 0 0;
align-items: stretch;
justify-content: flex-start;
padding: clamp(84px, 9vh, 112px) clamp(10px, 1.6vw, 28px) clamp(92px, 10vh, 124px);
}
.primitives-inner {
width: min(100%, 1680px);
margin: 0 auto;
}
.primitives-head {
max-width: 680px;
margin: 0 0 60px;
}
.primitives-kicker {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 0 22px;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.primitives-kicker span {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
.primitives-title {
margin: 0 0 18px;
font-family: var(--font-body);
font-size: clamp(42px, 5vw, 56px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.022em;
color: var(--text-primary);
}
.primitives-title em {
font-style: italic;
color: var(--accent);
}
.primitives-lede {
max-width: 700px;
margin: 0;
font-family: var(--font-body);
font-size: clamp(17px, 1.55vw, 19px);
line-height: 1.55;
color: var(--text-secondary);
}
/* Two-up + one-up rhythm: the hero (thread-margin) takes the full row
* width; canvas + capabilities pair below it, equal width, matched
* heights. The paired cards normalise to read as a set, not as two
* unrelated demos.
*
* Stack stays at the original 1160px max-width and centers within the
* wider .primitives-inner so the cards keep their tuned proportions
* while the head above can still reach the editor's left edge. */
.primitives-stack {
width: 100%;
max-width: 1160px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(36px, 5vw, 56px);
}
/* Pair sits beneath the hero. Mirror the hero's breakout so the pair's
* outer edges line up with the Thread Margin card above; the extra width
* lands in the gap between the two cards, not inside them. */
.primitives-pair {
width: 112%;
margin-left: -6%;
margin-right: -6%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 5.5vw, 78px);
align-items: stretch;
}
.primitive-card {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
column-gap: clamp(32px, 4.5vw, 56px);
row-gap: clamp(24px, 3vw, 34px);
align-items: stretch;
min-height: 500px;
padding: clamp(40px, 5vw, 60px) clamp(36px, 5vw, 56px) clamp(36px, 4.5vw, 52px);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(29, 29, 31, 0.075);
border-radius: 18px;
box-shadow:
0 42px 90px -56px rgba(60, 40, 20, 0.28),
0 18px 52px -38px rgba(60, 40, 20, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
/* Hero — wider rhythm than the paired cards beneath. Surface column gets
* more room for the doc-bar composition; copy column shrinks slightly so
* the visual carries the rhythm.
*
* Breakout: hero is ~12% wider than the 1160px stack, with the extra
* width absorbed entirely by column-gap. Copy and surface columns keep
* their original widths; the breathing room between them grows. */
.primitive-card--hero {
width: 112%;
margin-left: -6%;
margin-right: -6%;
grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
column-gap: clamp(228px, 25vw, 307px);
min-height: 520px;
padding: clamp(20px, 2.5vw, 30px) clamp(18px, 2.5vw, 28px) clamp(18px, 2.25vw, 26px);
}
/* Paired — single-column stack inside each card so the smaller width
* isn't trying to host two columns of its own. Copy on top, surface
* below; the matched min-height keeps the row even. */
.primitive-card--paired {
grid-template-columns: 1fr;
min-height: 460px;
padding: clamp(32px, 3.6vw, 44px) clamp(28px, 3.6vw, 40px) clamp(28px, 3.4vw, 38px);
}
.primitive-card--paired .primitive-meta { grid-column: 1 / -1; }
.primitive-card--paired .primitive-copy { justify-content: flex-start; }
/* Reserve two title lines on paired cards so the description baselines
* align across Canvas (1-line title) and Capabilities (2-line title). */
.primitive-card--paired .primitive-copy h3 { max-width: none; min-height: 2.2em; }
.primitive-card--paired .primitive-surface {
margin-top: clamp(20px, 2.6vh, 28px);
min-height: 240px;
}
.primitive-card[data-block="canvas"] .primitive-surface {
min-height: 300px;
}
.primitive-copy {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* Copy anchors at the bottom-left of its grid cell — Apple feature
* card composition. The artifact in the right column drifts toward
* the upper-center for visual balance. */
}
.primitive-meta {
grid-column: 1 / -1;
order: -1;
align-self: start;
justify-self: start;
display: flex;
align-items: baseline;
gap: 12px;
margin: 0;
line-height: 1;
}
.primitive-meta span:first-child {
font-family: var(--font-code);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.primitive-meta span:last-child {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
}
.primitive-copy h3 {
margin: 0;
max-width: 22ch;
font-family: var(--font-body);
font-size: clamp(29px, 3vw, 36px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text-primary);
text-wrap: pretty;
}
.primitive-copy p {
margin: clamp(16px, 2vh, 22px) 0 0;
max-width: 56ch;
font-family: var(--font-body);
font-size: 17.5px;
line-height: 1.6;
color: var(--text-secondary);
text-wrap: pretty;
}
.primitive-foot {
margin-top: clamp(24px, 3vh, 36px);
padding-top: 14px;
border-top: 1px solid rgba(29, 29, 31, 0.07);
font-family: var(--font-ui);
font-size: 11.5px;
letter-spacing: 0.02em;
color: var(--text-muted);
}
.primitive-surface {
position: relative;
min-width: 0;
min-height: 380px;
overflow: visible;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: clamp(8px, 1.6vw, 18px);
}
.primitive-card[data-block="thread-margin"] .primitive-surface {
min-height: 380px;
}
.primitive-surface--canvas {
align-items: stretch;
justify-content: stretch;
background:
radial-gradient(circle, rgba(80, 50, 20, 0.075) 1px, transparent 1.2px) 0 0 / 20px 20px,
var(--bg-canvas);
border: 1px solid rgba(29, 29, 31, 0.08);
border-radius: 12px;
overflow: hidden;
}
.primitive-surface--white {
background: #fff;
border: 1px solid rgba(29, 29, 31, 0.08);
border-radius: 12px;
overflow: hidden;
}
.primitive-card[data-block="capabilities"] .primitive-surface {
align-self: center;
min-height: 0;
padding-top: 0;
}
/* Motion ───────────────────────────────────────────────────────────── */
@keyframes section3-tick-pop {
0% { transform: rotate(-45deg) scale(0.4); opacity: 0; }
60% { transform: rotate(-45deg) scale(1.12); opacity: 1; }
100% { transform: rotate(-45deg) scale(1); opacity: 1; }
}
@keyframes section3-thread-fade-in {
0% { opacity: 0.28; transform: translateY(-2px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
.primitive-card {
grid-template-columns: 1fr;
column-gap: 32px;
row-gap: 26px;
padding: 36px 30px;
min-height: 0;
}
/* In single-column, surface appears above copy: artifact-first reads
* better on narrow viewports than dropping a wall of prose first. */
.primitive-meta { margin-bottom: -4px; }
.primitive-surface { order: 0; min-height: 320px; padding-top: 4px; }
.primitive-copy { order: 1; justify-content: flex-start; }
.primitive-copy p { max-width: 66ch; }
.primitive-card--hero {
min-height: 0;
grid-template-columns: 1fr;
width: auto;
margin-left: 0;
margin-right: 0;
}
/* Below this breakpoint the side-by-side pair would crush; stack vertically. */
.primitives-pair {
grid-template-columns: 1fr;
gap: clamp(24px, 4vw, 36px);
width: auto;
margin-left: 0;
margin-right: 0;
}
.primitive-card--paired { min-height: 0; }
.primitive-card--paired .primitive-surface { min-height: 280px; }
}
@media (max-width: 640px) {
.primitives { padding: 64px 20px; }
.primitives-head { margin-bottom: 36px; }
.primitives-title { font-size: clamp(34px, 11vw, 46px); }
.primitives-stack { gap: 30px; }
.primitive-card { row-gap: 22px; padding: 28px 20px; }
.primitive-copy h3 { font-size: 25px; max-width: none; }
.primitive-surface { min-height: 300px; }
.primitive-surface--hero { min-height: 360px; }
.primitive-surface--canvas { min-height: 330px; }
}
/* §3 hero composition ─────────────────────────────────────────────────
* The §3 hero card promotes thread-margin as one focused thread preview.
* A previous backing doc-page layer was removed because it looked like an
* empty card in production screenshots. */
.primitive-surface--hero {
position: relative;
align-items: stretch;
justify-content: stretch;
padding: 0;
/* Match the onboarding paper texture so this preview reads as part of
* the same dotted canvas, with only a light wash for depth. */
background:
radial-gradient(ellipse at top, rgba(255, 255, 255, 0.55), transparent 55%),
radial-gradient(circle at center, rgba(80, 50, 20, 0.055) 1px, transparent 1.2px) 0 0 / 22px 22px,
linear-gradient(180deg, rgba(245, 240, 230, 0.78) 0%, var(--bg-canvas) 100%);
border: 1px solid rgba(29, 29, 31, 0.07);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Thread preview — solid white, centered inside the warm paper surface. */
.thread-focus-stack {
--thread-card-width: min(100%, 400px);
--thread-doc-rail-y: 64px;
position: relative;
width: min(100%, 470px);
min-height: 350px;
display: flex;
align-items: center;
justify-content: center;
isolation: isolate;
}
.thread-focus-stack--hero {
position: relative;
z-index: 3;
width: min(100%, 680px);
align-self: stretch;
flex: 1;
min-height: 0;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 0;
padding: clamp(24px, 3.4vh, 36px) clamp(22px, 3vw, 32px);
transform: none;
}
/* White thread card — the thread reads as a focused rounded rectangle,
* with the doc-page shimmer tucked slightly behind it on the left. */
.thread-focus-card {
position: relative;
z-index: 2;
width: min(100%, 334px);
background: #fff;
border: 1px solid rgba(29, 29, 31, 0.08);
border-radius: 12px;
padding: clamp(13px, 1.55vh, 17px) 0 clamp(6px, 0.85vh, 10px);
box-shadow:
0 20px 44px -30px rgba(60, 40, 20, 0.28),
0 8px 18px -14px rgba(60, 40, 20, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.96);
overflow: hidden;
}
.thread-focus-stack--hero .thread-focus-card {
width: var(--thread-card-width);
}
/* Header strip — chip + page anchor + reply count, all on one line.
* No border, no fill: the strip is just typography stacked above the
* body. Brand label and the legacy state-dot are removed (real HudHud
* margin threads don't carry either; the chip is the identity).
* The brand and dot still exist in markup but are visually hidden so
* existing JS keeps working without coordinated edits. */
.thread-focus-header {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 0 14px 6px;
font-family: var(--font-ui);
}
.thread-focus-sep {
flex: 0 0 auto;
font-size: 10px;
color: var(--text-faint);
}
.thread-focus-dot,
.thread-focus-brand {
display: none;
}
/* Type chip — sized + spaced to match electron-app/src/styles/margin.css's
* .mn-type (9px / 0.04em / 1px×5px / 3px radius). Each thread state maps
* to a real editor type so the chip carries actual product vocabulary
* instead of marketing-only copper:
* review → observation (grey)
* suggestion → suggestion (green)
* architecture → architecture(orange)
* decision → question (accent copper)
* 8% rgba saturation matches the editor exactly. */
.thread-focus-type {
display: inline-flex;
align-items: center;
padding: 1px 5px;
border-radius: 3px;
font-family: var(--font-ui);
font-size: 9px;
font-weight: 500;
line-height: 1.4;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
background: var(--bg-tertiary);
transition: color 220ms var(--ease), background 220ms var(--ease);
}
.thread-focus-type[data-type="delivered"],
.thread-focus-type[data-type="review"],
.thread-focus-type[data-type="observation"] {
color: var(--text-muted);
background: var(--bg-tertiary);
}
.thread-focus-type[data-type="suggestion"] {
color: var(--status-green);
background: rgba(52, 199, 89, 0.08);
}
.thread-focus-type[data-type="architecture"] {
color: var(--status-orange);
background: rgba(255, 149, 0, 0.08);
}
.thread-focus-type[data-type="decision"],
.thread-focus-type[data-type="question"] {
color: var(--accent);
background: rgba(196, 93, 53, 0.08);
}
.thread-focus-type[data-type="warning"] {
color: var(--status-red);
background: rgba(255, 59, 48, 0.08);
}
.thread-focus-page {
margin-left: 0;
font-family: var(--font-code);
font-size: 9.5px;
color: var(--text-faint);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 96px;
}
.thread-focus-replies {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 3px;
flex: 0 0 auto;
font-family: var(--font-code);
font-size: 9.5px;
font-weight: 500;
line-height: 1;
color: var(--text-muted);
white-space: nowrap;
}
.thread-focus-replies .tfr-glyph {
font-size: 10px;
line-height: 1;
color: var(--text-faint);
}
/* Action row hidden in §3 — the thread is a static demo, no real bubble
* to open. Action affordances belong on the §2 takeover where they're
* fully wired. Hidden via CSS; the markup stays so existing tests that
* count the elements continue to resolve them. */
.thread-focus-actions {
display: none;
}
.thread-focus-dynamic {
position: relative;
overflow: hidden;
opacity: 1;
transform: translateY(0);
transition:
opacity 260ms var(--ease),
transform 300ms var(--ease);
}
.thread-focus-dynamic.is-fading-out {
opacity: 0.36;
transform: translateY(3px);
}
.thread-focus-dynamic.is-fading-in {
animation: section3-thread-fade-in 360ms var(--ease-out) both;
}
.thread-focus-bodies {
position: relative;
min-height: 104px;
padding: 4px 14px 0;
}
.thread-focus-body {
display: none;
margin: 0;
font-family: var(--font-ui);
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary);
opacity: 0.95;
}
.thread-focus-body strong {
color: var(--text-primary);
font-weight: 600;
}
.thread-focus-body.is-active {
display: block;
}
.thread-focus-embed {
position: relative;
height: 194px;
margin: 10px 12px 10px;
}
.thread-embed-state {
position: absolute;
inset: 0;
display: none;
flex-direction: column;
pointer-events: none;
}
.thread-embed-state.is-active {
display: flex;
pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
.thread-focus-dynamic {
transition: none;
}
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
.primitive-surface--hero { min-height: 360px; }
}
@media (max-width: 640px) {
.thread-focus-stack { width: min(100%, 344px); min-height: 326px; }
.thread-focus-card { width: min(100%, 302px); }
.thread-focus-page { display: none; }
.thread-focus-stack--hero {
width: 100%;
justify-content: center;
padding: clamp(20px, 3vh, 28px) clamp(16px, 3vw, 24px);
transform: none;
}
}
/* Embed chrome — adapted from Threads-design-sketch.html (.mn-embed-pill).
* The header is part of the artifact frame, not a separate chip.
*
* The thread embed is a "room" the agent renders inside the margin thread:
* its visual identity is intentionally distinct from the host onboarding page.
* We scope an Apple-system palette (cool blue accent, neutral grays, system
* purple for manipulate) inside .thread-embed-state so descendants pick it
* up automatically — the host page keeps its warm rust palette around it. */
.thread-embed-state {
/* Embed-room palette — overrides the host's --accent / shadow tints
* for everything inside the embed. Pure monochrome Apple feel: the
* "accent" is graphite (#1D1D1F), "manipulate" is black, and there
* is no chromatic hue anywhere — only neutral grays. */
--embed-accent: #1D1D1F;
--embed-accent-hover: #000000;
--embed-accent-soft: rgba(29, 29, 31, 0.06);
--embed-accent-soft-2: rgba(29, 29, 31, 0.14);
--embed-manipulate: #000000;
--embed-manipulate-soft: rgba(0, 0, 0, 0.06);
--embed-manipulate-soft-2: rgba(0, 0, 0, 0.14);
--embed-surface: #FFFFFF;
--embed-surface-recessed: #F5F5F7;
--embed-border: rgba(60, 60, 67, 0.13);
--embed-border-strong: rgba(60, 60, 67, 0.22);
--embed-divider: rgba(60, 60, 67, 0.10);
--embed-text-primary: #1D1D1F;
--embed-text-secondary: #6E6E73;
--embed-text-muted: #8E8E93;
--embed-text-faint: rgba(60, 60, 67, 0.36);
--embed-shadow-tint: 15, 23, 42;
position: absolute;
inset: 0;
display: none;
flex-direction: column;
pointer-events: none;
border: 1px solid var(--embed-border);
border-radius: 10px;
background: var(--embed-surface);
overflow: hidden;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 1px 2px rgba(var(--embed-shadow-tint), 0.04),
0 12px 28px -20px rgba(var(--embed-shadow-tint), 0.18);
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.thread-embed-state.is-active {
display: flex;
pointer-events: auto;
}
.thread-embed-state:hover {
border-color: var(--embed-border-strong);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.95) inset,
0 1px 2px rgba(var(--embed-shadow-tint), 0.05),
0 18px 36px -22px rgba(var(--embed-shadow-tint), 0.24);
}
.thread-embed-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
margin: 0;
border-bottom: 1px solid var(--embed-divider);
background: linear-gradient(180deg, #FBFBFD 0%, #F5F5F7 100%);
font-family: var(--font-ui);
cursor: pointer;
}
.thread-embed-icon {
width: 14px;
height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--embed-text-muted);
}
.thread-embed-icon svg {
width: 14px;
height: 14px;
}
.thread-embed-pill__title {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 9.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--embed-text-primary);
}
/* Tier badges — view (muted) / annotate (system blue) / manipulate (system purple) */
.thread-embed-tier {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 1.5px 6px;
border-radius: 8px;
font-family: var(--font-code);
font-size: 7px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.thread-embed-tier[data-tier="view"] {
color: var(--embed-text-muted);
background: rgba(60, 60, 67, 0.06);
}
.thread-embed-tier[data-tier="annotate"] {
color: var(--embed-accent);
background: var(--embed-accent-soft);
}
.thread-embed-tier[data-tier="manipulate"] {
color: var(--embed-manipulate);
background: var(--embed-manipulate-soft);
}
/* Tier color cascades to the icon */
.thread-embed-state[data-tier="annotate"] .thread-embed-icon { color: var(--embed-accent); }
.thread-embed-state[data-tier="manipulate"] .thread-embed-icon { color: var(--embed-manipulate); }
/* Embed preview wrapper — the body of the same artifact frame */
.thread-embed-preview {
position: relative;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
background: var(--embed-surface);
overflow: hidden;
}
/* ---- Real-UI artifacts (te-art) — full-bleed inside .thread-embed-preview.
* Anchored to absolute inset:0 so the host preview's flex column doesn't
* resize them. Each artifact paints its own background. */
.te-art {
position: absolute;
inset: 0;
font-family: var(--font-ui);
color: var(--embed-text-primary);
}
.te-art--map, .te-art--chart {
display: block;
width: 100%;
height: 100%;
}
/* ---- Push notification stack ---- */
.te-art--push {
padding: 10px 11px;
background:
radial-gradient(120% 90% at 18% 0%, rgba(255, 255, 255, 0.75), transparent 55%),
linear-gradient(160deg, #F1F1F6 0%, #E4E7EE 58%, #DCE1EA 100%);
display: flex;
flex-direction: column;
gap: 6px;
}
.thread-embed-state--delivered .te-art--push {
transform: translateY(7px);
}
.te-push-card {
background: rgba(255, 255, 255, 0.94);
border-radius: 11px;
padding: 8px 9px;
display: grid;
grid-template-columns: 28px minmax(0,1fr) auto;
column-gap: 8px;
align-items: start;
border: 0.5px solid rgba(255, 255, 255, 0.85);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 1px 1px rgba(15, 23, 42, 0.05),
0 12px 24px -14px rgba(15, 23, 42, 0.30);
}
.te-push-card--focus { padding-bottom: 6px; }
.te-push-card--peek {
align-items: center;
grid-template-columns: 22px minmax(0,1fr);
padding: 7px 9px;
opacity: 0.92;
}
.te-push-icon {
width: 28px;
height: 28px;
border-radius: 6.5px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font: 700 13px var(--font-ui);
letter-spacing: 0.01em;
}
.te-push-card--peek .te-push-icon { width: 18px; height: 18px; border-radius: 5px; }
.te-push-icon--hudhud {
background: linear-gradient(180deg, #3A3A3E 0%, #141416 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(15, 23, 42, 0.25);
}
.te-push-icon svg { display: block; }
.te-push-icon--build {
background: linear-gradient(180deg, #8A8A90 0%, #5E5E64 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(15, 23, 42, 0.22);
position: relative;
}
.te-push-icon--build::before {
content: ""; position: absolute; left: 7px; right: 7px; top: 13px;
height: 2px; border-radius: 1px; background: #fff;
}
.te-push-icon--battery {
background: linear-gradient(180deg, #D67347 0%, #AC4C28 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 1px 2px rgba(15, 23, 42, 0.22);
}
.te-push-meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.te-push-row {
display: flex; justify-content: space-between; align-items: baseline;
font: 700 7.5px var(--font-ui);
letter-spacing: 0.08em;
color: var(--embed-text-muted);
text-transform: uppercase;
}
.te-push-row .te-push-when { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--embed-text-faint); font-size: 8px; }
.te-push-title {
font: 600 10.5px var(--font-ui);
color: var(--embed-text-primary);
letter-spacing: -0.005em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.te-push-title--quiet { font-weight: 500; color: var(--embed-text-secondary); }
.te-push-quote {
font: 400 9.5px var(--font-ui);
color: var(--embed-text-secondary);
font-style: italic;
margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.te-push-actions {
grid-column: 2 / 4;
display: flex; gap: 6px;
align-items: center; justify-content: flex-end;
margin-top: 5px;
}
.te-push-chip {
border: 0;
background: transparent;
font: 600 9.5px var(--font-ui);
color: var(--embed-text-secondary);
padding: 3px 6px;
border-radius: 5px;
cursor: default;
}
.te-push-chip--primary {
background: linear-gradient(180deg, #3A3A3E 0%, #161618 100%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 1px 3px rgba(15, 23, 42, 0.28);
}
.te-push-bar {
height: 5px;
background: rgba(60,60,67,0.10);
border-radius: 3px;
}
/* ---- Welcome / first-run card ---- */
.te-art--welcome {
/* The welcome card peeks down from the embed midline like a screen
* fragment pulled to the surface: its top edge sits roughly at the
* embed's vertical center, and its lower half (label / input / note /
* CTA) extends past the embed bottom and is clipped by overflow:hidden.
* Only the top-to-center of the card — eyebrow / title / sub — remains
* visible. */
position: relative;
overflow: hidden;
padding: 0;
background:
radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, 0.75), transparent 55%),
linear-gradient(200deg, #F1F1F6 0%, #E4E7EE 58%, #DCE1EA 100%);
display: flex;
align-items: flex-start;
justify-content: center;
}
.te-art--welcome::before {
/* White rounded "screen" sitting behind the welcome card so the card
* reads as a fragment of a real device surface. Only the top corners
* are rounded; the bottom edge extends past the embed and is clipped
* by overflow:hidden, so the screen reads as continuing below. */
content: "";
position: absolute;
left: 14px;
right: 14px;
top: 10px;
bottom: -16px;
background: linear-gradient(180deg, #FFFFFF 0%, #FCFCFD 100%);
border-radius: 12px 12px 0 0;
border: 0.5px solid rgba(255, 255, 255, 0.9);
border-bottom: 0;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 -1px 1px rgba(15, 23, 42, 0.03),
0 14px 30px -16px rgba(15, 23, 42, 0.35);
pointer-events: none;
}
.te-welcome-card {
position: relative;
z-index: 1;
width: calc(100% - 24px);
max-width: 280px;
/* Production CSP blocks style attributes, so the tiny welcome-screen
* crop lives here rather than as generated inline positioning. */
margin: 15px 0 0;
flex: 0 0 auto;
background: transparent;
border: 0;
border-radius: 0;
padding: 12px 8px 11px;
box-shadow: none;
}
.thread-embed-state--ui .te-welcome-card {
transform: translateY(7px);
}
.te-welcome-eyebrow {
display: flex; align-items: center; gap: 5px;
font: 700 8.5px var(--font-ui);
letter-spacing: 0.09em;
color: var(--embed-text-muted);
text-transform: uppercase;
}
.te-welcome-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--embed-accent);
}
.te-welcome-title {
font: 700 14px var(--font-ui);
letter-spacing: -0.02em;
color: var(--embed-text-primary);
margin-top: 5px;
}
.te-welcome-sub {
font: 400 10px var(--font-ui);
color: var(--embed-text-secondary);
line-height: 1.45;
margin-top: 2px;
margin-bottom: 9px;
}
.te-welcome-label {
font: 700 8.5px var(--font-ui);
letter-spacing: 0.08em;
color: var(--embed-text-muted);
text-transform: uppercase;
margin-bottom: 3px;
}
.te-welcome-input {
height: 24px;
padding: 0 8px;
border: 1px solid var(--embed-accent);
border-radius: 5px;
background: #fff;
display: flex; align-items: center;
font: 500 11px var(--font-ui);
color: var(--embed-text-primary);
position: relative;
box-shadow: 0 0 0 2.5px rgba(29, 29, 31, 0.07), inset 0 1px 1px rgba(15, 23, 42, 0.04);
}
.te-welcome-caret {
width: 1px; height: 12px;
background: var(--embed-accent);
margin-left: 1px;
animation: te-caret-blink 1.1s step-end infinite;
}
@keyframes te-caret-blink { 50% { opacity: 0; } }
.te-welcome-note {
font: 400 9.5px var(--font-ui);
font-style: italic;
color: var(--embed-text-secondary);
margin: 5px 0 9px;
}
.te-welcome-cta {
width: 100%;
height: 28px;
background: linear-gradient(180deg, #3A3A3E 0%, #141416 100%);
color: #fff;
border: 0;
border-radius: 6px;
font: 700 10.5px var(--font-ui);
letter-spacing: 0.01em;
cursor: default;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.22),
0 2px 6px -1px rgba(15, 23, 42, 0.35);
}
.te-welcome-pin {
position: absolute;
width: 17px; height: 17px;
border-radius: 50%;
background: var(--embed-accent);
color: #fff;
font: 700 9.5px var(--font-ui);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 2px var(--embed-surface), 0 1px 2px rgba(0,0,0,0.15);
}
.te-welcome-pin--1 { top: 30px; right: -8px; }
.te-welcome-pin--2 { bottom: 14px; right: -8px; }
/* Design review artifact — UI preview with numbered annotation pins */
.thread-review-artifact {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
gap: 7px;
padding: 9px 10px 10px;
background: var(--embed-surface);
font-family: var(--font-ui);
}
.thread-review-layout {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.thread-review-ui,
.thread-signup-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--embed-border);
border-radius: 8px;
background: var(--embed-surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.95),
0 1px 2px rgba(var(--embed-shadow-tint), 0.04);
}
.thread-review-ui {
padding: 10px 11px;
gap: 7px;
}
.thread-review-title {
display: block;
margin: 0;
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--embed-text-primary);
}
.thread-review-field {
display: flex;
align-items: center;
width: 100%;
height: 22px;
padding: 0 8px;
border: 1px solid var(--embed-border);
border-radius: 5px;
background: var(--embed-surface-recessed);
font-size: 9.4px;
font-weight: 500;
color: var(--embed-text-secondary);
}
.thread-review-button {
width: 100%;
height: 24px;
border: 0;
border-radius: 5px;
background: var(--embed-accent);
font-family: var(--font-ui);
font-size: 9.6px;
font-weight: 600;
letter-spacing: -0.005em;
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 1px 2px rgba(0, 0, 0, 0.20);
}
.thread-review-trust {
display: flex;
align-items: center;
min-height: 20px;
padding: 0 8px;
border: 1px solid rgba(48, 209, 88, 0.20);
border-radius: 5px;
background: rgba(48, 209, 88, 0.06);
font-size: 8.6px;
font-weight: 600;
color: var(--embed-text-secondary);
}
.thread-review-pin {
position: absolute;
width: 15px;
height: 15px;
border-radius: 50%;
background: var(--embed-accent);
border: 1.5px solid #fff;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.10),
0 4px 10px rgba(var(--embed-shadow-tint), 0.18);
font-size: 8px;
font-weight: 700;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.thread-review-pin--cta {
right: 16px;
bottom: 16px;
}
.thread-review-pin--account {
right: 18px;
top: 56px;
}
.thread-review-pin--trust {
left: 18px;
bottom: 47px;
}
.thread-review-pin--ui-note {
left: 18px;
bottom: 54px;
}
.thread-review-pin--ui-cta {
right: 18px;
bottom: 18px;
}
.thread-ui-artifact {
flex: 1;
min-height: 0;
display: flex;
padding: 11px;
background: var(--embed-surface);
font-family: var(--font-ui);
}
.thread-signup-card {
flex: 1;
min-width: 0;
padding: 12px;
gap: 8px;
background:
radial-gradient(circle at 86% 76%, rgba(0, 0, 0, 0.04), transparent 36%),
var(--embed-surface);
}
.thread-signup-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
min-width: 0;
}
.thread-signup-head span {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--embed-text-muted);
}
.thread-signup-head strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.15;
color: var(--embed-text-primary);
}
.thread-signup-label {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--embed-text-muted);
}
.thread-signup-input {
display: flex;
align-items: center;
min-height: 22px;
padding: 0 8px;
border: 1px solid var(--embed-border);
border-radius: 5px;
background: var(--embed-surface-recessed);
font-size: 9.5px;
font-weight: 500;
color: var(--embed-text-secondary);
}
.thread-signup-cta {
margin: auto -2px 0;
padding: 4px;
border: 1px solid var(--embed-accent-soft-2);
border-radius: 8px;
background: var(--embed-accent-soft);
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.025);
}
.thread-signup-cta button {
width: 100%;
height: 24px;
border: 0;
border-radius: 5px;
background: var(--embed-accent);
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: #fff;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 1px 2px rgba(0, 0, 0, 0.20);
}
.thread-signup-note {
margin: 0;
font-size: 8.8px;
line-height: 1.25;
color: var(--embed-text-muted);
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.thread-review-layout { grid-template-columns: minmax(0, 1fr); }
}
/* Secondary §3 thread embed artifact variants: delivered, pricing, canvas, and decision.
* All selectors below live inside .thread-embed-state, so they inherit the
* embed-room tokens (--embed-accent system blue, --embed-manipulate system
* purple, --embed-text-* neutrals) defined in primitives-embed.css. */
.thread-delivered-artifact {
flex: 1;
min-height: 0;
padding: 10px 12px 12px;
font-family: var(--font-ui);
}
.thread-delivered-title {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
font-size: 11px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--embed-text-primary);
}
.thread-delivered-title span {
width: 7px;
height: 7px;
border-radius: 50%;
background: #30D158;
box-shadow: 0 0 0 2px rgba(48, 209, 88, 0.18);
}
.thread-delivered-title small {
margin-left: auto;
font-size: 10px;
color: var(--embed-text-muted);
white-space: nowrap;
font-weight: 400;
}
.thread-delivered-artifact ul {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--font-code);
font-size: 10.5px;
line-height: 1.5;
color: var(--embed-text-secondary);
}
.thread-delivered-artifact li {
display: flex;
gap: 6px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.thread-delivered-artifact li span {
color: var(--embed-text-muted);
}
.thread-delivered-bar {
height: 4px;
margin-top: 10px;
border-radius: 999px;
background: rgba(60, 60, 67, 0.10);
overflow: hidden;
}
.thread-delivered-bar span {
display: block;
width: 78%;
height: 100%;
background: var(--embed-accent);
border-radius: 999px;
}
/* Pricing artifact — annotated UI mock */
.thread-pricing-artifact {
position: relative;
flex: 1;
min-height: 0;
padding: 10px 12px 12px;
font-family: var(--font-ui);
}
.thread-pricing-artifact .ec-eyebrow {
margin-bottom: 8px;
}
.thread-pricing-artifact .ec-detail {
padding-bottom: 8px;
}
.thread-pricing-pin {
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--embed-manipulate);
border: 1.5px solid #fff;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.10),
0 2px 6px rgba(var(--embed-shadow-tint), 0.18);
font-family: var(--font-ui);
font-size: 9px;
font-weight: 700;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.thread-pricing-pin--1 { top: 26px; right: 14px; }
.thread-pricing-pin--2 { bottom: 16px; left: 14px; }
/* Canvas mini-svg */
.thread-mini-canvas {
flex: 1;
width: 100%;
height: 100%;
padding: 10px 12px 12px;
color: var(--embed-text-secondary);
}
.thread-mini-canvas rect,
.thread-mini-canvas path,
.thread-mini-canvas circle {
fill: none;
stroke: currentColor;
stroke-width: 1.2;
vector-effect: non-scaling-stroke;
}
.thread-mini-canvas marker path {
fill: currentColor;
stroke: none;
}
.thread-mini-canvas .accent {
stroke: var(--embed-manipulate);
}
.thread-mini-canvas text {
font-family: var(--font-ui);
font-size: 11px;
fill: var(--embed-text-secondary);
}
.thread-mini-canvas .thread-mini-note {
font-family: var(--font-code);
font-size: 9.5px;
fill: var(--embed-text-muted);
}
/* Decision artifact — compact A/B choice card */
.thread-decision-artifact {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
gap: 5px;
padding: 9px 11px;
background: var(--embed-surface);
font-family: var(--font-ui);
color: var(--embed-text-primary);
}
.thread-decision-eyebrow {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--embed-accent);
}
.thread-decision-question {
margin: 0;
font-size: 12.5px;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.22;
color: var(--embed-text-primary);
}
.thread-choice-list {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.thread-choice {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
padding: 5px 6px;
border: 1px solid var(--embed-border);
border-radius: 7px;
background: var(--embed-surface);
transition: border-color 140ms ease, background 140ms ease;
}
.thread-choice.is-selected {
border-color: var(--embed-accent-soft-2);
background: var(--embed-accent-soft);
box-shadow: inset 2px 0 0 var(--embed-accent);
}
.thread-choice-key {
width: 17px;
height: 17px;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 5px;
background: rgba(60, 60, 67, 0.06);
font-family: var(--font-code);
font-size: 10px;
font-weight: 700;
color: var(--embed-text-secondary);
}
.thread-choice.is-selected .thread-choice-key {
background: var(--embed-accent);
color: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
.thread-choice-copy {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.thread-choice-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 10.5px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.16;
color: var(--embed-text-primary);
}
.thread-choice-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 7.8px;
line-height: 1.2;
color: var(--embed-text-muted);
}
.thread-choice-status {
flex: 0 0 auto;
padding: 1.5px 6px;
border-radius: 999px;
background: var(--embed-accent-soft);
color: var(--embed-accent);
font-family: var(--font-code);
font-size: 7.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.thread-decision-ready {
margin-top: auto;
padding-top: 1px;
font-family: var(--font-code);
font-size: 8px;
color: var(--embed-text-muted);
}
@media (max-width: 640px) {
.thread-delivered-title small { display: none; }
}
/* Canvas demo ──────────────────────────────────────────────────────── */
.inline-canvas-demo {
width: 100%;
height: 100%;
padding: 6px 8px 8px;
display: flex;
flex-direction: column;
gap: 8px;
}
.inline-canvas-prose {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.6;
color: var(--text-secondary);
margin: 0;
}
.inline-canvas-prose--top {
padding-top: 2px;
}
.inline-canvas-prose--bottom {
color: var(--text-muted);
padding-bottom: 1px;
}
.inline-canvas-window {
position: relative;
flex: 1;
min-height: 0;
overflow: hidden;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.inline-canvas-field {
position: absolute;
inset: 0;
background: transparent;
}
.canvas-playground {
position: absolute;
inset: -24px -38px -20px;
font-family: var(--font-ui);
}
.canvas-art--primitive-map {
width: 100%;
height: 100%;
display: block;
overflow: visible;
color: rgba(29, 29, 31, 0.48);
transform: translateY(1%) scale(1.14);
transform-origin: center center;
}
.canvas-zone-frame {
display: none;
}
.canvas-zone-label {
font-family: var(--font-code);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
fill: var(--text-muted);
}
.canvas-shape circle,
.canvas-shape rect,
.canvas-shape path {
fill: color-mix(in srgb, var(--bg-canvas) 82%, #fff);
stroke: rgba(29, 29, 31, 0.44);
stroke-width: 1.6;
vector-effect: non-scaling-stroke;
}
.canvas-shape--accent rect,
.canvas-shape--accent circle,
.canvas-shape--accent path {
fill: var(--accent-soft);
stroke: var(--accent);
}
.canvas-shape--loose circle,
.canvas-shape--loose rect,
.canvas-shape--loose path {
fill: rgba(255, 255, 255, 0.52);
stroke: rgba(29, 29, 31, 0.30);
stroke-dasharray: 4 4;
}
.canvas-shape text {
font-family: var(--font-code);
font-size: 12px;
font-weight: 600;
fill: var(--text-secondary);
}
.canvas-shape--accent text {
fill: var(--accent);
}
.canvas-arrow {
fill: none;
stroke: rgba(29, 29, 31, 0.40);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.canvas-arrow--handoff {
stroke: var(--accent);
stroke-width: 1.7;
}
.canvas-arrow--accent {
stroke: var(--accent);
stroke-width: 1.7;
}
.canvas-art--primitive-map marker path {
fill: currentColor;
stroke: none;
}
.canvas-pin {
display: block;
}
.canvas-pin circle {
fill: var(--accent);
stroke: #fff;
stroke-width: 1.5;
filter: drop-shadow(0 4px 8px rgba(60, 40, 20, 0.16));
}
.canvas-pin text {
font-family: var(--font-ui);
font-size: 8px;
font-weight: 700;
fill: #fff;
}
.canvas-handnote {
font-family: var(--font-code);
font-size: 11.25px;
font-style: italic;
fill: var(--text-muted);
stroke: color-mix(in srgb, var(--bg-canvas) 88%, #fff);
stroke-width: 3px;
paint-order: stroke;
}
.canvas-handnote--accent {
fill: var(--accent);
}
.canvas-note rect {
fill: rgba(255, 255, 255, 0.72);
stroke: rgba(29, 29, 31, 0.12);
stroke-width: 1;
filter: drop-shadow(0 8px 18px rgba(60, 40, 20, 0.08));
}
.canvas-note text {
font-family: var(--font-body);
font-size: 14px;
font-weight: 650;
fill: var(--text-secondary);
}
.canvas-label {
font-family: var(--font-code);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
fill: var(--text-muted);
stroke: color-mix(in srgb, var(--bg-canvas) 88%, #fff);
stroke-width: 3px;
paint-order: stroke;
}
.canvas-chip rect {
fill: rgba(255, 255, 255, 0.58);
stroke: rgba(29, 29, 31, 0.26);
stroke-width: 1.35;
stroke-dasharray: 3 4;
vector-effect: non-scaling-stroke;
}
.canvas-chip--loose rect {
fill: color-mix(in srgb, var(--bg-canvas) 78%, #fff);
stroke: rgba(29, 29, 31, 0.24);
}
.canvas-chip text {
font-family: var(--font-code);
font-size: 11.5px;
font-weight: 650;
fill: var(--text-secondary);
}
.canvas-guide {
fill: none;
stroke: rgba(29, 29, 31, 0.10);
stroke-width: 1.15;
stroke-linecap: round;
stroke-dasharray: 2 8;
vector-effect: non-scaling-stroke;
}
.canvas-guide--short {
stroke: rgba(196, 93, 53, 0.16);
}
.canvas-arrow--soft {
stroke: rgba(29, 29, 31, 0.28);
stroke-dasharray: 4 5;
}
.canvas-scribble {
fill: none;
stroke: var(--accent);
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: 0.56;
vector-effect: non-scaling-stroke;
}
.canvas-scribble--quiet {
stroke: rgba(29, 29, 31, 0.30);
opacity: 0.42;
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.inline-canvas-demo {
min-height: 300px;
padding: 2px 10px 0;
gap: 8px;
}
.inline-canvas-window {
flex: 1 1 auto;
min-height: 232px;
}
.canvas-playground {
inset: 8px 2px;
}
.canvas-zone-label {
font-size: 9.5px;
}
.canvas-shape text,
.canvas-handnote {
font-size: 12.5px;
}
.canvas-note text {
font-size: 14.5px;
}
.canvas-chip text {
font-size: 12px;
}
}
/* Capabilities demo ───────────────────────────────────────────────── */
.capability-demo {
width: 100%;
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
background: #fff;
font-family: var(--font-body);
user-select: none;
}
.capability-demo-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 20px 8px;
font-family: var(--font-ui);
font-size: 12px;
font-weight: 400;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
}
.capability-demo-header span:last-child {
letter-spacing: 0.02em;
text-transform: none;
color: var(--text-faint);
}
.capability-demo ul {
width: 100%;
min-width: 0;
list-style: none;
margin: 0;
padding: 0 20px 16px;
display: flex;
flex-direction: column;
gap: 2px;
}
.capability-demo li {
display: flex;
align-items: flex-start;
gap: 10px;
min-height: 0;
padding: 9px 0;
border-radius: 6px;
border-bottom: 1px solid rgba(29, 29, 31, 0.065);
color: var(--text-primary);
white-space: normal;
line-height: 1.55;
transition: background-color 100ms var(--ease);
}
.capability-demo li:last-child {
border-bottom: 0;
}
.capability-demo li.is-checked {
color: var(--text-secondary);
}
.capability-demo li.is-checked .capability-copy strong {
text-decoration-line: line-through;
text-decoration-color: var(--text-muted);
text-decoration-thickness: 1px;
}
.capability-copy {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.capability-copy strong {
font-size: 15.5px;
font-weight: 600;
line-height: 1.32;
color: var(--text-primary);
}
.capability-copy small {
font-size: 12.5px;
font-weight: 500;
line-height: 1.32;
color: var(--text-muted);
}
.capability-demo li.is-checked .capability-copy strong {
color: var(--text-secondary);
}
.capability-demo li.is-checked .capability-copy small {
color: color-mix(in srgb, var(--text-muted) 84%, transparent);
}
.capability-check {
width: 20px;
height: 20px;
border-radius: 4px;
flex: 0 0 auto;
margin-top: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1.5px solid rgba(29, 29, 31, 0.18);
background: #fff;
box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.02);
transition:
background 220ms var(--ease),
border-color 220ms var(--ease),
box-shadow 220ms var(--ease);
}
.capability-check::after {
content: '';
width: 9px;
height: 5px;
border-left: 1.8px solid #fff;
border-bottom: 1.8px solid #fff;
transform: rotate(-45deg) scale(0.55);
opacity: 0;
transition:
opacity 180ms var(--ease),
transform 220ms var(--ease);
}
.capability-demo li.is-checked .capability-check {
border-color: var(--accent);
background: var(--accent);
box-shadow:
0 5px 14px -8px rgba(196, 93, 53, 0.55),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.capability-demo li.is-checked .capability-check::after {
opacity: 1;
transform: rotate(-45deg) scale(1);
}
.capability-demo li.is-pop .capability-check::after {
animation: section3-tick-pop 280ms var(--ease) both;
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
.capability-demo { min-height: 0; }
.capability-demo-header {
padding: 13px 14px 5px;
}
.capability-demo ul {
padding: 0 14px 13px;
}
.capability-demo li {
gap: 8px;
padding: 7px 0;
}
.capability-copy strong {
font-size: 13.5px;
line-height: 1.28;
}
.capability-copy small {
font-size: 11.5px;
}
}
/* §3 thread-canvas artifact — calm static architecture sketch.
*
* Reverted from the prior observable ink-on-paper draw/settle/erase
* animation back to the geometric style from the older primitives
* gallery: clean rounded rectangles, neutral strokes, sans-serif
* labels, one accent node, a small filename credit. No paper texture,
* no animation. The diagram sits flat on the primitive-film's dot-grid
* surface and reads as a settled artifact rather than a motion demo. */
.mn-embed-canvas {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* currentColor drives the inline arrowhead marker so it tracks the
* arrow stroke without per-marker styling. */
color: var(--text-muted);
}
.mn-embed-canvas .canvas-art {
width: 100%;
height: 100%;
}
.mn-embed-canvas .canvas-art .canvas-shape {
fill: none;
stroke: var(--text-secondary);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.mn-embed-canvas .canvas-art .canvas-shape.accent {
stroke: var(--accent);
}
.mn-embed-canvas .canvas-art .canvas-arrow {
fill: none;
stroke: var(--text-muted);
stroke-width: 1.2;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.mn-embed-canvas .canvas-art .canvas-label {
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
fill: var(--text-secondary);
}
.mn-embed-canvas .canvas-art .canvas-filename {
font-family: var(--font-code);
font-size: 10px;
letter-spacing: 0.04em;
fill: var(--text-faint);
}
/* §4 Lifecycle ribbon — four product moments that complete an objective.
* One small product-native surface per stage, no marketing copy, no
* checklist of features. Stages map 1:1 to the vision themes:
* Writing → document-as-context
* Asking → visible alignment
* Building → autonomous execution
* Pushed → product trust
* ───────────────────────────────────────────────────────────────────── */
.lifecycle {
flex-direction: column;
background: var(--bg-canvas);
background-image: radial-gradient(circle at center, var(--bg-canvas-dot) 1px, transparent 1.2px);
background-size: 22px 22px;
}
.lifecycle-head {
width: min(100%, 880px);
margin: 0 auto 56px;
text-align: center;
}
.lifecycle-eyebrow {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.lifecycle-title {
margin: 0 0 18px;
font-family: var(--font-body);
font-size: clamp(34px, 4vw, 56px);
line-height: 1.04;
letter-spacing: -0.028em;
font-weight: 700;
color: var(--text-primary);
}
.lifecycle-title em {
font-style: italic;
color: var(--accent);
}
.lifecycle-body {
margin: 0 auto;
max-width: 540px;
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
color: var(--text-secondary);
}
/* Five square cinematic cards, one per lifecycle stage. Each card is a
* close crop of one product-native surface — a tiny doc, a thread card,
* a capability list, the hub pill, the delivery card. Eyebrow label is
* the only orientation copy. The square aspect ratio gives the row a
* consistent rhythm and lets each subject "sit" in its frame like a
* product photograph rather than a screenshot dump. */
.lifecycle-grid {
position: relative;
width: min(100%, 1320px);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
column-gap: clamp(12px, 1.6vw, 20px);
row-gap: 0;
align-items: start;
}
/* Hairline connector — runs across the row at the level of the stage-num
* badges, threading gap-to-gap behind them. Sits at the top edge of the
* cards so the row reads as one arc. */
.lifecycle-grid::before {
content: '';
position: absolute;
left: 8%;
right: 8%;
top: 0;
height: 1px;
background: linear-gradient(to right,
transparent 0%,
var(--hairline-strong) 6%,
var(--hairline-strong) 94%,
transparent 100%);
pointer-events: none;
z-index: 0;
}
/* Each stage is a square card containing the mock + a single eyebrow
* label. No title, no body paragraph — visuals carry the story.
* aspect-ratio: 1/1 holds the square shape across viewport widths;
* the mock fills the upper 78% of the square and the eyebrow sits
* in the bottom strip as a credit. */
.lifecycle-stage {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 14px;
box-shadow:
0 10px 24px rgba(60, 40, 20, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
overflow: hidden;
z-index: 1;
/* Hidden until lifecycle.js adds .is-in, staggered left-to-right. */
opacity: 0;
transform: translateY(8px);
transition: opacity 360ms var(--ease), transform 360ms var(--ease);
}
.lifecycle-stage.is-in {
opacity: 1;
transform: translateY(0);
}
/* Subtle bracket marks — corner glyphs at the top-right of each square,
* mirroring the §3 primitive cards' polished framing language. */
.lifecycle-stage::before {
content: '';
position: absolute;
top: 12px;
right: 12px;
width: 12px;
height: 12px;
border: 1px solid rgba(29, 29, 31, 0.16);
border-bottom: none;
border-left: none;
pointer-events: none;
z-index: 4;
}
.lifecycle-mock {
position: relative;
flex: 1;
min-height: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 2.2vw, 22px) clamp(14px, 1.8vw, 20px) clamp(8px, 1.2vw, 12px);
overflow: hidden;
/* Subtle backdrop wash — gives each square a sense of being a polished
* close crop on a soft surface, not a flat tile. */
background:
radial-gradient(ellipse at top, rgba(255, 255, 255, 0.55), transparent 60%),
linear-gradient(180deg, #fdfcf8 0%, #f6f3ec 100%);
}
.lifecycle-mock--review,
.lifecycle-mock--delivered {
align-items: stretch;
padding-top: clamp(16px, 2vw, 22px);
}
/* Stage-num badge sits ABOVE the square card, partially overlapping its
* top edge. The badge is the row's connector anchor. */
.lifecycle-stage-num {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
width: 22px;
height: 22px;
border-radius: 999px;
background: var(--bg-canvas);
border: 1px solid var(--hairline-strong);
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 600;
color: var(--text-secondary);
z-index: 5;
}
/* Eyebrow label — the only orientation copy in the card. Sits as a thin
* credit strip across the bottom of the square. */
.lifecycle-eyebrow-mini {
font-family: var(--font-ui);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
text-align: center;
padding: 10px 12px 14px;
border-top: 1px solid var(--hairline);
background: var(--bg-elevated);
flex-shrink: 0;
}
/* Title and body intentionally hidden — square cards are label-only per
* the redesign. Markup is retained for screen readers and reduced-motion
* fallbacks; visually we let the mock carry the moment. */
.lifecycle-stage-title,
.lifecycle-stage-body {
position: absolute;
width: 1px; height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Footnote under the ribbon — quiet anchor for the section. */
.lifecycle-foot {
width: min(100%, 800px);
margin: 64px auto 0;
text-align: center;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
color: var(--text-faint);
font-style: italic;
}
/* Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
/* When stages wrap to 3 columns, hide the row connector — it doesn't
* make sense across multiple visual rows. */
.lifecycle-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 18px;
}
.lifecycle-grid::before { display: none; }
}
@media (max-width: 920px) {
/* Lifecycle row collapses to 2 columns at this break — five squares
* would crush each one. The hairline connector hides because it
* doesn't make sense across rows. */
.lifecycle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 18px;
row-gap: 28px;
}
.lifecycle-grid::before { display: none; }
}
@media (max-width: 640px) {
.lifecycle-head { max-width: 100%; overflow: hidden; }
.lifecycle-title {
max-width: calc(100vw - 40px);
margin-inline: auto;
font-size: clamp(30px, 12vw, 42px);
line-height: 1.06;
letter-spacing: -0.02em;
overflow-wrap: anywhere;
}
/* Lifecycle on the narrowest viewports: collapse to a 2-column grid so
* the squares stay legible. The hairline connector hides — it doesn't
* make sense across rows. */
.lifecycle-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px 14px;
row-gap: 24px;
}
.lifecycle-grid::before { display: none; }
.lifecycle-foot { font-size: 13px; margin-top: 40px; }
}
@media (max-width: 360px) {
.lifecycle-title { font-size: clamp(28px, 11vw, 36px); }
}
/* ── Stage 1 · Writing — close crop of a doc surface with caret ─────────
* The card frames a tight chunk of doc text — title + a few prose lines
* with the caret blinking on the active line. Scaled larger so the
* typography dominates the square. */
.lc-doc-mock {
width: 100%;
height: 100%;
background: linear-gradient(180deg, #fdfcf8, #f6f3ec);
border-radius: 10px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 12px;
font-family: var(--font-body);
text-align: left;
position: relative;
border: 1px solid rgba(29, 29, 31, 0.04);
box-shadow: 0 8px 18px rgba(60, 40, 20, 0.06);
}
.lc-doc-mock-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-ui);
font-size: 8.5px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-faint);
}
.lc-doc-mock-meta::before {
content: '';
width: 4px; height: 4px;
border-radius: 50%;
background: var(--text-faint);
}
.lc-doc-mock-h1 {
font-size: 16px;
font-weight: 700;
letter-spacing: -0.018em;
color: var(--text-primary);
line-height: 1.2;
}
.lc-doc-mock-line {
height: 6px;
border-radius: 2px;
background: rgba(29, 29, 31, 0.12);
}
.lc-doc-mock-line.short { width: 60%; }
.lc-doc-mock-line.med { width: 88%; }
.lc-doc-mock-line.full { width: 100%; }
.lc-doc-mock-active {
display: flex;
align-items: center;
gap: 2px;
margin-top: 4px;
}
.lc-doc-mock-active .lc-doc-mock-line { width: 50%; }
.lc-doc-mock-caret {
display: inline-block;
width: 2px;
height: 13px;
background: var(--text-primary);
margin-left: 3px;
animation: caret-blink 1s steps(1, end) infinite;
}
/* ── Stage 2 · Asking — close crop of a single margin thread card ───── */
.lc-thread-mock {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 16px 18px;
font-family: var(--font-ui);
text-align: left;
box-shadow: 0 10px 22px rgba(60, 40, 20, 0.08);
position: relative;
}
/* Anchor dot — sits at the upper-left of the card, mirroring the real
* margin-note::before. Reads as "anchored to a thought" without the rest
* of the doc visible. */
.lc-thread-mock::before {
content: '';
position: absolute;
left: -4px;
top: 18px;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--accent);
opacity: 0.85;
}
.lc-thread-mock-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ai-label-color);
margin-bottom: 10px;
}
.lc-thread-mock-pill {
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
letter-spacing: 0.04em;
color: var(--accent);
background: rgba(196, 93, 53, 0.08);
}
.lc-thread-mock-body {
font-family: var(--font-ui);
font-size: 12.5px;
line-height: 1.5;
color: var(--text-secondary);
margin: 0;
}
/* Embed pill — adapted from Threads-design-sketch.html:881 to the
* onboarding's editorial cream + warm-orange palette. The pill carries
* the embed's identity (icon + title + tier badge) plus a thinking-dots
* triplet that signals HudHud is still working the question. */
.lc-thread-mock-embed-pill {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 8px;
margin: 10px 0 0;
border-radius: 6px;
background: var(--bg-canvas);
border: 1px solid var(--hairline);
user-select: none;
}
.lc-ep-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lc-ep-title {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
color: var(--text-primary);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lc-ep-tier {
font-family: var(--font-code);
font-size: 7.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 1.5px 5px;
border-radius: 8px;
white-space: nowrap;
color: var(--status-orange);
background: rgba(255, 149, 0, 0.10);
}
.lc-ep-dots {
display: flex;
gap: 2px;
margin-left: 1px;
}
.lc-ep-dots span {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--status-orange);
opacity: 0.55;
animation: lc-ep-dot-pulse 1.4s ease-in-out infinite;
}
.lc-ep-dots span:nth-child(2) { animation-delay: 0.15s; }
.lc-ep-dots span:nth-child(3) { animation-delay: 0.30s; }
@keyframes lc-ep-dot-pulse {
0%, 100% { opacity: 0.30; }
50% { opacity: 0.85; }
}
/* Mini preview — the two pricing-card variants live on a dot canvas,
* which carries the manipulate-tier (canvas) signal visually. The
* hover overlay reveals an "Open canvas" affordance, mirroring the
* sketch's .mn-embed-preview pattern. */
.lc-thread-mock-embed-preview {
position: relative;
margin-top: 6px;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--hairline);
background: var(--bg-canvas);
cursor: pointer;
transition: border-color 220ms ease, box-shadow 220ms ease;
}
.lc-thread-mock-embed-preview svg {
display: block;
width: 100%;
height: auto;
}
.lc-thread-mock-embed-preview:hover {
border-color: var(--accent);
box-shadow: 0 4px 14px rgba(196, 93, 53, 0.10);
}
.lc-ep-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(29, 29, 31, 0);
transition: background 220ms ease;
pointer-events: none;
}
.lc-thread-mock-embed-preview:hover .lc-ep-overlay {
background: rgba(29, 29, 31, 0.22);
}
.lc-ep-open-label {
font-family: var(--font-ui);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
color: #fff;
background: var(--accent);
padding: 4px 10px;
border-radius: 999px;
opacity: 0;
transform: translateY(2px);
transition: opacity 220ms ease, transform 220ms ease;
}
.lc-thread-mock-embed-preview:hover .lc-ep-open-label {
opacity: 1;
transform: translateY(0);
}
/* ── Stage 3 · Reviewing — proposed-scope checklist (§4A) ─────────────
* Five capabilities. Each item starts with an empty round checkbox; the
* sequence in lifecycle.js soft-hovers each row in turn (a half-beat of
* "reading"), then ticks it. The full settled state shows all five ticked,
* which is what reduced-motion + Playwright's snapshot capture. The list
* uses ui type, not body, so it reads as product UI — the
* vocabulary the actual capability list in deliveryPanel-sections.ts uses. */
.lc-review-mock {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 8px;
padding: 10px 12px 10px;
display: flex;
flex-direction: column;
font-family: var(--font-ui);
text-align: left;
box-shadow: 0 6px 14px rgba(60, 40, 20, 0.05);
}
.lc-review-mock-eyebrow {
font-size: 8.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ai-label-color);
margin-bottom: 8px;
padding-bottom: 6px;
border-bottom: 1px solid var(--hairline);
}
.lc-review-mock-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.lc-review-mock-item {
position: relative;
display: flex;
align-items: center;
gap: 7px;
padding: 2px 5px 2px 3px;
margin: 0 -5px 0 -3px;
border-radius: 3px;
font-size: 10.5px;
color: var(--text-secondary);
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.lc-review-mock-check {
flex-shrink: 0;
width: 11px;
height: 11px;
border: 1.2px solid var(--hairline-strong);
border-radius: 3px;
background: var(--bg-primary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 200ms var(--ease), background 200ms var(--ease);
}
.lc-review-mock-tick {
width: 10px;
height: 10px;
fill: none;
stroke: #FFFFFF;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 14;
stroke-dashoffset: 14;
transition: stroke-dashoffset 280ms var(--ease) 80ms;
}
.lc-review-mock-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Soft cursor presence — the half-beat of hover before each tick lights
* the row faintly so the reader sees HudHud "looking at" the line before
* approving it. Matches the redesign note: witnessed, not mechanical. */
.lc-review-mock-item.is-hovering {
background: var(--accent-soft);
color: var(--text-primary);
}
.lc-review-mock-item.is-ticked {
color: var(--text-primary);
}
.lc-review-mock-item.is-ticked .lc-review-mock-check {
background: var(--accent);
border-color: var(--accent);
}
.lc-review-mock-item.is-ticked .lc-review-mock-tick {
stroke-dashoffset: 0;
}
/* ── Stage 4 · Building — close crop of the working hub pill ─────────
* The pill is THE focal subject. Scaled larger so it dominates the
* square frame; the orange spinner reads as a single signal of work
* in progress. */
.lc-hub-mock {
display: inline-flex;
align-items: center;
gap: 10px;
height: 40px;
padding: 0 16px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid var(--hairline);
border-radius: 999px;
box-shadow:
0 14px 28px rgba(60, 40, 20, 0.10),
0 2px 6px rgba(60, 40, 20, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
font-family: var(--font-ui);
font-size: 13px;
}
.lc-hub-mock .lc-hub-mock-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--status-orange);
box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.20);
animation: pulse-dot 1.5s var(--ease) infinite;
}
.lc-hub-mock .lc-hub-mock-counter {
font-variant-numeric: tabular-nums;
color: var(--text-secondary);
font-size: 12.5px;
}
.lc-hub-mock .lc-hub-mock-sep { color: var(--text-faint); }
.lc-hub-mock .lc-hub-mock-name {
color: var(--text-primary);
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
}
/* Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
/* §4 reduced-motion poster — the four screenshot cards render in their
* settled state. The pulsing hub-mock dot in stage 3 quiets to a static
* orange dot rather than animating. */
.lc-hub-mock .lc-hub-mock-dot { animation: none; }
.lc-doc-mock-caret { animation: none; }
}
/* Stage 5 · Delivered — compact rendered DeliveryPanel showcase.
* Mirrors the real electron-app delivery-panel class vocabulary, scaled
* to fit the lifecycle card while preserving header, delivered card,
* expanded capability/file detail, meta row, and both action paths. */
.lc-dp-mock {
width: 100%;
height: 100%;
max-height: 100%;
background: var(--bg-primary, var(--bg-elevated));
border: 1px solid var(--hairline);
border-radius: 8px;
font-family: var(--font-ui);
text-align: left;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow: 0 10px 22px rgba(60, 40, 20, 0.08);
}
.lc-dp-mock .dp-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 9px 5px;
flex-shrink: 0;
}
.lc-dp-mock .dp-header-title {
font-size: 8.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.lc-dp-mock .dp-close-btn {
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
color: var(--text-muted);
font-size: 11px;
line-height: 1;
}
.lc-dp-mock .dp-card-list {
flex: 1;
min-height: 0;
overflow: hidden;
padding: 0 6px 6px;
display: flex;
flex-direction: column;
gap: 4px;
}
.lc-dp-mock .dp-card {
background: var(--bg-secondary);
border-radius: 6px;
padding: 7px;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 0;
overflow: hidden;
}
.lc-dp-mock .dp-card-header {
display: flex;
align-items: center;
gap: 6px;
}
.lc-dp-mock .dp-card-dot,
.lc-dp-mock .dp-dot {
border-radius: 50%;
flex-shrink: 0;
}
.lc-dp-mock .dp-card-dot {
width: 6px;
height: 6px;
}
.lc-dp-mock .dp-card-dot--delivered {
background: var(--status-orange);
}
.lc-dp-mock .dp-card-name {
font-size: 9.5px;
font-weight: 500;
color: var(--text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
.lc-dp-mock .dp-card-summary {
font-size: 8.5px;
color: var(--text-muted);
padding-left: 12px;
}
.lc-dp-mock .dp-card-detail {
padding-left: 12px;
font-size: 8.5px;
color: var(--text-secondary);
min-height: 0;
overflow: hidden;
}
.lc-dp-mock .dp-cap-list,
.lc-dp-mock .dp-file-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1px;
}
.lc-dp-mock .dp-cap-item {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.lc-dp-mock .dp-cap-item span:last-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lc-dp-mock .dp-cap-list > .dp-file-list {
margin: 0 0 2px 10px;
}
.lc-dp-mock .dp-dot {
width: 4.5px;
height: 4.5px;
}
.lc-dp-mock .dp-dot--complete {
background: var(--success, var(--status-green));
}
.lc-dp-mock .dp-file-list li {
font-family: var(--font-code);
font-size: 7.5px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.lc-dp-mock .dp-detail-meta {
display: flex;
gap: 7px;
margin-top: 2px;
}
.lc-dp-mock .dp-detail-label {
margin-top: 0;
font-size: 7.5px;
font-weight: 500;
color: var(--text-muted);
white-space: nowrap;
}
.lc-dp-mock .dp-card-actions {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: auto;
}
.lc-dp-local-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
}
.lc-dp-actions-or {
align-self: center;
font-size: 7.5px;
color: var(--text-faint);
letter-spacing: 0.04em;
font-style: italic;
}
.lc-dp-mock .dp-action-btn,
.lc-dp-mock .dp-push-btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 4px 5px;
border-radius: 4px;
font-size: 8.5px;
font-weight: 500;
margin: 0;
min-width: 0;
white-space: nowrap;
}
.lc-dp-mock .dp-action-btn--undo {
background: var(--bg-tertiary);
color: var(--text-secondary);
}
.lc-dp-mock .dp-action-btn--done,
.lc-dp-mock .dp-push-btn {
background: var(--accent);
color: #fff;
}
.lc-dp-mock .dp-push-btn {
width: 100%;
}
/* §4 objective handoff — editorial five-stage rail. The existing lc-* rules
* above are left in place for old generated artifacts; this shipped section
* uses the vh-* vocabulary from the design handoff. */
.lifecycle.vh-section {
display: block;
width: min(100%, 1280px);
margin: 0 auto;
padding: clamp(40px, 6vh, 80px) clamp(20px, 4vw, 56px) clamp(80px, 12vh, 140px);
background: transparent;
background-image: none;
}
.vh-header {
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
gap: 24px;
padding-bottom: clamp(28px, 4vh, 44px);
margin-bottom: clamp(40px, 6vh, 72px);
}
.vh-eyebrow {
font-family: var(--font-ui);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 22px;
}
.vh-title {
margin: 0;
max-width: 14ch;
font-family: var(--font-body);
font-size: clamp(44px, 5.4vw, 72px);
font-weight: 400;
line-height: 1.02;
letter-spacing: -0.028em;
color: var(--text-primary);
}
.vh-title em {
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.vh-meta {
max-width: 360px;
padding-top: 8px;
font-family: var(--font-body);
font-size: clamp(16px, 1.35vw, 18px);
line-height: 1.55;
letter-spacing: 0;
text-align: left;
color: var(--text-secondary);
text-wrap: pretty;
}
.lifecycle .vh-grid {
position: relative;
width: 100%;
margin: 0;
/* Reserve room above the cards for the dotted return ribbon to swoop
* down without colliding with content from the section above. */
padding-top: 4px;
padding-bottom: clamp(60px, 7vh, 84px);
display: grid;
grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr;
column-gap: clamp(10px, 1.4vw, 18px);
row-gap: 0;
align-items: stretch;
}
.lifecycle .vh-grid::before {
display: none;
}
/* Bending-arc layer ──────────────────────────────────────────────────
* Sits behind the cards (z-index 0; cards default to z-index 1). The
* outer .vh-arc-layer hosts two independent SVG planes — a short top
* layer for the forward arc that hits the node row, and a full-height
* layer for the dotted return ribbon that swoops down to the ghost
* terminus. Splitting them lets each SVG's preserveAspectRatio="none"
* stretch X without distorting the path's y-coordinates beyond the
* layer they live in. */
.vh-arc-layer {
display: none;
}
/* Forward arc layer — short, anchored to the node row.
* - The 28px vh-node sits at the top of each .vh-stage in normal
* flow (no transform), so its top edge is at grid-padding-box
* y=4 (the grid has padding-top: 4) and its centre is at y=18.
* Circle extent: y=4..32.
* - This layer's top: 0 + height: 60 puts y=0 at the grid top and
* y=18 right through the node circles' centres. viewBox
* 0 0 1000 60 gives a 1:1 Y mapping (no Y stretch under
* preserveAspectRatio="none"), so path coordinates land exactly
* where written.
* - The path is drawn with endpoint y=28 (lower edge of the
* endpoint nodes' circles) and crest y=10 (upper portion of the
* centre node's circle), so every node circle is visibly
* threaded by the line, not just floated above or below it. */
.vh-arc-svg--forward {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 60px;
width: 100%;
overflow: visible;
}
/* Return ribbon layer — spans the full grid height so the dotted
* swoop has room to curve down beneath the cards and land at the
* ghost terminus on the bottom-left. ViewBox 0 0 1000 600 is taller
* than the actual layer in pixels at most viewports — the Y stretch
* is fine because the ribbon's job is to gesture, not to land on
* specific node coordinates the way the forward arc does. */
.vh-arc-svg--return {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.vh-arc-forward {
fill: none;
stroke: color-mix(in srgb, var(--accent) 40%, transparent);
stroke-width: 1;
stroke-linecap: round;
}
.vh-arc-return {
fill: none;
stroke: color-mix(in srgb, var(--accent) 32%, transparent);
stroke-width: 1;
stroke-linecap: round;
/* Dotted because this segment is implied — the next document
* doesn't exist yet. */
stroke-dasharray: 1.6 4;
}
/* Ghost terminus — "01' · next doc". Just text, no pill chrome. The
* proposal's note: "01' terminus can be a small faded ghost of stage
* 01's card or just a label — whichever feels less literal." A
* dashed pill would echo the dotted return ribbon redundantly; plain
* text reads as a destination label, which is what it is. */
.vh-arc-terminus {
position: absolute;
left: clamp(0px, 0.6vw, 8px);
bottom: clamp(8px, 1.4vh, 18px);
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
pointer-events: none;
}
.vh-arc-terminus-num {
font-family: var(--font-body);
font-size: 13px;
font-weight: 500;
letter-spacing: -0.005em;
color: color-mix(in srgb, var(--accent) 60%, var(--text-secondary));
opacity: 0.78;
}
.vh-arc-terminus-prime {
margin-left: 0;
font-weight: 400;
font-style: italic;
color: color-mix(in srgb, var(--accent) 50%, var(--text-secondary));
}
.vh-arc-terminus-label {
font-family: var(--font-ui);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-muted);
opacity: 0.7;
}
/* Quiet entry: arc fades in alongside the stage cards. lifecycle.js
* sets .is-arc-revealed on the grid after the staggered stage reveal
* completes, so the arc appears once the row has settled rather than
* popping in mid-stagger. */
.vh-arc-svg, .vh-arc-terminus {
opacity: 0;
transition: opacity 600ms var(--ease);
}
.lifecycle-grid.is-arc-revealed .vh-arc-svg,
.lifecycle-grid.is-arc-revealed .vh-arc-terminus {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.vh-arc-svg, .vh-arc-terminus { opacity: 1; transition: none; }
}
.vh-stage {
position: relative;
display: flex;
flex-direction: column;
width: auto;
aspect-ratio: auto;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
overflow: visible;
opacity: 1;
transform: none;
transition: none;
z-index: 1;
}
.vh-stage::before { content: none; }
.vh-node {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-canvas);
border: 1px solid var(--hairline-strong);
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 auto;
position: relative;
z-index: 2;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
}
.vh-stage--approve .vh-node {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 0 5px rgba(196, 93, 53, 0.10);
}
.vh-card {
position: relative;
min-height: 360px;
margin-top: 22px;
padding: clamp(16px, 1.6vw, 22px);
display: flex;
flex-direction: column;
overflow: hidden;
background: #FBF6EC;
border: 1px solid rgba(80, 50, 20, 0.06);
border-radius: 14px;
box-shadow:
0 10px 24px rgba(60, 40, 20, 0.04),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vh-stage--approve .vh-card {
overflow: visible;
box-shadow:
0 22px 48px rgba(196, 93, 53, 0.15),
0 8px 20px rgba(196, 93, 53, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.vh-rail {
margin-top: 18px;
padding: 0 4px;
}
.vh-rail-eyebrow {
margin-bottom: 10px;
font-family: var(--font-ui);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.vh-rail-title {
margin: 0 0 8px;
font-family: var(--font-body);
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.012em;
color: var(--text-primary);
}
.vh-rail-body {
margin: 0;
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--text-secondary);
}
.vh-doc {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
}
.vh-doc-meta {
display: inline-flex;
align-self: flex-start;
align-items: center;
max-width: 100%;
padding: 4px 10px;
border-radius: 999px;
background: rgba(80, 50, 20, 0.08);
font-family: var(--font-ui);
font-size: 10px;
letter-spacing: 0.02em;
color: var(--text-secondary);
}
.vh-doc-h1 {
margin-top: 6px;
font-family: var(--font-body);
font-size: 30px;
font-style: italic;
font-weight: 400;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text-primary);
}
.vh-doc-h1::before {
content: '# ';
margin-right: 2px;
font-style: normal;
color: var(--text-faint);
}
.vh-doc-lines {
display: flex;
flex-direction: column;
gap: 7px;
margin-top: 4px;
}
.vh-doc-line {
height: 4px;
border-radius: 2px;
background: rgba(29, 29, 31, 0.08);
}
.vh-doc-line.full { width: 100%; }
.vh-doc-line.med { width: 78%; }
.vh-doc-line.short { width: 52%; }
.vh-doc-foot {
margin-top: auto;
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--text-faint);
}
.vh-ask {
display: flex;
flex-direction: column;
height: 100%;
}
.vh-ask-lines {
display: flex;
flex-direction: column;
gap: 7px;
align-items: flex-end;
}
.vh-ask-lines .vh-doc-line { background: rgba(29, 29, 31, 0.10); }
.vh-ask-lines .vh-doc-line:nth-child(1) { width: 70%; }
.vh-ask-lines .vh-doc-line:nth-child(2) {
width: 50%;
position: relative;
}
.vh-ask-lines .vh-doc-line:nth-child(2)::after {
content: '';
position: absolute;
right: -10px;
top: -2px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ai-dot);
}
.vh-ask-curve {
width: 100%;
height: 56px;
margin: 24px 0 0;
color: var(--ai-connector);
opacity: 0.7;
}
.vh-ask-thread {
position: relative;
margin-top: auto;
padding: 12px 14px 14px 18px;
border-radius: 10px;
background: rgba(196, 93, 53, 0.07);
}
.vh-ask-thread::before {
content: '';
position: absolute;
left: 8px;
top: 16px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ai-dot);
}
.vh-ask-label {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
line-height: 1.4;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ai-label-color);
}
.vh-ask-pill {
padding: 1px 6px;
border-radius: 3px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--accent);
}
.vh-ask-q {
margin: 0;
font-family: var(--font-ui);
font-size: 12.5px;
line-height: 1.5;
color: var(--text-primary);
}
.vh-approve {
display: flex;
flex-direction: column;
gap: 14px;
height: 100%;
}
.vh-approve-eyebrow {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ai-label-color);
}
.vh-approve-eyebrow .dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--ai-dot);
}
.vh-approve-eyebrow .em { color: var(--accent); }
.vh-approve-headline {
margin: 0;
font-family: var(--font-body);
font-size: 19px;
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.012em;
color: var(--text-primary);
}
.vh-approve-headline em {
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.vh-approve-list {
list-style: none;
margin: 6px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.vh-approve-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 6px 4px;
background: transparent;
border: 0;
border-radius: 0;
}
.vh-approve-item.is-hovering,
.vh-approve-item.is-ticked {
background: transparent;
}
.vh-approve-item > div {
min-width: 0;
text-align: left;
}
.vh-approve-item .name {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.005em;
color: var(--text-primary);
}
.vh-approve-item .sub {
margin-top: 2px;
font-family: var(--font-ui);
font-size: 10px;
line-height: 1.35;
letter-spacing: 0.02em;
color: var(--text-secondary);
}
.vh-approve-check {
width: 26px;
height: 26px;
border-radius: 999px;
background: var(--accent);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.vh-approve-check svg {
width: 12px;
height: 12px;
fill: none;
stroke: #fff;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.vh-build {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.vh-build-bignum {
font-family: var(--font-body);
font-size: 56px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
color: var(--text-primary);
}
.vh-build-bignum em {
margin: 0 4px;
vertical-align: 4px;
font-size: 22px;
font-style: italic;
font-weight: 400;
color: var(--text-secondary);
}
.vh-build-status {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-ui);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
}
.vh-build-status .dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--status-orange);
animation: vh-pulse 1.5s var(--ease) infinite;
}
@keyframes vh-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.vh-build-headline {
margin: 0;
font-family: var(--font-body);
font-size: 19px;
font-weight: 700;
line-height: 1.22;
letter-spacing: -0.012em;
color: var(--text-primary);
}
.vh-build-headline em {
font-style: italic;
font-weight: 400;
color: var(--accent);
}
.vh-build-list {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
font-family: var(--font-ui);
font-size: 11.5px;
}
.vh-build-list li {
display: grid;
grid-template-columns: 22px 8px 1fr;
align-items: center;
color: var(--text-muted);
}
.vh-build-list .num {
font-variant-numeric: tabular-nums;
font-size: 10px;
letter-spacing: 0.05em;
color: var(--text-faint);
}
.vh-build-list .marker {
width: 4px;
height: 4px;
margin-left: 1px;
border-radius: 50%;
background: var(--text-faint);
justify-self: start;
}
.vh-build-list li.active {
color: var(--text-primary);
font-weight: 600;
}
.vh-build-list li.active .num { color: var(--accent); }
.vh-build-list li.active .marker { background: var(--accent); }
.vh-build-progress {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.vh-progress-meta {
display: flex;
justify-content: space-between;
font-family: var(--font-code);
font-size: 10px;
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
.vh-deliver {
display: flex;
flex-direction: column;
gap: 12px;
height: 100%;
}
.vh-deliver-card {
padding: 10px 12px;
background: var(--bg-elevated);
border: 1px solid var(--hairline);
border-radius: 8px;
}
.vh-deliver-head {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 4px;
font-family: var(--font-ui);
font-size: 11.5px;
font-weight: 600;
color: var(--text-primary);
}
.vh-deliver-head .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--status-green);
}
.vh-deliver-meta {
font-family: var(--font-ui);
font-size: 10.5px;
line-height: 1.45;
color: var(--text-secondary);
}
.vh-deliver-meta .row { display: block; }
.vh-deliver-twins {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 2px;
}
.vh-twin {
min-height: 220px;
padding: 14px 14px 16px;
border-radius: 12px;
background: rgba(196, 93, 53, 0.07);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.vh-twin-label {
font-family: var(--font-ui);
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-secondary);
}
.vh-twin-action {
font-family: var(--font-body);
font-size: 22px;
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--text-primary);
}
.vh-twin-action .em {
font-style: italic;
color: var(--accent);
}
.vh-twin-action .arrow {
display: inline-block;
margin-left: 2px;
vertical-align: 1px;
font-size: 18px;
color: var(--accent);
}
@media (max-width: 1080px) {
.lifecycle .vh-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 18px;
}
.lifecycle .vh-grid::before { display: none; }
}
@media (max-width: 700px) {
.lifecycle.vh-section { padding-inline: 20px; }
.vh-header {
grid-template-columns: 1fr;
gap: 18px;
}
.vh-meta {
text-align: left;
padding-top: 0;
}
.lifecycle .vh-grid {
grid-template-columns: 1fr;
gap: 30px;
}
.vh-card { min-height: 320px; }
.vh-twin { min-height: 160px; }
}
@media (prefers-reduced-motion: reduce) {
.vh-build-status .dot { animation: none; }
}