/* Supernomial Visual Studio — element system. Product visuals are composed from these classes over the site's own tokens (css/main.css). Families: BG backgrounds · GL glass · WN windows · CH chat · DC documents · TB tables · DB dashboards · DS data systems · AG agents · MO motion · CT content. Library: studio/index.html. Scenes: studio/scenes/. Export: studio/shot.js (PNG at 2x). */ @import url("../css/main.css"); :root { /* studio tokens, derived from the site's color acts */ --sx-dark: #0e0e12; /* dark act page */ --sx-panel: #17171c; /* window shell (homepage cockpit) */ --sx-panel-2: #212127; /* raised card on dark */ --sx-petrol: #0a1311; --sx-petrol-panel: #101d19; --sx-lilac: #ece8f5; --sx-violet-deep: #6b3fe8; --sx-soft-dark: #9a9aa4; /* secondary text on dark */ --sx-green: #4ade80; --sx-green-deep: #16a34a; /* darker step of green for small type on light */ --sx-hairline-dark: rgba(255, 255, 255, 0.09); } /* ---------- canvas — the scene surface ---------- */ .el-canvas { position: relative; overflow: hidden; font-family: var(--ff); color: var(--ink); } .el-canvas.on-dark { color: #ffffff; } /* freeze-frame for still exports: shot.js adds .still on */ .still *, .still *::before, .still *::after { animation-play-state: paused !important; transition: none !important; } /* ========================================================= BG — backgrounds ========================================================= */ .bg-white { background: #ffffff; } .bg-sand { background: var(--sand); } .bg-lilac { background: var(--sx-lilac); } .bg-dark { background: var(--sx-dark); } .bg-petrol { background: var(--sx-petrol); } /* soft radial washes of the accent triad — light; tintable per scene via --mesh-a/b/c like bg-mesh-dark */ .bg-mesh { background: radial-gradient(42% 52% at 18% 22%, var(--mesh-a, rgba(255, 119, 89, 0.26)), transparent 70%), radial-gradient(50% 60% at 82% 18%, var(--mesh-b, rgba(139, 92, 246, 0.22)), transparent 70%), radial-gradient(56% 64% at 55% 88%, var(--mesh-c, rgba(76, 110, 230, 0.18)), transparent 72%), #ffffff; } /* accent glows sunk into the dark act — tintable per scene via --mesh-a/b/c (team scenes key the lead glow to the team's menu dot color) */ .bg-mesh-dark { background: radial-gradient(46% 56% at 20% 20%, var(--mesh-a, rgba(139, 92, 246, 0.30)), transparent 70%), radial-gradient(52% 60% at 80% 30%, var(--mesh-b, rgba(76, 110, 230, 0.24)), transparent 72%), radial-gradient(60% 70% at 55% 92%, var(--mesh-c, rgba(255, 82, 41, 0.14)), transparent 70%), var(--sx-dark); } /* art board — photo behind the accent glows (the reference's board grammar); pick the image per scene: style="--bg-art-img:url(...)" */ .bg-art-dark { background: radial-gradient(46% 56% at 20% 20%, rgba(139, 92, 246, 0.30), transparent 70%), radial-gradient(52% 60% at 80% 30%, rgba(76, 110, 230, 0.24), transparent 72%), radial-gradient(60% 70% at 55% 92%, rgba(255, 82, 41, 0.14), transparent 70%), var(--bg-art-img, none) center / cover no-repeat, var(--sx-dark); } /* film grain add-on — stack onto any background class */ .bg-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); background-size: 160px 160px; opacity: 0.05; mix-blend-mode: overlay; } /* ========================================================= GL — glass surfaces (over busy backgrounds; blur needs depth behind it) ========================================================= */ .gl { position: relative; border-radius: 16px; } .gl-light { background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 50px -12px rgba(23, 23, 28, 0.18); } .gl-dark { background: rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 60px -12px rgba(0, 0, 0, 0.5); color: #ffffff; } /* tone-on-tone card — the reference's actual construction (decoded 2026-08-02): translucent fill on a gradient board, NO backdrop blur, no border highlight, shadow absent */ .gl-tone { background: rgba(255, 255, 255, 0.12); border-radius: 12px; } .gl-tone--strong { background: rgba(255, 255, 255, 0.16); } /* motion-safe glass: backdrop blur snaps on/off while opacity animates (Chromium), so ANY glass element that fades in a scene takes this modifier — flat fill, same geometry (the reference's boards use exactly this no-blur recipe) */ .gl-noblur { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(36, 36, 44, 0.82); } /* light counterpart — light glass that fades in a scene takes this */ .gl-noblur-light { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, 0.78); } .gl-pill { border-radius: 999px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 10px; } .gl-toolbar { display: inline-flex; align-items: center; gap: 18px; padding: 12px 20px; border-radius: 14px; } .gl-toolbar span { width: 16px; height: 16px; border-radius: 5px; background: currentColor; opacity: 0.55; } .gl-toolbar span.active { opacity: 1; } .gl-band { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0; padding: 18px 24px; } /* ========================================================= WN — windows & frames ========================================================= */ .el-win { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; font-size: 13px; text-align: left; } .el-win--light { background: #ffffff; color: var(--ink); border: 1px solid #ececec; box-shadow: 0 24px 64px -16px rgba(23, 23, 28, 0.22); } .el-win--dark { background: var(--sx-panel); color: #ffffff; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); } .el-win--glass { color: #ffffff; background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(24px) saturate(1.3); backdrop-filter: blur(24px) saturate(1.3); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 60px -12px rgba(0, 0, 0, 0.5); } .el-winbar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; flex: 0 0 auto; } .el-win--light .el-winbar { border-bottom: 1px solid #f2f2f2; } .el-win--dark .el-winbar, .el-win--glass .el-winbar { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .el-winbar-dots { display: inline-flex; gap: 6px; } .el-winbar-dots span { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: 0.18; } .el-winbar-title { font-size: 11.5px; opacity: 0.62; } .el-url { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 11.5px; opacity: 0.75; border: 1px solid rgba(127, 127, 135, 0.25); border-radius: 999px; padding: 4px 14px; margin: 0 8px; } .el-winbody { flex: 1; padding: 20px 24px; min-height: 0; } .el-winbody--flush { padding: 0; } /* cockpit window — the homepage product-window shell, generalized: dark app frame with icon rail + header + tab row (content = your choice) */ .el-cockpit { display: flex; background: var(--sx-panel); color: #ffffff; font-size: 13px; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); } .el-cockpit-side { width: 44px; flex: 0 0 auto; background: #131317; border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 22px; } .el-cockpit-side span { width: 16px; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); } .el-cockpit-side span:first-child { border-radius: 50%; background: rgba(255, 255, 255, 0.28); } .el-cockpit-main { flex: 1; padding: 22px 28px; min-width: 0; } .el-cockpit-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .el-cockpit-title { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; } .el-live { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--sx-soft-dark); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 3px 10px; } .el-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--sx-green); } .el-cockpit-btn { margin-left: auto; background: #ffffff; color: var(--sx-panel); border: 0; border-radius: 999px; padding: 8px 14px; font-size: 12.5px; font-weight: 500; font-family: inherit; } .el-cockpit-tabs { display: flex; gap: 22px; font-size: 12.5px; color: var(--sx-soft-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 22px; } .el-cockpit-tabs span { padding-bottom: 10px; } .el-cockpit-tabs .active { color: #ffffff; box-shadow: inset 0 -2px 0 #ffffff; } /* agentic workspace — the customer's enterprise AI app (Cowork / ChatGPT-class), sketched wordless so it reads as "your system": sidebar + chat thread + document panel. The one literal thing in the frame is the TP deliverable; the iris marks where Supernomial lives inside their app. Light + dark via modifier. */ .el-aiw { display: flex; border-radius: 12px; overflow: hidden; text-align: left; font-size: 13px; } .el-aiw--light { background: #ffffff; color: var(--ink); border: 1px solid #ececec; box-shadow: 0 24px 64px -16px rgba(23, 23, 28, 0.22); --aw-side: #f6f5f1; --aw-line: #ececec; --aw-blob: rgba(33, 33, 33, 0.15); --aw-bar: rgba(33, 33, 33, 0.10); --aw-card: #f7f6f3; --aw-inset: #ffffff; --aw-pill: var(--ink-strong); } .el-aiw--dark { background: var(--sx-panel); color: #ffffff; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3); --aw-side: #131317; --aw-line: rgba(255, 255, 255, 0.07); --aw-blob: rgba(255, 255, 255, 0.17); --aw-bar: rgba(255, 255, 255, 0.11); --aw-card: var(--sx-panel-2); --aw-inset: rgba(255, 255, 255, 0.04); --aw-pill: #ffffff; } /* skeleton atoms: i = icon blob, b = text bar */ .el-aiw i { flex: 0 0 auto; } .el-aiw b { display: block; height: 7px; border-radius: 4px; background: var(--aw-bar); } .el-aiw-side { width: 168px; flex: 0 0 auto; background: var(--aw-side); border-right: 1px solid var(--aw-line); padding: 14px 14px 12px; display: flex; flex-direction: column; } .el-aiw-mac { display: flex; gap: 6px; margin-bottom: 14px; } .el-aiw-mac span { width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.16; } .el-aiw-seg { display: flex; gap: 3px; padding: 3px; margin-bottom: 12px; background: var(--aw-inset); border: 1px solid var(--aw-line); border-radius: 8px; } .el-aiw-seg span { flex: 1; height: 16px; border-radius: 5px; } .el-aiw-seg .active { background: var(--aw-blob); } .el-aiw-item { display: flex; align-items: center; gap: 8px; padding: 5px 2px; } .el-aiw-item i { width: 13px; height: 13px; border-radius: 4px; background: var(--aw-blob); } .el-aiw-item .el-iris { width: 13px; height: 13px; } .el-aiw-group { height: 5px; width: 34%; border-radius: 3px; background: var(--aw-bar); opacity: 0.7; margin: 12px 2px 6px; } .el-aiw-user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid var(--aw-line); } .el-aiw-user i { width: 16px; height: 16px; border-radius: 50%; background: var(--aw-blob); } .el-aiw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 0 26px; } .el-aiw-head { display: flex; align-items: center; gap: 8px; padding: 19px 0 14px; } .el-aiw-head b { height: 8px; } .el-aiw-head svg { opacity: 0.38; } .el-aiw-thread { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding-top: 8px; } .el-aiw-reply { display: flex; gap: 10px; } .el-aiw-reply .el-iris { width: 14px; height: 14px; margin-top: -1px; } .el-aiw-reply .el-greek { flex: 1; } .el-aiw-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--aw-card); } .el-aiw-card i { width: 30px; height: 30px; border-radius: 8px; background: var(--aw-blob); } .el-aiw-card > div { flex: 1; display: flex; flex-direction: column; gap: 6px; } .el-aiw-card > div b:last-child { height: 5px; } .el-aiw-pill { flex: 0 0 auto; width: 62px; height: 20px; border-radius: 999px; background: var(--aw-pill); margin-left: auto; } .el-aiw--light .el-aiw-pill { opacity: 0.92; } .el-aiw-composer { margin: 16px 0 18px; padding: 12px 14px 10px; background: var(--aw-inset); border: 1px solid var(--aw-line); border-radius: 14px; } .el-aiw-composer > b { margin: 2px 0 13px; } .el-aiw-tools { display: flex; align-items: center; gap: 8px; } .el-aiw-tools i { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--aw-blob); } .el-aiw-tools .el-aiw-model { width: 56px; height: 14px; border-radius: 999px; background: var(--aw-bar); margin-left: auto; } .el-aiw-tools .el-aiw-mic { border: 0; background: var(--aw-blob); } .el-aiw-doc { width: 280px; flex: 0 0 auto; border-left: 1px solid var(--aw-line); padding: 14px 16px 16px; display: flex; flex-direction: column; } .el-aiw-doc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; padding-top: 5px; } .el-aiw-doc .el-doc-page { width: 100%; flex: 1; aspect-ratio: auto; border-radius: 4px; padding: 20px 18px 14px; } .el-aiw--dark .el-aiw-doc .el-doc-page { border: 0; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, 0.55); } /* ========================================================= shared atoms ========================================================= */ /* greeked text — content abstracted to bars (light + dark aware) */ .el-greek { display: flex; flex-direction: column; gap: 8px; } .el-greek i { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: 0.12; } .el-greek i:nth-child(3n) { width: 86%; } .el-greek i:nth-child(3n+1) { width: 100%; } .el-greek i:nth-child(3n+2) { width: 68%; } .el-greek i:last-child { width: 42%; } /* status dots */ .el-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .el-dot--green { background: var(--sx-green); } .el-dot--coral { background: var(--coral); } .el-dot--blue { background: var(--blue); } .el-dot--violet { background: var(--violet); } .el-dot--orange { background: var(--cta-orange); } /* agent identity chip — conic iris in the accent triad */ .el-iris { display: inline-block; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; background: conic-gradient(from 210deg, var(--coral), var(--violet), var(--blue), var(--coral)); } .el-iris--ring { background: radial-gradient(circle at center, transparent 0 5px, #0000 5px) padding-box, conic-gradient(from 210deg, var(--coral), var(--violet), var(--blue), var(--coral)) border-box; border: 4px solid transparent; background-clip: padding-box, border-box; } /* small caps utility label */ .el-label { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; opacity: 0.62; } /* ========================================================= motion keyframes (shared; MO family showcases them) ========================================================= */ @keyframes el-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes el-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes el-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes el-flow { from { offset-distance: 0%; } to { offset-distance: 100%; } } @keyframes el-dash { to { stroke-dashoffset: -120; } } @keyframes el-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes el-typedots { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } } @keyframes el-write { from { max-height: 0; opacity: 0; } to { max-height: 400px; opacity: 1; } } @keyframes el-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes el-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .el-canvas *, .st-stage * { animation: none !important; transition: none !important; } } /* ===== CH — chat ===== */ .el-chat { display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 1.5; text-align: left; } .el-chat-msg { display: flex; align-items: flex-start; gap: 10px; max-width: 92%; } .el-chat-msg--user { align-self: flex-end; } .el-chat-bubble { background: var(--ink-strong); color: #ffffff; border-radius: 14px; padding: 9px 15px; font-size: 13px; } .el-chat--dark .el-chat-bubble { background: #ffffff; color: var(--sx-panel); } .el-chat-msg--agent .el-iris { margin-top: 2px; } .el-chat-text { margin: 0; max-width: 400px; } .el-chat--dark .el-chat-text { color: rgba(255, 255, 255, 0.92); } .el-chat-winiris { width: 14px; height: 14px; } /* composer row at the foot of a chat window */ .el-chat-composer { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; flex: 0 0 auto; font-size: 12.5px; color: var(--ink-soft); } .el-win--light .el-chat-composer { border-top: 1px solid #f2f2f2; } .el-win--dark .el-chat-composer { border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--sx-soft-dark); } .el-chat-hint { flex: 1; } .el-chat-send { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--ink-strong); color: #ffffff; } .el-win--dark .el-chat-send { background: #ffffff; color: var(--sx-panel); } /* typing indicator bubble — white on dark scenes; --light adds a hairline + the light-chip shadow so it reads on light scenes (Max 2026-08-04: no dark pill on light) */ .el-chat-typing { display: inline-flex; align-items: center; gap: 11px; background: #ffffff; border-radius: 999px; padding: 11px 17px 11px 13px; box-shadow: 0 12px 32px -14px rgba(23, 23, 28, 0.22); } .el-chat-typing--light { border: 1px solid #e9e9e9; box-shadow: 0 12px 32px -16px rgba(23, 23, 28, 0.14); } .el-chat-typing .el-iris { width: 14px; height: 14px; } .el-chat-typing-dots { display: inline-flex; gap: 5px; } .el-chat-typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); animation: el-typedots 1.5s ease-in-out infinite; } .el-chat-typing-dots i:nth-child(2) { animation-delay: 0.18s; } .el-chat-typing-dots i:nth-child(3) { animation-delay: 0.36s; } /* tool-call step chips */ .el-chat-steps { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .el-chat-step { display: inline-flex; align-items: center; gap: 9px; background: #ffffff; border: 1px solid #ececec; border-radius: 999px; padding: 8px 16px 8px 13px; font-size: 12.5px; color: var(--ink-soft); } .el-chat-step svg { flex: 0 0 auto; } .el-chat-step .el-dot { margin: 0 2px; } .el-chat-step--active { color: var(--ink); border-color: #e2e2e2; } .el-chat-step--active .el-dot { animation: el-pulse 2s ease-in-out infinite; } /* approval prompt — the bounded-autonomy moment */ .el-chat-approve { padding: 26px 28px; text-align: left; } .el-chat-approve-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .el-chat-approve-head .el-dot { width: 7px; height: 7px; animation: el-pulse 2.4s ease-in-out infinite; } .el-chat-approve-q { margin: 0 0 20px; font-size: 15px; font-weight: 400; line-height: 1.45; letter-spacing: -0.005em; } .el-chat-approve-actions { display: flex; gap: 10px; } .el-chat-btn { font-family: inherit; font-size: 12.5px; font-weight: 500; border-radius: 999px; padding: 8px 18px; cursor: default; } .el-chat-btn--fill { background: #ffffff; color: var(--sx-panel); border: 0; } .el-chat-btn--ghost { background: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.3); } .el-chat-approve-agent { display: flex; align-items: center; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 11px; color: var(--sx-soft-dark); } .el-chat-approve-agent .el-iris { width: 12px; height: 12px; } /* ========================================================= DC — documents (deliverables taking shape) ========================================================= */ /* portrait A4-ish page: header grammar + greeked sections */ .el-doc-page { width: 360px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; text-align: left; background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 6px; box-shadow: 0 22px 54px -20px rgba(23, 23, 28, 0.2); padding: 30px 32px 24px; font-family: var(--ff); } .el-doc-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .el-doc-status { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-soft); } .el-doc-status .el-dot { width: 6px; height: 6px; } .el-doc-title { font-size: 21px; font-weight: 300; letter-spacing: -0.01em; margin-top: 10px; } .el-doc-sub { font-size: 11px; color: var(--ink-soft); margin-top: 6px; } .el-doc-rule { border-top: 1px solid #ececec; margin-top: 18px; } .el-doc-sec { margin-top: 16px; } .el-doc-sec-label { display: flex; align-items: baseline; gap: 8px; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px; } .el-doc-sec-label i { font-style: normal; opacity: 0.55; } .el-doc-page .el-greek { gap: 7px; } .el-doc-page .el-greek i { height: 6px; } .el-doc-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.06em; color: var(--ink-soft); border-top: 1px solid #f2f2f2; padding-top: 12px; } /* writing variant — a reveal front rolls down the page; lines fade between "planned" (0.05) and "written" (0.15), so any frozen frame reads as a draft in progress. Stagger per line: style="--dcw:.3s" */ .el-doc-page--writing .el-greek i { animation: el-doc-write 5s ease-in-out infinite; animation-delay: var(--dcw, 0s); } .el-doc-caretline { position: relative; } .el-doc-caret { position: absolute; left: calc(42% + 8px); bottom: -3px; width: 2px; height: 12px; background: var(--violet); animation: el-blink 1.15s infinite; } @keyframes el-doc-write { 0% { opacity: 0.05; transform: translateY(4px); } 8% { opacity: 0.15; transform: none; } 74% { opacity: 0.15; } 86%, 100% { opacity: 0.05; } } /* dark report cover — iris mark top, title block lower third */ .el-doc-cover { width: 320px; aspect-ratio: 3 / 4; display: flex; flex-direction: column; text-align: left; background: var(--sx-panel); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; box-shadow: 0 28px 70px -18px rgba(0, 0, 0, 0.55); padding: 30px 32px 26px; font-family: var(--ff); } .el-doc-cover .el-label { color: var(--sx-soft-dark); opacity: 1; letter-spacing: 0.13em; font-size: 9.5px; } .el-doc-cover-block { margin-top: auto; } .el-doc-cover-title { font-size: 27px; font-weight: 300; letter-spacing: -0.01em; margin-top: 10px; } .el-doc-cover-meta { font-size: 11px; color: var(--sx-soft-dark); margin-top: 9px; } .el-doc-cover-foot { margin-top: 56px; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 0.08em; color: var(--sx-soft-dark); border-top: 1px solid var(--sx-hairline-dark); padding-top: 12px; } /* fanned stack of three sheets; top page carries the DC-1 grammar */ .el-doc-stack { position: relative; width: 480px; height: 380px; } .el-doc-stack .el-doc-page { position: absolute; left: 50%; top: 50%; width: 250px; padding: 24px 24px 18px; box-shadow: 0 16px 44px -18px rgba(23, 23, 28, 0.24); } .el-doc-stack--b1 { transform: translate(-50%, -50%) translate(-18px, -4px) rotate(-3deg); } .el-doc-stack--b2 { transform: translate(-50%, -50%) translate(0, -12px); } .el-doc-stack--top { transform: translate(-50%, -50%) translate(16px, 8px) rotate(2.5deg); } .el-doc-page--mini .el-label { font-size: 8.5px; } .el-doc-page--mini .el-doc-title { font-size: 15px; margin-top: 8px; } .el-doc-page--mini .el-doc-sub { font-size: 9.5px; margin-top: 4px; } .el-doc-page--mini .el-doc-rule { margin-top: 13px; } .el-doc-page--mini .el-doc-sec { margin-top: 12px; } .el-doc-page--mini .el-doc-sec-label { font-size: 8px; margin-bottom: 9px; } .el-doc-page--mini .el-greek { gap: 6px; } .el-doc-page--mini .el-greek i { height: 5px; } .el-doc-page--mini .el-doc-foot { font-size: 7.5px; padding-top: 9px; } /* slim file chip — stroke-drawn page glyph, name + meta, status dot */ .el-doc-chip { display: inline-flex; align-items: center; gap: 13px; background: #ffffff; color: var(--ink); border: 1px solid #e9e9e9; border-radius: 10px; padding: 13px 18px 13px 15px; box-shadow: 0 12px 32px -16px rgba(23, 23, 28, 0.14); font-family: var(--ff); text-align: left; } .el-doc-chip svg { flex: 0 0 auto; color: var(--ink-soft); display: block; } .el-doc-chip-name { font-size: 12.5px; font-weight: 500; } .el-doc-chip-meta { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; } .el-doc-chip > .el-dot { margin-left: 10px; } /* ===== TB — tables ===== */ .el-tbl { background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 12px; padding: 6px 22px 8px; font-family: var(--ff); font-size: 12.5px; text-align: left; box-shadow: 0 18px 44px -18px rgba(23, 23, 28, 0.10); } .el-tbl-row { display: grid; grid-template-columns: 92px 1fr 112px 106px; gap: 18px; align-items: center; padding: 11px 0; border-bottom: 1px solid #f2f2f2; } .el-tbl-row:last-child { border-bottom: 0; } .el-tbl-row--head { font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); font-weight: 400; padding: 13px 0 9px; } .el-tbl-ent { font-weight: 400; white-space: nowrap; } .el-tbl-tx { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .el-tbl-amt { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; } .el-tbl-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; letter-spacing: 0.01em; white-space: nowrap; border: 1px solid #e5e5e5; border-radius: 999px; padding: 3px 9px 3px 8px; } .el-tbl-pill i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .el-tbl-pill--green i { background: var(--sx-green); } .el-tbl-pill--orange i { background: var(--cta-orange); animation: el-pulse 2.8s ease-in-out infinite; } .el-tbl-pill--blue i { background: var(--blue); } /* dark variant */ .el-tbl--dark { background: var(--sx-panel); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.45); } .el-tbl--dark .el-tbl-row { border-bottom: 1px solid var(--sx-hairline-dark); } .el-tbl--dark .el-tbl-row:last-child { border-bottom: 0; } .el-tbl--dark .el-tbl-row--head, .el-tbl--dark .el-tbl-tx { color: var(--sx-soft-dark); } .el-tbl--dark .el-tbl-pill { border-color: rgba(255, 255, 255, 0.14); } /* benchmark range table — the TP classic: comparables, IQR band, tested party */ .el-tbl-bench { background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 12px; padding: 20px 22px 14px; font-family: var(--ff); font-size: 12.5px; text-align: left; box-shadow: 0 18px 44px -18px rgba(23, 23, 28, 0.10); } .el-tbl-bench-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; } .el-tbl-bench-key { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; } .el-tbl-bench-key i { width: 2px; height: 10px; background: var(--cta-orange); } .el-tbl-bench-body { display: flex; } .el-tbl-bench-names { width: 128px; flex: 0 0 auto; } .el-tbl-bench-names span { display: block; height: 30px; line-height: 30px; font-size: 11.5px; white-space: nowrap; } .el-tbl-bench-plot { flex: 1; position: relative; min-width: 0; } .el-tbl-bench-iqr { position: absolute; top: 2px; bottom: 2px; background: rgba(139, 92, 246, 0.20); } .el-tbl-bench-med { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(139, 92, 246, 0.55); } .el-tbl-bench-tp { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--cta-orange); animation: el-tbl-mark 3.4s ease-in-out infinite; } .el-tbl-bench-track { position: relative; height: 30px; } .el-tbl-bench-track i { position: absolute; top: 12px; height: 6px; border-radius: 3px; background: rgba(33, 33, 33, 0.18); } .el-tbl-bench-vals { width: 62px; flex: 0 0 auto; text-align: right; } .el-tbl-bench-vals span { display: block; height: 30px; line-height: 30px; font-size: 10.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .el-tbl-bench-foot { display: flex; margin-top: 8px; } .el-tbl-bench-foot > b { width: 128px; flex: 0 0 auto; } .el-tbl-bench-foot > b:last-child { width: 62px; } .el-tbl-bench-scale { flex: 1; position: relative; height: 15px; } .el-tbl-bench-scale span { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; } .el-tbl-bench-scale span::before { content: ""; position: absolute; left: 50%; top: -7px; width: 1px; height: 4px; background: #d5d5d5; } /* ledger rows — bare, for in-scene use */ .el-tbl-ledger { font-family: var(--ff); font-size: 12.5px; color: var(--ink); text-align: left; } .el-tbl-ledger-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid rgba(33, 33, 33, 0.12); } .el-tbl-ledger-ent { font-weight: 500; white-space: nowrap; } .el-tbl-ledger-tx { color: var(--ink-soft); white-space: nowrap; } .el-tbl-ledger-amt { margin-left: auto; font-weight: 400; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; } .el-tbl-ledger-row .el-tbl-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; } .el-tbl-dot--green { background: var(--sx-green); } .el-tbl-dot--orange { background: var(--cta-orange); animation: el-pulse 2.8s ease-in-out 0.6s infinite; } .el-tbl-dot--blue { background: var(--blue); } @keyframes el-tbl-mark { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ===== DB — dashboards ===== */ /* light chart panel */ .el-dash-panel { background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 12px; padding: 18px 20px 16px; font-family: var(--ff); text-align: left; box-shadow: 0 18px 44px -18px rgba(23, 23, 28, 0.14); } .el-dash-panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; } .el-dash-panel-sub { margin-left: auto; font-size: 11px; color: var(--ink-soft); } /* KPI tiles */ .el-dash-kpis { display: flex; gap: 12px; } .el-dash-tile { flex: 1; background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 12px; padding: 15px 17px 14px; font-family: var(--ff); text-align: left; } .el-dash-tile .el-label { display: block; margin-bottom: 12px; } .el-dash-num { display: block; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; } .el-dash-delta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 10.5px; letter-spacing: 0.02em; color: var(--ink-soft); border: 1px solid #ececec; border-radius: 999px; padding: 3px 9px; } .el-dash-delta i { width: 5px; height: 5px; border-radius: 50%; background: var(--sx-green); animation: el-pulse 3s ease-in-out infinite; } .el-dash-delta svg { display: block; } .el-dash-kpis .el-dash-tile:nth-child(2) .el-dash-delta i { animation-delay: 1s; } .el-dash-kpis .el-dash-tile:nth-child(3) .el-dash-delta i { animation-delay: 2s; } /* SVG chart atoms */ .el-dash-chart { display: block; } .el-dash-chart text { font-family: var(--ff); } .el-dash-grid { stroke: #ececec; stroke-width: 1; } .el-dash-grid--base { stroke: #e2e2e2; } .el-dash-tick { font-size: 10.5px; fill: var(--ink-soft); letter-spacing: 0.02em; } .el-dash-vlabel { font-size: 11px; font-weight: 500; fill: var(--ink); } .el-dash-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .el-dash-line--coral { stroke: var(--coral); } .el-dash-line--violet { stroke: var(--violet); } .el-dash-line--blue { stroke: var(--blue); } .el-dash-fill--coral { fill: var(--coral); } .el-dash-fill--violet { fill: var(--violet); } .el-dash-fill--blue { fill: var(--blue); } .el-dash-halo { transform-box: fill-box; transform-origin: center; animation: el-dash-ping 2.6s ease-out infinite; } .el-dash-sparkdot { animation: el-pulse 2.8s ease-in-out infinite; } /* bar chart */ .el-dash-bars { display: flex; justify-content: space-between; align-items: flex-end; height: 150px; border-bottom: 1px solid #e2e2e2; padding: 0 6px; } .el-dash-bar { position: relative; width: 16px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--violet) 22%, transparent); } .el-dash-bar--em { background: var(--violet); } .el-dash-bar-val { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 500; color: var(--ink); } .el-dash-bartix { display: flex; justify-content: space-between; padding: 0 6px; margin-top: 9px; } .el-dash-bartix span { width: 16px; text-align: center; font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0.02em; } /* coverage donut — conic triad with 2deg surface gaps */ .el-dash-donut { --el-dash-surface: #ffffff; position: relative; width: 150px; height: 150px; border-radius: 50%; margin: 0 auto; background: conic-gradient( var(--coral) 0deg 160deg, var(--el-dash-surface) 160deg 162deg, var(--violet) 162deg 268deg, var(--el-dash-surface) 268deg 270deg, var(--blue) 270deg 358deg, var(--el-dash-surface) 358deg 360deg); } .el-dash-donut::before { content: ""; position: absolute; inset: 27px; border-radius: 50%; background: var(--el-dash-surface); } .el-dash-donut > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 300; letter-spacing: -0.01em; } .el-dash-donut--s { width: 126px; height: 126px; } .el-dash-donut--s::before { inset: 23px; } .el-dash-donut--s > span { font-size: 23px; } .el-dash-legend { display: flex; justify-content: center; gap: 16px; margin-top: 16px; font-size: 11px; color: var(--ink-soft); } .el-dash-legend span { display: inline-flex; align-items: center; gap: 6px; } .el-dash-legend .el-dot { width: 7px; height: 7px; } /* sparkline rows */ .el-dash-rows { background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 12px; padding: 4px 20px; font-family: var(--ff); text-align: left; box-shadow: 0 18px 44px -18px rgba(23, 23, 28, 0.14); } .el-dash-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; } .el-dash-row + .el-dash-row { border-top: 1px solid var(--hairline); } .el-dash-row-name { font-size: 12.5px; } .el-dash-spark { margin-left: auto; flex: 0 0 auto; display: block; } .el-dash-row-val { font-size: 12.5px; font-weight: 500; min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; } /* composite board (inside .el-win--dark) */ .el-dash-board { display: grid; grid-template-columns: 1fr 1fr 292px; gap: 12px; padding: 18px; } .el-dash-cell--wide { grid-column: 1 / span 2; } .el-dash-cell--tall { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; } /* dark adaptation */ .el-dash-dark .el-dash-tile, .el-dash-dark .el-dash-panel { background: var(--sx-panel-2); border-color: var(--sx-hairline-dark); color: #ffffff; box-shadow: none; } .el-dash-dark .el-dash-delta { color: var(--sx-soft-dark); border-color: var(--sx-hairline-dark); } .el-dash-dark .el-dash-grid { stroke: var(--sx-hairline-dark); } .el-dash-dark .el-dash-tick { fill: var(--sx-soft-dark); } .el-dash-dark .el-dash-vlabel { fill: #ffffff; } .el-dash-dark .el-dash-panel-sub { color: var(--sx-soft-dark); } .el-dash-dark .el-dash-donut { --el-dash-surface: var(--sx-panel-2); } .el-dash-dark .el-dash-legend { color: var(--sx-soft-dark); } @keyframes el-dash-ping { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 0.4; } 80%, 100% { opacity: 0; transform: scale(1.15); } } /* ===== DS — data systems ===== */ .el-sys-tile { width: 120px; height: 96px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; font-size: 11.5px; letter-spacing: 0.01em; font-weight: 400; } .el-sys-tile svg { width: 24px; height: 24px; display: block; opacity: 0.88; } .el-sys-tile span { opacity: 0.92; text-align: center; line-height: 1.25; padding: 0 8px; } .el-sys-tile > .el-iris { width: 22px; height: 22px; } .el-sys-glyph { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .el-sys-row { display: flex; gap: 16px; justify-content: center; } /* DS-3 connector */ .el-sys-link { position: relative; width: 480px; height: 200px; color: #ffffff; } .el-sys-link .el-sys-tile { position: absolute; top: 52px; } .el-sys-link-a { left: 0; } .el-sys-link-b { right: 0; } .el-sys-wire { position: absolute; inset: 0; width: 100%; height: 100%; } .el-sys-wire path { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; } .el-sys-flow { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; offset-rotate: 0deg; offset-path: path("M120 100 C180 100 180 66 240 66 C300 66 300 100 360 100"); animation: el-flow 3.6s linear infinite, el-sys-fade 3.6s linear infinite; } .el-sys-flow--coral { background: var(--coral); box-shadow: 0 0 8px rgba(255, 119, 89, 0.65); } .el-sys-flow--violet { background: var(--violet); box-shadow: 0 0 8px rgba(139, 92, 246, 0.65); animation-delay: -1.8s; } /* canvas-scale connector — hairline wires + glowing flow dots that travel them; offset-path set inline per wire (scene geometry lives in the scene) */ .el-wire { position: absolute; inset: 0; width: 100%; height: 100%; } .el-wire path { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; } .el-wire-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; offset-rotate: 0deg; animation: el-flow 4.2s linear infinite, el-wire-fade 4.2s linear infinite; } .el-wire-dot--coral { background: var(--coral); box-shadow: 0 0 10px 2px rgba(255, 119, 89, 0.55); } .el-wire-dot--violet { background: var(--violet); box-shadow: 0 0 10px 2px rgba(139, 92, 246, 0.55); } @keyframes el-wire-fade { 0%, 4% { opacity: 0; } 12%, 88% { opacity: 1; } 96%, 100% { opacity: 0; } } /* DS-4 pipeline rail */ .el-sys-rail { display: flex; align-items: flex-start; justify-content: center; width: 760px; color: #ffffff; } .el-sys-rail .el-sys-tile, .el-sys-rail .el-sys-doc { width: 132px; height: 106px; gap: 12px; font-size: 12px; } .el-sys-rail .el-sys-tile svg, .el-sys-rail .el-sys-doc svg { width: 26px; height: 26px; } .el-sys-stop { display: flex; flex-direction: column; align-items: center; gap: 16px; } .el-sys-slot { height: 106px; display: flex; align-items: center; } .el-sys-seg { position: relative; width: 160px; height: 1px; flex: 0 0 auto; margin-top: 53px; background: rgba(255, 255, 255, 0.16); } .el-sys-seg-dot { position: absolute; top: 0; left: 0; width: 5px; height: 5px; border-radius: 50%; offset-rotate: 0deg; offset-path: path("M0 0.5 H160"); animation: el-flow 2.8s linear infinite, el-sys-fade 2.8s linear infinite; } .el-sys-seg--late .el-sys-seg-dot { animation-delay: -1.4s; } .el-sys-doc { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; letter-spacing: 0.01em; background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 14px; box-shadow: 0 14px 36px -12px rgba(23, 23, 28, 0.4); } .el-sys-doc svg { display: block; opacity: 0.85; } /* DS-6 dataset status chips — product lineage grammar (TP Warehouse): violet = Calculated, green = Fresh, blue = Source */ .el-schip { display: inline-flex; align-items: center; border-radius: 999px; font-size: 7.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2.5px 7px; line-height: 1; } .el-schip--calc { color: #b9a3ff; border: 1px solid rgba(139, 92, 246, 0.55); } .el-schip--fresh { color: #7fe0a8; border: 1px solid rgba(74, 222, 128, 0.45); } .el-schip--src { color: #9ab1ff; border: 1px solid rgba(76, 110, 230, 0.55); } /* DS-7 greeked action chip — audit-log action pill; outline vs fill via inline glue */ .el-actchip { display: inline-block; width: 34px; height: 11px; border-radius: 999px; } /* DS-8 warehouse rack — the abstract warehouse: outlined rack, shelves of stored slabs (TP Warehouse; shelf heights + slab sizes are scene glue) */ .el-rack { display: flex; flex-direction: column; border: 2px solid rgba(255, 255, 255, 0.92); border-radius: 18px; overflow: hidden; } .el-rack-shelf { flex: 1; display: flex; align-items: flex-end; gap: 12px; padding: 0 18px; border-bottom: 2px solid rgba(255, 255, 255, 0.92); } .el-rack-shelf:last-child { border-bottom: 0; } .el-rack-slab { background: rgba(255, 255, 255, 0.85); border-radius: 4px 4px 0 0; } /* DS-5 store stack */ .el-sys-stack { display: flex; flex-direction: column; align-items: center; color: var(--ink); } .el-sys-slabs { display: flex; flex-direction: column; gap: 7px; width: 236px; } .el-sys-slab { height: 32px; border-radius: 9px; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(33, 33, 33, 0.13); } .el-sys-slab i { width: 6px; height: 6px; border-radius: 50%; background: rgba(33, 33, 33, 0.22); flex: 0 0 auto; } .el-sys-slab b { display: block; height: 6px; border-radius: 3px; background: rgba(33, 33, 33, 0.1); } .el-sys-slab:nth-child(2) b { width: 84px; } .el-sys-slab:nth-child(3) b { width: 116px; } .el-sys-slab--active { background: #ffffff; border-color: rgba(33, 33, 33, 0.45); box-shadow: 0 8px 20px -10px rgba(33, 33, 33, 0.3); animation: el-sys-lift 4.2s ease-in-out infinite; } .el-sys-slab--active i { background: var(--sx-violet-deep); } .el-sys-slab--active b { width: 102px; background: rgba(33, 33, 33, 0.16); } .el-sys-stack-label { margin-top: 18px; font-size: 12.5px; } @keyframes el-sys-fade { 0% { opacity: 0; } 10%, 88% { opacity: 1; } 100% { opacity: 0; } } @keyframes el-sys-lift { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(-4px); } } /* DS-9 landscape map — real-brand logo tiles + focusable node groups for the click-through fabric scene (TP Warehouse). The page's pill switcher posts {sceneFocus:key} into the scene; scene JS sets .is-hot on the matching [data-node] groups and .is-dim on the rest. Logos sit on white tiles so brand colors read on the dark canvas. */ .el-logo-tile { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: #ffffff; border-radius: 12px; box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6); } .el-logo-tile img { display: block; max-width: 72%; max-height: 54%; width: auto; height: auto; } /* the super-small corner chip (hosted-anywhere marks on the warehouse corners) */ .el-logo-tile--chip { border-radius: 8px; } .el-logo-tile--chip img { max-width: 78%; max-height: 64%; } .el-map-node { transition: opacity 0.4s ease; } .el-map-node.is-dim { opacity: 0.16; } .el-map-note { position: absolute; font-size: 11px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); opacity: 0; transform: translateY(5px); transition: opacity 0.4s ease, transform 0.4s ease; } .el-map-node.is-hot .el-map-note { opacity: 1; transform: none; } .el-wire path { transition: opacity 0.4s ease, stroke 0.4s ease; } .el-wire path.is-dim { opacity: 0.15; } .el-wire path.is-hot { stroke: rgba(255, 255, 255, 0.44); } .el-wire-dot.is-dim { visibility: hidden; } /* ===== AG — agents ===== */ /* AG-1 agent chip — iris identity in a hairline pill */ .el-agent-chip { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 999px; padding: 9px 16px 9px 11px; font-family: var(--ff); font-size: 13px; font-weight: 500; color: var(--ink); box-shadow: 0 12px 28px -16px rgba(23, 23, 28, 0.2); } .el-agent-chip .el-dot { margin-left: 3px; } /* AG-2 agent card — chip row + role + greeked work */ .el-agent-card { width: 280px; background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 12px; padding: 20px 22px 24px; box-shadow: 0 20px 48px -20px rgba(23, 23, 28, 0.22); font-family: var(--ff); text-align: left; } .el-agent-card-row { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; } .el-agent-card-row .el-dot { margin-left: auto; } .el-agent-role { font-size: 12px; color: var(--ink-soft); margin: 5px 0 18px 28px; } /* AG-3 org tree — light adaptation of the homepage cockpit chart (cw-node geometry) */ .el-agent-tree { position: relative; width: 560px; height: 172px; font-family: var(--ff); text-align: left; } .el-agent-tree svg { position: absolute; inset: 0; width: 100%; height: 100%; } .el-agent-tree path { stroke: #e0e0e0; stroke-width: 1; fill: none; } .el-agent-node { position: absolute; transform: translateX(-50%); box-sizing: border-box; width: 152px; height: 64px; padding: 10px 11px; background: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; } .el-agent-node--root { width: 200px; height: 50px; } .el-agent-node-name { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; line-height: 1.2; font-weight: 500; color: var(--ink); white-space: nowrap; } .el-agent-node-sub { font-size: 10.5px; line-height: 1.3; color: var(--ink-soft); } .el-agent-dot-you { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cta-orange); } /* AG-4 harness stack — ink ladder, dark commodity to light ownership */ .el-agent-stack { width: 520px; font-family: var(--ff); font-size: 13px; text-align: left; } .el-agent-layer { position: relative; padding: 16px 22px 27px; border-radius: 10px; font-weight: 500; letter-spacing: 0.01em; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .el-agent-layer + .el-agent-layer { margin-top: -11px; } .el-agent-layer .el-label { font-size: 10px; } .el-agent-layer--models { background: var(--sx-panel); color: #ffffff; z-index: 1; } .el-agent-layer--system { background: #3a3a44; color: #ffffff; z-index: 2; box-shadow: 0 -14px 30px -18px rgba(14, 14, 18, 0.55); } .el-agent-layer--domain { background: var(--sand); color: var(--ink); z-index: 3; box-shadow: 0 -14px 30px -18px rgba(14, 14, 18, 0.4); } .el-agent-layer--know { background: #ffffff; color: var(--ink); z-index: 4; border: 1px solid #e0e0e0; box-shadow: 0 -14px 30px -18px rgba(14, 14, 18, 0.3); } /* AG-5 delegation fan — root delegating along curved paths, staggered flow dots */ .el-agent-fan { position: relative; width: 520px; height: 260px; font-family: var(--ff); } .el-agent-fan svg { position: absolute; inset: 0; width: 100%; height: 100%; } .el-agent-fan path { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; fill: none; } .el-agent-fan .el-agent-fan-root, .el-agent-fan .el-agent-fan-leaf { position: absolute; display: inline-flex; align-items: center; border-radius: 999px; color: #ffffff; font-weight: 500; white-space: nowrap; } .el-agent-fan .el-agent-fan-root { left: 30px; top: 110px; gap: 10px; padding: 11px 18px 11px 12px; font-size: 13px; } .el-agent-fan .el-agent-fan-leaf { left: 366px; gap: 8px; padding: 8px 15px 8px 10px; font-size: 12px; } .el-agent-fan .el-agent-fan-leaf .el-iris { width: 14px; height: 14px; } .el-agent-flow { position: absolute; top: 0; left: 0; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px 0 currentColor; animation: el-flow 3.6s linear infinite, el-agent-fade 3.6s linear infinite; } @keyframes el-agent-fade { 0%, 100% { opacity: 0; } 10%, 82% { opacity: 1; } } /* ===== MO — motion primitives ===== */ /* MO-1 — typing */ .el-mo-typing { display: flex; align-items: flex-end; gap: 10px; } .el-mo-bubble { display: inline-flex; align-items: center; gap: 5px; background: #ffffff; border-radius: 16px 16px 16px 5px; padding: 14px 17px; box-shadow: 0 12px 30px -14px rgba(23, 23, 28, 0.2); } .el-mo-bubble i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: el-typedots 1.5s ease-in-out infinite; } .el-mo-bubble i:nth-child(2) { animation-delay: 0.18s; } .el-mo-bubble i:nth-child(3) { animation-delay: 0.36s; } /* MO-2 — writing (looped reveal; shared el-write is one-shot) */ .el-mo-doc { width: 280px; background: #ffffff; border: 1px solid #ececec; border-radius: 12px; padding: 20px 22px; box-shadow: 0 16px 44px -20px rgba(23, 23, 28, 0.14); } .el-mo-doc .el-label { display: block; margin-bottom: 15px; } .el-mo-lines { display: flex; flex-direction: column; gap: 9px; } .el-mo-lines i { display: block; height: 8px; border-radius: 4px; background: currentColor; opacity: 0.12; transform-origin: left center; animation: el-mo-write 5.2s cubic-bezier(0.3, 0.7, 0.3, 1) infinite both; } .el-mo-lastrow { display: flex; align-items: center; gap: 7px; } .el-mo-caret { width: 1.5px; height: 13px; background: var(--ink); animation: el-blink 1.1s infinite; } @keyframes el-mo-write { 0% { transform: scaleX(0); } 7% { transform: scaleX(1); } 80% { transform: scaleX(1); } 88% { transform: scaleX(0); } 100% { transform: scaleX(0); } } /* MO-3 — flow along an S-curve */ .el-mo-flow { position: relative; width: 400px; height: 220px; color: #ffffff; } .el-mo-flow svg { position: absolute; inset: 0; width: 100%; height: 100%; } .el-mo-flow-dot { position: absolute; top: 0; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 14px 2px rgba(255, 255, 255, 0.4); offset-path: path("M 24 176 C 130 176 130 110 200 110 C 270 110 270 44 376 44"); animation: el-flow 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite, el-mo-flowfade 4s linear infinite; } @keyframes el-mo-flowfade { 0% { opacity: 0; } 7% { opacity: 1; } 90% { opacity: 1; } 97% { opacity: 0; } 100% { opacity: 0; } } /* MO-4 — pulse (light pill) */ .el-mo-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink); background: #ffffff; border: 1px solid #e5e5e5; border-radius: 999px; padding: 7px 15px; } .el-mo-live .el-dot { width: 7px; height: 7px; animation: el-pulse 2.2s ease-in-out infinite; } /* MO-5 — arrive (looped el-rise grammar) */ .el-mo-stack { display: flex; flex-direction: column; gap: 10px; width: 320px; } .el-mo-card { display: flex; align-items: center; gap: 9px; background: #ffffff; border-radius: 10px; padding: 13px 15px; box-shadow: 0 12px 28px -16px rgba(23, 23, 28, 0.18); font-size: 12.5px; white-space: nowrap; animation: el-mo-arrive 5.6s cubic-bezier(0.22, 0.68, 0.32, 1) infinite both; } .el-mo-card .el-label { margin-left: auto; font-size: 10px; white-space: nowrap; } .el-mo-card:nth-child(2) { animation-delay: 0.45s; } .el-mo-card:nth-child(3) { animation-delay: 0.9s; } @keyframes el-mo-arrive { 0% { opacity: 0; transform: translateY(14px); } 8% { opacity: 1; transform: none; } 82% { opacity: 1; transform: none; } 90% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(14px); } } /* MO-6 — shimmer */ .el-mo-load { width: 280px; background: #ffffff; border: 1px solid #ececec; border-radius: 12px; padding: 18px 20px 20px; } .el-mo-shimmer { height: 10px; border-radius: 5px; margin-top: 13px; background: linear-gradient(90deg, #ececec 30%, #f8f8f8 50%, #ececec 70%); background-size: 200% 100%; animation: el-shimmer 2.4s linear infinite; } /* MO-7 — grow (looped el-grow-y grammar) */ .el-mo-chart { width: 250px; background: #ffffff; border: 1px solid #ececec; border-radius: 12px; padding: 20px 22px 18px; } .el-mo-bars { display: flex; align-items: flex-end; gap: 12px; height: 78px; margin-top: 15px; padding: 0 3px; border-bottom: 1px solid #e8e8e8; } .el-mo-bars i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(33, 33, 33, 0.14); transform-origin: bottom; animation: el-mo-grow 4.6s cubic-bezier(0.25, 0.7, 0.3, 1) infinite both; } .el-mo-bars i:last-child { background: var(--coral); } @keyframes el-mo-grow { 0% { transform: scaleY(0); } 12% { transform: scaleY(1); } 80% { transform: scaleY(1); } 88% { transform: scaleY(0); } 100% { transform: scaleY(0); } } /* MO-8 — count (@property integer counter) */ @property --el-mo-n { syntax: ""; initial-value: 0; inherits: false; } .el-mo-count { width: 190px; background: #ffffff; border-radius: 12px; padding: 20px 22px 18px; box-shadow: 0 14px 36px -18px rgba(23, 23, 28, 0.16); } .el-mo-count .el-label { display: block; margin-bottom: 8px; } .el-mo-num { font-size: 26px; font-weight: 300; letter-spacing: -0.01em; counter-reset: el-mo-ct var(--el-mo-n); animation: el-mo-count 4.2s cubic-bezier(0.16, 0.7, 0.3, 1) infinite; } .el-mo-num::after { content: counter(el-mo-ct) "%"; } @keyframes el-mo-count { 0% { --el-mo-n: 0; } 62% { --el-mo-n: 94; } 100% { --el-mo-n: 94; } } /* ===== CT — content atoms ===== */ /* CT-1 greeked duo — the abstraction standard, light + dark */ .el-ct-duo { display: flex; gap: 22px; } .el-ct-sample { flex: 1; border-radius: 10px; padding: 20px 22px 26px; } .el-ct-sample--light { background: #ffffff; border: 1px solid #ececec; color: var(--ink); } .el-ct-sample--dark { background: var(--sx-panel); border: 1px solid var(--sx-hairline-dark); color: #ffffff; } .el-ct-sample .el-label { display: block; margin-bottom: 16px; } /* CT-2 entity chips */ .el-ct-chiprow { display: flex; gap: 10px; } .el-ct-chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid #e5e5e5; border-radius: 999px; padding: 7px 14px 7px 12px; font-size: 12px; font-weight: 400; color: var(--ink); background: #ffffff; white-space: nowrap; } .el-ct-glyph { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; } .el-ct-glyph--coral { background: var(--coral); } .el-ct-glyph--violet { background: var(--violet); } .el-ct-glyph--blue { background: var(--blue); } /* CT-3 transaction ledger lines */ .el-ct-ledger { background: #ffffff; border: 1px solid #ececec; border-radius: 10px; overflow: hidden; box-shadow: 0 14px 36px -16px rgba(23, 23, 28, 0.14); } .el-ct-line { display: flex; align-items: center; padding: 14px 18px 14px 16px; } .el-ct-line + .el-ct-line { border-top: 1px solid #f2f2f2; } .el-ct-rule { align-self: stretch; width: 2px; border-radius: 1px; margin-right: 14px; flex: 0 0 auto; } .el-ct-rule--coral { background: var(--coral); } .el-ct-rule--violet { background: var(--violet); } .el-ct-rule--blue { background: var(--blue); } .el-ct-name { font-size: 13px; color: var(--ink); } .el-ct-val { margin-left: auto; padding-left: 24px; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* CT-4 status vocabulary — the canonical pill set */ .el-ct-pills { display: flex; gap: 10px; } .el-ct-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e5e5e5; border-radius: 999px; padding: 6px 13px; font-size: 11.5px; font-weight: 400; color: var(--ink); background: #ffffff; white-space: nowrap; } .el-ct-pill .el-dot { width: 7px; height: 7px; } .el-ct-pill--review .el-dot { animation: el-ct-pulse 2.8s ease-in-out infinite; } /* gentler than el-pulse: still reads at any frozen frame */ @keyframes el-ct-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* ========================================================= OT — other approved elements ========================================================= */ /* mac-dock open — abstract app dock (rounded rects on a glass tray); the cursor glides at constant speed across the row, tiles lift and settle like the macOS dock (rise + slight scale, never colliding), it eases onto one and clicks. 4s loop, everything smooth; the standard scene opener. Brandless abstraction. */ .el-dock { position: relative; width: 368px; height: 100px; } .el-dock-tray { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; border-radius: 18px; padding: 12px 14px; display: flex; align-items: flex-end; gap: 10px; } .el-dock--light .el-dock-tray { background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(23, 23, 28, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px -14px rgba(23, 23, 28, 0.25); } .el-dock--dark .el-dock-tray { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 40px -14px rgba(0, 0, 0, 0.5); } .el-dock-app { width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto; transform-origin: 50% 100%; } .el-dock--light .el-dock-app { background: rgba(33, 33, 33, 0.15); } .el-dock--dark .el-dock-app { background: rgba(255, 255, 255, 0.17); } .el-dock-app:nth-child(1) { animation: el-dock-a0 4s ease-in-out infinite; } .el-dock-app:nth-child(2) { animation: el-dock-a1 4s ease-in-out infinite; } .el-dock-app:nth-child(3) { animation: el-dock-a2 4s ease-in-out infinite; } .el-dock-app:nth-child(4) { animation: el-dock-a3 4s ease-in-out infinite; } .el-dock-app:nth-child(5) { animation: el-dock-a4 4s ease-in-out infinite; } .el-dock-app:nth-child(6) { animation: el-dock-a5 4s ease-in-out infinite; } .el-dock-app:nth-child(7) { animation: el-dock-a6 4s ease-in-out infinite; } /* lift + gentle scale: peak under the cursor, half-lift beside it, whisper beyond (peaks follow the cursor's human velocity profile: slow start, fast cruise, quick stop) */ @keyframes el-dock-a0 { 0%, 4% { transform: translateY(0) scale(1); } 11% { transform: translateY(-9px) scale(1.10); } 22%, 100% { transform: translateY(0) scale(1); } } @keyframes el-dock-a1 { 0%, 10% { transform: translateY(0) scale(1); } 17% { transform: translateY(-9px) scale(1.10); } 28%, 100% { transform: translateY(0) scale(1); } } @keyframes el-dock-a2 { 0%, 16% { transform: translateY(0) scale(1); } 23% { transform: translateY(-9px) scale(1.10); } 33%, 100% { transform: translateY(0) scale(1); } } @keyframes el-dock-a3 { 0%, 21% { transform: translateY(0) scale(1); } 28% { transform: translateY(-9px) scale(1.10); } 40%, 84% { transform: translateY(-4px) scale(1.05); } 92%, 100% { transform: translateY(0) scale(1); } } @keyframes el-dock-a4 { 0%, 30% { transform: translateY(0) scale(1); } 40%, 46% { transform: translateY(-10px) scale(1.12); } 49% { transform: translateY(-7px) scale(1.08); } 52%, 84% { transform: translateY(-10px) scale(1.12); } 94%, 100% { transform: translateY(0) scale(1); } } @keyframes el-dock-a5 { 0%, 32% { transform: translateY(0) scale(1); } 40%, 84% { transform: translateY(-4px) scale(1.05); } 92%, 100% { transform: translateY(0) scale(1); } } @keyframes el-dock-a6 { 0%, 35% { transform: translateY(0) scale(1); } 42%, 84% { transform: translateY(-2px) scale(1.02); } 90%, 100% { transform: translateY(0) scale(1); } } /* cursor: tip is the svg's top-left; constant-velocity glide, one ease-out stop */ .el-dock-cursor { position: absolute; left: 14px; top: 40px; width: 15px; height: 19px; animation: el-dock-cursor 4s ease-in-out infinite; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); z-index: 2; } /* human hand profile: eases into motion, fast cruise, stops fairly quickly */ @keyframes el-dock-cursor { 0% { transform: translate(-28px, 0); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.7, 0.26); } 5% { opacity: 1; } 10% { transform: translate(8px, 0); animation-timing-function: linear; } 30% { transform: translate(185px, 0); animation-timing-function: cubic-bezier(0.25, 0.63, 0.5, 1); } 40%, 46% { transform: translate(220px, 0); } 49% { transform: translate(220px, 2px); } 52%, 88% { transform: translate(220px, 0); opacity: 1; } 94%, 100% { transform: translate(220px, 0); opacity: 0; } } /* click ping, centered on the cursor tip */ .el-dock-ping { position: absolute; left: 224.5px; top: 32.5px; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; opacity: 0; animation: el-dock-ping 4s linear infinite; } .el-dock--light .el-dock-ping { color: var(--ink); } .el-dock--dark .el-dock-ping { color: #ffffff; } @keyframes el-dock-ping { 0%, 46% { opacity: 0; transform: scale(0.3); } 49% { opacity: 0.4; transform: scale(0.55); } 58%, 100% { opacity: 0; transform: scale(1.5); } } /* user brief — the ask being typed to the agent team, on a glass panel (GL-2 grammar). Modes: gl-light/gl-dark wrapper; states: el-brief--still (message complete) / el-brief--typing (lines type in sequence, caret rides the edge). Per-line inline vars: --w final width · --tw type duration · --td start delay. */ .el-brief { width: 640px; padding: 28px 34px 30px; text-align: left; font-size: 19px; line-height: 1.55; border-radius: 16px; } .el-brief > .el-label { display: block; margin-bottom: 12px; } .el-brief-line { display: flex; gap: 10px; margin-top: 7px; min-height: 1.55em; } .el-brief-line > i { font-style: normal; opacity: 0.5; flex: 0 0 auto; } .el-brief-line--lead { margin-top: 0; } .el-brief-line--wrap { padding-left: 24px; margin-top: 2px; } .el-brief-type { display: inline-block; white-space: nowrap; overflow: hidden; vertical-align: bottom; max-width: 100%; } /* reveal via max-width with generous overshoot: the box settles at the text's own width, so no font-rendering difference can ever clip a glyph (real-Chrome vs headless metrics differ — learned 2026-08-03) */ .el-brief--typing .el-brief-type { animation: el-brief-type var(--tw, 1.6s) steps(28, end) var(--td, 0s) both; } @keyframes el-brief-type { from { max-width: 0; } to { max-width: var(--w, 100%); } } .el-brief--typing .el-brief-type::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; vertical-align: -0.12em; margin-left: 2px; background: currentColor; opacity: 0; animation: el-brief-caret var(--tw, 1.6s) linear var(--td, 0s) both; } @keyframes el-brief-caret { 0%, 96% { opacity: 0.85; } 100% { opacity: 0; } } .el-brief--still .el-brief-type { width: auto; } /* team-pill header on a brief/message — ONE source for library cards and scenes (was inline styles in five places; promoted 2026-08-04 so a redesign edits here) */ .el-brief-teams { display: flex; gap: 8px; margin-bottom: 16px; } .el-brief-teams .gl-pill { padding: 5px 13px; font-size: 12.5px; gap: 7px; } .el-brief-teams .el-iris { width: 13px; height: 13px; } /* ========================================================= FILE-TYPE VOCABULARY — canonical across all visuals (CT-5). One stroke page glyph (single mask, defined once) + type letters in an accent from our own palette — never vendor branding. The glyph inherits currentColor, so it adapts light/dark; letters carry the accent. ========================================================= */ .el-file { position: relative; display: inline-block; width: 26px; height: 32px; flex: 0 0 auto; font-family: var(--ff); } .el-file i { position: absolute; inset: 0; background: currentColor; opacity: 0.5; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } .el-file b { position: absolute; left: 0; bottom: 6px; padding: 2.5px 3.5px 2px; border-radius: 3px; background: var(--fa, #75757e); color: #ffffff; font-size: 7px; font-weight: 500; letter-spacing: 0.05em; line-height: 1; } .el-file--doc { --fa: var(--blue); } .el-file--xls { --fa: var(--sx-green-deep); } .el-file--csv { --fa: var(--sx-green-deep); } .el-file--pdf { --fa: var(--accent-strong); } .el-file--ppt { --fa: var(--coral); } .el-file--xml { --fa: var(--violet); } .el-file--eml, .el-file--zip { --fa: #75757e; } .el-file-row { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; } /* step cards — the team's process as compact cards beneath the ask (CH-15/16): check sources → consult teams → align with the user → draft attached. Bento arrangement: two columns, cards stack, whole grid no wider than the ask. */ .el-steprow { display: flex; gap: 14px; align-items: stretch; } .el-bento { display: flex; gap: 14px; } .el-bento-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .el-bento .el-step { width: auto; flex: 1; } .el-step-items { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; } .el-step { width: 180px; padding: 14px 16px 16px; border-radius: 14px; display: flex; flex-direction: column; gap: 9px; text-align: left; } .el-step-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; } .el-step-item .el-sys-glyph, .el-step-item .el-iris { width: 13px; height: 13px; flex: 0 0 auto; } .el-step-item .el-dot { width: 6px; height: 6px; } /* ai <-> user back-and-forth: iris and portrait joined by a flowing wire */ .el-duo { position: relative; display: flex; align-items: center; justify-content: space-between; flex: 1; min-height: 54px; } .el-duo .el-iris { width: 18px; height: 18px; } .el-duo img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .el-duo-wire { position: absolute; left: 24px; right: 36px; top: 50%; height: 1px; background: currentColor; opacity: 0.22; } .el-duo-dot { position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--coral); animation: el-duo-fwd 2.4s ease-in-out infinite; } .el-duo-dot--back { background: var(--violet); animation-name: el-duo-back; animation-delay: -1.2s; } @keyframes el-duo-fwd { from { left: 12%; } to { left: 78%; } } @keyframes el-duo-back { from { left: 78%; } to { left: 12%; } } .el-srcdock.el-srcdock--left { justify-content: flex-start; } /* attachment pill — a file handed into the conversation (DC-5's name/meta grammar, sized for in-message use; name ellipsizes, never clips a glyph) */ .el-att { display: inline-flex; align-items: center; gap: 13px; max-width: 100%; border-radius: 12px; padding: 8px 18px 8px 9px; text-align: left; font-family: var(--ff); } .el-att--light { background: #ffffff; color: var(--ink); border: 1px solid #e9e9e9; box-shadow: 0 12px 32px -16px rgba(23, 23, 28, 0.14); } .el-att--dark { background: rgba(255, 255, 255, 0.07); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.13); } .el-att-tile { width: 46px; height: 46px; border-radius: 9px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .el-att--light .el-att-tile { background: #f6f5f1; } .el-att--dark .el-att-tile { background: rgba(255, 255, 255, 0.08); } .el-att-body { min-width: 0; } .el-att-name { display: block; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .el-att-meta { display: block; font-size: 11.5px; margin-top: 3px; color: var(--ink-soft); } .el-att--dark .el-att-meta { color: var(--sx-soft-dark); } /* strike-through revision — a plan line the team corrects itself (CH-13/14); per-use delay: style="--sd:.3s" */ .el-strike { position: relative; display: inline-block; animation: el-strike-dim 0.5s ease var(--sd, 0s) both; } .el-strike::after { content: ""; position: absolute; left: -1px; right: -1px; top: 0.62em; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; animation: el-grow-x 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) var(--sd, 0s) both; } @keyframes el-strike-dim { 0%, 60% { opacity: 1; } 100% { opacity: 0.4; } } /* source dock — ONE uniform pill grammar for everything the team consults: its stores, other agent teams, playbooks, SOPs (CD-3/4). Icon varies, shape never. */ .el-srcdock { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .el-srcdock .gl-pill { padding: 5px 13px; font-size: 12.5px; gap: 7px; } .el-srcdock .el-iris { width: 13px; height: 13px; } .el-srcdock .el-sys-glyph { width: 14px; height: 14px; flex: 0 0 auto; } /* review flag — the draft self-reports its weak points (DC-6) */ .el-flag { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; background: #ffffff; color: var(--ink); border: 1px solid #e9e9e9; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-family: var(--ff); box-shadow: 0 10px 26px -12px rgba(23, 23, 28, 0.30); } .el-flag .el-dot { width: 7px; height: 7px; } .el-doc-flagged { position: relative; display: inline-block; } .el-doc-flags { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; } /* rich user message — avatar, the ask, files attached (CH-11/12; el-brief scale) */ .el-msg { width: 640px; padding: 26px 30px 26px; border-radius: 16px; display: flex; gap: 16px; text-align: left; font-size: 19px; line-height: 1.55; } .el-msg-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .el-msg-body { flex: 1; min-width: 0; padding-top: 7px; } .el-msg-text { margin: 0; } .el-msg-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } /* ========================================================= WP — work products (the deliverable center pieces) Realistic document mockups + satellite elements for the x-agent page scenes. Library mockup titles always read "Document Name" — compositions swap in the real name (Master File, Local File, GIR, ...). Satellite categories, each with its OWN grammar (never all boxes): source node chip + stem where data comes from content floating TOC rows the deliverable's subparts characteristic hairline pills traits (Local language, ...) framework citation lines OECD TPG Ch. V, BEPS 13, ... status sign-off chip Draft -> Reviewed -> Final Compositions (.el-wp-comp) place mockup + satellites in 4 positions (--a --b --c --d) so pages don't repeat on scroll. Labels TP-expert-reviewed 2026-08-05. ========================================================= */ /* ---- shared A4 page (210/297) ---- */ .el-wp-page { width: var(--wpw, 340px); aspect-ratio: 210 / 297; display: flex; flex-direction: column; text-align: left; background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 6px; box-shadow: 0 26px 60px -22px rgba(23, 23, 28, 0.26); padding: 26px 30px 22px; font-family: var(--ff); position: relative; } /* greeked placeholder bar — the wp mockups simulate text, they don't write it (Max 2026-08-05: real text only on the anchors — Document Name, form no, key figures; everything else is bars at realistic document proportion) */ .el-wp-bar { display: block; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.13; } .el-wp-bar--micro { height: 3px; opacity: 0.16; } /* ---- WP report cover — title block upper-middle, meta ledger low ---- */ .el-wp-client { font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); } .el-wp-cover-block { margin-top: 30%; } .el-wp-cover-block .el-label { font-size: 7px; letter-spacing: 0.15em; opacity: 0.5; } .el-wp-cover-title { font-size: 15.5px; font-weight: 300; letter-spacing: -0.005em; margin-top: 8px; } .el-wp-cover-entity { font-size: 10.5px; color: var(--ink-soft); margin-top: 7px; } .el-wp-ledger { margin-top: auto; display: grid; gap: 9px; } .el-wp-ledger-row { display: grid; grid-template-columns: 78px 1fr; gap: 14px; align-items: center; font-size: 9.5px; } .el-wp-ledger-row b { font-weight: 400; color: var(--ink-soft); } .el-wp-foot { display: flex; justify-content: space-between; align-items: center; font-size: 8.5px; letter-spacing: 0.06em; color: var(--ink-soft); border-top: 1px solid #f2f2f2; padding-top: 10px; margin-top: 15px; } .el-wp-foot .el-wp-bar { width: 76px; } /* ---- WP return / disclosure form — the 5472 grammar: dense boxed field grid, heavy rule under the head, part bands, shared hairlines, tiny type ---- */ .el-wp-page--form { padding: 18px 20px 15px; } .el-wp-formhead { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; border-bottom: 1.5px solid var(--ink); padding-bottom: 9px; } .el-wp-form-no { font-size: 7.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--ink); padding: 3px 6px; border-radius: 1.5px; white-space: nowrap; } .el-wp-formhead-mid { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; } .el-wp-form-title { font-size: 10.5px; font-weight: 500; letter-spacing: -0.005em; } .el-wp-form-yr { font-size: 6.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .el-wp-partband { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 8px; border-top: 1px solid #dedede; } .el-wp-partband b { font-weight: 500; font-size: 6px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .el-wp-partband .el-wp-bar { width: 84px; } .el-wp-formgrid { border: 1px solid #e2e2e2; margin-top: 6px; } .el-wp-formgrid-row { display: grid; border-top: 1px solid #e9e9e9; } .el-wp-formgrid-row:first-child { border-top: 0; } .el-wp-cell { padding: 4px 6px 5px; border-left: 1px solid #e9e9e9; min-width: 0; } .el-wp-cell:first-child { border-left: 0; } .el-wp-cell .el-wp-bar--micro { margin-bottom: 4px; } .el-wp-formtbl { border: 1px solid #e2e2e2; margin-top: 6px; } .el-wp-formtbl-row { display: grid; grid-template-columns: 1.25fr 1fr 0.75fr 0.8fr; align-items: center; border-top: 1px solid #eeeeee; } .el-wp-formtbl-row:first-child { border-top: 0; } .el-wp-formtbl-row--head { background: #fafafa; } .el-wp-formtbl-row > span { padding: 4.5px 6px; border-left: 1px solid #eeeeee; min-width: 0; display: flex; align-items: center; } .el-wp-formtbl-row > span:first-child { border-left: 0; } .el-wp-formtbl-row .n { justify-content: flex-end; } .el-wp-formtbl-row .n .el-wp-bar { width: 58%; } .el-wp-check { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .el-wp-check i { width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 1px; flex: 0 0 auto; display: grid; place-items: center; } .el-wp-check svg { display: block; } .el-wp-check--off i { border-color: #cfcfcf; } .el-wp-check .el-wp-bar { width: 118px; } .el-wp-check--off .el-wp-bar { width: 92px; } /* ---- WP GIR (Pillar Two) — schedule grammar, greeked heads, real figures ---- */ .el-wp-girtbl { margin-top: 6px; } .el-wp-girtbl-row { display: grid; grid-template-columns: 1.1fr 0.95fr 1fr 0.55fr 0.8fr; gap: 9px; align-items: center; padding: 5px 0; border-bottom: 1px solid #f2f2f2; } .el-wp-girtbl-row--head { font-size: 5.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 4px; } .el-wp-girtbl-row--head span:nth-child(n+2), .el-wp-girtbl-num { text-align: right; } .el-wp-girtbl-row--head .el-wp-bar--micro { justify-self: start; } .el-wp-girtbl-row--head .el-wp-bar--micro.n { justify-self: end; } .el-wp-girtbl-row > .el-wp-bar.n { justify-self: end; width: 58%; } .el-wp-girtbl-num { font-size: 7px; color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .el-wp-girtbl-num--soft { color: var(--ink-soft); } .el-wp-girtbl-num--flag { color: var(--cta-orange); } /* ---- WP workbook — the benchmark working file ---- */ .el-wp-xls { width: var(--wpxw, 560px); background: #ffffff; color: var(--ink); border: 1px solid #ececec; border-radius: 10px; overflow: hidden; box-shadow: 0 24px 56px -22px rgba(23, 23, 28, 0.22); font-family: var(--ff); text-align: left; } .el-wp-xls-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px solid #f0f0f0; } .el-wp-xls-name { font-size: 9px; color: var(--ink-soft); } .el-wp-xls-fx { display: flex; align-items: center; gap: 9px; padding: 5px 14px; border-bottom: 1px solid #f0f0f0; } .el-wp-xls-fx b { font-size: 8px; font-weight: 400; font-style: italic; color: var(--ink-soft); } .el-wp-xls-fx i { flex: 1; height: 12px; border: 1px solid #f0f0f0; border-radius: 3px; } .el-wp-xls-grid { display: grid; grid-template-columns: 26px 1.5fr 1fr 1fr 1fr 1fr; } .el-wp-xls-grid > span { border-right: 1px solid #f4f4f4; border-bottom: 1px solid #f4f4f4; padding: 4.5px 7px; min-width: 0; position: relative; display: flex; align-items: center; } .el-wp-xls-grid > .h { justify-content: center; background: #fafafa; color: var(--ink-soft); font-size: 6.5px; letter-spacing: 0.06em; } .el-wp-xls-grid > .t i, .el-wp-xls-grid > .n i { display: block; height: 3.5px; border-radius: 2px; background: currentColor; opacity: 0.13; width: 78%; } .el-wp-xls-grid > .n { justify-content: flex-end; } .el-wp-xls-grid > .n i { width: 52%; } .el-wp-xls-grid > .sel { box-shadow: inset 0 0 0 1px var(--violet); background: rgba(139, 92, 246, 0.05); } .el-wp-xls-grid > .sel--first::before { content: ""; position: absolute; inset: -1px auto auto -1px; width: 4px; height: 4px; background: var(--violet); } .el-wp-xls-tabs { display: flex; align-items: center; gap: 3px; padding: 6px 12px 7px; border-top: 1px solid #f0f0f0; } .el-wp-xls-tab { font-size: 8px; color: var(--ink-soft); padding: 3.5px 10px; border-radius: 5px; display: flex; align-items: center; } .el-wp-xls-tab--on { color: var(--ink); background: var(--sand); font-weight: 500; } .el-wp-xls-tab .el-wp-bar--micro { width: 34px; } /* ---- satellites · SOURCE — node chip + stem toward the document ---- */ .el-wp-src { display: inline-flex; align-items: center; gap: 10px; background: #ffffff; color: var(--ink); border: 1px solid #e9e9e9; border-radius: 10px; padding: 9px 15px 9px 12px; font-size: 12px; white-space: nowrap; font-family: var(--ff); box-shadow: 0 12px 32px -16px rgba(23, 23, 28, 0.14); } .el-wp-src svg { display: block; flex: 0 0 auto; color: var(--blue); } .el-wp-satrow { display: flex; align-items: center; } .el-wp-stem { width: 42px; height: 1px; background: #d9d9d9; position: relative; flex: 0 0 auto; } .el-wp-stem::after { content: ""; position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); left: -3px; } .el-wp-satrow--r .el-wp-stem::after { left: auto; right: -3px; } /* ---- satellites · CONTENT — floating TOC rows (no box) ---- */ .el-wp-toc { display: flex; flex-direction: column; text-align: left; font-family: var(--ff); } .el-wp-toc-item { display: flex; align-items: baseline; gap: 11px; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink); padding: 10px 2px; border-bottom: 1px solid rgba(23, 23, 28, 0.12); min-width: 218px; } .el-wp-toc-item i { font-style: normal; font-size: 9.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .el-wp-toc-item:first-child { padding-top: 2px; } /* ---- satellites · CHARACTERISTIC — hairline pills ---- */ .el-wp-tag { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #e5e5e5; border-radius: 999px; padding: 7px 15px 7px 12px; font-size: 11.5px; color: var(--ink); white-space: nowrap; font-family: var(--ff); } .el-wp-tag svg { display: block; flex: 0 0 auto; color: var(--violet); } /* ---- satellites · FRAMEWORK — citation line, gradient underline ---- */ .el-wp-cite { display: inline-block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); padding-bottom: 5px; white-space: nowrap; font-family: var(--ff); background: var(--grad-underline) bottom / 100% 1px no-repeat; } /* ---- satellites · STATUS — sign-off chip (Draft -> Reviewed -> Final) ---- */ .el-wp-status { display: inline-flex; align-items: center; gap: 8px; background: #ffffff; border: 1px solid #e9e9e9; border-radius: 999px; padding: 7px 14px 7px 11px; font-size: 11.5px; color: var(--ink); white-space: nowrap; font-family: var(--ff); box-shadow: 0 10px 26px -12px rgba(23, 23, 28, 0.20); } .el-wp-status .el-dot { width: 7px; height: 7px; } .el-wp-status b { font-weight: 500; } .el-wp-status span { color: var(--ink-soft); font-size: 10.5px; } /* ---- compositions — mockup + satellites, 4 positions ---- */ .el-wp-comp { display: flex; align-items: center; justify-content: center; gap: 4px; } .el-wp-sat { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .el-wp-sat .el-label { font-size: 8.5px; } .el-wp-satgroup { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .el-wp-comp--b { flex-direction: row-reverse; } .el-wp-comp--b .el-wp-sat { align-items: flex-end; } .el-wp-comp--c .el-wp-page { margin: 0 10px; } .el-wp-comp--d .el-wp-page { transform: rotate(-2deg); } .el-wp-comp--d { flex-direction: column; gap: 26px; } .el-wp-comp--d .el-wp-sat { flex-direction: row; align-items: center; gap: 16px; } .el-wp-xls-bar .el-aiw-mac { margin-bottom: 0; } /* BG-9 photo ground under a scene (moved out of scene-002* on 2026-08-22): blurred photo + veil behind the canvas; the image itself comes from the scene via an inline background-image, the amounts via --pb-* vars (defaults = hero option A) */ .photo-bg { position: absolute; inset: -6%; z-index: 0; background-position: center; background-size: cover; background-repeat: no-repeat; filter: blur(var(--pb-blur, 16px)) saturate(var(--pb-sat, .85)); transform: scale(var(--pb-scale, 1.06)); } .photo-veil { position: absolute; inset: 0; z-index: 0; background: rgba(14,14,18, var(--pb-veil, .48)); } .photo-veil.grad { background: linear-gradient(180deg, rgba(14,14,18, calc(var(--pb-veil, .48) - .15)) 0%, rgba(14,14,18, calc(var(--pb-veil, .48) + .25)) 100%); } /* edge-fix switches for the hero stage (scene-002c mock): overflow lets zoomed beats bleed; mask fades the stage edges */ body.fix-overflow .scene-wrap > .el-canvas { overflow: visible; } body.fix-mask .scene-wrap > .el-canvas { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); }