/* =========================================================================== Denote landing — hero demo reel A scripted, looping product demo recreated from the app's real components. Self-contained: its own copy of the app palette (light + dark), keyed off the .dark class that landing.css already sets on . =========================================================================== */ /* ---------- App palette (subset needed by the demo) ---------- */ :root { --ad-card: 0 0% 100%; --ad-bg: 222 20% 93%; --ad-surface: 220 14% 96%; --ad-border: 220 16% 80%; --ad-muted: 220 16% 90%; --ad-muted-fg: 215 14% 46%; --ad-schematic: 220 14% 84%; --ad-wire: 220 16% 95%; --ad-surface-raised: 220 18% 98%; --ad-surface-mid: 220 17% 97.5%; --ad-blue: 217 91% 50%; --ad-violet: 263 70% 58%; --ad-emerald: 160 84% 30%; --ad-orange: 24 95% 45%; --ad-warning: 38 92% 36%; --ad-success: 160 84% 30%; --ad-red: 0 72% 45%; --ad-fg: 222 30% 10%; --ad-gray-1: 222 24% 13%; --ad-gray-2: 215 18% 20%; --ad-gray-3: 215 14% 25%; --ad-gray-4: 215 14% 38%; --ad-gray-5: 215 12% 46%; --ad-gray-6: 215 10% 56%; } .dark { --ad-card: 222 14% 12%; --ad-bg: 222 16% 4%; --ad-surface: 222 14% 7%; --ad-border: 222 12% 18%; --ad-muted: 222 12% 16%; --ad-muted-fg: 215 20% 65%; --ad-schematic: 222 12% 22%; --ad-wire: 222 13% 8%; --ad-surface-raised: 222 13% 10%; --ad-surface-mid: 222 13% 9%; --ad-blue: 217 91% 60%; --ad-violet: 263 70% 68%; --ad-emerald: 160 84% 45%; --ad-orange: 24 94% 58%; --ad-warning: 40 85% 55%; --ad-success: 160 84% 45%; --ad-red: 0 72% 62%; --ad-fg: 210 20% 98%; --ad-gray-1: 214 32% 91%; --ad-gray-2: 214 28% 84%; --ad-gray-3: 215 20% 65%; --ad-gray-4: 215 16% 55%; --ad-gray-5: 215 19% 45%; --ad-gray-6: 215 25% 35%; } /* ---------- Stage scaling (no outer container; elements float) ---------- */ .demo { position: relative; width: 100%; aspect-ratio: 600 / 500; font-family: var(--font-sans); /* purely decorative, auto-playing — never intercept the real cursor */ pointer-events: none; } .demo-stage { position: absolute; inset: 0 auto auto 0; width: 600px; height: 500px; transform-origin: top left; transform: scale(var(--demo-scale, 1)); } .demo-screen { position: absolute; inset: 0; transition: opacity 0.4s ease; } /* ---------- Act header (title left · full-width divider · right control) ---------- */ .demo-header { position: absolute; top: 0; left: 0; right: 0; z-index: 25; height: 36px; display: flex; align-items: stretch; justify-content: space-between; padding: 0 2px; border-bottom: 1px solid hsl(var(--ad-border)); } .demo-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: hsl(var(--ad-gray-4)); } .demo-title svg { width: 15px; height: 15px; color: hsl(var(--ad-blue)); } .demo-header__right { display: inline-flex; align-items: center; } /* Architecture — text view tabs; active tab underlines the header divider */ .demo-tabs { align-self: stretch; display: flex; gap: 20px; } .demo-tab { appearance: none; border: 0; background: transparent; padding: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-muted-fg)); display: flex; align-items: center; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.18s ease, border-color 0.18s ease; } .demo-tab.is-active { color: hsl(var(--ad-fg)); border-bottom-color: hsl(var(--ad-blue)); } /* Ontology — + Add text button (no container) */ .demo-add { appearance: none; display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; padding: 0; font: inherit; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-muted-fg)); } .demo-add svg { width: 15px; height: 15px; } /* Screens — platform / surface toggle (mirrors HeaderSurfaceSwitcher) */ .demo-platform { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-muted-fg)); } .demo-platform .pf-ico { width: 15px; height: 15px; } .demo-platform .pf-chev { width: 13px; height: 13px; opacity: 0.6; } /* ---------- Canvas ---------- */ .demo-canvas { position: absolute; inset: 0; } .demo-canvas__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } /* ---------- Architecture node (mirrors ArchNode) ---------- */ .an { position: absolute; width: 140px; border: 1px solid hsl(var(--ad-border)); border-radius: 10px; background: hsl(var(--ad-card)); padding: 8px 9px 9px; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); transition: opacity 0.3s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .dark .an { box-shadow: none; } .an__head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 7px; } .an__name { font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-fg)); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .an__badge { flex-shrink: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.01em; padding: 1px 6px; border-radius: 5px; } .an__badge--l1 { color: hsl(var(--ad-blue)); background: hsl(var(--ad-blue) / 0.15); } .an__badge--l2 { color: hsl(var(--ad-violet)); background: hsl(var(--ad-violet) / 0.15); } .an__badge--l3 { color: hsl(var(--ad-muted-fg)); background: hsl(var(--ad-muted)); } .an__mini { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 500; color: hsl(var(--ad-blue)); background: hsl(var(--ad-blue) / 0.1); padding: 2px 6px; border-radius: 5px; } .an__mini svg { width: 11px; height: 11px; } /* Wireframe schematic: a framed panel holding zone blocks (mirrors PatternSchematic) */ .an__wire { display: flex; flex-direction: column; gap: 3px; height: 48px; padding: 6px; background: hsl(var(--ad-wire)); border: 1px solid hsl(var(--ad-border) / 0.7); border-radius: 6px; } .an__wire .z { background: hsl(var(--ad-schematic)); border-radius: 2px; } .an__wire .z-bar { height: 6px; flex: none; } .an__wire .z-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 3px; flex: 1; } .an__wire .z-row { display: flex; gap: 3px; flex: 1; } /* Node states */ .an--thread { border-color: hsl(var(--ad-blue)); box-shadow: 0 0 0 1px hsl(var(--ad-blue) / 0.25); } .demo-canvas.is-dim .an:not(.an--thread) { opacity: 0.3; } /* Reveal-in (JS adds .is-in per node, staggered) */ .demo .an { opacity: 0; transform: translateY(8px) scale(0.96); } .demo .an.is-in { opacity: 1; transform: none; } /* ---------- Connectors ---------- */ .cx { fill: none; stroke: hsl(var(--ad-muted-fg) / 0.5); stroke-width: 1; } .cx-dot { fill: hsl(var(--ad-muted-fg) / 0.5); } .cx-dash { fill: none; stroke: hsl(var(--ad-muted-fg) / 0.5); stroke-width: 1; stroke-dasharray: 4 4; } .cx-launch { fill: none; stroke: hsl(var(--ad-muted-fg) / 0.5); stroke-width: 1.25; stroke-dasharray: 2 3; } .cx-label { font-size: 10px; font-weight: 500; fill: hsl(var(--ad-gray-5)); } .cx-label-bg { fill: hsl(var(--ad-surface-raised)); } /* Navigation typed edges */ .nav-edge { fill: none; stroke-width: 1.6; opacity: 0.9; } .nav-edge--global { stroke: hsl(var(--ad-emerald)); } .nav-edge--local { stroke: hsl(var(--ad-blue)); } .nav-edge--cross { stroke: hsl(var(--ad-orange)); stroke-dasharray: 5 4; } /* Arrowhead markers (filled, themed per edge type) */ .ah path { stroke: none; } .ah--global path { fill: hsl(var(--ad-emerald)); } .ah--local path { fill: hsl(var(--ad-blue)); } .ah--cross path { fill: hsl(var(--ad-orange)); } /* Task thread */ .task-thread { fill: none; stroke: hsl(var(--ad-blue)); stroke-width: 2; opacity: 0; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.3s ease; } .task-thread.is-shown { opacity: 0.9; } /* Connectors animate in on cue (with their node): solid lines draw, the rest fade */ .cx-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); } .cx-draw.drawn { animation: cx-draw 0.5s ease forwards; } @keyframes cx-draw { to { stroke-dashoffset: 0; } } .cx-fade { opacity: 0; transition: opacity 0.4s ease; } .cx-fade.drawn { opacity: 1; } /* View-group visibility */ .view-group { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .view-group.is-shown { opacity: 1; } /* ---------- Tasks picker (floating, mirrors TaskThreadPanel) ---------- */ .task-picker { position: absolute; width: 246px; background: hsl(var(--ad-card)); border: 1px solid hsl(var(--ad-border)); border-radius: 12px; padding: 16px 18px; box-shadow: 0 12px 32px -14px rgb(16 24 40 / 0.3); opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; z-index: 20; } .dark .task-picker { box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.7); } .task-picker.is-shown { opacity: 1; transform: none; } .task-picker__title { font-size: 16px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin-bottom: 13px; } .task-picker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; } .task-picker li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: hsl(var(--ad-gray-4)); transition: color 0.18s ease; } .task-picker li .dot { width: 11px; height: 11px; border-radius: 50%; border: 2px solid hsl(var(--ad-gray-5)); flex: none; transition: background-color 0.18s ease, border-color 0.18s ease; } .task-picker li.is-sel { color: hsl(var(--ad-blue)); } .task-picker li.is-sel .dot { border-color: hsl(var(--ad-blue)); background: hsl(var(--ad-blue)); box-shadow: inset 0 0 0 2px hsl(var(--ad-card)); } /* ---------- Edge-types legend (Navigation view) ---------- */ .edge-legend { position: absolute; width: 140px; background: hsl(var(--ad-card)); border: 1px solid hsl(var(--ad-border)); border-radius: 12px; padding: 13px 15px; box-shadow: 0 12px 32px -14px rgb(16 24 40 / 0.3); opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; z-index: 20; } .dark .edge-legend { box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.7); } .edge-legend.is-shown { opacity: 1; transform: none; } .edge-legend__title { font-size: 14px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin-bottom: 11px; } .edge-legend__row { display: flex; align-items: center; gap: 9px; margin-top: 9px; } .edge-legend__row span { font-size: 12px; color: hsl(var(--ad-gray-4)); } .el-arrow { width: 30px; height: 12px; flex: none; } .el-arrow line, .el-arrow path { fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .el-arrow--global line, .el-arrow--global path { stroke: hsl(var(--ad-emerald)); } .el-arrow--local line, .el-arrow--local path { stroke: hsl(var(--ad-blue)); } .el-arrow--cross line, .el-arrow--cross path { stroke: hsl(var(--ad-orange)); } /* ---------- Ontology cards (Act 2) ---------- */ .oc { position: absolute; display: flex; border: 1px solid hsl(var(--ad-border)); border-radius: 12px; background: hsl(var(--ad-card)); overflow: hidden; box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); } .dark .oc { box-shadow: none; } .oc__well { width: 60px; flex: none; display: grid; place-items: center; background: hsl(var(--ad-blue) / 0.08); } .oc__art { width: 40px; height: 40px; opacity: 0.62; } .oc__art--dark { display: none; } .dark .oc__art--light { display: none; } .dark .oc__art--dark { display: block; } .oc__body { flex: 1; min-width: 0; padding: 9px 13px; display: flex; flex-direction: column; justify-content: center; } .oc__name { font-size: 14px; font-weight: 500; color: hsl(var(--ad-gray-1)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc__desc { font-size: 11.5px; color: hsl(var(--ad-gray-3)); line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc__meta { display: flex; gap: 11px; margin-top: 6px; } .oc__meta span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: hsl(var(--ad-gray-5)); } .oc__meta svg { width: 11px; height: 11px; } .oc--sel { border-color: hsl(var(--ad-blue)); box-shadow: 0 0 0 1px hsl(var(--ad-blue) / 0.25); } .demo .oc { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease; } .demo .oc.is-in { opacity: 1; transform: none; } .demo .oc.is-out { opacity: 0; transform: translateY(-8px); } /* ---------- Ontology: jobs + section labels (Act 2) ---------- */ .ont-label { position: absolute; font-size: 13px; font-weight: 600; color: hsl(var(--ad-gray-1)); } .job-row { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 36px; padding: 0 11px; border: 1px solid hsl(var(--ad-border)); border-radius: 8px; background: hsl(var(--ad-card)); box-sizing: border-box; } .job-row__t { font-size: 11.5px; color: hsl(var(--ad-gray-2)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .job-pri { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: hsl(var(--ad-gray-5)); border: 1px solid hsl(var(--ad-border)); border-radius: 5px; padding: 2px 5px 2px 7px; } .job-pri svg { width: 10px; height: 10px; } .demo .ont-rise { opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.35s ease; } .demo .ont-rise.is-in { opacity: 1; transform: none; } /* Dim the rest when an entity's detail popover opens (focus the selection) */ .demo-canvas.is-dim .oc:not(.oc--sel), .demo-canvas.is-dim .ont-label, .demo-canvas.is-dim .job-row { opacity: 0.32; } /* ---------- Screens grid + compose (Act 3) ---------- */ .pg-card { position: absolute; width: 170px; } .pg-wire { height: 134px; padding: 8px; background: hsl(var(--ad-wire)); border: 1px solid hsl(var(--ad-border) / 0.7); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; } .pg-wire .z { background: hsl(var(--ad-schematic)); border-radius: 3px; } .pg-wire .z-bar { height: 9px; flex: none; } .pg-wire .z-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 4px; flex: 1; } .pg-wire .z-row { display: flex; gap: 4px; flex: 1; } .pg-name { font-size: 13px; font-weight: 500; color: hsl(var(--ad-gray-1)); margin-top: 9px; } .pg-card.is-sel .pg-wire { border-color: hsl(var(--ad-blue)); box-shadow: 0 0 0 1px hsl(var(--ad-blue) / 0.25); } .demo .pg-card { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease; } .demo .pg-card.is-in { opacity: 1; transform: none; } .demo .pg-card.is-out { opacity: 0; transform: translateY(-8px); } /* Content-type chip (Card Grid label in the page render) */ .cchip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid hsl(var(--ad-border)); border-radius: 7px; background: hsl(var(--ad-surface-mid)); box-sizing: border-box; } .cchip svg { width: 14px; height: 14px; color: hsl(var(--ad-gray-5)); flex: none; } .cchip span { font-size: 12px; font-weight: 500; color: hsl(var(--ad-gray-1)); } /* Home grid container (crossfades out on dive-in) */ .sc-grid { position: absolute; inset: 0; transition: opacity 0.35s ease; } .sc-grid.is-out { opacity: 0; } /* Page detail view (the dive-in): title · full-width render · purpose · template */ .pv { position: absolute; left: 24px; right: 24px; top: 48px; opacity: 0; transition: opacity 0.4s ease; } .pv.is-shown { opacity: 1; } .pv-title { display: flex; align-items: center; gap: 10px; } .pv-name { font-size: 20px; font-weight: 700; color: hsl(var(--ad-gray-1)); } .pv-render { margin-top: 16px; border: 1px solid hsl(var(--ad-border)); border-radius: 12px; background: hsl(var(--ad-surface-raised)); padding: 13px; } .pv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; } .pv-cell { height: 82px; border-radius: 8px; background: hsl(var(--ad-schematic)); padding: 8px; box-sizing: border-box; transition: opacity 0.25s ease, box-shadow 0.2s ease; } /* .pv-cell.is-sel is a marker only (keeps the dim logic from fading the picked cell); the blue selection ring is drawn on the chip via .cchip.is-sel. */ .pv-h { font-size: 14px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin-top: 20px; } .pv-p { font-size: 12px; color: hsl(var(--ad-gray-3)); line-height: 1.5; margin-top: 5px; } .pv-tpl { display: flex; gap: 14px; margin-top: 11px; } .pv-field { flex: 1; } .pv-label { display: block; font-size: 11px; font-weight: 500; color: hsl(var(--ad-gray-4)); margin-bottom: 5px; } .pv-select { display: flex; align-items: center; justify-content: space-between; border: 1px solid hsl(var(--ad-border)); border-radius: 8px; background: hsl(var(--ad-card)); padding: 8px 11px; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-gray-1)); } .pv-chev { width: 14px; height: 14px; color: hsl(var(--ad-gray-5)); opacity: 0.7; flex: none; } .demo .pv-rise { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.4s ease; } .demo .pv-rise.is-in { opacity: 1; transform: none; } /* Dim the rest when a content chip's detail popover opens (focus the selection) */ .pv.is-dim .pv-cell:not(.is-sel), .pv.is-dim .pv-title, .pv.is-dim .pv-h, .pv.is-dim .pv-p, .pv.is-dim .pv-tpl { opacity: 0.32; } .cpop { position: absolute; width: 232px; background: hsl(var(--ad-card)); border: 1px solid hsl(var(--ad-border)); border-radius: 12px; box-shadow: 0 14px 36px -14px rgb(16 24 40 / 0.3); padding: 14px 16px; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 0.3s ease, transform 0.3s ease; } .dark .cpop { box-shadow: 0 18px 44px -16px rgb(0 0 0 / 0.7); } .cpop.is-shown { opacity: 1; transform: none; } .cpop__title { font-size: 14px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; } .cpop__title svg { width: 14px; height: 14px; color: hsl(var(--ad-blue)); } .cpop__h { font-size: 11px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin-top: 11px; } .cpop__p { font-size: 11.5px; color: hsl(var(--ad-gray-3)); line-height: 1.4; margin-top: 3px; } /* ---------- Fake cursor ---------- */ .demo-cursor { position: absolute; top: 0; left: 0; z-index: 60; width: 22px; height: 22px; pointer-events: none; transform: translate(var(--cx, 300px), var(--cy, 250px)); transition: transform 0.52s cubic-bezier(0.3, 0.1, 0.1, 1); will-change: transform; } .demo-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); } .demo-cursor.is-down { transform: translate(var(--cx, 300px), var(--cy, 250px)) scale(0.82); transition: transform 0.12s ease; } .demo-ring { position: absolute; left: var(--rx, 0px); top: var(--ry, 0px); z-index: 59; width: 18px; height: 18px; border-radius: 50%; border: 2px solid hsl(var(--ad-blue)); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.3); } .demo-ring.go { animation: demo-ring 0.5s ease-out; } @keyframes demo-ring { 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } /* ---------- Reduced motion: hold a static frame ---------- */ @media (prefers-reduced-motion: reduce) { .demo .an { opacity: 1; transform: none; transition: none; } .demo-cursor, .demo-ring { display: none; } .cx-draw { stroke-dashoffset: 0; animation: none; } .cx-fade { opacity: 1; } .view-group, .task-thread { transition: none; } } /* =========================================================================== Knowledge view demo (Intelligence section) — recreates IntelligenceBrowser =========================================================================== */ .kdemo { position: relative; width: 100%; aspect-ratio: 760 / 500; font-family: var(--font-sans); pointer-events: none; } .kdemo-stage { position: absolute; inset: 0 auto auto 0; width: 760px; height: 500px; transform-origin: top left; transform: scale(var(--kdemo-scale, 1)); } .kdemo-screen { position: absolute; inset: 0; } /* App window card */ .kv { position: absolute; inset: 0; display: flex; border: 1px solid hsl(var(--ad-border)); border-radius: 12px; overflow: hidden; background: hsl(220 16% 96.5%); box-shadow: 0 1px 2px rgb(16 24 40 / 0.04); } .dark .kv { background: hsl(var(--ad-card)); box-shadow: none; } /* Sidebar */ .kv-side { width: 208px; flex: none; border-right: 1px solid hsl(var(--ad-border)); display: flex; flex-direction: column; } .kv-search { display: flex; align-items: center; gap: 7px; margin: 11px; padding: 7px 9px; border: 1px solid hsl(var(--ad-border)); border-radius: 8px; font-size: 12.5px; color: hsl(var(--ad-gray-5)); } .kv-sico { width: 14px; height: 14px; } .kv-tree { flex: 1; padding: 2px 8px 8px; overflow: hidden; } /* Section (Knowledge / Agents / Skills) */ .kv-sec__head { display: flex; align-items: center; gap: 7px; padding: 5px 6px; font-size: 13px; font-weight: 600; color: hsl(var(--ad-gray-1)); } .kv-sec__head .kv-chev { width: 12px; height: 12px; color: hsl(var(--ad-gray-5)); transition: transform 0.2s ease; } .kv-sec.is-open > .kv-sec__head .kv-chev { transform: rotate(90deg); } .kv-ico { width: 15px; height: 15px; color: hsl(var(--ad-gray-3)); } .kv-sec__body { margin-left: 15px; display: none; } .kv-sec.is-open > .kv-sec__body { display: block; } /* Category row */ .kv-cat__head { display: flex; align-items: center; gap: 6px; padding: 4px 6px; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-muted-fg)); transition: color 0.15s ease; } .kv-cat__head .kv-chev { width: 10px; height: 10px; transition: transform 0.2s ease; } .kv-cat.is-open > .kv-cat__head .kv-chev { transform: rotate(90deg); } .kv-cat.is-open > .kv-cat__head { color: hsl(var(--ad-gray-1)); } .kv-count { margin-left: auto; font-size: 10px; color: hsl(var(--ad-gray-5)); border: 1px solid hsl(var(--ad-border)); border-radius: 999px; min-width: 17px; text-align: center; padding: 0 4px; line-height: 15px; } .kv-cat__files { margin-left: 15px; display: none; flex-direction: column; } .kv-cat.is-open > .kv-cat__files { display: flex; } .kv-file { appearance: none; border: 0; background: transparent; text-align: left; padding: 5px 8px; border-radius: 6px; font: inherit; font-size: 12.5px; color: hsl(var(--ad-gray-3)); } .kv-file.is-sel { background: hsl(var(--ad-blue) / 0.12); color: hsl(var(--ad-blue)); } /* Main pane */ .kv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .kv-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid hsl(var(--ad-border)); } .kv-tab { appearance: none; border: 0; background: transparent; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-gray-4)); transition: background-color 0.15s ease, color 0.15s ease; } .kv-tab.is-active { background: hsl(var(--ad-muted)); color: hsl(var(--ad-gray-1)); } .kv-tico { width: 14px; height: 14px; } .kv-mod { display: none; margin-left: 4px; font-size: 10px; font-weight: 500; color: hsl(var(--ad-warning)); background: hsl(var(--ad-warning) / 0.12); border: 1px solid hsl(var(--ad-warning) / 0.3); border-radius: 6px; padding: 1px 6px; } .kv-main.is-modified .kv-mod { display: inline-block; } .kv-save { appearance: none; border: 0; margin-left: auto; display: none; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 7px; font: inherit; font-size: 12.5px; font-weight: 500; background: hsl(var(--ad-blue)); color: #fff; } .kv-main[data-mode="edit"] .kv-save { display: inline-flex; } /* Content */ .kv-content { flex: 1; min-height: 0; overflow: hidden; position: relative; } .kv-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 16%; text-align: center; } .kv-spark { width: 40px; height: 40px; color: hsl(var(--ad-gray-6) / 0.5); } .kv-empty p { font-size: 12.5px; color: hsl(var(--ad-gray-5)); line-height: 1.5; } /* Read (prose) */ .kv-read { padding: 18px 26px; } .kv-read h1 { font-size: 18px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin: 0 0 12px; } .kv-read h2 { font-size: 14px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin: 16px 0 7px; } .kv-read p { font-size: 12.5px; line-height: 1.6; color: hsl(var(--ad-gray-3)); margin: 0 0 9px; } .kv-read ul { margin: 0; padding-left: 18px; } .kv-read li { font-size: 12.5px; line-height: 1.6; color: hsl(var(--ad-gray-3)); margin: 3px 0; } .kv-read strong { color: hsl(var(--ad-gray-1)); font-weight: 600; } .kv-read code { font-family: var(--font-mono); font-size: 11.5px; background: hsl(var(--ad-muted)); color: hsl(var(--ad-gray-2)); padding: 1px 5px; border-radius: 4px; } /* Edit (mono) */ .kv-edit { margin: 12px; padding: 14px 16px; height: calc(100% - 24px); box-sizing: border-box; overflow: hidden; background: hsl(var(--ad-surface-mid)); border: 1px solid hsl(var(--ad-border)); border-radius: 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; color: hsl(var(--ad-gray-2)); white-space: pre-wrap; } .kv-eline { min-height: 1.7em; } .kv-eline.is-changed { background: hsl(var(--ad-blue) / 0.08); } .kv-caret { display: inline-block; width: 1.5px; height: 1em; background: hsl(var(--ad-blue)); margin: 0 1px; vertical-align: text-bottom; animation: kv-blink 0.9s step-end infinite; } @keyframes kv-blink { 50% { opacity: 0; } } /* Diff */ .kv-diff__head { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid hsl(var(--ad-border)); background: hsl(var(--ad-muted) / 0.4); } .kv-diff__title { font-size: 12px; font-weight: 500; color: hsl(var(--ad-gray-4)); } .kv-diff__key { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: hsl(var(--ad-gray-5)); } .kv-sw { width: 10px; height: 10px; border-radius: 3px; } .kv-sw--add { background: hsl(var(--ad-success) / 0.2); border: 1px solid hsl(var(--ad-success) / 0.4); } .kv-sw--rem { background: hsl(var(--ad-red) / 0.2); border: 1px solid hsl(var(--ad-red) / 0.4); } .kv-diff__body { margin: 0; padding: 14px 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.75; color: hsl(var(--ad-gray-3)); white-space: pre-wrap; } .kv-dline { display: flex; gap: 8px; } .kv-dsign { width: 10px; flex: none; text-align: right; color: hsl(var(--ad-gray-6)); } .kv-dline--added { background: hsl(var(--ad-success) / 0.1); color: hsl(var(--ad-success)); } .kv-dline--removed { background: hsl(var(--ad-red) / 0.1); color: hsl(var(--ad-red)); text-decoration: line-through; text-decoration-color: hsl(var(--ad-red) / 0.4); } /* Cursor + ring (mirror the hero demo) */ .kdemo-cursor { position: absolute; top: 0; left: 0; z-index: 60; width: 22px; height: 22px; pointer-events: none; transform: translate(var(--cx, 150px), var(--cy, 250px)); transition: transform 0.5s cubic-bezier(0.3, 0.1, 0.1, 1); will-change: transform; } .kdemo-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); } .kdemo-cursor.is-down { transform: translate(var(--cx, 150px), var(--cy, 250px)) scale(0.82); transition: transform 0.12s ease; } .kdemo-ring { position: absolute; left: var(--rx, 0px); top: var(--ry, 0px); z-index: 59; width: 18px; height: 18px; border-radius: 50%; border: 2px solid hsl(var(--ad-blue)); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.3); } .kdemo-ring.go { animation: kdemo-ring 0.5s ease-out; } @keyframes kdemo-ring { 0% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } } @media (prefers-reduced-motion: reduce) { .kdemo-cursor, .kdemo-ring, .kv-caret { display: none; } } /* =========================================================================== Premise section — full workspace demo (terminal · Ontology · entity panel) =========================================================================== */ .pdemo { position: relative; width: 100%; aspect-ratio: 1180 / 640; font-family: var(--font-sans); pointer-events: none; } .pdemo-stage { position: absolute; inset: 0 auto auto 0; width: 1180px; height: 640px; transform-origin: top left; transform: scale(var(--pdemo-scale, 1)); } .pdemo-screen { position: absolute; inset: 0; } .pdemo-cursor { position: absolute; top: 0; left: 0; z-index: 60; width: 22px; height: 22px; pointer-events: none; transform: translate(var(--cx, 560px), var(--cy, 470px)); transition: transform 0.52s cubic-bezier(0.3, 0.1, 0.1, 1); will-change: transform; } .pdemo-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 1.5px rgb(0 0 0 / 0.35)); } .pdemo-cursor.is-down { transform: translate(var(--cx, 560px), var(--cy, 470px)) scale(0.82); transition: transform 0.12s ease; } .pdemo-ring { position: absolute; left: var(--rx, 0px); top: var(--ry, 0px); z-index: 59; width: 18px; height: 18px; border-radius: 50%; border: 2px solid hsl(var(--ad-blue)); opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(0.3); } .pdemo-ring.go { animation: demo-ring 0.5s ease-out; } /* ---- themed cube illustration swap (shared) ---- */ .pe-img--dark { display: none; } .dark .pe-img--light { display: none; } .dark .pe-img--dark { display: block; } /* ---- shell ---- */ .ps { position: absolute; inset: 0; display: flex; overflow: hidden; background: hsl(var(--ad-bg)); color: hsl(var(--ad-gray-1)); } /* ---- far-left layer rail ---- */ .ps-rail { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 11px 0; gap: 3px; border-right: 1px solid hsl(var(--ad-border)); } .ps-rail-logo { width: 23px; height: 23px; } .ps-rail-sep { width: 22px; height: 1px; background: hsl(var(--ad-border)); margin: 6px 0; } .ps-rail-grow { flex: 1; } .ps-ricon { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; color: hsl(var(--ad-gray-5)); } .ps-ricon svg { width: 17px; height: 17px; } .ps-ricon.is-active { background: hsl(var(--ad-muted)); color: hsl(var(--ad-gray-1)); } /* ---- terminal pane ---- */ .ps-term { width: 300px; flex: none; display: flex; flex-direction: column; border-right: 1px solid hsl(var(--ad-border)); background: hsl(var(--ad-surface)); } .ps-term-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 13px 13px 11px; font-family: ui-monospace, Menlo, Monaco, "Courier New", monospace; font-size: 11px; line-height: 1.5; color: hsl(var(--ad-fg)); } .ps-term-banner { display: flex; gap: 9px; align-items: flex-start; } .ps-mascot { width: 34px; height: 34px; flex: none; color: hsl(var(--ad-orange)); } .ps-term-id { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; } .ps-term-id b { font-weight: 700; } .ps-dim { color: hsl(var(--ad-gray-5)); } .ps-term-div { height: 1px; background: hsl(var(--ad-border)); opacity: 0.7; margin: 12px 0; } .ps-term-input { display: flex; align-items: flex-start; gap: 7px; padding: 9px 10px; min-height: 44px; border: 1px solid hsl(var(--ad-border)); border-radius: 8px; margin-top: 10px; } .ps-ti-chev { color: hsl(var(--ad-gray-5)); } .ps-ti-val { color: hsl(var(--ad-fg)); white-space: nowrap; overflow: hidden; } .ps-term-caret { display: inline-block; width: 6px; height: 13px; vertical-align: text-bottom; background: hsl(var(--ad-blue)); animation: ps-blink 1s step-end infinite; } @keyframes ps-blink { 50% { opacity: 0; } } .ps-term-hint { margin-top: 8px; font-size: 10px; color: hsl(var(--ad-gray-5)); } .ps-term-feed { flex: 1; min-height: 0; margin-top: 14px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; overflow: hidden; } .ps-term-user { color: hsl(var(--ad-gray-4)); } .ps-term-line { color: hsl(var(--ad-gray-2)); } .ps-indent { padding-left: 13px; } .ps-star { color: hsl(var(--ad-orange)); } .ps-dot { color: hsl(var(--ad-blue)); } .ps-ok { color: hsl(var(--ad-success)); font-weight: 700; } /* ---- center content ---- */ .ps-content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: hsl(var(--ad-surface-raised)); } .ps-top { height: 40px; flex: none; display: flex; align-items: center; padding: 0 17px; } .ps-top-name { font-size: 12px; font-weight: 500; color: hsl(var(--ad-gray-4)); } .ps-top-right { margin-left: auto; display: flex; align-items: center; gap: 11px; color: hsl(var(--ad-gray-5)); } .ps-top-right svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ps-view { flex: 1; min-height: 0; position: relative; overflow: hidden; } /* ---- ontology empty state ---- */ .ps-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; padding: 0 30px; text-align: center; } .ps-empty-art { width: 92px; height: 92px; } .ps-empty-art .pe-img { width: 92px; height: 92px; } .ps-empty-art .pe-img--light { opacity: 0.9; } .dark .ps-empty-art .pe-img--dark { opacity: 0.4; } .ps-empty h3 { font-size: 17px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.01em; } .ps-empty p { font-size: 12.5px; color: hsl(var(--ad-gray-3)); max-width: 330px; line-height: 1.5; } .ps-empty-actions { display: flex; flex-direction: column; gap: 9px; align-items: center; margin-top: 3px; } .ps-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 8px; } .ps-btn svg { width: 13px; height: 13px; } .ps-btn--primary { background: hsl(var(--ad-blue)); color: #fff; } .ps-btn--outline { border: 1px solid hsl(var(--ad-border)); color: hsl(var(--ad-gray-3)); } /* ---- ontology filled ---- */ .ps-ont { position: absolute; inset: 0; overflow: hidden; padding: 24px 0 0; } .ps-inner { max-width: 560px; margin: 0 auto; padding: 0 24px 24px; transition: transform 0.85s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; } .ps-sec { margin-bottom: 24px; } .ps-sec-title { font-size: 18px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.01em; } .ps-sec-sub { font-size: 12px; color: hsl(var(--ad-gray-5)); margin-top: 2px; } .ps-jobs { display: flex; flex-direction: column; gap: 7px; margin-top: 13px; } .ps-job { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid hsl(var(--ad-border)); border-radius: 9px; background: hsl(var(--ad-card)); } .ps-job-t { flex: 1; min-width: 0; font-size: 11.5px; color: hsl(var(--ad-gray-2)); line-height: 1.3; } .ps-pri { flex: none; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: hsl(var(--ad-gray-4)); border: 1px solid hsl(var(--ad-border)); border-radius: 6px; padding: 3px 6px; } .ps-pri svg { width: 10px; height: 10px; } .ps-job-del { flex: none; color: hsl(var(--ad-gray-5)); display: inline-flex; } .ps-job-del svg { width: 14px; height: 14px; } .ps-ecards { display: flex; flex-direction: column; gap: 9px; margin-top: 13px; } .ps-ecard { display: flex; border: 1px solid hsl(var(--ad-border)); border-radius: 11px; background: hsl(var(--ad-card)); overflow: hidden; } .ps-ecard.is-sel { border-color: hsl(var(--ad-blue)); box-shadow: 0 0 0 1px hsl(var(--ad-blue) / 0.25); } .ps-ecard-well { width: 74px; flex: none; display: grid; place-items: center; background: hsl(var(--ad-blue) / 0.08); } .ps-ecard-art.pe-img { width: 42px; height: 42px; opacity: 0.5; } .ps-ecard-body { flex: 1; min-width: 0; padding: 11px 13px; } .ps-ecard-name { font-size: 15px; font-weight: 600; color: hsl(var(--ad-gray-1)); line-height: 1.2; } .ps-ecard-desc { font-size: 11.5px; color: hsl(var(--ad-gray-3)); line-height: 1.4; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ps-ecard-meta { display: flex; gap: 12px; margin-top: 7px; } .ps-ecard-meta span { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: hsl(var(--ad-gray-5)); } .ps-ecard-meta svg { width: 11px; height: 11px; } .ps-add { display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border: 1px dashed hsl(var(--ad-gray-6)); border-radius: 9px; color: hsl(var(--ad-gray-5)); font-size: 12px; } .ps-add svg { width: 13px; height: 13px; } .ps-add--sm { height: 32px; margin-top: 8px; } /* rise-in reveal */ .ps-rise { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .ps-rise.is-in { opacity: 1; transform: none; } /* ---- right entity panel ---- */ .ps-panel { width: 0; flex: none; overflow: hidden; background: hsl(var(--ad-surface-mid)); transition: width 0.34s cubic-bezier(0.4, 0, 0.2, 1); } .ps.is-panel .ps-panel { width: 322px; } .ps-panel-inner { width: 322px; height: 100%; display: flex; flex-direction: column; border-left: 1px solid hsl(var(--ad-border)); box-sizing: border-box; } .ps-panel-head { height: 40px; flex: none; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid hsl(var(--ad-border)); } .ps-panel-head span:first-child { flex: 1; font-size: 12px; font-weight: 500; color: hsl(var(--ad-gray-4)); } .ps-x { color: hsl(var(--ad-gray-5)); display: inline-flex; } .ps-x svg { width: 14px; height: 14px; } .ps-panel-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 17px; } .ps-pgroup-title { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: hsl(var(--ad-gray-1)); margin-bottom: 9px; } .ps-pgroup-title svg { width: 12px; height: 12px; color: hsl(var(--ad-gray-5)); } .ps-attrs { border: 1px solid hsl(var(--ad-border)); border-radius: 8px; background: hsl(var(--ad-card)); overflow: hidden; } .ps-attr { display: flex; align-items: center; padding: 7px 11px; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-gray-1)); border-top: 1px solid hsl(var(--ad-border)); } .ps-attr:first-child { border-top: none; } .ps-attr-dots { margin-left: auto; color: hsl(var(--ad-gray-5)); display: inline-flex; } .ps-attr-dots svg { width: 14px; height: 14px; } .ps-states { position: relative; height: 120px; border: 1px solid hsl(var(--ad-border)); border-radius: 8px; overflow: hidden; background: hsl(var(--ad-card)); } .ps-flow { position: absolute; inset: 0; width: 100%; height: 100%; } .ps-expand { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; color: hsl(var(--ad-gray-4)); background: hsl(var(--ad-surface) / 0.9); border: 1px solid hsl(var(--ad-border)); border-radius: 999px; padding: 2px 7px; } .ps-expand svg { width: 10px; height: 10px; } .ps-rels { display: flex; flex-direction: column; gap: 8px; } .ps-rel { position: relative; display: flex; border: 1px solid hsl(var(--ad-border)); border-radius: 9px; background: hsl(var(--ad-card)); overflow: hidden; } .ps-rel-well { width: 52px; flex: none; display: grid; place-items: center; background: hsl(var(--ad-blue) / 0.08); } .ps-rel-art.pe-img { width: 28px; height: 28px; opacity: 0.5; } .ps-rel-body { flex: 1; min-width: 0; padding: 8px 26px 8px 10px; } .ps-rel-name { font-size: 12.5px; font-weight: 600; color: hsl(var(--ad-gray-1)); } .ps-rel-meta { font-size: 10px; color: hsl(var(--ad-gray-5)); margin-top: 2px; } .ps-rel-dots { position: absolute; top: 6px; right: 7px; color: hsl(var(--ad-gray-5)); display: inline-flex; } .ps-rel-dots svg { width: 13px; height: 13px; } .ps-cue { display: flex; align-items: center; gap: 10px; border: 1px solid hsl(var(--ad-border)); border-radius: 9px; background: hsl(var(--ad-card)); padding: 8px 11px; } .ps-cue-sw { width: 56px; height: 32px; flex: none; border-radius: 6px; background: hsl(var(--ad-blue) / 0.08); display: flex; align-items: center; justify-content: center; gap: 3px; } .ps-cue-pill { width: 12px; height: 6px; border-radius: 999px; } .ps-cue-pill.g { background: hsl(var(--ad-success) / 0.6); } .ps-cue-pill.a { background: hsl(var(--ad-warning) / 0.6); } .ps-cue-pill.r { background: hsl(var(--ad-red) / 0.6); } .ps-cue-name { flex: 1; font-size: 12.5px; font-weight: 600; color: hsl(var(--ad-gray-1)); } .ps-cue-chev { color: hsl(var(--ad-gray-5)); display: inline-flex; } .ps-cue-chev svg { width: 14px; height: 14px; } /* ---- Relationships graph thumbnail (center) ---- */ .ps-relgraph { position: relative; height: 180px; margin-top: 13px; border: 1px solid hsl(var(--ad-border)); border-radius: 10px; overflow: hidden; background: hsl(var(--ad-card)); } .ps-rg { position: absolute; inset: 0; width: 100%; height: 100%; } .ps-relgraph .rg-name { font-size: 9px; font-weight: 600; fill: hsl(var(--ad-gray-1)); font-family: var(--font-sans); } .ps-relgraph .rg-tag { font-size: 7px; fill: hsl(var(--ad-gray-5)); font-family: var(--font-sans); } .ps-relgraph .rg-tag--p { fill: hsl(var(--ad-warning)); } .ps-relgraph .rg-elabel { font-size: 7.5px; fill: hsl(var(--ad-gray-5)); font-family: var(--font-sans); } /* ---- Task panel specifics ---- */ .ps-pgroup-title--plain { gap: 0; } .ps-task-name { font-size: 18px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.01em; line-height: 1.2; } .ps-task-p { font-size: 12.5px; color: hsl(var(--ad-gray-3)); line-height: 1.5; } .ps-rel--plain .ps-rel-body { padding-right: 10px; } .ps-steps { margin-top: 13px; } .ps-step { display: flex; gap: 10px; } .ps-step-rail { display: flex; flex-direction: column; align-items: center; flex: none; } .ps-step-num { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1px solid hsl(var(--ad-gray-6)); background: hsl(var(--ad-card)); color: hsl(var(--ad-gray-4)); font-size: 10px; font-weight: 600; display: grid; place-items: center; } .ps-step-conn { width: 1px; flex: 1; min-height: 8px; background: hsl(var(--ad-border)); margin: 3px 0; } .ps-step-body { flex: 1; min-width: 0; padding-bottom: 13px; } .ps-step-d { font-size: 12px; color: hsl(var(--ad-gray-3)); line-height: 1.4; } .ps-step-touch { font-size: 10px; color: hsl(var(--ad-gray-5)); margin-top: 3px; } /* =========================================================================== Architecture act — view header, tabs, node canvas, screen panel (reuses the global .an / .cx / .nav-edge / .edge-legend / .task-thread CSS) =========================================================================== */ .ps-arch { position: absolute; inset: 0; overflow: hidden; padding: 24px 0 0; } .ps-arch-inner { max-width: 560px; margin: 0 auto; padding: 0 24px; } .ps-arch-title { font-size: 22px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.015em; } .ps-arch-sub { font-size: 12.5px; color: hsl(var(--ad-gray-4)); margin-top: 3px; } .psa-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid hsl(var(--ad-border)); border-radius: 9px; overflow: hidden; margin-top: 15px; } .psa-tab { appearance: none; -webkit-appearance: none; border: none; border-right: 1px solid hsl(var(--ad-border)); background: transparent; font-family: inherit; padding: 8px 0; font-size: 12.5px; font-weight: 500; color: hsl(var(--ad-gray-5)); text-align: center; } .psa-tab:last-child { border-right: none; } .psa-tab.is-active { background: hsl(var(--ad-muted) / 0.5); color: hsl(var(--ad-gray-1)); } .psa-canvas { position: relative; width: 444px; height: 416px; margin: 20px auto 0; } .psa-legend { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; gap: 22px; padding: 6px 0; opacity: 0; transition: opacity 0.3s ease; } .psa-legend.is-shown { opacity: 1; } .psa-legend .leg { display: flex; align-items: center; gap: 6px; font-size: 11px; color: hsl(var(--ad-gray-4)); } .psa-canvas .demo-canvas__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* node reveal + states (the .an base styles are global) */ .ps-arch .an { width: 112px; opacity: 0; transform: translateY(8px) scale(0.96); } .ps-arch .an.is-in { opacity: 1; transform: none; } .ps-arch .an.is-sel { border-color: hsl(var(--ad-blue)); box-shadow: 0 0 0 1px hsl(var(--ad-blue) / 0.25); } .psa-canvas.is-dim .an:not(.an--thread):not(.is-sel) { opacity: 0.32; } /* ---- Screen detail panel ---- */ .ps-screen-id { display: flex; align-items: center; gap: 8px; } .ps-screen-name { font-size: 18px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.01em; } .ps-screen-render { display: flex; flex-direction: column; gap: 5px; height: 128px; padding: 9px; border: 1px solid hsl(var(--ad-border)); border-radius: 8px; background: hsl(var(--ad-wire)); } .ps-screen-render .z { background: hsl(var(--ad-schematic)); border-radius: 3px; } .ps-screen-render .z-bar { height: 8px; flex: none; } .ps-screen-render .z-row { display: flex; gap: 5px; flex: 1; } .ps-selects { display: flex; flex-direction: column; gap: 9px; } .ps-sel { display: flex; flex-direction: column; gap: 4px; } .ps-sel-l { font-size: 10px; font-weight: 500; color: hsl(var(--ad-gray-5)); } .ps-sel-box { display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border: 1px solid hsl(var(--ad-border)); border-radius: 7px; font-size: 12px; color: hsl(var(--ad-gray-1)); background: hsl(var(--ad-card)); } .ps-sel-box svg { width: 13px; height: 13px; color: hsl(var(--ad-gray-5)); } /* =========================================================================== Screens act — home grid (shells/pages), compose canvas, chip panel =========================================================================== */ .ps-screens, .ps-compose { position: absolute; inset: 0; overflow: hidden; padding: 24px 0 0; } .ps-pggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 13px; } .ps-screens .pg-card { position: static; width: auto; } /* compose canvas */ .ps-compose-id { display: flex; align-items: center; gap: 8px; } .ps-compose-name { font-size: 18px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.01em; } .ps-screen { margin-top: 14px; border: 1px solid hsl(var(--ad-border)); border-radius: 10px; background: hsl(var(--ad-surface-mid)); padding: 11px; display: flex; flex-direction: column; gap: 10px; } .ps-zone { position: relative; border: 1px dashed hsl(var(--ad-border)); border-radius: 8px; padding: 20px 10px 10px; display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start; background: hsl(var(--ad-card) / 0.5); } .ps-zone-label { position: absolute; top: 5px; left: 9px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: hsl(var(--ad-gray-5)); } .ps-zone-row { display: flex; gap: 10px; } .ps-zone--head { min-height: 54px; } .ps-zone--main { flex: 2; min-height: 128px; } .ps-zone--aside { flex: 1; min-height: 128px; } .ps-pg-sec { margin-top: 18px; } .ps-pg-h { font-size: 15px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.005em; margin-bottom: 7px; } .ps-selects--row { flex-direction: row; gap: 12px; } .ps-selects--row .ps-sel { flex: 1; } .cchip.is-sel { border-color: hsl(var(--ad-blue)); box-shadow: 0 0 0 2px hsl(var(--ad-blue) / 0.25); } /* chip detail panel */ .ps-chip-name { font-size: 18px; font-weight: 600; color: hsl(var(--ad-gray-1)); letter-spacing: -0.01em; } .ps-place { display: flex; flex-direction: column; gap: 10px; } .ps-place-row { display: flex; align-items: center; justify-content: space-between; } .ps-place-l { font-size: 12px; color: hsl(var(--ad-gray-4)); } .ps-toggle-track { display: inline-flex; gap: 2px; background: hsl(var(--ad-muted) / 0.5); border-radius: 8px; padding: 3px; } .ps-toggle { width: 28px; height: 24px; border-radius: 6px; display: grid; place-items: center; color: hsl(var(--ad-gray-5)); } .ps-toggle.is-on { background: hsl(var(--ad-blue) / 0.2); color: hsl(var(--ad-blue)); } .pl-ic { width: 13px; height: 13px; } @media (prefers-reduced-motion: reduce) { .pdemo-cursor, .pdemo-ring, .ps-term-caret { display: none; } .ps-rise { opacity: 1; transform: none; } .ps-arch .an { opacity: 1; transform: none; } }