@import url("https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap");@import "https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap"; /* ============================================================================ ASTRYX TOKENS — @astryxdesign/theme-neutral Every value below is the published Astryx token value. Colors use light-dark() exactly as Astryx does; color-scheme is flipped by [data-mode] on . No token from any other design system appears in this file. ========================================================================== */ :root { color-scheme: light; } [data-mode="dark"] { color-scheme: dark; } :root { /* --- color · core ------------------------------------------------------ */ --color-accent: light-dark(#262626, #ebebeb); --color-accent-muted: light-dark(#f1f1f1, #262626); --color-on-accent: light-dark(#ffffff, #171717); --color-neutral: light-dark(#0000000F, #FFFFFF1A); --color-background-surface: light-dark(#ffffff, #262626); --color-background-body: light-dark(#f1f1f1, #1b1b1b); --color-background-card: light-dark(#ffffff, #1b1b1b); --color-background-popover: light-dark(#ffffff, #1b1b1b); --color-background-muted: light-dark(#f1f1f1, #1b1b1b); --color-background-inverted: light-dark(#0A1317, #FFFFFF); --color-overlay: light-dark(#00000080, #000000CC); --color-overlay-hover: light-dark(#0000000D, #FFFFFF0D); --color-overlay-pressed: light-dark(#0000001A, #FFFFFF1A); /* --- color · text + icon ---------------------------------------------- */ --color-text-primary: light-dark(#171717, #fafafa); --color-text-secondary: light-dark(#525252, #a3a3a3); --color-text-disabled: light-dark(#a3a3a3, #525252); --color-text-accent: light-dark(#262626, #ebebeb); --color-on-dark: #ffffff; --color-on-light: #171717; --color-icon-primary: light-dark(#171717, #fafafa); --color-icon-secondary: light-dark(#737373, #a3a3a3); --color-icon-disabled: light-dark(#a3a3a3, #525252); /* --- color · status ---------------------------------------------------- */ --color-success: light-dark(#007004, #9fe59b); --color-success-muted: light-dark(#c5e5c0, #84c9803D); --color-on-success: light-dark(#ffffff, #171717); --color-error: light-dark(#a50c25, #ffc6c1); --color-error-muted: light-dark(#facecb, #ff9e973D); --color-on-error: light-dark(#ffffff, #171717); --color-warning: light-dark(#745b00, #fdcf4f); --color-warning-muted: light-dark(#f8da9d, #deb4333D); --color-on-warning: #171717; /* --- color · hue families (subset used by this document) --------------- */ --color-background-blue: light-dark(#c4ddfb, #9eb7ff3D); --color-border-blue: light-dark(#b1c9e7, #6d9cfe); --color-icon-blue: light-dark(#00458c, #9eb7ff); --color-text-blue: light-dark(#00458c, #c7d3ff); --color-background-gray: light-dark(#e5e5e5, #FFFFFF1A); --color-border-gray: light-dark(#d4d4d4, #262626); --color-icon-gray: light-dark(#525252, #a3a3a3); --color-text-gray: light-dark(#262626, #e5e5e5); --color-background-green: light-dark(#c5e5c0, #84c9803D); --color-border-green: light-dark(#b2d1ac, #69ad67); --color-text-green: light-dark(#0c5700, #9fe59b); --color-background-orange: light-dark(#fad0b5, #ffa2583D); --color-border-orange: light-dark(#e6bda2, #e2883e); --color-text-orange: light-dark(#6e3500, #ffc9a2); --color-background-purple: light-dark(#eccef3, #f297ff3D); --color-border-purple: light-dark(#d8bbdf, #dd74f0); --color-text-purple: light-dark(#700084, #fac1ff); --color-background-red: light-dark(#facecb, #ff9e973D); --color-border-red: light-dark(#e6bab8, #ff6f6c); --color-text-red: light-dark(#89001a, #ffc6c1); --color-background-teal: light-dark(#a5e3d6, #7ec6b83D); --color-border-teal: light-dark(#94d6c8, #63ab9d); --color-text-teal: light-dark(#005348, #99e2d3); --color-background-yellow: light-dark(#f8da9d, #deb4333D); --color-border-yellow: light-dark(#e4c279, #c0990e); --color-text-yellow: light-dark(#584400, #fdcf4f); /* --- color · data (presence + charts) ---------------------------------- */ --color-data-categorical-blue: #0171E3; --color-data-categorical-orange: #EB6E00; --color-data-categorical-purple: #6B1EFD; --color-data-categorical-green: #0B991F; --color-data-categorical-pink: #F351C0; --color-data-categorical-cyan: #0171A4; --color-data-categorical-red: #F5394F; --color-data-categorical-teal: #08A3A3; --color-data-neutral: light-dark(#8494A3, #8C939B); --color-data-blue-1: #DBECFF; --color-data-blue-3: #2694FE; --color-data-gray-1: light-dark(#F1F4F7, #F2F4F6); --color-data-gray-2: light-dark(#CCD3DB, #D0D3D6); /* --- color · structure -------------------------------------------------- */ --color-border: light-dark(#00000014, #FFFFFF1A); --color-border-emphasized: light-dark(#d4d4d4, #525252); --color-skeleton: light-dark(#ebebeb, #525252); --color-track: light-dark(#CCD3DB, #5A5E66); --color-shadow: light-dark(#0000001A, #0000004D); --color-syntax-keyword: light-dark(#700084, #efa8ff); --color-syntax-string: light-dark(#005600, #a6d2a2); --color-syntax-comment: light-dark(#737373, #a3a3a3); --color-syntax-function: light-dark(#00458c, #a0caff); --color-syntax-background: light-dark(#fafafa, #0a0a0a); /* --- spacing · 4px base unit ------------------------------------------- */ --spacing-0: 0px; --spacing-0-5: 2px; --spacing-1: 4px; --spacing-1-5: 6px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px; --spacing-7: 28px; --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px; --spacing-11: 44px; --spacing-12: 48px; /* --- size · control heights -------------------------------------------- */ --size-element-sm: 28px; --size-element-md: 32px; --size-element-lg: 36px; /* --- border + focus ----------------------------------------------------- */ --border-width: 1px; --focus-outline-width: 2px; --focus-outline-style: solid; --focus-outline-color: var(--color-accent); --focus-outline-offset: 3px; /* --- radius · inner → element → container → page ----------------------- */ --radius-none: 0px; --radius-inner: 8px; --radius-element: 12px; --radius-container: 16px; --radius-page: 32px; --radius-chat: 28px; --radius-full: 9999px; /* --- elevation · composed from --color-shadow --------------------------- */ --shadow-low: 0 1px 2px var(--color-shadow); --shadow-med: 0 4px 12px var(--color-shadow); --shadow-high: 0 12px 32px var(--color-shadow); --shadow-inset-hover: inset 0 0 0 1px var(--color-border-emphasized); --shadow-inset-selected: inset 0 0 0 2px var(--color-accent); --shadow-inset-success: inset 0 0 0 2px var(--color-success); --shadow-inset-warning: inset 0 0 0 2px var(--color-warning); --shadow-inset-error: inset 0 0 0 2px var(--color-error); /* --- motion ------------------------------------------------------------- */ --duration-fast-min: 130ms; --duration-fast: 175ms; --duration-fast-max: 230ms; --duration-medium-min: 310ms; --duration-medium: 410ms; --duration-medium-max: 550ms; --duration-slow-min: 730ms; --duration-slow: 975ms; --duration-slow-max: 1300ms; --ease-standard: cubic-bezier(0.24, 1, 0.4, 1); /* --- typography · geometric scale, base 14 × ratio 1.2 ------------------ */ --font-family-body: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-family-heading: var(--font-family-body); --font-family-code: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-size-4xs: 0.375rem; --font-size-3xs: 0.4375rem; --font-size-2xs: 0.5rem; --font-size-xs: 0.625rem; --font-size-sm: 0.75rem; --font-size-base: 0.875rem; --font-size-lg: 1.0625rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.8125rem; --font-size-4xl: 2.1875rem; --font-size-5xl: 2.625rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --text-display-1-size: var(--font-size-5xl); --text-display-1-leading: 1.2381; --text-display-2-size: var(--font-size-4xl); --text-display-2-leading: 1.2571; --text-display-3-size: var(--font-size-3xl); --text-display-3-leading: 1.2414; --text-heading-1-size: var(--font-size-2xl); --text-heading-1-leading: 1.3333; --text-heading-2-size: var(--font-size-xl); --text-heading-2-leading: 1.4; --text-heading-3-size: var(--font-size-lg); --text-heading-3-leading: 1.4118; --text-heading-4-size: var(--font-size-base); --text-heading-4-leading: 1.4286; --text-heading-5-size: var(--font-size-sm); --text-heading-5-leading: 1.6667; --text-heading-6-size: var(--font-size-xs); --text-heading-6-leading: 1.6; --text-body-size: var(--font-size-base); --text-body-leading: 1.4286; --text-large-size: var(--font-size-lg); --text-large-leading: 1.4118; --text-label-size: var(--font-size-base); --text-label-leading: 1.4286; --text-supporting-size: var(--font-size-sm); --text-supporting-leading: 1.6667; --text-code-size: var(--font-size-base); --text-code-leading: 1.4286; /* --- document-local layout constants ----------------------------------- */ --nav-w: 268px; } /* ============================================================================ BASE ========================================================================== */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--color-background-body); color: var(--color-text-primary); font-family: var(--font-family-body); font-size: var(--text-body-size); line-height: var(--text-body-leading); font-weight: var(--font-weight-normal); -webkit-font-smoothing: antialiased; } :focus-visible { outline: var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color); outline-offset: var(--focus-outline-offset); } ::selection { background: var(--color-accent); color: var(--color-on-accent); } /* ============================================================================ SHELL · Astryx Layout / LayoutPanel / LayoutContent ========================================================================== */ .shell { display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr); min-height: 100vh; } .panel { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--color-background-surface); border-right: var(--border-width) solid var(--color-border); padding: var(--spacing-5) var(--spacing-4) var(--spacing-8); } .brand { display: flex; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-1); } .brand-mark { width: 26px; height: 26px; border-radius: var(--radius-inner); background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); } .brand-name { font-weight: var(--font-weight-semibold); font-size: var(--text-heading-4-size); letter-spacing: -0.01em; } .brand-sub { font-size: var(--text-supporting-size); color: var(--color-text-secondary); margin: 0 0 var(--spacing-5) 34px; } .navgroup { margin-bottom: var(--spacing-5); } .navgroup-label { font-size: var(--text-heading-6-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); padding: 0 var(--spacing-2) var(--spacing-2); } .navlink { display: flex; align-items: center; gap: var(--spacing-2); height: var(--size-element-md); padding: 0 var(--spacing-2); border-radius: var(--radius-inner); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-body-size); transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); } .navlink:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); } .navlink .idx { font-family: var(--font-family-code); font-size: var(--font-size-xs); color: var(--color-text-disabled); min-width: 16px; } .content { padding: var(--spacing-10) var(--spacing-10) var(--spacing-12); max-width: 1120px; } .mode-toggle { position: fixed; top: var(--spacing-4); right: var(--spacing-4); z-index: 50; height: var(--size-element-md); padding: 0 var(--spacing-3); border-radius: var(--radius-element); border: var(--border-width) solid var(--color-border); background: var(--color-background-surface); color: var(--color-text-primary); font-family: var(--font-family-body); font-size: var(--text-label-size); font-weight: var(--font-weight-medium); cursor: pointer; box-shadow: var(--shadow-low); transition: box-shadow var(--duration-fast) var(--ease-standard); } .mode-toggle:hover { box-shadow: var(--shadow-med); } /* ============================================================================ PROSE ========================================================================== */ .kicker { font-size: var(--text-heading-6-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-text-secondary); margin-bottom: var(--spacing-2); } h1 { font-size: var(--text-display-3-size); line-height: var(--text-display-3-leading); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; margin: 0 0 var(--spacing-3); } h2 { font-size: var(--text-heading-1-size); line-height: var(--text-heading-1-leading); font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; margin: 0 0 var(--spacing-2); } h3 { font-size: var(--text-heading-3-size); line-height: var(--text-heading-3-leading); font-weight: var(--font-weight-semibold); margin: var(--spacing-6) 0 var(--spacing-3); } h4 { font-size: var(--text-heading-4-size); line-height: var(--text-heading-4-leading); font-weight: var(--font-weight-semibold); margin: var(--spacing-5) 0 var(--spacing-2); } .lede { font-size: var(--text-large-size); line-height: 1.55; color: var(--color-text-secondary); margin: 0 0 var(--spacing-6); max-width: 76ch; } .sub { font-size: var(--text-body-size); color: var(--color-text-secondary); margin: 0 0 var(--spacing-4); max-width: 82ch; } .supporting { font-size: var(--text-supporting-size); line-height: var(--text-supporting-leading); color: var(--color-text-secondary); } code.tok { font-family: var(--font-family-code); font-size: var(--font-size-sm); background: var(--color-background-muted); color: var(--color-text-accent); border-radius: var(--radius-inner); padding: 1px var(--spacing-1-5); } /* section container = Astryx Card at page level */ section.block { background: var(--color-background-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-page); padding: var(--spacing-8); margin-bottom: var(--spacing-8); box-shadow: var(--shadow-low); } .block-head { margin-bottom: var(--spacing-6); } .part-rule { display: flex; align-items: center; gap: var(--spacing-3); margin: var(--spacing-10) 0 var(--spacing-6); } .part-rule .line { flex: 1; height: 1px; background: var(--color-border-emphasized); } .part-rule .lab { font-size: var(--text-heading-6-size); font-weight: var(--font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } /* ============================================================================ ASTRYX PRIMITIVES · stable class + reflected data attributes ========================================================================== */ .astryx-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-1-5); height: var(--size-element-md); padding: 0 var(--spacing-3); border-radius: var(--radius-element); border: var(--border-width) solid transparent; font-family: var(--font-family-body); font-size: var(--text-label-size); font-weight: var(--font-weight-medium); line-height: 1; cursor: pointer; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .astryx-button[data-variant="primary"] { background: var(--color-accent); color: var(--color-on-accent); } .astryx-button[data-variant="secondary"] { background: var(--color-accent-muted); color: var(--color-text-primary); border-color: var(--color-border); } .astryx-button[data-variant="ghost"] { background: transparent; color: var(--color-text-secondary); } .astryx-button[data-variant="ghost"]:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); } .astryx-button[data-variant="destructive"] { background: var(--color-error); color: var(--color-on-error); } .astryx-button[data-size="sm"] { height: var(--size-element-sm); padding: 0 10px; font-size: var(--font-size-sm); } .astryx-button[data-size="lg"] { height: var(--size-element-lg); padding: 0 var(--spacing-4); } .astryx-button[data-disabled="true"] { background: var(--color-background-muted); color: var(--color-text-disabled); cursor: not-allowed; } .astryx-badge { display: inline-flex; align-items: center; gap: var(--spacing-1); height: 20px; padding: 0 var(--spacing-2); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border-gray); background: var(--color-background-gray); color: var(--color-text-gray); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); white-space: nowrap; } .astryx-badge[data-hue="blue"] { background: var(--color-background-blue); border-color: var(--color-border-blue); color: var(--color-text-blue); } .astryx-badge[data-hue="green"] { background: var(--color-background-green); border-color: var(--color-border-green); color: var(--color-text-green); } .astryx-badge[data-hue="yellow"] { background: var(--color-background-yellow); border-color: var(--color-border-yellow); color: var(--color-text-yellow); } .astryx-badge[data-hue="red"] { background: var(--color-background-red); border-color: var(--color-border-red); color: var(--color-text-red); } .astryx-badge[data-hue="purple"] { background: var(--color-background-purple); border-color: var(--color-border-purple); color: var(--color-text-purple); } .astryx-badge[data-hue="teal"] { background: var(--color-background-teal); border-color: var(--color-border-teal); color: var(--color-text-teal); } .astryx-badge[data-hue="orange"] { background: var(--color-background-orange); border-color: var(--color-border-orange); color: var(--color-text-orange); } .astryx-badge[data-variant="solid"] { background: var(--color-accent); border-color: transparent; color: var(--color-on-accent); } .astryx-card { background: var(--color-background-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-container); padding: var(--spacing-4); box-shadow: var(--shadow-low); } .astryx-card[data-elevation="med"] { box-shadow: var(--shadow-med); } .astryx-card[data-elevation="high"] { box-shadow: var(--shadow-high); } .astryx-card[data-selected="true"] { box-shadow: var(--shadow-inset-selected); } .astryx-card-divider { border: none; height: 1px; background: var(--color-border); } .astryx-banner { display: flex; gap: var(--spacing-3); align-items: flex-start; border-radius: var(--radius-container); border: var(--border-width) solid var(--color-border); background: var(--color-background-muted); padding: var(--spacing-3) var(--spacing-4); } .astryx-banner[data-status="info"] { background: var(--color-background-blue); border-color: var(--color-border-blue); color: var(--color-text-blue); } .astryx-banner[data-status="success"] { background: var(--color-success-muted); border-color: var(--color-border-green); color: var(--color-text-green); } .astryx-banner[data-status="warning"] { background: var(--color-warning-muted); border-color: var(--color-border-yellow); color: var(--color-text-yellow); } .astryx-banner[data-status="error"] { background: var(--color-error-muted); border-color: var(--color-border-red); color: var(--color-text-red); } .astryx-banner .b-title { font-weight: var(--font-weight-semibold); } .astryx-banner .b-body { font-size: var(--text-supporting-size); opacity: .88; } .astryx-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-body-size); } .astryx-table th { text-align: left; font-weight: var(--font-weight-semibold); font-size: var(--text-supporting-size); color: var(--color-text-secondary); padding: var(--spacing-2) var(--spacing-3); border-bottom: var(--border-width) solid var(--color-border-emphasized); white-space: nowrap; } .astryx-table td { padding: var(--spacing-2) var(--spacing-3); vertical-align: top; border-bottom: var(--border-width) solid var(--color-border); } .astryx-table tr:last-child td { border-bottom: none; } .astryx-table td.mono, .astryx-table th.mono { font-family: var(--font-family-code); font-size: var(--font-size-sm); } .astryx-table td.k { font-weight: var(--font-weight-medium); white-space: nowrap; } .astryx-table td.dim { color: var(--color-text-secondary); } .table-wrap { overflow-x: auto; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-container); } .astryx-avatar { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--color-background-gray); color: var(--color-text-gray); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); border: var(--border-width) solid var(--color-border); } .astryx-switch { width: 36px; height: 20px; border-radius: var(--radius-full); background: var(--color-track); position: relative; display: inline-block; transition: background var(--duration-fast) var(--ease-standard); } .astryx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--color-background-surface); box-shadow: var(--shadow-low); transition: transform var(--duration-fast) var(--ease-standard); } .astryx-switch[data-checked="true"] { background: var(--color-accent); } .astryx-switch[data-checked="true"]::after { transform: translateX(16px); } .astryx-skeleton { background: var(--color-skeleton); border-radius: var(--radius-inner); height: 8px; } .astryx-progress { height: 6px; border-radius: var(--radius-full); background: var(--color-track); overflow: hidden; } .astryx-progress > i { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-full); } .astryx-input { display: flex; align-items: center; gap: var(--spacing-2); height: var(--size-element-lg); padding: 0 var(--spacing-3); border-radius: var(--radius-element); border: var(--border-width) solid var(--color-border-emphasized); background: var(--color-background-surface); color: var(--color-text-secondary); font-size: var(--text-body-size); } .astryx-input[data-focused="true"] { box-shadow: var(--shadow-inset-selected); border-color: transparent; color: var(--color-text-primary); } .astryx-tabs { display: inline-flex; gap: var(--spacing-1); padding: var(--spacing-1); background: var(--color-background-muted); border-radius: var(--radius-element); } .astryx-tabs > span { padding: var(--spacing-1) var(--spacing-3); border-radius: var(--radius-inner); font-size: var(--text-label-size); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); } .astryx-tabs > span[data-selected="true"] { background: var(--color-background-surface); color: var(--color-text-primary); box-shadow: var(--shadow-low); } /* ============================================================================ MINDALIKE COMPOSITES · built only from Astryx tokens + Astryx primitives Nothing below introduces a raw color, radius, duration or font value. ========================================================================== */ /* --- swatch grid (foundations docs) -------------------------------------- */ .swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: var(--spacing-3); } .swatch { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-container); overflow: hidden; background: var(--color-background-surface); } .swatch .chip { height: 56px; border-bottom: var(--border-width) solid var(--color-border); } .swatch .meta { padding: var(--spacing-2) var(--spacing-3); } .swatch .nm { font-family: var(--font-family-code); font-size: var(--font-size-sm); } .swatch .vl { font-size: var(--font-size-xs); color: var(--color-text-secondary); font-family: var(--font-family-code); } .ramp { display: grid; gap: var(--spacing-2); } .ramp-row { display: flex; align-items: baseline; gap: var(--spacing-4); border-bottom: var(--border-width) solid var(--color-border); padding-bottom: var(--spacing-2); } .ramp-row .spec { font-family: var(--font-family-code); font-size: var(--font-size-sm); color: var(--color-text-secondary); white-space: nowrap; min-width: 232px; } .ramp-row .demo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .scale-row { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-2); } .scale-row .bar { height: 12px; background: var(--color-accent); border-radius: var(--radius-inner); } .scale-row .lab { font-family: var(--font-family-code); font-size: var(--font-size-sm); color: var(--color-text-secondary); min-width: 130px; } .specimen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--spacing-3); } .specimen { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-container); padding: var(--spacing-4); background: var(--color-background-surface); display: flex; flex-direction: column; gap: var(--spacing-3); align-items: flex-start; } .specimen .cap { font-family: var(--font-family-code); font-size: var(--font-size-xs); color: var(--color-text-secondary); } .row { display: flex; align-items: center; gap: var(--spacing-2); flex-wrap: wrap; } /* --- code sample --------------------------------------------------------- */ .code { background: var(--color-syntax-background); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-container); padding: var(--spacing-4); font-family: var(--font-family-code); font-size: var(--font-size-sm); line-height: 1.7; overflow-x: auto; white-space: pre; color: var(--color-text-primary); } .code .kw { color: var(--color-syntax-keyword); } .code .st { color: var(--color-syntax-string); } .code .cm { color: var(--color-syntax-comment); } .code .fn { color: var(--color-syntax-function); } /* --- do / don't ---------------------------------------------------------- */ .guides { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3); } .guide { border: var(--border-width) solid var(--color-border); border-left: 3px solid var(--color-border-emphasized); border-radius: var(--radius-container); padding: var(--spacing-3) var(--spacing-4); background: var(--color-background-surface); } .guide[data-kind="do"] { border-left-color: var(--color-success); } .guide[data-kind="dont"] { border-left-color: var(--color-error); } .guide .g-lab { font-size: var(--text-heading-6-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--spacing-1); } .guide[data-kind="do"] .g-lab { color: var(--color-success); } .guide[data-kind="dont"] .g-lab { color: var(--color-error); } /* --- screen frame -------------------------------------------------------- */ .screen { border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-page); overflow: hidden; background: var(--color-background-surface); box-shadow: var(--shadow-med); } .screen-chrome { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-3); background: var(--color-background-muted); border-bottom: var(--border-width) solid var(--color-border); } .screen-chrome .dots { display: flex; gap: var(--spacing-1); } .screen-chrome .dots i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-border-emphasized); display: block; } .screen-chrome .url { font-family: var(--font-family-code); font-size: var(--font-size-xs); color: var(--color-text-secondary); background: var(--color-background-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); padding: 1px var(--spacing-2); } .screen-top { display: flex; align-items: center; gap: var(--spacing-3); padding: var(--spacing-2) var(--spacing-3); border-bottom: var(--border-width) solid var(--color-border); } .screen-top .logo { width: 20px; height: 20px; border-radius: var(--radius-inner); background: var(--color-accent); } .screen-top .nm { font-weight: var(--font-weight-semibold); font-size: var(--text-label-size); } .screen-top .nav { display: flex; gap: var(--spacing-3); margin-left: var(--spacing-3); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .screen-top .nav .on { color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .screen-top .right { margin-left: auto; display: flex; align-items: center; gap: var(--spacing-2); } .stage { position: relative; height: 268px; background: var(--color-background-body); background-image: radial-gradient(var(--color-border-emphasized) 1px, transparent 1px); background-size: 20px 20px; overflow: hidden; } .stage[data-height="tall"] { height: 330px; } .stage[data-height="short"] { height: 212px; } .stage[data-grid="off"] { background-image: none; background: var(--color-background-body); } .caption { font-family: var(--font-family-code); font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--spacing-2); } .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-4); } /* --- step rail ----------------------------------------------------------- */ .step { display: grid; grid-template-columns: 30px minmax(0, 1fr) 274px; gap: var(--spacing-4); margin-bottom: var(--spacing-8); } .step-num { width: 30px; height: 30px; border-radius: var(--radius-full); display: grid; place-items: center; background: var(--color-accent); color: var(--color-on-accent); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .step-num[data-kind="gate"] { background: var(--color-warning-muted); color: var(--color-text-yellow); border: var(--border-width) solid var(--color-border-yellow); } .step-num[data-kind="error"] { background: var(--color-error-muted); color: var(--color-text-red); border: var(--border-width) solid var(--color-border-red); } .step-title { font-size: var(--text-heading-3-size); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); } .step-desc { color: var(--color-text-secondary); margin-bottom: var(--spacing-3); max-width: 74ch; } .aside-block { margin-bottom: var(--spacing-3); } .aside-label { font-size: var(--text-heading-6-size); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); margin-bottom: var(--spacing-1-5); } .truth { border-radius: var(--radius-container); background: var(--color-background-muted); border: var(--border-width) solid var(--color-border); padding: var(--spacing-3); font-size: var(--text-supporting-size); line-height: 1.55; color: var(--color-text-secondary); } .truth b { color: var(--color-text-primary); } /* --- canvas object ------------------------------------------------------- */ .obj { position: absolute; background: var(--color-background-card); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-container); box-shadow: var(--shadow-low); overflow: hidden; } .obj[data-selected="true"] { box-shadow: var(--shadow-inset-selected), var(--shadow-med); } .obj[data-state="generating"] { border-style: dashed; } .obj[data-state="error"] { box-shadow: var(--shadow-inset-error); } .obj-bar { display: flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-1) var(--spacing-2); border-bottom: var(--border-width) solid var(--color-border); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-background-muted); } .obj-bar .st { margin-left: auto; } .obj-body { padding: var(--spacing-2); display: grid; gap: var(--spacing-1-5); } .ln { height: 6px; border-radius: var(--radius-full); background: var(--color-skeleton); } .ln[data-w="30"] { width: 30%; } .ln[data-w="45"] { width: 45%; } .ln[data-w="60"] { width: 60%; } .ln[data-w="80"] { width: 80%; } .ln[data-w="95"] { width: 95%; } .ln[data-tone="accent"] { background: var(--color-accent-muted); } .mini-app { display: grid; gap: var(--spacing-1); } .mini-app .barline { height: 10px; border-radius: var(--radius-inner); background: var(--color-accent-muted); } .mini-app .block { height: 26px; border-radius: var(--radius-inner); background: var(--color-background-gray); } @keyframes stream-grow { from { width: 18%; } to { width: 92%; } } .obj[data-state="generating"] .ln[data-stream="true"] { animation: stream-grow var(--duration-slow) var(--ease-standard) infinite alternate; } /* --- presence rings (video circles) -------------------------------------- */ .ring { position: absolute; width: 56px; text-align: center; } .ring .disc { width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--color-background-gray); color: var(--color-text-gray); display: grid; place-items: center; font-size: var(--text-label-size); font-weight: var(--font-weight-semibold); border: 3px solid var(--color-border-emphasized); box-shadow: var(--shadow-low); } .ring[data-status="live"] .disc { border-color: var(--color-data-categorical-green); } .ring[data-status="local"] .disc { border-color: var(--color-data-categorical-blue); } .ring[data-status="peer"] .disc { border-color: var(--color-data-categorical-orange); } .ring[data-status="peer3"] .disc { border-color: var(--color-data-categorical-purple); } .ring[data-status="relay"] .disc { border-color: var(--color-warning); } .ring[data-status="offline"] .disc { border-color: var(--color-border); opacity: .55; } .ring[data-status="searching"] .disc { border-color: var(--color-data-categorical-blue); border-right-color: transparent; border-top-color: transparent; animation: ring-spin var(--duration-slow) linear infinite; } .ring[data-status="connecting"] .disc { border-color: var(--color-data-categorical-purple); border-left-color: transparent; animation: ring-spin var(--duration-medium-max) linear infinite; } @keyframes ring-spin { to { transform: rotate(360deg); } } .ring .cap { font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-top: var(--spacing-1); } .ring[data-size="sm"] { width: 40px; } .ring[data-size="sm"] .disc { width: 40px; height: 40px; border-width: 2px; font-size: var(--font-size-xs); } .ring-actions { display: flex; gap: var(--spacing-1); justify-content: center; margin-top: var(--spacing-1); } .ring-btn { width: 22px; height: 22px; border-radius: var(--radius-full); display: grid; place-items: center; font-size: var(--font-size-xs); background: var(--color-background-surface); border: var(--border-width) solid var(--color-border-emphasized); color: var(--color-text-secondary); box-shadow: var(--shadow-low); } /* --- chat stack ---------------------------------------------------------- */ .stack { position: absolute; width: 188px; } .stack-cards { position: relative; } .stack-back { position: absolute; left: 6px; right: 6px; height: 26px; background: var(--color-background-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-chat); box-shadow: var(--shadow-low); } .stack-back[data-depth="1"] { top: -7px; } .stack-back[data-depth="2"] { top: -13px; left: 12px; right: 12px; opacity: .7; } .stack-front { position: relative; background: var(--color-background-card); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-chat); box-shadow: var(--shadow-med); padding: var(--spacing-2); } .stack-head { display: flex; align-items: center; gap: var(--spacing-1-5); font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: var(--spacing-1-5); } .stack-head .grip { color: var(--color-icon-disabled); } .turns { display: grid; gap: var(--spacing-1-5); } .turns[data-scroll="true"] { max-height: 132px; overflow-y: auto; } .bub { font-size: var(--font-size-sm); line-height: 1.45; border-radius: var(--radius-inner); background: var(--color-background-muted); border: var(--border-width) solid var(--color-border); padding: var(--spacing-1-5) var(--spacing-2); } .bub[data-from="me"] { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; } .bub[data-faded="true"] { opacity: .55; } .tether { position: absolute; border-top: 1px dashed var(--color-border-emphasized); } .tether[data-axis="v"] { border-top: none; border-left: 1px dashed var(--color-border-emphasized); } .anchor-hint { position: absolute; border-radius: var(--radius-inner); background: var(--color-background-blue); border: 1px dashed var(--color-border-blue); } .popover { position: absolute; width: 176px; background: var(--color-background-popover); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-container); box-shadow: var(--shadow-high); padding: var(--spacing-2); } .popover .p-head { display: flex; align-items: center; gap: var(--spacing-1-5); font-size: var(--font-size-xs); color: var(--color-text-secondary); margin-bottom: var(--spacing-1-5); } .menu { position: absolute; background: var(--color-background-popover); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-container); box-shadow: var(--shadow-high); padding: var(--spacing-1); font-size: var(--text-label-size); min-width: 156px; } .menu div { padding: var(--spacing-1-5) var(--spacing-2); border-radius: var(--radius-inner); color: var(--color-text-secondary); } .menu div[data-active="true"] { background: var(--color-overlay-hover); color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .menu .sep { height: 1px; padding: 0; margin: var(--spacing-1) 0; background: var(--color-border); } /* --- cursors ------------------------------------------------------------- */ .cursor { position: absolute; width: 0; height: 0; border-left: 8px solid var(--color-accent); border-bottom: 12px solid transparent; } .cursor[data-peer="2"] { border-left-color: var(--color-data-categorical-orange); } .cursor[data-peer="3"] { border-left-color: var(--color-data-categorical-purple); } .cursor-tag { position: absolute; left: 8px; top: 10px; white-space: nowrap; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-on-dark); background: var(--color-accent); border-radius: var(--radius-full); padding: 1px var(--spacing-1-5); } .cursor-tag[data-peer="2"] { background: var(--color-data-categorical-orange); } .cursor-tag[data-peer="3"] { background: var(--color-data-categorical-purple); } /* --- agent cards --------------------------------------------------------- */ .agent-card { position: absolute; width: 246px; background: var(--color-background-card); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-container); box-shadow: var(--shadow-high); padding: var(--spacing-3); } .agent-card[data-width="wide"] { width: 292px; } .agent-card[data-blocking="true"] { box-shadow: var(--shadow-inset-selected), var(--shadow-high); } .agent-card[data-tone="danger"] { box-shadow: var(--shadow-inset-error), var(--shadow-high); } .ac-head { display: flex; gap: var(--spacing-2); align-items: flex-start; margin-bottom: var(--spacing-2); } .ac-ico { width: 24px; height: 24px; border-radius: var(--radius-inner); flex: none; display: grid; place-items: center; font-size: var(--font-size-sm); background: var(--color-accent); color: var(--color-on-accent); } .ac-ico[data-tone="warning"] { background: var(--color-warning-muted); color: var(--color-text-yellow); } .ac-ico[data-tone="danger"] { background: var(--color-error-muted); color: var(--color-text-red); } .ac-ico[data-tone="success"] { background: var(--color-success-muted); color: var(--color-text-green); } .ac-title { font-size: var(--text-label-size); font-weight: var(--font-weight-semibold); line-height: 1.35; } .ac-desc { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .ac-body { display: grid; gap: var(--spacing-1-5); margin-bottom: var(--spacing-2); } .plan-step { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .plan-step .box { width: 14px; height: 14px; flex: none; border-radius: var(--radius-inner); border: var(--border-width) solid var(--color-border-emphasized); display: grid; place-items: center; font-size: var(--font-size-3xs); } .plan-step .box[data-state="done"] { background: var(--color-success); border-color: transparent; color: var(--color-on-success); } .plan-step .box[data-state="running"] { border-color: var(--color-accent); animation: box-pulse var(--duration-slow) var(--ease-standard) infinite; } .plan-step .box[data-state="failed"] { background: var(--color-error); border-color: transparent; color: var(--color-on-error); } .plan-step .box[data-state="skipped"] { border-style: dashed; opacity: .6; } @keyframes box-pulse { 50% { box-shadow: 0 0 0 3px var(--color-overlay-hover); } } .dep { font-size: var(--font-size-xs); color: var(--color-text-disabled); } .ac-diff { font-family: var(--font-family-code); font-size: var(--font-size-xs); line-height: 1.7; background: var(--color-syntax-background); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-inner); padding: var(--spacing-2); } .ac-diff .del { color: var(--color-text-red); } .ac-diff .add { color: var(--color-text-green); } .ac-opt { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-inner); padding: var(--spacing-1-5) var(--spacing-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); } .ac-opt[data-picked="true"] { box-shadow: var(--shadow-inset-selected); color: var(--color-text-primary); } .ac-acts { display: flex; align-items: center; gap: var(--spacing-2); } .ac-acts .grow { flex: 1; } .ac-eta { font-size: var(--font-size-xs); color: var(--color-text-disabled); } .thinking { display: inline-flex; gap: 3px; align-items: center; } .thinking i { width: 4px; height: 4px; border-radius: var(--radius-full); background: var(--color-icon-secondary); animation: blip var(--duration-slow) var(--ease-standard) infinite; } .thinking i:nth-child(2) { animation-delay: 120ms; } .thinking i:nth-child(3) { animation-delay: 240ms; } @keyframes blip { 50% { opacity: .25; transform: translateY(-2px); } } .tool-chip { display: inline-flex; align-items: center; gap: var(--spacing-1); font-family: var(--font-family-code); font-size: var(--font-size-xs); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-full); padding: 1px var(--spacing-2); color: var(--color-text-secondary); background: var(--color-background-muted); } .tool-chip i { width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--color-icon-disabled); } .tool-chip[data-state="running"] i { background: var(--color-data-categorical-blue); } .tool-chip[data-state="done"] i { background: var(--color-success); } /* --- toast --------------------------------------------------------------- */ .toast { position: absolute; right: var(--spacing-3); width: 244px; display: flex; gap: var(--spacing-2); background: var(--color-background-popover); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-container); box-shadow: var(--shadow-high); padding: var(--spacing-2) var(--spacing-3); } .toast .t-ico { width: 20px; height: 20px; flex: none; border-radius: var(--radius-inner); display: grid; place-items: center; font-size: var(--font-size-xs); background: var(--color-accent); color: var(--color-on-accent); } .toast .t-ico[data-tone="warning"] { background: var(--color-warning-muted); color: var(--color-text-yellow); } .toast .t-ico[data-tone="success"] { background: var(--color-success-muted); color: var(--color-text-green); } .toast .t-ico[data-tone="danger"] { background: var(--color-error-muted); color: var(--color-text-red); } .toast .t-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } .toast .t-body { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .dot-badge { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-error); display: inline-block; } /* --- home surfaces ------------------------------------------------------- */ .edge-pill { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 68px; border-radius: 0 var(--radius-full) var(--radius-full) 0; background: var(--color-border-emphasized); transition: width var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard); } .edge-pill[data-hover="true"] { width: 12px; background: var(--color-accent); } .side-panel { position: absolute; left: 0; top: 0; bottom: 0; width: 176px; background: var(--color-background-surface); border-right: var(--border-width) solid var(--color-border); box-shadow: var(--shadow-med); padding: var(--spacing-3); transition: transform var(--duration-medium) var(--ease-standard); } .side-panel[data-state="opening"] { transform: translateX(-52%); } .side-panel[data-state="closed"] { transform: translateX(-100%); } .side-panel .p-title { font-size: var(--text-heading-6-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-2); } .proj-item { font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: var(--spacing-1-5) var(--spacing-2); border-radius: var(--radius-inner); } .proj-item[data-active="true"] { background: var(--color-overlay-hover); color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .center-slot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 78%; text-align: center; } .center-title { font-size: var(--text-heading-2-size); font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; margin-bottom: var(--spacing-3); } .prompt { display: flex; align-items: center; gap: var(--spacing-2); background: var(--color-background-surface); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-chat); box-shadow: var(--shadow-low); padding: var(--spacing-2) var(--spacing-2) var(--spacing-2) var(--spacing-4); text-align: left; } .prompt[data-focused="true"] { box-shadow: var(--shadow-inset-selected), var(--shadow-med); border-color: transparent; } .prompt[data-busy="true"] { opacity: .72; } .prompt .txt { flex: 1; font-size: var(--text-body-size); color: var(--color-text-primary); } .prompt .txt[data-placeholder="true"] { color: var(--color-text-disabled); } .caret { display: inline-block; width: 1px; height: 14px; background: var(--color-accent); vertical-align: -2px; animation: caret-blink var(--duration-slow) steps(1) infinite; } @keyframes caret-blink { 50% { opacity: 0; } } .modes { display: inline-flex; gap: var(--spacing-1); padding: var(--spacing-0-5); background: var(--color-background-muted); border-radius: var(--radius-full); } .modes span { font-size: var(--font-size-xs); padding: 2px var(--spacing-2); border-radius: var(--radius-full); color: var(--color-text-secondary); } .modes span[data-selected="true"] { background: var(--color-background-surface); color: var(--color-text-primary); font-weight: var(--font-weight-medium); box-shadow: var(--shadow-low); } .send { width: var(--size-element-md); height: var(--size-element-md); border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; font-size: var(--font-size-sm); } .proj-pill { position: absolute; left: var(--spacing-3); top: var(--spacing-3); display: inline-flex; align-items: center; gap: var(--spacing-2); height: var(--size-element-sm); padding: 0 var(--spacing-3); background: var(--color-background-surface); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-full); box-shadow: var(--shadow-low); font-size: var(--text-label-size); font-weight: var(--font-weight-medium); } .proj-pill .dots { color: var(--color-icon-disabled); } .proj-pill[data-editing="true"] { box-shadow: var(--shadow-inset-selected); } /* --- netchat + orbit ----------------------------------------------------- */ .netchat { display: grid; grid-template-columns: 108px minmax(0,1fr) 116px; height: 100%; } .nc-col { border-right: var(--border-width) solid var(--color-border); padding: var(--spacing-2); overflow: hidden; } .nc-col:last-child { border-right: none; border-left: var(--border-width) solid var(--color-border); } .nc-lab { font-size: var(--text-heading-6-size); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1-5); } .nc-chan { font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: var(--spacing-1) var(--spacing-1-5); border-radius: var(--radius-inner); display: flex; align-items: center; gap: var(--spacing-1); } .nc-chan[data-active="true"] { background: var(--color-overlay-hover); color: var(--color-text-primary); font-weight: var(--font-weight-medium); } .nc-msg { display: flex; gap: var(--spacing-2); margin-bottom: var(--spacing-2); } .nc-msg .body { font-size: var(--font-size-sm); } .nc-msg .who { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .orbit-grid { display: grid; gap: var(--spacing-3); padding: var(--spacing-4); } .orbit-card { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: var(--spacing-3); align-items: center; background: var(--color-background-card); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-container); padding: var(--spacing-2); box-shadow: var(--shadow-low); } .orbit-card[data-featured="true"] { box-shadow: var(--shadow-inset-selected), var(--shadow-low); } .orbit-shot { height: 44px; border-radius: var(--radius-inner); background: var(--color-data-blue-1); } .orbit-shot[data-hue="teal"] { background: var(--color-background-teal); } .orbit-shot[data-hue="gray"] { background: var(--color-background-gray); } .orbit-t { font-size: var(--text-label-size); font-weight: var(--font-weight-semibold); } .orbit-d { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .orbit-up { text-align: center; font-size: var(--font-size-sm); color: var(--color-text-secondary); padding: 0 var(--spacing-2); } .orbit-up b { display: block; font-size: var(--text-label-size); color: var(--color-text-primary); } /* --- state machine diagram ----------------------------------------------- */ .sm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); margin-bottom: var(--spacing-3); } .sm-node { font-family: var(--font-family-code); font-size: var(--font-size-sm); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-full); padding: var(--spacing-1) var(--spacing-3); background: var(--color-background-surface); color: var(--color-text-primary); } .sm-node[data-kind="entry"] { background: var(--color-accent); color: var(--color-on-accent); border-color: transparent; } .sm-node[data-kind="gate"] { background: var(--color-background-blue); border-color: var(--color-border-blue); color: var(--color-text-blue); } .sm-node[data-kind="terminal"] { background: var(--color-success-muted); border-color: var(--color-border-green); color: var(--color-text-green); } .sm-node[data-kind="error"] { background: var(--color-error-muted); border-color: var(--color-border-red); color: var(--color-text-red); } .sm-node[data-kind="paused"] { background: var(--color-warning-muted); border-color: var(--color-border-yellow); color: var(--color-text-yellow); } .sm-arrow { color: var(--color-icon-disabled); font-size: var(--font-size-sm); } .sm-lab { font-size: var(--font-size-xs); color: var(--color-text-secondary); } .credits { font-size: var(--text-supporting-size); color: var(--color-text-secondary); border-top: var(--border-width) solid var(--color-border); padding-top: var(--spacing-4); margin-top: var(--spacing-6); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } @media (max-width: 1180px) { .step { grid-template-columns: 30px minmax(0, 1fr); } .step-aside { grid-column: 2; } } @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .panel { position: static; height: auto; border-right: none; border-bottom: var(--border-width) solid var(--color-border); } .content { padding: var(--spacing-6); } .pair, .guides { grid-template-columns: 1fr; } } /* ============================================================================ Mindalike Shell + Header The header is fixed to the top and owns its own glass background. App shells are simple flex/grid containers; no padding-top hacks needed. ========================================================================== */ .mindalike-shell { display: flex; flex-direction: column; min-height: 100dvh; position: relative; transition: color 150ms linear, background-color 150ms linear; } /* Header — fixed glass surface. Floating glass controls sit on top of it. */ .mindalike-header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-4); height: 56px; padding: 0 var(--spacing-4); font-family: var(--font-family-body); background: color-mix(in srgb, var(--color-background-surface) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); pointer-events: none; /* inner controls re-enable pointer-events */ } .mindalike-header.is-sticky { position: fixed; } /* kept for back-compat */ .mindalike-header .brand, .mindalike-header-nav, .mindalike-header-actions { pointer-events: auto; } .mindalike-header .brand { display: inline-flex; align-items: center; gap: var(--spacing-2); margin-bottom: 0; text-decoration: none; color: inherit; } .mindalike-header .brand-name { color: var(--color-text-primary); } .mindalike-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; width: 100%; gap: var(--spacing-4); } /* Brand logo swap driven by [data-mode] on */ .mindalike-header .brand-logo[data-mode="light"] { display: inline-block; } .mindalike-header .brand-logo[data-mode="dark"] { display: none; } [data-mode="dark"] .mindalike-header .brand-logo[data-mode="light"] { display: none; } [data-mode="dark"] .mindalike-header .brand-logo[data-mode="dark"] { display: inline-block; } /* Center nav pill */ .mindalike-header-nav { display: flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-background-surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); box-shadow: var(--shadow-low); } .mindalike-header-nav .navlink { height: var(--size-element-md); padding: 0 var(--spacing-3); border-radius: var(--radius-full); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); text-decoration: none; display: inline-flex; align-items: center; } .mindalike-header-nav .navlink:hover { color: var(--color-text-primary); } .mindalike-header-nav .navlink.is-active { background: var(--color-accent); color: var(--color-on-accent); } .mindalike-header-nav .navlink.is-active:hover { background: var(--color-accent); color: var(--color-on-accent); } /* Right actions */ .mindalike-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2); position: relative; } .mindalike-theme-toggle { width: 36px; height: 36px; border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); background: color-mix(in srgb, var(--color-background-surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow-low); color: var(--color-text-secondary); display: grid; place-items: center; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .mindalike-theme-toggle:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); } .mindalike-avatar-btn { width: 32px; height: 32px; border-radius: var(--radius-full); border: none; background: var(--color-background-gray); color: var(--color-text-gray); display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); cursor: pointer; overflow: hidden; padding: 0; } .mindalike-avatar-btn img { width: 100%; height: 100%; object-fit: cover; } .mindalike-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 240px; background: var(--color-background-popover); border: var(--border-width) solid var(--color-border-emphasized); border-radius: var(--radius-container); box-shadow: var(--shadow-high); overflow: hidden; z-index: 70; } @media (max-width: 768px) { .mindalike-header-inner { grid-template-columns: 1fr auto; } .mindalike-header-nav { display: none; } } /* Banner: stay below the header when used inside content */ .astryx-banner { z-index: 40; position: relative; } /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */ @layer properties { @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) { *, :before, :after, ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; --tw-translate-z: 0; --tw-rotate-x: initial; --tw-rotate-y: initial; --tw-rotate-z: initial; --tw-skew-x: initial; --tw-skew-y: initial; --tw-space-y-reverse: 0; --tw-border-style: solid; --tw-gradient-position: initial; --tw-gradient-from: #0000; --tw-gradient-via: #0000; --tw-gradient-to: #0000; --tw-gradient-stops: initial; --tw-gradient-via-stops: initial; --tw-gradient-from-position: 0%; --tw-gradient-via-position: 50%; --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; --tw-shadow: 0 0 #0000; --tw-shadow-color: initial; --tw-shadow-alpha: 100%; --tw-inset-shadow: 0 0 #0000; --tw-inset-shadow-color: initial; --tw-inset-shadow-alpha: 100%; --tw-ring-color: initial; --tw-ring-shadow: 0 0 #0000; --tw-inset-ring-color: initial; --tw-inset-ring-shadow: 0 0 #0000; --tw-ring-inset: initial; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-offset-shadow: 0 0 #0000; --tw-backdrop-blur: initial; --tw-backdrop-brightness: initial; --tw-backdrop-contrast: initial; --tw-backdrop-grayscale: initial; --tw-backdrop-hue-rotate: initial; --tw-backdrop-invert: initial; --tw-backdrop-opacity: initial; --tw-backdrop-saturate: initial; --tw-backdrop-sepia: initial; --tw-duration: initial; --tw-ease: initial; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scale-z: 1; --tw-animation-delay: 0s; --tw-animation-direction: normal; --tw-animation-duration: initial; --tw-animation-fill-mode: none; --tw-animation-iteration-count: 1; --tw-enter-blur: 0; --tw-enter-opacity: 1; --tw-enter-rotate: 0; --tw-enter-scale: 1; --tw-enter-translate-x: 0; --tw-enter-translate-y: 0; --tw-exit-blur: 0; --tw-exit-opacity: 1; --tw-exit-rotate: 0; --tw-exit-scale: 1; --tw-exit-translate-x: 0; --tw-exit-translate-y: 0; } } } @font-face { font-family: iA Writer Mono; font-style: normal; font-display: swap; font-weight: 400; src: url("/assets/ia-writer-mono-latin-400-normal-T57jbau0.woff2") format("woff2"), url("/assets/ia-writer-mono-latin-400-normal-C_4xiObl.woff") format("woff"); } html.lenis, html.lenis body { height: auto; } .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; } .lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; } .lenis.lenis-smooth iframe { pointer-events: none; } .lenis.lenis-autoToggle { transition-behavior: allow-discrete; transition-property: overflow; transition-duration: 1ms; } @layer theme { :root, :host { --font-sans: "Figtree", system-ui, -apple-system, sans-serif; --font-serif: "EB Garamond", "Garamond", "Source Serif 4", Georgia, serif; --font-mono: "ui-monospace", "SF Mono", "Monaco", monospace; --color-red-500: oklch(63.7% .237 25.331); --color-black: #000; --color-white: #fff; --spacing: .25rem; --container-md: 28rem; --container-5xl: 64rem; --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --tracking-widest: .1em; --leading-snug: 1.375; --radius-sm: 4px; --radius-md: 4px; --radius-lg: 24px; --radius-xl: 24px; --radius-2xl: 24px; --animate-spin: spin 1s linear infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --blur-md: 12px; --blur-xl: 24px; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: var(--font-sans); --default-mono-font-family: var(--font-mono); --radius-pill: 16777200px; --color-accent: var(--build-accent-color); --color-input: var(--input); --color-ring: var(--ring); --color-bg-1: var(--build-chat-colors-bg-1); --color-bg-2: var(--build-chat-colors-bg-2); --color-bg-3: var(--build-chat-colors-bg-3); --color-bg-4: var(--build-chat-colors-bg-4); --color-border-primary: var(--build-chat-colors-border-primary); --color-border-secondary: var(--build-chat-colors-border-secondary); --color-border-tertiary: var(--build-chat-colors-border-tertiary); --color-brand-heavy: var(--build-chat-colors-brand-heavy); --color-brand-primary: var(--build-chat-colors-brand-primary); --color-brand-subtle: var(--build-chat-colors-brand-subtle); --color-text-inverted: var(--build-chat-colors-text-inverted); --color-text-primary: var(--build-chat-colors-text-primary); --color-text-secondary: var(--build-chat-colors-text-secondary); --color-text-tertiary: var(--build-chat-colors-text-tertiary); --color-text-quaternary: var(--c-graTexTer); --color-border-subtle: var(--build-chat-colors-border-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-border-subtle: color-mix(in srgb, var(--build-chat-colors-border-primary) 50%, transparent); } } :root, :host { --color-icon-primary: var(--c-graIcoPri); --color-icon-secondary: var(--c-graIcoSec); --color-icon-tertiary: var(--c-graTexTer); --color-icon-quaternary: var(--c-graTexDis); --color-syntax-keyword: var(--c-purTexPri); --color-syntax-string: var(--c-greTexPri); --color-syntax-function: var(--c-bluTexPri); --color-syntax-comment: var(--c-graTexTer); --color-syntax-number: var(--c-oraTexPri); --color-syntax-type: var(--c-bluTexPri); --color-syntax-variable: var(--c-graTexPri); --color-syntax-operator: var(--c-graTexTer); --color-background: var(--color-bg-1); --color-foreground: var(--color-text-primary); --color-muted: var(--color-bg-2); --color-muted-foreground: var(--color-text-tertiary); --color-border: var(--color-border-primary); --color-card: var(--color-bg-3); --color-card-foreground: var(--color-text-primary); --color-bg-hover: var(--color-text-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-bg-hover: color-mix(in srgb, var(--color-text-primary) 5%, var(--color-bg-2)); } } :root, :host { --color-bg-active: var(--color-text-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-bg-active: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-bg-2)); } } :root, :host { --color-focus-ring: 0 0 0 2px var(--color-bg-1), 0 0 0 4px var(--color-brand-primary); --color-bg-hover-alpha: var(--color-text-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-bg-hover-alpha: color-mix(in srgb, var(--color-text-primary) 5%, transparent); } } :root, :host { --color-bg-active-alpha: var(--color-text-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-bg-active-alpha: color-mix(in srgb, var(--color-text-primary) 10%, transparent); } } :root, :host { --color-border-focus-alpha: var(--color-brand-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --color-border-focus-alpha: color-mix(in srgb, var(--color-brand-primary) 60%, transparent); } } :root, :host { --surface-active: var(--color-bg-active); --surface-hover-alpha: var(--color-bg-hover-alpha); --focus-ring: var(--color-focus-ring); --btn-primary-border: var(--color-brand-primary); } @supports (color: color-mix(in lab, red, red)) { :root, :host { --btn-primary-border: color-mix(in srgb, var(--color-brand-primary) 70%, transparent); } } :root, :host { --c-graTexPri: var(--color-surface-text); --c-graTexTer: var(--color-muted-text); --c-graTexDis: var(--color-subtle-gray); --c-graIcoPri: var(--color-surface-text); --c-graIcoSec: var(--color-paragraph-gray); --c-graBorPri: var(--color-subtle-gray); --c-graBacPri: var(--color-canvas-white); --c-graBacSec: var(--color-sky-canvas); --c-graBacTer: var(--color-canvas-white); --c-bluTexPri: var(--color-digital-blue); --c-bluBorPri: var(--color-digital-blue); --c-bluBacPri: var(--color-sky-canvas); --c-bluBacSec: var(--color-canvas-white); --c-redTexPri: #e03e3e; --c-redTexSec: #eb5757; --c-redIcoPri: #e03e3e; --c-redBorPri: #e03e3e; --c-redBacPri: #fbe4e4; --c-redBacSec: #fad2cf; --c-greTexPri: var(--color-system-green); --c-greTexSec: #0d9685; --c-greIcoPri: var(--color-system-green); --c-greBorPri: var(--color-system-green); --c-greBacPri: #ddedea; --c-greBacSec: #b2ebe5; --c-yelTexPri: #dfab01; --c-yelTexSec: #e9b500; --c-yelIcoPri: #dfab01; --c-yelBorPri: #e9b500; --c-yelBacPri: #fbf3db; --c-yelBacSec: #fef3c7; --c-oraTexPri: #d9730d; --c-oraBorPri: #e9730c; --c-oraBacPri: #faebdd; --c-oraBacSec: #ffe4cc; --c-purTexPri: #6940a5; --c-purBorPri: #9a6dd7; --c-purBacPri: #eae4f2; --c-purBacSec: #ddd6ed; --c-pinTexPri: #ad1a72; --c-pinBorPri: #e255a1; --c-pinBacPri: #f4dfeb; --c-pinBacSec: #f0c9e0; --c-broBorPri: #937264; --c-broBacPri: #e9e5e3; --c-broBacSec: #ddd9d6; --c-texPri: var(--color-text-primary); --c-texTer: var(--color-text-tertiary); --landing-space-1: 8px; --landing-space-2: 16px; --landing-space-3: 24px; --landing-space-4: 32px; --landing-space-5: 40px; --landing-space-6: 48px; --landing-space-7: 56px; --landing-space-8: 64px; --landing-space-10: 80px; --landing-space-12: 96px; --landing-space-16: 128px; --font-logo: "Figtree", system-ui, -apple-system, sans-serif; --font-display: "EB Garamond", "Garamond", "Source Serif 4", Georgia, serif; --font-body: "Figtree", system-ui, -apple-system, sans-serif; --color-brand: #3c83f6; --color-text: #000; --shadow-soft-layered: 0 12px 36px -26px #0f172a26; } } @layer base { *, :after, :before, ::backdrop { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } ::file-selector-button { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } html, :host { -webkit-text-size-adjust: 100%; tab-size: 4; line-height: 1.5; font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); font-feature-settings: var(--default-font-feature-settings, normal); font-variation-settings: var(--default-font-variation-settings, normal); -webkit-tap-highlight-color: transparent; } hr { height: 0; color: inherit; border-top-width: 1px; } abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); font-feature-settings: var(--default-mono-font-feature-settings, normal); font-variation-settings: var(--default-mono-font-variation-settings, normal); font-size: 1em; } small { font-size: 80%; } sub, sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; } sub { bottom: -.25em; } sup { top: -.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } :-moz-focusring:where(:not(iframe)) { outline: auto; } progress { vertical-align: baseline; } summary { display: list-item; } ol, ul, menu { list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { vertical-align: middle; display: block; } img, video { max-width: 100%; height: auto; } button, input, select, optgroup, textarea { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } ::file-selector-button { font: inherit; font-feature-settings: inherit; font-variation-settings: inherit; letter-spacing: inherit; color: inherit; opacity: 1; background-color: #0000; border-radius: 0; } :where(select:is([multiple], [size])) optgroup { font-weight: bolder; } :where(select:is([multiple], [size])) optgroup option { padding-inline-start: 20px; } ::file-selector-button { margin-inline-end: 4px; } ::placeholder { opacity: 1; } @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) { ::placeholder { color: currentColor; } @supports (color: color-mix(in lab, red, red)) { ::placeholder { color: color-mix(in oklab, currentcolor 50%, transparent); } } } textarea { resize: vertical; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-date-and-time-value { min-height: 1lh; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-datetime-edit { padding-block: 0; } ::-webkit-datetime-edit-year-field { padding-block: 0; } ::-webkit-datetime-edit-month-field { padding-block: 0; } ::-webkit-datetime-edit-day-field { padding-block: 0; } ::-webkit-datetime-edit-hour-field { padding-block: 0; } ::-webkit-datetime-edit-minute-field { padding-block: 0; } ::-webkit-datetime-edit-second-field { padding-block: 0; } ::-webkit-datetime-edit-millisecond-field { padding-block: 0; } ::-webkit-datetime-edit-meridiem-field { padding-block: 0; } ::-webkit-calendar-picker-indicator { line-height: 1; } :-moz-ui-invalid { box-shadow: none; } button, input:where([type="button"], [type="reset"], [type="submit"]) { appearance: button; } ::file-selector-button { appearance: button; } ::-webkit-inner-spin-button { height: auto; } ::-webkit-outer-spin-button { height: auto; } [hidden]:where(:not([hidden="until-found"])) { display: none !important; } html { width: 100%; min-height: 100dvh; } * { border-color: var(--build-chat-colors-border-primary); outline-color: var(--ring); } @supports (color: color-mix(in lab, red, red)) { * { outline-color: color-mix(in oklab, var(--ring) 50%, transparent); } } body { background-color: var(--color-bg-1); width: 100%; font-family: var(--font-sans); color: var(--build-chat-colors-text-primary); letter-spacing: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; min-height: 100dvh; font-weight: 400; } #root { width: 100%; min-height: 100dvh; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-logo); letter-spacing: 0; font-weight: 500; line-height: 1.15; } button { cursor: pointer; font-family: var(--font-body); letter-spacing: 0; font-weight: 500; } select { cursor: pointer; font-family: var(--font-body); } input, textarea { font-family: var(--font-body); letter-spacing: 0; } .font-logo { font-family: var(--font-logo); } .font-sans { font-family: var(--font-sans); } .font-serif { font-family: var(--font-serif); letter-spacing: 0; line-height: 1.6; } } @layer components; @layer utilities { .visible { visibility: visible; } .absolute { position: absolute; } .fixed { position: fixed; } .relative { position: relative; } .static { position: static; } .sticky { position: sticky; } .inset-0 { inset: 0; } .top-0 { top: 0; } .top-1\.5 { top: 6px; } .top-1\/2 { top: 50%; } .top-4 { top: 16px; } .right-1\.5 { right: 6px; } .right-3 { right: 12px; } .right-4 { right: 16px; } .bottom-0 { bottom: 0; } .bottom-6 { bottom: calc(var(--spacing) * 6); } .left-0 { left: 0; } .left-1\/2 { left: 50%; } .left-2 { left: 8px; } .left-4 { left: 16px; } .z-10 { z-index: 10; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[9999\] { z-index: 9999; } .container { width: 100%; } @media (min-width: 40rem) { .container { max-width: 40rem; } } @media (min-width: 48rem) { .container { max-width: 48rem; } } @media (min-width: 64rem) { .container { max-width: 64rem; } } @media (min-width: 80rem) { .container { max-width: 80rem; } } @media (min-width: 96rem) { .container { max-width: 96rem; } } .-mx-1 { margin-inline: -4px; } .mx-6 { margin-inline: calc(var(--spacing) * 6); } .mx-auto { margin-inline: auto; } .my-1 { margin-block: 4px; } .my-8 { margin-block: 32px; } .mt-0\.5 { margin-top: calc(var(--spacing) * .5); } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; } .mr-1 { margin-right: 4px; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-8 { margin-bottom: 32px; } .mb-10 { margin-bottom: 40px; } .ml-3 { margin-left: 12px; } .ml-auto { margin-left: auto; } .block { display: block; } .flex { display: flex; } .grid { display: grid; } .hidden { display: none; } .inline { display: inline; } .inline-flex { display: inline-flex; } .table { display: table; } .aspect-square { aspect-ratio: 1; } .h-1\.5 { height: 6px; } .h-2 { height: 8px; } .h-3\.5 { height: 14px; } .h-4 { height: 16px; } .h-5 { height: 20px; } .h-6 { height: calc(var(--spacing) * 6); } .h-7 { height: 28px; } .h-8 { height: 32px; } .h-10 { height: 40px; } .h-11 { height: calc(var(--spacing) * 11); } .h-12 { height: calc(var(--spacing) * 12); } .h-14 { height: calc(var(--spacing) * 14); } .h-16 { height: calc(var(--spacing) * 16); } .h-dvh { height: 100dvh; } .h-full { height: 100%; } .h-px { height: 1px; } .min-h-0 { min-height: 0; } .min-h-\[80dvh\] { min-height: 80dvh; } .min-h-\[100dvh\], .min-h-dvh { min-height: 100dvh; } .w-2 { width: 8px; } .w-3\.5 { width: 14px; } .w-4 { width: 16px; } .w-5 { width: 20px; } .w-6 { width: calc(var(--spacing) * 6); } .w-7 { width: 28px; } .w-8 { width: 32px; } .w-10 { width: 40px; } .w-12 { width: calc(var(--spacing) * 12); } .w-16 { width: calc(var(--spacing) * 16); } .w-32 { width: calc(var(--spacing) * 32); } .w-48 { width: calc(var(--spacing) * 48); } .w-64 { width: calc(var(--spacing) * 64); } .w-72 { width: calc(var(--spacing) * 72); } .w-full { width: 100%; } .max-w-5xl { max-width: var(--container-5xl); } .max-w-\[520px\] { max-width: 520px; } .max-w-\[640px\] { max-width: 640px; } .max-w-md { max-width: var(--container-md); } .min-w-32 { min-width: calc(var(--spacing) * 32); } .flex-1 { flex: 1; } .shrink-0 { flex-shrink: 0; } .grow { flex-grow: 1; } .-translate-x-1\/2 { --tw-translate-x: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-x-full { --tw-translate-x: -100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1 / 2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } .transform { transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, ); } .animate-pulse { animation: var(--animate-pulse); } .animate-spin { animation: var(--animate-spin); } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .place-items-center { place-items: center; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } :where(.space-y-1 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(4px * var(--tw-space-y-reverse)); margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-2 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(8px * var(--tw-space-y-reverse)); margin-block-end: calc(8px * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-3 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(12px * var(--tw-space-y-reverse)); margin-block-end: calc(12px * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-4 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(16px * var(--tw-space-y-reverse)); margin-block-end: calc(16px * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-5 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(20px * var(--tw-space-y-reverse)); margin-block-end: calc(20px * calc(1 - var(--tw-space-y-reverse))); } :where(.space-y-6 > :not(:last-child)) { --tw-space-y-reverse: 0; margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse)); margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse))); } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .rounded-2xl { border-radius: 24px; } .rounded-\[\*\] { border-radius: *; } .rounded-\[var\(--radius-container\)\] { border-radius: var(--radius-container); } .rounded-\[var\(--radius-inner\)\] { border-radius: var(--radius-inner); } .rounded-full { border-radius: 3.40282e38px; } .rounded-lg { border-radius: 24px; } .rounded-md { border-radius: 4px; } .rounded-pill { border-radius: 16777200px; } .rounded-xl { border-radius: 24px; } .border { border-style: var(--tw-border-style); border-width: 1px; } .border-0 { border-style: var(--tw-border-style); border-width: 0; } .border-t { border-top-style: var(--tw-border-style); border-top-width: 1px; } .border-r { border-right-style: var(--tw-border-style); border-right-width: 1px; } .border-b { border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } .border-\[var\(--ink\)\]\/10 { border-color: var(--ink); } @supports (color: color-mix(in lab, red, red)) { .border-\[var\(--ink\)\]\/10 { border-color: color-mix(in oklab, var(--ink) 10%, transparent); } } .border-\[var\(--ink\,black\)\]\/8 { border-color: var(--ink, black); } @supports (color: color-mix(in lab, red, red)) { .border-\[var\(--ink\,black\)\]\/8 { border-color: color-mix(in oklab, var(--ink, black) 8%, transparent); } } .border-border-primary, .border-border-primary\/50 { border-color: var(--build-chat-colors-border-primary); } @supports (color: color-mix(in lab, red, red)) { .border-border-primary\/50 { border-color: color-mix(in oklab, var(--build-chat-colors-border-primary) 50%, transparent); } } .border-danger, .border-danger\/20 { border-color: var(--build-chat-colors-danger); } @supports (color: color-mix(in lab, red, red)) { .border-danger\/20 { border-color: color-mix(in oklab, var(--build-chat-colors-danger) 20%, transparent); } } .bg-\[var\(--canvas\,\#f5f5f5\)\] { background-color: var(--canvas, #f5f5f5); } .bg-\[var\(--color-digital-blue\)\] { background-color: var(--color-digital-blue); } .bg-\[var\(--surface\,\#fff\)\] { background-color: var(--surface, #fff); } .bg-accent { background-color: var(--build-accent-color); } .bg-bg-2 { background-color: var(--build-chat-colors-bg-2); } .bg-bg-3, .bg-bg-3\/95 { background-color: var(--build-chat-colors-bg-3); } @supports (color: color-mix(in lab, red, red)) { .bg-bg-3\/95 { background-color: color-mix(in oklab, var(--build-chat-colors-bg-3) 95%, transparent); } } .bg-bg-elevated { background-color: var(--color-bg-3); } .bg-black\/50 { background-color: #00000080; } @supports (color: color-mix(in lab, red, red)) { .bg-black\/50 { background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } .bg-danger-subtle { background-color: var(--c-redBacPri); } .bg-muted { background-color: var(--color-bg-2); } .bg-text-secondary\/10 { background-color: var(--build-chat-colors-text-secondary); } @supports (color: color-mix(in lab, red, red)) { .bg-text-secondary\/10 { background-color: color-mix(in oklab, var(--build-chat-colors-text-secondary) 10%, transparent); } } .bg-transparent { background-color: #0000; } .bg-white { background-color: var(--color-white); } .bg-gradient-to-r { --tw-gradient-position: to right in oklab; background-image: linear-gradient(var(--tw-gradient-stops)); } .from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .via-\[var\(--c-graBacTer\)\] { --tw-gradient-via: var(--c-graBacTer); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .via-white\/10 { --tw-gradient-via: #ffffff1a; } @supports (color: color-mix(in lab, red, red)) { .via-white\/10 { --tw-gradient-via: color-mix(in oklab, var(--color-white) 10%, transparent); } } .via-white\/10 { --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } .to-transparent { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); } .fill-current { fill: currentColor; } .object-cover { object-fit: cover; } .p-0 { padding: 0; } .p-1 { padding: 4px; } .p-2 { padding: 8px; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: calc(var(--spacing) * 6); } .\!px-3 { padding-inline: 12px !important; } .px-2 { padding-inline: 8px; } .px-5 { padding-inline: 20px; } .px-6 { padding-inline: calc(var(--spacing) * 6); } .px-8 { padding-inline: 32px; } .py-1\.5 { padding-block: 6px; } .py-2 { padding-block: 8px; } .py-3 { padding-block: 12px; } .pt-12 { padding-top: calc(var(--spacing) * 12); } .pt-16 { padding-top: calc(var(--spacing) * 16); } .pr-2 { padding-right: 8px; } .pr-3 { padding-right: 12px; } .pr-10 { padding-right: 40px; } .pr-14 { padding-right: calc(var(--spacing) * 14); } .pb-0 { padding-bottom: 0; } .pb-6 { padding-bottom: calc(var(--spacing) * 6); } .pb-20 { padding-bottom: calc(var(--spacing) * 20); } .pl-2 { padding-left: 8px; } .pl-5 { padding-left: 20px; } .pl-8 { padding-left: 32px; } .text-center { text-align: center; } .text-left { text-align: left; } .font-display { font-family: var(--font-display); } .font-mono { font-family: var(--font-mono); } .text-2xl { font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } .text-base { font-size: 14px; line-height: var(--tw-leading, 20px); } .text-lg { font-size: 17px; line-height: var(--tw-leading, 24px); } .text-sm { font-size: 13px; line-height: var(--tw-leading, 18px); } .text-xl { font-size: var(--text-xl); line-height: var(--tw-leading, var(--text-xl--line-height)); } .text-xs { font-size: 12px; line-height: var(--tw-leading, 16px); } .text-\[10px\] { font-size: 10px; } .text-\[42px\] { font-size: 42px; } .leading-snug { --tw-leading: var(--leading-snug); line-height: var(--leading-snug); } .font-bold { --tw-font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold); } .font-medium { --tw-font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium); } .font-semibold { --tw-font-weight: var(--font-weight-semibold); font-weight: var(--font-weight-semibold); } .tracking-\[-0\.5px\] { --tw-tracking: -.5px; letter-spacing: -.5px; } .tracking-\[-1\.5px\] { --tw-tracking: -1.5px; letter-spacing: -1.5px; } .tracking-\[2px\] { --tw-tracking: 2px; letter-spacing: 2px; } .tracking-widest { --tw-tracking: var(--tracking-widest); letter-spacing: var(--tracking-widest); } .break-all { word-break: break-all; } .text-\[\*px\] { color: *px; } .text-\[var\(--ink\)\]\/30 { color: var(--ink); } @supports (color: color-mix(in lab, red, red)) { .text-\[var\(--ink\)\]\/30 { color: color-mix(in oklab, var(--ink) 30%, transparent); } } .text-\[var\(--ink\)\]\/40 { color: var(--ink); } @supports (color: color-mix(in lab, red, red)) { .text-\[var\(--ink\)\]\/40 { color: color-mix(in oklab, var(--ink) 40%, transparent); } } .text-\[var\(--ink\)\]\/50 { color: var(--ink); } @supports (color: color-mix(in lab, red, red)) { .text-\[var\(--ink\)\]\/50 { color: color-mix(in oklab, var(--ink) 50%, transparent); } } .text-\[var\(--ink\)\]\/55 { color: var(--ink); } @supports (color: color-mix(in lab, red, red)) { .text-\[var\(--ink\)\]\/55 { color: color-mix(in oklab, var(--ink) 55%, transparent); } } .text-\[var\(--ink\)\]\/60 { color: var(--ink); } @supports (color: color-mix(in lab, red, red)) { .text-\[var\(--ink\)\]\/60 { color: color-mix(in oklab, var(--ink) 60%, transparent); } } .text-\[var\(--ink\,\#000\)\] { color: var(--ink, #000); } .text-danger { color: var(--build-chat-colors-danger); } .text-destructive { color: var(--destructive); } .text-muted-foreground { color: var(--color-text-tertiary); } .text-primary { color: var(--color-brand-primary); } .text-red-500 { color: var(--color-red-500); } .text-text-inverted { color: var(--build-chat-colors-text-inverted); } .text-text-primary { color: var(--build-chat-colors-text-primary); } .text-text-tertiary { color: var(--build-chat-colors-text-tertiary); } .text-white { color: var(--color-white); } .lowercase { text-transform: lowercase; } .uppercase { text-transform: uppercase; } .underline { text-decoration-line: underline; } .opacity-60 { opacity: .6; } .shadow-2xl { --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-lg { --tw-shadow: var(--tw-shadow-color, #0000000d) 0px 2px 20px -1px inset; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-md { --tw-shadow: var(--tw-shadow-color, #cfe2ff3d) 0px 0px 0px 1px, var(--tw-shadow-color, #fffc) 0px -.5px 0px 0px; box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .shadow-panel { --tw-shadow: var(--workspace-shadow); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .ring { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .backdrop-blur-md { --tw-backdrop-blur: blur(var(--blur-md)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .backdrop-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, ); } .transition { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-transform { transition-property: transform, translate, scale, rotate; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .duration-150, .duration-default { --tw-duration: .15s; transition-duration: .15s; } .ease-linear { --tw-ease: linear; transition-timing-function: linear; } .outline-none { --tw-outline-style: none; outline-style: none; } .select-none { -webkit-user-select: none; user-select: none; } .\[runner\:clone\] { runner: clone; } .paused { animation-play-state: paused; } .running { animation-play-state: running; } @media (hover: hover) { .group-hover\:translate-x-full:is(:where(.group):hover *) { --tw-translate-x: 100%; translate: var(--tw-translate-x) var(--tw-translate-y); } .hover\:bg-\[var\(--canvas\)\]:hover { background-color: var(--canvas); } .hover\:bg-accent:hover, .hover\:bg-accent\/90:hover { background-color: var(--build-accent-color); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-accent\/90:hover { background-color: color-mix(in oklab, var(--build-accent-color) 90%, transparent); } } .hover\:bg-bg-2\/50:hover { background-color: var(--build-chat-colors-bg-2); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-bg-2\/50:hover { background-color: color-mix(in oklab, var(--build-chat-colors-bg-2) 50%, transparent); } } .hover\:bg-bg-3:hover { background-color: var(--build-chat-colors-bg-3); } .hover\:bg-bg-hover:hover { background-color: var(--color-text-primary); } @supports (color: color-mix(in lab, red, red)) { .hover\:bg-bg-hover:hover { background-color: color-mix(in srgb, var(--color-text-primary) 5%, var(--color-bg-2)); } } .hover\:text-text-primary:hover { color: var(--build-chat-colors-text-primary); } .hover\:ring-2:hover { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .hover\:ring-\[var\(--color-digital-blue\)\]\/20:hover { --tw-ring-color: var(--color-digital-blue); } @supports (color: color-mix(in lab, red, red)) { .hover\:ring-\[var\(--color-digital-blue\)\]\/20:hover { --tw-ring-color: color-mix(in oklab, var(--color-digital-blue) 20%, transparent); } } } .focus\:border-\[var\(--blue-accent\,\#0f7fff\)\]:focus { border-color: var(--blue-accent, #0f7fff); } .focus\:border-accent:focus { border-color: var(--build-accent-color); } .focus\:bg-accent-subtle:focus { background-color: var(--c-bluBacPri); } .focus\:text-accent:focus { color: var(--build-accent-color); } .focus\:text-text-primary:focus { color: var(--build-chat-colors-text-primary); } .focus-visible\:ring-2:focus-visible { --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } .focus-visible\:ring-accent\/20:focus-visible { --tw-ring-color: var(--build-accent-color); } @supports (color: color-mix(in lab, red, red)) { .focus-visible\:ring-accent\/20:focus-visible { --tw-ring-color: color-mix(in oklab, var(--build-accent-color) 20%, transparent); } } .focus-visible\:outline-none:focus-visible { --tw-outline-style: none; outline-style: none; } .active\:scale-95:active { --tw-scale-x: 95%; --tw-scale-y: 95%; --tw-scale-z: 95%; scale: var(--tw-scale-x) var(--tw-scale-y); } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:opacity-50:disabled { opacity: .5; } .data-\[disabled\]\:pointer-events-none[data-disabled] { pointer-events: none; } .data-\[disabled\]\:opacity-50[data-disabled] { opacity: .5; } .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] { --tw-enter-translate-y: calc(2*var(--spacing)*-1); } .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] { --tw-enter-translate-x: calc(2*var(--spacing)); } .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] { --tw-enter-translate-x: calc(2*var(--spacing)*-1); } .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] { --tw-enter-translate-y: calc(2*var(--spacing)); } .data-\[state\=closed\]\:animate-out[data-state="closed"] { animation: exit var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); } .data-\[state\=closed\]\:fade-out-0[data-state="closed"] { --tw-exit-opacity: 0; } .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] { --tw-exit-scale: .95; } .data-\[state\=open\]\:animate-in[data-state="open"] { animation: enter var(--tw-animation-duration, var(--tw-duration, .15s))var(--tw-ease, ease)var(--tw-animation-delay, 0s)var(--tw-animation-iteration-count, 1)var(--tw-animation-direction, normal)var(--tw-animation-fill-mode, none); } .data-\[state\=open\]\:bg-accent-subtle[data-state="open"] { background-color: var(--c-bluBacPri); } .data-\[state\=open\]\:text-accent[data-state="open"] { color: var(--build-accent-color); } .data-\[state\=open\]\:fade-in-0[data-state="open"] { --tw-enter-opacity: 0; } .data-\[state\=open\]\:zoom-in-95[data-state="open"] { --tw-enter-scale: .95; } @media (min-width: 48rem) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dark\:via-\[var\(--c-graBacSec\)\]:is(.dark *) { --tw-gradient-via: var(--c-graBacSec); --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-via-stops); } } @property --tw-animation-delay { syntax: "*"; inherits: false; initial-value: 0s; } @property --tw-animation-direction { syntax: "*"; inherits: false; initial-value: normal; } @property --tw-animation-duration { syntax: "*"; inherits: false } @property --tw-animation-fill-mode { syntax: "*"; inherits: false; initial-value: none; } @property --tw-animation-iteration-count { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-enter-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-enter-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-blur { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-opacity { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-rotate { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-scale { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-exit-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-exit-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @font-face { font-family: departureMono; src: url("/assets/DepartureMono-Regular-DBuWTdvd.woff"); } @keyframes chat-edge-throb { 0%, 100% { box-shadow: 0 0 #6366f114, inset 0 0 0 1px #6366f11f; } 50% { box-shadow: 0 0 0 4px #6366f10f, inset 0 0 0 1px #6366f129; } } .chat-edge-throb { border-radius: .75rem; animation: 1.6s ease-in-out infinite chat-edge-throb; } @media (prefers-reduced-motion: reduce) { .chat-edge-throb { animation: none; } } @keyframes fadein { 0% { opacity: 0; } to { opacity: 1; } } @keyframes shimmer { 0% { transform: translateX(-100%); } to { transform: translateX(100%); } } @keyframes pulse-opacity { 0%, to { opacity: .3; } 50% { opacity: 1; } } @keyframes slide-up-small { 0% { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { @keyframes ml-logo-breathe { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes ml-logo-glow { 0%, 100% { opacity: .35; transform: scale(.88); } 50% { opacity: .7; transform: scale(1); } } .animate-ml-logo-breathe { animation: 1.85s cubic-bezier(.45, 0, .55, 1) infinite ml-logo-breathe; } .animate-ml-logo-glow { animation: 1.85s cubic-bezier(.45, 0, .55, 1) infinite ml-logo-glow; } } @keyframes send-burst { 0% { transform: scale(1); } 30% { transform: scale(1.2); } 50% { transform: scale(.95); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } } .animate-send-burst { animation: .4s cubic-bezier(.34, 1.56, .64, 1) send-burst; } @keyframes status-spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } @keyframes status-pop-in { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } } .animate-status-pop-in { animation: .3s cubic-bezier(.34, 1.56, .64, 1) forwards status-pop-in; } @keyframes dotdance { 0% { transform: translateY(0); } to { transform: translateY(2px); } } @keyframes shimmer-text { 0% { background-position: 200%; } to { background-position: 0%; } } .focus-ring:focus-visible { box-shadow: var(--color-focus-ring); outline: none; } .ds-loading-dots { justify-content: center; align-items: center; gap: 2px; width: 16px; height: 16px; display: inline-flex; } .ds-loading-dot { opacity: .85; background: currentColor; border-radius: 9999px; width: 4px; height: 4px; animation-name: dotdance; animation-duration: .5s; animation-timing-function: cubic-bezier(.11, 0, .5, 0); animation-iteration-count: infinite; animation-direction: alternate; } .ds-loading-dots .ds-loading-dot:first-child { animation-delay: .2s; } .ds-loading-dots .ds-loading-dot:nth-child(2) { animation-delay: .4s; } .ds-loading-dots .ds-loading-dot:nth-child(3) { animation-delay: .6s; } .ds-skeleton { background: var(--color-bg-2); border-radius: var(--radius-md); isolation: isolate; position: relative; overflow: hidden; } .ds-skeleton--shimmer:before { content: ""; z-index: 1; background: linear-gradient(90deg, transparent 0%, var(--c-texPri) 50%, transparent 100%); position: absolute; inset: 0; } @supports (color: color-mix(in lab, red, red)) { .ds-skeleton--shimmer:before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-texPri) 6%, transparent) 50%, transparent 100%); } } .ds-skeleton--shimmer:before { animation: 1s linear infinite shimmer; transform: translateX(-100%); } .dark .ds-skeleton--shimmer:before { background: linear-gradient(90deg, transparent 0%, var(--c-texPri) 50%, transparent 100%); } @supports (color: color-mix(in lab, red, red)) { .dark .ds-skeleton--shimmer:before { background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--c-texPri) 10%, transparent) 50%, transparent 100%); } } .ds-shimmer-text { -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, var(--c-texPri), var(--c-texPri), var(--c-texPri)); } @supports (color: color-mix(in lab, red, red)) { .ds-shimmer-text { background-image: linear-gradient(90deg, color-mix(in srgb, var(--c-texPri) 22%, transparent), var(--c-texPri), color-mix(in srgb, var(--c-texPri) 22%, transparent)); } } .ds-shimmer-text { -webkit-user-select: none; user-select: none; background-size: 200% 100%; animation: 1.5s linear infinite shimmer-text; } .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; width: 0 !important; height: 0 !important; } .autolayout-fill-width { width: 100%; } .autolayout-fill-height { height: 100%; } .autolayout-col { flex-direction: column; display: flex; } .autolayout-row { flex-direction: row; display: flex; } .autolayout-col > .autolayout-fill-width { width: unset; align-self: stretch; } .autolayout-col > .autolayout-fill-height { height: unset; flex: 1 0 0; } .autolayout-row > .autolayout-fill-width { width: unset; flex: 1 1 0; } .autolayout-row > .autolayout-fill-height { height: unset; align-self: stretch; } .ds-editable[contenteditable="true"] { caret-color: var(--color-brand-primary); } .ds-editable[contenteditable="true"]:empty:before { content: attr(data-placeholder); color: var(--c-texTer); opacity: .75; pointer-events: none; } .ds-editable[contenteditable="true"]:focus { box-shadow: var(--focus-ring); outline: none; } .ds-editable[contenteditable="true"]::selection { background: var(--surface-hover-alpha); } .ds-editable[contenteditable="true"] ::selection { background: var(--surface-hover-alpha); } :root { --color-canvas-white: #0c0c0f; --color-subtle-gray: #2a2a32; --color-surface-text: #f0f0f4; --color-paragraph-gray: #c8c8d0; --color-muted-text: #8c8f9c; --color-sky-canvas: #111116; --color-digital-blue: #5b9bff; --color-deep-ocean-gradient-start: #3b7bf4; --color-frost-morning-gradient-start: #1a2540; --color-process-blue-gradient-start: #2070cc; --color-system-green: #4cff68; --color-teal-tint: #7df0f8; --radius: 16777200px; --radius-cards: 24px; --radius-badges: 4px; --radius-inputs: 4px; --radius-general: 4px; --destructive: #e03e3e; --border: var(--color-subtle-gray); --input: var(--color-canvas-white); --ring: var(--color-digital-blue); --build-accent-color: var(--color-digital-blue); --build-chat-colors-bg-1: var(--color-canvas-white); --build-chat-colors-bg-2: var(--color-sky-canvas); --build-chat-colors-bg-3: var(--color-canvas-white); --build-chat-colors-bg-4: var(--color-subtle-gray); --build-chat-colors-border-primary: var(--color-subtle-gray); --build-chat-colors-border-secondary: var(--color-subtle-gray); --build-chat-colors-border-tertiary: var(--color-subtle-gray); --build-chat-colors-danger: #e03e3e; --build-chat-colors-brand-heavy: var(--color-deep-ocean-gradient-start); --build-chat-colors-brand-primary: var(--color-digital-blue); --build-chat-colors-brand-subtle: var(--color-sky-canvas); --build-chat-colors-text-inverted: var(--color-canvas-white); --build-chat-colors-text-primary: var(--color-surface-text); --build-chat-colors-text-secondary: var(--color-paragraph-gray); --build-chat-colors-text-tertiary: var(--color-muted-text); --workspace-border-width: 1px; --workspace-border-width-thick: 1px; --workspace-shadow: 0 14px 40px -24px #0000000d; --workspace-shadow-lg: 0 2px 20px -1px inset #0000000d; --workspace-shadow-xl: 0 2px 20px -1px inset #0000000d; --shadow-dialog: 0 24px 60px -28px #0000001a; --shadow-elevation: #0c44a1 0px 0px 0px .5px, #022c70 0px -1px 0px 0px inset, #81b6ff 0px .5px 0px 0px inset; --glow-hero: 0 40px 160px #3c83f640; --gradient-hero: radial-gradient(114.65% 114.65% at 9.73% 17.27%, #1e82e0 0px, #1c38ea 100%); --mindalike-ai-composer-radius: 24px; --mindalike-ai-composer-pad-x: 16px; --mindalike-ai-composer-pad-top: 16px; --mindalike-ai-composer-textarea-pad-bottom: 8px; --mindalike-ai-composer-bar-pad-x: 10px; --mindalike-ai-composer-bar-pad-y: 9px; --mindalike-ai-composer-font-size: 14px; --mindalike-ai-composer-line-height: 1.43; --mindalike-ai-composer-icon-size: 28px; --mindalike-ai-composer-toolbar-gap: 8px; --mindalike-ai-composer-bg: var(--color-canvas-white); --mindalike-ai-composer-border-color: var(--color-subtle-gray); --mindalike-ai-composer-shadow: #0000000d 0px 2px 20px -1px inset; --mindalike-ai-composer-accent: var(--color-digital-blue); --mindalike-ai-composer-selection-bg: #3c83f61a; --mindalike-ai-composer-shadow-focus: #0000000d 0px 2px 20px -1px inset; --mindalike-ai-composer-bar-divider: var(--color-subtle-gray); --mindalike-ai-composer-send-bg: var(--color-digital-blue); --mindalike-ai-composer-send-bg-hover: var(--color-deep-ocean-gradient-start); --mindalike-ai-composer-send-border: transparent; } .dark { --color-canvas-white: #0c0c0f; --color-subtle-gray: #2a2a32; --color-surface-text: #f0f0f4; --color-paragraph-gray: #c8c8d0; --color-muted-text: #7e7e8c; --color-sky-canvas: #111116; --color-digital-blue: #5b9bff; --color-deep-ocean-gradient-start: #3b7bf4; --color-frost-morning-gradient-start: #1a2a22; --color-process-blue-gradient-start: #2070cc; --build-chat-colors-bg-1: #0c0c0f; --build-chat-colors-bg-2: #111116; --build-chat-colors-bg-3: #18181d; --build-chat-colors-bg-4: #222228; --build-chat-colors-border-primary: #2a2a32; --build-chat-colors-border-secondary: #333340; --build-chat-colors-border-tertiary: #3d3d48; --build-chat-colors-danger: #f04444; --build-chat-colors-brand-heavy: #3b7bf4; --build-chat-colors-brand-primary: #5b9bff; --build-chat-colors-brand-subtle: #1a2540; --build-chat-colors-text-inverted: #0c0c0f; --build-chat-colors-text-primary: #f0f0f4; --build-chat-colors-text-secondary: #c8c8d0; --build-chat-colors-text-tertiary: #7e7e8c; --c-graTexPri: #f0f0f4; --c-graTexSec: #c8c8d0; --c-graTexTer: #7e7e8c; --c-graTexDis: #4a4a55; --c-graIcoPri: #e0e0e8; --c-graIcoSec: #a0a0ac; --c-graBorPri: #2a2a32; --c-graBorSec: #333340; --c-graBacPri: #0c0c0f; --c-graBacSec: #111116; --c-graBacTer: #18181d; --c-bluTexPri: #5b9bff; --c-bluTexSec: #3b7bf4; --c-bluIcoPri: #5b9bff; --c-bluBorPri: #3b7bf4; --c-bluBacPri: #1a2540; --c-bluBacSec: #0f1a30; --destructive: #f04444; --border: #2a2a32; --input: #111116; --ring: #5b9bff; --workspace-shadow: 0 14px 40px -24px #0006; --workspace-shadow-lg: 0 2px 20px -1px inset #00000040; --shadow-dialog: 0 24px 60px -28px #00000080; --glow-hero: 0 40px 160px #5b9bff26; --mindalike-ai-composer-bg: #111116; --mindalike-ai-composer-border-color: #2a2a32; --mindalike-ai-composer-shadow: #0003 0px 2px 20px -1px inset; --mindalike-ai-composer-bar-divider: #2a2a32; --mindalike-ai-composer-send-bg: #5b9bff; --mindalike-ai-composer-send-bg-hover: #3b7bf4; --mindalike-ai-composer-send-border: transparent; --color-text-quaternary: #7e7e8c; } .kinetic-headline { font-family: var(--font-display); letter-spacing: 0; text-align: center; color: var(--color-text-primary); will-change: transform; transform-style: preserve-3d; backface-visibility: hidden; font-size: 6rem; font-weight: 500; line-height: .98; } @media (min-width: 1024px) { .kinetic-headline { font-size: 8rem; } } @media (max-width: 767px) { .kinetic-headline { font-size: 4rem; } } .mindalike-design-system { color-scheme: dark; background: var(--color-canvas-white); color: var(--color-surface-text); font-family: var(--font-body); letter-spacing: 0; --color-canvas-white: #0c0c0f; --color-subtle-gray: #2a2a32; --color-surface-text: #f0f0f4; --color-paragraph-gray: #c8c8d0; --color-muted-text: #8c8f9c; --color-sky-canvas: #111116; --color-digital-blue: #5b9bff; --color-deep-ocean-gradient-start: #3b7bf4; --color-frost-morning-gradient-start: #1a2540; --color-process-blue-gradient-start: #2070cc; --color-system-green: #4cff68; --color-teal-tint: #7df0f8; --radius-buttons: 9999px; --build-chat-colors-bg-1: var(--color-canvas-white); --build-chat-colors-bg-2: var(--color-sky-canvas); --build-chat-colors-bg-3: var(--color-canvas-white); --build-chat-colors-bg-4: var(--color-subtle-gray); --build-chat-colors-border-primary: var(--color-subtle-gray); --build-chat-colors-border-secondary: var(--color-subtle-gray); --build-chat-colors-border-tertiary: var(--color-subtle-gray); --build-chat-colors-brand-heavy: var(--color-deep-ocean-gradient-start); --build-chat-colors-brand-primary: var(--color-digital-blue); --build-chat-colors-brand-subtle: var(--color-sky-canvas); --build-chat-colors-text-inverted: var(--color-canvas-white); --build-chat-colors-text-primary: var(--color-surface-text); --build-chat-colors-text-secondary: var(--color-paragraph-gray); --build-chat-colors-text-tertiary: var(--color-muted-text); --btn-primary-bg: var(--color-digital-blue); --btn-primary-fg: var(--color-canvas-white); --btn-primary-border: transparent; --btn-primary-bg-hover: var(--color-deep-ocean-gradient-start); --btn-primary-bg-pressed: var(--color-deep-ocean-gradient-start); --workspace-shadow: #0000000d 0px 2px 20px -1px inset; --shadow-soft-layered: #0000000d 0px 2px 20px -1px inset; --gradient-hero: radial-gradient(114.65% 114.65% at 9.73% 17.27%, #1e82e0 0%, #1c38ea 100%); } :root, .dark .mindalike-design-system, .mindalike-design-system--dark { color-scheme: dark; color: #f0f0f4; --color-canvas-white: #0c0c0f; --color-subtle-gray: #2a2a32; --color-surface-text: #f0f0f4; --color-paragraph-gray: #c8c8d0; --color-muted-text: #8c8f9c; --color-sky-canvas: #111116; --color-digital-blue: #5b9bff; --color-deep-ocean-gradient-start: #3b7bf4; --color-frost-morning-gradient-start: #1a2540; --color-process-blue-gradient-start: #2070cc; --color-system-green: #4cff68; --color-teal-tint: #7df0f8; --radius-buttons: 9999px; --page-max-width: 1200px; --shadow-button: #0c44a1 0px 0px 0px .5px, #022c70 0px -1px 0px 0px inset, #81b6ff 0px .5px 0px 0px inset; --shadow-frost: #ffffff14 0px 0px 0px 1px, #ffffff14 0px -.5px 0px 0px; --build-chat-colors-bg-1: #0c0c0f; --build-chat-colors-bg-2: #111116; --build-chat-colors-bg-3: #18181d; --build-chat-colors-bg-4: #222228; --build-chat-colors-border-primary: #2a2a32; --build-chat-colors-border-secondary: #333340; --build-chat-colors-border-tertiary: #3d3d48; --build-chat-colors-brand-heavy: #3b7bf4; --build-chat-colors-brand-primary: #5b9bff; --build-chat-colors-brand-subtle: #1a2540; --build-chat-colors-text-inverted: #0c0c0f; --build-chat-colors-text-primary: #f0f0f4; --build-chat-colors-text-secondary: #c8c8d0; --build-chat-colors-text-tertiary: #8c8f9c; --btn-primary-bg: var(--color-digital-blue); --btn-primary-fg: #0c0c0f; --btn-primary-bg-hover: #7db2ff; --btn-primary-bg-pressed: #3b7bf4; --mindalike-ai-composer-bg: #111116db; --mindalike-ai-composer-border-color: #ffffff29; --mindalike-ai-composer-bar-divider: #ffffff1f; --mindalike-ai-composer-send-bg: var(--color-digital-blue); --mindalike-ai-composer-send-bg-hover: #7db2ff; background: #0c0c0f; } .mindalike-design-system *, .mindalike-design-system :before, .mindalike-design-system :after { letter-spacing: 0; } .mindalike-hero-section { background: none; } .mindalike-shell { background: var(--color-bg-1, transparent); min-height: 100svh; color: var(--color-text-primary); } .mindalike-global-header { z-index: 50; border-bottom: 1px solid var(--color-subtle-gray); position: sticky; top: 0; } @supports (color: color-mix(in lab, red, red)) { .mindalike-global-header { border-bottom: 1px solid color-mix(in srgb, var(--color-subtle-gray) 30%, transparent); } } .mindalike-global-header { background: var(--color-canvas-white); } @supports (color: color-mix(in lab, red, red)) { .mindalike-global-header { background: color-mix(in srgb, var(--color-canvas-white) 35%, transparent); } } .mindalike-global-header { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .mindalike-header-inner { grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; width: min(100%, 1200px); height: 56px; margin: 0 auto; padding: 0 20px; display: grid; } .mindalike-header-nav { border: 1px solid var(--color-subtle-gray); justify-self: center; align-items: center; gap: 4px; padding: 4px; display: inline-flex; } @supports (color: color-mix(in lab, red, red)) { .mindalike-header-nav { border: 1px solid color-mix(in srgb, var(--color-subtle-gray) 78%, transparent); } } .mindalike-header-nav { border-radius: var(--radius-buttons); background: var(--color-canvas-white); } @supports (color: color-mix(in lab, red, red)) { .mindalike-header-nav { background: color-mix(in srgb, var(--color-canvas-white) 62%, transparent); } } .mindalike-header-nav-link { border-radius: var(--radius-buttons); white-space: nowrap; min-height: 32px; color: var(--color-paragraph-gray); justify-content: center; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; font-weight: 500; line-height: 1; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; display: inline-flex; } .mindalike-header-nav-link:hover, .mindalike-header-nav-link.is-active { background: var(--color-digital-blue); color: var(--color-text-primary); box-shadow: 0 0 0 .5px #0c44a1, inset 0 -1px #022c70, inset 0 .5px #81b6ff; } .ds-button { border-radius: var(--radius-buttons); white-space: nowrap; justify-content: center; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; line-height: 1; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s; display: inline-flex; } .ds-button-ghost { border: 1px solid var(--color-subtle-gray); } @supports (color: color-mix(in lab, red, red)) { .ds-button-ghost { border: 1px solid color-mix(in srgb, var(--color-subtle-gray) 80%, transparent); } } .ds-button-ghost { color: var(--color-paragraph-gray); background: none; } .ds-button-ghost:hover { border-color: var(--color-digital-blue); } @supports (color: color-mix(in lab, red, red)) { .ds-button-ghost:hover { border-color: color-mix(in srgb, var(--color-digital-blue) 42%, var(--color-subtle-gray)); } } .ds-button-ghost:hover { color: var(--color-surface-text); } .mindalike-header-status { border: 1px solid var(--header-border); border-radius: var(--radius-buttons); background: var(--header-pill); color: var(--header-muted); padding: 5px 10px; font-size: 12px; line-height: 1.2; transition: background-color .15s, color .15s; } .mindalike-header-status:hover { background: var(--header-pill); } @supports (color: color-mix(in lab, red, red)) { .mindalike-header-status:hover { background: color-mix(in srgb, var(--header-pill) 78%, var(--color-digital-blue)); } } .mindalike-header-status:hover { color: var(--header-fg); } .mindalike-header-icon-button, .mindalike-header-action { border-radius: var(--radius-buttons); color: var(--header-muted); } .mindalike-mobile-nav { background: var(--color-bg-1); } @supports (color: color-mix(in lab, red, red)) { .mindalike-mobile-nav { background: color-mix(in srgb, var(--color-bg-1) 88%, transparent); } } .mindalike-mobile-nav { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .mindalike-mobile-nav-list { gap: 8px; padding: 8px; display: grid; } .mindalike-mobile-nav-list .mindalike-header-nav-link { border: 1px solid var(--color-border-primary); min-height: 42px; color: var(--color-text-primary); justify-content: flex-start; padding: 0 14px; } @keyframes shimmer-unlumen { 0% { background-position: 0%; } 100% { background-position: -200%; } } .mindalike-hero-emphasis { color: #0000; background: linear-gradient(110deg, var(--color-digital-blue) 0%, var(--color-digital-blue) 35%, var(--color-text-primary) 50%, var(--color-digital-blue) 65%, var(--color-digital-blue) 100%); filter: drop-shadow(0 0 12px #5b9bff66); background-size: 200%; -webkit-background-clip: text; background-clip: text; animation: 1.2s linear infinite shimmer-unlumen; display: inline-block; } .mindalike-hero-muted-copy { color: var(--color-text-inverted); } @supports (color: color-mix(in lab, red, red)) { .mindalike-hero-muted-copy { color: color-mix(in srgb, var(--color-text-inverted) 82%, transparent); } } .mindalike-hero-auth-option { background: var(--color-canvas-white); color: var(--color-surface-text); border-color: #ffffff40; border-radius: 9999px; } .mindalike-hero-auth-option:hover { background: var(--color-canvas-white); } @supports (color: color-mix(in lab, red, red)) { .mindalike-hero-auth-option:hover { background: color-mix(in srgb, var(--color-canvas-white) 90%, transparent); } } .mindalike-backed-label { color: var(--color-text-inverted); } @supports (color: color-mix(in lab, red, red)) { .mindalike-backed-label { color: color-mix(in srgb, var(--color-text-inverted) 62%, transparent); } } .landing-hero-headline { font-family: var(--font-display); letter-spacing: 0; text-align: center; color: var(--color-text-primary); will-change: transform; transform-style: preserve-3d; backface-visibility: hidden; font-size: 3.25rem; font-weight: 500; line-height: 1.1; } .landing-hero-subcopy { text-wrap: pretty; } .mindalike-section-heading { font-family: var(--font-logo); letter-spacing: 0; color: var(--color-surface-text); font-weight: 500; line-height: 1.13; } .mindalike-eyebrow { font-family: var(--font-body); letter-spacing: 0; text-transform: uppercase; color: var(--color-muted-text); font-size: 12px; font-weight: 500; line-height: 16px; } .mindalike-card { border: 1px solid var(--color-subtle-gray); background: var(--color-canvas-white); border-radius: 24px; } @supports (color: color-mix(in lab, red, red)) { .mindalike-card { background: color-mix(in srgb, var(--color-canvas-white) 86%, transparent); } } .mindalike-card { box-shadow: none; } .mindalike-card-active { border-color: var(--color-digital-blue); } @supports (color: color-mix(in lab, red, red)) { .mindalike-card-active { border-color: color-mix(in srgb, var(--color-digital-blue) 36%, var(--color-subtle-gray)); } } .mindalike-card-active { background: var(--color-canvas-white); box-shadow: 0 0 0 1px #cfe2ff3d, 0 -.5px #fffc; } .mindalike-product-frame { border: 1px solid var(--color-subtle-gray); background: var(--color-canvas-white); border-radius: 24px; } @supports (color: color-mix(in lab, red, red)) { .mindalike-product-frame { background: color-mix(in srgb, var(--color-canvas-white) 70%, transparent); } } .mindalike-product-frame { -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px #cfe2ff3d, 0 -.5px #fffc; } .mindalike-hero-chip { color: #ffffffdb; background: #ffffff1f; border: 1px solid #ffffff3d; border-radius: 9999px; } .scroll-preview-input-glow { animation: 4s ease-in-out infinite scroll-preview-glow; } @keyframes scroll-preview-glow { 0%, 100% { box-shadow: 0 0 #1e90ff00; } 50% { box-shadow: 0 0 40px #1e90ff26; } } .scroll-preview-typing-dot { animation: .6s ease-in-out infinite scroll-preview-typing; } .scroll-preview-typing-dot.animation-delay-200 { animation-delay: .2s; } .scroll-preview-typing-dot.animation-delay-400 { animation-delay: .4s; } @keyframes scroll-preview-typing { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } } .scroll-preview-launch-cta { animation: 2s ease-in-out infinite scroll-preview-border-pulse; } @keyframes scroll-preview-border-pulse { 0%, 100% { border-color: #1e90ff4d; } 50% { border-color: #1e90ff99; } } @media (prefers-reduced-motion: reduce) { .scroll-preview-input-glow, .scroll-preview-typing-dot, .scroll-preview-launch-cta { animation: none; } } .landing-hero-bg { pointer-events: none; z-index: -10; position: absolute; inset: 0; transform: translateZ(0); } .landing-hero-bg:before { content: ""; filter: saturate(1.06) contrast(1.03); background: radial-gradient(980px 560px at 18% 16%, #1e90ff4d, #0000 62%), radial-gradient(860px 600px at 78% 22%, #4169e12e, #0000 64%), radial-gradient(920px 700px at 58% 82%, #0a173adb, #0000 68%), linear-gradient(145deg, #030a14f5, #071b3ce0 52%, #020617fb 100%); position: absolute; inset: -2px; } .landing-hero-bg:after { content: ""; opacity: .05; mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); background-position: 0 0; background-size: 160px 160px; position: absolute; inset: 0; } .dark .landing-hero-bg:after { opacity: .055; } .landing-hero-bg.light:before { filter: saturate(1.03) contrast(1.02); background: radial-gradient(920px 560px at 18% 16%, #1e90ff38, #0000 60%), radial-gradient(860px 560px at 74% 24%, #4169e124, #0000 62%), radial-gradient(900px 660px at 58% 78%, #0a173a2e, #0000 68%), linear-gradient(145deg, #f6f6f6, #ebf4ff 42%, #e0eeff 100%); } .landing-cta-premium { background: radial-gradient(800px 450px at 20% 40%, #1e90ff38, #0000 60%), radial-gradient(700px 400px at 80%, #7bc3ff2e, #0000 58%), linear-gradient(135deg, #2d7cc9 0%, #4a9ae8 40%, #5eade8 70%, #7bc0f0 100%); position: relative; } .landing-cta-premium:after { content: ""; opacity: .025; mix-blend-mode: soft-light; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); background-position: 0 0; background-size: 160px 160px; position: absolute; inset: 0; } .monaco-editor { position: absolute !important; } :root { --scrollbar-width: 6px; --scrollbar-thumb: var(--c-graTexPri); } @supports (color: color-mix(in lab, red, red)) { :root { --scrollbar-thumb: color-mix(in srgb, var(--c-graTexPri) 25%, transparent); } } :root { --scrollbar-thumb-hover: var(--c-graTexPri); } @supports (color: color-mix(in lab, red, red)) { :root { --scrollbar-thumb-hover: color-mix(in srgb, var(--c-graTexPri) 40%, transparent); } } :root { --scrollbar-track: transparent; } .dark { --scrollbar-thumb: var(--c-graTexPri); } @supports (color: color-mix(in lab, red, red)) { .dark { --scrollbar-thumb: color-mix(in srgb, var(--c-graTexPri) 30%, transparent); } } .dark { --scrollbar-thumb-hover: var(--c-graTexPri); } @supports (color: color-mix(in lab, red, red)) { .dark { --scrollbar-thumb-hover: color-mix(in srgb, var(--c-graTexPri) 50%, transparent); } } ::-webkit-scrollbar { background-color: #0000; width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background-color: #0003; border-radius: 4px; transition: background-color .2s; } ::-webkit-scrollbar-thumb:hover { background-color: #0000004d; } .dark ::-webkit-scrollbar-thumb { background-color: #fff3; } .dark ::-webkit-scrollbar-thumb:hover { background-color: #ffffff4d; } ::-webkit-scrollbar-corner { background-color: #0000; } .scroll-area { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); overflow: auto; } .scroll-area::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } .scroll-area::-webkit-scrollbar-track { background: var(--scrollbar-track); } .scroll-area::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: calc(var(--scrollbar-width) / 2); transition: background-color .15s; } .scroll-area::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } .scroll-area-fade { position: relative; overflow: hidden; } .scroll-area-fade > .scroll-area-inner { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); max-height: inherit; overflow: auto; } .scroll-area-fade > .scroll-area-inner::-webkit-scrollbar { width: var(--scrollbar-width); height: var(--scrollbar-width); } .scroll-area-fade > .scroll-area-inner::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: calc(var(--scrollbar-width) / 2); } .scroll-area-fade > .scroll-area-inner::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } .scroll-area-fade:before, .scroll-area-fade:after { content: ""; pointer-events: none; z-index: 1; height: 12px; position: absolute; left: 0; right: 0; } .scroll-area-fade:before { background: linear-gradient(to bottom, var(--scroll-area-fade-bg, var(--color-bg-3)), transparent); top: 0; } .scroll-area-fade:after { background: linear-gradient(to top, var(--scroll-area-fade-bg, var(--color-bg-3)), transparent); bottom: 0; } .scroll-area-thumb { background-color: var(--scrollbar-thumb); } .scroll-area-thumb:hover { background-color: var(--scrollbar-thumb-hover); } .phase-timeline-scroll::-webkit-scrollbar { width: 6px; } .phase-timeline-scroll::-webkit-scrollbar-track { background: #0000000d; border-radius: 3px; } .phase-timeline-scroll::-webkit-scrollbar-thumb { background: #0003; border-radius: 3px; } .phase-timeline-scroll::-webkit-scrollbar-thumb:hover { background: #0000004d; } .dark .phase-timeline-scroll::-webkit-scrollbar-track { background: #ffffff0d; } .dark .phase-timeline-scroll::-webkit-scrollbar-thumb { background: #fff3; } .dark .phase-timeline-scroll::-webkit-scrollbar-thumb:hover { background: #ffffff4d; } .a-tag a { color: var(--color-brand); } .vibe-border { border-style: var(--tw-border-style); border-width: 1px; border-color: var(--build-chat-colors-border-primary); } @supports (color: color-mix(in lab, red, red)) { .vibe-border { border-color: color-mix(in oklab, var(--build-chat-colors-border-primary) 60%, transparent); } } .vibe-border-thick { border-style: var(--tw-border-style); border-width: 2px; border-color: var(--build-chat-colors-border-primary); } @supports (color: color-mix(in lab, red, red)) { .vibe-border-thick { border-color: color-mix(in oklab, var(--build-chat-colors-border-primary) 60%, transparent); } } .vibe-shadow { box-shadow: 0 1px 2px #0000000d; } .vibe-shadow-md { box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f; } .vibe-shadow-lg { box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d; } .vibe-hover { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); --tw-duration: .15s; --tw-ease: cubic-bezier(.4, 0, .2, 1); transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .vibe-active:active { opacity: .92; } .marquee { position: relative; overflow: hidden; } .marquee__track { white-space: nowrap; gap: 2rem; animation: 18s linear infinite marquee-move; display: flex; } @keyframes marquee-move { from { transform: translateX(0); } to { transform: translateX(-50%); } } .dark .marquee__track { animation-duration: 16s; } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } .prose { --tw-prose-th-headers: --value(var(--color-text)); --tw-prose-body: --value(var(--color-text)); --tw-prose-headings: --value(var(--color-text)); --tw-prose-code: --value(var(--color-text)); --tw-prose-bold: --value(var(--color-text)); --tw-prose-quotes: --value(var(--color-text)); --tw-prose-counters: --value(var(--color-text)); } .prose.font-serif { font-family: var(--font-serif); } .prose.font-serif code { font-family: var(--font-mono); } .chat-messages-scroll::-webkit-scrollbar { width: 8px; } .chat-messages-scroll::-webkit-scrollbar-track { background: none; } .chat-messages-scroll::-webkit-scrollbar-thumb { background: #0000001a; border-radius: 4px; } .chat-messages-scroll::-webkit-scrollbar-thumb:hover { background: #00000026; } .dark .chat-messages-scroll::-webkit-scrollbar-thumb { background: #ffffff26; } .dark .chat-messages-scroll::-webkit-scrollbar-thumb:hover { background: #fff3; } .terminal-scroll::-webkit-scrollbar { width: 8px; } .terminal-scroll::-webkit-scrollbar-track { background: #0000000d; border-radius: 4px; } .terminal-scroll::-webkit-scrollbar-thumb { background: #00000026; border-radius: 4px; transition: background-color .2s; } .terminal-scroll::-webkit-scrollbar-thumb:hover { background: #00000040; } .dark .terminal-scroll::-webkit-scrollbar-track { background: #ffffff0d; } .dark .terminal-scroll::-webkit-scrollbar-thumb { background: #ffffff26; } .dark .terminal-scroll::-webkit-scrollbar-thumb:hover { background: #ffffff40; } .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } [data-mindalike-ai-composer="true"].mindalike-ai-composer-shell { isolation: isolate; background-color: var(--mindalike-ai-composer-bg); border: 1px solid var(--mindalike-ai-composer-border-color); border-radius: var(--mindalike-ai-composer-radius); box-shadow: var(--mindalike-ai-composer-shadow); transition: box-shadow .1s ease-out, border-color .1s ease-out; } [data-mindalike-ai-composer="true"].mindalike-ai-composer-shell:focus-within { box-shadow: var(--mindalike-ai-composer-shadow-focus); border-color: #0000; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-inner { padding-top: var(--mindalike-ai-composer-pad-top); } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-inset { padding-left: var(--mindalike-ai-composer-pad-x); padding-right: var(--mindalike-ai-composer-pad-x); } [data-mindalike-ai-composer="true"] textarea.mindalike-ai-composer-textarea { appearance: none; width: 100%; padding-left: var(--mindalike-ai-composer-pad-x); padding-right: var(--mindalike-ai-composer-pad-x); padding-top: 0; padding-bottom: var(--mindalike-ai-composer-textarea-pad-bottom); box-shadow: none; color: var(--color-text-primary); caret-color: var(--mindalike-ai-composer-accent); font-size: var(--mindalike-ai-composer-font-size); line-height: var(--mindalike-ai-composer-line-height); letter-spacing: 0; font-weight: 400; font-family: var(--font-body), ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; background-color: #0000; background-image: none; border: 0; border-radius: 0; outline: none; margin: 0; } [data-mindalike-ai-composer="true"] textarea.mindalike-ai-composer-textarea::placeholder { color: var(--color-text-primary); opacity: .48; } [data-mindalike-ai-composer="true"] textarea.mindalike-ai-composer-textarea::selection { background-color: var(--mindalike-ai-composer-selection-bg); } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-bar { justify-content: space-between; align-items: center; gap: var(--mindalike-ai-composer-toolbar-gap); min-width: 0; padding: var(--mindalike-ai-composer-bar-pad-y) var(--mindalike-ai-composer-bar-pad-x); border-top: 1px solid var(--mindalike-ai-composer-bar-divider); display: flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-bar-actions { align-items: center; gap: var(--mindalike-ai-composer-toolbar-gap); flex-shrink: 0; display: flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-model-label { height: var(--mindalike-ai-composer-icon-size); color: var(--color-text-tertiary); -webkit-user-select: none; user-select: none; flex-shrink: 0; justify-content: center; align-items: center; padding: 0 2px; font-size: 12px; font-weight: 400; line-height: 1; display: inline-flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-toolbar-btn { width: var(--mindalike-ai-composer-icon-size); height: var(--mindalike-ai-composer-icon-size); color: var(--color-text-tertiary); background: none; border: 1px solid #0000; border-radius: 6px; flex-shrink: 0; justify-content: center; align-items: center; font-weight: 400; transition: background-color .1s ease-out, border-color .1s ease-out, color .1s ease-out; display: inline-flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-toolbar-btn:hover:not(:disabled) { background-color: var(--color-bg-4); border-color: var(--mindalike-ai-composer-send-border); color: var(--color-text-primary); } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-toolbar-btn:disabled { cursor: not-allowed; opacity: .45; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-send-btn { width: var(--mindalike-ai-composer-icon-size); height: var(--mindalike-ai-composer-icon-size); border: 1px solid var(--mindalike-ai-composer-send-border); background-color: var(--mindalike-ai-composer-send-bg); color: var(--color-text-primary); border-radius: 9999px; flex-shrink: 0; justify-content: center; align-items: center; font-weight: 400; transition: background-color .1s ease-out, border-color .1s ease-out, transform 80ms ease-out; display: inline-flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-send-btn:hover:not(:disabled) { background-color: var(--mindalike-ai-composer-send-bg-hover); } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-send-btn:active:not(:disabled) { transform: scale(.97); } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-send-btn:disabled { cursor: not-allowed; opacity: .4; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-apps { padding: 8px var(--mindalike-ai-composer-pad-x) 12px; border-top: 1px solid var(--mindalike-ai-composer-bar-divider); flex-wrap: wrap; align-items: center; gap: 8px 10px; display: flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-apps-chips { flex-shrink: 0; align-items: center; gap: 6px; display: flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-apps-chip { color: var(--color-text-secondary); background-color: var(--color-bg-3); border: 1px solid var(--mindalike-ai-composer-send-border); border-radius: 4px; align-items: center; padding: 2px 6px; font-size: 11px; font-weight: 500; line-height: 14px; display: inline-flex; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-apps-copy { min-width: 0; color: var(--color-text-secondary); flex: 140px; margin: 0; font-size: 12px; font-weight: 400; line-height: 16px; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-apps-dismiss { color: var(--color-text-tertiary); cursor: pointer; background: none; border: none; border-radius: 4px; flex-shrink: 0; margin: 0; padding: 2px 6px; font-size: 12px; font-weight: 400; line-height: 16px; transition: color .1s ease-out, background-color .1s ease-out; } [data-mindalike-ai-composer="true"] .mindalike-ai-composer-apps-dismiss:hover { color: var(--color-text-secondary); background-color: var(--color-bg-3); } @media (prefers-reduced-motion: reduce) { [data-mindalike-ai-composer="true"] .mindalike-ai-composer-send-btn:active:not(:disabled) { transform: none; } } img.bg-blend-logo { filter: brightness(0) invert(); opacity: .85; transition: opacity .2s; } img.bg-blend-logo:hover { opacity: 1; } img.bg-blend-logo-opaque { filter: grayscale() invert() brightness(2); mix-blend-mode: screen; opacity: .85; transition: opacity .2s; } img.bg-blend-logo-opaque:hover { opacity: 1; } @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-translate-z { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-rotate-x { syntax: "*"; inherits: false } @property --tw-rotate-y { syntax: "*"; inherits: false } @property --tw-rotate-z { syntax: "*"; inherits: false } @property --tw-skew-x { syntax: "*"; inherits: false } @property --tw-skew-y { syntax: "*"; inherits: false } @property --tw-space-y-reverse { syntax: "*"; inherits: false; initial-value: 0; } @property --tw-border-style { syntax: "*"; inherits: false; initial-value: solid; } @property --tw-gradient-position { syntax: "*"; inherits: false } @property --tw-gradient-from { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-via { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-to { syntax: ""; inherits: false; initial-value: #0000; } @property --tw-gradient-stops { syntax: "*"; inherits: false } @property --tw-gradient-via-stops { syntax: "*"; inherits: false } @property --tw-gradient-from-position { syntax: ""; inherits: false; initial-value: 0%; } @property --tw-gradient-via-position { syntax: ""; inherits: false; initial-value: 50%; } @property --tw-gradient-to-position { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-leading { syntax: "*"; inherits: false } @property --tw-font-weight { syntax: "*"; inherits: false } @property --tw-tracking { syntax: "*"; inherits: false } @property --tw-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-shadow-color { syntax: "*"; inherits: false } @property --tw-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-inset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-shadow-color { syntax: "*"; inherits: false } @property --tw-inset-shadow-alpha { syntax: ""; inherits: false; initial-value: 100%; } @property --tw-ring-color { syntax: "*"; inherits: false } @property --tw-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-inset-ring-color { syntax: "*"; inherits: false } @property --tw-inset-ring-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-ring-inset { syntax: "*"; inherits: false } @property --tw-ring-offset-width { syntax: ""; inherits: false; initial-value: 0; } @property --tw-ring-offset-color { syntax: "*"; inherits: false; initial-value: #fff; } @property --tw-ring-offset-shadow { syntax: "*"; inherits: false; initial-value: 0 0 #0000; } @property --tw-backdrop-blur { syntax: "*"; inherits: false } @property --tw-backdrop-brightness { syntax: "*"; inherits: false } @property --tw-backdrop-contrast { syntax: "*"; inherits: false } @property --tw-backdrop-grayscale { syntax: "*"; inherits: false } @property --tw-backdrop-hue-rotate { syntax: "*"; inherits: false } @property --tw-backdrop-invert { syntax: "*"; inherits: false } @property --tw-backdrop-opacity { syntax: "*"; inherits: false } @property --tw-backdrop-saturate { syntax: "*"; inherits: false } @property --tw-backdrop-sepia { syntax: "*"; inherits: false } @property --tw-duration { syntax: "*"; inherits: false } @property --tw-ease { syntax: "*"; inherits: false } @property --tw-scale-x { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-y { syntax: "*"; inherits: false; initial-value: 1; } @property --tw-scale-z { syntax: "*"; inherits: false; initial-value: 1; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 50% { opacity: .5; } } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0)scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1))rotate(var(--tw-enter-rotate, 0)); filter: blur(var(--tw-enter-blur, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0)scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1))rotate(var(--tw-exit-rotate, 0)); filter: blur(var(--tw-exit-blur, 0)); } }