@property --gradient-angle{syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}@layer tokens,base,components,utilities,animations;.article-link--card { background-color: transparent; border-color: rgb(var(--color-neutral-300)); } .dark .article-link--card { border-color: rgb(var(--color-neutral-600)); } @layer components { .footer-meta { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem 1rem; margin-inline-start: auto; padding-inline-start: 1rem; text-align: end; } .footer-meta p { margin: 0; } .footer-build { white-space: nowrap; } } @layer tokens { :root { --font-sans: sans-serif; --font-mono: ui-monospace, monospace; --surface-0: rgba(var(--color-neutral-50), 0.85); --surface-1: rgba(var(--color-neutral-200), 0.15); --surface-2: rgba(var(--color-neutral-200), 0.3); --text-primary: rgb(var(--color-neutral)); --text-secondary: rgb(var(--color-neutral-400)); --accent-1: #ff00ff; --accent-2: #00ffff; --accent-3: #ff0080; --accent-1-dark: #cc00cc; --accent-3-dark: #cc0066; --halo-1: #00d4aa; --halo-2: #4caf50; --halo-3: #8bc34a; --halo-1-hover: #00e6cc; --halo-2-hover: #66bb6a; --halo-3-hover: #9ccc65; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.12); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2); --shadow-accent: 0 0 20px rgba(255, 0, 255, 0.3); --shadow-accent-hover: 0 0 30px rgba(255, 0, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.4); --shadow-halo: 0 0 20px rgba(0, 212, 170, 0.3), 0 0 40px rgba(0, 212, 170, 0.1); --shadow-halo-hover: 0 0 35px rgba(0, 212, 170, 0.7), 0 0 70px rgba(0, 212, 170, 0.3); --blur-static: blur(10px); --motion-fast: 0.2s; --motion-base: 0.3s; --motion-slow: 0.6s; --ease-out: cubic-bezier(0.4, 0, 0.2, 1); } .dark { --surface-0: rgba(var(--color-neutral-800), 0.85); --surface-2: rgba(var(--color-neutral-700), 0.3); } } @layer base { html { scroll-behavior: smooth; font-family: var(--font-sans); scroll-padding-top: var(--header-offset, 0); position: relative; min-height: 100vh; } html::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 65% 15%, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle at 90% 40%, rgba(255, 255, 255, 0.5) 1px, transparent 1px), radial-gradient(circle at 40% 60%, rgba(255, 255, 255, 0.8) 1px, transparent 1px), radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7) 1px, transparent 1px), radial-gradient(circle at 85% 85%, rgba(255, 255, 255, 0.5) 1px, transparent 1px), radial-gradient(circle at 15% 60%, rgba(255, 255, 255, 0.6) 1px, transparent 1px), radial-gradient(circle at 55% 25%, rgba(255, 255, 255, 0.8) 1px, transparent 1px); background-size: 200px 200px, 300px 300px, 250px 250px, 400px 400px, 350px 350px, 180px 180px, 320px 320px, 280px 280px, 220px 220px, 380px 380px; animation: starsMove 60s linear infinite paused; pointer-events: none; z-index: -1; will-change: transform; } html.stars-running::before { animation-play-state: running; } html.disable-stars::before { display: none; } } @layer utilities { html.disable-blur, html.disable-blur *, html.disable-blur *::before, html.disable-blur *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html.disable-blur #menu-blur, html.disable-blur #background-blur { display: none !important; } } @layer components { .contact, .contact__success { width: 100%; margin: 1rem 0; padding: 0; } .contact { --contact-bg: var(--surface-1); --contact-surface: var(--surface-0); --contact-border: var(--surface-2); --contact-text: var(--text-primary); --contact-muted: var(--text-secondary); --contact-focus: rgb(var(--color-primary-500)); } .contact__card { background: var(--contact-bg); border: 1px solid var(--contact-border); border-radius: 10px; padding: 1.5rem; color: var(--contact-text); transition: border-color var(--motion-fast) var(--ease-out); contain: layout style; } .contact__card:hover { border-color: rgba(var(--color-primary-500), 0.35); } .contact__label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--contact-muted); margin-bottom: 0.5rem; } .contact__input { width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--contact-border); border-radius: 8px; font-size: 1rem; background-color: var(--contact-surface); color: var(--contact-text); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .contact__input:focus { outline: none; border-color: var(--contact-focus); box-shadow: 0 0 0 2px rgba(var(--color-primary-500), 0.25); background-color: rgba(var(--color-neutral-800), 0.7); } .contact__input:hover { border-color: rgba(var(--color-neutral-500), 0.7); } .contact__input::-moz-placeholder { color: color-mix(in srgb, var(--contact-muted) 70%, transparent); } .contact__input::placeholder { color: color-mix(in srgb, var(--contact-muted) 70%, transparent); } .contact__input--resizable { resize: vertical; min-height: 120px; } .contact__submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 0.75rem 1.25rem; background: linear-gradient(135deg, var(--accent-1), var(--accent-2), var(--accent-3)); background-size: 200% 200%; animation: gradientShift 3s ease-in-out infinite; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 1px; position: relative; overflow: hidden; box-shadow: 0 0 20px rgba(255, 0, 255, 0.3); transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .contact__submit:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 4px 20px rgba(255, 0, 255, 0.5); } .contact__submit:active { transform: translateY(0); } .contact__submit:focus-visible { outline: 2px solid rgba(var(--color-primary-500), 0.5); outline-offset: 2px; } .contact__success-card { background: var(--surface-1); border: 1px solid var(--surface-2); border-radius: 12px; padding: 1.5rem; animation: fadeIn 0.35s var(--ease-out); } .intro__avatar { position: relative; border: 2px solid rgba(255, 255, 255, 0.9); background: conic-gradient(from var(--gradient-angle), var(--halo-1), var(--halo-2), var(--halo-3), var(--halo-1)); border-radius: 50%; padding: 3px; box-shadow: var(--shadow-halo), inset 0 0 0 2px rgba(255, 255, 255, 0.1); display: block; -o-object-fit: cover; object-fit: cover; will-change: transform; transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); contain: layout style paint; } .intro__avatar:hover { box-shadow: var(--shadow-halo-hover), inset 0 0 0 2px rgba(255, 255, 255, 0.3); transform: scale(1.05); --gradient-angle: 180deg; } .chat-widget { --launcher-inline-offset: 2rem; --chat-bg: rgb(var(--color-neutral)); --chat-panel: rgb(var(--color-neutral-100)); --chat-border: rgb(var(--color-neutral-300)); --chat-text: rgb(var(--color-neutral-800)); --chat-muted: rgb(var(--color-neutral-500)); --chat-accent: rgb(var(--color-primary-600)); --chat-accent-hover: rgb(var(--color-primary-700)); --chat-user-bg: rgba(var(--color-primary-400), 0.15); --chat-user-text: rgb(var(--color-primary-800)); --launcher-bg: rgb(var(--color-neutral-50)); --launcher-text: rgb(var(--color-primary-600)); --launcher-border: rgba(var(--color-primary-500), 0.5); display: contents; font-family: inherit; } .dark .chat-widget { --chat-bg: rgb(var(--color-neutral-800)); --chat-panel: rgb(var(--color-neutral-700)); --chat-border: rgb(var(--color-neutral-600)); --chat-text: rgb(var(--color-neutral-200)); --chat-muted: rgb(var(--color-neutral-300)); --chat-accent: rgb(var(--color-primary-600)); --chat-accent-hover: rgb(var(--color-primary-700)); --chat-user-bg: rgba(var(--color-primary-400), 0.15); --chat-user-text: rgb(var(--color-primary-200)); --launcher-bg: rgb(var(--color-neutral-800)); --launcher-text: rgb(var(--color-primary-200)); --launcher-border: rgba(var(--color-primary-400), 0.6); } .chat-widget .toggle { position: fixed; inset-block-end: 5.5rem; inset-inline-end: var(--launcher-inline-offset); z-index: 999; background: linear-gradient(rgba(var(--color-primary-400), 0.28), rgba(var(--color-primary-400), 0.12)), var(--launcher-bg); color: var(--launcher-text); border: 2px solid var(--launcher-border); border-radius: 9999px; box-sizing: border-box; height: 3rem; padding: 0 1.125rem; gap: 0.5rem; font: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; box-shadow: 0 0 28px 6px rgba(var(--color-primary-400), 0.6), 0 20px 72px 20px rgba(var(--color-neutral-900), 0.5), 0 6px 24px 6px rgba(var(--color-neutral-900), 0.35), 0 0 0 1px rgba(var(--color-primary-400), 0.2), 0 0 22px rgba(var(--color-primary-400), 0.35); transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .chat-widget .toggle::before, .chat-widget .toggle::after { content: ''; position: absolute; inset: -4px; border: 1px solid rgba(var(--color-primary-400), 0.65); border-radius: inherit; pointer-events: none; opacity: 0; animation: launcherSignal 2s var(--ease-out) infinite; } .chat-widget .toggle::after { animation-delay: 0.7s; border-color: rgba(var(--color-secondary-400), 0.5); } .chat-widget .toggle[aria-expanded='true']::before, .chat-widget .toggle[aria-expanded='true']::after { animation: none; } @media (prefers-reduced-motion: reduce) { .chat-widget .toggle::before, .chat-widget .toggle::after { animation: none; } } .chat-widget .toggle:hover { border-color: var(--launcher-text); box-shadow: 0 0 32px 8px rgba(var(--color-primary-400), 0.75), 0 20px 72px 20px rgba(var(--color-neutral-900), 0.5), 0 6px 24px 6px rgba(var(--color-neutral-900), 0.35), 0 0 0 1px rgba(var(--color-primary-400), 0.3), 0 0 28px rgba(var(--color-primary-400), 0.45); } .chat-widget .toggle:focus-visible { outline: 2px solid var(--launcher-text); outline-offset: 3px; } @media (min-width: 1280px) { .chat-widget .toggle { height: 3.25rem; padding-inline: 1.25rem; font-size: 1rem; } } .chat-widget dialog.window { margin: 0; padding: 0; border: 1px solid var(--chat-border); color: var(--chat-text); position: fixed; inset: auto 2rem 10rem auto; inset-inline-end: var(--launcher-inline-offset); width: min(480px, calc(100vw - 4rem)); height: min(720px, calc(100vh - 12rem)); max-width: none; max-height: calc(100vh - 12rem); z-index: 9999; background: var(--chat-bg); border-radius: 1rem; box-shadow: var(--shadow-lg); container-type: inline-size; container-name: chat-window; opacity: 0; transform: translateY(20px); transition: opacity var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out), overlay var(--motion-base) allow-discrete, display var(--motion-base) allow-discrete; contain: layout style; } .chat-widget dialog.window[open] { display: flex; flex-direction: column; opacity: 1; transform: translateY(0); } @starting-style { .chat-widget dialog.window[open] { opacity: 0; transform: translateY(20px); } } .chat-widget dialog.window::backdrop { background: transparent; } @container chat-window (max-inline-size: 320px) { .chat-widget .message { max-inline-size: 95%; } .chat-widget .header, .chat-widget .messages, .chat-widget .input-area { padding-inline: 0.875rem; } } .chat-widget .header { min-height: -moz-fit-content; min-height: fit-content; padding: 1rem 1.25rem; background: var(--chat-panel); border-block-end: 1px solid var(--chat-border); color: var(--chat-text); font-weight: 600; font-size: 0.95rem; display: flex; justify-content: space-between; align-items: center; border-start-start-radius: 1rem; border-start-end-radius: 1rem; flex-shrink: 0; } .chat-widget .header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .chat-widget .assistant-heading { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .chat-widget .chat-models { min-width: 0; color: var(--chat-muted); font-weight: 400; line-height: 1.35; overflow-wrap: anywhere; } .chat-widget .chat-models small { display: block; font-size: 0.6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-widget .response-metrics { display: block; margin-block-start: 0.6rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--chat-border); color: var(--chat-muted); font-size: 0.65rem; line-height: 1.45; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .chat-widget .metrics-details { display: inline; } .chat-widget .metrics-details summary { display: inline; cursor: pointer; font-weight: 700; } .chat-widget .metrics-details summary::after { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; margin-inline-start: 0.35rem; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: translateY(-0.1rem) rotate(45deg); } .chat-widget .metrics-details[open] summary::after { transform: translateY(0.1rem) rotate(225deg); } .chat-widget .metrics-details summary::-webkit-details-marker { display: none; } .chat-widget .metrics-details summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .chat-widget .metrics-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 0.75rem; margin-block: 0.5rem; font-variant-numeric: tabular-nums; } .chat-widget .metrics-timing-row { display: flex; justify-content: space-between; gap: 0.25rem; } .chat-widget .metrics-grid table { width: 100%; margin: 0; font-size: inherit; } .chat-widget .metrics-grid th, .chat-widget .metrics-grid td { padding: 0 0.2rem; border: none; text-align: right; font-weight: 400; } .chat-widget .metrics-grid th:first-child { text-align: left; padding-inline-start: 0; } .chat-widget .metrics-grid thead th { font-weight: 600; } .chat-widget .metrics-warning { display: block; margin-block-start: 0.35rem; font-size: inherit; } .chat-widget .response-evidence { margin-block-start: 0.75rem; border-block-start: 1px solid var(--chat-border); padding-block-start: 0.5rem; font-size: 0.75rem; } .chat-widget .response-evidence summary { cursor: pointer; font-weight: 600; } .chat-widget .evidence-card { margin-block-start: 0.5rem; } .chat-widget .evidence-excerpt { white-space: pre-wrap; max-height: 12rem; overflow: auto; font: inherit; background: var(--chat-bg); padding: 0.5rem; border-radius: 0.5rem; } .chat-widget .chat-starters { display: grid; flex: 1; align-content: center; justify-items: center; gap: 0.75rem; padding-block: 1.5rem; } .chat-widget .evidence-diagram { overflow-x: auto; background: white; border-radius: 0.5rem; padding: 0.5rem; } .chat-widget .evidence-diagram svg { display: block; min-width: 20rem; max-width: 100%; height: auto; } .chat-widget .chat-starters button, .chat-widget .chat-retry { border: 1px solid var(--chat-border); border-radius: 0.5rem; padding: 0.5rem 0.65rem; color: var(--chat-text); background: var(--chat-panel); cursor: pointer; font-size: 0.75rem; } .chat-widget .chat-starters button { width: min(100%, 22rem); min-height: 2.75rem; padding: 0.75rem 1rem; border-color: rgba(var(--color-primary-400), 0.35); background: linear-gradient(rgba(var(--color-primary-400), 0.08), rgba(var(--color-primary-400), 0.08)), var(--chat-panel); color: var(--chat-text); font-size: 0.875rem; font-weight: 600; text-align: center; transition: border-color var(--motion-fast) var(--ease-out); } .chat-widget .chat-starters button:hover { background: linear-gradient(rgba(var(--color-primary-400), 0.16), rgba(var(--color-primary-400), 0.16)), var(--chat-panel); border-color: rgba(var(--color-primary-400), 0.65); } .chat-widget .chat-retry { margin-block-start: 0.5rem; } .chat-widget .chat-starters button:focus-visible, .chat-widget .chat-retry:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; } .chat-widget .response-evidence summary:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; } .chat-widget .metrics-explanation { display: block; margin-block: 0.5rem; font-size: inherit; } .chat-widget .header-btn { background: transparent; border: none; color: var(--chat-muted); cursor: pointer; width: 2.75rem; height: 2.75rem; border-radius: 0.5rem; display: flex; align-items: center; justify-content: center; transition: background var(--motion-fast) var(--ease-out); -webkit-tap-highlight-color: transparent; } .chat-widget .header-btn:hover { background: var(--chat-bg); color: var(--chat-text); } .chat-widget .header-btn--close { background: var(--chat-bg); border: 1px solid var(--chat-border); color: var(--chat-text); border-radius: 50%; } .chat-widget .header-btn--close:hover { border-color: var(--chat-accent); color: var(--chat-accent); } .chat-widget .header-btn:active { transform: scale(0.95); } .chat-widget .header-btn:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; } .chat-widget .messages { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; color: var(--chat-text); scroll-behavior: auto; scrollbar-gutter: stable; scrollbar-color: var(--chat-border) var(--chat-bg); overflow-anchor: none; } .chat-widget .transcript { display: flex; flex-direction: column; gap: 0.875rem; min-height: 100%; } .chat-widget [hidden] { display: none !important; } .chat-widget .latest { align-self: center; flex-shrink: 0; margin: 0.5rem; padding: 0.5rem 1rem; border: 1px solid var(--chat-border); border-radius: 9999px; background: var(--chat-panel); color: var(--chat-text); cursor: pointer; } .chat-widget .chat-status { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .chat-widget .latest:focus-visible, .chat-widget .send:focus-visible, .chat-widget .messages:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } .chat-widget .messages::-webkit-scrollbar { width: 8px; } .chat-widget .messages::-webkit-scrollbar-track { background: transparent; } .chat-widget .messages::-webkit-scrollbar-thumb { background: var(--chat-border); border-radius: 4px; border: 2px solid transparent; background-clip: padding-box; } .chat-widget .messages::-webkit-scrollbar-thumb:hover { background: var(--chat-muted); background-clip: padding-box; } .chat-widget .message { flex-shrink: 0; min-width: 0; padding: 0.75rem 1rem; border-radius: 1rem; max-width: 85%; font-size: 0.9rem; line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere; animation: messageSlideIn var(--motion-fast) var(--ease-out); } .chat-widget .message--user { white-space: pre-wrap; } .chat-widget .message pre { max-width: 100%; overflow-x: auto; white-space: pre; } .chat-widget .message p + p { margin-block-start: 0.75rem; } .chat-widget .message--bot { background: var(--chat-panel); color: var(--chat-text); border: 1px solid var(--chat-border); align-self: flex-start; margin-inline-end: auto; border-end-start-radius: 0.25rem; } .chat-widget .message--user { background: var(--chat-user-bg); color: var(--chat-user-text); border: 1px solid var(--chat-border); align-self: flex-end; margin-inline-start: auto; border-end-end-radius: 0.25rem; } .chat-widget .message a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; } .chat-widget .message--loading { opacity: 0.7; } .chat-widget .message--loading::after { content: ''; display: inline-block; width: 3px; height: 1em; margin-inline-start: 0.25rem; background: currentColor; animation: blink 1s steps(1) infinite; } .chat-widget .input-area { padding: 0.75rem 1rem; border-block-start: 1px solid var(--chat-border); display: flex; gap: 0.75rem; flex-shrink: 0; background: var(--chat-bg); border-end-start-radius: 1rem; border-end-end-radius: 1rem; contain: layout style; } .chat-widget .input { field-sizing: content; flex: 1; min-width: 0; padding: 0.65rem 0.875rem; border: 1.5px solid var(--chat-border); border-radius: 0.75rem; background: var(--chat-panel); color: var(--chat-text); font-size: 0.9rem; line-height: 1.5; transition: border-color var(--motion-fast) var(--ease-out); resize: none; min-height: 2.5rem; max-height: 6rem; } .chat-widget .input::-moz-placeholder { color: var(--chat-muted); } .chat-widget .input::placeholder { color: var(--chat-muted); } .chat-widget .input:focus { outline: 2px solid var(--chat-accent); outline-offset: 2px; border-color: var(--chat-accent); } .chat-widget .send { background: var(--chat-accent); color: white; border: none; border-radius: 0.75rem; padding: 0.65rem 1.25rem; min-height: 2.75rem; font-weight: 600; cursor: pointer; transition: background var(--motion-fast) var(--ease-out); align-self: flex-end; -webkit-tap-highlight-color: transparent; } .chat-widget .send:hover:not(:disabled) { background: var(--chat-accent-hover); } .chat-widget .send:active:not(:disabled) { transform: translateY(0); } .chat-widget .send:focus-visible { outline: 2px solid var(--chat-accent); outline-offset: 2px; } .chat-widget .send:disabled { opacity: 0.5; cursor: not-allowed; } .intro__container { display: grid; gap: 1.5rem; } .intro__content { padding: 1.5rem; background: var(--surface-1); border-radius: 1.25rem; border: 1px solid var(--surface-2); animation: fadeIn var(--motion-slow) var(--ease-out) 0.15s both; text-align: center; contain: layout style; } .intro__content p { color: var(--text-primary); font-size: clamp(0.95rem, 2vw, 1.125rem); line-height: 1.7; margin: 0; } .intro__typing { font-family: var(--font-mono); font-weight: 400; font-size: clamp(1rem, 2.5vw, 1.5rem); color: var(--text-primary); margin-block-start: 1rem; display: inline-block; } .intro__typing::after { content: '|'; color: rgb(var(--color-primary-500)); animation: blink 1s steps(1) infinite; margin-inline-start: 4px; display: inline-block; } .chat-cta { --chip-text: rgb(var(--color-neutral-700)); --chip-accent: rgb(var(--color-primary-600)); --chip-border: rgba(var(--color-neutral-500), 0.2); --chip-background: rgba(var(--color-neutral-50), 0.65); display: grid; gap: 0.875rem; padding: 1.125rem 1.25rem; margin-block-start: 0; text-align: start; } .chat-cta__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .chat-cta__text { min-width: 0; display: grid; gap: 0.25rem; } .chat-cta__chips { display: grid; grid-template-columns: 1fr; gap: 0.5rem; list-style: none; padding: 0; margin: 0; text-align: start; } .dark .chat-cta { --chip-text: rgb(var(--color-neutral-100)); --chip-accent: rgb(var(--color-primary-300)); --chip-border: rgba(var(--color-neutral-400), 0.25); --chip-background: rgba(var(--color-neutral-800), 0.6); } .chat-cta__chip-item { display: contents; } .chat-cta__title { margin: 0; font-size: 1.1rem; color: var(--chip-text); font-weight: 600; } .chat-cta .chat-cta__subtitle { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--chip-text); } .chat-cta__chip { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-width: 0; min-height: 2.75rem; border: 1px solid var(--chip-border); background: var(--chip-background); color: var(--chip-accent); box-sizing: border-box; padding: 0.5rem 0.875rem; border-radius: 1rem; font: inherit; font-size: 0.875rem; line-height: 1.5; text-align: start; cursor: pointer; transition: transform var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); } .chat-cta__chip[hidden] { display: none; } .chat-cta__chip-label { flex: 1; min-width: 0; text-wrap: pretty; white-space: normal; overflow-wrap: anywhere; } .chat-cta__chip-icon { flex-shrink: 0; color: var(--chip-accent); } .chat-cta__chip:focus-visible { outline: 2px solid var(--chip-accent); outline-offset: 3px; } @media (hover: hover) { .chat-cta__chip:hover { transform: translateY(-2px); border-color: var(--chip-accent); box-shadow: var(--shadow-sm); } } .chat-cta__chip:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .chat-cta__chip:hover { transform: none; } } .chat-cta__btn { flex-shrink: 0; min-height: 2.75rem; background: rgb(var(--color-primary-600)); color: white; padding: 0.5rem 0.875rem; font-size: 0.875rem; border-radius: 9999px; border: none; cursor: pointer; font-weight: 600; white-space: nowrap; transition: transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out); display: inline-flex; align-items: center; gap: 0.5rem; } .chat-cta__btn:focus-visible { outline: 2px solid var(--chip-accent); outline-offset: 3px; } .chat-cta__btn:active { transform: scale(0.96); } .chat-cta__btn:hover { transform: translateY(-1px); } @media (min-width: 768px) { .contact, .contact__success { margin: 2rem 0; } .contact__card, .contact__success-card { padding: 2rem; } .contact__input { padding: 0.75rem 1rem; } .contact__submit { padding: 0.875rem 1.5rem; } .chat-cta__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.ai-chat-open { overflow: hidden; } .chat-widget .toggle { inset-block-end: 1rem; inset-inline-end: 1rem; } .chat-widget dialog.window { position: fixed; inset: 0; width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; transform: translateY(100%); border: none; } .chat-widget dialog.window[open] { transform: translateY(0); } @starting-style { .chat-widget dialog.window[open] { transform: translateY(100%); } } .chat-widget .header { min-height: -moz-fit-content; min-height: fit-content; padding: 1rem 1.5rem; padding-block-start: max(1rem, env(safe-area-inset-top)); border-radius: 0; } .chat-widget .messages { padding: 1rem 1.5rem; padding-block-end: max(1rem, env(safe-area-inset-bottom)); } .chat-widget .input-area { padding: 0.75rem 1.5rem; padding-block-end: max(1rem, env(safe-area-inset-bottom)); border-radius: 0; } .chat-widget .input { field-sizing: content; font-size: 16px; } } } @layer animations { @keyframes starsMove { to { transform: translateY(-100px); } } @keyframes rotate { to { transform: rotate(360deg); } } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes fadeIn { from { opacity: 0; } } @keyframes messageSlideIn { from { opacity: 0; transform: translateY(8px); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes launcherSignal { 0% { opacity: 0; transform: scale(1); } 20% { opacity: 0.6; } 100% { opacity: 0; transform: scale(1.18, 1.4); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html::before { animation: none; opacity: 0.3; } } }